/*
 * torvi.css — sistema de design do Torvi (camada sobre o Pico CSS 2.1.1).
 *
 * FONTE ÚNICA de tokens: todas as cores/espaçamentos/raios vivem nos tokens
 * --t-* abaixo; as variáveis do Pico são re-derivadas deles, então o tema
 * inteiro (Pico + componentes próprios) muda trocando SÓ os tokens.
 *
 * Dark mode: automático via prefers-color-scheme — o bloco dark redefine
 * apenas os tokens --t-*. Nenhum layout deve fixar data-theme.
 * Contraste alvo: WCAG AA (4.5:1 texto normal) nas duas paletas.
 */

/* ─── Tokens: paleta LIGHT (default) ─────────────────────────────────── */
:root {
  color-scheme: light dark;

  /* superfícies */
  --t-bg: #eef1f6;            /* fundo da aplicação */
  --t-surface: #ffffff;       /* cards, topbar */
  --t-surface-2: #f6f8fb;     /* headers de tabela, hover, inputs */
  --t-surface-3: #eaeef4;     /* pressed / trilhas */
  --t-border: #dde3ec;
  --t-border-strong: #c3cdda;

  /* texto */
  --t-text: #101828;          /* 16.7:1 sobre surface */
  --t-text-2: #46536a;        /* 7.6:1 */
  --t-text-3: #5d6b83;        /* 5.3:1 — muted ainda AA */

  /* marca */
  --t-brand: #0369a1;         /* 5.9:1 sobre branco */
  --t-brand-strong: #075985;
  --t-brand-soft: #e3f2fd;
  --t-brand-contrast: #ffffff;

  /* semânticas (texto/ícone AA sobre surface) */
  --t-success: #1a7f37;
  --t-warning: #9a6700;
  --t-danger: #c0392b;
  --t-danger-strong: #a93226;
  --t-info: var(--t-brand);

  /* fundos suaves das semânticas (badges, linhas de alerta) */
  --t-success-soft: #dcf3e3;
  --t-warning-soft: #fbf0d1;
  --t-danger-soft: #fde3df;
  --t-info-soft: #ddf0fb;
  --t-neutral-soft: #e8ecf2;

  /* texto sobre os fundos suaves */
  --t-on-success-soft: #11532a;
  --t-on-warning-soft: #6b4a00;
  --t-on-danger-soft: #86281c;
  --t-on-info-soft: #084e78;
  --t-on-neutral-soft: #3d4a60;

  /* geometria e efeitos */
  --t-radius: 10px;           /* cards */
  --t-radius-sm: 7px;         /* controles */
  --t-radius-xs: 5px;         /* badges, células */
  --t-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --t-shadow-lg: 0 4px 16px rgba(16, 24, 40, .10);
  --t-focus-ring: 0 0 0 3px color-mix(in srgb, var(--t-brand) 30%, transparent);

  /* tipografia */
  --t-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-fs-body: 0.9375rem;     /* 15px */
  --t-fs-sm: 0.8125rem;       /* 13px — tabelas, labels */
  --t-fs-xs: 0.6875rem;       /* 11px — overlines */

  /* densidade */
  --t-space: 1rem;
  --t-space-sm: 0.5rem;
  --t-cell-y: 0.5rem;         /* padding vertical de célula */
  --t-cell-x: 0.75rem;
}

/* ─── Tokens: paleta DARK (segue o dispositivo) ──────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --t-bg: #0c111c;
    --t-surface: #151c2c;
    --t-surface-2: #1b2436;
    --t-surface-3: #222e44;
    --t-border: #283349;
    --t-border-strong: #36445e;

    --t-text: #e8edf6;         /* 14.9:1 sobre surface */
    --t-text-2: #aab6ca;       /* 7.6:1 */
    --t-text-3: #8b99b0;       /* 5.2:1 */

    --t-brand: #4cc2ff;        /* links/acentos: 8.6:1 sobre surface */
    --t-brand-strong: #7dd3ff;
    --t-brand-soft: #14344a;
    --t-brand-contrast: #062338; /* texto de botão primário: 10:1 sobre #4cc2ff */

    --t-success: #4ade80;
    --t-warning: #fbbf24;
    --t-danger: #ff8a7a;
    --t-danger-strong: #ffa294;
    --t-info: var(--t-brand);

    --t-success-soft: #123324;
    --t-warning-soft: #3a2e10;
    --t-danger-soft: #3e2020;
    --t-info-soft: #12344a;
    --t-neutral-soft: #232e42;

    --t-on-success-soft: #86efac;
    --t-on-warning-soft: #fcd34d;
    --t-on-danger-soft: #ffb4a8;
    --t-on-info-soft: #93dcff;
    --t-on-neutral-soft: #b6c2d6;

    --t-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    --t-shadow-lg: 0 6px 20px rgba(0, 0, 0, .45);
  }
}

