/* ============================================================
   FiveCore Mail — Roundcube Theme
   Light : bleu #2563EB  |  Dark : violet #8B5CF6
   Chargé après styles.min.css — surcharge tout via cascade
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* ══════════════════════════════════════════════════════
   DESIGN TOKENS — MODE CLAIR (défaut)
══════════════════════════════════════════════════════ */
:root {
  --fc-primary:       #2563EB;
  --fc-primary-dk:    #1D4ED8;
  --fc-primary-lt:    #DBEAFE;
  --fc-primary-50:    #EFF6FF;
  --fc-accent:        #0EA5E9;

  --fc-bg:            #FFFFFF;
  --fc-bg-2:          #F8FAFC;
  --fc-bg-3:          #F1F5F9;

  --fc-text:          #0F172A;
  --fc-text-2:        #334155;
  --fc-text-muted:    #64748B;

  --fc-border:        #E2E8F0;
  --fc-border-2:      #CBD5E1;

  --fc-card:          #FFFFFF;
  --fc-shadow:        0 1px 4px rgba(15,23,42,.07), 0 4px 16px rgba(15,23,42,.07);
  --fc-shadow-hov:    0 8px 32px rgba(37,99,235,.14), 0 2px 8px rgba(15,23,42,.08);

  --fc-nav:           #0F172A;
  --fc-nav-border:    #1E293B;

  --fc-input-bg:      #F8FAFC;
  --fc-input-border:  #CBD5E1;
  --fc-input-focus:   #2563EB;

  --fc-badge:         #2563EB;
  --fc-badge-text:    #FFFFFF;

  --fc-row-hover:     #EFF6FF;
  --fc-row-sel:       #DBEAFE;
  --fc-row-sel-text:  #0F172A;

  --fc-t: 0.2s cubic-bezier(.4,0,.2,1);
}

/* ══════════════════════════════════════════════════════
   DESIGN TOKENS — MODE SOMBRE
══════════════════════════════════════════════════════ */
html.dark-mode {
  --fc-primary:       #8B5CF6;
  --fc-primary-dk:    #7C3AED;
  --fc-primary-lt:    #2D1B69;
  --fc-primary-50:    #1A0F35;
  --fc-accent:        #A78BFA;

  --fc-bg:            #07041A;
  --fc-bg-2:          #0D0825;
  --fc-bg-3:          #130D2F;

  --fc-text:          #F1F5F9;
  --fc-text-2:        #CBD5E1;
  --fc-text-muted:    #94A3B8;

  --fc-border:        #1A0F35;
  --fc-border-2:      #2D1B69;

  --fc-card:          #0D0825;
  --fc-shadow:        0 1px 4px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.4);
  --fc-shadow-hov:    0 8px 40px rgba(139,92,246,.25), 0 2px 8px rgba(0,0,0,.5);

  --fc-nav:           #07041A;
  --fc-nav-border:    #1A0F35;

  --fc-input-bg:      #0D0825;
  --fc-input-border:  #2D1B69;
  --fc-input-focus:   #8B5CF6;

  --fc-badge:         #8B5CF6;
  --fc-badge-text:    #FFFFFF;

  --fc-row-hover:     #1A0F35;
  --fc-row-sel:       #2D1B69;
  --fc-row-sel-text:  #F1F5F9;
}

/* ══════════════════════════════════════════════════════
   BASE
══════════════════════════════════════════════════════ */

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  background: var(--fc-bg) !important;
  color: var(--fc-text) !important;
  transition: background var(--fc-t), color var(--fc-t);
}

h1, h2, h3, h4, h5 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
  color: var(--fc-text) !important;
  letter-spacing: -0.02em !important;
}

a { color: var(--fc-primary) !important; }
a:hover { color: var(--fc-primary-dk) !important; }

::-webkit-scrollbar             { width: 6px; height: 6px; }
::-webkit-scrollbar-track       { background: var(--fc-bg-2); border-radius: 3px; }
::-webkit-scrollbar-thumb       { background: var(--fc-border-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--fc-text-muted); }
scrollbar-color: var(--fc-border-2) var(--fc-bg-2);
scrollbar-width: thin;

/* ══════════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════════ */

#layout { background: var(--fc-bg) !important; }

#layout-list,
#layout-content,
#layout-sidebar {
  background: var(--fc-bg) !important;
  border-color: var(--fc-border) !important;
}

#layout > div > .header {
  background: var(--fc-bg-2) !important;
  border-bottom: 1px solid var(--fc-border) !important;
  color: var(--fc-text) !important;
  box-shadow: none !important;
}

#layout > div > .footer {
  background: var(--fc-bg-2) !important;
  border-top: 1px solid var(--fc-border) !important;
  color: var(--fc-text-muted) !important;
  font-weight: normal !important;
}

#layout > div > .header a.button,
#layout > div > .footer a.button {
  color: var(--fc-text-2) !important;
}

/* ══════════════════════════════════════════════════════
   TASK MENU (barre icônes verticale gauche)
══════════════════════════════════════════════════════ */

#taskmenu,
.taskmenu {
  background: var(--fc-nav) !important;
  border-right: 1px solid var(--fc-nav-border) !important;
}

@media screen and (max-width: 480px) {
  #taskmenu a {
    background: var(--fc-nav) !important;
    color: rgba(255,255,255,.75) !important;
    border-bottom: 1px solid var(--fc-nav-border) !important;
  }
  #taskmenu a:hover,
  #taskmenu a.selected {
    background: rgba(255,255,255,.06) !important;
    color: #fff !important;
  }
}

@media screen and (min-width: 481px) {
  #taskmenu a {
    color: rgba(255,255,255,.6) !important;
    border-radius: 8px !important;
    margin: 2px 4px !important;
    transition: background var(--fc-t), color var(--fc-t) !important;
  }
  #taskmenu a:hover {
    background: rgba(255,255,255,.09) !important;
    color: #fff !important;
  }
  #taskmenu a.selected {
    background: color-mix(in srgb, var(--fc-primary) 22%, transparent) !important;
    color: #fff !important;
  }
  #taskmenu a.selected:hover {
    background: color-mix(in srgb, var(--fc-primary) 30%, transparent) !important;
  }
  #taskmenu .special-buttons { background: var(--fc-nav) !important; }
  #taskmenu .action-buttons a {
    color: var(--fc-accent) !important;
    background: transparent !important;
  }
  #taskmenu .action-buttons a:hover {
    background: rgba(255,255,255,.09) !important;
  }
  #taskmenu a.logout { color: #F87171 !important; }
  #taskmenu a.logout:hover {
    color: #EF4444 !important;
    background: rgba(239,68,68,.10) !important;
  }
}

/* ══════════════════════════════════════════════════════
   PANNEAU DOSSIERS / MENU
══════════════════════════════════════════════════════ */

#layout-menu {
  background: var(--fc-bg-2) !important;
  border-right: 1px solid var(--fc-border) !important;
}

