/*
 * BoostServ skin — premium overlay
 *
 * Rides on top of Roundcube Elastic. Aggressive visual rework:
 *   - Login: floating glass card on soft gradient, logo anchored
 *   - Typography: Geist, tight letter-spacing, refined weight ramp
 *   - Buttons: near-black confident primary with subtle lift
 *   - Surfaces: shadcn-style subtle borders and soft shadows
 *   - Dark mode: zinc-950 base, matches dashboard 1:1
 *
 * BoostServ logo is light-on-transparent — we invert() in light mode so
 * it reads as dark on white, and keep as-is in dark mode.
 */

@import url("../../elastic/styles/styles.min.css");
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap");

/* =========================================================================
 *  Design tokens
 * ========================================================================= */
:root {
  /* Palette — shadcn neutral, matches dashboard globals.css */
  --bs-bg:          #ffffff;
  --bs-bg-muted:    #fafafa;
  --bs-surface:     #ffffff;
  --bs-muted:       #f5f5f5;
  --bs-border:      #e5e5e5;
  --bs-border-soft: #f0f0f0;
  --bs-fg:          #0a0a0a;
  --bs-fg-muted:    #71717a;
  --bs-fg-subtle:   #a1a1aa;
  --bs-primary:     #0a0a0a;
  --bs-primary-fg:  #fafafa;
  --bs-primary-hv:  #262626;
  --bs-accent:      #f4f4f5;
  --bs-danger:      #dc2626;
  --bs-success:     #16a34a;
  --bs-warning:     #ca8a04;
  --bs-ring:        rgba(10, 10, 10, 0.08);

  --bs-radius:      0.625rem;    /* 10px — matches dashboard */
  --bs-radius-sm:   0.375rem;
  --bs-radius-lg:   0.875rem;

  --bs-font:        "Geist", system-ui, -apple-system, BlinkMacSystemFont,
                    "Segoe UI", sans-serif;
  --bs-font-mono:   "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --bs-shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --bs-shadow-md:   0 4px 12px -2px rgba(0, 0, 0, 0.06),
                    0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --bs-shadow-xl:   0 20px 50px -20px rgba(0, 0, 0, 0.15),
                    0 10px 20px -10px rgba(0, 0, 0, 0.08);
}

/* Dark mode — zinc-950 base, mirrors dashboard .dark */
html.dark,
html.dark-mode,
html[data-color-mode="dark"] {
  --bs-bg:          #09090b;
  --bs-bg-muted:    #09090b;
  --bs-surface:     #18181b;
  --bs-muted:       #27272a;
  --bs-border:      #27272a;
  --bs-border-soft: #1f1f22;
  --bs-fg:          #fafafa;
  --bs-fg-muted:    #a1a1aa;
  --bs-fg-subtle:   #71717a;
  --bs-primary:     #fafafa;
  --bs-primary-fg:  #0a0a0a;
  --bs-primary-hv:  #e4e4e7;
  --bs-accent:      #27272a;
  --bs-ring:        rgba(250, 250, 250, 0.08);
  --bs-shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --bs-shadow-md:   0 4px 12px -2px rgba(0, 0, 0, 0.5),
                    0 2px 4px -2px rgba(0, 0, 0, 0.35);
  --bs-shadow-xl:   0 25px 60px -20px rgba(0, 0, 0, 0.8),
                    0 10px 20px -10px rgba(0, 0, 0, 0.5);
}

/* =========================================================================
 *  Global typography & chrome
 * ========================================================================= */
html,
body,
input,
textarea,
select,
button,
.button,
.menu,
.listing,
.record-title {
  font-family: var(--bs-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
}

code,
pre,
.mono,
.message-partheaders {
  font-family: var(--bs-font-mono) !important;
}

html,
body {
  background: var(--bs-bg) !important;
  color: var(--bs-fg) !important;
}

a,
a:visited {
  color: var(--bs-fg);
}

/* =========================================================================
 *  Login page — premium redesign
 *  Card structure: dark header band (logo) + white body (form)
 *  Logo is white-on-transparent PNG → needs dark background to be visible
 * ========================================================================= */

/* Kill Elastic's default logo */
body.task-login #logo { display: none !important; }

/*
 * Elastic renders layout panels (sidebar, list, taskmenu) even on the login
 * page. They're visually hidden but still intercept pointer events.
 * The loading-screen overlay also blocks clicks if JS doesn't remove it.
 * Nuke all of them on the login page.
 */
body.task-login #layout-sidebar,
body.task-login #layout-list,
body.task-login #layout-menu,
body.task-login #taskmenu,
body.task-login .topmost-toolbar {
  display: none !important;
  pointer-events: none !important;
}

body.task-login #loading-screen {
  display: none !important;
  pointer-events: none !important;
}

/*
 * .popover-overlay / #menu-overlay — Elastic JS appends this to <body> in
 * "phone layout" mode whenever a popover opens.  It is position:absolute,
 * top:0, bottom:0, width:100%, z-index:1299.  On the login page this overlay
 * blocks every tap after the first interaction, making the form unusable.
 * There are no popovers on the login page so we can safely nuke it here.
 */
body.task-login .popover-overlay,
body.task-login #menu-overlay {
  display: none !important;
  pointer-events: none !important;
}

/* Ensure the card and all its children are always clickable */
body.task-login .bs-login-card,
body.task-login .bs-login-card * {
  pointer-events: auto !important;
}

/* ── Page ─────────────────────────────────────────────────────────────── */
body.task-login {
  background: #f1f1f1 !important;
  /* Elastic ships: body { height:100%; overflow:hidden }
   * Override: let the body grow with content and be scrollable */
  height: auto !important;
  min-height: 100vh !important;
  overflow: auto !important;
}
html.dark-mode body.task-login { background: #0a0a0a !important; }

/*
 * Elastic CSS: body { height:100%; overflow:hidden } + #layout { display:flex; height:100%; overflow:hidden }
 * These stack three nested overflow:hidden boxes each at exactly 100vh.
 * Any element outside the painted box is invisible AND unclickable —
 * this is what blocks the form on the login page.
 * Fix: convert the chain to scrollable block boxes for the login task only.
 */
body.task-login #layout {
  display: block !important;
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
  background: transparent !important;
  width: 100% !important;
}

/* ── Centering shell ──────────────────────────────────────────────────── */
body.task-login .bs-login-layout {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px 16px;
  box-sizing: border-box;
  background: transparent !important;
  max-width: none;
}

/* ── Card ─────────────────────────────────────────────────────────────── */
body.task-login .bs-login-card {
  width: 100%;
  max-width: 360px;
  padding: 0;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  position: relative;
  z-index: 1400;  /* above Elastic's .popover-overlay (z-index:1299) */
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.02),
    0 2px 4px rgba(0,0,0,0.04),
    0 8px 16px rgba(0,0,0,0.06),
    0 24px 40px rgba(0,0,0,0.07);
  overflow: hidden;
}
html.dark-mode body.task-login .bs-login-card {
  background: #18181b;
  border-color: rgba(255,255,255,0.06);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03),
    0 2px 4px rgba(0,0,0,0.3),
    0 8px 16px rgba(0,0,0,0.4),
    0 24px 40px rgba(0,0,0,0.5);
}

/* ── Logo band ────────────────────────────────────────────────────────────
 * White logo on near-black. CSS url() is NOT mangled by Roundcube's template
 * engine (only <img src=""> attributes are). Path is relative to this CSS
 * file → ../images/logo.png resolves to skins/boostserv/images/logo.png ✓
 * ──────────────────────────────────────────────────────────────────────── */
body.task-login .bs-login-brand {
  display: block;
  height: 88px;
  background-color: #09090b;
  background-image: url('../images/logo.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 120px auto;
}
html.dark-mode body.task-login .bs-login-brand { background-color: #000; }

/* ── Header ───────────────────────────────────────────────────────────── */
body.task-login .bs-login-header {
  padding: 28px 28px 0;
  margin-bottom: 24px;
  text-align: center;
}
body.task-login .bs-login-title {
  margin: 0 0 6px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.15;
  color: #09090b;
}
html.dark-mode body.task-login .bs-login-title { color: #fafafa; }

body.task-login .bs-login-subtitle {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: #71717a;
}

/* ── Form shell ───────────────────────────────────────────────────────── */
body.task-login .bs-login-form {
  padding: 0 28px;
  margin: 0;
}

/* Elastic CSS: #login-form { top: 20vh; position: relative; max-width: 320px }
 * That 20vh pushes the form down inside the card — kill it. */
body.task-login #login-form {
  position: static !important;
  top: auto !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Elastic JS converts <table> rows to Bootstrap .form-group.row and:
 *   - hides td.title via inline style (label → placeholder text)
 *   - wraps input in .input-group + prepends icon <span>
 * Strategy: flatten to blocks, reinforce td.title:none, remove icon. */
body.task-login .bs-login-form table,
body.task-login .bs-login-form tbody {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body.task-login .bs-login-form tr {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  margin: 0 0 10px !important;
}
body.task-login .bs-login-form td.title  { display: none !important; }
body.task-login .bs-login-form td.input  {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body.task-login .bs-login-form .input-group-prepend,
body.task-login .bs-login-form .input-group-append { display: none !important; }

/* ── Inputs ───────────────────────────────────────────────────────────── */
body.task-login .bs-login-form input.form-control,
body.task-login .bs-login-form input[type="text"],
body.task-login .bs-login-form input[type="password"],
body.task-login .bs-login-form input[type="email"] {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: 40px !important;
  padding: 0 12px !important;
  font-family: var(--bs-font) !important;
  font-size: 0.875rem !important;
  line-height: 1 !important;
  color: #09090b !important;
  background: #fff !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 8px !important;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
html.dark-mode body.task-login .bs-login-form input.form-control,
html.dark-mode body.task-login .bs-login-form input[type="text"],
html.dark-mode body.task-login .bs-login-form input[type="password"] {
  background: #27272a !important;
  border-color: #3f3f46 !important;
  color: #fafafa !important;
}
body.task-login .bs-login-form input.form-control:focus,
body.task-login .bs-login-form input[type="text"]:focus,
body.task-login .bs-login-form input[type="password"]:focus {
  outline: none !important;
  border-color: #09090b !important;
  box-shadow: 0 0 0 3px rgba(9,9,11,0.07) !important;
}
html.dark-mode body.task-login .bs-login-form input:focus {
  border-color: #fafafa !important;
  box-shadow: 0 0 0 3px rgba(250,250,250,0.08) !important;
}
body.task-login .bs-login-form input::placeholder {
  color: #a1a1aa !important;
  font-size: 0.875rem !important;
}

/* ── Submit button ────────────────────────────────────────────────────── */
body.task-login .bs-login-form p.formbuttons {
  margin: 20px 0 0 !important;
  padding: 0 !important;
}
body.task-login .bs-login-form button.submit,
body.task-login .bs-login-form .button.mainaction,
body.task-login .bs-login-form button[type="submit"] {
  display: block !important;
  width: 100% !important;
  height: 40px !important;
  padding: 0 16px !important;
  font-family: var(--bs-font) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  color: #fafafa !important;
  background: #09090b !important;
  border: 1px solid #09090b !important;
  border-radius: 8px !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
  cursor: pointer !important;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.12s, transform 0.1s, box-shadow 0.12s !important;
}
html.dark-mode body.task-login .bs-login-form button.submit,
html.dark-mode body.task-login .bs-login-form button[type="submit"] {
  background: #fafafa !important;
  color: #09090b !important;
  border-color: #fafafa !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), inset 0 1px 0 rgba(0,0,0,0.04) !important;
}
body.task-login .bs-login-form button.submit:hover,
body.task-login .bs-login-form button[type="submit"]:hover {
  background: #1c1c1e !important;
  border-color: #1c1c1e !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
body.task-login .bs-login-form button.submit:active,
body.task-login .bs-login-form button[type="submit"]:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12) !important;
}

/* ── Card footer ──────────────────────────────────────────────────────── */
body.task-login .bs-login-footer {
  margin: 20px 0 0;
  padding: 16px 28px 24px;
  border-top: 1px solid #f4f4f5;
  text-align: center;
}
html.dark-mode body.task-login .bs-login-footer { border-color: #27272a; }

body.task-login .bs-login-support-link {
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: #a1a1aa !important;
  text-decoration: none !important;
  transition: color 0.12s;
}
body.task-login .bs-login-support-link:hover { color: #09090b !important; }
html.dark-mode body.task-login .bs-login-support-link:hover { color: #fafafa !important; }

body.task-login #login-footer { display: none !important; }

/* ── Legal ────────────────────────────────────────────────────────────── */
body.task-login .bs-login-legal {
  margin: 20px auto 0;
  max-width: 360px;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #71717a;
  line-height: 1.8;
}
body.task-login .bs-login-legal br + * ,
body.task-login .bs-login-legal {
  display: block;
}
/* First line (© BoostServ…) slightly more prominent */
body.task-login .bs-login-legal::first-line {
  font-weight: 600;
  color: #52525b;
  letter-spacing: 0;
}

/* ── Error / notice toasts ────────────────────────────────────────────── */
body.task-login #messagestack {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  width: calc(100% - 32px);
  max-width: 360px;
}
body.task-login #messagestack div.error,
body.task-login #messagestack div.warning {
  padding: 10px 14px !important;
  margin: 0 0 8px !important;
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
  border-radius: 8px !important;
  font-size: 0.8125rem !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
body.task-login #messagestack div.notice {
  padding: 10px 14px !important;
  margin: 0 0 8px !important;
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #16a34a !important;
  border-radius: 8px !important;
  font-size: 0.8125rem !important;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 400px) {
  body.task-login .bs-login-brand { height: 72px; background-size: 100px auto; }
  body.task-login .bs-login-header { padding: 20px 20px 0; margin-bottom: 20px; }
  body.task-login .bs-login-form  { padding: 0 20px; }
  body.task-login .bs-login-footer { padding: 14px 20px 20px; }
  body.task-login .bs-login-title { font-size: 1.375rem; }
}

/* =========================================================================
 *  Post-login app chrome — premium BoostServ skin v2
 *
 *  Four-column layout:
 *    #layout-menu    → dark zinc-950 nav rail + BoostServ logo
 *    #layout-sidebar → folder tree, zinc-50
 *    #layout-list    → message list, white
 *    #layout-content → reading pane, white
 * ========================================================================= */

/* ── Canvas ─────────────────────────────────────────────────────────── */
body:not(.task-login) #layout {
  background: #09090b !important;   /* gaps between panels are dark */
}

/* ═══════════════════════════════════════════════════════════════════════
 *  NAV RAIL
 * ═══════════════════════════════════════════════════════════════════════ */

#layout-menu {
  background: #09090b !important;
  border-right: none !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ── Logo header ────────────────────────────────────────────────────── */
/*
 * Elastic's @media (min-width:481px) rule sets background-color with !important
 * and appears to block our background-image. Workaround: use ::after pseudo-
 * element for the logo — it is unaffected by background conflicts on the host.
 */
#layout-menu .popover-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 56px !important;
  min-height: 56px !important;
  flex-shrink: 0 !important;
  background: #09090b !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  position: relative !important;
}

/* Logo rendered via ::after — immune to background shorthand resets */
#layout-menu .popover-header::after {
  content: '' !important;
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  background: url('../images/logo-small.png') no-repeat center / 24px 24px !important;
  flex-shrink: 0 !important;
}

#layout-menu .popover-header #logo,
#layout-menu .popover-header img { display: none !important; }
#layout-menu .popover-header .button.cancel { display: none !important; }

/* ── Taskmenu container ─────────────────────────────────────────────── */
#taskmenu {
  background: transparent !important;
  padding: 4px 0 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex: 1 !important;
  gap: 1px !important;
}

/* ── All nav buttons ────────────────────────────────────────────────── */
#taskmenu a.button,
#taskmenu .button {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  min-height: 52px !important;
  border-radius: 10px !important;
  margin: 0 !important;
  padding: 6px 4px 5px !important;
  color: #52525b !important;
  text-decoration: none !important;
  font-size: 0.625rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  transition: background 0.12s, color 0.12s !important;
  gap: 3px !important;
  box-shadow: none !important;
  border: none !important;
}

#taskmenu a.button span.inner,
#taskmenu .button span.inner {
  font-size: 1.125rem !important;
  line-height: 1 !important;
}

/* Hover — fixed: items have class "mail", "contacts" etc., NOT "button" */
#taskmenu a.button:hover,
#taskmenu .button:hover,
#taskmenu a:hover {
  background: rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.8) !important;
}

