/* Hallmark · shape: app screen · genre: modern-minimal · theme: Cobalt (deal manual pick, white requested)
 * nav: top bar, wordmark and client name, one quiet exit · signature: the lead ledger under the cost-per-lead figure · states: loading, empty, error, full
 * axes: light/grotesk-sans/cool · posture: restrained · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P2 H2 E2 S2 R2 V2 · weakest: S, the stat band could read as a KPI wall; kept to three loud figures and one quiet row */
/* Hallmark · waive 23: the lead count is the signature figure, the one accent at display size on the screen */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --color-paper: oklch(99.4% 0.002 250);
  --color-ok: oklch(52% 0.13 155);
  --color-error: oklch(53% 0.19 27);
  --color-error-wash: oklch(96.5% 0.02 27);
  --container: 1240px;
  --bar-h: 64px;
  --control-h: 40px;
}

/* ---------- shell ---------- */
.bar { position: sticky; top: 0; z-index: 10; background: color-mix(in oklab, var(--color-paper) 92%, transparent); backdrop-filter: blur(8px); border-bottom: var(--rule-hair) solid var(--color-rule); }
.bar__in { display: flex; align-items: center; gap: var(--space-md); min-height: var(--bar-h); }
.wordmark { display: flex; align-items: center; gap: var(--space-sm); font: 600 var(--text-lg)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; }
.wordmark__logo { display: block; width: auto; height: 28px; }
.wordmark__name { padding-left: var(--space-sm); border-left: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-md); color: var(--color-ink-2); }
.login__logo { display: block; width: auto; height: 44px; }
.bar__client { color: var(--color-muted); font-size: var(--text-sm); padding-left: var(--space-md); border-left: var(--rule-hair) solid var(--color-rule); }
.bar__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-sm); }
.link { color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.link:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }

main { padding-block: var(--space-xl) var(--space-3xl); }

/* ---------- keys (Cobalt keycaps) ---------- */
.key { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--control-h); padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-key-face); color: var(--color-ink); font: 500 var(--text-sm)/1 var(--font-display); text-decoration: none; cursor: pointer; box-shadow: var(--shadow-key); transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); white-space: nowrap; }
.key:hover { transform: translateY(-1px); }
.key:active { transform: translateY(2px); box-shadow: var(--shadow-key-press); }
.key:disabled, .key[aria-busy="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.key--primary { background: var(--color-accent); border-color: var(--color-accent-edge); color: var(--color-accent-ink); box-shadow: var(--shadow-key-accent); }
.key--primary:hover { background: var(--color-accent-deep); }
.key--quiet { box-shadow: none; background: transparent; border-color: var(--color-rule-2); }
.key--quiet:hover { background: var(--color-paper-2); transform: none; }
.key svg { width: 16px; height: 16px; }
.key[aria-busy="true"] svg { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* tray of options: keys on a sunken tray, the chosen one pressed */
.tray { display: inline-flex; flex-wrap: wrap; gap: var(--space-2xs); padding: var(--space-2xs); background: var(--color-paper-3); border-radius: calc(var(--radius-input) + 4px); border: var(--rule-hair) solid var(--color-rule); }
.tray .key { min-height: 34px; padding: 0 var(--space-sm); box-shadow: none; background: transparent; border-color: transparent; color: var(--color-ink-2); }
.tray .key:hover { background: var(--color-paper); transform: none; }
.tray .key[aria-pressed="true"] { background: var(--color-key-face); border-color: var(--color-rule-2); color: var(--color-ink); box-shadow: 0 1px 0 var(--color-key-edge), var(--shadow-card); }

/* ---------- inputs ---------- */
.field { display: grid; gap: var(--space-2xs); }
.field > span { font: 500 var(--text-sm)/1.3 var(--font-display); color: var(--color-muted); }
.input, select.input { min-height: var(--control-h); padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-key-face); color: var(--color-ink); font-size: var(--text-md); width: 100%; }
.input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -1px; }
.input::placeholder { color: var(--color-muted); }

