/* Sales Hunter — "Light & Gold" design system (from Stitch project 14950997417508609027).
   Loaded LAST so it re-skins every module. Tokens mirror the Stitch Tailwind config. */

:root {
  --sh-primary: #855300;
  --sh-primary-container: #f59e0b;
  --sh-on-primary: #ffffff;
  --sh-on-primary-container: #613b00;
  --sh-secondary: #904d00;
  --sh-tertiary: #565e74;
  --sh-surface: #f8f9ff;
  --sh-surface-lowest: #ffffff;
  --sh-surface-low: #eff4ff;
  --sh-surface-container: #e5eeff;
  --sh-surface-high: #dce9ff;
  --sh-surface-highest: #d3e4fe;
  --sh-on-surface: #0b1c30;
  --sh-on-surface-variant: #534434;
  --sh-outline: #867461;
  --sh-outline-variant: #d8c3ad;
  --sh-error: #ba1a1a;
  --sh-error-container: #ffdad6;
  --sh-ok: #067647;
  --sh-ok-bg: #ecfdf3;
  --sh-shadow: 0 1px 8px rgba(11, 28, 48, .05);
  --sh-shadow-lg: 0 8px 28px rgba(11, 28, 48, .10);
  --sh-font: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* legacy aliases so un-migrated modules inherit the palette */
  --bg: var(--sh-surface);
  --surface: var(--sh-surface-lowest);
  --surface-solid: var(--sh-surface-low);
  --border: var(--sh-surface-container);
  --border-subtle: var(--sh-surface-container);
  --text: var(--sh-on-surface);
  --text-on-dark: var(--sh-on-surface);
  --text-muted: var(--sh-on-surface-variant);
  --text-muted-dark: var(--sh-on-surface-variant);
  --text-dim: var(--sh-outline);
  --accent: var(--sh-primary-container);
  --accent-glow: rgba(245, 158, 11, .2);
  --gold: var(--sh-primary-container);
  --nav-line: var(--sh-surface-container);
}

