/* =============================== */
/* TOKENS GLOBAUX (indépendants)  */
/* =============================== */

:root {
    /* Boutons / actions génériques */
    --btn--save-color: #006BEA;

    /* KPI – valeurs par défaut (peuvent être surchargées par thème) */
    --kpi-component-color-bg: #F9FAFF;
    --kpi-component-indicator-color-bg: #BEC8DC;
    --kpi-component-value-color-bg: #000000;

    /* Bordures / radius / ombres génériques */
    --border-radius-pill: 999px;
    --border-radius-soft: 16px;
    --border-radius-card: 18px;

    /* Accents communs (success / warning / danger) */
    --color-accent-green: #58C696;
    --color-accent-green-soft: #79D1AB;

    --color-accent-amber: #F3AF38;
    --color-accent-amber-soft: #F5BF60;

    --color-accent-orange: #E27336;
    --color-accent-orange-soft: #E88F5E;

    --red: #ef4444;

    --sidebar-width-collapsed: 72px;
    --sidebar-width-expanded: 272px;
    --sidebar-width: var(--sidebar-width-collapsed);
    --sidebar-gap: 0px;

    /* Tables – palette dérivée */
    --table-bg: var(--surface-bg);
    --table-bg-alt: var(--page-bg-alt);
    --table-border-color: var(--surface-border-color);
    --table-text-color: var(--text-color);
}

/* ===================================== */
/* THÈME CLAIR – appliqué sur #body      */
/* ===================================== */

.theme-light {
    /* Fond général + texte principal */
    --page-bg: #FFFFFF;
    --page-bg-alt: #F6F7FB;      /* zones secondaires */
    --text-color: #11131F;
    --text-color-soft: #585A67;

    /* Sidebar */
    --sidebar-bg: #F9FAFF;
    --sidebar-border-color: #EEF2F7;
    --sidebar-divider-color: rgba(15, 23, 42, 0.12);

    /* Surfaces / cards */
    --surface-bg: #FFFFFF;
    --surface-bg-card: #FFFFFF;
    --surface-border-color: #E2E6F0;

    /* Inputs / tables */
    --input-bg: #FFFFFF;
    --input-border-color: #D5DAE6;
    --table-header-bg: #F3F4FB;
    --table-row-hover-bg: #F5F7FF;

    /* Palette structurelle */
    --color-bg-deep: #F6F7FB;
    --color-bg-elevated: #FFFFFF;
    --color-surface: #11131F;

    --color-mid-elevated-main: #FFFFFF;
    --color-text-main: #11131F;
    --color-mid-main-muted: #D9DAE2;
    --color-text-muted: #585A67;

    /* Texte sur surfaces foncées éventuelles (badges, boutons...) */
    --color-text-on-dark: #11131F;

    /* KPI adaptés au fond clair */
    --kpi-component-color-bg: #F9FAFF;
    --kpi-component-indicator-color-bg: #BEC8DC;
    --kpi-component-value-color-bg: #000000;

    /* Box shadow */
    --shadow-soft: 0 6px 16px rgba(15, 23, 42, 0.08);
    --shadow-strong: 0 10px 24px rgba(15, 23, 42, 0.14);

    /* Tables – palette dérivée */
    --table-bg: var(--surface-bg);
    --table-bg-alt: #F9FAFF;
    --table-border-color: var(--surface-border-color);
    --table-text-color: var(--text-color);

    /* Icons (SVG in img tags) */
    --icon-filter: none;
}

/* ===================================== */
/* THÈME SOMBRE – appliqué sur #body     */
/* ===================================== */

.theme-dark {
    /* Fond général + texte principal */
    --page-bg: #11131F;
    --page-bg-alt: #171822;
    --text-color: #EDEDF2;
    --text-color-soft: #9A9CB0;

    /* Sidebar */
    --sidebar-bg: #11131F;
    --sidebar-border-color: rgba(255, 255, 255, 0.08);
    --sidebar-divider-color: rgba(255, 255, 255, 0.06);

    /* Surfaces / cards */
    --surface-bg: #1E1E26;
    --surface-bg-card: #171822;
    --surface-border-color: rgba(255, 255, 255, 0.06);

    /* Inputs / tables */
    --input-bg: #171822;
    --input-border-color: #292A35;
    --table-header-bg: #292A35;
    --table-row-hover-bg: #1F2130;

    /* Palette structurelle */
    --color-bg-deep: #11131F;
    --color-bg-elevated: #1E1E1E;
    --color-surface: #FFFFFF;

    --color-mid-elevated-main: #17181E;
    --color-text-main: #EDEDF2;
    --color-mid-main-muted: #292A35;
    --color-text-muted: #41424C;

    /* Texte sur surfaces foncées (sidebar, boutons colorés...) */
    --color-text-on-dark: #FFFFFF;

    /* KPI adaptés au fond sombre */
    --kpi-component-color-bg: #171822;
    --kpi-component-indicator-color-bg: #41424C;
    --kpi-component-value-color-bg: #FFFFFF;

    /* Box shadow */
    --shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.55);
    --shadow-strong: 0 14px 40px rgba(0, 0, 0, 0.85);

    /* Tables – palette dérivée */
    --table-bg: var(--input-bg);
    --table-bg-alt: var(--page-bg-alt);
    --table-border-color: var(--input-border-color);
    --table-text-color: var(--text-color);

    /* Icons (SVG in img tags) */
    --icon-filter: invert(1);
}

/* ======================= */
/* UTILISATION GLOBALE    */
/* (optionnel mais utile) */
/* ======================= */

html,
body {
    height: 100%;
    min-height: 100%;
    background-color: var(--page-bg) !important;
    background-attachment: fixed;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Wrapper global */
#react-entry-point,
#_dash-app-content,
#_dash-app-content > div,
.dash-spa,
#body,
#page-content {
    background-color: var(--page-bg) !important;
    min-height: 100vh;
}

#body {
    color: var(--text-color);
    transition: background-color 0.25s ease, color 0.25s ease;
    min-height: 100vh;
}

/* par défaut : espace réservé pour la sidebar */
#page-content {
    flex: 1 1 auto;
    display: block;
    padding: 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    margin-left: var(--sidebar-width);
}

#body.no-sidebar #page-content {
    margin-left: 0;
}

#sidebar-container {
    flex-shrink: 0;
}

#sidebar-container:empty {
    display: none;
    width: 0;
}

/* Conteneur de page partagé entre modules (largeur fluide, padding
   proportionnel, fond thème) — cf. regle_appro/pages/dashboard/dashboard.py
   et calage/pages/overview/shell.py pour des exemples d'utilisation. */
.home-container {
    min-height: 100vh;
    padding: 32px 7%;
    margin: 0;
    background-color: var(--page-bg);
    color: var(--text-color);
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .home-container {
        padding: 16px;
    }
}