/* =============================================================
   iLisa Mail — Unified Dark-Green Theme (recolor of AH master)  (v8, clean rebuild)
   Tron-noir: deep black + cyan. Replaces the v6→v10 patch stack.
   Login = robust single centered column (works at every width).
   App   = consistent dark theme.
   Injected by ah-nginx into SOGo via sub_filter.
   ============================================================= */

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

:root {
  /* === GRAPHITE APPLE PALETTE (v29.1) — adversarially corrected ===
     Same baseline token NAMES (so the entire var()-driven baseline incl. the
     v27 APP-WIDE CONTRAST FIX re-tints to graphite automatically) + new
     Apple-Mail component tokens. NO pure/near-black; the banned tron values
     (#0a0812/#0c0a12/#0e0b16/#050408/#08060f) are all replaced. AH cyan
     (#9b6dff) is the SINGLE accent. WCAG AA verified on EVERY surface. */

  /* ---- baseline tokens (retinted; drive the cascading contrast block) ---- */
  --ah-bg:        #16131f;                     /* app/message-list content graphite */
  --ah-card:      #211d2c;                     /* elevated cards/dialogs/compose */
  --ah-card-2:    #1b1825;                     /* card gradient stop / recessed elevated */
  --ah-line:      rgba(255, 255, 255, 0.08);  /* hairline separator */
  --ah-line-2:    rgba(255, 255, 255, 0.12);  /* stronger hairline (input/field borders) */
  --ah-cyan:      #9b6dff;                     /* AH accent — icons, active, links, unread dot */
  --ah-cyan-2:    #d6c6ff;                     /* lighter cyan glyphs on graphite (>=9.7:1) */
  --ah-cyan-deep: #5733a8;                     /* deep cyan — selection fill family + login floor */
  --ah-text:      #f5f5f7;                     /* primary text — 13-15:1 */
  --ah-muted:     rgba(235, 235, 245, 0.6);   /* secondary text — >=5.37:1 on all graphite */
  --ah-faint:     rgba(235, 235, 245, 0.55);  /* tertiary — AA (>=4.75:1) even when rendered as text */
  --ah-danger:    #ff5a52;                     /* Apple system red (dark) — 4.66:1 on elevated; borders/icons only */

  /* ---- new Apple-Mail component tokens ---- */
  --ah-sidebar:   #1d1929;                     /* Apple source-list graphite */
  --ah-content:   #16131f;                     /* message list / app content (alias of --ah-bg) */
  --ah-elevated:  #211d2c;                     /* cards, menus, dialogs, compose chrome, toolbars */
  --ah-rhdr:      #181522;                     /* reading-pane header band (scoped to msg-header only) */
  --ah-sep:       rgba(255, 255, 255, 0.08);  /* hairline */
  --ah-sel:       #5733a8;                     /* SELECTION fill: white text = 5.65:1 (AA on all rows) */
  --ah-sel-text:  #ffffff;                     /* white on the selection fill (Apple full-fill look) */
  --ah-sel-soft:  rgba(255, 255, 255, 0.88);  /* selected-row preview/date line — still 4.76:1 (AA) */
  --ah-hover:     rgba(255, 255, 255, 0.06);  /* Apple row/sidebar hover wash */
  --ah-rbody:     #ffffff;                     /* reading-pane email BODY stays white — KEEP */
  --ah-rink:      #1d1d1f;                     /* email body ink — KEEP (16.8:1 on white) */
  --ah-fab-ink:   #140a2b;                     /* dark glyph on the cyan FAB/accent disc — 9.35:1 */
  --ah-graphite-floor: #0d0b14;                /* darkest permitted graphite */
  --ah-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', 'Inter', sans-serif;
}

* { -webkit-font-smoothing: antialiased; }

html, body, body.main {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background-color: var(--ah-bg) !important;
  color: var(--ah-text) !important;
}
body.main.sg-dark { overflow-y: auto !important; }

/* =============================================================
   LOGIN  —  single centered column, robust at all widths
   (scoped to the login view; never touches the app)
   ============================================================= */

main[ui-view="login"] {
  min-height: 100dvh !important;
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(155, 109, 255,0.13), transparent 60%),
    radial-gradient(900px 600px at 108% 112%, rgba(155, 109, 255,0.07), transparent 55%),
    linear-gradient(160deg, #050408 0%, #08060f 52%, #040307 100%) !important;
}

/* animated tron grid canvas (added by theme.js on login only) */
#ah-tron-grid {
  position: fixed !important; inset: 0 !important;
  z-index: 0 !important; pointer-events: none !important;
  opacity: 0.5 !important;
}

/* flex container -> force ONE centered column everywhere */
#loginContent,
#loginContent.layout-gt-md-row,
#loginContent.layout-column,
#loginContent.flex-100 {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(20px, 3.4vh, 34px) !important;
  width: 100% !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 44px 20px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* brand header (logo + caption) — formerly the left panel */
#loginContent > .sg-logo,
#loginContent > .sg-logo.flex-gt-md-50 {
  flex: none !important;
  width: auto !important;
  max-width: 460px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
#loginContent > .sg-logo > div {           /* div.md-padding.layout-row */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
#loginContent > .sg-logo .hide.show-gt-md { display: none !important; }  /* empty text node */
#loginContent > .sg-logo img {
  width: 188px !important;
  max-width: 70vw !important;
  height: auto !important;
  margin: 0 !important;
  filter: drop-shadow(0 0 26px rgba(155, 109, 255,0.30)) !important;
}
#loginContent > .sg-logo::after {
  content: "SECURE OPERATIONS MAIL";
  margin-top: 16px;
  color: var(--ah-cyan-2);
  font: 700 11px/1 'Inter', sans-serif;
  letter-spacing: 0.34em;
}

/* card wrapper */
#loginContent > .sg-login,
#loginContent > .sg-login.flex-gt-md-50,
#loginContent > .sg-login.md-bg,
#loginContent > .sg-login.md-accent.md-bg,
#loginContent > .sg-login.md-default-theme.md-bg.md-accent {
  flex: none !important;
  width: 100% !important;
  max-width: 412px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  display: block !important;
}

/* the card itself */
#login,
#login.sg-login-content {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 34px 30px 28px !important;
  box-sizing: border-box !important;
  background: linear-gradient(180deg, var(--ah-card), var(--ah-card-2)) !important;
  border: 1px solid var(--ah-line) !important;
  border-radius: 22px !important;
  box-shadow:
    0 28px 80px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 60px rgba(155, 109, 255,0.06) !important;
  backdrop-filter: blur(22px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.15) !important;
}

/* card heading */
#login::before {
  content: "Sign in";
  display: block;
  margin: 0 0 22px;
  color: var(--ah-text);
  font: 700 24px/1.1 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

/* form reset */
#login form { width: 100% !important; display: block !important; background: none !important; }
#login form > div[ng-if] { width: 100% !important; }

/* input groups -> FLEX COLUMN so the container always grows to contain
   its label + input (Angular Material otherwise collapses it to the
   label height and the inputs overlap). */
#login md-input-container,
#login md-input-container.md-block,
#login md-input-container.md-icon-left,
#login md-input-container.md-icon-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  margin: 0 0 15px !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* labels -> static block above input (no floating-label fights) */
#login md-input-container > label,
#login md-input-container.md-input-has-placeholder > label {
  position: static !important;
  order: 0 !important;
  display: block !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
  left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  text-align: left !important;
  color: var(--ah-muted) !important;
  font: 700 11px/1.2 'Inter', sans-serif !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
}
#login md-input-container > label .md-required { color: var(--ah-cyan) !important; }

/* inputs */
#login input.md-input,
#login input[type="text"],
#login input[type="password"],
#login input[type="email"] {
  order: 1 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 14px 0 44px !important;
  box-sizing: border-box !important;
  color: var(--ah-text) !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--ah-line-2) !important;
  border-radius: 13px !important;
  font: 400 15px/50px 'Inter', sans-serif !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
  transition: border-color .2s, box-shadow .2s, background .2s !important;
}
#login input.md-input::placeholder { color: var(--ah-faint) !important; }
#login input.md-input:focus,
#login input:focus {
  outline: none !important;
  border-color: rgba(155, 109, 255,0.70) !important;
  background: rgba(155, 109, 255,0.05) !important;
  box-shadow: 0 0 0 4px rgba(155, 109, 255,0.12), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* kill Angular Material underline + error spacer (clutter) */
#login md-input-container .md-errors-spacer,
#login md-input-container .md-input-message-animation,
#login md-input-container::after { display: none !important; }

/* left icon — absolute (out of flex flow), anchored into the input
   which sits at the bottom of the container */
#login md-input-container.md-icon-left > md-icon:not(#password-visibility-icon) {
  position: absolute !important;
  left: 13px !important;
  right: auto !important;
  top: auto !important;
  bottom: 13px !important;
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ah-cyan-2) !important;
  z-index: 3 !important;
  font-size: 22px !important;
  line-height: 24px !important;
}
/* password visibility toggle (right) */
#login #password-visibility-icon {
  position: absolute !important;
  right: 12px !important;
  left: auto !important;
  top: auto !important;
  bottom: 13px !important;
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ah-faint) !important;
  cursor: pointer !important;
  z-index: 4 !important;
  font-size: 22px !important;
  line-height: 24px !important;
}
#login #password-visibility-icon:hover { color: var(--ah-cyan) !important; }

/* language-selector row — hide for a clean, single-purpose login */
#login form .layout-align-start-end.layout-row,
#login form div[layout="row"][layout-align="start end"] { display: none !important; }

/* "stay signed in" switch row */
#login form .layout-align-center-center.layout-row,
#login form div[layout="row"][layout-align="center center"] {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  margin: 0 0 4px !important;
  min-height: 0 !important;
}
#login md-switch { margin: 0 !important; }
#login md-switch .md-label { color: var(--ah-muted) !important; font-size: 13px !important; }
#login md-switch .md-bar { background-color: rgba(255,255,255,0.18) !important; }
#login md-switch .md-thumb { background-color: #cfd6df !important; }
#login md-switch.md-checked .md-bar { background-color: rgba(155, 109, 255,0.42) !important; }
#login md-switch.md-checked .md-thumb { background-color: var(--ah-cyan) !important; }

/* bottom action row -> full-width submit */
#login .layout-align-space-between-center.layout-row,
#login div[layout="row"][layout-align="space-between center"] {
  display: block !important;
  width: 100% !important;
  margin: 8px 0 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
#login .layout-align-space-between-center.layout-row > button.md-icon-button { display: none !important; }
#login .layout-align-space-between-center.layout-row > div { width: 100% !important; margin: 0 !important; }

