/* ================================================================
   ACCOUNT SHELL — #47 light/dark theme + collapsible left nav
   Added T-796 (owner directive). Mirrors the Demo UI (beta-status)
   theme pattern (html.light, sun/moon toggle, localStorage upper_beta_theme).
   Left-nav collapse: expanded by default; user can minimize to give the
   main stage more room. State persisted in upper_nav_collapsed.
   ================================================================ */

/* ---------- COLLAPSE / EXPAND LEFT NAV (desktop) ---------- */
.nav-collapse-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--dark-border); background: transparent;
  color: var(--dark-muted); cursor: pointer; flex-shrink: 0;
  transition: color .15s ease, background .15s ease, transform .2s ease;
}
.nav-collapse-btn:hover { color: var(--dark-text); background: rgba(255,255,255,0.05); }
.nav-collapse-btn svg { transition: transform .25s ease; }
/* when collapsed, flip the chevron to point right (expand affordance) */
#view-app.sidebar-collapsed .nav-collapse-btn svg { transform: rotate(180deg); }

/* Smooth width animation on the sidebar for collapse */
.app-shell .sidebar {
  transition: width .24s cubic-bezier(.4,0,.2,1),
              opacity .18s ease, padding .24s ease;
  overflow: hidden;
}
/* Desktop collapsed state: sidebar shrinks to 0, main stage takes the room */
@media (min-width: 861px) {
  #view-app.sidebar-collapsed .sidebar {
    width: 0 !important;
    min-width: 0 !important;
    border-right-width: 0 !important;
    opacity: 0;
    pointer-events: none;
  }
}
/* The collapse button is desktop-only; on mobile the ☰ hamburger already
   handles the off-canvas sidebar, so hide the collapse chevron there. */
@media (max-width: 860px) {
  .nav-collapse-btn { display: none; }
}

/* ================================================================
   LIGHT THEME for the account shell — html.light overrides.
   Uses existing --light-* tokens from style.css. Dark stays default.
   ================================================================ */
html.light .app-shell { background: var(--light-bg); color: var(--light-text); }
html.light .app-shell .app-main { background: var(--light-bg); }

