/* 1. Vari�veis - Tema Claro */
:root {
    --color-bg: #ffffff;
    --color-bg-alt: #ffffff;
    --color-surface: #ffffff;
    --color-surface-alt: #f0f2f5;
    --color-surface-strong: #fff;
    --color-border: #D1D5DB;
    --color-text: #1f2329;
    --color-text-muted: #636b74;
    --color-text-invert: #000;
    --color-accent: #000000;
    --color-accent-hover: #cccccc;
    --color-accent-active: #F2F2F2;
    --color-danger: #ff2f2f;
    --sidebar-bg: #F9FAFB;
    --sidebar-text: #374151;
    --sidebar-item: #374151;
    --sidebar-item-hover-bg: rgba(255,255,255,.08);
    --sidebar-item-active-bg: #0EA5E9;
    --sidebar-item-active-text: white;
    --focus-ring: 0 0 0 3px rgba(255,255,255,.5);
    --transition-fast: .18s;
    --transition-medium: .35s;
    --shadow-elev-1: 0 1px 2px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.12);
    --shadow-elev-1-dark: 0 1px 2px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.65);
    --banner-bg: #000000;
    --banner-text: #ffffff;
    --card-accent: #000000;
    --card-bg: #ffffff;
    --card-text: #222222;
    --card-shadow: inset 0 -1px 0 rgba(0,0,0,0.05), 0 6px 16px rgba(0, 0, 0, 0.15);
    --card-shadow-hover: inset 0 -1px 0 rgba(0,0,0,0.08), 0 8px 20px rgba(0,0,0,0.25);
    --calendar-text: #333;
    --filtro-bg: #ffffff;
    --filtro-text: #222222;
    /* Raio padrão */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 22px;
}

.font-work {
    font-family: "Work Sans", sans-serif !important;
}

/* 2. Overrides - Tema Escuro */
html.dark-mode {
    --color-bg: #121212;
    --color-bg-alt: #18181b;
    --color-surface: #1e1e23;
    --color-surface-alt: #24242a;
    --color-border: #303036;
    --color-text: #e5e5e8;
    --color-text-muted: #a0a4ab;
    --color-accent: #000000;
    --color-accent-hover: rgba(255,255,255,.08);
    --color-accent-active: #F2F2F2;
    --sidebar-bg: #18181b;
    --sidebar-text: #ffffff;
    --sidebar-item: #cccccc;
    --sidebar-item-active-bg: #0EA5E9;
    --sidebar-item-active-text: white;
    --shadow-elev-1: var(--shadow-elev-1-dark);
    --banner-bg: #1e1e1e;
    --banner-text: #fafafa;
    --card-accent: #ffc107;
    --card-bg: #242424;
    --card-text: #e0e0e0;
    --card-shadow: inset 0 -1px 0 rgba(255,255,255,0.05), 0 6px 16px rgba(0,0,0,0.6);
    --card-shadow-hover: inset 0 -1px 0 rgba(255,255,255,0.08), 0 10px 24px rgba(0,0,0,0.7);
    --calendar-text: #d0d0d0;
    --filtro-bg: #2b2b2b;
    --filtro-text: #e0e0e0;
}

/* 3. Base */
html, body {
    background: var(--color-bg);
    color: var(--color-text);
    transition: background-color var(--transition-medium) ease, color var(--transition-medium) ease;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body, .main-content, .e-app-mainpage {
    background: var(--color-bg);
    color: var(--color-text);
}

/* 4. Sidebar */
#plannerSiderBar {
    background: var(--sidebar-bg) !important;
    color: var(--sidebar-text) !important;
    transition: background-color var(--transition-medium), color var(--transition-medium);
}

    #plannerSiderBar .sidebar-item {
        color: var(--sidebar-item) !important;
        border-radius: 6px;
        transition: background-color var(--transition-fast), color var(--transition-fast);
    }

        #plannerSiderBar .sidebar-item:hover {
            background: var(--sidebar-item-hover-bg);
        }

        #plannerSiderBar .sidebar-item.active,
        #plannerSiderBar .sidebar-item.active:hover {
            background: var(--sidebar-item-active-bg) !important;
            color: var(--sidebar-item-active-text) !important;
        }

    #plannerSiderBar .info .name {
        color: var(--sidebar-text);
    }

    #plannerSiderBar .info .user-type {
        color: var(--color-text-muted);
    }

/* Botões do tema */
.btn, .sidebar-toggle, .theme-toggle, .btnFiltro {
    background: var(--color-accent);
    color: var(--color-text-invert);
    border: none;
    transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
    cursor: pointer;
}

    /* Restrito às classes de botão do tema (remove o 'button:hover' genérico) */
    .btn:hover, .sidebar-toggle:hover, .theme-toggle:hover, .btnFiltro:hover {
        background: var(--color-accent-hover);
    }

    .btn:active, .sidebar-toggle:active, .theme-toggle:active, .btnFiltro:active {
        background: var(--color-accent-active);
    }

    /* Mantém o foco visível de forma ampla (opcional) */
    button:focus-visible,
    .btn:focus-visible,
    .sidebar-toggle:focus-visible,
    .theme-toggle:focus-visible,
    .btnFiltro:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
    }

/* 6. Superf�cies / Cards / Cont�ineres */
.card,
.e-card,
.e-dialog,
.e-popup,
.e-calendar,
.e-listview,
.e-grid,
.e-toolbar,
.e-appbar,
.infoCard,
.cardCompromisso {
    background: var(--color-surface);
    color: var(--color-text);
    transition: background-color var(--transition-medium), color var(--transition-medium), box-shadow var(--transition-medium);
    box-shadow: var(--shadow-elev-1);
    border-color: var(--color-border) !important;
}

/* Ajustes espec�ficos Syncfusion (ex.: cabe�alhos em dark) */
html.dark-mode .e-calendar .e-header,
html.dark-mode .e-toolbar {
    background: var(--color-surface-alt) !important;
}

/* 7. Links e texto suplementar */
a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

    a:hover {
        /* usar uma variação do accent para texto, não um branco translúcido */
        color: color-mix(in srgb, var(--color-accent) 85%, var(--color-text) 15%);
    }

/* 8. Estados de erro / feedback */
.field-error .error-content .e-error {
    color: var(--color-danger);
}

/* 9. Scrollbar (webkit) somente dark (opcional) */
html.dark-mode *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html.dark-mode *::-webkit-scrollbar-track {
    background: var(--color-bg-alt);
}

html.dark-mode *::-webkit-scrollbar-thumb {
    background: #444a55;
    border-radius: 20px;
    border: 2px solid var(--color-bg-alt);
}

    html.dark-mode *::-webkit-scrollbar-thumb:hover {
        background: #555d69;
    }

/* 10. Utilidades (para trocar elementos por tema) */
.light-only {
    display: initial;
}

.dark-only {
    display: none;
}

html.dark-mode .light-only {
    display: none !important;
}

html.dark-mode .dark-only {
    display: initial !important;
}

/* 11. Transi��es suaves em elementos cr�ticos */
.sidebar-toggle,
.theme-toggle,
.sidebar-item,
.card,
.e-card,
.infoCard,
.cardCompromisso {
    will-change: background-color, color, box-shadow;
}

/* 12. (Opcional) Auto prefer-color-scheme
@media (prefers-color-scheme: dark) {
  :root:not(.force-light) body:not(.force-light) { }
}
*/

/* 13. Safe guard: remover outline agressivo inicial */
:focus {
    outline-color: var(--color-accent);
}

.e-toolbar {
    box-shadow: none !important;
}

/* Keyframes para animações */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}