#login button.md-fab.md-accent,
#login button[type="submit"].md-fab,
#login .md-button.md-fab.md-accent {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--ah-cyan-2) 0%, var(--ah-cyan) 45%, var(--ah-cyan-deep) 100%) !important;
  color: #06040d !important;
  box-shadow: 0 14px 38px rgba(155, 109, 255,0.28) !important;
  text-transform: none !important;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease !important;
}
#login button.md-fab.md-accent::before {
  content: "Sign in";
  font: 800 15px/1 'Inter', sans-serif;
  letter-spacing: 0.01em;
  color: #06040d;
}
#login button.md-fab.md-accent:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 18px 48px rgba(155, 109, 255,0.44) !important;
}
#login button.md-fab.md-accent:active { transform: translateY(0) !important; }
#login button.md-fab.md-accent[disabled] {
  opacity: 0.5 !important;
  filter: grayscale(0.3) !important;
  box-shadow: none !important;
}
#login button.md-fab.md-accent md-icon {
  position: static !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 20px !important;
  margin: 0 !important;
  color: #06040d !important;
}

/* login icons fallback */
#login md-icon, main[ui-view="login"] md-icon { color: var(--ah-cyan-2); }

/* error toast (wrong password) */
md-toast .md-toast-content {
  background: #110e1a !important;
  color: var(--ah-text) !important;
  border: 1px solid rgba(255,90,82,0.42) !important;
  border-radius: 12px !important;
}

/* SOGo's failed-login ripple is a flat full-screen red by default —
   restyle it to an on-brand dark overlay with a red accent. */
main[ui-view="login"] sg-ripple.md-warn,
#loginContent sg-ripple.md-warn,
sg-ripple.md-warn.md-bg {
  background: radial-gradient(circle at 50% 42%, rgba(46,12,14,0.99), rgba(5,7,11,0.995)) !important;
  background-color: #08060e !important;
}
sg-ripple-content { color: var(--ah-text) !important; }
sg-ripple-content,
sg-ripple-content span,
sg-ripple-content p { color: var(--ah-text) !important; }
sg-ripple-content md-icon,
sg-ripple-content .material-icons {
  color: var(--ah-danger) !important;
  font-size: 34px !important;
  width: 34px !important; height: 34px !important;
}
sg-ripple-content .md-button {
  color: var(--ah-cyan) !important;
  border: 1px solid rgba(155, 109, 255,0.40) !important;
  border-radius: 10px !important;
  margin-top: 14px !important;
}
sg-ripple-content .md-button:hover { background: rgba(155, 109, 255,0.10) !important; }

/* fixed footer badge */
main[ui-view="login"] #loginContent::after {
  content: "MAIL.ARTIFICIALHEIGHTS.COM";
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  color: var(--ah-cyan-2);
  opacity: 0.55;
  font: 600 10px/1 'Inter', sans-serif;
  letter-spacing: 0.22em;
  border: 1px solid rgba(142,224,255,0.18);
  border-radius: 6px;
  padding: 5px 12px;
  background: rgba(3,5,9,0.34);
  backdrop-filter: blur(10px);
  z-index: 3;
}

/* very short screens: top-align so nothing clips */
@media (max-height: 680px) {
  #loginContent { justify-content: flex-start !important; }
}

/* =============================================================
   APP / INBOX  —  consistent dark theme
   ============================================================= */

.view-list, #centerPanel, md-content,
.md-default-theme.md-content, .sg-md-body {
  background-color: var(--ah-bg) !important;
  color: var(--ah-text) !important;
}

/* top toolbars / header */
md-toolbar, .md-toolbar-tools, .sg-toolbar,
md-toolbar.md-default-theme:not(.md-menu-toolbar),
md-toolbar.md-hue-2:not(.md-menu-toolbar) {
  background-color: #0c0a12 !important;
  color: var(--ah-text) !important;
  border-bottom: 1px solid rgba(155, 109, 255,0.12) !important;
}
md-toolbar span, md-toolbar .md-toolbar-tools span,
md-toolbar button, md-toolbar a { color: var(--ah-text) !important; }
md-toolbar md-icon { color: var(--ah-cyan-2) !important; }

