/* GT-Heberg — surcharge du thème Elastic de Roundcube.
   Chargée après styles.min.css (voir templates/includes/gtheberg-head.html) : elle
   ne remplace que les couleurs et quelques formes, le reste vient d'Elastic.

   Principe : une seule zone sombre, le menu des tâches à gauche. Tout le reste est
   clair par défaut (le mode sombre ne s'active que par le bouton du menu) et, en
   mode sombre, s'étage en trois niveaux lisibles : menu (le plus foncé) < en-têtes
   < panneaux. */

:root {
  --gt-menu: #0f172a;          /* menu des tâches, toujours sombre */
  --gt-menu-2: #1e1b4b;        /* bas du dégradé, teinte indigo */
  --gt-indigo: #4f46e5;
  --gt-indigo-dark: #4338ca;
  --gt-sky: #0ea5e9;
  --gt-bg: #f1f5f9;            /* fond de page, cadre vide (watermark) */
  --gt-surface: #ffffff;       /* panneaux : dossiers, liste, lecture */
  --gt-surface-2: #f8fafc;     /* en-têtes, pieds, barre de recherche */
  --gt-border: #e2e8f0;
  --gt-text: #0f172a;
  --gt-muted: #64748b;
  --gt-link: #4338ca;
  --gt-link-hover: #312e81;
  --gt-selected: rgba(79, 70, 229, .10);
  --gt-hover: rgba(15, 23, 42, .04);
  --gt-field: #ffffff;
  --gt-radius: 12px;
}
html.dark-mode {
  --gt-menu: #0b1220;          /* le menu reste le niveau le plus foncé */
  --gt-menu-2: #1e1b4b;
  --gt-bg: #0f172a;
  --gt-surface: #1b2437;       /* nettement plus clair que le menu : la hiérarchie se voit */
  --gt-surface-2: #151d30;
  --gt-border: #2b3650;
  --gt-text: #e5e7eb;
  --gt-muted: #9aa4b8;
  --gt-link: #a5b4fc;          /* indigo clair : lisible sur fond sombre */
  --gt-link-hover: #c7d2fe;
  --gt-selected: rgba(165, 180, 252, .18);
  --gt-hover: rgba(255, 255, 255, .05);
  --gt-field: #0f172a;
}

