/* =====================================================================
   SKIN macOS pour Roundcube 1.6 (etend "elastic") — feuille GENERALE
   Les couleurs propres a chaque domaine viennent de styles/domaines/<domaine>.css
   (variables --mac-accent, --mac-accent-2, --mac-sidebar-dark, --mac-login-bg).
   Jamais toucher aux fichiers d'elastic : tout est ici.
   ===================================================================== */
:root {
  --mac-accent: #0a84ff; --mac-accent-2: #5ac8fa; --mac-accent-text: #fff;
  --mac-sidebar-dark: #1d1d1f;
  --mac-login-bg: linear-gradient(135deg,#1d1d1f 0%,#2c2c2e 55%,#0a84ff 140%);
  /* mode clair */
  --mac-bg: #ececf0;          /* fond fenetre */
  --mac-panel: #ffffff;       /* panneaux */
  --mac-side: #f5f5f7;        /* colonnes (dossiers, liste) */
  --mac-text: #1d1d1f; --mac-text-2: #6e6e73; --mac-line: #d9d9de;
  --mac-hover: rgba(0,0,0,.045); --mac-sel: rgba(0,0,0,.07);
  --mac-radius: 12px; --mac-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, "Segoe UI", Roboto, sans-serif;
}
html.dark-mode {
  --mac-bg: #141416; --mac-panel: #1e1e21; --mac-side: #232326;
  --mac-text: #f5f5f7; --mac-text-2: #98989d; --mac-line: #3a3a3e;
  --mac-hover: rgba(255,255,255,.06); --mac-sel: rgba(255,255,255,.10);
}

/* ---------- base ---------- */
html, body, #layout, .form-control, .btn, input, select, textarea, .ui-dialog, .popover { font-family: var(--mac-font) !important; }
body { background: var(--mac-bg) !important; color: var(--mac-text) !important; -webkit-font-smoothing: antialiased; }
#layout { background: var(--mac-bg) !important; gap: 8px; padding: 8px 8px 8px 0; box-sizing: border-box; }
#layout > div { border-radius: var(--mac-radius); overflow: hidden; border: 1px solid var(--mac-line); background: var(--mac-panel) !important; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
#layout-sidebar, #layout-list { background: var(--mac-side) !important; }
#layout-menu { border-radius: 0 var(--mac-radius) var(--mac-radius) 0; border: none !important; }
a { color: var(--mac-accent); }

/* ---------- colonne des icones (toujours sombre, couleur du domaine) ---------- */
#layout #layout-menu, #layout-menu, #taskmenu { background: var(--mac-sidebar-dark) !important; }
@media screen and (min-width: 1200px) { #layout #layout-menu, #layout-menu { width: 139px !important; } }
#taskmenu a, #taskmenu a:visited { color: rgba(255,255,255,.72) !important; border-radius: 10px; margin: 2px 8px; width: auto; transition: background .15s, color .15s; }
#taskmenu a:hover { background: rgba(255,255,255,.09) !important; color: #fff !important; }
#taskmenu a.selected { background: var(--mac-accent) !important; color: var(--mac-accent-text) !important; }
#taskmenu a.about { display: none !important; }
#taskmenu .special-buttons a.logout { color: #ff6b6b !important; }
#layout-menu .logo, #layout-menu #logo { max-width: 110px; margin: 14px auto 6px auto; display: block; border-radius: 8px; }

/* ---------- barres d'outils (haut de chaque colonne) : unifiees, translucides ---------- */
#layout > div > .header { background: var(--mac-side) !important; border-bottom: 1px solid var(--mac-line) !important; color: var(--mac-text) !important; backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); }
#layout-content > .header { background: var(--mac-panel) !important; }
.header .header-title, .header-title { color: var(--mac-text) !important; font-weight: 600 !important; letter-spacing: -.01em; }
.toolbar a.button, .toolbar .btn, .header a.button { color: var(--mac-text-2) !important; border-radius: 8px !important; }
.toolbar a.button:hover, .header a.button:hover { background: var(--mac-hover) !important; color: var(--mac-accent) !important; }
.toolbar a.button.disabled { opacity: .35; }
.header .searchbar, #searchbar { background: transparent !important; }
#searchbar input, .searchbar input { background: var(--mac-hover) !important; border: none !important; border-radius: 8px !important; color: var(--mac-text) !important; }
#searchbar input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mac-accent) 30%, transparent) !important; }

/* ---------- listes (dossiers, messages, contacts) ---------- */
.listing, .listing table, table.listing { background: transparent !important; color: var(--mac-text) !important; }
.listing tr td, .listing li a, .listing li, table.listing tr > td { color: var(--mac-text) !important; border-color: var(--mac-line) !important; }
.listing tr:hover td, .listing li a:hover { background: var(--mac-hover) !important; }
.listing tr.selected td, .listing li.selected > a, .listing tr.selected > td { background: color-mix(in srgb, var(--mac-accent) 16%, transparent) !important; color: var(--mac-text) !important; }
.messagelist tr.unread td.subject span, .messagelist tr.unread td.subject a, .messagelist tr.unread .subject { font-weight: 600 !important; }
.messagelist tr td.subject .msgicon.unread, .messagelist tr.unread td.subject span.msgicon.status { color: var(--mac-accent) !important; }
.messagelist td.date, .messagelist .date, .listing .date { color: var(--mac-text-2) !important; }
span.badge, .badge, #layout-sidebar .listing li a span.unreadcount { background: var(--mac-accent) !important; color: var(--mac-accent-text) !important; border-radius: 10px !important; }
#layout-sidebar .listing li a.inbox, #layout-sidebar .listing li a.drafts, #layout-sidebar .listing li a.sent, #layout-sidebar .listing li a.junk, #layout-sidebar .listing li a.trash { border-radius: 8px; margin: 0 6px; }
.scroller { background: transparent !important; }

/* ---------- contenu / lecture ---------- */
#layout-content, #layout-content .content, #messagecontframe, .iframe-wrapper { background: var(--mac-panel) !important; color: var(--mac-text) !important; }
#message-header, .message-partheaders, .header-headers { background: var(--mac-side) !important; border-bottom: 1px solid var(--mac-line) !important; border-radius: 0; }
.subject .header-title, #messageheader .subject { color: var(--mac-text) !important; }
.footer, #layout > div > .footer { background: var(--mac-side) !important; border-top: 1px solid var(--mac-line) !important; }

/* ---------- formulaires, boutons, dialogues ---------- */
.form-control, select.form-control, textarea.form-control, .input-group-text { background: var(--mac-hover) !important; border: 1px solid var(--mac-line) !important; color: var(--mac-text) !important; border-radius: 8px !important; box-shadow: none !important; }
.form-control:focus { border-color: var(--mac-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mac-accent) 25%, transparent) !important; }
.btn { border-radius: 8px !important; font-weight: 500 !important; }
.btn-primary, .btn-primary:focus, .ui-dialog .btn-primary, .btn.btn-primary { background: var(--mac-accent) !important; border-color: var(--mac-accent) !important; color: var(--mac-accent-text) !important; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary, .btn-light { background: var(--mac-hover) !important; border-color: var(--mac-line) !important; color: var(--mac-text) !important; }
.btn-danger, .btn-danger:hover { background: #ff3b30 !important; border-color: #ff3b30 !important; color: #fff !important; }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before { background: #34c759 !important; border-color: #34c759 !important; }
.ui-dialog, .popover, .popupmenu, .menu.popover { background: var(--mac-panel) !important; color: var(--mac-text) !important; border: 1px solid var(--mac-line) !important; border-radius: 12px !important; box-shadow: 0 18px 50px rgba(0,0,0,.22) !important; }
.ui-dialog .ui-dialog-titlebar { background: var(--mac-side) !important; color: var(--mac-text) !important; border-bottom: 1px solid var(--mac-line) !important; border-radius: 12px 12px 0 0 !important; }
.popover .popover-header, .popupmenu .header { background: var(--mac-side) !important; color: var(--mac-text) !important; }
.popupmenu li a, .popover-body a, .listing.iconized li a { color: var(--mac-text) !important; border-radius: 6px; }
.popupmenu li a:hover, .popover-body li a:hover { background: var(--mac-hover) !important; }
.table-striped tbody tr:nth-of-type(odd), .propform tr:nth-of-type(odd) { background: transparent !important; }
.propform td, .propform th, .formcontent, #preferences-frame { color: var(--mac-text) !important; background: var(--mac-panel) !important; }
.boxtitle, legend, .formbuttons { color: var(--mac-text) !important; }

/* ---------- editeur (reponse / nouveau message) ---------- */
#compose-content, .compose-form, #composebody { background: var(--mac-panel) !important; color: var(--mac-text) !important; }
.tox .tox-toolbar, .tox .tox-edit-area { background: var(--mac-side) !important; }

/* ---------- barres de defilement (fines, facon macOS) ---------- */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgba(128,128,128,.4); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* =====================================================================
   PAGE DE CONNEXION : une "fenetre" macOS centree, fond degrade du domaine.
   Toujours sombre (ne suit pas le mode clair).
   ===================================================================== */
html:has(body.task-login), body.task-login { background: var(--mac-login-bg) !important; background-attachment: fixed !important; }
body.task-login #layout, body.task-login #layout-content { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0; }
body.task-login #layout-content { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 100vh; padding: 24px !important; }
body.task-login .mac-login-wrap { width: 100%; max-width: 440px; margin: 0 auto; }
body.task-login .mac-window { border-radius: 14px; overflow: hidden; background: rgba(30,30,33,.72); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 .5px rgba(0,0,0,.4); color: #f5f5f7; }
body.task-login .mac-titlebar { height: 38px; display: flex; align-items: center; padding: 0 14px; gap: 8px; background: rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.08); }
body.task-login .mac-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.25); }
body.task-login .mac-red { background: #ff5f57; } body.task-login .mac-yellow { background: #febc2e; } body.task-login .mac-green { background: #28c840; }
body.task-login .mac-title { margin-left: auto; margin-right: auto; font-size: 13px; color: rgba(255,255,255,.6); font-weight: 500; letter-spacing: .01em; transform: translateX(-26px); }
body.task-login .mac-body { padding: 34px 36px 30px 36px; }
body.task-login #logo { display: block; max-width: 230px; width: 60%; height: auto; margin: 0 auto 22px auto; border-radius: 10px; }
body.task-login .mac-welcome { text-align: center; font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px 0; color: #fff; }
body.task-login .mac-sub { text-align: center; font-size: 12px; color: rgba(255,255,255,.55); margin: 0 0 26px 0; white-space: nowrap; }
body.task-login .mac-field { margin-bottom: 14px; }
body.task-login .mac-field label { display: block; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.55); margin-bottom: 6px; letter-spacing: .04em; text-transform: uppercase; }
body.task-login .mac-field input, body.task-login #rcmloginuser, body.task-login #rcmloginpwd {
  width: 100% !important; padding: 12px 14px !important; border-radius: 10px !important; border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.08) !important; color: #fff !important; font-size: 15px !important; box-shadow: none !important; font-family: var(--mac-font) !important;
  transition: background-color 100000s ease-in-out 0s, color 100000s ease-in-out 0s, border-color .15s, box-shadow .15s !important; -webkit-text-fill-color: #fff !important; caret-color: #fff !important;
}
body.task-login .mac-field input:focus { outline: none !important; border-color: var(--mac-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mac-accent) 35%, transparent) !important; }
body.task-login .mac-field input::placeholder { color: rgba(255,255,255,.35) !important; }
body.task-login .mac-field input:-webkit-autofill, body.task-login .mac-field input:-webkit-autofill:hover, body.task-login .mac-field input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #2a2a2e inset !important; -webkit-text-fill-color: #fff !important; }
body.task-login .mac-pw-wrap { position: relative; }
body.task-login .mac-pw-wrap input { padding-right: 42px !important; }
body.task-login .mac-pw-eye { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 30px; height: 30px; background: transparent; border: none; cursor: pointer; color: rgba(255,255,255,.45); display: flex; align-items: center; justify-content: center; border-radius: 50%; padding: 0; }
body.task-login .mac-pw-eye:hover { background: rgba(255,255,255,.1); color: #fff; }
body.task-login .mac-btn { display: block; width: 100%; padding: 13px 20px; margin-top: 10px; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; color: var(--mac-accent-text); background: linear-gradient(180deg, color-mix(in srgb, var(--mac-accent) 85%, #fff) 0%, var(--mac-accent) 100%); box-shadow: 0 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .15s, filter .15s; font-family: var(--mac-font); }
body.task-login .mac-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
body.task-login .mac-footer-link { text-align: center; margin-top: 18px; font-size: 12px; }
body.task-login .mac-footer-link a { color: rgba(255,255,255,.5); text-decoration: none; }
body.task-login .mac-footer-link a:hover { color: var(--mac-accent-2); }
body.task-login #login-footer, body.task-login .noscriptwarning { display: none; }
@media screen and (max-width: 480px) {
  body.task-login #layout-content { padding: 12px !important; }
  body.task-login .mac-body { padding: 26px 20px 22px 20px; }
  body.task-login #logo { max-width: 180px; }
  body.task-login .mac-field input { font-size: 16px !important; }
}

/* ---------- login : neutralise le placement absolu d'elastic (flux vertical simple) ---------- */
body.task-login #layout, body.task-login #layout-content { display: block !important; height: auto !important; min-height: 100vh !important; overflow-y: auto !important; padding: 40px 16px !important; box-sizing: border-box; }
body.task-login .mac-login-wrap { display: block !important; position: static !important; }
body.task-login .mac-window { position: static !important; display: block !important; min-height: 0 !important; }
body.task-login #logo { position: static !important; display: block !important; height: auto !important; }
body.task-login #login-form, body.task-login #login-content, body.task-login .formcontent, body.task-login .formbuttons { position: static !important; }
body.task-login #login-form, body.task-login #login-form table, body.task-login #login-form tbody, body.task-login #login-form tr, body.task-login #login-form td, body.task-login .propform, body.task-login .formcontent, body.task-login #login-content { background: transparent !important; border: 0 !important; box-shadow: none !important; }
body.task-login input:not([type=submit]):not([type=button]):not([type=hidden]), body.task-login input:-moz-autofill, body.task-login input:autofill { background-color: #2a2a2e !important; background-image: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; box-shadow: 0 0 0 1000px #2a2a2e inset !important; -webkit-box-shadow: 0 0 0 1000px #2a2a2e inset !important; filter: none !important; }
body.task-login input:focus:not([type=submit]):not([type=button]) { box-shadow: 0 0 0 1000px #2a2a2e inset, 0 0 0 3px color-mix(in srgb, var(--mac-accent) 35%, transparent) !important; -webkit-box-shadow: 0 0 0 1000px #2a2a2e inset, 0 0 0 3px color-mix(in srgb, var(--mac-accent) 35%, transparent) !important; border-color: var(--mac-accent) !important; }
/* le JS d'elastic ajoute "btn btn-secondary" au bouton : on reprend la main */
body.task-login .mac-btn, body.task-login .mac-btn.btn, body.task-login .mac-btn.btn-secondary { background: linear-gradient(180deg, color-mix(in srgb, var(--mac-accent) 85%, #fff) 0%, var(--mac-accent) 100%) !important; border: none !important; color: var(--mac-accent-text) !important; }
body.task-login .mac-btn:hover { filter: brightness(1.07) !important; }