#layout-menu > .header,
#layout-menu .header {
  background: var(--fc-bg-2) !important;
  border-bottom: 1px solid var(--fc-border) !important;
}

.folderlist-header,
#mailboxlist .mailbox-section-header {
  background: var(--fc-bg-3) !important;
  color: var(--fc-text-muted) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  border-bottom: 1px solid var(--fc-border) !important;
}

#mailboxlist li a,
.mailboxlist li a {
  color: var(--fc-text-2) !important;
  font-size: .875rem !important;
  border-radius: 7px !important;
  transition: background var(--fc-t), color var(--fc-t) !important;
}

#mailboxlist li a:hover,
.mailboxlist li a:hover {
  background: var(--fc-row-hover) !important;
  color: var(--fc-primary) !important;
}

#mailboxlist li.selected > a,
.mailboxlist li.selected > a {
  background: var(--fc-row-sel) !important;
  color: var(--fc-primary) !important;
  font-weight: 600 !important;
}

.unreadcount,
.mailboxlist .unreadcount,
#mailboxlist .unreadcount {
  background: var(--fc-badge) !important;
  color: var(--fc-badge-text) !important;
  border-radius: 999px !important;
  padding: 1px 7px !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════
   TOOLBAR
══════════════════════════════════════════════════════ */

.toolbar a.button,
.toolbar .button,
#toolbar a.button,
#toolbar .button,
a.button {
  color: var(--fc-text-2) !important;
  border-radius: 7px !important;
  transition: background var(--fc-t), color var(--fc-t) !important;
}

.toolbar a.button:hover,
.toolbar .button:hover,
#toolbar a.button:hover,
#toolbar .button:hover {
  background: var(--fc-row-hover) !important;
  color: var(--fc-primary) !important;
}

.toolbar a.button.active,
.toolbar .button.active,
#toolbar a.button.active,
#toolbar .button.active {
  color: var(--fc-primary) !important;
  background: var(--fc-primary-50) !important;
}

/* ══════════════════════════════════════════════════════
   RECHERCHE
══════════════════════════════════════════════════════ */

.searchbar input,
.searchbar .input-group input,
#searchform input,
.searchinput {
  background: var(--fc-input-bg) !important;
  border-color: var(--fc-input-border) !important;
  color: var(--fc-text) !important;
  border-radius: 8px !important;
  transition: border-color var(--fc-t), box-shadow var(--fc-t) !important;
}

.searchbar input:focus,
#searchform input:focus {
  border-color: var(--fc-input-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-primary) 15%, transparent) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════════
   LISTE DE MESSAGES
══════════════════════════════════════════════════════ */

.listing,
.messagelist {
  background: var(--fc-bg) !important;
}

.listing td,
.messagelist td {
  border-bottom: 1px solid var(--fc-border) !important;
  color: var(--fc-text) !important;
}

.listing tr:hover td,
.messagelist tr:hover td {
  background: var(--fc-row-hover) !important;
}

.listing tr.selected td,
.messagelist tr.selected td {
  background: var(--fc-row-sel) !important;
  color: var(--fc-row-sel-text) !important;
}

.listing tr.focused td:first-child,
.messagelist tr.focused td:first-child {
  box-shadow: inset 3px 0 0 var(--fc-primary) !important;
}

.messagelist tr.unread td { font-weight: 600 !important; }

/* ══════════════════════════════════════════════════════
   BOUTONS
══════════════════════════════════════════════════════ */

.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary,
a.compose,
.compose.button,
#compose-button {
  background: var(--fc-primary) !important;
  border-color: var(--fc-primary-dk) !important;
  color: #fff !important;
  border-radius: 9px !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--fc-primary) 30%, transparent) !important;
  transition: background var(--fc-t), box-shadow var(--fc-t), transform var(--fc-t) !important;
}

.btn-primary:hover,
a.compose:hover,
.compose.button:hover,
#compose-button:hover {
  background: var(--fc-primary-dk) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--fc-primary) 40%, transparent) !important;
  transform: translateY(-1px);
}

.btn-secondary,
.btn-default,
button.btn-secondary,
button.btn-default {
  background: var(--fc-bg-3) !important;
  border-color: var(--fc-border-2) !important;
  color: var(--fc-text) !important;
  border-radius: 9px !important;
  font-family: 'Inter', sans-serif !important;
}

.btn-secondary:hover,
.btn-default:hover {
  background: var(--fc-border) !important;
}

.btn-danger { border-radius: 9px !important; }

/* ══════════════════════════════════════════════════════
   INPUTS / FORMULAIRES
══════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
textarea,
select {
  background: var(--fc-input-bg) !important;
  border-color: var(--fc-input-border) !important;
  color: var(--fc-text) !important;
  font-family: 'Inter', sans-serif !important;
  border-radius: 8px !important;
  transition: border-color var(--fc-t), box-shadow var(--fc-t) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--fc-input-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-primary) 15%, transparent) !important;
  outline: none !important;
}

::placeholder { color: var(--fc-text-muted) !important; }

.input-group-text,
.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
  background: var(--fc-bg-3) !important;
  border-color: var(--fc-input-border) !important;
  color: var(--fc-text-muted) !important;
}

label,
.propform td.title {
  color: var(--fc-text-2) !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
}

/* ══════════════════════════════════════════════════════
   PAGE DE CONNEXION
══════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   FIVECORE MAIL — PAGE LOGIN (Light + Dark)
   Layout : panneau formulaire (gauche) + panneau branding (droite)
   ════════════════════════════════════════════════════════════ */

/* ─ Reset page login ─ */
body.task-login, body.action-login { background: var(--fc-bg) !important; }

body.task-login #layout-content,
body.action-login #layout-content {
  display:         flex !important;
  flex-direction:  row !important;
  min-height:      100vh !important;
  width:           100% !important;
  max-width:       100% !important;
  padding:         0 !important;
  margin:          0 !important;
  gap:             0 !important;
  align-items:     stretch !important;
}

body.task-login #logo,
body.action-login #logo         { display: none !important; }
body.task-login .login-header,
body.action-login .login-header { display: none !important; }

/* ─ Panneau formulaire (gauche) ─ */
.fc-login-card {
  flex: 0 0 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 52px 44px;
  background: var(--fc-bg);
  overflow-y: auto;
  z-index: 2;
  border-right: 1px solid var(--fc-border);
}

/* Logo */
.fc-login-logo {
  display: inline-flex;
  margin-bottom: 32px;
  text-decoration: none !important;
}
.fc-login-logo-img {
  height: 34px !important;
  width: auto !important;
}
/* En mode sombre, le logo light.svg a du texte sombre → on l'inverse */
html.dark-mode .fc-login-logo-img { filter: brightness(0) invert(1) !important; }

