/**
 * meNotifica — Theme Tokens v1
 *
 * Sobrescreve variáveis do Tabler (Bootstrap 5) para tirar o look "default
 * admin template" e dar uma identidade visual própria: branco generoso +
 * azul matching logo + cantos suaves + sombras modernas + tipografia
 * com mais peso visual.
 *
 * IMPORTANTE: este arquivo NÃO muda markup. Só ajusta CSS custom
 * properties que o Tabler já consome. Reverter = remover este link.
 */

/* ── Tipografia ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root,
[data-bs-theme="light"] {
  /* ── Cores primárias ──
     Azul Tabler (#206bc4) — bate com o wordmark "me" da logo. Voltou pro
     azul (post-test-feedback-batch 2026-05-26) depois que o tester
     observou que o roxo destoava da identidade visual da logo. */
  --tblr-primary: #206bc4;
  --tblr-primary-rgb: 32, 107, 196;
  --tblr-primary-fg: #ffffff;

  --tblr-primary-darken: #1856a0;
  --tblr-primary-lt: #e8f0fa;        /* tom claro pra badges */

  /* ── Acentos / status ──
     Mantemos verde/amarelo/vermelho Tabler (são funcionais).
     Só calibrados pra harmonizar com o azul. */
  --tblr-success: #2fb344;
  --tblr-success-rgb: 47, 179, 68;
  --tblr-warning: #f59e0b;
  --tblr-warning-rgb: 245, 158, 11;
  --tblr-danger: #e11d48;
  --tblr-danger-rgb: 225, 29, 72;

  /* ── Fundo ──
     Branco quentinho em vez de cinza-azulado frio do Tabler default.
     Quase imperceptível mas faz a página "respirar". */
  --tblr-body-bg: #fafafa;
  --tblr-body-bg-rgb: 250, 250, 250;
  --tblr-bg-surface: #ffffff;
  --tblr-bg-surface-secondary: #f7f7f9;
  --tblr-bg-surface-tertiary: #efeff2;

  /* ── Surface tints (ux-polish-forms-tables-settings, 2026-05-25) ──
     Tints sutis (Δ luminance ≤ 3%) usados pra agrupar sections temáticas
     em /settings. Warm = recebimento (creme), cool = segurança (verde-cinza).
     NÃO usar como cor de acento — só como background de grupo. */
  --surface-tint-warm: #fefcf7;
  --surface-tint-cool: #f7faf9;

  /* ── Borda ──
     Borda mais sutil que o cinza padrão. */
  --tblr-border-color: #ececf2;
  --tblr-border-color-translucent: rgba(0, 0, 0, .055);

  /* ── Tipografia ──
     Plus Jakarta Sans tem personalidade sem ser exótica. Inter é "ok mas
     todo mundo usa". Jakarta tem contraforma mais redonda, vibe BR-friendly. */
  --tblr-font-sans-serif: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tblr-body-font-family: var(--tblr-font-sans-serif);
  --tblr-body-font-weight: 400;
  --tblr-body-line-height: 1.55;

  /* Headings mais "presentes" — peso 700 em vez do 600 padrão */
  --tblr-headings-font-weight: 700;
  --tblr-headings-line-height: 1.25;

  /* ── Raio ──
     Cantos 8px (em vez de 4px Tabler). "Soft" sem ser arredondado demais.
     Botões e badges ganham mais 2px pra ficar mais "pill". */
  --tblr-border-radius: 8px;
  --tblr-border-radius-sm: 6px;
  --tblr-border-radius-lg: 12px;
  --tblr-border-radius-xl: 16px;
  --tblr-border-radius-pill: 999px;

  /* ── Sombras ──
     Mais largas e sutis (estilo "soft elevation" moderno).
     Tabler padrão é sombra dura/2018. */
  --tblr-box-shadow: 0 1px 2px 0 rgba(20, 25, 45, .04),
                     0 1px 3px 1px rgba(20, 25, 45, .03);
  --tblr-box-shadow-sm: 0 1px 1px 0 rgba(20, 25, 45, .04);
  --tblr-box-shadow-lg: 0 10px 28px -8px rgba(20, 25, 45, .08),
                        0 2px 6px -2px rgba(20, 25, 45, .04);
}

/* ── Dark mode (azul mais vivo pra não sumir no fundo escuro) ──────────── */
[data-bs-theme="dark"] {
  --tblr-primary: #4a9ff0;
  --tblr-primary-rgb: 74, 159, 240;
  --tblr-primary-darken: #2e7fcc;
  --tblr-primary-lt: rgba(74, 159, 240, .12);

  --tblr-body-bg: #15151d;
  --tblr-body-bg-rgb: 21, 21, 29;
  --tblr-bg-surface: #1c1c26;
  --tblr-bg-surface-secondary: #24242f;
  --tblr-bg-surface-tertiary: #2c2c38;

  --tblr-border-color: rgba(255, 255, 255, .08);
}

/* ── Ajustes finos de componente ─────────────────────────────────────── */

/* Botões — mais peso, mais "presença" */
.btn {
  font-weight: 600;
  letter-spacing: -0.005em;
}

.btn-primary {
  --tblr-btn-bg: var(--tblr-primary);
  --tblr-btn-border-color: var(--tblr-primary);
  --tblr-btn-hover-bg: var(--tblr-primary-darken);
  --tblr-btn-hover-border-color: var(--tblr-primary-darken);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset,
              0 1px 2px rgba(32, 107, 196, .25);
}

/* Cards — borda mais sutil + cantos maiores */
.card {
  border-color: var(--tblr-border-color);
}

/* Sidebar / navbar — fundo levemente diferente do body pra criar profundidade */
.navbar-vertical {
  background-color: var(--tblr-bg-surface);
}

