/* ==========================================================================
   Vault.Web — Tema Premium (Valori Design System)
   Paleta:
     darkGreen   #062D2C   aquaGreen #06D6A0   golden #CF9B51
     yellow      #FAA916   orange    #F77F00
     success #06D6A0  error #E63946  warning #FAA916  info #2196F3
   ========================================================================== */

:root {
    /* Marca Valori */
    --valori-dark-green: #062D2C;
    --valori-dark-green-2: #08403E;
    --valori-teal: #0D7C66;
    --valori-aqua: #06D6A0;
    --valori-aqua-hover: #04b888;
    --valori-golden: #CF9B51;
    --valori-golden-hover: #b8853d;
    --valori-yellow: #FAA916;
    --valori-yellow-hover: #E09810;
    --valori-orange: #F77F00;

    /* Status */
    --valori-success: #06D6A0;
    --valori-error: #E63946;
    --valori-warning: #FAA916;
    --valori-info: #2196F3;

    /* Componentes de cor (R, G, B) das cores acima.
       Necessários porque rgba() não aceita um var() com hex: para pintar uma
       sombra ou gradiente com transparência é preciso o trio separado. Todo
       literal rgba() de cor de marca no arquivo passa por aqui — é o que
       permite o white label repintar a página inteira sobrescrevendo só o
       :root (ver Views/Shared/_BrandTheme.cshtml). */
    --valori-dark-green-rgb: 6, 45, 44;
    --valori-teal-rgb: 13, 124, 102;
    --valori-aqua-rgb: 6, 214, 160;
    --valori-golden-rgb: 207, 155, 81;
    --valori-yellow-rgb: 250, 169, 22;
    --valori-error-rgb: 230, 57, 70;
    --valori-info-rgb: 33, 150, 243;
    /* Inválido de formulário: cor do Bootstrap, não da marca. */
    --vault-invalid-rgb: 220, 53, 69;

    /* Paleta categórica dos gráficos. Existe como token porque o Chart.js recebe
       cor em JavaScript, e JS não lê um var() — os scripts das views resolvem
       estes tokens via getComputedStyle (ver wwwroot/js/brand-colors.js).
       Ordem preservada da paleta original do dashboard.
       Na Valori: aqua, amarelo, teal, dourado. No white label: PrimaryColor,
       SecondaryColor e as duas escurecidas. */
    --vault-chart-1: var(--valori-aqua);
    --vault-chart-1-rgb: var(--valori-aqua-rgb);
    --vault-chart-2: var(--valori-yellow);
    --vault-chart-2-rgb: var(--valori-yellow-rgb);
    --vault-chart-3: var(--valori-teal);
    --vault-chart-3-rgb: var(--valori-teal-rgb);
    --vault-chart-4: var(--valori-golden);
    --vault-chart-4-rgb: var(--valori-golden-rgb);

    /* Ação secundária. A Valori não usa .btn-secondary hoje; no white label este
       é o lugar da SecondaryColor no chrome. O .btn-outline-secondary continua
       neutro de propósito: ele é o botão de apoio da topbar e da paginação, e
       pintá-lo com a cor da marca encheria a interface de cor. */
    --vault-secondary: var(--valori-golden);
    --vault-secondary-hover: var(--valori-golden-hover);
    --vault-on-secondary: var(--valori-dark-green);

    /* Linha decorativa na borda esquerda da sidebar. É token porque no white label
       a sidebar é pintada com a PrimaryColor: um aqua fixo aqui ficaria da mesma cor
       do fundo. */
    --vault-sidebar-accent-line: rgba(var(--valori-aqua-rgb), 0.5);

    /* Cor do texto que fica SOBRE uma cor de acento (botão primário, badge,
       avatar, dia selecionado no calendário). Antes era --valori-dark-green,
       mas esse token também é a cor de título/texto forte do tema claro — os
       dois papéis não podem compartilhar o mesmo valor quando a marca muda:
       o texto sobre o acento tem que contrastar com o acento, e o título tem
       que contrastar com o fundo da página. Para a Valori o valor é o mesmo
       de antes, então nada muda visualmente. */
    --vault-on-accent: var(--valori-dark-green);

    /* Ícone de calendário do campo de data, na cor de acento (%2306D6A0 = #06D6A0). */
    --vault-datepicker-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2306D6A0' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='1.9' y='2.9' width='12.2' height='11.2' rx='1.6'/%3E%3Cpath d='M1.9 6.4h12.2M5.2 1.7v2.3M10.8 1.7v2.3'/%3E%3C/svg%3E");

    /* Tokens visuais */
    --vault-radius: 14px;
    --vault-radius-sm: 10px;
    --vault-shadow: 0 1px 2px rgba(var(--valori-dark-green-rgb), 0.05), 0 8px 24px rgba(var(--valori-dark-green-rgb), 0.08);
    --vault-shadow-lg: 0 4px 12px rgba(var(--valori-dark-green-rgb), 0.1), 0 20px 40px rgba(var(--valori-dark-green-rgb), 0.16);
    /* O fallback não é adorno: --bs-heading-color só é definido dentro dos blocos
       de tema, e o valor do cartão é pintado por -webkit-text-fill-color
       transparente. Sem tema aplicado, a variável fica vazia, o gradiente inteiro
       é invalidado e o número desaparece em vez de mudar de cor. */
    --kpi-gradient: linear-gradient(135deg, var(--bs-heading-color, var(--valori-dark-green)), var(--valori-aqua));
}

/* ---------- TEMA DARK (verde escuro Valori, profundidade, acento âmbar) ---------- */
[data-bs-theme="dark"] {
    --bs-body-bg: #04161a;
    --bs-body-color: #d6e4e1;
    --bs-body-color-rgb: 214, 228, 225;
    --bs-secondary-bg: #082523;
    --bs-secondary-bg-rgb: 8, 37, 35;
    --bs-tertiary-bg: var(--valori-dark-green);
    --bs-tertiary-bg-rgb: var(--valori-dark-green-rgb);
    --bs-border-color: rgba(var(--valori-aqua-rgb), 0.1);
    --bs-border-color-translucent: rgba(var(--valori-aqua-rgb), 0.08);
    --bs-emphasis-color: #f1f7f5;
    --bs-secondary-color: #93a8a3;
    --bs-secondary-color-rgb: 147, 168, 163;
    --bs-link-color: var(--valori-aqua);
    --bs-link-hover-color: #5be8c1;
    --bs-heading-color: #f1f7f5;
    --bs-primary: var(--valori-yellow);
    --bs-primary-rgb: var(--valori-yellow-rgb);
    --bs-primary-bg-subtle: rgba(var(--valori-yellow-rgb), 0.15);
    --bs-primary-text-emphasis: #ffd58a;
    --bs-card-bg: #082523;
    --bs-card-border-color: rgba(var(--valori-aqua-rgb), 0.08);

    --vault-surface-1: #082523;
    --vault-surface-2: #0a2c2a;
    --vault-surface-3: #0e3633;
    --vault-sidebar-bg: #04181a;
    --vault-topbar-bg: rgba(var(--valori-dark-green-rgb), 0.85);
    --vault-divider: rgba(var(--valori-aqua-rgb), 0.1);
    --vault-text-muted: #7d958f;
    --vault-text-soft: #adbdb8;
    --vault-card-border: rgba(var(--valori-aqua-rgb), 0.07);
    --vault-input-bg: #051d1d;
    --vault-input-border: rgba(var(--valori-aqua-rgb), 0.18);
    --vault-row-hover: rgba(var(--valori-aqua-rgb), 0.08);
    --vault-accent: var(--valori-yellow);
    --vault-accent-hover: var(--valori-yellow-hover);
    --vault-accent-soft: rgba(var(--valori-yellow-rgb), 0.14);
    --vault-active: var(--valori-aqua);
    --vault-active-soft: rgba(var(--valori-aqua-rgb), 0.12);

    /* Alertas: fundo/borda/texto por status, para que as regras .alert-* sejam
       únicas em vez de duplicadas por tema. */
    --vault-success-bg: rgba(var(--valori-aqua-rgb), 0.1);
    --vault-success-border: rgba(var(--valori-aqua-rgb), 0.28);
    --vault-success-text: #6eecc1;
    --vault-warning-bg: rgba(var(--valori-yellow-rgb), 0.12);
    --vault-warning-border: rgba(var(--valori-yellow-rgb), 0.32);
    --vault-warning-text: #ffd58a;
    --vault-danger-bg: rgba(var(--valori-error-rgb), 0.12);
    --vault-danger-border: rgba(var(--valori-error-rgb), 0.3);
    --vault-danger-text: #f5a4aa;
    --vault-danger-outline-text: #f08c92;
    --vault-info-bg: rgba(var(--valori-info-rgb), 0.12);
    --vault-info-border: rgba(var(--valori-info-rgb), 0.3);
    --vault-info-text: #80c5fa;

    /* Realce do item ativo em gradiente, e a cor do texto sobre ele. Vêm por
       token porque o white label os repinta junto do resto do chrome. */
    --vault-active-gradient: linear-gradient(135deg, var(--valori-teal), var(--valori-aqua));
    --vault-active-gradient-hover: linear-gradient(135deg, var(--valori-aqua), var(--valori-teal));
    --vault-active-on: var(--valori-dark-green);

    color-scheme: dark;
}

