/* ═══ DARK MODE ═══ */
body.dark{
  --ink:#E8EAEF;--ink2:#D0D4E0;--ink3:#B0B8CC;
  --slate:#8890A8;--muted:#5A6280;
  --border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.14);
  --bg:#0F1117;--surface:#181C28;
  --gold:#D4A843;--gold2:#E8C96A;--gold-bg:rgba(212,168,67,.1);--gold-dim:rgba(212,168,67,.12);
  --emerald:#0EBF7E;--em-bg:rgba(14,191,126,.1);
  --ruby:#E04545;--ru-bg:rgba(224,69,69,.1);
  --azure:#3B7FF5;--az-bg:rgba(59,127,245,.1);
  --amber:#E08C1A;--am-bg:rgba(224,140,26,.1);
  --violet:#9155F5;--vi-bg:rgba(145,85,245,.1);
  --sky:#1EB4F5;--sk-bg:rgba(30,180,245,.1);
  --shadow:0 2px 16px rgba(0,0,0,.4);--shadow-lg:0 8px 40px rgba(0,0,0,.6);
  --sh:0 1px 12px rgba(0,0,0,.3);--sh-md:0 4px 24px rgba(0,0,0,.5);
}
body.dark .landing-nav.scrolled{background:rgba(15,17,23,.95)}
/* Landing nav dark fix */
body.dark .landing-nav .nav-links a{color:rgba(255,255,255,.65)}
body.dark .landing-nav .btn-ghost{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.25)}
body.dark .landing-nav .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
body.dark .landing-nav.scrolled .btn-ghost{color:var(--ink2);border-color:var(--border)}
/* General dark mode fixes for text on dark backgrounds */
body.dark .form-label{color:var(--ink2)}
body.dark .form-input::placeholder{color:var(--muted)}
body.dark .form-select option{background:var(--surface);color:var(--ink)}
body.dark .modal-title{color:var(--ink)}
body.dark .view-title{color:var(--ink)}
body.dark .view-sub{color:var(--muted)}
body.dark .card-title{color:var(--ink)}
body.dark .section-title{color:var(--ink)}
body.dark .section-sub{color:var(--muted)}
body.dark .kpi-label{color:var(--muted)}
body.dark .kpi-val{color:var(--ink)}
body.dark .data-table td{color:var(--ink)}
body.dark .vendor-card{background:var(--surface);border-color:var(--border)}
body.dark .vc-name{color:var(--ink)}
body.dark .bcc-panel{background:var(--surface)}
body.dark .bcc-section{background:var(--surface);border-color:var(--border)}
body.dark .settings-section{background:var(--surface);border-color:var(--border)}
body.dark .settings-section-head{background:var(--bg);color:var(--ink2)}
body.dark .settings-label{color:var(--ink)}
body.dark .settings-sub{color:var(--muted)}
body.dark .settings-row{border-color:var(--border)}
body.dark .user-row{border-color:var(--border)}
body.dark .user-row.header{background:var(--bg)}
body.dark .user-row:hover{background:var(--bg)}
body.dark .user-name{color:var(--ink)}
body.dark .user-email{color:var(--muted)}
body.dark .danger-zone{background:rgba(214,59,59,.08);border-color:rgba(214,59,59,.2)}
body.dark .phase-task{background:var(--bg);border-color:var(--border);color:var(--slate)}
body.dark .milestone-item{background:var(--surface);border-color:var(--border)}
body.dark .ms-title{color:var(--ink)}
body.dark .ms-sub{color:var(--muted)}
body.dark .gantt-wrap{background:var(--surface)}
body.dark .gantt-row{border-color:var(--border)}
body.dark .gantt-row:hover{background:var(--bg)}
body.dark .gantt-header{background:var(--bg)}
body.dark .gantt-label-name{color:var(--ink)}
body.dark .funnel-label{color:var(--ink)}
body.dark .print-modal{background:var(--surface)}
body.dark .print-section-title{color:var(--slate)}
body.dark .print-table th{background:var(--bg)}
body.dark .bcc-mini-wrap{opacity:.95}
body.dark .search-section-head{background:var(--bg)}
body.dark .sr-name{color:var(--ink)}
body.dark .sr-meta{color:var(--muted)}
body.dark .app-topbar{background:var(--surface);border-color:var(--border)}
body.dark .sidebar{background:var(--bg);border-color:var(--border)}
body.dark .sidebar-collapser{border-top-color:var(--border)}
body.dark #admin-hamburger{color:var(--muted)}
body.dark #admin-hamburger:hover{background:var(--surface);color:var(--ink)}
body.dark .card{background:var(--surface);border-color:var(--border)}
body.dark .form-input,body.dark .form-select,body.dark .form-textarea{background-color:var(--surface);border-color:var(--border);color:var(--ink)}
body.dark .data-table th{background:var(--bg)}
body.dark .data-table tbody tr:hover{background:var(--bg)}
body.dark .budget-row.header-row{background:var(--bg)}
body.dark .kanban-col{background:var(--bg)}
body.dark .task-card{background:var(--surface);border-color:var(--border)}
body.dark .modal{background:var(--surface)}
body.dark .role-tab{color:var(--muted)}
body.dark .role-tab.active{background:var(--bg);color:var(--ink)}
body.dark .role-tabs{background:var(--bg)}
body.dark .tab-bar{background:var(--bg);border-color:var(--border)}
body.dark .tab-btn.active{background:var(--surface)}
body.dark .login-card{background:var(--surface)}
body.dark .topbar-user{background:var(--bg);border-color:var(--border)}
body.dark .meta-pill{background:var(--bg);border-color:var(--border)}
body.dark .event-card{background:var(--surface);border-color:var(--border)}
body.dark .event-card-footer{background:var(--bg);border-color:var(--border)}
body.dark .vendor-card{background:var(--surface);border-color:var(--border)}
body.dark .member-card{background:var(--surface);border-color:var(--border)}
body.dark .prog-track{background:var(--bg);border-color:var(--border)}
body.dark .team-alloc-card{background:var(--surface);border-color:var(--border)}
body.dark .tac-amount{background:var(--bg)}
body.dark .approval-item{background:var(--surface);border-color:var(--border)}
body.dark .activity-table th{background:var(--bg)}
body.dark .activity-table tbody tr:hover{background:var(--bg)}
body.dark .chart-card{background:var(--surface);border-color:var(--border)}
body.dark .state-flow{background:var(--bg);border-color:var(--border)}
body.dark #bcc-unallocated-pill{background:var(--gold-bg)!important}
body.dark .bcc-mini{border:1px solid rgba(255,255,255,.06)}
body.dark input[type=color]{background:var(--surface)}
body.dark .todo-item{background:var(--surface);border-color:var(--border)}