/* Sidebar */
html.light .app-shell .sidebar { background: var(--light-surface); border-right-color: var(--light-border); }
html.light .sb-head { border-bottom-color: var(--light-border); }
html.light .sb-section-label { color: #6b7280; }
html.light .sb-home { color: #5b627a; }
html.light .sb-home:hover { color: var(--light-text); background: rgba(0,0,0,0.05); }
html.light .sb-home-divider { background: var(--light-border); }
html.light .sb-nav-item { color: #4b5169; }
html.light .sb-nav-item:hover { color: var(--light-text); background: rgba(0,0,0,0.04); }
html.light .sb-nav-item.active { color: #6e56ff; background: rgba(110,86,255,0.10); }
html.light .sb-user-name { color: var(--light-text); }
html.light .sb-user-mail { color: #7b8296; }
html.light .sb-foot { border-top-color: var(--light-border); }
html.light .sb-signout { color: #5b627a; }
html.light .sb-signout:hover { color: #dc2626; background: rgba(220,38,38,0.06); }
html.light .sb-add { background: #6e56ff; color: #fff; }
html.light .req-item { color: var(--light-text); }
html.light .req-item-client { color: #7b8296; }

/* Topbar */
html.light .app-topbar { background: var(--light-surface); border-bottom-color: var(--light-border); }
html.light .mobile-menu-btn { color: var(--light-text); }
html.light .nav-collapse-btn { border-color: var(--light-border); color: #5b627a; }
html.light .nav-collapse-btn:hover { color: var(--light-text); background: rgba(0,0,0,0.05); }
html.light .topbar-gear { color: #5b627a; }
html.light .topbar-gear:hover { color: var(--light-text); }
html.light .topbar-new-req { background: #6e56ff; color: #fff; }

/* Main stage: banners, cards, funnel, candidate rows, channel cards */
html.light .primer-banner { background: var(--light-surface); border-color: var(--light-border); color: var(--light-text); }
html.light .primer-sub { color: #7b8296; }
html.light .card,
html.light .panel,
html.light .cand-row-wrap,
html.light .channel-card,
html.light .settings-pane,
html.light .set-card { background: var(--light-surface); border-color: var(--light-border); color: var(--light-text); }
html.light .cand-row { border-bottom-color: var(--light-border); }
html.light .cand-name { color: var(--light-text); }
html.light .cand-title, html.light .cand-detail-label { color: #7b8296; }
html.light .cand-ava { background: rgba(110,86,255,0.12); color: #6e56ff; }
html.light .cand-detail { background: #f7f8fc; border-top-color: var(--light-border); }
html.light .cand-mono, html.light .cand-link { color: #4b5169; }
html.light .funnel-stage { background: #eef1f8 !important; border-color: var(--light-border) !important; color: var(--light-text) !important; }
html.light .funnel-stage .funnel-label { color: #7b8296 !important; }
html.light .funnel-stage.is-active { border-color: #6e56ff !important; }
html.light .sect-title, html.light .section-title, html.light h2, html.light h3 { color: var(--light-text); }
html.light .set-label { color: #4b5169; }
html.light .set-input, html.light input[type=text], html.light input[type=email], html.light input[type=tel], html.light textarea, html.light select {
  background: #fff; color: var(--light-text); border-color: var(--light-border);
}
html.light .status-text, html.light .muted { color: #7b8296; }

/* ---------- THEME TOGGLE BUTTON (sun/moon), mirrors demo ---------- */
.theme-toggle {
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--dark-border); background: transparent;
  color: var(--dark-muted); cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s ease, background .15s ease;
}
.theme-toggle:hover { color: var(--dark-text); background: rgba(255,255,255,0.05); }
.theme-toggle .moon { display: none; }
.theme-toggle .sun { display: inline; }
html.light .theme-toggle .sun { display: none; }
html.light .theme-toggle .moon { display: inline; }
html.light .theme-toggle { border-color: var(--light-border); color: #5b627a; background: #fff; }
html.light .theme-toggle:hover { color: var(--light-text); background: rgba(0,0,0,0.04); }

/* ================================================================
   T-819: nav-opener breathe hint + Candidates page (List/Kanban)
   ================================================================ */

/* Opener icon breathes for ~3s on load (added/removed by app.js). Respects reduced-motion. */
@keyframes navBreathe {
  0%,100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(110,86,255,0.0); }
  50%     { transform: scale(1.12); box-shadow: 0 0 0 5px rgba(110,86,255,0.18); }
}
.nav-collapse-btn.nav-breathe { animation: navBreathe 1s ease-in-out 3; color: var(--dark-text); border-color: #6e56ff; }
@media (prefers-reduced-motion: reduce) { .nav-collapse-btn.nav-breathe { animation: none; } }

/* ---- Candidates page: header + view toggle ---- */
#panel-candidates { padding: var(--space-lg); }
.cand-page-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.cand-page-title { font-size:20px; font-weight:700; color:var(--dark-text); margin:0; }
html.light .cand-page-title { color: var(--light-text); }
.cand-view-toggle { display:inline-flex; gap:4px; background:var(--dark-surface); border:1px solid var(--dark-border); border-radius:10px; padding:4px; }
html.light .cand-view-toggle { background:#eef1f8; border-color:var(--light-border); }
.cand-view-btn { display:inline-flex; align-items:center; gap:6px; font:600 13px Inter,system-ui,sans-serif; color:var(--dark-muted); background:transparent; border:none; padding:7px 14px; border-radius:7px; cursor:pointer; transition:all .15s ease; }
.cand-view-btn:hover { color:var(--dark-text); }
.cand-view-btn.is-active { background:#6e56ff; color:#fff; }
html.light .cand-view-btn { color:#5b627a; }
html.light .cand-view-btn:hover { color:var(--light-text); }
html.light .cand-view-btn.is-active { background:#6e56ff; color:#fff; }

/* view panes */
.cand-view-pane { display:none; }
.cand-view-pane.is-active { display:block; }

/* empty state */
.cand-empty-state { text-align:center; padding:56px 24px; color:var(--dark-muted); }
.cand-empty-state h3 { color:var(--dark-text); font-size:16px; margin:10px 0 6px; }
.cand-empty-icon { font-size:34px; color:#6e56ff; }
html.light .cand-empty-state { color:#7b8296; }
html.light .cand-empty-state h3 { color:var(--light-text); }

/* ---- Kanban board ---- */
.kanban-board { display:flex; gap:12px; overflow-x:auto; padding-bottom:12px; align-items:flex-start; }
.kanban-col { flex:0 0 200px; min-width:200px; background:var(--dark-surface); border:1px solid var(--dark-border); border-radius:12px; display:flex; flex-direction:column; max-height:calc(100svh - 220px); }
html.light .kanban-col { background:var(--light-surface); border-color:var(--light-border); }
.kanban-col-head { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--dark-border); position:sticky; top:0; }
html.light .kanban-col-head { border-bottom-color:var(--light-border); }
.kanban-col-name { font:700 11px Inter,system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--dark-muted); }
html.light .kanban-col-name { color:#5b627a; }
.kanban-col-count { font:700 12px Inter,system-ui,sans-serif; color:#fff; background:#6e56ff; min-width:22px; text-align:center; border-radius:11px; padding:1px 7px; }
.kanban-col-body { padding:10px; display:flex; flex-direction:column; gap:9px; overflow-y:auto; }
.kanban-card { background:#12172a; border:1px solid #2a3150; border-radius:9px; padding:11px; cursor:default; transition:border-color .15s ease, transform .1s ease; }
.kanban-card:hover { border-color:#6e56ff; transform:translateY(-1px); }
html.light .kanban-card { background:#fff; border-color:var(--light-border); }
.kanban-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.kanban-ava { width:26px; height:26px; border-radius:50%; background:rgba(110,86,255,0.16); color:#a493ff; font:700 11px Inter,system-ui,sans-serif; display:inline-flex; align-items:center; justify-content:center; }
html.light .kanban-ava { background:rgba(110,86,255,0.12); color:#6e56ff; }
.kanban-score { font:700 14px Inter,system-ui,sans-serif; color:#34d399; }
.kanban-name { font:600 13px Inter,system-ui,sans-serif; color:var(--dark-text); }
html.light .kanban-name { color:var(--light-text); }
.kanban-title { font:400 11.5px Inter,system-ui,sans-serif; color:var(--dark-muted); margin-top:2px; }
.kanban-chan { font:400 11px Inter,system-ui,sans-serif; color:#8893b3; margin-top:5px; }
.kanban-empty { color:var(--dark-muted); text-align:center; padding:14px 0; font-size:12px; }

/* T-819: light-mode fix for the active requisition tile in the left nav (was staying dark). */
html.light .app-shell .req-item { background: transparent; color: var(--light-text); }
html.light .app-shell .req-item:hover { background: rgba(0,0,0,0.04); }
html.light .app-shell .req-item.active { background: #eef1f8; border-color: #6e56ff; }
html.light .app-shell .req-item-role { color: var(--light-text); }

/* ================================================================
   T-819: Wave Results req tabs (mirrors beta-status .reqtabs)
   ================================================================ */
.reqtabs { display:flex; gap:6px; margin:0 0 18px; flex-wrap:wrap; }
.reqtab { cursor:pointer; text-align:center; font:inherit; border:1px solid var(--dark-border); background:var(--dark-surface);
  color:var(--dark-muted); border-radius:10px 10px 0 0; padding:10px 18px; font-size:13px; font-weight:600; transition:all .15s ease; }
.reqtab:hover { color:var(--dark-text); background:#121838; }
.reqtab.is-active { background:#1b2a63; color:#fff; border-color:#8f7bff; }
.reqtab.is-empty { border-style:dashed; border-color:rgba(52,211,153,.5); background:rgba(52,211,153,.10); }
.reqtab.is-empty .reqtab-free { color:#6ee7b7 !important; }
.reqtab.is-empty:hover { background:rgba(52,211,153,.16); }
/* light */
html.light .reqtab { background:#eef2f7; border-color:#c8d0da; color:#5b6883; }
html.light .reqtab:hover { color:var(--light-text); background:#e3e9f2; }
html.light .reqtab.is-active { background:#dbe8fb; color:#151b28; border-color:#1d6fe0; }
html.light .reqtab.is-empty { border-color:rgba(15,155,128,.5); background:rgba(15,155,128,.08); }
html.light .reqtab.is-empty .reqtab-free { color:#0f9b80 !important; }

/* ================================================================
   T-843: Searches model — nav pins/sub-labels, Searches list page,
   workspace breadcrumb. Light + dark.
   ================================================================ */

/* --- nav sub-labels (Pinned / Recent) --- */
.req-sub-label { display:flex; align-items:center; gap:5px; font:700 10px Inter,system-ui,sans-serif; letter-spacing:.07em; text-transform:uppercase; color:var(--dark-muted); margin:10px 8px 4px; }
html.light .req-sub-label { color:#8a90a8; }

/* --- pin button on nav req items --- */
.req-item { position:relative; }
.req-item-pin { position:absolute; top:8px; right:8px; width:24px; height:24px; border:none; background:transparent; color:var(--dark-muted); cursor:pointer; border-radius:6px; opacity:0; transition:opacity .12s ease, color .12s ease, background .12s ease; display:inline-flex; align-items:center; justify-content:center; }
.req-item:hover .req-item-pin { opacity:1; }
.req-item-pin.is-pinned { opacity:1; color:#6e56ff; }
.req-item-pin:hover { color:#6e56ff; background:rgba(110,86,255,0.12); }
html.light .req-item-pin { color:#8a90a8; }
html.light .req-item-pin.is-pinned { color:#6e56ff; }

/* --- workspace breadcrumb --- */
.ws-breadcrumb { display:flex; align-items:center; gap:8px; margin:0 0 16px; font-size:13px; }
.ws-crumb-link { background:none; border:none; color:#6e56ff; cursor:pointer; font:inherit; font-weight:600; padding:0; }
.ws-crumb-link:hover { text-decoration:underline; }
.ws-crumb-sep { color:var(--dark-muted); }
.ws-crumb-current { color:var(--dark-text); font-weight:600; }
html.light .ws-crumb-sep { color:#8a90a8; }
html.light .ws-crumb-current { color:var(--light-text); }

/* --- Searches list page --- */
#panel-searches { padding:var(--space-lg); }
.searches-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.searches-title { font-size:20px; font-weight:700; color:var(--dark-text); margin:0; }
html.light .searches-title { color:var(--light-text); }
.searches-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.searches-filter { display:inline-flex; gap:4px; background:var(--dark-surface); border:1px solid var(--dark-border); border-radius:10px; padding:4px; }
html.light .searches-filter { background:#eef1f8; border-color:var(--light-border); }
.searches-chip { font:600 12.5px Inter,system-ui,sans-serif; color:var(--dark-muted); background:transparent; border:none; padding:6px 13px; border-radius:7px; cursor:pointer; transition:all .12s ease; }
.searches-chip:hover { color:var(--dark-text); }
.searches-chip.is-active { background:#6e56ff; color:#fff; }
html.light .searches-chip { color:#5b627a; }
html.light .searches-chip.is-active { background:#6e56ff; color:#fff; }
.searches-search { background:var(--dark-surface); border:1px solid var(--dark-border); border-radius:9px; padding:8px 13px; color:var(--dark-text); font:400 13px Inter,system-ui,sans-serif; min-width:220px; }
.searches-search::placeholder { color:var(--dark-muted); }
html.light .searches-search { background:#fff; border-color:var(--light-border); color:var(--light-text); }

.searches-table-wrap { border:1px solid var(--dark-border); border-radius:12px; overflow:hidden; background:var(--dark-surface); }
html.light .searches-table-wrap { border-color:var(--light-border); background:var(--light-surface); }
.searches-table { width:100%; border-collapse:collapse; font-size:13px; }
.searches-table thead th { text-align:left; font:700 10.5px Inter,system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--dark-muted); padding:12px 14px; border-bottom:1px solid var(--dark-border); }
html.light .searches-table thead th { color:#8a90a8; border-bottom-color:var(--light-border); }
.searches-table td { padding:13px 14px; border-bottom:1px solid var(--dark-border); color:var(--dark-text); vertical-align:middle; }
.searches-table tr:last-child td { border-bottom:none; }
html.light .searches-table td { color:var(--light-text); border-bottom-color:var(--light-border); }
.searches-row:hover { background:rgba(110,86,255,0.06); }
.searches-row.is-archived { opacity:.6; }
.searches-table .col-role { font-weight:600; cursor:pointer; }
.searches-table .col-role:hover { color:#6e56ff; }
.searches-table .col-pin { width:40px; }
.srch-pin { width:26px; height:26px; border:none; background:transparent; color:var(--dark-muted); cursor:pointer; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; }
.srch-pin.is-pinned { color:#6e56ff; }
.srch-pin:hover { color:#6e56ff; background:rgba(110,86,255,0.12); }
.srch-status { display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:12px; }
.srch-status .sdot { width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block; }
.srch-status.complete { color:#22c55e; }
.srch-status.sourcing { color:#38bdf8; }
.srch-status.archived { color:#8a90a8; }
.srch-status.cancelled { color:#f59e0b; }
.col-actions { text-align:right; white-space:nowrap; }
.srch-act { font:600 12px Inter,system-ui,sans-serif; border:1px solid var(--dark-border); background:transparent; color:var(--dark-text); padding:6px 12px; border-radius:7px; cursor:pointer; margin-left:6px; transition:all .12s ease; }
.srch-act:hover { border-color:#6e56ff; color:#6e56ff; }
.srch-open { background:#6e56ff; color:#fff; border-color:#6e56ff; }
.srch-open:hover { background:#5b46e0; color:#fff; }
html.light .srch-act { border-color:var(--light-border); color:var(--light-text); }
.searches-empty { text-align:center; padding:56px 24px; color:var(--dark-muted); }
.searches-empty h3 { color:var(--dark-text); font-size:16px; margin:10px 0 6px; }
.searches-empty-icon { font-size:34px; color:#6e56ff; }
html.light .searches-empty { color:#8a90a8; }
html.light .searches-empty h3 { color:var(--light-text); }

/* Opus D1 (XRAY): bump light-theme status-pill label contrast to >=4.5:1 (was 3.16:1). */
html.light .srch-status.archived { color:#5c6270; }   /* darker slate, ~5.4:1 on white */
html.light .req-item-status.archived { color:#5c6270; }

/* T-873 JD-upload form (ported from wave console) */
  /* ── T-134 JD UPLOAD — Madison-Ave elegant, matches indigo/teal palette ── */
  .jd-upload{max-width:640px;margin:0 auto 4px;width:100%;}
  .jd-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    padding:26px 20px;border:1.5px dashed #cdd3ea;border-radius:14px;background:#fbfcff;
    cursor:pointer;text-align:center;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;}
  .jd-drop:hover,.jd-drop:focus-visible{border-color:#6e56ff;background:#f6f4ff;outline:none;box-shadow:0 0 0 4px rgba(110,86,255,.10);}
  .jd-drop.jd-dragover{border-color:#00c9a0;background:#f0fdf9;}
  .jd-ic{color:#6e56ff;margin-bottom:2px;}
  .jd-drop-title{font-weight:700;font-size:15px;color:#1a1f3d;}
  .jd-drop-sub{font-size:12.5px;color:#8a90b0;}
  .jd-paste-link{display:block;margin:8px auto 0;background:none;border:0;color:#6e56ff;
    font-size:12.5px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
  .jd-paste-wrap{margin-top:10px;}
  /* T-639 (owner): the paste box was rendering BLACK (inherited a dark form-textarea style). Force the
     same friendly LIGHT surface as the rest of the wave form inputs: soft white-lilac fill, dark text,
     lilac placeholder. Explicit background + color so it can never inherit a dark/near-black surface. */
  .jd-paste{width:100%;box-sizing:border-box;border:1px solid #cdd3ea!important;border-radius:10px;
    padding:10px 12px;font-size:13px;font-family:inherit;resize:vertical;color:#1a1f3d!important;
    background:#f7f8fc!important;-webkit-text-fill-color:#1a1f3d;}
  .jd-paste::placeholder{color:#8a90ad;opacity:1;}
  .jd-paste:focus{outline:none;border-color:#6e56ff!important;background:#fff!important;box-shadow:0 0 0 3px rgba(110,86,255,.10);}
  .jd-paste-go{margin-top:8px;padding:9px 16px;border:0;border-radius:9px;background:#6e56ff;
    color:#fff;font-weight:700;font-size:13px;cursor:pointer;}
  .jd-status{margin-top:12px;font-size:13px;color:#4a5178;display:flex;align-items:center;
    justify-content:center;gap:8px;min-height:18px;}
  .jd-status.jd-err{color:#c0392b;}
  .jd-status.jd-ok{color:#0a9e78;}
  .jd-spin{width:14px;height:14px;border:2px solid #cdd3ea;border-top-color:#6e56ff;
    border-radius:50%;animation:jdspin .7s linear infinite;}
  @keyframes jdspin{to{transform:rotate(360deg);}}
  .jd-or{display:flex;align-items:center;text-align:center;color:#a2a8c6;font-size:12px;
    margin:18px 0 2px;}
  .jd-or::before,.jd-or::after{content:'';flex:1;height:1px;background:#e6e9f4;}
  .jd-or span{padding:0 12px;white-space:nowrap;}
  /* filled-field cascade highlight */
  .jd-filled{animation:jdFilled 1s ease;}
  @keyframes jdFilled{0%{background:#f0fdf9;}100%{background:transparent;}}
  /* role picker modal */
  .jd-picker[hidden]{display:none!important;} /* T-336/341: [hidden] must actually hide the JD role-picker modal (re-applied after Tab-10 redeploy) */
  .jd-picker{position:fixed;inset:0;z-index:100002;background:rgba(11,15,40,.55);
    display:flex;align-items:center;justify-content:center;padding:20px;}
  .jd-picker-card{background:#fff;border-radius:16px;max-width:460px;width:100%;
    padding:26px 22px;box-shadow:0 24px 60px rgba(11,15,40,.35);max-height:82vh;overflow-y:auto;}
  .jd-picker-title{font-size:19px;font-weight:800;color:#1a1f3d;margin-bottom:4px;}
  .jd-picker-sub{font-size:12.5px;color:#8a90b0;margin-bottom:16px;}
  .jd-picker-list{display:flex;flex-direction:column;gap:10px;}
  .jd-role{text-align:left;border:1px solid #e0e4f2;border-radius:12px;padding:13px 15px;
    background:#fbfcff;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .1s;width:100%;}
  .jd-role:hover{border-color:#6e56ff;box-shadow:0 4px 14px rgba(110,86,255,.14);transform:translateY(-1px);}
  .jd-role-title{font-weight:700;font-size:14.5px;color:#1a1f3d;}
  .jd-role-sub{font-size:12px;color:#8a90b0;margin-top:3px;}
  .jd-picker-cancel{margin-top:16px;width:100%;padding:10px;border:0;border-radius:9px;
    background:#eef0f7;color:#4a5178;font-weight:600;font-size:13px;cursor:pointer;}

/* ================================================================
   T-886 (video fixes): light/dark conflict — components that were
   dark-only now theme-aware in LIGHT mode. Fixes #2 (profile nav),
   #5 (billing readable), #6 (billing box blends). + child-account
   remove control (#4).
   ================================================================ */

/* --- #2 settings left sub-nav in light mode --- */
html.light .settings-nav { background: transparent; }
html.light .settings-nav-item { color: #5b627a; }
html.light .settings-nav-item:hover { color: var(--light-text); background: rgba(0,0,0,0.04); }
html.light .settings-nav-item.active { color: #6e56ff; background: rgba(110,86,255,0.10); }
html.light .settings-nav-item svg { color: currentColor; }

/* --- #5 + #6 billing "Early Access" card blends + readable in light --- */
html.light .early-access-card {
  background: var(--light-surface);
  border: 1px solid var(--light-border);
  color: var(--light-text);
  box-shadow: 0 1px 3px rgba(16,24,40,0.06);
}
html.light .early-access-card h3 { color: var(--light-text); }
html.light .early-access-card p  { color: #5b627a; }
html.light .ea-badge { background: rgba(110,86,255,0.12); color: #6e56ff; }
html.light .ea-perk  { color: #3a4056; }
/* keep the accent readable on both themes */
html.light .ea-perk::first-letter { color: #22a06b; }

/* --- settings section labels + headers in light --- */
html.light .settings-section-label { color: #8a90a8; }
html.light .settings-pane-header h2 { color: var(--light-text); }
html.light .settings-pane-header p  { color: #7b8296; }
html.light .settings-save-note { color: #8a90a8; }

/* --- #4 child-account REMOVE (decommission) control --- */
.team-member { position: relative; display:flex; align-items:center; gap:12px; }
.team-member-remove {
  margin-left: auto; width: 28px; height: 28px; border-radius: 7px;
  border: 1px solid var(--dark-border); background: transparent; color: var(--dark-muted);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s ease; flex-shrink: 0;
}
.team-member-remove:hover { color: #ef4444; border-color: #ef4444; background: rgba(239,68,68,0.10); }
/* owner row: never shows a remove control even if one is injected */
.team-member[data-owner="true"] .team-member-remove { display: none !important; }
html.light .team-member-remove { border-color: var(--light-border); color: #8a90a8; }
html.light .team-member-remove:hover { color: #ef4444; border-color: #ef4444; background: rgba(239,68,68,0.08); }
/* team member text legible in light */
html.light .team-member-name { color: var(--light-text); }
html.light .team-member-email { color: #7b8296; }
html.light .team-member-role { color: #5b627a; }
html.light .team-member-role.owner { color: #6e56ff; }

/* T-886 fix #6 (real culprit): the .settings-section WRAPPER was dark navy in light mode, making
   the billing card sit in a dark box that doesn't blend. In light mode the section is just a
   transparent container; the CARD inside carries the surface. Applies to all settings panes. */
html.light .settings-section { background: transparent; border-color: transparent; box-shadow: none; }
html.light .settings-section-label { color: #8a90a8; }

/* ================================================================
   T-891 (video #7,#8): centered empty-state hero + utility nav.
   ================================================================ */

/* Centered empty state (no search yet) */
#panel-empty { min-height: 60vh; display: none; }
#panel-empty.active { display: flex; align-items: center; justify-content: center; }
.empty-hero { text-align: center; max-width: 460px; padding: 40px 24px; }
.empty-hero-mark {
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(110,86,255,0.12); color: #6e56ff;
}
.empty-hero-title { font-size: 24px; font-weight: 800; color: var(--dark-text); margin: 0 0 22px; letter-spacing: -0.01em; }
html.light .empty-hero-title { color: var(--light-text); }
.empty-hero-cta {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 16px Inter, system-ui, sans-serif; color: #fff;
  background: linear-gradient(135deg, #6e56ff, #8b5cf6);
  border: none; border-radius: 12px; padding: 15px 34px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(110,86,255,0.35); transition: transform .12s ease, box-shadow .12s ease;
}
.empty-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(110,86,255,0.45); }
.empty-hero-cta .efc-star { font-size: 15px; }
.empty-hero-hint { margin: 18px 0 0; font-size: 14px; color: var(--dark-muted); }
html.light .empty-hero-hint { color: #7b8296; }

/* Utility nav (Candidates / Help&FAQ) below the Searches list */
.sb-nav-utility { margin-top: 8px; border-top: 1px solid var(--dark-border); padding-top: 8px; }
html.light .sb-nav-utility { border-top-color: var(--light-border); }

/* T-891 fix: the legacy #sb-nav is kept ONLY as switchTab hooks — it must be visually GONE.
   The [hidden] attribute was being overridden by .sb-nav's display rule; force it. */
#sb-nav[hidden] { display: none !important; }