/* ---------- TEMA LIGHT (sóbrio, levemente teal, sem ofuscar) ---------- */
[data-bs-theme="light"] {
    --bs-body-bg: #e7ece9;
    --bs-body-color: #1d3331;
    --bs-body-color-rgb: 29, 51, 49;
    --bs-secondary-bg: #dee4e1;
    --bs-secondary-bg-rgb: 222, 228, 225;
    --bs-tertiary-bg: #d4dbd8;
    --bs-tertiary-bg-rgb: 212, 219, 216;
    --bs-border-color: #c1c9c5;
    --bs-border-color-translucent: rgba(var(--valori-dark-green-rgb), 0.1);
    --bs-emphasis-color: var(--valori-dark-green);
    --bs-secondary-color: #4f615e;
    --bs-secondary-color-rgb: 79, 97, 94;
    --bs-link-color: var(--valori-teal);
    --bs-link-hover-color: var(--valori-dark-green);
    --bs-heading-color: var(--valori-dark-green);
    --bs-primary: #b58207;
    --bs-primary-rgb: 181, 130, 7;
    --bs-primary-bg-subtle: rgba(var(--valori-golden-rgb), 0.18);
    --bs-primary-text-emphasis: #6b4900;
    --bs-card-bg: #f0f3f1;
    --bs-card-border-color: #ccd3d0;

    --vault-surface-1: #f0f3f1;
    --vault-surface-2: #e6eae8;
    --vault-surface-3: #dbe1de;
    /* A sidebar acompanha o tema claro (superfície clara, no mesmo estilo
       dos demais componentes da página). */
    --vault-sidebar-bg: #f0f3f1;
    --vault-topbar-bg: rgba(232, 236, 233, 0.92);
    --vault-divider: #ccd3d0;
    --kpi-gradient: linear-gradient(135deg, var(--valori-dark-green), var(--valori-teal));
    --vault-text-muted: #5e716d;
    --vault-text-soft: #3f5552;
    --vault-card-border: #ccd3d0;
    --vault-input-bg: #f6f8f7;
    --vault-input-border: #bfc7c3;
    /* Era rgba(6, 124, 102, .08): #067C66 em vez do teal #0D7C66 da paleta.
       Corrigido ao passar pelo trio — diferença imperceptível, valor certo. */
    --vault-row-hover: rgba(var(--valori-teal-rgb), 0.08);
    --vault-accent: var(--valori-yellow);
    --vault-accent-hover: var(--valori-yellow-hover);
    --vault-accent-soft: rgba(var(--valori-yellow-rgb), 0.18);
    --vault-active: var(--valori-teal);
    --vault-active-soft: rgba(var(--valori-teal-rgb), 0.12);
    --vault-active-gradient: linear-gradient(135deg, var(--valori-dark-green), var(--valori-teal));
    --vault-active-gradient-hover: linear-gradient(135deg, var(--valori-teal), var(--valori-dark-green));
    /* Texto claro sobre o gradiente escuro deste tema. */
    --vault-active-on: #fff;

    /* Tokens específicos da sidebar (tema claro) */
    --vault-sidebar-divider: #ccd3d0;
    --vault-sidebar-text-soft: #3f5552;
    --vault-sidebar-text-muted: #5e716d;
    --vault-sidebar-text-strong: var(--valori-dark-green);
    --vault-sidebar-row-hover: rgba(var(--valori-teal-rgb), 0.08);
    --vault-sidebar-active-soft: rgba(var(--valori-teal-rgb), 0.12);
    --vault-sidebar-active: var(--valori-teal);

    /* Alertas (ver bloco dark): tons claros, não derivados da marca. */
    --vault-success-bg: #d8efe6;
    --vault-success-border: #aedccc;
    --vault-success-text: #0a4f3c;
    --vault-warning-bg: #f5ecd9;
    --vault-warning-border: #e3d4a4;
    --vault-warning-text: #6b4900;
    --vault-danger-bg: #f5d6d8;
    --vault-danger-border: #d99ea4;
    --vault-danger-text: #6b1f24;
    --vault-danger-outline-text: #6b1f24;
    --vault-info-bg: #d8e6f4;
    --vault-info-border: #a8c6e4;
    --vault-info-text: #1d4660;

    color-scheme: light;
}

[data-bs-theme="dark"] {
    --vault-sidebar-divider: rgba(var(--valori-aqua-rgb), 0.1);
    --vault-sidebar-text-soft: #adbdb8;
    --vault-sidebar-text-muted: #7d958f;
    --vault-sidebar-text-strong: #f1f7f5;
    --vault-sidebar-row-hover: rgba(var(--valori-aqua-rgb), 0.08);
    --vault-sidebar-active-soft: rgba(var(--valori-aqua-rgb), 0.12);
    --vault-sidebar-active: var(--valori-aqua);
}

/* ---------- Base ---------- */
body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Plano de fundo lembrando o gradiente da tela de login (darkGreen → aqua) */
[data-bs-theme="dark"] body {
    background-image:
        radial-gradient(ellipse 1200px 600px at top left, rgba(var(--valori-aqua-rgb), 0.06), transparent 60%),
        radial-gradient(ellipse 1200px 600px at bottom right, rgba(var(--valori-teal-rgb), 0.08), transparent 60%);
    background-attachment: fixed;
}

[data-bs-theme="light"] body {
    background-image:
        radial-gradient(ellipse 1000px 500px at top, rgba(var(--valori-aqua-rgb), 0.05), transparent 65%);
    background-attachment: fixed;
}

a {
    text-decoration: none;
}

/* ---------- Topbar ---------- */
.app-nav-desktop-area {
    background-color: var(--vault-topbar-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.app-logo-desktop-area {
    /* Casa com a sidebar (verde escuro Valori) — ambos os temas */
    background: linear-gradient(180deg, rgba(var(--valori-aqua-rgb), 0.12), transparent),
                var(--vault-sidebar-bg);
    border-right: 1px solid var(--vault-sidebar-divider) !important;
    border-bottom: 1px solid var(--vault-sidebar-divider) !important;
}

.app-nav-desktop-area .navbar {
    border-bottom: 1px solid var(--vault-divider) !important;
}

/* ---------- Sidebar (sempre em verde escuro Valori) ---------- */
.app-sidebar {
    background-color: var(--vault-sidebar-bg);
    border-right: 1px solid var(--vault-sidebar-divider) !important;
    position: relative;
    color: var(--vault-sidebar-text-soft);
}

.app-sidebar::before {
    /* Linha de acento sutil na cor da marca */
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--vault-sidebar-accent-line), transparent);
    pointer-events: none;
    opacity: 0.4;
}

/* O cabeçalho do grupo virou botão: mantém a aparência de rótulo, e só a seta
   denuncia que ele recolhe. */
.app-sidebar .sidebar-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    padding: 0 .25rem;
    margin-bottom: .5rem;
    cursor: pointer;
}

.app-sidebar .sidebar-section-toggle:focus-visible {
    outline: 2px solid var(--vault-sidebar-text-muted);
    outline-offset: 2px;
    border-radius: .25rem;
}

.app-sidebar .sidebar-section-chevron {
    font-size: .7rem;
    color: var(--vault-sidebar-text-muted);
    transition: transform .15s ease-in-out;
}

.app-sidebar .sidebar-section-toggle[aria-expanded="false"] .sidebar-section-chevron {
    transform: rotate(-90deg);
}