/* Selected / active — fixed selector to match actual class names */
#taskmenu a.button.selected,
#taskmenu a.button.active,
#taskmenu .button.selected,
#taskmenu a.selected,
#taskmenu a.active {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
}
#taskmenu a.selected:hover,
#taskmenu a.active:hover {
  background: rgba(255,255,255,0.16) !important;
}

/* ── Compose — inverted pill (distinct from active nav ghost highlight) ── */
#taskmenu a.compose,
#taskmenu a[href*="_action=compose"] {
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.22) !important;
  border: 1.5px solid rgba(255,255,255,0.38) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}
#taskmenu a.compose:hover,
#taskmenu a[href*="_action=compose"]:hover {
  background: rgba(255,255,255,0.30) !important;
  color: #ffffff !important;
}

/* ── Utility buttons (theme, about, logout) — push to bottom ───────── */
#taskmenu li.spacer,
#taskmenu .spacer {
  flex: 1 !important;
}

/* Logout gets a danger tint */
#taskmenu a[href*="_task=logout"],
#taskmenu a.logout {
  color: #ef4444 !important;
}
#taskmenu a[href*="_task=logout"]:hover,
#taskmenu a.logout:hover {
  background: rgba(239,68,68,0.1) !important;
  color: #f87171 !important;
}

/* ── Hide About button ──────────────────────────────────────────────── */
#taskmenu a.about,
#taskmenu a[href*="_task=about"],
#taskmenu li.about {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  FOLDER SIDEBAR
 * ═══════════════════════════════════════════════════════════════════════ */

#layout-sidebar {
  background: #fafafa !important;
  border-right: 1px solid #e4e4e7 !important;
}

/* ── Sidebar account header ─────────────────────────────────────────── */
#layout-sidebar .header {
  display: flex !important;
  align-items: center !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 10px 0 14px !important;
  background: #fafafa !important;
  border-bottom: 1px solid #ebebeb !important;
  gap: 8px !important;
}

/* No logo badge in sidebar header — single logo lives in the nav rail only */
#layout-sidebar .header::before {
  display: none !important;
}

/* Username text */
#layout-sidebar .header .header-title,
#layout-sidebar .header .username,
#layout-sidebar .header .header-title.username {
  flex: 1 !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #09090b !important;
  letter-spacing: -0.01em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Folder actions ⋯ button */
#layout-sidebar .header a.button,
#layout-sidebar .header .folder-actions {
  flex-shrink: 0 !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  border-radius: 7px !important;
  color: #a1a1aa !important;
  transition: background 0.12s, color 0.12s !important;
}
#layout-sidebar .header a.button::before,
#layout-sidebar .header .folder-actions::before {
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
}
#layout-sidebar .header a.button:hover,
#layout-sidebar .header .folder-actions:hover {
  background: #ebebeb !important;
  color: #3f3f46 !important;
}

/* Sidebar-only: reset inherited line-height:58px on sidebar header icon buttons.
   Do NOT target #layout-content toolbar a.button — those buttons rely on
   stretch sizing from their parent flex container to fill the toolbar height. */
#layout-sidebar .header a.back-list-button,
#layout-list .header a.back-list-button,
#layout-content .header a.back-list-button {
  line-height: 1 !important;
}
#layout-sidebar .header a.back-list-button::before,
#layout-list .header a.back-list-button::before,
#layout-content .header a.back-list-button::before {
  line-height: 1 !important;
}

/* ── Folder list ────────────────────────────────────────────────────── */
#mailboxlist,
#mailboxlist ul {
  background: #fafafa !important;
  padding: 6px 0 !important;
}

#mailboxlist li > a {
  display: flex !important;
  align-items: center !important;
  height: 34px !important;
  padding: 0 10px !important;
  margin: 1px 6px !important;
  border-radius: 7px !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  color: #52525b !important;
  text-decoration: none !important;
  gap: 7px !important;
  transition: background 0.1s, color 0.1s !important;
}

#mailboxlist li.inbox > a {
  font-weight: 600 !important;
  color: #18181b !important;
}

#mailboxlist li > a:hover {
  background: #efefef !important;
  color: #18181b !important;
}

#mailboxlist li.selected > a {
  background: #e8e8ea !important;
  color: #09090b !important;
  font-weight: 500 !important;
}

/* Unread count badge */
#mailboxlist li > a .unreadcount {
  margin-left: auto !important;
  background: #18181b !important;
  color: #fafafa !important;
  border-radius: 99px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 1px 6px !important;
  letter-spacing: 0 !important;
  line-height: 16px !important;
}

/* Nested sub-folders slightly indented */
#mailboxlist ul li > a {
  padding-left: 22px !important;
  font-size: 0.8rem !important;
}

/* ── Sidebar footer — disk usage ────────────────────────────────────── */
#layout-sidebar .footer {
  padding: 8px 14px 10px !important;
  border-top: 1px solid #ebebeb !important;
  background: #fafafa !important;
}

.quota-value,
.quota-display {
  font-size: 0.6875rem !important;
  color: #a1a1aa !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}

.quota-bar {
  height: 3px !important;
  background: #e4e4e7 !important;
  border-radius: 99px !important;
  overflow: hidden !important;
  margin-top: 5px !important;
}

.quota-bar > div,
.quota-fill {
  height: 100% !important;
  background: #09090b !important;
  border-radius: 99px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  MESSAGE LIST PANEL
 * ═══════════════════════════════════════════════════════════════════════ */

#layout-list {
  background: #ffffff !important;
  border-right: 1px solid #e4e4e7 !important;
}

/* ── List header ────────────────────────────────────────────────────── */
#layout-list .header,
#messagelist-header {
  display: flex !important;
  align-items: center !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 8px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #f4f4f5 !important;
  gap: 4px !important;
}

/* ── Search bar (inside list header) ────────────────────────────────── */
#qsearchbox,
#layout-list .searchbox,
#layout-list form[name="searchform"] {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  height: 34px !important;
  background: #f4f4f5 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  padding: 0 10px !important;
  gap: 6px !important;
  transition: border-color 0.15s, background 0.15s !important;
  overflow: hidden !important;
}
#qsearchbox:focus-within,
#layout-list .searchbox:focus-within {
  background: #ffffff !important;
  border-color: #d4d4d8 !important;
  box-shadow: 0 0 0 3px rgba(9,9,11,0.04) !important;
}

/* Search input inside the search box */
#qsearchbox input[type="text"],
#layout-list .searchbox input[type="text"] {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: 100% !important;
  font-size: 0.8125rem !important;
  color: #09090b !important;
  border-radius: 0 !important;
}
#qsearchbox input[type="text"]:focus,
#layout-list .searchbox input[type="text"]:focus {
  border: none !important;
  box-shadow: none !important;
}

/* Small icon/button inside search */
#qsearchbox a.button,
#layout-list .searchbox a.button,
#qsearchbox button {
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 5px !important;
  color: #a1a1aa !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  transition: color 0.12s !important;
}
#qsearchbox a.button:hover,
#layout-list .searchbox a.button:hover {
  color: #52525b !important;
}

/* ── List toolbar buttons (Select, Options, Refresh) ────────────────── */
#layout-list .header a.button,
#layout-list .header button,
.toolbar.listing a.button,
.toolbar.listing button {
  display: inline-flex !important;
  align-items: center !important;
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: 7px !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: #71717a !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  gap: 5px !important;
  transition: background 0.12s, color 0.12s, border-color 0.12s !important;
}
#layout-list .header a.button:hover,
#layout-list .header button:hover,
.toolbar.listing a.button:hover,
.toolbar.listing button:hover {
  background: #f4f4f5 !important;
  color: #18181b !important;
  border-color: #e4e4e7 !important;
}

/* Refresh button — icon-only, right side */
#layout-list .header button.refresh,
.toolbar a.refresh { color: #71717a !important; }
#layout-list .header button.refresh:hover { color: #09090b !important; }

/* ── Column headers ─────────────────────────────────────────────────── */
.messagelist thead,
.messagelist thead th {
  background: #fafafa !important;
  color: #a1a1aa !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  border-bottom: 1px solid #f0f0f0 !important;
  padding: 5px 8px !important;
  white-space: nowrap !important;
}

.messagelist thead th a {
  color: inherit !important;
  text-decoration: none !important;
}

/* ── Message rows ───────────────────────────────────────────────────── */
.messagelist {
  background: #ffffff !important;
  color: #3f3f46 !important;
}

.messagelist tbody tr {
  border-bottom: 1px solid #f6f6f6 !important;
  transition: background 0.07s !important;
}

.messagelist tbody tr:hover {
  background: #fafafa !important;
}

.messagelist tbody tr.selected,
.messagelist tbody tr.selected:hover {
  background: #f3f3f4 !important;
}

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

.messagelist tbody tr.unread td.subject {
  color: #09090b !important;
}

.messagelist tbody td {
  padding: 10px 8px !important;
  font-size: 0.8125rem !important;
  color: #52525b !important;
  vertical-align: middle !important;
}

/* Unread dot — override Elastic's default colored circle */
.messagelist tbody tr.unread td.status span::before {
  background: #09090b !important;
}

/* ── Empty state ("The list is empty.") ─────────────────────────────── */
#messagelistcontainer .nomail,
.listing-content .nomail,
.messagelist-body .nomail,
p.nomail {
  display: block !important;
  text-align: center !important;
  padding: 56px 24px !important;
  font-size: 0.875rem !important;
  color: #a1a1aa !important;
  font-weight: 400 !important;
}

/* ── Pagination footer ──────────────────────────────────────────────── */
.toolbar.listing-nav,
.toolbar.listpagejump,
#listnavbar,
.toolbar[aria-label="List navigation"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  padding: 0 10px !important;
  border-top: 1px solid #f0f0f0 !important;
  background: #fafafa !important;
  gap: 2px !important;
  font-size: 0.8125rem !important;
  color: #71717a !important;
}

.toolbar.listpagejump a.button,
.toolbar.listpagejump button,
.toolbar[aria-label="List navigation"] button,
#listnavbar a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  color: #71717a !important;
  border: none !important;
  background: transparent !important;
  transition: background 0.12s, color 0.12s !important;
}
.toolbar.listpagejump a.button:hover,
.toolbar.listpagejump button:hover,
.toolbar[aria-label="List navigation"] button:hover {
  background: #ebebeb !important;
  color: #09090b !important;
}

/* Pagination page input */
.toolbar.listpagejump input[type="text"],
.toolbar[aria-label="List navigation"] input[type="text"] {
  width: 36px !important;
  height: 28px !important;
  text-align: center !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 6px !important;
  font-size: 0.8125rem !important;
  padding: 0 4px !important;
  background: #ffffff !important;
  color: #09090b !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  READING PANE
 * ═══════════════════════════════════════════════════════════════════════ */

#layout-content,
#layout-content > *,
#layout-content .iframe-wrapper,
#messageframe,
#messagecontframe {
  background: #ffffff !important;
}

/* ── Reading pane toolbar (Reply, Forward, Delete…) ─────────────────── */
.toolbar.menu,
.menu.toolbar,
#layout-content .toolbar,
#toolbar-main {
  display: flex !important;
  align-items: center !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 12px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #f4f4f5 !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
}

/* Pane label (e.g. "Inbox", "Mail") in toolbar */
.toolbar.menu .header-title,
.menu.toolbar .header-title,
.topmost-toolbar .header-title {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #09090b !important;
  margin-right: 8px !important;
}

/* Toolbar action buttons */
.toolbar.menu a.button,
.toolbar.menu button,
.menu.toolbar a.button,
.menu.toolbar button,
#layout-content .toolbar a.button,
#layout-content .toolbar button {
  display: inline-flex !important;
  align-items: center !important;
  height: 34px !important;
  padding: 0 11px !important;
  border-radius: 7px !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: #52525b !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  gap: 6px !important;
  white-space: nowrap !important;
  transition: background 0.12s, color 0.12s, border-color 0.12s !important;
}
.toolbar.menu a.button:hover,
.toolbar.menu button:hover,
.menu.toolbar a.button:hover,
.menu.toolbar button:hover {
  background: #f4f4f5 !important;
  color: #09090b !important;
}

/* Reply — slight primary tint */
.toolbar.menu a.reply,
.toolbar.menu button.reply,
.menu.toolbar a.reply,
.menu.toolbar button.reply {
  background: #09090b !important;
  color: #fafafa !important;
  border-color: #09090b !important;
}
.toolbar.menu a.reply:hover,
.toolbar.menu button.reply:hover {
  background: #262626 !important;
  border-color: #262626 !important;
}

/* Delete — danger hover */
.toolbar.menu a.delete:hover,
.toolbar.menu button.delete:hover,
.menu.toolbar a.delete:hover,
.menu.toolbar button.delete:hover {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

/* Junk / Not junk */
.toolbar.menu a.junk:hover,
.toolbar.menu a.notjunk:hover {
  background: #fffbeb !important;
  color: #d97706 !important;
  border-color: #fde68a !important;
}

/* Dropdown arrow buttons next to reply-all/forward */
.toolbar.menu a[href*="reply-all"],
.toolbar.menu a[href*="forward"],
.menu.toolbar a[href*="reply-all"],
.menu.toolbar a[href*="forward"] {
  width: 24px !important;
  padding: 0 !important;
  justify-content: center !important;
  color: #a1a1aa !important;
  border-left: 1px solid #e4e4e7 !important;
  border-radius: 0 7px 7px 0 !important;
  margin-left: -4px !important;
}

/* More / ellipsis button */
.toolbar.menu a.more,
.toolbar.menu button.more,
.menu.toolbar a.more,
.menu.toolbar button.more {
  min-width: 34px !important;
  padding: 0 8px !important;
}

/* ── Message header in reading pane ────────────────────────────────── */
#messageheader,
#message-header {
  background: #ffffff !important;
  border-bottom: 1px solid #f4f4f5 !important;
  padding: 18px 20px !important;
}

#messageheader .subject,
#message-header .subject,
.message-subject {
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  color: #09090b !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 8px !important;
}

#messageheader .from,
#messageheader .to,
#messageheader .date,
#message-header .from,
#message-header .to,
#message-header .date {
  font-size: 0.8125rem !important;
  color: #71717a !important;
  line-height: 1.6 !important;
}

/* ── Reading pane empty state ───────────────────────────────────────── */
/* Elastic shows a large SVG illustration when no message is selected.
   Hide it and show a clean text prompt instead. */
#layout-content .no-content,
#messagecontframe .no-content,
#layout-content .watermark,
#layout-content canvas,
#layout-content object {
  display: none !important;
}

/* Show a custom empty state message via CSS */
#layout-content .no-content-wrapper::after,
#messagecontframe::after,
#layout-content #messagecontent:empty::after {
  content: 'Select a message to read' !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  font-size: 0.875rem !important;
  color: #a1a1aa !important;
  font-weight: 400 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  DROPDOWN / POPUP MENUS
 * ═══════════════════════════════════════════════════════════════════════ */

.popupmenu,
.dropdown-menu,
ul.menu {
  background: #ffffff !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 10px !important;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.06),
    0 1px 4px rgba(0,0,0,0.04) !important;
  padding: 4px !important;
  min-width: 168px !important;
  overflow: hidden !important;
}

.popupmenu li a,
.dropdown-menu li a,
ul.menu li a,
.popupmenu li button,
ul.menu li button {
  display: flex !important;
  align-items: center !important;
  padding: 7px 12px !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  color: #3f3f46 !important;
  border-radius: 7px !important;
  transition: background 0.08s !important;
  text-decoration: none !important;
  gap: 8px !important;
}

.popupmenu li a:hover,
.dropdown-menu li a:hover,
ul.menu li a:hover,
.popupmenu li button:hover,
ul.menu li button:hover {
  background: #f4f4f5 !important;
  color: #09090b !important;
}

.popupmenu li.separator,
.dropdown-menu .divider,
ul.menu li.separator {
  height: 1px !important;
  background: #f0f0f0 !important;
  margin: 3px 4px !important;
  border: none !important;
}

/* ── Dialogs / modals ───────────────────────────────────────────────── */
.ui-dialog,
.modal-content,
#upload-dialog {
  background: #ffffff !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 14px !important;
  box-shadow:
    0 8px 40px rgba(0,0,0,0.10),
    0 2px 8px rgba(0,0,0,0.06) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.ui-dialog-titlebar,
.modal-header {
  background: #fafafa !important;
  border-bottom: 1px solid #f0f0f0 !important;
  padding: 14px 18px !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: #09090b !important;
}

.ui-dialog-content,
.modal-body {
  padding: 18px !important;
  background: #ffffff !important;
}

.ui-dialog-buttonpane,
.modal-footer {
  background: #fafafa !important;
  border-top: 1px solid #f0f0f0 !important;
  padding: 12px 18px !important;
  display: flex !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}

