/* === Thème vert Stravert === */
:root {
    --vert-fonce: #1b4332;
    --vert-primaire: #2d6a4f;
    --vert-clair: #52b788;
    --vert-bg: #f0faf4;
}

body {
    background-color: var(--vert-bg) !important;
}

/* === Sidebar === */
.sidebar-verte {
    background-color: var(--vert-fonce) !important;
    color: #fff !important;
    min-height: 100vh;
}

.sidebar-verte h5,
.sidebar-verte h6,
.sidebar-verte label,
.sidebar-verte .form-label,
.sidebar-verte .form-check-label {
    color: #fff !important;
}

.sidebar-verte .form-control,
.sidebar-verte .form-select {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--vert-clair);
    color: #fff;
}

.sidebar-verte .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.sidebar-verte .form-control:focus {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: var(--vert-clair);
    box-shadow: 0 0 0 0.2rem rgba(82, 183, 136, 0.25);
}

.sidebar-verte hr {
    border-color: rgba(255, 255, 255, 0.2);
}

.sidebar-verte .form-check-input:checked {
    background-color: var(--vert-clair);
    border-color: var(--vert-clair);
}

/* Slider dans sidebar */
.sidebar-verte .rc-slider-track {
    background-color: var(--vert-clair);
}

.sidebar-verte .rc-slider-handle {
    border-color: var(--vert-clair);
}

/* DatePickerRange dans sidebar */
.sidebar-verte .DateInput_input {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid var(--vert-clair);
    font-size: 0.8rem;
}

/* === Cartes métriques === */
.carte-metrique {
    border-left: 4px solid var(--vert-clair) !important;
    border-radius: 0.5rem;
}

/* === DataTable === */
.dash-table-container .dash-header {
    background-color: var(--vert-primaire) !important;
    color: #fff !important;
    font-weight: bold;
}

/* === Titre principal === */
.titre-page {
    color: var(--vert-fonce);
}

/* === Accordion classification === */
.accordion-classification .accordion-button:not(.collapsed) {
    background-color: var(--vert-bg);
    color: var(--vert-fonce);
}

.accordion-classification .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(82, 183, 136, 0.25);
}

/* === Login === */
.login-card {
    border: 2px solid var(--vert-clair);
    border-radius: 1rem;
}

.login-card .card-body {
    padding: 2rem;
}

/* === Nom app sidebar === */
.nom-app {
    color: #fff;
    font-weight: bold;
}

/* === Logo sidebar === */
.sidebar-logo {
    max-width: 80%;
    margin-bottom: 0.5rem;
}

/* === Graphiques Plotly === */
.js-plotly-plot .plotly .main-svg {
    background: transparent !important;
}

/* === Responsive mobile === */
@media (max-width: 991px) {
    .sidebar-verte {
        min-height: auto !important;
        padding-bottom: 1rem !important;
    }
}

@media (max-width: 575px) {
    .carte-metrique .card-body h4 {
        font-size: 1.1rem;
    }

    .carte-metrique .card-body p {
        font-size: 0.8rem;
    }

    .js-plotly-plot {
        width: 100% !important;
    }
}