.app-sidebar .sidebar-section-title {
    font-size: 0.68rem !important;
    font-weight: 600;
    color: var(--vault-sidebar-text-muted) !important;
    letter-spacing: 0.08em !important;
    padding: 0 .25rem;
}

.app-sidebar .list-group-item {
    background: transparent;
    color: var(--vault-sidebar-text-soft);
    border: none;
    padding: 0.55rem 0.75rem;
    border-radius: var(--vault-radius-sm);
    margin-bottom: 2px;
    font-size: 0.92rem;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.app-sidebar .list-group-item i {
    width: 1.1rem;
    text-align: center;
    color: var(--vault-sidebar-text-muted);
    transition: color .15s ease;
}

.app-sidebar .list-group-item:hover {
    background: var(--vault-sidebar-row-hover);
    color: var(--vault-sidebar-text-strong);
}

.app-sidebar .list-group-item:hover i {
    color: var(--vault-sidebar-active);
}

.app-sidebar .list-group-item.active {
    background: var(--vault-sidebar-active-soft);
    color: var(--vault-sidebar-text-strong);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--vault-sidebar-active);
}

.app-sidebar .list-group-item.active i {
    color: var(--vault-sidebar-active);
}

[data-bs-theme="light"] .app-sidebar .sidebar-section-title {
    color: var(--vault-sidebar-text-muted) !important;
}

/* ---------- Page header ---------- */
.page-header {
    border-bottom: 1px solid var(--vault-divider) !important;
}

.page-title {
    font-weight: 600;
    color: var(--bs-heading-color);
    letter-spacing: -0.01em;
}

/* ---------- Cards ---------- */
.card {
    border-radius: var(--vault-radius);
    background: var(--bs-card-bg);
    border: 1px solid var(--vault-card-border);
    box-shadow: var(--vault-shadow);
    transition: box-shadow .2s ease, transform .2s ease;
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--vault-divider);
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.85rem 1rem;
    color: var(--bs-heading-color);
}

.card-body {
    padding: 1rem;
}

/* KPI cards: brilho leve no canto */
.card.border-start.border-4 {
    border-left-width: 4px !important;
    border-radius: var(--vault-radius);
    overflow: hidden;
    position: relative;
}

.card.border-start.border-4::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 60%, rgba(var(--valori-aqua-rgb), 0.05) 100%);
    pointer-events: none;
}

[data-bs-theme="light"] .card.border-start.border-4::after {
    background: linear-gradient(120deg, transparent 60%, rgba(var(--valori-aqua-rgb), 0.04) 100%);
}

/* Reaproveita os utilitários border-* do Bootstrap mas com as cores da marca.
   Os dois temas usavam exatamente os mesmos valores — uma regra basta. */
.border-danger { border-color: var(--valori-error) !important; }
.border-warning { border-color: var(--valori-yellow) !important; }
.border-info { border-color: var(--valori-info) !important; }
.border-secondary { border-color: var(--valori-golden) !important; }

/* ---------- Tables ---------- */
.table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
    color: var(--bs-body-color);
}

.table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: var(--vault-divider);
    padding: 0.45rem 0.85rem;
}

.table thead th {
    font-size: 0.72rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em !important;
    color: var(--vault-text-muted);
    border-bottom: 1px solid var(--vault-divider);
    background: transparent;
}

.table-hover tbody tr:hover > * {
    background-color: var(--vault-row-hover) !important;
    color: var(--bs-emphasis-color);
}

.table-bordered > :not(caption) > * > * {
    border: 1px solid var(--vault-divider);
}

.table th[scope="row"], .table tbody th {
    font-weight: 600;
    color: var(--vault-text-soft);
    background: var(--vault-surface-2);
}

.table > tbody > tr.table-active > *,
.table-hover > tbody > tr.table-active:hover > * {
    background-color: var(--vault-surface-3) !important;
    color: var(--vault-text-soft);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    box-shadow: inset 3px 0 0 var(--vault-active);
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
    background-color: var(--vault-input-bg);
    border-color: var(--vault-input-border);
    color: var(--bs-body-color);
    border-radius: var(--vault-radius-sm);
    padding: 0.55rem 0.85rem;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--vault-input-bg);
    border-color: var(--valori-aqua);
    color: var(--bs-body-color);
    box-shadow: 0 0 0 3px rgba(var(--valori-aqua-rgb), 0.18);
}

.form-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--vault-text-soft);
    margin-bottom: 0.4rem;
}

.form-text {
    color: var(--vault-text-muted);
    font-size: 0.78rem;
}

.input-group-text {
    background: var(--vault-surface-3);
    border-color: var(--vault-input-border);
    color: var(--vault-text-soft);
    border-radius: var(--vault-radius-sm);
    font-weight: 500;
}

.input-group:focus-within .input-group-text {
    border-color: var(--valori-aqua);
    color: var(--bs-emphasis-color);
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--vault-radius-sm);
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all .15s ease;
}

.btn-sm {
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
}

/* CTA principal — amarelo Valori (igual ao botão da tela de login) */
.btn-primary {
    background: var(--valori-yellow);
    border-color: var(--valori-yellow);
    color: var(--vault-on-accent);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(var(--valori-yellow-rgb), 0.2);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--valori-yellow-hover);
    border-color: var(--valori-yellow-hover);
    color: var(--vault-on-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(var(--valori-yellow-rgb), 0.35);
}

.btn-primary:active {
    transform: translateY(0);
    background: var(--valori-yellow-hover) !important;
    border-color: var(--valori-yellow-hover) !important;
}

.btn-outline-primary {
    color: var(--valori-yellow);
    border-color: var(--valori-yellow);
}

.btn-outline-primary:hover {
    background: var(--valori-yellow);
    color: var(--vault-on-accent);
    border-color: var(--valori-yellow);
}

/* Sucesso usa aquaGreen Valori */
.btn-success {
    background: var(--valori-aqua);
    border-color: var(--valori-aqua);
    color: var(--vault-on-accent);
    font-weight: 600;
}

.btn-success:hover,
.btn-success:focus {
    background: var(--valori-aqua-hover);
    border-color: var(--valori-aqua-hover);
    color: var(--vault-on-accent);
    box-shadow: 0 4px 14px rgba(var(--valori-aqua-rgb), 0.3);
}

.btn-warning {
    background: var(--valori-golden);
    border-color: var(--valori-golden);
    color: var(--vault-on-accent);
}

.btn-warning:hover {
    background: var(--valori-golden-hover);
    border-color: var(--valori-golden-hover);
    color: var(--vault-on-accent);
}

.btn-danger {
    background: var(--valori-error);
    border-color: var(--valori-error);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--vault-text-soft);
    border-color: var(--vault-input-border);
    background: transparent;
}

.btn-outline-secondary:hover {
    background: var(--vault-surface-2);
    color: var(--bs-emphasis-color);
    border-color: var(--vault-divider);
}

[data-bs-theme="dark"] .btn-outline-success {
    color: var(--valori-aqua);
    border-color: rgba(var(--valori-aqua-rgb), 0.4);
}

[data-bs-theme="dark"] .btn-outline-success:hover {
    background: var(--valori-aqua);
    color: var(--vault-on-accent);
}

[data-bs-theme="dark"] .btn-outline-danger {
    color: var(--vault-danger-outline-text);
    border-color: rgba(var(--valori-error-rgb), 0.4);
}

[data-bs-theme="dark"] .btn-outline-danger:hover {
    background: var(--valori-error);
    color: #fff;
}

[data-bs-theme="dark"] .btn-outline-warning {
    color: var(--valori-golden);
    border-color: rgba(var(--valori-golden-rgb), 0.45);
}

[data-bs-theme="dark"] .btn-outline-warning:hover {
    background: var(--valori-golden);
    color: var(--vault-on-accent);
}

/* Ação secundária da marca (SecondaryColor no white label). */
.btn-secondary {
    background: var(--vault-secondary);
    border-color: var(--vault-secondary);
    color: var(--vault-on-secondary);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: var(--vault-secondary-hover);
    border-color: var(--vault-secondary-hover);
    color: var(--vault-on-secondary);
}

.btn-outline-secondary-brand {
    color: var(--vault-secondary);
    border-color: var(--vault-secondary);
    background: transparent;
}

.btn-outline-secondary-brand:hover {
    background: var(--vault-secondary);
    border-color: var(--vault-secondary);
    color: var(--vault-on-secondary);
}

