/**
 * ==========================================================================
 * FENAJUD — Sistema de Temas (Light / Dark Mode)
 * ==========================================================================
 *
 * Identidade visual baseada no site https://fenajud.org.br
 * Cores primárias: Vermelho FENAJUD #E31E24, Dark #1A1A1A
 *
 * Modo DARK = padrão (data-theme="dark")
 * Modo LIGHT = alternativo (data-theme="light")
 *
 * @version 1.0.0
 */

/* ==========================================================================
   1. MODO DARK (Padrão) — Identidade FENAJUD com fundo escuro
   ========================================================================== */

[data-theme="dark"] {
    color-scheme: dark;

    /* --- Cores Primárias FENAJUD --- */
    --fenajud-red: #E31E24;
    --fenajud-red-dark: #B31015;
    --fenajud-red-light: #FF4B50;
    --fenajud-red-glow: rgba(227, 30, 36, 0.4);
    --fenajud-red-soft: rgba(227, 30, 36, 0.12);
    --fenajud-red-hover: rgba(227, 30, 36, 0.2);

    /* --- Gradientes FENAJUD --- */
    --gradient-primary: linear-gradient(135deg, #E31E24 0%, #B31015 100%);
    --gradient-primary-soft: linear-gradient(135deg, rgba(227, 30, 36, 0.15), rgba(179, 16, 21, 0.08));
    --gradient-accent: linear-gradient(135deg, #E31E24 0%, #FF6B6F 100%);
    --gradient-hero: linear-gradient(135deg, #1A1A1A 0%, #2D1012 50%, #1A1A1A 100%);

    /* --- Cores de Fundo --- */
    --bg-color: #0D0D0D;
    --sidebar-bg: #141414;
    --card-bg: rgba(30, 30, 30, 0.6);
    --topbar-bg: rgba(20, 20, 20, 0.85);
    --bg-hover: rgba(255, 255, 255, 0.04);

    /* --- Cores de Texto --- */
    --text-primary: #F5F5F5;
    --text-secondary: #A0A0A0;
    --text-muted: #666666;

    /* --- Cor de Destaque (accent) — VERMELHO FENAJUD --- */
    --accent-color: #E31E24;
    --accent-glow: rgba(227, 30, 36, 0.5);

    /* --- Borda e Glass --- */
    --border-color: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.1);

    /* --- Sombras --- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);

    /* --- Cores Semânticas --- */
    --success-color: #10B981;
    --danger-color: #EF4444;
    --warning-color: #F59E0B;
    --info-color: #0EA5E9;
    --purple-color: #A78BFA;

    /* --- Scrollbar --- */
    --scrollbar-thumb: rgba(227, 30, 36, 0.3);
    --scrollbar-hover: rgba(227, 30, 36, 0.5);

    /* --- Sindicalizado area overrides --- */
    --sind-primary: #E31E24;
    --sind-primary-soft: rgba(227, 30, 36, 0.12);
    --sind-primary-hover: rgba(227, 30, 36, 0.2);
    --sind-secondary: #FF6B6F;
    --sind-secondary-soft: rgba(255, 107, 111, 0.15);
    --sind-gradient: linear-gradient(135deg, #E31E24, #FF6B6F);
    --sind-bg: #0D0D0D;
    --sind-bg-card: rgba(30, 30, 30, 0.5);
    --sind-bg-card-hover: rgba(40, 40, 40, 0.6);
    --sind-border: rgba(255, 255, 255, 0.06);
    --sind-border-accent: rgba(227, 30, 36, 0.25);
    --sind-text: #F5F5F5;
    --sind-text-muted: rgba(255, 255, 255, 0.5);
    --sind-text-faint: rgba(255, 255, 255, 0.3);

    /* --- Auth overrides --- */
    --auth-bg: #080808;
    --auth-surface: rgba(20, 20, 20, 0.7);
    --auth-surface-border: rgba(255, 255, 255, 0.06);
    --auth-glass: rgba(255, 255, 255, 0.03);
    --auth-primary: #E31E24;
    --auth-primary-hover: #B31015;
    --auth-primary-glow: rgba(227, 30, 36, 0.35);
    --auth-secondary: #FF6B6F;
    --auth-text: #F5F5F5;
    --auth-text-muted: #A0A0A0;
    --auth-text-faint: rgba(255, 255, 255, 0.3);
    --auth-danger: #EF4444;
}


/* ==========================================================================
   2. MODO LIGHT — Identidade FENAJUD com fundo claro
   ========================================================================== */

[data-theme="light"] {
    color-scheme: light;

    /* --- Cores Primárias FENAJUD --- */
    --fenajud-red: #E31E24;
    --fenajud-red-dark: #B31015;
    --fenajud-red-light: #FF4B50;
    --fenajud-red-glow: rgba(227, 30, 36, 0.25);
    --fenajud-red-soft: rgba(227, 30, 36, 0.08);
    --fenajud-red-hover: rgba(227, 30, 36, 0.12);

    /* --- Gradientes FENAJUD --- */
    --gradient-primary: linear-gradient(135deg, #E31E24 0%, #B31015 100%);
    --gradient-primary-soft: linear-gradient(135deg, rgba(227, 30, 36, 0.08), rgba(179, 16, 21, 0.04));
    --gradient-accent: linear-gradient(135deg, #E31E24 0%, #FF6B6F 100%);
    --gradient-hero: linear-gradient(135deg, #FFFFFF 0%, #FFF5F5 50%, #FFFFFF 100%);

    /* --- Cores de Fundo --- */
    --bg-color: #F7F7F8;
    --sidebar-bg: #FFFFFF;
    --card-bg: rgba(255, 255, 255, 0.85);
    --topbar-bg: rgba(255, 255, 255, 0.9);
    --bg-hover: rgba(0, 0, 0, 0.03);

    /* --- Cores de Texto --- */
    --text-primary: #1A1A1A;
    --text-secondary: #a08585;
    --text-muted: #888888;

    /* --- Cor de Destaque (accent) --- */
    --accent-color: #E31E24;
    --accent-glow: rgba(227, 30, 36, 0.3);

    /* --- Borda e Glass --- */
    --border-color: rgba(0, 0, 0, 0.1);
    --glass-border: rgba(0, 0, 0, 0.08);

    /* --- Sombras --- */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    /* --- Cores Semânticas --- */
    --success-color: #059669;
    --danger-color: #DC2626;
    --warning-color: #D97706;
    --info-color: #0284C7;
    --purple-color: #7C3AED;

    /* --- Scrollbar --- */
    --scrollbar-thumb: rgba(227, 30, 36, 0.2);
    --scrollbar-hover: rgba(227, 30, 36, 0.4);

    /* --- Sindicalizado area overrides --- */
    --sind-primary: #E31E24;
    --sind-primary-soft: rgba(227, 30, 36, 0.08);
    --sind-primary-hover: rgba(227, 30, 36, 0.12);
    --sind-secondary: #B31015;
    --sind-secondary-soft: rgba(179, 16, 21, 0.08);
    --sind-gradient: linear-gradient(135deg, #E31E24, #B31015);
    --sind-bg: #F7F7F8;
    --sind-bg-card: rgba(255, 255, 255, 0.7);
    --sind-bg-card-hover: rgba(255, 255, 255, 0.9);
    --sind-border: rgba(0, 0, 0, 0.08);
    --sind-border-accent: rgba(227, 30, 36, 0.2);
    --sind-text: #1A1A1A;
    --sind-text-muted: rgba(0, 0, 0, 0.5);
    --sind-text-faint: rgba(0, 0, 0, 0.35);

    /* --- Auth overrides --- */
    --auth-bg: #F5F5F5;
    --auth-surface: rgba(255, 255, 255, 0.85);
    --auth-surface-border: rgba(0, 0, 0, 0.08);
    --auth-glass: rgba(0, 0, 0, 0.02);
    --auth-primary: #E31E24;
    --auth-primary-hover: #B31015;
    --auth-primary-glow: rgba(227, 30, 36, 0.2);
    --auth-secondary: #B31015;
    --auth-text: #1A1A1A;
    --auth-text-muted: #555555;
    --auth-text-faint: rgba(0, 0, 0, 0.3);
    --auth-danger: #DC2626;
}


/* ==========================================================================
   3. OVERRIDES VISUAIS — Elementos que precisam de ajuste no Light Mode
   ========================================================================== */

/* --- Body / Background --- */
[data-theme="light"] body {
    background-color: var(--bg-color);
    color: var(--text-primary);
}

[data-theme="light"] .sind-body {
    background: var(--bg-color);
    color: var(--text-primary);
}

/* --- Sidebar --- */
[data-theme="light"] .sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .nav-link-wrapper:hover {
    background: rgba(227, 30, 36, 0.05);
}

[data-theme="light"] .nav-link-wrapper.active {
    background: rgba(227, 30, 36, 0.08);
    color: var(--accent-color);
    box-shadow: inset 0 0 0 1px rgba(227, 30, 36, 0.15);
}

/* --- Header / Topbar --- */
[data-theme="light"] header {
    background: var(--topbar-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

/* --- Cards --- */
[data-theme="light"] .card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .card:hover {
    box-shadow: var(--shadow-md);
}

/* --- Tables --- */
[data-theme="light"] .table-container {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] tr:hover {
    background-color: rgba(227, 30, 36, 0.02);
}

[data-theme="light"] th {
    color: var(--text-secondary);
    border-bottom: 2px solid rgba(227, 30, 36, 0.15);
}

/* --- Inputs --- */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
    background-color: #FFFFFF;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.12);
}

/**
 * Options de select com cor explícita e alto contraste em ambos os temas.
 * A lista suspensa nativa é renderizada pelo sistema; sem essa regra o texto
 * herdava a cor do tema escuro (branco sobre fundo claro do sistema), ficando
 * ilegível. Usamos as variáveis do tema ativo para manter legibilidade.
 */
select option,
select optgroup {
    background-color: var(--bg-color, #FFFFFF);
    color: var(--text-primary, #1A1A1A);
}

select option:checked,
select option:hover,
select option:focus {
    background-color: var(--accent-color, #E31E24);
    color: #FFFFFF;
}

/* --- Modals --- */
[data-theme="light"] .modal-content {
    background-color: #FFFFFF;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .modal {
    background-color: rgba(0, 0, 0, 0.3);
}

/* --- Form containers --- */
[data-theme="light"] .form-container {
    background-color: #FFFFFF;
    border: 1px solid var(--border-color);
}

/* --- Filter bars --- */
[data-theme="light"] .filter-bar,
[data-theme="light"] .table-filters {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .filter-input,
[data-theme="light"] .filter-select {
    background: #FFFFFF;
    color: var(--text-primary);
}

/* --- Accordion --- */
[data-theme="light"] .accordion-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .accordion-item.active {
    border-color: var(--accent-color);
    background: rgba(227, 30, 36, 0.02);
}

[data-theme="light"] .accordion-item:hover {
    border-color: rgba(227, 30, 36, 0.3);
}

[data-theme="light"] .accordion-body {
    background: rgba(247, 247, 248, 0.5);
}

/* --- Badges --- */
[data-theme="light"] .badge-role {
    background: rgba(227, 30, 36, 0.08);
    color: #B31015;
    border: 1px solid rgba(227, 30, 36, 0.2);
}

[data-theme="light"] .badge-profile {
    background: rgba(227, 30, 36, 0.08);
    color: #B31015;
    border: 1px solid rgba(227, 30, 36, 0.2);
}

/* --- Logo icon --- */
[data-theme="dark"] .logo-icon,
[data-theme="light"] .logo-icon {
    background: var(--gradient-primary);
    box-shadow: 0 8px 16px rgba(227, 30, 36, 0.3);
}

/* --- User profile avatar --- */
[data-theme="dark"] .user-profile__avatar,
[data-theme="light"] .user-profile__avatar {
    border-color: rgba(227, 30, 36, 0.2);
}

[data-theme="light"] .user-profile__link:hover {
    background: rgba(227, 30, 36, 0.04);
    color: var(--accent-color);
}

[data-theme="light"] .user-profile__link:hover .user-profile__avatar {
    border-color: var(--accent-color);
}

/* --- Sidebar close button --- */
[data-theme="light"] .sidebar-close {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

/* --- Main content background radial --- */
[data-theme="dark"] .main-content {
    background: radial-gradient(circle at top right, rgba(227, 30, 36, 0.03), transparent 45%);
}

[data-theme="light"] .main-content {
    background: radial-gradient(circle at top right, rgba(227, 30, 36, 0.02), transparent 45%);
}

/* --- Scrollbar --- */
[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-hover);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-hover);
}


/* ==========================================================================
   4. TOPBAR DO SINDICALIZADO — Light Mode
   ========================================================================== */

[data-theme="light"] .sind-topbar {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .sind-topbar__brand-text {
    color: #1A1A1A;
}

[data-theme="light"] .sind-topbar__brand-tag {
    color: var(--accent-color);
}

[data-theme="light"] .sind-topbar__nav {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .sind-nav-link {
    color: var(--text-secondary);
}

[data-theme="light"] .sind-nav-link:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-primary);
}

[data-theme="light"] .sind-nav-link.active {
    background: rgba(227, 30, 36, 0.08);
    color: var(--accent-color);
    box-shadow: inset 0 0 0 1px rgba(227, 30, 36, 0.15);
}

[data-theme="light"] .sind-nav-dropdown.active>.sind-nav-dropdown__trigger {
    background: rgba(227, 30, 36, 0.08);
    color: var(--accent-color);
}

[data-theme="light"] .sind-nav-dropdown__menu {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .sind-nav-dropdown__item {
    color: var(--text-secondary);
}

[data-theme="light"] .sind-nav-dropdown__item:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-primary);
}

[data-theme="light"] .sind-nav-dropdown__item.active {
    background: rgba(227, 30, 36, 0.08);
    color: var(--accent-color);
}

[data-theme="light"] .sind-user-btn {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .sind-user-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .sind-user-name {
    color: var(--text-primary);
}

[data-theme="light"] .sind-user-wrapper {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .sind-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    color: var(--text-muted);
}

/* --- Stat cards (sindicalizado dashboard) --- */
[data-theme="light"] .sind-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .sind-stat-card:hover {
    border-color: rgba(227, 30, 36, 0.2);
}

[data-theme="light"] .sind-stat-info h3 {
    color: var(--text-primary);
}

[data-theme="light"] .sind-stat-info p {
    color: var(--text-muted);
}

/* --- Quick cards --- */
[data-theme="light"] .sind-quick-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .sind-quick-card:hover {
    border-color: rgba(227, 30, 36, 0.2);
    box-shadow: 0 12px 40px rgba(227, 30, 36, 0.06);
}

[data-theme="light"] .sind-quick-card h3 {
    color: var(--text-primary);
}

[data-theme="light"] .sind-quick-card p {
    color: var(--text-secondary);
}

/* --- Sind Cards --- */
[data-theme="light"] .sind-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .sind-card:hover {
    border-color: rgba(227, 30, 36, 0.15);
    background: var(--sind-bg-card-hover);
}

[data-theme="light"] .sind-card__title {
    color: var(--text-primary);
}

[data-theme="light"] .sind-card__value {
    color: var(--text-primary);
}


/* ==========================================================================
   5. AUTH PAGE — Light Mode
   ========================================================================== */

[data-theme="light"] body.auth-page {
    background: var(--auth-bg);
    color: var(--auth-text);
}

[data-theme="light"] .auth-bg__orb--1 {
    background: radial-gradient(circle, rgba(227, 30, 36, 0.15), transparent 70%);
}

[data-theme="light"] .auth-bg__orb--2 {
    background: radial-gradient(circle, rgba(179, 16, 21, 0.1), transparent 70%);
}

[data-theme="light"] .auth-bg__orb--3 {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.08), transparent 70%);
}

[data-theme="light"] .auth-card {
    background: var(--auth-surface);
    border: 1px solid var(--auth-surface-border);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .auth-field {
    background: rgba(247, 247, 248, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .auth-field:hover {
    border-color: rgba(0, 0, 0, 0.2);
    background: rgba(247, 247, 248, 0.95);
}

[data-theme="light"] .auth-field:focus-within {
    border-color: var(--auth-primary);
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(227, 30, 36, 0.08);
}

[data-theme="light"] .auth-field__input-wrapper input {
    color: var(--auth-text);
}

[data-theme="light"] .auth-hero {
    background: linear-gradient(135deg, rgba(227, 30, 36, 0.04) 0%, transparent 50%);
}

[data-theme="light"] .auth-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(247, 247, 248, 0.9) 100%);
    border-left: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .auth-hero__feature {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .auth-hero__feature:hover {
    background: rgba(0, 0, 0, 0.05);
}


/* ==========================================================================
   6. GUEST LAYOUT — Light Mode
   ========================================================================== */

[data-theme="light"] .guest-body {
    background-color: #F7F7F8;
    color: #1A1A1A;
}

[data-theme="light"] .guest-header {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .guest-nav a {
    color: #555555;
}

[data-theme="light"] .guest-nav a:hover {
    color: #E31E24;
}

[data-theme="light"] .guest-btn-login {
    background: rgba(227, 30, 36, 0.08) !important;
    color: #E31E24 !important;
    border: 1px solid rgba(227, 30, 36, 0.25);
}


/* ==========================================================================
   7. GRADIENTES EM BOTÕES — Aplica gradiente FENAJUD globalmenente
   ========================================================================== */

/* Botão primário — Gradiente FENAJUD */
.btn-primary {
    background: var(--gradient-primary) !important;
    color: white;
    border-color: rgba(227, 30, 36, 0.2);
    box-shadow: 0 8px 20px -6px var(--fenajud-red-glow);
}

.btn-primary:hover {
    box-shadow: 0 12px 24px -6px var(--fenajud-red-glow) !important;
    filter: brightness(1.1);
}

/* Botão de edição — vermelho suave */
.btn-edit {
    background: var(--fenajud-red-soft);
    color: var(--fenajud-red-light);
}

/* Botão de detalhes */
.btn-details {
    background: var(--fenajud-red-soft);
    color: var(--accent-color);
}

/* Botão de login na auth */
.auth-submit {
    background: var(--gradient-primary) !important;
    box-shadow: 0 8px 24px var(--fenajud-red-glow);
}

.auth-submit:hover {
    box-shadow: 0 12px 32px var(--fenajud-red-glow) !important;
}

/* Auth card title gradient */
.auth-card__title {
    background: var(--gradient-accent) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* Auth hero icon */
.auth-hero__icon,
.auth-card__logo-icon {
    background: var(--gradient-primary) !important;
    box-shadow: 0 16px 40px var(--fenajud-red-glow);
}

.auth-card__logo-icon::after {
    border: 1px solid rgba(227, 30, 36, 0.15);
}

.auth-hero__feature ion-icon {
    color: var(--accent-color) !important;
}


/* ==========================================================================
   8. GRADIENTES EM GRÁFICOS — Classes utilitárias para Chart.js
   ========================================================================== */

/* Cores para gráficos que usam inline styles (Chart.js) — documentação:
   Primário:   #E31E24 → #B31015 (gradiente)
   Secundário: #FF6B6F → #E31E24
   Terceiro:   #FF9A9D → #FF6B6F
*/


/* ==========================================================================
   9. OVERRIDES GLOBAIS FENAJUD — Substitui azul por vermelho em todo sistema
   ========================================================================== */

/* Nav link ativo */
.nav-link-wrapper.active {
    background: rgba(227, 30, 36, 0.1);
    color: var(--accent-color);
    box-shadow: inset 0 0 0 1px rgba(227, 30, 36, 0.2);
}

.submenu-link:hover,
.submenu-link.active {
    color: var(--accent-color);
}

/* Focus state inputs */
input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(227, 30, 36, 0.15);
}

/* Section link */
.section-link {
    color: var(--accent-color);
}

/* Stat card bar — gradiente FENAJUD */
.stat-card__bar {
    background: var(--gradient-primary);
}

/* Stat card circle */
.stat-card__circle {
    background: var(--accent-color);
}

/* Accordion hover */
.accordion-item:hover {
    border-color: rgba(227, 30, 36, 0.4);
}

.accordion-item.active {
    border-color: var(--accent-color);
}

.accordion-item.active .acc-arrow {
    color: var(--accent-color);
}

.acc-id {
    color: var(--accent-color);
}

.detail-item label {
    color: var(--accent-color);
}

/* Month group header icon */
.month-group-header ion-icon {
    color: var(--accent-color);
}

/* Limit button active */
.limit-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

/* Page button hover */
.page-btn:hover {
    background: var(--accent-color);
}

/* Simulador hero icon */
.simulador-hero__icon {
    background: var(--gradient-primary);
    box-shadow: 0 12px 32px -8px rgba(227, 30, 36, 0.4);
}

/* Simulador hero title */
.simulador-hero__title {
    background: linear-gradient(to right, var(--text-primary), var(--accent-color));
    -webkit-background-clip: text;
    background-clip: text;
}

/* Estado card */
.estado-card:hover {
    border-color: rgba(227, 30, 36, 0.35);
    box-shadow: 0 12px 28px -8px rgba(227, 30, 36, 0.15);
}

.estado-card:focus-visible {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.3);
}

.estado-card.selected {
    border-color: var(--accent-color);
    background: var(--gradient-primary-soft);
    box-shadow: 0 0 0 1px var(--accent-color), 0 12px 28px -8px rgba(227, 30, 36, 0.25);
}

.estado-card.selected .estado-card__check {
    background: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(227, 30, 36, 0.4);
}

.estado-card__sigla {
    background: var(--fenajud-red-soft);
    color: var(--accent-color);
}

.estado-card.selected .estado-card__sigla {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: 0 6px 16px -4px rgba(227, 30, 36, 0.4);
}

/* Selecao toggle active */
.selecao-toggle-btn.active {
    background: rgba(227, 30, 36, 0.15);
    color: var(--accent-color);
}

/* Text gradient */
.text-gradient {
    background: linear-gradient(135deg, #E31E24 0%, #FF6B6F 50%, #B31015 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Sind dashboard hero gradient text */
.sind-dashboard-hero h1 span {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Sind quick card icon backgrounds */
.sind-quick-card__icon--blue {
    background: var(--gradient-primary);
}

.sind-quick-card__icon--purple {
    background: linear-gradient(135deg, #FF6B6F, #E31E24);
}

.sind-quick-card__arrow {
    color: var(--accent-color);
}

/* Sind stat icon */
.sind-stat-icon--blue {
    background: linear-gradient(135deg, rgba(227, 30, 36, 0.3), rgba(227, 30, 36, 0.1));
}

.sind-stat-icon--purple {
    background: linear-gradient(135deg, rgba(255, 107, 111, 0.3), rgba(255, 107, 111, 0.1));
}

/* Sind card badge */
.sind-card__badge {
    background: linear-gradient(135deg, rgba(227, 30, 36, 0.2), rgba(255, 107, 111, 0.15));
}

.sind-card__badge ion-icon {
    color: var(--accent-color);
}

/* Sind UF badge */
.sind-uf-badge {
    background: linear-gradient(135deg, rgba(227, 30, 36, 0.2), rgba(255, 107, 111, 0.15));
    color: var(--accent-color);
}

/* Sind accordion toggle */
.sind-accordion-toggle {
    background: var(--fenajud-red-soft);
    color: var(--accent-color);
}

.sind-accordion-toggle:hover {
    background: var(--fenajud-red-hover);
}

/* Sind user avatar */
.sind-user-avatar {
    background: var(--gradient-primary);
}

/* Sind logout button */
.sind-logout-btn {
    background: rgba(227, 30, 36, 0.1);
    color: var(--fenajud-red-light);
    border: 1px solid rgba(227, 30, 36, 0.15);
}

.sind-logout-btn:hover {
    background: #E31E24;
    color: white;
}

/* Row highlight */
.row-highlight {
    background-color: rgba(227, 30, 36, 0.04) !important;
}

.row-highlight td:first-child {
    border-left: 4px solid var(--accent-color);
}

.row-highlight:hover {
    background-color: rgba(227, 30, 36, 0.07) !important;
}

/* Guest link */
.guest-btn-login {
    background: rgba(227, 30, 36, 0.1);
    color: #E31E24 !important;
    border: 1px solid rgba(227, 30, 36, 0.3);
}

.guest-nav a:hover {
    color: #E31E24;
}

/* Landing page blobs */
.blob-1 {
    background: radial-gradient(circle, rgba(227, 30, 36, 0.15) 0%, rgba(227, 30, 36, 0) 70%);
}

.blob-2 {
    background: radial-gradient(circle, rgba(179, 16, 21, 0.1) 0%, rgba(179, 16, 21, 0) 70%);
}

/* Hero highlight */
.hero .highlight {
    background: linear-gradient(90deg, #E31E24, #FF6B6F);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Card footer link */
.card-footer-link {
    color: var(--accent-color);
}

/* Stat icon wrapper */
.stat-icon {
    background: rgba(227, 30, 36, 0.1);
}

/* btn-primary landing */
[data-theme="dark"] .btn-primary {
    box-shadow: 0 4px 15px rgba(227, 30, 36, 0.4);
}


/* ==========================================================================
   10. BOTÃO DE TOGGLE DE TEMA
   ========================================================================== */

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-hover);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: var(--fenajud-red-soft);
    border-color: rgba(227, 30, 36, 0.3);
    color: var(--accent-color);
    transform: scale(1.05);
}

.theme-toggle:active {
    transform: scale(0.95);
}

.theme-toggle ion-icon {
    font-size: 1.3rem;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-toggle:hover ion-icon {
    transform: rotate(20deg);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    position: absolute;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="dark"] .theme-toggle .icon-sun {
    opacity: 1;
    transform: rotate(0deg);
}

[data-theme="dark"] .theme-toggle .icon-moon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

[data-theme="light"] .theme-toggle .icon-sun {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

[data-theme="light"] .theme-toggle .icon-moon {
    opacity: 1;
    transform: rotate(0deg);
}

/* --- Mobile bottom nav adjustments --- */
[data-theme="light"] .sind-bottom-nav {
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .sind-bottom-nav__item {
    color: var(--text-muted);
}

[data-theme="light"] .sind-bottom-nav__item.active {
    color: var(--accent-color);
}

[data-theme="light"] .sind-bottom-nav__menu {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
}

/* --- Simulador components Light Mode --- */
[data-theme="light"] .selecao-busca__input {
    background: rgba(255, 255, 255, 0.8);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="light"] .selecao-busca__input:focus {
    background: #FFFFFF;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.1);
}

[data-theme="light"] .regiao-acordeao {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .estado-mini-card {
    background: rgba(255, 255, 255, 0.6);
    border: 1.5px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .estado-mini-card:hover {
    background: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .selecao-preview {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(227, 30, 36, 0.2);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .mapa-tooltip {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* --- Simulador spinner --- */
.simulador-spinner {
    border: 3px solid rgba(227, 30, 36, 0.15);
    border-top-color: var(--accent-color);
}

/* --- Selecao busca focus --- */
.selecao-busca__input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.15);
}


/* ==========================================================================
   11. TRANSIÇÃO SUAVE DE TEMA
   ========================================================================== */

html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.4s ease,
        color 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        background 0.4s ease !important;
}