/* gtsm-leads — GTSM look, matched to HEARTBEAT/PulseBoard/TaskFlow: light-mode
   default (warm cream/white), dark-mode toggle, Signal Red accent, PP Neue
   numbers, restrained radius, borders not shadows, /apple motion + focus rules */

@font-face { font-family:'Blender Pro'; src:url('fonts/Blender-Light.9c99116393b8b3f17916f1f3b6d06998.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Blender Pro'; src:url('fonts/Blender-Regular.8230a21a71ee7cdaab4e6d8fd8b4c472.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Blender Pro'; src:url('fonts/Blender-Bold.69fde62d77c995aab90d8568925986ba.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Blender Pro'; src:url('fonts/Blender-Black.129d546a19a68c88a5aa0a4d68465d4b.woff2') format('woff2'); font-weight:900; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('fonts/PPNeueMontrealTT-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('fonts/PPNeueMontrealTT-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }

:root {
  --accent: #ED213A;      /* Signal Red — brand, primary actions */
  --accent-2: #0C9C86;    /* Cyan Spark, darkened for legible text/icons on Bone */
  --accent-2-bg: #15E0C0; /* true Cyan Spark — dots/borders/bg only */
  --blue: #2D5BFF;        /* Volt Blue — clash accent, used sparingly */
  --yellow: #FFD23F;
  --yellow-ink: #8a6a1a;
  --black: #1C1C1C;
  --warm-white: #F0EEE9;

  --bg: #F0EEE9;
  --bg-card: #ffffff;
  --bg-card-2: #E8E4DA;
  --topbar-bg: rgba(240,238,233,.85);
  --border: #d9d4c9;
  --text: #15110F;
  --text-2: #6b645c;
  --text-3: #a39d92;
  --green: #16A34A;
  --amber: #F59E0B;

  --radius: 8px;
  --radius-sm: 5px;
  --radius-lg: 12px;
  --shadow: none;
  --shadow-sm: none;
  --shadow-card: none;
}

html.dark-mode, body.dark-mode {
  --accent-2: #15E0C0;
  --yellow-ink: #FFD23F;
  --bg: #15110F;
  --bg-card: #1E1A16;
  --bg-card-2: #262019;
  --topbar-bg: rgba(21,17,15,.85);
  --border: #332C24;
  --text: #F0EEE9;
  --text-2: #948C80;
  --text-3: #5c564c;
  --green: #22C55E;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  /* No page has any horizontal overflow (verified) - this is specifically
     the mobile "rubber-band"/overscroll-glow effect that Chrome/Samsung
     Internet apply by default even with zero real overflow, which reads as
     "the whole page can be dragged around". overflow-x is a defensive
     backstop, not a fix for a real overflow bug. */
  overscroll-behavior: none;
  overflow-x: hidden;
}
html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Blender Pro', 'Rubik', sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
body, body * { transition: background-color .3s ease, border-color .3s ease, color .2s ease; }
.pp { font-family: 'PP Neue Montreal', 'Blender Pro', sans-serif; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ---- Form field base — every modal/form input across the app (client,
   project, campaign, schema, report filters, etc.) shares this so nothing
   falls back to raw browser chrome. Declared early so more specific rules
   later in the file (password-toggle padding, notes textarea, search bar,
   select chevron) still win where they need to. ---- */
input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="password"], input[type="number"], input[type="date"], input[type="search"],
select, textarea {
  width: 100%; background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
  padding: 11px 13px; font-size: 14px; border-radius: var(--radius-sm); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="tel"]:focus,
input[type="password"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="search"]:focus,
select:focus, textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(237,33,58,.08);
}
textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--text-3); }

/* Unified focus ring for keyboard nav — :focus-visible only, so mouse clicks
   don't show it, per /apple accessibility guidance */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

::selection { background: var(--accent); color: #fff; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); }

@keyframes cardIn { from { opacity:0; transform: translateY(20px);} to { opacity:1; transform: translateY(0);} }
.card-in { animation: cardIn .3s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes slideUp { from { opacity:0; transform: translateY(16px) scale(.98);} to { opacity:1; transform: translateY(0) scale(1);} }
.slide-up { animation: slideUp .28s cubic-bezier(.32,.72,0,1) both; }
@keyframes fadeUp { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform: translateY(0);} }
.fade-up { animation: fadeUp .3s ease both; }

/* ---- Logo — gtsm_logo.svg (ink, for light mode) / gtsm_logo_w.svg (white,
   for dark mode), same shared files as HEARTBEAT/PulseBoard/TaskFlow, swapped
   by theme. Element+class specificity (img.logo-*) so this always wins over
   any later single-class `display` rule applied to the same element — equal
   single-class specificity would otherwise let source order silently show
   both logos stacked ---- */
img.logo-dark { display: none; }
html.dark-mode img.logo-light { display: none; }
html.dark-mode img.logo-dark { display: block; }

/* ---- GTSM letters watermark — fixed behind all content on every screen for
   a unified brand look, ported from HEARTBEAT/PulseBoard/TaskFlow ---- */
.bg-letters { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-letter {
  position: absolute; font-family: 'PP Neue Montreal', sans-serif; font-weight: 400;
  font-size: 32vw; line-height: .82; color: var(--text); opacity: .03;
  letter-spacing: -.04em; user-select: none;
}
.hero-letter--g { top: -10%; left: -2%; }
.hero-letter--t { top: 6%; right: -5%; }
.hero-letter--s { bottom: -14%; left: 16%; }
.hero-letter--m { bottom: -10%; right: -7%; }
@media (max-width: 700px) { .bg-letters { display: none; } }

/* ---- Entry splash — brief black brand moment before the login form itself,
   referencing proposals.gtsm.co.il. Always Ink regardless of theme toggle —
   a one-time brand statement, not themed UI chrome ---- */
.entry-splash {
  position: fixed; inset: 0; z-index: 300; background: #15110F;
  display: flex; align-items: center; justify-content: center;
}
.entry-splash-logo { height: 52px; animation: entrySplashIn .6s cubic-bezier(.22,1,.36,1) both; }
.entry-splash.closing .entry-splash-logo { animation: entrySplashLogoOut .4s cubic-bezier(.5,0,.75,0) both; }
.entry-splash.closing { animation: entrySplashOut .45s ease .05s both; }
.entry-splash.hide { display: none; }
@keyframes entrySplashIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes entrySplashLogoOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
@keyframes entrySplashOut { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ---- Welcome splash — brief full-screen greeting after login ---- */
.welcome-splash {
  position: fixed; inset: 0; z-index: 200;
  background: radial-gradient(circle at 30% 20%, rgba(237,33,58,.14), transparent 50%), var(--bg);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  text-align: center; padding: 24px;
}
.welcome-splash.closing { animation: welcomeOut .6s ease both; }
.welcome-splash.hide { display: none; }
.welcome-logo { height: 44px; margin-bottom: 22px; animation: welcomeWordIn .5s cubic-bezier(.22,1,.36,1) both; }
.welcome-word {
  font-family: 'PP Neue Montreal', sans-serif; font-weight: 500; font-size: clamp(3rem, 14vw, 6.5rem);
  letter-spacing: -.02em; color: var(--text); line-height: 1;
  animation: welcomeWordIn .6s cubic-bezier(.22,1,.36,1) both;
  direction: ltr; unicode-bidi: isolate;
}
.welcome-word span { color: var(--accent); }
.welcome-line { margin-top: 16px; font-size: 15px; color: var(--text-2); max-width: 380px; animation: fadeUp .5s ease .25s both; }
.welcome-name { color: var(--text); font-weight: 700; }
@keyframes welcomeWordIn { from { opacity:0; transform: translateY(18px) scale(.96);} to { opacity:1; transform: translateY(0) scale(1);} }
@keyframes welcomeOut { from { opacity:1; visibility:visible;} to { opacity:0; visibility:hidden; pointer-events:none;} }

/* ---- Auth shell (login page) ---- */
.auth-shell {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px; gap: 20px;
  background: var(--bg); position: relative; overflow: hidden; z-index: 1;
}
.auth-card {
  width: 100%; max-width: 380px; position: relative; z-index: 2;
  background: var(--bg-card); border: 1px solid var(--border); padding: 36px 32px;
}
.auth-logo { height: 34px; display: block; margin: 0 auto 22px; }
/* GTSM animated GIF — same asset as HEARTBEAT/PulseBoard/TaskFlow. Drawn for a
   dark background, so light mode inverts it to read on the light auth-card;
   dark mode shows it as-is */
.auth-logo-gif { height: 64px; width: auto; display: block; margin: 0 auto 22px; filter: invert(1) hue-rotate(180deg); }
html.dark-mode .auth-logo-gif { filter: none; }
.auth-title { font-size: 26px; font-weight: 900; text-align: center; margin: 0 0 4px; }
.auth-sub { font-size: 13px; color: var(--text-2); text-align: center; margin: 0 0 28px; }

/* ---- Form controls ---- */
.field { margin-bottom: 16px; }
.field label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text); margin-bottom: 6px; font-weight: 700; }
.field label svg { width: 13px; height: 13px; color: var(--text-3); flex-shrink: 0; }
.field input, .field select, .field textarea,
.form-group input, .form-group select, .form-group textarea {
  width: 100%; background: var(--bg-card-2); border: 1px solid var(--border); color: var(--text);
  padding: 11px 13px; font-size: 14px; outline: none; transition: border-color .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); }
.field textarea, .form-group textarea { resize: vertical; min-height: 64px; }

/* ---- Password show/hide eye toggle ---- */
.password-input-wrap { position: relative; }
.password-input-wrap input { padding-inline-end: 40px; }
.password-toggle-btn {
  position: absolute; top: 50%; inset-inline-end: 8px; transform: translateY(-50%);
  background: none; border: none; padding: 6px; cursor: pointer; color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
}
.password-toggle-btn:hover { color: var(--accent); }
.password-toggle-btn svg { width: 17px; height: 17px; }

/* Custom arrow instead of browser chrome, defined once to win the cascade */
select { appearance: none; -webkit-appearance: none; cursor: pointer; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23948C80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 10px center; background-size: 14px; padding-left: 32px;
}
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

/* ---- Buttons — existing class names kept (btn-primary/btn-secondary/
   btn-danger/btn-sm), restyled to the flat GTSM/TaskFlow look ---- */
.btn, .btn-primary {
  width: 100%; background: var(--accent); color: #fff; border: none;
  padding: 13px; font-size: 15px; font-weight: 700; transition: filter .15s ease, transform .1s ease;
  border-radius: var(--radius-sm);
}
.btn:hover, .btn-primary:hover { filter: brightness(1.08); }
.btn:active, .btn-primary:active { transform: scale(.98); }
.btn:disabled, .btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { width: auto; padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 17px; font-size: 16.5px; letter-spacing: .01em; }
.btn-secondary {
  background: transparent; border: 1px solid var(--border); color: var(--text);
  padding: 13px; font-size: 15px; font-weight: 700;
  transition: all .15s ease, transform .1s cubic-bezier(.32,.72,0,1); border-radius: var(--radius-sm);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-secondary:active { transform: scale(.96); }
.btn-danger {
  background: transparent; border: 1px solid var(--accent); color: var(--accent);
  padding: 13px; font-size: 15px; font-weight: 700;
  transition: all .15s ease, transform .1s cubic-bezier(.32,.72,0,1); border-radius: var(--radius-sm);
}
.btn-danger:hover { background: var(--accent); color: #fff; }
.btn-danger:active { transform: scale(.96); }
.btn-ghost {
  background: transparent; border: 1px solid var(--border); color: var(--text-2);
  padding: 8px 14px; font-size: 13px; font-weight: 600; transition: all .15s ease; border-radius: var(--radius-sm);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-full { width: 100%; }

.error-msg { color: var(--accent); font-size: 13px; margin-top: 10px; text-align: center; min-height: 18px; }

/* ---- App shell / topbar ---- */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; position: relative; z-index: 1; }
.topbar, .app-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  background: var(--topbar-bg); backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 20; flex-wrap: wrap; gap: 10px;
}
.topbar-left, .app-nav-left { display: flex; align-items: center; gap: 14px; }
.app-nav-logo { display: flex; align-items: center; text-decoration: none; color: inherit; }
.topbar-logo { height: 24px; }
.topbar-title { font-weight: 900; font-size: 16px; letter-spacing: .02em; }
.topbar-ticker, .app-nav-ticker {
  flex: 1; min-width: 40px; max-width: 260px; text-align: center; font-size: 11px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity .2s ease; padding: 0 10px;
}
.header-clock { font-family: 'Blender Pro', 'Rubik', sans-serif; font-size: 12.5px; letter-spacing: .02em; color: var(--text-2); white-space: nowrap; }
.header-clock-time { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.topbar-nav, .app-nav-tabs { display: flex; gap: 6px; }
.topbar-nav button, .topbar-nav a, .app-nav-tab, .nav-item {
  background: transparent; border: 1px solid transparent; color: var(--text-2); text-decoration: none;
  padding: 9px 16px; font-size: 14px; font-weight: 700; transition: all .15s ease, transform .1s cubic-bezier(.32,.72,0,1);
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  /* these are <a> tags with no href (JS-driven nav, not real links) — without
     an explicit cursor, a href-less anchor shows the text-select I-beam on
     hover instead of a pointer, since the browser has no other signal that
     it's clickable */
}
.topbar-nav button:hover, .topbar-nav a:hover, .app-nav-tab:hover, .nav-item:hover { color: var(--accent); }
.topbar-nav button.active, .topbar-nav a.active, .app-nav-tab.active, .nav-item.active {
  border-color: var(--accent); color: #fff; background: var(--accent);
}
.topbar-nav button.active:hover, .app-nav-tab.active:hover, .nav-item.active:hover { color: #fff; border-color: var(--accent); filter: brightness(1.08); }
.topbar-nav button:active, .app-nav-tab:active, .nav-item:active { transform: scale(.95); }
.nav-icon { display: none; } /* icon glyphs dropped — GTSM UI avoids emoji; label text carries the meaning */

.topbar-right, .app-nav-right { display: flex; align-items: center; gap: 12px; }
.app-nav-client { font-size: 13px; color: var(--text-2); font-weight: 600; }

.theme-toggle, .theme-toggle-btn {
  background: transparent; border: 1px solid var(--border); color: var(--text-2);
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all .15s ease; border-radius: var(--radius-sm); padding: 0;
}
.theme-toggle:hover, .theme-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle-btn svg { width: 16px; height: 16px; }

.main { flex: 1; max-width: 1180px; width: 100%; margin: 0 auto; padding: 24px 20px 0; display: flex; flex-direction: column; }
.main > .app-footer { margin-top: auto; }

/* ---- Footer — heart above brand line, sits at the bottom of the viewport
   via the column .app-shell, not just at the end of short content ---- */
.app-footer, .gtsm-footer {
  border-top: 1px solid var(--border); padding: 22px 4px 26px;
  display: flex; align-items: center; justify-content: center;
}
.brand-stamp {
  font-family: 'PP Neue Montreal', sans-serif; font-size: 11px; letter-spacing: 1px; color: var(--text-3);
  text-align: center; margin-top: 4px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.brand-stamp-heart { flex-shrink: 0; }

/* ---- KPI row (admin overview) ---- */
.kpi-row, .metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 24px; }
.kpi-card, .metric-card { background: var(--bg-card); border: 1px solid var(--border); padding: 18px 16px; border-radius: var(--radius); }
.kpi-label, .mc-label { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-bottom: 8px; }
.kpi-value, .mc-val {
  font-family: 'PP Neue Montreal', sans-serif; font-size: 2rem; font-weight: 500; letter-spacing: -.015em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.kpi-value.accent, .mc-val.accent { color: var(--accent); }
.mc-sub { font-size: 11px; color: var(--text-3); margin-top: 4px; }

/* ---- Section / toolbar / tables ---- */
.section-head, .admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.admin-header { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 20px; }
.admin-header h1 { font-size: 20px; font-weight: 900; margin: 0; }
.admin-header p { font-size: 13px; color: var(--text-2); margin: 2px 0 0; }
.section-title { font-size: 15px; font-weight: 700; }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar select { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); padding: 7px 10px; font-size: 13px; }
.search-input {
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
  padding: 8px 12px; font-size: 13px; border-radius: var(--radius-sm); outline: none; transition: border-color .15s ease;
}
.search-input:focus { border-color: var(--accent); }

.table-wrapper { overflow-x: auto; border: 1px solid var(--border); background: var(--bg-card); border-radius: var(--radius); transition: border-color .3s ease, outline-color .3s ease; outline: 3px solid transparent; outline-offset: 2px; }
.table-wrapper.flash-highlight { border-color: var(--accent); outline-color: rgba(237,33,58,.15); }
table { width: 100%; border-collapse: collapse; }
table th {
  text-align: right; font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em;
  padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
table tr:last-child td { border-bottom: none; }
table tr:hover td { background: var(--bg-card-2); transition: background-color .1s ease; }
/* Instant press feedback on click-to-open-drawer rows — /apple §1: respond
   on pointer-down, don't rely on the pre-existing hover state alone to
   signal "the click landed" */
table tr:active td { background: var(--border); }

/* ---- Badges / pills — used for lead status, source, unread count ---- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px;
}
.badge-blue { color: var(--blue); border-color: var(--blue); background: rgba(45,91,255,.08); }
.lead-status-badge { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.src-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; }
.src-badge.src-default { color: var(--text-2); background: var(--bg-card-2); border: 1px solid var(--border); }
.src-badge-icon { display: inline-flex; width: 12px; height: 12px; flex-shrink: 0; }
.src-badge-icon svg { width: 100%; height: 100%; }
.lead-unread-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.phone-link { color: var(--accent-2); text-decoration: none; direction: ltr; unicode-bidi: isolate; }
.phone-link:hover { text-decoration: underline; }

/* ---- Toast ---- */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--bg); padding: 11px 20px; font-size: 13px; font-weight: 600;
  z-index: 100; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
  border-radius: var(--radius-sm);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-6px); }

/* ---- Live status badge (header) — GTSM standard, red blink + label ---- */
.work-mode-badge { display: flex; align-items: center; gap: 6px; }
.work-mode-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; flex-shrink: 0; animation: wm-blink 1.8s infinite; }
.work-mode-label { font-family: 'PP Neue Montreal', sans-serif; font-size: 9px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
@keyframes wm-blink { 0%,49%,100% { opacity: 1; } 50%,99% { opacity: .2; } }

/* ============================================================
   HOME — client hub
   ============================================================ */
.home-page { min-height: 100vh; display: flex; flex-direction: column; position: relative; z-index: 1; }
.home-topbar {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 20px;
  border-bottom: 1px solid var(--border); background: var(--topbar-bg); backdrop-filter: blur(10px);
}
.home-topbar-right { display: flex; align-items: center; gap: 12px; }
.home-main { flex: 1; max-width: 720px; width: 100%; margin: 0 auto; padding: 48px 20px; display: flex; flex-direction: column; gap: 32px; }
.home-greeting { display: flex; align-items: center; gap: 16px; }
.client-avatar {
  width: 56px; height: 56px; border-radius: var(--radius); background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; overflow: hidden; flex-shrink: 0;
}
.client-avatar img { width: 100%; height: 100%; object-fit: cover; }
.home-greeting-text { font-size: 22px; font-weight: 700; }
.home-greeting-sub { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.home-card {
  position: relative; display: block; background: var(--bg-card); border: 1px solid var(--border);
  padding: 24px; text-decoration: none; color: var(--text); border-radius: var(--radius);
  transition: border-color .15s ease, transform .1s cubic-bezier(.32,.72,0,1);
}
.home-card:hover { border-color: var(--accent); }
.home-card:active { transform: scale(.98); }
.home-card.dimmed { opacity: .55; }
.home-card-title { font-size: 19px; font-weight: 700; margin: 10px 0 6px; }
.home-card-desc { font-size: 13px; color: var(--text-2); line-height: 1.5; margin-bottom: 18px; }
.home-card-stats { display: flex; gap: 24px; margin-bottom: 16px; }
.home-card-stat { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.home-card-stat-val { font-size: 1.6rem; font-weight: 500; color: var(--text); }
.home-card-cta { font-size: 13px; font-weight: 700; color: var(--accent); }
.home-card-badge {
  position: absolute; top: 16px; left: 16px; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}

/* ============================================================
   LEADS — client table + status bar + drawer
   ============================================================ */
.leads-page { min-height: 100vh; display: flex; flex-direction: column; position: relative; z-index: 1; }
.leads-topbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
  padding: 20px; max-width: 1180px; width: 100%; margin: 0 auto;
}
.leads-page-title { text-align: center; justify-self: center; }
.leads-page-title h1 { font-size: 22px; font-weight: 900; margin: 0; letter-spacing: -.01em; }
.leads-page-sub { font-size: 11px; color: var(--text-3); letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }
.ltb-controls { display: flex; align-items: center; gap: 8px; justify-self: end; flex-wrap: wrap; }
@media (max-width: 700px) {
  .leads-topbar { grid-template-columns: 1fr; text-align: center; }
  .ltb-badge { display: none; }
  .ltb-controls { justify-self: center; }
}
.leads-content { max-width: 1180px; width: 100%; margin: 0 auto; padding: 0 20px 32px; flex: 1; }

/* ---- Status funnel bar ---- */
.leads-status-bar {
  max-width: 1180px; width: 100%; margin: 0 auto 20px; padding: 0 20px;
  display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
}
.lhb-hero {
  display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border);
  padding: 14px 20px; cursor: pointer; transition: border-color .15s ease, transform .1s cubic-bezier(.32,.72,0,1); border-radius: var(--radius);
}
.lhb-hero:hover { border-color: var(--accent); }
.lhb-hero:active { transform: scale(.98); }
.lhb-hero.active { border-color: var(--accent); background: rgba(237,33,58,.06); }
.lhb-pulse-wrap { position: relative; width: 12px; height: 12px; flex-shrink: 0; }
.lhb-pulse-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.lhb-pulse-ring { position: absolute; inset: 0; border-radius: 50%; background: var(--accent); opacity: .5; animation: lhbPulse 1.8s ease-out infinite; }
@keyframes lhbPulse { from { transform: scale(1); opacity: .5; } to { transform: scale(2.4); opacity: 0; } }
.lhb-hero-num { font-size: 1.8rem; font-weight: 500; line-height: 1; }
.lhb-hero-num.has-new { color: var(--accent); }
.lhb-hero-label { font-size: 11px; color: var(--text-2); margin-top: 2px; }
.lhb-funnel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lhb-stage {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 14px;
  border: 1px solid var(--border); background: var(--bg-card); cursor: pointer;
  transition: border-color .15s ease, transform .1s cubic-bezier(.32,.72,0,1); border-radius: var(--radius-sm);
}
.lhb-stage:hover { border-color: var(--sc, var(--accent)); }
.lhb-stage:active { transform: scale(.96); }
.lhb-stage.active { border-color: var(--sc, var(--accent)); background: color-mix(in srgb, var(--sc, var(--accent)) 10%, var(--bg-card)); }
.lhb-stage-num { font-size: 1.1rem; font-weight: 500; color: var(--sc, var(--text)); }
.lhb-stage-label { font-size: 10.5px; color: var(--text-2); white-space: nowrap; }
.lhb-arrow { color: var(--text-3); font-size: 14px; }
.lhb-conv {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 16px;
  border: 1px solid var(--border); background: var(--bg-card); cursor: pointer;
  transition: border-color .15s ease, transform .1s cubic-bezier(.32,.72,0,1); border-radius: var(--radius-sm);
}
.lhb-conv:hover { border-color: var(--green); }
.lhb-conv:active { transform: scale(.96); }
.lhb-conv.active { border-color: var(--green); background: rgba(22,163,74,.08); }
.lhb-conv-num { font-size: 1.1rem; font-weight: 500; color: var(--green); }
.lhb-conv-label { font-size: 10.5px; color: var(--text-2); white-space: nowrap; }

/* ---- Leads table ---- */
.leads-table { width: 100%; border-collapse: collapse; }
.leads-table .notes-cell { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--text-2); }
.leads-table .status-cell { white-space: nowrap; }
.notes-cell-extra { color: var(--text-3); font-size: 11px; }
.leads-table thead th {
  text-align: right; font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em;
  padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--bg-card-2);
}
.leads-table tbody tr { cursor: pointer; transition: background-color .1s ease; }
.leads-table tbody tr:hover td { background: var(--bg-card-2); }
.leads-table tbody tr:active td { background: var(--border); }
.leads-table tbody tr.lead-unread td { font-weight: 600; }
.leads-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px; background: var(--bg-card); }