/* ---------- Segmented control ---------- */
.btn-group > .btn-check + .btn-outline-primary,
.btn-group > .btn-check + .btn-outline-secondary {
    background: var(--vault-input-bg);
    border-color: var(--vault-input-border);
    color: var(--vault-text-soft);
    font-weight: 500;
}

.btn-group > .btn-check:not(:checked) + .btn-outline-primary:hover,
.btn-group > .btn-check:not(:checked) + .btn-outline-secondary:hover {
    background: var(--vault-surface-3);
    border-color: var(--vault-divider);
    color: var(--bs-emphasis-color);
}

.btn-group > .btn-check:checked + .btn-outline-primary,
.btn-group > .btn-check:checked + .btn-outline-secondary {
    background: var(--vault-active-gradient);
    border-color: var(--vault-active);
    color: var(--vault-active-on);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(6, 214, 160, 0.2);
}

.btn-group > .btn-check:focus-visible + .btn {
    box-shadow: 0 0 0 3px rgba(6, 214, 160, 0.3);
    z-index: 2;
}

/* ---------- Badges ---------- */
.badge {
    font-weight: 500;
    padding: 0.35em 0.65em;
    border-radius: 6px;
    letter-spacing: 0.02em;
}

.badge.bg-primary {
    background-color: var(--valori-teal) !important;
    color: #fff;
}

.badge.bg-success {
    background-color: var(--valori-aqua) !important;
    color: var(--vault-on-accent);
}

.badge.bg-warning,
.badge.bg-warning.text-dark {
    background-color: var(--valori-golden) !important;
    color: var(--vault-on-accent) !important;
}

.badge.bg-danger {
    background-color: var(--valori-error) !important;
    color: #fff;
}

.badge.bg-secondary {
    background-color: var(--vault-surface-3) !important;
    color: var(--bs-body-color);
}

/* ---------- Alerts ---------- */
.alert {
    border-radius: var(--vault-radius-sm);
    border: 1px solid transparent;
    padding: 0.85rem 1rem;
}

/* Uma regra por status: os tons de cada tema vivem nos tokens
   --vault-{status}-bg/-border/-text definidos nos blocos de tema. */
.alert-success {
    background: var(--vault-success-bg);
    border-color: var(--vault-success-border);
    color: var(--vault-success-text);
}

.alert-warning {
    background: var(--vault-warning-bg);
    border-color: var(--vault-warning-border);
    color: var(--vault-warning-text);
}

.alert-danger {
    background: var(--vault-danger-bg);
    border-color: var(--vault-danger-border);
    color: var(--vault-danger-text);
}

.alert-info {
    background: var(--vault-info-bg);
    border-color: var(--vault-info-border);
    color: var(--vault-info-text);
}

/* ---------- Texto utilitário ---------- */
.text-success { color: var(--valori-aqua) !important; }
.text-danger  { color: var(--valori-error) !important; }
.text-warning { color: var(--valori-golden) !important; }
.text-info    { color: var(--valori-info) !important; }

[data-bs-theme="light"] .text-warning {
    color: var(--valori-golden-hover) !important;
}

/* ---------- Custom Select ------------------------------------------ */
.cs-wrapper {
    position: relative;
    display: block;
}

.cs-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.55rem 0.85rem;
    background: var(--vault-input-bg);
    border: 1px solid var(--vault-input-border);
    border-radius: var(--vault-radius-sm);
    color: var(--bs-body-color);
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
    text-align: left;
    gap: 0.5rem;
    user-select: none;
}

.cs-trigger:hover {
    border-color: rgba(var(--valori-aqua-rgb), 0.4);
}

.cs-trigger.cs-active,
.cs-trigger:focus {
    outline: none;
    border-color: var(--valori-aqua);
    box-shadow: 0 0 0 3px rgba(var(--valori-aqua-rgb), 0.18);
}

[data-bs-theme="light"] .cs-trigger.cs-active,
[data-bs-theme="light"] .cs-trigger:focus {
    border-color: var(--valori-teal);
    box-shadow: 0 0 0 3px rgba(var(--valori-teal-rgb), 0.15);
}

/* Estado de validação refletido do <select> nativo (oculto) para o trigger visível. */
.cs-trigger.is-invalid {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

.cs-trigger.is-invalid.cs-active,
.cs-trigger.is-invalid:focus {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
    box-shadow: 0 0 0 3px rgba(var(--vault-invalid-rgb), 0.18);
}

.cs-trigger-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--vault-text-muted);
}

.cs-trigger.cs-has-value .cs-trigger-text {
    color: var(--bs-body-color);
}

.cs-arrow {
    flex-shrink: 0;
    color: var(--valori-aqua);
    display: flex;
    align-items: center;
    transition: transform .2s ease, color .15s ease;
}

[data-bs-theme="light"] .cs-arrow {
    color: var(--valori-teal);
}

.cs-trigger.cs-active .cs-arrow {
    transform: rotate(180deg);
    color: var(--valori-aqua);
}

/* sm variant */
.cs-sm .cs-trigger {
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
    border-radius: 8px;
}

/* Dropdown list — appended to body */
.cs-dropdown {
    position: absolute;
    z-index: 9990;
    list-style: none;
    margin: 0;
    padding: 0.3rem;
    background: var(--vault-surface-1);
    border: 1px solid var(--vault-input-border);
    border-radius: var(--vault-radius-sm);
    box-shadow: 0 8px 32px rgba(var(--valori-dark-green-rgb), 0.22), 0 2px 8px rgba(var(--valori-dark-green-rgb), 0.1);
    max-height: 240px;
    overflow-y: auto;
    display: none;
    scrollbar-width: thin;
    scrollbar-color: var(--vault-divider) transparent;
}

[data-bs-theme="light"] .cs-dropdown {
    box-shadow: 0 8px 24px rgba(var(--valori-dark-green-rgb), 0.12), 0 2px 6px rgba(var(--valori-dark-green-rgb), 0.06);
}

.cs-dropdown.cs-open {
    display: block;
    animation: csSlideIn .14s ease;
}

@keyframes csSlideIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cs-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--bs-body-color);
    cursor: pointer;
    transition: background .1s ease, color .1s ease;
    position: relative;
}

.cs-option:hover,
.cs-option.cs-active-option {
    background: var(--vault-row-hover);
    color: var(--bs-emphasis-color);
}

.cs-option.cs-placeholder {
    color: var(--vault-text-muted);
    font-style: italic;
    font-size: 0.85rem;
    cursor: default;
    padding-bottom: 0.55rem;
    margin-bottom: 0.2rem;
    border-bottom: 1px solid var(--vault-divider);
}

.cs-option.cs-placeholder:hover {
    background: transparent;
    color: var(--vault-text-muted);
}

/* A opção vazia (limpar seleção) é clicável — exibe cursor e feedback de hover. */
.cs-option.cs-placeholder:not(.cs-disabled) {
    cursor: pointer;
}

.cs-option.cs-placeholder:not(.cs-disabled):hover,
.cs-option.cs-placeholder.cs-active-option:not(.cs-disabled) {
    background: var(--vault-row-hover);
    color: var(--bs-emphasis-color);
}

.cs-option-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vault-divider);
    flex-shrink: 0;
    transition: background .12s ease;
}

.cs-option:hover .cs-option-dot,
.cs-option.cs-active-option .cs-option-dot {
    background: var(--valori-aqua);
}

[data-bs-theme="light"] .cs-option:hover .cs-option-dot {
    background: var(--valori-teal);
}

.cs-option.cs-selected .cs-option-dot {
    background: var(--valori-aqua);
    box-shadow: 0 0 0 2px rgba(var(--valori-aqua-rgb), 0.25);
}

[data-bs-theme="light"] .cs-option.cs-selected .cs-option-dot {
    background: var(--valori-teal);
    box-shadow: 0 0 0 2px rgba(var(--valori-teal-rgb), 0.2);
}

.cs-option-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.cs-option-label {
    flex: 1;
}

.cs-option.cs-selected .cs-option-label {
    color: var(--bs-emphasis-color);
    font-weight: 500;
}

