/*
 * Dark mode overrides
 * Aplicado quando o tema está em modo escuro (data-bs-theme="dark").
 *
 * =====================================================================
 * PALETA REFINADA — cool slate-blue desaturada
 * ---------------------------------------------------------------------
 * Princípios:
 *  - 4 níveis de superfície (L0 body, L1 card, L2 raised, L3 hover)
 *    com degrau de ~4-6 pontos de luminância entre cada.
 *  - Bordas com delta visível (>=10pt) sobre a superfície adjacente.
 *  - Headings mais brilhantes que body text (hierarquia tipográfica).
 *  - Brand teal levemente clareado pra contraste real no dark.
 * =====================================================================
 */

/* =====================================================================
 * Surface ladder semântica (L0..L3) — funciona em light e dark theme.
 * Regra do design system: o background de um elemento aninhado deve ser
 * UM degrau mais claro (light) / mais claro relativo (dark) que o do
 * pai. O ladder tem 4 níveis estáveis; o 5º aninhamento reinicia em L0.
 * Ver CLAUDE.md — Design System / Hierarquia de superfícies.
 * ===================================================================== */
:root {
    /* Cool slate-blue undertone (mesmo "feel" do dark) — degraus de
       ~4pt de luminância, mesma cadência do dark mode. */
    --kit-surface-0: #ffffff;  /* L0 — body / app background */
    --kit-surface-1: #f3f5f8;  /* L1 — card / modal / dropdown */
    --kit-surface-2: #e7eaef;  /* L2 — card aninhado / input / table stripe */
    --kit-surface-3: #dbe0e6;  /* L3 — card aninhado em L2 / hover sobre L2 */
}

