/* ================================================================
   Vizzo Design System
   Aperture — Teal & Amber · Clínico, Técnico, Sofisticado
   ================================================================ */

/* ----------------------------------------------------------------
   VIZZO Design Tokens — Optical SaaS · Premium 2025
   Palette rationale:
   · Teal profundo    → confiança médica, precisão clínica, foco técnico
   · Âmbar quente     → humaniza, contraste forte, íris/apertura
   · Neutros quentes  → cream/off-white premium, não estéril
   ---------------------------------------------------------------- */
:root {
    /* Brand / Primary (Verde Petróleo Óptico — #0B3A3D) */
    --v-primary:        #0B3A3D;
    --v-primary-dark:   #092E31;
    --v-primary-hover:  #155E63;   /* Secundária — Verde Médio (hover oficial) */
    --v-primary-deep:   #071E20;
    --v-primary-light:  #C8DEDF;
    --v-primary-pale:   #EBF4F4;
    --v-primary-rgb:    11,58,61;

    /* Accent (Âmbar Óptico — destaques, nunca cor principal) */
    --v-accent:         #E08A3C;
    --v-accent-dark:    #C2742C;
    --v-accent-pale:    #FDF3E7;
    --v-cyan:           #E08A3C;
    --v-cyan-light:     #FDF3E7;

    /* Brand gradient */
    --v-grad-brand:     linear-gradient(135deg, #071E20 0%, #0B3A3D 55%, #E08A3C 130%);
    --v-grad-brand-soft:linear-gradient(135deg, #0B3A3D 0%, #155E63 100%);

    /* Neutrals (cool slate — oficial) */
    --v-bg:             #F8FAFC;
    --v-bg-alt:         #F1F5F9;
    --v-surface:        #FFFFFF;
    --v-border:         var(--v-border);
    --v-border-strong:  #CBD5E1;
    --v-border-light:   #F1F5F9;

    /* Text */
    --v-text:           #0F172A;
    --v-text-secondary: #334155;
    --v-text-muted:     #64748B;
    --v-text-light:     #94A3B8;

    /* Semantic (valores oficiais) */
    --v-success:        #16A34A;
    --v-success-dark:   #15803D;
    --v-success-bg:     #F0FDF4;
    --v-error:          #DC2626;
    --v-error-dark:     #B91C1C;
    --v-error-bg:       #FEF2F2;
    --v-warning:        #F59E0B;
    --v-warning-dark:   #D97706;
    --v-warning-bg:     #FFFBEB;
    --v-info:           #2563EB;
    --v-info-bg:        #EFF6FF;

    /* Sidebar — LIGHT (white) */
    --v-sidebar-bg:     #FFFFFF;
    --v-sidebar-bg-2:   #F8FAFC;
    --v-sidebar-hover:  rgba(11,58,61,0.05);
    --v-sidebar-active: var(--v-primary);
    --v-sidebar-text:   #64748B;

    --v-sidebar-width:  256px;

    /* Layout */
    --v-topbar-height:  62px;
    --v-radius-sm:      6px;
    --v-radius:         10px;   /* inputs/botões */
    --v-radius-lg:      16px;   /* cards (oficial) */
    --v-radius-xl:      18px;

    /* Shadows */
    --v-shadow-sm:      0 1px 2px rgba(15,23,42,0.04);
    --v-shadow:         0 1px 3px rgba(15,23,42,0.08);
    --v-shadow-md:      0 2px 4px rgba(15,23,42,0.04), 0 6px 16px rgba(15,23,42,0.07);
    --v-shadow-lg:      0 4px 8px rgba(15,23,42,0.05), 0 16px 32px rgba(15,23,42,0.10);
    --v-shadow-xl:      0 12px 24px rgba(15,23,42,0.08), 0 30px 60px rgba(15,23,42,0.14);
    --v-shadow-blue:    0 4px 14px rgba(11,58,61,0.22);
    --v-ring:           0 0 0 4px rgba(11,58,61,0.10);   /* focus oficial */

    /* Motion */
    --v-transition:     150ms cubic-bezier(0.4,0,0.2,1);
    --v-transition-md:  250ms cubic-bezier(0.4,0,0.2,1);
    --v-ease-out:       cubic-bezier(0.16,1,0.3,1);

    /* Button sizing — compact, modern SaaS */
    --v-btn-h:          32px;
    --v-btn-h-sm:       26px;
    --v-btn-h-lg:       38px;

    /* Input sizing — ONE height for the entire system.
       Igual a --v-btn-h, para input e botao lado a lado baterem a altura.
       A posicao do label flutuante e a altura dos itens de dropdown sao
       calculadas a partir deste token — mexer aqui ajusta tudo junto. */
    --v-input-h:        32px;

    /* Legacy aliases */
    --color-brand:       var(--v-primary);
    --color-accent:      var(--v-primary);
    --color-navy:        #0F172A;
    --color-bg:          var(--v-bg);
    --color-white:       var(--v-surface);
    --color-success:     var(--v-success-dark);
    --color-warning:     var(--v-warning-dark);
    --color-error:       var(--v-error-dark);
    --color-info:        var(--v-info);
    --color-pale:        var(--v-primary-light);
    --color-soft-lavender: var(--v-primary-pale);
    --color-light-purple:  var(--v-primary);
    --sidebar-width:     var(--v-sidebar-width);
    --topbar-height:     var(--v-topbar-height);
    --border-radius:     var(--v-radius);
    --shadow-card:       var(--v-shadow);
    --shadow-elevated:   var(--v-shadow-lg);
    --transition-fast:   var(--v-transition);
    --transition-normal: var(--v-transition-md);
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
    background-color: var(--v-bg);
    color: var(--v-text);
    margin: 0; padding: 0;
    height: 100%;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { margin: 0; }
h1:focus { outline: none; }

/* ---- Custom Scrollbar ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

/* ================================================================
   SPLASH SCREEN
   ================================================================ */
.splash-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: linear-gradient(135deg, #071E20 0%, #0B3A3D 58%, #E98A3C 100%);
    gap: 32px;
}

.splash-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    color: white;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.splash-logo svg {
    filter: drop-shadow(0 4px 16px rgba(11,58,61,0.45));
    animation: vizzo-pulse 2.2s ease-in-out infinite;
}

@keyframes vizzo-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.92; }
}

.splash-spinner {
    width: 36px; height: 36px;
    border: 3px solid rgba(255,255,255,0.15);
    border-top-color: white;
    border-radius: 50%;
    animation: vizzo-spin 0.75s linear infinite;
}

@keyframes vizzo-spin { to { transform: rotate(360deg); } }

/* ================================================================
   ERROR UI
   ================================================================ */
#blazor-error-ui {
    background: #FEF3C7;
    border-top: 3px solid var(--v-warning);
    bottom: 0; left: 0; right: 0;
    display: none;
    padding: 12px 24px;
    position: fixed;
    z-index: 9999;
    font-size: 0.875rem;
    color: #92400E;
    font-family: 'Inter', sans-serif;
}
#blazor-error-ui .reload { color: var(--v-primary); font-weight: 600; margin-left: 8px; }
#blazor-error-ui .dismiss {
    cursor: pointer; position: absolute;
    right: 16px; top: 50%; transform: translateY(-50%);
    color: var(--v-text-light); font-size: 1.1rem;
}
#blazor-error-ui .dismiss:hover { color: var(--v-text); }

/* ================================================================
   MAIN LAYOUT — Sidebar & Appbar overrides
   ================================================================ */

/* Sidebar (MudDrawer)
   Visual inspirado na navegação da doc do Supabase: sem sombra, hairline única,
   itens de baixo contraste e muito respiro. O peso visual fica no item ativo. */
.mud-drawer {
    background: var(--v-sidebar-bg) !important;
    border-right: 1px solid var(--v-border) !important;
    box-shadow: none !important;
}

.mud-drawer .mud-nav-link {
    color: var(--v-sidebar-text) !important;
    border-radius: 6px !important;
    margin: 0 8px !important;
    padding: 6px 10px !important;
    min-height: 30px !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    letter-spacing: -0.006em !important;
    transition: background var(--v-transition), color var(--v-transition) !important;
    position: relative;
}

.mud-drawer .mud-nav-link:hover {
    background: rgba(15,23,42,0.045) !important;
    color: var(--v-text, #0F172A) !important;
}

/* Item ativo — fundo tênue da marca, sem barra lateral dura */
.mud-drawer .mud-nav-link.active {
    background: rgba(11,58,61,0.06) !important;
    color: var(--v-primary) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    border-radius: 6px !important;
}

.mud-drawer .mud-nav-link.active::before {
    content: none !important;
}

/* Ícones — 16px, traço fino e bem apagados; ganham cor só no ativo */
.mud-drawer .mud-nav-link .mud-icon-root {
    font-size: 0.95rem !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 10px !important;
    color: #A8B0B4 !important;
    transition: color var(--v-transition) !important;
}

.mud-drawer .mud-nav-link:hover .mud-icon-root {
    color: var(--v-text-muted) !important;
}

.mud-drawer .mud-nav-link.active .mud-icon-root {
    color: var(--v-primary) !important;
}

/* Texto do item vira flex para acomodar o badge à direita */
.mud-drawer .mud-nav-link .mud-nav-link-text {
    display: flex !important;
    align-items: center !important;
    width: 100%;
    min-width: 0;
}

/* ── Badge de contagem ── */
/* ── Badge no CABEÇALHO do grupo ──────────────────────────────────────────
   Mostra o total de pendências dos filhos mesmo com o grupo recolhido.
   Feito por CSS porque o MudNavGroup (v7) não aceita conteúdo no título.   */
.nav-group-wrap { position: relative; }

.nav-group-wrap[data-badge]::after {
    content: attr(data-badge);
    position: absolute;
    top: 5px;                  /* alinha com a linha do rótulo da seção (26px) */
    right: 34px;               /* espaço para a seta de expandir */
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    border-radius: 100px;
    background: var(--v-primary-pale, #E6EFEF);
    color: var(--v-primary, #0B3A3D);
    pointer-events: none;
}

/* Quando o grupo está aberto, o badge some — os filhos já mostram o detalhe */
.nav-group-wrap:has(.mud-nav-link[aria-expanded="true"])::after {
    opacity: 0;
}

/* Indicador de estado (caixa aberto) — bolinha, não contador */
.nav-dot {
    margin-left: auto;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16A34A;
    box-shadow: 0 0 0 3px rgba(22,163,74,0.16);
}

.nav-badge {
    margin-left: auto;
    flex-shrink: 0;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--v-text-muted);
    background: rgba(15,23,42,0.06);
    border-radius: 100px;
}

.mud-drawer .mud-nav-link:hover .nav-badge {
    color: var(--v-primary);
    background: rgba(11,58,61,0.10);
}

.mud-drawer .mud-nav-link.active .nav-badge {
    color: #fff;
    background: var(--v-primary);
}

/* Sub-itens: sem recuo nem guia vertical.
   Com o cabeçalho virando rótulo de seção (caixa alta), a hierarquia já fica
   clara pela tipografia — igual ao Supabase, onde a lista é plana. */
.mud-drawer .mud-nav-group .mud-collapse-container .mud-navmenu {
    position: relative;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}

/* O CSS oficial recua os filhos com padding-inline-start: 48px — aqui a lista
   é plana, então o recuo é zerado e o item volta a alinhar com o rótulo. */
.mud-drawer .mud-nav-group .mud-navmenu .mud-nav-link {
    margin-left: 8px !important;
    margin-right: 8px !important;
    padding-inline-start: 10px !important;
    padding-inline-end: 10px !important;
}

/* Appbar (Topbar) */
.mud-appbar {
    background: var(--v-surface) !important;
    color: var(--v-text) !important;
    border-bottom: 1px solid var(--v-border) !important;
    box-shadow: none !important;
}

/* ================================================================
   SIDEBAR BRAND & SECTIONS
   ================================================================ */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 14px 16px;
    color: var(--v-text);
    text-decoration: none;
    border-bottom: 1px solid var(--v-border);
    margin-bottom: 0;
    flex-shrink: 0;
}

/* Rótulo de seção estático — mesmo visual do cabeçalho de grupo colapsável */
.sidebar-section-header {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--v-text-light);
    padding: 16px 18px 4px 18px;
}

/* Sidebar layout */
.sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.sidebar-search {
    padding: 10px 12px 6px;
    flex-shrink: 0;
}

.sidebar-searchbox {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--v-bg-alt);
    border: 1px solid var(--v-border);
    border-radius: 8px;
    padding: 7px 10px;
    cursor: default;
    transition: border-color 150ms ease;
}

.sidebar-search-placeholder {
    font-size: 0.8125rem;
    color: var(--v-text-light);
    font-family: 'Inter', sans-serif;
    flex: 1;
}

.sidebar-search-kbd {
    font-size: 0.68rem;
    color: #C0B8B0;
    background: #F2E9DC;
    border: 1px solid var(--v-border);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
}

.sidebar-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.8125rem;
    color: var(--v-text-secondary);
    font-family: 'Inter', sans-serif;
    padding: 0;
    min-width: 0;
}
.sidebar-search-input::placeholder { color: var(--v-text-light); }

.sidebar-searchbox.focused {
    border-color: var(--v-primary);
    box-shadow: 0 0 0 2px rgba(11,58,61,0.1);
}

.sidebar-search-clear {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--v-text-light);
    padding: 0;
    display: flex;
    align-items: center;
    line-height: 1;
}
.sidebar-search-clear:hover { color: var(--v-primary); }

.sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-scroll::-webkit-scrollbar { width: 3px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: #E5DDD5; border-radius: 10px; }

/* Sidebar user footer */
.sidebar-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--v-border);
    flex-shrink: 0;
    background: var(--v-surface);
}

.sidebar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0B3A3D, #E98A3C);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

.sidebar-user-details { line-height: 1.25; overflow: hidden; min-width: 0; }
.sidebar-user-name { font-size: 0.8125rem; font-weight: 600; color: var(--v-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: 0.72rem; color: var(--v-text-muted); }

/* ================================================================
   PAGE STRUCTURE
   ================================================================ */
.page-content {
    padding: 28px 28px 32px;
    overflow-y: auto;
    height: calc(100vh - var(--v-topbar-height));
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.page-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--v-text);
    margin: 0;
    letter-spacing: -0.3px;
}

.page-subtitle {
    font-size: 0.875rem;
    color: var(--v-text-muted);
    margin-top: 2px;
}

/* ================================================================
   KPI / STAT CARDS
   ================================================================ */
.stat-card {
    background: var(--v-surface);
    border-radius: var(--v-radius-lg);
    padding: 20px 22px;
    box-shadow: var(--v-shadow);
    border: 1px solid var(--v-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    overflow: hidden;
    height: 100%;
    transition: transform var(--v-transition), box-shadow var(--v-transition);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--v-shadow-md);
}

/* Color variants */
.stat-card { border-top: 3px solid var(--v-primary); }
.stat-card.success { border-top-color: var(--v-success); }
.stat-card.warning { border-top-color: var(--v-warning); }
.stat-card.error   { border-top-color: var(--v-error); }
.stat-card.cyan    { border-top-color: var(--v-cyan); }

/* Filled card (primary) */
.stat-card.accent, .stat-card.dark {
    background: linear-gradient(135deg, var(--v-primary-dark), var(--v-primary));
    border: none;
    border-top: none;
    box-shadow: var(--v-shadow-blue);
    color: white;
}

.stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--v-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.stat-card.accent .stat-label,
.stat-card.dark .stat-label { color: rgba(255,255,255,0.7); }

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--v-text);
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.stat-card.accent .stat-value,
.stat-card.dark .stat-value { color: white; }

/* ================================================================
   VIZZO CARD (generic clean card)
   ================================================================ */
.v-card {
    background: var(--v-surface);
    border-radius: var(--v-radius-lg);
    box-shadow: var(--v-shadow);
    border: 1px solid var(--v-border);
    overflow: hidden;
}

.v-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--v-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.v-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--v-text);
}

.v-card-body { padding: 20px; }

/* ================================================================
   STATUS BADGES / CHIPS
   ================================================================ */
.status-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.status-chip.active    { background: var(--v-success-bg); color: var(--v-success-dark); }
.status-chip.paid      { background: var(--v-success-bg); color: var(--v-success-dark); }
.status-chip.completed { background: var(--v-success-bg); color: var(--v-success-dark); }
.status-chip.inactive  { background: var(--v-bg-alt); color: var(--v-text-muted); }
.status-chip.cancelled { background: var(--v-error-bg); color: var(--v-error-dark); }
.status-chip.overdue   { background: var(--v-error-bg); color: var(--v-error-dark); }
.status-chip.pending   { background: var(--v-warning-bg); color: var(--v-warning-dark); }
.status-chip.warning   { background: var(--v-warning-bg); color: var(--v-warning-dark); }
.status-chip.info      { background: var(--v-primary-pale); color: var(--v-primary-dark); }

/* ================================================================
   TABLE OVERRIDES (MudDataGrid / MudTable)
   ================================================================ */
.mud-data-grid .mud-table-head .mud-table-cell {
    background: var(--v-bg) !important;
    color: var(--v-text-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    border-bottom: 1px solid var(--v-border) !important;
}

/* Clean rows: no muddy striping — just subtle dividers + soft hover */
.mud-table-body .mud-table-row { background: var(--v-surface) !important; }
.mud-table-body .mud-table-row:nth-child(even) { background: var(--v-surface) !important; }
.mud-table-body .mud-table-row .mud-table-cell {
    border-bottom: 1px solid var(--v-border-light) !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}
.mud-table-body .mud-table-row:last-child .mud-table-cell { border-bottom: none !important; }
.mud-table-body .mud-table-row:hover { background: var(--v-bg-alt) !important; }
/* First column reads as the row's identity */
.mud-table-body .mud-table-row .mud-table-cell:first-child { color: var(--v-text) !important; font-weight: 500 !important; }

/* ================================================================
   LOGIN PAGE
   ================================================================ */
.login-page {
    min-height: 100vh;
    display: flex;
    background: var(--v-surface);
}

.login-left {
    flex: 0 0 44%;
    background: linear-gradient(150deg, #071E20 0%, #0B3A3D 52%, #E98A3C 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 56px;
    color: white;
}

.login-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: var(--v-surface);
}

.login-form-wrapper {
    width: 100%;
    max-width: 400px;
}

.login-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}

