/* ==========================================================
   Mon Budget — thème
   ========================================================== */
:root {
    --app-green: #14773A;
    --app-green-dark: #0E5A2B;
    --app-green-soft: #E7F3EB;
    --sidebar-w: 260px;

    --bs-primary: var(--app-green);
    --bs-primary-rgb: 20, 119, 58;
    --bs-link-color: var(--app-green);
    --bs-link-color-rgb: 20, 119, 58;
    --bs-link-hover-color: var(--app-green-dark);
    --bs-body-bg: #F5F7F6;
    --bs-border-radius: .6rem;
}

.btn-primary {
    --bs-btn-bg: var(--app-green);
    --bs-btn-border-color: var(--app-green);
    --bs-btn-hover-bg: var(--app-green-dark);
    --bs-btn-hover-border-color: var(--app-green-dark);
    --bs-btn-active-bg: var(--app-green-dark);
    --bs-btn-active-border-color: var(--app-green-dark);
    --bs-btn-disabled-bg: var(--app-green);
    --bs-btn-disabled-border-color: var(--app-green);
}
.btn-outline-primary {
    --bs-btn-color: var(--app-green);
    --bs-btn-border-color: var(--app-green);
    --bs-btn-hover-bg: var(--app-green);
    --bs-btn-hover-border-color: var(--app-green);
    --bs-btn-active-bg: var(--app-green-dark);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--app-green); --bs-nav-link-color: #333; }
.progress { --bs-progress-bar-bg: var(--app-green); }
.form-control:focus, .form-select:focus { border-color: #7DBB93; box-shadow: 0 0 0 .2rem rgba(20,119,58,.18); }
.form-check-input:checked { background-color: var(--app-green); border-color: var(--app-green); }
.min-w-0 { min-width: 0; }

/* ----- Structure ----- */
.app-topbar { background: var(--app-green); }
.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1; min-width: 0; }