/* ── Dark mode: elements that use var(--ink)/var(--ink2) as background ──
   In light mode --ink is near-black so it works as a dark bg with white text.
   In dark mode --ink flips to light (#E8EAEF) which breaks these elements. */

/* Bridge status sub-banner — dark mode */
body.dark .bridge-status-bar{background:#131720;border-bottom-color:rgba(255,255,255,.06);color:rgba(255,255,255,.7)}
body.dark .bridge-label{color:rgba(255,255,255,.3)!important}
body.dark .bridge-pill.ok{background:rgba(16,160,106,.15);color:#34D399;border-color:rgba(16,160,106,.25)}
body.dark .bridge-pill.warn{background:rgba(217,119,6,.15);color:#FCD34D;border-color:rgba(217,119,6,.25)}
body.dark .bridge-pill.err{background:rgba(214,59,59,.15);color:#F87171;border-color:rgba(214,59,59,.25)}

/* Primary action button — use gold accent in dark mode instead of var(--ink) */
body.dark .btn-primary{background:var(--gold);color:#0B0F1A}
body.dark .btn-primary:hover{background:var(--gold2);color:#0B0F1A}

/* BCC mini widget header card */
body.dark .bcc-mini{background:var(--surface)}
body.dark .bcc-banner{background:var(--surface)}

/* Team BCC header gradient (linear-gradient ink→ink2 becomes light in dark mode) */
body.dark .team-bcc-header{background:linear-gradient(135deg,#1A1F2E,#242A3D)}

/* Live toast notification */
body.dark .live-toast{background:var(--surface)}

/* WhatsApp right panel and input area */
body.dark .wa-right{background:var(--surface);border-left-color:var(--border)}
body.dark .wa-input-wrap{background:var(--surface);border-top-color:var(--border)}

/* Toast (global notification bar) stays dark in both themes — no override needed
   since var(--ink) is dark in light mode and #E8EAEF in dark would look wrong.
   Explicitly lock it to a dark surface: */
body.dark .toast{background:#1A1F2E}

/* Topbar logo mark */
body.dark .topbar-logo .tl-mark{background:var(--gold-bg);border:1px solid var(--gold-dim)}

/* Theme toggle button */
.theme-toggle{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--bg);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:all .2s;flex-shrink:0}
.theme-toggle:hover{border-color:var(--gold);background:var(--gold-bg)}
/* ─── Landing & Login: intentionally dark surfaces ─────────────────────────
   These elements use background:var(--ink) to create dark panels with white
   text. In dark mode --ink inverts to near-white (#E8EAEF), breaking them.
   Pin them to the absolute dark value so they stay dark in both themes.
   --ink-always-dark is resolved below; we use a hardcoded fallback so this
   works even if the variable is not declared. */
body.dark .login-screen{background:#0B0F1A}
body.dark .login-btn{background:var(--gold);color:#0B0F1A;font-weight:700}
body.dark .login-btn:hover{background:var(--gold2);color:#0B0F1A;transform:translateY(-1px)}
body.dark .login-logo .mark{background:#0B0F1A}
body.dark .nav-logo-mark{background:#0B0F1A}
body.dark .hero{background:#0B0F1A}
body.dark .hero-h1{color:#fff}
body.dark .landing-footer{background:#0B0F1A}
/* Login card in dark mode: slightly lighter than screen for layering */
body.dark .login-card{background:#181C28;border:1px solid rgba(255,255,255,.08)}
body.dark .login-logo h2{color:var(--ink)}
body.dark .role-tabs{background:rgba(255,255,255,.06)}
body.dark .role-tab.active{background:rgba(255,255,255,.1);color:var(--ink)}
body.dark .form-input{background:#1C2235;border-color:rgba(255,255,255,.12);color:var(--ink)}
body.dark .form-input:focus{border-color:var(--gold)}

/* ── PATCH: Missing dark mode rules ─────────────────────────────────────── */

/* Members page event selector — invisible text in dark mode */
body.dark .members-event-select,
body.dark select.event-filter-select,
body.dark #member-event-filter {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}

/* Help panel header banner strip */
body.dark .help-header,
body.dark .help-panel-header,
body.dark #help-panel .help-header,
body.dark [class*="help-header"] {
  background: #1A1F2E;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
body.dark .help-title,
body.dark #help-panel h2,
body.dark #help-panel .title {
  color: var(--ink);
}
body.dark .help-subtitle,
body.dark #help-panel .subtitle,
body.dark #help-panel p.sub {
  color: var(--muted);
}
body.dark .help-close,
body.dark #help-panel .close-btn {
  color: var(--ink2);
  background: transparent;
}

/* Role Config page — Save button and page elements */
body.dark .role-config-save,
body.dark #save-changes-btn,
body.dark .rc-save-btn,
body.dark [id*="save"][class*="btn"],
body.dark .page-actions .btn-primary {
  background: var(--gold) !important;
  color: #0B0F1A !important;
  border-color: var(--gold) !important;
}
body.dark .role-config-save:hover,
body.dark #save-changes-btn:hover {
  background: var(--gold2) !important;
}

/* Role config page wrapper */
body.dark .role-config-page,
body.dark [class*="role-config"] {
  background: var(--bg);
  color: var(--ink);
}
body.dark .rc-section,
body.dark .role-config-section {
  background: var(--surface);
  border-color: var(--border);
}

/* Generic: any <select> used as event/filter picker anywhere */
body.dark select {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
}
body.dark select option {
  background: var(--surface);
  color: var(--ink);
}

/* Payment schedule table in BCC */
body.dark .payment-schedule-table th { background: var(--bg); color: var(--ink2); }
body.dark .payment-schedule-table td { color: var(--ink); border-color: var(--border); }
body.dark .payment-row-paid { background: var(--em-bg); }
body.dark .payment-row-overdue { background: var(--ru-bg); }

/* ── Team event switcher select — text must be visible regardless of theme ── */
#team-event-select {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--border);
}
body.dark #team-event-select {
  color: var(--ink) !important;
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
body.dark #team-event-select option {
  background: var(--surface);
  color: var(--ink);
}

/* ── Analytics event filter dropdown ── */
body.dark #analytics-event-filter {
  color: var(--ink) !important;
  background: var(--surface) !important;
}

/* ── BCC event switcher ── */
body.dark #bcc-event-switcher {
  color: var(--ink) !important;
  background: var(--surface) !important;
}

/* ── Catch-all: any select without the form-select class ── */
body.dark select:not(.form-select) {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
}

/* ── Landing portal cards — admin card uses var(--ink) as bg which flips to light in dark mode ── */
body.dark .role-card.admin-card {
  background: #1A1F2E;
  border-color: rgba(255,255,255,.12);
}
body.dark .role-card.admin-card .role-h,
body.dark .role-card.admin-card .role-p,
body.dark .role-card.admin-card .role-list li {
  color: #fff;
}
body.dark .role-card.team-card {
  background: linear-gradient(145deg, var(--surface) 0%, rgba(59,127,245,.07) 100%);
  border-color: rgba(59,127,245,.18);
}

/* ── Form selects — dark mode chevron ── */
body.dark .form-select,
body.dark select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}