/* ══════════════════════════════════════════
       TEMA DARK  — altere aqui as cores escuras
    ══════════════════════════════════════════ */
    [data-bs-theme="dark"] {
      --t-bg:      #0f1117;
      --t-surface: #161b27;
      --t-surface2:#1e2436;
      --t-border:  #252d3d;
      --t-accent:  #4f7dff;
      --t-accent2: #00d4a4;
      --t-accent3: #ff6b6b;
      --t-accent4: #ffb347;
      --t-text:    #e2e8f0;
      --t-muted:   #6b7a99;

      /* ── FONTES ── altere aqui para o tema escuro */
      --t-font-body:    'DM Sans', sans-serif;   /* texto geral, nav, labels     */
      --t-font-heading: 'DM Sans', sans-serif;   /* títulos, cabeçalhos          */
      --t-font-mono:    'Space Mono', monospace; /* valores numéricos, badges    */
      --t-font-ui:      'DM Sans', sans-serif;   /* botões, inputs, breadcrumbs  */

      /* Mapeia tokens nativos do Bootstrap */
      --bs-body-font-family:  var(--t-font-body);
      --bs-body-bg:           var(--t-bg);
      --bs-body-color:        var(--t-text);
      --bs-border-color:      var(--t-border);
      --bs-tertiary-bg:       var(--t-surface2);
      --bs-secondary-color:   var(--t-muted);
      --bs-secondary-bg:      var(--t-surface2);
      --bs-emphasis-color:    var(--t-text);
    }

    /* ══════════════════════════════════════════
       TEMA LIGHT — altere aqui as cores claras
    ══════════════════════════════════════════ */
    [data-bs-theme="light"] {
      --t-bg:      #f0f2f5;
      --t-surface: #ffffff;
      --t-surface2:#f4f6f9;
      --t-border:  #e2e6ea;
      --t-accent:  #3b6ef0;
      --t-accent2: #00b589;
      --t-accent3: #e84646;
      --t-accent4: #d98700;
      --t-text:    #1a1f2e;
      --t-muted:   #6c757d;

      /* ── FONTES ── altere aqui para o tema claro */
      --t-font-body:    'DM Sans', sans-serif;   /* texto geral, nav, labels     */
      --t-font-heading: 'DM Sans', sans-serif;   /* títulos, cabeçalhos          */
      --t-font-mono:    'Space Mono', monospace; /* valores numéricos, badges    */
      --t-font-ui:      'DM Sans', sans-serif;   /* botões, inputs, breadcrumbs  */

      /* Mapeia tokens nativos do Bootstrap */
      --bs-body-font-family:  var(--t-font-body);
      --bs-body-bg:           var(--t-bg);
      --bs-body-color:        var(--t-text);
      --bs-border-color:      var(--t-border);
      --bs-tertiary-bg:       var(--t-surface2);
      --bs-secondary-color:   var(--t-muted);
      --bs-secondary-bg:      var(--t-surface2);
      --bs-emphasis-color:    var(--t-text);
    }

    /* ══════════════════════════════════════════
       ESTILOS COMUNS — não precisa alterar
    ══════════════════════════════════════════ */

    /* Base */
    body { font-family: var(--t-font-body); background: var(--t-bg); color: var(--t-text); }

    /* Títulos e cabeçalhos */
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6,
    .card-header, .card-title,
    .fw-semibold, .fw-bold { font-family: var(--t-font-heading); }

    /* Elementos de interface — botões, inputs, selects, labels */
    button, input, select, textarea, .btn,
    .form-control, .form-select, .form-label,
    .nav-link, .dropdown-item, .breadcrumb-item,
    .badge, .alert, .offcanvas-title { font-family: var(--t-font-ui); }

    /* Valores numéricos e monospace */
    .card .fw-bold.fs-5,
    .font-monospace,
    code, kbd, pre { font-family: var(--t-font-mono) !important; }

    /* Sidebar */
    #sidebar { background: var(--t-surface); border-color: var(--t-border); }
    #sidebar hr { border-color: var(--t-border); opacity: 1; }
    .sidebar-brand .bg-primary {
      background: linear-gradient(135deg, var(--t-accent), #7c5cfc) !important;
      border-radius: 10px; width: 28px; height: 28px;
    }
    .sidebar-brand-text { color: var(--t-text); }
    #sidebar .nav-link { color: var(--t-muted); border-radius: 10px; font-size: 14px; font-weight: 500; transition: all .2s; }
    #sidebar .nav-link:hover  { background: var(--t-surface2); color: var(--t-text); }
    #sidebar .nav-link.active { background: color-mix(in srgb, var(--t-accent) 14%, transparent); color: var(--t-accent); }
    #sidebar .sidebar-label   { color: var(--t-muted); }

    /* User dropdown no sidebar */
    #userDropdown .avatar { background: linear-gradient(135deg, var(--t-accent2), #0ea5e9) !important; }
    #userDropdown .sidebar-brand-text { color: var(--t-text); }
    #userDropdown .dropdown-menu { --bs-dropdown-bg: var(--t-surface); --bs-dropdown-border-color: var(--t-border); --bs-dropdown-link-color: var(--t-muted); --bs-dropdown-link-hover-bg: var(--t-surface2); --bs-dropdown-link-hover-color: var(--t-text); --bs-dropdown-divider-bg: var(--t-border); }

    /* Navbar */
    .navbar { background: var(--t-surface) !important; border-color: var(--t-border) !important; }
    .navbar .input-group-text { background: var(--t-surface2); border-color: var(--t-border); color: var(--t-muted); }
    .navbar .form-control { background: var(--t-surface2); border-color: var(--t-border); color: var(--t-text); }
    .navbar .form-control::placeholder { color: var(--t-muted); }

    /* Cards */
    .card { background: var(--t-surface); border-color: var(--t-border); border-radius: 5px; transition: transform .2s, border-color .2s; }
    .card:hover { transform: translateY(-0px); border-color: color-mix(in srgb, var(--t-accent) 40%, transparent); }
    .card-header { background: transparent; border-color: var(--t-border); }

    /* Linha de cor no topo dos stat cards */
    .col-lg-3 .card { position: relative; overflow: hidden; }
    .col-lg-3 .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 12px 12px 0 0; }
    .col-lg-3:nth-child(1) .card::before { background: linear-gradient(90deg, var(--t-accent),  #7c5cfc); }
    .col-lg-3:nth-child(2) .card::before { background: linear-gradient(90deg, var(--t-accent2), #0ea5e9); }
    .col-lg-3:nth-child(3) .card::before { background: linear-gradient(90deg, var(--t-accent3), #ff9f43); }
    .col-lg-3:nth-child(4) .card::before { background: linear-gradient(90deg, var(--t-accent4), #f9ca24); }
    .card .fw-bold.fs-5 { font-family: var(--t-font-mono); }

    /* Ícones dos stat cards */
    .card .bg-primary.bg-opacity-10 { background: color-mix(in srgb, var(--t-accent)  14%, transparent) !important; color: var(--t-accent)  !important; }
    .card .bg-success.bg-opacity-10 { background: color-mix(in srgb, var(--t-accent2) 14%, transparent) !important; color: var(--t-accent2) !important; }
    .card .bg-warning.bg-opacity-10 { background: color-mix(in srgb, var(--t-accent4) 14%, transparent) !important; color: var(--t-accent4) !important; }
    .card .bg-info.bg-opacity-10    { background: color-mix(in srgb, #38bdf8 14%, transparent)           !important; color: #38bdf8          !important; }

    /* Table */
    .table { --bs-table-color: var(--t-text); --bs-table-border-color: var(--t-border); --bs-table-striped-bg: var(--t-surface2); --bs-table-hover-bg: color-mix(in srgb, var(--t-muted) 6%, transparent); }
    .table th { color: var(--t-muted); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; }
    .table tr { color: var(--t-muted); font-size: 14px; letter-spacing: .3px; }
    .table-light { --bs-table-bg: var(--t-surface2); color: var(--t-muted); }
    .table > :not(caption) > * > * { background: transparent; }

    /* Badges de status */
    .text-bg-success { background: color-mix(in srgb, var(--t-accent2) 14%, transparent) !important; color: var(--t-accent2) !important; }
    .text-bg-warning { background: color-mix(in srgb, var(--t-accent4) 14%, transparent) !important; color: var(--t-accent4) !important; }
    .text-bg-danger  { background: color-mix(in srgb, var(--t-accent3) 14%, transparent) !important; color: var(--t-accent3) !important; }

    /* Progress */
    .progress { --bs-progress-bg: var(--t-surface2); }

    /* Tabs */
    .nav-tabs { --bs-nav-tabs-border-color: var(--t-border); --bs-nav-tabs-link-active-border-color: var(--t-border) var(--t-border) var(--t-surface); --bs-nav-tabs-link-active-color: var(--t-text); --bs-nav-tabs-link-active-bg: transparent; }
    .nav-tabs .nav-link { color: var(--t-muted); }

    /* List group */
    .list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--t-border); --bs-list-group-color: var(--t-text); }

    /* Accordion */
    .accordion { --bs-accordion-bg: var(--t-surface); --bs-accordion-border-color: var(--t-border); --bs-accordion-btn-color: var(--t-text); --bs-accordion-btn-bg: var(--t-surface); --bs-accordion-active-bg: var(--t-surface2); --bs-accordion-active-color: var(--t-accent); --bs-accordion-body-color: var(--t-muted); }
    .accordion-button:focus { box-shadow: none; }

    /* Alert */
    .alert-warning { --bs-alert-bg: color-mix(in srgb, var(--t-accent4) 10%, transparent); --bs-alert-border-color: color-mix(in srgb, var(--t-accent4) 30%, transparent); --bs-alert-color: var(--t-accent4); }

    /* Offcanvas */
    .offcanvas { --bs-offcanvas-bg: var(--t-surface); --bs-offcanvas-border-color: var(--t-border); --bs-offcanvas-color: var(--t-text); }
    .offcanvas .form-select { background-color: var(--t-surface2); border-color: var(--t-border); color: var(--t-text); }
    .offcanvas .form-check-input:checked { background-color: var(--t-accent); border-color: var(--t-accent); }

    /* Dropdowns genéricos */
    .dropdown-menu { --bs-dropdown-bg: var(--t-surface); --bs-dropdown-border-color: var(--t-border); --bs-dropdown-link-color: var(--t-muted); --bs-dropdown-link-hover-bg: var(--t-surface2); --bs-dropdown-link-hover-color: var(--t-text); --bs-dropdown-header-color: var(--t-text); --bs-dropdown-divider-bg: var(--t-border); }

    /* Footer */
    footer { background: var(--t-surface); border-color: var(--t-border) !important; }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--t-border); border-radius: 4px; }

    /* Animações */
    @keyframes t-fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
    .col-lg-3:nth-child(1) .card { animation: t-fadeUp .4s ease .05s both; }
    .col-lg-3:nth-child(2) .card { animation: t-fadeUp .4s ease .10s both; }
    .col-lg-3:nth-child(3) .card { animation: t-fadeUp .4s ease .15s both; }
    .col-lg-3:nth-child(4) .card { animation: t-fadeUp .4s ease .20s both; }





select:invalid {
    color: var(--t-muted);
}



/* Quando o select tem uma opção válida selecionada, fica preto */
select:valid {
  color: #fff; /* Cor preta padrão */
}






/* 1. ESTADO FECHADO: Quando o valor vazio está selecionado */
select:has(option[value=""]:checked) {
  color: var(--t-muted) !important;
}

/* 2. ESTADO ABERTO: Estiliza especificamente a opção vazia na lista */
select option[value=""] {
  color: var(--t-muted) !important;
}

/* 3. RESET: Garante que todas as outras opções (com valor) sejam pretas */
select option:not([value=""]) {
  color: #fff !important;
}

/* 4. ESTADO SELECIONADO (VALOR REAL): Quando qualquer opção com texto está ativa */
select:not(:has(option[value=""]:checked)) {
  color: #fff !important;
}