/* ─── Re-derivação do Pico a partir dos tokens ───────────────────────── */
:root,
:root:not([data-theme="light"]) {
  --pico-font-family: var(--t-font);
  --pico-font-size: 100%;
  --pico-line-height: 1.45;
  --pico-border-radius: var(--t-radius-sm);
  --pico-spacing: 0.875rem;
  --pico-block-spacing-vertical: 1rem;
  --pico-block-spacing-horizontal: 1rem;
  --pico-typography-spacing-vertical: 0.75rem;

  --pico-background-color: var(--t-bg);
  --pico-color: var(--t-text);
  --pico-muted-color: var(--t-text-3);
  --pico-muted-border-color: var(--t-border);
  --pico-h1-color: var(--t-text);
  --pico-h2-color: var(--t-text);
  --pico-h3-color: var(--t-text);
  --pico-h4-color: var(--t-text-2);
  --pico-h5-color: var(--t-text-2);
  --pico-h6-color: var(--t-text-2);

  --pico-primary: var(--t-brand);
  --pico-primary-background: var(--t-brand);
  --pico-primary-border: var(--t-brand);
  --pico-primary-underline: color-mix(in srgb, var(--t-brand) 40%, transparent);
  --pico-primary-hover: var(--t-brand-strong);
  --pico-primary-hover-background: var(--t-brand-strong);
  --pico-primary-hover-border: var(--t-brand-strong);
  --pico-primary-hover-underline: var(--t-brand-strong);
  --pico-primary-focus: color-mix(in srgb, var(--t-brand) 30%, transparent);
  --pico-primary-inverse: var(--t-brand-contrast);

  --pico-secondary: var(--t-text-2);
  --pico-secondary-background: var(--t-surface-3);
  --pico-secondary-border: var(--t-border-strong);
  --pico-secondary-hover: var(--t-text);
  --pico-secondary-hover-background: var(--t-border);
  --pico-secondary-hover-border: var(--t-border-strong);
  --pico-secondary-focus: color-mix(in srgb, var(--t-text-3) 25%, transparent);
  --pico-secondary-inverse: var(--t-text);

  --pico-contrast: var(--t-text);
  --pico-contrast-background: var(--t-text);
  --pico-contrast-border: var(--t-text);
  --pico-contrast-hover: var(--t-text-2);
  --pico-contrast-inverse: var(--t-surface);

  --pico-card-background-color: var(--t-surface);
  --pico-card-border-color: var(--t-border);
  --pico-card-box-shadow: var(--t-shadow);
  --pico-card-sectioning-background-color: var(--t-surface);

  --pico-form-element-background-color: var(--t-surface);
  --pico-form-element-border-color: var(--t-border-strong);
  --pico-form-element-color: var(--t-text);
  --pico-form-element-placeholder-color: var(--t-text-3);
  --pico-form-element-active-background-color: var(--t-surface);
  --pico-form-element-active-border-color: var(--t-brand);
  --pico-form-element-focus-color: color-mix(in srgb, var(--t-brand) 30%, transparent);
  --pico-form-element-disabled-opacity: 0.55;
  --pico-form-element-invalid-border-color: var(--t-danger);
  --pico-form-element-invalid-active-border-color: var(--t-danger-strong);
  --pico-form-element-invalid-focus-color: color-mix(in srgb, var(--t-danger) 30%, transparent);
  --pico-form-element-valid-border-color: var(--t-success);
  --pico-form-element-valid-active-border-color: var(--t-success);
  --pico-form-element-valid-focus-color: color-mix(in srgb, var(--t-success) 30%, transparent);
  --pico-switch-background-color: var(--t-border-strong);
  --pico-switch-checked-background-color: var(--t-brand);

  --pico-table-border-color: var(--t-border);
  --pico-table-row-stripped-background-color: var(--t-surface-2);

  --pico-mark-background-color: var(--t-warning-soft);
  --pico-mark-color: var(--t-on-warning-soft);
  --pico-code-background-color: var(--t-surface-2);
  --pico-code-color: var(--t-text-2);
  --pico-text-selection-color: color-mix(in srgb, var(--t-brand) 25%, transparent);
  --pico-box-shadow: var(--t-shadow);
  --pico-modal-overlay-background-color: rgba(8, 12, 20, .6);

  /* compat: templates antigos referenciam estas cores nomeadas do Pico */
  --pico-color-red-500: var(--t-danger);
  --pico-color-green-500: var(--t-success);
  --pico-color-red-50: var(--t-danger-soft);
}

