/* ═══════════════════════════════════════════════════════════════════════════
   Metrike Tracker — Operational Console
   Design system: refined, professional, minimalist.
   Inter (display + UI) + Geist Mono (data) — standardized on Inter for
   consistency with common web-app conventions (was Fraunces + Manrope).
   Light + Dark themes via [data-theme].
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Tokens — Light (default) ─────────────────────────────────────────────*/
:root {
  /* Brand */
  --brand:           #00ac69;
  --brand-dark:      #00865d;
  --brand-soft:      rgba(0, 172, 105, 0.10);
  --brand-line:      rgba(0, 172, 105, 0.32);

  /* Surfaces */
  --bg:              #fafafa;
  --surface:         #ffffff;
  --surface-2:       #f4f4f4;
  --surface-3:       #ebebeb;
  --line:            #e7e7e7;
  --line-2:          #d4d4d4;
  --line-3:          #a3a3a3;

  /* Text */
  --text-1:          #0a0a0a;
  --text-2:          #525252;
  --text-3:          #a3a3a3;
  --text-inverse:    #fafafa;

  /* Neutral graphite (secondary actions / contextual buttons) */
  --graphite:        #1f2328;
  --graphite-soft:   rgba(31, 35, 40, 0.06);

  /* Status */
  --ok:              #16a34a;
  --ok-soft:         rgba(22, 163, 74, 0.10);
  --warn:            #ca8a04;
  --warn-soft:       rgba(202, 138, 4, 0.10);
  --err:             #dc2626;
  --err-soft:        rgba(220, 38, 38, 0.10);
  --info:            #2563eb;
  --info-soft:       rgba(37, 99, 235, 0.10);

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 10px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04);

  /* Radius — sharp, technical */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* Type families — one font (Inter) for both display and UI text; distinct
     variables kept so call sites (e.g. var(--font-display)) don't need to
     change if the two ever need to diverge again. */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Spacing (8-pt grid) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur-mid:  220ms;
  --dur-slow: 420ms;

  /* Layout */
  --sidebar-w: 264px;
  --topbar-h:  56px;
  --content-max: 1180px;
}

/* ─── Tokens — Dark ────────────────────────────────────────────────────────*/
[data-theme="dark"] {
  --brand:           #00d889;
  --brand-dark:      #00ac69;
  --brand-soft:      rgba(0, 216, 137, 0.12);
  --brand-line:      rgba(0, 216, 137, 0.40);

  --bg:              #0b0c0d;
  --surface:         #121315;
  --surface-2:       #1a1c1f;
  --surface-3:       #232629;
  --line:            #26292d;
  --line-2:          #353a40;
  --line-3:          #5a6168;

  --text-1:          #f5f5f5;
  --text-2:          #a3a3a3;
  --text-3:          #737373;
  --text-inverse:    #0a0a0a;

  --graphite:        #d4d4d4;
  --graphite-soft:   rgba(212, 212, 212, 0.06);

  --ok:              #22c55e;
  --ok-soft:         rgba(34, 197, 94, 0.10);
  --warn:            #eab308;
  --warn-soft:       rgba(234, 179, 8, 0.10);
  --err:             #ef4444;
  --err-soft:        rgba(239, 68, 68, 0.10);
  --info:            #3b82f6;
  --info-soft:       rgba(59, 130, 246, 0.10);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 10px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.20);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.50), 0 4px 8px rgba(0,0,0,0.20);
}

/* ─── Reset + base ────────────────────────────────────────────────────────*/
* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss03', 'ss05';
}

::selection { background: var(--brand); color: #fff; }

a { color: var(--text-1); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--brand); }

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; }
p { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-8) 0; }

code, kbd, samp, pre { font-family: var(--font-mono); }

/* ─── Layout shell ────────────────────────────────────────────────────────*/
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

@media (max-width: 920px) {
  .shell { grid-template-columns: 1fr; }
  .shell .sidebar {
    position: static; height: auto;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
}

/* ─── Sidebar ─────────────────────────────────────────────────────────────*/
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: var(--sp-6) 0;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-6) var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.sidebar__brand-mark {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1;
  text-decoration: none;
}
.sidebar__brand-mark img { max-width: 100%; } /* tamanho: .brand-logo (web-metrike) */
.sidebar__brand-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--text-1);
  line-height: 1;
}
.sidebar__brand-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 3px;
  display: block;
}

.sidebar__org {
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.sidebar__org-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-2);
}

.sidebar__nav {
  flex: 1;
  padding: var(--sp-4) 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.sidebar__section {
  margin: var(--sp-4) 0 var(--sp-1);
  padding: 0 var(--sp-6);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
}
.sidebar__section:first-child { margin-top: 0; }

.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 9px var(--sp-6);
  margin: 0 var(--sp-3) 0 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  border-left: 2px solid transparent;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.sidebar__link:hover {
  color: var(--text-1);
  background: var(--surface-2);
}
.sidebar__link.is-active {
  color: var(--text-1);
  background: var(--brand-soft);
  border-left-color: var(--brand);
  font-weight: 600;
}
.sidebar__link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--text-3);
  transition: color var(--dur-fast) var(--ease-out);
}
.sidebar__link:hover .sidebar__link-icon { color: var(--text-1); }
.sidebar__link.is-active .sidebar__link-icon { color: var(--brand); }
.sidebar__link-cta {
  background: var(--brand);
  color: #fff;
  border-left-color: transparent;
  margin: var(--sp-2) var(--sp-4);
  padding: 10px var(--sp-4);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.sidebar__link-cta:hover {
  background: var(--brand-dark);
  color: #fff;
}
.sidebar__link-cta.is-active {
  background: var(--brand-dark);
  color: #fff;
  border-left-color: transparent;
}
.sidebar__link-cta .sidebar__link-icon { color: #fff; }
.sidebar__link-cta:hover .sidebar__link-icon { color: #fff; }

.sidebar__foot {
  border-top: 1px solid var(--line);
  padding: var(--sp-4) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
/* sidebar__user / __avatar / __user-text / __logout removed —
   the user chip + logout button live in the topbar now (.topbar__user). */

.sidebar__build {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar__build-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  margin-right: var(--sp-2);
  box-shadow: 0 0 0 3px var(--ok-soft);
}

/* ─── Theme toggle ────────────────────────────────────────────────────────*/
.theme-toggle {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-2);
  transition: all var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover {
  color: var(--text-1);
  border-color: var(--line-2);
}
.theme-toggle .material-icons-outlined { font-size: 16px; }
[data-theme="light"] .theme-toggle .icon-dark { display: inline-flex; }
[data-theme="light"] .theme-toggle .icon-light { display: none; }
[data-theme="dark"]  .theme-toggle .icon-dark { display: none; }
[data-theme="dark"]  .theme-toggle .icon-light { display: inline-flex; }

/* ─── Topbar ──────────────────────────────────────────────────────────────*/
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-8);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
}
.topbar__crumbs {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  flex: 1;
}
.topbar__crumbs a { color: var(--text-2); }
.topbar__crumbs a:hover { color: var(--text-1); }
.topbar__crumbs .crumb-sep {
  color: var(--text-3);
  font-size: 11px;
}
.topbar__crumbs .crumb-current {
  color: var(--text-1);
  font-weight: 600;
}
.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* ─── Topbar user chip + logout (moved out of the sidebar) ───────────────*/
.topbar__user {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 4px 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  transition: border-color 140ms ease, background 140ms ease;
}
.topbar__user:hover { border-color: var(--line-2); background: var(--surface); }
.topbar__user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.topbar__user-text {
  display: flex; flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.topbar__user-name {
  font-size: 12.5px; color: var(--text-1); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 160px;
}
.topbar__user-meta {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 160px;
}
.topbar__user-logout {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.topbar__user-logout .material-icons-outlined { font-size: 16px; }
.topbar__user-logout:hover {
  color: var(--err);
  border-color: var(--err);
  background: var(--err-soft);
}
@media (max-width: 720px) {
  .topbar__user-text { display: none; }
  .topbar__user { padding: 4px; }
  /* Crumbs longos (nome do agregador + relatório) encolhem com reticências em vez de empurrar a página. */
  .topbar__crumbs { min-width: 0; overflow: hidden; }
  .topbar__crumbs > a, .topbar__crumbs > .crumb-current { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar__crumbs > .crumb-current { flex-shrink: 0; max-width: 45%; }
}

/* ─── Main column ─────────────────────────────────────────────────────────*/
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.main__inner {
  padding: var(--sp-10) var(--sp-12) var(--sp-16);
  max-width: var(--content-max);
  width: 100%;
  animation: fadeUp 360ms var(--ease-out) both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 920px) {
  .main__inner { padding: var(--sp-6) var(--sp-5) var(--sp-12); }
}

/* ─── Page header ─────────────────────────────────────────────────────────*/
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-8);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-8);
}
.page-head__main { flex: 1; min-width: 0; }
.page-head__actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  flex-shrink: 0;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 600;
  margin-bottom: var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.eyebrow::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--brand);
}
.page-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4.4vw, 44px);
  line-height: 1.05;
  color: var(--text-1);
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144, "SOFT" 20;
  margin: 0;
}
.page-title__accent { color: var(--brand); }
.page-lede {
  color: var(--text-2);
  font-size: 15px;
  max-width: 62ch;
  margin-top: var(--sp-4);
  line-height: 1.6;
}
.page-lede code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-1);
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

/* ─── Section ─────────────────────────────────────────────────────────────*/
.section {
  margin-top: var(--sp-10);
}
.section + .section { border-top: 1px solid var(--line); padding-top: var(--sp-10); }
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.section__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text-1);
  font-variation-settings: "opsz" 60, "SOFT" 20;
}
.section__title-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: var(--sp-3);
}
.section__lede {
  color: var(--text-2);
  font-size: 14px;
  max-width: 60ch;
  margin-top: var(--sp-2);
}

/* ─── Cards ───────────────────────────────────────────────────────────────*/
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.card--hover:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-md);
}
.card--accent { border-left: 3px solid var(--brand); }
.card__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  margin-bottom: var(--sp-2);
  letter-spacing: -0.01em;
}
.card__desc {
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.6;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}

/* ─── Buttons ─────────────────────────────────────────────────────────────*/
/* O atributo `hidden` só vale como `display:none` na folha do navegador, que
   perde para QUALQUER regra de classe com `display`. Como .btn é inline-flex,
   .field é flex e .field-row é grid, um `<button class="btn" hidden>` ficava
   VISÍVEL — foi assim que o "Baixar ZIP" do modal de exportação apareceu
   desde o início com href="#", recebendo cliques que não faziam requisição
   nenhuma. Regra global porque o defeito é da mesma forma em todo lugar:
   `hidden` significa escondido, ponto. */