/* sidebar / folder list */
md-sidenav, .sg-sidenav, .md-sidenav-left {
  background-color: #0e0b16 !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
}
md-sidenav md-toolbar, md-sidenav md-toolbar.sg-padded { background-color: #0c0a12 !important; }
md-sidenav md-list-item, md-sidenav .md-button,
md-sidenav .sg-account-name, md-sidenav .sg-account-email { color: rgba(244,247,251,0.84) !important; }
md-sidenav md-icon, .sg-folder-list md-icon { color: var(--ah-cyan-2) !important; }
md-sidenav md-list-item.md-active, md-sidenav .md-button.md-active,
md-sidenav md-list-item.sg-active {
  background-color: rgba(155, 109, 255,0.10) !important;
  color: var(--ah-cyan) !important;
}

/* message list + its header/sort bar (kills the stray white bar) */
.view-list md-toolbar, .sg-message-list-header,
.view-list .md-subheader, .md-subheader, .sg-search-toolbar {
  background-color: #0c0a12 !important;
  color: var(--ah-muted) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.sg-message-list-item, md-list-item, .md-list-item-text {
  color: rgba(244,247,251,0.86) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
md-list-item p, md-list-item span, md-list-item h3, md-list-item h4 { color: inherit !important; }
md-list-item:hover, .sg-message-list-item:hover { background-color: rgba(155, 109, 255,0.05) !important; }
md-list-item.sg-active, md-list-item.md-active,
.sg-mailbox-list-item.sg-selected {
  background-color: rgba(155, 109, 255,0.10) !important;
  border-left: 3px solid var(--ah-cyan) !important;
}

/* message viewer */
.sg-message-body, .sg-message-content, .msg-body,
.sg-message-view, .viewer-content, .view-detail {
  background-color: var(--ah-bg) !important;
  color: var(--ah-text) !important;
}
.sg-message-view h1, .sg-message-view h2, .sg-message-view h3 { color: var(--ah-text) !important; }

/* Force readable text on the SOGo CHROME around the message (header fields,
   recipients) only. The email BODY content is intentionally NOT force-colored
   per-element — it inherits a sensible default from its container so an
   email/signature keeps its OWN colors (e.g. a dark brand tile with white
   text). '.view-detail' is the body container default (light here for the dark
   app; #detailView re-asserts dark on the white reading pane). */
.msg-header-content, .msg-header-content *,
.msg-header, .msg-header *,
.pseudo-input-container, .pseudo-input-container *,
.pseudo-input-field, .pseudo-input-field *,
.sg-message-body-header, .sg-message-body-header *,
.sg-expand, .sg-expand *,
.sg-recipient, .sg-recipient *,
.view-detail {
  color: var(--ah-text) !important;
}
/* secondary metadata (date / sent time / labels) muted but readable */
.md-caption, time,
[ui-view="message"] .md-caption, .view-detail .md-caption,
.pseudo-input-label, .sg-message .md-caption { color: var(--ah-muted) !important; }
/* recipient / sender chips — on-brand, readable */
md-chip, .md-chip { background: rgba(155, 109, 255,0.12) !important; }
md-chip .md-chip-content, .md-chip-content,
md-chip .md-chip-content * { color: var(--ah-cyan-2) !important; }
/* links + icons in the message stay cyan */
.view-detail a, [ui-view="message"] a { color: var(--ah-cyan) !important; }
.view-detail md-icon, [ui-view="message"] md-icon { color: var(--ah-cyan-2) !important; }

/* message-view CARDS render white by default — darken them so the header
   (subject / sender / date) is readable on dark instead of light-on-white */
md-card, md-card._md,
[ui-view="message"] md-card, .view-detail md-card,
md-whiteframe, .md-whiteframe-1dp, .md-whiteframe-2dp {
  background-color: #0e0b16 !important;
  color: var(--ah-text) !important;
  box-shadow: none !important;
}
md-card md-card-content, md-card md-card-header,
md-card .md-card-content { background-color: transparent !important; }

/* compose + dialogs */
.sg-compose, md-dialog, md-dialog md-content {
  background-color: #0e0b16 !important;
  color: var(--ah-text) !important;
  border: 1px solid rgba(155, 109, 255,0.10) !important;
}
md-dialog md-toolbar { background-color: #0c0a12 !important; }

/* ---- COMPOSE / REPLY editor (CKEditor 5) ----
   The editable surface (.ck-content) renders on WHITE by default but was
   INHERITING the dialog's light text (var(--ah-text)) → white-on-white =
   invisible typed/quoted text. Force a white "paper" with dark text
   (matches the light reading pane / Apple-Mail look). The CKEditor toolbar
   is already white with dark icons, so it's left alone. */
md-dialog .ck-content,
md-dialog .ck-editor__editable,
md-dialog .ck-editor__editable_inline,
.ck.ck-content,
.ck-editor__editable {
  background-color: #ffffff !important;
  color: #1d1d1f !important;
}
md-dialog .ck-content *,
md-dialog .ck-editor__editable * {
  color: #1d1d1f !important;
}
md-dialog .ck-content a, .ck-content a { color: #6a3fc0 !important; }
/* CKEditor placeholder (empty-body hint) readable on white */
md-dialog .ck-content .ck-placeholder::before,
.ck-content .ck-placeholder::before { color: #8a8f98 !important; }

/* menus / selects */
md-menu-content, md-select-menu { background-color: #0e0b16 !important; }
md-menu-content md-menu-item, md-option { color: var(--ah-text) !important; }
md-menu-item:hover, md-option:hover { background-color: rgba(155, 109, 255,0.10) !important; }

/* primary accent button + FAB */
.md-button.md-primary.md-raised, .md-button.md-accent,
.md-fab.md-accent, button.md-fab {
  background-color: var(--ah-cyan) !important;
  color: #06040d !important;
}
.md-fab md-icon, .md-button.md-accent md-icon { color: #06040d !important; }

/* search */
.sg-search input, md-autocomplete input {
  background: rgba(255,255,255,0.06) !important;
  color: var(--ah-text) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

/* checkboxes */
md-checkbox .md-icon { border-color: rgba(255,255,255,0.32) !important; }
md-checkbox.md-checked .md-icon { background-color: var(--ah-cyan) !important; border-color: var(--ah-cyan) !important; }

/* unread badge */
.sg-counter-badge { background-color: var(--ah-cyan) !important; color: #06040d !important; font-weight: 600 !important; }

/* hide upstream SOGo "about" link */
.sg-footer-link, a[href*="sogo.nu"], a[href*="inverse.ca"] { display: none !important; }

/* ============================================================
   APPLE MAIL-STYLE HORIZONTAL LAYOUT (desktop)
   Message list on TOP, reading pane on the BOTTOM — instead of
   SOGo's default left-list / right-reading-pane. Scoped to the
   content row that directly holds #detailView via :has().
   ============================================================ */
@media (min-width: 960px) {
  div.md-flex.layout-row:has(> #detailView) {
    flex-direction: column !important;
    position: relative !important;  /* anchor for the drag handle */
  }
  /* message list -> full width, top (default 42%, JS overrides w/ saved size) */
  div.md-flex.layout-row:has(> #detailView) > .view-list {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 42% !important;
    height: 42% !important;
    min-height: 0 !important;
  }
  /* reading pane -> full width, fills the bottom */
  div.md-flex.layout-row:has(> #detailView) > #detailView {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* draggable splitter handle (inserted by theme.js) */
  .ah-splitter {
    position: absolute !important;
    left: 0 !important; right: 0 !important;
    height: 12px !important;
    margin-top: -6px !important;
    cursor: ns-resize !important;
    z-index: 30 !important;
    background: transparent !important;
  }
  .ah-splitter::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important; top: 50% !important;
    width: 46px !important; height: 4px !important;
    transform: translate(-50%, -50%) !important;
    background: rgba(155, 109, 255, 0.45) !important;
    border-radius: 3px !important;
    transition: background .15s ease, width .15s ease !important;
  }
  .ah-splitter:hover::before { background: rgba(155, 109, 255, 0.95) !important; width: 70px !important; }

  /* compose FAB (new-message pencil): in the horizontal layout it was
     anchored (position:absolute, bottom-CENTER) to the now-short message-
     list pane, so it floated in the middle of the screen. Pin it to the
     viewport's bottom-right corner like Gmail/Apple Mail. z-index stays
     below the compose dialog so it never sits on top of an open editor. */
  md-fab-speed-dial.sg-fab-bottom-center,
  div.md-flex.layout-row:has(> #detailView) md-fab-speed-dial {
    position: fixed !important;
    right: 26px !important;
    bottom: 24px !important;
    left: auto !important;
    top: auto !important;
    z-index: 45 !important;
  }

  /* ===== LIGHT reading pane (Apple Mail style) — message renders on white ===== */
  #detailView,
  #detailView md-content,
  #detailView .view-detail,
  #detailView md-card, #detailView md-card._md,
  #detailView md-card md-card-content,
  #detailView .msg-body, #detailView .sg-message-body,
  #detailView .sg-message-content, #detailView .viewer-content,
  #detailView .mail-content, #detailView .sg-message-view {
    background-color: #ffffff !important;
    color: #1d1d1f !important;
  }
  /* email body CONTAINER -> dark default on white (descendants inherit; email
     keeps its own inline colors so white-on-dark-tile signatures render right) */
  #detailView .msg-body {
    color: #1d1d1f !important;
    background-color: transparent !important;
  }
  /* SOGo chrome (subject + header fields) -> dark on white. Body content is
     NOT force-colored per element — only the CONTAINERS get a dark default so
     the email/signature keeps its own colors (dark brand tile w/ white text). */
  #detailView .sg-md-headline,
  #detailView .view-detail,
  #detailView .msg-header-content, #detailView .msg-header-content *,
  #detailView .pseudo-input-container, #detailView .pseudo-input-container *,
  #detailView .pseudo-input-field, #detailView .pseudo-input-field *,
  #detailView .sg-message-body-header, #detailView .sg-message-body-header *,
  #detailView [ui-view="message"],
  #detailView md-card, #detailView md-card md-card-content {
    color: #1d1d1f !important;
  }
  /* muted metadata (date / sent time) */
  #detailView .md-caption, #detailView time { color: rgba(0,0,0,0.5) !important; }
  /* links */
  #detailView a, #detailView .view-detail a { color: #6a3fc0 !important; }
  /* sender / recipient chips on light */
  #detailView md-chip, #detailView .md-chip { background: rgba(0,0,0,0.06) !important; }
  #detailView md-chip .md-chip-content, #detailView .md-chip-content { color: #1d1d1f !important; }
  /* reading-pane toolbar: light bar, gray icons */
  #detailView md-toolbar, #detailView .sg-message-toolbar { background-color: #f1f2f4 !important; }
  #detailView md-icon, #detailView md-toolbar md-icon { color: #5f6368 !important; }
}

/* ===== MOBILE reading pane (<960px) — SOGo shows the message full-screen; the
   white-pane rules above are @media>=960 only, so on phones the email body fell
   back to the dark app theme (white-on-black box). Mirror the white pane here so
   the message renders on white at EVERY width. Layout stays SOGo-native (no
   horizontal split on mobile). ===== */
@media (max-width: 959px) {
  #detailView,
  #detailView md-content,
  #detailView .view-detail,
  #detailView md-card, #detailView md-card._md,
  #detailView md-card md-card-content,
  #detailView .msg-body, #detailView .sg-message-body,
  #detailView .sg-message-content, #detailView .viewer-content,
  #detailView .mail-content, #detailView .sg-message-view,
  #detailView .mailer_plaincontent {
    background-color: #ffffff !important;
    color: #1d1d1f !important;
  }
  #detailView .msg-body { background-color: transparent !important; color: #1d1d1f !important; }
  #detailView .sg-md-headline, #detailView .view-detail,
  #detailView .msg-header-content, #detailView .msg-header-content *,
  #detailView .pseudo-input-container, #detailView .pseudo-input-container *,
  #detailView [class*="pseudo-input-container"], #detailView [class*="pseudo-input-container"] *,
  #detailView .pseudo-input-field, #detailView .pseudo-input-field *,
  #detailView .sg-message-body-header, #detailView .sg-message-body-header *,
  #detailView [ui-view="message"],
  #detailView .sg-md-title, #detailView .sg-md-subhead, #detailView .sg-md-body, #detailView .sg-md-caption,
  #detailView md-card, #detailView md-card md-card-content,
  #detailView .mailer_plaincontent {
    color: #1d1d1f !important;
  }
  #detailView .md-caption, #detailView time { color: rgba(0,0,0,0.55) !important; }
  #detailView a, #detailView .view-detail a { color: #6a3fc0 !important; }
  #detailView md-chip, #detailView .md-chip { background: rgba(0,0,0,0.06) !important; }
  #detailView md-chip .md-chip-content, #detailView .md-chip-content { color: #1d1d1f !important; }
  #detailView md-toolbar, #detailView .sg-message-toolbar { background-color: #f1f2f4 !important; }
  #detailView md-icon, #detailView md-toolbar md-icon { color: #5f6368 !important; }
}

/* === APP-WIDE CONTRAST FIX (v27) === */
/* ------------------------------------------------------------------
   ONE additive block, two failure modes (hardened via adversarial review).

   A) dark-on-dark OUTSIDE #detailView (Preferences forms, tabs, hints,
      list/form glyphs): Angular-Material's light theme leaves these
      near-black on the dark app bg (#0a0812) ~1.0:1 -> force brand
      LIGHT text/icon (var --ah-text 18.11:1 / --ah-muted 7.2:1 /
      --ah-cyan-2 13:1, all >= WCAG AA).
   B) light-on-white INSIDE #detailView (empty-state titles + any form
      element that bleeds into the WHITE reading-pane / calendar grid):
      force brand DARK (#1d1d1f 16.83:1) via ID specificity so the
      white pane always wins.

   SCOPING DISCIPLINE (hardened against the real baseline selectors):
   - No bare '*' rules. Only specific Material element/class selectors.
   - Labels/inputs/hints are scoped to md-input-container / form areas,
     never bare 'label'/'small'. This protects #login (ID-specific rules)
     and the v26 WHITE CKEditor '.ck-content' reply body (#1d1d1f on
     white, NOT under #detailView) — a CKEditor dark guard is added below.
   - ICONS: NO bare app-wide 'md-icon' light rule (it would beat nothing
     yet make WHITE date-picker / autocomplete popups cyan-on-white
     ~1.47:1). Icon fix is scoped to dark list/form areas; toolbar/sidenav
     cyan re-asserted; white Material overlays guarded to gray.
   - TABS: only INACTIVE tab labels are forced light; the active tab and
     md-ink-bar keep the cyan accent.
   - #detailView is WHITE only >= 960px (v26). Form-element DARK
     re-assertions are @media-gated to >= 960px (below that #detailView is
     DARK with light text, so #1d1d1f would be dark-on-dark). The
     empty-state title family is white at ALL widths -> forced dark
     unconditionally.
   ------------------------------------------------------------------ */

/* ---- A. FAILURE MODE A — force brand LIGHT text on the dark surfaces ---- */

/* Preferences / form labels (SOGo Version, Time Zone). Scoped to
   md-input-container / tab-content / preferences so bare 'label' never
   hits the white login form or a white md-card. */
md-input-container label,
md-input-container label.md-required,
md-input-container .md-placeholder,
md-tab-content label,
.preferences label,
.sg-preferences label,
md-content .md-subheader,
md-input-container .md-input-message-animation {
  color: var(--ah-text, #f4f7fb) !important;
}

/* Required-field asterisk reads as cyan accent (13:1 on dark) */
md-input-container label.md-required:after,
md-input-container label .md-required,
.preferences .md-required,
.sg-preferences .md-required {
  color: var(--ah-cyan-2, #d6c6ff) !important;
}

/* Text inputs / textareas / autocomplete fields. Use .md-input (never
   bare 'input') so '#login input.md-input' keeps winning on login. */
input.md-input,
textarea.md-input,
md-input-container input.md-input,
md-input-container textarea.md-input,
md-autocomplete input.md-input,
md-autocomplete-wrap input {
  color: var(--ah-text, #f4f7fb) !important;
  -webkit-text-fill-color: var(--ah-text, #f4f7fb) !important;
}
input.md-input::placeholder,
textarea.md-input::placeholder {
  color: var(--ah-muted, rgba(244, 247, 251, 0.62)) !important;
  -webkit-text-fill-color: var(--ah-muted, rgba(244, 247, 251, 0.62)) !important;
}

/* md-select display value ("None") + generic Material display text.
   Scoped to dark form/content containers so it can't leak onto a white
   reading-pane fragment that lacks the #detailView ancestor. */
md-select-value,
md-select-value > span,
md-select-value .md-text,
md-select-value span:not(.md-select-icon),
.md-select-value,
.md-select-value > span,
md-input-container .md-text,
md-content .md-text,
md-content div.md-text,
md-content span.md-text,
md-datepicker .md-datepicker-input {
  color: var(--ah-text, #f4f7fb) !important;
}
md-select-value.md-select-placeholder,
.md-select-value.md-select-placeholder {
  color: var(--ah-muted, rgba(244, 247, 251, 0.62)) !important;
}

/* Tab labels (General / Events / Tasks): INACTIVE only -> muted light.
   Active tab + ink bar stay cyan. */
md-tab-item.md-tab:not(.md-active),
md-dummy-tab.md-tab:not(.md-active),
md-tabs md-tab-item:not(.md-active) {
  color: var(--ah-muted, rgba(244, 247, 251, 0.62)) !important;
}
md-tab-item.md-tab.md-active,
md-dummy-tab.md-tab.md-active,
md-tabs md-tab-item.md-active {
  color: var(--ah-cyan-2, #d6c6ff) !important;
}
md-ink-bar,
md-tabs md-ink-bar {
  color: var(--ah-cyan, #9b6dff) !important;
  background-color: var(--ah-cyan, #9b6dff) !important;
}

/* Hint / helper / char-counter text (Preferences "en" hint). Scoped to
   dark form areas — bare 'small' is NOT used, so a <small> inside the
   white CKEditor .ck-content reply body can't be forced light. */
md-input-container small,
md-tab-content small,
md-content small,
.preferences small,
.sg-preferences small,
md-input-container .md-char-counter,
.sg-md-caption,
md-sidenav .sg-quota .sg-md-caption,
.sg-hint, .hint {
  color: var(--ah-muted, rgba(244, 247, 251, 0.62)) !important;
}

/* Defensive — adjacent dark form surfaces (event/contact editors, chips,
   virtual-repeat lists, search) kept readable on dark. */
md-chips .md-chip,
md-chip,
.md-chip-content,
md-virtual-repeat-container .md-text,
.sg-event-editor label,
.sg-contact-editor label,
.sg-event-editor .md-text,
.sg-contact-editor .md-text {
  color: var(--ah-text, #f4f7fb) !important;
}

/* ---- A (icons). SCOPED to the dark list/form areas, NOT a bare
   app-wide md-icon rule. Each container is dark, so cyan reads >= 10:1.
   #detailView md-icon (1,0,1) always wins on the white pane. ---- */
.sg-message-list md-icon.material-icons,
.view-list md-icon.material-icons,
md-list md-icon.material-icons,
md-list-item md-icon.material-icons,
md-content md-icon.material-icons,
md-tabs md-icon.material-icons {
  color: var(--ah-cyan-2, #d6c6ff) !important;
}
/* Belt-and-suspenders: re-assert toolbar/sidenav cyan so no scoped/list
   rule can ever dim the protected nav icons. */
md-toolbar md-icon,
md-toolbar md-icon.material-icons,
md-sidenav md-icon,
md-sidenav md-icon.material-icons,
.sg-folder-list md-icon {
  color: var(--ah-cyan-2, #d6c6ff) !important;
}
/* GUARD: WHITE Material overlays NOT under #detailView keep DARK icons
   (date-picker popup, autocomplete) — blocks the cyan-on-white (~1.47:1)
   leak a bare md-icon rule would have caused. */
md-calendar md-icon,
md-datepicker md-icon,
.md-datepicker-calendar md-icon,
md-autocomplete-wrap md-icon {
  color: #5f6368 !important;
}
/* FAB / accent-disc icons: stay DARK on the solid cyan disc. The scoped
   'md-content md-icon.material-icons' rule (0,1,2) above would otherwise
   beat the legacy '.md-fab md-icon' (0,1,1) and paint them cyan-on-cyan
   (e.g. the Preferences SAVE fab). These (0,2,1) win it back. */
.md-fab md-icon,
.md-fab md-icon.material-icons,
button.md-fab md-icon.material-icons,
md-fab-speed-dial md-icon.material-icons,
.md-button.md-fab md-icon.material-icons {
  color: #06040d !important;
}
/* Drag ghost: <sg-draggable-helper> mounts directly under <body>, outside
   every scoped container — keep its glyph (person / email) visible on the
   dark page during a drag. */
sg-draggable-helper md-icon,
sg-draggable-helper md-icon.material-icons {
  color: var(--ah-cyan-2, #d6c6ff) !important;
}

/* ---- B. FAILURE MODE B + SCOPING — #detailView is the WHITE surface
   (reading pane AND calendar week grid); re-assert DARK so nothing
   forced light above can render light-on-white. ---- */

/* Empty-state title family ("No contact / No message selected"): white at
   ALL widths (Material default) -> force dark UNCONDITIONALLY. */
#detailView div.sg-md-title,
#detailView .sg-md-title,
#detailView .sg-md-subhead,
#detailView .sg-md-body,
#detailView .sg-md-caption,
#detailView .sg-md-headline {
  color: #1d1d1f !important;
}

/* Detail-pane icons stay Google-gray (matches v26 #detailView icon rule),
   at all widths, independent of legacy selector shape. */
#detailView md-icon,
#detailView md-icon.material-icons {
  color: #5f6368 !important;
}

/* Detail-pane required asterisk: dark-readable on-brand accent that clears
   AA on white (#5e3db0 = 5.82:1; the baseline #7d52e0 was only 3.7:1). */
#detailView label.md-required:after,
#detailView md-input-container label.md-required:after,
#detailView label .md-required,
#detailView .md-required {
  color: #5e3db0 !important;
}

/* Form elements that can render in the WHITE reading-pane / calendar grid
   are forced dark ONLY where that white surface exists (>= 960px). Below
   960px #detailView is DARK with light text (v26), so a #1d1d1f here would
   be dark-on-dark — hence the @media gate. */
@media (min-width: 960px) {
  #detailView label,
  #detailView label.md-required,
  #detailView .md-placeholder,
  #detailView md-input-container label,
  #detailView md-input-container .md-placeholder,
  #detailView .md-input-message-animation,
  #detailView input.md-input,
  #detailView textarea.md-input,
  #detailView md-input-container input.md-input,
  #detailView md-input-container textarea.md-input,
  #detailView md-autocomplete input.md-input,
  #detailView md-select-value,
  #detailView md-select-value > span,
  #detailView md-select-value .md-text,
  #detailView .md-select-value,
  #detailView md-input-container .md-text,
  #detailView div.md-text,
  #detailView span.md-text,
  #detailView md-datepicker .md-datepicker-input,
  #detailView md-tab-item.md-tab:not(.md-active),
  #detailView md-dummy-tab.md-tab:not(.md-active),
  #detailView md-chips .md-chip,
  #detailView md-chip,
  #detailView .md-chip-content,
  #detailView md-virtual-repeat-container .md-text,
  #detailView .sg-event-editor label,
  #detailView .sg-contact-editor label,
  #detailView .sg-event-editor .md-text,
  #detailView .sg-contact-editor .md-text {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
  }
  /* Captions / hints / counters inside the white pane: muted DARK gray. */
  #detailView small,
  #detailView .md-char-counter,
  #detailView .sg-hint,
  #detailView .hint {
    color: rgba(0, 0, 0, 0.5) !important;
  }
  /* Placeholders inside the white pane: gray, not light. */
  #detailView input.md-input::placeholder,
  #detailView textarea.md-input::placeholder {
    color: rgba(0, 0, 0, 0.42) !important;
    -webkit-text-fill-color: rgba(0, 0, 0, 0.42) !important;
  }
}

/* ---- DEFENSE-IN-DEPTH for v26 WHITE surfaces NOT under #detailView ----
   CKEditor reply body (.ck-content) is white + #1d1d1f and is OUTSIDE
   #detailView, so the #detailView re-assertions can't shadow leaks.
   Re-assert DARK here so no Failure-Mode-A rule can put light text on the
   white editor. (.ck-content uses .ck-icon SVGs, not <md-icon>.) ---- */
.ck-content label,
.ck-content .md-text {
  color: #1d1d1f !important;
}
.ck-content small {
  color: rgba(0, 0, 0, 0.6) !important;
}

/* scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(155, 109, 255,0.22); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(155, 109, 255,0.4); }

/* === GRAPHITE APPLE SKIN (v29.1) === */
/* Appended AFTER the entire baseline (v8 base + v27 APP-WIDE CONTRAST FIX).
   Wins by source order with same-or-higher specificity + !important. Goal:
   pixel-faithful Apple Mail (macOS) DARK mode in GRAPHITE, single AH cyan
   accent, real SF font. Re-skins the hardcoded near-blacks; adds Apple
   source-list, list-row + synthesized unread dot, reading-header band,
   avatar, unified-toolbar polish; softens login. #detailView stays the WHITE
   surface (reading pane + calendar grid). Every preserve_rule retinted, not
   removed. */

/* ---- Typography: real SF first; Inter demoted to last fallback ---- */
html, body, body.main,
.view-list, #centerPanel, md-content, md-sidenav,
md-toolbar, md-dialog, md-list-item, .sg-message-list-item,
md-menu-content, #login, #login form, input, textarea, button {
  font-family: var(--ah-font) !important;
}
* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html, body, body.main {
  background-color: var(--ah-content) !important;
  color: var(--ah-text) !important;
}

/* =========================================================================
   APP CONTENT / MESSAGE-LIST SURFACES -> graphite
   ========================================================================= */
.view-list, #centerPanel, md-content,
.md-default-theme.md-content, .sg-md-body {
  background-color: var(--ah-content) !important;
  color: var(--ah-text) !important;
}

/* ---- Unified toolbars -> graphite + hairline ---- */
md-toolbar, .md-toolbar-tools, .sg-toolbar,
md-toolbar.md-default-theme:not(.md-menu-toolbar),
md-toolbar.md-hue-2:not(.md-menu-toolbar) {
  background-color: var(--ah-elevated) !important;
  color: var(--ah-text) !important;
  border-bottom: 1px solid var(--ah-sep) !important;
  box-shadow: none !important;
}
md-toolbar span, md-toolbar .md-toolbar-tools span,
md-toolbar button, md-toolbar a { color: var(--ah-text) !important; }
md-toolbar md-icon, md-toolbar md-icon.material-icons { color: var(--ah-cyan-2) !important; }

/* ---- Message-list header / sort bar / search toolbar ---- */
.view-list md-toolbar, .sg-message-list-header,
.view-list .md-subheader, .md-subheader, .sg-search-toolbar {
  background-color: var(--ah-elevated) !important;
  color: var(--ah-muted) !important;
  border-bottom: 1px solid var(--ah-sep) !important;
}

/* =========================================================================
   SIDEBAR — Apple source-list graphite
   ========================================================================= */
md-sidenav, .sg-sidenav, .md-sidenav-left {
  background-color: var(--ah-sidebar) !important;
  border-right: 1px solid var(--ah-sep) !important;
}
md-sidenav md-toolbar, md-sidenav md-toolbar.sg-padded {
  background-color: var(--ah-sidebar) !important;
  border-bottom: 1px solid var(--ah-sep) !important;
}
md-sidenav .sg-account-name {
  color: var(--ah-text) !important; font-weight: 600 !important; letter-spacing: -0.01em !important;
}
md-sidenav .sg-account-email { color: var(--ah-muted) !important; }
md-sidenav .md-subheader,
md-sidenav .md-subheader .md-subheader-inner,
md-sidenav .sg-folder-section-title,
md-sidenav .sg-folders-title, md-sidenav .sg-folders-list-heading,
.sg-sidenav .md-subheader {
  background: transparent !important;
  color: var(--ah-muted) !important;
  font: 700 11px/1.5 var(--ah-font) !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
  padding-top: 14px !important;
  border: 0 !important;
}
md-sidenav md-list-item, md-sidenav .md-button,
md-sidenav .sg-account-name, md-sidenav .sg-account-email,
md-sidenav .sg-folder-name, md-sidenav .md-list-item-inner {
  color: var(--ah-text) !important;
}
md-sidenav md-list-item, md-sidenav md-list-item .md-button {
  border-radius: 6px !important;
  margin: 1px 8px !important;
  border-bottom: 0 !important;
  font: 400 13.5px/1.3 var(--ah-font) !important;
}
md-sidenav md-icon, .sg-folder-list md-icon { color: var(--ah-cyan-2) !important; }
md-sidenav .sg-unseen-count, md-sidenav .sg-counter, md-sidenav .sg-counter-badge {
  background: transparent !important;
  color: var(--ah-muted) !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
}
md-sidenav md-list-item:hover, md-sidenav .md-button:hover {
  background-color: var(--ah-hover) !important;
  border-radius: 6px !important;
}
md-sidenav md-list-item.md-active, md-sidenav .md-button.md-active,
md-sidenav md-list-item.sg-active, md-sidenav .sg-mailbox-list-item.sg-selected {
  background-color: var(--ah-sel) !important;
  color: var(--ah-sel-text) !important;
  border-radius: 6px !important;
  border-left: 0 !important;
}
md-sidenav md-list-item.md-active *, md-sidenav .md-button.md-active *,
md-sidenav md-list-item.sg-active *,
md-sidenav .sg-mailbox-list-item.sg-selected *,
md-sidenav md-list-item.md-active md-icon, md-sidenav .md-button.md-active md-icon,
md-sidenav md-list-item.sg-active md-icon,
md-sidenav md-list-item.md-active .sg-counter,
md-sidenav md-list-item.sg-active .sg-counter {
  color: var(--ah-sel-text) !important;
}

/* =========================================================================
   MESSAGE LIST ROWS — Apple rhythm + synthesized unread dot + full-fill select
   ========================================================================= */
.sg-message-list-item, md-list-item, .md-list-item-text {
  color: var(--ah-text) !important;
  border-bottom: 1px solid var(--ah-sep) !important;
}
.sg-message-list-item { position: relative !important; }
.sg-message-list-item .sender, md-list-item h3 {
  color: var(--ah-text) !important; font-size: 14px !important; font-weight: 600 !important;
}
.sg-message-list-item .sg-subject {
  color: var(--ah-text) !important; font-size: 13px !important;
}
.sg-message-list-item .sg-preview, .sg-message-list-item .subject,
md-list-item h4, md-list-item p, .md-secondary-container {
  color: var(--ah-muted) !important; font-size: 13px !important; font-weight: 400 !important;
}
.sg-message-list-item .sg-date, .sg-message-list-item time, md-list-item time {
  color: var(--ah-muted) !important; font-size: 12px !important; font-weight: 400 !important;
}
.sg-message-list-item.sg-unread .sender,
.sg-message-list-item.unread .sender,
li.sg-unread .sg-subject {
  color: var(--ah-text) !important; font-weight: 700 !important;
}
.sg-message-list-item.sg-unread::before,
.sg-message-list-item.unread::before {
  content: "" !important;
  position: absolute !important;
  left: 7px !important; top: 50% !important;
  width: 8px !important; height: 8px !important;
  margin-top: -4px !important;
  border-radius: 50% !important;
  background: var(--ah-cyan) !important;
  z-index: 2 !important;
}
md-list-item:hover, .sg-message-list-item:hover {
  background-color: var(--ah-hover) !important;
}
md-list-item.sg-active, md-list-item.md-active,
.sg-message-list-item.sg-active, .sg-message-list-item.md-active,
.sg-message-list-item.sg-selected, .sg-mailbox-list-item.sg-selected {
  background-color: var(--ah-sel) !important;
  border-left: 0 !important;
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
  border-radius: 6px !important;
}
md-list-item.sg-active, md-list-item.sg-active .sender, md-list-item.sg-active .sg-subject,
md-list-item.md-active, md-list-item.md-active .sender, md-list-item.md-active .sg-subject,
.sg-message-list-item.sg-active .sender, .sg-message-list-item.sg-active .sg-subject,
.sg-message-list-item.md-active .sender, .sg-message-list-item.md-active .sg-subject,
.sg-message-list-item.sg-selected .sender, .sg-message-list-item.sg-selected .sg-subject,
.sg-mailbox-list-item.sg-selected, .sg-mailbox-list-item.sg-selected * {
  color: var(--ah-sel-text) !important;
}
md-list-item.sg-active h4, md-list-item.sg-active p, md-list-item.sg-active time,
md-list-item.md-active h4, md-list-item.md-active p, md-list-item.md-active time,
.sg-message-list-item.sg-active .sg-preview, .sg-message-list-item.sg-active .sg-date,
.sg-message-list-item.sg-active time,
.sg-message-list-item.md-active .sg-preview, .sg-message-list-item.md-active .sg-date,
.sg-message-list-item.md-active time,
.sg-message-list-item.sg-selected .sg-preview, .sg-message-list-item.sg-selected .sg-date,
.sg-message-list-item.sg-selected time {
  color: var(--ah-sel-soft) !important;
}
md-list-item.sg-active md-icon, md-list-item.md-active md-icon,
.sg-message-list-item.sg-active md-icon, .sg-message-list-item.md-active md-icon,
.sg-message-list-item.sg-selected md-icon { color: var(--ah-sel-text) !important; }
.sg-message-list-item.sg-active::before, .sg-message-list-item.md-active::before,
.sg-message-list-item.sg-selected::before { background: var(--ah-sel-text) !important; }

/* =========================================================================
   CARDS / WHITEFRAMES outside the white reading pane -> elevated graphite.
   #detailView md-card stays WHITE (re-asserted AFTER so it wins source order).
   ========================================================================= */
md-card, md-card._md, md-whiteframe,
.md-whiteframe-1dp, .md-whiteframe-2dp {
  background-color: var(--ah-elevated) !important;
  color: var(--ah-text) !important;
  box-shadow: none !important;
  border: 1px solid var(--ah-sep) !important;
}
md-card md-card-content, md-card md-card-header, md-card .md-card-content {
  background-color: transparent !important;
}
#detailView md-card, #detailView md-card._md {
  background-color: var(--ah-rbody) !important; color: var(--ah-rink) !important;
  box-shadow: none !important; border: 0 !important;
}

/* =========================================================================
   COMPOSE + DIALOGS + MENUS -> elevated graphite chrome
   ========================================================================= */
.sg-compose, md-dialog, md-dialog md-content {
  background-color: var(--ah-elevated) !important;
  color: var(--ah-text) !important;
  border: 1px solid var(--ah-sep) !important;
}
md-dialog md-toolbar {
  background-color: var(--ah-elevated) !important;
  border-bottom: 1px solid var(--ah-sep) !important;
}
md-menu-content, md-select-menu {
  background-color: var(--ah-elevated) !important;
  border: 1px solid var(--ah-sep) !important;
}
md-menu-content md-menu-item, md-option { color: var(--ah-text) !important; }
md-menu-item:hover, md-option:hover { background-color: var(--ah-hover) !important; }
.sg-compose md-input-container input.md-input,
md-dialog md-input-container input.md-input {
  color: var(--ah-text) !important; -webkit-text-fill-color: var(--ah-text) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--ah-line-2) !important;
  border-radius: 8px !important;
}
md-dialog .ck-content, md-dialog .ck-editor__editable,
md-dialog .ck-editor__editable_inline, .ck.ck-content, .ck-editor__editable {
  background-color: var(--ah-rbody) !important; color: var(--ah-rink) !important;
}
md-dialog .ck-content *, md-dialog .ck-editor__editable * { color: var(--ah-rink) !important; }
md-dialog .ck-content a, .ck-content a { color: #6a3fc0 !important; }

/* =========================================================================
   READING-HEADER BAND (Apple message header) — DARK graphite band ABOVE the
   white email body. SCOPED to mail message-header selectors ONLY so the
   CALENDAR week grid + event/contact editors (also inside #detailView) stay
   WHITE.
   ========================================================================= */
@media (min-width: 960px) {
  #detailView .sg-message-body-header,
  #detailView .msg-header-content,
  #detailView .msg-header,
  #detailView .pseudo-input-container,
  #detailView .pseudo-input-field {
    background-color: var(--ah-rhdr) !important;
    border-bottom: 1px solid var(--ah-sep) !important;
  }
  #detailView .sg-message-body-header,
  #detailView .sg-message-body-header *,
  #detailView .msg-header-content, #detailView .msg-header-content *,
  #detailView .msg-header, #detailView .msg-header *,
  #detailView .pseudo-input-container, #detailView .pseudo-input-container *,
  #detailView .pseudo-input-field, #detailView .pseudo-input-field * {
    color: var(--ah-text) !important;
    -webkit-text-fill-color: var(--ah-text) !important;
  }
  #detailView .sg-event-editor .pseudo-input-container,
  #detailView .sg-event-editor .pseudo-input-field,
  #detailView .sg-contact-editor .pseudo-input-container,
  #detailView .sg-contact-editor .pseudo-input-field {
    background-color: var(--ah-rbody) !important;
  }
  #detailView .sg-event-editor .pseudo-input-container,
  #detailView .sg-event-editor .pseudo-input-container *,
  #detailView .sg-event-editor .pseudo-input-field,
  #detailView .sg-event-editor .pseudo-input-field *,
  #detailView .sg-contact-editor .pseudo-input-container,
  #detailView .sg-contact-editor .pseudo-input-container *,
  #detailView .sg-contact-editor .pseudo-input-field,
  #detailView .sg-contact-editor .pseudo-input-field * {
    color: var(--ah-rink) !important;
    -webkit-text-fill-color: var(--ah-rink) !important;
  }
  #detailView .sg-message-body-header .sg-subject,
  #detailView .msg-header-content .sg-subject,
  #detailView .msg-header-content .sg-name,
  #detailView .pseudo-input-field b, #detailView .pseudo-input-field strong {
    font-size: 16px !important; font-weight: 600 !important; letter-spacing: -0.01em !important;
  }
  #detailView .sg-message-body-header .md-caption,
  #detailView .msg-header-content .md-caption,
  #detailView .msg-header-content time,
  #detailView .pseudo-input-label,
  #detailView .sg-message-body-header time {
    color: var(--ah-muted) !important;
    -webkit-text-fill-color: var(--ah-muted) !important;
  }
  #detailView .sg-message-body-header .md-avatar,
  #detailView .msg-header-content .sg-avatar,
  #detailView .sg-avatar-circle,
  #detailView .sg-message-body-header md-icon.sg-avatar {
    background: var(--ah-sel) !important; color: #ffffff !important;
    border-radius: 50% !important;
  }
  #detailView .sg-message-body-header md-icon,
  #detailView .msg-header-content md-icon,
  #detailView .pseudo-input-container md-icon { color: var(--ah-cyan-2) !important; }
  #detailView .sg-message-body-header md-chip,
  #detailView .msg-header-content md-chip,
  #detailView .pseudo-input-field md-chip {
    background: rgba(0, 0, 0, 0.06) !important;
  }
  #detailView .sg-message-body-header md-chip .md-chip-content,
  #detailView .msg-header-content md-chip .md-chip-content,
  #detailView .pseudo-input-field md-chip .md-chip-content {
    color: var(--ah-rink) !important; -webkit-text-fill-color: var(--ah-rink) !important;
  }
  #detailView .msg-body {
    background-color: transparent !important;
    color: var(--ah-rink) !important;
  }
  #detailView .sg-message-body, #detailView .sg-message-content,
  #detailView .viewer-content, #detailView .mail-content,
  #detailView .sg-message-view { background-color: var(--ah-rbody) !important; }
  #detailView md-toolbar, #detailView .sg-message-toolbar {
    background-color: #f3f3f5 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  }
  #detailView md-toolbar md-icon, #detailView .sg-message-toolbar md-icon { color: #5f6368 !important; }
}

