/* ============================================================================
   Tilfully theme layer — the locked design system, in BOTH themes.
   Loaded LAST so it retunes app.css. Every color comes from tokens.css (--t-*).
     - Night (default): deep pine->amber ground, glowing mint/gold contours.
     - Day: warm parchment ground, forest green + amber accents, sage/tan contours.
   The login (#loginView) is themed separately by auth.css and stays night-only.
   ========================================================================== */

/* ======================= SHARED (both themes) ============================ */

/* Serif display for page headers, section titles, and the wordmark */
.workspace-head h2,
.section-head > h3,
.focus-header h2,
.focus-header h3,
.trial-focus-header h2,
.trial-focus-header h3,
.profile-hero-copy h1,
.profile-hero-copy h2,
.brief-card > h3,
.brand h1,
.command-message-drawer h2 {
  font-family: var(--t-serif) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Brand mark + amber interactive primitives are constant across themes */
.brand .mark { background: var(--t-accent) !important; color: var(--t-accent-ink) !important; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--t-action); }

/* ======================= NIGHT (default) ================================= */

body.night-mode {
  --ink: var(--t-on-dark);
  --muted: var(--t-on-dark-soft);
  --line: rgba(245, 242, 236, 0.12);
  --soft: rgba(255, 255, 255, 0.04);
  --field: rgba(255, 255, 255, 0.055);
  --panel: rgba(255, 255, 255, 0.05);
  --gold: var(--t-accent);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  --notion-bg: #0b0c0e;
  --notion-panel: rgba(255, 255, 255, 0.05);
  --notion-hover: rgba(255, 255, 255, 0.08);
  --notion-line: rgba(245, 242, 236, 0.12);
  --notion-text: var(--t-on-dark);
  --notion-muted: var(--t-on-dark-soft);
}

body.night-mode {
  /* Josh 2026-07-11 (second pass): NO green anywhere in backgrounds — the pine
     radial is gone; only a whisper of amber remains. The pine->amber gradient
     lives ONLY on the dock ("the tab section"), which Josh explicitly keeps. */
  background:
    radial-gradient(110% 70% at 92% 112%, rgba(214, 154, 43, 0.10), transparent 55%),
    linear-gradient(180deg, var(--t-night-bg-hi), var(--t-night-bg-lo) 60%) !important;
  background-attachment: fixed;

  /* the legacy night surfaces were GREEN-TINTED charcoals (--pfv-panel #151a17,
     --pfv-line #2b342e, field #1b211d...) — that was "the green in the entire
     thing". Re-based to true neutral warm-gray at the token level. */
  --pfv-bg: #101113;
  --pfv-panel: #17181b;
  --pfv-panel-soft: #121316;
  --pfv-muted: #a6a7ab;
  --pfv-tertiary: #85868b;
  --pfv-line: #2c2d31;
  --field: #1c1d21;
  --pfv-focus: rgba(217, 154, 43, 0.30);   /* focus ring was green too — now amber */
}

/* text boxes: legacy app.css hardcodes green-dark input fills in dozens of
   component rules (#101511, #0f1411, #1b211d...) that no token override can
   reach. ONE global night rule ends "green in text boxes" everywhere.
   (Josh, 2026-07-11 — verified by sampling computed colors.) */
body.night-mode input:not([type="checkbox"]):not([type="radio"]),
body.night-mode select,
body.night-mode textarea {
  background-color: #1c1d21 !important;
  border-color: #2e2f34 !important;
  color: var(--t-on-dark) !important;
}

/* generic pills: app.css carries TWO legacy night pill styles (green #1a2822
   and navy #1d2439 — Josh's "green and blue in text boxes/screens"). Both
   retire to neutral charcoal (2026-07-11). */