[hidden] { display: none !important; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  padding: 10px var(--sp-5);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover:not(:disabled) {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn:active:not(:disabled) { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn .material-icons-outlined { font-size: 16px; }

.btn--secondary {
  background: var(--surface);
  color: var(--text-1);
  border-color: var(--line-2);
}
.btn--secondary:hover:not(:disabled) {
  background: var(--surface);
  color: var(--text-1);
  border-color: var(--text-1);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--text-2);
  border-color: transparent;
}
.btn--ghost:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text-1);
  border-color: transparent;
  transform: none;
  box-shadow: none;
}

.btn--danger {
  background: transparent;
  color: var(--err);
  border-color: var(--err);
}
.btn--danger:hover:not(:disabled) {
  background: var(--err);
  color: #fff;
  border-color: var(--err);
}

.btn--sm {
  padding: 6px 12px;
  font-size: 12px;
}
.btn--lg {
  padding: 13px var(--sp-6);
  font-size: 14px;
}

.btn-group { display: inline-flex; gap: var(--sp-2); }

/* ─── Pills / Status badges ───────────────────────────────────────────────*/
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  color: var(--text-2);
  font-weight: 600;
  background: var(--surface);
  line-height: 1.4;
  white-space: nowrap;
}
.pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  flex-shrink: 0;
}
.pill--ok, .pill--active {
  color: var(--ok);
  border-color: var(--brand-line);
  background: var(--brand-soft);
}
.pill--ok .pill__dot, .pill--active .pill__dot {
  background: var(--brand);
}
.pill--active .pill__dot { animation: pulse 1.6s ease-in-out infinite; }
.pill--warn, .pill--paused {
  color: var(--warn);
  border-color: rgba(202,138,4,0.30);
  background: var(--warn-soft);
}
.pill--warn .pill__dot, .pill--paused .pill__dot { background: var(--warn); }
.pill--err, .pill--deleted {
  color: var(--err);
  border-color: rgba(220,38,38,0.30);
  background: var(--err-soft);
}
.pill--err .pill__dot, .pill--deleted .pill__dot { background: var(--err); }
.pill--draft {
  color: var(--text-3);
}
.pill--draft .pill__dot { background: var(--text-3); }
.pill--done {
  color: var(--text-2);
  border-color: var(--line-2);
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.25); }
}

/* ─── Forms ───────────────────────────────────────────────────────────────*/
.field { display: flex; flex-direction: column; }
.field + .field { margin-top: var(--sp-5); }

.field__label {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.field__label .optional {
  font-weight: 400;
  font-size: 11.5px;
  color: var(--text-3);
}
.field__hint {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-3);
  margin-top: var(--sp-2);
  line-height: 1.5;
}
.field__hint code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.field__error {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--err);
  margin-top: var(--sp-2);
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="url"], input[type="search"], input[type="datetime-local"], input[type="date"],
select, textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: 13.5px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
textarea { min-height: 100px; line-height: 1.55; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--surface-2);
  color: var(--text-3);
  cursor: not-allowed;
}

select {
  appearance: none;
  cursor: pointer;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%23737373' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 5l3 3 3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
[data-theme="dark"] select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%23a3a3a3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 5l3 3 3-3'/></svg>");
}

input[type="file"] {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-2);
  padding: 8px;
  border: 1px dashed var(--line-2);
  background: var(--surface-2);
}
input[type="file"]::file-selector-button {
  background: var(--graphite);
  color: var(--text-inverse);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-right: var(--sp-3);
}
[data-theme="dark"] input[type="file"]::file-selector-button {
  background: var(--text-1);
  color: var(--bg);
}

/* radio + checkbox visual */
.radio-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.radio-list--row { flex-direction: row; flex-wrap: wrap; }
.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  font-size: 13.5px;
  background: var(--surface);
}
.radio:hover { border-color: var(--line-3); }
.radio input { accent-color: var(--brand); width: auto; margin: 0; }
.radio:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.field-row {
  display: grid;
  gap: var(--sp-5);
  /* minmax(0, …) is the standard guard against content with a tall implicit
     min-width (datetime-local, file inputs) forcing siblings to collapse to
     near-zero width. Without it Chrome can shrink a <select> to ~10px. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.field-row > .field + .field { margin-top: 0; }
.field-row > .field { min-width: 0; }
.field-row--cols-1 { grid-template-columns: minmax(0, 1fr); }
.field-row--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .field-row, .field-row--cols-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ─── Tables ──────────────────────────────────────────────────────────────*/
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
table.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
table.table thead th {
  text-align: left;
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.table tbody td {
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line);
  color: var(--text-1);
  vertical-align: middle;
}
table.table tbody tr:last-child td { border-bottom: 0; }
table.table tbody tr.is-clickable { cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
table.table tbody tr.is-clickable:hover { background: var(--surface-2); }
table.table tbody tr.is-clickable:hover td .row-chevron { opacity: 1; transform: translateX(4px); }
table.table td a {
  color: var(--text-1);
  text-decoration: none;
  font-weight: 500;
}
table.table td a:hover { color: var(--brand); }
table.table .col-id {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
  width: 60px;
}
table.table .col-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
}
.row-chevron {
  display: inline-flex;
  opacity: 0;
  color: var(--text-3);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.row-chevron .material-icons-outlined { font-size: 16px; }
.col-actions { width: 1%; white-space: nowrap; text-align: right; }

/* Correlação analytics × cliques (Fase 2 Tarefa 6): total só soma origens de
   tráfego de verdade — nunca as janelas de atribuição de anúncio, que medem
   outra coisa (ver CorrelationReportService). As duas classes abaixo tornam
   essa divisão visível, não só textual. */
table.table tfoot tr.table__total td {
  border-top: 2px solid var(--line);
  background: var(--surface-2);
}
table.table--ad-windows {
  border: 1px dashed var(--brand);
  border-radius: var(--radius-md);
}
table.table--ad-windows thead th {
  background: color-mix(in srgb, var(--brand) 12%, var(--surface-2));
}

/* Empty row */
.table-empty {
  text-align: center;
  padding: var(--sp-12) var(--sp-6);
  color: var(--text-3);
  font-size: 14px;
}
.table-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  margin-bottom: var(--sp-3);
}
.table-empty__icon .material-icons-outlined { font-size: 24px; color: var(--text-3); }
.table-empty__cta { margin-top: var(--sp-5); }

/* ─── Stats / KPIs ────────────────────────────────────────────────────────*/
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  container-type: inline-size;
}
.stat.is-active,
.stat[aria-current="true"] {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 3px var(--brand-soft);
}
.stat__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
/* Número nunca quebra ("4.297.34 / 3"): a fonte encolhe com a largura do quadro, de 32px até 20px. */
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(20px, 15cqi, 32px);
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--text-1);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-variation-settings: "opsz" 96;
}
.stat__sub {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-2);
  margin-top: var(--sp-2);
}
.stat__sub--up { color: var(--ok); }
.stat__sub--down { color: var(--err); }

/* ─── Definition list (detail meta) ───────────────────────────────────────*/
dl.dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-2) var(--sp-5);
  margin: 0;
  font-size: 13.5px;
}
dl.dl dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  padding-top: 3px;
}
dl.dl dd {
  margin: 0;
  color: var(--text-1);
  word-break: break-word;
}
dl.dl dd.dd--mono { font-family: var(--font-mono); font-size: 12.5px; }

.detail-spread__aside-section + .detail-spread__aside-section {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}

/* ─── Detail header (compact strip) ───────────────────────────────────────*/
.detail-header {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.detail-header__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.detail-header__identity { flex: 1; min-width: 0; }
.detail-header__actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  flex-shrink: 0;
}
.detail-header__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  margin-top: var(--sp-4);
}
.detail-header__fact {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 12.5px;
  color: var(--text-2);
}
.detail-header__fact strong {
  color: var(--text-1);
  font-weight: 600;
}

/* ─── Detail panel (collapsible extra config) ─────────────────────────────*/
.detail-panel {
  margin-bottom: var(--sp-8);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.detail-panel__summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.detail-panel__summary::-webkit-details-marker { display: none; }
.detail-panel__chevron {
  font-size: 18px;
  transition: transform 0.15s ease;
}
.detail-panel[open] .detail-panel__chevron { transform: rotate(180deg); }
.detail-panel__body {
  padding: var(--sp-4);
  border-top: 1px solid var(--line);
}

/* ─── Code blocks ─────────────────────────────────────────────────────────*/
pre, .code {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-1);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  position: relative;
  margin: 0;
}
pre.is-accent, .code.is-accent { border-left: 3px solid var(--brand); }
pre.is-ok      { border-left: 3px solid var(--ok); }
pre.is-err     { border-left: 3px solid var(--err); color: var(--err); }
pre.is-warn    { border-left: 3px solid var(--warn); }
pre.is-empty {
  color: var(--text-3);
  background: transparent;
  border-style: dashed;
}

.copy-btn {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 600;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.copy-btn:hover { color: var(--brand); border-color: var(--brand-line); }
.copy-btn.is-copied { color: var(--brand); border-color: var(--brand-line); background: var(--brand-soft); }
.copy-btn .material-icons-outlined { font-size: 12px; }

/* ─── Empty states (large) ────────────────────────────────────────────────*/
.empty {
  text-align: center;
  padding: var(--sp-16) var(--sp-6);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  margin-bottom: var(--sp-4);
}
.empty__icon .material-icons-outlined {
  font-size: 28px;
  color: var(--text-3);
}
.empty__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-1);
  margin-bottom: var(--sp-2);
}
.empty__desc {
  color: var(--text-2);
  font-size: 14px;
  max-width: 38ch;
  margin: 0 auto var(--sp-5);
  line-height: 1.6;
}

/* ─── Searchable parent-entity combo (used by /new forms + wizard) ───────*/
.combo { position: relative; }
.combo__menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.06);
  max-height: 320px; overflow-y: auto; z-index: 20; display: none;
  padding: 4px 0;
}
[data-theme="dark"] .combo__menu {
  box-shadow: 0 16px 40px -10px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.4);
}
.combo__menu.is-open { display: block; }