/* =========================================================================
   ACCENTS / CONTROLS
   ========================================================================= */
.md-button.md-primary.md-raised, .md-button.md-accent,
.md-fab.md-accent, button.md-fab {
  background-color: var(--ah-cyan) !important;
  color: var(--ah-fab-ink) !important;
  box-shadow: 0 4px 14px rgba(155, 109, 255, 0.22) !important;
}
.md-fab md-icon, .md-button.md-accent md-icon,
button.md-fab md-icon.material-icons { color: var(--ah-fab-ink) !important; }
.sg-search input, md-autocomplete input {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--ah-text) !important;
  border: 1px solid var(--ah-line-2) !important;
  border-radius: 8px !important;
}
.sg-search input::placeholder, md-autocomplete input::placeholder,
.sg-compose input::placeholder, md-dialog input::placeholder,
#login input::placeholder { color: var(--ah-faint) !important; }
md-checkbox .md-icon { border-color: rgba(255, 255, 255, 0.32) !important; }
md-checkbox.md-checked .md-icon {
  background-color: var(--ah-cyan) !important; border-color: var(--ah-cyan) !important;
}
.sg-counter-badge { background-color: var(--ah-cyan) !important; color: var(--ah-fab-ink) !important; font-weight: 600 !important; }
md-chip, .md-chip { background: rgba(155, 109, 255, 0.10) !important; }
md-chip .md-chip-content, .md-chip .md-chip-content { color: var(--ah-cyan-2) !important; }
#detailView md-chip, #detailView .md-chip { background: rgba(0, 0, 0, 0.06) !important; }
#detailView md-chip .md-chip-content, #detailView .md-chip .md-chip-content { color: var(--ah-rink) !important; }