/* ── Generic buttons ─────────────────────────────────────────────────── */
.btn,
button.btn,
.button {
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: background 0.12s, border-color 0.12s, color 0.12s !important;
}

.btn.btn-primary,
button.btn.btn-primary,
.button.mainaction {
  background: #09090b !important;
  color: #fafafa !important;
  border-color: #09090b !important;
}

.btn.btn-primary:hover,
button.btn.btn-primary:hover,
.button.mainaction:hover {
  background: #1c1c1e !important;
  border-color: #1c1c1e !important;
}

.btn.btn-secondary,
.button.secondary {
  background: #ffffff !important;
  color: #3f3f46 !important;
  border: 1px solid #e4e4e7 !important;
}

.btn.btn-secondary:hover,
.button.secondary:hover {
  background: #f4f4f5 !important;
  border-color: #d4d4d8 !important;
}

.btn.btn-danger,
.button.delete {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

/* ── Dialog / popover buttons — clean neutral sizing ─────────────────
 *  Our global .btn.btn-primary { background:#09090b } is correct, but
 *  dialogs need explicit sizing and a softer secondary so buttons look
 *  standard (not like login pill buttons). These appear AFTER the
 *  generic rules, so the cascade gives them priority. ─────────────── */
.ui-dialog .ui-dialog-buttonpane button {
  height: 34px !important;
  min-width: 72px !important;
  padding: 0 16px !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ui-dialog .ui-dialog-buttonpane button.btn-primary {
  background: #09090b !important;
  color: #fafafa !important;
  border: 1px solid #09090b !important;
}
.ui-dialog .ui-dialog-buttonpane button.btn-primary:hover {
  background: #27272a !important;
  border-color: #27272a !important;
}
.ui-dialog .ui-dialog-buttonpane button:not(.btn-primary) {
  background: #ffffff !important;
  color: #3f3f46 !important;
  border: 1px solid #e4e4e7 !important;
}
.ui-dialog .ui-dialog-buttonpane button:not(.btn-primary):hover {
  background: #f4f4f5 !important;
  border-color: #d4d4d8 !important;
}
html.dark-mode .ui-dialog .ui-dialog-buttonpane button.btn-primary {
  background: #fafafa !important;
  color: #09090b !important;
  border-color: #fafafa !important;
}
html.dark-mode .ui-dialog .ui-dialog-buttonpane button.btn-primary:hover {
  background: #e4e4e7 !important;
  border-color: #e4e4e7 !important;
}
html.dark-mode .ui-dialog .ui-dialog-buttonpane button:not(.btn-primary) {
  background: #27272a !important;
  color: #a1a1aa !important;
  border: 1px solid #3f3f46 !important;
}
html.dark-mode .ui-dialog .ui-dialog-buttonpane button:not(.btn-primary):hover {
  background: #3f3f46 !important;
  color: #fafafa !important;
  border-color: #52525b !important;
}

/* ── App inputs (non-login context) ─────────────────────────────────── */
body:not(.task-login) input[type="text"],
body:not(.task-login) input[type="password"],
body:not(.task-login) input[type="email"],
body:not(.task-login) input[type="search"],
body:not(.task-login) input[type="number"],
body:not(.task-login) textarea,
body:not(.task-login) select,
body:not(.task-login) .form-control {
  background: #ffffff !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 8px !important;
  color: #09090b !important;
  padding: 7px 12px !important;
}

body:not(.task-login) input[type="text"]:focus,
body:not(.task-login) input[type="email"]:focus,
body:not(.task-login) input[type="search"]:focus,
body:not(.task-login) textarea:focus,
body:not(.task-login) select:focus,
body:not(.task-login) .form-control:focus {
  outline: none !important;
  border-color: #a1a1aa !important;
  box-shadow: 0 0 0 3px rgba(9,9,11,0.06) !important;
}

/* ── Scrollbar ───────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #d4d4d8;
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }

/* ── Notifications / toasts ─────────────────────────────────────────── */
body:not(.task-login) #messagestack {
  position: fixed !important;
  bottom: 16px !important;
  right: 16px !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: 9000 !important;
  max-width: 340px !important;
  width: auto !important;
}

body:not(.task-login) #messagestack div {
  margin-bottom: 6px !important;
  padding: 10px 14px !important;
  border-radius: 9px !important;
  font-size: 0.8125rem !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}

body:not(.task-login) #messagestack div.error {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
}

body:not(.task-login) #messagestack div.confirmation {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #16a34a !important;
}

body:not(.task-login) #messagestack div.notice {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #b45309 !important;
}

/* =========================================================================
 *  Precision overrides — keyed to actual IDs/classes from DOM inspection
 * ========================================================================= */

/* ── Sidebar: hide mobile-only back-nav buttons on large layout ─────── */
.layout-large #layout-sidebar a.back-sidebar-button,
.layout-large #layout-sidebar a[href="#back"],
.layout-large #layout-sidebar a.button.back {
  display: none !important;
}

/*
 * Hide mobile navigation artifacts in the message-list and content headers.
 *
 * Specificity ladder (IDs, classes, types):
 *   Competing show rule: "#layout-list .header a.button" = (1,2,1)
 *   Our hide rule must be > (1,2,1).
 *   "#messagelist-header" already has class "header", so combining ID+class
 *   gives "#messagelist-header.header" = (1,1,0).
 *   Full selector: "html #messagelist-header.header a.task-menu-button"
 *     = (0,0,1) + (1,1,0) + (0,0,1) + (0,1,0) = (1,2,2) → beats (1,2,1) ✓
 */
html #messagelist-header.header a.task-menu-button,
html #messagelist-header.header a.back-sidebar-button,
html #messagelist-header.header a.toolbar-menu-button,
html #messagelist-header.header a.toolbar-list-button,
html #layout-content a.task-menu-button,
html #layout-content a.toolbar-list-button {
  display: none !important;
}

/*
 * Hide back/nav arrows across ALL layout panels in large layout.
 * These are mobile-only affordances; our layout-panel show-rules
 * (e.g. "#layout-list .header a.button { display:inline-flex !important }")
 * accidentally resurface them. Specificity of competing rule = (1,2,1).
 * html.layout-large + ID + .class + element = (0,1,1)+(1,0,0)+(0,1,0)+(0,0,1)
 * = (1,2,2) → beats (1,2,1). ✓
 */
html.layout-large #layout-list .header a.back-sidebar-button,
html.layout-large #layout-list .header a.back-list-button,
html.layout-large #layout-list .header a.toolbar-list-button,
html.layout-large #layout-list .header a.task-menu-button,
html.layout-large #layout-list .header a.toolbar-menu-button,
html.layout-large #layout-content .header a.back-list-button,
html.layout-large #layout-content .header a.back-sidebar-button,
html.layout-large #layout-content .header a.toolbar-list-button,
html.layout-large #layout-content .header a.task-menu-button,
html.layout-large #layout-content .header a.toolbar-menu-button,
html.layout-large #layout-content .header a.more,
html.layout-large #layout-sidebar .header a.back-sidebar-button,
html.layout-large #layout-sidebar .header a.back-list-button,
html.layout-large #layout-sidebar .header a.toolbar-menu-button,
html.layout-large #layout-sidebar .header a.task-menu-button,
html.layout-large #layout-sidebar .header a.sidebar-menu {
  display: none !important;
}

/* ── Exact search bar (#searchbar) ─────────────────────────────────── */
#searchbar {
  background: #f4f4f5 !important;
  border-bottom: 1px solid #f0f0f0 !important;
  padding: 9px 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 54px !important;
  box-sizing: border-box !important;
}

#searchbar .searchbox,
#searchbar form {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 8px !important;
  height: 34px !important;
  padding: 0 10px !important;
  gap: 6px !important;
  transition: border-color 0.15s !important;
}

#searchbar .searchbox:focus-within,
#searchbar form:focus-within {
  border-color: #a1a1aa !important;
  box-shadow: 0 0 0 3px rgba(9,9,11,0.05) !important;
}

#searchbar input[type="text"] {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: 100% !important;
  font-size: 0.8125rem !important;
  color: #09090b !important;
  border-radius: 0 !important;
}

#searchbar input[type="text"]:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

#searchbar a.button {
  flex-shrink: 0 !important;
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  color: #a1a1aa !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  transition: color 0.12s !important;
}

#searchbar a.button:hover { color: #52525b !important; }

/* Search filter dropdown (mail type + arrow) */
#searchbar a.button.listselect {
  width: 48px !important;
  gap: 2px !important;
}

/* ── Exact message-list toolbar (#messagelist-header) ───────────────── */
#messagelist-header {
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 8px 0 12px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #f4f4f5 !important;
  gap: 2px !important;
  overflow: visible !important;   /* don't clip button hit areas */
}

/* Fix: #toolbar-list-menu has classes "menu toolbar" which accidentally
   triggers our reading-pane toolbar rule (.toolbar.menu → white bg, 56px
   height, border-bottom). That pushes the UL to y=-1 (56px child in a 55px
   content box) and clips/covers the actual message-list header buttons.
   Reset it to a plain transparent inline flex row. */
#toolbar-list-menu {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  overflow: visible !important;
}
/* LI items inside should wrap their button content, not stretch to 56px */
#toolbar-list-menu > li {
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* Folder breadcrumb label in header */
#messagelist-header .header-title,
#messagelist-header .mailbox-name {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #09090b !important;
  flex: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Select, Options, Refresh, more buttons in list toolbar */
#toolbar-list-menu a.button,
#toolbar-list-menu li > a,
#messagelist-header a.button {
  display: inline-flex !important;
  align-items: center !important;
  height: 32px !important;
  padding: 0 9px !important;
  border-radius: 7px !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: #71717a !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  gap: 5px !important;
  white-space: nowrap !important;
  transition: background 0.12s, color 0.12s, border-color 0.12s !important;
  text-decoration: none !important;
}

#toolbar-list-menu a.button:hover,
#toolbar-list-menu li > a:hover,
#messagelist-header a.button:hover {
  background: #f4f4f5 !important;
  color: #18181b !important;
  border-color: #e4e4e7 !important;
}

/* Refresh button icon-only (wider) */
a#rcmbtn114.button.refresh {
  min-width: 34px !important;
}

/* ── Reading pane exact toolbar ──────────────────────────────────────── */
#layout-content .header.toolbar,
#layout-content div.header {
  height: 56px !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;   /* override Elastic justify-content:center */
  padding: 0 12px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #f4f4f5 !important;
  gap: 4px !important;
}
/* Contacts/addressbook: toolbar UL fills the header so buttons aren't clustered right */
#layout-content div.header > ul.menu.toolbar,
#layout-content div.header > .menu.toolbar {
  flex: 1 !important;
  justify-content: flex-start !important;
}

/* Action buttons in content toolbar */
#layout-content .header.toolbar a.button,
#layout-content .header.toolbar button,
#layout-content div.header a.button,
#layout-content div.header button {
  display: inline-flex !important;
  align-items: center !important;
  height: 34px !important;
  padding: 0 11px !important;
  border-radius: 7px !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: #52525b !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  gap: 6px !important;
  white-space: nowrap !important;
  transition: background 0.12s, color 0.12s !important;
  text-decoration: none !important;
}
#layout-content .header.toolbar a.button:hover,
#layout-content div.header a.button:hover {
  background: #f4f4f5 !important;
  color: #09090b !important;
}

/* Junk/notjunk have class="button …" so they get height:34px from above rules.
   Match same specificity (1,2,1) and appear later to win the cascade. */
#layout-content .header.toolbar a.button.junk,
#layout-content .header.toolbar a.button.notjunk,
#layout-content div.header a.button.junk,
#layout-content div.header a.button.notjunk {
  height: 100% !important;
}

/* Reply — primary action */
#layout-content .header.toolbar a.reply,
#layout-content div.header a.reply {
  background: #09090b !important;
  color: #fafafa !important;
  border-color: #09090b !important;
}
#layout-content .header.toolbar a.reply:hover,
#layout-content div.header a.reply:hover {
  background: #262626 !important;
}

/* Delete — danger hover */
#layout-content .header.toolbar a.delete:hover,
#layout-content div.header a.delete:hover {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

/* ── Reading pane footer nav (Previous / Reply / Next) ──────────────── */
.content-frame-navigation {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 52px !important;
  padding: 0 16px !important;
  background: #fafafa !important;
  border-top: 1px solid #f0f0f0 !important;
  gap: 20px !important;
}

.content-frame-navigation a.button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 7px !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: #71717a !important;
  border: 1px solid transparent !important;
  transition: background 0.12s, color 0.12s !important;
  text-decoration: none !important;
}

.content-frame-navigation a.button:hover {
  background: #ebebeb !important;
  color: #09090b !important;
}

/* ── Sidebar footer disk usage ──────────────────────────────────────── */
#layout-sidebar .footer {
  padding: 10px 14px 12px !important;
  background: #fafafa !important;
  border-top: 1px solid #ebebeb !important;
}

/* Storage icon + text row */
#layout-sidebar .footer a.button,
#layout-sidebar .footer .quota-display {
  font-size: 0.6875rem !important;
  color: #a1a1aa !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  text-decoration: none !important;
}

/* The progress bar element Elastic renders as inline style */
#layout-sidebar .footer .progressbar,
#layout-sidebar .footer [style*="width"] {
  height: 3px !important;
  border-radius: 99px !important;
  background: #09090b !important;
}

#layout-sidebar .footer > div,
#layout-sidebar .footer .quota-root {
  height: 3px !important;
  background: #e4e4e7 !important;
  border-radius: 99px !important;
  overflow: hidden !important;
  margin-top: 5px !important;
}

/* =========================================================================
 *  COMPLETE THEME SYSTEM — smooth transitions + full dark/light parity
 *
 *  SPECIFICITY NOTES:
 *  Our light rules include "#layout-content .toolbar" (specificity 1,1,0).
 *  Dark overrides must reach ≥ 1,2,0 to win. We use
 *  "html.dark-mode #<id> …" patterns which give (1+,1+,1) — always wins.
 * ========================================================================= */

/* ── Smooth transition on all major surfaces ────────────────────────────── */
/* 0.2s is smooth for theme switches; imperceptibly slower than 0.12s for    */
/* hovers (most users won't notice). Targets surfaces without existing       */
/* !important transitions; buttons keep their own faster rules.              */
#layout,
#layout-menu,
#layout-sidebar,
#layout-sidebar .header,
#layout-sidebar .footer,
#mailboxlist,
#mailboxlist li > a,
#layout-list,
#messagelist-header,
#toolbar-list-menu,
#toolbar-menu,
.messagelist,
.messagelist tbody tr,
.messagelist thead th,
#layout-content,
#layout-content div.header,
.iframe-wrapper,
.content-frame-navigation,
.toolbar.listing-nav,
.searchbar,
.popupmenu,
ul.menu,
.ui-dialog,
.ui-dialog-titlebar,
.ui-dialog-content,
.ui-dialog-buttonpane,
#messageheader,
#message-header {
  transition:
    background-color 0.2s ease,
    color 0.18s ease,
    border-color 0.2s ease;
}

/* ── Dark mode — canvas ─────────────────────────────────────────────────── */
html.dark-mode body:not(.task-login) { background: #09090b !important; }
html.dark-mode #layout { background: #09090b !important; }

/* ── Dark mode — reading pane ───────────────────────────────────────────── */
html.dark-mode #layout-content,
html.dark-mode #layout-content > *,
html.dark-mode .iframe-wrapper,
html.dark-mode #messagecontframe { background: #18181b !important; color: #e4e4e7 !important; }

/* The toolbar inside #layout-content is a UL with class "menu toolbar".
   Light rule "#layout-content .toolbar" has specificity 1,1,0.
   We use "html.dark-mode #layout-content .toolbar" = 1,2,1 — wins. */
html.dark-mode #layout-content .toolbar,
html.dark-mode #layout-content div.header,
html.dark-mode #toolbar-menu {
  background: #18181b !important;
  border-color: #27272a !important;
  color: #e4e4e7 !important;
}
html.dark-mode #layout-content .toolbar a.button,
html.dark-mode #layout-content .toolbar button,
html.dark-mode #toolbar-menu a.button,
html.dark-mode #toolbar-menu li > a {
  color: #a1a1aa !important;
}
html.dark-mode #layout-content .toolbar a.button:hover,
html.dark-mode #layout-content .toolbar button:hover,
html.dark-mode #toolbar-menu a.button:hover {
  background: #27272a !important;
  color: #e4e4e7 !important;
  border-color: #3f3f46 !important;
}
/* Reply primary action: zinc-700 pill in dark mode (not white — too jarring) */
html.dark-mode #layout-content .toolbar a.reply,
html.dark-mode #layout-content div.header a.reply,
html.dark-mode #toolbar-menu a.reply,
html.dark-mode .content-frame-navigation a.reply,
html.dark-mode .footer.toolbar a.reply {
  background: #3f3f46 !important;
  color: #fafafa !important;
  border-color: #3f3f46 !important;
}
html.dark-mode #layout-content .toolbar a.reply:hover,
html.dark-mode #toolbar-menu a.reply:hover,
html.dark-mode .content-frame-navigation a.reply:hover {
  background: #52525b !important;
  border-color: #52525b !important;
}
/* Delete danger hover — dark mode */
html.dark-mode #layout-content .toolbar a.delete:hover,
html.dark-mode #toolbar-menu a.delete:hover {
  background: rgba(220,38,38,0.15) !important;
  color: #f87171 !important;
  border-color: rgba(220,38,38,0.3) !important;
}
/* Junk hover — dark mode */
html.dark-mode #layout-content .toolbar a.junk:hover,
html.dark-mode #toolbar-menu a.junk:hover {
  background: rgba(202,138,4,0.15) !important;
  color: #fbbf24 !important;
  border-color: rgba(202,138,4,0.3) !important;
}

