﻿/* =========================================================
   ECISO - Tema Claro / Escuro / Automático
   ========================================================= */

:root {
    color-scheme: light;
    --eciso-page-bg: #f2f2f2;
    --eciso-panel-bg: #ffffff;
    --eciso-panel-bg-soft: #f8fbff;
    --eciso-text: #0f172a;
    --eciso-text-soft: #515151;
    --eciso-muted: #64748b;
    --eciso-border: #e6edf5;
    --eciso-border-soft: #eef2f7;
    --eciso-active-bg: #e0f2ff;
    --eciso-active-text: #3f84fc;
    --eciso-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

html[data-eciso-effective-theme="dark"] {
    color-scheme: dark;
    --eciso-page-bg: #0b1120;
    --eciso-panel-bg: #111827;
    --eciso-panel-bg-soft: #162033;
    --eciso-text: #f8fafc;
    --eciso-text-soft: #d1d5db;
    --eciso-muted: #94a3b8;
    --eciso-border: #263244;
    --eciso-border-soft: #1f2937;
    --eciso-active-bg: rgba(59, 130, 246, 0.18);
    --eciso-active-text: #93c5fd;
    --eciso-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

    /* Base */

    html[data-eciso-effective-theme="dark"] body,
    html[data-eciso-effective-theme="light"] body {
        background-color: var(--eciso-page-bg) !important;
        color: var(--eciso-text-soft) !important;
    }

/* Layout principal */

.dashboard {
    background: transparent;
}

.dashboard-nav {
    background-color: var(--eciso-panel-bg) !important;
    border: 1px solid var(--eciso-border) !important;
    box-shadow: var(--eciso-shadow);
}

.dashboard-app,
.dashboard-content {
    color: var(--eciso-text-soft);
}

.dashboard-nav a,
.dashboard-nav-item,
.dashboard-nav-dropdown-item {
    color: var(--eciso-text-soft) !important;
}

    .dashboard-nav-item:hover,
    .dashboard-nav-dropdown-item:hover {
        background: var(--eciso-active-bg) !important;
        color: var(--eciso-active-text) !important;
        border-radius: 8px;
    }

.active {
    background: var(--eciso-active-bg) !important;
    color: var(--eciso-active-text) !important;
}

    .active i {
        color: var(--eciso-active-text) !important;
    }

.nav-item-divider,
.eciso-sidebar-brand {
    border-color: var(--eciso-border-soft) !important;
}

/* Headers e seções */

.eciso-form-header,
.eciso-form-header--executive,
.eciso-dash-section,
.eciso-card--exec,
.eciso-card--elevated,
.ec-card {
    background: var(--eciso-panel-bg) !important;
    border-color: var(--eciso-border) !important;
    color: var(--eciso-text) !important;
    box-shadow: var(--eciso-shadow) !important;
}

.eciso-form-header__title,
.eciso-dash-section__title,
.ec-card-title,
.ec-kpi-value {
    color: var(--eciso-text) !important;
}

.eciso-form-header__subtitle,
.eciso-dash-section__subtitle,
.ec-card-subtitle,
.ec-kpi-label,
.ec-kpi-hint {
    color: var(--eciso-muted) !important;
}

/* ECISO UI base */

html[data-eciso-effective-theme="dark"] .ec-page {
    background: linear-gradient(135deg, #0b1120, #111827 60%, #172033) !important;
    color: var(--eciso-text) !important;
}

html[data-eciso-effective-theme="dark"] .ec-card {
    background: rgba(17, 24, 39, 0.94) !important;
    border-color: var(--eciso-border) !important;
}

html[data-eciso-effective-theme="dark"] .ec-filter-bar {
    background: rgba(17, 24, 39, 0.74) !important;
    border-color: var(--eciso-border) !important;
}

/* Inputs comuns */

input,
select,
textarea,
.form-control,
.form-select,
.ec-form-control,
.ec-form-select {
    background-color: var(--eciso-panel-bg) !important;
    color: var(--eciso-text) !important;
    border-color: var(--eciso-border) !important;
}

    input::placeholder,
    textarea::placeholder {
        color: var(--eciso-muted) !important;
    }

/* Syncfusion - ajustes básicos */

html[data-eciso-effective-theme="dark"] .e-control,
html[data-eciso-effective-theme="dark"] .e-grid,
html[data-eciso-effective-theme="dark"] .e-card,
html[data-eciso-effective-theme="dark"] .e-dialog,
html[data-eciso-effective-theme="dark"] .e-toolbar,
html[data-eciso-effective-theme="dark"] .e-pager,
html[data-eciso-effective-theme="dark"] .e-headercell,
html[data-eciso-effective-theme="dark"] .e-rowcell {
    background-color: var(--eciso-panel-bg) !important;
    color: var(--eciso-text-soft) !important;
    border-color: var(--eciso-border) !important;
}

    html[data-eciso-effective-theme="dark"] .e-grid .e-headercell,
    html[data-eciso-effective-theme="dark"] .e-grid .e-headercelldiv {
        color: var(--eciso-text) !important;
    }

/* Seletor de tema */

.eciso-theme-selector {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 0 14px 0;
}

.eciso-theme-button {
    width: 36px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--eciso-border);
    background: var(--eciso-panel-bg-soft);
    color: var(--eciso-text-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.18s ease;
}

.eciso-theme-button:hover {
    color: var(--eciso-active-text);
    border-color: var(--eciso-active-text);
}

.eciso-theme-button.is-active {
    background: var(--eciso-active-bg);
    color: var(--eciso-active-text);
    border-color: var(--eciso-active-text);
}

.eciso-sidebar-theme-area {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 0 10px 0;
    border-bottom: 1px solid var(--eciso-border-soft);
    margin-bottom: 10px;
}