body.night-mode .pill {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(245, 242, 236, 0.16) !important;
  color: rgba(245, 242, 236, 0.85) !important;
}
body.night-mode aside {
  /* the LOGIN's pine->amber gradient as a translucent wash (Josh 2026-07-11 rev 3) */
  background: linear-gradient(179deg,
    rgba(6, 37, 27, 0.34) 0%, rgba(11, 71, 40, 0.26) 26%, rgba(23, 117, 47, 0.16) 46%,
    rgba(138, 132, 44, 0.14) 62%, rgba(168, 106, 36, 0.18) 78%, rgba(219, 156, 44, 0.24) 100%) !important;
  border: 1px solid var(--t-glass-line) !important;   /* full border: the aside is a floating dock on desktop */
  -webkit-backdrop-filter: blur(18px) saturate(1.08); backdrop-filter: blur(18px) saturate(1.08);
}

body.night-mode .panel,
body.night-mode .kpi,
body.night-mode .profile-card,
body.night-mode .profile-glance-card,
body.night-mode .profile-launch-card,
body.night-mode .trial-ops-card,
body.night-mode .account-list-card,
body.night-mode .cold-lead-card,
body.night-mode .settings-section,
body.night-mode .gmail-card,
body.night-mode .rec,
body.night-mode .brief-card,
body.night-mode .rank-row,
body.night-mode .compact-panel,
body.night-mode .experiment-db-panel {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(245, 242, 236, 0.10) !important;
  box-shadow: 0 22px 54px -36px rgba(0, 0, 0, 0.6);
}

body.night-mode .intake-prefill-chip {
  background: rgba(90, 150, 220, 0.16) !important;
  color: #bcd6f2 !important;
  border: 1px solid rgba(140, 185, 235, 0.32) !important;
}

body.night-mode .button {
  background: var(--t-action) !important;
  color: var(--t-action-ink) !important;
  border-color: transparent !important;   /* legacy green ring retired (Josh, 2026-07-11) */
  font-weight: 700;
}
body.night-mode .button:hover { background: var(--t-action-hi) !important; }
body.night-mode .button.ghost {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--t-on-dark) !important;
  border: 1px solid var(--t-glass-line) !important;
}
body.night-mode .button.danger { background: var(--t-bad) !important; color: #fff !important; }

body.night-mode a { color: var(--t-accent-hi); }
body.night-mode a:hover { color: var(--t-accent); }
body.night-mode input:focus,
body.night-mode select:focus,
body.night-mode textarea:focus {
  border-color: var(--t-accent) !important;
  box-shadow: 0 0 0 3px rgba(217, 154, 43, 0.22) !important;
}

body.night-mode .nav-btn.active {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--t-cream) !important;
  box-shadow: inset 3px 0 0 var(--t-action) !important;
}
body.night-mode .nav-btn:hover { color: var(--t-cream); }

body.night-mode .signal-label { color: var(--t-accent) !important; }
body.night-mode .signal-label::before { background: var(--t-accent) !important; }

body.night-mode .matrix-tab.active,
body.night-mode .cold-status-filters .active,
body.night-mode .accounts-mode-toggle button.active,
body.night-mode .accounts-view-toggle button.active {
  background: var(--t-action) !important;
  color: var(--t-action-ink) !important;
  border-color: transparent !important;
}

/* ======================= DAY (parchment) ================================= */

body:not(.night-mode) {
  --ink: var(--t-day-ink);
  --muted: var(--t-day-muted);
  --line: var(--t-day-line);
  --soft: rgba(112, 92, 46, 0.05);
  --field: var(--t-day-field);
  --panel: var(--t-day-panel);
  --green: var(--t-day-green);
  --gold: var(--t-accent-day);
  --shadow: 0 16px 42px rgba(78, 62, 22, 0.10);
}

body:not(.night-mode) {
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(23, 117, 47, 0.07), transparent 55%),
    radial-gradient(120% 80% at 50% 115%, rgba(169, 118, 29, 0.10), transparent 55%),
    linear-gradient(180deg, var(--t-day-bg-hi), var(--t-day-bg-lo)) !important;
  background-attachment: fixed;
  color: var(--t-day-ink);
}
body:not(.night-mode) aside {
  background: linear-gradient(179deg,
    rgba(23, 117, 47, 0.10) 0%, rgba(76, 138, 44, 0.07) 40%,
    rgba(198, 125, 39, 0.08) 75%, rgba(219, 156, 44, 0.12) 100%),
    rgba(255, 252, 243, 0.24) !important;   /* more transparent by day too (Josh, 2026-07-11) */
  border: 1px solid var(--t-day-line) !important;   /* full border: floating dock on desktop */
  -webkit-backdrop-filter: blur(18px) saturate(1.08); backdrop-filter: blur(18px) saturate(1.08);
}
/* mobile keeps the bar layout: no dock border there */
@media (max-width: 640px) {
  body.night-mode aside, body:not(.night-mode) aside { border: 0 !important; }
}