[data-bs-theme="dark"] {
    /* Surface ladder */
    --kit-d-bg:            #0f141b;  /* L0 — body / app background */
    --kit-d-surface:       #171d27;  /* L1 — card / topbar / modal / dropdown */
    --kit-d-raised:        #1f2733;  /* L2 — input / table-striped / hover row */
    --kit-d-hover:         #27313f;  /* L3 — active / hover sobre raised */
    --kit-d-sidebar:       #131922;  /* sidebar dark variant */

    /* Aliases semânticos do ladder (mesmos valores, nomes cross-theme) */
    --kit-surface-0: var(--kit-d-bg);
    --kit-surface-1: var(--kit-d-surface);
    --kit-surface-2: var(--kit-d-raised);
    --kit-surface-3: var(--kit-d-hover);

    /* Borders */
    --kit-d-border:        #2a3441;  /* default — visível sobre L1 e L2 */
    --kit-d-border-strong: #3a4658;  /* focus, hover de card */

    /* Text */
    --kit-d-text:          #d7dde6;  /* body */
    --kit-d-heading:       #f1f4f9;  /* h1-h6, .text-emphasis */
    --kit-d-text-muted:    #8e98a8;  /* secondary */
    --kit-d-text-faint:    #6e7686;  /* tertiary / placeholder */

    /* Brand */
    --kit-d-brand:         #2aa3b8;  /* teal clareado p/ dark */
    --kit-d-brand-hover:   #34b3cc;
    --kit-d-brand-active:  #1f8b9e;
    --kit-d-brand-subtle:  rgba(42, 163, 184, 0.12);
    --kit-d-link:          #5ec3d8;
    --kit-d-link-hover:    #8bd4e3;

    /* Mapeamento Bootstrap (--bs-*) */
    --bs-body-bg:                  var(--kit-d-bg) !important;
    --bs-body-bg-rgb:              15, 20, 27 !important;
    --bs-body-color:               var(--kit-d-text) !important;
    --bs-body-color-rgb:           215, 221, 230 !important;
    --bs-emphasis-color:           var(--kit-d-heading) !important;
    --bs-emphasis-color-rgb:       241, 244, 249 !important;
    --bs-heading-color:            var(--kit-d-heading) !important;
    --bs-secondary-color:          var(--kit-d-text-muted) !important;
    --bs-secondary-bg:             var(--kit-d-surface) !important;
    --bs-secondary-bg-rgb:         23, 29, 39 !important;
    --bs-tertiary-color:           var(--kit-d-text-faint) !important;
    --bs-tertiary-bg:              var(--kit-d-raised) !important;
    --bs-tertiary-bg-rgb:          31, 39, 51 !important;
    --bs-border-color:             var(--kit-d-border) !important;
    --bs-border-color-translucent: var(--kit-d-border) !important;
    --bs-link-color:               var(--kit-d-link) !important;
    --bs-link-hover-color:         var(--kit-d-link-hover) !important;
    --bs-link-color-rgb:           94, 195, 216 !important;

    /* Mapeamento Velzon (--vz-*) — sobrescreve a paleta compilada */
    --vz-body-bg:                  var(--kit-d-bg) !important;
    --vz-body-bg-rgb:              15, 20, 27 !important;
    --vz-body-color:               var(--kit-d-text) !important;
    --vz-body-color-rgb:           215, 221, 230 !important;
    --vz-secondary-bg:             var(--kit-d-surface) !important;
    --vz-secondary-bg-rgb:         23, 29, 39 !important;
    --vz-tertiary-bg:              var(--kit-d-raised) !important;
    --vz-tertiary-bg-rgb:          31, 39, 51 !important;
    --vz-tertiary-color:           var(--kit-d-text-faint) !important;
    --vz-emphasis-color:           var(--kit-d-heading) !important;
    --vz-heading-color:            var(--kit-d-heading) !important;
    --vz-border-color:             var(--kit-d-border) !important;
    --vz-border-color-translucent: var(--kit-d-border) !important;
    --vz-light:                    var(--kit-d-raised) !important;
    --vz-light-rgb:                31, 39, 51 !important;
    --vz-light-bg-subtle:          var(--kit-d-surface) !important;
    --vz-light-border-subtle:      var(--kit-d-border) !important;
    --vz-dark:                     var(--kit-d-hover) !important;
    --vz-dark-rgb:                 39, 49, 63 !important;
    --vz-dark-bg-subtle:           var(--kit-d-raised) !important;
    --vz-dark-border-subtle:       var(--kit-d-border-strong) !important;

    /* Componentes */
    --vz-card-bg:                  var(--kit-d-surface) !important;
    --vz-card-bg-custom:           var(--kit-d-surface) !important;
    --vz-card-border-color:        var(--kit-d-border) !important;
    --vz-card-cap-bg:              var(--kit-d-surface) !important;
    --vz-input-bg:                 var(--kit-d-raised) !important;
    --vz-input-bg-custom:          var(--kit-d-raised) !important;
    --vz-input-border:             var(--kit-d-border) !important;
    --vz-input-border-custom:      var(--kit-d-border) !important;
    --vz-input-disabled-bg:        var(--kit-d-bg) !important;
    --vz-input-focus-bg:           var(--kit-d-raised) !important;
    --vz-input-focus-border-color: var(--kit-d-brand) !important;
    --vz-input-placeholder-color:  var(--kit-d-text-faint) !important;
    --vz-dropdown-bg:              var(--kit-d-surface) !important;
    --vz-dropdown-border-color:    var(--kit-d-border) !important;
    --vz-dropdown-link-color:      var(--kit-d-text) !important;
    --vz-dropdown-link-hover-bg:   var(--kit-d-hover) !important;
    --vz-dropdown-link-hover-color:var(--kit-d-heading) !important;
    --vz-modal-bg:                 var(--kit-d-surface) !important;
    --vz-modal-border-color:       var(--kit-d-border) !important;
    --vz-modal-content-bg:         var(--kit-d-surface) !important;
    --vz-modal-footer-border-color:var(--kit-d-border) !important;
    --vz-modal-header-border-color:var(--kit-d-border) !important;
    --vz-list-group-bg:            var(--kit-d-surface) !important;
    --vz-list-group-border-color:  var(--kit-d-border) !important;
    --vz-list-group-hover-bg:      var(--kit-d-raised) !important;
    --vz-list-group-action-color:  var(--kit-d-text) !important;
    --vz-list-group-action-hover-bg:var(--kit-d-raised) !important;
    --vz-nav-tabs-border-color:    var(--kit-d-border) !important;
    --vz-nav-tabs-link-hover-border-color: var(--kit-d-border) var(--kit-d-border) var(--kit-d-border) !important;
    --vz-nav-pills-link-active-bg: var(--kit-d-brand) !important;
    --vz-table-bg:                 transparent !important;
    --vz-table-color:              var(--kit-d-text) !important;
    --vz-table-border-color:       var(--kit-d-border) !important;
    --vz-table-striped-bg:         var(--kit-d-raised) !important;
    --vz-table-hover-bg:           var(--kit-d-hover) !important;
    --vz-pagination-bg:            var(--kit-d-surface) !important;
    --vz-pagination-color:         var(--kit-d-text) !important;
    --vz-pagination-border-color:  var(--kit-d-border) !important;
    --vz-pagination-hover-bg:      var(--kit-d-raised) !important;
    --vz-pagination-hover-color:   var(--kit-d-heading) !important;
    --vz-pagination-active-bg:     var(--kit-d-brand) !important;
    --vz-pagination-active-border-color: var(--kit-d-brand) !important;
    --vz-accordion-bg:             var(--kit-d-surface) !important;
    --vz-accordion-border-color:   var(--kit-d-border) !important;
    --vz-accordion-button-bg:      var(--kit-d-surface) !important;
    --vz-accordion-button-active-bg:var(--kit-d-raised) !important;
    --vz-accordion-button-active-color: var(--kit-d-heading) !important;
    --vz-popover-bg:               var(--kit-d-surface) !important;
    --vz-popover-border-color:     var(--kit-d-border) !important;
    --vz-popover-header-bg:        var(--kit-d-raised) !important;
    --vz-tooltip-bg:               var(--kit-d-hover) !important;
    --vz-toast-bg:                 var(--kit-d-surface) !important;
    --vz-toast-border-color:       var(--kit-d-border) !important;
    --vz-code-color:               #e685b5 !important;

    /* Topbar / sidebar */
    --vz-header-bg:                var(--kit-d-surface) !important;
    --vz-header-border:            var(--kit-d-border) !important;
    --vz-header-item-color:        var(--kit-d-text) !important;
    --vz-header-item-bg:           var(--kit-d-raised) !important;
    --vz-topbar-search-bg:         var(--kit-d-raised) !important;
    --vz-topbar-search-color:      var(--kit-d-text) !important;
    --vz-topbar-user-bg:           var(--kit-d-raised) !important;
    --vz-footer-bg:                var(--kit-d-surface) !important;
    --vz-footer-color:             var(--kit-d-text-muted) !important;
    --vz-boxed-body-bg:            #0a0e14 !important;

    /* Sidebar (vertical menu) — cobre .navbar-brand-box e demais consumidores
       da variável, para o fundo do logo não destoar do resto do menu. */
    --vz-vertical-menu-bg:                  var(--kit-d-sidebar) !important;
    --vz-vertical-menu-border:              var(--kit-d-sidebar) !important;
    --vz-vertical-menu-item-color:          var(--kit-d-text-muted) !important;
    --vz-vertical-menu-item-hover-color:    var(--kit-d-heading) !important;
    --vz-vertical-menu-item-active-color:   var(--kit-d-brand) !important;
    --vz-vertical-menu-item-active-bg:      var(--kit-d-brand-subtle) !important;
    --vz-vertical-menu-sub-item-color:      var(--kit-d-text-muted) !important;
    --vz-vertical-menu-sub-item-hover-color:var(--kit-d-heading) !important;
    --vz-vertical-menu-sub-item-active-color: var(--kit-d-brand) !important;
    --vz-vertical-menu-title-color:         var(--kit-d-text-faint) !important;
    --vz-twocolumn-menu-iconview-bg:        var(--kit-d-sidebar) !important;
}