/* ---- Lead detail drawer — centered modal, not a side panel. A manager
   filling in lead/meeting details needs the comfortable, focused center
   of the screen, not a cramped 420px strip pinned to the edge.
   NOTE: #drawer-overlay and #lead-drawer are SIBLINGS in the markup, not
   parent/child — each page duplicates this pair as direct <body> children —
   so the drawer centers itself independently via fixed positioning, it
   cannot rely on flex-centering from the overlay. ---- */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px);
  z-index: 60; opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.lead-drawer {
  position: fixed; top: 50%; left: 50%; z-index: 61;
  width: calc(100% - 56px); max-width: 700px; max-height: calc(100vh - 56px);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translate(-50%, -50%) translateY(18px) scale(.98); pointer-events: none;
  transition: opacity .25s cubic-bezier(.32,.72,0,1), transform .25s cubic-bezier(.32,.72,0,1);
}
.lead-drawer.open { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); pointer-events: auto; }
.drawer-hero {
  display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--border);
  background: radial-gradient(circle at 25% 20%, rgba(237,33,58,.08), transparent 55%);
  border-radius: var(--radius) var(--radius) 0 0;
}
html.dark-mode .drawer-hero { background: radial-gradient(circle at 25% 20%, rgba(237,33,58,.14), transparent 55%); }
.drawer-avatar {
  width: 44px; height: 44px; border-radius: var(--radius); color: #fff; font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.drawer-hero-info { flex: 1; min-width: 0; }
.drawer-hero-name { font-size: 19px; font-weight: 800; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-hero-meta { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.drawer-close-btn {
  background: transparent; border: none; color: var(--text-2); font-size: 18px; line-height: 1;
  padding: 6px; flex-shrink: 0; border-radius: var(--radius-sm);
}
.drawer-close-btn:hover { color: var(--accent); }
.drawer-quick-actions { display: flex; gap: 8px; padding: 14px 24px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.dqa-btn {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; text-decoration: none;
  padding: 8px 14px; border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm);
  transition: border-color .15s ease, color .15s ease;
}
.dqa-btn:hover { border-color: var(--accent); color: var(--accent); }
.dqa-btn:active { transform: scale(.96); }
.dqa-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.drawer-body-scroll { flex: 1; overflow-y: auto; padding: 24px; }
.drawer-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--border); flex-shrink: 0; }
.drawer-footer .btn-secondary, .drawer-footer .btn-primary { width: auto; min-width: 120px; padding: 11px 28px; }
.drawer-section { margin-bottom: 22px; }
.drawer-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin-bottom: 10px; }
/* ---- Lead quality picker — relevant/not-relevant toggle, then a
   required single-choice sub-status, then (for stages that need it) a
   follow-up date + reminder flag. Mirrors the two-step branching the
   user described: pick a top-level quality, then exactly one reason/
   stage from a checklist ---- */