/* Badge sécurité */
.fc-login-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(37,99,235,.07);
  border: 1px solid rgba(37,99,235,.15);
  border-radius: 9999px;
  padding: 5px 14px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #2563EB;
  margin-bottom: 22px;
  width: fit-content;
}
html.dark-mode .fc-login-badge {
  background: rgba(139,92,246,.1);
  border-color: rgba(139,92,246,.25);
  color: #A78BFA;
}

/* Titre + sous-titre */
.fc-login-title {
  font-family: 'Plus Jakarta Sans','Inter',system-ui,sans-serif !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  color: var(--fc-text) !important;
  margin: 0 0 6px !important;
  line-height: 1.2 !important;
}
.fc-login-sub {
  font-size: .875rem !important;
  color: var(--fc-text-muted) !important;
  margin: 0 0 28px !important;
}

/* ─ Formulaire Roundcube overrides ─ */
body.task-login #login-form,
body.action-login #login-form,
body.task-login .propform,
body.action-login .propform {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  width: 100% !important;
  margin: 0 !important;
}

body.task-login .propform table,
body.action-login .propform table { width: 100%; border-collapse: collapse; }
body.task-login .propform td,
body.action-login .propform td { padding: 0 0 4px; border: none; }
body.task-login .propform td:first-child,
body.action-login .propform td:first-child { display: block; }

body.task-login label,
body.action-login label,
body.task-login .propform td label,
body.action-login .propform td label {
  display: block !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: var(--fc-text-2) !important;
  margin-bottom: 5px !important;
}

body.task-login input[type="text"],
body.action-login input[type="text"],
body.task-login input[type="email"],
body.action-login input[type="email"],
body.task-login input[type="password"],
body.action-login input[type="password"],
body.task-login select,
body.action-login select {
  width: 100% !important;
  padding: 11px 14px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--fc-border) !important;
  background: var(--fc-input-bg) !important;
  color: var(--fc-text) !important;
  font-size: .9rem !important;
  font-family: 'Inter',system-ui !important;
  outline: none !important;
  transition: border-color .2s, box-shadow .2s !important;
  margin-bottom: 14px !important;
  box-sizing: border-box !important;
}
body.task-login input:focus,
body.action-login input:focus {
  border-color: var(--fc-input-focus) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important;
}
html.dark-mode body.task-login, body.action-login input:focus {
  box-shadow: 0 0 0 3px rgba(139,92,246,.15) !important;
}

body.task-login .btn-primary,
body.action-login .btn-primary,
body.task-login input[type="submit"],
body.action-login input[type="submit"],
body.task-login button[type="submit"],
body.action-login button[type="submit"],
body.task-login .input-group .btn,
body.action-login .input-group .btn,
body.task-login .formbuttons .button,
body.action-login .formbuttons .button {
  width: 100% !important;
  padding: 12px 24px !important;
  border-radius: 10px !important;
  background: var(--fc-primary) !important;
  color: #fff !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  margin-top: 6px !important;
  box-shadow: 0 4px 16px rgba(37,99,235,.3) !important;
  font-family: 'Inter',system-ui !important;
  transition: all .2s !important;
  letter-spacing: .01em !important;
  display: block !important;
  text-align: center !important;
}
body.task-login .btn-primary:hover,
body.action-login .btn-primary:hover,
body.task-login input[type="submit"]:hover,
body.action-login input[type="submit"]:hover {
  filter: brightness(1.05) !important;
  box-shadow: 0 6px 22px rgba(37,99,235,.45) !important;
  transform: translateY(-1px) !important;
}
html.dark-mode body.task-login, body.action-login .btn-primary,
html.dark-mode body.task-login, body.action-login input[type="submit"] {
  box-shadow: 0 4px 20px rgba(139,92,246,.4) !important;
}

#login-footer {
  margin-top: 14px;
  font-size: .78rem;
  text-align: center;
  color: var(--fc-text-muted) !important;
}
#login-footer a { color: var(--fc-primary) !important; }

/* Features sécurité */
.fc-login-features {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--fc-border);
}
.fc-lf-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--fc-text-muted);
}
.fc-lf-item svg { color: var(--fc-primary); flex-shrink: 0; }

/* Retour site */
.fc-login-back {
  margin-top: 18px;
  text-align: center;
}
.fc-login-back a {
  font-size: .8rem;
  color: var(--fc-text-muted) !important;
  text-decoration: none !important;
  transition: color .2s;
}
.fc-login-back a:hover { color: var(--fc-primary) !important; }

/* ─ Panneau branding (droite) ─ */
.fc-login-panel {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: linear-gradient(145deg, #0F2456 0%, #1D4ED8 48%, #0369A1 100%);
}
html.dark-mode .fc-login-panel {
  background: linear-gradient(145deg, #04000D 0%, #1A0548 48%, #2D1464 100%);
}

/* Canvas particules */
.fc-login-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}

/* Orbes */
.fc-login-panel-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  animation: lpo-float 10s ease-in-out infinite;
}
.fc-lpo-1 {
  width: 450px; height: 450px;
  background: radial-gradient(circle, rgba(99,102,241,.38), transparent 70%);
  top: -120px; right: -80px;
}
.fc-lpo-2 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(14,165,233,.28), transparent 70%);
  bottom: -80px; left: -50px;
  animation-delay: -5s;
}
html.dark-mode .fc-lpo-1 { background: radial-gradient(circle, rgba(139,92,246,.55), transparent 70%); }
html.dark-mode .fc-lpo-2 { background: radial-gradient(circle, rgba(99,102,241,.38), transparent 70%); }
@keyframes lpo-float {
  0%,100% { transform: translate(0,0); }
  50%      { transform: translate(18px,-22px); }
}

