/* ==========================================================
   STYLE GENERAL HAVY FINANCE
   ========================================================== */

*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:Arial,sans-serif;
    background:#f1f3f6;
    color:#26364d;
}

.shell{
    min-height:100vh;
}


/* ==========================================================
   MENU LATERAL
   ========================================================== */

.sidebar{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:250px;
    background:#082d57;
    color:#fff;
    overflow:auto;
}

.logo{
    text-align:center;
    padding:16px 10px;
    border-bottom:1px solid #21466d;
}

.logo img{
    width:150px;
    height:90px;
    object-fit:contain;
    background:#fff;
    border-radius:8px;
}

.logo strong{
    display:block;
    color:#ffd21a;
    font-size:19px;
}

.logo small{
    color:#d9e2ec;
}

.sidebar nav a{
    display:block;
    padding:12px 17px;
    color:#fff;
    text-decoration:none;
    border-left:4px solid transparent;
}

.sidebar nav a:hover{
    background:#12436f;
    border-left-color:#ffd21a;
}

.sidebar nav .logout{
    margin-top:15px;
    border-top:1px solid #315476;
}


/* ==========================================================
   CONTENU PRINCIPAL
   ========================================================== */

.main{
    margin-left:250px;
    min-height:100vh;
}

.main>header{
    height:64px;
    background:#fff;
    border-bottom:1px solid #d8dee7;
    padding:0 25px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.main>header b{
    color:#082d57;
}

.content{
    padding:25px;
    max-width:1500px;
    margin:auto;
}


/* ==========================================================
   EN-TETES
   ========================================================== */

.head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    margin-bottom:18px;
}

.head h1,
h1{
    color:#082d57;
    margin:0;
}

.head p{
    color:#708096;
}


/* ==========================================================
   CARTES GENERALES
   ========================================================== */

.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
}

.card{
    background:#fff;
    border:1px solid #dde3ea;
    border-radius:10px;
    padding:18px;
    box-shadow:0 3px 12px rgba(0,0,0,.04);
}

.card span{
    font-size:13px;
    color:#718096;
}

.card b{
    display:block;
    font-size:22px;
    margin-top:7px;
    color:#082d57;
}

.card.yellow{
    border-top:4px solid #ffd21a;
}


/* ==========================================================
   PANNEAUX
   ========================================================== */

.panel{
    background:#fff;
    border:1px solid #dde3ea;
    border-radius:10px;
    padding:18px;
    margin-top:18px;
    box-shadow:0 3px 12px rgba(0,0,0,.04);
}


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

.btn,
button{
    display:inline-block;
    background:#ffd21a;
    color:#082d57;
    border:0;
    border-radius:6px;
    padding:10px 15px;
    font-weight:bold;
    text-decoration:none;
    cursor:pointer;
}

.btn.secondary{
    background:#6b7280;
    text-decoration:none;
}


/* ==========================================================
   ACCES RAPIDE
   ========================================================== */

.quick{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.quick a,
.report-tabs a{
    background:#f5f7f9;
    border:1px solid #dde3ea;
    border-radius:7px;
    padding:13px;
    text-decoration:none;
    color:#082d57;
}


/* ==========================================================
   FILTRES
   ========================================================== */

.filters{
    display:flex;
    gap:8px;
    margin-bottom:15px;
}

.filters input{
    padding:10px;
    border:1px solid #ccd5df;
    border-radius:6px;
    min-width:280px;
}


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

table{
    width:100%;
    border-collapse:collapse;
}

th,
td{
    padding:10px;
    border-bottom:1px solid #e8edf2;
    text-align:left;
    font-size:13px;
}

th{
    background:#f7f9fb;
    color:#41566f;
}

.table-scroll{
    overflow:auto;
}


/* ==========================================================
   FORMULAIRES
   ========================================================== */

.formgrid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.formgrid label{
    font-weight:bold;
    color:#41566f;
}

.formgrid input,
.formgrid select,
.formgrid textarea{
    display:block;
    width:100%;
    margin-top:6px;
    padding:11px;
    border:1px solid #cbd5df;
    border-radius:6px;
    background:#fff;
    font-weight:normal;
}

.formgrid>div{
    grid-column:1/-1;
}


/* ==========================================================
   ALERTES
   ========================================================== */

.alert{
    background:#fde8e7;
    border-left:5px solid #d92d20;
    color:#9b1c16;
    padding:12px;
    margin:12px 0;
    border-radius:5px;
}

.notice{
    background:#fff8d6;
    border-left:5px solid #ffd21a;
    padding:12px;
    margin:12px 0;
}


/* ==========================================================
   ONGLETS DES ETATS
   ========================================================== */

.report-tabs{
    display:flex;
    gap:8px;
    margin:12px 0;
    flex-wrap:wrap;
}


/* ==========================================================
   MANUEL
   ========================================================== */

.manual h2{
    color:#082d57;
    margin-top:24px;
}

.manual p{
    line-height:1.6;
}


/* ==========================================================
   PIED DE PAGE
   ========================================================== */

footer{
    text-align:center;
    padding:20px;
    color:#718096;
    font-size:12px;
}


/* ==========================================================
   PAGE DE CONNEXION
   ========================================================== */

.login{
    min-height:100vh;
    background:#082d57;
    display:flex;
    align-items:center;
    justify-content:center;
}

.login-card{
    background:#fff;
    width:390px;
    padding:30px;
    border-radius:12px;
    text-align:center;
    box-shadow:0 15px 45px rgba(0,0,0,.25);
}

.login-card img{
    width:180px;
    height:100px;
    object-fit:contain;
}

.login-card h1{
    margin:5px;
}

.login-card p{
    color:#718096;
}

.login-card label{
    display:block;
    text-align:left;
    font-weight:bold;
    margin:12px 0;
}

.login-card input{
    display:block;
    width:100%;
    padding:12px;
    margin-top:6px;
    border:1px solid #ccd5df;
    border-radius:6px;
}

.login-card button{
    width:100%;
    margin-top:10px;
}


/* ==========================================================
   AIDE DES CHAMPS
   ========================================================== */

.field-help{
    display:block;
    margin-top:6px;
    font-size:12px;
    opacity:.75;
}

input[readonly]{
    background:#f1f3f5;
    cursor:not-allowed;
}


/* ==========================================================
   BLOC RECAPITULATIF DE LA DETTE
   ========================================================== */

.debt-box{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin:10px 0 20px;
    padding:16px;
    border:1px solid #d8dee8;
    border-radius:10px;
    background:#f5f7fa;
}

.debt-box div{
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:9px 10px;
    background:#fff;
    border-radius:6px;
}

.debt-box .debt-rest{
    grid-column:1/-1;
    border:2px solid #1f3c88;
    background:#fff;
}

.debt-box .debt-rest strong{
    font-size:1.15rem;
}


/* ==========================================================
   ALERTES SUPPLEMENTAIRES
   ========================================================== */

.alert{
    padding:12px 15px;
    margin-bottom:15px;
    border-radius:6px;
}

.alert.error{
    background:#fde8e8;
    border:1px solid #e0a0a0;
}

.alert.success{
    background:#e8f7ed;
    border:1px solid #9bd1ad;
}


/* ==========================================================
   FILTRES DE RECHERCHE DES LISTES
   ========================================================== */

.filter-grid{
    display:flex;
    flex-wrap:wrap;
    align-items:end;
    gap:10px;
    margin:0 0 16px;
    padding:12px;
    border:1px solid #d8dee8;
    border-radius:10px;
    background:#f5f7fa;
}

.filter-grid input,
.filter-grid select{
    min-width:160px;
}

.filter-grid label{
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:.85rem;
    font-weight:600;
}


/* ==========================================================
   JOURNAL DES TRANSACTIONS
   ========================================================== */

.transaction-type{
    display:inline-block;
    padding:4px 7px;
    border-radius:12px;
    background:#e9eef5;
    color:#082d57;
    font-size:11px;
    font-weight:bold;
    white-space:nowrap;
}

.debit{
    font-weight:bold;
}

.credit{
    font-weight:bold;
}

.journal-solde{
    font-weight:bold;
    color:#082d57;
}


/* ==========================================================
   TABLEAU DE BORD HAVY FINANCE
   ========================================================== */


/* ----------------------------------------------------------
   EN-TETE DU DASHBOARD
   ---------------------------------------------------------- */

.dashboard-head{
    margin-bottom:22px;
}

.dashboard-head h1{
    font-size:28px;
    margin:0;
}

.dashboard-head p{
    margin:6px 0 0;
    color:#718096;
    font-size:14px;
}

.dashboard-date{
    background:#fff;
    border:1px solid #d8dee7;
    border-radius:9px;
    padding:10px 15px;
    font-weight:bold;
    color:#082d57;
    box-shadow:0 2px 8px rgba(8,45,87,.04);
}


/* ----------------------------------------------------------
   CARTES DU DASHBOARD
   ---------------------------------------------------------- */

.dashboard-cards{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-bottom:16px;
}

.dashboard-card{
    min-height:118px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px;
    position:relative;
    overflow:hidden;
}


/* ----------------------------------------------------------
   ICONE DES CARTES
   ---------------------------------------------------------- */

.dashboard-card-icon{
    width:50px;
    height:50px;
    min-width:50px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    background:#edf4fb;
    color:#082d57;

    font-size:21px;
}


/* ----------------------------------------------------------
   CONTENU DES CARTES
   ---------------------------------------------------------- */

.dashboard-card-content{
    min-width:0;
    flex:1;
}

.dashboard-card-content span{
    display:block;
    font-size:13px;
    line-height:1.3;
    color:#718096;
}

.dashboard-card-content b{
    display:block;
    margin-top:6px;
    font-size:23px;
    line-height:1.2;
    color:#082d57;
    white-space:nowrap;
}

.dashboard-card-content small{
    display:block;
    margin-top:6px;
    color:#7a8797;
    font-size:11px;
    line-height:1.3;
}


/* ----------------------------------------------------------
   COULEURS PARTICULIERES
   ---------------------------------------------------------- */

.dashboard-card.yellow{
    border-top:4px solid #ffd21a;
}

.dashboard-card.yellow .dashboard-card-icon{
    background:#fff7d6;
    color:#8a7100;
}

.interest-card{
    border-top:4px solid #ffd21a;
}

.interest-card .dashboard-card-icon{
    background:#fff7d6;
    color:#8a7100;
}

.danger-card{
    border-top:4px solid #d92d20;
}

.danger-card .dashboard-card-icon{
    background:#fde8e8;
    color:#d92d20;
}


/* ----------------------------------------------------------
   CARTES FINANCIERES
   ---------------------------------------------------------- */

/*
 * Les cartes financières sont réparties sur
 * trois colonnes afin d'éviter que les montants
 * soient coupés sur plusieurs lignes.
 */

.dashboard-finance-cards{
    grid-template-columns:repeat(3,minmax(0,1fr));
}


/* ==========================================================
   ECHEANCES DEPASSEES
   ========================================================== */

.dashboard-overdue-panel{
    margin-top:20px;
    border-top:4px solid #d92d20;
}

.dashboard-overdue-panel .panel-title-row h2{
    display:flex;
    align-items:center;
    gap:7px;
}

.dashboard-overdue-panel .panel-title-row h2 i{
    color:#d92d20;
}


/* ----------------------------------------------------------
   COMPTEUR DES ECHEANCES
   ---------------------------------------------------------- */

.overdue-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:27px;
    height:27px;

    padding:0 8px;

    border-radius:20px;

    background:#fde8e8;
    color:#d92d20;

    font-size:12px;
}


