/*
 * Skin do Cents (F9/§5.18) sobre o Bootstrap 5. REGRA DE OURO: nenhuma cor literal
 * aqui — só var(--cents-*) definidas em tokens.css (o linter de tema fiscaliza).
 */

/* ---------- Tipografia (Inter, self-hosted — CSP 'self') ---------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/vendor/inter/inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/vendor/inter/inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/vendor/inter/inter-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/vendor/inter/inter-700.woff2') format('woff2');
}

body {
    font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: 'cv05', 'cv11', 'ss01';
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
    font-weight: 700;
    letter-spacing: -0.022em;
}

/* Números tabulares em valores e tabelas — colunas de dinheiro alinham de verdade. */
.cents-valor, td, .cents-kpi-numero {
    font-variant-numeric: tabular-nums;
}

/* ---------- Marca ---------- */
.cents-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--cents-tinta);
    text-decoration: none;
}
.cents-brand::before {
    content: '¢';
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.65rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--cents-superficie);
    background: linear-gradient(135deg, var(--cents-grad-a), var(--cents-grad-b));
    box-shadow: var(--cents-sombra-1);
}
.cents-brand:hover { color: var(--cents-primaria); }

/* ---------- Navbar ---------- */
.navbar.bg-body {
    background: var(--cents-superficie) !important;
    box-shadow: var(--cents-sombra-1);
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}
.navbar .nav-link {
    font-weight: 500;
    font-size: 0.925rem;
    color: var(--cents-texto-2);
    border-radius: var(--cents-raio-xs);
    padding: 0.4rem 0.7rem;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--cents-primaria);
    background: var(--cents-primaria-suave);
}
.navbar .dropdown-menu { margin-top: 0.4rem; }

/* ---------- Dropdowns ---------- */
.dropdown-menu {
    border: 1px solid var(--cents-borda);
    border-radius: var(--cents-raio-sm);
    box-shadow: var(--cents-sombra-2);
    background: var(--cents-superficie);
    padding: 0.35rem;
}
.dropdown-item {
    border-radius: var(--cents-raio-xs);
    padding: 0.45rem 0.7rem;
    font-size: 0.925rem;
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--cents-primaria-suave);
    color: var(--cents-primaria);
}
.dropdown-item.active { background: var(--cents-primaria); }

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--cents-borda);
    border-radius: var(--cents-raio);
    background: var(--cents-superficie);
    box-shadow: var(--cents-sombra-1);
}
.card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--cents-borda);
    font-weight: 600;
}

/* Card de KPI (dashboards) */
.cents-kpi { transition: transform 0.12s ease, box-shadow 0.12s ease; }
.cents-kpi:hover { transform: translateY(-2px); box-shadow: var(--cents-sombra-2); }
.cents-kpi .cents-kpi-icone {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.8rem;
    font-size: 1.2rem;
    color: var(--cents-primaria);
    background: var(--cents-primaria-suave);
}
.cents-kpi .cents-kpi-icone.tom-aviso   { color: var(--cents-aviso);   background: var(--cents-aviso-suave); }
.cents-kpi .cents-kpi-icone.tom-despesa { color: var(--cents-despesa); background: var(--cents-despesa-suave); }
.cents-kpi .cents-kpi-icone.tom-info    { color: var(--cents-info);    background: var(--cents-info-suave); }
.cents-kpi-numero { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; }

/* ---------- Tabelas ---------- */
.table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
}
.table thead th {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cents-texto-3);
    border-bottom: 1px solid var(--cents-borda);
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    white-space: nowrap;
}
.table td { border-color: var(--cents-borda); padding-top: 0.65rem; padding-bottom: 0.65rem; }
.table-hover tbody tr:hover { background: var(--cents-superficie-2); }
.table code { color: var(--cents-primaria); background: var(--cents-primaria-suave); padding: 0.1rem 0.4rem; border-radius: 0.35rem; font-size: 0.8rem; }

/* Tabela dentro de card/responsive ganha respiro e cantos */
.table-responsive {
    background: var(--cents-superficie);
    border: 1px solid var(--cents-borda);
    border-radius: var(--cents-raio);
    box-shadow: var(--cents-sombra-1);
    padding: 0.4rem 1rem;
}

/* ---------- Botões ---------- */
.btn { border-radius: var(--cents-raio-xs); font-weight: 500; }
.btn:focus-visible { box-shadow: 0 0 0 0.25rem var(--cents-anel-foco); }
.btn-primary {
    --bs-btn-bg: var(--cents-primaria);
    --bs-btn-border-color: var(--cents-primaria);
    --bs-btn-hover-bg: var(--cents-primaria-escura);
    --bs-btn-hover-border-color: var(--cents-primaria-escura);
    --bs-btn-active-bg: var(--cents-primaria-escura);
    --bs-btn-active-border-color: var(--cents-primaria-escura);
    --bs-btn-disabled-bg: var(--cents-primaria);
    --bs-btn-disabled-border-color: var(--cents-primaria);
    box-shadow: var(--cents-sombra-1);
}
.btn-outline-primary {
    --bs-btn-color: var(--cents-primaria);
    --bs-btn-border-color: var(--cents-borda-forte);
    --bs-btn-hover-bg: var(--cents-primaria-suave);
    --bs-btn-hover-color: var(--cents-primaria);
    --bs-btn-hover-border-color: var(--cents-primaria);
    --bs-btn-active-bg: var(--cents-primaria);
    --bs-btn-active-border-color: var(--cents-primaria);
}
.btn-outline-secondary {
    --bs-btn-color: var(--cents-texto-2);
    --bs-btn-border-color: var(--cents-borda-forte);
    --bs-btn-hover-color: var(--cents-tinta);
    --bs-btn-hover-bg: var(--cents-superficie-2);
    --bs-btn-hover-border-color: var(--cents-borda-forte);
    --bs-btn-active-bg: var(--cents-superficie-2);
    --bs-btn-active-color: var(--cents-tinta);
    --bs-btn-active-border-color: var(--cents-borda-forte);
}
.btn-link { color: var(--cents-primaria); }