.app-sidebar {
    background: linear-gradient(180deg, var(--app-green) 0%, var(--app-green-dark) 100%);
    color: #fff;
    --bs-offcanvas-width: var(--sidebar-w);
    --bs-offcanvas-bg: var(--app-green-dark);
    --bs-offcanvas-color: #fff;
}
@media (min-width: 992px) {
    .app-sidebar {
        width: var(--sidebar-w);
        flex-shrink: 0;
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
}
.app-brand {
    align-items: center; gap: .6rem;
    color: #fff; text-decoration: none;
    font-weight: 700; font-size: 1.2rem;
}
.app-brand i { font-size: 1.6rem; }
.app-sidebar .nav-link {
    color: rgba(255,255,255,.85);
    border-radius: .5rem;
    padding: .55rem .75rem;
    display: flex; align-items: center; gap: .65rem;
    background: none; border: 0;
}
.app-sidebar .nav-link:hover { background: rgba(255,255,255,.1); color: #fff; }
.app-sidebar .nav-link.active { background: #fff; color: var(--app-green-dark); font-weight: 600; }
.app-sidebar .nav-link.disabled { color: rgba(255,255,255,.4); }
.app-sidebar .nav-link i { font-size: 1.1rem; width: 1.2rem; text-align: center; }
.app-sidebar-label {
    text-transform: uppercase; font-size: .7rem; letter-spacing: .08em;
    color: rgba(255,255,255,.5); margin: 1rem .75rem .25rem;
}

/* ----- Cartes ----- */
.card { border: 1px solid rgba(0,0,0,.06); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.stat-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #6c757d; }
.stat-value { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.compte-card .fw-bold, .compte-card .fs-4 { font-variant-numeric: tabular-nums; }

.compte-icone {
    width: 44px; height: 44px; border-radius: .75rem;
    display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0;
}
.compte-icone.type-caisse       { background: #E7F3EB; color: #14773A; }
.compte-icone.type-banque       { background: #E3EEFB; color: #1565C0; }
.compte-icone.type-mobile_money { background: #FFF1E0; color: #C25E00; }
.compte-icone.type-epargne      { background: #F3E8F8; color: #6A1B9A; }

.cat-card .card-header { background: #fff; border-bottom: 3px solid var(--cat-color); }
.cat-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--cat-color); flex-shrink: 0; }
.poste-inactif { color: #9aa0a6; background: #fafafa; }

/* ----- Connexion ----- */
.auth-body { background: linear-gradient(160deg, var(--app-green-soft) 0%, #fff 60%); min-height: 100vh; }
.auth-wrap { max-width: 400px; margin: 0 auto; padding: 8vh 16px 32px; }
.auth-logo {
    width: 72px; height: 72px; border-radius: 1.2rem; margin: 0 auto;
    background: var(--app-green); color: #fff; font-size: 2.2rem;
    display: grid; place-items: center;
    box-shadow: 0 8px 24px rgba(20,119,58,.3);
}

/* ----- Utilitaires ----- */
.tnum { font-variant-numeric: tabular-nums; }
.jauge { height: 6px; margin-top: .3rem; background: #E7F3EB; }

/* ----- Navigation par mois ----- */
.mois-nav { display: inline-flex; align-items: center; gap: .5rem; }
.mois-nav > span { min-width: 9.5rem; text-align: center; }

/* ----- Bouton flottant de saisie (mobile) ----- */
.fab-saisie {
    position: fixed; right: 18px; bottom: 18px; z-index: 1030;
    width: 58px; height: 58px; border-radius: 50%;
    background: var(--app-green); color: #fff; font-size: 1.7rem;
    display: grid; place-items: center; text-decoration: none;
    box-shadow: 0 6px 18px rgba(20,119,58,.4);
}
.fab-saisie:hover { color: #fff; background: var(--app-green-dark); }
@media (max-width: 991.98px) { .app-main { padding-bottom: 80px; } }

/* ----- Saisie ----- */
.saisie-wrap { max-width: 640px; margin: 0 auto; }
.type-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; background: #F1F3F2; padding: .3rem; border-radius: .7rem; }
.type-switch .btn { border: 0; border-radius: .5rem; padding: .55rem .25rem; font-weight: 500; color: #495057; }
.type-switch .btn-check:checked + .btn { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.type-switch .btn-check:checked + .type-depense  { color: #C2410C; }
.type-switch .btn-check:checked + .type-revenu   { color: #1D5FB0; }
.type-switch .btn-check:checked + .type-virement { color: var(--app-green); }
.type-switch .btn-check:focus-visible + .btn { outline: 2px solid var(--app-green); }
.input-montant .form-control { font-size: 2rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.input-montant .input-group-text { font-weight: 600; }
.chip-poste { border: 1px solid #D5DCD8; background: #fff; border-radius: 999px; padding: .25rem .8rem; }
.chip-poste:hover { border-color: var(--app-green); }
.chip-poste.active { background: var(--app-green); color: #fff; border-color: var(--app-green); }

/* ----- Journal ----- */
.filtres summary { cursor: pointer; list-style: none; }
.filtres summary::-webkit-details-marker { display: none; }
.journal-jour { margin-bottom: 1rem; }
.journal-date { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; color: #6c757d; padding: 0 .25rem .35rem; }
.journal-date span:first-child { font-weight: 600; color: #343a40; }
.op-ligne { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; color: inherit; text-decoration: none; }
.op-ligne:hover { background: #F7FAF8; }
.op-icone { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.op-depense  { background: #FDEEE7; color: #C2410C; }
.op-revenu   { background: #E3EEFB; color: #1D5FB0; }
.op-virement { background: #E7F3EB; color: var(--app-green); }
.op-montant { font-weight: 600; white-space: nowrap; }

/* ----- Budget ----- */
.budget-table th, .budget-table td { padding: .45rem .75rem; }
.budget-table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; font-weight: 600; }
.budget-table .budget-cat th { background: #FAFBFA; border-top: 2px solid var(--cat-color); }
.budget-table .col-prevu { width: 9.5rem; }
.budget-table tfoot th { background: #F1F3F2; }
.budget-table .jauge { max-width: 180px; }
.budget-actions { position: sticky; bottom: 0; padding: .75rem 0; background: linear-gradient(transparent, var(--bs-body-bg) 35%); text-align: right; z-index: 5; }
@media (max-width: 575.98px) {
    .budget-table .col-prevu { width: 7.5rem; }
    .budget-table th, .budget-table td { padding: .4rem .5rem; font-size: .9rem; }
}

/* ----- Graphiques ----- */
.chart-titre { font-size: 1rem; font-weight: 600; margin: 0; }
.chart-sous-titre { font-size: .8rem; color: #6c757d; margin-bottom: .75rem; }
.chart-box { position: relative; width: 100%; }
.chart-donnees { margin-top: .5rem; font-size: .8rem; }
.chart-donnees summary { color: #6c757d; cursor: pointer; }

/* ----- Montants sur petits écrans ----- */
.stat-value, .card .fs-5.tnum { white-space: nowrap; }
@media (max-width: 575.98px) {
    .stat-value { font-size: 1.2rem; }
    .card .fs-5.tnum { font-size: 1.05rem !important; }
    .stat-label { font-size: .7rem; }
}
@media (max-width: 575.98px) { .budget-actions .btn { width: 100%; } }