/* ---- v27 contrast block retint: re-assert dark list/form glyphs + active tab
   as AH accent so the brighter graphite bg doesn't wash them. ---- */
.sg-message-list md-icon.material-icons, .view-list md-icon.material-icons,
md-list md-icon.material-icons, md-list-item md-icon.material-icons,
md-content md-icon.material-icons, md-tabs md-icon.material-icons {
  color: var(--ah-cyan-2) !important;
}
md-tab-item.md-tab.md-active, md-dummy-tab.md-tab.md-active, md-tabs md-tab-item.md-active { color: var(--ah-cyan-2) !important; }
md-ink-bar, md-tabs md-ink-bar { color: var(--ah-cyan) !important; background-color: var(--ah-cyan) !important; }
md-calendar md-icon, md-datepicker md-icon,
.md-datepicker-calendar md-icon, md-autocomplete-wrap md-icon { color: #5f6368 !important; }
md-icon.sg-danger, .sg-error md-icon, .md-warn md-icon { color: var(--ah-danger) !important; }

/* =========================================================================
   LOGIN — graphite-clean: soften gradient, DROP cyan glow, dim tron grid.
   STRUCTURE preserved (only re-tinted). Login keeps working.
   ========================================================================= */
main[ui-view="login"] {
  background:
    radial-gradient(1100px 620px at 50% -14%, rgba(155, 109, 255, 0.06), transparent 62%),
    linear-gradient(165deg, #211d2c 0%, #14111c 54%, #0d0b14 100%) !important;
}
#ah-tron-grid { opacity: 0.16 !important; }
#login, #login.sg-login-content {
  background: linear-gradient(180deg, #211d2c, #1c1828) !important;
  border: 1px solid var(--ah-sep) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(20px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.05) !important;
}
#login::before { color: var(--ah-text) !important; letter-spacing: -0.02em !important; }
#login md-input-container > label { color: var(--ah-muted) !important; }
#login input.md-input, #login input[type="text"],
#login input[type="password"], #login input[type="email"] {
  color: var(--ah-text) !important; -webkit-text-fill-color: var(--ah-text) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--ah-line-2) !important;
}
#login input.md-input:focus, #login input:focus {
  border-color: rgba(155, 109, 255, 0.55) !important;
  background: rgba(155, 109, 255, 0.04) !important;
  box-shadow: 0 0 0 3px rgba(155, 109, 255, 0.14) !important;
}
#login md-input-container.md-icon-left > md-icon:not(#password-visibility-icon),
#login #password-visibility-icon, #login md-icon,
main[ui-view="login"] md-icon { color: var(--ah-cyan-2) !important; }
#loginContent > .sg-logo img { filter: drop-shadow(0 0 14px rgba(155, 109, 255, 0.16)) !important; }
#loginContent > .sg-logo::after { color: var(--ah-cyan-2) !important; }
#login button.md-fab.md-accent, #login button[type="submit"].md-fab,
#login .md-button.md-fab.md-accent {
  background: linear-gradient(135deg, #b79bff 0%, #9b6dff 48%, var(--ah-cyan-deep) 100%) !important;
  color: var(--ah-fab-ink) !important;
  box-shadow: 0 10px 28px rgba(155, 109, 255, 0.18) !important;
}
#login button.md-fab.md-accent::before { color: var(--ah-fab-ink) !important; }
#login button.md-fab.md-accent md-icon { color: var(--ah-fab-ink) !important; }
#login button.md-fab.md-accent:hover { box-shadow: 0 14px 36px rgba(155, 109, 255, 0.28) !important; }
#login md-switch.md-checked .md-bar { background-color: rgba(155, 109, 255, 0.42) !important; }
#login md-switch.md-checked .md-thumb { background-color: var(--ah-cyan) !important; }
main[ui-view="login"] #loginContent::after {
  color: var(--ah-cyan-2) !important; opacity: 1 !important;
  border: 1px solid var(--ah-sep) !important;
  background: rgba(26, 26, 28, 0.6) !important;
}
md-toast .md-toast-content {
  background: var(--ah-elevated) !important; color: var(--ah-text) !important;
  border: 1px solid rgba(255, 90, 82, 0.42) !important; border-radius: 12px !important;
}