.login-tagline {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.5;
    margin-bottom: 40px;
    max-width: 320px;
}

.login-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.8);
}

.login-feature-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Legacy — kept for pages not yet migrated */
.login-card-wrapper { width: 100%; max-width: 420px; }

/* ================================================================
   APPOINTMENT CALENDAR
   ================================================================ */
.appointment-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px 14px 14px;
    background: var(--v-surface);
    border: 1px solid var(--v-border);
    border-left: 4px solid var(--v-primary);
    border-radius: var(--v-radius);
    box-shadow: var(--v-shadow-sm);
    margin-bottom: 10px;
    position: relative;
    transition: box-shadow var(--v-transition), transform var(--v-transition), border-color var(--v-transition);
}

.appointment-item:hover {
    box-shadow: var(--v-shadow-md);
    transform: translateX(3px);
    border-color: var(--v-border-strong);
    border-left-color: var(--v-primary);
}
.appointment-item.completed  { border-left-color: var(--v-success); }
.appointment-item.cancelled  { border-left-color: var(--v-error); opacity: 0.72; }
.appointment-item.no-show    { border-left-color: var(--v-warning); }

/* Time block — anchors each row, reads at a glance */
.appointment-item .apt-time {
    flex: 0 0 64px;
    text-align: center;
    padding: 4px 0;
    border-radius: var(--v-radius-sm);
    background: var(--v-primary-pale);
}
.appointment-item .apt-time .apt-hour { font-size: 1.05rem; font-weight: 700; color: var(--v-primary); line-height: 1.1; }
.appointment-item .apt-time .apt-dur  { font-size: 0.65rem; color: var(--v-text-muted); margin-top: 1px; }
.appointment-item.completed .apt-time { background: var(--v-success-bg); }
.appointment-item.completed .apt-time .apt-hour { color: var(--v-success-dark); }

/* ================================================================
   TIMELINE (Service Order History)
   ================================================================ */
.timeline { position: relative; padding-left: 26px; }

.timeline::before {
    content: '';
    position: absolute;
    left: 8px; top: 0; bottom: 0;
    width: 2px;
    background: var(--v-border);
    border-radius: 2px;
}

.timeline-item { position: relative; margin-bottom: 18px; }

.timeline-item::before {
    content: '';
    position: absolute;
    left: -20px; top: 4px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--v-primary);
    border: 2px solid white;
    box-shadow: 0 0 0 2px var(--v-primary-light);
}

.timeline-date   { font-size: 0.72rem; color: var(--v-text-muted); margin-bottom: 2px; }
.timeline-status { font-weight: 600; color: var(--v-text); font-size: 0.875rem; }
.timeline-notes  { font-size: 0.8rem; color: var(--v-text-muted); margin-top: 2px; }

/* ================================================================
   CASH REGISTER
   ================================================================ */
.cash-register-card {
    background: linear-gradient(135deg, var(--v-primary-dark) 0%, var(--v-primary) 100%);
    color: white;
    border-radius: var(--v-radius-lg);
    padding: 32px;
    text-align: center;
    box-shadow: var(--v-shadow-blue);
}

.cash-register-status {
    font-size: 0.75rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.cash-register-amount {
    font-size: 2.75rem;
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 4px;
}

/* ================================================================
   PRESCRIPTION FORM
   ================================================================ */
.prescription-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    align-items: start;
}

.prescription-eye-label {
    font-weight: 600;
    color: var(--v-primary);
    font-size: 0.9rem;
    padding-top: 20px;
}

/* ================================================================
   NEW SALE / CART
   ================================================================ */
.cart-container {
    background: var(--v-surface);
    border-radius: var(--v-radius-lg);
    box-shadow: var(--v-shadow);
    border: 1px solid var(--v-border);
    overflow: hidden;
}

.cart-summary {
    background: linear-gradient(90deg, var(--v-primary-dark) 0%, var(--v-primary) 100%);
    color: white;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-total { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.5px; }

/* ================================================================
   MUDBLAZOR THEME OVERRIDES
   ================================================================ */

/* ── BUTTONS — Compact, professional, consistent ── */

/* Base: reset MudBlazor defaults */
.mud-button-root {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    transition: background-color 150ms ease, box-shadow 150ms ease, transform 100ms ease !important;
    line-height: 1 !important;
}

/* ATENCAO ao seletor: o MudBlazor 7 nomeia a classe de tamanho COM a variante
   no meio — mud-button-{text|filled|outlined}-size-{small|medium|large}.
   O seletor antigo (.mud-button-size-medium) nao existe, entao NENHUMA destas
   alturas era aplicada: os botoes ficavam nos 26px padrao da lib enquanto os
   inputs seguiam o token, e por isso input e botao lado a lado nao batiam. */

/* Size — Medium (default / system standard) */
.mud-button-root.mud-button-text-size-medium,
.mud-button-root.mud-button-filled-size-medium,
.mud-button-root.mud-button-outlined-size-medium {
    height: var(--v-btn-h) !important;
    padding: 0 14px !important;
    font-size: 0.8125rem !important;
    min-width: 56px !important;
}

/* Size — Large (hero / login) */
.mud-button-root.mud-button-text-size-large,
.mud-button-root.mud-button-filled-size-large,
.mud-button-root.mud-button-outlined-size-large {
    height: var(--v-btn-h-lg) !important;
    padding: 0 20px !important;
    font-size: 0.875rem !important;
}

/* Size — Small (table row actions) */
.mud-button-root.mud-button-text-size-small,
.mud-button-root.mud-button-filled-size-small,
.mud-button-root.mud-button-outlined-size-small {
    height: var(--v-btn-h-sm) !important;
    padding: 0 10px !important;
    font-size: 0.78rem !important;
    border-radius: 7px !important;
}

/* Icons inside buttons — proportional, never oversized */
.mud-button-root .mud-button-icon-start .mud-icon-root,
.mud-button-root .mud-button-icon-end .mud-icon-root { font-size: 1.05rem !important; }
.mud-button-root.mud-button-size-small .mud-button-icon-start .mud-icon-root,
.mud-button-root.mud-button-size-small .mud-button-icon-end .mud-icon-root { font-size: 0.95rem !important; }

/* Active / pressed feedback (all buttons) */
.mud-button-root:active:not([disabled]) {
    transform: translateY(0) scale(0.985) !important;
}
/* Focus-visible ring (keyboard a11y, premium) */
.mud-button-root:focus-visible {
    outline: none !important;
    box-shadow: var(--v-ring) !important;
}

/* Primary filled — padrão soft do sistema (mesma cara do vz-btn-soft antd):
   fundo pálido da intenção + texto forte, sem bloco chapado */
.mud-button-root.mud-button-filled-primary {
    background-color: var(--v-primary-pale) !important;
    border: 1px solid var(--v-primary-light) !important;
    color: var(--v-primary-dark) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.mud-button-root.mud-button-filled-primary:hover:not([disabled]) {
    background-color: var(--v-primary-light) !important;
    border-color: var(--v-primary) !important;
    color: var(--v-primary-dark) !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}
.mud-button-root.mud-button-filled-primary:active:not([disabled]) {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

/* Error / Danger — soft: fundo pálido vermelho + texto forte (intenção destrutiva) */
.mud-button-root.mud-button-filled-error {
    background-color: var(--v-error-bg) !important;
    border: 1px solid #FECACA !important;
    color: var(--v-error-dark) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.mud-button-root.mud-button-filled-error:hover:not([disabled]) {
    background-color: #FEE2E2 !important;
    border-color: var(--v-error) !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}

/* Success — soft: fundo pálido verde + texto forte (intenção de confirmação/receber) */
.mud-button-root.mud-button-filled-success {
    background-color: var(--v-success-bg) !important;
    border: 1px solid #BBF7D0 !important;
    color: var(--v-success-dark) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.mud-button-root.mud-button-filled-success:hover:not([disabled]) {
    background-color: #DCFCE7 !important;
    border-color: var(--v-success) !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}

/* Accent (VizzoButtonKind.Accent → Color.Secondary) — soft âmbar (destaque) */
.mud-button-root.mud-button-filled-secondary {
    background-color: var(--v-accent-pale) !important;
    border: 1px solid #F5D3A8 !important;
    color: var(--v-accent-dark) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.mud-button-root.mud-button-filled-secondary:hover:not([disabled]) {
    background-color: #FBE8CE !important;
    border-color: var(--v-accent) !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}

/* Text / Ghost */
.mud-button-root.mud-button-text-primary {
    color: var(--v-primary) !important;
    background: transparent !important;
    box-shadow: none !important;
}
.mud-button-root.mud-button-text-primary:hover:not([disabled]) {
    background-color: var(--v-primary-pale) !important;
}
.mud-button-root.mud-button-text-default,
.mud-button-root.mud-button-text-inherit {
    color: var(--v-text-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
}
.mud-button-root.mud-button-text-default:hover:not([disabled]),
.mud-button-root.mud-button-text-inherit:hover:not([disabled]) {
    background-color: var(--v-bg-alt) !important;
    color: var(--v-text) !important;
}

/* Outlined — Primary */
.mud-button-root.mud-button-outlined-primary {
    border: 1.5px solid var(--v-primary) !important;
    color: var(--v-primary) !important;
    background: transparent !important;
    box-shadow: none !important;
}
.mud-button-root.mud-button-outlined-primary:hover:not([disabled]) {
    background-color: var(--v-primary-pale) !important;
}

/* Outlined — Inherit / Default (Cancel, Back buttons) */
.mud-button-root.mud-button-outlined-inherit,
.mud-button-root.mud-button-outlined-default {
    border: 1px solid var(--v-border-strong) !important;
    color: var(--v-text-secondary) !important;
    background: var(--v-surface) !important;
    box-shadow: none !important;
}
.mud-button-root.mud-button-outlined-inherit:hover:not([disabled]),
.mud-button-root.mud-button-outlined-default:hover:not([disabled]) {
    background-color: var(--v-bg-alt) !important;
    border-color: var(--v-text-light) !important;
    color: var(--v-text) !important;
}

/* Disabled state */
.mud-button-root[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ── ICON BUTTONS — Compact ── */
.mud-icon-button {
    border-radius: 6px !important;
    transition: background-color 150ms ease, color 150ms ease !important;
}
.mud-icon-button.mud-icon-button-size-medium {
    width: 32px !important;
    height: 32px !important;
    padding: 6px !important;
}
.mud-icon-button.mud-icon-button-size-small {
    width: 28px !important;
    height: 28px !important;
    padding: 4px !important;
}
.mud-icon-button:hover:not([disabled]) {
    background-color: var(--v-bg-alt) !important;
}

/* ════════════════════════════════════════════════════════════════
   INPUTS — ONE standard for the entire system
   40px height · radius 10px · border #CBD5E1 · focus ring · Inter
   Single-line and multiline share border/radius/typography; only the
   height rule differs. Per-page Variant/Margin no longer matters —
   every text field, select, numeric, date & time looks identical.
   ════════════════════════════════════════════════════════════════ */
.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--v-radius) !important;
    border-color: var(--v-border-strong) !important;
    transition: border-color 150ms ease, box-shadow 150ms ease !important;
}
.mud-input-outlined:hover:not(.mud-input-disabled) .mud-input-outlined-border {
    border-color: var(--v-text-light) !important;
}
.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--v-primary) !important;
    border-width: 1px !important;
    box-shadow: var(--v-ring) !important;
}

/* Single-line controls — firm 40px, vertically centered (MudBlazor v7
   rests the outlined label at top:50%, so it re-centers automatically).

   O textarea é detectado por :has() — MudBlazor NÃO marca o wrapper com
   classe de multiline (só o slot ganha .mud-input-root-multiline). Travar
   o wrapper do textarea em 40px fazia o texto colidir com o label. */
.mud-input-control .mud-input-outlined:not(:has(textarea)) {
    min-height: var(--v-input-h) !important;
    height: var(--v-input-h) !important;
    align-items: center;
}
.mud-input-control .mud-input-outlined:not(:has(textarea)) input.mud-input-slot {
    height: calc(var(--v-input-h) - 4px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Multiline (textarea) — mesmo visual, altura livre. MudBlazor posiciona o
   textarea com margin (18.5px), não padding: encurtamos só o eixo vertical
   e preservamos os 14px laterais. */
.mud-input-outlined:has(textarea) {
    min-height: var(--v-input-h) !important;
    height: auto !important;
    align-items: stretch;
}
.mud-input-outlined textarea.mud-input-slot {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    line-height: 1.45 !important;
}

/* Label reservation — MudBlazor's default (Margin.Normal) leaves 16px/8px
   above/below every labeled field for the floating label. That's what made
   forms feel oversized. Tighten it everywhere, regardless of the Margin
   prop set on the individual field. */
.mud-input-control.mud-input-outlined-with-label {
    margin-top: 6px !important;
    margin-bottom: 2px !important;
}

/* Typography — identical everywhere */
.mud-input-root input, .mud-input-root textarea {
    font-size: 0.875rem !important;
    font-family: 'Inter', sans-serif !important;
}
.mud-input-label {
    font-size: 0.875rem !important;
    font-family: 'Inter', sans-serif !important;
}

/* Label em repouso — recentragem obrigatoria.
   O MudBlazor usa translate(14px, 20px), calibrado para o input padrao dele
   (56px de altura => centro do label em 29px). Como fixamos --v-input-h em
   36px, o label descia 11px demais e vazava pela borda de baixo. A conta
   certa e (altura - 18px de line-height) / 2. O estado "shrink" do MudBlazor
   (-6px, sobre a borda) ja cai correto e nao e tocado aqui: as regras dele
   com .mud-shrink tem especificidade maior que estas. */
.mud-input-control .mud-input-outlined:not(:has(textarea)) ~ label.mud-input-label-outlined {
    transform: translate(14px, calc((var(--v-input-h) - 18px) / 2)) scale(1);
}
/* Textarea: o label repousa na 1a linha do texto, nao no meio da caixa */
.mud-input-control .mud-input-outlined:has(textarea) ~ label.mud-input-label-outlined {
    transform: translate(14px, 12px) scale(1);
}

/* Helper / validation text — compact, never inflates the row */
.mud-input-helper-text {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
    margin-top: 3px !important;
}

/* ── SELECT, DATE & TIME pickers share the exact same input metrics ── */
.mud-select .mud-input-outlined .mud-input-outlined-border,
.mud-picker .mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--v-radius) !important;
}

/* ── Foto da armação (formulário de /frames) ── */
.vz-foto-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--v-text-secondary);
    margin-bottom: 8px;
}

.vz-foto-preview {
    width: 92px;
    height: 92px;
    flex-shrink: 0;
    border: 1px dashed var(--v-border-strong);
    border-radius: 10px;
    background: var(--v-bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.vz-foto-preview img { width: 100%; height: 100%; object-fit: cover; }

/* <label> disfarçado de botão: dispara o <input type=file> que fica oculto */
.vz-foto-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--v-btn-h);
    padding: 0 14px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--v-primary-pale);
    border: 1px solid var(--v-primary-light);
    color: var(--v-primary-dark);
    transition: background 150ms ease;
}
.vz-foto-btn:hover { background: var(--v-primary-light); }

.vz-foto-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--v-text-muted);
    margin-top: 8px;
    line-height: 1.5;
}

/* ── CHIPS — Filter chips ── */
.mud-chip-root {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.8125rem !important;
    border-radius: 20px !important;
    height: 28px !important;
    padding: 0 12px !important;
    letter-spacing: 0 !important;
    transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease !important;
}

/* ── VIZZO FILTER CHIP — toggle de filtro (cor da marca) ── */
.vizzo-fchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 16px;
    border-radius: 20px;
    border: 1px solid transparent;
    background: #F1EDE7;
    color: var(--v-text-secondary);
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--v-transition), color var(--v-transition), border-color var(--v-transition);
}
.vizzo-fchip:hover {
    border-color: var(--v-primary);
    color: var(--v-primary);
    background: var(--v-primary-pale);
}
.vizzo-fchip--active {
    background: var(--v-primary);
    border-color: var(--v-primary);
    color: #fff;
}
.vizzo-fchip--active:hover {
    background: var(--v-primary-hover);
    color: #fff;
}

/* "+ Filtro" — chip de ação tracejado */
.vizzo-fchip--add {
    gap: 4px;
    background: transparent;
    border: 1px dashed var(--v-border-strong);
    color: var(--v-text-muted);
}
.vizzo-fchip--add:hover {
    border-style: solid;
    border-color: var(--v-primary);
    color: var(--v-primary);
    background: var(--v-primary-pale);
}

/* ── VIZZO FILTER TAG — filtro aplicado (removível) ── */
.vizzo-ftag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 6px 0 12px;
    border-radius: 20px;
    background: var(--v-primary-pale);
    border: 1px solid var(--v-primary-light);
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    line-height: 1;
    white-space: nowrap;
}
.vizzo-ftag__label { color: var(--v-text-muted); font-weight: 500; }
.vizzo-ftag__value { color: var(--v-primary); font-weight: 600; cursor: pointer; }
.vizzo-ftag__input {
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--v-primary);
    min-width: 80px;
    width: 110px;
    padding: 0;
}
.vizzo-ftag__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--v-text-muted);
    cursor: pointer;
    transition: background var(--v-transition), color var(--v-transition);
}
.vizzo-ftag__x:hover { background: var(--v-primary); color: #fff; }

/* date input inside chip */
.vizzo-ftag__date {
    border: none;
    outline: none;
    background: transparent;
    color: var(--v-primary);
    font-weight: 600;
    font-size: 0.8125rem;
    font-family: inherit;
    width: 130px;
    padding: 0;
    cursor: pointer;
}
.vizzo-ftag__date::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; }