/* Reading pane footer nav */
html.dark-mode .content-frame-navigation {
  background: #18181b !important;
  border-top-color: #27272a !important;
}
html.dark-mode .content-frame-navigation a.button { color: #71717a !important; }
html.dark-mode .content-frame-navigation a.button:hover {
  background: #27272a !important;
  color: #e4e4e7 !important;
}

/* Message header in reading pane */
html.dark-mode #messageheader,
html.dark-mode #message-header {
  background: #18181b !important;
  border-bottom-color: #27272a !important;
}
html.dark-mode #messageheader .subject,
html.dark-mode #message-header .subject,
html.dark-mode .message-subject { color: #fafafa !important; }
html.dark-mode #messageheader .from,
html.dark-mode #messageheader .to,
html.dark-mode #messageheader .date,
html.dark-mode #message-header .from,
html.dark-mode #message-header .to,
html.dark-mode #message-header .date { color: #71717a !important; }

/* ── Dark mode — sidebar ────────────────────────────────────────────────── */
html.dark-mode #layout-sidebar {
  background: #18181b !important;
  border-color: #27272a !important;
}
html.dark-mode #layout-sidebar .header {
  background: #18181b !important;
  border-bottom-color: #27272a !important;
}
html.dark-mode #layout-sidebar .header .header-title,
html.dark-mode #layout-sidebar .header .username { color: #e4e4e7 !important; }
html.dark-mode #layout-sidebar .header a.button,
html.dark-mode #layout-sidebar .header .folder-actions { color: #52525b !important; }
html.dark-mode #layout-sidebar .header a.button:hover { background: #27272a !important; color: #a1a1aa !important; }

html.dark-mode #mailboxlist,
html.dark-mode #mailboxlist ul { background: #18181b !important; }
html.dark-mode #mailboxlist li > a { color: #a1a1aa !important; }
html.dark-mode #mailboxlist li.inbox > a { color: #e4e4e7 !important; }
html.dark-mode #mailboxlist li > a:hover { background: #27272a !important; color: #e4e4e7 !important; }
html.dark-mode #mailboxlist li.selected > a { background: #27272a !important; color: #fafafa !important; }
html.dark-mode #mailboxlist li > a .unreadcount { background: #fafafa !important; color: #09090b !important; }

html.dark-mode #layout-sidebar .footer {
  background: #18181b !important;
  border-top-color: #27272a !important;
}
html.dark-mode .quota-bar { background: #27272a !important; }
html.dark-mode .quota-bar > div,
html.dark-mode .quota-fill { background: #fafafa !important; }

/* ── Dark mode — message list panel ────────────────────────────────────── */
html.dark-mode #layout-list {
  background: #18181b !important;
  border-color: #27272a !important;
}
html.dark-mode #messagelist-header,
html.dark-mode #layout-list .header {
  background: #18181b !important;
  border-color: #27272a !important;
}
html.dark-mode #messagelist-header .header-title,
html.dark-mode #messagelist-header .mailbox-name { color: #fafafa !important; }

/* List toolbar buttons */
html.dark-mode #messagelist-header a.button,
html.dark-mode #toolbar-list-menu a.button,
html.dark-mode #toolbar-list-menu li > a { color: #71717a !important; }
html.dark-mode #messagelist-header a.button:hover,
html.dark-mode #toolbar-list-menu a.button:hover {
  background: #27272a !important;
  color: #e4e4e7 !important;
  border-color: #3f3f46 !important;
}

/* Search bar */
html.dark-mode .searchbar { background: #18181b !important; }
html.dark-mode #searchbar {
  background: #27272a !important;
  border-bottom-color: #3f3f46 !important;
}
html.dark-mode #searchbar .searchbox,
html.dark-mode #searchbar form {
  background: #18181b !important;
  border-color: #3f3f46 !important;
}
html.dark-mode #searchbar input[type="text"] { color: #e4e4e7 !important; }
html.dark-mode #searchbar a.button { color: #52525b !important; }
html.dark-mode #searchbar a.button:hover { color: #a1a1aa !important; }

/* Message list */
html.dark-mode .messagelist { background: #18181b !important; color: #a1a1aa !important; }
html.dark-mode .messagelist thead,
html.dark-mode .messagelist thead th {
  background: #18181b !important;
  color: #52525b !important;
  border-bottom-color: #27272a !important;
}
html.dark-mode .messagelist tbody tr { border-bottom-color: #1f1f22 !important; }
html.dark-mode .messagelist tbody tr:hover { background: #27272a !important; }
html.dark-mode .messagelist tbody tr.selected,
html.dark-mode .messagelist tbody tr.selected:hover { background: #3f3f46 !important; }
html.dark-mode .messagelist tbody tr.unread { color: #fafafa !important; }
html.dark-mode .messagelist tbody tr.unread td.subject { color: #fafafa !important; }
html.dark-mode .messagelist tbody td { color: #71717a !important; }

/* Pagination */
html.dark-mode .toolbar.listing-nav,
html.dark-mode .toolbar.listpagejump,
html.dark-mode #listnavbar {
  background: #18181b !important;
  border-top-color: #27272a !important;
  color: #52525b !important;
}
html.dark-mode .toolbar.listpagejump a.button,
html.dark-mode .toolbar.listpagejump button,
html.dark-mode #listnavbar a { color: #52525b !important; }
html.dark-mode .toolbar.listpagejump a.button:hover,
html.dark-mode .toolbar.listpagejump button:hover {
  background: #27272a !important;
  color: #e4e4e7 !important;
}
html.dark-mode .toolbar.listpagejump input[type="text"] {
  background: #27272a !important;
  border-color: #3f3f46 !important;
  color: #e4e4e7 !important;
}

/* ── Dark mode — dropdowns & popup menus ────────────────────────────────── */
/* Light rule ".popupmenu, ul.menu" has specificity 0,1,1.
   We use "html.dark-mode .popupmenu" = 0,2,1 — wins. */
html.dark-mode .popupmenu,
html.dark-mode .dropdown-menu,
html.dark-mode ul.menu {
  background: #18181b !important;
  border-color: #27272a !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.3) !important;
}
html.dark-mode .popupmenu li a,
html.dark-mode ul.menu li a,
html.dark-mode .popupmenu li button,
html.dark-mode ul.menu li button { color: #a1a1aa !important; }
html.dark-mode .popupmenu li a:hover,
html.dark-mode ul.menu li a:hover,
html.dark-mode .popupmenu li button:hover,
html.dark-mode ul.menu li button:hover {
  background: #27272a !important;
  color: #e4e4e7 !important;
}
html.dark-mode .popupmenu li.separator,
html.dark-mode ul.menu li.separator { background: #27272a !important; }

/* Bootstrap .popover (used for Reply-all, Forward dropdowns, etc.) */
html.dark-mode .popover {
  background: #1c1c1e !important;
  border-color: #3f3f46 !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important;
}
html.dark-mode .popover .popover-body { color: #a1a1aa !important; }
html.dark-mode .popover .arrow::before { border-bottom-color: #3f3f46 !important; }
html.dark-mode .popover .arrow::after  { border-bottom-color: #1c1c1e !important; }
html.dark-mode .popover ul.menu li a,
html.dark-mode .popover ul.menu li button { color: #a1a1aa !important; }
html.dark-mode .popover ul.menu li a:hover,
html.dark-mode .popover ul.menu li button:hover {
  background: #27272a !important;
  color: #e4e4e7 !important;
}

/* ── Dark mode — dialogs / modals ───────────────────────────────────────── */
html.dark-mode .ui-dialog,
html.dark-mode .modal-content,
html.dark-mode #upload-dialog {
  background: #18181b !important;
  border-color: #27272a !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4) !important;
}
html.dark-mode .ui-dialog-titlebar,
html.dark-mode .modal-header {
  background: #27272a !important;
  border-bottom-color: #3f3f46 !important;
  color: #fafafa !important;
}
html.dark-mode .ui-dialog-content,
html.dark-mode .modal-body { background: #18181b !important; color: #e4e4e7 !important; }
html.dark-mode .ui-dialog-buttonpane,
html.dark-mode .modal-footer {
  background: #27272a !important;
  border-top-color: #3f3f46 !important;
}

/* ── Dark mode — form inputs ────────────────────────────────────────────── */
html.dark-mode body:not(.task-login) input[type="text"],
html.dark-mode body:not(.task-login) input[type="password"],
html.dark-mode body:not(.task-login) input[type="email"],
html.dark-mode body:not(.task-login) input[type="search"],
html.dark-mode body:not(.task-login) input[type="number"],
html.dark-mode body:not(.task-login) textarea,
html.dark-mode body:not(.task-login) select,
html.dark-mode body:not(.task-login) .form-control {
  background: #27272a !important;
  border-color: #3f3f46 !important;
  color: #e4e4e7 !important;
}
html.dark-mode body:not(.task-login) input:focus,
html.dark-mode body:not(.task-login) textarea:focus,
html.dark-mode body:not(.task-login) select:focus {
  border-color: #52525b !important;
  box-shadow: 0 0 0 3px rgba(250,250,250,0.06) !important;
}

/* ── Dark mode — generic buttons ────────────────────────────────────────── */
html.dark-mode .btn.btn-primary,
html.dark-mode .button.mainaction {
  background: #fafafa !important;
  color: #09090b !important;
  border-color: #fafafa !important;
}
html.dark-mode .btn.btn-primary:hover,
html.dark-mode .button.mainaction:hover {
  background: #e4e4e7 !important;
  border-color: #e4e4e7 !important;
}
html.dark-mode .btn.btn-secondary,
html.dark-mode .button.secondary {
  background: #27272a !important;
  color: #a1a1aa !important;
  border-color: #3f3f46 !important;
}
html.dark-mode .btn.btn-secondary:hover,
html.dark-mode .button.secondary:hover {
  background: #3f3f46 !important;
  color: #e4e4e7 !important;
}

/* ── Dark mode — notifications ──────────────────────────────────────────── */
html.dark-mode body:not(.task-login) #messagestack div {
  box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
}
html.dark-mode body:not(.task-login) #messagestack div.error {
  background: rgba(220,38,38,0.15) !important;
  border-color: rgba(220,38,38,0.3) !important;
  color: #f87171 !important;
}
html.dark-mode body:not(.task-login) #messagestack div.confirmation {
  background: rgba(22,163,74,0.15) !important;
  border-color: rgba(22,163,74,0.3) !important;
  color: #4ade80 !important;
}
html.dark-mode body:not(.task-login) #messagestack div.notice {
  background: rgba(202,138,4,0.15) !important;
  border-color: rgba(202,138,4,0.3) !important;
  color: #fbbf24 !important;
}

/* ── Dark mode — compose window ─────────────────────────────────────────── */
html.dark-mode #compose-content,
html.dark-mode #compose-body { background: #18181b !important; color: #e4e4e7 !important; }

/* ── Dark mode — contacts ───────────────────────────────────────────────── */
html.dark-mode #layout-sidebar.addressbook { background: #18181b !important; }
html.dark-mode #contacts-table tbody tr:hover { background: #27272a !important; }
html.dark-mode #contacts-table tbody tr.selected { background: #3f3f46 !important; }

/* ── Dark mode — settings ───────────────────────────────────────────────── */
html.dark-mode #preferences-tabs li.selected > a,
html.dark-mode #prefs-tabs li.selected > a {
  border-bottom-color: #fafafa !important;
  color: #fafafa !important;
}

/* ── Dark mode — scrollbar ──────────────────────────────────────────────── */
html.dark-mode ::-webkit-scrollbar-track { background: transparent; }
html.dark-mode ::-webkit-scrollbar-thumb { background: #3f3f46; }
html.dark-mode ::-webkit-scrollbar-thumb:hover { background: #52525b; }

/* ── No-message empty state in reading pane ─────────────────────────── */
/* The iframe body is empty → show a centered hint via the wrapper */
.iframe-wrapper {
  position: relative !important;
}

.iframe-wrapper::after {
  content: '' !important;
  display: none !important; /* only show when iframe is empty */
}

/* ── Compose window ──────────────────────────────────────────────────── */
#compose-content,
#compose-body {
  background: #ffffff !important;
}

#compose-subject input,
#compose-to input,
#compose-cc input {
  border-bottom: 1px solid #f0f0f0 !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
}

/* ── Contacts/Addressbook panel ──────────────────────────────────────── */
#layout-sidebar.addressbook {
  background: #fafafa !important;
}

#contacts-table tbody tr:hover {
  background: #fafafa !important;
}

#contacts-table tbody tr.selected {
  background: #f3f3f4 !important;
}

/* ── Settings panels ─────────────────────────────────────────────────── */
#preferences-tabs li.selected > a,
#prefs-tabs li.selected > a {
  border-bottom: 2px solid #09090b !important;
  color: #09090b !important;
  font-weight: 600 !important;
}

/* =========================================================================
 *  Vendor strip — erase all Roundcube branding
 * ========================================================================= */
a[href*="roundcube.net"],
a[href*="roundcube.github.io"] { display: none !important; }
.credits { display: none !important; }
#aboutframe p:has(a[href*="roundcube"]) { display: none !important; }

/* =========================================================================
 *  COMPREHENSIVE DESIGN REFINEMENT — April 2026
 *
 *  Root cause fixes discovered via DOM audit:
 *    1. Taskmenu items have class "mail selected" / "contacts" etc. —
 *       NOT "button". All previous #taskmenu a.button rules were no-ops.
 *    2. Subject cell packs sender (.fromto), date (.date), size (.size),
 *       and subject (.subject) as spans — each needs individual styling.
 *    3. Focused row (.message.focused) had no background.
 *
 *  Specificity note: new #taskmenu a rules = (1,1,1).
 *  Existing specific overrides (#taskmenu a.compose = 1,2,1 etc.)
 *  still win because they have a higher class count. !important resolves
 *  any remaining ties in favor of the more-specific rule. ✓
 * ========================================================================= */

/* ─────────────────────────────────────────────────────────────────────────
 * § NAV RAIL — corrected selectors
 *   Previous rules targeted a.button which no taskmenu item has.
 *   These rules target all #taskmenu a; specific overrides below remain.
 * ───────────────────────────────────────────────────────────────────────── */
/*
 * TASKMENU SELECTOR FIX: Items have class "mail selected", "contacts" etc. —
 * NOT "button". DOM audit confirmed background-color and color resist override
 * by CSS rules (Roundcube/Elastic locks them). box-shadow: inset works
 * perfectly as a visual background substitute, and border-radius/width/height
 * all respond normally. Use inset box-shadow for hover/selected states.
 */
/*
 * Taskmenu layout — layout properties respond correctly, but background/color/
 * box-shadow are locked by Elastic's rendering layer. Use position:relative +
 * ::after overlay: background-color on a pseudo-element is NOT locked because
 * it's a new painting context independent of the <a> element's restrictions.
 */
#taskmenu a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 10px !important;
  padding: 5px 4px !important;
  text-decoration: none !important;
  font-size: 0.625rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  line-height: 1.25 !important;
  gap: 3px !important;
  border: none !important;
  outline: none !important;
  position: relative !important;        /* anchor ::after overlay */
  z-index: 0 !important;
}

/* (hover/selected states are handled in the original #taskmenu section above) */

/* Inner label text inside nav items */
#taskmenu a span.inner {
  font-size: 0.6rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  line-height: 1 !important;
  margin-top: 1px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
 * § MESSAGE LIST — row states + subject cell anatomy
 * ───────────────────────────────────────────────────────────────────────── */

/* Focused row = last-opened message (highlighted without being checked) */
.messagelist tbody tr.focused:not(.selected) {
  background: #f8f8f9 !important;
}
html.dark-mode .messagelist tbody tr.focused:not(.selected) {
  background: #222226 !important;
}

/* Checkbox accent color */
.messagelist td.selection input[type="checkbox"] {
  accent-color: #09090b !important;
  cursor: pointer !important;
  width: 14px !important;
  height: 14px !important;
}
html.dark-mode .messagelist td.selection input[type="checkbox"] {
  accent-color: #e4e4e7 !important;
}

/* Flag column — slim, icon only */
.messagelist td.flags {
  width: 26px !important;
  padding: 0 2px 0 0 !important;
  text-align: center !important;
}
.messagelist td.flags .flag,
.messagelist td.flags span { opacity: 0.3; }
.messagelist tbody tr:hover .flag { opacity: 0.5; }
.messagelist tbody tr.flagged .flag { opacity: 1 !important; color: #d97706 !important; }
html.dark-mode .messagelist tbody tr.flagged .flag { color: #fbbf24 !important; }

/* ── Subject cell: sender name (top line) ──── */
.messagelist td.subject .fromto {
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: #3f3f46 !important;
  line-height: 1.3 !important;
}
.messagelist tbody tr.unread td.subject .fromto {
  font-weight: 700 !important;
  color: #0a0a0a !important;
}
html.dark-mode .messagelist td.subject .fromto {
  color: #71717a !important;
}
html.dark-mode .messagelist tbody tr.unread td.subject .fromto {
  color: #e4e4e7 !important;
}

/* ── Subject text (second line) ──── */
.messagelist td.subject span.subject {
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  color: #71717a !important;
  line-height: 1.3 !important;
}
.messagelist tbody tr.unread td.subject span.subject {
  font-weight: 600 !important;
  color: #52525b !important;
}
html.dark-mode .messagelist td.subject span.subject {
  color: #3f3f46 !important;
}
html.dark-mode .messagelist tbody tr.unread td.subject span.subject {
  color: #a1a1aa !important;
}

/* ── Date span ──── */
.messagelist td.subject .date {
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  color: #a1a1aa !important;
  letter-spacing: 0 !important;
}
.messagelist tbody tr.unread td.subject .date {
  font-weight: 600 !important;
  color: #71717a !important;
}
html.dark-mode .messagelist td.subject .date {
  color: #3f3f46 !important;
}
html.dark-mode .messagelist tbody tr.unread td.subject .date {
  color: #52525b !important;
}

/* ── Size span ──── */
.messagelist td.subject .size {
  font-size: 0.7rem !important;
  color: #a1a1aa !important;
  letter-spacing: 0 !important;
}
html.dark-mode .messagelist td.subject .size {
  color: #3f3f46 !important;
}

/* ── msgicon / status icon ──── */
.messagelist td.subject .msgicon {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
 * § READING PANE — message header & attachments
 * ───────────────────────────────────────────────────────────────────────── */

/* Details / Headers / Show source links in message header */
#messageheader a.button,
#message-header a.button,
#messageheader a,
#message-header a {
  display: inline-flex !important;
  align-items: center !important;
  height: 26px !important;
  padding: 0 9px !important;
  border-radius: 6px !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: #71717a !important;
  border: 1px solid #e4e4e7 !important;
  background: #fafafa !important;
  text-decoration: none !important;
  transition: background 0.12s, color 0.12s !important;
}
#messageheader a:hover,
#message-header a:hover {
  background: #f4f4f5 !important;
  color: #18181b !important;
  border-color: #d4d4d8 !important;
}
html.dark-mode #messageheader a,
html.dark-mode #message-header a {
  color: #52525b !important;
  border-color: #27272a !important;
  background: #27272a !important;
}
html.dark-mode #messageheader a:hover,
html.dark-mode #message-header a:hover {
  background: #3f3f46 !important;
  color: #a1a1aa !important;
  border-color: #3f3f46 !important;
}

/* Message attachments strip */
#message-attachments,
.message-attachments,
#attachment-details,
.part-attachments {
  padding: 8px 16px 10px !important;
  border-top: 1px solid #f0f0f0 !important;
  background: #fafafa !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}
html.dark-mode #message-attachments,
html.dark-mode .message-attachments,
html.dark-mode #attachment-details {
  background: #27272a !important;
  border-top-color: #3f3f46 !important;
}

/* Individual attachment chip */
.attachment,
.message-attachments li,
#message-attachments li {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 28px !important;
  padding: 0 10px !important;
  background: #ffffff !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 7px !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: #52525b !important;
  text-decoration: none !important;
  transition: background 0.1s, border-color 0.1s !important;
  list-style: none !important;
}
.attachment:hover,
.message-attachments li:hover {
  background: #f4f4f5 !important;
  border-color: #d4d4d8 !important;
}
html.dark-mode .attachment,
html.dark-mode .message-attachments li,
html.dark-mode #message-attachments li {
  background: #3f3f46 !important;
  border-color: #52525b !important;
  color: #a1a1aa !important;
}
html.dark-mode .attachment:hover,
html.dark-mode .message-attachments li:hover {
  background: #52525b !important;
  border-color: #71717a !important;
}