.navbar {
  background-color: var(--tblr-bg-surface);
}

/* Form controls — focus ring em azul */
.form-control:focus,
.form-select:focus {
  border-color: var(--tblr-primary);
  box-shadow: 0 0 0 3px rgba(32, 107, 196, .15);
}

/* Page header — título com mais hierarquia */
.page-title {
  letter-spacing: -0.02em;
}

/* Links — usa o azul da identidade */
a {
  color: var(--tblr-primary);
}
a:hover {
  color: var(--tblr-primary-darken);
}

/* Badges com tom claro (lt) — usa o azul */
.badge.bg-primary-lt {
  background-color: var(--tblr-primary-lt);
  color: var(--tblr-primary-darken);
}

/* ─────────────────────────────────────────────────────────────────────────
   UX polish utilities (change: ux-polish-forms-tables-settings, 2026-05-25)
   ───────────────────────────────────────────────────────────────────────── */

/* ── Sticky save em forms longos ─────────────────────────────────────────
   Use `<form class="has-sticky-save">` e marque o footer com `.sticky-save`.
   O botão Salvar fica ancorado no rodapé da viewport quando o footer natural
   sai de tela. Pareado com static/js/sticky-save.js que mostra badge
   "modificado" no header quando inputs mudam. */
.has-sticky-save .card-footer.sticky-save {
  position: sticky;
  bottom: 0;
  background: var(--tblr-card-bg, #ffffff);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
  z-index: 10;
  border-top: 1px solid var(--tblr-border-color);
}
.has-sticky-save {
  /* Padding-bottom pra que conteúdo final não fique tampado pelo sticky */
  padding-bottom: 1rem;
}

/* ── Tabelas responsivas em mobile (card-stack) ───────────────────────────
   Use `<table class="table table-mobile-cards">` e adicione `data-label="..."`
   em cada `<td>`. Em viewports < 768px, cada `<tr>` vira card empilhado com
   labels inline. Em desktop renderiza como tabela normal. */
@media (max-width: 767.98px) {
  .table-mobile-cards thead {
    display: none;
  }
  .table-mobile-cards,
  .table-mobile-cards tbody,
  .table-mobile-cards tr,
  .table-mobile-cards td {
    display: block;
    width: 100%;
  }
  .table-mobile-cards tr {
    margin-bottom: 1rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    padding: 0.75rem 1rem;
    background: var(--tblr-bg-surface, #ffffff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  }
  .table-mobile-cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border: none;
    padding: 0.4rem 0;
    text-align: right;
  }
  .table-mobile-cards td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--tblr-secondary, #718096);
    text-align: left;
    flex-shrink: 0;
  }
  /* td sem data-label (ex: célula de ações) não renderiza o ::before */
  .table-mobile-cards td:not([data-label])::before {
    content: none;
  }
  /* Linhas vazias / "Nenhum registro" devem ocupar largura inteira */
  .table-mobile-cards td.text-center,
  .table-mobile-cards td[colspan] {
    text-align: center;
    justify-content: center;
  }
  .table-mobile-cards td.text-center::before,
  .table-mobile-cards td[colspan]::before {
    content: none;
  }
}

/* ── /settings sections temáticas com tints ──────────────────────────────
   Container que envolve um grupo de cards com background tintado.
   Cards filhos mantêm `background: white` (sem nesting visual). */
.settings-section {
  border-radius: var(--tblr-border-radius-lg, 12px);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.settings-section--warm {
  background: var(--surface-tint-warm);
}
.settings-section--cool {
  background: var(--surface-tint-cool);
}
.settings-section--neutral {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}
.settings-section-header {
  margin-bottom: 1rem;
}
.settings-section-header h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.settings-section-header .text-muted {
  font-size: 0.875rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   Site footer compartilhado (change: post-prod-polish, 2026-05-25)
   Usado pelo partial partials/site_footer.html em landing/explore/caderneta.
   Variáveis dependem do branding (--tblr-primary). Cores hardcoded escuras
   por design — o footer é sempre dark seam, mesmo em theme=light.
   ───────────────────────────────────────────────────────────────────────── */
.lp-footer {
  background: #1a1530;
  padding: 3rem 0 2rem;
}
.lp-footer .footer-brand { font-size: 1.3rem; font-weight: 800; color: #fff; }
.lp-footer .footer-brand span { color: var(--tblr-primary); }
.lp-footer .footer-tagline { font-size: .9rem; color: #94a3b8; margin-top: .35rem; line-height: 1.5; }
.lp-footer .footer-links { list-style: none; padding: 0; margin: 0; }
.lp-footer .footer-links li { margin-bottom: .4rem; }
.lp-footer .footer-links a { color: #94a3b8; text-decoration: none; font-size: .9rem; transition: color .15s; }
.lp-footer .footer-links a:hover { color: #fff; }
.lp-footer .footer-col-title { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748b; margin-bottom: 1rem; }
.lp-footer .footer-bottom {
  border-top: 1px solid #2a2440;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  font-size: .85rem;
  color: #94a3b8;
}
.lp-footer .footer-social { display: flex; gap: .75rem; margin-top: 1rem; }
.lp-footer .footer-social a { color: #64748b; transition: color .15s; line-height: 1; }
.lp-footer .footer-social a:hover { color: #fff; }
.lp-footer .footer-social i { font-size: 1.35rem; }
.lp-footer .footer-cnpj { font-size: .78rem; color: #475569; margin-top: 1rem; line-height: 1.7; }
.lp-footer .footer-cnpj a { color: #475569; text-decoration: none; }
.lp-footer .footer-cnpj a:hover { color: #94a3b8; }