/* Filtrar button — ícone + label + badge */
.vizzo-fchip--filter { gap: 5px; }
.vizzo-fbadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    background: var(--v-primary);
    color: #fff;
}

/* Limpar button */
.vizzo-fclear {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--v-border);
    background: transparent;
    color: var(--v-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--v-transition);
    white-space: nowrap;
}
.vizzo-fclear:hover { border-color: #EF4444; color: #EF4444; background: var(--v-error-bg); }

/* ── VIZZO FILTER MENU — dropdown ("Filtrar") popover + submenus ── */
.vizzo-filter-popover,
.vizzo-filter-popover.mud-popover {
    border-radius: 12px !important;
    border: 1px solid var(--v-border) !important;
    box-shadow: var(--v-shadow-lg, 0 8px 24px rgba(0,0,0,0.12)) !important;
    margin-top: 6px !important;
    min-width: 220px !important;
    overflow: hidden !important;
}
.vizzo-filter-popover .mud-list {
    padding: 6px !important;
    background: var(--v-surface) !important;
}
.vizzo-fmenu-item.mud-list-item {
    border-radius: 8px !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    font-size: 0.875rem !important;
    color: var(--v-text) !important;
    transition: background var(--v-transition), color var(--v-transition) !important;
}
.vizzo-fmenu-item.mud-list-item:hover {
    background: var(--v-primary-pale) !important;
    color: var(--v-primary) !important;
}
.vizzo-fmenu-item.mud-list-item.mud-list-item-disabled {
    color: var(--v-text-muted) !important;
    opacity: 1 !important;
}
.vizzo-fmenu-item--sub.mud-list-item { padding: 0 !important; }
.vizzo-fmenu-item--sub .mud-button-root {
    width: 100%;
    justify-content: space-between !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    color: var(--v-text) !important;
}
.vizzo-fmenu-item--sub .mud-button-root:hover {
    background: var(--v-primary-pale) !important;
    color: var(--v-primary) !important;
}

/* ── DATA GRID — Tighter, more refined ── */
.mud-data-grid .mud-table-head .mud-table-cell {
    background: var(--v-bg) !important;
    color: var(--v-text-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: 11px 16px !important;
    border-bottom: 1px solid var(--v-border) !important;
}
.mud-data-grid .mud-table-body .mud-table-cell {
    padding: 12px 16px !important;
    font-size: 0.875rem !important;
    border-bottom: 1px solid var(--v-border-light) !important;
}
.mud-data-grid .mud-table-body .mud-table-row:hover .mud-table-cell {
    background: var(--v-bg-alt) !important;
}
/* Bordered grids (Bordered="true") — outer frame only, no vertical
   column dividers (modern SaaS tables use row lines, not a grid). */
.mud-table-bordered .mud-table-cell,
.mud-table-bordered .mud-table-cell:first-child,
.mud-table-bordered .mud-table-cell:last-child,
.mud-table-bordered .mud-table-cell:only-child {
    border-right: none !important;
}
.mud-table-bordered { border: 1px solid var(--v-border) !important; }

/* ── DIALOG — Polished ── */
.mud-dialog {
    border-radius: var(--v-radius-lg) !important;
    box-shadow: var(--v-shadow-xl) !important;
    overflow: hidden !important;
}
.mud-dialog-title {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--v-text) !important;
    padding: 20px 24px !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--v-border-light) !important;
    font-family: 'Inter', sans-serif !important;
    letter-spacing: -0.2px !important;
}
.mud-dialog-content {
    padding: 20px 24px 8px !important;
}
/* Section labels inside dialogs (e.g. "Endereço", "Observações") */
.mud-dialog-content .mud-text-subtitle2,
.mud-dialog-content h6 { color: var(--v-text-secondary) !important; }
.mud-dialog-actions {
    padding: 8px 20px 18px !important;
    gap: 8px !important;
}

/* ── TABS ── */
.mud-tabs .mud-tab {
    text-transform: none !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    letter-spacing: 0 !important;
    min-width: 80px !important;
}
.mud-tabs .mud-tab.mud-tab-active { color: var(--v-primary) !important; }
.mud-tabs .mud-tab-slider { background-color: var(--v-primary) !important; height: 2px !important; }

/* ── CHIP primary ── */
.mud-chip.mud-chip-color-primary {
    background-color: var(--v-primary-pale) !important;
    color: var(--v-primary-dark) !important;
}

/* ── CARD ── */
.mud-card {
    box-shadow: var(--v-shadow) !important;
    border: 1px solid var(--v-border) !important;
    border-radius: var(--v-radius-lg) !important;
}
.mud-card-content { padding: 24px !important; }
.mud-card-header { padding: 18px 24px !important; }

/* ── PROGRESS ── */
.mud-progress-linear.mud-progress-linear-color-primary .mud-progress-linear-bar {
    background: var(--v-primary) !important;
}

/* ── PAGINATION ── */
.mud-pagination .mud-pagination-item {
    border-radius: 6px !important;
    font-size: 0.875rem !important;
    font-family: 'Inter', sans-serif !important;
    min-width: 32px !important;
    height: 32px !important;
}
.mud-pagination .mud-pagination-item.mud-selected {
    background-color: var(--v-primary) !important;
    color: #fff !important;
}

/* ── ALERT ── */
.mud-alert {
    border-radius: 8px !important;
    font-size: 0.875rem !important;
}

/* ── NAV GROUP (sidebar) ──────────────────────────────────────────────────
   O cabeçalho do grupo deixa de ser um "item grande" e vira um rótulo de
   seção discreto (caixa alta, miúdo, espaçado), como PRODUCT / DATA API na
   doc do Supabase. Continua clicável para recolher — só não parece um botão. */
/* No MudBlazor v7 o cabeçalho do grupo é o próprio .mud-nav-link filho direto
   do .mud-nav-group — não existe classe "mud-nav-group-header". */
.mud-drawer .mud-nav-group > .mud-nav-link {
    color: var(--v-text-light) !important;
    font-size: 0.66rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.09em !important;
    border-radius: 6px !important;
    margin: 0 8px !important;
    padding: 4px 10px !important;
    min-height: 26px !important;
    background: transparent !important;
    transition: color var(--v-transition) !important;
}
/* O ícone do grupo sai: no padrão Supabase quem tem ícone é o item, não a seção */
.mud-drawer .mud-nav-group > .mud-nav-link .mud-nav-link-icon {
    display: none !important;
}
.mud-drawer .mud-nav-group > .mud-nav-link:hover {
    background: transparent !important;
    color: #475569 !important;
}
/* Seta de expandir — quase invisível até passar o mouse */
.mud-drawer .mud-nav-group > .mud-nav-link .mud-nav-link-expand-icon {
    font-size: 0.9rem !important;
    width: 14px !important;
    height: 14px !important;
    color: #CBD5E1 !important;
    transition: color var(--v-transition) !important;
}
.mud-drawer .mud-nav-group > .mud-nav-link:hover .mud-nav-link-expand-icon {
    color: var(--v-text-light) !important;
}
.mud-drawer .mud-nav-group > .mud-nav-link.mud-expanded {
    color: var(--v-text-light) !important;
}
/* O texto do cabeçalho não deve herdar o peso 500 do CSS oficial */
.mud-drawer .mud-nav-group > .mud-nav-link > .mud-nav-link-text {
    font-weight: 600 !important;
}
/* Respiro entre seções — é o espaço que dá o ar minimalista */
.mud-drawer .mud-navmenu > .mud-nav-group,
.mud-drawer .mud-navmenu > .nav-group-wrap {
    margin-top: 16px;
}
.mud-drawer .mud-navmenu > .nav-group-wrap:first-child,
.mud-drawer .mud-navmenu > .mud-nav-group:first-child {
    margin-top: 6px;
}

/* Highlight chip (breadcrumb-style) */
.highlight-chip {
    background: var(--v-primary-pale);
    color: var(--v-primary-dark);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}

/* ── SNACKBAR — VIZZO standardized toast (top-right, semantic colors) ── */
.mud-snackbar {
    border-radius: 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    min-width: 320px !important;
    max-width: 420px !important;
    padding: 14px 16px !important;
    color: #FFFFFF !important;
    box-shadow: 0 12px 28px rgba(15,23,42,0.20), 0 4px 10px rgba(15,23,42,0.12) !important;
    border: none !important;
    border-left: 4px solid rgba(255,255,255,0.55) !important;
    animation: vizzo-toast-in 260ms var(--v-ease-out) !important;
}
@keyframes vizzo-toast-in {
    0%   { opacity: 0; transform: translateX(24px) scale(0.97); }
    100% { opacity: 1; transform: translateX(0)    scale(1); }
}
.mud-snackbar .mud-snackbar-content,
.mud-snackbar .mud-snackbar-content-message { color: #FFFFFF !important; font-weight: 500 !important; }
.mud-snackbar .mud-icon-root { color: #FFFFFF !important; }
.mud-snackbar .mud-snackbar-close-button .mud-icon-root { color: rgba(255,255,255,0.85) !important; }
.mud-snackbar .mud-snackbar-close-button:hover { background: rgba(255,255,255,0.15) !important; }

/* Severity color standard — Success=green, Error=red, Warning=amber, Info=blue */
.mud-snackbar.mud-alert-filled-success,
.mud-snackbar.mud-snackbar-filled-success,
.mud-snackbar.mud-snackbar-surface-success,
.mud-snackbar[class*="success"] {
    background-color: #10B981 !important;
}
.mud-snackbar.mud-alert-filled-error,
.mud-snackbar.mud-snackbar-filled-error,
.mud-snackbar.mud-snackbar-surface-error,
.mud-snackbar[class*="error"] {
    background-color: #EF4444 !important;
}
.mud-snackbar.mud-alert-filled-warning,
.mud-snackbar.mud-snackbar-filled-warning,
.mud-snackbar.mud-snackbar-surface-warning,
.mud-snackbar[class*="warning"] {
    background-color: var(--v-warning) !important;
}
.mud-snackbar.mud-alert-filled-info,
.mud-snackbar.mud-snackbar-filled-info,
.mud-snackbar.mud-snackbar-surface-info,
.mud-snackbar[class*="info"] {
    background-color: var(--v-primary) !important;
}
.mud-snackbar.mud-alert-filled-normal,
.mud-snackbar.mud-snackbar-filled-normal,
.mud-snackbar.mud-snackbar-surface-normal,
.mud-snackbar.mud-snackbar-surface-dark {
    background-color: var(--v-text-secondary) !important;
}

/* Toast container — sits below the route progress bar, comfortable inset */
.mud-snackbar-location-top-right { top: 16px !important; right: 16px !important; }

/* ── TOOLTIP ── */
.mud-tooltip {
    font-size: 0.8125rem !important;
    border-radius: 6px !important;
    font-family: 'Inter', sans-serif !important;
}

/* ── SKELETON ── */
.mud-skeleton {
    border-radius: 8px !important;
    background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%) !important;
    background-size: 200% 100% !important;
    animation: vizzo-skeleton 1.4s ease infinite !important;
}
@keyframes vizzo-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ================================================================
   VIZZO BUTTON COMPONENT  — 4-state design system
   ================================================================ */
.vizzo-btn {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    border-radius: var(--v-radius) !important;
    min-height: var(--v-btn-h) !important;
    transition: background-color 180ms ease,
                box-shadow       180ms ease,
                color            180ms ease,
                border-color     180ms ease,
                transform        100ms ease,
                opacity          180ms ease !important;
    box-shadow: none !important;
}
.vizzo-btn.mud-button-size-medium { height: var(--v-btn-h) !important; padding: 0 14px !important; }
.vizzo-btn.mud-button-size-large  { height: var(--v-btn-h-lg) !important; padding: 0 20px !important; }
.vizzo-btn.mud-button-size-small  { height: var(--v-btn-h-sm) !important; min-height: 28px !important; padding: 0 10px !important; font-size: 0.78rem !important; }

/* Subtle, smaller icons inside buttons (user prefers less prominent icons) */
.vizzo-btn .mud-button-icon-start,
.vizzo-btn .mud-button-icon-end { font-size: 1rem !important; }
.vizzo-btn .mud-button-icon-start .mud-icon-root,
.vizzo-btn .mud-button-icon-end .mud-icon-root { font-size: 1rem !important; }
.vizzo-btn .mud-button-icon-start { margin-right: 6px !important; margin-left: -2px !important; }
.vizzo-btn .mud-button-icon-end   { margin-left: 6px !important; margin-right: -2px !important; }
/* Filled buttons get a soft shadow only on hover */
.vizzo-btn.mud-button-filled { box-shadow: var(--v-shadow-sm) !important; }

/* Hover & active microinteractions */
.vizzo-btn:not([disabled]):hover {
    box-shadow: var(--v-shadow) !important;
    transform: translateY(-1px) !important;
}
.vizzo-btn:not([disabled]):active {
    transform: scale(0.98) !important;
    box-shadow: var(--v-shadow-sm) !important;
}

/* Disabled */
.vizzo-btn[disabled] { opacity: 0.5 !important; cursor: not-allowed !important; box-shadow: none !important; }

/* Loading state */
.vizzo-btn.vizzo-btn--loading {
    pointer-events: none !important;
    opacity: 0.82 !important;
}

/* Success state */
.vizzo-btn.vizzo-btn--success {
    pointer-events: none !important;
    animation: vizzo-btn-pop 200ms ease forwards !important;
}

/* Error state — shake once, then stay clickable */
.vizzo-btn.vizzo-btn--error {
    animation: vizzo-btn-shake 400ms ease forwards !important;
}

/* Inner content wrapper for icon+text pairs */
.vizzo-btn-inner { display: inline-flex; align-items: center; gap: 7px; }
.vizzo-btn .vizzo-btn-spinner { color: currentColor !important; }

/* Animations */
@keyframes vizzo-btn-pop {
    0%   { transform: scale(0.96); }
    60%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}
@keyframes vizzo-btn-shake {
    0%,100% { transform: translateX(0); }
    20%      { transform: translateX(-5px); }
    40%      { transform: translateX(5px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}

/* ================================================================
   VIZZO BRANDED LOADER  (lens / iris focus animation)
   ================================================================ */
.vizzo-loader {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.vizzo-loader-mark {
    position: relative;
    width: 56px;
    height: 56px;
}
.vizzo-loader-mark.sm { width: 34px; height: 34px; }
.vizzo-loader-mark.lg { width: 76px; height: 76px; }

/* Outer focusing ring */
.vizzo-loader-ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(var(--v-primary-rgb), 0.15);
    border-top-color: var(--v-primary);
    border-right-color: var(--v-accent);
    animation: vizzo-spin 0.85s linear infinite;
}
/* Inner iris that pulses (the "lens focusing") */
.vizzo-loader-iris {
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    background: var(--v-grad-brand-soft);
    box-shadow: 0 0 0 4px rgba(var(--v-primary-rgb), 0.10);
    animation: vizzo-iris 1.4s var(--v-ease-out) infinite;
}
@keyframes vizzo-spin { to { transform: rotate(360deg); } }
@keyframes vizzo-iris {
    0%, 100% { transform: scale(0.78); opacity: 0.75; }
    50%      { transform: scale(1);    opacity: 1; }
}
.vizzo-loader-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--v-text-muted);
    letter-spacing: 0.2px;
}

/* Full-page / overlay loader */
.vizzo-loader-overlay {
    position: fixed; inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(246,248,251,0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: vizzo-fade-in 180ms var(--v-ease-out);
}
.vizzo-loader-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
}

/* ================================================================
   VIZZO LOADER "3 DOTS"  (fullscreen overlay on route transitions)
   ================================================================ */
.vl {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(249,245,241,0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}
.vl.is-on {
    opacity: 1;
    pointer-events: all;
}
.vl__card {
    background: var(--v-surface);
    border-radius: 16px;
    padding: 28px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-shadow: 0 8px 32px rgba(11,58,61,0.14), 0 2px 8px rgba(11,58,61,0.08);
    border: 1px solid rgba(11,58,61,0.08);
}
.vl__dots {
    display: flex;
    gap: 8px;
}
.vl__dots i {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0B3A3D;
    animation: vl-wave 1.2s ease-in-out infinite;
    font-style: normal;
}
.vl__dots i:nth-child(1) { animation-delay: 0s; }
.vl__dots i:nth-child(2) { animation-delay: 0.18s; }
.vl__dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes vl-wave {
    0%, 80%, 100% { transform: translateY(0);   opacity: 0.35; }
    40%           { transform: translateY(-8px); opacity: 1; }
}
.vl__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--v-text-secondary);
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.1px;
}
.vl__label b {
    color: var(--v-primary);
    font-weight: 600;
}

/* ================================================================
   MODAL — fade + scale entrance, polished chrome
   ================================================================ */
.mud-overlay-dialog .mud-dialog {
    animation: vizzo-dialog-in 220ms var(--v-ease-out);
    transform-origin: center;
}
@keyframes vizzo-dialog-in {
    0%   { opacity: 0; transform: translateY(8px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0)   scale(1); }
}
.mud-overlay .mud-overlay-background {
    background: rgba(15,23,42,0.45) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: vizzo-fade-in 200ms var(--v-ease-out);
}
@keyframes vizzo-fade-in { from { opacity: 0; } to { opacity: 1; } }

.mud-dialog .mud-dialog-actions {
    border-top: 1px solid var(--v-border) !important;
    margin-top: 4px !important;
    background: var(--v-surface) !important;
    padding: 14px 24px !important;
}

/* ================================================================
   PAGE TRANSITION (content fade-up on route render)
   ================================================================ */
.page-content > * {
    animation: vizzo-page-in 260ms var(--v-ease-out);
}
@keyframes vizzo-page-in {
    0%   { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   MICRO-INTERACTIONS
   ================================================================ */
/* Card hover lift */
.mud-card, .stat-card, .v-card {
    transition: box-shadow var(--v-transition-md), transform var(--v-transition-md), border-color var(--v-transition) !important;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--v-shadow-md) !important; }

/* Nav link slide affordance */
.mud-drawer .mud-nav-link {
    position: relative;
    transition: background var(--v-transition), color var(--v-transition), padding-left var(--v-transition) !important;
}
/* hover slide removed — light bg + color change is the hover indicator */
/* active ::before defined in sidebar overrides block above */

/* Input focus glow */
.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    box-shadow: var(--v-ring) !important;
}