/* ---------- Formulários ---------- */
.form-control, .form-select {
    border-radius: var(--cents-raio-xs);
    border-color: var(--cents-borda-forte);
    background-color: var(--cents-superficie);
    padding: 0.5rem 0.8rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--cents-primaria);
    box-shadow: 0 0 0 0.25rem var(--cents-anel-foco);
    background-color: var(--cents-superficie);
}
.form-label { font-weight: 500; font-size: 0.9rem; margin-bottom: 0.35rem; }
.form-text { color: var(--cents-texto-3); }

/* ---------- Badges e alerts ---------- */
.badge { font-weight: 600; border-radius: 0.5rem; padding: 0.35em 0.6em; }
.badge.text-bg-success { background: var(--cents-receita-suave) !important; color: var(--cents-receita) !important; }
.badge.text-bg-danger  { background: var(--cents-despesa-suave) !important; color: var(--cents-despesa) !important; }
.badge.text-bg-warning { background: var(--cents-aviso-suave) !important;   color: var(--cents-aviso) !important; }
.badge.text-bg-secondary { background: var(--cents-superficie-2) !important; color: var(--cents-texto-2) !important; border: 1px solid var(--cents-borda); }

.alert { border-radius: var(--cents-raio-sm); border: 1px solid var(--cents-borda); box-shadow: var(--cents-sombra-1); }
.alert-success { background: var(--cents-receita-suave); color: var(--cents-receita); border-color: transparent; }
.alert-danger  { background: var(--cents-despesa-suave); color: var(--cents-despesa); border-color: transparent; }
.alert-info    { background: var(--cents-info-suave);    color: var(--cents-info);    border-color: transparent; }

/* ---------- Links ---------- */
a { color: var(--cents-primaria); text-decoration: none; }
a:hover { color: var(--cents-primaria-escura); }

/* ---------- Cabeçalho de página / estado vazio ---------- */
.cents-page-header { margin-bottom: 1.25rem; }
.cents-page-header .cents-page-sub { color: var(--cents-texto-2); font-size: 0.925rem; margin: 0.15rem 0 0; }

.cents-vazio {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--cents-texto-2);
    background: var(--cents-superficie);
    border: 1px dashed var(--cents-borda-forte);
    border-radius: var(--cents-raio);
}
.cents-vazio .bi { font-size: 2rem; color: var(--cents-texto-3); display: block; margin-bottom: 0.5rem; }

/* ---------- Autenticação (login/cadastro/reset) ---------- */
.cents-auth {
    min-height: calc(100vh - 160px);
    display: grid;
    place-items: center;
}
.cents-auth-card {
    width: 100%;
    max-width: 430px;
    background: var(--cents-superficie);
    border: 1px solid var(--cents-borda);
    border-radius: calc(var(--cents-raio) + 4px);
    box-shadow: var(--cents-sombra-3);
    padding: 2.25rem 2rem;
}
.cents-auth-card .cents-brand { font-size: 1.5rem; margin-bottom: 0.35rem; }
.cents-auth-card .cents-brand::before { width: 2.4rem; height: 2.4rem; font-size: 1.4rem; border-radius: 0.8rem; }

/* ---------- Listas (list-group) ---------- */
.list-group-item { border-color: var(--cents-borda); background: var(--cents-superficie); }
.list-group-item-primary { background: var(--cents-primaria-suave); color: var(--cents-tinta); }

/* ---------- Toast (desfazer §5.20-6) ---------- */
.toast { border-radius: var(--cents-raio-sm); box-shadow: var(--cents-sombra-2); border: 1px solid var(--cents-borda); }

/* ---------- Rodapé ---------- */
footer.border-top { color: var(--cents-texto-3) !important; border-color: var(--cents-borda) !important; }

/* ---------- Semântica financeira (telas usam nos valores) ---------- */
.cents-receita { color: var(--cents-receita) !important; }
.cents-despesa { color: var(--cents-despesa) !important; }

/* ---------- Modo discrição (§5.20-21) — borra os valores monetários ---------- */
.cents-oculto .cents-valor {
    filter: blur(0.4rem);
    user-select: none;
}

/* ---------- Hero público (landing) ---------- */
.cents-hero {
    min-height: 60vh;
    display: grid;
    place-items: center;
    text-align: center;
}