/* =========================================================================
   SPLITTER + scrollbars — subtle graphite/cyan (KEEP behavior, retint only)
   ========================================================================= */
@media (min-width: 960px) {
  .ah-splitter::before { background: rgba(255, 255, 255, 0.16) !important; }
  .ah-splitter:hover::before { background: var(--ah-cyan) !important; width: 70px !important; }
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16) !important; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28) !important; }

/* === GRAPHITE APPLE SKIN — v29.1 LIVE-DOM CORRECTIONS ===
   Verified against the real SOGo 5.12.5 DOM (residual-risk #2):
   (1) The OPEN message row is marked with Material's native md-accent+md-bg
       (not .sg-active/.md-active), and its 2nd line .sg-md-body carries an
       OPAQUE content-graphite bg that showed as a dark strip over the
       selection fill. Map the real selected-row selector to the AH selection
       fill + white text, and make the row's inner lines transparent.
   (2) SOGo's message view is ONE white md-card with no separate header wrapper,
       so the dark-header-band experiment only caught .pseudo-input-* (the
       recipient fields) -> a stray dark box. Keep the reading pane uniformly
       WHITE (Apple light reading pane): recipient fields transparent + dark ink.
   These are appended last -> win by source order over the v29 skin. */

/* ---- (1) message-list selection (real selector) + dark-strip fix ---- */
.sg-message-list-item.md-accent.md-bg,
.sg-message-list-item.md-bg.md-hue-2,
md-list-item.sg-message-list-item.md-accent.md-bg,
md-list-item.sg-message-list-item.md-accent.md-bg.md-hue-2,
md-list-item.sg-message-list-item.md-bg.md-hue-2 {
  background-color: var(--ah-sel) !important;
  border-radius: 6px !important;
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}
.sg-message-list-item.md-accent.md-bg,
.sg-message-list-item.md-accent.md-bg *,
.sg-message-list-item.md-bg.md-hue-2,
.sg-message-list-item.md-bg.md-hue-2 *,
md-list-item.sg-message-list-item.md-accent.md-bg.md-hue-2,
md-list-item.sg-message-list-item.md-accent.md-bg.md-hue-2 * {
  color: var(--ah-sel-text) !important;
  -webkit-text-fill-color: var(--ah-sel-text) !important;
}
.sg-message-list-item.md-accent.md-bg md-icon,
.sg-message-list-item.md-bg.md-hue-2 md-icon { color: var(--ah-sel-text) !important; }
/* the row's inner lines carry opaque graphite bgs -> transparent so the
   selection fill (and the plain graphite row) shows through uniformly. */
.sg-message-list-item .sg-md-body,
.sg-message-list-item .sg-md-subhead,
.sg-message-list-item .sg-tile-content,
.sg-message-list-item .sg-tile-subject,
.sg-message-list-item .md-list-item-inner {
  background-color: transparent !important;
}
/* unread row (SOGo class is 'unread'): cyan dot + bold sender stay as-is;
   ensure the dot doesn't collide with the avatar (nudge inside the gutter). */
.sg-message-list-item.unread::before { left: 4px !important; }

/* ---- (2) reading pane = uniformly WHITE; neutralize the dark recipient
   fields the band experiment introduced (appended later -> wins). ---- */