[data-bs-theme="dark"] .navbar-brand-box {
    background-color: var(--kit-d-sidebar) !important;
    border-color: var(--kit-d-sidebar) !important;
}

/* Componentes onde o Velzon hardcoda hex em vez de usar variável */
[data-bs-theme="dark"] body {
    background-color: var(--kit-d-bg) !important;
    color: var(--kit-d-text) !important;
}
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .accordion-item,
[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .offcanvas-md,
[data-bs-theme="dark"] .offcanvas-lg,
[data-bs-theme="dark"] .offcanvas-xl {
    background-color: var(--kit-d-surface) !important;
    border-color: var(--kit-d-border) !important;
}
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
    background-color: var(--kit-d-surface) !important;
    border-color: var(--kit-d-border) !important;
}
[data-bs-theme="dark"] .modal-content {
    background-color: var(--kit-d-surface) !important;
    border-color: var(--kit-d-border) !important;
}
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--kit-d-surface) !important;
    border-color: var(--kit-d-border) !important;
    --vz-dropdown-link-hover-bg: var(--kit-d-hover);
}
[data-bs-theme="dark"] .dropdown-item {
    color: var(--kit-d-text) !important;
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--kit-d-hover) !important;
    color: var(--kit-d-heading) !important;
}
[data-bs-theme="dark"] .dropdown-divider {
    border-top-color: var(--kit-d-border) !important;
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] textarea.form-control,
[data-bs-theme="dark"] input.form-control {
    background-color: var(--kit-d-raised) !important;
    border-color: var(--kit-d-border) !important;
    color: var(--kit-d-text) !important;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--kit-d-raised) !important;
    border-color: var(--kit-d-brand) !important;
    box-shadow: 0 0 0 0.15rem rgba(42, 163, 184, 0.25) !important;
    color: var(--kit-d-text) !important;
}
[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] .form-select option[disabled] {
    color: var(--kit-d-text-faint) !important;
}
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly] {
    background-color: var(--kit-d-bg) !important;
    color: var(--kit-d-text-muted) !important;
}
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--kit-d-surface) !important;
    border-color: var(--kit-d-border) !important;
    color: var(--kit-d-text) !important;
}
[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--kit-d-text);
    --bs-table-border-color: var(--kit-d-border);
    --bs-table-striped-bg: var(--kit-d-raised);
    --bs-table-striped-color: var(--kit-d-text);
    --bs-table-hover-bg: var(--kit-d-hover);
    --bs-table-hover-color: var(--kit-d-heading);
    color: var(--kit-d-text);
    border-color: var(--kit-d-border);
}
[data-bs-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent !important;
    color: var(--kit-d-text);
    border-bottom-color: var(--kit-d-border) !important;
}
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--kit-d-raised) !important;
}
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: var(--kit-d-hover) !important;
    color: var(--kit-d-heading);
}
[data-bs-theme="dark"] thead {
    color: var(--kit-d-heading) !important;
}
[data-bs-theme="dark"] .nav-tabs {
    border-bottom-color: var(--kit-d-border) !important;
}
[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: var(--kit-d-text-muted);
}
[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    color: var(--kit-d-heading);
    border-color: transparent;
}
[data-bs-theme="dark"] .nav-tabs-custom .nav-item .nav-link {
    color: var(--kit-d-text-muted);
}
[data-bs-theme="dark"] .page-title-box .page-title {
    color: var(--kit-d-heading) !important;
}
[data-bs-theme="dark"] .breadcrumb-item,
[data-bs-theme="dark"] .breadcrumb-item a {
    color: var(--kit-d-text-muted);
}
[data-bs-theme="dark"] .breadcrumb-item.active {
    color: var(--kit-d-heading);
}
[data-bs-theme="dark"] .pagination .page-link {
    background-color: var(--kit-d-surface) !important;
    border-color: var(--kit-d-border) !important;
    color: var(--kit-d-text) !important;
}
[data-bs-theme="dark"] .pagination .page-link:hover {
    background-color: var(--kit-d-raised) !important;
    color: var(--kit-d-heading) !important;
}
[data-bs-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--kit-d-brand) !important;
    border-color: var(--kit-d-brand) !important;
    color: #fff !important;
}
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--kit-d-surface) !important;
    border-color: var(--kit-d-border) !important;
    color: var(--kit-d-text) !important;
}
[data-bs-theme="dark"] .list-group-item-action:hover,
[data-bs-theme="dark"] .list-group-item-action:focus {
    background-color: var(--kit-d-raised) !important;
    color: var(--kit-d-heading) !important;
}
[data-bs-theme="dark"] .accordion-button {
    background-color: var(--kit-d-surface) !important;
    color: var(--kit-d-text) !important;
}
[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--kit-d-raised) !important;
    color: var(--kit-d-heading) !important;
}
[data-bs-theme="dark"] .accordion-body {
    background-color: var(--kit-d-surface) !important;
}
[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-light-subtle {
    background-color: var(--kit-d-raised) !important;
    color: var(--kit-d-text) !important;
}
[data-bs-theme="dark"] .bg-body,
[data-bs-theme="dark"] .bg-body-secondary {
    background-color: var(--kit-d-surface) !important;
}
[data-bs-theme="dark"] .bg-body-tertiary {
    background-color: var(--kit-d-raised) !important;
}
[data-bs-theme="dark"] hr {
    border-color: var(--kit-d-border) !important;
    opacity: 1;
}
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end {
    border-color: var(--kit-d-border) !important;
}
[data-bs-theme="dark"] a:not(.btn) {
    color: var(--kit-d-link);
}
[data-bs-theme="dark"] a:not(.btn):hover {
    color: var(--kit-d-link-hover);
}
[data-bs-theme="dark"] .text-muted {
    color: var(--kit-d-text-muted) !important;
}
[data-bs-theme="dark"] .text-body {
    color: var(--kit-d-text) !important;
}
[data-bs-theme="dark"] .text-body-secondary {
    color: var(--kit-d-text-muted) !important;
}
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .h1, [data-bs-theme="dark"] .h2, [data-bs-theme="dark"] .h3,
[data-bs-theme="dark"] .h4, [data-bs-theme="dark"] .h5, [data-bs-theme="dark"] .h6 {
    color: var(--kit-d-heading);
}
[data-bs-theme="dark"] #page-topbar {
    background-color: var(--kit-d-surface) !important;
    border-color: var(--kit-d-border) !important;
}
[data-bs-theme="dark"] .app-menu,
[data-bs-theme="dark"] [data-sidebar="dark"] .app-menu {
    background-color: var(--kit-d-sidebar) !important;
    border-color: var(--kit-d-border) !important;
}
[data-bs-theme="dark"] .vertical-menu,
[data-bs-theme="dark"] [data-sidebar="dark"] .vertical-menu {
    background-color: var(--kit-d-sidebar) !important;
}
[data-bs-theme="dark"] .footer {
    background-color: var(--kit-d-surface) !important;
    color: var(--kit-d-text-muted) !important;
    border-top: 1px solid var(--kit-d-border) !important;
}
[data-bs-theme="dark"] code {
    color: #e685b5 !important;
}
[data-bs-theme="dark"] pre {
    background-color: var(--kit-d-bg) !important;
    color: var(--kit-d-text) !important;
    border: 1px solid var(--kit-d-border) !important;
}
/* Plugins (Select2, Choices, Flatpickr) — bg da raised, borda do sistema */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple,
[data-bs-theme="dark"] .select2-dropdown,
[data-bs-theme="dark"] .choices__inner,
[data-bs-theme="dark"] .choices__list--dropdown,
[data-bs-theme="dark"] .choices[data-type*=select-one] .choices__inner,
[data-bs-theme="dark"] .flatpickr-calendar {
    background-color: var(--kit-d-raised) !important;
    border-color: var(--kit-d-border) !important;
    color: var(--kit-d-text) !important;
}
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-bs-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--kit-d-brand) !important;
    color: #fff !important;
}
[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--kit-d-text) !important;
}