/* Icon button hover rotate-pop for refresh-style actions */
.mud-icon-button:active:not([disabled]) { transform: scale(0.9) !important; }

/* Link transitions */
a, .mud-link { transition: color var(--v-transition) !important; }

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ================================================================
   EMPTY STATE
   ================================================================ */
.vizzo-empty {
    text-align: center;
    padding: 64px 24px;
    color: var(--v-text-muted);
}
.vizzo-empty .vizzo-empty-icon {
    font-size: 3rem;
    opacity: 0.28;
    display: block;
    margin: 0 auto 16px;
}
.vizzo-empty-title { font-size: 0.95rem; font-weight: 600; color: var(--v-text-secondary); }
.vizzo-empty-sub   { font-size: 0.85rem; margin-top: 4px; }

/* ================================================================
   UTILITY CLASSES
   ================================================================ */
.text-primary   { color: var(--v-primary) !important; }
.text-brand     { color: var(--v-primary) !important; }
.text-accent    { color: var(--v-primary) !important; }
.text-navy      { color: var(--v-text) !important; }
.text-muted     { color: var(--v-text-muted) !important; }
.text-success   { color: var(--v-success-dark) !important; }
.text-error     { color: var(--v-error-dark) !important; }
.text-warning   { color: var(--v-warning-dark) !important; }

.bg-primary     { background-color: var(--v-primary) !important; }
.bg-pale        { background-color: var(--v-primary-pale) !important; }
.bg-soft        { background-color: var(--v-primary-light) !important; }
.bg-surface     { background-color: var(--v-surface) !important; }

.w-100  { width: 100%; }
.h-100  { height: 100%; }

.d-flex          { display: flex; }
.align-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.gap-1           { gap: 4px; }
.gap-2           { gap: 8px; }
.gap-3           { gap: 12px; }
.gap-4           { gap: 16px; }

.mt-0  { margin-top: 0 !important; }
.mb-0  { margin-bottom: 0 !important; }
.mb-2  { margin-bottom: 8px !important; }
.mb-3  { margin-bottom: 12px !important; }
.mb-4  { margin-bottom: 16px !important; }
.mb-6  { margin-bottom: 24px !important; }
.mr-1  { margin-right: 4px !important; }
.mr-2  { margin-right: 8px !important; }
.mr-3  { margin-right: 12px !important; }
.mt-1  { margin-top: 4px !important; }
.mt-2  { margin-top: 8px !important; }
.mt-3  { margin-top: 12px !important; }
.mt-4  { margin-top: 16px !important; }

.fw-normal { font-weight: 400; }
.fw-medium { font-weight: 500; }
.fw-semi   { font-weight: 600; }
.fw-bold   { font-weight: 700; }

.rounded    { border-radius: var(--v-radius) !important; }
.rounded-lg { border-radius: var(--v-radius-lg) !important; }
.shadow     { box-shadow: var(--v-shadow) !important; }
.shadow-md  { box-shadow: var(--v-shadow-md) !important; }
.border     { border: 1px solid var(--v-border) !important; }

.fs-sm  { font-size: 0.8125rem !important; }
.fs-xs  { font-size: 0.75rem !important; }

/* ================================================================
   DASHBOARD PANELS  (/)
   ================================================================ */

/* KPI strip cards */
.dash-kpi {
    background: var(--v-surface);
    border: 1px solid var(--v-border);
    border-radius: 12px;
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    height: 100%;
    transition: box-shadow 140ms ease;
}
.dash-kpi:hover { box-shadow: 0 4px 16px rgba(11,58,61,0.08); }

.dash-kpi--gradient {
    background: linear-gradient(135deg, #0B3A3D 0%, #1B5E62 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(11,58,61,0.25);
}
.dash-kpi--gradient .dash-kpi__label { color: rgba(255,255,255,0.75); }
.dash-kpi--gradient .dash-kpi__value { color: #FFFFFF; }
.dash-kpi--gradient .dash-kpi__sub   { color: rgba(255,255,255,0.55); }

.dash-kpi__label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--v-text-muted);
    margin-bottom: 6px;
}
.dash-kpi__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--v-text);
    line-height: 1.15;
}
.dash-kpi__sub {
    font-size: 0.76rem;
    color: var(--v-text-light);
    margin-top: 3px;
}
.dash-kpi__bg-icon {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 2.5rem !important;
    opacity: 0.07;
    color: currentColor;
}

/* Generic panel card */
.dash-panel {
    background: var(--v-surface);
    border: 1px solid var(--v-border);
    border-radius: 12px;
    padding: 20px 24px;
    height: 100%;
}
.dash-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.dash-panel__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--v-text);
}

/* Rank badge */
.dash-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(11,58,61,0.08);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--v-primary);
    flex-shrink: 0;
}

/* Empty state inside panel */
.dash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--v-text-light);
    font-size: 0.8125rem;
    text-align: center;
}

/* ================================================================
   BILLING DASHBOARD  (/admin/tenants)
   ================================================================ */
.billing-kpi-card {
    background: var(--v-surface);
    border: 1px solid var(--v-border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow 140ms ease;
}
.billing-kpi-card:hover { box-shadow: 0 4px 16px rgba(11,58,61,0.08); }

.billing-kpi-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}

.billing-kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--v-text);
    line-height: 1;
}

.billing-kpi-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--v-text-muted);
}

/* Filter chips */
.billing-filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--v-border);
    background: var(--v-surface);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--v-text-muted);
    cursor: pointer;
    transition: all 140ms ease;
    font-family: 'Inter', sans-serif;
}
.billing-filter-chip:hover {
    border-color: var(--v-primary);
    color: var(--v-primary);
    background: rgba(11,58,61,0.04);
}
.billing-filter-chip.active {
    background: var(--v-primary);
    border-color: var(--v-primary);
    color: #FFFFFF;
}
.billing-filter-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px;
    border-radius: 9px;
    background: rgba(255,255,255,0.25);
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0 4px;
}

/* Billing search */
.billing-search-box {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px;
    background: var(--v-surface);
    border: 1px solid var(--v-border);
    border-radius: 8px;
    min-width: 220px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.billing-search-box:focus-within {
    border-color: var(--v-primary);
    box-shadow: 0 0 0 2px rgba(11,58,61,0.1);
}
.billing-search-input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: 0.8125rem; color: var(--v-text-secondary);
    font-family: 'Inter', sans-serif;
    padding: 0;
}
.billing-search-input::placeholder { color: var(--v-text-light); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
    .page-content { padding: 16px; }
    .page-title   { font-size: 1.25rem; }
    .stat-value   { font-size: 1.5rem; }
    .login-left   { display: none; }
    .prescription-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .page-content { padding: 12px; }
    .login-right  { padding: 24px 16px; }
}

/* ═══════════════════════════════════════════════════════════════════
   FRAME RECOMMENDATION
   ═══════════════════════════════════════════════════════════════════ */

/* ── Step indicator ──────────────────────────────────────────────── */
.rec-steps        { display:flex; gap:0; margin-bottom:28px; }
.rec-step         { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; }
.rec-step__circle { width:32px; height:32px; border-radius:50%; background:#E5E7EB; color:var(--v-text-muted);
                    display:flex; align-items:center; justify-content:center;
                    font-size:0.8125rem; font-weight:700; z-index:1; transition:all .25s; }