.combo__item {
  padding: 10px 14px;
  margin: 0 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13.5px;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  transition: background 120ms ease, color 120ms ease;
}
.combo__item-icon {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.combo__item-icon .material-icons-outlined { font-size: 14px; }
.combo__item-text {
  display: flex; flex-direction: column; min-width: 0;
}
.combo__item-label {
  color: var(--text-1);
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.combo__item-meta {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  margin-top: 1px;
}
.combo__item-id {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  flex-shrink: 0;
}
.combo__item:hover,
.combo__item.is-focused {
  background: var(--brand-soft);
}
.combo__item.is-focused .combo__item-label { color: var(--brand); }

.combo__item-empty {
  padding: 18px;
  color: var(--text-3);
  font-size: 12.5px;
  font-style: italic;
  text-align: center;
}

.combo__create {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: 12px 14px;
  margin: 4px 4px 0;
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--brand-soft);
  color: var(--text-1);
  font-weight: 500;
  cursor: pointer;
  border-top: 1px dashed var(--brand-line);
  transition: background 120ms ease;
}
.combo__create:hover, .combo__create.is-focused {
  background: rgba(0, 172, 105, 0.16);
}
.combo__create-icon {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.combo__create-icon .material-icons-outlined { font-size: 16px; }
.combo__create-text strong { color: var(--brand); }
.combo__create-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 2px 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.combo__selected {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 12px;
  margin-top: 0;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-md);
  font-size: 13.5px;
  color: var(--text-1);
  animation: comboSelectedIn 240ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes comboSelectedIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.combo__selected-text { display: inline-flex; align-items: center; gap: 8px; }
.combo__selected button {
  background: var(--surface); border: 1px solid var(--line-2);
  cursor: pointer; color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px; border-radius: var(--radius-sm);
  transition: color 120ms ease, border-color 120ms ease;
}
.combo__selected button:hover { color: var(--err); border-color: var(--err); }

/* Inline-create panel — visually attached to the search input above it,
   not a separate floating block. Hard-merge with no top margin + a
   matching top border so it reads as "the input expanded downward". */
.inline-create {
  margin-top: -1px;            /* overlap the input's bottom border */
  padding: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--brand-line);
  border-top: 1px dashed var(--brand-line);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  display: none;
  animation: inlineCreateIn 220ms cubic-bezier(.2,.7,.2,1) both;
}
.inline-create.is-open { display: block; }
@keyframes inlineCreateIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* When the inline-create is open, square the search input's bottom corners
   and tint its border so the two read as a single connected unit. */
.combo:has(.inline-create.is-open) > [data-combo-search] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-color: var(--brand-line);
}
/* Tighten label→input distance inside inline-create — labels stick to
   their own input, not to the field below them. */
.inline-create .field {
  margin-bottom: 0;
}
.inline-create .field + .field,
.inline-create .field-row {
  margin-top: var(--sp-3);
}
.inline-create .field__label {
  margin-bottom: 4px;
}
/* "Criar e usar" + "Cancelar" buttons sit visually attached at the bottom
   of the inline panel, separated by a thin divider from the inputs above. */
.inline-create .u-flex {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--line);
}

/* ─── Tag selector / radio cards (creative kind etc.) ─────────────────────*/
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
}
.choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.choice__title { font-weight: 600; font-size: 14px; }
.choice__desc { font-size: 12px; color: var(--text-3); }
.choice:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.choice:has(input:checked) .choice__icon { background: var(--brand); color: #fff; }

/* ─── Toast ───────────────────────────────────────────────────────────────*/
.toast {
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-6);
  background: var(--graphite);
  color: var(--text-inverse);
  padding: 10px var(--sp-4);
  border-radius: var(--radius-md);
  font-size: 13px;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  animation: toastIn 220ms var(--ease-out);
}
[data-theme="dark"] .toast { background: var(--text-1); color: var(--bg); }
.toast--err  { background: var(--err); color: #fff; }
.toast--warn { background: var(--warn); color: #1a1300; }
[data-theme="dark"] .toast--err  { background: var(--err); color: #fff; }
[data-theme="dark"] .toast--warn { background: var(--warn); color: #1a1300; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Utils ───────────────────────────────────────────────────────────────*/
.u-mono   { font-family: var(--font-mono); }
.u-faint  { color: var(--text-3); }
.u-dim    { color: var(--text-2); }
.u-accent { color: var(--brand); }
.u-right  { text-align: right; }
.u-center { text-align: center; }
.u-flex   { display: flex; }
.u-gap-2  { gap: var(--sp-2); }
.u-gap-3  { gap: var(--sp-3); }
.u-gap-4  { gap: var(--sp-4); }
.u-mt-4   { margin-top: var(--sp-4); }
.u-mt-6   { margin-top: var(--sp-6); }
.u-mt-8   { margin-top: var(--sp-8); }
.u-mb-2   { margin-bottom: var(--sp-2); }
.u-mb-4   { margin-bottom: var(--sp-4); }
.u-mb-6   { margin-bottom: var(--sp-6); }

.u-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.u-hidden { display: none !important; }
.u-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─── Ajuda (x-ui.hint e [data-hint]): balão no hover/foco ───────────────
   O balão abre para baixo; .hint--end alinha pela direita (colunas da borda). */
.hint { position: relative; display: inline-flex; align-items: center; vertical-align: middle; margin-left: 4px; color: var(--text-3); cursor: help; border-radius: 50%; }
.hint .material-icons-outlined { font-size: 14px; }
.hint:hover, .hint:focus-visible { color: var(--brand); outline: none; }
.hint::after, .has-hint::after {
  content: attr(data-hint);
  position: absolute; top: calc(100% + 6px); left: -8px; z-index: 30;
  width: max-content; max-width: 300px; padding: 8px 10px;
  background: var(--text-1); color: var(--surface); border-radius: var(--radius-sm, 6px);
  font-family: var(--font-sans, inherit); font-size: 12px; font-weight: 400; line-height: 1.45;
  letter-spacing: 0; text-transform: none; white-space: normal; text-align: left;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  /* display:none e não visibility: escondido, o balão ainda contava na largura e criava rolagem lateral */
  display: none; pointer-events: none;
}
.hint--end::after { left: auto; right: -8px; }
.hint:hover::after, .hint:focus-visible::after,
.has-hint:hover::after, .has-hint:focus-visible::after { display: block; }
.has-hint { position: relative; }
/* Quadros: balão centralizado no quadro, para o da última coluna não sair da página. */
.has-hint::after { left: 50%; transform: translateX(-50%); width: 240px; }


/* ═══════════════════════════════════════════════════════════════════════
   Filter panel (admin list pages) + filter chips
   ═══════════════════════════════════════════════════════════════════════ */
.filter-panel { margin: var(--sp-5) 0 var(--sp-6); }
.filter-panel__bar {
  display: flex; gap: var(--sp-3); align-items: stretch;
  flex-wrap: nowrap;
}
.filter-panel__search {
  flex: 1 1 auto; max-width: 480px; min-width: 0;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-4); height: 40px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.filter-panel__search:focus-within {
  border-color: var(--brand-line);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.filter-panel__search > .material-icons-outlined {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--text-2);
  line-height: 1;
}
.filter-panel__search input {
  flex: 1 1 auto; min-width: 0; height: 100%;
  border: 0; outline: 0; background: transparent;
  font: inherit; color: var(--text-1);
}
.filter-panel__toggle {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 var(--sp-4);
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--text-1); font: inherit; cursor: pointer;
  white-space: nowrap;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.filter-panel__toggle:hover {
  border-color: var(--brand-line); color: var(--brand);
}
.filter-panel__toggle[aria-expanded="true"] {
  border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand);
}
.filter-panel__count {
  font-size: 11px; font-weight: 600; color: var(--brand);
  padding: 2px 8px; border-radius: 999px; background: var(--brand-soft);
}
.filter-panel__chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.filter-panel__chips:empty { margin: 0; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border: 1px solid var(--brand-line);
  border-radius: 999px; background: var(--brand-soft); color: var(--brand);
  font-size: 12px; cursor: pointer; font: inherit;
  transition: background 120ms ease, color 120ms ease;
}
.filter-chip:hover { background: var(--brand); color: #fff; }
.filter-chip strong { font-weight: 600; }
.filter-panel__body {
  margin-top: var(--sp-3); padding: var(--sp-5);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
}
.filter-panel__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4);
}
.filter-panel__grid .field__label {
  display: block; font-size: 11px; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px;
}
.filter-panel__grid input,
.filter-panel__grid select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--text-1); font: inherit;
  transition: border-color 120ms ease;
}
.filter-panel__grid input:focus,
.filter-panel__grid select:focus {
  outline: 0; border-color: var(--brand-line);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

/* ═══════════════════════════════════════════════════════════════════════
   Metrics date-range picker (campaign/zone/ad-item detail pages)
   ═══════════════════════════════════════════════════════════════════════ */
.metrics-range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.metrics-range .btn.is-active,
.metrics-range [data-range-toggle][aria-expanded="true"] {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: var(--brand-line);
}
/* Total | Display | VAST (spec 2026-10-05 §7.2) — reuses .metrics-range's row. */
.media-tabs { margin-top: calc(-1 * var(--sp-2)); }

.metrics-range__custom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-6);
}
.metrics-range__custom .field { margin-top: 0; }
.metrics-range__custom .field__date-input {
  min-width: 130px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23525252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 34px;
}

/* flatpickr calendar dropdown — match the app's tokens instead of the
   library's default light theme. */
