/* DPH Radar Admin — ported 1:1 from the Savage Media "Purity-UI-inspired / Crextio"
   design system used across auto-targetolog (/opt/auto-targetolog). Same tokens,
   same component visual language, hand-authored as plain CSS (no Tailwind build step
   here) instead of utility classes. Light = warm cream + white glass cards.
   Dark = Savage brand deep green. Accent = brand emerald #027A5B. */

@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/manrope-cyrillic-ext-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/manrope-cyrillic-400.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/manrope-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/manrope-cyrillic-ext-500.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/manrope-cyrillic-500.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/manrope-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/manrope-cyrillic-ext-600.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/manrope-cyrillic-600.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/manrope-latin-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url(/static/fonts/manrope-cyrillic-ext-700.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url(/static/fonts/manrope-cyrillic-700.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url(/static/fonts/manrope-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 800; font-display: swap;
  src: url(/static/fonts/manrope-cyrillic-ext-800.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 800; font-display: swap;
  src: url(/static/fonts/manrope-cyrillic-800.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 800; font-display: swap;
  src: url(/static/fonts/manrope-latin-800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

/* ---------- Tokens (identical values to auto-targetolog's input.css) ---------- */
:root {
  --base: 243 240 233;        /* #F3F0E9 warm cream canvas */
  --panel: 255 255 255;
  --surface: 246 243 236;     /* #F6F3EC */
  --hair: 230 225 215;        /* #E6E1D7 */
  --ink: 17 24 22;            /* #111816 */
  --ink-muted: 92 104 99;
  --ink-dim: 150 158 152;
  --accent: 2 122 91;         /* #027A5B brand emerald */
  --accent-soft: 224 241 235;
  --dark: 5 37 32;            /* #052520 */
  --dark-2: 8 50 42;          /* #08322A */
  --on-dark: 244 241 234;
  --grad: linear-gradient(127deg, #027A5B 0%, #1B6A59 100%);
  --sig-green: 2 122 91;
  --sig-amber: 110 126 119;
  --sig-red: 209 75 70;
  --sig-blue: 27 106 89;
  --sig-gray: 150 174 166;
  --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px;
}
html.dark {
  --base: 5 37 32;
  --panel: 8 50 42;
  --surface: 11 60 50;
  --hair: 22 74 62;
  --ink: 243 243 243;
  --ink-muted: 150 186 174;
  --ink-dim: 95 130 118;
  --accent: 16 192 136;
  --accent-soft: 11 60 50;
  --dark: 3 28 24;
  --dark-2: 6 40 33;
  --on-dark: 243 243 243;
  --grad: linear-gradient(127deg, #027A5B 0%, #10C088 100%);
  --sig-green: 16 192 136;
  --sig-amber: 150 186 174;
  --sig-red: 240 110 105;
  --sig-blue: 27 158 122;
  --sig-gray: 95 130 118;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { background: rgb(var(--base)); color: rgb(var(--ink)); overflow-x: hidden; }
body {
  margin: 0;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  background: rgb(var(--base));
  color: rgb(var(--ink));
}
h1, h2, h3, h4, .font-display { font-family: 'Manrope', system-ui, sans-serif; letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: inherit; font-size: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid rgb(var(--accent)); outline-offset: 2px; border-radius: 6px;
}
::selection { background: rgb(var(--accent) / 0.18); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Ambient blob background (Crextio depth) ---------- */
.ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ambient span { position: absolute; border-radius: 9999px; }
.ambient .b1 { top: -12%; left: -8%; width: 42%; height: 48%; background: rgb(var(--accent) / .13); filter: blur(130px); }
.ambient .b2 { bottom: -16%; right: -10%; width: 46%; height: 50%; background: rgb(var(--dark) / .10); filter: blur(150px); }
.ambient .b3 { top: 42%; left: 58%; width: 32%; height: 32%; background: rgb(var(--accent) / .07); filter: blur(120px); }

.shell { min-height: 100dvh; display: flex; flex-direction: column; position: relative; z-index: 1; }

/* ---------- Top pill nav ---------- */
.topbar { position: sticky; top: 0; z-index: 30; padding: 12px 20px; background: rgb(var(--base) / .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.topbar-inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 16px; }
.site-logo { height: 24px; width: auto; display: block; flex-shrink: 0; }
html.dark .site-logo { filter: brightness(0) invert(1); }

.nav-rail { display: inline-flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px; background: rgb(var(--panel)); box-shadow: 0 2px 4px 0 rgba(40,34,20,.05), 0 14px 30px -12px rgba(40,34,20,.16); margin: 0 auto; }
html.dark .nav-rail { box-shadow: 0 14px 30px -12px rgba(0,0,0,.4); }
.nav-pill { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; white-space: nowrap; color: rgb(var(--ink-muted)); transition: color .15s ease, background-color .15s ease; cursor: pointer; min-height: 36px; }
.nav-pill:hover { color: rgb(var(--ink)); background: rgb(var(--surface)); }
.nav-pill.active { background: var(--grad); color: #fff; box-shadow: 0 6px 16px -4px rgb(var(--accent) / 0.45); }

.right-cluster { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }
.icon-btn { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgb(var(--panel)); border: 1px solid rgb(var(--hair)); transition: border-color .15s ease, color .15s ease; cursor: pointer; color: rgb(var(--ink)); flex-shrink: 0; }
.icon-btn:hover { border-color: rgb(var(--accent) / .5); color: rgb(var(--accent)); }
.avatar { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 700; background: var(--grad); flex-shrink: 0; }

.content { flex: 1; min-width: 0; padding: 24px 20px 64px; max-width: 1240px; margin: 0 auto; width: 100%; }

/* ---------- Page header ---------- */
.page-head { margin-bottom: 32px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.page-head .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--accent)); margin-bottom: 8px; }
.page-head h1 { font-size: 34px; font-weight: 400; letter-spacing: -0.025em; line-height: 1.04; margin: 0; }
.page-head .sub { font-size: 13px; color: rgb(var(--ink-muted)); margin-top: 10px; max-width: 640px; line-height: 1.6; }

/* ---------- Cards ---------- */
.card {
  background: rgba(255,255,255,0.62);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: 28px;
  box-shadow: 0 1px 2px 0 rgba(40,34,20,.04), 0 18px 44px -18px rgba(40,34,20,.16);
  border: 1px solid rgba(255,255,255,0.6);
  transition: box-shadow .25s ease;
  padding: 20px;
}
html.dark .card { background: rgb(var(--surface) / 0.88); box-shadow: 0 20px 45px -20px rgba(0,0,0,.6), inset 0 1px 0 0 rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); }
.card:hover { box-shadow: 0 2px 6px 0 rgba(40,34,20,.05), 0 24px 48px -16px rgba(40,34,20,.18); }
.card + .card { margin-top: 16px; }
.card h2 { font-size: 16px; font-weight: 700; margin: 0 0 16px 0; color: rgb(var(--ink)); }
.card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.card-row h2 { margin: 0; }

.grid { display: grid; gap: 16px; }
.grid-kpi { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- KPI stat cards ---------- */
.kpi { padding: 16px; }
.kpi .stat-chip { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgb(var(--accent) / .10); color: rgb(var(--accent)); margin-bottom: 12px; }
.kpi .value { font-family: 'Manrope', sans-serif; font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kpi .value.small { font-size: 18px; font-weight: 700; }
.kpi .caps { margin-top: 8px; }
.kpi .hint { font-size: 10px; color: rgb(var(--ink-dim)); margin-top: 2px; }

/* ---------- Caps / pills ---------- */
.caps { font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--ink-muted)); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; line-height: 16px; border: 1px solid rgb(var(--hair)); background: rgb(var(--surface)); color: rgb(var(--ink-muted)); }
.pill-dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; background: currentColor; }
.pill.ok { background: rgb(var(--sig-green) / .10); color: rgb(var(--sig-green)); border-color: rgb(var(--sig-green) / .3); }
.pill.warn { background: rgb(var(--sig-red) / .10); color: rgb(var(--sig-red)); border-color: rgb(var(--sig-red) / .3); }
.pill.ok .pill-dot { animation: pulse-dot 2.4s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .pill.ok .pill-dot { animation: none; } }

/* ---------- Funnel (health-bar language: thin rounded-full tracks) ---------- */
.funnel { display: flex; flex-direction: column; gap: 14px; }
.funnel-row { display: flex; align-items: center; gap: 14px; }
.funnel-label { width: 200px; flex-shrink: 0; font-size: 12.5px; color: rgb(var(--ink-muted)); font-weight: 600; }
.funnel-track { flex: 1; height: 6px; background: rgb(var(--surface)); border-radius: 999px; overflow: hidden; }
.funnel-fill { height: 100%; border-radius: 999px; background: rgb(var(--sig-gray)); transition: width .3s ease; }
.funnel-fill.drop { background: rgb(var(--sig-red)); }
.funnel-fill.ai { background: rgb(var(--sig-blue)); }
.funnel-fill.leads { background: rgb(var(--sig-green)); }
.funnel-value { width: 70px; text-align: right; flex-shrink: 0; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 10px 12px; }
th { color: rgb(var(--ink-muted)); font-weight: 600; font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.row { border-bottom: 1px solid rgb(var(--hair)); transition: background-color .12s ease; }
.row:hover { background: rgb(var(--surface) / .6); }
.empty-row td { color: rgb(var(--ink-dim)); font-style: italic; text-align: center; padding: 24px; }

/* ---------- Forms ---------- */
label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 8px; color: rgb(var(--ink)); }
.field { margin-bottom: 20px; }
.field .helper { font-size: 12px; color: rgb(var(--ink-muted)); margin-top: 8px; }
.input, input[type="text"], input[type="password"], textarea {
  width: 100%; background: rgb(var(--panel)); border: 1px solid rgb(var(--hair)); border-radius: 14px;
  padding: 10px 14px; color: rgb(var(--ink)); font-size: 14px; line-height: 20px; min-height: 44px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.input::placeholder, textarea::placeholder { color: rgb(var(--ink-dim)); }
.input:focus, input:focus, textarea:focus { outline: none; border-color: rgb(var(--accent)); box-shadow: 0 0 0 3px rgb(var(--accent) / .12); }
textarea { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; min-height: 220px; resize: vertical; line-height: 1.6; border-radius: 16px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: 14px; font-size: 13.5px; font-weight: 700; letter-spacing: 0.01em; transition: all .14s ease; border: 1px solid transparent; cursor: pointer; min-height: 44px; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 4px 12px 0 rgb(var(--accent) / .25); }
.btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn-secondary { background: rgb(var(--panel)); border: 1px solid rgb(var(--hair)); color: rgb(var(--ink)); }
.btn-secondary:hover { border-color: rgb(var(--accent) / .5); color: rgb(var(--accent)); }
.btn-danger { background: rgb(var(--sig-red) / .1); color: rgb(var(--sig-red)); border: 1px solid rgb(var(--sig-red) / .25); }
.btn-sm { padding: 8px 14px; font-size: 12.5px; min-height: 36px; border-radius: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Alerts ---------- */
.alert { padding: 16px; border-radius: 16px; margin-bottom: 20px; font-size: 13.5px; border: 1px solid transparent; line-height: 1.55; }
.alert-error { background: rgb(var(--sig-red) / .10); border-color: rgb(var(--sig-red) / .3); color: rgb(var(--sig-red)); }
.alert-success { background: rgb(var(--sig-green) / .10); border-color: rgb(var(--sig-green) / .3); color: rgb(var(--sig-green)); }
.alert-info { background: rgb(var(--surface)); border-color: rgb(var(--hair)); color: rgb(var(--ink-muted)); }

.footnote { font-size: 12px; color: rgb(var(--ink-muted)); margin-top: 8px; line-height: 1.6; }
.footnote code { font-family: ui-monospace, monospace; background: rgb(var(--surface)); border: 1px solid rgb(var(--hair)); padding: 1px 5px; border-radius: 6px; font-size: 11px; }

/* ---------- History list ---------- */
.history-list { display: flex; flex-direction: column; gap: 10px; }
.history-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: rgb(var(--surface)); border: 1px solid rgb(var(--hair)); border-radius: 16px; flex-wrap: wrap; }
.history-meta { font-size: 13px; }
.history-meta .ts { font-weight: 700; color: rgb(var(--ink)); }
.history-meta .who { color: rgb(var(--ink-muted)); }
.history-counts { font-size: 11.5px; color: rgb(var(--ink-dim)); margin-top: 3px; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 16px; position: relative; z-index: 1; }
.login-card {
  width: 100%; max-width: 380px; padding: 36px 32px;
  /* Opaque, not glass, and no entrance transform-animation here — the login
     form is the only page where interactive controls sit directly inside a
     .card, and blur+transform-animation together are a well-documented iOS
     Safari/WebKit bug category for touch hit-testing going stale after the
     animation settles (fields render fine but stop responding to taps). */
  background: rgb(var(--panel));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.login-brand { display: flex; align-items: center; justify-content: center; margin-bottom: 28px; }

/* ---------- Motion ---------- */
@keyframes floatIn { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.anim-in { opacity: 0; animation: floatIn .6s cubic-bezier(.16,1,.3,1) forwards; }
@media (prefers-reduced-motion: reduce) { .anim-in { opacity: 1; animation: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .nav-rail { display: none; }
  .mobile-nav { display: flex !important; }
  .content { padding: 16px; }
  .funnel-label { width: 130px; font-size: 11.5px; }
  .page-head h1 { font-size: 26px; }
}
@media (min-width: 861px) { .mobile-nav { display: none; } }
.mobile-nav { gap: 8px; overflow-x: auto; padding: 12px 20px 0; max-width: 1240px; margin: 0 auto; scrollbar-width: none; }
.mobile-nav::-webkit-scrollbar { display: none; }
@media (max-width: 480px) { .grid-kpi { grid-template-columns: 1fr 1fr; } }