/* ─── Base ───────────────────────────────────────────────────────────── */
html {
  font-size: 16px;
}
body {
  font-size: var(--t-fs-body);
  background:
    radial-gradient(1200px 400px at 50% -200px,
      color-mix(in srgb, var(--t-brand) 7%, transparent), transparent),
    var(--t-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main {
  flex: 1;
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding: 1.25rem 1rem 2rem;
}
h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1.1rem; }
hgroup { margin-bottom: 1.1rem; }
hgroup > h2 { margin-bottom: 0.15rem; }
hgroup > p { color: var(--t-text-3); font-size: var(--t-fs-sm); margin: 0; }
small { font-size: var(--t-fs-sm); }
:focus-visible { outline: none; box-shadow: var(--t-focus-ring); border-radius: var(--t-radius-xs); }

/* ─── Topbar / navegação principal ───────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--t-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--t-border);
}
.topbar-inner {
  max-width: 1240px;
  margin-inline: auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  padding: 0.65rem 0;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--t-text);
  text-decoration: none;
}
.brand:hover, .brand:focus { color: var(--t-text); text-decoration: none; }
.brand .dot { color: var(--t-brand); }
.brand .env {
  margin-left: 0.5rem;
  font-size: var(--t-fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-on-info-soft);
  background: var(--t-info-soft);
  padding: 0.1rem 0.45rem;
  border-radius: 99px;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a {
  padding: 0.62rem 0.7rem;
  font-size: var(--t-fs-sm);
  font-weight: 600;
  color: var(--t-text-2);
  text-decoration: none;
  border-radius: var(--t-radius-sm);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.main-nav a:hover { color: var(--t-text); background: var(--t-surface-2); }
.main-nav a[aria-current="page"] {
  color: var(--t-brand);
  border-bottom-color: var(--t-brand);
}
.main-nav .nav-exit { margin-left: auto; color: var(--t-text-3); }

/* ─── Cards (article) ────────────────────────────────────────────────── */
main article {
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
  box-shadow: var(--t-shadow);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
main article > header {
  margin: -1rem -1.1rem 0.9rem;
  padding: 0.7rem 1.1rem;
  background: transparent;
  border-bottom: 1px solid var(--t-border);
  font-size: var(--t-fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--t-text-3);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ─── Grid de métricas (dashboard) ───────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.stat-card {
  margin: 0;
  padding: 0.85rem 1rem;
  text-align: left;
}
.stat-card .stat-label {
  font-size: var(--t-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-text-3);
  margin: 0 0 0.35rem;
}
.stat-card .stat-value {
  font-size: 1.6rem;
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--t-text);
  margin: 0;
}
.stat-card .stat-value.ok { color: var(--t-success); }
.stat-card .stat-value.warn { color: var(--t-warning); }
.stat-card .stat-value.danger { color: var(--t-danger); }
.stat-card .stat-sub {
  font-size: var(--t-fs-sm);
  color: var(--t-text-3);
  margin: 0.2rem 0 0;
  font-variant-numeric: tabular-nums;
}

/* ─── Badges de status ───────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 0.14em 0.55em;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--t-neutral-soft);
  color: var(--t-on-neutral-soft);
}
.badge-success, .badge-paid { background: var(--t-success-soft); color: var(--t-on-success-soft); }
.badge-warning, .badge-confirmed { background: var(--t-warning-soft); color: var(--t-on-warning-soft); }
.badge-danger, .badge-cancelled { background: var(--t-danger-soft); color: var(--t-on-danger-soft); }
.badge-info, .badge-draft { background: var(--t-info-soft); color: var(--t-on-info-soft); }
.badge-invoiced { background: var(--t-brand-soft); color: var(--t-on-info-soft); }

/* ─── Tabs de filtro ─────────────────────────────────────────────────── */
nav.tabs { margin-bottom: 0.9rem; }
nav.tabs ul {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  margin: 0;
  background: var(--t-surface-3);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
nav.tabs ul::-webkit-scrollbar { display: none; }
nav.tabs li { padding: 0; margin: 0; list-style: none; }
nav.tabs a {
  display: block;
  padding: 0.34rem 0.8rem;
  font-size: var(--t-fs-sm);
  font-weight: 600;
  color: var(--t-text-2);
  text-decoration: none;
  border-radius: calc(var(--t-radius) - 4px);
  white-space: nowrap;
}
nav.tabs a:hover { color: var(--t-text); }
nav.tabs a[aria-current="page"] {
  background: var(--t-surface);
  color: var(--t-text);
  box-shadow: var(--t-shadow);
}

/* ─── Tabelas densas ─────────────────────────────────────────────────── */
figure { overflow-x: auto; }
main figure {
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
  box-shadow: var(--t-shadow);
  margin-bottom: 1rem;
}
main article figure {
  border: none;
  box-shadow: none;
  border-radius: 0;
  margin: 0 -1.1rem -1rem;
  width: calc(100% + 2.2rem);
}
table { font-size: var(--t-fs-sm); margin-bottom: 0; }
table th, table td {
  padding: var(--t-cell-y) var(--t-cell-x);
  border-bottom: 1px solid var(--t-border);
  background: transparent;
}
table thead th {
  font-size: var(--t-fs-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--t-text-3);
  background: var(--t-surface-2);
  border-bottom: 1px solid var(--t-border);
  white-space: nowrap;
}
table tbody tr:last-child td { border-bottom: none; }
table tbody tr:hover td { background: var(--t-surface-2); }
table td { font-variant-numeric: tabular-nums; }
tr.row-alert td { background: var(--t-danger-soft); }
tr.row-alert:hover td { background: color-mix(in srgb, var(--t-danger-soft) 80%, var(--t-surface)); }

/* ─── Botões ─────────────────────────────────────────────────────────── */
button, [role="button"], input[type="submit"] {
  font-size: var(--t-fs-sm);
  font-weight: 650;
  padding: 0.5rem 0.95rem;
  border-radius: var(--t-radius-sm);
  width: auto;
}
form button[type="submit"] { width: auto; }
.btn-sm, table button {
  padding: 0.22rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--t-radius-xs);
  margin-bottom: 0;
}
[role="group"] { box-shadow: none; display: flex; gap: 0.5rem; }
[role="group"] > * { flex: initial; }
[role="group"] input[type="search"] { flex: 1; }

/* ─── Ações rápidas (dashboard) ──────────────────────────────────────── */
.quick-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.quick-actions a {
  flex: 0 1 auto;
  min-width: 130px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-bottom: 0;
}

/* ─── Formulários ────────────────────────────────────────────────────── */
label { font-size: var(--t-fs-sm); font-weight: 600; color: var(--t-text-2); }
input, select, textarea {
  font-size: var(--t-fs-body);
}
input:not([type="checkbox"], [type="radio"]), select, textarea {
  padding: 0.5rem 0.7rem;
  height: auto;
  margin-bottom: 0.9rem;
}
details summary[role="button"] { width: auto; display: inline-block; }

/* ─── Estados vazios ─────────────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: 2rem 1rem;
}
.empty .empty-title {
  font-weight: 700;
  color: var(--t-text-2);
  margin: 0 0 0.25rem;
  font-size: var(--t-fs-body);
}
.empty .empty-hint {
  color: var(--t-text-3);
  font-size: var(--t-fs-sm);
  margin: 0 0 0.9rem;
  }
.empty .empty-hint:last-child { margin-bottom: 0; }
td .empty { padding: 1.4rem 1rem; }
.empty-ok {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--t-success);
  font-weight: 600;
  font-size: var(--t-fs-sm);
}
.empty-ok::before { content: "✓"; font-weight: 800; }

/* ─── Login ──────────────────────────────────────────────────────────── */
.login-main {
  max-width: 380px;
  margin-inline: auto;
  padding-top: min(12vh, 7rem);
}
.login-brand {
  text-align: center;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 1.1rem;
}
.login-brand .dot { color: var(--t-brand); }
.login-brand small {
  display: block;
  font-size: var(--t-fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--t-text-3);
  margin-top: 0.2rem;
}
.login-main article { padding: 1.4rem 1.4rem 1.1rem; }
.login-main button[type="submit"] { width: 100%; }
.login-main footer { text-align: center; color: var(--t-text-3); }
.form-error {
  background: var(--t-danger-soft);
  color: var(--t-on-danger-soft);
  border-radius: var(--t-radius-sm);
  padding: 0.5rem 0.75rem;
  font-size: var(--t-fs-sm);
  margin: 0.75rem 0 0;
}

/* ─── Rodapé ─────────────────────────────────────────────────────────── */
body > footer {
  max-width: 1240px;
  width: 100%;
  margin-inline: auto;
  padding: 0.75rem 1rem 1.25rem;
  color: var(--t-text-3);
  font-size: var(--t-fs-xs);
}

/* ─── Mobile (uso primário) ──────────────────────────────────────────── */
@media (max-width: 640px) {
  body > main { padding: 0.9rem 0.75rem 1.5rem; }
  .topbar-inner { padding: 0 0.75rem; gap: 0.35rem; }
  .brand { padding: 0.5rem 0; }
  .main-nav {
    flex-basis: 100%;
    order: 3;
    margin: 0 -0.75rem;
    padding: 0 0.75rem;
  }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.55rem; }
  .stat-card { padding: 0.7rem 0.8rem; }
  .stat-card .stat-value { font-size: 1.35rem; }
  main article { padding: 0.85rem 0.9rem; }
  main article > header { margin: -0.85rem -0.9rem 0.75rem; padding: 0.6rem 0.9rem; }
  main article figure { margin: 0 -0.9rem -0.85rem; width: calc(100% + 1.8rem); }
  .quick-actions a { flex: 1 1 45%; }
}