.rec-step__label  { font-size:0.6875rem; font-weight:600; color:var(--v-text-light); text-align:center; }
.rec-step--active  .rec-step__circle { background:var(--v-primary); color:#fff; }
.rec-step--active  .rec-step__label  { color:var(--v-primary); }
.rec-step--done    .rec-step__circle { background:#10B981; color:#fff; }
.rec-step + .rec-step::before { content:''; position:absolute; top:16px; left:calc(-50%); right:calc(50%);
                                  height:2px; background:#E5E7EB; z-index:0; }
.rec-step--done + .rec-step::before  { background:#10B981; }
.rec-step--active + .rec-step::before { background:#10B981; }

/* ── Camera viewport ─────────────────────────────────────────────── */
.rec-camera-wrap     { position:relative; border-radius:16px; overflow:hidden;
                       background:#0B0F14; max-width:560px; margin:0 auto; }
.rec-video           { display:block; width:100%; border-radius:16px; }
.rec-canvas-overlay  { position:absolute; inset:0; pointer-events:none; }
.rec-face-badge      { position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
                       background:rgba(11,58,61,0.85); color:#fff;
                       padding:6px 16px; border-radius:20px; font-size:0.8125rem; font-weight:600;
                       backdrop-filter:blur(6px); transition:opacity .3s; }
.rec-face-badge--ok  { background:rgba(16,185,129,0.85); }
.rec-face-badge--nok { background:rgba(239,68,68,0.75); }

/* ── Capture button ──────────────────────────────────────────────── */
.rec-capture-btn     { display:flex; align-items:center; justify-content:center;
                       width:64px; height:64px; border-radius:50%;
                       background:var(--v-primary); color:#fff; border:none; cursor:pointer;
                       box-shadow:0 4px 16px rgba(11,58,61,0.35); transition:transform .15s, box-shadow .15s; }
.rec-capture-btn:hover { transform:scale(1.06); box-shadow:0 6px 20px rgba(11,58,61,0.45); }
.rec-capture-btn:disabled { opacity:0.45; cursor:not-allowed; transform:none; }

/* ── Analysis animation ──────────────────────────────────────────── */
.rec-analyzing       { display:flex; flex-direction:column; align-items:center; gap:20px; padding:48px 16px; }
.rec-scanning-face   { width:120px; height:120px; border-radius:50%;
                       border:3px solid var(--v-primary);
                       box-shadow:0 0 0 0 rgba(11,58,61,0.4);
                       animation:rec-pulse 1.4s ease-in-out infinite; }
@keyframes rec-pulse {
    0%   { box-shadow:0 0 0  0   rgba(11,58,61,0.45); }
    70%  { box-shadow:0 0 0 24px rgba(11,58,61,0); }
    100% { box-shadow:0 0 0  0   rgba(11,58,61,0); }
}

/* ── Result cards ────────────────────────────────────────────────── */
.rec-result-card     { background:var(--v-surface); border:1px solid var(--v-border); border-radius:14px;
                       overflow:hidden; transition:box-shadow .2s; }
.rec-result-card:hover { box-shadow:0 6px 20px rgba(0,0,0,0.1); }
.rec-result-img      { width:100%; height:160px; object-fit:cover; background:var(--v-bg-alt);
                       display:flex; align-items:center; justify-content:center; }
.rec-result-body     { padding:14px 16px; }
.rec-compat-bar      { height:6px; border-radius:3px; background:#E5E7EB; margin:8px 0; }
.rec-compat-fill     { height:100%; border-radius:3px; background:linear-gradient(90deg,#0B3A3D,#1B8A6C); transition:width .6s; }
.rec-rank-badge      { display:inline-flex; align-items:center; justify-content:center;
                       width:24px; height:24px; border-radius:50%;
                       background:var(--v-primary); color:#fff;
                       font-size:0.75rem; font-weight:700; }
.rec-rank-badge--2   { background:#6B7280; }
.rec-rank-badge--3   { background:#92400E; }

/* ── Face shape badge ────────────────────────────────────────────── */
.rec-face-shape-pill { display:inline-flex; align-items:center; gap:6px;
                       padding:6px 14px; border-radius:20px;
                       background:rgba(11,58,61,0.08); color:var(--v-primary);
                       font-weight:600; font-size:0.875rem; }

/* ═══════════════════════════════════════════════════════════════════
   FRAME CATALOG
   ═══════════════════════════════════════════════════════════════════ */
.frame-card          { background:var(--v-surface); border:1px solid var(--v-border); border-radius:12px;
                       overflow:hidden; transition:box-shadow .2s; }
.frame-card:hover    { box-shadow:0 6px 20px rgba(0,0,0,0.09); }
.frame-card__img     { width:100%; height:140px; object-fit:cover; background:var(--v-bg-alt);
                       display:flex; align-items:center; justify-content:center; color:var(--v-text-light); }
.frame-card__body    { padding:12px 14px; }
.frame-card__name    { font-weight:600; font-size:0.9375rem; color:var(--v-text); margin-bottom:2px; }
.frame-card__brand   { font-size:0.8125rem; color:var(--v-text-muted); margin-bottom:8px; }
.frame-card__badges  { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:10px; }
.frame-badge         { padding:2px 8px; border-radius:10px; font-size:0.6875rem; font-weight:600;
                       background:rgba(11,58,61,0.08); color:var(--v-primary); }
.frame-price         { font-size:1rem; font-weight:700; color:var(--v-primary); }

/* ═══════════════════════════════════════════════════════════════════
   VIZZO KPI CARD — executive metric (fully tokenized)
   ═══════════════════════════════════════════════════════════════════ */
.vkpi {
    background: var(--v-surface);
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius-lg);
    padding: 18px 20px;
    min-height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    box-shadow: var(--v-shadow-sm);
    transition: box-shadow var(--v-transition), transform var(--v-transition);
}
.vkpi:hover { box-shadow: var(--v-shadow-md); transform: translateY(-1px); }

.vkpi--accent {
    background: var(--v-grad-brand-soft);
    border-color: var(--v-primary);
    color: #fff;
}

.vkpi__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.vkpi__label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: -0.1px;
    color: var(--v-text-muted);
}
.vkpi--accent .vkpi__label { color: rgba(255,255,255,0.78); }

.vkpi__icon {
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: var(--v-radius);
    background: var(--v-primary-pale);
    display: inline-flex; align-items: center; justify-content: center;
}
.vkpi__icon .mud-icon-root { font-size: 1.25rem; color: var(--v-primary); }
.vkpi--accent .vkpi__icon { background: rgba(255,255,255,0.14); }
.vkpi--accent .vkpi__icon .mud-icon-root { color: #fff; }

.vkpi__value {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.5px;
    color: var(--v-text);
}
.vkpi--accent .vkpi__value { color: #fff; }

.vkpi__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.vkpi__delta {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 0.78rem; font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}
.vkpi__delta .mud-icon-root { font-size: 0.85rem; }
.vkpi__delta--up      { color: var(--v-success-dark); background: var(--v-success-bg); }
.vkpi__delta--down    { color: var(--v-error-dark);   background: var(--v-error-bg); }
.vkpi__delta--neutral { color: var(--v-text-muted);   background: var(--v-bg-alt); }
.vkpi--accent .vkpi__delta { background: rgba(255,255,255,0.16); color: #fff; }

.vkpi__period { font-size: 0.75rem; color: var(--v-text-muted); }
.vkpi--accent .vkpi__period { color: rgba(255,255,255,0.7); }

/* ═══════════════════════════════════════════════════════════════════
   VIZZO PANEL & CHART SURFACE (tokenized)
   ═══════════════════════════════════════════════════════════════════ */
.vpanel {
    background: var(--v-surface);
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius-lg);
    padding: 18px 20px;
    height: 100%;
    box-shadow: var(--v-shadow-sm);
}
.vpanel__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; margin-bottom: 16px;
}
.vpanel__head h2 { font-size: 1rem; font-weight: 700; color: var(--v-text); letter-spacing: -0.2px; }
.vpanel__head p  { margin: 2px 0 0; font-size: 0.78rem; color: var(--v-text-muted); }
.vpanel__total   { font-size: 1.15rem; font-weight: 700; color: var(--v-primary); }

.vizzo-chart { min-height: 120px; }

/* ── Empty state (tokenized) ── */
.vempty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; text-align: center;
    min-height: 180px; padding: 32px 20px;
    color: var(--v-text-muted);
}
.vempty .mud-icon-root { font-size: 2.5rem; color: var(--v-border-strong); }
.vempty__title { font-weight: 600; color: var(--v-text-secondary); }
.vempty__hint  { font-size: 0.82rem; color: var(--v-text-light); }

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL COMPONENT THEMING — completes MudBlazor coverage (all pages)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Switch ── */
.mud-switch .mud-switch-track { border-radius: 999px !important; }
.mud-switch.mud-checked .mud-switch-track { background-color: var(--v-primary) !important; opacity: 1 !important; }
.mud-switch .mud-switch-thumb { box-shadow: var(--v-shadow-sm) !important; }
.mud-switch-input:focus-visible ~ .mud-switch-track { box-shadow: var(--v-ring) !important; }

/* ── Checkbox & Radio ── */
.mud-checkbox .mud-icon-root,
.mud-radio .mud-icon-root { transition: color var(--v-transition), transform var(--v-transition) !important; }
.mud-checkbox.mud-checked .mud-icon-root,
.mud-radio.mud-checked .mud-icon-root { color: var(--v-primary) !important; }
.mud-button-root.mud-checkbox:active .mud-icon-root,
.mud-button-root.mud-radio:active .mud-icon-root { transform: scale(0.9) !important; }

/* ── Menu / dropdown items ── */
.mud-list-item,
.mud-menu-item { border-radius: var(--v-radius-sm) !important; transition: background var(--v-transition) !important; }
.mud-menu-item:hover { background: var(--v-primary-pale) !important; }
.mud-popover { border-radius: var(--v-radius-lg) !important; box-shadow: var(--v-shadow-lg) !important; border: 1px solid var(--v-border) !important; }

/* ── Date picker / calendar ── */
.mud-picker,
.mud-picker-container,
.mud-picker-content {
    background: var(--v-surface) !important;
    color: var(--v-text) !important;
}
.mud-picker .mud-picker-calendar-header,
.mud-picker-toolbar { background: var(--v-primary) !important; }
.mud-picker-toolbar,
.mud-picker-toolbar .mud-typography,
.mud-picker-toolbar .mud-button-root,
.mud-picker-toolbar .mud-icon-root,
.mud-picker .mud-picker-calendar-header,
.mud-picker .mud-picker-calendar-header .mud-button-root,
.mud-picker .mud-picker-calendar-header .mud-icon-root {
    color: #FFFFFF !important;
}
.mud-picker .mud-picker-calendar-header .mud-icon-button,
.mud-picker-toolbar .mud-icon-button {
    background: rgba(255,255,255,0.14) !important;
    border-radius: var(--v-radius-sm) !important;
}
.mud-picker .mud-picker-calendar-header .mud-icon-button:hover,
.mud-picker-toolbar .mud-icon-button:hover {
    background: rgba(255,255,255,0.24) !important;
}
.mud-picker .mud-picker-calendar-header-day {
    color: var(--v-text-muted) !important;
    font-weight: 600 !important;
}
.mud-picker .mud-day,
.mud-picker-calendar-day {
    color: var(--v-text-secondary) !important;
    border-radius: var(--v-radius-sm) !important;
}
.mud-picker .mud-day.mud-disabled,
.mud-picker-calendar-day.mud-disabled {
    color: #CBD5E1 !important;
}
.mud-picker-calendar-day.mud-selected,
.mud-day.mud-selected { background-color: var(--v-primary) !important; color: #fff !important; }
.mud-picker-calendar-day:hover:not(.mud-selected),
.mud-picker .mud-day:hover:not(.mud-selected) { background-color: var(--v-primary-pale) !important; color: var(--v-primary) !important; }
.mud-picker-calendar-day.mud-current,
.mud-picker .mud-day.mud-current:not(.mud-selected) {
    border-color: var(--v-accent) !important;
    color: var(--v-accent-dark) !important;
    font-weight: 700 !important;
}
.mud-picker { border-radius: var(--v-radius-lg) !important; }

/* Static inline calendar (Agendamentos) — clean, borderless, full-width */
.vizzo-cal.mud-picker-static,
.vizzo-cal .mud-picker-container { box-shadow: none !important; border: none !important; background: transparent !important; width: 100% !important; }
.vizzo-cal .mud-picker-calendar-header { background: transparent !important; padding: 4px 6px 8px !important; }
.vizzo-cal .mud-picker-calendar-header-transition,
.vizzo-cal .mud-picker-month-container { color: var(--v-text) !important; }
.vizzo-cal .mud-picker-calendar-header-transition { font-size: 0.95rem !important; font-weight: 700 !important; letter-spacing: -0.2px; }
.vizzo-cal .mud-picker-calendar-header .mud-button-root { color: var(--v-text) !important; font-weight: 700 !important; }
/* Weekday initials — quiet uppercase */
.vizzo-cal .mud-picker-calendar-header-day {
    color: var(--v-text-light) !important;
    font-size: 0.66rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
/* Day cells — larger tap target, fully rounded */
.vizzo-cal .mud-day {
    color: var(--v-text-secondary) !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    border-radius: 50% !important;
    transition: background var(--v-transition), color var(--v-transition) !important;
}
.vizzo-cal .mud-day:hover:not(.mud-selected) { background: var(--v-primary-pale) !important; color: var(--v-primary) !important; }
.vizzo-cal .mud-day.mud-selected {
    background: var(--v-primary) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(11,58,61,0.30) !important;
}
.vizzo-cal .mud-day.mud-current:not(.mud-selected) {
    border: 1.5px solid var(--v-primary) !important;
    color: var(--v-primary) !important;
    font-weight: 700 !important;
}

/* ── Expansion panel / accordion ── */
.mud-expand-panel { border: 1px solid var(--v-border) !important; border-radius: var(--v-radius) !important; box-shadow: none !important; margin-bottom: 8px !important; overflow: hidden; }
.mud-expand-panel-header:hover { background: var(--v-bg) !important; }
.mud-expand-panel .mud-expand-panel-text { color: var(--v-text) !important; }

/* ── Breadcrumbs ── */
.mud-breadcrumbs .mud-breadcrumb-item a { color: var(--v-text-muted) !important; transition: color var(--v-transition) !important; }
.mud-breadcrumbs .mud-breadcrumb-item a:hover { color: var(--v-primary) !important; }
.mud-breadcrumbs .mud-breadcrumb-item.mud-disabled { color: var(--v-text) !important; font-weight: 600; }

/* ── Badge ── */
.mud-badge .mud-badge-icon { border-radius: 999px !important; font-weight: 700 !important; box-shadow: 0 0 0 2px var(--v-surface) !important; }

/* ── Tabs polish ── */
.mud-tabs-toolbar { border-bottom: 1px solid var(--v-border) !important; }
.mud-tabs .mud-tab { text-transform: none !important; font-weight: 600 !important; letter-spacing: 0 !important; transition: color var(--v-transition) !important; }

/* ── Avatar ── */
.mud-avatar { border-radius: var(--v-radius) !important; }

/* ════════════════════════════════════════════════════════════════
   TABLE — refined, modern, consistent (MudTable + MudDataGrid)
   Bordered card container · quiet uppercase header · roomy rows ·
   single soft hover · no muddy striping
   ════════════════════════════════════════════════════════════════ */
.mud-table {
    border-radius: var(--v-radius-lg) !important;
    border: 1px solid var(--v-border) !important;
    box-shadow: var(--v-shadow-sm) !important;
    overflow: hidden;
}
.mud-table .mud-table-container { overflow-x: auto; }

/* Header — quiet, technical, sticky-friendly */
.mud-table-head .mud-table-cell,
.mud-data-grid .mud-table-head .mud-table-cell {
    background: var(--v-bg) !important;
    color: var(--v-text-muted) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--v-border) !important;
    white-space: nowrap;
}

/* Body rows — comfortable height, hairline dividers, one hover */
.mud-table-body .mud-table-row { transition: background var(--v-transition) !important; }
.mud-table-body .mud-table-row .mud-table-cell {
    background: var(--v-surface) !important;
    font-size: 0.875rem !important;
    color: var(--v-text-secondary) !important;
    padding: 13px 16px !important;
    border-bottom: 1px solid var(--v-border-light) !important;
}
.mud-table-body .mud-table-row:last-child .mud-table-cell { border-bottom: none !important; }
.mud-table-body .mud-table-row:hover .mud-table-cell { background: var(--v-bg-alt) !important; }
/* First column reads as the row identity */
.mud-table-body .mud-table-row .mud-table-cell:first-child {
    color: var(--v-text) !important;
    font-weight: 600 !important;
}

/* Footer / pagination strip */
.mud-table .mud-table-pagination,
.mud-table-foot .mud-table-cell {
    border-top: 1px solid var(--v-border) !important;
    background: var(--v-surface) !important;
    font-size: 0.8125rem !important;
    color: var(--v-text-muted) !important;
}

/* ── ROW ACTION ICONS — unified across every list ──────────────────
   View / Edit / Info read as calm neutral icons and take the brand
   teal only on hover. Destructive (error) stays red, status toggles
   (success/warning) keep their semantic color — never a rainbow. */
.mud-table-row .mud-table-cell .mud-icon-button.mud-icon-button-color-primary,
.mud-table-row .mud-table-cell .mud-icon-button.mud-icon-button-color-secondary,
.mud-table-row .mud-table-cell .mud-icon-button.mud-icon-button-color-info,
.mud-table-row .mud-table-cell .mud-icon-button.mud-icon-button-color-inherit,
.mud-table-row .mud-table-cell .mud-icon-button.mud-icon-button-color-default {
    color: var(--v-text-light) !important;
}
.mud-table-row .mud-table-cell .mud-icon-button.mud-icon-button-color-primary:hover:not([disabled]),
.mud-table-row .mud-table-cell .mud-icon-button.mud-icon-button-color-secondary:hover:not([disabled]),
.mud-table-row .mud-table-cell .mud-icon-button.mud-icon-button-color-info:hover:not([disabled]),
.mud-table-row .mud-table-cell .mud-icon-button.mud-icon-button-color-inherit:hover:not([disabled]),
.mud-table-row .mud-table-cell .mud-icon-button.mud-icon-button-color-default:hover:not([disabled]) {
    color: var(--v-primary) !important;
    background: var(--v-primary-pale) !important;
}
/* Destructive row action — red intent on hover */
.mud-table-row .mud-table-cell .mud-icon-button.mud-icon-button-color-error { color: var(--v-text-light) !important; }
.mud-table-row .mud-table-cell .mud-icon-button.mud-icon-button-color-error:hover:not([disabled]) {
    color: var(--v-error) !important;
    background: var(--v-error-bg) !important;
}

/* ── Tooltip (ensure card-like) ── */
.mud-tooltip { border-radius: var(--v-radius) !important; }

/* ── Dialog form layout (sectioned) ── */
.vdlg-form { display: flex; flex-direction: column; gap: 22px; }
.vdlg-section { display: flex; flex-direction: column; gap: 12px; }
.vdlg-section__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--v-text-muted);
}

/* ── Autocomplete / select dropdown items ── */
.vac-item { display: flex; flex-direction: column; gap: 1px; padding: 2px 0; }
.vac-item__name { font-size: 0.875rem; font-weight: 500; color: var(--v-text); }
.vac-item__meta { font-size: 0.75rem; color: var(--v-text-muted); }
.vac-empty { padding: 12px 14px; font-size: 0.85rem; color: var(--v-text-muted); }
/* O seletor .mud-select-popover NAO existe no MudBlazor 7 — o popover do
   select/autocomplete vem com .mud-popover-relative-width. Mirando a classe
   errada, estas regras nunca aplicavam e os itens ficavam nos 48px padrao
   (8px de padding + texto de 24px com 4px de margem). Zerando a margem do
   texto, o item passa a ser 24px + padding, acompanhando --v-input-h. */
.mud-autocomplete .mud-list-item,
.mud-popover-relative-width .mud-list-item {
    min-height: var(--v-input-h) !important;
    padding: calc((var(--v-input-h) - 24px) / 2) 14px !important;
}
.mud-autocomplete .mud-list-item .mud-list-item-text,
.mud-popover-relative-width .mud-list-item .mud-list-item-text { margin: 0 !important; }
.mud-autocomplete .mud-list-item:hover,
.mud-popover-relative-width .mud-list-item:hover { background: var(--v-primary-pale) !important; }

/* ════════════════════════════════════════════════════════════════
   ANT DESIGN — Vizzo skin
   O AntDesign Blazor não tem API de tema em runtime; a cor primária
   padrão é azul. Este bloco troca apenas os tokens de marca (teal,
   radius, focus ring) mantendo o comportamento nativo da lib.
   ════════════════════════════════════════════════════════════════ */

/* ── Botões ── */
.ant-btn {
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    box-shadow: none;
    transition: all 150ms cubic-bezier(0.4,0,0.2,1);
    /* Icone + rotulo centrados. Sem isto o .anticon alinha pela baseline do
       texto e sobe alguns px — era o desalinhamento do "+ Add". O
       .vz-btn-pill ja tinha esse patch isolado; agora vale para todo botao. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--v-btn-h);
}
.ant-btn > .anticon { display: inline-flex; align-items: center; line-height: 1; }
.ant-btn > .anticon + span { margin-left: 0; }
.ant-btn.ant-btn-block { display: flex; width: 100%; }
.ant-btn-primary {
    background: var(--v-primary);
    border-color: var(--v-primary);
    box-shadow: 0 1px 2px rgba(11,58,61,0.16);
}
.ant-btn-primary:hover, .ant-btn-primary:focus {
    background: var(--v-primary-hover);
    border-color: var(--v-primary-hover);
}
.ant-btn:not(.ant-btn-primary):not(.ant-btn-dangerous):hover,
.ant-btn:not(.ant-btn-primary):not(.ant-btn-dangerous):focus {
    color: var(--v-primary);
    border-color: var(--v-primary);
}
.ant-btn-text:not(.ant-btn-dangerous):hover { background: var(--v-primary-pale); border-color: transparent; }
.ant-btn-lg { height: var(--v-btn-h-lg); padding: 0 20px; font-size: 0.875rem; }

/* Botão "soft" — clean, tom pálido da marca (CTA discreto) */
.ant-btn.vz-btn-soft {
    background: var(--v-primary-pale);
    border-color: var(--v-primary-light);
    color: var(--v-primary-dark);
    font-weight: 600;
    box-shadow: none;
}
.ant-btn.vz-btn-soft:hover, .ant-btn.vz-btn-soft:focus {
    background: var(--v-primary-light);
    border-color: var(--v-primary);
    color: var(--v-primary-dark);
}
/* ── Formato pílula (ref.: chips do Setproduct) ───────────────────────────
   FORMATO, não cor: pílula compacta nas cores da marca, com brilho interno
   no topo e sombra suave. Usada nos botões de inclusão ("Novo X").

   Altura 30px contra os 32px padrão do antd. Precisa ser flex: o antd força
   line-height:1 no ícone, então qualquer line-height aqui desalinharia o
   texto em relação a ele.                                                  */
.ant-btn.vz-btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 30px;
    padding: 0 14px;
    line-height: 1;
    border: 0;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--v-primary);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 4px 11px rgba(11,58,61,0.22);
    transition: transform var(--v-transition), box-shadow var(--v-transition), filter var(--v-transition);
}
/* o antd separa ícone e texto por margin; aqui quem separa é o gap */
.ant-btn.vz-btn-pill > .anticon + span { margin-left: 0; }
.ant-btn.vz-btn-pill > .anticon { display: inline-flex; line-height: 1; color: #fff; }

.ant-btn.vz-btn-pill:hover, .ant-btn.vz-btn-pill:focus {
    color: #fff;
    filter: brightness(1.12);
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 7px 16px rgba(11,58,61,0.30);
}
.ant-btn.vz-btn-pill:active { transform: translateY(0) scale(0.99); }

@media (prefers-reduced-motion: reduce) {
    .ant-btn.vz-btn-pill, .ant-btn.vz-btn-pill:hover { transform: none; }
}

/* Variante soft de sucesso — intenção monetária/confirmação (Receber, Pagar) */
.ant-btn.vz-btn-soft-success {
    background: var(--v-success-bg);
    border-color: #BBF7D0;
    color: var(--v-success-dark);
    font-weight: 600;
    box-shadow: none;
}
.ant-btn.vz-btn-soft-success:hover, .ant-btn.vz-btn-soft-success:focus {
    background: #DCFCE7;
    border-color: var(--v-success);
    color: var(--v-success-dark);
}

/* ── Inputs / Select / DatePicker ── */
.ant-input, .ant-input-affix-wrapper,
.ant-select:not(.ant-select-customize-input) .ant-select-selector,
.ant-picker {
    border-radius: 8px;
    border-color: var(--v-border-strong);
    font-family: 'Inter', sans-serif;
}
.ant-input-affix-wrapper .ant-input { padding: 0; border-radius: 0; }
.ant-input:hover, .ant-input-affix-wrapper:hover,
.ant-select:not(.ant-select-disabled):hover .ant-select-selector,
.ant-picker:hover {
    border-color: var(--v-primary);
}
.ant-input:focus, .ant-input-focused,
.ant-input-affix-wrapper:focus, .ant-input-affix-wrapper-focused,
.ant-select-focused:not(.ant-select-disabled) .ant-select-selector,
.ant-picker-focused {
    border-color: var(--v-primary) !important;
    box-shadow: var(--v-ring) !important;
}
.ant-input-prefix { color: var(--v-text-light); margin-right: 8px; }
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) { background: var(--v-primary-pale); }
.ant-select-dropdown, .ant-picker-dropdown .ant-picker-panel-container { border-radius: 10px; box-shadow: var(--v-shadow-lg); }
.ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner { background: var(--v-primary); }
.ant-picker-today-btn { color: var(--v-primary); }

/* ── Tabela ── */
.vz-table .ant-table {
    border: 1px solid var(--v-border);
    border-radius: 12px;
    background: var(--v-surface);
    box-shadow: var(--v-shadow-sm);
    font-family: 'Inter', sans-serif;
}
.vz-table .ant-table-container,
.vz-table .ant-table-content { border-radius: 12px; overflow: hidden; }
.vz-table .ant-table-thead > tr > th {
    background: var(--v-bg);
    color: var(--v-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: 1px solid var(--v-border);
    padding: 12px 16px;
}
.vz-table .ant-table-thead > tr > th::before { display: none; }
.vz-table .ant-table-tbody > tr > td {
    padding: 13px 16px;
    font-size: 0.875rem;
    color: var(--v-text-secondary);
    border-bottom: 1px solid var(--v-border-light);
}
.vz-table .ant-table-tbody > tr:hover > td { background: var(--v-bg-alt); }
/* Botões de ação da tabela — quietos, teal no hover */
.vz-table .ant-btn-text:not(.ant-btn-dangerous) { color: var(--v-text-muted); }
.vz-table .ant-btn-text:not(.ant-btn-dangerous):hover { color: var(--v-primary); }

/* Paginação — compacta e clean (24px, sem bloco pesado) */
.ant-pagination-item,
.ant-pagination-prev, .ant-pagination-next,
.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
    min-width: 24px;
    height: 24px;
    line-height: 22px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: 'Inter', sans-serif;
}
.ant-pagination-item { background: transparent; border-color: transparent; }
.ant-pagination-item a { color: var(--v-text-muted); }
.ant-pagination-item:hover, .ant-pagination-item:focus { border-color: transparent; background: var(--v-primary-pale); }
.ant-pagination-item:hover a, .ant-pagination-item:focus a { color: var(--v-primary); }
.ant-pagination-item-active, .ant-pagination-item-active:hover {
    background: var(--v-primary-pale);
    border-color: var(--v-primary-light);
}
.ant-pagination-item-active a, .ant-pagination-item-active:hover a {
    color: var(--v-primary-dark);
    font-weight: 700;
}
.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
    border-color: transparent;
    background: transparent;
    color: var(--v-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ant-pagination-prev:hover .ant-pagination-item-link,
.ant-pagination-next:hover .ant-pagination-item-link {
    border-color: transparent;
    background: var(--v-primary-pale);
    color: var(--v-primary);
}
.vz-table .ant-pagination { margin: 12px 16px; }

/* ── Modal ── */
.ant-modal-content { border-radius: 16px; overflow: hidden; box-shadow: var(--v-shadow-xl); }
.ant-modal-header { border-radius: 16px 16px 0 0; padding: 20px 24px; border-bottom: 1px solid var(--v-border-light); }
.ant-modal-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.125rem; color: var(--v-text); }
.ant-modal-body { padding: 24px; max-height: calc(100vh - 240px); overflow-y: auto; }
/* Footer: Cancelar à esquerda do Salvar (o AntDesign Blazor renderiza OK primeiro) */
.ant-modal-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--v-border-light);
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 8px;
}
.ant-modal-footer .ant-btn + .ant-btn { margin-left: 0; }

/* ── Tags / Popconfirm ── */
.ant-tag { border-radius: 12px; font-family: 'Inter', sans-serif; padding: 0 10px; }
.ant-popover-inner { border-radius: 10px; box-shadow: var(--v-shadow-lg); }
.ant-popover-buttons .ant-btn-primary { background: var(--v-primary); border-color: var(--v-primary); }

/* ── Página de clientes — barra de filtros e formulário ── */
.vz-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
/* Cada filtro vive num wrapper com largura fixa; o controle preenche 100% */
.vz-fitem .ant-input,
.vz-fitem .ant-input-affix-wrapper,
.vz-fitem .ant-select,
.vz-fitem .ant-picker { width: 100%; }

/* Filtros compactos — 30px, fonte 13px */
.vz-filters .ant-input,
.vz-filters .ant-input-affix-wrapper { padding: 2px 10px; font-size: 0.8125rem; }
.vz-filters .ant-input-affix-wrapper .ant-input { padding: 2px 0; }
.vz-filters .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
    height: 30px;
    padding: 0 10px;
    font-size: 0.8125rem;
}
.vz-filters .ant-select-single .ant-select-selector .ant-select-selection-item,
.vz-filters .ant-select-single .ant-select-selector .ant-select-selection-placeholder { line-height: 28px; }
.vz-form-section {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--v-text-muted);
    margin: 20px 0 12px;
}
.vz-form-section:first-child { margin-top: 0; }
.vz-field { margin-bottom: 16px; }
.vz-field > label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--v-text-secondary);
    margin-bottom: 6px;
}
.vz-req { color: var(--v-error); }
.vz-field-error { font-size: 0.75rem; color: var(--v-error); margin-top: 4px; }

/* ================================================================
   VIZZO FORM MODAL — casca visual de todos os modais de formulário
   Usado por <VizzoFormModal>. Cabeçalho com ícone + divisória, corpo
   rolável e rodapé dividido (secundária à esquerda, primária à direita).
   ================================================================ */
.vz-modal .ant-modal-content {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15,23,42,0.18), 0 2px 8px rgba(15,23,42,0.06);
    border: 1px solid var(--v-border);
}