/* Contenu panneau */
.fc-login-panel-inner {
  position: relative;
  z-index: 1;
  padding: 52px;
  color: white;
}
.fc-login-panel-title {
  font-family: 'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  font-size: clamp(1.9rem, 2.8vw, 2.7rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
  margin-bottom: 20px;
}
.fc-login-accent {
  display: block;
  background: linear-gradient(135deg, #93C5FD 0%, #C4B5FD 50%, #67E8F9 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: lp-shimmer 4s linear infinite;
}
@keyframes lp-shimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.fc-login-panel-desc {
  font-size: .95rem;
  color: rgba(255,255,255,.68);
  line-height: 1.75;
  max-width: 360px;
  margin-bottom: 32px;
}

/* Badges de confiance dans le panneau */
.fc-login-panel-badges {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fc-lp-badge {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.fc-lp-badge-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fc-lp-icon-green  { background: rgba(74,222,128,.2);   color: #4ADE80; }
.fc-lp-icon-blue   { background: rgba(147,197,253,.2);  color: #93C5FD; }
.fc-lp-icon-purple { background: rgba(196,181,253,.2);  color: #C4B5FD; }
.fc-lp-icon-yellow { background: rgba(253,224,71,.18);  color: #FDE047; }
.fc-lp-badge-text  { display: flex; flex-direction: column; gap: 2px; }
.fc-lp-badge-title { font-size: .875rem; font-weight: 700; color: white; }
.fc-lp-badge-desc  { font-size: .78rem; color: rgba(255,255,255,.55); }

/* Tag France */
.fc-login-panel-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 9999px;
  padding: 7px 16px;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  margin-top: 28px;
}

/* ─ Mobile ─ */
@media (max-width: 767px) {
  body.task-login #layout-content,
  body.action-login #layout-content {
    flex-direction: column-reverse !important;
  }
  .fc-login-panel {
    flex: 0 0 auto;
    min-height: 180px;
  }
  .fc-login-panel-inner { padding: 28px 24px; }
  .fc-login-panel-desc  { display: none; }
  .fc-login-panel-badges { display: none; }
  .fc-login-card {
    flex: 1;
    padding: 32px 24px;
    border-right: none;
    border-top: 1px solid var(--fc-border);
  }
  .fc-login-features { display: none; }
}

/* ══ Logo Roundcube → FiveCore dans l'interface principale ══ */
#logo img[src*="logo"] { display: none !important; }
#logo {
  background-image: var(--fc-logo-url, url('/fivecore/logo.svg')) !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: left center !important;
  width: 140px !important;
  height: 36px !important;
}
html.dark-mode #logo {
  --fc-logo-url: url('/fivecore/logo-dark.svg');
}

/* Cacher le texte fallback Roundcube */
#logo .inner, #logo span { display: none !important; }

/* ══════════════════════════════════════════════════════
   LISTE DES MESSAGES
══════════════════════════════════════════════════════ */

#messagelist, .messages-list {
  background: var(--fc-bg) !important;
}

#messagelist thead th,
.messages-list thead th {
  background: var(--fc-bg-2) !important;
  color: var(--fc-text-muted) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  border-bottom: 1px solid var(--fc-border) !important;
  padding: 8px 12px !important;
}

#messagelist tr,
.messages-list tr {
  border-bottom: 1px solid var(--fc-border) !important;
  transition: background var(--fc-t) !important;
  cursor: pointer !important;
}

#messagelist tr:hover,
.messages-list tr:hover {
  background: var(--fc-row-hover) !important;
}

#messagelist tr.selected,
.messages-list tr.selected {
  background: var(--fc-row-sel) !important;
  color: var(--fc-row-sel-text) !important;
}

#messagelist tr td,
.messages-list tr td {
  color: var(--fc-text-2) !important;
  font-size: .875rem !important;
  padding: 10px 12px !important;
  border: none !important;
}

#messagelist tr.unread td,
.messages-list tr.unread td {
  color: var(--fc-text) !important;
  font-weight: 600 !important;
}

#messagelist tr.unread td.subject::before,
.messages-list tr.unread td.subject::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--fc-primary);
  margin-right: 8px;
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════════
   LECTURE MESSAGE
══════════════════════════════════════════════════════ */

#messagecontframe,
#messagebody,
.message-content {
  background: var(--fc-bg) !important;
  color: var(--fc-text) !important;
}

.message-header,
#message-header {
  background: var(--fc-bg-2) !important;
  border-bottom: 1px solid var(--fc-border) !important;
  padding: 16px 20px !important;
}

.message-header .subject,
#message-header .subject {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--fc-text) !important;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
}

.message-header .sender,
.message-header .from,
.headers-table td {
  color: var(--fc-text-2) !important;
  font-size: .875rem !important;
}

.headers-table th {
  color: var(--fc-text-muted) !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}

/* Corps du message */
#messagebody iframe,
.fr-view,
.message-part {
  background: var(--fc-bg) !important;
  color: var(--fc-text) !important;
}

/* Pièces jointes */
.attachments, .attachment-list {
  background: var(--fc-bg-2) !important;
  border-top: 1px solid var(--fc-border) !important;
  padding: 12px !important;
}

.attachment a {
  background: var(--fc-bg-3) !important;
  border: 1px solid var(--fc-border) !important;
  border-radius: 8px !important;
  color: var(--fc-text-2) !important;
  padding: 6px 12px !important;
  font-size: .8rem !important;
  transition: all var(--fc-t) !important;
}

.attachment a:hover {
  background: var(--fc-row-hover) !important;
  color: var(--fc-primary) !important;
  border-color: var(--fc-primary) !important;
}

/* ══════════════════════════════════════════════════════
   COMPOSITION EMAIL
══════════════════════════════════════════════════════ */

#compose-content, #compose-body,
.compose-screen {
  background: var(--fc-bg) !important;
}

#compose-headers, .compose-headers {
  background: var(--fc-bg-2) !important;
  border-bottom: 1px solid var(--fc-border) !important;
  padding: 12px 16px !important;
}

#compose-headers input[type="text"],
#compose-headers input[type="email"],
#compose-headers textarea,
.compose-screen input, .compose-screen textarea {
  background: var(--fc-input-bg) !important;
  border: 1px solid var(--fc-input-border) !important;
  border-radius: 8px !important;
  color: var(--fc-text) !important;
  padding: 8px 12px !important;
  font-size: .875rem !important;
  transition: border var(--fc-t), box-shadow var(--fc-t) !important;
}

#compose-headers input:focus,
.compose-screen input:focus {
  border-color: var(--fc-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-primary) 15%, transparent) !important;
  outline: none !important;
}

#composebody, .mce-content-body {
  background: var(--fc-bg) !important;
  color: var(--fc-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .9rem !important;
  line-height: 1.6 !important;
}

/* Toolbar compose */
#composetoolbar, .toolbar.compose {
  background: var(--fc-bg-2) !important;
  border-bottom: 1px solid var(--fc-border) !important;
}

/* ══════════════════════════════════════════════════════
   TOOLBAR GLOBALE (boutons action)
══════════════════════════════════════════════════════ */

.toolbar, #toolbar {
  background: var(--fc-bg-2) !important;
  border-bottom: 1px solid var(--fc-border) !important;
  padding: 4px 8px !important;
}

.toolbar a.button, .toolbar button,
a.button.reply, a.button.reply-all,
a.button.forward, a.button.delete,
a.button.compose, a.button.send {
  color: var(--fc-text-2) !important;
  border-radius: 7px !important;
  padding: 6px 10px !important;
  transition: background var(--fc-t), color var(--fc-t) !important;
  border: none !important;
  background: transparent !important;
}

.toolbar a.button:hover, .toolbar button:hover {
  background: var(--fc-row-hover) !important;
  color: var(--fc-primary) !important;
}

.toolbar a.button.active, .toolbar button.active {
  background: color-mix(in srgb, var(--fc-primary) 12%, transparent) !important;
  color: var(--fc-primary) !important;
}