/* ---------- page head ---------- */
.head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-md) var(--space-lg); margin-bottom: var(--space-lg); }
.head h1 { font-size: var(--text-2xl); }
.head__meta { margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.weeks { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-sm); margin: calc(-1 * var(--space-sm)) 0 var(--space-lg); padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.weeks .field { min-width: 13rem; }

/* ---------- figures ---------- */
.figures { display: grid; grid-template-columns: 1.3fr 1fr 1fr; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-key-face); box-shadow: var(--shadow-card); }
.fig { padding: var(--space-lg); min-width: 0; }
.fig + .fig { border-left: var(--rule-hair) solid var(--color-rule); }
.fig__label { font: 500 var(--text-sm)/1.3 var(--font-display); color: var(--color-muted); white-space: nowrap; }
.fig__value { margin-top: var(--space-xs); font: 600 2.75rem/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; color: var(--color-ink); }
.fig--lead .fig__value { font-size: 4rem; color: var(--color-accent); }
.fig__note { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- funnel ---------- */
.funnel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-key-face); box-shadow: var(--shadow-card); }
.funnel__step { display: grid; align-content: start; gap: var(--space-2xs); padding: var(--space-lg); min-width: 0; }
.funnel__label { font: 500 var(--text-sm)/1.3 var(--font-display); color: var(--color-muted); }
.funnel__value { font: 600 var(--text-3xl)/1.05 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; color: var(--color-ink); }
.funnel__step--end .funnel__value { color: var(--color-accent); }
.funnel__note { font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.funnel__rate { position: relative; display: grid; place-content: center; justify-items: center; gap: var(--space-3xs); padding: var(--space-md) var(--space-lg); background: var(--color-paper-2); border-inline: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); text-align: center; }
.funnel__pct { font: 600 var(--text-lg)/1 var(--font-display); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.funnel__rate::after { content: ""; position: absolute; right: -7px; top: 50%; width: 12px; height: 12px; background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule); border-right: var(--rule-hair) solid var(--color-rule); transform: translateY(-50%) rotate(45deg); z-index: 1; }