body, .form-control, .btn, input, select, textarea { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
body { background: var(--gt-bg); color: var(--gt-text); }

/* ---- Menu des tâches : marine → indigo, pictogramme blanc, entrée active en pastille */
#layout-menu, #layout-menu .popover-header, #taskmenu .special-buttons { background: linear-gradient(180deg, var(--gt-menu), var(--gt-menu-2)) !important; }
#layout-menu .popover-header { border-bottom: 1px solid rgba(255,255,255,.08); }
/* Colonne étroite (~78 px) : le logo est le pictogramme seul (nuage), lisible à cette taille. */
#layout-menu .popover-header img { max-height: 46px; max-width: 46px; padding: 0; margin-top: 5px; filter: drop-shadow(0 4px 10px rgba(2,6,23,.45)); }
@media screen and (min-width: 481px) and (max-width: 1024px) { #layout-menu .popover-header img { max-height: 32px; max-width: 32px; margin-top: 12px; } }
/* Téléphone : le menu devient un volet large, on affiche le logo complet (version blanche). */
html.layout-phone #layout-menu .popover-header img { max-height: 40px; max-width: 150px; margin: 0; }
#taskmenu a { color: #cbd5e1 !important; border-radius: 10px; margin: 2px 6px; transition: background .15s, color .15s; }
#taskmenu a:hover { background: rgba(255,255,255,.10) !important; color: #fff !important; }
#taskmenu a.selected { background: rgba(99,102,241,.45) !important; color: #fff !important; box-shadow: inset 3px 0 0 var(--gt-sky); }
#taskmenu a.logout { color: #fca5a5 !important; }
#taskmenu .action-buttons a { color: #7dd3fc !important; }
#taskmenu .special-buttons a { background: transparent !important; }

/* ---- Panneaux, en-têtes, listes */
#layout-sidebar, #layout-list, #layout-content { background: var(--gt-surface) !important; }
html.dark-mode #layout-content { background: var(--gt-bg) !important; }   /* zone de lecture en retrait des listes */
#layout > div > .header { background: var(--gt-surface-2) !important; border-bottom: 1px solid var(--gt-border) !important; color: var(--gt-text); }
#layout > div > .header .header-title { color: var(--gt-text) !important; }
#layout > div > .footer { background: var(--gt-surface-2) !important; border-top: 1px solid var(--gt-border) !important; color: var(--gt-muted); }
#layout > div > .footer a, #layout > div > .footer .pagenav input { color: var(--gt-text) !important; }
#layout > div.sidebar, #layout > div.list { border-right: 1px solid var(--gt-border) !important; }
.toolbar a.button, .toolbar .btn, #layout-content .toolbar a { color: var(--gt-link) !important; }
.toolbar a.button.disabled, .toolbar a.button[aria-disabled="true"] { color: var(--gt-muted) !important; opacity: .55; }
.header .pagenav input, .footer .pagenav input { background: var(--gt-field); border-color: var(--gt-border); }

/* Dossiers et listes : texte normal, pas des « liens » bleus partout */
#layout-sidebar .listing li a, #layout-list .listing li a, .listing tr td a { color: var(--gt-text) !important; }
.listing li a:hover, .listing tr:hover td { background: var(--gt-hover); }
.listing tr td, .listing li a { border-color: var(--gt-border) !important; }
.listing tr.selected td, .listing li.selected, .listing li.selected > a { background-color: var(--gt-selected) !important; color: var(--gt-text) !important; }
.listing li.selected > a { font-weight: 600; color: var(--gt-link) !important; }
.listing tr.unread td.subject, .listing li.unread > a { font-weight: 600; }
.listing li a .unreadcount, #messagelist .badge, .listing .badge, .badge-primary { background: var(--gt-indigo) !important; color: #fff !important; }
.listing tr.message td.subject span.date, .listing td.size, .listing td.fromto .adr, .listing tr td .flag, .listing tr td .attachment { color: var(--gt-muted); }
#layout-sidebar .listing li.mailbox.inbox > a::before { color: var(--gt-indigo); }
.listing tr.message td.subject span.msgicon, .listing tr.message td.subject span.subject a { color: var(--gt-text) !important; }
#messagelist tr.message.unread td.subject span.subject a { color: var(--gt-text) !important; }
.listing tr.thread.expanded td, .listing tr.message.flagged td.subject span.subject a { color: var(--gt-text) !important; }

/* Liens et boutons */
a, .text-primary { color: var(--gt-link) !important; }
a:hover { color: var(--gt-link-hover) !important; }
.btn-primary, .btn-main, input.button.mainaction, .ui-dialog .btn-primary { background: linear-gradient(120deg, var(--gt-indigo), var(--gt-sky)) !important; border: 0 !important; color: #fff !important; border-radius: 10px; font-weight: 600; box-shadow: 0 8px 20px rgba(14,165,233,.22); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-secondary, .btn-light { border-radius: 10px; }
html.dark-mode .btn-secondary, html.dark-mode .btn-light { background: #243049; border-color: #334263; color: var(--gt-text); }
html.dark-mode .btn-secondary:hover, html.dark-mode .btn-light:hover { background: #2d3b58; color: #fff; }

/* Champs de saisie */
.form-control, .custom-select, .input-group-text, input.form-control, textarea.form-control, select.form-control { border-radius: 10px; border-color: var(--gt-border); background: var(--gt-field); color: var(--gt-text); }
html.dark-mode .form-control, html.dark-mode .custom-select, html.dark-mode .input-group-text, html.dark-mode .custom-file-label { background: var(--gt-field); color: var(--gt-text); border-color: #334263; }
html.dark-mode .form-control::placeholder { color: #6b7693; }
.form-control:focus { border-color: var(--gt-indigo); box-shadow: 0 0 0 .2rem rgba(99,102,241,.22); }
#layout-list .searchbar, .searchbar, #layout-sidebar .searchbar { background: var(--gt-surface-2) !important; border-bottom: 1px solid var(--gt-border) !important; }
.searchbar input, .searchbar a.button { color: var(--gt-text) !important; }
.searchbar input::placeholder { color: var(--gt-muted); }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before { background: var(--gt-indigo); border-color: var(--gt-indigo); }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--gt-indigo); border-color: var(--gt-indigo); }

/* Formulaires (paramètres, contacts, identités) */
.formcontent, .propform, #preferences-frame, .formcontainer { color: var(--gt-text); }
.formcontent .col-form-label, .propform .col-form-label, label.col-form-label { color: var(--gt-muted); }
fieldset legend, .formcontent legend { color: var(--gt-text); border-color: var(--gt-border); }
.table, .table td, .table th { color: var(--gt-text); border-color: var(--gt-border); }
.table-striped tbody tr:nth-of-type(odd) { background: var(--gt-hover); }

/* Fenêtres, menus, alertes */
.popover, .dropdown-menu, .ui-dialog, .ui-dialog .ui-dialog-titlebar, .ui-dialog .ui-dialog-buttonpane { border-radius: var(--gt-radius) !important; background: var(--gt-surface) !important; color: var(--gt-text) !important; border-color: var(--gt-border) !important; }
.popover, .dropdown-menu, .ui-dialog { box-shadow: 0 20px 50px rgba(2,6,23,.22) !important; }
.popover .popover-header { background: var(--gt-surface-2) !important; color: var(--gt-text) !important; border-color: var(--gt-border) !important; }
.popover .listing li a, .dropdown-menu a, .ui-dialog .listing li a, .popover .toolbarmenu li a { color: var(--gt-text) !important; }
.popover .listing li a:hover, .popover .toolbarmenu li a:hover { background: var(--gt-hover); }
.alert-primary, .message.information { background: rgba(14,165,233,.14); color: var(--gt-text); border: 0; }
#messagestack .message.confirmation, .alert-success { background: rgba(22,163,74,.16); color: var(--gt-text); }
#messagestack .message { border-radius: 10px; }
.progress-bar, .quota_bar .quota-fill { background: linear-gradient(90deg, var(--gt-indigo), var(--gt-sky)) !important; }
html.dark-mode .progress { background: #243049; }

/* Lecture d'un message : en-tête propre */
#message-header, .message-partheaders, #message-content, #messagebody, .message-htmlpart { background: var(--gt-surface) !important; color: var(--gt-text); }
#message-header .header-headers, #messagebody .headers-table td, .header-headers .header-title { color: var(--gt-muted); }
#message-header .subject, #message-header .header-title { color: var(--gt-text) !important; }
#message-header .header-content .adr .rcmContactAddress { color: var(--gt-text) !important; }
#layout-content .iframe-wrapper, #layout-content iframe.framed { background: var(--gt-surface); }

/* Rédaction */
#compose-content, #composebodycontainer, #compose-options { background: var(--gt-surface) !important; color: var(--gt-text); }
#compose-headers .form-control, .recipient-input { background: var(--gt-field) !important; color: var(--gt-text) !important; }
.recipient-input .recipient { background: var(--gt-selected); color: var(--gt-text); border-radius: 8px; }

/* ---- Page de connexion : décor marine du panel, carte blanche dans les deux modes */
html:has(body.task-login), body.task-login { min-height: 100vh; background: radial-gradient(circle at 20% 20%, rgba(79,70,229,.30), transparent 40%), radial-gradient(circle at 80% 10%, rgba(14,165,233,.22), transparent 35%), linear-gradient(145deg, #0b1220, #0f2547 55%, #123d68) !important; }
body.task-login #layout, .task-login #layout-content { background: transparent !important; min-height: 100vh; }
.task-login #logo { max-height: 120px; max-width: 300px; margin: 1.5rem auto .5rem; filter: drop-shadow(0 10px 25px rgba(2,6,23,.5)); }
.task-login #login-form { background: #ffffff; color: #0f172a; border-radius: 24px; padding: 1.8rem 1.6rem 1.2rem; box-shadow: 0 30px 80px rgba(2,6,23,.45); max-width: 420px; }
.task-login #login-form label { font-weight: 600; color: #475569; font-size: .85rem; }
.task-login #login-form .form-control { background: #f1f5f9; color: #0f172a; border-color: #e2e8f0; padding: .8rem .95rem; }
.task-login #login-form .btn-primary { width: 100%; padding: .85rem; font-size: 1rem; margin-top: .4rem; }
.task-login #login-footer { color: #94a3b8; margin-top: 1rem; font-size: .85rem; }
.task-login #login-footer a { color: #4338ca !important; }   /* sur la carte blanche, pas sur le fond marine */
html.dark-mode .task-login #login-form { background: #ffffff; color: #0f172a; }
html.dark-mode .task-login #login-form .form-control { background: #f1f5f9; color: #0f172a; border-color: #e2e8f0; }

/* Page vide des cadres (watermark) : suit le mode choisi (voir watermark.html) */
.watermark { background: var(--gt-bg); }

/* Mobile : barre d'en-tête marine */
@media screen and (max-width: 480px) {
  #layout > div > .header { background: var(--gt-menu) !important; color: #fff; border-bottom: 0 !important; }
  #layout > div > .header a, #layout > div > .header .header-title, #layout > div > .header .toolbar a.button { color: #fff !important; }
}