/* O header vem via TitleTemplate — o wrapper do antd só atrapalharia o padding */
.vz-modal .ant-modal-header {
    padding: 0;
    border-bottom: 1px solid var(--v-border);
    background: var(--v-surface);
}
.vz-modal .ant-modal-title { line-height: normal; }

/* Corpo rola sozinho: em formulário longo o rodapé precisa ficar sempre visível */
.vz-modal .ant-modal-body {
    padding: 20px 22px;
    max-height: min(62vh, 620px);
    overflow-y: auto;
}
.vz-modal .ant-modal-body::-webkit-scrollbar { width: 8px; }
.vz-modal .ant-modal-body::-webkit-scrollbar-track { background: transparent; }
.vz-modal .ant-modal-body::-webkit-scrollbar-thumb {
    background: var(--v-border); border-radius: 10px; border: 2px solid var(--v-surface);
}

.vz-modal .ant-modal-footer {
    padding: 0;
    border-top: 1px solid var(--v-border);
    background: var(--v-surface);
}

/* ── Cabeçalho ── */
.vz-modal__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }

.vz-modal__icon {
    width: 36px; height: 36px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: var(--v-primary-pale);
    color: var(--v-primary);
}
.vz-modal__icon .mud-icon-root { font-size: 1.05rem; }

.vz-modal__titles { min-width: 0; flex: 1; }
.vz-modal__titles h2 {
    margin: 0; font-size: 1rem; font-weight: 650; color: var(--v-text);
    letter-spacing: -0.01em; line-height: 1.3;
}
.vz-modal__titles p {
    margin: 2px 0 0; font-size: 0.78rem; color: var(--v-text-muted); line-height: 1.35;
}

.vz-modal__close {
    flex-shrink: 0; border: 0; background: transparent; cursor: pointer;
    width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--v-text-muted);
    transition: background var(--v-transition), color var(--v-transition);
}
.vz-modal__close:hover { background: var(--v-bg); color: var(--v-text); }
.vz-modal__close .mud-icon-root { font-size: 1rem; }

/* ── Rodapé dividido ── */
.vz-modal__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 14px 18px;
}
.vz-modal__foot-actions { display: flex; align-items: center; gap: 8px; }

.vz-mbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 10px; padding: 9px 18px;
    font-family: inherit; font-size: 0.8125rem; font-weight: 600;
    cursor: pointer; border: 1px solid transparent;
    transition: background var(--v-transition), border-color var(--v-transition),
                color var(--v-transition), transform var(--v-transition);
}
.vz-mbtn:disabled { opacity: 0.6; cursor: default; }
.vz-mbtn:not(:disabled):active { transform: scale(0.98); }

.vz-mbtn--primary { background: var(--v-primary); color: #fff; }
.vz-mbtn--primary:not(:disabled):hover { background: var(--v-primary-dark, #06282A); }

.vz-mbtn--soft {
    background: var(--v-primary-pale); color: var(--v-primary);
}
.vz-mbtn--soft:not(:disabled):hover { background: rgba(11,58,61,0.14); }

.vz-mbtn--ghost {
    background: transparent; color: var(--v-text-secondary); border-color: var(--v-border);
}
.vz-mbtn--ghost:not(:disabled):hover { background: var(--v-bg); border-color: var(--v-border-strong); }

.vz-mbtn__spin {
    width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    animation: vz-mbtn-spin 0.6s linear infinite;
}
@keyframes vz-mbtn-spin { to { transform: rotate(360deg); } }

@media (max-width: 575px) {
    .vz-modal__foot { flex-direction: column-reverse; align-items: stretch; }
    .vz-modal__foot-actions { flex-direction: column-reverse; }
    .vz-mbtn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .vz-mbtn__spin { animation: none; }
}


/* ================================================================
   LANDING PÚBLICA (/home, /modulos, /para-quem)
   Compartilhado por LandingNav e LandingFooter — por isso vive aqui
   e não num <style> de página.
   ================================================================ */
.vz-lp {
        position: relative;
        min-height: 100vh;
        width: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background: #07100F; /* fallback enquanto a foto carrega */
        font-family: 'Inter', sans-serif;
    }

    /* ══ Carrossel ══ */
    .vz-lp-slides {
        position: absolute;
        inset: 0;
        z-index: 0;
        --vz-cycle: 21s; /* 7s por foto × 3 fotos */
        background-size: cover;
        background-position: center;
    }

    .vz-lp-slide {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        opacity: 0;
        animation: vz-lp-fade var(--vz-cycle) infinite;
        will-change: opacity, transform;
    }

    @keyframes vz-lp-fade {
        0%   { opacity: 0; transform: scale(1.08); }
        4%   { opacity: 1; }
        29%  { opacity: 1; transform: scale(1); }
        34%  { opacity: 0; }
        100% { opacity: 0; }
    }

    /* Véu — com o texto no centro, o peso vai para o miolo da foto */
    .vz-lp-scrim {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background:
            linear-gradient(180deg, rgba(4,18,18,0.58) 0%, rgba(4,18,18,0.30) 40%, rgba(3,14,14,0.82) 100%),
            radial-gradient(ellipse at 50% 46%, rgba(3,14,14,0.52) 0%, rgba(3,14,14,0) 62%);
    }

    /* ══ Nav ══ */
    .vz-lp-nav {
        position: relative;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 20px clamp(20px, 5vw, 68px);
    }

    .vz-lp-brand {
        display: flex;
        align-items: center;
        gap: 11px;
        text-decoration: none;
    }

    .vz-lp-brand span {
        font-weight: 700;
        font-size: 1.05rem;
        letter-spacing: 3px;
        color: #FFFFFF;
    }

    .vz-lp-links { display: flex; align-items: center; gap: 30px; }

    .vz-lp-links a {
        font-size: 0.875rem;
        font-weight: 500;
        color: rgba(255,255,255,0.82);
        text-decoration: none;
        transition: color .16s ease;
    }
    .vz-lp-links a:hover { color: #FFFFFF; }

    .vz-lp-nav-actions { display: flex; align-items: center; gap: 18px; }

    .vz-lp-login {
        font-size: 0.875rem;
        font-weight: 500;
        color: rgba(255,255,255,0.82);
        text-decoration: none;
        transition: color .16s ease;
    }
    .vz-lp-login:hover { color: #FFFFFF; }

    /* ══ Botões ══ */
    .vz-lp-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.85rem;
        border-radius: 999px;
        padding: 0 18px;
        height: 36px;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
    }

    /* Botão do topo — vidro sobre a foto */
    .vz-lp-btn-primary {
        background: rgba(255,255,255,0.14);
        color: #FFFFFF;
        border: 1px solid rgba(255,255,255,0.32);
        backdrop-filter: blur(8px);
    }

    .vz-lp-btn-primary:hover {
        background: rgba(255,255,255,0.24);
        transform: translateY(-1px);
    }

    /* ══ Hero — centrado, sem enfeite ══ */
    .vz-lp-hero {
        position: relative;
        z-index: 5;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: clamp(32px, 6vw, 64px) clamp(20px, 5vw, 68px);
        width: 100%;
    }

    .vz-lp-title {
        font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
        font-weight: 600;
        font-size: clamp(2.2rem, 5.2vw, 3.9rem);
        line-height: 1.14;
        letter-spacing: -0.022em;
        color: #FFFFFF;
        margin: 0;
        max-width: 18ch;
        text-shadow: 0 2px 26px rgba(0,0,0,0.55);
    }

    .vz-lp-title-hl { color: #F0A94B; }

    .vz-lp-sub {
        margin: 20px 0 0;
        max-width: 54ch;
        font-size: clamp(0.95rem, 1.5vw, 1.075rem);
        line-height: 1.6;
        color: rgba(255,255,255,0.86);
        text-shadow: 0 1px 14px rgba(0,0,0,0.5);
    }

    /* CTA único — sólido, é o elemento mais claro da tela */
    .vz-lp-cta {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-top: 30px;
        padding: 0 26px;
        height: 46px;
        border-radius: 999px;
        /* Sempre branco: o CTA fica sobre a foto escura do hero, não sobre o fundo
           do tema — usar var(--v-surface) aqui ficaria ilegível no dark mode. */
        background: #FFFFFF;
        color: #08211F;
        font-size: 0.9375rem;
        font-weight: 650;
        text-decoration: none;
        box-shadow: 0 8px 26px rgba(0,0,0,0.32);
        transition: transform .16s ease, box-shadow .16s ease;
    }
    .vz-lp-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.4); }
    .vz-lp-cta span { transition: transform .16s ease; }
    .vz-lp-cta:hover span { transform: translateX(3px); }

    .vz-lp-cta-note {
        margin-top: 14px;
        font-size: 0.78rem;
        color: rgba(255,255,255,0.62);
    }

    /* ══ Faixa de módulos ══ */
    .vz-lp-marquee {
        position: relative;
        z-index: 5;
        overflow: hidden;
        padding: 20px 0;
        background: rgba(5,22,22,0.55);
        backdrop-filter: blur(14px);
        border-top: 1px solid rgba(255,255,255,0.12);
        mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    }

    .vz-lp-marquee-track {
        display: flex;
        gap: 12px;
        width: max-content;
        animation: vz-lp-scroll 44s linear infinite;
    }

    .vz-lp-marquee:hover .vz-lp-marquee-track { animation-play-state: paused; }

    /* Chips em vidro — leem bem sobre as fotos escuras */
    .vz-lp-chip {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 0.85rem;
        font-weight: 600;
        color: rgba(255,255,255,0.94);
        background: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 100px;
        padding: 9px 20px;
        white-space: nowrap;
    }

    .vz-lp-chip::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #F0A94B;
        flex-shrink: 0;
    }

    /* A cada 4º, âmbar sólido — quebra o ritmo e casa com o tom das fotos */
    .vz-lp-chip:nth-child(4n) {
        background: linear-gradient(135deg, #C97A2E 0%, #E5A046 100%);
        border-color: transparent;
        color: #FFFFFF;
        box-shadow: 0 2px 12px rgba(201,122,46,0.34);
    }

    .vz-lp-chip:nth-child(4n)::before { background: rgba(255,255,255,0.9); }

    @keyframes vz-lp-scroll {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }

    /* ══ Para quem é ══ */
    .vz-lp-value {
        background: #08211F;
        padding: clamp(56px, 8vw, 92px) clamp(20px, 5vw, 68px);
        font-family: 'Inter', sans-serif;
    }

    .vz-lp-value-inner { max-width: 1080px; margin: 0 auto; }

    .vz-lp-eyebrow {
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        color: #F0A94B;
    }

    .vz-lp-value h2 {
        margin: 12px 0 40px;
        font-size: clamp(1.5rem, 3vw, 2.1rem);
        font-weight: 700;
        letter-spacing: -0.8px;
        color: #FFFFFF;
        max-width: 22ch;
    }

    .vz-lp-value-grid {
        display: grid;
        gap: 28px 40px;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    }

    .vz-lp-value-item h3 {
        margin: 0 0 8px;
        font-size: 1rem;
        font-weight: 650;
        color: #FFFFFF;
    }

    .vz-lp-value-item p {
        margin: 0;
        font-size: 0.875rem;
        line-height: 1.6;
        color: rgba(255,255,255,0.66);
    }

    /* ══ Rodapé ══ */
    .vz-lp-footer {
        background: #051614;
        border-top: 1px solid rgba(255,255,255,0.08);
        padding: clamp(30px, 4vw, 44px) clamp(20px, 5vw, 68px) clamp(28px, 4vw, 44px);
        font-family: 'Inter', sans-serif;
    }

    .vz-lp-footer-inner {
        max-width: 1080px;
        margin: 0 auto;
        display: grid;
        gap: 36px 40px;
        grid-template-columns: 1.25fr 0.7fr 0.75fr 1.25fr;
    }
    @media (max-width: 860px) { .vz-lp-footer-inner { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 520px) { .vz-lp-footer-inner { grid-template-columns: 1fr; } }

    .vz-lp-footer-brand p {
        margin: 14px 0 0;
        font-size: 0.85rem;
        line-height: 1.6;
        color: rgba(255,255,255,0.55);
        max-width: 34ch;
    }

    .vz-lp-footer-col { display: flex; flex-direction: column; gap: 11px; min-width: 0; }

    .vz-lp-footer-col h4 {
        margin: 0 0 3px;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.42);
    }

    .vz-lp-footer-col a {
        font-size: 0.85rem;
        color: rgba(255,255,255,0.76);
        text-decoration: none;
        transition: color .16s ease;
        word-break: normal;
        overflow-wrap: normal;
    }
    .vz-lp-footer-col a[href^="mailto:"] { white-space: nowrap; }
    .vz-lp-footer-col a:hover { color: #F0A94B; }

    .vz-lp-footer-note { font-size: 0.78rem; color: rgba(255,255,255,0.42); }

    .vz-lp-footer-bottom {
        max-width: 1080px;
        margin: clamp(36px, 5vw, 56px) auto 0;
        padding: 20px 0 0;
        border-top: 1px solid rgba(255,255,255,0.08);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        font-size: 0.78rem;
        color: rgba(255,255,255,0.42);
    }

    .vz-lp-footer-bottom a {
        color: rgba(255,255,255,0.66);
        text-decoration: none;
    }
    .vz-lp-footer-bottom a:hover { color: #F0A94B; }

    /* Em telas estreitas os links do topo saem — o CTA e o Entrar continuam */
    @media (max-width: 780px) {
        .vz-lp-links { display: none; }
    }

    @media (max-width: 860px) {
        .vz-lp-footer-col a[href^="mailto:"] {
            white-space: normal;
            overflow-wrap: anywhere;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .vz-lp-marquee-track { animation: none; }
        .vz-lp-slide { animation: none; opacity: 0; }
        .vz-lp-slide:first-child { opacity: 1; }
        .vz-lp-cta:hover { transform: none; }
    }


/* ── Páginas internas da landing (/modulos, /para-quem) ────────────────── */
/* `html, body` são `overflow: hidden` (o shell interno rola nos próprios painéis),
   então a landing precisa ser o seu próprio container de rolagem — senão tudo que
   passa da altura da viewport fica inalcançável, inclusive o rodapé. */
.vz-lp-page {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: #08211F;
    font-family: 'Inter', sans-serif;
}

/* Nav sem foto atrás precisa de fundo próprio */
.vz-lp-nav--solid {
    background: #061917;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.vz-lp-links a.is-active { color: #F0A94B; }

/* Hero das páginas internas */
.vz-lp-phero {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(52px, 8vw, 92px) clamp(20px, 5vw, 68px) clamp(28px, 4vw, 44px);
}
.vz-lp-phero h1 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    margin: 12px 0 0;
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -0.022em;
    color: #FFFFFF;
    max-width: 20ch;
}
.vz-lp-phero p {
    margin: 18px 0 0;
    max-width: 60ch;
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.66);
}

/* ── /modulos ── */
.vz-lp-modules {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 32px) clamp(20px, 5vw, 68px) clamp(40px, 6vw, 64px);
}
.vz-lp-mgroup { padding: clamp(30px, 4vw, 44px) 0; border-top: 1px solid rgba(255,255,255,0.09); }
.vz-lp-mgroup:first-child { border-top: 0; }

.vz-lp-mgroup-head h2 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #FFFFFF;
}
.vz-lp-mgroup-head p {
    margin: 7px 0 26px;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.55);
    max-width: 56ch;
}

.vz-lp-mgrid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}

.vz-lp-mcard {
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    padding: 20px;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.vz-lp-mcard:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(240,169,75,0.34);
    transform: translateY(-2px);
}
.vz-lp-mcard h3 {
    margin: 0 0 8px;
    font-size: 0.95rem;
    font-weight: 650;
    color: #FFFFFF;
}
.vz-lp-mcard p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.62);
}