/*
 * =====================================================================
 * Botões — overrides existentes (preservados)
 * =====================================================================
 * Em dark mode evitamos vermelho da marca em botões neutros (primary/secondary
 * não são ações destrutivas). Vermelho fica reservado para btn-danger/excluir.
 * Primary = branco sólido com texto escuro (alto contraste sobre fundo dark).
 * Secondary = transparente com borda clara, texto claro.
 * Outline-secondary = borda + texto cinza claro, hover preenche.
 */
[data-bs-theme="dark"] .btn-primary {
    --vz-btn-color: #1c1f2e !important;
    --vz-btn-bg: #ffffff !important;
    --vz-btn-border-color: #ffffff !important;
    --vz-btn-hover-color: #1c1f2e !important;
    --vz-btn-hover-bg: #e6e6e6 !important;
    --vz-btn-hover-border-color: #e6e6e6 !important;
    --vz-btn-active-color: #1c1f2e !important;
    --vz-btn-active-bg: #cfcfcf !important;
    --vz-btn-active-border-color: #cfcfcf !important;
    --vz-btn-disabled-color: #6c757d !important;
    --vz-btn-disabled-bg: #3a3f4f !important;
    --vz-btn-disabled-border-color: #3a3f4f !important;
}

[data-bs-theme="dark"] .btn-secondary {
    --vz-btn-color: #eff2f7 !important;
    --vz-btn-bg: transparent !important;
    --vz-btn-border-color: #adb5bd !important;
    --vz-btn-hover-color: #1c1f2e !important;
    --vz-btn-hover-bg: #eff2f7 !important;
    --vz-btn-hover-border-color: #eff2f7 !important;
    --vz-btn-active-color: #1c1f2e !important;
    --vz-btn-active-bg: #cfd4dd !important;
    --vz-btn-active-border-color: #cfd4dd !important;
    --vz-btn-disabled-color: #6c757d !important;
    --vz-btn-disabled-bg: transparent !important;
    --vz-btn-disabled-border-color: #495057 !important;
    border-width: 1px !important;
}