/* ---------- sections ---------- */
.block { margin-top: var(--space-2xl); }
.block__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); }
.block__head h2 { font-size: var(--text-xl); }
.block__head p { color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- charts (inline SVG) ---------- */
.charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.chart { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-md) var(--space-lg) var(--space-sm); background: var(--color-key-face); }
.chart__title { display: flex; justify-content: space-between; gap: var(--space-sm); font: 500 var(--text-sm)/1.3 var(--font-display); color: var(--color-muted); }
.chart__title b { color: var(--color-ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.chart svg { width: 100%; height: auto; margin-top: var(--space-sm); overflow: visible; }
.chart text { font: 400 11px var(--font-body); fill: var(--color-muted); font-variant-numeric: tabular-nums; }
.chart .grid { stroke: var(--color-rule); stroke-width: 1; }
.chart .bar { fill: var(--color-accent); }
.chart .bar:hover, .chart .bar.is-hot { fill: var(--color-accent-deep); }
.chart .line { fill: none; stroke: var(--color-ink-2); stroke-width: 2; stroke-linejoin: round; }
.chart .area { fill: color-mix(in oklab, var(--color-ink-2) 7%, transparent); }
.chart .hit { fill: transparent; }
.tip { position: fixed; z-index: 30; pointer-events: none; padding: var(--space-xs) var(--space-sm); background: var(--color-graphite); color: var(--color-graphite-ink); border-radius: var(--radius-input); font-size: var(--text-sm); line-height: 1.4; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity var(--dur-micro) var(--ease-out); }
.tip.is-on { opacity: 1; }
.tip span { color: var(--color-graphite-muted); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th { text-align: left; font: 500 var(--text-sm)/1.3 var(--font-display); color: var(--color-muted); padding: var(--space-sm) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule-2); white-space: nowrap; }
td { padding: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.tnum { font-variant-numeric: tabular-nums; white-space: nowrap; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
tbody tr { transition: background-color var(--dur-micro) var(--ease-out); }
tbody tr:hover { background: var(--color-paper-2); }
tr.is-total td { font-weight: 500; border-bottom: none; color: var(--color-ink-2); }
td .sub { display: block; color: var(--color-muted); font-size: var(--text-xs); }
.wa { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; }
.wa:hover { text-decoration-color: var(--color-accent); }
.muted { color: var(--color-muted); }
.leads-tools { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.leads-tools .input { width: 16rem; }
.more { margin-top: var(--space-md); }

/* ---------- states ---------- */
.skel { display: block; border-radius: 4px; background: linear-gradient(90deg, var(--color-paper-2), var(--color-paper-3), var(--color-paper-2)); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.is-loading .fig__value, .is-loading .is-loading .fig__value::before, .is-loading .empty { padding: var(--space-xl) 0; color: var(--color-muted); }
.empty strong { display: block; color: var(--color-ink); font: 600 var(--text-lg)/1.3 var(--font-display); margin-bottom: var(--space-2xs); }
.alert { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border: var(--rule-hair) solid color-mix(in oklab, var(--color-error) 35%, transparent); background: var(--color-error-wash); border-radius: var(--radius-card); margin-bottom: var(--space-lg); color: var(--color-ink); }
.note { padding: var(--space-sm) var(--space-md); border-left: 2px solid var(--color-accent); background: var(--color-accent-wash); font-size: var(--text-sm); margin-bottom: var(--space-lg); }

/* ---------- login ---------- */
.login { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-lg) var(--gutter); background: var(--color-paper-2); }
.login__card { width: min(100%, 24rem); padding: var(--space-xl); background: var(--color-key-face); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.login__card h1 { font-size: var(--text-2xl); margin: var(--space-xl) 0 var(--space-2xs); }
.login__card form { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.login__card .key { width: 100%; min-height: 44px; }
.form-error { color: var(--color-error); font-size: var(--text-sm); min-height: 1lh; }

/* ---------- admin ---------- */
.admin-grid { display: grid; gap: var(--space-lg); }
.panel { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-key-face); padding: var(--space-lg); }
.panel h2 { font-size: var(--text-xl); }
.form-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: var(--space-sm); align-items: end; margin-top: var(--space-md); }
.client-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.client-head h2 { font-size: var(--text-xl); }
dl.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-xs) var(--space-lg); margin: var(--space-md) 0 0; font-size: var(--text-sm); }
dl.kv dt { font-weight: 500; color: var(--color-ink-2); }
dl.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
code, .mono { font-family: var(--font-outlier); font-size: 0.86em; }
.copy { display: flex; gap: var(--space-xs); align-items: center; }
.copy code { flex: 1; min-width: 0; padding: var(--space-xs) var(--space-sm); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); overflow-x: auto; white-space: nowrap; }
details { margin-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-sm); }
summary { cursor: pointer; font: 500 var(--text-sm)/1.6 var(--font-display); color: var(--color-ink-2); }
summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ok { color: var(--color-ok); }
.bad { color: var(--color-error); }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  .figures { grid-template-columns: 1fr 1fr; }
  .fig--lead { grid-column: 1 / -1; border-bottom: var(--rule-hair) solid var(--color-rule); }
  .fig--lead + .fig { border-left: none; }
        .funnel { grid-template-columns: minmax(0, 1fr); }
  .funnel__step { padding: var(--space-md); }
  .funnel__value { font-size: var(--text-2xl); }
  .funnel__rate { grid-auto-flow: column; justify-content: start; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); border-inline: none; border-block: var(--rule-hair) solid var(--color-rule); }
  .funnel__rate::after { right: auto; left: 50%; top: auto; bottom: -7px; transform: translateX(-50%) rotate(135deg); }
  .form-row { grid-template-columns: 1fr 1fr; }
  .bar__client { display: none; }
  .wordmark__name { display: none; }
}
@media (max-width: 40rem) {
  .figures { grid-template-columns: minmax(0, 1fr); }
  .fig + .fig { border-left: none; border-top: var(--rule-hair) solid var(--color-rule); }
  .fig--lead { border-bottom: none; }
  .fig { padding: var(--space-md); }
  .fig__value { font-size: 2rem; }
  .tray .key { flex: 1 1 30%; }
  table.camps { min-width: 34rem; }
  .fig--lead .fig__value { font-size: 3rem; }
    .controls, .tray { width: 100%; }
  .leads-tools, .leads-tools .input { width: 100%; }
  .form-row { grid-template-columns: 1fr; }
  /* leads table restacks into labelled blocks */
  table.stack thead { display: none; }
  table.stack tr { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3xs) var(--space-sm); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
  table.stack td { border: none; padding: 0; }
  table.stack td[data-k="nome"] { font-weight: 500; order: -1; }
  table.stack td[data-k="data"] { text-align: right; color: var(--color-muted); }
  table.stack td[data-k="tel"] { grid-column: 1 / -1; }
  table.stack td[data-k="extra"] { grid-column: 1 / -1; color: var(--color-muted); }
  table.stack td[data-k="origem"] { grid-column: 1 / -1; color: var(--color-muted); font-size: var(--text-xs); }
}
@media (pointer: coarse) { .key, .input { min-height: 44px; } .tray .key { min-height: 40px; } }