/* Subtítulo (descrição) da opção — fonte menor e mais apagada, como legenda. */
.cs-option-sub {
    font-size: 0.76rem;
    line-height: 1.25;
    color: var(--vault-text-muted);
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Opções com subtítulo ocupam duas linhas — alinha o marcador/tique ao topo. */
.cs-option.cs-has-sub {
    align-items: flex-start;
}

.cs-option.cs-has-sub .cs-option-dot {
    margin-top: 0.4rem;
}

.cs-option-check {
    flex-shrink: 0;
    color: var(--valori-aqua);
    opacity: 0;
    transition: opacity .12s ease;
    display: flex;
    align-items: center;
}

[data-bs-theme="light"] .cs-option-check {
    color: var(--valori-teal);
}

.cs-option.cs-selected .cs-option-check {
    opacity: 1;
}

/* Busca textual dentro do dropdown (data-cs-search) */
.cs-search {
    position: sticky;
    top: -0.3rem;
    margin: -0.3rem -0.3rem 0.3rem;
    padding: 0.3rem;
    background: var(--vault-surface-1);
    border-bottom: 1px solid var(--vault-divider);
    z-index: 1;
}

.cs-search-input {
    width: 100%;
    padding: 0.4rem 0.6rem;
    font-size: 0.86rem;
    color: var(--bs-body-color);
    background: var(--vault-surface-2);
    border: 1px solid var(--vault-input-border);
    border-radius: 8px;
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.cs-search-input:focus {
    border-color: var(--valori-aqua);
    box-shadow: 0 0 0 2px rgba(var(--valori-aqua-rgb), .18);
}

[data-bs-theme="light"] .cs-search-input:focus {
    border-color: var(--valori-teal);
    box-shadow: 0 0 0 2px rgba(var(--valori-teal-rgb), .15);
}

.cs-hidden {
    display: none !important;
}

.cs-empty {
    padding: 0.6rem 0.7rem;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--vault-text-muted);
    text-align: center;
    list-style: none;
}

/* Custom Select dentro de input-group: ajusta bordas para conectar com os botões adjacentes */
.input-group .cs-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

.input-group .cs-wrapper:not(:last-child) .cs-trigger {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

.input-group .cs-wrapper:not(:first-child) .cs-trigger {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Typeahead de banco — estilo Valori */
.ca-bank-dropdown {
    border: 1px solid var(--vault-input-border);
    border-radius: var(--vault-radius-sm);
    background: var(--vault-surface-1);
    box-shadow: 0 8px 24px rgba(var(--valori-dark-green-rgb), 0.18), 0 2px 8px rgba(var(--valori-dark-green-rgb), 0.1);
    overflow: hidden;
    padding: 0.25rem;
}

.ca-bank-dropdown li {
    list-style: none;
    border-radius: 8px;
    padding: 0.45rem 0.7rem;
    font-size: 0.85rem;
    color: var(--bs-body-color);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
    border: none;
}

.ca-bank-dropdown li:hover,
.ca-bank-dropdown li:focus {
    background: var(--vault-row-hover);
    color: var(--bs-emphasis-color);
}

/* ---------- Dropdown ---------- */
.dropdown-menu {
    border-radius: var(--vault-radius);
    border: 1px solid var(--vault-card-border);
    box-shadow: var(--vault-shadow-lg);
    background: var(--vault-surface-1);
    padding: 0.4rem;
    z-index: 1060;
}

.dropdown-item {
    border-radius: var(--vault-radius-sm);
    padding: 0.5rem 0.75rem;
    color: var(--bs-body-color);
    font-size: 0.92rem;
}

.dropdown-item:hover {
    background: var(--vault-row-hover);
    color: var(--bs-emphasis-color);
}

.dropdown-header {
    color: var(--vault-text-muted);
    font-size: 0.78rem;
    padding: 0.4rem 0.75rem;
}

.dropdown-divider {
    border-top: 1px solid var(--vault-divider);
}

/* ---------- Modal ---------- */
.modal-content {
    border-radius: var(--vault-radius);
    border: 1px solid var(--vault-card-border);
    background: var(--vault-surface-1);
    box-shadow: var(--vault-shadow-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--vault-divider);
}

/* ---------- Footer ---------- */
.app-footer {
    background: var(--bs-body-bg);
    border-top: 1px solid var(--vault-divider) !important;
    color: var(--vault-text-muted);
}

/* ---------- Scrollbar ---------- */
.app-sidebar::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.modal-body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.app-sidebar::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb {
    background: var(--vault-divider);
    border-radius: 3px;
}

.app-sidebar::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--vault-text-muted);
}

/* ---------- Toast ---------- */
.toast-container .toast {
    border-radius: var(--vault-radius);
    box-shadow: var(--vault-shadow-lg);
    border: none;
}

.toast.text-bg-success {
    background-color: var(--valori-aqua) !important;
    color: var(--vault-on-accent) !important;
}

.toast.text-bg-danger {
    background-color: var(--valori-error) !important;
}

/* ---------- Utility surfaces ---------- */
.bg-body-tertiary {
    background-color: var(--vault-surface-2) !important;
}

code {
    background: var(--vault-surface-3);
    color: var(--bs-emphasis-color);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}

/* ---------- Dashboard hero ---------- */
.kpi-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.kpi-icon {
    font-size: 2.2rem;
    opacity: 0.6;
    flex-shrink: 0;
}

.kpi-body {
    container-type: inline-size;
    min-width: 0;
    flex: 1;
}

.kpi-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vault-text-muted);
    font-weight: 600;
    overflow-wrap: break-word;
}

.kpi-value {
    font-size: clamp(0.875rem, calc(100cqi / (var(--kpi-len, 8) * 0.58)), 2rem);
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    color: transparent;
    /* O recorte do gradiente no texto vai nas propriedades separadas, e não no
       atalho `background: var(--kpi-gradient) text`. Com uma variável, o atalho é
       aceito no parse e só validado na substituição: onde a palavra-chave `text`
       não for suportada, a declaração inteira cai e sobra o `color: transparent`
       acima — o valor do cartão fica invisível, que é justamente o número que ele
       existe para mostrar. O prefixo -webkit- continua necessário no Safari. */
    background-image: var(--kpi-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(var(--kpi-grid-cols, 2), minmax(0, 1fr));
    gap: 1rem;
}

.kpi-grid > * {
    container-type: inline-size;
    min-width: 0;
}

@media (min-width: 768px) {
    .kpi-grid {
        --kpi-grid-cols: 3;
    }
}

@media (min-width: 1200px) {
    .kpi-grid {
        --kpi-grid-cols: var(--kpi-grid-cols-xl, 3);
    }
}

.kpi-trend {
    font-size: 0.78rem;
    color: var(--vault-text-muted);
}

/* ---------- Quick actions ---------- */
.quick-action {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--vault-divider);
    border-radius: var(--vault-radius-sm);
    background: var(--vault-surface-2);
    color: var(--bs-body-color);
    transition: all .15s ease;
}

.quick-action:hover {
    background: var(--vault-row-hover);
    border-color: var(--valori-aqua);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(var(--valori-aqua-rgb), 0.12);
    color: var(--bs-emphasis-color);
}

.quick-action .qa-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vault-surface-3);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.quick-action .qa-title {
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.quick-action .qa-desc {
    font-size: 0.8rem;
    color: var(--vault-text-muted);
}

/* Logo do operador no topbar (mantém harmonia com o gradiente da tela de login) */
.user-avatar {
    background: linear-gradient(135deg, var(--valori-yellow), var(--valori-orange)) !important;
    color: var(--vault-on-accent) !important;
}

/* A área do logo desktop acompanha a sidebar. No tema escuro usa o logo
   "dark theme" (versão clara); no tema claro usa o logo escuro sobre fundo claro. */
.app-logo-desktop-area #logo-dark-desktop { display: block !important; }
.app-logo-desktop-area #logo-light-desktop { display: none !important; }

[data-bs-theme="light"] .app-logo-desktop-area {
    background: var(--vault-sidebar-bg);
}

[data-bs-theme="light"] .app-logo-desktop-area #logo-dark-desktop { display: none !important; }
[data-bs-theme="light"] .app-logo-desktop-area #logo-light-desktop { display: block !important; }

/* ---------- KPI cards clicáveis ---------- */
.kpi-link {
    color: inherit;
    display: block;
    height: 100%;
}

.kpi-link .card {
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
    cursor: pointer;
}

.kpi-link:hover .card {
    transform: translateY(-2px);
    box-shadow: var(--vault-shadow-lg);
}

.kpi-link:hover .kpi-cta {
    color: var(--valori-aqua);
}

.kpi-cta {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--vault-text-muted);
    transition: color .15s ease;
}