/* ─────────────────────────────────────────────────────────────────────────
 * § COMPOSE — recipient chips + form fields
 * ───────────────────────────────────────────────────────────────────────── */

/* Compose container */
#compose-form,
#compose-content {
  background: #ffffff !important;
}

/* Header field rows: border-bottom separator per row */
#compose-form .form-group,
#compose-headers-menu,
.compose-headers .row {
  border-bottom: 1px solid #f0f0f0 !important;
}

/* Recipient chips (Elastic wraps them in span.recipient) */
.recipient,
.input-group .recipient {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 22px !important;
  padding: 0 7px !important;
  background: #f4f4f5 !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 99px !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: #3f3f46 !important;
  margin: 2px !important;
}
.recipient a,
.recipient .close {
  color: #a1a1aa !important;
  text-decoration: none !important;
  line-height: 1 !important;
  margin-left: 2px !important;
}
.recipient a:hover,
.recipient .close:hover { color: #dc2626 !important; }
html.dark-mode .recipient,
html.dark-mode .input-group .recipient {
  background: #27272a !important;
  border-color: #3f3f46 !important;
  color: #a1a1aa !important;
}

/* Subject input */
input#rcmfd_subject,
#compose-subject input {
  border: none !important;
  border-bottom: 1px solid #f0f0f0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 10px 14px !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: #09090b !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
input#rcmfd_subject:focus,
#compose-subject input:focus {
  outline: none !important;
  border-bottom-color: #a1a1aa !important;
  box-shadow: none !important;
}
html.dark-mode input#rcmfd_subject,
html.dark-mode #compose-subject input {
  color: #e4e4e7 !important;
  border-bottom-color: #27272a !important;
}
html.dark-mode input#rcmfd_subject:focus,
html.dark-mode #compose-subject input:focus {
  border-bottom-color: #52525b !important;
}

/* Compose attachments list */
#attachmentlist,
#attachment-list,
.attachmentslist {
  padding: 6px 14px !important;
  background: #fafafa !important;
  border-top: 1px solid #f0f0f0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  min-height: 0 !important;
}
.attachmentslist li,
#attachmentlist li {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 26px !important;
  padding: 0 9px !important;
  background: #ffffff !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 7px !important;
  font-size: 0.775rem !important;
  font-weight: 500 !important;
  color: #52525b !important;
  list-style: none !important;
}
.attachmentslist li a,
#attachmentlist li a {
  color: #a1a1aa !important;
  text-decoration: none !important;
}
.attachmentslist li a:hover,
#attachmentlist li a:hover { color: #dc2626 !important; }
html.dark-mode #attachmentlist,
html.dark-mode #attachment-list,
html.dark-mode .attachmentslist {
  background: #27272a !important;
  border-top-color: #3f3f46 !important;
}
html.dark-mode .attachmentslist li,
html.dark-mode #attachmentlist li {
  background: #3f3f46 !important;
  border-color: #52525b !important;
  color: #a1a1aa !important;
}

/* ─────────────────────────────────────────────────────────────────────────
 * § SETTINGS — section list + prefs form
 * ───────────────────────────────────────────────────────────────────────── */

/* Settings sidebar section rows */
#sections-table tbody tr,
.settings-sections tbody tr {
  cursor: pointer !important;
  border-bottom: 1px solid #f6f6f6 !important;
  transition: background 0.07s !important;
}
#sections-table tbody tr:hover,
.settings-sections tbody tr:hover {
  background: #fafafa !important;
}
#sections-table tbody tr.selected,
.settings-sections tbody tr.selected {
  background: #f3f3f4 !important;
}
#sections-table tbody tr td,
.settings-sections td {
  padding: 9px 14px !important;
  font-size: 0.8125rem !important;
  color: #3f3f46 !important;
  font-weight: 400 !important;
}
#sections-table tbody tr.selected td,
.settings-sections tr.selected td {
  color: #09090b !important;
  font-weight: 500 !important;
}

/* Prefs fieldset / table rows */
.propform td,
.propform th,
table.propform td,
table.propform th {
  padding: 9px 14px !important;
  font-size: 0.8125rem !important;
  vertical-align: middle !important;
}
table.propform th,
.propform th {
  font-weight: 500 !important;
  color: #71717a !important;
  white-space: nowrap !important;
  min-width: 130px !important;
}
table.propform td,
.propform td {
  color: #18181b !important;
}

/* Checkbox accent in forms */
.propform input[type="checkbox"],
input[type="checkbox"].form-check-input {
  accent-color: #09090b !important;
  width: 15px !important;
  height: 15px !important;
  cursor: pointer !important;
}

/* Radio + other form elements */
.propform input[type="radio"] {
  accent-color: #09090b !important;
  cursor: pointer !important;
}

html.dark-mode #sections-table tbody tr {
  border-bottom-color: #1f1f22 !important;
}
html.dark-mode #sections-table tbody tr:hover {
  background: #27272a !important;
}
html.dark-mode #sections-table tbody tr.selected {
  background: #3f3f46 !important;
}
html.dark-mode #sections-table tbody tr td {
  color: #71717a !important;
}
html.dark-mode #sections-table tbody tr.selected td {
  color: #e4e4e7 !important;
}
html.dark-mode .propform th {
  color: #52525b !important;
}
html.dark-mode .propform td {
  color: #a1a1aa !important;
}
html.dark-mode .propform input[type="checkbox"],
html.dark-mode .propform input[type="radio"] {
  accent-color: #e4e4e7 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
 * § CONTACTS — list rows + detail panel
 * ───────────────────────────────────────────────────────────────────────── */

#contacts-table tbody tr {
  border-bottom: 1px solid #f6f6f6 !important;
  transition: background 0.07s !important;
  cursor: pointer !important;
}
#contacts-table tbody tr td {
  padding: 9px 12px !important;
  font-size: 0.8125rem !important;
  color: #3f3f46 !important;
  vertical-align: middle !important;
}
#contacts-table tbody tr.selected td {
  color: #09090b !important;
}

/* Contact detail panel */
#contact-details,
.contact-panel {
  padding: 20px !important;
  background: #ffffff !important;
}
.contact-head,
.vcard-contacthead {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #f0f0f0 !important;
}
.contact-name,
.vcard-name {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: #09090b !important;
  letter-spacing: -0.02em !important;
}
.contact-details-table th,
.propform.contact th {
  font-weight: 500 !important;
  color: #a1a1aa !important;
  font-size: 0.75rem !important;
  padding: 7px 12px !important;
  white-space: nowrap !important;
}
.contact-details-table td,
.propform.contact td {
  font-size: 0.8125rem !important;
  color: #18181b !important;
  padding: 7px 12px !important;
}

html.dark-mode #contacts-table tbody tr {
  border-bottom-color: #1f1f22 !important;
}
html.dark-mode #contacts-table tbody tr td {
  color: #71717a !important;
}
html.dark-mode #contacts-table tbody tr.selected td {
  color: #e4e4e7 !important;
}
html.dark-mode #contact-details,
html.dark-mode .contact-panel {
  background: #18181b !important;
}
html.dark-mode .contact-name,
html.dark-mode .vcard-name {
  color: #fafafa !important;
}
html.dark-mode .contact-head,
html.dark-mode .vcard-contacthead {
  border-bottom-color: #27272a !important;
}
html.dark-mode .contact-details-table th,
html.dark-mode .propform.contact th {
  color: #3f3f46 !important;
}
html.dark-mode .contact-details-table td,
html.dark-mode .propform.contact td {
  color: #a1a1aa !important;
}

/* ─────────────────────────────────────────────────────────────────────────
 * § MISC POLISH — splitter, progress, selection bar, tooltips
 * ───────────────────────────────────────────────────────────────────────── */

/* Pane resize splitter */
.splitbar,
.split-separator,
#mailview-left,
.splitbar-vertical {
  background: #e4e4e7 !important;
  cursor: col-resize !important;
}
html.dark-mode .splitbar,
html.dark-mode .split-separator {
  background: #27272a !important;
}

/* Progress/loading bar */
#progressbar,
.progressbar {
  background: #e4e4e7 !important;
  border-radius: 99px !important;
  overflow: hidden !important;
  height: 3px !important;
}
#progressbar > div,
.progressbar > div {
  background: #09090b !important;
  height: 100% !important;
  border-radius: 99px !important;
}
html.dark-mode #progressbar,
html.dark-mode .progressbar {
  background: #27272a !important;
}
html.dark-mode #progressbar > div,
html.dark-mode .progressbar > div {
  background: #fafafa !important;
}

/* Multi-selection toolbar that appears when rows are checked */
.selection-bar,
#layout-list .selection-bar {
  background: #09090b !important;
  color: #fafafa !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  padding: 0 14px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.selection-bar a,
.selection-bar button {
  color: #a1a1aa !important;
  transition: color 0.12s !important;
}
.selection-bar a:hover,
.selection-bar button:hover { color: #ffffff !important; }
html.dark-mode .selection-bar { background: #27272a !important; }

/* Tooltip */
.ui-tooltip,
.tooltip {
  background: #09090b !important;
  color: #fafafa !important;
  border-radius: 6px !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  padding: 5px 10px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}
html.dark-mode .ui-tooltip,
html.dark-mode .tooltip {
  background: #fafafa !important;
  color: #09090b !important;
}

/* Roundcube "loading" overlay — appears during mail fetch */
#loading-screen,
#message-loading {
  background: transparent !important;
  color: #a1a1aa !important;
}

/* Ensure all focus rings match brand */
:focus-visible {
  outline: 2px solid rgba(9,9,11,0.35) !important;
  outline-offset: 2px !important;
}
html.dark-mode :focus-visible {
  outline-color: rgba(250,250,250,0.35) !important;
}

/* =========================================================================
 *  ELASTIC ACCENT COLOR OVERRIDES — April 2026
 *
 *  Elastic ships with a teal accent: rgb(55,190,255). It leaks into:
 *    • selected items in .listing / ul.treelist sidebar nav
 *    • selected message-list rows (dark mode text)
 *    • .floating-action-buttons (compose Send, settings Save)
 *    • .quota-widget fill
 *    • Bootstrap .btn:focus glow
 *  Every instance is replaced with BoostServ's zinc-950/zinc-50 palette.
 * ========================================================================= */

/* ── § 1. LISTING / TREELIST — selected sidebar items ───────────────────
 *  Covers: folder sidebar (Inbox, Sent), addressbook groups
 *  (Personal Addresses, Collected Recipients), settings sections, etc.
 * ──────────────────────────────────────────────────────────────────────── */

/* Light mode */
.listing li.selected,
.listing tr.selected td,
ul.treelist li.selected > a,
ul.treelist li.selected > div > a,
.table-widget table.options-table tr.selected td {
  background: #f0f0f1 !important;   /* zinc-100 */
  color: #09090b !important;         /* zinc-950 */
}

/* Dark mode */
html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div > a,
html.dark-mode ul.treelist li.selected > a,
html.dark-mode ul.treelist li.selected > div > a,
html.dark-mode .table-widget table.options-table tr.selected td {
  background: #3f3f46 !important;   /* zinc-700 */
  color: #fafafa !important;         /* zinc-50 */
}

/* ── § 2. MESSAGE LIST — selected-row & status icon colours ──────────────
 *  Dark mode only: Elastic turns the from/subject/date/link text teal (#37beff)
 *  and the msgicon status dot to Elastic's teal-tinted grey rgb(197,209,211).
 *  Override so everything stays on the zinc palette.
 * ──────────────────────────────────────────────────────────────────────── */

/* Selected row text: white */
html.dark-mode .messagelist tr.selected td.subject .fromto,
html.dark-mode .messagelist tr.selected td.subject span.subject,
html.dark-mode .messagelist tr.selected td.subject .date,
html.dark-mode .messagelist tr.selected td.subject a,
html.dark-mode .messagelist tr.selected td.subject span.msgicon {
  color: #fafafa !important;
}

/* Non-selected row status icon: zinc-500 instead of teal-tinted rgb(197,209,211) */
html.dark-mode .messagelist tr:not(.selected) td.subject span.msgicon {
  color: #71717a !important;   /* zinc-500 */
}

/* Light mode: selected row — neutral zinc tint */
.messagelist tr.selected td,
.listing tr.selected td {
  background: #f0f0f1 !important;   /* zinc-100 */
}
.messagelist tr.selected td.subject .fromto {
  color: #09090b !important;
  font-weight: 600 !important;
}
.messagelist tr.selected td.subject span.subject {
  color: #3f3f46 !important;
}

/* Dark mode: selected row — zinc-700 */
html.dark-mode .messagelist tr.selected td,
html.dark-mode .listing tr.selected td {
  background: #3f3f46 !important;   /* zinc-700 */
}

/* ── § 3. TOOLBAR / SEARCHBAR — active button colour (replaces green) ───
 *  Elastic uses rgb(65,184,73) for .menu.toolbar a.selected.
 * ──────────────────────────────────────────────────────────────────────── */
.menu.toolbar a.selected,
.searchbar a.selected {
  color: #09090b !important;
}
html.dark-mode .menu.toolbar a.selected,
html.dark-mode .searchbar a.selected {
  color: #a1a1aa !important;
}

/* ── § 4. FLOATING ACTION BUTTONS (Send, Save, +Create) ─────────────────
 *  Elastic's .floating-action-buttons sets background: rgb(55,190,255).
 *  Replace with confident near-black brand primary.
 * ──────────────────────────────────────────────────────────────────────── */
.floating-action-buttons a.button,
.floating-action-buttons .button,
a.button.floating-action-button,
.btn.floating-action-button {
  background: #09090b !important;
  color: #fafafa !important;
  border: none !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.18),
    0 4px 14px rgba(0,0,0,0.22) !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
}
.floating-action-buttons a.button:hover,
.floating-action-buttons .button:hover {
  background: #27272a !important;
}
html.dark-mode .floating-action-buttons a.button,
html.dark-mode .floating-action-buttons .button {
  background: #e4e4e7 !important;
  color: #09090b !important;
}
html.dark-mode .floating-action-buttons a.button:hover,
html.dark-mode .floating-action-buttons .button:hover {
  background: #d4d4d8 !important;
}

