html[data-theme="dark"] {
    --accent: #099AD7;
    --primary-color: color-mix(in srgb, var(--accent) 50%, #fff);
    --primary-fill: var(--accent);
    --header-bg: linear-gradient(160deg, color-mix(in srgb, var(--accent) 70%, #374459), color-mix(in srgb, var(--accent) 30%, #242e47));
    --table-header-bg: var(--accent);

    --bg-color: #232a33;
    --card-bg: #2c343e;
    --input-bg: #323b46;
    --ss: #353f4a;
    --row-stripe: #2f3842;

    --border-color: #3a444f;
    --search-border: #404b57;

    --text-color: #9aa5b0;
    --text-color-muted: #e6eaef;
    --input-text: #f1f3f5;

    --danger-color: #f0655f;
    --warning-color: #ffc861;
    --success-color: #5ec47f;

    --nav-active-bg: color-mix(in srgb, var(--primary-color) 20%, #2c343e);
    --tile-bg: color-mix(in srgb, var(--primary-color) 22%, #2c343e);
    --avatar-bg: color-mix(in srgb, var(--primary-color) 24%, #2c343e);

    --chip-bg: #353f4b;
    --chip-text: #abb6c1;

    --card-shadow: 0 1px 2px rgba(0,0,0,.2);
    --card-shadow-hover: 0 6px 20px rgba(0,0,0,.35);

    --r-card: 14px;
    --r-input: 12px;
    --r-pill: 32px;
    --r-nav: 10px;
    --r-icon: 10px;
}

/* Radzen textbox/textarea — force dark colors when Radzen's own CSS overrides variables */
html[data-theme="dark"] .rz-textbox,
html[data-theme="dark"] .rz-textbox:hover,
html[data-theme="dark"] .rz-textbox:focus {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .rz-textbox::placeholder {
    color: var(--text-color) !important;
    opacity: 1;
}
html[data-theme="dark"] textarea.rz-textbox,
html[data-theme="dark"] textarea.rz-textbox:hover,
html[data-theme="dark"] textarea.rz-textbox:focus {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] textarea.rz-textbox::placeholder {
    color: var(--text-color) !important;
    opacity: 1;
}
html[data-theme="dark"] .rz-textarea {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--r-input) !important;
    box-shadow: none !important;
    color: var(--input-text) !important;
}
html[data-theme="dark"] .rz-textarea textarea {
    background-color: transparent !important;
    color: var(--input-text) !important;
    border: none !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .rz-textarea textarea::placeholder {
    color: var(--text-color) !important;
    opacity: 1;
}

/* Radzen dropdown / multiselect / numeric / datepicker — dark theme
   (alinha com o padrão dos inputs: .rz-textbox/.rz-textarea acima) */
html[data-theme="dark"] .rz-dropdown,
html[data-theme="dark"] .rz-dropdown:hover,
html[data-theme="dark"] .rz-dropdown.rz-state-focused,
html[data-theme="dark"] .rz-numeric,
html[data-theme="dark"] .rz-datepicker,
html[data-theme="dark"] .rz-spinner {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .rz-dropdown .rz-dropdown-label,
html[data-theme="dark"] .rz-numeric .rz-inputtext,
html[data-theme="dark"] .rz-datepicker .rz-inputtext,
html[data-theme="dark"] .rz-spinner .rz-inputtext {
    background-color: transparent !important;
    color: var(--input-text) !important;
}

/* Popups (dropdown/multiselect/datepicker) — fundo escuro, não branco */
html[data-theme="dark"] .rz-popup,
html[data-theme="dark"] .rz-dropdown-panel,
html[data-theme="dark"] .rz-multiselect-panel,
html[data-theme="dark"] .rz-datepicker-panel,
html[data-theme="dark"] .rz-datepicker-calendar {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}
/* Texto das opções: usa o token de texto forte (mesmo dos labels), não o "muted",
   para manter contraste e coerência com o restante do formulário no dark. */
html[data-theme="dark"] .rz-dropdown-item,
html[data-theme="dark"] .rz-multiselect-item,
html[data-theme="dark"] .rz-multiselect-header {
    color: var(--text-color-muted) !important;
    background-color: transparent !important;
}
html[data-theme="dark"] .rz-dropdown-item:hover,
html[data-theme="dark"] .rz-multiselect-item:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}
/* Item selecionado/realçado: fundo com o accent sólido (--primary-fill) garante
   contraste suficiente com o texto branco — o --primary-color é claro demais. */
html[data-theme="dark"] .rz-dropdown-item.rz-state-highlight,
html[data-theme="dark"] .rz-multiselect-item.rz-state-highlight {
    background-color: var(--primary-fill) !important;
    color: #fff !important;
}
/* Filtro de busca dentro do popup */
html[data-theme="dark"] .rz-dropdown-filter,
html[data-theme="dark"] .rz-multiselect-filter {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border: 1px solid var(--border-color) !important;
}