.flatpickr-calendar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after { border-bottom-color: var(--line); }
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays { background: var(--surface); color: var(--text-1); }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { color: var(--text-1); }
span.flatpickr-weekday { color: var(--text-2); }
.flatpickr-day { color: var(--text-1); }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { color: var(--text-3); }
.flatpickr-day.today { border-color: var(--brand); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.inRange {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.flatpickr-day.inRange {
  background: var(--brand-soft);
  border-color: transparent;
  color: var(--text-1);
  box-shadow: none;
}
.flatpickr-day:hover { background: var(--surface-2); }

/* ═══════════════════════════════════════════════════════════════════════
   Command palette (⌘K)
   ═══════════════════════════════════════════════════════════════════════ */
.palette[open] {
  border: 0; padding: 0; background: transparent;
  max-width: min(720px, 92vw); width: 100%;
  margin: 12vh auto auto;
}
.palette::backdrop {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
}
.palette__form {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.4);
  overflow: hidden;
}
.palette__input-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.palette__input-row > .material-icons-outlined {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--text-2);
}
.palette__input-row input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 16px; color: var(--text-1);
}
.palette__input-row input::placeholder {
  color: var(--text-2);
}
.palette__kbd {
  flex-shrink: 0;
  font: 11px var(--font-mono); padding: 3px 8px;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--surface-2); color: var(--text-2);
}
.palette__results { max-height: 60vh; overflow-y: auto; }
.palette__hint {
  padding: var(--sp-8) var(--sp-6); text-align: center;
  color: var(--text-2); font-size: 13px; line-height: 1.6;
}
.palette__group { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.palette__group:last-child { border-bottom: 0; }
.palette__group-head {
  padding: var(--sp-2) var(--sp-5) var(--sp-1);
  font-size: 10px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .12em;
}
.palette__row {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-3) var(--sp-5);
  border: 0; background: transparent; cursor: pointer;
  font: inherit; text-align: left; color: var(--text-1);
  transition: background 60ms ease;
}
.palette__row:hover, .palette__row.is-focused {
  background: var(--brand-soft);
}
.palette__row.is-focused .palette__row-name { color: var(--brand); }
.palette__row-icon {
  flex-shrink: 0; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; background: var(--surface-2);
  color: var(--text-2);
}
.palette__row-icon .material-icons-outlined { font-size: 16px; }
.palette__row-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden;
}
.palette__row-name {
  font-weight: 500; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.palette__row-meta {
  font-size: 11px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.palette__row-id {
  flex-shrink: 0;
  font: 11px var(--font-mono); color: var(--text-2);
  padding: 2px 8px; border-radius: 4px; background: var(--surface-2);
}

.palette-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--text-2); font-size: 11px; cursor: pointer;
  font: inherit;
}
.palette-chip:hover { color: var(--brand); border-color: var(--brand-line); background: var(--brand-soft); }
.palette-chip kbd { font: 10px var(--font-mono); }

/* ═══════════════════════════════════════════════════════════════════════
   Tag install modal (conversion site tag / event tag)
   ═══════════════════════════════════════════════════════════════════════ */
.tag-modal[open] {
  border: 0; padding: 0; background: transparent;
  max-width: min(640px, 92vw); width: 100%;
  margin: 14vh auto auto;
  /* Teto de altura: sem isto um modal mais alto que a viewport empurra o
     rodapé (e o botão de confirmar) para fora da tela — atrás da barra de
     tarefas, sem nada para rolar. O modal de tags é curto e nunca encostou
     nisso; o de "Exportar tudo" tem quatro fieldsets e encosta.
     Sobram 86vh abaixo da margem de 14vh; 80 deixa respiro embaixo.
     dvh acompanha a barra do navegador no mobile; vh é o fallback. */
  max-height: 80vh;
  max-height: 80dvh;
}
.tag-modal::backdrop {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
}
.tag-modal__form {
  background: var(--bg);
  /* A cor TEM de vir junto com o fundo. base.blade.php declara
     <meta name="color-scheme" content="light dark">, então texto sem `color`
     explícito dentro de um <dialog> cai no CanvasText do navegador, que segue
     o SO — não o [data-theme] do app. Com o SO em dark e o app em light isso
     renderiza texto branco sobre este fundo claro, ilegível. Os modais antigos
     escapavam por acidente (todo texto deles tem color próprio); qualquer
     rótulo sem classe expõe o problema. */
  color: var(--text-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.4);
  overflow: hidden;
  /* Coluna flex para o corpo poder rolar sozinho dentro do teto de altura
     do .tag-modal[open], com cabeçalho e rodapé sempre à vista. */
  display: flex;
  flex-direction: column;
  max-height: 100%;
}
.tag-modal__head, .tag-modal__foot { flex: 0 0 auto; }
/* Só o corpo rola. min-height:0 é obrigatório: sem ele um filho flex se
   recusa a encolher abaixo do próprio conteúdo e o overflow nunca engata. */
.tag-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Mesmo respiro lateral do head/foot, para o conteúdo não encostar na
     borda quando a barra de rolagem aparecer. */
  padding: var(--sp-4) var(--sp-5);
}
.tag-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.tag-modal__title {
  margin: 0; font-size: 15px; font-weight: 600; color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tag-modal__close {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: transparent; border: 0; border-radius: var(--radius-sm);
  color: var(--text-2); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tag-modal__close:hover { background: var(--surface-2); color: var(--text-1); }
.tag-modal__close .material-icons-outlined { font-size: 18px; }
.tag-modal__hint {
  margin: 0; padding: var(--sp-4) var(--sp-5) 0;
  font-size: 13px; line-height: 1.6; color: var(--text-2);
}
.tag-modal__code {
  margin: var(--sp-3) var(--sp-5) 0;
  max-height: 40vh; overflow: auto;
}
.tag-modal__foot {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
}


/* A multi-select is a listbox, not a dropdown — drop the chevron affordance. */
select[multiple] { background-image: none; padding-right: 12px; }

/* ─── Lazy sections: skeletons (spec 2026-09-10, D4) ──────────────────────
   A skeleton is a promise: it uses the SAME wrappers as the body it stands
   in for (.stats/.stat, .card, .vf-tiles/.vf-tile, .vf-charts/.vf-chart,
   .geo-maps/.geo-map-card, .geo-tables/.geo-table-card) and only swaps the
   text for .sk bars. Heights come from these vars so the skeleton, the
   empty state and the error card all resolve to the same box. */
:root {
  --sk-chart-h: 280px;   /* = .chart-wrap */
  --sk-vast-h: 220px;    /* = inline height on the VAST .chart-wrap */
  --sk-map-h: 320px;     /* = .geo-map-canvas */
  --sk-table-h: 360px;   /* = .geo-table-scroll max-height */
}

.sk {
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--line);
  border-radius: 4px;
  height: var(--sk-h, 12px);
  width: var(--sk-w, 100%);
}
.sk::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--surface), transparent);
  animation: sk-shine 1.4s ease-in-out infinite;
}
@keyframes sk-shine { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } }

/* Text-shaped bars: same line-heights as the real .stat__label / value / sub. */
.sk--label { --sk-h: 10px; --sk-w: 55%; margin-bottom: var(--sp-3); }
.sk--value { --sk-h: 32px; --sk-w: 70%; }
.sk--sub   { --sk-h: 11px; --sk-w: 85%; margin-top: var(--sp-2); }
.sk--title { --sk-h: 13px; --sk-w: 40%; margin-bottom: var(--sp-3); }
.sk--row   { --sk-h: 12px; margin: var(--sp-2) 0; }
.sk--block { --sk-h: var(--sk-block-h, 120px); }

.section__body { position: relative; }

/* Error card and empty states take the body's promised height so the
   section never collapses on swap (D4.4). */
.section__body--error,
.section__empty {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: var(--sp-3);
  min-height: var(--sk-empty-h, 160px);
  text-align: center;
  font-size: 13px;
  color: var(--text-2);
}

/* ─── web-metrike: staging banner ─────────────────────────────────────────*/
.staging-banner { position: sticky; top: 0; z-index: 60; background: var(--warn); color: #1a1300; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; text-align: center; padding: 6px var(--sp-4); font-weight: 600; }

/* ─── web-metrike: logo claro/escuro ──────────────────────────────────────*/
.brand-logo { height: 44px; width: auto; display: block; }
.brand-logo--dark { display: none; }
[data-theme="dark"] .brand-logo--light { display: none; }
[data-theme="dark"] .brand-logo--dark { display: block; }
[data-theme="dark"] .brand-logo--plate { background: #fff; border-radius: var(--radius-md); padding: 4px 8px; }

/* ─── web-metrike: barra de entrega (pace) ────────────────────────────────*/
.pace { display: flex; align-items: center; gap: var(--sp-3); min-width: 180px; }
.pace__track { position: relative; flex: 1; height: 6px; background: var(--surface-3); border-radius: var(--radius-pill); }
.pace__fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-pill); background: var(--ok); }
.pace__fill--warn { background: var(--warn); }
.pace__fill--err { background: var(--err); }
.pace__mark { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--text-1); border-radius: 1px; opacity: .55; }
.pace__val { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
/* Entregue / contratado / esperado sob a barra (Monitoramento e hub). */
.pace-legend { display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-3); margin: 6px 0 0; font-size: 12px; line-height: 1.5; }
.pace-legend dt { color: var(--text-3); }
.pace-legend dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }

/* ─── Monitoramento: tabela larga sem quebrar nomes em 5 linhas ──────────
   Padding menor; o balão de ajuda precisa do overflow visível.
.table-wrap--monitoring { overflow: visible; }
.table-wrap--monitoring table.table thead th:first-child { border-top-left-radius: var(--radius-md); }
.table-wrap--monitoring table.table thead th:last-child { border-top-right-radius: var(--radius-md); }
   Layout fixo em porcentagem: a tabela nunca passa da largura da página (o min-width estourava a borda).
   Colunas sem largura (as do hub) dividem o que sobra. */
.main__inner:has(table.table--monitoring) { max-width: 1600px; }
table.table--monitoring { table-layout: fixed; }
table.table--monitoring thead th { white-space: normal; letter-spacing: 0.08em; vertical-align: bottom; }
table.table--monitoring thead th, table.table--monitoring tbody td { padding-left: var(--sp-3); padding-right: var(--sp-3); }
table.table--monitoring tbody td { vertical-align: top; overflow-wrap: anywhere; }
table.table--monitoring .mon-col-template { width: 19%; }
table.table--monitoring .mon-col-vehicle { width: 12%; }
table.table--monitoring .mon-col-campaign { width: 21%; }
table.table--monitoring .mon-col-delivery { width: 19%; }
table.table--monitoring .mon-col-delivery .pace { min-width: 0; }
table.table--monitoring .mon-col-view { width: 9%; }
table.table--monitoring .mon-col-status { width: 12%; }
table.table--monitoring .mon-col-alert { width: 8%; }
table.table--monitoring tbody .mon-col-nowrap { white-space: nowrap; overflow-wrap: normal; }
.stats--monitoring { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-3); }
.stats--monitoring .stat { padding: var(--sp-4); }
.stats--monitoring .stat__label { letter-spacing: 0.08em; }
.stats--monitoring .stat__value { font-size: 26px; }
.stats--monitoring .stat__label .material-icons-outlined { font-size: 13px; vertical-align: -2px; margin-left: 2px; }

/* ─── web-metrike: paginação ──────────────────────────────────────────────*/
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); font-size: 13px; color: var(--text-2); }
.pager__links { display: flex; gap: var(--sp-2); }

