/* InControl — Shared Design System */
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
  --navy: #0F172A; --navy-2: #1E293B;
  --blue: #3B82F6; --blue-light: #EFF6FF; --blue-mid: #BFDBFE;
  --red: #EF4444; --red-light: #FEF2F2;
  --orange: #F97316; --orange-light: #FFF7ED;
  --green: #22C55E; --green-light: #F0FDF4;
  --amber: #F59E0B; --amber-light: #FFFBEB;
  --purple: #8B5CF6; --purple-light: #F5F3FF;
  --teal: #14B8A6; --teal-light: #F0FDFA;
  --gray-50: #F8FAFC; --gray-100: #F1F5F9; --gray-200: #E2E8F0;
  --gray-300: #CBD5E1; --gray-400: #94A3B8; --gray-500: #64748B;
  --gray-600: #475569; --white: #ffffff;
  --sidebar-w: 256px;
  --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
  --shadow: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.14);
}

* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; max-width:100%; }
body { font-family:'Assistant',sans-serif; background:#EEF2FA; color:var(--navy); display:flex; height:100vh; overflow:hidden; direction:rtl; font-size:16px; }
.skip-link {
  position: fixed !important;
  inset-inline-start: 12px !important;
  top: 12px !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.skip-link:focus,
.skip-link:focus-visible {
  width: auto !important;
  height: auto !important;
  padding: 8px 16px !important;
  clip: auto !important;
  clip-path: none !important;
  background: var(--blue) !important;
  color: white !important;
  border-radius: 4px !important;
  z-index: 10000 !important;
}

/* ── SIDEBAR ── */
.sidebar { width:var(--sidebar-w); min-width:var(--sidebar-w); background: var(--white); border-left:1px solid var(--gray-200); display:flex; flex-direction:column; height:100vh; z-index:50; transition:right 0.28s cubic-bezier(0.4,0,0.2,1); flex-shrink:0; }
.sidebar-header { padding:18px 14px 14px; border-bottom:1px solid var(--gray-100); }
.brand { display:flex; align-items:center; gap:10px; margin-bottom:14px; text-decoration:none; }
.brand-mark { width:34px; height:34px; border-radius:10px; flex-shrink:0; object-fit:cover; }
.brand-name { font-size:17px; font-weight:800; color:var(--navy); letter-spacing:-0.2px; }
.brand-name span { color:var(--blue); }
.user-chip { display:flex; align-items:center; gap:9px; padding:8px 10px; background:var(--gray-50); border-radius:var(--radius-sm); border:1px solid var(--gray-100); }
.user-avatar { width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,#3B82F6,#1D4ED8); display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:13px; flex-shrink:0; }
.user-name { font-size:13px; font-weight:700; color:var(--navy); }
.user-role { font-size:11px; color:var(--gray-400); display:flex; align-items:center; gap:4px; margin-top:1px; }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0; }
.nav-section-label { font-size:10px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--gray-300); padding:14px 16px 5px; }
.nav-list { padding:0 8px; display:flex; flex-direction:column; gap:2px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; text-decoration:none; color:var(--gray-500); font-size:14px; font-weight:500; transition:all 0.15s ease; cursor:pointer; margin:1px 0; }
.nav-item:hover { background:var(--gray-50); color:var(--navy); }
.nav-item.active { background:#EFF6FF; color:#2563EB; font-weight:700; }
.nav-icon { font-size:19px; flex-shrink:0; color:var(--gray-300); transition:color 0.14s; }
.nav-item:hover .nav-icon { color:var(--gray-500); }
.nav-item.active .nav-icon { color:#3B82F6; }
.nav-label { flex:1; }
.nav-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; line-height:1.4; }
.badge-blue   { background:#DBEAFE; color:#1D4ED8; }
.badge-red    { background:#FEE2E2; color:#DC2626; }
.badge-orange { background:#FFEDD5; color:#C2410C; }
.nav-item.active .nav-badge { background:#BFDBFE; color:#1D4ED8; }
.sidebar-footer { margin-top:auto; padding:10px 8px; border-top:1px solid var(--gray-100); }

/* ── OVERLAY (mobile) ── */
.overlay { display:none; position:fixed; inset:0; background:rgba(15,23,42,0.4); z-index:40; }

/* ── MAIN ── */
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }

/* ── TOPBAR ── */
.topbar { background:rgba(255,255,255,0.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid rgba(0,0,0,0.05); height:62px; padding:0 22px; display:flex; align-items:center; gap:10px; flex-shrink:0; box-shadow:0 1px 16px rgba(0,0,0,0.06); }
.hamburger { display:none; width:36px; height:36px; border-radius:10px; background:transparent; border:none; cursor:pointer; align-items:center; justify-content:center; color:var(--gray-500); transition:background 0.14s; flex-shrink:0; }
.hamburger:hover { background:var(--gray-100); color:var(--navy); }
.search-wrap { flex:1; max-width:340px; position:relative; }
.search-input { width:100%; background:#EEF2FA; border:1.5px solid transparent; border-radius:20px; padding:8px 38px 8px 14px; font-size:14px; font-family:'Assistant',sans-serif; color:var(--navy); outline:none; transition:all 0.18s; }
.search-input:focus { border-color:var(--blue); background: var(--white); box-shadow:0 0 0 3px rgba(59,130,246,0.12); }
.search-input::placeholder { color:var(--gray-400); }
.search-icon { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--gray-400); font-size:18px; pointer-events:none; }
.topbar-spacer { flex:1; }
.topbar-right { display:flex; align-items:center; gap:4px; }
.icon-btn { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer; color:var(--gray-500); position:relative; transition:all 0.14s; }
.icon-btn:hover { background:var(--gray-100); color:var(--navy); }
.notif-dot { position:absolute; top:6px; right:6px; width:7px; height:7px; background:var(--red); border-radius:50%; border:2px solid white; animation:pulse-dot 2.5s infinite; }
@keyframes pulse-dot { 0%,100%{transform:scale(1)} 50%{transform:scale(1.4)} }
.topbar-divider { width:1px; height:22px; background:var(--gray-200); margin:0 4px; }
.topbar-user { display:flex; align-items:center; gap:8px; padding:5px 9px; border-radius:10px; cursor:pointer; transition:background 0.14s; }
.topbar-user:hover { background:var(--gray-100); }
.topbar-avatar { width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,#2563EB,#1D4ED8); display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:12px; }
.topbar-user-name { font-size:13px; font-weight:700; color:var(--navy); }
.topbar-user-role { font-size:11px; color:var(--gray-400); }

/* ── CONTENT ── */
.content { flex:1; overflow-y:auto; padding:22px 26px; scroll-behavior:smooth; }
.content::-webkit-scrollbar { width:4px; }
.content::-webkit-scrollbar-thumb { background:var(--gray-200); border-radius:4px; }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:var(--radius-sm); font-size:14px; font-weight:700; font-family:'Assistant',sans-serif; cursor:pointer; border:none; transition:all 0.15s; text-decoration:none; white-space:nowrap; line-height:1; }
.btn .material-symbols-outlined { font-size:16px; }
.btn-primary { background:var(--blue); color:white; }
.btn-primary:hover { background:#2563EB; box-shadow:0 3px 12px rgba(59,130,246,0.45); transform:translateY(-1px); }
.btn-dark { background:var(--navy); color:white; }
.btn-dark:hover { background:#1E293B; transform:translateY(-1px); box-shadow:0 3px 12px rgba(15,23,42,0.35); }
.btn-outline { background: var(--white); color:var(--navy); border:1.5px solid var(--gray-200); }
.btn-outline:hover { background:var(--gray-50); border-color:var(--gray-300); }
.btn-red { background:var(--red); color:white; }
.btn-red:hover { background:#DC2626; transform:translateY(-1px); }
.btn-green { background:var(--green); color:white; }
.btn-green:hover { background:#16A34A; }
.btn-ghost { background:transparent; color:var(--gray-500); border:1px solid var(--gray-200); }
.btn-ghost:hover { background:var(--gray-100); color:var(--navy); }
.btn-ghost-dark { background:rgba(255,255,255,0.08); color:#CBD5E1; border:1px solid rgba(255,255,255,0.14); }
.btn-ghost-dark:hover { background:rgba(255,255,255,0.15); }
.btn-sm { padding:6px 12px; font-size:12px; }

/* ── CARDS ── */
.card { background: var(--white); border-radius:var(--radius-lg); border:1px solid var(--gray-200); overflow:hidden; }
.card-header { display:flex; align-items:center; justify-content:space-between; padding:15px 20px; border-bottom:1px solid var(--gray-100); }
.card-title { font-size:14px; font-weight:700; color:var(--navy); display:flex; align-items:center; gap:8px; }
.card-title .material-symbols-outlined { font-size:18px; color:var(--gray-400); }
.card-action { font-size:12px; font-weight:700; color:var(--blue); text-decoration:none; display:flex; align-items:center; gap:2px; transition:gap 0.14s; }
.card-action:hover { gap:5px; }

/* ── TAGS ── */
.tag { display:inline-flex; align-items:center; font-size:11px; font-weight:700; padding:2px 8px; border-radius:5px; line-height:1.6; white-space:nowrap; }
.t-red    { background:var(--red-light);    color:#DC2626; }
.t-orange { background:var(--orange-light);  color:#EA580C; }
.t-blue   { background:var(--blue-light);    color:#2563EB; }
.t-gray   { background:var(--gray-100);      color:var(--gray-500); }
.t-green  { background:var(--green-light);   color:#16A34A; }
.t-amber  { background:var(--amber-light);   color:#D97706; }
.t-purple { background:var(--purple-light);  color:#7C3AED; }
.t-teal   { background:var(--teal-light);    color:#0F766E; }
.t-navy   { background:var(--navy); color:white; }

/* ── MODAL ── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(15,23,42,0.45); z-index:100; align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; animation:fadeIn 0.15s ease; }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{transform:translateY(12px);opacity:0} to{transform:translateY(0);opacity:1} }
.modal { background: var(--white); border-radius:var(--radius-xl); width:480px; max-width:calc(100vw - 32px); box-shadow:var(--shadow-lg); animation:slideUp 0.2s ease; overflow:hidden; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--gray-100); }
.modal-title { font-size:16px; font-weight:800; color:var(--navy); }
.modal-close { width:30px; height:30px; border-radius:7px; background:var(--gray-100); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--gray-500); transition:background 0.14s; }
.modal-close:hover { background:var(--gray-200); }
.modal-body { padding:22px; display:flex; flex-direction:column; gap:16px; }
.form-label { font-size:12px; font-weight:700; color:var(--gray-600); margin-bottom:6px; display:block; }
.form-input, .form-select, .form-textarea { width:100%; border:1.5px solid var(--gray-200); border-radius:var(--radius-sm); padding:10px 12px; font-size:14px; font-family:'Assistant',sans-serif; color:var(--navy); outline:none; transition:border-color 0.14s; background: var(--white); }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(59,130,246,0.1); }
.form-textarea { resize:none; height:80px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.modal-footer { padding:16px 22px; border-top:1px solid var(--gray-100); display:flex; gap:8px; }

/* ── TOAST ── */
.toast-wrap { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast { background:var(--navy); color:white; font-size:14px; font-weight:600; padding:11px 20px; border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,0.2); display:flex; align-items:center; gap:8px; animation:toastIn 0.2s ease,toastOut 0.2s ease 2.6s forwards; pointer-events:none; }
.toast.toast-success { background:#16A34A; }
.toast.toast-warn    { background:var(--amber); color:#1C1917; }
@keyframes toastIn  { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes toastOut { from{opacity:1} to{opacity:0} }

/* ── ANIMATIONS ── */
@keyframes fadeInUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ── PAGE HEADER ── */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.page-title-row { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.page-title { font-size:24px; font-weight:800; color:var(--navy); letter-spacing:-0.4px; }
.page-subtitle { font-size:13px; color:var(--gray-400); margin-top:2px; }
.page-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ── FORMS ── */
.form-group { display:flex; flex-direction:column; }
.form-group .form-label { margin-bottom:5px; }

/* ── MODAL (alt class names) ── */
.modal-box { background: var(--white); border-radius:var(--radius-xl); width:500px; max-width:calc(100vw - 32px); box-shadow:var(--shadow-lg); animation:slideUp 0.2s ease; overflow:hidden; }
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(15,23,42,0.45); z-index:100; align-items:center; justify-content:center; }


/* ── RESPONSIVE ── */
/* iOS Safari fix: 100vh includes address bar causing blank area */
html { height: -webkit-fill-available; }
body { min-height: -webkit-fill-available; }

/* ── DARK MODE ── */
html.dark-mode {
  color-scheme: dark;
  --ic-bg:#080D16;
  --ic-surface:#101827;
  --ic-surface-2:#162033;
  --ic-border:rgba(148,163,184,.18);
  --ic-border-soft:rgba(148,163,184,.10);
  --ic-ink:#E7EDF7;
  --ic-ink-soft:#A8B4C7;
  --ic-ink-muted:#78869A;
  --white: var(--ic-surface);
  --gray-50: #0B1220;
  --gray-100: #111A2B;
  --gray-200: rgba(148,163,184,.18);
  --gray-300: #536176;
  --gray-400: #78869A;
  --gray-500: #A8B4C7;
  --gray-600: #CDD6E5;
  --navy: #E7EDF7;
  --navy-2: #CDD6E5;
  --blue: #6EA8FF;
  --blue-light: rgba(96,165,250,.14);
  --blue-mid: rgba(147,197,253,.42);
  --red: #F87171;
  --red-light: rgba(248,113,113,.13);
  --orange: #FB923C;
  --orange-light: rgba(251,146,60,.13);
  --green: #4ADE80;
  --green-light: rgba(74,222,128,.13);
  --amber: #FBBF24;
  --amber-light: rgba(251,191,36,.13);
  --purple: #A78BFA;
  --purple-light: rgba(167,139,250,.14);
  --teal: #2DD4BF;
  --teal-light: rgba(45,212,191,.13);
}
html.dark-mode body { background: var(--ic-bg); color: var(--ic-ink-soft); }
html.dark-mode .main,
html.dark-mode .content { background: var(--ic-bg); }
html.dark-mode .sidebar,
html.dark-mode .topbar {
  background: var(--ic-surface);
  border-color: var(--ic-border-soft);
  box-shadow: none;
}
html.dark-mode .card,
html.dark-mode .kpi-card,
html.dark-mode .modal,
html.dark-mode .modal-box,
html.dark-mode .client-card,
html.dark-mode .event-card,
html.dark-mode .task-card {
  background: var(--ic-surface);
  border-color: var(--ic-border);
  color: var(--ic-ink-soft);
}
html.dark-mode .page-title,
html.dark-mode .card-title,
html.dark-mode .modal-title,
html.dark-mode .brand-name,
html.dark-mode .user-name,
html.dark-mode .topbar-user-name,
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3 {
  color: var(--ic-ink);
}
html.dark-mode .page-subtitle,
html.dark-mode .user-role,
html.dark-mode .topbar-user-role,
html.dark-mode .form-label {
  color: var(--ic-ink-soft);
}
html.dark-mode .search-wrap,
html.dark-mode .search-input,
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select,
html.dark-mode .form-input,
html.dark-mode .form-select,
html.dark-mode .form-textarea {
  background: #0D1422;
  color: var(--ic-ink);
  border-color: var(--ic-border);
  box-shadow: none;
}
html.dark-mode .search-input::placeholder,
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder { color: var(--ic-ink-muted); }
html.dark-mode .search-input:focus,
html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus,
html.dark-mode .form-input:focus,
html.dark-mode .form-select:focus,
html.dark-mode .form-textarea:focus {
  border-color: rgba(110,168,255,.58);
  box-shadow: 0 0 0 3px rgba(59,130,246,.14);
}
html.dark-mode .btn-outline,
html.dark-mode .btn-ghost,
html.dark-mode .btn-dark {
  background: rgba(17,26,43,.92);
  color: var(--ic-ink-soft);
  border-color: var(--ic-border);
  box-shadow: none;
}
html.dark-mode .btn-outline:hover,
html.dark-mode .btn-ghost:hover,
html.dark-mode .btn-dark:hover {
  background: var(--ic-surface-2);
  color: var(--ic-ink);
  border-color: rgba(147,197,253,.32);
}
html.dark-mode .btn-primary {
  background: #2F6FE4;
  color: #F8FBFF;
  box-shadow: none;
}
html.dark-mode .btn-primary:hover { background:#3B82F6; box-shadow:0 8px 20px rgba(37,99,235,.18); }
html.dark-mode .icon-btn:hover,
html.dark-mode .hamburger:hover,
html.dark-mode .nav-item:hover,
html.dark-mode .topbar-user:hover {
  background: rgba(148,163,184,.10);
  color: var(--ic-ink);
}
html.dark-mode .nav-item.active {
  background: rgba(96,165,250,.16);
  color: #D7E8FF;
}
html.dark-mode .modal-backdrop,
html.dark-mode .modal-overlay { background: rgba(3,7,18,.72); }
html.dark-mode .tag {
  background: rgba(148,163,184,.13);
  color: #CBD5E1;
}

@media (max-width:820px), (pointer:coarse) and (max-device-width:820px) {
  body { height: 100%; min-height: 100vh; min-height: -webkit-fill-available; overflow: auto; }
  .sidebar { position:fixed; right:0; top:0; transform:translateX(calc(var(--sidebar-w) + 10px)); box-shadow:var(--shadow-lg); }
  .sidebar.open { transform:translateX(0); }
  .overlay { display:block; opacity:0; pointer-events:none; transition:opacity 0.25s ease; }
  .overlay.visible { opacity:1; pointer-events:all; }
  .hamburger { display:flex; }
  .topbar-user-role { display:none; }
  .search-wrap { max-width:220px; }
  .content { padding:16px; overflow-y: auto; }
  .page-title { font-size:20px; }
  .main { overflow: auto; }
}

@media (max-width:480px), (pointer:coarse) and (max-device-width:480px) {
  .search-wrap { max-width:160px; }
  .topbar-divider { display:none; }
  .content { padding:12px; }
}

/* ── DARK MODE SAFETY NET ──────────────────────────────────────────────
   Surfaces adapt via var(--white)/var(--gray-*). These cover the remaining
   cases where a literal color stayed bright, or where a --navy-filled
   "active" chip flips to a light fill (its white text would vanish). */
html.dark-mode .pill.active,
html.dark-mode .chip.active,
html.dark-mode .filter-pill.active,
html.dark-mode .tab.active:not([style*="border"]) { color: var(--ic-bg); }
/* light hover / zebra rows → dark */
html.dark-mode .inv-table tbody tr:hover,
html.dark-mode .fin-table tr:hover td,
html.dark-mode tbody tr:hover { background: var(--ic-surface-2) !important; }
html.dark-mode .fin-table tr.overdue-row td { background: rgba(248,113,113,.10) !important; }
/* generic form fields that used literal light fills */
html.dark-mode input:not([type=checkbox]):not([type=radio]):not([type=range]),
html.dark-mode select,
html.dark-mode textarea {
  background: var(--ic-surface); color: var(--ic-ink-soft);
  border-color: var(--ic-border);
}
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder { color: var(--ic-ink-muted); }

/* ── DARK MODE: --navy-as-fill fixes ────────────────────────────────────
   --navy doubles as a DARK FILL (heroes, active chips, dark buttons). In dark
   mode --navy flips light → these turn white. Restore proper dark/accent fills
   centrally, so every page is consistent (no per-page patching). */

/* hero banners: navy gradient → dark brand gradient */
html.dark-mode .ap-hero { background: linear-gradient(135deg,#16223a,#0d1626) !important; }

/* active chips/pills/tabs + dark buttons → solid blue accent (clear "selected/primary") */
html.dark-mode .pill.active,
html.dark-mode .chip.active,
html.dark-mode .filter-pill.active,
html.dark-mode .filter-btn.active,
html.dark-mode .radio-tab.active,
html.dark-mode .wf-tab.active,
html.dark-mode .dept-chip.active,
html.dark-mode .view-toggle-btn.active,
html.dark-mode .btn-dark,
html.dark-mode .fab,
html.dark-mode .inbox-action-btn,
html.dark-mode .cost-total,
html.dark-mode .calendar-day-num.today,
html.dark-mode .tbl-btn:hover {
  background: #2563EB !important;
  color: #fff !important;
  border-color: #2563EB !important;
}
/* sidebar active item → subtle translucent accent */
html.dark-mode .nav-item.active {
  background: rgba(37,99,235,.16) !important;
  color: #93C5FD !important;
}
/* toasts + navy tag */
html.dark-mode .toast,
html.dark-mode .ev-toast { background:#16223a !important; color:#E7EDF7 !important; }
html.dark-mode .t-navy { background: rgba(110,168,255,.18) !important; color:#93C5FD !important; }

/* autopilot cards/totals used literal #fff gradients → dark surface */
html.dark-mode .ap-supplier,
html.dark-mode .ap-totals .t { background: var(--ic-surface) !important; border-color: var(--ic-border) !important; }

/* ── DARK MODE: inbox / mail preview panes + generic modals ── */
html.dark-mode .email-preview-col { background: var(--ic-bg) !important; }
html.dark-mode .email-list-col,
html.dark-mode .preview-topbar,
html.dark-mode .preview-meta { background: var(--ic-surface) !important; border-color: var(--ic-border) !important; }
html.dark-mode .preview-empty {
  background-image: radial-gradient(circle, var(--ic-border) 1px, transparent 1px) !important;
}
html.dark-mode .preview-back-btn { background: var(--ic-surface) !important; border-color: var(--ic-border) !important; }
/* any element whose inline/literal style left it white → force dark surface */
html.dark-mode [style*="background:white"],
html.dark-mode [style*="background: white"],
html.dark-mode [style*="background:#fff"],
html.dark-mode [style*="background: #fff"] { background: var(--ic-surface) !important; }