/* =====================================================================
   PREMIUM.CSS  —  Camada de refinamento visual (carregada por último)

   Objetivo: elevar o acabamento do sistema (profundidade, textura,
   tipografia e microinterações) SEM alterar nenhuma lógica, estrutura
   de HTML ou hierarquia de componentes. Tudo aqui é puramente estético
   e reaproveita as classes e variáveis já existentes em base.css.

   Nada abaixo cria, remove ou reordena elementos: apenas aprimora a
   aparência dos que já existem.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. VARIÁVEIS DE APOIO
   Novos tokens de sombra/curva usados apenas por este arquivo.
   As variáveis originais de base.css permanecem intactas.
   --------------------------------------------------------------------- */
:root {
    --shadow-xs: 0 1px 2px rgba(16, 26, 43, .04);
    --shadow-sm: 0 1px 3px rgba(16, 26, 43, .05), 0 1px 2px rgba(16, 26, 43, .04);
    --shadow-md: 0 4px 12px rgba(16, 26, 43, .06), 0 2px 4px rgba(16, 26, 43, .04);
    --shadow-lg: 0 12px 32px rgba(16, 26, 43, .10), 0 4px 8px rgba(16, 26, 43, .05);
    --ease-out: cubic-bezier(.22, .61, .36, 1);
    --hairline: rgba(16, 26, 43, .06);
}

/* ---------------------------------------------------------------------
   2. BASE / TIPOGRAFIA
   As fontes já eram referenciadas em base.css; agora que estão
   carregadas, apenas afinamos o rendering para ficar mais nítido.
   --------------------------------------------------------------------- */
body {
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
}

/* Fundo de papel sólido. */
body {
    background: var(--paper);
    background-attachment: fixed;
}

h1,
.boot-title,
.sidebar-brand .name {
    letter-spacing: -0.015em;
}

/* Números financeiros com espaçamento tabular — colunas sempre alinhadas. */
.kpi-value,
table.data-table td.num,
.lanc-totais-topbar strong,
.mono,
[class*="num"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------------
   3. SIDEBAR  —  profundidade e acabamento
   --------------------------------------------------------------------- */
.sidebar {
    background: var(--ink);
    border-right: 1px solid rgba(0, 0, 0, .25);
    box-shadow: 1px 0 0 rgba(255, 255, 255, .02) inset, 6px 0 24px -18px rgba(0, 0, 0, .55);
}

/* Marca com um fio de latão discreto abaixo. */
.sidebar-brand {
    position: relative;
}
.sidebar-brand::after {
    content: "";
    position: absolute;
    left: 20px;
    width: 46px;
    bottom: 0;
    height: 1px;
    background: var(--brass);
    opacity: .5;
}

.sidebar-company {
    background: rgba(255, 255, 255, 0.055);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
    transition: background .18s var(--ease-out), border-color .18s var(--ease-out);
}
.sidebar-company:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(216, 184, 118, .28);
}

/* Itens de navegação com transição suave e realce mais elegante. */
.nav-item {
    transition: background .16s var(--ease-out), color .16s var(--ease-out),
                padding-left .16s var(--ease-out);
    position: relative;
}
.nav-item:hover {
    padding-left: 15px;
}
.nav-item.active {
    background: var(--brass);
    color: #241705;
    box-shadow: 0 2px 10px rgba(169, 127, 62, .35);
}
/* Barrinha de latão que sinaliza o item ativo, sem ocupar espaço extra. */
.nav-item.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--brass-light);
}
.nav-dot {
    transition: opacity .16s var(--ease-out), transform .16s var(--ease-out);
}
.nav-item:hover .nav-dot {
    opacity: 1;
    transform: scale(1.25);
}

.switch-btn,
.sidebar-toggle {
    transition: border-color .16s var(--ease-out), color .16s var(--ease-out),
                background .16s var(--ease-out);
}
.switch-btn:hover {
    background: rgba(255, 255, 255, .05);
}

/* ---------------------------------------------------------------------
   4. TOPBAR
   --------------------------------------------------------------------- */
.topbar {
    backdrop-filter: saturate(1.05);
}
.topbar h1 {
    font-feature-settings: "ss01" 1;
}

/* ---------------------------------------------------------------------
   5. KPI CARDS  —  o coração do dashboard
   Cartões ganham profundidade, um fio superior de destaque e reação ao
   hover. As cores de valor (pos/neg) já vêm de base.css.
   --------------------------------------------------------------------- */
