:root {

    --primary: #1f4e78;
    --primary-light: #2f6ca2;

    --success: #16a34a;
    --warning: #f59e0b;
    --danger: #dc2626;

    --background: #f4f7fb;
    --card-bg: #ffffff;

    --text: #1e293b;
    --text-light: #64748b;

    --shadow:
        0 4px 12px rgba(0,0,0,0.08);

    --radius: 14px;
}

body {

    background: var(--background);
    color: var(--text);

    font-family:
        Inter,
        Segoe UI,
        Arial,
        sans-serif;

    min-height: 100vh;
}

/* ================================================= */
/* TITRES */
/* ================================================= */

h1 {

    color: var(--primary);
    font-weight: 700;

    margin-bottom: 25px;
}

h2,
h3,
h4,
h5 {

    font-weight: 600;
}

/* ================================================= */
/* CARDS */
/* ================================================= */

.card {

    border: none;
    border-radius: var(--radius);

    box-shadow: var(--shadow);

    overflow: hidden;
}

.card-header {

    background: var(--primary);
    color: white;

    font-weight: 600;

    border-bottom: none;
}

/* ================================================= */
/* DASHBOARD KPI */
/* ================================================= */

.dashboard-card {

    padding: 20px;
    text-align: center;

    transition: 0.3s ease;
}

.dashboard-card:hover {

    transform: translateY(-4px);
}

.dashboard-card h5 {

    color: var(--text-light);
    margin-bottom: 10px;
}

.dashboard-card h2 {

    font-size: 2rem;
    font-weight: 700;

    margin-bottom: 0;

    color: var(--primary);
}

.kpi-description {

    margin: 10px 0 0;

    font-size: 0.82rem;
    line-height: 1.35;

    color: var(--text-light);
}

/* ================================================= */
/* INPUTS */
/* ================================================= */

label {

    font-weight: 600;
    margin-bottom: 6px;

    color: var(--text);
}

.form-control {

    border-radius: 10px;

    border: 1px solid #d9e0ea;

    padding: 10px;
}

.form-control:focus {

    border-color: var(--primary);

    box-shadow:
        0 0 0 0.15rem rgba(31,78,120,0.2);
}

/* ================================================= */
/* BOUTONS */
/* ================================================= */

.btn {

    border-radius: 10px;

    font-weight: 600;
}

.btn-primary {

    background: var(--primary);
    border: none;
}

.btn-primary:hover {

    background: var(--primary-light);
}

.btn-success {

    border: none;
}

/* ================================================= */
/* TABLEAUX */
/* ================================================= */

.table {

    margin-bottom: 0;
}

.table th {

    background: var(--primary);

    color: white;

    text-align: center;
    vertical-align: middle;
}

.table td {

    text-align: center;
    vertical-align: middle;

    font-weight: 500;
}

/* ================================================= */
/* COLORATION DES CASHFLOW */
/* ================================================= */

.positive {

    background: rgba(22,163,74,0.12) !important;
    color: var(--success);
    font-weight: 700;
}

.neutral {

    background: rgba(245,158,11,0.12) !important;
    color: var(--warning);
    font-weight: 700;
}

.negative {

    background: rgba(220,38,38,0.12) !important;
    color: var(--danger);
    font-weight: 700;
}

/* ================================================= */
/* KPI STATUS */
/* ================================================= */

.kpi-green {

    color: var(--success) !important;
}

.kpi-orange {

    color: var(--warning) !important;
}

.kpi-red {

    color: var(--danger) !important;
}

/* ================================================= */
/* GRAPHIQUES */
/* ================================================= */

canvas {

    width: 100% !important;
    max-height: 450px;
}

/* ================================================= */
/* SECTION TITLES */
/* ================================================= */

.section-title {

    margin-bottom: 15px;

    font-size: 1.2rem;
    font-weight: 600;

    color: var(--primary);
}

/* ================================================= */
/* KPI ALERT */
/* ================================================= */

.analysis-box {

    border-left: 5px solid var(--primary);

    background: white;

    padding: 20px;

    border-radius: 10px;

    box-shadow: var(--shadow);
}

.analysis-box.good {

    border-left: 5px solid var(--success);
}

.analysis-box.medium {

    border-left: 5px solid var(--warning);
}

.analysis-box.bad {

    border-left: 5px solid var(--danger);
}

/* ================================================= */
/* BADGES */
/* ================================================= */

.badge-profit {

    background: var(--success);
}

.badge-warning {

    background: var(--warning);
}

.badge-danger {

    background: var(--danger);
}

/* ================================================= */
/* RESPONSIVE */
/* ================================================= */

@media (max-width: 992px) {

    .dashboard-card {
        margin-bottom: 15px;
    }

    .dashboard-card h2 {

        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {

    body {

        padding: 10px;
    }

    h1 {

        font-size: 1.8rem;
    }

    .table {

        font-size: 0.85rem;
    }

    .card {

        margin-bottom: 15px;
    }
}