body:not(.night-mode) .panel,
body:not(.night-mode) .kpi,
body:not(.night-mode) .profile-card,
body:not(.night-mode) .profile-glance-card,
body:not(.night-mode) .profile-launch-card,
body:not(.night-mode) .trial-ops-card,
body:not(.night-mode) .account-list-card,
body:not(.night-mode) .cold-lead-card,
body:not(.night-mode) .settings-section,
body:not(.night-mode) .gmail-card,
body:not(.night-mode) .rec,
body:not(.night-mode) .brief-card,
body:not(.night-mode) .rank-row,
body:not(.night-mode) .compact-panel,
body:not(.night-mode) .experiment-db-panel {
  background: var(--t-day-panel) !important;
  border: 1px solid var(--t-day-line) !important;
  box-shadow: 0 18px 40px -30px rgba(78, 62, 22, 0.35);
}

body:not(.night-mode) .button {
  background: var(--t-action) !important;
  color: var(--t-action-ink) !important;
  border-color: transparent !important;   /* legacy green ring retired (Josh, 2026-07-11) */
  font-weight: 700;
}
body:not(.night-mode) .button:hover { background: var(--t-action-hi) !important; }
body:not(.night-mode) .button.ghost {
  background: rgba(112, 92, 46, 0.07) !important;
  color: var(--t-day-ink) !important;
  border: 1px solid var(--t-day-line-hi) !important;
}
body:not(.night-mode) .button.danger { background: var(--t-bad) !important; color: #fff !important; }

body:not(.night-mode) a { color: var(--t-accent-day); }
body:not(.night-mode) a:hover { color: var(--t-accent-day-hi); }
body:not(.night-mode) input:focus,
body:not(.night-mode) select:focus,
body:not(.night-mode) textarea:focus {
  border-color: var(--t-accent-day) !important;
  box-shadow: 0 0 0 3px rgba(169, 118, 29, 0.20) !important;
}

body:not(.night-mode) .nav-btn { color: var(--t-day-muted); }
body:not(.night-mode) .nav-btn.active {
  background: rgba(169, 118, 29, 0.10) !important;
  color: var(--t-day-ink) !important;
  box-shadow: inset 3px 0 0 var(--t-accent-day) !important;
}
body:not(.night-mode) .nav-btn:hover { color: var(--t-day-ink); }

body:not(.night-mode) .signal-label { color: var(--t-day-green) !important; }
body:not(.night-mode) .signal-label::before { background: var(--t-day-green) !important; }

body:not(.night-mode) .matrix-tab.active,
body:not(.night-mode) .cold-status-filters .active,
body:not(.night-mode) .accounts-mode-toggle button.active,
body:not(.night-mode) .accounts-view-toggle button.active {
  background: var(--t-action) !important;
  color: var(--t-action-ink) !important;
  border-color: transparent !important;
}

/* ---- mobile bottom-tab active state: color, not a side bar --------------- */
@media (max-width: 640px) {
  body.night-mode .nav-btn.active {
    box-shadow: none !important;
    color: var(--t-action) !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }
  body:not(.night-mode) .nav-btn.active {
    box-shadow: none !important;
    color: var(--t-action) !important;
    background: rgba(169, 118, 29, 0.12) !important;
  }
  /* the bars carry their own backgrounds (aside itself must stay filter-free) */
  body.night-mode .brand,
  body.night-mode .shell-corner,
  body.night-mode #nav {
    background: rgba(13, 14, 16, 0.9);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  body.night-mode #nav { border-top: 1px solid rgba(245, 242, 236, 0.12); }
  body.night-mode .brand { border-bottom: 1px solid rgba(245, 242, 236, 0.10); }
  body:not(.night-mode) .brand,
  body:not(.night-mode) .shell-corner,
  body:not(.night-mode) #nav {
    background: rgba(255, 252, 243, 0.92);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  body:not(.night-mode) #nav { border-top: 1px solid var(--t-day-line); }
  body:not(.night-mode) .brand { border-bottom: 1px solid var(--t-day-line); }
}

/* ============================================================================
   FINAL night neutral sweep (Josh, 2026-07-11 — audit-driven). profile.css
   hardcodes a blue-charcoal "notion dark" table family (#151821/#1a1f2b/
   #202433/#2d323d) onto every table, and app.css paints green hover rings.
   All retired. #appView anchors give these rules the specificity to win.
   ========================================================================== */
body.night-mode #appView table { background: #17181b !important; }
body.night-mode #appView table, body.night-mode #appView thead, body.night-mode #appView tbody,
body.night-mode #appView tr, body.night-mode #appView th, body.night-mode #appView td {
  border-color: #2c2d31 !important;
}
body.night-mode #appView input:not([type="checkbox"]):not([type="radio"]),
body.night-mode #appView select,
body.night-mode #appView textarea {
  background-color: #1c1d21 !important;
  border-color: #2e2f34 !important;
  color: var(--t-on-dark) !important;
}
body.night-mode #appView .entity-pill,
body.night-mode #appView .matrix-tool-popover,
body.night-mode #appView .matrix-tool-popover .icon-button {
  background: #1c1d21 !important;
  border-color: #2e2f34 !important;
  color: var(--t-on-dark-soft) !important;
}
/* hover rings: amber, not green */
body.night-mode .icon-button:hover,
body.night-mode .app-control.icon-button:hover,
body.night-mode #logoutBtn.app-control:hover,
body.night-mode .sales-row-actions a:hover {
  border-color: rgba(217, 154, 43, 0.5) !important;
  background: rgba(217, 154, 43, 0.10) !important;
  color: var(--t-accent-hi) !important;
}
body.night-mode #matrix .matrix-tag button {
  border-color: #2e2f34 !important;
  background: transparent !important;
  color: inherit !important;
}
body.night-mode #tasks label { border-color: #2e2f34; }