/* ----------------------------------------------------------
   TABLEAU DES ECHEANCES
   ---------------------------------------------------------- */

.table-responsive{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.dashboard-overdue-table{
    min-width:760px;
}

.dashboard-overdue-table th{
    white-space:nowrap;
}

.dashboard-overdue-table td{
    vertical-align:middle;
}


/* ----------------------------------------------------------
   CLIENT EN RETARD
   ---------------------------------------------------------- */

.overdue-client{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:190px;
}

.overdue-client-icon{
    width:38px;
    height:38px;
    min-width:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#edf4fb;
    color:#082d57;
}

.overdue-client strong{
    display:block;
    color:#082d57;
}

.overdue-client small{
    display:block;
    margin-top:3px;
    color:#718096;
    font-size:11px;
}


/* ----------------------------------------------------------
   JOURS DE RETARD
   ---------------------------------------------------------- */

.overdue-days{
    display:inline-flex;
    align-items:center;
    gap:5px;

    padding:5px 9px;

    border-radius:20px;

    background:#fde8e8;
    color:#b42318;

    font-size:12px;
    font-weight:bold;

    white-space:nowrap;
}


/* ----------------------------------------------------------
   MONTANT RESTANT
   ---------------------------------------------------------- */

.overdue-amount{
    color:#d92d20 !important;
    white-space:nowrap;
}


/* ----------------------------------------------------------
   AUCUNE ECHEANCE DEPASSEE
   ---------------------------------------------------------- */

.dashboard-empty{
    display:flex;
    align-items:center;
    gap:15px;

    padding:20px;

    border:1px dashed #cbd5df;
    border-radius:10px;

    background:#f8fafc;
}

.dashboard-empty-icon{
    width:46px;
    height:46px;
    min-width:46px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#e8f7ed;
    color:#218739;

    font-size:20px;
}

.dashboard-empty strong{
    display:block;
    color:#082d57;
    font-size:14px;
}

.dashboard-empty p{
    margin:4px 0 0;
    color:#718096;
    font-size:12px;
}


/* ==========================================================
   SITUATION TRESORERIE / PRETS
   ========================================================== */

.dashboard-grid{
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:16px;
    margin-top:18px;
}

.panel-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:15px;
}

.panel-title-row h2{
    margin:0;
    color:#082d57;
    font-size:18px;
}

.panel-subtitle{
    margin:5px 0 0;
    color:#718096;
    font-size:12px;
}

.treasury-lines>div{
    display:flex;
    justify-content:space-between;
    padding:11px 0;
    border-bottom:1px solid #edf0f4;
    gap:15px;
}

.treasury-lines .out strong{
    color:#a12b25;
}

.treasury-total{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-top:15px;
    padding:15px;

    border-radius:8px;

    background:#fff8d6;
    border:1px solid #ead67a;

    color:#082d57;
}

.treasury-total strong{
    font-size:19px;
}


/* ==========================================================
   EVOLUTION DES PRETS / REMBOURSEMENTS
   ========================================================== */

.chart-legend{
    display:flex;
    gap:20px;
    margin:10px 0 8px;

    color:#617086;
    font-size:12px;
}

.chart-legend span{
    display:flex;
    align-items:center;
    gap:6px;
}

.chart-legend i{
    width:12px;
    height:12px;
    border-radius:3px;
    display:inline-block;
}

.legend-loan{
    background:#082d57;
}

.legend-repayment{
    background:#ffd21a;
}

.bar-chart{
    height:230px;

    display:flex;
    align-items:flex-end;
    justify-content:space-around;

    gap:15px;

    border-bottom:1px solid #ccd5df;

    padding:15px 10px 0;
}

.bar-group{
    height:100%;
    flex:1;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:center;

    min-width:55px;
}

.bars{
    height:190px;

    display:flex;
    align-items:flex-end;
    justify-content:center;

    gap:5px;
}

.bar{
    width:18px;
    min-height:3px;

    border-radius:4px 4px 0 0;
}

.loan-bar{
    background:#082d57;
}

.repayment-bar{
    background:#ffd21a;
}

.bar-group small{
    margin-top:8px;
    color:#718096;
    font-size:11px;
}


/* ==========================================================
   ACCES RAPIDE DU DASHBOARD
   ========================================================== */

.dashboard-quick{
    grid-template-columns:repeat(4,1fr);
}

.dashboard-quick a{
    display:flex;
    align-items:center;
    gap:9px;
}

.dashboard-quick a i{
    width:20px;
    text-align:center;
    color:#082d57;
}


/* ==========================================================
   AMELIORATION DES ECRANS DE MODIFICATION
   ========================================================== */

.edit-page{
    max-width:1050px;
    margin:0 auto;
}

.edit-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:18px;
}

.edit-header h1{
    font-size:28px;
}

.edit-header p{
    margin:6px 0 0;
    color:#718096;
}

.admin-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    background:#fff8d6;
    border:1px solid #ead67a;
    color:#6b5600;
    border-radius:999px;
    padding:8px 13px;
    font-size:12px;
    font-weight:bold;
    white-space:nowrap;
}

.edit-panel{
    background:#fff;
    border:1px solid #dbe2ea;
    border-radius:14px;
    box-shadow:0 8px 25px rgba(8,45,87,.07);
    overflow:hidden;
}

.edit-panel-head{
    padding:20px 24px;
    background:linear-gradient(180deg,#f8fafc,#fff);
    border-bottom:1px solid #e5eaf0;
}

.edit-panel-head h2{
    margin:0;
    color:#082d57;
    font-size:18px;
}

.edit-panel-head p{
    margin:5px 0 0;
    color:#718096;
    font-size:13px;
}

.edit-panel-body{
    padding:24px;
}

.edit-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.edit-grid .full{
    grid-column:1/-1;
}

.edit-field{
    display:block;
    color:#344b66;
    font-size:13px;
    font-weight:bold;
}

.edit-field input,
.edit-field select,
.edit-field textarea{
    display:block;
    width:100%;
    margin-top:7px;
    padding:12px 13px;
    border:1px solid #cbd5df;
    border-radius:8px;
    background:#fff;
    color:#24364d;
    font:inherit;
    font-weight:normal;
    transition:border-color .2s,box-shadow .2s;
}

.edit-field input:focus,
.edit-field select:focus,
.edit-field textarea:focus{
    outline:none;
    border-color:#082d57;
    box-shadow:0 0 0 3px rgba(8,45,87,.10);
}

.edit-field input[readonly],
.edit-field select:disabled{
    background:#f1f3f6;
    color:#66758a;
    cursor:not-allowed;
}

.edit-help{
    display:block;
    margin-top:6px;
    color:#7a8797;
    font-size:11px;
    font-weight:normal;
}

.edit-summary{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:20px;
    padding:14px;
    background:#f6f8fb;
    border:1px solid #e0e6ed;
    border-radius:10px;
}

.edit-summary-item{
    padding:10px 12px;
    background:#fff;
    border-radius:8px;
    border:1px solid #e5eaf0;
}

.edit-summary-item span{
    display:block;
    color:#718096;
    font-size:11px;
}

.edit-summary-item strong{
    display:block;
    margin-top:5px;
    color:#082d57;
    font-size:17px;
}

.edit-summary-item.penalty strong{
    color:#a12b25;
}

.edit-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:24px;
    padding-top:18px;
    border-top:1px solid #e5eaf0;
}

.btn.cancel{
    background:#eef1f5;
    color:#344b66;
    border:1px solid #d5dce5;
}

.btn.save{
    background:#ffd21a;
    color:#082d57;
    padding-left:20px;
    padding-right:20px;
}

.interest-preview{
    margin-top:20px;
    padding:16px;
    border-radius:10px;
    border:1px solid #d7e0ea;
    background:#f8fafc;
}

.interest-preview-title{
    font-weight:bold;
    color:#082d57;
    margin-bottom:10px;
}