/* ── § 5. BOOTSTRAP BUTTON FOCUS RING (replaces teal glow) ──────────────
 *  Elastic injects rgba(55,190,255,0.3) box-shadow for .btn:focus.
 *  Replace with neutral zinc glow.
 * ──────────────────────────────────────────────────────────────────────── */
.btn:focus,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 0 0.18rem rgba(9,9,11,0.22) !important;
  border-color: rgba(9,9,11,0.35) !important;
}
html.dark-mode .btn:focus,
html.dark-mode .btn-primary:focus {
  box-shadow: 0 0 0 0.18rem rgba(250,250,250,0.18) !important;
  border-color: rgba(250,250,250,0.25) !important;
}

/* ── § 6. QUOTA WIDGET fill bar ──────────────────────────────────────────
 *  The filled portion of the quota bar uses rgb(55,190,255) teal.
 * ──────────────────────────────────────────────────────────────────────── */
.quota-widget .value,
.quota-fill {
  background-color: #09090b !important;
}
html.dark-mode .quota-widget .value,
html.dark-mode .quota-fill {
  background-color: #e4e4e7 !important;
}

/* ── § 7. READING PANE — message header subject + metadata styling ───────
 *  The reading pane is rendered inside #messagecontframe (iframe).
 *  Our styles.css IS loaded inside that iframe.
 *  Actual DOM (confirmed via JS inspection):
 *    <div id="message-header">          ← note hyphen, NOT camelCase
 *      <h2 class="subject">…</h2>
 *      <div class="header" style="display:flex">
 *        <img class="contactphoto">
 *        <div class="header-content details-view">
 *          <div class="header-summary">From <a>…</a></div>
 *        </div>
 *      </div>
 *    </div>
 *  Elastic base: #message-header > .subject { font-size:1.5rem; font-weight:700 }
 * ──────────────────────────────────────────────────────────────────────── */

/* Container */
#message-header {
  padding: 16px 20px 0 !important;
  border-bottom: 1px solid #e4e4e7 !important;
  margin-bottom: 0 !important;
}
html.dark-mode #message-header {
  border-bottom-color: #27272a !important;
}

/* Subject heading */
#message-header h2.subject,
#message-header > .subject {
  font-size: 1.0625rem !important;   /* 17 px — slightly tighter than Elastic's 1.5rem */
  font-weight: 700 !important;
  color: #09090b !important;
  line-height: 1.35 !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.01em !important;
}
html.dark-mode #message-header h2.subject,
html.dark-mode #message-header > .subject {
  color: #f4f4f5 !important;
}

/* Flex row: avatar + details */
#message-header > .header {
  align-items: flex-start !important;
  gap: 10px !important;
  padding-bottom: 12px !important;
}

/* Avatar circle */
#message-header .contactphoto,
#message-header img.contactphoto {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  object-fit: cover !important;
}

/* Details panel */
#message-header .header-content {
  font-size: 0.8125rem !important;   /* 13 px */
  color: #3f3f46 !important;
  line-height: 1.5 !important;
}
html.dark-mode #message-header .header-content {
  color: #a1a1aa !important;
}

/* Summary line (e.g. "From name@example.com") */
#message-header .header-summary {
  font-size: 0.8125rem !important;
  color: #71717a !important;
}
html.dark-mode #message-header .header-summary {
  color: #a1a1aa !important;
}

/* Links inside the header (mailto: addresses) */
#message-header a,
#message-header .header-content a {
  color: #09090b !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}
#message-header a:hover,
#message-header .header-content a:hover {
  text-decoration: underline !important;
}
html.dark-mode #message-header a,
html.dark-mode #message-header .header-content a {
  color: #e4e4e7 !important;
}

/* Collapsed headers table (shown when expanding "show details") */
#message-header table.headers-table,
#message-header .details {
  padding: 0 0 10px !important;
}
#message-header table.headers-table td,
#message-header .details td {
  padding: 2px 6px 2px 0 !important;
  font-size: 0.8125rem !important;
  vertical-align: middle !important;
  color: #3f3f46 !important;
}
#message-header table.headers-table td.header-title,
#message-header .details td.header-title {
  color: #a1a1aa !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  min-width: 48px !important;
}
html.dark-mode #message-header table.headers-table td {
  color: #a1a1aa !important;
}
html.dark-mode #message-header table.headers-table td.header-title,
html.dark-mode #message-header .details td.header-title {
  color: #52525b !important;
}

/* Earlier in the file §READING-PANE uses "#message-header a { display:inline-flex... }"
 * for the pill-style "Details/Show headers" action buttons.
 * Reset that so plain mailto: links inside the summary line look like text links. */
#message-header .header-summary a,
#message-header .header-content a:not(.button) {
  display: inline !important;
  height: auto !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: #09090b !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
#message-header .header-summary a:hover,
#message-header .header-content a:not(.button):hover {
  text-decoration: underline !important;
}
html.dark-mode #message-header .header-summary a,
html.dark-mode #message-header .header-content a:not(.button) {
  color: #e4e4e7 !important;
}

/* ── § 8. SETTINGS SECTION NAV — selected item (inherits §1, but belt+braces) */
#settings-tasks li.selected > a,
#sections-list li.selected > a {
  color: #09090b !important;
  background: #f0f0f1 !important;
  font-weight: 600 !important;
}
html.dark-mode #settings-tasks li.selected > a,
html.dark-mode #sections-list li.selected > a {
  color: #fafafa !important;
  background: #3f3f46 !important;
  font-weight: 600 !important;
}

/* ── § 9. POPUPMENU selected item ────────────────────────────────────────
 *  Elastic uses solid teal background for .popupmenu .listing li.selected.
 *  Replace with near-black brand.
 * ──────────────────────────────────────────────────────────────────────── */
.popupmenu .listing li.selected,
ul.menu li.selected,
.dropdown-menu > li.selected > a {
  background: #09090b !important;
  color: #fafafa !important;
}
html.dark-mode .popupmenu .listing li.selected,
html.dark-mode ul.menu li.selected {
  background: #27272a !important;
  color: #e4e4e7 !important;
}

/* ── § 10. FOCUS RINGS — replace every Elastic teal glow (rgb(55,190,255)) ─
 *  Elastic's skin replaces Bootstrap's blue with its own teal on every
 *  focusable element. Every variant is listed below and replaced with a
 *  subtle zinc glow that fits both light and dark themes.
 *
 *  Sources found (Elastic imported sheet):
 *    .form-control:focus
 *    .recipient-input.focus / .multi-input > .content.focused
 *    .custom-switch .custom-control-input:focus ~ label::before
 *    .custom-file-input:focus ~ .custom-file-label
 *    .tagedit-list[tabindex="-1"]
 *    .formcontent.raweditor .CodeMirror-focused
 *    div.tox focus rules
 *    html.dark-mode .input-group a:focus
 * ──────────────────────────────────────────────────────────────────────── */

/* — Standard text inputs / selects / textareas — */
.form-control:focus,
.custom-select:focus,
.form-control-plaintext:focus,
textarea.form-control:focus {
  border-color: rgba(9,9,11,0.3) !important;
  box-shadow: 0 0 0 0.175rem rgba(9,9,11,0.10) !important;
  outline: none !important;
}
html.dark-mode .form-control:focus,
html.dark-mode .custom-select:focus,
html.dark-mode textarea.form-control:focus {
  border-color: rgba(250,250,250,0.22) !important;
  box-shadow: 0 0 0 0.175rem rgba(250,250,250,0.08) !important;
}

/* — Recipient token input (To/CC/BCC) — */
.recipient-input.focus,
.multi-input > .content.focused {
  border-color: rgba(9,9,11,0.3) !important;
  box-shadow: 0 0 0 0.175rem rgba(9,9,11,0.10) !important;
}
html.dark-mode .recipient-input.focus,
html.dark-mode .multi-input > .content.focused {
  border-color: rgba(250,250,250,0.22) !important;
  box-shadow: 0 0 0 0.175rem rgba(250,250,250,0.08) !important;
}

/* — Tag-edit list — */
.tagedit-list[tabindex="-1"] {
  box-shadow: 0 0 0 0.175rem rgba(9,9,11,0.10) !important;
  border-color: rgba(9,9,11,0.3) !important;
}
html.dark-mode .tagedit-list[tabindex="-1"] {
  box-shadow: 0 0 0 0.175rem rgba(250,250,250,0.08) !important;
  border-color: rgba(250,250,250,0.22) !important;
}

/* — Custom-switch / toggle focus ring — */
.custom-control-input:focus ~ .custom-control-label::before,
.custom-switch .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.175rem rgba(9,9,11,0.12) !important;
}
html.dark-mode .custom-control-input:focus ~ .custom-control-label::before,
html.dark-mode .custom-switch .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.175rem rgba(250,250,250,0.12) !important;
}

/* — Custom file input — */
.custom-file-input:focus ~ .custom-file-label {
  border-color: rgba(9,9,11,0.3) !important;
  box-shadow: 0 0 0 0.175rem rgba(9,9,11,0.10) !important;
}

/* — CodeMirror raw editor — */
.formcontent.raweditor .CodeMirror-focused {
  border-color: rgba(9,9,11,0.3) !important;
  box-shadow: 0 0 0 0.175rem rgba(9,9,11,0.10) !important;
}

/* — TinyMCE (tox) dialog buttons — */
div.tox .tox-dialog__footer .tox-button:focus,
div.tox .tox-dialog__footer .tox-button:not(:disabled):not(.disabled).active:focus {
  box-shadow: 0 0 0 0.175rem rgba(9,9,11,0.18) !important;
}
div.tox .tox-color-input > input:focus,
div.tox .tox-listboxfield .tox-listbox--select:focus {
  box-shadow: 0 0 0 0.175rem rgba(9,9,11,0.10) !important;
  border-color: rgba(9,9,11,0.3) !important;
}

/* — input-group anchor focus (dark mode) — */
.input-group a:focus,
html.dark-mode .input-group a:focus {
  box-shadow: none !important;
  outline: 2px solid rgba(9,9,11,0.3) !important;
  outline-offset: 2px !important;
}
html.dark-mode .input-group a:focus {
  outline-color: rgba(250,250,250,0.3) !important;
}

/* ── § 11. BTN-LINK — neutral text link (replaces Bootstrap/Elastic blue) ─
 *  .btn-link is used for "Open in new window", "Show details", etc.
 * ──────────────────────────────────────────────────────────────────────── */
.btn-link,
a.btn-link {
  color: #52525b !important;   /* zinc-600 */
  text-decoration: none !important;
}
.btn-link:hover,
a.btn-link:hover {
  color: #09090b !important;
  text-decoration: underline !important;
}
.btn-link:focus {
  box-shadow: none !important;
  text-decoration: none !important;
}
html.dark-mode .btn-link,
html.dark-mode a.btn-link {
  color: #71717a !important;   /* zinc-500 */
}
html.dark-mode .btn-link:hover,
html.dark-mode a.btn-link:hover {
  color: #e4e4e7 !important;
}

/* ── § 12. NAV TABS — contact form / settings sections ───────────────────
 *  Elastic's dark-mode nav tabs use a teal-tinted palette:
 *    border rgb(77,96,102) · inactive text rgb(197,209,211) · active bg rgb(33,41,44)
 *  Replace every value with zinc equivalents.
 *  These rules apply both in main document and in iframes (contact-frame,
 *  settings frames) because our styles.css is loaded in all of them.
 * ──────────────────────────────────────────────────────────────────────── */

/* Light mode */
.nav-tabs {
  border-bottom-color: #e4e4e7 !important;   /* zinc-200 */
}
.nav-tabs .nav-link {
  color: #71717a !important;                 /* zinc-500 */
  border-color: transparent !important;
}
.nav-tabs .nav-link.active {
  color: #09090b !important;                 /* zinc-950 */
  background-color: #ffffff !important;
  border-color: #e4e4e7 #e4e4e7 #ffffff !important;
  font-weight: 600 !important;
}
.nav-tabs .nav-link:hover:not(.active) {
  color: #3f3f46 !important;                 /* zinc-700 */
  border-color: #e4e4e7 !important;
}

/* Dark mode */
html.dark-mode .nav-tabs {
  border-bottom-color: #27272a !important;   /* zinc-800 */
}
html.dark-mode .nav-tabs .nav-link {
  color: #71717a !important;                 /* zinc-500 */
  border-color: transparent transparent #27272a !important;
}
html.dark-mode .nav-tabs .nav-link:hover:not(.active) {
  background-color: #27272a !important;
  border-color: #3f3f46 #3f3f46 #27272a !important;
  color: #e4e4e7 !important;                 /* zinc-200 */
}
html.dark-mode .nav-tabs .nav-link.active {
  background-color: #18181b !important;      /* zinc-900 */
  border-color: #27272a #27272a transparent !important;
  color: #fafafa !important;                 /* zinc-50 */
  font-weight: 600 !important;
}

/* TinyMCE dialog nav tab (active item indicator) */
div.tox .tox-dialog .tox-dialog__body-nav-item--active {
  color: #09090b !important;
  border-color: #09090b !important;
}
html.dark-mode div.tox .tox-dialog .tox-dialog__body-nav-item--active {
  color: #e4e4e7 !important;
  border-color: #e4e4e7 !important;
}

/* ── § 13. TOGGLE SWITCHES — custom-switch checked state ─────────────────
 *  Elastic: checked track → rgb(55,190,255) light / rgb(0,106,157) dark.
 *  Replace with zinc brand: near-black (light) / zinc-200 (dark).
 *  The thumb (::after) stays white in light mode (Bootstrap default) and
 *  becomes zinc-950 in dark mode for contrast on the light track.
 * ──────────────────────────────────────────────────────────────────────── */

/* Light mode — checked track */
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #09090b !important;    /* zinc-950 */
  border-color: #09090b !important;
}
/* Light mode — unchecked focus ring border (was teal) */
.custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: rgba(9,9,11,0.3) !important;
}
/* Light mode — disabled checked */
.custom-switch .custom-control-input:checked:disabled ~ .custom-control-label::before {
  background-color: #a1a1aa !important;    /* zinc-400 */
  border-color: #a1a1aa !important;
}