/* audit stragglers (2026-07-11): per-stage TINTED INPUTS inside matrix rows
   (green/blue date fields) sit at row-scope specificity — matched here; plus
   two lone hardcoded borders. */
body.night-mode #matrix .matrix-grid tbody tr[class*="matrix-stage"] td input {
  background: #1c1d21 !important;
  border-color: #2e2f34 !important;
  color: var(--t-on-dark) !important;
}
body.night-mode #appView .section-head { border-color: #2c2d31 !important; }
body.night-mode #matrix .panel strong { border-color: rgba(245, 242, 236, 0.18) !important; }

/* column headers in Accounts: NEVER dark green — force neutral text AND a
   neutral thead surface (the legacy sticky-header carried its own green bg).
   Double-id specificity so nothing legacy outranks it. (Josh, 2026-07-11) */
body.night-mode #appView #matrix thead,
body.night-mode #appView #matrix thead th {
  background: #1a1b1e !important;
}
body.night-mode #appView #matrix thead th,
body.night-mode #appView #matrix thead .matrix-sort-head:not(.active) {
  color: rgba(242, 242, 240, 0.75) !important;
}

/* audit stragglers (2026-07-12): the collapsed dock's ACTIVE page icon still
   glowed legacy green (app.css .nav-btn.active svg -> --pfv-green-hover), and
   the user-profile hub (tabs + avatar) still ran on --accent = green. Both
   join the amber accent system. */
.nav-btn:hover svg,
.nav-btn.active svg { color: inherit !important; }
.nav-btn.active { border-color: transparent !important; }
.user-profile-tabs button.active,
.user-profile-tabs button:hover {
  background: var(--t-action) !important;
  color: var(--t-action-ink) !important;
}
.user-profile-avatar { background: var(--t-accent) !important; color: var(--t-accent-ink) !important; }