/* Polices chargées dans index.html : Inter (corps) + Plus Jakarta Sans (titres) */

*,*::before,*::after{box-sizing:border-box}

html,body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    margin:0;
    padding:0;
    background:#F4F6F8;
    color:#1F2937;
    font-size:15px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* ===== POLICE D'AFFICHAGE — titres & valeurs clés ===== */
.mud-typography-h1,.mud-typography-h2,.mud-typography-h3,
.mud-typography-h4,.mud-typography-h5,.mud-typography-h6,
.page-title-text,.kpi-card .kpi-value,.glass-credit-card .gc-value,
.hero-banner-text h2,.mud-dialog .mud-dialog-title,
.card-main .card-header h6,.data-container .data-header h5,.page-header h4{
    font-family:'Plus Jakarta Sans','Inter',-apple-system,sans-serif;
    letter-spacing:-0.01em;
}

/* ===== LOGIN SPLIT-SCREEN ===== */
.login-split-wrapper{display:flex;width:100%;min-height:100vh}
.login-form-side{
    flex:1;
    display:flex;align-items:center;justify-content:center;
    padding:2rem;
    position:relative;overflow:hidden;
}
.login-form-side .login-card{width:100%;max-width:460px;z-index:2}
.login-illustration-side{
    flex:1;
    background:linear-gradient(135deg,#008753 0%,#004d2e 100%);
    display:flex;align-items:center;justify-content:center;
    position:relative;overflow:hidden;
}
.login-illustration-side::before{
    content:'';
    position:absolute;inset:0;
    background:
        radial-gradient(ellipse at 20% 50%,rgba(94,164,62,0.3) 0%,transparent 60%),
        radial-gradient(ellipse at 80% 20%,rgba(255,255,255,0.08) 0%,transparent 50%);
}
.login-illustration-content{position:relative;z-index:1;text-align:center;padding:2rem}
.login-illustration-content h2{color:#fff;font-size:2rem;font-weight:700;margin-bottom:1rem}
.login-illustration-content p{color:rgba(255,255,255,0.7);font-size:1rem;line-height:1.6;max-width:380px}
.login-brand{text-align:center;margin-bottom:2rem}
.login-brand img{width:140px;height:auto;margin-bottom:0.75rem}
.login-brand h4{font-weight:700;font-size:1.5rem;color:#1A2D1F;margin:0}
.login-brand p{color:#4A5568;font-size:0.875rem;margin-top:0.25rem}

/* Login card inputs polish
   NB: ne JAMAIS mettre de background sur .mud-input-outlined-border : cet overlay
   est posé (position:absolute) PAR-DESSUS l'input et masquerait le texte saisi.
   Le fond se met sur le conteneur .mud-input-outlined (derrière l'input). */
.login-card .mud-input-outlined .mud-input-outlined-border{
    border-radius:10px!important;
    background:transparent!important;
}
.login-card .mud-input-outlined{background:#F9FAFB!important;padding-top:0!important}
.login-card .mud-input-outlined.mud-focused{background:#fff!important}

/* ===== HERO BANNER (Dashboard) ===== */
.hero-banner{
    position:relative;
    background:linear-gradient(135deg,#008753 0%,#004d2e 100%);
    border-radius:12px;
    padding:2rem 2.5rem;margin-bottom:1.5rem;
    overflow:hidden;
    box-shadow:0 10px 40px rgba(0,135,83,0.2);
}
.hero-banner::before{
    content:'';
    position:absolute;inset:0;
    background:
        radial-gradient(ellipse at 20% 50%,rgba(94,164,62,0.2) 0%,transparent 60%),
        radial-gradient(ellipse at 80% 20%,rgba(255,255,255,0.1) 0%,transparent 50%);
}
.hero-banner-content{
    position:relative;z-index:1;
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:1rem;
}
.hero-banner-text h2{color:#fff;font-size:1.625rem;font-weight:700;margin:0 0 0.375rem}
.hero-banner-text p{color:rgba(255,255,255,0.75);font-size:0.9375rem;margin:0}

/* ===== SIDEBAR / DRAWER ===== */
.app-logo{
    display:flex;align-items:center;justify-content:center;
    padding:1rem;
    border-bottom:1px solid #E2E8F0;
}
.app-logo img{max-width:100%;height:auto}
.sidebar-nav-section{
    padding:14px 1.25rem 6px;
    font-size:0.72rem;font-weight:700;
    text-transform:uppercase;letter-spacing:0.07em;
    color:#64748B;
}

/* Sidebar — largeur fixe, pas de scroll horizontal.
   Le conteneur lui-meme ne defile pas : c'est le menu (.mud-navmenu) qui scrolle. */
.mud-drawer .mud-drawer-content{
    width:250px!important;
    overflow:hidden!important;
}
/* NB: ne PAS mettre overflow-x:hidden ici. Sur un sous-conteneur deplie (.mud-collapse-entered,
   overflow:initial), forcer overflow-x:hidden fait passer overflow-y a "auto" (spec CSS) -> le
   sous-menu devient une boite de defilement qui capte la molette et bloque le scroll de la sidebar. */
.mud-drawer .mud-drawer-content *{max-width:100%!important;word-wrap:break-word!important}

/* Logo fige en haut, et le menu defile verticalement quand il depasse la hauteur de
   l'ecran (MudBlazor ne met PAS d'overflow-y sur .mud-drawer-content -> sinon on ne
   peut pas atteindre les entrees du bas, notamment quand un MudNavGroup est deplie). */
.app-logo{flex:0 0 auto}
.mud-drawer .mud-drawer-content>.mud-navmenu{
    flex:1 1 auto;
    min-height:0;
    overflow-x:hidden!important;
    overflow-y:auto!important;
}

/* Nav links dans le drawer */
.mud-drawer .mud-nav-link,
.mud-drawer a.mud-nav-link,
.mud-nav-menu .mud-nav-link{
    color:#1F2937!important;
    border-radius:0!important;
    padding:0.5625rem 1.25rem!important;
    margin:0!important;
    font-weight:600!important;
    font-size:0.9rem!important;
    background-color:transparent!important;
}
.mud-drawer .mud-nav-link .mud-icon-root,
.mud-drawer .mud-nav-link svg{
    color:#4B5563!important;
}
.mud-drawer .mud-nav-link:hover,
.mud-drawer a.mud-nav-link:hover{
    background:rgba(0,135,83,0.08)!important;
    color:#008753!important;
}
.mud-drawer .mud-nav-link:hover .mud-icon-root,
.mud-drawer .mud-nav-link:hover svg{
    color:#008753!important;
}

/* État actif — fond vert plein, bordure gauche verte, pas d'arrondi */
.mud-nav-link.nav-active,
.mud-drawer .mud-nav-link.nav-active,
.mud-nav-link.active:not(.mud-nav-group),
.mud-drawer .mud-nav-link.active:not(.mud-nav-group){
    background-color:#008753!important;
    color:#ffffff!important;
    font-weight:700!important;
    border-radius:0!important;
    border-left:3px solid #004d2e!important;
}
.mud-nav-link.nav-active *,
.mud-nav-link.active *,
.mud-drawer .mud-nav-link.nav-active *,
.mud-drawer .mud-nav-link.active *{
    color:#ffffff!important;
}
.mud-nav-link.nav-active .mud-nav-link-icon,
.mud-nav-link.active .mud-nav-link-icon,
.mud-nav-link.nav-active .mud-icon-root,
.mud-nav-link.active .mud-icon-root,
.mud-nav-link.nav-active svg,
.mud-nav-link.active svg{
    color:#ffffff!important;
    fill:#ffffff!important;
}

/* Nav group header */
.mud-nav-group .mud-nav-link{
    font-weight:700!important;
    font-size:0.9rem!important;
    color:#111827!important;
    border-radius:0!important;
}

/* Sous-éléments dans un groupe */
.mud-nav-group .mud-nav-menu .mud-nav-link{
    padding-left:2.25rem!important;
    font-size:0.875rem!important;
    color:#374151!important;
}

/* ===== KPI CARDS ===== */
.kpi-row{
    display:flex;gap:1rem;margin-bottom:1.5rem;
    flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;
}
.kpi-row::-webkit-scrollbar{height:4px}
.kpi-row::-webkit-scrollbar-track{background:transparent}
.kpi-row::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:4px}
.kpi-card{
    background:#ffffff;border-radius:12px;border:none;
    padding:1.25rem;
    box-shadow:0 6px 24px rgba(0,0,0,0.04);
    display:flex;align-items:center;gap:1rem;
    transition:transform 300ms ease,box-shadow 300ms ease;
    flex:1;min-width:180px;
}
.kpi-card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}
.kpi-card .kpi-icon-circle{
    width:48px;height:48px;min-width:48px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:#fff;
    border:2px solid #E2E8F0;
    font-size:1.25rem;
}
.kpi-card .kpi-icon-circle.primary  {border-color:rgba(0,135,83,0.25);color:#008753;background:rgba(0,135,83,0.04)}
.kpi-card .kpi-icon-circle.success  {border-color:rgba(26,160,83,0.25);color:#1AA053;background:rgba(26,160,83,0.04)}
.kpi-card .kpi-icon-circle.info     {border-color:rgba(7,154,162,0.25);color:#079AA2;background:rgba(7,154,162,0.04)}
.kpi-card .kpi-icon-circle.warning  {border-color:rgba(241,106,27,0.25);color:#F16A1B;background:rgba(241,106,27,0.04)}
.kpi-card .kpi-icon-circle.error    {border-color:rgba(192,50,33,0.25);color:#C03221;background:rgba(192,50,33,0.04)}
.kpi-card .kpi-icon-circle.secondary{border-color:rgba(94,164,62,0.25);color:#5EA43E;background:rgba(94,164,62,0.04)}
.kpi-card .kpi-info{flex:1;min-width:0}
.kpi-card .kpi-label{font-size:0.75rem;color:#4A5568;font-weight:500;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-card .kpi-value{font-size:1.375rem;font-weight:700;color:#1A2D1F;line-height:1.2}
.kpi-card .kpi-trend{font-size:0.75rem;font-weight:600;margin-top:2px}
.kpi-card .kpi-trend.up{color:#1AA053}
.kpi-card .kpi-trend.down{color:#C03221}

/* ===== CARDS & DATA CONTAINERS ===== */
.card-main{
    background:#ffffff;border:none;border-radius:12px;
    box-shadow:0 6px 24px rgba(0,0,0,0.04);
    margin-bottom:1.5rem;
}
.card-main .card-header{
    padding:1.25rem 1.5rem;
    border-bottom:1px solid #E2E8F0;
    display:flex;align-items:center;justify-content:space-between;
}
.card-main .card-header h6{
    font-weight:600;color:#1A2D1F;margin:0;font-size:1rem;
}
.card-main .card-body{padding:1.5rem}

.data-container{
    background:#ffffff;border:1px solid #E2E8F0;border-radius:0;
    box-shadow:none;
    margin-bottom:1.5rem;overflow:hidden;
}
.data-container .data-header{
    padding:1.25rem 1.5rem;
    border-bottom:1px solid #E2E8F0;
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:1rem;
    background:#F8FAFC;
}
.data-container .data-header h5{
    font-weight:700;color:#111827;margin:0;font-size:1rem;
}
.data-container .data-header-right{
    display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;
}
.page-header{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem;
}
.page-header h4{font-weight:700;color:#111827;margin:0;font-size:1.25rem}

/* Page title area — bloc titre signature avec barre d'accent verte */
.page-title-area{margin-bottom:1.5rem}
.page-title-row{display:flex;align-items:flex-start;gap:0.875rem}
.page-title-accent{
    flex:0 0 auto;
    width:4px;align-self:stretch;min-height:2.25rem;
    border-radius:99px;
    background:linear-gradient(180deg,#008753 0%,#5EA43E 100%);
    box-shadow:0 2px 8px rgba(0,135,83,0.3);
}
.page-title-text-wrap{min-width:0}
.page-title-area .page-title-text{
    font-weight:800;color:#0F1B12;margin:0;
    font-size:1.375rem;line-height:1.2;letter-spacing:-0.02em;
}
.page-title-area .page-title-desc{
    margin:0.25rem 0 0;
    color:#64748B;font-size:0.875rem;line-height:1.5;font-weight:400;
}
.page-title-area .page-title-divider{
    margin-top:0.875rem;
    border-color:#E8EDEA;
}

/* ===== BADGES ===== */
.badge-hope{
    display:inline-flex;align-items:center;
    padding:2px 10px;border-radius:50rem;
    font-size:0.75rem;font-weight:500;line-height:1.5;
}
.badge-success {background:#E8FADF!important;color:#3A9B13!important}
.badge-warning {background:rgba(241,106,27,0.08);color:#F16A1B}
.badge-error   {background:rgba(192,50,33,0.08);color:#C03221}
.badge-info    {background:rgba(7,154,162,0.08);color:#079AA2}
.badge-primary {background:rgba(0,135,83,0.08);color:#008753}
.badge-default {background:#F8F9FA;color:#6C757D}

/* ===== GLASS CREDIT CARD ===== */
.glass-credit-card{
    position:relative;padding:1.5rem;border-radius:16px;
    background:linear-gradient(135deg,rgba(0,135,83,0.9) 0%,rgba(0,77,46,0.95) 100%);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,0.25);
    box-shadow:0 12px 40px rgba(0,135,83,0.25);
    overflow:hidden;color:#fff;
}
.glass-credit-card::before{
    content:'';position:absolute;top:-40px;right:-40px;
    width:160px;height:160px;border-radius:50%;
    background:rgba(255,255,255,0.06);
}
.glass-credit-card .gc-value{
    font-size:2rem;font-weight:800;line-height:1.1;
    margin:0.25rem 0;position:relative;z-index:1;
}
.glass-credit-card .gc-label{
    font-size:0.6875rem;text-transform:uppercase;letter-spacing:0.08em;
    color:rgba(255,255,255,0.6);font-weight:500;position:relative;z-index:1;
}

/* ===== FORMULAIRES — inputs soft & focus halo vert ===== */
/* Couleur du texte saisi (corrige le texte « blanc/invisible », incl. autofill) */
.mud-input{color:#111827!important}
.mud-input-root,.mud-input-slot,input,textarea,select,
.mud-input-outlined input,.mud-input-outlined .mud-input-slot,
.mud-select .mud-input-slot,.mud-input-control input{
    color:#111827!important;
    -webkit-text-fill-color:#111827!important;
    caret-color:#008753!important;
}
.mud-input-root::placeholder,input::placeholder{color:#94A3B8!important;-webkit-text-fill-color:#94A3B8!important;opacity:1!important}
/* Texte autofill Chrome (sinon fond bleu + texte clair) */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
    -webkit-text-fill-color:#111827!important;
    -webkit-box-shadow:0 0 0 1000px #FFFFFF inset!important;
}

/* Variante OUTLINED : fond blanc net, coins arrondis, halo au focus, hauteur compacte */
.mud-input-outlined{background:#FFFFFF!important;border-radius:10px!important}
.mud-input-outlined .mud-input-outlined-border{
    border-color:#C2CCD6!important;
    border-radius:10px!important;
    transition:border-color 150ms ease,box-shadow 150ms ease;
}
.mud-input-outlined:hover .mud-input-outlined-border{border-color:#94A3B8!important}
.mud-input-outlined.mud-focused .mud-input-outlined-border{
    border-color:#008753!important;border-width:1.5px!important;
    box-shadow:0 0 0 3px rgba(0,135,83,0.12)!important;
}
.mud-input-outlined.mud-error .mud-input-outlined-border{border-color:#C03221!important}
.mud-input-outlined.mud-error.mud-focused .mud-input-outlined-border{
    box-shadow:0 0 0 3px rgba(192,50,33,0.12)!important;
}
/* Hauteur compacte des champs outlined : padding réel 18.5px → 11.5px,
   et recentrage du label au repos pour rester aligné (valeurs MudBlazor 6.13) */
.mud-input > input.mud-input-root-outlined,
div.mud-input-slot.mud-input-root-outlined{
    padding-top:11.5px!important;padding-bottom:11.5px!important;
}
.mud-input-label-outlined{transform:translate(12px, 11px) scale(1)!important}
.mud-input-label-outlined.mud-input-label-margin-dense{transform:translate(14px, 11px) scale(1)!important}
/* Le label flottant (focus / rempli) reste posé sur la bordure haute */
.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined{
    transform:translate(14px, -7px) scale(0.75)!important;
}
.mud-input-control .mud-input{font-size:0.9rem!important}

/* Variante UNDERLINE / TEXT (recherches de toolbar) */
.mud-input.mud-input-text:after{background-color:#008753!important;height:2px!important}
.mud-input.mud-input-text:before{border-bottom-color:#D8DEE4!important}
.mud-input.mud-input-text:hover:not(.mud-disabled):before{border-bottom-color:#B6C2CC!important}

/* Labels : passage au vert au focus */
.mud-input-control .mud-input-label.mud-input-label-inputcontrol.mud-focused,
.mud-input.mud-focused+.mud-input-label,
label.mud-input-label.mud-focused{color:#008753!important}

/* Champs de recherche avec icône : look « pilule » discret */
.mud-table-toolbar .mud-input-text,
.mud-table-toolbar .mud-input-adornment-start{align-items:center}
.mud-input-adornment .mud-icon-root{color:#94A3B8!important}

/* ===== BOUTONS ===== */
.mud-button-filled{
    box-shadow:none!important;
    font-weight:600!important;
    border-radius:8px!important;
    text-transform:none!important;
    padding:6px 18px!important;
    font-size:0.8125rem!important;
    transition:transform 150ms ease,box-shadow 150ms ease,background-color 150ms ease!important;
}
.mud-button-filled:hover{transform:translateY(-1px)!important}
.mud-button-filled-primary{
    background:#008753!important;
    box-shadow:0 4px 12px rgba(0,135,83,0.22)!important;
}
.mud-button-filled-primary:hover{background:#006d43!important;box-shadow:0 6px 18px rgba(0,135,83,0.3)!important}
.mud-button-filled-secondary{box-shadow:0 4px 12px rgba(94,164,62,0.2)!important}
.mud-button-filled-success{box-shadow:0 4px 12px rgba(26,160,83,0.2)!important}
.mud-button-outlined{
    border-radius:8px!important;text-transform:none!important;font-weight:600!important;
    border-width:1.5px!important;transition:all 150ms ease!important;
}
.mud-button-outlined:hover{background:rgba(0,135,83,0.06)!important}
.mud-button .mud-button-icon{margin-right:5px!important}

/* Boutons icônes dans les tables — on PRÉSERVE la couleur sémantique (vert/rouge/primary) */
.mud-table-body .mud-icon-button{
    width:34px!important;height:34px!important;
    border-radius:8px!important;
    transition:background-color 150ms ease,transform 150ms ease!important;
}
.mud-table-body .mud-icon-button:hover{
    background:#E9F7EF!important;
    transform:translateY(-1px)!important;
}
.mud-table-body .mud-icon-button .mud-icon-root,
.mud-table-body .mud-icon-button svg,
.mud-table-body .mud-icon-button i{
    font-size:1.05rem!important;
}
/* Icônes FontAwesome dans les boutons d'action : taille & alignement corrects */
.mud-icon-button i.fas,
.mud-icon-button i.far,
.mud-icon-button i.fab{
    font-size:1rem!important;line-height:1!important;
}
.mud-icon-button .m-4{margin:0!important}

/* ===== TABLES — carte soft moderne ===== */
/* Conteneur : carte arrondie, bordure fine, ombre douce */
.mud-table{
    border:1px solid #E8EDEA!important;
    border-radius:14px!important;
    box-shadow:0 6px 24px rgba(15,27,18,0.05)!important;
    overflow:hidden!important;
}
.mud-table-root{border:none!important}
.mud-table.mud-table-bordered .mud-table-cell{border-right:none!important}

/* En-tête : teinte verte discrète, libellés capitales */
.mud-table-head .mud-table-cell{
    font-size:0.7rem!important;
    font-weight:700!important;
    text-transform:uppercase!important;
    letter-spacing:0.04em!important;
    color:#4A5D52!important;
    background:linear-gradient(180deg,#F4F9F6 0%,#EEF5F1 100%)!important;
    padding:11px 14px!important;
    border-bottom:1px solid #DCE7E1!important;
    white-space:nowrap!important;
}
.mud-table-head .mud-table-cell .mud-button-root{font-weight:700!important;color:#4A5D52!important}
.mud-table-head .mud-table-sort-label:hover{color:#008753!important}

/* Corps : cellules aérées, séparateurs très légers */
.mud-table-body .mud-table-cell{
    padding:11px 14px!important;
    border-bottom:1px solid #F1F4F2!important;
    vertical-align:middle!important;
    color:#1F2937!important;
    font-size:0.875rem!important;
}
.mud-table-dense .mud-table-body .mud-table-cell{padding:8px 14px!important}
.mud-table-body .mud-table-row:last-child .mud-table-cell{border-bottom:none!important}
.mud-table-body .mud-table-row{transition:background 150ms ease}
.mud-table-body .mud-table-row:hover{background:#F3FBF6!important}
.mud-table-body .mud-table-row:hover .mud-table-cell,
.mud-table-body .mud-table-row:hover *{color:inherit!important;text-decoration:none!important}
.mud-table-body .mud-table-row.mud-selected-row{
    background:#ECFDF5!important;
    box-shadow:inset 3px 0 0 #008753!important;
}

/* Lignes zébrées plus douces */
.mud-table-striped .mud-table-body .mud-table-row:nth-of-type(even){background:#FBFCFB!important}
.mud-table-striped .mud-table-body .mud-table-row:nth-of-type(even):hover{background:#F3FBF6!important}

/* Pagination */
.mud-table-pagination{
    border-top:1px solid #F1F4F2!important;
    padding:6px 12px!important;
    background:#FAFBFA!important;
}
.mud-table-pagination .mud-table-pagination-toolbar{font-size:0.8125rem!important}
.mud-table-pagination .mud-button{border-radius:8px!important}
.mud-table-pagination .mud-select{font-size:0.8125rem!important}

/* Toolbar (titre + recherche + actions au-dessus de la table) */
.mud-table-toolbar{
    padding:14px 16px!important;
    border-bottom:1px solid #EDF1EF!important;
    background:#fff!important;
    gap:0.75rem!important;
}

/* Colonne N° — étroite, centrée, chiffres alignés, discrète */
.rownum-col{
    width:52px!important;
    text-align:center!important;
    font-variant-numeric:tabular-nums!important;
    font-feature-settings:"tnum"!important;
}
.mud-table-body .rownum-col{color:#94A3B8!important;font-weight:600!important}
.mud-table-head .rownum-col{color:#94A3B8!important}
.mud-table-body .mud-table-row:hover .rownum-col{color:#008753!important}

/* Lisibilité du contenu : chiffres alignés partout, libellés mobiles nets */
.mud-table-body .mud-table-cell{line-height:1.45!important}
.mud-table-cell[data-label]:before{font-weight:700!important;color:#64748B!important}

/* Cellules actions dans les tables */
.mud-table-body .mud-table-cell:last-child{text-align:right!important;white-space:nowrap!important}

/* Dialog */
/* ===== TEXTES — meilleure lisibilité ===== */
.mud-text,.mud-typography{color:#1F2937!important}
.mud-text-secondary,.mud-typography-secondary{color:#4B5563!important}
.mud-alert .mud-alert-message{color:#1F2937!important;font-weight:500!important}
.mud-chip{font-weight:500!important}
.mud-link{color:#008753!important}
/* ===== TABS — style moderne, indicateur vert ===== */
.mud-tabs-toolbar{border-bottom:1px solid #E8EDEA!important}
.mud-tab{
    font-weight:600!important;color:#64748B!important;
    text-transform:none!important;font-size:0.9rem!important;
    border-radius:8px 8px 0 0!important;
    padding:10px 18px!important;min-height:46px!important;
    transition:color 150ms ease,background-color 150ms ease!important;
}
.mud-tab:hover{color:#008753!important;background:rgba(0,135,83,0.05)!important}
.mud-tab.mud-tab-active{color:#008753!important;font-weight:700!important}
.mud-tab-slider,.mud-tabs-tabbar-slider{
    background:linear-gradient(90deg,#008753,#5EA43E)!important;
    height:3px!important;border-radius:3px 3px 0 0!important;
}
.mud-tabs-panels{padding-top:1.25rem!important}

/* ===== PAGE PARAMÈTRES — champs plus courts, disposition 2 colonnes ===== */
.settings-panel .mud-card{
    max-width:920px;margin-inline:0;
    border:1px solid #E8EDEA!important;border-radius:14px!important;
    box-shadow:0 6px 24px rgba(15,27,18,0.05)!important;
}
/* Les champs (enfants directs de .mud-card-content) passent en grille responsive */
.settings-panel .mud-card-content{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important;
    gap:0.5rem 1.5rem!important;
    padding:1.5rem!important;
}
.settings-panel .mud-card-content br{display:none!important}
/* Actions + grands champs (textarea token) sur toute la largeur */
.settings-panel .mud-card-content .mud-card-actions,
.settings-panel .mud-card-content .mud-input-control:has(textarea){grid-column:1 / -1!important}
.settings-panel .mud-card-actions{padding:0.5rem 1.5rem 1.25rem!important}
@media(max-width:720px){
    .settings-panel .mud-card-content{grid-template-columns:1fr!important}
}

/* AppTitle component */
.app-title h5{font-weight:700;color:#111827;margin-bottom:0.25rem}

/* Dialog */
.mud-dialog{border-radius:14px!important}
.mud-dialog .mud-dialog-title{font-weight:700;color:#111827;padding:1.5rem 1.5rem 0.5rem}
.mud-dialog .mud-dialog-content{padding:1.25rem 1.5rem;color:#374151;min-width:400px}
.mud-dialog .mud-dialog-actions{padding:0.875rem 1.5rem 1.25rem;gap:0.5rem;border-top:1px solid #F1F4F2}

/* Formulaires en dialog : MÊME style que la page Paramètres — 2 colonnes, aligné à gauche.
   Ciblé via :has(.mud-input-control) → seuls les dialogs-formulaires sont concernés
   (les dialogs de détail / confirmation / onglets gardent leur disposition). */
.mud-dialog .mud-dialog-content{min-width:min(580px,92vw)}
.mud-dialog .mud-dialog-content:has(.mud-input-control){
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;
    gap:0.4rem 1.5rem!important;
    align-content:start!important;
    justify-items:stretch!important;
}
/* Champs longs (textarea) sur toute la largeur */
.mud-dialog-content:has(.mud-input-control) .mud-input-control:has(textarea){grid-column:1 / -1!important}
@media(max-width:600px){
    .mud-dialog .mud-dialog-content{min-width:auto!important}
    .mud-dialog .mud-dialog-content:has(.mud-input-control){grid-template-columns:1fr!important}
}

/* Snackbar, Paper */
.mud-snackbar{border-radius:12px!important}
.mud-paper{border-radius:12px!important}

/* Empty state */
.empty-state{text-align:center;padding:3rem 1rem;color:#4A5568}
.empty-state .empty-state-icon{font-size:3rem;margin-bottom:1rem;opacity:0.15}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
    .login-split-wrapper{flex-direction:column}
    .login-illustration-side{display:none}
    .login-form-side{padding:1.5rem}
    .hero-banner{padding:1.5rem}
    .hero-banner-text h2{font-size:1.25rem}
    .kpi-card{min-width:160px}
}

/* ===== SCROLLBARS ===== */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#9CA3AF}

/* ===== SELECTS / DROPDOWNS ===== */
.mud-select .mud-input-outlined-border{border-radius:6px!important}
.mud-list-item:hover{background:#F0FDF4!important}
.mud-selected-item{background:#ECFDF5!important;color:#008753!important}

/* ===== TRANSITION DE PAGE — fondu fluide à chaque navigation ===== */
.page-fade{
    animation: pageFade 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}
@keyframes pageFade{
    from{ opacity:0; transform: translateY(8px); }
    to  { opacity:1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
    .page-fade{ animation: none; }
}

/* ===== Toolbars : alignement vertical uniforme des boutons + du menu « Exporter » =====
   Le menu Exporter (MudMenu) et les MudButton sont des inline-block dont l'alignement
   par défaut diffère -> on force tout au centre pour qu'ils soient sur la même ligne. */
.mud-table-toolbar .mud-button-root,
.mud-table-toolbar .mud-menu,
.mud-toolbar .mud-button-root,
.mud-toolbar .mud-menu,
.mud-menu.wassi-export,
.wassi-export .mud-button-root {
    vertical-align: middle !important;
}