.kpi-cta i {
    font-size: 1.1rem;
}

.plan-modes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.plan-mode {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    border-radius: var(--vault-radius-sm);
    background: var(--vault-input-bg);
    border: 1px solid var(--vault-divider);
    color: var(--vault-text-muted);
    font-size: 0.88rem;
    font-weight: 600;
}

.plan-mode.is-on {
    background: var(--vault-active-soft);
    border-color: var(--vault-active);
    color: var(--bs-emphasis-color);
}

.plan-mode i {
    font-size: 1rem;
    color: var(--vault-text-muted);
}

.plan-mode.is-on i {
    color: var(--vault-active);
}

.plan-mode small {
    margin-left: auto;
    font-size: 0.74rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.plan-term-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
    font-variant-numeric: tabular-nums;
}

.channel-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: var(--vault-radius-sm);
    background: var(--vault-active-soft);
    border: 1px solid var(--vault-divider);
    color: var(--vault-active);
    font-size: 0.82rem;
    font-weight: 600;
}

.sim-amount {
    color: var(--vault-active);
    font-variant-numeric: tabular-nums;
}

.sim-submit.btn-primary,
.sim-submit.btn-primary:active {
    background: var(--vault-active-gradient) !important;
    border-color: var(--vault-active) !important;
    color: var(--vault-active-on) !important;
    box-shadow: 0 1px 2px rgba(6, 214, 160, 0.2);
}

.sim-submit.btn-primary:hover,
.sim-submit.btn-primary:focus {
    background: var(--vault-active-gradient-hover) !important;
    box-shadow: 0 4px 14px rgba(6, 214, 160, 0.35);
}

.sim-terms .card-body {
    padding: 0.35rem 1rem;
}

.sim-term,
.sim-term-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sim-term {
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0;
}

.sim-term + .sim-term {
    border-top: 1px solid var(--vault-divider);
}

.sim-term-label {
    font-size: 0.82rem;
    color: var(--vault-text-muted);
}

.sim-term-label i {
    color: var(--vault-active);
    font-size: 0.95rem;
}

.sim-term-value {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--bs-emphasis-color);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sim-empty,
.sim-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vault-active);
}

.sim-empty {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--vault-text-muted);
}

.sim-empty p {
    max-width: 34ch;
    font-size: 0.9rem;
}

.sim-empty strong {
    color: var(--vault-active);
    font-weight: 600;
}

.sim-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--vault-surface-3);
    border: 1px solid var(--vault-divider);
    font-size: 1.6rem;
}

/* ---------- Responsive tweaks ---------- */
/* O .kpi-value não tem override por breakpoint: o clamp() da regra base já
   escala pela largura real da coluna, que é o que muda no mobile. */
@media (max-width: 991px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   Seletor de data (flatpickr) — tema Valori
   O calendário nativo do navegador não aceita estilo; o flatpickr substitui o
   campo por um equivalente estilizável (ver wwwroot/js/datepicker.js).
   ========================================================================== */

input.vault-datepicker {
    /* O ícone é um SVG inline, e não há como interpolar uma variável CSS dentro
       de um data: URI — só o url() inteiro pode virar token. Por isso o ícone
       é uma variável completa: o white label sobrescreve a url() com o mesmo
       SVG na cor da marca (ver _BrandTheme.cshtml). */
    background-image: var(--vault-datepicker-icon);
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 0.95rem;
    padding-right: 2.2rem;
    cursor: pointer;
}

.flatpickr-calendar {
    background: var(--vault-surface-1);
    border: 1px solid var(--vault-divider);
    border-radius: var(--vault-radius-sm);
    box-shadow: var(--vault-shadow-lg);
    color: var(--bs-body-color);
    font-family: inherit;
    font-size: 0.86rem;
    padding-bottom: 0.15rem;
}

/* A seta de "balão" do flatpickr não combina com os cartões do projeto */
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
    display: none;
}

.flatpickr-months {
    padding: 0.3rem 0.2rem 0;
}

.flatpickr-months .flatpickr-month {
    background: transparent;
    color: var(--bs-emphasis-color);
    height: 2.5rem;
}

.flatpickr-current-month {
    font-size: 0.95rem;
    font-weight: 600;
    padding-top: 0.5rem;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: transparent;
    color: var(--bs-emphasis-color);
    font-weight: 600;
    border-radius: 6px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: var(--vault-surface-3);
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
    background: var(--vault-surface-1);
    color: var(--bs-body-color);
}

.flatpickr-current-month input.cur-year {
    color: var(--bs-emphasis-color);
    font-weight: 600;
}

.numInputWrapper:hover {
    background: var(--vault-surface-3);
}

.numInputWrapper span {
    border-color: var(--vault-divider);
}

.numInputWrapper span.arrowUp::after {
    border-bottom-color: var(--valori-aqua);
}

.numInputWrapper span.arrowDown::after {
    border-top-color: var(--valori-aqua);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    padding: 0.6rem 0.7rem;
    border-radius: 8px;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: var(--vault-text-soft);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--valori-aqua);
}

.flatpickr-weekdays,
.flatpickr-weekdaycontainer {
    background: transparent;
}

span.flatpickr-weekday {
    background: transparent;
    color: var(--vault-text-muted);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.flatpickr-days {
    border: 0;
}

.dayContainer {
    padding: 0 0.3rem 0.3rem;
}

.flatpickr-day {
    color: var(--bs-body-color);
    border: 1px solid transparent;
    border-radius: 9px;
    height: 2.1rem;
    line-height: 2.05rem;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: var(--vault-surface-3);
    border-color: var(--vault-divider);
    color: var(--bs-emphasis-color);
}

.flatpickr-day.today {
    border-color: var(--valori-aqua);
    color: var(--valori-aqua);
    font-weight: 600;
}

.flatpickr-day.today:hover {
    background: var(--vault-surface-3);
    color: var(--valori-aqua);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--valori-aqua);
    border-color: var(--valori-aqua);
    color: var(--vault-on-accent);
    font-weight: 700;
}

.flatpickr-day.inRange {
    background: var(--vault-surface-3);
    border-color: var(--vault-surface-3);
    box-shadow: none;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--vault-text-muted);
    opacity: .55;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: var(--vault-text-muted);
    opacity: .3;
}

.flatpickr-calendar .flatpickr-time {
    border-top: 1px solid var(--vault-divider);
}

.flatpickr-calendar .flatpickr-time input,
.flatpickr-calendar .flatpickr-time .flatpickr-am-pm {
    color: var(--bs-emphasis-color);
}

.flatpickr-calendar .flatpickr-time input:hover,
.flatpickr-calendar .flatpickr-time .flatpickr-am-pm:hover {
    background: var(--vault-surface-3);
}

/* ---------- MODAIS PÓS-LOGIN (splash e pesquisa NPS) ---------- */
.splash-modal .modal-content {
    position: relative;
    display: block;
}

.splash-modal .splash-image {
    display: block;
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
}

.splash-modal .splash-image[hidden] {
    display: none !important;
}

.splash-modal .splash-close,
.splash-modal .splash-dismiss {
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(6px);
    transition: background .2s ease;
}

.splash-modal .splash-close:hover,
.splash-modal .splash-dismiss:hover {
    background: rgba(0, 0, 0, .65);
}

.splash-modal .splash-close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: .8125rem;
    line-height: 1;
    cursor: pointer;
}

.splash-modal .splash-dismiss {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 1rem;
    border-radius: 20px;
    white-space: nowrap;
}

.splash-modal .splash-dismiss input {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    border: 1.5px solid #fff;
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    transition: background .15s ease;
}

.splash-modal .splash-dismiss input:checked {
    background: #fff no-repeat center / 10px 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23212529' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
}

.splash-modal .splash-dismiss input:disabled {
    opacity: 1;
}