/* ── Base ─────────────────────────────────────────────── */
body { font-family: var(--sh-font); background: var(--sh-surface); color: var(--sh-on-surface); -webkit-font-smoothing: antialiased; }
#dotsBg { display: none !important; }
::selection { background: var(--sh-primary-container); color: var(--sh-on-primary-container); }
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal;
  direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; user-select: none;
}
.material-symbols-outlined.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ── Sidebar ──────────────────────────────────────────── */
.sidebar {
  width: 272px; background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow);
  position: sticky; top: 0; height: 100vh; min-height: 0; overflow: hidden; z-index: 50;
}
.sidebar-brand { padding: 24px 24px 12px; border-bottom: none; }
.brand-mark { width: 40px; height: 40px; border-radius: 8px; background: var(--sh-primary-container); color: var(--sh-on-primary-container); font-size: 16px; font-weight: 800; box-shadow: 0 1px 4px rgba(133, 83, 0, .25); }
.brand-title { color: var(--sh-on-surface); font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1; }
.brand-sub { color: var(--sh-on-surface-variant); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-top: 5px; }
#portalBuildTag { display: none; }
.nav-scroll { padding: 8px 16px 16px; overflow-y: auto; flex: 1; scrollbar-width: thin; }
.nav-sep { margin: 18px 0 4px; border-top: none; padding-top: 0; }
.nav-sep:first-child, .nav-scroll > .nav-sep:first-child { margin-top: 4px; }
.nav-sep-lbl { color: var(--sh-on-surface-variant); font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 0 8px; text-transform: uppercase; opacity: .85; }
.nav-item {
  width: calc(100% - 0px); margin: 2px 0; padding: 8px 10px; border-radius: 8px; gap: 10px;
  color: var(--sh-on-surface-variant); font-family: var(--sh-font); font-size: 12px; font-weight: 600; letter-spacing: .02em; background: transparent; text-align: left;
}
.nav-item:hover { background: var(--sh-surface-container); color: var(--sh-on-surface); }
.nav-item.active { background: var(--sh-primary-container); color: var(--sh-on-primary-container); font-weight: 700; box-shadow: 0 1px 3px rgba(133, 83, 0, .2); }
.nav-ico { width: 20px; height: 20px; background: transparent !important; border-radius: 0; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; }
.nav-ico .material-symbols-outlined { font-size: 20px; }
.nav-item.active .nav-ico { background: transparent !important; }
.nav-group { margin: 2px 0 4px; }
.nav-chevron { color: var(--sh-outline); }
.nav-group.has-active .nav-parent { color: var(--sh-on-surface); }
.nav-group.has-active .nav-parent:hover { background: var(--sh-surface-container); }
.nav-sub { color: var(--sh-on-surface-variant); font-family: var(--sh-font); font-size: 12px; font-weight: 500; padding: 6px 12px 6px 34px; margin-left: 0; width: 100%; }
.nav-sub::before { background: var(--sh-outline-variant); left: 18px; }
.nav-sub:hover { background: var(--sh-surface-container); color: var(--sh-on-surface); }
.nav-sub.active { background: var(--sh-surface-high); color: var(--sh-on-primary-container); font-weight: 700; }
.nav-sub.active::before { background: var(--sh-primary-container); box-shadow: none; }
.nav-badge { background: var(--sh-surface-high); color: var(--sh-on-surface); border-radius: 4px; font-size: 11px; padding: 1px 6px; }
.nav-item.active .nav-badge { background: rgba(97, 59, 0, .15); color: var(--sh-on-primary-container); }
.sidebar-footer { padding: 16px 24px 20px; border-top: none; background: var(--sh-surface-lowest); }
.user-pill { border: none; background: var(--sh-surface-low); border-radius: 12px; padding: 12px; }
.user-pill #sidebarWorkspaceLabel { color: var(--sh-on-surface-variant) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .04em; }
.user-pill #sidebarUser { color: var(--sh-on-surface) !important; font-weight: 600; }
.user-pill #sidebarOrg { color: var(--sh-on-surface-variant) !important; }
.sidebar-footer .btn-ghost { background: transparent !important; color: var(--sh-error) !important; border: none !important; font-weight: 700; }
.sidebar-footer .btn-ghost:hover { background: var(--sh-error-container) !important; }
.sh-tenant { margin: 4px 24px 8px; background: var(--sh-surface-low); border-radius: 8px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sh-tenant small { display: block; font-size: 11px; font-weight: 500; color: var(--sh-on-surface-variant); letter-spacing: .04em; text-transform: uppercase; }
.sh-tenant b { display: block; font-size: 12px; font-weight: 700; color: var(--sh-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Main + topbar ────────────────────────────────────── */
.portal-main { padding: 0 32px 40px; background: var(--sh-surface); }
.portal-main > .topbar {
  position: sticky; top: 0; z-index: 40; margin: 0 -32px 24px; padding: 0 32px; min-height: 64px; border: none; border-radius: 0;
  background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow);
}
.biz-label { color: var(--sh-on-surface-variant); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.topbar-meta { font-size: 11px; font-weight: 600; color: var(--sh-on-surface-variant); }
.topbar-meta > span:not(.rt-dot) { background: var(--sh-surface-low); padding: 5px 10px; border-radius: 8px; }
.rt-dot { background: var(--sh-primary-container) !important; box-shadow: 0 0 0 3px rgba(245, 158, 11, .2) !important; }
.sec { padding-top: 0; }
.sec-hdr { margin-bottom: 24px; }
.sec-title { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 38px; color: var(--sh-on-surface); }
.sec-sub { color: var(--sh-on-surface-variant); font-size: 14px; line-height: 20px; }
.ops-hero-main { background: var(--sh-surface-lowest); color: var(--sh-on-surface); border: none; border-radius: 12px; box-shadow: var(--sh-shadow); }
.ops-title { color: var(--sh-on-surface); }
.ops-eyebrow { color: var(--sh-primary); }
.ops-copy { color: var(--sh-on-surface-variant); }
.ops-card { background: var(--sh-surface-lowest); border: none; border-radius: 12px; box-shadow: var(--sh-shadow); color: var(--sh-on-surface); }
.ops-queue { border-bottom-color: var(--sh-surface-low); }

/* ── Surfaces ─────────────────────────────────────────── */
.card { background: var(--sh-surface-lowest); border: none; border-radius: 12px; box-shadow: var(--sh-shadow); color: var(--sh-on-surface); }
.panel-title { color: var(--sh-on-surface); font-weight: 700; }
.metric-card::after { background: var(--sh-surface-low); border-radius: 0 12px 0 100%; width: 72px; height: 72px; right: 0; top: 0; }
.metric-top { color: var(--sh-on-surface-variant); font-size: 11px; font-weight: 700; }
.metric-icon { background: var(--sh-surface-high); color: var(--sh-primary); border-radius: 8px; }
.metric-value { font-size: 36px; font-weight: 800; letter-spacing: -.025em; color: var(--sh-on-surface); }
.metric-note { color: var(--sh-on-surface-variant); }

/* ── Buttons ──────────────────────────────────────────── */
.btn { font-family: var(--sh-font); border-radius: 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.btn-primary { background: var(--sh-primary-container); color: var(--sh-on-primary); box-shadow: 0 1px 2px rgba(133, 83, 0, .25); }
.btn-primary:hover { background: var(--sh-primary); }
.btn-secondary { background: var(--sh-surface-low); color: var(--sh-on-surface); }
.btn-secondary:hover { background: var(--sh-surface-container); }
.btn-danger { background: var(--sh-error-container); color: var(--sh-error); }
.btn-danger:hover { background: #ffc7c1; }
.btn-ghost { background: var(--sh-surface-lowest); color: var(--sh-on-surface); border: none; box-shadow: var(--sh-shadow); }
.btn-ghost:hover { background: var(--sh-surface-low); color: var(--sh-on-surface); }
.ops-actions .btn[style], .btn-primary[style*="F5B700"] { background: var(--sh-primary-container) !important; color: var(--sh-on-primary) !important; border-color: transparent !important; }
.ops-actions .btn-ghost[style] { background: var(--sh-surface-lowest) !important; color: var(--sh-on-surface) !important; }

/* ── Tables ───────────────────────────────────────────── */
.dt th { background: var(--sh-surface-low); color: var(--sh-on-surface-variant); font-size: 11px; font-weight: 700; letter-spacing: .04em; border-bottom: none; }
.dt td { color: var(--sh-on-surface); border-bottom: 1px solid var(--sh-surface-low); font-size: 13px; }
.dt tr:hover td { background: var(--sh-surface-low); }

/* ── Badges ───────────────────────────────────────────── */
.badge { border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.bg { background: var(--sh-ok-bg); color: var(--sh-ok); }
.br { background: var(--sh-error-container); color: #93000a; }
.by { background: #ffddb8; color: var(--sh-on-primary-container); }
.bb { background: var(--sh-surface-high); color: var(--sh-tertiary); }
.bgray { background: var(--sh-surface-container); color: var(--sh-on-surface-variant); }
.borg { background: #ffdcc3; color: #663500; }
.pw { background: var(--sh-surface-container); }

/* ── Forms ────────────────────────────────────────────── */
.fi, .portal-main input[type=text], .portal-main input[type=email], .portal-main input[type=search], .portal-main input[type=number],
.portal-main input[type=tel], .portal-main input[type=url], .portal-main input[type=date], .portal-main input[type=password],
.portal-main select, .portal-main textarea, .modal-box input, .modal-box select, .modal-box textarea {
  font-family: var(--sh-font); background: var(--sh-surface-low); border: 1px solid transparent; border-radius: 8px; color: var(--sh-on-surface);
}
.fi:focus, .portal-main input:focus, .portal-main select:focus, .portal-main textarea:focus, .modal-box input:focus, .modal-box select:focus, .modal-box textarea:focus {
  outline: none; background: var(--sh-surface-lowest); border-color: var(--sh-primary-container); box-shadow: 0 0 0 2px rgba(245, 158, 11, .3);
}

/* ── Modals ───────────────────────────────────────────── */
.modal-bg { background: rgba(11, 28, 48, .45); backdrop-filter: blur(2px); }
.modal-box { background: var(--sh-surface-lowest); border-radius: 16px; box-shadow: var(--sh-shadow-lg); color: var(--sh-on-surface); }
.apm-avatar { background: var(--sh-primary-container); color: var(--sh-on-primary-container); }
.apm-stat, .apm-row { background: var(--sh-surface-low); }

/* ── Login ────────────────────────────────────────────── */
#loginScreen { background: var(--sh-surface); min-height: 100vh; }
#loginScreen .login-brand { color: var(--sh-on-surface); }
#loginScreen .login-brand .mark { background: var(--sh-primary-container); color: var(--sh-on-primary-container); border-radius: 12px; box-shadow: 0 4px 14px rgba(245, 158, 11, .35); }
#loginScreen .login-brand h1 { color: var(--sh-on-surface); font-weight: 800; letter-spacing: -.02em; }
#loginScreen .login-brand p { color: var(--sh-on-surface-variant); }
#loginScreen .login-card { box-shadow: var(--sh-shadow-lg); border-radius: 16px; }
#loginScreen .login-card h2 { color: var(--sh-on-surface); font-weight: 700; }
#loginScreen .login-card input { background: var(--sh-surface-low); border: 1px solid transparent; border-radius: 8px; }
#loginScreen .login-card input:focus { background: #fff; outline: none; border-color: var(--sh-primary-container); box-shadow: 0 0 0 2px rgba(245, 158, 11, .3); }
#loginScreen .btn-full { background: var(--sh-primary-container); color: #fff; border-radius: 8px; font-family: var(--sh-font); font-weight: 700; }
#loginScreen .login-foot { color: var(--sh-on-surface-variant); }
#loginScreen .login-foot a { color: var(--sh-primary); }

/* ── Toast / load bar ─────────────────────────────────── */
#loadBar { background: var(--sh-primary-container) !important; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 860px) {
  .sidebar { position: relative; width: 100%; height: auto; max-height: none; }
  .portal-main { padding: 0 16px 28px; }
  .portal-main > .topbar { margin: 0 -16px 16px; padding: 10px 16px; }
}

/* ── Legacy component remaps (dark/indigo → Light & Gold) ── */
.biz-tab { background: var(--sh-surface-low); color: var(--sh-on-surface-variant); border: none; border-radius: 8px; font-family: var(--sh-font); }
.biz-tab:hover { background: var(--sh-surface-container); color: var(--sh-on-surface); }
.biz-tab.active, .biz-tab.on { background: var(--sh-surface-lowest); color: var(--sh-on-surface); box-shadow: var(--sh-shadow); }
.reg-tab-active { color: var(--sh-primary) !important; border-bottom-color: var(--sh-primary-container) !important; }
.reg-live-banner { background: var(--sh-surface-lowest) !important; border: none !important; box-shadow: var(--sh-shadow); color: var(--sh-on-surface) !important; }
.reg-live-banner * { color: inherit; }
.reg-app-btn { background: var(--sh-surface-low) !important; border: none !important; color: var(--sh-on-surface) !important; }
.reg-app-btn:hover { background: var(--sh-surface-container) !important; color: var(--sh-primary) !important; }
.reg-app-btn-primary { background: var(--sh-primary-container) !important; color: #fff !important; }
.reg-pill-active { background: #ffddb8 !important; border-color: var(--sh-primary-container) !important; color: var(--sh-on-primary-container) !important; box-shadow: none !important; }
.reg-pill-active .reg-pill-count { background: var(--sh-primary-container) !important; color: #fff !important; }
.lp-card-sel { border-color: var(--sh-primary-container) !important; background: #fff8ee !important; box-shadow: 0 0 0 1px var(--sh-primary-container) inset !important; }
.sh-biz-sel { border-color: var(--sh-primary-container); color: var(--sh-on-primary-container); background-color: #fff3df; }
.sh-sel:focus, .sh-srch-in:focus, .reg-search-in:focus { border-color: var(--sh-primary-container) !important; }
.sh-dz-ico { background: rgba(245, 158, 11, .14); color: var(--sh-primary); }
.sh-ibtn-e:hover { border-color: var(--sh-primary-container); color: var(--sh-primary); }
input[type=checkbox], input[type=radio] { accent-color: var(--sh-primary-container) !important; }
.toggle-wrap input:checked + .toggle-track { background: var(--sh-primary-container); }
.reg-avatar, .reg-card-avatar { background: var(--sh-primary-container); color: var(--sh-on-primary-container); }