/* Dark mode — checked track */
html.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #e4e4e7 !important;    /* zinc-200 */
  border-color: #e4e4e7 !important;
}
/* Dark mode — checked thumb (::after) becomes dark for contrast on light track */
html.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #09090b !important;    /* zinc-950 */
}
/* Dark mode — unchecked track — use zinc-600 instead of transparent/gray */
html.dark-mode .custom-switch .custom-control-input:not(:checked) ~ .custom-control-label::before {
  background-color: #52525b !important;    /* zinc-600 */
  border-color: #52525b !important;
}
/* Dark mode — unchecked thumb stays white for contrast */
html.dark-mode .custom-switch .custom-control-input:not(:checked) ~ .custom-control-label::after {
  background-color: #fafafa !important;    /* zinc-50 */
}

/* ── § 14. HYPERLINKS inside message body / compose forms ─────────────────
 *  Any <a> not already covered — keep them readable without teal.
 * ──────────────────────────────────────────────────────────────────────── */
#messagebody a:not(.button):not(.btn),
.rcmBody a:not(.button):not(.btn) {
  color: #2563eb !important;    /* indigo blue — standard link hue */
}
html.dark-mode #messagebody a:not(.button):not(.btn),
html.dark-mode .rcmBody a:not(.button):not(.btn) {
  color: #60a5fa !important;    /* lighter blue for dark bg */
}

/* ── § 15. NOTIFICATION TOASTS (#messagestack) ────────────────────────────
 *  Elastic: info/confirmation = teal rgb(55,190,255), success = green,
 *  warning = yellow, danger = red.
 *  Replace teal info toast with brand zinc-950. Keep semantic colors for
 *  success/warning/danger since they carry meaning (green/yellow/red).
 * ──────────────────────────────────────────────────────────────────────── */

/* Info / confirmation toast — replace teal with zinc-950 */
#messagestack .alert-info,
#messagestack .alert-info.information,
#messagestack .alert-confirmation {
  background: #09090b !important;   /* zinc-950 */
  color: #fafafa !important;        /* zinc-50 */
}
/* Icon colour inside the info toast */
#messagestack .alert-info > i.icon::before,
#messagestack .alert-info.information > i.icon::before,
#messagestack .alert-confirmation > i.icon::before {
  color: #a1a1aa !important;        /* zinc-400 */
}

/* Dark mode — info toast: invert to zinc-100 */
html.dark-mode #messagestack .alert-info,
html.dark-mode #messagestack .alert-info.information,
html.dark-mode #messagestack .alert-confirmation {
  background: #f4f4f5 !important;   /* zinc-100 */
  color: #09090b !important;        /* zinc-950 */
}
html.dark-mode #messagestack .alert-info > i.icon::before,
html.dark-mode #messagestack .alert-info.information > i.icon::before {
  color: #52525b !important;        /* zinc-600 */
}

/* Success toast — keep green but soften slightly */
#messagestack .alert-success {
  background: #16a34a !important;   /* green-600 — slightly richer */
  color: #ffffff !important;
}

/* Dark mode success — desaturate a touch */
html.dark-mode #messagestack .alert-success {
  background: #15803d !important;   /* green-700 */
}

/* General toast typography */
#messagestack .alert {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* ── § 16. TASKMENU DARK-MODE NAV COLORS ─────────────────────────────────
 *  Non-selected items (contacts, settings, theme) inherit Elastic's
 *  teal-tinted rgb(197,209,211) because no dark-mode color rule existed.
 *  Fix: zinc-500 base; preserve selected=white, logout=red, compose=white.
 * ──────────────────────────────────────────────────────────────────────── */
html.dark-mode #taskmenu a {
  color: #71717a !important;   /* zinc-500 */
}
html.dark-mode #taskmenu a span.inner {
  color: inherit !important;
}
/* Selected / active nav item: white text, no box (Compose keeps its box) */
html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a.active {
  background: transparent !important;
  color: #ffffff !important;
}
/* Compose stays white (higher specificity via extra class) */
html.dark-mode #taskmenu a.compose {
  color: #ffffff !important;
}
/* Logout preserves red */
html.dark-mode #taskmenu a.logout,
html.dark-mode #taskmenu a[href*="logout"] {
  color: #ef4444 !important;
}
/* Theme, about, logout: remove Elastic's teal-tinted rgb(33,41,44) bg */
html.dark-mode #taskmenu a.theme,
html.dark-mode #taskmenu a.about,
html.dark-mode #taskmenu a.logout {
  background: transparent !important;
}

/* ── § 17. QUOTA WIDGET — track + fill in dark mode ──────────────────────
 *  .quota-widget container: Elastic sets rgb(228,228,231) light bg (wrong).
 *  .bar (the full-width track): Elastic teal-grey rgb(77,96,102) (wrong).
 *  .value (the filled portion, width = usage %): should be zinc-200 fill.
 * ──────────────────────────────────────────────────────────────────────── */
/* Use ID selector to beat Elastic's html.dark-mode #quotadisplay specificity */
html.dark-mode #quotadisplay,
html.dark-mode .quota-widget {
  background: #3f3f46 !important;   /* zinc-700 track container */
}
html.dark-mode .quota-widget .bar {
  background: transparent !important;
  border-color: transparent !important;
}
html.dark-mode .quota-widget .value {
  background: #e4e4e7 !important;   /* zinc-200 fill */
}
html.dark-mode .quota-widget .percent,
html.dark-mode .quota-widget .count {
  color: #71717a !important;   /* zinc-500 */
}

/* ── § 18. REMAINING TEAL PURGE — borders, dropdowns, labels ─────────────
 *  All hits from DOM color-audit on 2026-04-21:
 *    rgb(77,96,102) on panel borders, searchbar border, quota .bar border
 *    rgb(197,209,211) on dropdown icon buttons, input-group-text, flag spans
 * ──────────────────────────────────────────────────────────────────────── */

/* Panel borders — Elastic uses rgb(77,96,102) on all sides; we already set
   border-color on #layout-sidebar and #layout-list above (changed from
   border-right-color). This block catches the inner header/footer dividers. */
html.dark-mode #layout-sidebar .header {
  border-color: #27272a !important;
}
html.dark-mode #layout-sidebar .footer {
  border-color: #27272a !important;
}

/* Searchbar container border */
html.dark-mode .searchbar,
html.dark-mode .searchbar.menu,
html.dark-mode #searchbar {
  border-color: #27272a !important;
}

/* Dropdown arrow / expand icon buttons — teal rgb(197,209,211) → zinc-500 */
html.dark-mode a.button.icon.dropdown,
html.dark-mode button.icon.dropdown,
html.dark-mode .dropdown-toggle,
html.dark-mode a.dropdown {
  color: #71717a !important;
  border-color: transparent !important;
}
html.dark-mode a.button.icon.dropdown:hover,
html.dark-mode button.icon.dropdown:hover {
  color: #a1a1aa !important;
}

/* Input-group prepend labels (e.g. search "From:" labels) */
html.dark-mode .input-group-text,
html.dark-mode label.input-group-text {
  color: #71717a !important;
  background: #27272a !important;
  border-color: #3f3f46 !important;
}

/* Message list flag icon — unflagged state should be dim zinc, not teal */
html.dark-mode .messagelist td.flags span.flag,
html.dark-mode .messagelist td.flags .flag {
  color: #3f3f46 !important;
}

/* Generic anchor/span elements that still have teal text in dark mode */
html.dark-mode #layout-content a.button.icon,
html.dark-mode #layout-list a.button.icon,
html.dark-mode #layout-sidebar a.button.icon {
  color: #71717a !important;
  border-color: transparent !important;
}

/* Message list subject links — inherit zinc color, not Elastic teal */
html.dark-mode .messagelist td.subject span.subject a,
html.dark-mode .messagelist td.subject span.subject a span {
  color: inherit !important;
  border-color: transparent !important;
}

/* #layout-content panel border */
html.dark-mode #layout-content {
  border-color: #27272a !important;
}

/* Pagination footer border in message list */
html.dark-mode #layout-list .footer,
html.dark-mode #layout-list .pagenav,
html.dark-mode .pagenav.footer {
  border-color: #27272a !important;
}

/* File-upload label (Bootstrap .custom-file-label) in dialogs */
html.dark-mode .custom-file-label {
  background: #27272a !important;
  color: #a1a1aa !important;
  border-color: #3f3f46 !important;
}

/* ── § 19. MESSAGE BODY FONT — plain-text emails ──────────────────────────
 *  Roundcube renders plain-text emails inside a div.pre which defaults to
 *  monospace font. Override with our sans-serif stack while keeping
 *  white-space: pre-wrap so line breaks are preserved.
 *  This rule applies inside the message iframe (styles.css is injected there).
 * ──────────────────────────────────────────────────────────────────────── */
.message-part div.pre,
.rcmBody div.pre,
div.pre {
  font-family: Geist, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.65 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

/* =========================================================================
 * § 20. DUAL-THEME FULL COMPATIBILITY — Light mode + icon rail + logo
 *
 *  Problem: #layout-menu bg is hardcoded #09090b and all nav colors assume
 *  white-on-dark. In light mode (no html.dark-mode class) the rail stays
 *  black, icons/text are invisible against any light bg, and the logo is
 *  white-on-white after bg change.
 *
 *  Strategy:
 *   • html:not(.dark-mode) → light zinc-100 rail, dark icons/text
 *   • html.dark-mode        → existing dark rail (unchanged)
 *   • Logo: brightness(0) filter makes the white PNG fully black in light mode
 *   • Compose CTA: inverted pill (dark bg, white text) — works on both rails
 *
 * Specificity: html:not(.dark-mode) = (0,1,1) same as html.dark-mode, but
 * these rules appear later in the file so they win for light mode. ✓
 * ========================================================================= */

/* ── Light mode: rail container ──────────────────────────────────────────── */
html:not(.dark-mode) #layout-menu {
  background: #f4f4f5 !important;
  border-right: 1px solid #e4e4e7 !important;
}
html:not(.dark-mode) #layout-menu .popover-header {
  background: #f4f4f5 !important;
  border-bottom-color: #e4e4e7 !important;
}

/* Logo: invert white PNG to near-black in light mode */
html:not(.dark-mode) #layout-menu .popover-header::after {
  filter: brightness(0) !important;
  opacity: 0.85 !important;
}

/* ── Light mode: base nav item colors ────────────────────────────────────── */
html:not(.dark-mode) #taskmenu a,
html:not(.dark-mode) #taskmenu a.button {
  color: #71717a !important;
}
html:not(.dark-mode) #taskmenu a span.inner {
  color: inherit !important;
}

/* ── Light mode: hover state ─────────────────────────────────────────────── */
html:not(.dark-mode) #taskmenu a:hover,
html:not(.dark-mode) #taskmenu a.button:hover {
  background: rgba(0,0,0,0.06) !important;
  color: #3f3f46 !important;
}

/* ── Light mode: selected / active nav item ──────────────────────────────── */
html:not(.dark-mode) #taskmenu a.selected,
html:not(.dark-mode) #taskmenu a.active {
  background: rgba(0,0,0,0.09) !important;
  color: #09090b !important;
}
html:not(.dark-mode) #taskmenu a.selected:hover,
html:not(.dark-mode) #taskmenu a.active:hover {
  background: rgba(0,0,0,0.12) !important;
}

/* ── Light mode: Compose CTA — dark pill (same as dark mode, works on any rail) */
html:not(.dark-mode) #taskmenu a.compose,
html:not(.dark-mode) #taskmenu a[href*="_action=compose"] {
  background: #09090b !important;
  border-color: #09090b !important;
  color: #fafafa !important;
}
html:not(.dark-mode) #taskmenu a.compose:hover,
html:not(.dark-mode) #taskmenu a[href*="_action=compose"]:hover {
  background: #27272a !important;
  border-color: #27272a !important;
  color: #fafafa !important;
}

/* ── Light mode: logout danger color ─────────────────────────────────────── */
html:not(.dark-mode) #taskmenu a.logout,
html:not(.dark-mode) #taskmenu a[href*="_task=logout"] {
  color: #dc2626 !important;
}
html:not(.dark-mode) #taskmenu a.logout:hover {
  background: rgba(220,38,38,0.08) !important;
  color: #b91c1c !important;
}

/* ── Light mode: theme toggle ────────────────────────────────────────────── */
html:not(.dark-mode) #taskmenu a.theme {
  color: #71717a !important;
  background: transparent !important;
}
html:not(.dark-mode) #taskmenu a.theme:hover {
  background: rgba(0,0,0,0.06) !important;
  color: #3f3f46 !important;
}

/* ── Light mode: quota widget ────────────────────────────────────────────── */
html:not(.dark-mode) #quotadisplay,
html:not(.dark-mode) .quota-widget {
  background: #e4e4e7 !important;
}
html:not(.dark-mode) .quota-widget .bar {
  background: transparent !important;
  border-color: transparent !important;
}
html:not(.dark-mode) .quota-widget .value {
  background: #09090b !important;
}
html:not(.dark-mode) .quota-widget .percent,
html:not(.dark-mode) .quota-widget .count {
  color: #71717a !important;
}

/* =========================================================================
 * § 21. ICON PLACEMENT & SIZING REFINEMENTS
 *
 *  Issues found via inspect + visual audit:
 *   1. Icon font (::before) renders at parent's font-size — too small at 0.625rem
 *   2. Gap between icon and label needs more breathing room
 *   3. Label text should be slightly dimmer than icon for visual hierarchy
 *   4. Nav rail overall spacing could use 2px more vertical gap between items
 * ========================================================================= */

/* Ensure icon font size is set explicitly on the ::before pseudo-element */
#taskmenu a::before {
  font-size: 1.15rem !important;
  line-height: 1 !important;
  display: block !important;
}

/* Label — slightly dimmer, tighter tracking */
#taskmenu a span.inner {
  font-size: 0.575rem !important;
  letter-spacing: 0.03em !important;
  line-height: 1 !important;
  margin-top: 2px !important;
  opacity: 0.85 !important;
}

/* Selected item: label fully opaque */
#taskmenu a.selected span.inner,
#taskmenu a.active span.inner {
  opacity: 1 !important;
}

/* Compose: larger icon for the CTA */
#taskmenu a.compose::before {
  font-size: 1.2rem !important;
}

/* Slightly more vertical gap between nav items */
#taskmenu {
  gap: 2px !important;
}

/* Ensure the icon rail bottom utility items have consistent sizing */
#taskmenu a.theme,
#taskmenu a.logout {
  width: 48px !important;
  height: 40px !important;
  min-height: 40px !important;
}

/* ── Light mode: better icon contrast for selected item ───────────────── */
html:not(.dark-mode) #taskmenu a.selected::before,
html:not(.dark-mode) #taskmenu a.active::before {
  opacity: 1 !important;
}

/* ── Dark mode: icon contrast consistency ──────────────────────────────── */
html.dark-mode #taskmenu a::before {
  opacity: 0.7;
}
html.dark-mode #taskmenu a.selected::before,
html.dark-mode #taskmenu a.active::before,
html.dark-mode #taskmenu a.compose::before {
  opacity: 1 !important;
}

/* =========================================================================
 * § 22. LIGHT MODE — REMAINING ELEMENT FIXES
 *
 *  Items that still have dark/teal colors in light mode outside the rail:
 *   1. Folder sidebar should be very slightly warmer than pure white
 *   2. Message list header border
 *   3. Search bar focus ring
 *   4. Toolbar button active state in light mode
 * ========================================================================= */

/* Toolbar button hover in light mode — use zinc-100 bg (not dark zinc) */
html:not(.dark-mode) #toolbar-menu li > a:hover,
html:not(.dark-mode) #layout-content .toolbar a:hover,
html:not(.dark-mode) #layout-content .toolbar button:hover {
  background: #f4f4f5 !important;
  color: #09090b !important;
}

/* Toolbar active/selected button in light mode — zinc-200 chip */
html:not(.dark-mode) #toolbar-menu li > a.active,
html:not(.dark-mode) .toolbar a.active,
html:not(.dark-mode) span.dropbutton.active > a {
  background: #e4e4e7 !important;
  color: #09090b !important;
}

/* Message list selected row: zinc-100 in light mode */
html:not(.dark-mode) .messagelist tbody tr.selected,
html:not(.dark-mode) .messagelist tbody tr.selected:hover {
  background: #f4f4f5 !important;
}
html:not(.dark-mode) .messagelist tbody tr.focused:not(.selected) {
  background: #fafafa !important;
}

/* Folder tree selected item: zinc-100 */
html:not(.dark-mode) #mailboxlist li.selected > a {
  background: #f4f4f5 !important;
  color: #09090b !important;
}