.kpi-card {
    position: relative;
    background: var(--card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out),
                border-color .18s var(--ease-out);
}
.kpi-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--brass);
    opacity: 0;
    transition: opacity .2s var(--ease-out);
}
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}
.kpi-card:hover::before {
    opacity: 1;
}

/* Quando o cartão traz um valor positivo/negativo, o fio superior
   assume o mesmo tom, reforçando a leitura sem mudar a estrutura. */
.kpi-card:has(.kpi-value.pos)::before {
    background: var(--growth);
}
.kpi-card:has(.kpi-value.neg)::before {
    background: var(--alert);
}

.kpi-label {
    color: var(--text-secondary);
}
.kpi-value {
    letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------
   6. PAINÉIS E CARTÕES GENÉRICOS
   --------------------------------------------------------------------- */
.panel {
    background: var(--card);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .18s var(--ease-out);
}
.panel:hover {
    box-shadow: var(--shadow-md);
}
.panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.01em;
}
/* Marcador de latão à esquerda do título do painel. */
.panel-title::before {
    content: "";
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--brass);
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   7. TABELAS
   --------------------------------------------------------------------- */
table.data-table tbody tr {
    transition: background .12s var(--ease-out);
}
table.data-table tbody tr:hover {
    background: var(--paper-2);
}
table.data-table th {
    color: var(--text-secondary);
}

/* Badges com um leve relevo. */
.type-badge {
    box-shadow: inset 0 0 0 1px rgba(16, 26, 43, .03);
    transition: transform .12s var(--ease-out);
}
.type-badge:hover {
    transform: translateY(-1px);
}

/* ---------------------------------------------------------------------
   8. BOTÕES  —  microinterações consistentes
   --------------------------------------------------------------------- */
.btn-primary,
.btn-add,
.demo-btn,
.row-open,
.export-select {
    transition: transform .14s var(--ease-out), box-shadow .14s var(--ease-out),
                background .16s var(--ease-out), border-color .16s var(--ease-out),
                filter .16s var(--ease-out);
}
.btn-primary {
    box-shadow: 0 2px 8px rgba(16, 26, 43, .16);
    background: var(--ink);
}
.btn-primary:hover {
    box-shadow: 0 4px 14px rgba(16, 26, 43, .22);
    transform: translateY(-1px);
}
.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(16, 26, 43, .18);
}
.btn-add {
    box-shadow: var(--shadow-xs);
}
.btn-add:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.btn-add:active,
.row-open:active {
    transform: translateY(0);
}
.row-open:hover {
    box-shadow: 0 2px 8px rgba(169, 127, 62, .25);
}

/* ---------------------------------------------------------------------
   9. CAMPOS DE FORMULÁRIO  —  foco em latão com halo suave
   --------------------------------------------------------------------- */
.fld input,
.fld select,
.field input,
.field select,
.export-select,
.period-select,
.filter-select {
    transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out),
                background .16s var(--ease-out);
}
.fld input:focus,
.fld select:focus,
.field input:focus,
.field select:focus {
    box-shadow: 0 0 0 3px rgba(169, 127, 62, .14);
}

/* ---------------------------------------------------------------------
   10. TELA DE LOGIN / BOOT  —  card mais sofisticado
   --------------------------------------------------------------------- */
.boot-panel {
    background: var(--paper-2);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .8) inset,
        0 30px 70px rgba(0, 0, 0, .38),
        0 4px 14px rgba(0, 0, 0, .18);
    border: 1px solid rgba(255, 255, 255, .5);
}

.row-card {
    transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
    box-shadow: var(--shadow-xs);
}
.row-card:hover {
    box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------------
   11. MODAIS  —  entrada suave e sombra mais rica
   --------------------------------------------------------------------- */
.modal-box {
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--hairline);
}

/* ---------------------------------------------------------------------
   12. SCROLLBARS  —  discretas e no tom da marca
   --------------------------------------------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
    background-clip: content-box;
}
/* Scrollbar da sidebar (fundo escuro) em tom claro translúcido. */
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    background-clip: content-box;
}
.sidebar {
    scrollbar-color: rgba(255, 255, 255, .16) transparent;
}

/* ---------------------------------------------------------------------
   13. RESPEITO A "REDUZIR MOVIMENTO"
   Boa prática de acabamento: desliga as microanimações para quem
   configurou o sistema para reduzir movimento.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
    .nav-item:hover {
        padding-left: 12px;
    }
    .kpi-card:hover,
    .btn-primary:hover,
    .btn-add:hover,
    .row-card:hover {
        transform: none;
    }
}