/* ─── web-metrike: região de lista (mk-filters.js) ───────────────────────*/
.list-region { transition: opacity 120ms ease; }
.list-region[aria-busy="true"] { opacity: .6; }
.list-region > .filter-panel__chips { margin: calc(-1 * var(--sp-3)) 0 var(--sp-4); }

/* ─── web-metrike: adp ────────────────────────────────────────────────────*/
.adp-narrow { max-width: 860px; margin: 0 auto; }
.adp-narrow--sm { max-width: 640px; }

/* Hub */
.adp-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); }
.adp-hub-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); padding: var(--sp-6); height: 100%; color: inherit; text-decoration: none; }
.adp-hub-card:hover { border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.adp-hub-card__icon { width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-2); }
.adp-hub-card__icon .material-icons-outlined { font-size: 30px; }
.adp-hub-card__title { font-size: 15px; font-weight: 600; margin: 0; color: var(--text-1); }
.adp-hub-card__desc { font-size: 13px; color: var(--text-2); margin: 0 0 var(--sp-2); }

/* Steps */
.adp-steps { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
.adp-step { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-3); }
.adp-step__badge { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); color: var(--text-2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.adp-step__title { font-size: 13px; font-weight: 600; }
.adp-step__sub { font-size: 12px; color: var(--text-3); }
.adp-step--active .adp-step__badge { background: var(--brand); color: #fff; }
.adp-step--active .adp-step__title { color: var(--text-1); }
.adp-step--active .adp-step__sub { color: var(--text-2); }
.adp-steps__sep { color: var(--text-3); }

/* Notices (inline error / info / warning) */
.adp-notice { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--radius-md); font-size: 13px; margin-bottom: var(--sp-4); background: var(--surface-2); color: var(--text-1); }
.adp-notice ul { margin: 0; padding-left: var(--sp-5); }
.adp-notice--err { border-color: var(--err); background: var(--err-soft); }
.adp-notice--info { border-color: var(--info); background: var(--info-soft); }
.adp-notice--warn { border-color: var(--warn); background: var(--warn-soft); }
.adp-notice--ok { border-color: var(--ok); background: var(--ok-soft); }
.adp-notice .material-icons-outlined { font-size: 18px; }

/* Dropzone */
.adp-dropzone { display: block; border: 2px dashed var(--brand-line); border-radius: var(--radius-lg); background: var(--brand-soft); cursor: pointer; transition: border-color var(--dur-mid), background var(--dur-mid); margin-bottom: var(--sp-4); }
.adp-dropzone:hover, .adp-dropzone.drag-over { border-color: var(--brand); }
.adp-dropzone.has-file { border-style: solid; border-color: var(--brand); }
.adp-dropzone__input { display: none; }
.adp-dropzone__inner { text-align: center; padding: var(--sp-10) var(--sp-4); pointer-events: none; }
.adp-dropzone__inner .material-icons-outlined { font-size: 48px; color: var(--brand); margin-bottom: var(--sp-2); }
.adp-dropzone__title { font-weight: 600; margin-bottom: 4px; color: var(--text-1); }
.adp-dropzone__sub { font-size: 12px; color: var(--text-2); }

.adp-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.adp-head .material-icons-outlined { font-size: 32px; color: var(--brand); }
.adp-head__title { margin: 0; font-size: 16px; font-weight: 600; }
.adp-head__sub { font-size: 12px; color: var(--text-2); }
.adp-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.adp-actions--center { justify-content: center; }

/* Loading overlay / processing */
.adp-overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--bg) 96%, transparent); z-index: 9999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
.adp-overlay__content { max-width: 500px; padding: var(--sp-8); text-align: center; }
.adp-spinner { position: relative; width: 80px; height: 80px; margin: 0 auto var(--sp-6); }
.adp-spinner__ring { width: 80px; height: 80px; border: 4px solid var(--surface-3); border-top-color: var(--brand); border-right-color: var(--brand-dark); border-radius: 50%; animation: adp-spin 1s linear infinite; }
.adp-spinner .material-icons-outlined { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 32px; color: var(--brand); animation: adp-pulse 2s ease-in-out infinite; }
.adp-progress { height: 4px; background: var(--surface-3); border-radius: 4px; overflow: hidden; position: relative; max-width: 420px; margin: 0 auto var(--sp-4); }
.adp-progress::before { content: ''; position: absolute; top: 0; left: -40%; height: 100%; width: 40%; background: var(--brand); animation: adp-slide 1.5s ease-in-out infinite; }
.adp-progress--bar { height: 8px; }
.adp-progress--bar::before { display: none; }
.adp-progress__fill { height: 100%; width: 0%; background: var(--brand); transition: width 0.4s ease; }
@keyframes adp-spin { to { transform: rotate(360deg); } }
@keyframes adp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes adp-slide { 0% { left: -40%; } 100% { left: 100%; } }
.adp-status-card { padding: var(--sp-6); text-align: center; border-left: 3px solid var(--brand); }
.adp-status-card--err { border-left-color: var(--err); text-align: left; }
.adp-status-card h2 { margin: 0 0 var(--sp-2); font-size: 20px; }
.adp-status-card p { color: var(--text-2); margin: 0 0 var(--sp-4); }
.adp-meta { font-size: 12px; color: var(--text-2); }
.adp-meta--mt { margin-top: var(--sp-2); }
.adp-meta .material-icons-outlined { font-size: 14px; vertical-align: middle; }
.adp-fail { display: flex; align-items: flex-start; gap: var(--sp-3); }
.adp-fail > .material-icons-outlined { font-size: 32px; color: var(--err); }
.adp-fail__body { flex: 1; }
.adp-status-card__icon { font-size: 48px; color: var(--brand); }
.adp-actions--between { justify-content: space-between; }
.adp-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.adp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--text-1); font-size: 12.5px; font-weight: 500; }
.adp-chip small { color: var(--text-2); }
.adp-chip .material-icons-outlined { font-size: 14px; }
.adp-chip--warn { background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.adp-chip--ok { background: var(--brand-soft); }
.adp-ico-ok { color: var(--ok); vertical-align: middle; font-size: 18px; }
.adp-ico-warn { color: var(--warn); vertical-align: middle; font-size: 18px; }
.adp-resolve-row { padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.adp-resolve-row:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.adp-resolve-row__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.adp-resolve-row__state { display: flex; align-items: center; gap: var(--sp-2); padding-top: 22px; }
.adp-search-wrap { position: relative; }
.vehicle-search-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; background: var(--surface); border: 1px solid var(--line-2); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); max-height: 200px; overflow-y: auto; display: none; box-shadow: var(--shadow-md); }
.vehicle-search-results.show { display: block; }
.vehicle-search-result { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; font-size: 13px; }
.vehicle-search-result:hover { background: var(--brand-soft); }
.vehicle-search-result .source-tag { font-size: 10.5px; padding: 2px 6px; border-radius: var(--radius-sm); font-weight: 600; text-transform: uppercase; }
.source-local { background: var(--brand-soft); color: var(--brand-dark); }
.source-platform { background: var(--info-soft); color: var(--info); }
.adp-search-msg { padding: 8px 12px; font-size: 12px; color: var(--text-2); }
.adp-search-name { font-weight: 600; }
.adp-search-id { margin-left: auto; color: var(--text-2); }
.adp-search-meta { color: var(--text-2); }