/* Bouton Send — accent */
a.button.send, button.send {
  background: var(--fc-primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 7px 16px !important;
}

a.button.send:hover, button.send:hover {
  background: var(--fc-primary-dk) !important;
}

/* ══════════════════════════════════════════════════════
   BARRE DE RECHERCHE
══════════════════════════════════════════════════════ */

#searchform, .searchbox {
  background: var(--fc-bg-2) !important;
  border: 1px solid var(--fc-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

#searchform input, .searchbox input {
  background: transparent !important;
  border: none !important;
  color: var(--fc-text) !important;
  font-size: .875rem !important;
  padding: 7px 12px !important;
}

#searchform input:focus, .searchbox input:focus {
  outline: none !important;
  box-shadow: none !important;
}

#searchform button, .searchbox button {
  background: var(--fc-primary) !important;
  color: #fff !important;
  border: none !important;
  padding: 7px 12px !important;
}

/* ══════════════════════════════════════════════════════
   PARAMÈTRES / SETTINGS
══════════════════════════════════════════════════════ */

#settings-sections, .settings-nav {
  background: var(--fc-bg-2) !important;
  border-right: 1px solid var(--fc-border) !important;
}

#settings-sections li a, .settings-nav li a {
  color: var(--fc-text-2) !important;
  font-size: .875rem !important;
  border-radius: 7px !important;
  padding: 8px 12px !important;
  transition: all var(--fc-t) !important;
}

#settings-sections li a:hover, .settings-nav li a:hover {
  background: var(--fc-row-hover) !important;
  color: var(--fc-primary) !important;
}

#settings-sections li.active a, .settings-nav li.selected a {
  background: var(--fc-row-sel) !important;
  color: var(--fc-primary) !important;
  font-weight: 600 !important;
}

.settings-frame, #settings-right {
  background: var(--fc-bg) !important;
}

/* Formulaires settings */
.settings-frame label, fieldset legend {
  color: var(--fc-text-2) !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
}

.settings-frame input[type="text"],
.settings-frame input[type="email"],
.settings-frame input[type="password"],
.settings-frame select,
.settings-frame textarea {
  background: var(--fc-input-bg) !important;
  border: 1px solid var(--fc-input-border) !important;
  border-radius: 8px !important;
  color: var(--fc-text) !important;
  padding: 8px 12px !important;
}

.settings-frame input:focus, .settings-frame select:focus {
  border-color: var(--fc-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-primary) 15%, transparent) !important;
  outline: none !important;
}

fieldset { border: 1px solid var(--fc-border) !important; border-radius: 10px !important; padding: 16px !important; margin-bottom: 16px !important; }
fieldset legend { color: var(--fc-text-muted) !important; font-size: .75rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .07em !important; padding: 0 8px !important; background: var(--fc-bg) !important; }

/* ══════════════════════════════════════════════════════
   CONTACTS / CARNET D'ADRESSES
══════════════════════════════════════════════════════ */

#contacts-table, .contact-list {
  background: var(--fc-bg) !important;
}

#contacts-table tr:hover, .contact-list li:hover {
  background: var(--fc-row-hover) !important;
}

#contacts-table tr.selected, .contact-list li.selected {
  background: var(--fc-row-sel) !important;
}

#contacts-table td, .contact-list li {
  color: var(--fc-text-2) !important;
  border-bottom: 1px solid var(--fc-border) !important;
  padding: 10px 12px !important;
}

.contactdetails, #contact-head {
  background: var(--fc-bg-2) !important;
  border-bottom: 1px solid var(--fc-border) !important;
}

/* ══════════════════════════════════════════════════════
   POPUPS / DIALOGUES / OVERLAYS
══════════════════════════════════════════════════════ */

.ui-dialog, .popupmenu, .dropdown-menu {
  background: var(--fc-card) !important;
  border: 1px solid var(--fc-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--fc-shadow-hov) !important;
}

.ui-dialog .ui-dialog-titlebar {
  background: var(--fc-bg-2) !important;
  border-bottom: 1px solid var(--fc-border) !important;
  border-radius: 12px 12px 0 0 !important;
  color: var(--fc-text) !important;
  font-weight: 700 !important;
  padding: 14px 16px !important;
}

.ui-dialog .ui-dialog-content {
  background: var(--fc-card) !important;
  color: var(--fc-text) !important;
  padding: 16px !important;
}

.ui-dialog .ui-dialog-buttonset button {
  background: var(--fc-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 20px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background var(--fc-t) !important;
}

.ui-dialog .ui-dialog-buttonset button:first-child {
  background: var(--fc-bg-3) !important;
  color: var(--fc-text) !important;
}

.popupmenu li, .dropdown-menu li {
  border-bottom: 1px solid var(--fc-border) !important;
}

.popupmenu a, .dropdown-menu a {
  color: var(--fc-text-2) !important;
  padding: 8px 16px !important;
  display: block !important;
  transition: background var(--fc-t) !important;
}

.popupmenu a:hover, .dropdown-menu a:hover {
  background: var(--fc-row-hover) !important;
  color: var(--fc-primary) !important;
}

/* ══════════════════════════════════════════════════════
   NOTIFICATIONS / ALERTS
══════════════════════════════════════════════════════ */

.notice, #messagestack .notice {
  background: color-mix(in srgb, var(--fc-primary) 10%, var(--fc-bg)) !important;
  border: 1px solid color-mix(in srgb, var(--fc-primary) 30%, transparent) !important;
  border-radius: 8px !important;
  color: var(--fc-text) !important;
  padding: 10px 16px !important;
}