/* ── /para-quem ── */
.vz-lp-roles {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 32px) clamp(20px, 5vw, 68px) clamp(40px, 6vw, 64px);
}

.vz-lp-role {
    display: grid;
    gap: 24px 56px;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    padding: clamp(30px, 4vw, 46px) 0;
    border-top: 1px solid rgba(255,255,255,0.09);
}
.vz-lp-role:first-child { border-top: 0; }
@media (max-width: 800px) { .vz-lp-role { grid-template-columns: 1fr; } }

.vz-lp-role-tag {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #F0A94B;
    border: 1px solid rgba(240,169,75,0.34);
    border-radius: 999px;
    padding: 4px 11px;
}
.vz-lp-role-head h2 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    margin: 14px 0 0;
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.018em;
    color: #FFFFFF;
}
.vz-lp-role-head p {
    margin: 10px 0 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.6);
    max-width: 42ch;
}

.vz-lp-role-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vz-lp-role-list li {
    position: relative;
    padding-left: 26px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.78);
}
/* marcador em vez de bullet padrão — fica alinhado com a primeira linha */
.vz-lp-role-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #F0A94B;
}

/* ── Faixa de CTA no fim das páginas internas ── */
.vz-lp-cta-band {
    text-align: center;
    padding: clamp(48px, 7vw, 80px) clamp(20px, 5vw, 68px);
    background: #061917;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.vz-lp-cta-band h2 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    margin: 0 0 24px;
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    font-weight: 600;
    letter-spacing: -0.018em;
    color: #FFFFFF;
}

/* Link "ver mais" da home */
.vz-lp-link-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 30px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #F0A94B;
    text-decoration: none;
}
.vz-lp-link-more span { transition: transform .16s ease; }
.vz-lp-link-more:hover span { transform: translateX(3px); }

/* Títulos da seção "para quem é" da home também usam a fonte de display */
.vz-lp-value h2 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 600; letter-spacing: -0.02em; }

/* Foto cadastrada cujo download falhou — distinto de "sem foto" */
.rec-photo-failed {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    font-size: 0.75rem; color: var(--v-text-light); text-align: center; padding: 8px;
}
.rec-photo-failed .mud-icon-root { font-size: 2rem; }
.rec-photo-failed button {
    border: 1px solid currentColor; background: transparent; color: inherit;
    font: inherit; font-weight: 600; padding: 2px 10px; border-radius: 999px; cursor: pointer;
}
.rec-photo-failed button:hover { background: rgba(255,255,255,0.08); }

/* ── Painel do histórico de recomendações ──────────────────────────────── */
.rec-period { display: flex; gap: 8px; flex-wrap: wrap; }

.rec-insight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.rec-insight-card { border-radius: 12px; border: 1px solid var(--v-border); }

.rec-insight-title {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 4px; font-size: 1rem; font-weight: 700; color: var(--v-text);
}
.rec-insight-title .mud-icon-root { font-size: 1.15rem; color: var(--v-primary); }

.rec-insight-sub {
    margin: 0 0 16px; font-size: 0.8125rem; line-height: 1.5; color: var(--v-text-muted);
}
.rec-insight-empty { margin: 0; font-size: 0.8125rem; color: var(--v-text-light); }

.rec-insight-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.rec-insight-table th {
    text-align: left; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--v-text-light);
    padding: 0 8px 8px; border-bottom: 1px solid var(--v-border);
}
.rec-insight-table td { padding: 9px 8px; border-bottom: 1px solid var(--v-border); }
.rec-insight-table tr:last-child td { border-bottom: none; }
.rec-insight-table--wide { margin-top: 4px; }
.rec-num { text-align: right; white-space: nowrap; }
.rec-insight-num { text-align: right; white-space: nowrap; font-weight: 700; color: var(--v-text); }
.rec-insight-num span { font-weight: 400; color: var(--v-text-light); margin-left: 4px; }

.rec-tag {
    display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
    font-size: 0.7rem; font-weight: 600;
}
.rec-tag--warn {
    background: var(--v-warning-bg); color: var(--v-warning-dark);
    border: 1px solid var(--v-warning);
}

/* Distribuição de formatos de rosto */
.rec-share-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.rec-share-label { flex: 0 0 90px; font-size: 0.8125rem; color: var(--v-text); }
.rec-share-bar {
    flex: 1; height: 8px; border-radius: 999px; background: var(--v-bg-alt); overflow: hidden;
}
.rec-share-bar div { height: 100%; border-radius: 999px; background: var(--v-primary); }
.rec-share-value {
    flex: 0 0 74px; text-align: right; font-size: 0.8125rem; font-weight: 700; color: var(--v-text);
}
.rec-share-value span { font-weight: 400; color: var(--v-text-light); }

/* Uma sessão de atendimento */
.rec-session { padding: 14px 16px; border-bottom: 1px solid var(--v-border); }
.rec-session:last-child { border-bottom: none; }

.rec-session-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.rec-session-when { font-size: 0.8125rem; font-weight: 600; color: var(--v-text); }
.rec-session-prefs { font-size: 0.8125rem; color: var(--v-text-muted); }

.rec-session-result {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.8125rem; color: var(--v-text-light);
}
.rec-session-result--ok { color: var(--v-success); font-weight: 600; }
.rec-session-result .mud-icon-root { font-size: 0.95rem; }

.rec-session-frames { display: flex; gap: 8px; flex-wrap: wrap; }
.rec-session-frame {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: 999px;
    border: 1px solid var(--v-border); background: var(--v-bg-alt);
    font-size: 0.78rem; color: var(--v-text-secondary);
}
.rec-session-frame.is-chosen {
    border-color: var(--v-success); color: var(--v-success); font-weight: 600;
    background: rgba(22,163,74,0.08);
}
.rec-session-score { font-size: 0.72rem; color: var(--v-text-light); }
.rec-session-frame.is-chosen .rec-session-score { color: var(--v-success); }

@media (max-width: 640px) {
    .rec-session-result { margin-left: 0; }
    .rec-share-label { flex-basis: 70px; }
}

/* Aviso de divergencia entre o formato digitado e a silhueta da foto */
.vz-shape-warning {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--v-warning-bg);
    border: 1px solid var(--v-warning);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--v-warning-dark);
}
.vz-shape-warning .mud-icon-root { font-size: 1.05rem; flex-shrink: 0; margin-top: 1px; }

.vz-shape-warning-fix {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.vz-shape-warning-fix:hover { background: rgba(0,0,0,0.06); }

/* ── /contato ─────────────────────────────────────────────────────────── */
.vz-lp-contact {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 32px) clamp(20px, 5vw, 68px) clamp(30px, 4vw, 52px);
    display: grid;
    gap: 28px 56px;
    /* A coluna do formulário é a maior: são 3 campos por linha contra um bloco de texto. */
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
    align-items: start;
}
@media (max-width: 860px) { .vz-lp-contact { grid-template-columns: 1fr; } }

/* Coluna esquerda: hero + cards. O hero perde o padding e o max-width próprios
   (dimensionados para faixa full-width) ao virar item da grade. */
.vz-lp-contact-intro { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.vz-lp-contact-intro .vz-lp-phero { max-width: none; margin: 0; padding: 0; }
.vz-lp-contact { padding-top: clamp(36px, 5vw, 64px); }

/* Telas largas: o formulário ocupa a faixa que sobrava à direita e os campos
   se distribuem em três colunas, cabendo sem rolagem. */
@media (min-width: 1400px) {
    .vz-lp-contact { max-width: 1560px; }
}

.vz-lp-contact-cards { display: flex; flex-direction: column; gap: 14px; }

.vz-lp-contact-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    padding: 18px;
}

.vz-lp-contact-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(240,169,75,0.14);
    color: #F0A94B;
}
.vz-lp-contact-icon .mud-icon-root { font-size: 1.05rem; }

.vz-lp-contact-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 4px;
}
.vz-lp-contact-card strong {
    font-size: 0.92rem;
    font-weight: 600;
    color: #FFFFFF;
    word-break: break-word;
}

.vz-lp-contact-action {
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    padding: clamp(22px, 3vw, 30px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.vz-lp-contact-action h2 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    margin: 0 0 18px;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #FFFFFF;
}
.vz-lp-contact-action .vz-lp-cta { margin-top: 26px; }

/* ── Formulário de pedido de teste (dentro de .vz-lp-contact-action) ──────
   Inputs nativos, não MudBlazor: a página roda no EmptyLayout sobre fundo
   escuro e o tema do Mud é claro. */
.vz-lp-contact-action { align-self: stretch; }
.vz-lp-form { width: 100%; display: flex; flex-direction: column; gap: 14px; }

.vz-lp-form-lead {
    margin: -10px 0 4px;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.55);
}

.vz-lp-form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.vz-lp-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 160px; min-width: 0; }
.vz-lp-field--wide { flex-basis: 100%; }
.vz-lp-field--uf { flex: 0 0 92px; }
.vz-lp-field--users { flex: 0 0 104px; }
.vz-lp-field--grow { flex: 2 1 190px; }

