/* Dark theme (maquette 02-sombre-premium). Elastic owns the preference, cookie,
 * toggle and iframe propagation. Only interface chrome is styled here;
 * received HTML is never targeted. */
html.dark-mode {
  color-scheme: dark;
  --ay-primary: #2f86f6;
  --ay-secondary: #5aa9ff;
  --ay-accent: #22c3f0;
  --ay-background: #060d1a;
  --ay-surface: #0e1a2e;
  --ay-surface-2: rgb(255 255 255 / 4%);
  --ay-border: rgb(118 156 214 / 18%);
  --ay-text: #e6edf8;
  --ay-muted: #9aaac2;
  --ay-success: #6fdc9b;
  --ay-warning: #f4c46a;
  --ay-error: #ff9aa5;
  --ay-hover: #4b98fb;
  --ay-focus: #6cb4ff;
  --ay-on-primary: #fff;
  --ay-shadow: 0 10px 40px rgb(0 0 0 / 35%);
  --ay-card-bg: rgb(11 22 40 / 72%);
  --ay-card-blur: blur(18px) saturate(140%);
  --ay-nav-hover: rgb(255 255 255 / 5%);
  --ay-selected: rgb(47 134 246 / 18%);
  --ay-selected-border: rgb(90 169 255 / 55%);
  --ay-folder-selected: rgb(47 134 246 / 22%);
  --ay-drop: rgb(47 134 246 / 32%);
  --ay-badge: rgb(255 255 255 / 9%);
  --ay-divider: rgb(118 156 214 / 12%);
  --ay-unread-dot: #3d95ff;
  --ay-unread: transparent;
  --ay-row-hover: rgb(255 255 255 / 4%);
  --ay-selected-hover: rgb(47 134 246 / 24%);
  --ay-deleted: #7f8da3;
  --ay-menu-hover: rgb(255 255 255 / 6%);
  --ay-error-bg: #3a1c27;
  --ay-error-border: #7c3a4b;
  --ay-success-bg: #12301f;
  --ay-success-border: #2f6b48;
  --ay-warning-bg: #3a2c12;
  --ay-warning-border: #7a5d24;
}
/* Night backdrop: soft aurora glows, no image download. */
html.dark-mode:not(.iframe) body:not(.task-login) {
  background:
    radial-gradient(1200px 600px at 12% -10%, rgb(37 99 235 / 28%), transparent 60%),
    radial-gradient(900px 500px at 95% 110%, rgb(34 195 240 / 14%), transparent 60%),
    linear-gradient(180deg, #071226 0%, #050b16 100%) fixed;
}
html.dark-mode.iframe body { background: #0d1a2d; color: var(--ay-text); }
html.dark-mode #layout > div,
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer,
html.dark-mode .popover,
html.dark-mode .popover-body,
html.dark-mode .ui-dialog {
  background-color: var(--ay-card-bg);
  color: var(--ay-text);
  border-color: var(--ay-border);
}
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer { background-color: transparent; border-color: var(--ay-divider); }
html.dark-mode .popover, html.dark-mode .popover-body, html.dark-mode .ui-dialog { background-color: #0f1d33; }
html.dark-mode #layout-content .iframe-wrapper { background: #0d1a2d; }
html.dark-mode body:not(.task-login) .form-control,
html.dark-mode body:not(.task-login) .custom-select,
html.dark-mode #composebody {
  color: var(--ay-text);
  background-color: rgb(255 255 255 / 4%);
  border-color: var(--ay-border);
}
html.dark-mode .form-control::placeholder { color: var(--ay-muted); opacity: 1; }
html.dark-mode #messagelist tbody td,
html.dark-mode #messagelist tbody tr td { background-color: transparent; color: var(--ay-text); border-color: var(--ay-divider); }
html.dark-mode #messagelist tr.selected td { background-color: var(--ay-selected); }
html.dark-mode #messagelist tr:hover td { background-color: var(--ay-row-hover); }
html.dark-mode #messagelist tr.selected td.subject { box-shadow: inset 3px 0 0 var(--ay-secondary); }
html.dark-mode .ay-avatar { color: #fff; background: var(--ay-av-dark, #2f6fd8); }
html.dark-mode #mailboxlist li > a, html.dark-mode .listing li > a { color: var(--ay-text); }
html.dark-mode #mailboxlist li.selected > a { color: #fff; background: var(--ay-folder-selected); }
html.dark-mode #mailboxlist li.selected > a:before { color: var(--ay-secondary); }
html.dark-mode #layout .searchbar { background: rgb(255 255 255 / 4%); }
html.dark-mode .toolbar a:not(.disabled) { color: var(--ay-text); }
html.dark-mode #attachment-list li { background: rgb(255 255 255 / 3%); }
html.dark-mode .ay-quickreply { background: rgb(255 255 255 / 3%); }
html.dark-mode body #messagestack .alert-danger { color: var(--ay-error); background: var(--ay-error-bg); border-color: var(--ay-error-border); }
html.dark-mode body #messagestack .alert-success { color: var(--ay-success); background: var(--ay-success-bg); border-color: var(--ay-success-border); }
html.dark-mode body #messagestack .alert-warning { color: var(--ay-warning); background: var(--ay-warning-bg); border-color: var(--ay-warning-border); }
html.dark-mode body #messagestack .alert-info { color: var(--ay-text); background: #12233d; border-color: var(--ay-border); }
html.dark-mode body #messagestack .alert i.icon,
html.dark-mode body #messagestack .alert i.icon::before { color: inherit; }
/* Primary actions: blue-cyan gradient (02). */
html.dark-mode body #taskmenu a.compose,
html.dark-mode body .btn-primary,
html.dark-mode.ay-mobile .content-frame-navigation a.primary,
html.dark-mode .floating-action-buttons a.button,
html.dark-mode .ay-quickreply button.ay-qr-btn.primary {
  background: linear-gradient(135deg, #22c3f0 0%, #2f86f6 55%, #3b5bf0 100%);
  border-color: transparent;
  color: #fff;
}
html.dark-mode body #taskmenu a.compose { box-shadow: 0 8px 24px rgb(47 134 246 / 35%); }
html.dark-mode body #taskmenu a.compose::before { color: inherit; }
html.dark-mode body .btn-primary:hover,
html.dark-mode body #taskmenu a.compose:hover { filter: brightness(1.08); }
html.dark-mode.ay-mobile body.action-compose .content-frame-navigation a.primary .inner { color: #fff; }
html.dark-mode #mailboxlist li.mailbox.inbox > a .unreadcount,
html.dark-mode #mailboxlist li.selected > a .unreadcount { background: var(--ay-primary); color: #fff; }
html.dark-mode #quotadisplay .bar .value { background: linear-gradient(90deg, #22c3f0, #2f86f6); box-shadow: 0 0 12px rgb(34 195 240 / 45%); }
html.dark-mode body:not(.task-login) #taskmenu a:not(.compose):not(.selected) { background-color: transparent !important; color: var(--ay-muted); }
html.dark-mode body:not(.task-login) #taskmenu a:not(.compose):hover { color: var(--ay-text); background-color: var(--ay-nav-hover) !important; }
html.dark-mode body:not(.task-login) #taskmenu a.selected { background-color: var(--ay-selected) !important; color: #fff; }
html.dark-mode #messagelist tr td, html.dark-mode.ay-mobile #messagelist tr td { background-color: transparent; }
html.dark-mode .ay-shortcuts { background: rgb(255 255 255 / 3%); }
html.dark-mode .ay-shortcuts kbd { background: rgb(255 255 255 / 6%); color: var(--ay-text); }
html.dark-mode #messagelist tr.selected td { background-color: var(--ay-selected); }
html.dark-mode #message-header .ay-sender-name { color: #fff; }
/* The blurred top bar becomes the compose button's containing block (12px gap + 1px border): keep it aligned with light mode. */
@media screen and (min-width: 1200px) {
  html.dark-mode:not(.iframe) body:not(.task-login) #taskmenu a.compose { left: 15px; top: 91px; }
}