.warning { background: rgba(245,158,11,.1) !important; border-color: rgba(245,158,11,.3) !important; color: #92400e !important; border-radius: 8px !important; padding: 10px 16px !important; }
.error, .alert-danger { background: rgba(239,68,68,.1) !important; border-color: rgba(239,68,68,.3) !important; color: #991b1b !important; border-radius: 8px !important; padding: 10px 16px !important; }
.confirmation { background: rgba(34,197,94,.1) !important; border-color: rgba(34,197,94,.3) !important; color: #14532d !important; border-radius: 8px !important; padding: 10px 16px !important; }

html.dark-mode .warning { color: #FCD34D !important; }
html.dark-mode .error, html.dark-mode .alert-danger { color: #FCA5A5 !important; }
html.dark-mode .confirmation { color: #86EFAC !important; }

/* ══════════════════════════════════════════════════════
   QUOTA BAR
══════════════════════════════════════════════════════ */

.quota-info, #quotadisplay {
  background: var(--fc-bg-2) !important;
  border-top: 1px solid var(--fc-border) !important;
  padding: 8px 12px !important;
  font-size: .75rem !important;
  color: var(--fc-text-muted) !important;
}

.quota-info .bar, #quotadisplay .bar {
  background: var(--fc-border) !important;
  border-radius: 4px !important;
  height: 4px !important;
  overflow: hidden !important;
}

.quota-info .bar span, #quotadisplay .bar span {
  background: var(--fc-primary) !important;
  display: block; height: 100% !important;
  border-radius: 4px !important;
}

/* ══════════════════════════════════════════════════════
   PAGINATION / TOOLBAR BAS
══════════════════════════════════════════════════════ */

.pagenav, .listing-footer {
  background: var(--fc-bg-2) !important;
  border-top: 1px solid var(--fc-border) !important;
  padding: 6px 12px !important;
  color: var(--fc-text-muted) !important;
  font-size: .8rem !important;
}

.pagenav a, .listing-footer a {
  color: var(--fc-primary) !important;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE MOBILE
══════════════════════════════════════════════════════ */

@media screen and (max-width: 768px) {
  #messagelist td.subject { max-width: 200px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  #compose-headers { padding: 8px !important; }
  .toolbar a.button span.inner { display: none !important; }
}

/* ══════════════════════════════════════════════════════
   REFONTE COMPLÈTE v2 — Interface mail entière (2026-05-29)
   Couvre : toolbar, liste messages, vue message, compose,
   dossiers, contacts, recherche, paramètres
══════════════════════════════════════════════════════ */

/* ── Scroll progress bar ─────────────────────────────── */
#scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--fc-primary), var(--fc-accent));
  z-index: 9999;
  transition: width .1s linear;
  pointer-events: none;
}
html.dark-mode #scroll-progress { background: linear-gradient(90deg, #8B5CF6, #60A5FA); }

/* ── Toolbar principale — refonte ───────────────────── */
#toolbar-main,
.toolbar {
  background: var(--fc-card) !important;
  border-bottom: 1px solid var(--fc-border) !important;
  padding: 6px 12px !important;
  box-shadow: 0 1px 0 var(--fc-border) !important;
  gap: 4px !important;
}
html.dark-mode #toolbar-main,
html.dark-mode .toolbar {
  background: #07041A !important;
  border-color: var(--fc-border) !important;
  box-shadow: 0 1px 0 var(--fc-border) !important;
}
.toolbar a.button,
.toolbar button {
  border-radius: 8px !important;
  padding: 7px 12px !important;
  color: var(--fc-text-2) !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  transition: all .18s !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}
.toolbar a.button:hover,
.toolbar button:hover {
  background: var(--fc-row-hover) !important;
  color: var(--fc-primary) !important;
  border-color: transparent !important;
}
html.dark-mode .toolbar a.button:hover { background: rgba(139,92,246,.1) !important; color: var(--fc-primary) !important; }
.toolbar a.button.selected,
.toolbar a.button.active,
.toolbar button.selected {
  background: var(--fc-row-sel) !important;
  color: var(--fc-primary) !important;
  font-weight: 700 !important;
}
.toolbar a.button span.inner { font-size: .78rem !important; }

/* Compose button — primaire */
.toolbar a.button.compose,
.toolbar .compose-button {
  background: var(--fc-primary) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(37,99,235,.3) !important;
  padding: 8px 16px !important;
}
.toolbar a.button.compose:hover { background: var(--fc-primary-dk) !important; transform: translateY(-1px) !important; box-shadow: 0 6px 16px rgba(37,99,235,.4) !important; }
html.dark-mode .toolbar a.button.compose { box-shadow: 0 4px 14px rgba(139,92,246,.35) !important; }

/* ── Layout principal (3 colonnes) ─────────────────── */
#layout,
#mainscreen {
  background: var(--fc-bg) !important;
}
#layout > .column {
  border-right: 1px solid var(--fc-border) !important;
}

/* ── Sidebar gauche (dossiers) — redesign ───────────── */
#layout-sidebar,
#folderlist-content,
#tasklist-content {
  background: var(--fc-bg-2) !important;
  border-right: 1px solid var(--fc-border) !important;
}
html.dark-mode #layout-sidebar { background: rgba(7,4,26,.96) !important; border-color: var(--fc-border) !important; }
#folderlist-content li.mailbox,
#mailboxlist li {
  border-radius: 8px !important;
  margin: 1px 4px !important;
}
#folderlist-content li.mailbox.selected,
#mailboxlist li.selected,
#mailboxlist li.focused {
  background: var(--fc-row-sel) !important;
  border-radius: 8px !important;
}
html.dark-mode #folderlist-content li.mailbox.selected { background: rgba(139,92,246,.15) !important; }
#folderlist-content li.mailbox a,
#mailboxlist li a {
  color: var(--fc-text-2) !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: background .18s, color .18s !important;
  text-decoration: none !important;
}
#folderlist-content li.mailbox a:hover,
#mailboxlist li a:hover {
  background: var(--fc-row-hover) !important;
  color: var(--fc-primary) !important;
}
html.dark-mode #mailboxlist li a:hover { color: var(--fc-primary) !important; }
#folderlist-content li.mailbox.selected a,
#mailboxlist li.selected a,
#mailboxlist li.focused a {
  color: var(--fc-primary) !important;
  font-weight: 700 !important;
}
html.dark-mode #mailboxlist li.selected a { color: var(--fc-primary) !important; }
/* Unread count badge */
#mailboxlist li a span.unreadcount,
.unreadcount {
  background: var(--fc-primary) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  padding: 1px 7px !important;
  min-width: 18px !important;
  text-align: center !important;
}
html.dark-mode .unreadcount { background: var(--fc-badge) !important; }

/* Sidebar section headers */
.sidebar-section-header,
#folderlist .section-header {
  font-size: .68rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  color: var(--fc-text-muted) !important;
  padding: 12px 14px 4px !important;
}

/* ── Liste des messages — redesign complet ─────────── */
#messagelist,
table#messagelist {
  background: var(--fc-card) !important;
  width: 100% !important;
}
html.dark-mode #messagelist { background: var(--fc-bg) !important; }
#messagelist thead th,
#messagelist th {
  background: var(--fc-bg-2) !important;
  border-color: var(--fc-border) !important;
  color: var(--fc-text-muted) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  padding: 8px 12px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}
html.dark-mode #messagelist thead th { background: #0D0825 !important; border-color: var(--fc-border) !important; }
#messagelist tr {
  border-bottom: 1px solid var(--fc-border) !important;
  transition: background .15s !important;
  cursor: pointer !important;
}
#messagelist tr:hover td { background: var(--fc-row-hover) !important; }
html.dark-mode #messagelist tr:hover td { background: rgba(139,92,246,.05) !important; }
#messagelist tr.selected td,
#messagelist tr.focused td {
  background: var(--fc-row-sel) !important;
}
html.dark-mode #messagelist tr.selected td { background: rgba(37,99,235,.1) !important; }
#messagelist td {
  padding: 12px 14px !important;
  border-color: var(--fc-border) !important;
  color: var(--fc-text-2) !important;
  font-size: .87rem !important;
  vertical-align: middle !important;
}
/* Unread messages */
#messagelist tr.unread td {
  font-weight: 700 !important;
  color: var(--fc-text) !important;
}
#messagelist tr.unread td.from,
#messagelist tr.unread td.subject {
  color: var(--fc-text) !important;
}
/* Sender */
#messagelist td.from { color: var(--fc-text) !important; font-weight: 600 !important; max-width: 180px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
/* Subject */
#messagelist td.subject { max-width: 320px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
#messagelist td.subject a { color: var(--fc-text) !important; font-weight: 500 !important; text-decoration: none !important; }
#messagelist tr.unread td.subject a { font-weight: 700 !important; }
/* Date */
#messagelist td.date { color: var(--fc-text-muted) !important; font-size: .78rem !important; white-space: nowrap !important; }
/* Size */
#messagelist td.size { color: var(--fc-text-muted) !important; font-size: .76rem !important; }
/* Flag/star */
#messagelist td.flag a,
#messagelist td.status a { color: var(--fc-text-muted) !important; }
#messagelist td.flag a:hover { color: #F59E0B !important; }
#messagelist tr.flagged td.flag a { color: #F59E0B !important; }