/* Search input focus ring: zinc border, no teal */
html:not(.dark-mode) #qsearchbox:focus-within,
html:not(.dark-mode) #layout-list .searchbox:focus-within {
  border-color: #a1a1aa !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06) !important;
}

/* Pagination bar border in light mode */
html:not(.dark-mode) .pagenav.footer,
html:not(.dark-mode) #layout-list .footer.small {
  border-top-color: #e4e4e7 !important;
  background: #fafafa !important;
}

/* Scrollbar in light mode */
html:not(.dark-mode) ::-webkit-scrollbar-track { background: transparent; }
html:not(.dark-mode) ::-webkit-scrollbar-thumb { background: #d4d4d8; }
html:not(.dark-mode) ::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }

/* Message header divider line in light mode */
html:not(.dark-mode) .message-header,
html:not(.dark-mode) #messageheader {
  border-bottom-color: #e4e4e7 !important;
}

/* Bottom Reply/nav bar in reading pane — light mode */
html:not(.dark-mode) .content-frame-navigation {
  background: #fafafa !important;
  border-top-color: #e4e4e7 !important;
}
html:not(.dark-mode) .content-frame-navigation a.button {
  color: #71717a !important;
}
html:not(.dark-mode) .content-frame-navigation a.button:hover {
  background: #f4f4f5 !important;
  color: #09090b !important;
}

/* =========================================================================
 *  TEAL ELIMINATION — Round 2 (April 2026)
 *
 *  Elastic sets color:#2c363a on body + all .listing links, and
 *  background:#37beff on .listing hover, background:#2f3a3f on
 *  .special-buttons. None were overridden in prior passes.
 *  Every remaining teal is replaced with the zinc palette here.
 * ========================================================================= */

/* ── § A. LAYOUT HEADER TEXT — body + header element teal ──────────────
 *  Elastic: body{color:#2c363a} + #layout>div>.header{color:#2c363a}
 *  Our body{color:var(--bs-fg)!important} handles inheritance, but
 *  Elastic's explicit #layout>div>.header rule wins via specificity.
 *  Match and beat it here.
 * ──────────────────────────────────────────────────────────────────────── */
#layout > div > .header {
  color: #09090b !important;   /* zinc-950 */
}
html.dark-mode #layout > div > .header {
  color: #e4e4e7 !important;   /* zinc-200 */
}

/* ── § B. LISTING LINK COLORS — .listing a/li a / tbody td ─────────────
 *  Elastic: .listing a, .listing li a, .listing tbody td {color:#2c363a}
 *  Affects: messagelist subjects, folder list names, contacts, settings rows.
 *  Replace with zinc-700 default; sidebar folder names get zinc-950.
 * ──────────────────────────────────────────────────────────────────────── */

/* Light mode — general listing links */
.listing a,
.listing li a,
.listing tbody td,
.listing tbody td a {
  color: #3f3f46 !important;   /* zinc-700 */
}

/* Sidebar folder/treelist names — near-black for legibility */
#layout-sidebar .listing li a,
#layout-sidebar .listing li > a,
#layout-sidebar .folderlist li a,
#layout-sidebar ul.treelist li a {
  color: #09090b !important;   /* zinc-950 */
}

/* Message subject links — readable near-black */
.messagelist td.subject span.subject a,
.messagelist td.subject a {
  color: #09090b !important;   /* zinc-950 */
}

/* Dark mode — general listing links */
html.dark-mode .listing a,
html.dark-mode .listing li a,
html.dark-mode .listing tbody td,
html.dark-mode .listing tbody td a {
  color: #a1a1aa !important;   /* zinc-400 */
}

/* Dark mode — sidebar folder names */
html.dark-mode #layout-sidebar .listing li a,
html.dark-mode #layout-sidebar .listing li > a,
html.dark-mode #layout-sidebar .folderlist li a,
html.dark-mode #layout-sidebar ul.treelist li a {
  color: #e4e4e7 !important;   /* zinc-200 */
}

/* Dark mode — message subject links */
html.dark-mode .messagelist td.subject span.subject a,
html.dark-mode .messagelist td.subject a {
  color: #e4e4e7 !important;   /* zinc-200 */
}

/* ── § C. LISTING HOVER — replace bright teal #37beff ──────────────────
 *  Elastic: .listing li>a:not(.disabled):hover {color:#fff; bg:#37beff}
 *  Replace with zinc hover glow.
 * ──────────────────────────────────────────────────────────────────────── */
.listing li > a:not(.disabled):hover {
  background-color: #f4f4f5 !important;   /* zinc-100 */
  color: #09090b !important;
}
html.dark-mode .listing li > a:not(.disabled):hover {
  background-color: #27272a !important;   /* zinc-800 */
  color: #fafafa !important;
}

/* Selected sub-list background: replace dark teal #21292c */
.listing li.selected ul {
  background-color: #e4e4e7 !important;   /* zinc-200 */
}
html.dark-mode .listing li.selected ul {
  background-color: #27272a !important;   /* zinc-800 */
}

/* ── § D. SPECIAL BUTTONS — bottom utility bar ─────────────────────────
 *  Elastic: .special-buttons {background-color:#2f3a3f} (teal)
 *  This element is absolute-positioned inside #taskmenu (transparent)
 *  which sits on #layout-menu (zinc-950). Make it transparent to blend.
 * ──────────────────────────────────────────────────────────────────────── */
.special-buttons {
  background: transparent !important;
  background-color: transparent !important;
}
.special-buttons a,
.special-buttons a:not(:focus) {
  background: transparent !important;
  background-color: transparent !important;
}

/* ── § E. CUSTOM FILE LABEL — upload button ─────────────────────────────
 *  Bootstrap: .custom-file-label {color:#495057} (bootstrap near-teal)
 *  Replace with zinc-700.
 * ──────────────────────────────────────────────────────────────────────── */
.custom-file-label {
  color: #3f3f46 !important;   /* zinc-700 */
}
html.dark-mode .custom-file-label {
  color: #a1a1aa !important;   /* zinc-400 */
}

/* ── § F. SEARCHBAR LINKS — .searchbar a {color:#2c363a} ────────────────
 *  Elastic sets all anchors inside .searchbar to dark teal.
 *  Affects: reset, unread-filter, options, search icon buttons.
 *  Note: .searchbar a.selected is already overridden in § 3 above.
 * ──────────────────────────────────────────────────────────────────────── */
.searchbar a,
.searchbar a.button {
  color: #71717a !important;   /* zinc-500 */
}
.searchbar a:hover,
.searchbar a.button:hover {
  color: #09090b !important;
}
html.dark-mode .searchbar a,
html.dark-mode .searchbar a.button {
  color: #a1a1aa !important;   /* zinc-400 */
}
html.dark-mode .searchbar a:hover,
html.dark-mode .searchbar a.button:hover {
  color: #fafafa !important;
}

/* ── § G. ICON BUTTONS — a.button.icon {color:#2c363a} ─────────────────
 *  Elastic sets ALL icon-buttons to dark teal in light mode (#2c363a)
 *  and teal-light in dark mode (#c5d1d3). Affects: search reset, search
 *  options, nav arrows, proplist dropdowns, any a.button.icon globally.
 * ──────────────────────────────────────────────────────────────────────── */
a.button.icon {
  color: #71717a !important;   /* zinc-500 */
}
a.button.icon:not(.disabled):focus,
.header a.button.icon:not(.disabled):hover {
  background-color: #f4f4f5 !important;   /* zinc-100 */
}
html.dark-mode a.button.icon {
  color: #71717a !important;   /* zinc-500 */
}
html.dark-mode a.button.icon:not(.disabled):focus,
html.dark-mode .header a.button.icon:not(.disabled):hover {
  background-color: #27272a !important;   /* zinc-800 */
}

/* ── § H. PAGENAV LINKS — .pagenav a {color:#2c363a} ───────────────────
 *  Pagination bar prev/next/first/last page buttons.
 * ──────────────────────────────────────────────────────────────────────── */
.pagenav a {
  color: #71717a !important;   /* zinc-500 */
}
.pagenav a:hover {
  color: #09090b !important;
}
html.dark-mode .pagenav a {
  color: #71717a !important;
}
html.dark-mode .pagenav a:hover {
  color: #fafafa !important;
}

/* ── § I. PROPLIST DROPDOWN — .proplist li.with-sublist>a.dropdown ──────
 *  In-form dropdown triggers (e.g. search filter type selectors).
 * ──────────────────────────────────────────────────────────────────────── */
.proplist li.with-sublist > a.dropdown {
  color: #71717a !important;
}
.proplist li.with-sublist > a.dropdown:hover {
  color: #09090b !important;
}
html.dark-mode .proplist li.with-sublist > a.dropdown {
  color: #a1a1aa !important;
}
html.dark-mode .proplist li.with-sublist > a.dropdown:hover {
  color: #fafafa !important;
}

/* ── § J. INPUT-GROUP-TEXT — form label boxes ───────────────────────────
 *  Bootstrap input-group-text gets Elastic's #2c363a text + #f1f3f4 bg
 *  in light; #c5d1d3 text + #374549 bg in dark (both teal!).
 * ──────────────────────────────────────────────────────────────────────── */
.input-group-text {
  color: #3f3f46 !important;         /* zinc-700 */
  background-color: #f4f4f5 !important;  /* zinc-100 */
  border-color: #e4e4e7 !important;  /* zinc-200 */
}
html.dark-mode .input-group-text {
  color: #a1a1aa !important;         /* zinc-400 */
  background-color: #27272a !important;  /* zinc-800 */
  border-color: #3f3f46 !important;  /* zinc-700 */
}
/* Input focus inside input-group: replace bright teal #37beff */
.input-group-text input:focus {
  border-color: rgba(9,9,11,0.25) !important;
  box-shadow: none !important;
}
html.dark-mode .input-group-text input:focus {
  border-color: rgba(250,250,250,0.25) !important;
  box-shadow: none !important;
}

/* ── § K. DARK-MODE MENU HOVER — background #374549 (teal) ─────────────
 *  Elastic: dark-mode .menu a:hover, .dropbutton:hover → bg #374549
 *  (dark teal). Replace with zinc-800.
 * ──────────────────────────────────────────────────────────────────────── */
html.dark-mode .menu a:not(.disabled):hover,
html.dark-mode .menu.toolbar .dropbutton:not(.disabled):hover {
  background-color: #27272a !important;   /* zinc-800 */
}

/* ── § L. DARK-MODE BORDERS — border-color #4d6066 (teal) ──────────────
 *  Elastic dark-mode panel borders use #4d6066 (rgb 77,96,102 — teal).
 *  Replace with subtle zinc-700 border.
 * ──────────────────────────────────────────────────────────────────────── */
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout > div {
  border-color: #3f3f46 !important;   /* zinc-700 */
}
html.dark-mode .searchbar,
html.dark-mode .header {
  border-color: #3f3f46 !important;
}

/* ── § M-0. COMPOSE EDITOR TOOLBAR — teal bg/color fixes ────────────────
 *  Elastic light: .editor-toolbar .mce-i-html { color:#222f3e } (dark navy)
 *  Elastic dark:  .editor-toolbar { background:#374549; border:#7c949c }
 *                 .editor-toolbar .mce-i-html:hover { bg:#586e75 }
 *  Replace with zinc palette.
 * ──────────────────────────────────────────────────────────────────────── */
.html-editor .editor-toolbar .mce-i-html,
.editor-toolbar .mce-i-html {
  color: #71717a !important;   /* zinc-500 */
}
.html-editor .editor-toolbar .mce-i-html:hover,
.editor-toolbar .mce-i-html:focus {
  background-color: #f4f4f5 !important;   /* zinc-100 */
  border-color: #e4e4e7 !important;
}
html.dark-mode .html-editor .editor-toolbar,
html.dark-mode .editor-toolbar {
  background-color: #27272a !important;   /* zinc-800 */
  border-color: #3f3f46 !important;       /* zinc-700 */
}
html.dark-mode .html-editor .editor-toolbar .mce-i-html,
html.dark-mode .editor-toolbar .mce-i-html {
  color: #a1a1aa !important;   /* zinc-400 */
}
html.dark-mode .html-editor .editor-toolbar .mce-i-html:hover,
html.dark-mode .editor-toolbar .mce-i-html:focus {
  background-color: #3f3f46 !important;   /* zinc-700 */
  border-color: transparent !important;
}

/* ── § M. LISTING-INFO + PLACEHOLDER + HINT — dark mode #8ba3a7 ─────────
 *  Elastic combined rule: .hint, dark-mode .listing-info, dark-mode
 *  ::placeholder, dark-mode .listing span.secondary → color:#8ba3a7 (teal)
 *  Replace all with zinc palette.
 * ──────────────────────────────────────────────────────────────────────── */
html.dark-mode .listing-info {
  color: #71717a !important;   /* zinc-500 */
  font-weight: 500 !important;
}
/* .hint is set globally (no dark-mode prefix) to #8ba3a7 in Elastic */
.hint {
  color: #71717a !important;   /* zinc-500 */
}
html.dark-mode .hint,
html.dark-mode .formcontent .hint {
  color: #71717a !important;
}
/* listing span.secondary (secondary text like folder counts) */
html.dark-mode .listing span.secondary {
  color: #52525b !important;   /* zinc-600 */
}
html.dark-mode ::placeholder,
html.dark-mode ::-webkit-input-placeholder {
  color: #52525b !important;   /* zinc-600 */
  opacity: 1 !important;
}

/* ── § N. JQUERY UI DIALOG TITLE + OVERLAY ──────────────────────────────
 *  Elastic: .ui-dialog-title { color:#2c363a } (teal, light mode)
 *           dark-mode .ui-dialog-title { color:#c5d1d3 } (teal-light)
 *           .ui-widget-overlay { background:rgba(44,54,58,.5) } (teal bg)
 *           .ui-dialog-titlebar-close { color:#2c363a } (teal)
 *  Our .ui-dialog-titlebar{color:#09090b} only affects the parent, not
 *  the span which has its own explicit rule from Elastic.
 * ──────────────────────────────────────────────────────────────────────── */
.ui-dialog-title {
  color: #09090b !important;   /* zinc-950 */
}
html.dark-mode .ui-dialog-title {
  color: #e4e4e7 !important;   /* zinc-200 */
}
.ui-dialog-titlebar-close {
  color: #71717a !important;   /* zinc-500 */
}
html.dark-mode .ui-dialog-titlebar-close {
  color: #a1a1aa !important;   /* zinc-400 */
}
/* Modal backdrop — replace teal rgba(44,54,58,.5) with neutral black */
.ui-widget-overlay {
  background-color: rgba(0, 0, 0, 0.45) !important;
  opacity: 1 !important;
}

/* ── § O. LOGIN PAGE TABLE + INPUT TEAL FIX ─────────────────────────────
 *  Elastic: html.dark-mode .table { color:#c5d1d3 }         (teal-gray)
 *           html.dark-mode .form-control { color:#c5d1d3 }  (teal-gray)
 *  Bootstrap: .table { color:#212529 }                      (near-black, light mode)
 *  Both bleed into the login form's inner <table> and <input> elements.
 *  We scope overrides to body.task-login .bs-login-form to be surgical.
 * ──────────────────────────────────────────────────────────────────────── */
/* Light mode: Bootstrap #212529 on TABLE — override to zinc-950 */
body.task-login .bs-login-form table,
body.task-login .bs-login-form tbody,
body.task-login .bs-login-form tr,
body.task-login .bs-login-form td,
body.task-login .bs-login-form label {
  color: #09090b !important;   /* zinc-950 */
}
/* Dark mode: Elastic #c5d1d3 on TABLE — override to zinc-200 */
html.dark-mode body.task-login .bs-login-form table,
html.dark-mode body.task-login .bs-login-form tbody,
html.dark-mode body.task-login .bs-login-form tr,
html.dark-mode body.task-login .bs-login-form td,
html.dark-mode body.task-login .bs-login-form label {
  color: #e4e4e7 !important;   /* zinc-200 */
}
/* Dark mode: Elastic #c5d1d3 / #e2e7e9 on INPUT.form-control — zinc-50 */
html.dark-mode body.task-login .bs-login-form input,
html.dark-mode body.task-login .bs-login-form input.form-control {
  color: #fafafa !important;   /* zinc-50 */
  background-color: #27272a !important;  /* zinc-800 */
  border-color: #3f3f46 !important;      /* zinc-700 */
}
/* Ensure the surrounding .table class on Elastic side doesn't override */
html.dark-mode body.task-login table.table {
  color: #e4e4e7 !important;   /* zinc-200 */
  background-color: transparent !important;
}