/* preview: modo largo (sidebar oculta por padrão, seta na borda alterna) */
body.adp-preview-wide .shell { grid-template-columns: 1fr; }
body.adp-preview-wide .shell .sidebar { display: none; }
body.adp-preview-wide .main__inner { max-width: none; }
#adpSidebarToggle { position: fixed; top: 88px; left: var(--sidebar-w); z-index: 60; width: 26px; height: 56px; border: 0; background: var(--brand); color: #fff; border-radius: 0 10px 10px 0; box-shadow: var(--shadow-md); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: left var(--dur-mid) var(--ease-out); }
#adpSidebarToggle:hover { background: var(--brand-dark); }
body.adp-preview-wide #adpSidebarToggle { left: 0; }
@media (max-width: 920px) { #adpSidebarToggle { left: 0 !important; } }
.adp-ico-muted { color: var(--text-3); vertical-align: middle; font-size: 18px; }
.adp-card--warn { border-left: 3px solid var(--warn); margin-bottom: var(--sp-4); }
.adp-card--ai { border-left: 3px solid var(--brand); background: var(--brand-soft); margin-bottom: var(--sp-4); }
.adp-card-head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.adp-card-head__title { font-weight: 600; margin-bottom: 2px; }
.adp-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.adp-inline-form__grow { flex: 1; min-width: 280px; }
.adp-obs { margin: var(--sp-2) 0; padding-left: var(--sp-5); font-size: 13px; }
.adp-obs .material-icons-outlined { font-size: 14px; vertical-align: middle; }
.obs-warning { color: var(--warn); font-weight: 500; }
.adp-toolbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); border-left: 3px solid var(--brand); min-width: 0; }
.adp-toolbar__actions { margin-left: auto; display: flex; gap: var(--sp-2); }
.adp-stats { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.adp-stat { display: inline-flex; flex-direction: column; align-items: center; padding: 4px 12px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--line); min-width: 70px; }
.adp-stat__value { font-size: 17px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.adp-stat__label { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; }
.adp-stat--primary { background: var(--brand); border-color: transparent; }
.adp-stat--primary .adp-stat__value, .adp-stat--primary .adp-stat__label { color: #fff; }
.adp-stat--warn { background: var(--warn-soft); border-color: var(--warn); }
.adp-stat--warn .adp-stat__value, .adp-stat--warn .adp-stat__label { color: var(--warn); }
.adp-header-grid { display: grid; grid-template-columns: 4fr 3fr 2fr 2fr 1fr; gap: var(--sp-4); }
.adp-header-grid .field + .field { margin-top: 0; }
@media (max-width: 920px) { .adp-header-grid { grid-template-columns: minmax(0, 1fr); } }
.adp-rows-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.adp-rows-bar__bulk { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.adp-search { position: relative; max-width: 320px; flex: 1; min-width: 220px; }
.adp-search .material-icons-outlined { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--text-3); }
.adp-search input { width: 100%; padding-left: 32px; }
.adp-table-scroll { overflow-x: auto; max-width: 100%; }
.adp-rows-table { width: 100%; }
.adp-rows-table thead th { position: sticky; top: 0; z-index: 10; background: var(--surface-2); }
.adp-rows-table tbody tr.has-flags { background: var(--warn-soft); }
.adp-rows-table tbody tr.adp-row--err { background: var(--err-soft); }
.adp-rows-table tbody tr.has-ai-note { box-shadow: inset 3px 0 0 var(--brand); }
.adp-rows-table input[type="checkbox"] { accent-color: var(--brand); cursor: pointer; }
.adp-nowrap { white-space: nowrap; }
.adp-cell-url { max-width: 280px; }
.adp-cell-err { font-size: 12px; color: var(--err); margin-top: 4px; }
.adp-cell-control { font-size: 13px; padding: 4px 8px; width: 100%; }
.adp-col-xl, .adp-col-lg { display: none; }
@media (min-width: 992px) { .adp-col-lg { display: table-cell; } }
@media (min-width: 1200px) { .adp-col-xl { display: table-cell; } }
.adp-flag { display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; padding: 2px 6px; border-radius: var(--radius-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 2px; background: var(--surface-3); color: var(--text-1); }
.adp-flag--no_width_height { background: var(--err); color: #fff; }
.adp-flag--missing_dates { background: var(--warn); color: #fff; }
.adp-flag--missing_qty_leader { background: var(--warn-soft); color: var(--warn); }
.adp-flag--ai { background: var(--brand); color: #fff; cursor: help; }
.adp-flag .material-icons-outlined { font-size: 11px; }
.ai-note-text { color: var(--brand-dark); font-size: 11.5px; font-style: italic; line-height: 1.25; max-width: 180px; margin-top: 4px; }
.adp-icon-btn { padding: 2px 4px; }
.adp-icon-btn .material-icons-outlined { font-size: 17px; }
.adp-icon-btn--ok { color: var(--ok); }
.adp-foot-note { text-align: center; margin-top: var(--sp-3); }

/* Setup ADP (Task 11) */
.adp-narrow--lg { max-width: 1000px; }
.adp-actions--start { justify-content: flex-start; }
.adp-status-head { margin-bottom: var(--sp-4); }
.adp-status-head__title { margin: 0 0 2px; font-size: 18px; font-weight: 600; }
.adp-subtitle { font-size: 14px; font-weight: 600; margin: var(--sp-4) 0 var(--sp-2); }
.adp-subtitle--flush { margin: 0; font-size: 16px; }
.adp-ico-info { color: var(--info); vertical-align: middle; font-size: 18px; }
.adp-btn-block { width: 100%; justify-content: center; }
.adp-card-title { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); font-size: 14px; font-weight: 600; }
.adp-text { font-size: 13px; margin: 0 0 var(--sp-3); }
.adp-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.adp-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 920px) { .adp-grid-2, .adp-grid-3 { grid-template-columns: minmax(0, 1fr); } }
.adp-box { padding: var(--sp-4); border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--line); }
.adp-box__title { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; font-size: 13px; margin-bottom: var(--sp-2); }
.adp-list { margin: 0; padding-left: var(--sp-5); font-size: 13px; }
.adp-list li + li { margin-top: var(--sp-2); }
.adp-tile { text-align: center; padding: var(--sp-3); }
.adp-tile .material-icons-outlined { font-size: 30px; color: var(--text-3); }
.adp-tile__title { font-weight: 600; font-size: 13px; }
.adp-notice input[type="checkbox"] { margin-top: 3px; accent-color: var(--brand); }
.adp-select-sm { max-width: 260px; }
.adp-col-w220 { width: 220px; }
.adp-head--flush { margin-bottom: 0; }
.adp-ico-warn-lg { font-size: 28px; color: var(--warn); }
.adp-amb-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.adp-amb-head__type { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--warn); }
.adp-amb-head__count { margin-left: auto; }
.adp-radio { display: flex; align-items: flex-start; gap: var(--sp-2); padding: 4px 0; }
.adp-radio input[type="radio"] { margin-top: 4px; accent-color: var(--brand); }
.adp-radio label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: 13px; cursor: pointer; }
.adp-radio--create { margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px dashed var(--line-2); }
.adp-notice--block { flex-direction: column; align-items: stretch; }
.adp-notice__row { display: flex; align-items: flex-start; gap: var(--sp-2); }
.adp-notice__grow { flex: 1; min-width: 0; }
.adp-notice__grow .adp-meta { margin-top: 2px; }
.adp-child-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); border-radius: var(--radius-md); background: var(--surface-2); }
.adp-child-row__name { font-weight: 600; text-transform: capitalize; }
.adp-meta--err { color: var(--err); }
.u-inline { display: inline-block; }
.adp-card--ok { border-left: 3px solid var(--brand); margin-bottom: var(--sp-4); }
.adp-card-title--muted { color: var(--text-2); }
.adp-card-title .material-icons-outlined { font-size: 18px; }
.adp-notice__sub { margin-top: var(--sp-1); font-size: 12px; color: var(--text-2); }
.adp-notice__divider { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line-2); }
.adp-box--display { border-left: 3px solid var(--info); }
.adp-box--vast { border-left: 3px solid #8e44ad; }
.adp-col-w40 { width: 40px; }
.adp-col-w90 { width: 90px; }
.adp-kind { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 10.5px; font-weight: 600; color: #fff; background: var(--text-3); }
.adp-kind--display { background: var(--info); }
.adp-kind--vast { background: #8e44ad; }
.adp-upper { font-size: 11px; font-weight: 700; text-transform: uppercase; }
.adp-stat__ok { font-size: 11px; color: var(--ok); }
.adp-notice--spread { justify-content: space-between; }
.adp-select-md { max-width: 420px; }
.adp-format-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.format-option { cursor: pointer; }
.format-card { border: 2px solid var(--line); border-radius: var(--radius-lg); min-width: 130px; padding: var(--sp-3); text-align: center; transition: border-color var(--dur-fast), background var(--dur-fast); }
.format-card .material-icons-outlined { font-size: 24px; color: var(--text-3); }
.format-card__title { font-weight: 600; font-size: 13px; }
.format-option:hover .format-card { border-color: var(--brand); background: var(--brand-soft); }
.format-option.selected .format-card { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px var(--brand-line); }
.format-option.selected .format-card .material-icons-outlined { color: var(--brand); }
.adp-tree { margin: var(--sp-2) 0 0; padding: 0; background: transparent; border: 0; font-size: 12px; color: var(--text-2); }
.adp-col-w100 { width: 100px; }
.adp-col-w110 { width: 110px; }
.adp-col-w130 { width: 130px; }
.card--flush { padding: 0; }
.adp-card--info { border-left: 3px solid var(--info); margin-bottom: var(--sp-4); }
.adp-card--err { border-left: 3px solid var(--err); margin-bottom: var(--sp-4); }
.adp-card-title--err { color: var(--err); }
.adp-card-title--warn { color: var(--warn); }
.adp-card-title--info { color: var(--info); }
.adp-list--err { color: var(--err); }
.adp-list--warn { color: var(--warn); }
.adp-collapse { padding: 0; }
.adp-collapse__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); cursor: pointer; list-style: none; }
.adp-collapse__head::-webkit-details-marker { display: none; }
.adp-collapse__head .adp-card-title { margin: 0; }
.adp-collapse[open] .adp-collapse__chevron { transform: rotate(180deg); }
.adp-running { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-4); font-size: 13px; }
.adp-spin-sm { width: 18px; height: 18px; border: 2px solid var(--surface-3); border-top-color: var(--brand); border-radius: 50%; animation: adp-spin 1s linear infinite; flex-shrink: 0; }
.adp-tone { font-size: 32px; }
.adp-tone--ok { color: var(--ok); }
.adp-tone--info { color: var(--info); }
.adp-tone--warn { color: var(--warn); }
.adp-tone--err { color: var(--err); }
.adp-tone--muted { color: var(--text-3); }
.adp-tone-bg--ok { background: var(--ok); }
.adp-tone-bg--info { background: var(--info); }
.adp-tone-bg--warn { background: var(--warn); }
.adp-tone-bg--err { background: var(--err); }
.adp-tone-bg--muted { background: var(--text-3); }
.adp-progress--full { max-width: none; margin: var(--sp-1) 0 var(--sp-4); }
.adp-subtitle--err { color: var(--err); }

/* Substituir criativos: confirmação (rc-*) */
.adp-narrow--xl { max-width: 1280px; }
.adp-card--ai .adp-head--flush { margin-bottom: 0; }
.rc-group { margin-bottom: var(--sp-4); }
.rc-group.is-blocked { border-color: var(--err); }
.rc-group.is-unmatched { border-color: var(--warn); }
.rc-group__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.rc-tag { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--text-1); font-size: 11.5px; font-weight: 600; }
.rc-label { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
.rc-select { width: 100%; margin-top: var(--sp-2); font-size: 13px; }
.rc-cell-file { min-width: 260px; }
.rc-cell-file .rc-select { margin-top: 0; }
.rc-toggle { margin-top: var(--sp-3); font-size: 13px; }
.rc-toggle a { display: inline-flex; align-items: center; gap: 4px; }
.rc-toggle .material-icons-outlined { font-size: 18px; }
.rc-items-box { margin-top: var(--sp-2); }
.rc-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: start; }
@media (max-width: 768px) { .rc-pair { grid-template-columns: 1fr; } .rc-arrow { transform: rotate(90deg); justify-self: center; } }
.rc-slot { background: repeating-conic-gradient(var(--surface-3) 0% 25%, var(--surface) 0% 50%) 50% / 16px 16px; border: 1px solid var(--line); border-radius: var(--radius-md);
           height: 200px; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: zoom-in; position: relative; }