/* Attachment indicator */
#messagelist td.attachment span { color: var(--fc-primary) !important; }
html.dark-mode #messagelist td.attachment span { color: var(--fc-primary) !important; }

/* ── Vue message — redesign ─────────────────────────── */
#messagecontent,
#message-content,
.message-frame {
  background: var(--fc-card) !important;
}
html.dark-mode #messagecontent { background: var(--fc-bg) !important; }
#messageheader,
#message-header-row,
.message-headers {
  background: var(--fc-bg-2) !important;
  border-bottom: 1px solid var(--fc-border) !important;
  padding: 20px 24px !important;
}
html.dark-mode #messageheader { background: #0D0825 !important; }
#messageheader h2,
.message-header-subject,
.message-subject {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: var(--fc-text) !important;
  margin-bottom: 10px !important;
  line-height: 1.3 !important;
}
.message-header-field,
#messageheader .header-row {
  display: flex !important;
  gap: 8px !important;
  font-size: .84rem !important;
  margin-bottom: 4px !important;
  align-items: flex-start !important;
}
.message-header-field-name,
.header-label {
  font-weight: 700 !important;
  color: var(--fc-text-muted) !important;
  min-width: 60px !important;
  font-size: .78rem !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  padding-top: 1px !important;
}
.message-header-field-value,
.header-value { color: var(--fc-text-2) !important; font-size: .85rem !important; }
.message-header-field-value a { color: var(--fc-primary) !important; }
html.dark-mode .message-header-field-value a { color: var(--fc-primary) !important; }

/* Message body */
#messagebody,
.message-body {
  padding: 24px !important;
  color: var(--fc-text-2) !important;
  font-size: .9rem !important;
  line-height: 1.7 !important;
}
html.dark-mode #messagebody { color: #CBD5E1 !important; }

/* Attachments list */
.message-attachments,
#attachment-list {
  background: var(--fc-bg-2) !important;
  border-top: 1px solid var(--fc-border) !important;
  padding: 14px 20px !important;
}
.message-attachments .attachment,
.attachmentlist li {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--fc-card) !important;
  border: 1px solid var(--fc-border) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: .82rem !important;
  color: var(--fc-text-2) !important;
  margin: 3px !important;
  transition: all .18s !important;
  cursor: pointer !important;
}
.message-attachments .attachment:hover,
.attachmentlist li:hover {
  border-color: var(--fc-primary) !important;
  color: var(--fc-primary) !important;
  background: var(--fc-row-hover) !important;
}

/* ── Compose form — redesign ────────────────────────── */
#compose {
  background: var(--fc-card) !important;
}
html.dark-mode #compose { background: var(--fc-bg) !important; }
#compose-headers {
  background: var(--fc-bg-2) !important;
  border-bottom: 1px solid var(--fc-border) !important;
  padding: 16px 20px !important;
}
html.dark-mode #compose-headers { background: #0D0825 !important; }
#compose-headers table { width: 100% !important; }
#compose-headers td.header {
  color: var(--fc-text-muted) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  padding: 6px 10px 6px 0 !important;
  white-space: nowrap !important;
  width: 1% !important;
}
#compose-headers td input,
#compose-headers td .input-field {
  background: var(--fc-input-bg) !important;
  border: 1.5px solid var(--fc-input-border) !important;
  border-radius: 8px !important;
  color: var(--fc-text) !important;
  padding: 7px 12px !important;
  font-size: .87rem !important;
  width: 100% !important;
  transition: border-color .2s !important;
}
#compose-headers td input:focus { border-color: var(--fc-input-focus) !important; box-shadow: 0 0 0 3px rgba(37,99,235,.08) !important; outline: none !important; }
html.dark-mode #compose-headers td input:focus { box-shadow: 0 0 0 3px rgba(139,92,246,.1) !important; }
/* Subject line */
#compose_subject {
  font-weight: 600 !important;
  font-size: .92rem !important;
}
/* Compose body */
#composebody,
#compose #message_body,
.compose-body textarea {
  padding: 20px !important;
  background: var(--fc-card) !important;
  color: var(--fc-text) !important;
  font-size: .9rem !important;
  line-height: 1.7 !important;
  border: none !important;
  resize: vertical !important;
  min-height: 300px !important;
}
html.dark-mode #composebody { background: var(--fc-bg) !important; color: var(--fc-text) !important; }
/* Compose toolbar */
#compose-toolbar,
#toolbar-compose {
  background: var(--fc-bg-2) !important;
  border-bottom: 1px solid var(--fc-border) !important;
  padding: 5px 12px !important;
}
/* Send button */
#toolbar-compose .send,
.toolbar a.button.send {
  background: var(--fc-primary) !important;
  color: white !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  padding: 7px 18px !important;
  box-shadow: 0 4px 12px rgba(37,99,235,.3) !important;
}
.toolbar a.button.send:hover { background: var(--fc-primary-dk) !important; transform: translateY(-1px) !important; }

/* ── Address Book / Contacts ────────────────────────── */
#contacts-list,
#addressbook-content,
#contacts-content {
  background: var(--fc-card) !important;
}
html.dark-mode #contacts-list { background: var(--fc-bg) !important; }
#contacts-list .contact-row,
#addressbook table tr {
  border-bottom: 1px solid var(--fc-border) !important;
  transition: background .15s !important;
}
#contacts-list .contact-row:hover,
#addressbook table tr:hover td {
  background: var(--fc-row-hover) !important;
}
html.dark-mode #contacts-list .contact-row:hover { background: rgba(139,92,246,.05) !important; }
/* Contact avatar */
.contact-avatar,
.contactphoto img {
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  object-fit: cover !important;
}
.contact-initials {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fc-primary), var(--fc-accent));
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem;
}

/* ── Search bar ─────────────────────────────────────── */
#searchform,
.searchbox,
.quick-search input {
  background: var(--fc-input-bg) !important;
  border: 1.5px solid var(--fc-input-border) !important;
  border-radius: 10px !important;
  color: var(--fc-text) !important;
  font-size: .85rem !important;
  padding: 7px 14px !important;
  transition: border-color .2s !important;
}
#searchform:focus,
.quick-search input:focus {
  border-color: var(--fc-primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.08) !important;
  outline: none !important;
}