.splash-modal .splash-dismiss label {
    color: #fff;
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.nps-modal .modal-content {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
}

.nps-modal .nps-accent {
    height: 5px;
    background: linear-gradient(90deg, #a9772e 0%, #c9922e 45%, #e0aa4a 100%);
}

.nps-modal .nps-close {
    position: absolute;
    top: 1.25rem;
    right: 1.375rem;
    z-index: 1;
}

.nps-modal .nps-question {
    max-width: 40rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--bs-heading-color);
}

.nps-modal .nps-brand {
    display: block;
    margin-bottom: 1.25rem;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -.5px;
    color: #1b1b1f;
}

[data-bs-theme="dark"] .nps-modal .nps-brand {
    color: var(--valori-yellow);
}

.nps-modal .nps-submit,
.nps-modal .nps-submit:hover,
.nps-modal .nps-submit:focus {
    color: #fff;
}

.nps-modal .nps-submit:disabled {
    background: var(--valori-yellow);
    border-color: var(--valori-yellow);
    color: #fff;
    opacity: .5;
    box-shadow: none;
}

[data-bs-theme="dark"] .nps-modal .nps-submit,
[data-bs-theme="dark"] .nps-modal .nps-submit:hover,
[data-bs-theme="dark"] .nps-modal .nps-submit:focus,
[data-bs-theme="dark"] .nps-modal .nps-submit:disabled {
    color: var(--valori-dark-green);
}

.google-review-dialog {
    max-width: 470px;
}

.google-review-modal .nps-close {
    top: 1.125rem;
    right: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #b9bcc2;
    font-size: .875rem;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

.google-review-modal .nps-close:hover {
    color: var(--bs-body-color);
    background: var(--vault-row-hover);
}

.google-review-modal .modal-content {
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.google-review-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.75rem 3.5rem 2.125rem;
    text-align: center;
}

.google-review-content .nps-brand {
    margin-bottom: 0;
}

.google-review-thanks {
    margin: .625rem 0 0;
    font-size: .9375rem;
    color: #97836a;
}

.google-review-invite {
    margin: .375rem 0 0;
    max-width: 26.25rem;
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--bs-heading-color);
}

.google-review-logo {
    margin: 1.625rem 0 1.875rem;
}

.google-review-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    width: 100%;
    padding: .9375rem 1.5rem;
    border: none;
    border-radius: 10px;
    background: #101014;
    font-size: .9375rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: filter .15s ease, transform .12s ease;
}

.google-review-submit:hover {
    filter: brightness(1.25);
    transform: translateY(-1px);
}

.google-review-later {
    margin-top: 1.125rem;
    padding: .375rem .25rem;
    border: none;
    background: transparent;
    font-size: .84375rem;
    color: #9a9da3;
    cursor: pointer;
    transition: color .15s ease;
}

.google-review-later:hover {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .google-review-submit {
    background: var(--valori-yellow);
    color: var(--valori-dark-green);
}

[data-bs-theme="dark"] .google-review-submit:hover {
    filter: none;
    background: var(--valori-yellow-hover);
}

[data-bs-theme="dark"] .google-review-thanks {
    color: var(--vault-accent);
}

@media (max-width: 480px) {
    .google-review-content {
        padding: 2.375rem 1.5rem 1.75rem;
    }

    .google-review-invite {
        font-size: 1.0625rem;
    }
}

.nps-modal .nps-scores {
    display: flex;
    justify-content: space-between;
    gap: .375rem;
}

.nps-modal .nps-score {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5625rem;
    padding: .375rem 0;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: transform .12s ease;
}

.nps-modal .nps-score:hover,
.nps-modal .nps-score.selected {
    transform: translateY(-3px);
}

.nps-modal .nps-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--nps-color);
    box-shadow: inset 0 -4px 7px rgba(0, 0, 0, .14), 0 2px 4px rgba(0, 0, 0, .12);
    transition: box-shadow .15s ease, transform .15s ease;
}

.nps-modal .nps-score.selected .nps-face {
    transform: scale(1.12);
    box-shadow: inset 0 -4px 7px rgba(0, 0, 0, .14), 0 2px 4px rgba(0, 0, 0, .12),
                0 0 0 3px color-mix(in srgb, var(--nps-color) 33%, transparent);
}

.nps-modal .nps-eyes {
    display: flex;
    gap: 9px;
}

.nps-modal .nps-eye {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(60, 28, 14, .72);
}

.nps-modal .nps-mouth-flat {
    width: 16px;
    height: 3px;
    margin-top: 4px;
    border-radius: 2px;
    background: rgba(60, 28, 14, .72);
}

.nps-modal .nps-mouth-sad,
.nps-modal .nps-mouth-happy {
    box-sizing: content-box;
    width: 18px;
    height: 9px;
    margin-top: 1px;
    border: 3px solid rgba(60, 28, 14, .72);
}

.nps-modal .nps-mouth-sad {
    border-bottom: none;
    border-radius: 18px 18px 0 0;
}

.nps-modal .nps-mouth-happy {
    border-top: none;
    border-radius: 0 0 18px 18px;
}

.nps-modal .nps-score-number {
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1;
    color: var(--nps-color);
}

.nps-modal .nps-score.selected .nps-score-number {
    font-size: .90625rem;
}

.nps-modal .nps-field-label {
    font-size: .84375rem;
    font-weight: 500;
    color: var(--vault-text-muted);
}

.nps-modal .nps-optional {
    font-weight: 400;
    opacity: .8;
}

.nps-modal .nps-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.125rem;
}

.nps-modal .nps-remind {
    font-size: .78125rem;
    font-weight: 500;
    color: var(--vault-text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nps-modal .nps-remind:hover {
    color: var(--bs-body-color);
}

@media (max-width: 640px) {
    .nps-modal .nps-scores {
        flex-wrap: wrap;
        justify-content: center;
        gap: .5rem .25rem;
    }

    .nps-modal .nps-score {
        flex: 0 0 auto;
        width: 46px;
        gap: .4375rem;
    }

    .nps-modal .nps-face {
        width: 38px;
        height: 38px;
        gap: 4px;
    }

    .nps-modal .nps-eyes {
        gap: 7px;
    }
}

@media (max-width: 480px) {
    .nps-modal .nps-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: .875rem;
    }
}

/* ---------- Filtros (Vendas / Recebíveis) ---------------------------- */
.filter-chips {
    min-height: 2rem;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--vault-surface-2);
    border: 1px solid var(--vault-divider);
    border-radius: 999px;
    padding: .2rem .3rem .2rem .7rem;
    font-size: .82rem;
    line-height: 1.6;
}

.filter-chip-label {
    color: var(--vault-text-muted);
}

.filter-chip-value {
    color: var(--bs-emphasis-color);
    font-weight: 600;
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    color: var(--vault-text-muted);
    text-decoration: none;
    font-size: .62rem;
    flex: 0 0 auto;
}

.filter-chip-remove:hover,
.filter-chip-remove:focus-visible {
    background: var(--valori-aqua);
    color: var(--valori-dark-green);
}

.filter-panel {
    width: min(52rem, calc(100vw - 264px - 3rem));
    min-width: min(22rem, calc(100vw - 2rem));
    overflow: hidden;
}

.filter-panel-body {
    display: grid;
    grid-template-columns: 13rem 1fr;
    min-height: 19rem;
}

/* Painel de um campo só (efeitos de contrato): sem a coluna de navegação, que
   existiria para listar um item. O resto — presets, calendário, rótulo do
   intervalo, rodapé — é o mesmo das listagens.
   A largura não é arbitrária: é a área que sobra para o calendário no painel das
   listagens (52rem menos as 13rem da navegação), mais o mesmo respiro. Estreitar
   além disso espremeria os dois meses lado a lado que o flatpickr abre acima de
   992px — e o calendário é o mesmo das outras telas. */
.filter-panel-compact {
    width: min(39rem, calc(100vw - 1.5rem));
    min-width: 0;
}

.filter-panel-compact .filter-panel-body {
    grid-template-columns: 1fr;
    min-height: 0;
}

.filter-nav {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .5rem;
    border-right: 1px solid var(--vault-divider);
    background: var(--vault-surface-2);
    overflow-y: auto;
    max-height: 26rem;
}

.filter-nav-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--vault-text-soft);
    text-align: left;
    padding: .5rem .6rem;
    border-radius: var(--vault-radius-sm);
    font-size: .87rem;
    line-height: 1.3;
    cursor: pointer;
}

.filter-nav-item:hover {
    background: var(--vault-row-hover);
    color: var(--bs-emphasis-color);
}

.filter-nav-item.active {
    background: var(--vault-surface-1);
    color: var(--bs-emphasis-color);
    font-weight: 600;
}

.filter-nav-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-nav-dot {
    flex: 0 0 auto;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: var(--valori-aqua);
}