[data-bs-theme="dark"] .btn-outline-primary {
    --vz-btn-color: #ffffff !important;
    --vz-btn-bg: transparent !important;
    --vz-btn-border-color: #ffffff !important;
    --vz-btn-hover-color: #1c1f2e !important;
    --vz-btn-hover-bg: #ffffff !important;
    --vz-btn-hover-border-color: #ffffff !important;
    --vz-btn-active-color: #1c1f2e !important;
    --vz-btn-active-bg: #e6e6e6 !important;
    --vz-btn-active-border-color: #e6e6e6 !important;
    --vz-btn-disabled-color: #6c757d !important;
    --vz-btn-disabled-bg: transparent !important;
    --vz-btn-disabled-border-color: #3a3f4f !important;
}

[data-bs-theme="dark"] .btn-outline-secondary {
    --vz-btn-color: #ced4da !important;
    --vz-btn-bg: transparent !important;
    --vz-btn-border-color: #6c757d !important;
    --vz-btn-hover-color: #1c1f2e !important;
    --vz-btn-hover-bg: #ced4da !important;
    --vz-btn-hover-border-color: #ced4da !important;
    --vz-btn-active-color: #1c1f2e !important;
    --vz-btn-active-bg: #adb5bd !important;
    --vz-btn-active-border-color: #adb5bd !important;
    --vz-btn-disabled-color: #6c757d !important;
    --vz-btn-disabled-bg: transparent !important;
    --vz-btn-disabled-border-color: #3a3f4f !important;
}

/* ====================================================================
 * Utilitários do surface ladder.
 * Use a classe .surface-N quando o background do elemento PRECISAR ser
 * explicitamente um nível do ladder. A regra é simples: o filho fica
 * UM nível acima do pai. Detalhes no CLAUDE.md.
 * ==================================================================== */
.surface-0 { background-color: var(--kit-surface-0) !important; }
.surface-1 { background-color: var(--kit-surface-1) !important; }
.surface-2 { background-color: var(--kit-surface-2) !important; }
.surface-3 { background-color: var(--kit-surface-3) !important; }