.quality-toggle { display: flex; gap: 8px; margin-bottom: 10px; }
.quality-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; border: 1px solid var(--border); background: var(--bg-card-2); color: var(--text-2);
  font-size: 13px; font-weight: 700; border-radius: var(--radius-sm);
  transition: all .15s ease, transform .1s cubic-bezier(.32,.72,0,1);
}
.quality-btn svg { width: 14px; height: 14px; }
.quality-btn:hover { border-color: var(--accent); }
.quality-btn:active { transform: scale(.97); }
.quality-btn-relevant.active { background: rgba(13,138,62,.1); border-color: #0D8A3E; color: #0D8A3E; }
.quality-btn-not-relevant.active { background: rgba(239,68,68,.1); border-color: #ef4444; color: #ef4444; }
html.dark-mode .quality-btn-relevant.active { background: rgba(74,222,128,.12); border-color: #4ade80; color: #4ade80; }
html.dark-mode .quality-btn-not-relevant.active { background: rgba(248,113,113,.12); border-color: #f87171; color: #f87171; }
.quality-substatus { display: flex; flex-direction: column; gap: 6px; }
.quality-radio-row {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px; background: var(--bg-card-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 13px;
  transition: border-color .15s ease;
}
.quality-radio-row:hover { border-color: var(--accent); }
.quality-radio-row input[type="radio"] { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }
.quality-followup-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.quality-followup-row input[type="date"] {
  flex: 1; min-width: 130px; background: var(--bg-card-2); border: 1px solid var(--border); color: var(--text);
  padding: 8px 10px; font-size: 13px; border-radius: var(--radius-sm); outline: none; transition: border-color .15s ease;
}
.quality-followup-row input[type="date"]:focus { border-color: var(--accent); }
.quality-reminder-check { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.quality-reminder-check input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }

/* ---- Completion flash — the quality picker auto-saves on every pick with
   no separate "save" button; this is the only confirmation a choice actually
   landed. Fades in right at the completing pick, holds briefly, fades out —
   never blocks input, never needs dismissing ---- */
.quality-saved-flash {
  display: flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700;
  color: #0D8A3E; opacity: 0; transform: translateY(-3px); height: 0; overflow: hidden;
  transition: opacity .2s ease, transform .2s ease;
}
html.dark-mode .quality-saved-flash { color: #4ade80; }
.quality-saved-flash svg { width: 12px; height: 12px; flex-shrink: 0; }
.quality-saved-flash.show { opacity: 1; transform: translateY(0); height: auto; margin-top: 8px; }

/* ---- Follow-up date badge — shown next to the stage badge in the
   leads table wherever a follow-up date is set; the bell only appears
   when a reminder was also requested (visual tag only, no real
   notification system) ---- */
.followup-badge {
  display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.followup-badge svg { width: 10px; height: 10px; }
.followup-badge.has-reminder { color: var(--amber); border-color: var(--amber); background: rgba(245,158,11,.08); }
.drawer-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin-bottom: 22px; }
.dfield-item.dfield-full { grid-column: 1 / -1; }
.dfield-item { display: flex; align-items: flex-start; gap: 10px; }
.dfield-icon { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--bg-card-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; color: var(--text-2); }
.dfield-icon svg { width: 14px; height: 14px; }
.dfield-content { flex: 1; min-width: 0; }
.dfield-label { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.dfield-value { font-size: 13.5px; color: var(--text); margin-top: 2px; word-break: break-word; }
.dfield-value.phone { direction: ltr; unicode-bidi: isolate; text-align: right; }
.dfield-value-row { display: flex; align-items: center; gap: 6px; }
.dfield-copy-btn {
  background: transparent; border: none; color: var(--text-3); margin-top: 2px;
  border-radius: var(--radius-sm); cursor: pointer; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; min-width: 24px; min-height: 24px;
  transition: color .15s ease, background-color .15s ease;
}
.dfield-copy-btn svg { width: 13px; height: 13px; }
.dfield-copy-btn:hover { color: var(--accent); background: var(--bg-card-2); }
.dfield-copy-btn:active { transform: scale(.92); }
.dfield-copy-btn.copied { color: #0D8A3E; }
.notes-section .notes-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; max-height: 220px; overflow-y: auto; }
.note-item { background: var(--bg-card-2); border: 1px solid var(--border); padding: 9px 11px; font-size: 13px; line-height: 1.5; }
.note-item-ts { font-size: 10.5px; color: var(--text-3); margin-top: 4px; }
.notes-empty { font-size: 12.5px; color: var(--text-3); }
.notes-add { display: flex; flex-direction: column; gap: 8px; }
.notes-add textarea { background: var(--bg-card-2); border: 1px solid var(--border); color: var(--text); padding: 9px 11px; font-size: 13px; min-height: 60px; resize: vertical; outline: none; }
.notes-add textarea:focus { border-color: var(--accent); }

/* ---- Personal tasks - private per-user to-do list, unrelated to leads
   (tasks.php + admin.php's own section share this markup/CSS) ---- */
.tasks-add-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tasks-add-row input[type="text"] { flex: 1; min-width: 200px; }
.tasks-add-row input[type="date"] { max-width: 150px; }
.tasks-empty { font-size: 13px; color: var(--text-3); text-align: center; padding: 24px 0; }
.task-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 4px;
  border-bottom: 1px solid var(--border);
}
.task-row:last-child { border-bottom: none; }
.task-check { display: flex; cursor: pointer; flex-shrink: 0; min-width: 24px; min-height: 24px; align-items: center; justify-content: center; }
.task-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.task-check-box {
  width: 20px; height: 20px; border-radius: var(--radius-sm); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: transparent; flex-shrink: 0;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.task-check-box svg { width: 12px; height: 12px; }
.task-check:hover .task-check-box { border-color: var(--accent); }
.task-check input:checked + .task-check-box { background: var(--accent); border-color: var(--accent); color: #fff; }
.task-check input:checked:hover + .task-check-box { filter: brightness(1.1); }
.task-text { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text); word-break: break-word; }
.task-row.done .task-text { color: var(--text-3); text-decoration: line-through; }
.task-due { font-size: 11px; color: var(--text-2); background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; white-space: nowrap; flex-shrink: 0; }
.task-due.overdue { color: #ef4444; border-color: #ef444444; background: #ef444422; }
.task-delete-btn {
  background: transparent; border: none; color: var(--text-3); flex-shrink: 0; cursor: pointer;
  border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
  min-width: 24px; min-height: 24px; transition: color .15s ease, background-color .15s ease;
}
.task-delete-btn svg { width: 14px; height: 14px; }
.task-delete-btn:hover { color: #ef4444; background: var(--bg-card-2); }
.task-delete-btn:active { transform: scale(.9); }

/* ============================================================
   DASHBOARD (client) — filter chips, donut chart, week comparison,
   this-month table. Built per the dataviz skill: form before color,
   legend + direct labels so identity is never color-alone, 2px surface
   gaps between donut segments, hover tooltip via <title> on each mark.
   ============================================================ */
.dash-content { max-width: 1180px; width: 100%; margin: 0 auto; padding: 20px 20px 32px; flex: 1; }

.dash-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 20px; }


.period-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.period-btn {
  font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-2);
  cursor: pointer; transition: border-color .15s ease, color .15s ease, background-color .15s ease;
  white-space: nowrap;
}
.period-btn:hover { border-color: var(--accent); color: var(--accent); }
.period-btn:active { transform: scale(.96); }
.period-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.period-custom-range { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.period-custom-range span { font-size: 12.5px; color: var(--text-2); }
.period-custom-range input[type="date"] { max-width: 150px; }
.dash-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  background: var(--bg-card); border: 1px solid var(--border); padding: 14px 16px;
  border-radius: var(--radius); cursor: pointer; text-align: start;
  transition: border-color .15s ease, transform .1s cubic-bezier(.32,.72,0,1);
}
.dash-chip:hover { border-color: var(--accent); }
.dash-chip:active { transform: scale(.97); }
.dash-chip.active { border-color: var(--accent); background: rgba(237,33,58,.06); }
.dash-chip-num { font-size: 1.6rem; font-weight: 500; line-height: 1; color: var(--text); }
.dash-chip-label { font-size: 11.5px; color: var(--text-2); }

.dash-charts-row { display: grid; grid-template-columns: 1.2fr 0.9fr 0.9fr; gap: 16px; align-items: stretch; }
.dash-breakdown-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: stretch; margin-top: 16px; }
.top-media-list { display: flex; flex-direction: column; gap: 10px; }
.top-media-row { display: flex; align-items: center; gap: 10px; }
.top-media-rank {
  width: 24px; height: 24px; border-radius: 50%; background: var(--bg-card-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; color: var(--text-2); flex-shrink: 0;
}
.top-media-row:first-child .top-media-rank { background: var(--accent); border-color: var(--accent); color: #fff; }
.top-media-icon { width: 18px; height: 18px; flex-shrink: 0; }
.top-media-icon svg { width: 100%; height: 100%; }
.top-media-info { flex: 1; min-width: 0; }
.top-media-name { font-size: 13px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-media-sub { font-size: 10.5px; color: var(--text-3); margin-top: 1px; }
.top-media-rate { font-size: 16px; font-weight: 800; color: var(--accent); flex-shrink: 0; }
.dash-card { display: flex; flex-direction: column; }

/* ---- Conversion ratio ---- */
.ratio-value { font-size: 2.1rem; font-weight: 700; color: var(--text); line-height: 1; margin: 4px 0 6px; }
.ratio-sub { font-size: .78rem; color: var(--text-2); margin-bottom: 16px; }
.ratio-pct-row { display: flex; align-items: baseline; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); margin-top: auto; }
.ratio-pct { font-size: 1.3rem; font-weight: 700; color: var(--accent); }
.ratio-pct-label { font-size: .78rem; color: var(--text-2); }
.ratio-empty { font-size: 12.5px; color: var(--text-3); padding: 12px 0; }

/* ---- Donut ---- */
.donut-wrap { position: relative; width: 200px; height: 200px; margin: 8px auto 18px; }
.donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.donut-center-value { font-size: 2rem; font-weight: 500; color: var(--text); line-height: 1; }
.donut-center-label { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; }
.donut-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.donut-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.donut-legend-label { flex: 1; color: var(--text); }
.donut-legend-val { color: var(--text-2); font-variant-numeric: tabular-nums; }
.donut-legend-pct { color: var(--text-3); }

/* ---- Chart.js canvases — donut/gauge stay fixed-size, trend/bar charts
   fill their card's width and get a fixed height so Chart.js's responsive
   resize has a stable box to fill (it reads the parent's computed size) ---- */
.ratio-gauge-wrap { position: relative; width: 140px; height: 140px; margin: 8px auto 4px; }
.ratio-gauge-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.week-chart-wrap { position: relative; height: 220px; margin-top: 4px; }
.bar-chart-wrap { position: relative; height: 220px; }
.week-delta-wrap { display: flex; justify-content: center; margin-top: 10px; }
.week-delta { font-size: 12.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.week-delta-up { color: #0D8A3E; background: rgba(13,138,62,.1); }
html.dark-mode .week-delta-up { color: #4ade80; background: rgba(74,222,128,.12); }
.week-delta-down { color: var(--accent); background: rgba(237,33,58,.08); }
.week-delta-flat { color: var(--text-2); background: var(--bg-card-2); }
.source-chart-empty { font-size: 12.5px; color: var(--text-3); padding: 12px 0; text-align: center; }
@media (max-width: 430px) {
  .source-row { grid-template-columns: 80px 1fr 28px; gap: 8px; }
}

@media (max-width: 700px) {
  .dash-charts-row, .dash-breakdown-row { grid-template-columns: 1fr; }
  /* grid items default to min-width:auto, which floors them at their
     content's natural width (a Chart.js canvas, a long top-media row) even
     in a single 1fr column — min-width:0 lets the card actually shrink to
     the viewport instead of pushing it into horizontal overflow */
  .dash-card { min-width: 0; }
}

/* ============================================================
   ADMIN — topbar nav, KPI, tables, schema builder, modals
   ============================================================ */
.admin-layout { min-height: 100vh; display: flex; flex-direction: column; position: relative; z-index: 1; }
.admin-main { flex: 1; max-width: 1180px; width: 100%; margin: 0 auto; padding: 24px 20px 40px; }
.section { display: none; }
.section.active { display: block; animation: fadeUp .3s ease both; }
.card { background: var(--bg-card); border: 1px solid var(--border); padding: 20px; border-radius: var(--radius); }
.card-title { font-size: 14px; font-weight: 700; margin-bottom: 14px; }

/* ---- Schema builder rows ---- */
.schema-cols-header { display: flex; gap: 10px; padding: 6px 10px; font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.schema-col-row {
  display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--bg-card-2);
  border: 1px solid var(--border); margin-bottom: 6px; border-radius: var(--radius-sm);
}

.schema-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin-bottom: 10px; }
.schema-fixed-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: .5rem; }
.schema-fixed-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-card-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .82rem;
}
.schema-fixed-row.schema-fixed-static { color: var(--text-2); }
.schema-fixed-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-3); background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px;
}
.schema-fixed-row.schema-fixed-toggle { cursor: pointer; transition: transform .1s cubic-bezier(.32,.72,0,1); }
.schema-fixed-row.schema-fixed-toggle input { width: auto; flex-shrink: 0; cursor: pointer; }
.schema-fixed-row.schema-fixed-toggle:active { transform: scale(.96); }

/* ---- Client status manager ---- */
.status-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: var(--bg-card-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 6px; flex-wrap: wrap;
}
.status-row input[type="text"] { flex: 1; min-width: 140px; }
.status-row-marker {
  display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-2); white-space: nowrap;
  cursor: pointer; padding: 3px 4px; border-radius: 4px; transition: transform .1s cubic-bezier(.32,.72,0,1);
}
.status-row-marker input { width: auto; flex-shrink: 0; cursor: pointer; }
.status-row-marker:active { transform: scale(.94); }
.status-cap-hint { font-size: 11px; color: var(--text-3); margin-top: 4px; }

/* ---- Reports ---- */
.report-checklist { display: flex; flex-wrap: wrap; gap: 8px; }
.report-check-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-card-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .82rem; cursor: pointer;
  transition: border-color .15s ease, transform .1s cubic-bezier(.32,.72,0,1);
}
.report-check-row:hover { border-color: var(--accent); }
.report-check-row:active { transform: scale(.97); }
.report-check-row input { width: auto; flex-shrink: 0; cursor: pointer; accent-color: var(--accent); }
.report-check-row.report-check-notes { border-color: var(--accent); }
.report-print-header { display: none; } /* shown only in @media print, below */

/* Printing a report: show only the report card, full-width, no chrome —
   window.print() is the zero-dependency route to a real downloadable PDF
   (browser's native "Save as PDF" destination) without adding a library. */
@media print {
  body * { visibility: hidden; }
  #report-print-area, #report-print-area * { visibility: visible; }
  #report-print-area {
    position: absolute; inset: 0; width: 100%; border: none; box-shadow: none; padding: 0; margin: 0;
  }
  #report-print-area .report-toolbar-onscreen { display: none; }
  .report-print-header { display: block; margin-bottom: 18px; }
  .report-print-header .rph-title { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
  .report-print-header .rph-meta { font-size: 12px; color: #555; }
}

/* ---- Modal ---- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px);
  display: none; align-items: center; justify-content: center; z-index: 50; padding: 20px; overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal { width: 100%; max-width: 480px; background: var(--bg-card); border: 1px solid var(--border); padding: 24px; margin: auto; border-radius: var(--radius); animation: slideUp .25s cubic-bezier(.32,.72,0,1) both; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.modal-head h3 { font-size: 17px; font-weight: 800; margin: 0; }
.modal-close { background: transparent; border: none; color: var(--text-2); font-size: 20px; line-height: 1; padding: 2px 6px; }
.modal-close:hover { color: var(--accent); }
.modal-foot { display: flex; gap: 10px; margin-top: 20px; }
.modal-foot .btn, .modal-foot .btn-secondary, .modal-foot .btn-primary, .modal-foot .btn-danger { flex: 1; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin-bottom: 6px; }
.field-hint { font-size: 11px; color: var(--text-3); margin-top: 6px; line-height: 1.5; }

/* ---- Logo URL field + live preview — used in client/project modals so an
   admin can see what they pasted actually looks like before saving ---- */
.logo-field-row { display: flex; gap: 10px; align-items: center; }
.logo-field-row input { flex: 1; }
.logo-preview {
  width: 44px; height: 44px; border-radius: var(--radius-sm); border: 1px dashed var(--border);
  background: var(--bg-card-2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.logo-preview img { width: 100%; height: 100%; object-fit: contain; }

/* ============================================================
   Accessibility — /apple §14 reduced-motion / reduced-transparency
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .work-mode-dot { animation: none !important; opacity: 1; }
  .home-card:active, .btn-secondary:active, .btn-danger:active, .topbar-nav button:active, .nav-item:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar, .app-nav, .home-topbar { backdrop-filter: none; background: var(--bg); }
  .modal-overlay, .drawer-overlay { backdrop-filter: none; background: rgba(0,0,0,.85); }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .main, .admin-main { max-width: 100%; }
  .kpi-row, .metric-row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}
@media (max-width: 700px) {
  .main, .admin-main, .leads-content { padding-left: 14px; padding-right: 14px; }
  .modal { padding: 20px; }
  .topbar, .app-nav, .home-topbar { padding: 12px 14px; }
  .topbar-title { display: none; }
  .topbar-ticker, .app-nav-ticker, .header-clock { display: none; }
  .kpi-row, .metric-row { grid-template-columns: repeat(2, 1fr); }
  .section-head { flex-direction: column; align-items: stretch; }
  .toolbar { width: 100%; }
  .drawer-fields-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal { max-width: none; min-height: 100%; border-radius: 0; margin: 0; padding: 18px 16px 24px; }
  .lead-drawer {
    inset: 0; top: 0; left: 0; width: 100%; max-width: none; max-height: none; border-radius: 0;
    transform: translateY(18px);
  }
  .lead-drawer.open { transform: translateY(0); }
}
@media (max-width: 430px) {
  .auth-card { padding: 28px 22px; }
  .kpi-row, .metric-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi-value, .mc-val { font-size: 1.6rem; }
}

/* Mobile-S/XS/Fold (393px and below) — the nav's logo+tabs group
   (.app-nav-left) has no internal wrap, so on very narrow phones the tab
   row (esp. after the 2026-08-25 bigger-tabs change) pushes past the
   viewport edge instead of dropping to its own line. Confirmed via
   scrollWidth measurement: 0px overflow at 430/393px, 33px at 360px,
   113px at 280px (Fold closed) — this single wrap fix resolves all of it. */
@media (max-width: 393px) {
  .app-nav-left { flex-wrap: wrap; row-gap: 8px; }
  .app-nav-tabs { flex-wrap: wrap; width: 100%; }
  .topbar-nav { flex-wrap: wrap; }
}

/* ============================================================
   Radius hierarchy — /gtsm-design tokens (8/5/12): small on interactive
   elements, medium on cards, large on the primary modal
   ============================================================ */
.auth-shell .auth-card, .auth-shell .field input, .auth-shell .btn, .auth-shell .password-toggle-btn {
  border-radius: 0; /* login stays sharp-cornered, like PulseBoard/HEARTBEAT — a
    deliberate exception, not the general radius applied to the rest of the app */
}