.filter-pane-wrap {
    padding: .85rem;
    overflow-y: auto;
    max-height: 26rem;
}

.filter-pane {
    display: none;
}

.filter-pane.active {
    display: block;
}

.filter-options {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.filter-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    border: 1px solid transparent;
    border-radius: var(--vault-radius-sm);
    font-size: .88rem;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.filter-option:hover {
    background: var(--vault-row-hover);
}

.filter-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

.filter-option::before {
    content: "";
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    border: 2px solid var(--vault-input-border);
    border-radius: 50%;
    background: var(--vault-input-bg);
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}

.filter-option:hover::before {
    border-color: var(--valori-aqua);
}

.filter-option:has(input:checked) {
    background: var(--vault-row-hover);
    border-color: var(--vault-divider);
    color: var(--bs-emphasis-color);
    font-weight: 600;
}

.filter-option:has(input:checked)::before {
    border-color: var(--valori-aqua);
    background: var(--valori-aqua);
    box-shadow: inset 0 0 0 3px var(--vault-input-bg);
}

.filter-option:has(input:focus-visible) {
    border-color: var(--valori-aqua);
    box-shadow: 0 0 0 3px rgba(6, 214, 160, .18);
}

.filter-text {
    position: relative;
}

.filter-text::before {
    content: "";
    position: absolute;
    left: .75rem;
    top: 50%;
    width: .9rem;
    height: .9rem;
    transform: translateY(-50%);
    pointer-events: none;
    background: var(--vault-text-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.7 11a4.5 4.5 0 1 0-.7.7l3.1 3.1.7-.7zM3 7.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.7 11a4.5 4.5 0 1 0-.7.7l3.1 3.1.7-.7zM3 7.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

.filter-text .form-control {
    padding-left: 2.1rem;
}

.filter-text .form-control::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.filter-text-clear {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--vault-text-muted);
    font-size: .7rem;
    line-height: 1;
    cursor: pointer;
}

.filter-text-clear:hover {
    background: var(--valori-aqua);
    color: var(--valori-dark-green);
}

.filter-text .form-control:not(:placeholder-shown) ~ .filter-text-clear {
    display: flex;
}

.filter-text-hint {
    margin-top: .5rem;
    font-size: .78rem;
    color: var(--vault-text-muted);
}

.filter-field {
    display: grid;
    gap: .3rem;
    min-width: 0;
}

.filter-field-label {
    margin: 0;
    color: var(--vault-text-muted);
    font-size: .75rem;
    font-weight: 500;
}

.filter-field-pair {
    display: flex;
    gap: .55rem;
    margin-top: .6rem;
}

.filter-field-pair > .filter-field {
    flex: 1 1 0;
}

.filter-time-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .7rem;
    margin-top: .6rem;
    padding-top: .55rem;
    border-top: 1px solid var(--vault-divider);
}

.filter-time-title {
    color: var(--vault-text-muted);
    font-size: .78rem;
    font-weight: 500;
}

.filter-time-group {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
}

.filter-time-prefix {
    margin-right: .1rem;
    color: var(--vault-text-muted);
    font-size: .78rem;
}

.filter-time-sep {
    color: var(--vault-text-muted);
    font-size: .78rem;
}

.filter-time-group .cs-wrapper {
    width: 3.6rem;
}

.filter-time-group .cs-trigger {
    gap: .15rem;
    padding: .25rem .4rem;
    font-variant-numeric: tabular-nums;
}

.filter-time-group .cs-trigger-text {
    color: var(--bs-body-color);
    text-align: center;
}

.filter-hint {
    margin-top: .6rem;
    color: var(--valori-error);
    font-size: .78rem;
    line-height: 1.35;
}

/* Os atalhos de período ficam numa coluna à esquerda e o calendário ocupa o resto
   do painel. Como o calendário só aparece no período personalizado, a coluna dele
   fica vazia nos atalhos — e é por isso que a largura é fixa: sem ela, a lista se
   esticaria no painel inteiro e voltaria a encolher ao abrir o calendário. */
.filter-daterange {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: .9rem;
    align-items: start;
}

.filter-presets {
    display: grid;
    gap: .1rem;
}

.filter-custom-range {
    min-width: 0;
}

.filter-range-label {
    grid-column: 1 / -1;
}

@media (max-width: 991px) {
    .filter-daterange {
        grid-template-columns: 1fr;
    }
}

.filter-preset {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    color: var(--vault-text-soft);
    border-radius: .5rem;
    padding: .38rem .55rem;
    font-size: .82rem;
    text-align: left;
    cursor: pointer;
}

.filter-preset i {
    color: var(--vault-text-muted);
}

.filter-preset:hover {
    background: var(--vault-surface-2);
    color: var(--valori-aqua);
}

.filter-preset.active {
    background: var(--vault-surface-3);
    border-color: var(--valori-aqua);
    color: var(--valori-aqua);
    font-weight: 600;
}

.filter-preset:hover i,
.filter-preset.active i {
    color: inherit;
}

/* O personalizado é o único atalho que abre o calendário; a linha o separa dos
   que resolvem o período sozinhos. */
.filter-preset[data-preset="custom"] {
    margin-top: .35rem;
    padding-top: .5rem;
    border-top: 1px solid var(--vault-divider);
}

.filter-daterange .flatpickr-calendar.inline {
    box-shadow: none;
    border: 0;
    background: transparent;
    margin: 0;
    width: 100% !important;
    max-width: 100% !important;
}

.filter-daterange .flatpickr-days,
.filter-daterange .flatpickr-rContainer {
    width: 100% !important;
    max-width: 100% !important;
}

.filter-daterange .dayContainer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: flex-start;
}

.filter-daterange .flatpickr-day {
    max-width: none;
    flex-basis: 14.2857%;
}

.filter-daterange .flatpickr-innerContainer {
    display: flex;
    width: 100%;
}

.filter-calendar {
    display: none;
}

.filter-daterange .flatpickr-months {
    padding-top: 0;
}

.filter-month {
    display: grid;
    gap: .6rem;
    max-width: 24rem;
}

.filter-month-year {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.filter-month-year-step,
.filter-month-year-input,
.filter-month-item {
    border: 1px solid transparent;
    border-radius: var(--vault-radius-sm);
    background: none;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.filter-month-year-step {
    display: flex;
    padding: .3rem .55rem;
    color: var(--valori-aqua);
}

.filter-month-year-input {
    flex: 1 1 auto;
    width: 100%;
    padding: .25rem;
    color: var(--bs-emphasis-color);
    font-size: .95rem;
    font-weight: 600;
    text-align: center;
    appearance: textfield;
}

.filter-month-year-input::-webkit-inner-spin-button {
    appearance: none;
}

.filter-month-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(3.25rem, 1fr));
    gap: .3rem;
}

.filter-month-item {
    padding: .5rem .25rem;
    color: var(--vault-text-soft);
    font-size: .84rem;
    text-transform: lowercase;
}

.filter-month-year-step:hover {
    background: var(--vault-row-hover);
}

.filter-month-year-input:hover,
.filter-month-item:hover {
    background: var(--vault-row-hover);
    color: var(--bs-emphasis-color);
}

.filter-month-item.selected {
    background: var(--vault-active-soft);
    border-color: var(--valori-aqua);
    color: var(--bs-emphasis-color);
    font-weight: 600;
}

.filter-month-year-input:focus,
.filter-month-year-step:focus-visible,
.filter-month-item:focus-visible {
    outline: 0;
    border-color: var(--valori-aqua);
    box-shadow: 0 0 0 3px rgba(var(--valori-aqua-rgb), .18);
}

.filter-range-label {
    margin-top: .6rem;
    padding-top: .55rem;
    border-top: 1px solid var(--vault-divider);
    font-size: .84rem;
    color: var(--bs-emphasis-color);
    font-weight: 600;
}

.flatpickr-calendar.open {
    z-index: 1075;
}

.filter-panel-footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .7rem .85rem;
    border-top: 1px solid var(--vault-divider);
    background: var(--vault-surface-2);
}

@media (max-width: 767.98px) {
    .filter-panel {
        width: calc(100vw - 1.5rem);
    }

    .filter-panel-body {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .filter-nav {
        flex-direction: row;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--vault-divider);
        max-height: none;
    }

    .filter-nav-item {
        width: auto;
        white-space: nowrap;
    }
}