.interest-preview-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.interest-preview-grid div{
    background:#fff;
    border:1px solid #e5eaf0;
    border-radius:8px;
    padding:11px;
}

.interest-preview-grid span{
    display:block;
    color:#718096;
    font-size:11px;
}

.interest-preview-grid strong{
    display:block;
    margin-top:4px;
    color:#082d57;
    font-size:16px;
}

.interest-preview-grid .total{
    border:2px solid #ffd21a;
}


/* ==========================================================
   RESPONSIVE - TABLETTES
   ========================================================== */

@media(max-width:1200px){

    .dashboard-cards{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .dashboard-finance-cards{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .dashboard-grid{
        grid-template-columns:1fr;
    }

    .dashboard-quick{
        grid-template-columns:repeat(2,1fr);
    }

}


/* ==========================================================
   RESPONSIVE - ECRANS MOYENS
   ========================================================== */

@media(max-width:1050px){

    .sidebar{
        width:210px;
    }

    .main{
        margin-left:210px;
    }

    .cards{
        grid-template-columns:repeat(2,1fr);
    }

    .quick{
        grid-template-columns:repeat(2,1fr);
    }

    .edit-page{
        max-width:100%;
    }

}


/* ==========================================================
   RESPONSIVE - SMARTPHONES
   ========================================================== */

@media(max-width:700px){

    .sidebar{
        position:relative;
        width:100%;
        height:auto;
    }

    .main{
        margin-left:0;
    }

    .main>header{
        position:sticky;
        top:0;
        z-index:3;
    }

    .content{
        padding:15px;
    }

    .cards,
    .quick,
    .formgrid,
    .dashboard-cards,
    .dashboard-finance-cards,
    .dashboard-quick{
        grid-template-columns:1fr;
    }

    .formgrid>div{
        grid-column:auto;
    }

    .head{
        align-items:flex-start;
        flex-direction:column;
    }

    .filters{
        flex-direction:column;
    }

    .filters input{
        min-width:0;
        width:100%;
    }


    /* Dashboard */

    .dashboard-head{
        align-items:stretch;
    }

    .dashboard-date{
        text-align:center;
    }

    .dashboard-card{
        min-height:105px;
        padding:15px;
    }

    .dashboard-card-icon{
        width:45px;
        height:45px;
        min-width:45px;
        font-size:19px;
    }

    .dashboard-card-content b{
        font-size:21px;
    }

    .panel-title-row{
        align-items:flex-start;
        flex-direction:column;
    }

    .dashboard-empty{
        align-items:flex-start;
    }

    .bar-chart{
        gap:5px;
        padding-left:0;
        padding-right:0;
    }

    .bar{
        width:13px;
    }

    .bar-group small{
        font-size:10px;
    }


    /* Dette */

    .debt-box{
        grid-template-columns:1fr;
    }

    .debt-box .debt-rest{
        grid-column:auto;
    }


    /* Modification */

    .edit-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .admin-badge{
        align-self:flex-start;
    }

    .edit-panel-body{
        padding:16px;
    }

    .edit-grid,
    .edit-summary,
    .interest-preview-grid{
        grid-template-columns:1fr;
    }

    .edit-grid .full{
        grid-column:auto;
    }

    .edit-actions{
        flex-direction:column-reverse;
    }

    .edit-actions .btn{
        width:100%;
        text-align:center;
    }

}


/* ==========================================================
   IMPRESSION
   ========================================================== */

@media print{

    .sidebar,
    .main>header,
    .btn,
    .filters,
    .report-tabs,
    footer{
        display:none!important;
    }

    .main{
        margin:0;
    }

    .content{
        padding:0;
    }

    .panel{
        border:0;
        box-shadow:none;
    }

    .transaction-type{
        border:1px solid #999;
        background:#fff;
    }

}
/* ==========================================================
   AMELIORATION FINALE DU DASHBOARD
   ========================================================== */


/* ----------------------------------------------------------
   ESPACEMENT GENERAL
   ---------------------------------------------------------- */

.dashboard-head{
    margin-bottom:18px;
}


/* ----------------------------------------------------------
   CARTES PRINCIPALES
   ---------------------------------------------------------- */

.dashboard-cards{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-bottom:14px;
}

.dashboard-card{
    min-height:105px;
    padding:15px;
    gap:13px;
    border-radius:12px;
}


/* ----------------------------------------------------------
   ICONES
   ---------------------------------------------------------- */

.dashboard-card-icon{
    width:46px;
    height:46px;
    min-width:46px;
    border-radius:11px;
    font-size:19px;
}


/* ----------------------------------------------------------
   TEXTE DES CARTES
   ---------------------------------------------------------- */

.dashboard-card-content span{
    font-size:12px;
    line-height:1.25;
}

.dashboard-card-content b{
    font-size:21px;
    margin-top:5px;
    line-height:1.15;
    white-space:nowrap;
}

.dashboard-card-content small{
    font-size:10px;
    margin-top:5px;
}


/* ----------------------------------------------------------
   CARTES FINANCIERES
   ---------------------------------------------------------- */

/*
 * Les 5 indicateurs financiers tiennent sur une seule ligne
 * sur les grands écrans.
 */

.dashboard-finance-cards{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px;
}


/*
 * Les cartes financières sont légèrement plus compactes.
 */

.dashboard-finance-cards .dashboard-card{
    min-height:105px;
}


/*
 * Les montants financiers restent sur une seule ligne.
 */

.dashboard-finance-cards .dashboard-card-content b{
    font-size:20px;
}


/* ----------------------------------------------------------
   CARTES FINANCIERES SPECIALES
   ---------------------------------------------------------- */

.dashboard-finance-cards .danger-card{
    border-top-width:4px;
}

.dashboard-finance-cards .interest-card{
    border-top-width:4px;
}


/* ----------------------------------------------------------
   EFFET VISUEL AU SURVOL
   ---------------------------------------------------------- */

.dashboard-card{
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.dashboard-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(8,45,87,.08);
}


/* ----------------------------------------------------------
   PANNEAU DES ECHEANCES
   ---------------------------------------------------------- */

.dashboard-overdue-panel{
    margin-top:18px;
}

.dashboard-overdue-panel .panel-title-row{
    margin-bottom:13px;
}


/* ----------------------------------------------------------
   SITUATION TRESORERIE / PRETS
   ---------------------------------------------------------- */

.dashboard-grid{
    margin-top:16px;
    gap:14px;
}


/* ----------------------------------------------------------
   PANNEAUX GENERAUX
   ---------------------------------------------------------- */

.dashboard-overdue-panel,
.dashboard-grid .panel{
    box-shadow:0 4px 15px rgba(8,45,87,.04);
}


/* ----------------------------------------------------------
   GRAPHIQUE
   ---------------------------------------------------------- */

.bar-chart{
    height:215px;
}

.bars{
    height:175px;
}


/* ----------------------------------------------------------
   ACCES RAPIDE
   ---------------------------------------------------------- */

.dashboard-quick{
    gap:8px;
}

.dashboard-quick a{
    padding:11px 12px;
    font-size:12px;
}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media(max-width:1200px){

    .dashboard-cards{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .dashboard-finance-cards{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}


/* ==========================================================
   PETITS ECRANS
   ========================================================== */

@media(max-width:700px){

    .dashboard-cards,
    .dashboard-finance-cards{
        grid-template-columns:1fr;
    }

    .dashboard-card{
        min-height:95px;
    }

    .dashboard-card-content b{
        font-size:20px;
    }

}
/* ==========================================================
   CORRECTION VISUELLE DES CARTES FINANCIERES
   ========================================================== */

/*
 * On utilise 6 colonnes virtuelles.
 *
 * Les 3 premières cartes occupent chacune 2 colonnes.
 * Les 2 dernières cartes occupent chacune 3 colonnes.
 *
 * Résultat :
 *
 * 3 cartes sur la première ligne
 * 2 cartes équilibrées sur la deuxième ligne
 */

.dashboard-finance-cards{
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:16px;
}


/* ----------------------------------------------------------
   PREMIERE LIGNE
   ---------------------------------------------------------- */

.dashboard-finance-cards .dashboard-card:nth-child(1),
.dashboard-finance-cards .dashboard-card:nth-child(2),
.dashboard-finance-cards .dashboard-card:nth-child(3){

    grid-column:span 2;

}


/* ----------------------------------------------------------
   DEUXIEME LIGNE
   ---------------------------------------------------------- */

.dashboard-finance-cards .dashboard-card:nth-child(4),
.dashboard-finance-cards .dashboard-card:nth-child(5){

    grid-column:span 3;

}


/* ----------------------------------------------------------
   CARTES FINANCIERES
   ---------------------------------------------------------- */

.dashboard-finance-cards .dashboard-card{

    min-height:118px;

    padding:18px;

}


/* ----------------------------------------------------------
   CONTENU
   ---------------------------------------------------------- */

.dashboard-finance-cards .dashboard-card-content{

    min-width:0;

}


/*
 * Le montant peut maintenant occuper correctement
 * l'espace disponible.
 */

.dashboard-finance-cards .dashboard-card-content b{

    font-size:24px;

    line-height:1.15;

    white-space:nowrap;

}


/* ----------------------------------------------------------
   TITRES
   ---------------------------------------------------------- */

.dashboard-finance-cards .dashboard-card-content span{

    font-size:14px;

    line-height:1.3;

}


/* ----------------------------------------------------------
   SOUS-TITRES
   ---------------------------------------------------------- */

.dashboard-finance-cards .dashboard-card-content small{

    font-size:11px;

    line-height:1.35;

}


/* ----------------------------------------------------------
   ICONES
   ---------------------------------------------------------- */

.dashboard-finance-cards .dashboard-card-icon{

    width:52px;
    height:52px;
    min-width:52px;

    font-size:21px;

}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media(max-width:1200px){

    .dashboard-finance-cards{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }


    .dashboard-finance-cards .dashboard-card:nth-child(1),
    .dashboard-finance-cards .dashboard-card:nth-child(2),
    .dashboard-finance-cards .dashboard-card:nth-child(3),
    .dashboard-finance-cards .dashboard-card:nth-child(4),
    .dashboard-finance-cards .dashboard-card:nth-child(5){

        grid-column:span 1;

    }

}


/* ==========================================================
   SMARTPHONE
   ========================================================== */

@media(max-width:700px){

    .dashboard-finance-cards{

        grid-template-columns:1fr;

    }


    .dashboard-finance-cards .dashboard-card:nth-child(1),
    .dashboard-finance-cards .dashboard-card:nth-child(2),
    .dashboard-finance-cards .dashboard-card:nth-child(3),
    .dashboard-finance-cards .dashboard-card:nth-child(4),
    .dashboard-finance-cards .dashboard-card:nth-child(5){

        grid-column:span 1;

    }


    .dashboard-finance-cards .dashboard-card-content b{

        font-size:21px;

    }

}
/* =========================================================
   PAGE DE CONNEXION - HAVY FINANCE
   ========================================================= */


/* ---------------------------------------------------------
   PAGE PRINCIPALE
   --------------------------------------------------------- */

.login-page {
    /* Supprime les marges par défaut du navigateur. */
    margin: 0;

    /* Utilise toute la hauteur de l'écran. */
    min-height: 100vh;

    /* Utilise une police moderne. */
    font-family: Arial, Helvetica, sans-serif;

    /* Fond général bleu très clair. */
    background: #eef5fa;

    /* Centre la carte horizontalement et verticalement. */
    display: flex;

    align-items: center;

    justify-content: center;

    /* Ajoute de l'espace autour de la carte. */
    padding: 30px;

    /* Empêche les éléments de dépasser horizontalement. */
    box-sizing: border-box;
}


/* ---------------------------------------------------------
   CONTENEUR PRINCIPAL
   --------------------------------------------------------- */

.login-container {
    /* Largeur maximale de la carte. */
    width: 100%;

    max-width: 1120px;

    /* Hauteur minimale de la carte. */
    min-height: 650px;

    /* Organise les deux colonnes horizontalement. */
    display: grid;

    grid-template-columns: 46% 54%;

    /* Fond blanc. */
    background: #ffffff;

    /* Coins arrondis. */
    border-radius: 26px;

    /* Bordure légère bleue. */
    border: 2px solid #0b5d8f;

    /* Ombre moderne. */
    box-shadow: 0 25px 60px rgba(8, 45, 87, 0.15);

    /* Empêche le contenu de sortir des coins. */
    overflow: hidden;
}


/* ---------------------------------------------------------
   PARTIE GAUCHE
   --------------------------------------------------------- */

.login-form-section {
    /* Fond blanc. */
    background: #ffffff;

    /* Espacement intérieur. */
    padding: 55px 65px;

    /* Organisation verticale. */
    display: flex;

    flex-direction: column;

    justify-content: center;
}


/* ---------------------------------------------------------
   LOGO
   --------------------------------------------------------- */

.login-logo {
    /* Taille maximale du logo. */
    width: 125px;

    height: auto;

    /* Garde les proportions originales. */
    object-fit: contain;

    /* Espace sous le logo. */
    margin-bottom: 30px;
}


/* ---------------------------------------------------------
   TEXTE DE BIENVENUE
   --------------------------------------------------------- */

.login-welcome span {
    /* Petit texte bleu. */
    display: block;

    color: #0b5d8f;

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 6px;
}


.login-welcome h1 {
    /* Supprime les marges inutiles. */
    margin: 0;

    /* Taille du titre. */
    font-size: 34px;

    /* Couleur principale. */
    color: #082d57;

    /* Épaisseur du texte. */
    font-weight: 700;
}


.login-welcome p {
    /* Espace autour du paragraphe. */
    margin: 10px 0 28px;

    /* Couleur secondaire. */
    color: #68788a;

    /* Taille du texte. */
    font-size: 15px;

    /* Hauteur des lignes. */
    line-height: 1.6;
}


/* ---------------------------------------------------------
   MESSAGE D'ERREUR
   --------------------------------------------------------- */

.login-error {
    /* Fond légèrement rouge. */
    background: #fff1f1;

    /* Bordure rouge discrète. */
    border: 1px solid #f0b4b4;

    /* Texte rouge. */
    color: #a52b2b;

    /* Espacement intérieur. */
    padding: 12px 15px;

    /* Coins arrondis. */
    border-radius: 10px;

    /* Espace sous le message. */
    margin-bottom: 20px;

    /* Taille du texte. */
    font-size: 14px;
}


/* ---------------------------------------------------------
   FORMULAIRE
   --------------------------------------------------------- */

.login-form {
    /* Largeur du formulaire. */
    width: 100%;
}


/* ---------------------------------------------------------
   CHAMP
   --------------------------------------------------------- */

.login-field {
    /* Espace entre les champs. */
    margin-bottom: 20px;
}


.login-field label {
    /* Le label occupe toute la largeur. */
    display: block;

    /* Couleur du texte. */
    color: #26384a;

    /* Texte légèrement renforcé. */
    font-weight: 600;

    /* Taille. */
    font-size: 14px;

    /* Espace sous le label. */
    margin-bottom: 8px;
}


/* ---------------------------------------------------------
   CONTENEUR DE L'INPUT
   --------------------------------------------------------- */

.login-input-wrapper {
    /* Permet de positionner l'icône. */
    position: relative;
}


/* ---------------------------------------------------------
   ICÔNE DU CHAMP
   --------------------------------------------------------- */

.login-input-icon {
    /* Position absolue dans le champ. */
    position: absolute;

    left: 16px;

    top: 50%;

    transform: translateY(-50%);

    /* Taille de l'icône. */
    font-size: 16px;

    /* Empêche l'icône de recevoir les clics. */
    pointer-events: none;

    opacity: 0.65;
}


/* ---------------------------------------------------------
   INPUT
   --------------------------------------------------------- */

.login-input-wrapper input {
    /* Largeur complète. */
    width: 100%;

    /* Hauteur du champ. */
    height: 52px;

    /* Prend en compte padding et bordure dans la largeur. */
    box-sizing: border-box;

    /* Espace pour l'icône. */
    padding: 0 16px 0 48px;

    /* Bordure. */
    border: 1px solid #d5dee7;

    /* Coins arrondis. */
    border-radius: 12px;

    /* Fond très légèrement gris. */
    background: #fbfcfe;

    /* Taille du texte. */
    font-size: 14px;

    /* Supprime le contour par défaut. */
    outline: none;

    /* Transition douce. */
    transition: 0.2s ease;
}


/* ---------------------------------------------------------
   INPUT AU SURVOL / FOCUS
   --------------------------------------------------------- */

.login-input-wrapper input:focus {
    /* Bordure bleue. */
    border-color: #0b5d8f;

    /* Fond blanc. */
    background: #ffffff;

    /* Petit halo bleu. */
    box-shadow: 0 0 0 3px rgba(11, 93, 143, 0.10);
}


/* ---------------------------------------------------------
   OPTIONS
   --------------------------------------------------------- */

.login-options {
    /* Place les éléments horizontalement. */
    display: flex;

    justify-content: space-between;

    align-items: center;

    /* Espace sous les options. */
    margin: 4px 0 22px;
}


.remember-option {
    /* Aligne la case et le texte. */
    display: flex;

    align-items: center;

    gap: 8px;

    /* Taille du texte. */
    font-size: 13px;

    color: #647487;

    /* Curseur. */
    cursor: pointer;
}


.remember-option input {
    /* Utilise la couleur principale du navigateur. */
    accent-color: #0b5d8f;

    /* Taille de la case. */
    width: 15px;

    height: 15px;
}


/* ---------------------------------------------------------
   BOUTON DE CONNEXION
   --------------------------------------------------------- */

.login-button {
    /* Largeur complète. */
    width: 100%;

    /* Hauteur du bouton. */
    height: 52px;

    /* Supprime la bordure. */
    border: none;

    /* Coins arrondis. */
    border-radius: 12px;

    /* Couleur bleu Havy. */
    background: #0b5d8f;

    /* Texte blanc. */
    color: #ffffff;

    /* Taille du texte. */
    font-size: 15px;

    /* Texte renforcé. */
    font-weight: 700;

    /* Curseur. */
    cursor: pointer;

    /* Organisation du contenu. */
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    /* Animation. */
    transition: 0.2s ease;
}


/* ---------------------------------------------------------
   BOUTON AU SURVOL
   --------------------------------------------------------- */

.login-button:hover {
    /* Bleu plus foncé. */
    background: #082d57;

    /* Léger déplacement vers le haut. */
    transform: translateY(-1px);

    /* Ombre. */
    box-shadow: 0 8px 20px rgba(8, 45, 87, 0.20);
}


/* ---------------------------------------------------------
   FLÈCHE
   --------------------------------------------------------- */

.login-arrow {
    /* Taille de la flèche. */
    font-size: 20px;

    /* Animation. */
    transition: 0.2s ease;
}


.login-button:hover .login-arrow {
    /* Déplace légèrement la flèche. */
    transform: translateX(4px);
}


/* ---------------------------------------------------------
   MESSAGE DE SÉCURITÉ
   --------------------------------------------------------- */

.login-security {
    /* Organisation horizontale. */
    display: flex;

    align-items: center;

    gap: 8px;

    /* Espace au-dessus. */
    margin-top: 25px;

    /* Taille du texte. */
    font-size: 12px;

    /* Couleur. */
    color: #788898;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.login-footer {
    /* Organisation verticale. */
    display: flex;

    flex-direction: column;

    /* Espace au-dessus. */
    margin-top: 45px;

    /* Taille du texte. */
    font-size: 11px;

    /* Couleur. */
    color: #8997a5;
}


.login-footer strong {
    /* Couleur du nom de l'application. */
    color: #082d57;

    /* Espace sous le nom. */
    margin-bottom: 4px;
}


/* =========================================================
   PARTIE DROITE
   ========================================================= */

.login-info-section {
    /* Fond bleu très clair. */
    background: linear-gradient(
        145deg,
        #f4f9fd,
        #e8f4fb
    );

    /* Espacement intérieur. */
    padding: 55px 55px;

    /* Organisation verticale. */
    display: flex;

    flex-direction: column;

    justify-content: center;

    /* Empêche les débordements. */
    overflow: hidden;

    /* Position de référence pour les éléments décoratifs. */
    position: relative;
}


/* ---------------------------------------------------------
   PETIT TITRE
   --------------------------------------------------------- */

.login-info-small {
    /* Couleur jaune Havy. */
    color: #c69700;

    /* Taille. */
    font-size: 12px;

    /* Épaisseur. */
    font-weight: 800;

    /* Espacement des lettres. */
    letter-spacing: 1.5px;
}


/* ---------------------------------------------------------
   TITRE DROIT
   --------------------------------------------------------- */

.login-info-header h2 {
    /* Supprime les marges par défaut. */
    margin: 12px 0 12px;

    /* Couleur. */
    color: #26384a;

    /* Taille. */
    font-size: 30px;

    /* Hauteur. */
    line-height: 1.2;
}


.login-info-header h2 strong {
    /* Bleu principal. */
    color: #0b5d8f;
}


.login-info-header p {
    /* Taille. */
    font-size: 14px;

    /* Hauteur de ligne. */
    line-height: 1.6;

    /* Couleur. */
    color: #68788a;

    /* Largeur maximale. */
    max-width: 470px;

    /* Espace sous le texte. */
    margin: 0 0 30px;
}


/* =========================================================
   MINI CARTE FINANCIÈRE
   ========================================================= */

.login-finance-card {
    /* Fond blanc légèrement transparent. */
    background: rgba(255, 255, 255, 0.88);

    /* Bordure. */
    border: 1px solid #b8d0df;

    /* Coins arrondis. */
    border-radius: 22px;

    /* Espacement intérieur. */
    padding: 25px;

    /* Ombre légère. */
    box-shadow: 0 15px 35px rgba(8, 45, 87, 0.08);
}


/* ---------------------------------------------------------
   EN-TÊTE CARTE
   --------------------------------------------------------- */

.finance-card-header {
    /* Organisation horizontale. */
    display: flex;

    justify-content: space-between;

    align-items: center;

    /* Espace sous l'en-tête. */
    margin-bottom: 22px;
}


.finance-card-header span {
    /* Affiche sur une ligne séparée. */
    display: block;

    /* Taille. */
    font-size: 11px;

    /* Couleur. */
    color: #7d8d9c;
}


.finance-card-header strong {
    /* Affiche sur une ligne séparée. */
    display: block;

    /* Taille. */
    font-size: 14px;

    /* Couleur. */
    color: #082d57;

    /* Espace supérieur. */
    margin-top: 4px;
}


/* ---------------------------------------------------------
   ICÔNE FINANCIÈRE
   --------------------------------------------------------- */

.finance-card-icon {
    /* Dimensions. */
    width: 42px;

    height: 42px;

    /* Cercle. */
    border-radius: 50%;

    /* Bleu. */
    background: #082d57;

    /* Texte jaune. */
    color: #ffd21a;

    /* Centre le symbole. */
    display: flex;

    align-items: center;

    justify-content: center;

    /* Taille du symbole. */
    font-size: 20px;

    /* Épaisseur. */
    font-weight: 800;
}


/* ---------------------------------------------------------
   SOLDE
   --------------------------------------------------------- */

.finance-balance {
    /* Fond bleu très clair. */
    background: #edf7fc;

    /* Bordure. */
    border: 1px solid #c5dce9;

    /* Coins. */
    border-radius: 14px;

    /* Espacement. */
    padding: 15px 17px;

    /* Espace sous la zone. */
    margin-bottom: 16px;
}


.finance-balance span {
    /* Petit texte. */
    display: block;

    color: #7290a3;

    font-size: 11px;

    margin-bottom: 5px;
}


.finance-balance strong {
    /* Montre le texte principal. */
    display: block;

    color: #0b5d8f;

    font-size: 18px;
}


/* =========================================================
   MINI STATISTIQUES
   ========================================================= */

.finance-mini-grid {
    /* Trois colonnes. */
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    /* Espace entre les cartes. */
    gap: 10px;

    /* Espace sous les cartes. */
    margin-bottom: 20px;
}


.finance-mini-card {
    /* Fond blanc. */
    background: #ffffff;

    /* Bordure. */
    border: 1px solid #d8e4ec;

    /* Coins. */
    border-radius: 12px;

    /* Espacement. */
    padding: 12px;
}


.finance-mini-card span,
.finance-mini-card small {
    /* Affichage sur une ligne. */
    display: block;

    /* Taille. */
    font-size: 10px;

    /* Couleur. */
    color: #8091a0;
}


.finance-mini-card strong {
    /* Affichage séparé. */
    display: block;

    /* Couleur. */
    color: #082d57;

    /* Taille. */
    font-size: 13px;

    /* Espace vertical. */
    margin: 5px 0;
}


/* =========================================================
   GRAPHIQUE
   ========================================================= */

.finance-chart {
    /* Fond légèrement bleu. */
    background: #f8fbfd;

    /* Bordure. */
    border: 1px solid #dce8ef;

    /* Coins. */
    border-radius: 14px;

    /* Espacement. */
    padding: 15px;
}


.chart-title {
    /* Taille du titre. */
    font-size: 11px;

    /* Couleur. */
    color: #6e8293;

    /* Espace sous le titre. */
    margin-bottom: 12px;
}


.chart-bars {
    /* Hauteur du graphique. */
    height: 80px;

    /* Aligne les barres sur le bas. */
    display: flex;

    align-items: flex-end;

    /* Espace entre les barres. */
    gap: 10px;

    /* Ajoute une petite ligne basse. */
    border-bottom: 1px solid #cbd9e3;

    padding: 0 5px;
}


.chart-bars span {
    /* Largeur des barres. */
    flex: 1;

    /* Hauteur définie directement dans le HTML. */
    min-height: 15px;

    /* Couleur bleue. */
    background: #0b5d8f;

    /* Coins supérieurs. */
    border-radius: 5px 5px 0 0;

    /* Petite transition. */
    transition: 0.2s ease;
}


.chart-bars span:nth-child(even) {
    /* Une deuxième nuance pour varier le graphique. */
    background: #ffd21a;
}


/* =========================================================
   MESSAGE BAS DE LA PARTIE DROITE
   ========================================================= */

.login-info-bottom {
    /* Organisation horizontale. */
    display: flex;

    align-items: center;

    gap: 12px;

    /* Espace au-dessus. */
    margin-top: 25px;
}


.login-check {
    /* Taille du cercle. */
    width: 34px;

    height: 34px;

    /* Forme circulaire. */
    border-radius: 50%;

    /* Fond jaune. */
    background: #ffd21a;

    /* Couleur du symbole. */
    color: #082d57;

    /* Centre le symbole. */
    display: flex;

    align-items: center;

    justify-content: center;

    /* Épaisseur. */
    font-weight: 900;
}


.login-info-bottom strong {
    /* Affiche le titre sur une ligne. */
    display: block;

    color: #082d57;

    font-size: 13px;

    margin-bottom: 3px;
}


.login-info-bottom span {
    /* Affiche le texte sur une ligne. */
    display: block;

    color: #718392;

    font-size: 11px;
}


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

@media (max-width: 900px) {

    .login-container {
        /* Une seule colonne sur écran plus petit. */
        grid-template-columns: 1fr;

        /* Hauteur automatique. */
        min-height: auto;
    }


    .login-info-section {
        /* Partie présentation en dessous. */
        padding: 40px;
    }


    .login-form-section {
        /* Réduit les marges. */
        padding: 45px;
    }

}


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

@media (max-width: 600px) {

    .login-page {
        /* Réduit l'espace autour de la carte. */
        padding: 12px;
    }


    .login-container {
        /* Réduit les coins. */
        border-radius: 18px;
    }


    .login-form-section {
        /* Espacement adapté au téléphone. */
        padding: 35px 25px;
    }


    .login-info-section {
        /* Espacement adapté au téléphone. */
        padding: 30px 25px;
    }


    .login-welcome h1 {
        /* Réduit le titre. */
        font-size: 28px;
    }


    .login-info-header h2 {
        /* Réduit le titre droit. */
        font-size: 25px;
    }


    .finance-mini-grid {
        /* Passe les cartes en une seule colonne. */
        grid-template-columns: 1fr;
    }


    .login-footer {
        /* Réduit l'espace du footer. */
        margin-top: 30px;
    }

}
/* ==========================================================
   NETTOYAGE DES ICONES DU DASHBOARD
   ========================================================== */

/*
 * Par défaut, on masque les icônes des cartes financières.
 * Les montants restent totalement inchangés.
 */
.dashboard-finance-cards .dashboard-card-icon{
    display:none;
}


/*
 * On masque les icônes des accès rapides.
 * Les liens restent visibles et fonctionnels.
 */
.dashboard-quick a i{
    display:none;
}


/*
 * On conserve uniquement les icônes essentielles
 * dans les 4 cartes principales.
 *
 * 1 = Clients
 * 2 = Apporteurs
 * 3 = Prêts
 * 4 = Trésorerie
 */


/* L'icône des apporteurs est supprimée. */
.dashboard-cards .dashboard-card:nth-child(2) .dashboard-card-icon{
    display:none;
}


/*
 * On conserve l'icône Clients.
 */
.dashboard-cards .dashboard-card:nth-child(1) .dashboard-card-icon{
    display:flex;
}


/*
 * On conserve l'icône Prêts.
 */
.dashboard-cards .dashboard-card:nth-child(3) .dashboard-card-icon{
    display:flex;
}


/*
 * On conserve l'icône Trésorerie.
 */
.dashboard-cards .dashboard-card:nth-child(4) .dashboard-card-icon{
    display:flex;
}


/*
 * L'icône du panneau Échéances dépassées
 * reste visible car elle représente une alerte importante.
 */
.dashboard-overdue-panel .panel-title-row h2 i{
    display:inline-block;
}


/* ==========================================================
   CARTES SANS ICONE
   ========================================================== */

/*
 * Lorsque la carte n'a plus d'icône,
 * son contenu utilise naturellement toute la largeur.
 */
.dashboard-finance-cards .dashboard-card-content{
    width:100%;
}


/*
 * Même principe pour la carte Apporteurs.
 */
.dashboard-cards .dashboard-card:nth-child(2) .dashboard-card-content{
    width:100%;
}
/* ==========================================================
   DASHBOARD MOBILE - AFFICHAGE PROPRE
   ========================================================== */

@media (max-width: 700px) {

    /* ------------------------------------------------------
       CONTENU GENERAL
       ------------------------------------------------------ */

    .main {
        overflow-x: hidden;
    }

    .content {
        padding: 12px;
    }


    /* ------------------------------------------------------
       CARTES PRINCIPALES
       ------------------------------------------------------ */

    .dashboard-cards {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .dashboard-card {
        min-height: 90px;
        padding: 12px;
        gap: 10px;
    }

    .dashboard-card-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 17px;
    }

    .dashboard-card-content span {
        font-size: 11px;
    }

    .dashboard-card-content b {
        font-size: 18px;
        white-space: normal;
        word-break: break-word;
    }

    .dashboard-card-content small {
        font-size: 9px;
    }


    /* ------------------------------------------------------
       CARTES FINANCIERES
       ------------------------------------------------------ */

    .dashboard-finance-cards {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .dashboard-finance-cards .dashboard-card {
        min-height: 85px;
        padding: 12px;
    }

    .dashboard-finance-cards .dashboard-card-content b {
        font-size: 17px;
        white-space: normal;
        line-height: 1.25;
    }


    /* ------------------------------------------------------
       PANNEAU ECHEANCES
       ------------------------------------------------------ */

    .dashboard-overdue-panel {
        margin-top: 14px;
    }

    .dashboard-overdue-panel .panel-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }


    /* ------------------------------------------------------
       TABLEAU : PAS DE DEBORDEMENT
       ------------------------------------------------------ */

    .table-responsive {
        width: 100%;
        overflow-x: visible;
    }

    .dashboard-overdue-table {
        min-width: 0 !important;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }


    /* ------------------------------------------------------
       ON TRANSFORME CHAQUE LIGNE EN CARTE
       ------------------------------------------------------ */

    .dashboard-overdue-table thead {
        display: none;
    }

    .dashboard-overdue-table tbody {
        display: block;
        width: 100%;
    }

    .dashboard-overdue-table tr {
        display: block;
        width: 100%;
        margin-bottom: 12px;
        padding: 12px;
        box-sizing: border-box;

        background: #ffffff;

        border: 1px solid #e1e7ee;
        border-radius: 12px;

        box-shadow: 0 3px 10px rgba(8,45,87,.05);
    }


    /* ------------------------------------------------------
       CELLULES
       ------------------------------------------------------ */

    .dashboard-overdue-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;
        min-height: 34px;

        padding: 8px 0;

        box-sizing: border-box;

        border: none;
        border-bottom: 1px solid #edf1f5;

        font-size: 13px;

        text-align: right;
    }

    .dashboard-overdue-table td:last-child {
        border-bottom: none;
    }


    /* ------------------------------------------------------
       TITRE DE CHAQUE INFORMATION
       ------------------------------------------------------ */

    .dashboard-overdue-table td::before {
        font-weight: 600;
        color: #718096;
        text-align: left;
        margin-right: 15px;
    }


    /* Client */

    .dashboard-overdue-table td:nth-child(1)::before {
        content: "Client";
    }


    /* Prêt */

    .dashboard-overdue-table td:nth-child(2)::before {
        content: "Prêt";
    }


    /* Échéance */

    .dashboard-overdue-table td:nth-child(3)::before {
        content: "Échéance";
    }


    /* Retard */

    .dashboard-overdue-table td:nth-child(4)::before {
        content: "Retard";
    }


    /* Reste */

    .dashboard-overdue-table td:nth-child(5)::before {
        content: "Reste à payer";
    }


    /* ------------------------------------------------------
       CLIENT
       ------------------------------------------------------ */

    .dashboard-overdue-table .overdue-client {
        min-width: 0;
        width: auto;
        justify-content: flex-end;
        text-align: right;
    }

    .dashboard-overdue-table .overdue-client-icon {
        display: none;
    }

    .dashboard-overdue-table .overdue-client strong {
        font-size: 13px;
        text-align: right;
    }

    .dashboard-overdue-table .overdue-client small {
        font-size: 10px;
        text-align: right;
    }


    /* ------------------------------------------------------
       RETARD
       ------------------------------------------------------ */

    .dashboard-overdue-table .overdue-days {
        padding: 4px 8px;
        font-size: 11px;
    }


    /* ------------------------------------------------------
       RESTE A PAYER
       ------------------------------------------------------ */

    .dashboard-overdue-table .overdue-amount {
        font-size: 13px !important;
        white-space: normal;
        text-align: right;
    }


    /* ------------------------------------------------------
       TRESORERIE / AUTRES PANNEAUX
       ------------------------------------------------------ */

    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 14px;
    }

    .dashboard-grid .panel {
        min-width: 0;
    }


    /* ------------------------------------------------------
       ACCES RAPIDE
       ------------------------------------------------------ */

    .dashboard-quick {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .dashboard-quick a {
        min-width: 0;
        padding: 10px;
        font-size: 11px;
    }

}


/* ==========================================================
   CORRECTION FINALE - DASHBOARD MOBILE
   ========================================================== */

@media (max-width:700px){

    /* Empêche le dashboard de créer un débordement horizontal */
    html,
    body{
        max-width:100%;
        overflow-x:hidden;
    }

    .main,
    .content,
    .panel{
        max-width:100%;
        box-sizing:border-box;
    }

    /* ------------------------------------------------------
       CARTES DU DASHBOARD
       ------------------------------------------------------ */

    .dashboard-cards{
        grid-template-columns:1fr 1fr !important;
        gap:10px;
    }

    .dashboard-card{
        min-width:0 !important;
        width:100%;
        box-sizing:border-box;
    }

    .dashboard-card-content{
        min-width:0 !important;
        overflow:hidden;
    }

    .dashboard-card-content b{
        max-width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    /* ------------------------------------------------------
       CARTES FINANCIERES
       ------------------------------------------------------ */

    .dashboard-finance-cards{
        grid-template-columns:1fr 1fr !important;
        gap:10px;
    }

    .dashboard-finance-cards .dashboard-card{
        min-width:0 !important;
        min-height:90px;
        padding:12px;
    }

    .dashboard-finance-cards .dashboard-card-content b{
        font-size:17px;
        white-space:normal !important;
        overflow-wrap:anywhere;
    }

    /* ------------------------------------------------------
       ECHEANCES DEPASSEES
       ------------------------------------------------------ */

    .dashboard-overdue-panel{
        width:100% !important;
        max-width:100% !important;
        overflow:hidden !important;
        box-sizing:border-box;
    }

    .dashboard-overdue-panel .table-responsive{
        width:100% !important;
        max-width:100% !important;
        overflow:visible !important;
        box-sizing:border-box;
    }

    .dashboard-overdue-table{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        table-layout:auto !important;
        border-collapse:separate !important;
        border-spacing:0 !important;
    }

    /* En-tête masqué sur smartphone */
    .dashboard-overdue-table thead{
        display:none !important;
    }

    .dashboard-overdue-table tbody{
        display:block !important;
        width:100% !important;
    }

    /* Chaque échéance devient une carte */
    .dashboard-overdue-table tbody tr{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        margin:0 0 12px 0 !important;
        padding:10px 12px !important;

        box-sizing:border-box !important;

        background:#fff;
        border:1px solid #e1e7ee;
        border-radius:10px;
        box-shadow:0 2px 8px rgba(8,45,87,.05);
    }

    /* Chaque cellule devient une ligne */
    .dashboard-overdue-table tbody tr td{
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        min-height:34px;

        padding:8px 0 !important;

        box-sizing:border-box !important;

        border:0 !important;
        border-bottom:1px solid #edf1f5 !important;

        text-align:right !important;
        white-space:normal !important;
    }

    .dashboard-overdue-table tbody tr td:last-child{
        border-bottom:0 !important;
    }

    /* Libellé à gauche */
    .dashboard-overdue-table tbody tr td::before{
        display:block !important;
        flex:0 0 auto;

        margin-right:12px;

        color:#718096;
        font-size:11px;
        font-weight:700;

        text-align:left;
    }

    .dashboard-overdue-table tbody tr td:nth-child(1)::before{
        content:"Client";
    }

    .dashboard-overdue-table tbody tr td:nth-child(2)::before{
        content:"Prêt";
    }

    .dashboard-overdue-table tbody tr td:nth-child(3)::before{
        content:"Échéance";
    }

    .dashboard-overdue-table tbody tr td:nth-child(4)::before{
        content:"Retard";
    }

    .dashboard-overdue-table tbody tr td:nth-child(5)::before{
        content:"Reste à payer";
    }

    /* ------------------------------------------------------
       CLIENT
       ------------------------------------------------------ */

    .dashboard-overdue-table .overdue-client{
        display:block !important;

        width:auto !important;
        min-width:0 !important;
        max-width:65% !important;

        text-align:right !important;
    }

    .dashboard-overdue-table .overdue-client-icon{
        display:none !important;
    }

    .dashboard-overdue-table .overdue-client strong{
        display:block !important;

        max-width:100%;

        color:#082d57;

        font-size:13px;
        line-height:1.25;

        overflow-wrap:anywhere;
        text-align:right;
    }

    .dashboard-overdue-table .overdue-client small{
        display:block !important;

        margin-top:2px;

        color:#718096;
        font-size:10px;

        text-align:right;
    }

    /* ------------------------------------------------------
       PRET
       ------------------------------------------------------ */

    .dashboard-overdue-table tbody tr td:nth-child(2){
        color:#082d57;
        font-weight:700;
    }

    /* ------------------------------------------------------
       ECHEANCE
       ------------------------------------------------------ */

    .dashboard-overdue-table tbody tr td:nth-child(3){
        color:#344b66;
        white-space:nowrap !important;
    }

    /* ------------------------------------------------------
       RETARD
       ------------------------------------------------------ */

    .dashboard-overdue-table .overdue-days{
        display:inline-flex !important;

        align-items:center;
        justify-content:center;

        padding:4px 8px;

        background:#fde8e8;
        color:#b42318;

        border-radius:20px;

        font-size:11px;
        font-weight:700;

        white-space:nowrap;
    }

    .dashboard-overdue-table .overdue-days i{
        display:none !important;
    }

    /* ------------------------------------------------------
       RESTE A PAYER
       ------------------------------------------------------ */

    .dashboard-overdue-table .overdue-amount{
        display:block !important;

        max-width:65%;

        color:#d92d20 !important;

        font-size:13px !important;
        font-weight:700;

        white-space:normal !important;
        overflow-wrap:anywhere;

        text-align:right;
    }

    /* ------------------------------------------------------
       TRESORERIE ET AUTRES PANNEAUX
       ------------------------------------------------------ */

    .dashboard-grid{
        grid-template-columns:1fr !important;
        gap:12px;
    }

    .dashboard-grid .panel{
        min-width:0 !important;
        width:100%;
    }

    .treasury-lines > div{
        gap:10px;
        flex-wrap:wrap;
    }

    .treasury-lines > div strong{
        text-align:right;
    }

    /* ------------------------------------------------------
       ACCES RAPIDE
       ------------------------------------------------------ */

    .dashboard-quick{
        grid-template-columns:1fr 1fr !important;
        gap:8px;
    }

    .dashboard-quick a{
        min-width:0;
        box-sizing:border-box;
        justify-content:center;
        text-align:center;
    }

    /* Les icônes des accès rapides restent masquées */
    .dashboard-quick a i{
        display:none !important;
    }

    /* ------------------------------------------------------
       ICÔNES ESSENTIELLES UNIQUEMENT
       ------------------------------------------------------ */

    .dashboard-finance-cards .dashboard-card-icon{
        display:none !important;
    }

    .dashboard-cards .dashboard-card:nth-child(2) .dashboard-card-icon{
        display:none !important;
    }

    .dashboard-cards .dashboard-card:nth-child(1) .dashboard-card-icon,
    .dashboard-cards .dashboard-card:nth-child(3) .dashboard-card-icon,
    .dashboard-cards .dashboard-card:nth-child(4) .dashboard-card-icon{
        display:flex;
    }

}


/* ==========================================================
   GRAPHIQUE - OPTIMISATION SMARTPHONE
   ========================================================== */

@media (max-width:700px){

    /* Le panneau du graphique reste dans la largeur de l'écran */
    .dashboard-grid .panel{
        overflow:hidden;
    }

    /* Zone graphique compacte et centrée */
    .bar-chart{
        width:100%;
        height:205px;
        box-sizing:border-box;

        display:flex;
        align-items:flex-end;
        justify-content:space-between;

        gap:4px;

        padding:10px 2px 0;

        overflow:hidden;
    }

    /* Chaque mois prend une part égale de la largeur */
    .bar-group{
        flex:1 1 0;
        min-width:0 !important;
        width:auto;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:flex-end;
    }

    /* Zone contenant les deux barres */
    .bars{
        width:100%;
        height:165px;

        display:flex;
        align-items:flex-end;
        justify-content:center;

        gap:3px;
    }

    /* Barres plus fines sur téléphone */
    .bar{
        width:13px;
        max-width:28%;

        min-height:3px;

        border-radius:4px 4px 0 0;
    }

    /* Libellés des mois */
    .bar-group small{
        margin-top:7px;

        font-size:10px;
        line-height:1;

        white-space:nowrap;

        color:#718096;
    }

    /* Légende plus compacte */
    .chart-legend{
        display:flex;
        justify-content:center;

        gap:18px;

        margin:10px 0 8px;

        font-size:11px;
    }

    .chart-legend span{
        gap:5px;
    }

    .chart-legend i{
        width:11px;
        height:11px;
    }

}


/* ==========================================================
   CORRECTION FINALE — MESSAGES DE SUCCÈS / ERREUR
   ========================================================== */

/*
 * Les messages de succès doivent être verts.
 * Les messages d'erreur doivent rester rouges.
 *
 * Ces règles sont volontairement placées à la fin du fichier
 * afin de prendre priorité sur les anciennes règles .alert.
 */

.alert.success,
.alert-success,
.form-success{
    background:#e8f7ed !important;
    color:#218739 !important;
    border:1px solid #9bd1ad !important;
    border-left:5px solid #218739 !important;
    padding:12px 15px;
    margin:12px 0;
    border-radius:6px;
}

.alert.error,
.alert-error,
.form-error{
    background:#fde8e8 !important;
    color:#b42318 !important;
    border:1px solid #e0a0a0 !important;
    border-left:5px solid #d92d20 !important;
    padding:12px 15px;
    margin:12px 0;
    border-radius:6px;
}


/* ==========================================================
   HAVY FINANCE — IDENTITÉ VISUELLE NOIR / BLEU MARINE /
   JAUNE / VERT
   ----------------------------------------------------------
   Couche visuelle uniquement : aucune logique métier modifiée.
   ========================================================== */

:root{
    --hf-black:#05080d;
    --hf-black-2:#0a0f17;
    --hf-navy:#082d57;
    --hf-navy-2:#0b3f70;
    --hf-blue:#1267b1;
    --hf-yellow:#ffd21a;
    --hf-green:#19b978;
    --hf-green-dark:#087a4c;
    --hf-red:#e5484d;
    --hf-white:#f7fafc;
    --hf-text:#e8eef5;
    --hf-muted:#93a4b7;
    --hf-panel:#0f1824;
    --hf-panel-2:#121f2e;
    --hf-border:#203247;
}

/* BASE */
html,
body{
    background:var(--hf-black) !important;
    color:var(--hf-text) !important;
}

body{
    font-family:Inter,Arial,Helvetica,sans-serif;
}

.shell{
    background:
        radial-gradient(circle at 80% 0%,rgba(18,103,177,.10),transparent 28%),
        var(--hf-black);
}

/* SIDEBAR */
.sidebar{
    background:linear-gradient(180deg,#07101a 0%,#05090f 100%) !important;
    border-right:1px solid #17283a;
    box-shadow:8px 0 28px rgba(0,0,0,.30);
}

.logo{
    border-bottom:1px solid #1a3047 !important;
    background:rgba(255,255,255,.015);
}

.logo strong{
    color:var(--hf-yellow) !important;
}

.logo small{
    color:#9fb0c2 !important;
}

.sidebar nav a{
    color:#dce7f1 !important;
    border-left-color:transparent !important;
    border-radius:8px;
    transition:.18s ease;
}

.sidebar nav a:hover{
    background:rgba(18,103,177,.16) !important;
    border-left-color:var(--hf-yellow) !important;
    color:#fff !important;
}

.sidebar nav a.active{
    background:linear-gradient(90deg,rgba(18,103,177,.32),rgba(18,103,177,.08)) !important;
    border-left-color:var(--hf-yellow) !important;
    color:#fff !important;
}

.sidebar nav .logout{
    border-top:1px solid #203247 !important;
}

/* CONTENU / TOPBAR */
.main{
    background:var(--hf-black);
}

.main>header{
    background:#080e16 !important;
    border-bottom:1px solid #1c2b3d !important;
    box-shadow:0 3px 18px rgba(0,0,0,.18);
}

.main>header b{
    color:#fff !important;
}

.content{
    background:transparent;
}

.head h1,
h1{
    color:#fff !important;
}

.head p{
    color:var(--hf-muted) !important;
}

/* CARTES */
.card,
.panel{
    background:linear-gradient(145deg,var(--hf-panel),#0c1520) !important;
    border:1px solid var(--hf-border) !important;
    color:var(--hf-text);
    box-shadow:0 8px 25px rgba(0,0,0,.20);
}

.card span,
.dashboard-card-content span,
.dashboard-card-content small{
    color:var(--hf-muted) !important;
}

.card b,
.dashboard-card-content b{
    color:#fff !important;
}

.card.yellow,
.dashboard-card.yellow,
.interest-card{
    border-top-color:var(--hf-yellow) !important;
}

/* BOUTONS */
.btn,
button{
    background:var(--hf-yellow) !important;
    color:#07111c !important;
    border:1px solid #e6bd00 !important;
    box-shadow:0 5px 14px rgba(255,210,26,.12);
    transition:.18s ease;
}

.btn:hover,
button:hover{
    background:#ffe04d !important;
    transform:translateY(-1px);
}

.btn.secondary{
    background:#253446 !important;
    color:#e8eef5 !important;
    border-color:#34495f !important;
}

/* ACCÈS RAPIDES */
.quick a,
.report-tabs a,
.dashboard-quick a{
    background:#0c1723 !important;
    border-color:#203247 !important;
    color:#e5edf5 !important;
}

.quick a:hover,
.report-tabs a:hover,
.dashboard-quick a:hover{
    background:rgba(18,103,177,.16) !important;
    border-color:var(--hf-blue) !important;
    color:#fff !important;
}

.dashboard-quick a i{
    color:var(--hf-yellow) !important;
}

/* FILTRES */
.filters,
.filter-grid{
    background:#0b141f !important;
    border-color:#203247 !important;
}

.filters input,
.filter-grid input,
.filter-grid select{
    background:#111d2a !important;
    color:#f1f5f9 !important;
    border-color:#2a3d52 !important;
}

.filter-grid label{
    color:#aebdcd !important;
}

/* TABLEAUX */
table{
    color:#e7eef5;
}

th{
    background:#0a1420 !important;
    color:#b9c8d7 !important;
    border-bottom-color:#26394e !important;
}

td{
    border-bottom-color:#1d2d40 !important;
}

tbody tr:hover{
    background:rgba(18,103,177,.055);
}

/* FORMULAIRES */
.formgrid label,
.edit-field{
    color:#c8d4e0 !important;
}

.formgrid input,
.formgrid select,
.formgrid textarea,
.edit-field input,
.edit-field select,
.edit-field textarea{
    background:#0c1723 !important;
    color:#f4f7fb !important;
    border-color:#2a3d52 !important;
}

.formgrid input:focus,
.formgrid select:focus,
.formgrid textarea:focus,
.edit-field input:focus,
.edit-field select:focus,
.edit-field textarea:focus{
    border-color:var(--hf-blue) !important;
    box-shadow:0 0 0 3px rgba(18,103,177,.16) !important;
}

input[readonly],
.edit-field input[readonly],
.edit-field select:disabled{
    background:#111b27 !important;
    color:#8193a6 !important;
}

/* ALERTES */
.alert.success{
    background:rgba(25,185,120,.12) !important;
    border-color:rgba(25,185,120,.42) !important;
    color:#6ee7b7 !important;
}

.notice{
    background:rgba(255,210,26,.10) !important;
    border-left-color:var(--hf-yellow) !important;
    color:#f8e48a;
}

.alert.error,
.alert{
    color:#ffb5b8;
}

/* BADGES TRANSACTIONS */
.transaction-type{
    background:#182637 !important;
    color:#dbe7f2 !important;
}

.credit{
    color:#39d98a !important;
}

.debit{
    color:#ff7378 !important;
}

.journal-solde{
    color:#fff !important;
}

/* DASHBOARD */
.dashboard-date{
    background:#0e1925 !important;
    border-color:#24374c !important;
    color:#fff !important;
    box-shadow:none !important;
}

.dashboard-card{
    background:linear-gradient(145deg,#101b28,#0c1520) !important;
    border:1px solid #213449 !important;
    box-shadow:0 8px 22px rgba(0,0,0,.18);
}

.dashboard-card:hover{
    box-shadow:0 12px 28px rgba(0,0,0,.30) !important;
    border-color:#2c4965 !important;
}

.dashboard-card-icon{
    background:rgba(18,103,177,.15) !important;
    color:#55a9ed !important;
}

.dashboard-card.yellow .dashboard-card-icon,
.interest-card .dashboard-card-icon{
    background:rgba(255,210,26,.13) !important;
    color:var(--hf-yellow) !important;
}

.danger-card{
    border-top-color:var(--hf-red) !important;
}

.danger-card .dashboard-card-icon{
    background:rgba(229,72,77,.13) !important;
    color:#ff7378 !important;
}

/* ÉCHÉANCES */
.dashboard-overdue-panel{
    border-top-color:var(--hf-red) !important;
}

.overdue-count,
.overdue-days{
    background:rgba(229,72,77,.13) !important;
    color:#ff8589 !important;
}

.overdue-client-icon{
    background:rgba(18,103,177,.14) !important;
    color:#65b5f5 !important;
}

.overdue-client strong{
    color:#fff !important;
}

.overdue-client small{
    color:var(--hf-muted) !important;
}

.overdue-amount{
    color:#ff7378 !important;
}

.dashboard-empty{
    background:#0c1722 !important;
    border-color:#294056 !important;
}

.dashboard-empty-icon{
    background:rgba(25,185,120,.12) !important;
    color:#38d996 !important;
}

.dashboard-empty strong{
    color:#fff !important;
}

.dashboard-empty p{
    color:var(--hf-muted) !important;
}

/* TRÉSORERIE */
.treasury-lines>div{
    border-bottom-color:#1c2c3f !important;
}

.treasury-lines .out strong{
    color:#ff7378 !important;
}

.treasury-total{
    background:rgba(255,210,26,.09) !important;
    border-color:rgba(255,210,26,.32) !important;
    color:#fff !important;
}

/* GRAPHIQUE */
.chart-legend{
    color:#9bacbe !important;
}

.legend-loan,
.loan-bar{
    background:var(--hf-blue) !important;
}

.legend-repayment,
.repayment-bar{
    background:var(--hf-yellow) !important;
}

.bar-chart{
    border-bottom-color:#294056 !important;
}

.bar-group small{
    color:#8295aa !important;
}

/* ÉCRANS DE MODIFICATION */
.edit-panel{
    background:#0e1925 !important;
    border-color:#23374c !important;
    box-shadow:0 10px 30px rgba(0,0,0,.25) !important;
}

.edit-panel-head{
    background:linear-gradient(180deg,#111e2c,#0d1722) !important;
    border-bottom-color:#23374c !important;
}

.edit-panel-head h2,
.edit-summary-item strong,
.interest-preview-title,
.interest-preview-grid strong{
    color:#fff !important;
}

.edit-panel-head p,
.edit-help,
.edit-summary-item span,
.interest-preview-grid span{
    color:#91a3b6 !important;
}

.edit-summary{
    background:#0b1520 !important;
    border-color:#23374c !important;
}

.edit-summary-item,
.interest-preview-grid div{
    background:#111d2a !important;
    border-color:#263a50 !important;
}

.admin-badge{
    background:rgba(255,210,26,.11) !important;
    border-color:rgba(255,210,26,.30) !important;
    color:#ffe477 !important;
}

.btn.cancel{
    background:#202d3d !important;
    color:#d8e2ec !important;
    border-color:#34495f !important;
}

.btn.save{
    background:var(--hf-yellow) !important;
    color:#07111c !important;
}

.interest-preview{
    background:#0c1723 !important;
    border-color:#263b50 !important;
}

.interest-preview-grid .total{
    border-color:var(--hf-yellow) !important;
}

/* VERT = VALIDATION / ARGENT DISPONIBLE */
.success,
.status-success,
.text-success{
    color:#35d995 !important;
}

.badge-success{
    background:rgba(25,185,120,.14) !important;
    color:#48dfa0 !important;
}

/* PIED DE PAGE */
footer{
    color:#73869b !important;
}

/* LOGIN CLASSIQUE */
.login{
    background:
        radial-gradient(circle at 20% 10%,rgba(18,103,177,.24),transparent 35%),
        linear-gradient(135deg,#05080d,#082d57 65%,#05080d) !important;
}

.login-card{
    background:#0e1925 !important;
    border:1px solid #263b50;
    color:#fff;
}

.login-card p{
    color:#91a3b6 !important;
}

.login-card input{
    background:#0a1420 !important;
    color:#fff !important;
    border-color:#2a3e53 !important;
}

.login-card button{
    background:var(--hf-yellow) !important;
    color:#07111c !important;
}

/* ANCIEN ÉCRAN LOGIN MODERNE */
.login-page{
    background:
        radial-gradient(circle at 80% 10%,rgba(18,103,177,.20),transparent 30%),
        var(--hf-black) !important;
}

.login-container{
    background:#0d1723 !important;
    border-color:#1f4568 !important;
    box-shadow:0 25px 70px rgba(0,0,0,.45) !important;
}

.login-form-section{
    background:#0d1723 !important;
}

.login-welcome span,
.login-info-small{
    color:var(--hf-yellow) !important;
}

.login-welcome h1{
    color:#fff !important;
}

.login-welcome p,
.login-info-header p{
    color:#91a3b6 !important;
}

.login-field label{
    color:#d4deea !important;
}

.login-input-wrapper input{
    background:#09131e !important;
    color:#fff !important;
    border-color:#294056 !important;
}

.login-input-wrapper input:focus{
    border-color:var(--hf-blue) !important;
    box-shadow:0 0 0 3px rgba(18,103,177,.16) !important;
}

.login-button{
    background:var(--hf-blue) !important;
    color:#fff !important;
}

.login-button:hover{
    background:var(--hf-navy-2) !important;
}

.login-info-section{
    background:
        radial-gradient(circle at 80% 20%,rgba(255,210,26,.10),transparent 28%),
        linear-gradient(145deg,#082d57,#06111d) !important;
}

.login-info-header h2{
    color:#fff !important;
}

.login-info-header h2 strong{
    color:var(--hf-yellow) !important;
}

.login-security,
.login-footer{
    color:#91a3b6 !important;
}

.login-footer strong{
    color:#fff !important;
}

/* RESPONSIVE : uniquement couleurs/présentation, pas de changement de structure */
@media(max-width:700px){
    .main>header{
        background:#080e16 !important;
    }

    .sidebar{
        box-shadow:none;
    }
}