@media (min-width: 960px) {
  #detailView .pseudo-input-container,
  #detailView .pseudo-input-field,
  #detailView .msg-header-content,
  #detailView .msg-header,
  #detailView .sg-message-body-header {
    background-color: var(--ah-rbody) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  }
  #detailView .pseudo-input-container, #detailView .pseudo-input-container *,
  #detailView .pseudo-input-field, #detailView .pseudo-input-field *,
  #detailView .msg-header-content, #detailView .msg-header-content *,
  #detailView .sg-message-body-header, #detailView .sg-message-body-header * {
    color: var(--ah-rink) !important;
    -webkit-text-fill-color: var(--ah-rink) !important;
  }
  /* labels / date / sender-email: muted-dark on white at AA (rgba .5 = #808080
     = 3.95:1 FAILS; .6 = #666 = 5.74:1 passes). Covers time.msg-date,
     a.md-caption (sender email), .pseudo-input-label "To". */
  #detailView .pseudo-input-label,
  #detailView .md-caption, #detailView a.md-caption,
  #detailView .sg-padded .md-caption,
  #detailView time, #detailView .msg-date, #detailView time.msg-date,
  #detailView .sg-face time, #detailView .sg-md-subhead {
    color: rgba(0, 0, 0, 0.6) !important; -webkit-text-fill-color: rgba(0, 0, 0, 0.6) !important;
  }
  /* subject headline */
  #detailView .sg-md-headline {
    color: var(--ah-rink) !important; font-size: 19px !important;
    font-weight: 600 !important; letter-spacing: -0.01em !important;
  }
  /* circular avatar — cyan-deep disc + white initials (Apple) */
  #detailView .md-avatar, #detailView .sg-avatar, #detailView .sg-avatar-circle {
    background: var(--ah-sel) !important; color: #ffffff !important; border-radius: 50% !important;
  }
  /* recipient chips + links on white */
  #detailView md-chip, #detailView .md-chip { background: rgba(0, 0, 0, 0.06) !important; }
  #detailView md-chip .md-chip-content, #detailView .md-chip .md-chip-content {
    color: var(--ah-rink) !important; -webkit-text-fill-color: var(--ah-rink) !important;
  }
  #detailView a, #detailView .view-detail a { color: #6a3fc0 !important; }
  /* header glyphs gray on white */
  #detailView .pseudo-input-container md-icon,
  #detailView .sg-padded md-icon { color: #5f6368 !important; }
}

/* === GRAPHITE APPLE SKIN — v29.2 polish === */
/* Compose/dialog icons that sit OUTSIDE an md-toolbar (e.g. the compose
   'more_vert' overflow) default to Material rgba(0,0,0,.54) = dark-on-graphite.
   Force cyan. CKEditor uses .ck-icon SVG (not <md-icon>), so the white editor
   is unaffected. Re-assert dark glyphs on accent discs afterwards. */
md-dialog md-icon.material-icons,
.sg-compose md-icon.material-icons { color: var(--ah-cyan-2) !important; }
md-dialog .md-fab md-icon, md-dialog .md-button.md-accent md-icon,
md-dialog button.md-fab md-icon.material-icons { color: var(--ah-fab-ink) !important; }
/* keep date-picker / autocomplete popups (white) gray, never cyan-on-white */
md-dialog md-calendar md-icon, md-dialog md-datepicker md-icon { color: #5f6368 !important; }

/* Radio buttons -> AH cyan (Material default renders them green). */
md-radio-button .md-off { border-color: rgba(255, 255, 255, 0.40) !important; }
md-radio-button.md-checked .md-off,
md-radio-button.md-checked .md-on { border-color: var(--ah-cyan) !important; }
md-radio-button.md-checked .md-on { background-color: var(--ah-cyan) !important; }
md-radio-button .md-label, md-radio-button .md-label * { color: var(--ah-text) !important; }

/* ============================================================================
   LIQUID GLASS (v34) — tokens
   ============================================================================ */
:root {
  /* frosted SURFACE tints — pushed MORE translucent (v36) for a stronger glass
     read; still AA-safe: worst-case composited bg (tint over brightest ambient
     teal ~#46307c) keeps light text >=9:1 and cyan >=6:1; strong-glass over the
     WHITE reading pane keeps text >=7:1 / cyan >=4.6:1. */
  --ah-glass:         rgba(30, 30, 32, 0.66);   /* chrome: toolbars, list header, search */
  --ah-glass-side:    rgba(36, 36, 40, 0.70);   /* sidenav panel */
  --ah-glass-strong:  rgba(42, 42, 45, 0.88);   /* dialogs/compose/menus — opaque enough over WHITE */
  /* solid FALLBACK fills (base declaration; translucent tint layered only inside @supports) */
  --ah-glass-solid:        #1d1d1f;
  --ah-glass-side-solid:   #1c1828;
  --ah-glass-strong-solid: #201c2e;
  /* frost recipe (GPU-bounded: chrome only) — deeper blur for a richer frost */
  --ah-glass-blur:        blur(30px) saturate(200%);
  --ah-glass-blur-strong: blur(40px) saturate(200%);
  /* specular edge highlight + hairline glass border */
  --ah-glass-edge:    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --ah-glass-edge-2:  inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --ah-glass-border:  1px solid rgba(255, 255, 255, 0.10);
  --ah-glass-border-2:1px solid rgba(255, 255, 255, 0.13);
  /* soft floating depth */
  --ah-glass-shadow:        0 12px 30px rgba(0, 0, 0, 0.40), 0 2px 8px rgba(0, 0, 0, 0.28);
  --ah-glass-shadow-strong: 0 24px 60px rgba(0, 0, 0, 0.50), 0 6px 18px rgba(0, 0, 0, 0.32);
  --ah-glass-shadow-pop:    0 8px 20px rgba(0, 0, 0, 0.38);
  /* generous radii */
  --ah-glass-radius:    16px;
  --ah-glass-radius-lg: 20px;
  --ah-glass-radius-sm: 12px;
  /* selection / glassy-control accents */
  --ah-pill-glass:        #4a2a93;               /* opaque deep-cyan (white text 5.5:1 w/ sheen) */
  --ah-pill-glass-solid:  #4a2a93;
  --ah-glass-active:      rgba(87, 51, 168, 0.42);
  --ah-glass-active-ink:  var(--ah-text);
  --ah-glass-cyan-sheen:  linear-gradient(135deg, rgba(155, 109, 255, 0.16) 0%, rgba(155, 109, 255, 0) 60%);
  --ah-glass-cyan-glow:   0 0 0 1px rgba(155, 109, 255, 0.30), 0 10px 28px rgba(155, 109, 255, 0.24);
  /* search inset */
  --ah-glass-inset:        rgba(0, 0, 0, 0.18);
  --ah-glass-placeholder:  #b8b8bd;
  /* ambient backdrop behind the glass — graphite + faint cyan auroras, floor #0d0b14 */
  --ah-ambient-base:  var(--ah-graphite-floor, #0d0b14);
  /* richer auroras so the glass actually has depth to refract. Brightest pixel
     stays ~#3a2868 (dark teal) → light text keeps >=8:1, glass-chrome text >=10:1;
     no dark text ever sits on the ambient (dark text is only on the white pane). */
  --ah-ambient:
    radial-gradient(1200px 820px at 6% -12%,  rgba(155, 109, 255, 0.30), transparent 58%),
    radial-gradient(1150px 860px at 116% 2%,  rgba(135, 95, 235, 0.32), transparent 60%),
    radial-gradient(1000px 1100px at 50% 122%, rgba(155, 109, 255, 0.18), transparent 66%),
    radial-gradient(700px 520px at 88% 92%,   rgba(180, 140, 255, 0.13), transparent 60%),
    linear-gradient(155deg, #1b1726 0%, #161221 48%, #100d19 100%);
}

/* === LIQUID GLASS (v34) ===
   Apple 2025 "Liquid Glass" on top of the v33 graphite skin. ADDITIVE — appended
   last (wins by source order). Frosted translucent chrome, specular edges,
   floating depth, cyan glassy controls, one fixed ambient layer. Fallback is
   @supports-gated (opaque graphite base; translucent only with backdrop-filter).
   Blur is bounded to chrome — never per message-row, never the white email body,
   never the floating FAB. */

/* ---- 0. AMBIENT BACKDROP ----
   Make the ambient the actual page background (fixed) so it is visible behind
   every transparent shell AND refracts through the frosted chrome. This OVERRIDES
   the v33 solid '--ah-content' body fill that was occluding it. A matching
   fixed ::before is kept as a belt-and-braces layer. Login is carved out below. */
html, body, body.main {
  background-color: var(--ah-ambient-base) !important;
  background-image: var(--ah-ambient) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
body { position: relative; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--ah-ambient);
  background-color: var(--ah-ambient-base);
}
body.main md-content,
body.main .md-default-theme.md-content,
body.main .sg-md-body,
body.main #shell, body.main [ui-view="mailbox"], body.main .sg-app-content,
body.main #centerPanel,
body.main .view-list,
body.main md-content.view-list {
  background-color: transparent !important;
}
main[ui-view="login"], body.login { position: static; }
main[ui-view="login"]::before, body.login::before { display: none !important; content: none !important; }
#detailView, #detailView md-card, #detailView .msg-body,
#detailView md-content, .md-calendar, md-calendar { background-image: none !important; }

/* ---- 1. FROSTED CHROME — top/module toolbars ---- */
md-toolbar:not(.md-menu-toolbar), .sg-toolbar,
md-toolbar.md-default-theme:not(.md-menu-toolbar),
md-toolbar.md-hue-2:not(.md-menu-toolbar) {
  background-color: var(--ah-glass-solid) !important;
  background-image: none !important;
  -webkit-backdrop-filter: var(--ah-glass-blur);
  backdrop-filter: var(--ah-glass-blur);
  border-bottom: var(--ah-glass-border) !important;
  box-shadow: var(--ah-glass-edge), 0 1px 0 rgba(0, 0, 0, 0.30) !important;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  md-toolbar:not(.md-menu-toolbar), .sg-toolbar,
  md-toolbar.md-default-theme:not(.md-menu-toolbar),
  md-toolbar.md-hue-2:not(.md-menu-toolbar) {
    background-color: var(--ah-glass) !important;
  }
}

/* ---- 2. FROSTED SIDENAV ---- */
md-sidenav, .sg-sidenav, .md-sidenav-left {
  background-color: var(--ah-glass-side-solid) !important;
  background-image: none !important;
  -webkit-backdrop-filter: var(--ah-glass-blur);
  backdrop-filter: var(--ah-glass-blur);
  border-right: var(--ah-glass-border) !important;
  box-shadow: var(--ah-glass-edge), 1px 0 0 rgba(0, 0, 0, 0.20), 8px 0 30px rgba(0, 0, 0, 0.22) !important;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  md-sidenav, .sg-sidenav, .md-sidenav-left { background-color: var(--ah-glass-side) !important; }
}
md-sidenav md-toolbar, md-sidenav md-toolbar.sg-padded {
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom: var(--ah-glass-border) !important;
}
md-sidenav md-list-item.md-active, md-sidenav .md-button.md-active,
md-sidenav md-list-item.sg-active, md-sidenav .sg-mailbox-list-item.sg-selected {
  position: relative;
  background-color: var(--ah-glass-active) !important;
  background-image: var(--ah-glass-cyan-sheen) !important;
  border-radius: var(--ah-glass-radius-sm) !important;
  margin: 2px 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(155, 109, 255, 0.22),
    0 2px 8px rgba(0, 0, 0, 0.28) !important;
  color: var(--ah-glass-active-ink) !important;
}
md-sidenav md-list-item.md-active *, md-sidenav .md-button.md-active *,
md-sidenav md-list-item.sg-active *, md-sidenav .sg-mailbox-list-item.sg-selected * {
  color: var(--ah-glass-active-ink) !important;
}

/* ---- 3. LIST HEADER / SORT / SEARCH TOOLBAR ---- */
.view-list md-toolbar, .sg-message-list-header,
.sg-search-toolbar, .view-list .md-subheader {
  background-color: var(--ah-glass-solid) !important;
  background-image: none !important;
  -webkit-backdrop-filter: var(--ah-glass-blur);
  backdrop-filter: var(--ah-glass-blur);
  border-bottom: var(--ah-glass-border) !important;
  box-shadow: var(--ah-glass-edge) !important;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .view-list md-toolbar, .sg-message-list-header,
  .sg-search-toolbar, .view-list .md-subheader {
    background-color: var(--ah-glass) !important;
  }
}
.sg-message-list-item, md-list-item, .md-list-item-text,
.sg-message-list-item * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.sg-search input, md-autocomplete input, .sg-search-toolbar input {
  background-color: var(--ah-glass-inset) !important;
  border: var(--ah-glass-border) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  color: var(--ah-text) !important;
}
.sg-search input::placeholder, md-autocomplete input::placeholder,
.sg-search-toolbar input::placeholder {
  color: var(--ah-glass-placeholder) !important;
  opacity: 1 !important;
}
.sg-search input:focus, md-autocomplete input:focus, .sg-search-toolbar input:focus {
  border-color: rgba(155, 109, 255, 0.45) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28), 0 0 0 3px rgba(155, 109, 255, 0.16) !important;
}

/* ---- 4. STRONGER GLASS — dialogs + compose ---- */
md-dialog, .sg-compose {
  background-color: var(--ah-glass-strong-solid) !important;
  background-image: none !important;
  -webkit-backdrop-filter: var(--ah-glass-blur-strong);
  backdrop-filter: var(--ah-glass-blur-strong);
  border: var(--ah-glass-border-2) !important;
  border-radius: var(--ah-glass-radius-lg) !important;
  box-shadow: var(--ah-glass-shadow-strong), var(--ah-glass-edge-2) !important;
  overflow: hidden !important;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  md-dialog, .sg-compose { background-color: var(--ah-glass-strong) !important; }
}
md-dialog md-content, md-dialog md-toolbar, .sg-compose md-toolbar {
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
md-dialog md-toolbar, .sg-compose md-toolbar { border-bottom: var(--ah-glass-border) !important; }
.md-dialog-container md-dialog { box-shadow: var(--ah-glass-shadow-strong), var(--ah-glass-edge-2) !important; }
md-dialog .ck-content, md-dialog .ck-editor__editable, md-dialog .ck-editor__editable_inline,
.ck.ck-content, .ck-editor__editable {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-color: #ffffff !important;
  color: #1d1d1f !important;
}

/* ---- 5. POPOVERS — menus + select ---- */
md-menu-content, md-select-menu, .md-select-menu-container md-content {
  background-color: var(--ah-glass-strong-solid) !important;
  background-image: none !important;
  -webkit-backdrop-filter: var(--ah-glass-blur);
  backdrop-filter: var(--ah-glass-blur);
  border: var(--ah-glass-border) !important;
  border-radius: var(--ah-glass-radius) !important;
  box-shadow: var(--ah-glass-shadow), var(--ah-glass-edge) !important;
  overflow: hidden !important;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  md-menu-content, md-select-menu, .md-select-menu-container md-content {
    background-color: var(--ah-glass-strong) !important;
  }
}
md-menu-item:hover, md-option:hover { background-color: rgba(155, 109, 255, 0.12) !important; }
md-toast .md-toast-content {
  background-color: var(--ah-glass-strong-solid) !important;
  -webkit-backdrop-filter: var(--ah-glass-blur);
  backdrop-filter: var(--ah-glass-blur);
  box-shadow: var(--ah-glass-shadow), var(--ah-glass-edge) !important;
  border-radius: var(--ah-glass-radius) !important;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  md-toast .md-toast-content { background-color: var(--ah-glass-strong) !important; }
}

/* ---- 6. GLASSY FAB — paint-only (no backdrop-filter; it floats over scroll) ---- */
button.md-fab, .md-fab.md-accent, md-fab-speed-dial button.md-fab {
  position: relative;
  background-color: var(--ah-cyan) !important;
  background-image: linear-gradient(155deg,
      rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.06) 34%,
      rgba(155, 109, 255, 0.0) 60%) !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  border-radius: 50% !important;
  color: var(--ah-fab-ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 14px rgba(155, 109, 255, 0.35),
    var(--ah-glass-shadow-pop),
    0 0 0 1px rgba(155, 109, 255, 0.20) !important;
}
button.md-fab:hover, .md-fab.md-accent:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.60),
    inset 0 0 18px rgba(155, 109, 255, 0.45),
    0 12px 26px rgba(0, 0, 0, 0.44),
    0 0 0 1px rgba(155, 109, 255, 0.30) !important;
}
button.md-fab::after, .md-fab.md-accent::after {
  content: ""; position: absolute; left: 14%; right: 14%; top: 6%; height: 34%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.45), transparent 75%);
  pointer-events: none;
}
.md-fab md-icon, .md-fab md-icon.material-icons,
button.md-fab md-icon.material-icons, md-fab-speed-dial md-icon.material-icons {
  color: var(--ah-fab-ink) !important;
}
.md-button.md-primary.md-raised, .md-button.md-accent.md-raised {
  background-color: var(--ah-cyan) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 55%) !important;
  color: var(--ah-fab-ink) !important;
  border-radius: var(--ah-glass-radius-sm) !important;
  box-shadow: var(--ah-glass-edge), 0 6px 18px rgba(155, 109, 255, 0.26) !important;
}