.vz-lp-field label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgba(255,255,255,0.62);
}
.vz-lp-field label span { color: #F0A94B; }

.vz-lp-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.9rem;
    color: #FFFFFF;
    transition: border-color .16s ease, background .16s ease;
}
.vz-lp-input::placeholder { color: rgba(255,255,255,0.28); }
.vz-lp-input:focus {
    outline: none;
    border-color: #F0A94B;
    background: rgba(255,255,255,0.07);
}
.vz-lp-input--error { border-color: #F87171; }
textarea.vz-lp-input { resize: vertical; min-height: 72px; }

/* O menu nativo do select herda o fundo do SO; forçamos o contraste nas options */
select.vz-lp-input { appearance: none; cursor: pointer; }
select.vz-lp-input option { background: #14202E; color: #FFFFFF; }

.vz-lp-field-error { font-size: 0.75rem; color: #F87171; }
.vz-lp-field-hint  { font-size: 0.75rem; color: rgba(255,255,255,0.38); }

.vz-lp-form-alert {
    background: rgba(248,113,113,0.1);
    border: 1px solid rgba(248,113,113,0.3);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 0.85rem;
    color: #FCA5A5;
}

.vz-lp-contact-action .vz-lp-form-submit {
    margin-top: 6px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    align-self: flex-start;
}
.vz-lp-form-submit:disabled { opacity: 0.6; cursor: default; transform: none; }

.vz-lp-cta-note a { color: rgba(255,255,255,0.75); }

/* Honeypot — fora da tela, sem display:none (bots ignoram campos ocultos) */
.vz-lp-hp {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* Confirmação pós-envio */
.vz-lp-form-done { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.vz-lp-form-done-icon {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: rgba(52,211,153,0.14);
    color: #34D399;
}
.vz-lp-form-done-icon .mud-icon-root { font-size: 1.3rem; }
.vz-lp-form-done h2 { margin: 0; }
.vz-lp-form-done p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.6);
}
.vz-lp-form-done p strong { color: #FFFFFF; }

@media (max-width: 520px) {
    .vz-lp-form-row { gap: 12px; }
    .vz-lp-field, .vz-lp-field--grow { flex-basis: 100%; }
    /* UF e Pessoas continuam estreitos: ficam lado a lado com o campo anterior */
    .vz-lp-field--uf, .vz-lp-field--users { flex: 0 0 88px; }
}

/* a nota do CTA na home é branca sobre foto; aqui o fundo é sólido */
.vz-lp-cta-note--dark { color: rgba(255,255,255,0.5); }

/* ================================================================
   DARK MODE — paleta do shot "Subscription Manager" (OTAKOYI)
   Azul-marinho profundo no fundo, painel um tom acima, texto claro
   com secundário lilás-acinzentado.

   Aplicado via [data-theme="dark"] no <html>, setado antes do CSS
   carregar (script no index.html) para não piscar branco.

   O verde da marca (#0B3A3D) é escuro demais para fundo escuro —
   no dark ele vira um teal claro, mantendo identidade e contraste.
   ================================================================ */
:root[data-theme="dark"] {
    /* Marca — teal claro, legível sobre o marinho */
    --v-primary:        #35C2B4;
    --v-primary-dark:   #2AA79B;
    --v-primary-hover:  #4AD4C6;
    --v-primary-deep:   #1B7C74;
    --v-primary-light:  rgba(53,194,180,0.32);
    --v-primary-pale:   rgba(53,194,180,0.14);
    --v-primary-rgb:    53,194,180;

    /* Âmbar — clareia para não sumir no escuro */
    --v-accent:         #F0A94B;
    --v-accent-dark:    #D8913A;
    --v-accent-pale:    rgba(240,169,75,0.14);
    --v-cyan:           #F0A94B;
    --v-cyan-light:     rgba(240,169,75,0.14);

    --v-grad-brand:      linear-gradient(135deg, #171B33 0%, #1E7A73 60%, #F0A94B 140%);
    --v-grad-brand-soft: linear-gradient(135deg, #1B7C74 0%, #35C2B4 100%);

    /* Superfícies */
    --v-bg:             #14172B;
    --v-bg-alt:         #191D35;
    --v-surface:        #1E2239;
    --v-border:         #2C3252;
    --v-border-strong:  #3B4269;
    --v-border-light:   #252A46;

    /* Texto */
    --v-text:           #F1F3FA;
    --v-text-secondary: #C2C7E0;
    --v-text-muted:     #8D93B8;
    --v-text-light:     #6B7099;

    /* Semânticas — versões mais claras; o tom do light some no escuro */
    --v-success:        #3DD68C;
    --v-success-dark:   #2FB876;
    --v-success-bg:     rgba(61,214,140,0.13);
    --v-error:          #F87171;
    --v-error-dark:     #EF5350;
    --v-error-bg:       rgba(248,113,113,0.13);
    --v-warning:        #FBBF24;
    --v-warning-dark:   #F0A94B;
    --v-warning-bg:     rgba(251,191,36,0.13);
    --v-info:           #7C8AFF;
    --v-info-bg:        rgba(124,138,255,0.13);

    /* Sidebar — trilho mais escuro que o conteúdo, como no shot */
    --v-sidebar-bg:     #101324;
    --v-sidebar-bg-2:   #14172B;
    --v-sidebar-hover:  rgba(255,255,255,0.06);
    --v-sidebar-text:   #9096BC;

    /* No escuro sombra preta some — o recorte vem da borda */
    --v-shadow-sm:      0 1px 2px rgba(0,0,0,0.32);
    --v-shadow-md:      0 6px 18px rgba(0,0,0,0.38);
    --v-shadow-lg:      0 18px 44px rgba(0,0,0,0.46);
    --v-ring:           0 0 0 3px rgba(53,194,180,0.28);
}

/* ── Base ── */
:root[data-theme="dark"] body,
:root[data-theme="dark"] .mud-layout,
:root[data-theme="dark"] .mud-main-content {
    background: var(--v-bg) !important;
    color: var(--v-text);
}

:root[data-theme="dark"] .mud-appbar {
    background: var(--v-surface) !important;
    color: var(--v-text) !important;
    border-bottom-color: var(--v-border) !important;
}
:root[data-theme="dark"] .mud-appbar .mud-icon-root { color: var(--v-text-secondary) !important; }

:root[data-theme="dark"] .mud-drawer {
    background: var(--v-sidebar-bg) !important;
    border-right-color: var(--v-border) !important;
}
:root[data-theme="dark"] .mud-drawer .mud-nav-link:hover { background: rgba(255,255,255,0.06) !important; }
:root[data-theme="dark"] .mud-drawer .mud-nav-link.active {
    background: var(--v-primary-pale) !important;
    color: var(--v-primary) !important;
}
:root[data-theme="dark"] .sidebar-brand { border-bottom-color: var(--v-border); color: var(--v-text); }
:root[data-theme="dark"] .sidebar-searchbox { background: rgba(255,255,255,0.05); border-color: var(--v-border); }
:root[data-theme="dark"] .sidebar-search-input { color: var(--v-text); }
:root[data-theme="dark"] .sidebar-scroll::-webkit-scrollbar-thumb { background: var(--v-border-strong); }
:root[data-theme="dark"] .sidebar-footer { border-top-color: var(--v-border); }
:root[data-theme="dark"] .sidebar-user-name { color: var(--v-text); }
:root[data-theme="dark"] .sidebar-user-role { color: var(--v-text-muted); }
:root[data-theme="dark"] .nav-badge { color: var(--v-text-secondary); background: rgba(255,255,255,0.09); }

/* ── Superfícies genéricas ── */
:root[data-theme="dark"] .mud-paper,
:root[data-theme="dark"] .mud-card,
:root[data-theme="dark"] .vpanel,
:root[data-theme="dark"] .stat-card {
    background: var(--v-surface) !important;
    color: var(--v-text);
    border-color: var(--v-border) !important;
}

:root[data-theme="dark"] .page-title { color: var(--v-text); }
:root[data-theme="dark"] .page-subtitle { color: var(--v-text-muted); }

/* ── AntDesign: tabela ── */
:root[data-theme="dark"] .ant-table,
:root[data-theme="dark"] .ant-table-container,
:root[data-theme="dark"] .ant-table-content {
    background: var(--v-surface) !important;
    color: var(--v-text) !important;
}
:root[data-theme="dark"] .ant-table-thead > tr > th {
    background: var(--v-bg-alt) !important;
    color: var(--v-text-muted) !important;
    border-bottom-color: var(--v-border) !important;
}
:root[data-theme="dark"] .ant-table-tbody > tr > td {
    border-bottom-color: var(--v-border-light) !important;
    color: var(--v-text-secondary) !important;
}
:root[data-theme="dark"] .ant-table-tbody > tr:hover > td {
    background: var(--v-bg-alt) !important;
}
:root[data-theme="dark"] .ant-table-placeholder,
:root[data-theme="dark"] .ant-empty-description {
    background: var(--v-surface) !important;
    color: var(--v-text-muted) !important;
}
:root[data-theme="dark"] .ant-pagination-item,
:root[data-theme="dark"] .ant-pagination-prev .ant-pagination-item-link,
:root[data-theme="dark"] .ant-pagination-next .ant-pagination-item-link {
    background: var(--v-bg-alt) !important;
    border-color: var(--v-border) !important;
}
:root[data-theme="dark"] .ant-pagination-item a { color: var(--v-text-secondary) !important; }
:root[data-theme="dark"] .ant-pagination-item-active { border-color: var(--v-primary) !important; }
:root[data-theme="dark"] .ant-pagination-item-active a { color: var(--v-primary) !important; }

/* ── AntDesign: campos ── */
:root[data-theme="dark"] .ant-input,
:root[data-theme="dark"] .ant-input-affix-wrapper,
:root[data-theme="dark"] .ant-input-number,
:root[data-theme="dark"] .ant-picker,
:root[data-theme="dark"] .ant-select:not(.ant-select-customize-input) .ant-select-selector {
    background: var(--v-bg-alt) !important;
    border-color: var(--v-border) !important;
    color: var(--v-text) !important;
}
:root[data-theme="dark"] .ant-input::placeholder,
:root[data-theme="dark"] .ant-select-selection-placeholder,
:root[data-theme="dark"] .ant-picker-input > input::placeholder { color: var(--v-text-light) !important; }
:root[data-theme="dark"] .ant-picker-input > input,
:root[data-theme="dark"] .ant-select-selection-item { color: var(--v-text) !important; }
:root[data-theme="dark"] .ant-select-arrow,
:root[data-theme="dark"] .ant-picker-suffix { color: var(--v-text-muted); }

/* Dropdown e calendário flutuam fora do container — regra própria */
:root[data-theme="dark"] .ant-select-dropdown,
:root[data-theme="dark"] .ant-picker-panel-container,
:root[data-theme="dark"] .ant-dropdown-menu {
    background: var(--v-surface) !important;
    border: 1px solid var(--v-border);
    box-shadow: var(--v-shadow-lg);
}
:root[data-theme="dark"] .ant-select-item,
:root[data-theme="dark"] .ant-dropdown-menu-item,
:root[data-theme="dark"] .ant-picker-cell-in-view { color: var(--v-text-secondary) !important; }
:root[data-theme="dark"] .ant-select-item-option-active,
:root[data-theme="dark"] .ant-dropdown-menu-item:hover { background: var(--v-bg-alt) !important; }
:root[data-theme="dark"] .ant-select-item-option-selected {
    background: var(--v-primary-pale) !important;
    color: var(--v-primary) !important;
}
:root[data-theme="dark"] .ant-picker-header,
:root[data-theme="dark"] .ant-picker-header button,
:root[data-theme="dark"] .ant-picker-content th { color: var(--v-text-secondary) !important; }
:root[data-theme="dark"] .ant-picker-header { border-bottom-color: var(--v-border) !important; }

/* ── AntDesign: modal e popover ── */
:root[data-theme="dark"] .ant-modal-content,
:root[data-theme="dark"] .ant-modal-header,
:root[data-theme="dark"] .ant-modal-footer,
:root[data-theme="dark"] .ant-popover-inner,
:root[data-theme="dark"] .ant-popover-inner-content {
    background: var(--v-surface) !important;
    color: var(--v-text) !important;
    border-color: var(--v-border) !important;
}
:root[data-theme="dark"] .ant-modal-mask { background: rgba(6,8,20,0.72) !important; }
:root[data-theme="dark"] .vz-modal .ant-modal-body::-webkit-scrollbar-thumb {
    background: var(--v-border-strong);
    border-color: var(--v-surface);
}

/* ── AntDesign: botões neutros ── */
:root[data-theme="dark"] .ant-btn:not(.vz-btn-pill):not(.ant-btn-primary):not(.ant-btn-text) {
    background: var(--v-bg-alt) !important;
    border-color: var(--v-border) !important;
    color: var(--v-text-secondary) !important;
}
:root[data-theme="dark"] .ant-btn-text { color: var(--v-text-secondary) !important; }
:root[data-theme="dark"] .ant-btn-text:hover { background: rgba(255,255,255,0.06) !important; }

/* ── MudBlazor ── */
:root[data-theme="dark"] .mud-dialog,
:root[data-theme="dark"] .mud-popover,
:root[data-theme="dark"] .mud-list {
    background: var(--v-surface) !important;
    color: var(--v-text) !important;
}
:root[data-theme="dark"] .mud-overlay-dark { background: rgba(6,8,20,0.72) !important; }
:root[data-theme="dark"] .mud-input-outlined-border { border-color: var(--v-border) !important; }
:root[data-theme="dark"] .mud-input,
:root[data-theme="dark"] .mud-input-root,
:root[data-theme="dark"] .mud-input-label { color: var(--v-text) !important; }
:root[data-theme="dark"] .mud-table,
:root[data-theme="dark"] .mud-table-container { background: var(--v-surface) !important; color: var(--v-text); }
:root[data-theme="dark"] .mud-table-row:hover { background: var(--v-bg-alt) !important; }
:root[data-theme="dark"] .mud-table-cell {
    border-bottom-color: var(--v-border-light) !important;
    color: var(--v-text-secondary);
}
:root[data-theme="dark"] .mud-tabs-toolbar {
    background: transparent !important;
    border-bottom: 1px solid var(--v-border);
}

/* ── Formulários (classes vz-*) ── */
:root[data-theme="dark"] .vz-field > label { color: var(--v-text-secondary); }
:root[data-theme="dark"] .vz-form-section { color: var(--v-text-muted); }
:root[data-theme="dark"] .vz-mbtn--ghost { color: var(--v-text-secondary); border-color: var(--v-border); }
:root[data-theme="dark"] .vz-mbtn--ghost:not(:disabled):hover {
    background: var(--v-bg-alt);
    border-color: var(--v-border-strong);
}
/* Botões da marca: no dark o fundo é teal claro, então o texto vira escuro */
:root[data-theme="dark"] .vz-mbtn--primary { background: var(--v-primary); color: #0A1020; }
:root[data-theme="dark"] .ant-btn.vz-btn-pill { color: #0A1020; }
:root[data-theme="dark"] .ant-btn.vz-btn-pill .anticon { color: #0A1020; }

/* Transição só nas superfícies — evita arrastar cor em tudo ao trocar tema */
body, .mud-drawer, .mud-appbar, .mud-paper, .vpanel, .ant-table, .ant-modal-content {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
@media (prefers-reduced-motion: reduce) {
    body, .mud-drawer, .mud-appbar, .mud-paper, .vpanel, .ant-table, .ant-modal-content { transition: none; }
}


/* ================================================================
   VIZZO DATE RANGE PICKER — ref.: "Free Date Picker" (Orman Clark)
   Trilho de atalhos + dois meses + barra inferior com as datas.
   Todas as cores vêm de token, então o dark mode vem de graça.
   ================================================================ */
.vz-drp { position: relative; display: inline-block; }

.vz-drp-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--v-border);
    border-radius: 8px;
    background: var(--v-surface);
    color: var(--v-text-secondary);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--v-transition), color var(--v-transition);
}
.vz-drp-trigger:hover { border-color: var(--v-border-strong); color: var(--v-text); }
.vz-drp.is-open .vz-drp-trigger { border-color: var(--v-primary); color: var(--v-text); }
.vz-drp-trigger .mud-icon-root { font-size: 0.95rem; color: var(--v-text-muted); }
.vz-drp-caret { margin-left: 2px; }

/* Fecha ao clicar fora sem aplicar */
.vz-drp-backdrop { position: fixed; inset: 0; z-index: 1200; }

.vz-drp-panel {
    position: absolute;
    z-index: 1201;
    top: calc(100% + 8px);
    left: 0;
    display: flex;
    background: var(--v-surface);
    border: 1px solid var(--v-border);
    border-radius: 14px;
    box-shadow: var(--v-shadow-lg);
    overflow: hidden;
}

/* ── Trilho de atalhos ── */
.vz-drp-presets {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 10px;
    min-width: 158px;
    border-right: 1px solid var(--v-border);
    background: var(--v-bg-alt);
}
.vz-drp-presets button {
    text-align: left;
    border: 0;
    background: transparent;
    border-radius: 7px;
    padding: 7px 10px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--v-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--v-transition), color var(--v-transition);
}
.vz-drp-presets button:hover { background: var(--v-surface); color: var(--v-text); }
.vz-drp-presets button.is-active { color: var(--v-primary); font-weight: 600; }

/* ── Corpo ── */
.vz-drp-body { display: flex; flex-direction: column; }
.vz-drp-months { display: flex; gap: 26px; padding: 16px 18px 8px; }
@media (max-width: 720px) {
    .vz-drp-months { flex-direction: column; gap: 14px; }
    .vz-drp-presets { display: none; }
}

.vz-drp-month { width: 224px; }

.vz-drp-mhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.vz-drp-mtitle {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--v-text);
}
.vz-drp-nav {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0;
    background: transparent;
    border-radius: 6px;
    color: var(--v-text-muted);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--v-transition), color var(--v-transition);
}
.vz-drp-nav:hover { background: var(--v-bg-alt); color: var(--v-text); }
.vz-drp-nav-spacer { width: 24px; height: 24px; }

.vz-drp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.vz-drp-wd {
    height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--v-text-light);
    text-transform: lowercase;
}

.vz-drp-empty { height: 30px; }

.vz-drp-day {
    height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0;
    background: transparent;
    border-radius: 7px;
    font-family: inherit;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--v-text-secondary);
    cursor: pointer;
    transition: background var(--v-transition), color var(--v-transition);
}
.vz-drp-day:hover { background: var(--v-bg-alt); color: var(--v-text); }

/* Hoje: só o contorno, para não competir com a seleção */
.vz-drp-day.is-today { box-shadow: inset 0 0 0 1px var(--v-border-strong); }

/* Miolo do intervalo: faixa contínua, cantos retos entre as pontas */
.vz-drp-day.is-in {
    background: var(--v-primary-pale);
    color: var(--v-primary);
    border-radius: 0;
}
.vz-drp-day.is-start,
.vz-drp-day.is-end {
    background: var(--v-primary);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
}
.vz-drp-day.is-start { border-radius: 7px 0 0 7px; }
.vz-drp-day.is-end   { border-radius: 0 7px 7px 0; }
.vz-drp-day.is-start.is-end { border-radius: 7px; }

/* ── Barra inferior ── */
.vz-drp-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 18px;
    border-top: 1px solid var(--v-border);
    background: var(--v-bg-alt);
}

.vz-drp-inputs { display: flex; align-items: center; gap: 10px; }

.vz-drp-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--v-border);
    border-radius: 7px;
    background: var(--v-surface);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--v-text);
}
/* Indica qual das duas datas o próximo clique vai preencher */
.vz-drp-chip.is-focus {
    border-color: var(--v-primary);
    box-shadow: var(--v-ring);
}
.vz-drp-arrow { color: var(--v-text-muted); font-size: 0.85rem; }

.vz-drp-actions { display: flex; align-items: center; gap: 8px; }

.vz-drp-btn {
    height: 30px;
    padding: 0 14px;
    border: 1px solid var(--v-border);
    border-radius: 7px;
    background: var(--v-surface);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--v-text-secondary);
    cursor: pointer;
    transition: background var(--v-transition), border-color var(--v-transition);
}
.vz-drp-btn:hover { border-color: var(--v-border-strong); }

.vz-drp-btn--primary {
    background: var(--v-primary);
    border-color: var(--v-primary);
    color: #fff;
}
.vz-drp-btn--primary:hover { background: var(--v-primary-hover); border-color: var(--v-primary-hover); }
.vz-drp-btn--primary:disabled { opacity: 0.5; cursor: default; }

/* No dark o primário é teal claro — texto escuro lê melhor */
:root[data-theme="dark"] .vz-drp-day.is-start,
:root[data-theme="dark"] .vz-drp-day.is-end,
:root[data-theme="dark"] .vz-drp-btn--primary { color: #0A1020; }


/* ================================================================
   AJUSTES DARK + PADRONIZAÇÃO DOS SELETORES DE DATA/HORA
   Os pickers nativos (AntDesign e MudBlazor) trazem tema claro do
   pacote. Aqui eles recebem a mesma pele do VizzoDateRangePicker,
   nos dois temas — assim os 40 campos de data do sistema ficam
   iguais sem trocar o componente em cada tela.
   ================================================================ */

/* ── AntDesign: painel de data ── */
.ant-picker-panel-container,
.ant-picker-panel {
    background: var(--v-surface) !important;
    border-color: var(--v-border) !important;
    border-radius: 12px;
}
.ant-picker-cell { color: var(--v-text-light) !important; }
.ant-picker-cell-in-view { color: var(--v-text-secondary) !important; }

.ant-picker-cell .ant-picker-cell-inner {
    border-radius: 7px !important;
    min-width: 26px;
    height: 26px;
    line-height: 26px;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    transition: background .15s ease, color .15s ease;
}
.ant-picker-cell-in-view:hover .ant-picker-cell-inner { background: var(--v-bg-alt) !important; }

/* hoje: só contorno, não compete com a seleção */
.ant-picker-cell-today .ant-picker-cell-inner::before {
    border-color: var(--v-border-strong) !important;
    border-radius: 7px !important;
}
.ant-picker-cell-selected .ant-picker-cell-inner {
    background: var(--v-primary) !important;
    color: #fff !important;
    font-weight: 600;
}
.ant-picker-cell-in-range .ant-picker-cell-inner { background: var(--v-primary-pale) !important; }

.ant-picker-header,
.ant-picker-footer {
    border-color: var(--v-border) !important;
    color: var(--v-text-secondary) !important;
}
.ant-picker-header button,
.ant-picker-header-view button { color: var(--v-text) !important; font-weight: 600; }
.ant-picker-content th { color: var(--v-text-light) !important; font-size: 0.68rem; font-weight: 600; }
.ant-picker-today-btn { color: var(--v-primary) !important; }

/* ── AntDesign: painel de hora ──
   Era o ponto mais quebrado no escuro: as colunas vinham com fundo
   branco do pacote e a célula selecionada ficava clara sobre claro. */
.ant-picker-time-panel,
.ant-picker-time-panel-column {
    background: var(--v-surface) !important;
    border-color: var(--v-border) !important;
}
.ant-picker-time-panel-column:not(:first-child) { border-left: 1px solid var(--v-border) !important; }
.ant-picker-time-panel-column > li > div {
    color: var(--v-text-secondary) !important;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
}
.ant-picker-time-panel-column > li:hover > div { background: var(--v-bg-alt) !important; }
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected > div {
    background: var(--v-primary-pale) !important;
    color: var(--v-primary) !important;
    font-weight: 600;
}
.ant-picker-ranges .ant-picker-now-btn { color: var(--v-primary) !important; }
.ant-picker-ok .ant-btn-primary {
    background: var(--v-primary) !important;
    border-color: var(--v-primary) !important;
    color: #fff !important;
}

/* ── MudBlazor: calendário ── */
.mud-picker-container,
.mud-picker-inline-paper,
.mud-picker-calendar-container {
    background: var(--v-surface) !important;
    color: var(--v-text) !important;
}
.mud-picker-calendar-header-day { color: var(--v-text-light) !important; font-weight: 600; }
.mud-picker-calendar-header-transition,
.mud-picker-calendar-header-switch { color: var(--v-text) !important; }
.mud-picker-calendar-day { color: var(--v-text-secondary) !important; }
.mud-picker-calendar-day:hover { background: var(--v-bg-alt) !important; }
.mud-picker-calendar-day.mud-selected,
.mud-picker-calendar-day.mud-button-filled.mud-button-filled-primary {
    background: var(--v-primary) !important;
    color: #fff !important;
}
.mud-picker-calendar-day.mud-current { border-color: var(--v-border-strong) !important; }
.mud-picker-toolbar { background: var(--v-bg-alt) !important; color: var(--v-text) !important; }

/* No dark o primário é teal claro — texto escuro lê melhor em cima dele */
:root[data-theme="dark"] .ant-picker-cell-selected .ant-picker-cell-inner,
:root[data-theme="dark"] .ant-picker-ok .ant-btn-primary,
:root[data-theme="dark"] .mud-picker-calendar-day.mud-selected,
:root[data-theme="dark"] .mud-picker-calendar-day.mud-button-filled.mud-button-filled-primary {
    color: #0A1020 !important;
}

/* Campo de data/hora fechado no escuro */
:root[data-theme="dark"] .ant-picker-clear { background: var(--v-bg-alt) !important; color: var(--v-text-muted) !important; }
:root[data-theme="dark"] .ant-picker-separator { color: var(--v-text-muted) !important; }

/* ── Card-herói do dashboard no escuro ──
   O gradiente usa --v-primary, que no dark virou teal claro: o card
   ficava luminoso demais e o texto perdia contraste. No escuro ele
   usa tons próprios, mais fechados. */
:root[data-theme="dark"] .dash-hero {
    background: linear-gradient(140deg, #10403F 0%, #14524F 55%, #1A6763 100%);
}
:root[data-theme="dark"] .dash-hero p { color: rgba(255,255,255,0.72); }
:root[data-theme="dark"] .dash-hero__btn { background: #E8FBF8; color: #0C3F3C; }
:root[data-theme="dark"] .dash-hero__btn--ghost {
    background: rgba(255,255,255,0.10);
    color: #FFFFFF;
    border-color: rgba(255,255,255,0.22);
}

/* Botões do card-herói um pouco menores (mesmos valores do <style> da página) */
.dash-hero__btn {
    padding: 7px 14px;
    font-size: 0.75rem;
    border-radius: 8px;
}