.rc-slot.is-empty { cursor: default; background: var(--surface-2); color: var(--text-2); font-size: 13px; text-align: center; padding: 12px; }
.rc-slot img, .rc-slot video { max-width: 100%; max-height: 100%; object-fit: contain; }
.rc-slot .rc-frame-wrap { position: relative; overflow: hidden; pointer-events: none; }
.rc-slot .rc-frame-wrap iframe { border: 0; transform-origin: 0 0; position: absolute; top: 0; left: 0; background: #fff; }
.rc-caption { font-size: 12px; color: var(--text-2); margin-top: 4px; word-break: break-all; }
.rc-arrow { align-self: center; color: var(--brand); font-size: 32px; }
.rc-badge { font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-pill); }
.rc-badge--end { margin-left: auto; }
.rc-ok { background: var(--ok-soft); color: var(--ok); }
.rc-warn { background: var(--warn-soft); color: var(--warn); }
.rc-bad { background: var(--err-soft); color: var(--err); }
.rc-skip { background: var(--surface-3); color: var(--text-2); }
.rc-unused-list { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.rc-unused { width: 160px; }
.rc-unused .rc-slot { height: 110px; }
.rc-zoom { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.rc-zoom[hidden] { display: none; }
.rc-zoom-box { background: var(--surface); border-radius: var(--radius-lg); padding: 16px; max-width: 95vw; max-height: 92vh; overflow: auto; }
.rc-zoom-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-2); font-size: 13px; }
.rc-zoom-box iframe { border: 0; background: #fff; display: block; }
.rc-zoom-box img, .rc-zoom-box video { display: block; max-width: 90vw; }
.rc-items td, .rc-items th { font-size: 12.5px; }
.rc-check { accent-color: var(--brand); }
.rc-sticky { position: sticky; bottom: 0; z-index: 5; }
.rc-sticky__row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.rc-sticky__summary { flex: 1; font-size: 13px; }
.adp-meta--warn { color: var(--warn); }
.adp-approval__check { display: flex; gap: var(--sp-2); align-items: flex-start; font-weight: 600; cursor: pointer; }
.adp-approval__check input { margin-top: 3px; }

/* ─── web-metrike: hub do agregador ───────────────────────────────────────*/
.hub-filters { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end; }
.hub-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); }
.hub-card { display: block; color: inherit; text-decoration: none; }
.hub-card__text { font-size: 13px; }
.section__subtitle { margin: 0 0 var(--sp-3); font-size: 15px; font-weight: 600; color: var(--text-1); }
.table--compact th, .table--compact td { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.table tr.is-warning > td, tr[data-no-recipient] > td { background: var(--warn-soft); }
.table tr.is-warning > td:first-child, tr[data-no-recipient] > td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.hub-triggers { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.hub-trigger { display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap;
  padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-md); }
.hub-trigger .field { margin: 0; }
.hub-alert-counts { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); font-size: 13px; }
.hub-command-output pre { white-space: pre-wrap; font-family: var(--font-mono); font-size: 12px;
  max-height: 320px; overflow: auto; background: var(--surface-2); padding: var(--sp-3); border-radius: var(--radius-md); }

/* ─── web-metrike: relatório final ────────────────────────────────────────*/
.final-report-scroll { overflow-x: auto; }
.final-report-pace { min-width: 140px; }

/* Wizard do agregador */
ol.adp-steps { list-style: none; margin-top: 0; }
.adp-steps__sep { display: flex; color: var(--text-3); }
.adp-step__link { display: flex; align-items: center; gap: var(--sp-2); color: inherit; text-decoration: none; }
.adp-step[aria-current="step"] .adp-step__title { color: var(--text-1, inherit); }
.adp-step__link[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.wizard-actions { position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--surface-1, #fff); border-top: 1px solid var(--border, #e5e7eb); z-index: 10; }
.wizard-actions__spacer { flex: 1; }

/* ─── Setup do agregador: passo 1 ────────────────────────────────────────── */
.wizard-form { margin: var(--sp-5) 0; }
.setup-card + .setup-card { margin-top: var(--sp-5); }
.setup-card .field + .field { margin-top: var(--sp-5); }
.setup-search { margin-bottom: var(--sp-2); }
.setup-inline { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.setup-alerts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); }
.setup-alert { display: flex; align-items: flex-start; gap: var(--sp-2); }
.setup-alert input { width: auto; margin-top: 3px; }
.step2-group + .step2-group, .step2-extra { margin-top: var(--sp-5); }
.step2-group__title { font-size: var(--fs-md, 1rem); margin-bottom: var(--sp-2); }
.choice__logo { height: 28px; max-width: 120px; object-fit: contain; }
.choice input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.choice { position: relative; }

/* ─── Setup do agregador: passo 3 (cartões por campanha) ─────────────────── */
.s3-card + .s3-card { margin-top: var(--sp-4); }
.s3-card__summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); cursor: pointer; padding: var(--sp-3) var(--sp-4); }
.s3-card__name { font-weight: 600; }
.s3-card__meta { color: var(--text-2); font-size: var(--fs-sm, .875rem); }
.s3-card__meta--err { color: var(--err); }
.s3-card__body { padding: var(--sp-4); border-top: 1px solid var(--border, #e5e7eb); }
.s3-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.s3-fields .s3-zonest { grid-column: 1 / -1; }
.s3-inline { display: flex; gap: var(--sp-3); }
.s3-vehicle-filter { margin-bottom: var(--sp-2); }
.s3-sum-note { color: var(--text-2); }
.s3-chip { display: inline-block; padding: 1px 8px; margin-right: 4px; border-radius: 999px; background: var(--surface-2, #f3f4f6); font-size: var(--fs-sm, .8rem); }
.s3-zones td { vertical-align: top; }
/* Larguras fixas por coluna (a tag saiu para a linha de baixo); cada campo ocupa a célula inteira. */
.s3-zones { table-layout: fixed; }
.s3-zones .s3-col-zone { width: 25%; }
.s3-zones .s3-col-qtd { width: 10%; }
.s3-zones .s3-col-dims { width: 12%; }
.s3-zones .s3-col-line { width: 14%; }
.s3-zones .s3-col-desc { width: 25%; }
.s3-zones .s3-col-purchase { width: 14%; }
.s3-zones tr.s3-zone input, .s3-zones tr.s3-zone select { width: 100%; min-width: 0; }
.s3-zones tr.s3-zone td { overflow-wrap: anywhere; }
/* Linha da tag: logo abaixo da zona, sem a borda entre as duas, ocupando a tabela inteira. */
.s3-zones tr.s3-zone > td { border-bottom: 0; }
.s3-zones tr.s3-zone-tag > td { padding-top: 0; }
.s3-tag > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); cursor: pointer; }
.s3-tag__label { color: var(--text-2); font-size: var(--fs-sm, .875rem); }
.s3-tag__toggle { color: var(--accent, inherit); }
.s3-tag__body { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.s3-tag__opts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.s3-tag__opts select { width: auto; }
.s3-tag__body textarea { width: 100%; font-family: var(--font-mono, monospace); font-size: 12px; resize: vertical; white-space: pre-wrap; overflow-wrap: anywhere; }
.s3-click { display: flex; align-items: center; gap: var(--sp-2); }
.s3-click input { width: auto; }
.s3-empty { padding: var(--sp-3) 0; }

/* ─── Campanhas do agregador (templates.list) ─────────────────────────────*/
.bulk-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.bulk-bar__count { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); min-width: 110px; }
.bulk-bar__spacer { flex: 1; }
.row-detail > td { background: var(--surface-2); }
.row-detail[hidden] { display: none; }
.row-detail__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-6); padding: var(--sp-3) 0; }
@media (max-width: 900px) { .row-detail__grid { grid-template-columns: minmax(0, 1fr); } }
.period-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.period-line__name { font-weight: 500; min-width: 120px; }
.link-line { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.link-line__input { flex: 1; min-width: 0; }
.col-links { min-width: 150px; }
.col-links .link-cell { display: flex; justify-content: space-between; margin: 0 0 var(--sp-1); }
.link-cell { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
/* Listas largas (templates.list e telas de alerta): colunas curtas sem quebra; Nome e Cliente quebram
   com largura limitada. Seletores com table.table para vencer .table-wrap--scroll e afins. */
table.table--campaigns th, table.table--campaigns td, table.table--alert th, table.table--alert td { white-space: nowrap; }
table.table--campaigns .col-name, table.table--alert .col-name { white-space: normal; min-width: 140px; max-width: 200px; }
table.table--campaigns .col-client, table.table--alert .col-client { white-space: normal; min-width: 100px; max-width: 130px; }
table.table--campaigns thead th, table.table--campaigns tbody td,
table.table--alert thead th, table.table--alert tbody td { padding-left: var(--sp-2); padding-right: var(--sp-2); }
table.table--campaigns thead th, table.table--alert thead th { letter-spacing: 0.06em; white-space: normal; }
.table-wrap:has(> table.table--campaigns), .table-wrap:has(> table.table--alert) { overflow-x: auto; }
table.table--campaigns select { min-width: 72px; padding: 6px 22px 6px 8px; }
table.table--campaigns .col-links .link-cell { gap: var(--sp-1); }
table.table--campaigns .col-actions .btn { padding-left: var(--sp-2); padding-right: var(--sp-2); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; }
.kv dt { color: var(--text-2); font-size: 13px; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .kv { grid-template-columns: minmax(0, 1fr); gap: 0; } .kv dd { margin-bottom: var(--sp-2); } }

/* ─── ADP (telas antigas no shell) ────────────────────────────────────────*/
.table-wrap--scroll { overflow-x: auto; }
.table-wrap--scroll table.table { width: max-content; min-width: 100%; }
.table-wrap--scroll table.table tbody td { white-space: nowrap; }
table.table .adp-col-sticky {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--line);
}
table.table thead th.adp-col-sticky { background: var(--surface-2); z-index: 2; }
.adp-input {
  width: 100%;
  min-width: 90px;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  color: var(--text-1);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 6px);
}
.adp-input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.adp-input--num { text-align: right; }
.adp-card { margin-bottom: var(--sp-4); }
.adp-card__head { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: baseline; margin-bottom: var(--sp-4); }
.adp-card__head strong { font-size: 14px; }
.adp-vehicle-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; }
.adp-vehicle-pick label { min-width: 200px; }

/* ─── web-metrike: painéis ─── */
.report-page { max-width: 1200px; margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-8); }
.report-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.report-header__brand .brand-logo { height: 44px; max-height: 44px; width: auto; object-fit: contain; }
.report-header__body { flex: 1 1 240px; min-width: 0; }
.report-header__actions { display: flex; align-items: center; gap: var(--sp-2); }
.report-main { display: flex; flex-direction: column; gap: var(--sp-5); }
.report-section { min-width: 0; }

.report-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.report-filters > * { min-width: 0; }

/* Controle segmentado (abas Total / Display / VAST) */
.seg {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.seg > button, .seg > a {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 500;
  color: var(--text-2); border-radius: calc(var(--radius-md) - 2px);
}
.seg > button:hover, .seg > a:hover { color: var(--text-1); }
.seg > .is-active, .seg > [aria-selected="true"] {
  background: var(--surface); color: var(--text-1); box-shadow: 0 0 0 1px var(--line-2);
}

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); }
@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-page { padding: var(--sp-3); }
  .report-header__actions { margin-left: auto; }
}