/* ---- 7. SELECTION PILL — selected message row (opaque deep-cyan + sheen) ---- */
.sg-message-list-item.md-accent.md-bg,
.sg-message-list-item.md-bg.md-hue-2,
md-list-item.sg-message-list-item.md-accent.md-bg,
.sg-message-list-item.sg-active.md-accent,
md-list-item.md-accent.md-bg,
.sg-message-list-item.sg-active, .sg-message-list-item.md-active,
.sg-message-list-item.sg-selected, .sg-mailbox-list-item.sg-selected {
  background-color: var(--ah-pill-glass) !important;
  background-image: var(--ah-glass-cyan-sheen) !important;
  border-radius: var(--ah-glass-radius-sm) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 0 0 1px rgba(155, 109, 255, 0.26),
    0 2px 10px rgba(0, 0, 0, 0.30) !important;
  color: var(--ah-sel-text) !important;
}
.sg-message-list-item.md-accent.md-bg, .sg-message-list-item.md-accent.md-bg *,
.sg-message-list-item.md-bg.md-hue-2, .sg-message-list-item.md-bg.md-hue-2 *,
md-list-item.md-accent.md-bg, md-list-item.md-accent.md-bg *,
.sg-message-list-item.sg-active *, .sg-message-list-item.md-active *,
.sg-mailbox-list-item.sg-selected, .sg-mailbox-list-item.sg-selected * {
  color: var(--ah-sel-text) !important;
  -webkit-text-fill-color: var(--ah-sel-text) !important;
}

/* ---- 8. READING PANE STAYS WHITE — hard guard, no @media gate ---- */
#detailView, #detailView md-content, #detailView .view-detail,
#detailView md-card, #detailView md-card._md,
#detailView .msg-body, #detailView .sg-message-body,
#detailView .sg-message-content, #detailView .viewer-content,
#detailView .mail-content, #detailView .sg-message-view,
#detailView md-calendar, #detailView .md-calendar {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#detailView md-toolbar, #detailView .sg-message-toolbar {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
}

/* ---- 9. GRACEFUL DEGRADATION (no backdrop-filter) ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  md-toolbar:not(.md-menu-toolbar), .sg-toolbar,
  .view-list md-toolbar, .sg-message-list-header, .sg-search-toolbar, .view-list .md-subheader {
    background-color: var(--ah-glass-solid) !important;
  }
  md-sidenav, .sg-sidenav, .md-sidenav-left { background-color: var(--ah-glass-side-solid) !important; }
  md-dialog, .sg-compose, md-menu-content, md-select-menu,
  .md-select-menu-container md-content, md-toast .md-toast-content {
    background-color: var(--ah-glass-strong-solid) !important;
  }
}

/* ---- 10. ACCESSIBILITY — reduced transparency / motion ---- */
@media (prefers-reduced-transparency: reduce), (prefers-reduced-motion: reduce) {
  md-toolbar:not(.md-menu-toolbar), .sg-toolbar,
  .view-list md-toolbar, .sg-message-list-header, .sg-search-toolbar, .view-list .md-subheader,
  md-sidenav, .sg-sidenav, .md-sidenav-left,
  md-dialog, .sg-compose, md-menu-content, md-select-menu,
  .md-select-menu-container md-content, md-toast .md-toast-content {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  md-toolbar:not(.md-menu-toolbar), .sg-toolbar,
  .view-list md-toolbar, .sg-message-list-header, .sg-search-toolbar, .view-list .md-subheader {
    background-color: var(--ah-glass-solid) !important;
  }
  md-sidenav, .sg-sidenav, .md-sidenav-left { background-color: var(--ah-glass-side-solid) !important; }
  md-dialog, .sg-compose, md-menu-content, md-select-menu,
  .md-select-menu-container md-content, md-toast .md-toast-content {
    background-color: var(--ah-glass-strong-solid) !important;
  }
  body::before { background: var(--ah-ambient-base) !important; }
}

/* ============================================================================
   READING-PANE CHROME CONTRAST HARDENING (v-rp2) — un-gated, end-of-file.
   #detailView is the WHITE reading pane at EVERY width (the min-960 AND max-959
   blocks both paint it white), so these dark rules are width-independent and safe.
   They beat the app-wide cyan chip/link rules (`md-chip .md-chip-content* ->
   var(--ah-cyan-2)`) via #detailView ID-specificity + last source order, fixing
   the washed-out recipient pills + sender-email mailto button on the white pane.
   The earlier #detailView chip rules only targeted .md-chip-content (the box) and
   missed its `*` descendants (md-chip-template / address sub-spans) which the
   unscoped `* -> cyan` rule then painted light-cyan-on-white (~1.4:1, illegible).
   ============================================================================ */
#detailView md-chip, #detailView md-chip *,
#detailView .md-chip-content, #detailView .md-chip-content *,
#detailView md-chips .md-chip-content, #detailView md-chips .md-chip-content *,
#detailView .pseudo-input-field md-chip, #detailView .pseudo-input-field md-chip * {
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
}
#detailView md-chip, #detailView .md-chip { background: rgba(0,0,0,0.06) !important; }
/* sender / recipient mailto buttons + any primary-accent button in the message
   header render as washed cyan/teal on white (~4.4:1, fails AA) -> use the AA
   brand link colour (recolored per brand by gen_brand_themes.py). */
#detailView .sg-message-body-header .md-button.md-primary,
#detailView .msg-header-content .md-button.md-primary,
#detailView .pseudo-input-field .md-button.md-primary,
#detailView .md-chip-content .md-button {
  color: #6a3fc0 !important;
  -webkit-text-fill-color: #6a3fc0 !important;
}