/* ── Preferences / Settings ─────────────────────────── */
#preferences,
#rcmfd_sections,
.section-content {
  background: var(--fc-card) !important;
}
html.dark-mode #preferences { background: var(--fc-bg) !important; }
#preferences .subsection {
  background: var(--fc-bg-2) !important;
  border: 1px solid var(--fc-border) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}
html.dark-mode #preferences .subsection { background: rgba(13,8,37,.7) !important; border-color: var(--fc-border) !important; }
#preferences h3,
#preferences .form-section-title {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--fc-text) !important;
  font-size: .9rem !important;
  margin-bottom: 14px !important;
}
#preferences label { font-weight: 500 !important; color: var(--fc-text-2) !important; font-size: .85rem !important; }
#preferences .form-control,
#preferences input[type=text],
#preferences input[type=email],
#preferences select {
  background: var(--fc-input-bg) !important;
  border: 1.5px solid var(--fc-input-border) !important;
  border-radius: 8px !important;
  color: var(--fc-text) !important;
  font-size: .85rem !important;
}
#preferences .form-control:focus { border-color: var(--fc-primary) !important; box-shadow: 0 0 0 3px rgba(37,99,235,.08) !important; }
/* Save button */
#preferences .submit { background: var(--fc-primary) !important; border-color: var(--fc-primary) !important; border-radius: 8px !important; font-weight: 700 !important; color: white !important; }

/* ── Status/notification toasts ─────────────────────── */
#notifications,
.notifications,
#messagestack,
.message-stack {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 9999 !important;
  max-width: 360px !important;
}
.notify-message,
.message-stack .message {
  background: var(--fc-card) !important;
  border: 1px solid var(--fc-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(15,23,42,.15) !important;
  padding: 14px 16px !important;
  font-size: .85rem !important;
  color: var(--fc-text) !important;
  margin-bottom: 8px !important;
}
.notify-message.confirmation,
.message.confirmation { border-color: rgba(34,197,94,.25) !important; background: rgba(34,197,94,.06) !important; color: #15803D !important; }
.notify-message.warning { border-color: rgba(245,158,11,.25) !important; background: rgba(245,158,11,.06) !important; color: #B45309 !important; }
.notify-message.error   { border-color: rgba(239,68,68,.25)  !important; background: rgba(239,68,68,.06)  !important; color: #B91C1C !important; }
html.dark-mode .notify-message.confirmation { color: #4ADE80 !important; background: rgba(74,222,128,.07) !important; }
html.dark-mode .notify-message.error { color: #F87171 !important; background: rgba(248,113,113,.07) !important; }

/* ── Dialogs / Modals ───────────────────────────────── */
.ui-dialog,
.fc-popup {
  border-radius: 16px !important;
  border: 1px solid var(--fc-border) !important;
  box-shadow: 0 24px 64px rgba(15,23,42,.2) !important;
  overflow: hidden !important;
}
html.dark-mode .ui-dialog { background: var(--fc-bg) !important; border-color: rgba(139,92,246,.15) !important; box-shadow: 0 24px 64px rgba(0,0,0,.6) !important; }
.ui-dialog .ui-dialog-titlebar {
  background: var(--fc-bg-2) !important;
  border-color: var(--fc-border) !important;
  padding: 14px 20px !important;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--fc-text) !important;
  font-size: .9rem !important;
}
html.dark-mode .ui-dialog .ui-dialog-titlebar { background: #07041A !important; }
.ui-dialog .ui-dialog-content { padding: 20px !important; color: var(--fc-text-2) !important; background: var(--fc-card) !important; }
html.dark-mode .ui-dialog .ui-dialog-content { background: var(--fc-bg) !important; }
.ui-dialog .ui-dialog-buttonpane { background: var(--fc-bg-2) !important; border-color: var(--fc-border) !important; padding: 12px 20px !important; }

/* ── Context menu ───────────────────────────────────── */
.contextmenu,
.popupmenu {
  background: var(--fc-card) !important;
  border: 1px solid var(--fc-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 36px rgba(15,23,42,.15) !important;
  padding: 6px !important;
  min-width: 180px !important;
}
html.dark-mode .contextmenu { background: #0D0825 !important; border-color: rgba(139,92,246,.12) !important; }
.contextmenu a,
.contextmenu li,
.popupmenu a {
  display: block !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  font-size: .85rem !important;
  color: var(--fc-text-2) !important;
  transition: background .15s, color .15s !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.contextmenu a:hover,
.popupmenu a:hover { background: var(--fc-row-hover) !important; color: var(--fc-primary) !important; }
html.dark-mode .contextmenu a:hover { background: rgba(139,92,246,.1) !important; }
.contextmenu .separator,
.popupmenu .separator { height: 1px !important; background: var(--fc-border) !important; margin: 4px 0 !important; }

/* ── Quota indicator ────────────────────────────────── */
#quotaicon,
.quota-message {
  font-size: .78rem !important;
  color: var(--fc-text-muted) !important;
}
.quota-bar {
  background: var(--fc-bg-3) !important;
  border-radius: 999px !important;
  height: 4px !important;
  overflow: hidden !important;
}
.quota-bar-fill {
  background: linear-gradient(90deg, var(--fc-primary), var(--fc-accent)) !important;
  height: 100% !important;
  border-radius: 999px !important;
  transition: width .5s ease !important;
}

/* ── Pagination ─────────────────────────────────────── */
#pagejumper,
.pagenav,
.page-nav {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: .82rem !important;
}
.pagenav a,
.page-nav a,
#pagejumper a {
  padding: 5px 10px !important;
  border-radius: 7px !important;
  color: var(--fc-text-2) !important;
  border: 1px solid var(--fc-border) !important;
  transition: all .18s !important;
  text-decoration: none !important;
}
.pagenav a:hover { background: var(--fc-row-hover) !important; color: var(--fc-primary) !important; }

/* ── Loading / spinner ──────────────────────────────── */
#loading,
.loading-overlay {
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: 12px !important;
}
html.dark-mode #loading { background: rgba(7,4,26,.85) !important; }
.loading-spinner,
.ui-icon.loading {
  border-top-color: var(--fc-primary) !important;
}

/* ── Responsive complémentaire ─────────────────────── */
@media screen and (max-width: 1024px) {
  #layout-sidebar { max-width: 240px !important; min-width: 200px !important; }
}
@media screen and (max-width: 768px) {
  #messagelist td.from { max-width: 120px !important; }
  #messagelist td.subject { max-width: 180px !important; }
  #messagelist td.date { font-size: .72rem !important; }
  .toolbar a.button span.inner { display: none !important; }
  .toolbar a.button { padding: 7px 8px !important; }
  #compose-headers td.header { display: none !important; }
  #compose-headers td input { font-size: .84rem !important; }
  .notify-message { max-width: 280px !important; }
}
@media screen and (max-width: 480px) {
  .contextmenu { min-width: 160px !important; }
  #compose { font-size: .87rem !important; }
}