.chart-box { position: relative; height: 280px; }
.chart-box canvas { max-width: 100%; }
.chart-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-3); font-size: 13px; }

@media print {
  .report-filters, [data-print-hide], .theme-toggle, .btn { display: none !important; }
  body { background: #fff; }
  .report-page { max-width: none; padding: 0; }
  .report-section, .card { break-inside: avoid; page-break-inside: avoid; }
  .card { box-shadow: none; }
}

/* Painel do agregador (reports/novo_dashboard) */
.dash { display: flex; flex-direction: column; gap: var(--sp-5); }
.dash-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.dash-top__logo { height: 44px; max-height: 44px; width: auto; object-fit: contain; }
.dash-top__body { flex: 1 1 280px; min-width: 0; }
.dash-top__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.dash-head .eyebrow { margin-bottom: var(--sp-2); }
.dash-head__title {
  font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.15; color: var(--text-1); margin: 0; overflow-wrap: anywhere;
}
.dash-head__meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); margin-top: var(--sp-2); font-size: 13.5px; color: var(--text-2); }
.dash-head__meta strong { color: var(--text-1); font-weight: 600; }

.dash-filters .field { flex: 0 1 170px; }
.dash-filters .field + .field { margin-top: 0; }
.dash-filters .dash-filters__vehicle { flex: 1 1 220px; }
.dash-filters__actions { display: flex; align-items: center; gap: var(--sp-2); }
.dash-tabs { align-self: flex-start; }

.kpi-grid .stat__value { font-size: clamp(20px, 15cqi, 30px); }
.dash-stat-pace { margin-top: var(--sp-3); }
.dash-stat-pace .pace { min-width: 0; }

.dash-card { padding: var(--sp-5); min-width: 0; }
.dash-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.dash-card__head .card__desc { margin: 0; }
.dash-card__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.dash-chart { height: 320px; }

.dash-insights { display: flex; flex-direction: column; gap: var(--sp-3); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-3); }
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.dash-list li:last-child { border-bottom: 0; }
.dash-list li > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dash-list strong { font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.dash-list__sub { display: block; font-size: 12px; color: var(--text-3); }
.dash-bar { display: block; height: 6px; margin-top: 6px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.dash-bar > span { display: block; height: 100%; background: var(--brand); }
.dash-ok { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: 13.5px; color: var(--ok); }
.dash-alert { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--warn); border-radius: var(--radius-md); background: var(--warn-soft); color: var(--text-1); font-size: 13.5px; }

.dash-section { display: flex; flex-direction: column; gap: var(--sp-3); }
.dash-section__title { font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: -0.015em; color: var(--text-1); margin: var(--sp-3) 0 0; }
.dash-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.dash-map { height: 360px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); z-index: 0; }

.dash-footer { display: flex; flex-wrap: wrap; gap: var(--sp-6); padding: var(--sp-5); }
.dash-footer .eyebrow { margin-bottom: var(--sp-2); }
.dash-footer__links { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Tabela agrupada (veículo > placement > formato > dia) */
.dash-table table.table thead th, .dash-table table.table tbody td { padding: var(--sp-2) var(--sp-3); }
tr.mk-tree-hidden { display: none; }
.dash-tree {
  appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--sp-1); font: inherit; font-weight: 600; color: inherit; text-align: left;
}
.dash-tree .material-icons-outlined { font-size: 18px; color: var(--text-3); transition: transform var(--dur-fast) var(--ease-out); }
.dash-tree[aria-expanded="true"] .material-icons-outlined { transform: rotate(90deg); color: var(--brand); }
.dash-tree:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); }
.dash-tree-row--1 > td:first-child { padding-left: calc(var(--sp-3) + 20px); }
.dash-tree-row--2 > td:first-child { padding-left: calc(var(--sp-3) + 40px); }
.dash-tree-row--3 > td { color: var(--text-2); }
.dash-tree-row--3 > td:first-child { padding-left: calc(var(--sp-3) + 62px); }
.dash-tree-row--1 > td, .dash-tree-row--2 > td, .dash-tree-row--3 > td { background: var(--surface-2); }

/* mk-table: busca, ordenação e paginação no cliente */
.mk-table__bar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.mk-table__bar .mk-table__search { max-width: 320px; padding: 7px 10px; font-size: 13px; }
.mk-table__count, .mk-table__info { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); }
.mk-table__pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-3); }
.mk-table__pager[hidden] { display: none; }
table.table th.is-sortable { cursor: pointer; user-select: none; }
table.table th.is-sortable::after { content: "\2195"; margin-left: 4px; opacity: .35; }
table.table th[aria-sort="ascending"]::after { content: "\2191"; opacity: 1; }
table.table th[aria-sort="descending"]::after { content: "\2193"; opacity: 1; }

/* Seções sob demanda (x-ui.lazy-section): brand safety e localização */
.dash > .section.dash-lazy { margin-top: 0; padding-top: 0; border-top: 0; }
.dash-lazy .section__head { margin-bottom: var(--sp-3); }
.dash-lazy .section__title { font-size: 20px; }
.dash-lazy .section__body { --sk-empty-h: 240px; }
.dash-section__body, .metrike-insights__body { display: flex; flex-direction: column; gap: var(--sp-3); }
.dash-grid--rank { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.dash-rank td:first-child, .dash-rank th:first-child { width: 1%; }
.dash-note { margin: 0; font-size: 13px; }

@media (max-width: 860px) {
  .dash-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .dash-filters { flex-direction: column; align-items: stretch; }
  .dash-filters .field, .dash-filters .dash-filters__vehicle { flex: 1 1 auto; }
  .dash-chart { height: 260px; }
  .dash-map { height: 280px; }
  .mk-table__bar .mk-table__search { max-width: none; }
}
@media print {
  .dash-top__actions, .dash-filters, .mk-table__bar, .mk-table__pager, .dash-footer { display: none !important; }
  .dash-section { break-before: page; page-break-before: always; }
  .table-wrap--scroll { overflow: visible; }
  .dash-map { break-inside: avoid; }
}
.dash-split__table { min-width: 0; }
.mk-table__chip {
  appearance: none; cursor: pointer; border: 1px solid var(--brand-line); background: var(--brand-soft); color: var(--text-1);
  font: inherit; font-size: 12px; padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap;
}
.mk-table__chip[hidden] { display: none; }
.mk-table__export { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }
.mk-table__export .btn-group { align-items: center; }
.mk-table__export-label { font-size: 12px; color: var(--text-2); }
.mk-table__export-note { font-size: 12px; color: var(--err); }
.mk-table__export-note[data-busy] { color: var(--text-2); }
.mk-table__export-note:empty { display: none; }
tr.mk-table__empty[hidden] { display: none; }
@media print {
  /* VAST: a impressão leva todas as linhas (dias recolhidos inclusive) e esconde os controles da árvore. */
  .dash-table--print-all tr.mk-tree-hidden { display: table-row !important; }
  .dash-tree .material-icons-outlined { display: none !important; }
  .dash-tree { cursor: default; }
}

/* Painel da campanha (reports/campanha) e painel Metrike por veículo (reports/metrike/vehicle) */
.campanha-title { margin: 0 0 var(--sp-3); }
.dash-alert--info { border-color: var(--info); background: var(--info-soft); }
.dash-card .table-wrap + .section__subtitle { margin-top: var(--sp-4); }
.dash-card .chart-box + .table-wrap { margin-top: var(--sp-4); }
.campanha-periods { display: flex; flex-direction: column; gap: var(--sp-2); }
.campanha-periods__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.campanha-period {
  display: flex; flex-direction: column; gap: 2px; min-width: 160px;
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text-1); text-decoration: none; font-size: 13px;
}
.campanha-period:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.campanha-period.is-active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.campanha-period__name { font-weight: 600; }
.campanha-period__dates { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); }
.campanha-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.campanha-actions .card__desc { margin: 0; }
.purchase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--sp-3); }
.purchase-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); min-width: 0; }
.purchase-card--active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.purchase-card__top, .purchase-card__foot { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.purchase-card__foot { align-items: center; flex-wrap: wrap; }
.purchase-card__id { min-width: 0; }
.purchase-card__name { margin: 0 0 2px; font-size: 14px; font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
.purchase-card__meta { font-size: 12px; color: var(--text-2); }
.purchase-card__pct { font-family: var(--font-mono); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-1); white-space: nowrap; }
.purchase-card__bar { height: 6px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.purchase-card__bar > span { display: block; height: 100%; background: var(--brand); }
.purchase-card__selected { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ok); }
.purchase-card__selected .material-icons-outlined, .purchase-card__action .material-icons-outlined { font-size: 16px; }
.purchase-card__action { align-self: flex-start; }
@media print {
  .purchase-card { break-inside: avoid; }
}
/* Cabeçalho de coluna numérica alinhado com os valores (o th padrão é à esquerda). */
table.table thead th.u-right { text-align: right; }

/* Área do cliente (layouts.client) */
.client-top__user { font-size: 13px; font-weight: 500; color: var(--text-2); }
.client-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-4); }
.client-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.client-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.client-card__name { font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: -0.01em; margin: 0; }
.client-card__period { color: var(--text-2); font-size: 13px; }
.client-card__delivery { display: flex; flex-direction: column; gap: var(--sp-1); }
.client-card__delivery .pace { min-width: 0; }
.client-card__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; }
.final-status--delivered { color: var(--ok, #227a35); font-weight: 700; }
.final-status--under { color: var(--err, #c62828); font-weight: 700; }
.final-status--not_informed { color: var(--text-3); font-weight: 700; }

/* Relatórios internos (reports/report*, spec SP5 §6): linha Total de cada bloco em destaque. */
.report-table tr.report-row--total > td { font-weight: 600; background: var(--surface-2); }
.report-table tr[data-parent] > td.report-cell--child { padding-left: calc(var(--sp-3) + 16px); }

/* Auditoria (admin/auditoria, spec trilha 2026-10-15 §8): data sem quebra, diff "de → para" com tom de remoção/inclusão, chave do contexto legível. */
.audit-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.audit-from { background: var(--err-soft); }
.audit-to { background: var(--ok-soft); }
.audit-ctx th[scope="row"] { text-align: left; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.section__subtitle.audit-sub { margin-top: var(--sp-6); }
.audit-hash { font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
.audit-statement { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--brand); background: var(--surface-2); border-radius: var(--radius-sm); }