:root{
  /* Thème sombre « adouci » — palette vérifiée au contraste WCAG.
     Le fond n'est pas un quasi-noir : moins de halo autour du texte clair, et
     quatre niveaux de surface nettement séparés (fond, panneau, en-tête/champ,
     survol) pour que la profondeur se lise sans ombre portée. */
  /* Canevas aligné sur celui de la page d'accueil (--ink) : les halos de
     couleur du fond ont besoin d'une base sombre et neutre pour ressortir.
     Les panneaux, eux, restent plus clairs qu'avant afin de garder leur
     lisibilité par-dessus. */
  --bg:#0a0b14; --panel:#1a2131; --panel2:#232c3e; --panel3:#2f3a4e;

  /* Deux familles de traits, volontairement distinctes :
     --line / --line2 séparent (décoratif, hors critère WCAG) ;
     --bord dessine le contour des champs et boutons, et doit donc atteindre
     3:1 sur toutes les surfaces au titre du critère 1.4.11. */
  --line:#333d4d; --line2:#46536b; --bord:#7e879b;

  --txt:#eef2f9; --txt2:#ccd4e2; --muted:#95a0b5;

  /* Un seul accent, décliné en deux clartés. Le dégradé bleu → violet
     d'origine mêlait deux teintes sur le bouton principal : effet décoratif,
     lisibilité moindre. Le violet ne subsiste que sur la marque. */
  --accent:#5b9bff; --accent-2:#3f7fe0; --marque:#9b86ff;

  --ok:#5cd89b;   --ok-bg:#16311f;   --ok-line:#2c6a48;
  --warn:#f0c25f; --warn-bg:#332c1c; --warn-line:#69582a;
  --bad:#ff8a93;  --bad-bg:#341d24;  --bad-line:#6d343d;
  /* Surfaces translucides : le fond coloré se devine derrière les panneaux
     sans jamais passer sous le texte, qui reste sur une base opaque à 88 %. */
  --verre:rgba(26,33,49,.88); --verre2:rgba(35,44,62,.9);
  --ombre:0 1px 2px rgba(0,0,0,.24), 0 2px 6px rgba(0,0,0,.18);
  --ombre-h:0 4px 14px rgba(0,0,0,.32);
  --tap:44px; --r:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* L'attribut `hidden` s'appuie sur [hidden]{display:none} de la feuille du navigateur,
   de spécificité (0,1,0) : n'importe quelle règle par identifiant, comme #login{display:grid},
   la neutralise. Cette déclaration rétablit le comportement attendu partout. */
[hidden]{display:none !important}
body{background:var(--bg);color:var(--txt);font:15px/1.6 Inter,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}

/* Formatage des montants */
.montant{font-variant-numeric:tabular-nums;white-space:nowrap}
.devise{font-size:0.75em;font-weight:600;color:var(--accent);margin-left:2px;vertical-align:baseline}

/* ---------------------------------------------- fond commun avec l'accueil */
.aurora{position:fixed;inset:-25vh -10vw;z-index:-2;filter:blur(90px);pointer-events:none;
  /* Deux fois moins marqué que sur la vitrine : ici il passe sous des tableaux
     de chiffres, il doit rester un fond et non un motif. */
  opacity:.3}
.aurora i{position:absolute;display:block;border-radius:50%;mix-blend-mode:screen;
  animation:derive 34s ease-in-out infinite}
.aurora i:nth-child(1){width:52vw;height:52vw;left:-8vw;top:0;background:radial-gradient(circle,#7c5cff,transparent 62%)}
.aurora i:nth-child(2){width:46vw;height:46vw;right:-6vw;top:-8vh;background:radial-gradient(circle,#ff5c8a,transparent 62%);animation-delay:-9s}
.aurora i:nth-child(3){width:44vw;height:44vw;left:24vw;top:48vh;background:radial-gradient(circle,#2ee6a8,transparent 62%);animation-delay:-18s}
.aurora i:nth-child(4){width:38vw;height:38vw;right:6vw;top:66vh;background:radial-gradient(circle,#3ba9ff,transparent 62%);animation-delay:-5s}
@keyframes derive{0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(6vw,-5vh) scale(1.12)}66%{transform:translate(-5vw,6vh) scale(.94)}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(prefers-reduced-motion:reduce){.aurora i{animation:none}}
a{color:var(--accent);text-decoration:none}
h1,h2,h3,.brand,.kpi .val{font-family:Sora,Inter,"Segoe UI",system-ui,sans-serif;letter-spacing:-.015em}
h1,h2,h3{line-height:1.25;font-weight:600}

input,select,button,textarea{font:inherit;color:var(--txt)}
input,select,textarea{background:var(--panel2);border:1px solid var(--bord);border-radius:9px;
  padding:9px 12px;width:100%;min-height:var(--tap);transition:.15s}
input::placeholder{color:#7b869c}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #6aa5ff33}
input[type=number]{text-align:right;font-variant-numeric:tabular-nums}
input:disabled,select:disabled{background:#28303f;color:var(--muted);cursor:not-allowed}

button{background:var(--panel2);border:1px solid var(--bord);border-radius:9px;padding:9px 16px;
  cursor:pointer;min-height:var(--tap);transition:.15s;color:var(--txt2)}
button:hover:not(:disabled){border-color:var(--accent);color:var(--txt);background:var(--panel3)}
button:disabled{opacity:.5;cursor:not-allowed}
.pri{background:linear-gradient(160deg,var(--accent),var(--accent-2));border:none;color:#101728;font-weight:600}
.pri:hover:not(:disabled){filter:brightness(1.08);color:#101728}
.ok{background:var(--ok);border-color:var(--ok);color:#0e2a1c;font-weight:600}
.ok:hover:not(:disabled){filter:brightness(1.08);color:#0e2a1c;border-color:var(--ok)}
.ghost{background:none}
.warn{color:var(--warn);border-color:var(--warn-line)}
.warn:hover:not(:disabled){background:var(--warn-bg);border-color:var(--warn)}
.danger{color:var(--bad);border-color:var(--bad-line)}
.danger:hover:not(:disabled){background:var(--bad-bg);color:var(--bad);border-color:var(--bad)}
.sm{min-height:32px;padding:4px 11px;font-size:13px}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sp{flex:1}
.mut{color:var(--muted)}
.right{text-align:right}

/* ---------- connexion ---------- */
#login{min-height:100vh;display:grid;place-items:center;padding:24px}
#login form{width:min(400px,100%);background:var(--verre);backdrop-filter:blur(14px);border:1px solid var(--line2);
  border-radius:18px;padding:32px;box-shadow:0 18px 44px rgba(0,0,0,.35)}
#login h1{font-size:22px;margin-bottom:6px}
#login p.sub{color:var(--muted);font-size:14px;margin-bottom:24px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin-bottom:6px}
.err{background:var(--bad-bg);border:1px solid var(--bad-line);color:var(--bad);border-radius:9px;
  padding:10px 13px;font-size:13.5px;margin-bottom:16px}

/* ---------- structure ---------- */
header{position:sticky;top:0;z-index:20;background:rgba(10,11,20,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding:11px 20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
header .brand{font-weight:700;letter-spacing:-.01em;white-space:nowrap;display:flex;align-items:center;font-size:15px}
header .brand span:first-child{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--accent),var(--marque));color:#101728;font-size:13px;font-weight:700;margin-right:10px;flex-shrink:0}
header .brand .brand-text{color:var(--txt)}
nav{display:flex;gap:3px;padding:0 12px;border-bottom:1px solid var(--line);overflow-x:auto;
  position:sticky;top:53px;background:rgba(10,11,20,.88);backdrop-filter:blur(10px);z-index:19;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav a{color:var(--muted);padding:12px 15px;border-bottom:2px solid transparent;white-space:nowrap;font-size:14.5px}
nav a:hover{color:var(--txt2)}
nav a.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
main{padding:22px 20px 70px;max-width:1400px;margin:0 auto}
.card{background:var(--verre);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--r);padding:18px;
  margin-bottom:18px;box-shadow:var(--ombre)}
.card h2{font-size:15.5px;margin-bottom:3px}
.card .hint{color:var(--muted);font-size:12.5px;margin-bottom:14px}

/* ---------- indicateurs ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:13px;margin-bottom:18px}
.kpi{background:var(--verre);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
  position:relative;overflow:hidden;box-shadow:var(--ombre)}
.kpi::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.kpi .lab{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.kpi .val{font-size:21px;font-weight:700;margin-top:5px;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .note{font-size:12px;color:var(--muted);margin-top:2px}

/* ---------- tableaux ---------- */
.scroll{overflow:auto;max-height:66vh;border-radius:8px}
table{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
th,td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{position:sticky;top:0;background:rgba(35,44,62,.97);backdrop-filter:blur(8px);color:var(--muted);font-size:11px;
  text-transform:uppercase;letter-spacing:.07em;font-weight:600;z-index:1;border-bottom:1px solid var(--line2)}
tbody tr:nth-child(even){background:rgba(255,255,255,.022)}
tbody tr:hover{background:rgba(106,165,255,.1)}
tfoot td{font-weight:700;border-top:2px solid var(--line2);background:var(--panel2)}
.empty{text-align:center;color:var(--muted);padding:26px}

.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11px;border:1px solid;font-weight:600}
.p-ok{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.p-warn{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.p-bad{color:var(--bad);border-color:var(--bad-line);background:var(--bad-bg)}
.p-mut{color:var(--muted);border-color:var(--line2);background:var(--panel2)}

/* ---------- grille de saisie ---------- */
.grille{display:grid;grid-template-columns:1fr 130px 140px 150px 46px;gap:10px;align-items:center;
  padding:10px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;
  background:var(--panel);box-shadow:var(--ombre)}
.grille.paye{border-color:var(--ok-line);background:var(--ok-bg)}
.grille.partiel{border-color:var(--warn-line);background:var(--warn-bg)}
.grille b{display:block}
.grille .who small{color:var(--muted);font-size:12px}
@media(max-width:860px){
  .grille{grid-template-columns:1fr auto}
  .grille .who,.grille .full{grid-column:1/-1}
  /* Sans réordonnancement, le bouton d'encaissement atterrit seul tout en bas
     de la carte. On le remonte à côté du montant : geste unique, pouce en place. */
  .grille .who{order:0}
  .grille .m{order:1}
  .grille button{order:2}
  .grille .d{order:3}
  .grille .mo{order:4}
  .grille button{min-width:54px}
}

/* ---------- vue immeuble ---------- */
.etage{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.lot{border:1px solid var(--line);border-radius:11px;padding:14px;background:var(--panel2);
  transition:.2s;box-shadow:var(--ombre)}
.lot:hover{border-color:var(--line2);box-shadow:var(--ombre-h)}
.lot.occupe{border-left:3px solid var(--ok)}
.lot.libre{border-left:3px solid var(--line2);background:repeating-linear-gradient(
  135deg,var(--panel2),var(--panel2) 9px,rgba(255,255,255,.03) 9px,rgba(255,255,255,.03) 18px)}
.lot b{font-size:15px}

.bar{height:7px;background:var(--panel3);border-radius:99px;overflow:hidden;margin:10px 0 6px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--ok));transition:.4s}

/* ---------- graphique ---------- */
.chart{width:100%;height:270px;display:block}
.chart .g{fill:none;stroke:var(--line);stroke-width:1}
.chart text{fill:var(--muted);font-size:11px}
.chart .col rect:first-child{fill:transparent}
.chart .col:hover rect:first-child{fill:rgba(255,255,255,.045)}

/* ---------- tableau de bord ---------- */
.deux{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:1000px){.deux{grid-template-columns:1fr}}

/* En-tête de page : identifie la vue et porte les actions documentaires. */
.dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;
  flex-wrap:wrap;padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.dash-head h1{font-size:20px;font-weight:700;letter-spacing:-.02em}
.dash-head p{color:var(--muted);font-size:12.5px;margin-top:3px}
.dash-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dash-actions select{width:auto;min-width:150px;min-height:36px;padding:6px 10px;font-size:13.5px}
.dash-actions button{min-height:36px;padding:6px 14px;font-size:13.5px}
.dash-actions .mut{font-size:12.5px}

/* Les indicateurs perdent leur liseré dégradé : sur six cartes alignées, il
   attirait l'œil sans rien signifier. La hiérarchie repose sur la typographie. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--verre);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.stat .l{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .v{font-size:22px;font-weight:700;margin-top:6px;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.stat .n{font-size:12px;color:var(--muted);margin-top:4px}
.delta{font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:99px;border:1px solid;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.delta.up{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.delta.down{color:var(--bad);border-color:var(--bad-line);background:var(--bad-bg)}

/* Panneau : un titre, un filet, du contenu. Remplace la carte à ombre, qui
   multipliée par sept donnait un empilement de boîtes flottantes. */
.panneau{background:var(--verre);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:10px;
  padding:0 0 4px;margin-bottom:16px;overflow:hidden}
.panneau-tete{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:13px 16px;border-bottom:1px solid var(--line);background:var(--panel2);flex-wrap:wrap}
.panneau-tete h2{font-size:13.5px;font-weight:600;letter-spacing:.01em}
.panneau-tete .mut{font-size:12px}
.panneau > .alertes,.panneau > .hint,.panneau > .note-graph,.panneau > svg{margin:14px 16px}
.note-graph{color:var(--muted);font-size:12px;margin:4px 16px 12px}

.segments{display:flex;border:1px solid var(--bord);border-radius:8px;overflow:hidden}
.segments button{border:none;border-radius:0;box-shadow:none;background:transparent;
  border-right:1px solid var(--bord);min-height:29px;padding:4px 12px;font-size:12.5px}
.segments button:last-child{border-right:none}
.segments button.on{background:var(--accent);color:#101728;font-weight:600}
.segments button.on:hover{background:var(--accent);color:#101728}

.alertes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px}
.alerte{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel2);color:var(--txt);transition:.18s}
.alerte:hover{border-color:var(--accent)}
.alerte .point{width:7px;height:7px;border-radius:99px;margin-top:6px;flex:none}
.alerte.alerte .point{background:var(--warn)}
.alerte.info .point{background:var(--accent)}
.alerte b{display:block;font-size:13.5px;font-weight:600}
.alerte small{color:var(--muted);font-size:12.5px}

/* ---------- tableaux de restitution ---------- */
.panneau table.pro{font-size:13px}
table.pro thead th{background:transparent;border-bottom:1px solid var(--line2);
  padding:9px 16px;font-size:10.5px;letter-spacing:.06em}
table.pro td{padding:9px 16px;border-bottom:1px solid var(--line)}
table.pro tbody tr:nth-child(even){background:transparent}
table.pro tbody tr:last-child td{border-bottom:none}
table.pro tbody tr:hover{background:rgba(106,165,255,.07)}
table.pro td.fort{font-weight:700}
table.pro tfoot td{background:var(--panel2);border-top:1px solid var(--line2);padding:10px 16px}
table.pro tr.recent{background:rgba(106,165,255,.05)}
.incomplet{display:inline-block;margin-left:8px;font-size:10.5px;color:var(--muted);
  border:1px solid var(--line2);border-radius:99px;padding:1px 7px;font-weight:400}

.mini{display:inline-block;vertical-align:middle;width:46px;height:5px;border-radius:99px;
  background:var(--panel3);overflow:hidden}
.mini i{display:block;height:100%;border-radius:99px}

.legende{display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:12px;
  color:var(--txt2);padding:0 16px 4px}
.legende i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;
  vertical-align:-1px}
.legende i.trait{width:16px;height:0;border-top:2px solid var(--txt);opacity:.55;border-radius:0}
.legende .sp{flex:1}

/* ---------- formulaire ---------- */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:13px}
dialog{background:var(--panel);color:var(--txt);border:1px solid var(--line2);border-radius:16px;
  padding:22px;max-width:620px;width:calc(100% - 30px);box-shadow:0 24px 60px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(10,14,22,.62);backdrop-filter:blur(2px)}
dialog h3{font-size:17px;margin-bottom:16px}
/* Styles pour les inputs dans les dialogues */
dialog input,dialog select,dialog textarea{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;color:var(--txt);font-size:14px;width:100%;box-sizing:border-box}
dialog input:focus,dialog select:focus,dialog textarea:focus{outline:none;border-color:var(--accent)}
dialog input[type="date"],dialog input[type="datetime-local"]{cursor:pointer;color-scheme:dark}
dialog input[type="date"]::-webkit-calendar-picker-indicator,
dialog input[type="datetime-local"]::-webkit-calendar-picker-indicator{cursor:pointer;filter:invert(1);opacity:0.7;padding:4px;margin-left:auto}
dialog input[type="date"]::-webkit-calendar-picker-indicator:hover,
dialog input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover{opacity:1}
dialog input[type="number"]{-moz-appearance:textfield;appearance:textfield}
dialog input[type="number"]::-webkit-outer-spin-button,
dialog input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}

#toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,90px);z-index:60;
  background:var(--panel3);color:var(--txt);border:1px solid var(--line2);border-radius:10px;
  padding:11px 18px;box-shadow:0 14px 36px rgba(0,0,0,.45);transition:.25s;max-width:90vw;font-size:14px}
#toast.on{transform:translate(-50%,0)}
#toast.ko{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}

/* ------------------------------------------------------------- téléphone */
@media(max-width:640px){
  /* iOS zoome automatiquement sur tout champ dont la police descend sous 16 px.
     Le zoom décale la mise en page et oblige à pincer pour revenir : à éviter
     absolument sur un écran de saisie. */
  input,select,textarea{font-size:16px}

  /* L'en-tête passe à la ligne sur écran étroit : sa hauteur n'est plus les
     53 px codés en dur du décalage de la barre d'onglets. On désolidarise les
     deux et on garde les onglets collés en haut, plus utiles que la marque. */
  header{position:static;padding:9px 14px;gap:9px}
  header .brand{font-size:14.5px}
  nav{top:0;padding:0 6px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
  nav a{padding:11px 13px;font-size:14px}

  main{padding:14px 14px calc(76px + env(safe-area-inset-bottom))}
  .card{padding:14px;margin-bottom:13px}
  .kpis{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:13px}
  .kpi{padding:12px 13px}
  .kpi .val{font-size:18px}
  .kpi .note{font-size:11px}

  /* Les tableaux gardent leur défilement horizontal, mais plus de plafond en
     hauteur : deux zones de défilement imbriquées sont impraticables au doigt. */
  .scroll{max-height:none;overscroll-behavior-x:contain}
  th,td{padding:7px 8px;font-size:13px}

  .grille{padding:9px;gap:8px}
  .grille .who b{font-size:15px}

  dialog{padding:17px;border-radius:15px}
  .form{grid-template-columns:1fr;gap:11px}
  .actions{flex-direction:column-reverse}
  .actions button{width:100%}

  #toast{left:12px;right:12px;bottom:14px;transform:translateY(90px);max-width:none}
  #toast.on{transform:translateY(0)}

  #login form{padding:24px 20px;border-radius:15px}
}

/* ========================================== NOUVEAU TABLEAU DE BORD ========================================== */

/* En-tête du dashboard */
.dashboard-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px;flex-wrap:wrap;gap:16px}
.welcome-section{display:block}
.dashboard-title{font-size:28px;font-weight:700;margin-bottom:4px;background:linear-gradient(135deg,var(--txt),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.dashboard-subtitle{color:var(--muted);font-size:14px}
.header-actions{display:flex;gap:12px;align-items:center}
.date-badge{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:8px 16px;font-size:13px;color:var(--txt2)}
.date-icon{font-size:16px}

/* Grille KPIs améliorée */
.kpis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.kpi-pro{background:var(--verre);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;gap:16px;align-items:flex-start;position:relative;overflow:hidden;transition:all 0.3s ease;animation:fadeInUp 0.5s ease forwards;opacity:0}
.kpi-pro:hover{transform:translateY(-4px);box-shadow:var(--ombre-h);border-color:var(--line2)}
.kpi-pro::before{content:"";position:absolute;top:0;left:0;right:0;height:3px}
.kpi-blue::before{background:linear-gradient(90deg,#5b9bff,#3f7fe0)}
.kpi-green::before{background:linear-gradient(90deg,#5cd89b,#3cb878)}
.kpi-orange::before{background:linear-gradient(90deg,#ffb87a,#efa257)}
.kpi-purple::before{background:linear-gradient(90deg,#b794f6,#9b86ff)}
.kpi-cyan::before{background:linear-gradient(90deg,#5ed4e6,#38bdf8)}
.kpi-red::before{background:linear-gradient(90deg,#ff8a93,#ff6b8a)}
.kpi-icon{font-size:32px;line-height:1;flex-shrink:0}
.kpi-content{flex:1;min-width:0}
.kpi-lab{font-size:12px;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin-bottom:6px}
.kpi-val{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kpi-trend{font-size:12px;padding:2px 8px;border-radius:12px;font-weight:600}
.kpi-trend.up{background:var(--ok-bg);color:var(--ok)}
.kpi-trend.down{background:var(--bad-bg);color:var(--bad)}
.kpi-note{font-size:12px;color:var(--muted);margin-top:4px}

@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Grilles du dashboard */
.dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:20px}
.dashboard-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}

/* Cartes améliorées */
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:12px}
.card-title-group h2{display:flex;align-items:center;gap:8px;margin:0}
.card-subtitle{color:var(--muted);font-size:12px;margin-top:4px}
.card-icon{font-size:18px}
.card-actions{display:flex;gap:8px}
.card-footer{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);text-align:center}
.card-footer a{color:var(--accent);font-size:13px;font-weight:500}

.select-modern{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:13px;color:var(--txt);cursor:pointer;min-width:100px}
.select-modern:hover{border-color:var(--accent)}

/* Graphique amélioré */
.card-chart{min-height:380px}
.chart-container{margin:0 -8px}
.graph-pro .grid-line{stroke:var(--line);stroke-width:1;stroke-dasharray:4,4}
.graph-pro .axis-label{fill:var(--muted);font-size:11px;font-weight:500}
.graph-pro .bar{transition:all 0.3s ease;animation:barGrow 0.6s ease forwards;transform-origin:bottom}
.graph-pro .bar-label{fill:var(--muted);font-size:11px}
.graph-pro .bar-group:hover .bar{filter:brightness(1.15)}
@keyframes barGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.chart-legend{display:flex;justify-content:center;gap:24px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.legend-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--txt2)}
.legend-dot{width:12px;height:12px;border-radius:3px}

/* Line Chart - Graphique en courbes */
.line-chart{overflow:visible}
.line-chart .grid-line{stroke:var(--line);stroke-width:1;stroke-dasharray:4,4;opacity:0.5}
.line-chart .axis-label{fill:var(--muted);font-size:11px;font-weight:500}
.line-chart .area-path{opacity:0;animation:areaFadeIn 1s ease 0.3s forwards}
.line-chart .line-path{stroke-dasharray:2000;stroke-dashoffset:2000;animation:lineDrawIn 1.5s ease forwards}
.line-chart .line-total{stroke-width:4}
.line-chart .data-point{opacity:0;transform-origin:center;animation:pointPopIn 0.4s ease calc(var(--delay, 0s) + 0.8s) forwards}
.line-chart .data-point:hover{r:10;filter:drop-shadow(0 0 8px currentColor);cursor:pointer}

@keyframes lineDrawIn{to{stroke-dashoffset:0}}
@keyframes areaFadeIn{to{opacity:1}}
@keyframes pointPopIn{
  0%{opacity:0;transform:scale(0)}
  70%{transform:scale(1.3)}
  100%{opacity:1;transform:scale(1)}
}

/* Donut chart */
.card-donut{display:flex;flex-direction:column}
.donut-container{display:flex;justify-content:center;align-items:center;flex:1;padding:20px 0}
.donut-chart circle{transition:stroke-dasharray 0.8s ease}
.donut-total-label{fill:var(--muted);font-size:12px}
.donut-total-value{fill:var(--txt);font-size:20px;font-weight:700}
.donut-legend{display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--panel);border-radius:12px}
.donut-legend-item{display:flex;align-items:center;gap:10px}
.donut-legend-item .legend-label{flex:1;font-size:13px;color:var(--txt2)}
.donut-legend-item .legend-value{font-weight:600;font-variant-numeric:tabular-nums}

/* Alertes */
.card-alerts.has-critical{border-color:var(--bad-line)}
.alert-badges{display:flex;gap:8px}
.badge{padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.03em}
.badge-critical{background:var(--bad-bg);color:var(--bad)}
.badge-warning{background:var(--warn-bg);color:var(--warn)}
.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-info{background:var(--panel2);color:var(--txt2)}
.badge-success{background:var(--ok-bg);color:var(--ok)}
.badge-danger{background:var(--bad-bg);color:var(--bad)}
.badge-muted{background:var(--panel2);color:var(--muted)}

.alerts-list{display:flex;flex-direction:column;gap:10px;max-height:300px;overflow-y:auto}
.alert-item{display:flex;gap:12px;padding:12px;background:var(--panel);border-radius:10px;border-left:3px solid transparent;transition:all 0.2s ease}
.alert-item:hover{background:var(--panel2)}
.alert-critique{border-left-color:var(--bad)}
.alert-alerte{border-left-color:var(--warn)}
.alert-info{border-left-color:var(--accent)}
.alert-icon{font-size:16px;flex-shrink:0}
.alert-content{flex:1;min-width:0}
.alert-title{font-weight:600;font-size:13px;margin-bottom:2px}
.alert-detail{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--muted)}
.empty-icon{font-size:48px;margin-bottom:12px;opacity:0.5}
.empty-state p{font-size:14px}

/* Lots */
.lots-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.lot-card{background:var(--panel);border-radius:12px;padding:14px;transition:all 0.2s ease}
.lot-card:hover{background:var(--panel2);transform:translateY(-2px)}
.lot-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.lot-name{font-weight:600;font-size:14px}
.lot-total{font-weight:700;font-size:15px;color:var(--accent)}
.lot-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--line);margin-bottom:10px}
.lot-bar-fill{height:100%;transition:width 0.5s ease}
.lot-bar-loyer{background:linear-gradient(90deg,#5b9bff,#7bb3ff)}
.lot-bar-court{background:linear-gradient(90deg,#efa257,#ffb87a)}
.lot-details{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.lot-detail{display:flex;align-items:center;gap:4px}
.lot-detail .dot{width:8px;height:8px;border-radius:2px}

/* Actions rapides */
.quick-actions{margin-top:24px}
.quick-actions h3{font-size:14px;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin-bottom:16px}
.actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.action-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px;background:var(--verre);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--txt);transition:all 0.3s ease;animation:fadeInUp 0.5s ease forwards;opacity:0}
.action-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--ombre-h);background:var(--panel)}
.action-icon{font-size:28px}
.action-label{font-size:13px;font-weight:500;text-align:center}

/* Responsive dashboard */
@media(max-width:1024px){
  .dashboard-grid{grid-template-columns:1fr}
  .dashboard-grid-2{grid-template-columns:1fr}
  .card-donut{order:-1}
}
@media(max-width:640px){
  .dashboard-header{flex-direction:column;align-items:flex-start}
  .dashboard-title{font-size:22px}
  .kpis-grid{grid-template-columns:1fr 1fr}
  .kpi-pro{padding:14px}
  .kpi-icon{font-size:24px}
  .kpi-val{font-size:18px}
  .lots-grid{grid-template-columns:1fr}
  .actions-grid{grid-template-columns:1fr 1fr}
}

/* ========================================== VUES AMÉLIORÉES ========================================== */

/* En-tête de page commun */
.page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px;flex-wrap:wrap;gap:20px}
.page-title-section{flex:1;min-width:200px}
.page-title{font-size:28px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:12px}
.page-icon{font-size:32px}
.page-subtitle{color:var(--muted);font-size:14px}
.page-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* Boutons primaires */
.btn-primary-lg{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;background:linear-gradient(135deg,var(--accent),var(--accent-2));border:none;border-radius:12px;color:#101728;font-weight:600;font-size:14px;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(91,155,255,0.3)}
.btn-primary-lg:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(91,155,255,0.4)}
.btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;color:var(--txt);font-weight:500;font-size:13px;cursor:pointer;transition:all 0.2s ease}
.btn-secondary:hover{border-color:var(--accent);background:var(--panel3)}

/* Sélecteur d'année */
.select-year{padding:12px 18px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;color:var(--txt);font-size:14px;font-weight:500;cursor:pointer;min-width:100px}
.select-year:hover{border-color:var(--accent)}

/* Navigation de période */
.period-nav{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px}
.btn-nav{display:flex;align-items:center;gap:6px;padding:10px 16px;background:transparent;border:none;border-radius:10px;color:var(--txt2);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.2s ease}
.btn-nav:hover{background:var(--panel2);color:var(--txt)}
.nav-arrow{font-size:16px}
.period-current{display:flex;align-items:center;gap:8px;padding:10px 20px;background:var(--panel2);border-radius:10px;font-weight:600}
.period-icon{font-size:16px}
.period-label{font-size:14px}

/* Barre de progression */
.progress-section{background:var(--verre);border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:24px}
.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.progress-label{font-size:14px;color:var(--txt2)}
.progress-value{font-size:18px;font-weight:700;color:var(--accent)}
.progress-bar-container{height:12px;background:var(--panel2);border-radius:6px;overflow:hidden;margin-bottom:12px}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--ok),#7be0b5);border-radius:6px;transition:width 0.5s ease}
.progress-stats{display:flex;gap:24px;flex-wrap:wrap}
.stat-item-inline{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.dot-green{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.dot-orange{width:8px;height:8px;border-radius:50%;background:var(--warn)}
.dot-red{width:8px;height:8px;border-radius:50%;background:var(--bad)}

/* KPIs variantes */
.kpis-3{grid-template-columns:repeat(3,1fr)}
.kpis-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.kpis-3,.kpis-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.kpis-3,.kpis-4{grid-template-columns:1fr}}

/* Cartes avec tableaux */
.card-table{overflow:hidden}
.card-filters{padding:16px 20px}
.table-responsive{overflow-x:auto;margin:0 -18px;padding:0 18px}

/* Tableaux modernes */
.table-modern{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.table-modern thead{position:sticky;top:0;z-index:1}
.table-modern th{padding:14px 12px;background:var(--panel2);color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;border-bottom:1px solid var(--line)}
.table-modern th:first-child{border-radius:10px 0 0 0}
.table-modern th:last-child{border-radius:0 10px 0 0}
.th-left{text-align:left}
.th-right{text-align:right}
.th-center{text-align:center}
.table-modern td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tr-hover{transition:background 0.2s ease}
.tr-hover:hover{background:var(--panel)}
.td-main{font-weight:500}
.td-amount{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.td-success{color:var(--ok)}
.td-warning{color:var(--warn)}
.td-expense{color:var(--bad)}
.td-muted{color:var(--muted)}
.td-center{text-align:center}
.td-actions{text-align:center}
.td-description{max-width:200px;white-space:normal}
.td-note{max-width:150px;white-space:normal;font-size:12px;color:var(--muted)}
.td-detail{max-width:250px;white-space:normal;font-size:12px}
.empty-row td{padding:40px}

/* Info locataire */
.tenant-info{display:flex;align-items:center;gap:12px}
.tenant-avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--marque));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#101728}
.tenant-avatar.avatar-muted{background:var(--panel2);color:var(--muted)}
.tenant-details{display:flex;flex-direction:column}
.tenant-name{font-weight:600}
.tenant-phone{font-size:11px;color:var(--muted)}

/* Badges */
.lot-badge{display:inline-flex;padding:4px 10px;background:var(--panel2);border-radius:6px;font-size:12px;font-weight:500}
.date-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--txt2)}
.date-ended{color:var(--muted)}
.category-badge{display:inline-flex;padding:5px 12px;background:linear-gradient(135deg,rgba(155,134,255,0.2),rgba(91,155,255,0.2));border-radius:8px;font-size:12px;font-weight:500;color:var(--marque)}
.payment-badge{display:inline-flex;padding:4px 10px;background:var(--panel2);border-radius:6px;font-size:11px}

/* Badges de statut */
.status-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:500}
.status-paye{background:var(--ok-bg);color:var(--ok)}
.status-partiel{background:var(--warn-bg);color:var(--warn)}
.status-impaye{background:var(--bad-bg);color:var(--bad)}
.status-active{background:var(--ok-bg);color:var(--ok)}
.status-archived{background:var(--panel2);color:var(--muted)}
.status-ok{background:var(--ok-bg);color:var(--ok)}
.status-warning{background:var(--warn-bg);color:var(--warn)}
.status-critical{background:var(--bad-bg);color:var(--bad)}
.status-icon{font-size:12px}
.status-text{font-size:11px;text-transform:uppercase;letter-spacing:0.03em}

/* Boutons d'action */
.action-buttons{display:flex;gap:6px;justify-content:center}
.btn-action{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;font-size:12px;font-weight:500;border:1px solid var(--line);background:var(--panel);cursor:pointer;transition:all 0.2s ease}
.btn-action:hover{border-color:var(--accent);background:var(--panel2)}
.btn-primary-action{background:linear-gradient(135deg,var(--accent),var(--accent-2));border:none;color:#101728}
.btn-primary-action:hover{filter:brightness(1.1)}
.btn-danger-action{border-color:var(--bad-line);color:var(--bad)}
.btn-danger-action:hover{background:var(--bad-bg);border-color:var(--bad)}
.btn-success-action{border-color:var(--ok-line);color:var(--ok)}
.btn-success-action:hover{background:var(--ok-bg);border-color:var(--ok)}
.btn-icon-action{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--line);background:var(--panel);cursor:pointer;transition:all 0.2s ease;font-size:14px}
.btn-icon-action:hover{border-color:var(--accent);background:var(--panel2)}
.btn-delete:hover{border-color:var(--bad);background:var(--bad-bg)}
.btn-archive:hover{border-color:var(--warn);background:var(--warn-bg)}
.btn-restore:hover{border-color:var(--ok);background:var(--ok-bg)}

/* Filtres */
.filters-bar{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.search-box{display:flex;align-items:center;gap:10px;flex:1;min-width:200px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:0 14px}
.search-icon{font-size:16px;color:var(--muted)}
.search-input{flex:1;background:transparent;border:none;padding:12px 0;font-size:14px;color:var(--txt)}
.search-input:focus{outline:none}
.search-input::placeholder{color:var(--muted)}
.filter-group{display:flex;align-items:center;gap:10px}
.filter-label{font-size:12px;color:var(--muted);white-space:nowrap}
.filter-tabs{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:4px}
.filter-tab{display:flex;align-items:center;gap:6px;padding:8px 14px;border:none;border-radius:8px;background:transparent;color:var(--muted);font-size:12px;font-weight:500;cursor:pointer;transition:all 0.2s ease}
.filter-tab:hover{color:var(--txt)}
.filter-tab.active{background:var(--panel2);color:var(--txt)}

/* Pied de page */
.page-footer{margin-top:20px;padding:16px 0;border-top:1px solid var(--line)}
.footer-stats{display:flex;gap:16px;flex-wrap:wrap}
.stat-pill{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.stat-dot{width:8px;height:8px;border-radius:50%}
.dot-blue{background:var(--accent)}

/* ========================================== STOCKS ========================================== */
.stock-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.stock-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;transition:all 0.3s ease}
.stock-card:hover{border-color:var(--line2);transform:translateY(-2px);box-shadow:var(--ombre)}
.stock-card.stock-alert{border-color:var(--warn-line)}
.stock-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
.stock-info{flex:1;min-width:0}
.stock-name{font-size:16px;font-weight:600;margin-bottom:4px}
.stock-unit{font-size:12px;color:var(--muted)}
.stock-quantity{margin-bottom:16px}
.qty-value{font-size:42px;font-weight:800;font-variant-numeric:tabular-nums;background:linear-gradient(135deg,var(--txt),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.qty-unit{font-size:14px;color:var(--muted);margin-left:4px}
.stock-bar-section{margin-bottom:16px}
.stock-bar{height:8px;background:var(--panel2);border-radius:4px;position:relative;overflow:visible}
.stock-bar-fill{height:100%;border-radius:4px;transition:width 0.5s ease}
.stock-bar-threshold{position:absolute;top:-4px;width:2px;height:16px;background:var(--txt);border-radius:1px}
.stock-bar-labels{display:flex;justify-content:space-between;margin-top:6px;font-size:10px;color:var(--muted)}
.threshold-label{color:var(--txt2)}
.stock-stats{display:flex;gap:16px;margin-bottom:16px;padding:12px;background:var(--panel2);border-radius:10px}
.stock-stat{display:flex;flex-direction:column;align-items:center;flex:1}
.stock-stat .stat-icon{font-size:16px;margin-bottom:4px}
.stock-stat .stat-value{font-size:16px;font-weight:700}
.stock-stat .stat-label{font-size:10px;color:var(--muted)}
.stock-last-move{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-bottom:16px}
.last-move-icon{font-size:14px}
.stock-actions{display:flex;gap:8px}
.btn-stock{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);font-size:12px;font-weight:500;cursor:pointer;transition:all 0.2s ease}
.btn-stock:hover{border-color:var(--accent)}
.btn-stock-in{border-color:var(--ok-line);color:var(--ok)}
.btn-stock-in:hover{background:var(--ok-bg)}
.btn-stock-out{border-color:var(--warn-line);color:var(--warn)}
.btn-stock-out:hover{background:var(--warn-bg)}
.btn-stock-info:hover{background:var(--panel3)}
.movement-badge{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:6px;font-size:11px;font-weight:500}
.movement-in{background:var(--ok-bg);color:var(--ok)}
.movement-out{background:var(--panel2);color:var(--muted)}

/* ========================================== DÉPENSES ========================================== */
.card-summary{min-height:280px}
.category-bars{display:flex;flex-direction:column;gap:14px}
.category-bar-item{display:block}
.category-bar-header{display:flex;justify-content:space-between;margin-bottom:6px}
.category-name{font-size:13px;font-weight:500}
.category-amount{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.category-bar{height:8px;background:var(--panel2);border-radius:4px;overflow:hidden}
.category-bar-fill{height:100%;background:linear-gradient(90deg,var(--bad),#ff9aa2);border-radius:4px;transition:width 0.5s ease}
.category-pct{font-size:11px;color:var(--muted)}
.month-chart{display:flex;gap:12px;align-items:flex-end;height:180px;padding:20px 0}
.month-bar-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px}
.month-bar-container{width:100%;height:120px;background:var(--panel2);border-radius:6px;display:flex;align-items:flex-end;overflow:hidden}
.month-bar-fill{width:100%;background:linear-gradient(to top,var(--bad),#ff9aa2);border-radius:6px 6px 0 0;transition:height 0.5s ease}
.month-label{font-size:11px;color:var(--muted)}
.month-value{font-size:10px;font-weight:600}
.categories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.category-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;transition:all 0.2s ease}
.category-card:hover{border-color:var(--line2);background:var(--panel2)}
.category-card-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.category-icon{font-size:20px}
.category-card h4{font-size:14px;font-weight:600;margin:0}
.category-desc{font-size:12px;color:var(--muted);margin-bottom:12px;line-height:1.5}
.category-stats{display:flex;justify-content:space-between;margin-bottom:12px;padding:10px;background:var(--panel2);border-radius:8px}
.cat-stat{font-size:11px;color:var(--muted)}
.cat-stat-amount{font-size:12px;font-weight:600;color:var(--bad)}
.btn-edit-cat{width:100%;padding:8px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--txt2);font-size:12px;cursor:pointer;transition:all 0.2s ease}
.btn-edit-cat:hover{border-color:var(--accent);background:var(--panel2)}

/* ========================================== HISTORIQUE ========================================== */
.action-stats{display:flex;flex-direction:column;gap:12px}
.action-stat-item{display:flex;align-items:center;gap:12px;padding:10px;background:var(--panel);border-radius:10px}
.action-stat-icon{font-size:18px}
.action-stat-label{flex:1;font-size:13px;font-weight:500}
.action-stat-count{font-size:14px;font-weight:700;min-width:40px;text-align:right}
.action-stat-bar{width:60px;height:6px;background:var(--panel2);border-radius:3px;overflow:hidden}
.action-stat-fill{height:100%;border-radius:3px;transition:width 0.5s ease}
.action-create .action-stat-fill{background:var(--ok)}
.action-update .action-stat-fill{background:var(--warn)}
.action-delete .action-stat-fill{background:var(--bad)}
.action-login .action-stat-fill{background:var(--accent)}
.action-import .action-stat-fill{background:var(--marque)}
.user-activity-list{display:flex;flex-direction:column;gap:10px}
.user-activity-item{display:flex;align-items:center;gap:12px;padding:10px;background:var(--panel);border-radius:10px}
.user-rank{font-size:12px;font-weight:700;color:var(--muted);min-width:24px}
.user-avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--marque));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:#101728}
.user-avatar-sm{width:24px;height:24px;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--marque));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:10px;color:#101728}
.user-name{flex:1;font-size:13px;font-weight:500}
.user-count{font-size:12px;color:var(--muted)}
.datetime-cell{display:flex;flex-direction:column;gap:2px}
.date-part{font-size:12px;font-weight:500}
.time-part{font-size:11px;color:var(--muted)}
.user-cell{display:flex;align-items:center;gap:8px}
.action-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;font-size:11px;font-weight:500}
.action-create{background:var(--ok-bg);color:var(--ok)}
.action-update{background:var(--warn-bg);color:var(--warn)}
.action-delete{background:var(--bad-bg);color:var(--bad)}
.action-login{background:rgba(91,155,255,0.15);color:var(--accent)}
.action-import{background:rgba(155,134,255,0.15);color:var(--marque)}
.action-other{background:var(--panel2);color:var(--muted)}
.entity-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--panel2);border-radius:6px;font-size:12px}

/* Empty states */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:50px 20px;text-align:center}
.empty-state-sm{padding:30px;text-align:center;color:var(--muted)}
.empty-icon{font-size:48px;margin-bottom:16px;opacity:0.5}
.empty-state p{font-size:14px;color:var(--muted)}
.muted{color:var(--muted)}

/* Responsive vues */
@media(max-width:768px){
  .page-header{flex-direction:column;align-items:stretch}
  .page-title{font-size:22px}
  .page-icon{font-size:26px}
  .page-actions{justify-content:stretch}
  .page-actions>*{flex:1}
  .period-nav{flex-wrap:wrap;justify-content:center}
  .filters-bar{flex-direction:column}
  .search-box{width:100%}
  .filter-tabs{width:100%;justify-content:center}
  .stock-grid{grid-template-columns:1fr}
  .categories-grid{grid-template-columns:1fr}
  .table-modern{font-size:12px}
  .table-modern th,.table-modern td{padding:10px 8px}
  .action-buttons{flex-direction:column;gap:4px}
}

/* ========================================== MODALE PAIEMENT ========================================== */
.payment-modal{max-width:480px}
.payment-modal .form{display:flex;flex-direction:column;gap:16px}
.payment-modal .field{display:flex;flex-direction:column;gap:6px;width:100%}
.payment-modal .field label{font-size:13px;font-weight:600;color:var(--txt2)}
.payment-modal .field input,
.payment-modal .field textarea,
.payment-modal .field select{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--txt);font-size:14px;box-sizing:border-box}
.payment-modal .field input:focus,
.payment-modal .field textarea:focus{outline:none;border-color:var(--accent)}
/* Style spécifique pour le champ date */
.payment-modal .field input[type="date"]{cursor:pointer;color-scheme:dark;-webkit-appearance:none;appearance:none;position:relative}
.payment-modal .field input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;filter:invert(1);opacity:0.7;padding:4px}
.payment-modal .field input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1}

.payment-info-card{background:linear-gradient(135deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:24px}
.payment-tenant{display:flex;align-items:center;gap:16px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.tenant-avatar-lg{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--marque));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;color:#101728;flex-shrink:0}
.tenant-info-modal{display:flex;flex-direction:column;gap:4px;min-width:0}
.tenant-name-lg{font-size:18px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tenant-lot-lg{font-size:13px;color:var(--muted)}
.payment-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.payment-stat{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 8px;background:var(--panel);border-radius:10px}
.payment-stat .stat-label{font-size:10px;color:var(--muted);margin-bottom:4px;white-space:nowrap}
.payment-stat .stat-value{font-size:13px;font-weight:700}
.payment-stat .stat-success{color:var(--ok)}
.payment-stat .stat-warning{color:var(--warn)}

.input-amount{font-size:24px!important;font-weight:700!important;text-align:center;padding:16px!important}
.field-hint{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.btn-quick-amount{padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:12px;color:var(--txt2);cursor:pointer;transition:all 0.2s ease}
.btn-quick-amount:hover{border-color:var(--accent);background:var(--panel2);color:var(--txt)}

.payment-methods{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:100%}
.payment-method-option{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border:2px solid var(--line);border-radius:10px;cursor:pointer;transition:all 0.2s ease}
.payment-method-option:hover{border-color:var(--line2);background:var(--panel)}
.payment-method-option input{display:none}
.payment-method-option input:checked + .method-icon{transform:scale(1.2)}
.payment-method-option:has(input:checked){border-color:var(--accent);background:rgba(91,155,255,0.1)}
.method-icon{font-size:20px;transition:transform 0.2s ease}
.method-label{font-size:9px;color:var(--muted);text-align:center;line-height:1.2}

.confirmation-preview{background:var(--ok-bg);border:1px solid var(--ok-line);border-radius:12px;padding:16px;margin-top:20px}
.preview-title{font-size:13px;font-weight:600;color:var(--ok);margin-bottom:12px}
.preview-content{display:flex;flex-direction:column;gap:8px}
.preview-row{display:flex;justify-content:space-between;font-size:13px;gap:10px}
.preview-row span{color:var(--muted);flex-shrink:0}
.preview-row strong{color:var(--txt);text-align:right}

/* ========================================== MODALE ANNULATION ========================================== */
.cancel-modal{max-width:420px}
.cancel-modal .field{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.cancel-modal .field label{font-size:13px;font-weight:600;color:var(--txt2)}
.cancel-modal .field textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--txt);font-size:14px;resize:vertical}
.cancel-modal .field textarea:focus{outline:none;border-color:var(--accent)}

.cancel-warning{display:flex;align-items:flex-start;gap:14px;padding:16px;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:12px;margin-bottom:20px}
.warning-icon{font-size:28px;flex-shrink:0}
.cancel-warning p{font-size:14px;color:var(--warn);margin:0;line-height:1.5}
.cancel-details{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:20px}
.cancel-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);gap:10px}
.cancel-row:last-child{border-bottom:none}
.cancel-label{font-size:13px;color:var(--muted);flex-shrink:0}
.cancel-value{font-size:13px;font-weight:600;text-align:right;word-break:break-word}
.cancel-amount{color:var(--bad);font-size:16px}
.cancel-confirm{margin-bottom:16px}
.confirm-checkbox{display:flex;align-items:center;gap:12px;padding:14px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:all 0.2s ease}
.confirm-checkbox:hover{border-color:var(--line2)}
.confirm-checkbox input{width:20px;height:20px;accent-color:var(--bad);flex-shrink:0}
.confirm-checkbox span{font-size:13px;line-height:1.4}

/* Bouton danger dans modale */
dialog button.pri.danger,
dialog .btn-danger{background:linear-gradient(135deg,var(--bad),#ff6b7a)!important;color:#fff!important}
dialog button.pri.danger:hover,
dialog .btn-danger:hover{filter:brightness(1.1)}

/* Responsive modales */
@media(max-width:500px){
  .payment-methods{grid-template-columns:repeat(3,1fr)}
  .payment-summary{grid-template-columns:1fr}
  .payment-stat{flex-direction:row;justify-content:space-between;padding:10px 12px}
  .payment-stat .stat-label{margin-bottom:0}
  .tenant-avatar-lg{width:44px;height:44px;font-size:18px}
  .tenant-name-lg{font-size:16px}
  .input-amount{font-size:20px!important;padding:12px!important}
  .confirmation-preview{padding:12px}
  .preview-row{flex-direction:column;gap:2px}
  .preview-row strong{text-align:left}
}

/* ========================================== UTILISATEURS ========================================== */
/* Login footer */
.login-footer{text-align:center;margin-top:16px}
.login-footer a{color:var(--muted);font-size:13px;text-decoration:none;transition:color 0.2s}
.login-footer a:hover{color:var(--accent)}

/* Reset admin dialog */
#reset-admin-dialog{max-width:380px}
#reset-admin-dialog h3{margin-bottom:16px}
.reset-info{font-size:13px;color:var(--muted);margin-bottom:16px;line-height:1.5}
#reset-result{padding:12px;border-radius:8px;margin:16px 0;font-size:13px}
#reset-result.success{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok)}
#reset-result.error{background:var(--bad-bg);border:1px solid var(--bad-line);color:var(--bad)}
#reset-result .credentials{margin-top:10px;padding:10px;background:var(--panel);border-radius:6px;font-family:monospace}
#reset-result .credentials div{margin:4px 0}

/* ========================================== MODALE ARCHIVAGE ========================================== */
.archive-modal,.restore-modal,.delete-modal{max-width:480px}

.archive-warning,.restore-info,.delete-warning{display:flex;align-items:flex-start;gap:14px;padding:16px;border-radius:12px;margin-bottom:20px}
.archive-warning{background:var(--warn-bg);border:1px solid var(--warn-line)}
.archive-warning p{color:var(--warn);margin:0;font-size:13px;line-height:1.5}
.restore-info{background:rgba(91,155,255,0.1);border:1px solid rgba(91,155,255,0.3)}
.restore-info p{color:var(--accent);margin:0;font-size:13px;line-height:1.5}
.delete-warning{background:var(--bad-bg);border:1px solid var(--bad-line)}
.delete-warning p{color:var(--bad);margin:0;font-size:13px;line-height:1.5}
.warning-icon,.info-icon{font-size:24px;flex-shrink:0}

.archive-tenant-card{display:flex;align-items:center;gap:16px;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:20px}
.archive-tenant-card.tenant-card-danger{border-color:var(--bad-line);background:var(--bad-bg)}
.tenant-since,.archive-reason,.archive-date{font-size:12px;color:var(--muted);margin-top:2px}
.avatar-danger{background:linear-gradient(135deg,var(--bad),#ff6b7a)!important}

.motif-options{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.motif-option{display:flex;align-items:flex-start;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:all 0.2s ease}
.motif-option:hover{border-color:var(--line2);background:var(--panel)}
.motif-option input{margin-top:3px}
.motif-option:has(input:checked){border-color:var(--accent);background:rgba(91,155,255,0.1)}
.motif-content{display:flex;flex-direction:column;gap:2px}
.motif-label{font-size:14px;font-weight:600}
.motif-desc{font-size:12px;color:var(--muted)}

.archive-confirm,.restore-confirm,.delete-confirm{margin-top:16px}

/* ========================================== BOUTONS EXPORT ========================================== */
.export-buttons{display:flex;gap:10px;margin-bottom:20px}
.export-buttons-inline{display:flex;gap:6px;margin-left:10px}

.btn-export{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--txt);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.2s ease}
.btn-export:hover{background:var(--line);border-color:var(--line2);transform:translateY(-1px)}
.btn-export span{font-size:16px}

.btn-export-sm{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--txt);font-size:16px;cursor:pointer;transition:all 0.2s ease}
.btn-export-sm:hover{background:var(--line);border-color:var(--line2);transform:translateY(-1px)}

/* ========================================== JOURNAL HISTORIQUE ========================================== */
.filters-historique,.filters-stocks{flex-wrap:wrap;gap:12px}
.filters-stocks{padding:16px;border-bottom:1px solid var(--line)}
.search-box-sm{max-width:180px}
.filter-select{padding:8px 12px;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--txt);font-size:13px;cursor:pointer}
.filter-select:focus{outline:none;border-color:var(--accent)}
.filter-date-group{display:flex;align-items:center;gap:8px}
.date-range{display:flex;align-items:center;gap:6px}
.filter-date{padding:8px 12px;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--txt);font-size:13px;width:140px}
.filter-date:focus{outline:none;border-color:var(--accent)}
.date-separator{color:var(--muted);font-size:14px}
.btn-reset-filters{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;cursor:pointer;transition:all 0.2s}
.btn-reset-filters:hover{background:var(--line);border-color:var(--line2)}
.filter-info{font-size:12px;color:var(--muted);padding:8px 16px;background:rgba(91,155,255,0.1);border-radius:6px;margin-top:8px}

.card-journal{overflow:hidden}
.journal-timeline{padding:0 20px 20px}

.journal-day{margin-bottom:24px}
.journal-day:last-child{margin-bottom:0}

.journal-date-header{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--panel);border-radius:10px;margin-bottom:12px;position:sticky;top:0;z-index:5}
.journal-date-icon{font-size:16px}
.journal-date-text{font-weight:600;font-size:14px;text-transform:capitalize}
.journal-date-count{margin-left:auto;font-size:12px;color:var(--muted);background:var(--line);padding:4px 10px;border-radius:12px}

.journal-events{display:flex;flex-direction:column;gap:8px;padding-left:20px;border-left:2px solid var(--line)}

.journal-event{display:flex;gap:12px;position:relative}
.event-time{width:50px;font-size:12px;color:var(--muted);font-weight:500;padding-top:4px;flex-shrink:0}
.event-line{position:absolute;left:-21px;top:8px;width:10px;height:10px;background:var(--panel);border:2px solid var(--line);border-radius:50%}
.journal-event:hover .event-line{border-color:var(--accent);background:var(--accent)}

.event-content{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 16px;transition:all 0.2s}
.journal-event:hover .event-content{border-color:var(--line2);background:var(--panel2)}

.event-header{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.event-user{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-left:auto}
.user-avatar-xs{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--marque));display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff}

.event-detail{font-size:13px;color:var(--txt);line-height:1.5;word-break:break-word}

.action-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600}
.action-create{background:rgba(46,230,168,0.15);color:var(--ok)}
.action-update{background:rgba(255,181,71,0.15);color:var(--warn)}
.action-delete{background:rgba(255,107,129,0.15);color:var(--bad)}
.action-login{background:rgba(91,155,255,0.15);color:var(--accent)}
.action-import{background:rgba(155,134,255,0.15);color:var(--marque)}

.entity-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:var(--line);border-radius:6px;font-size:11px;color:var(--muted)}

/* Pagination */
.pagination-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-top:1px solid var(--line);background:var(--panel);border-radius:12px;margin-bottom:16px}
.pagination-info{font-size:12px;color:var(--muted)}
.pagination-info-center{font-size:13px;color:var(--txt);font-weight:500}

.btn-page{display:flex;align-items:center;gap:6px;padding:8px 16px;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--txt);font-size:13px;cursor:pointer;transition:all 0.2s}
.btn-page:hover:not(:disabled){background:var(--line);border-color:var(--line2)}
.btn-page:disabled{opacity:0.4;cursor:not-allowed}

.page-numbers{display:flex;align-items:center;gap:4px}
.btn-page-num{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:8px;color:var(--muted);font-size:13px;cursor:pointer;transition:all 0.2s}
.btn-page-num:hover{background:var(--panel);border-color:var(--line)}
.btn-page-num.active{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.page-ellipsis{color:var(--muted);padding:0 4px}

@media(max-width:768px){
  .filters-historique{flex-direction:column}
  .filter-group{width:100%}
  .filter-select{width:100%}
  .event-header{flex-direction:column;align-items:flex-start}
  .event-user{margin-left:0;margin-top:4px}
  .pagination-bar{flex-wrap:wrap}
  .page-numbers{order:3;width:100%;justify-content:center;margin-top:8px}
}

.admin-only{border-left:2px solid var(--marque);margin-left:auto}
.user-info{display:flex;align-items:center;gap:12px}
.user-name-cell{font-weight:600}
.email-badge{font-size:12px;color:var(--muted)}
.role-badge{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:8px;font-size:11px;font-weight:600}
.role-admin{background:rgba(155,134,255,0.2);color:var(--marque)}
.role-gestionnaire{background:rgba(91,155,255,0.2);color:var(--accent)}
.role-lecteur{background:var(--panel2);color:var(--muted)}
.role-magasinier{background:rgba(239,162,87,0.2);color:var(--warn)}
.status-inactive{background:var(--bad-bg);color:var(--bad)}
.btn-reset:hover{border-color:var(--marque);background:rgba(155,134,255,0.15)}

/* Formulaire utilisateur */
.user-form{display:flex;flex-direction:column;gap:16px}
.user-form .field{display:flex;flex-direction:column;gap:6px}
.user-form .field label{font-size:13px;font-weight:600}
.user-form .field input,
.user-form .field select{padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--txt);font-size:14px}
.user-form .field input:disabled{opacity:0.6;cursor:not-allowed}
.field-help{font-size:11px;color:var(--muted);margin-top:4px}

/* Modale reset password */
.reset-modal{max-width:420px}
.reset-user-info{display:flex;align-items:center;gap:14px;padding:16px;background:var(--panel);border-radius:12px;margin-bottom:20px}
.reset-user-info .user-avatar{width:48px;height:48px;font-size:20px}
.user-name-lg{font-size:16px;font-weight:700}
.user-email{font-size:13px;color:var(--muted)}

.reset-options{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.reset-option{display:flex;align-items:flex-start;gap:12px;padding:14px;border:2px solid var(--line);border-radius:12px;cursor:pointer;transition:all 0.2s ease}
.reset-option:hover{border-color:var(--line2);background:var(--panel)}
.reset-option input{margin-top:4px}
.reset-option:has(input:checked){border-color:var(--accent);background:rgba(91,155,255,0.1)}
.option-content{display:flex;align-items:flex-start;gap:12px}
.option-icon{font-size:24px}
.option-content strong{display:block;font-size:14px;margin-bottom:2px}
.option-content p{font-size:12px;color:var(--muted);margin:0}

.password-display{display:flex;gap:8px;align-items:center}
.password-input{flex:1;font-family:monospace;font-size:16px!important;letter-spacing:1px;background:var(--panel)!important}
.btn-copy,.btn-refresh{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;background:var(--panel2);font-size:16px;cursor:pointer;transition:all 0.2s ease}
.btn-copy:hover,.btn-refresh:hover{border-color:var(--accent);background:var(--panel3)}

.reset-warning{display:flex;align-items:flex-start;gap:12px;padding:14px;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:10px;margin-top:16px}
.reset-warning span{font-size:20px}
.reset-warning p{font-size:12px;color:var(--warn);margin:0;line-height:1.5}

/* ========================================== DASHBOARD DEPENSES ========================================== */
.dashboard-depenses{margin-bottom:24px}
.dashboard-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:18px}
.card-chart{min-height:280px}

/* Donut Chart */
.donut-chart-container{display:flex;flex-direction:column;align-items:center;padding:16px}
.donut-chart{width:160px;height:160px;transform:rotate(-90deg)}
.donut-segment{transition:stroke-dashoffset 0.5s ease}
.donut-total-label{fill:var(--muted);font-size:8px;transform:rotate(90deg);transform-origin:50% 50%}
.donut-total-value{fill:var(--txt);font-size:10px;font-weight:700;transform:rotate(90deg);transform-origin:50% 50%}
.donut-legend{display:flex;flex-direction:column;gap:8px;margin-top:16px;width:100%}
.legend-item{display:flex;align-items:center;gap:8px;font-size:12px}
.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.legend-label{flex:1;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend-value{font-weight:600;color:var(--txt)}

/* Line Chart */
.line-chart-container{padding:16px;height:200px;display:flex;flex-direction:column}
.line-chart{flex:1;width:100%}
.line-path{stroke-linecap:round;stroke-linejoin:round}
.line-point{transition:r 0.2s}
.line-point:hover{r:5}
.line-chart-labels{display:flex;justify-content:space-between;padding:8px 10px 0;font-size:11px;color:var(--muted)}

/* Top Expenses */
.top-expenses-list{display:flex;flex-direction:column;gap:10px;padding:12px}
.top-expense-item{display:flex;align-items:center;gap:12px;padding:10px;background:var(--panel2);border-radius:8px;transition:background 0.2s}
.top-expense-item:hover{background:var(--panel3)}
.top-rank{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--marque),var(--accent));color:#fff;font-size:11px;font-weight:700;border-radius:6px}
.top-expense-info{flex:1;min-width:0}
.top-expense-desc{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-expense-meta{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.top-expense-amount{font-size:14px;font-weight:700;color:var(--bad);white-space:nowrap}

/* Lot Expenses */
.lot-expenses-grid{display:flex;flex-direction:column;gap:10px;padding:12px}
.lot-expense-item{padding:8px 0}
.lot-expense-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.lot-expense-amount{font-size:13px;font-weight:600;color:var(--bad)}
.lot-expense-bar{height:6px;background:var(--panel3);border-radius:3px;overflow:hidden}
.lot-expense-bar-fill{height:100%;background:linear-gradient(90deg,var(--marque),var(--accent));border-radius:3px;transition:width 0.5s ease}

/* Category Bars amélioration */
.category-bars{padding:12px}
.category-bar-item{margin-bottom:12px}
.category-bar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.category-name{font-size:13px;color:var(--txt)}
.category-amount{font-size:12px;font-weight:600;color:var(--bad)}
.category-bar{height:8px;background:var(--panel3);border-radius:4px;overflow:hidden}
.category-bar-fill{height:100%;background:linear-gradient(90deg,#ff5c8a,#7c5cff);border-radius:4px;transition:width 0.5s ease}
.category-pct{font-size:11px;color:var(--muted)}

/* Month Chart amélioration */
.month-chart{display:flex;justify-content:space-around;align-items:flex-end;height:180px;padding:16px}
.month-bar-item{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
.month-bar-container{width:100%;max-width:40px;height:120px;background:var(--panel3);border-radius:6px;display:flex;align-items:flex-end;overflow:hidden}
.month-bar-fill{width:100%;background:linear-gradient(180deg,#ff5c8a,#7c5cff);border-radius:6px 6px 0 0;transition:height 0.5s ease}
.month-label{font-size:11px;color:var(--muted)}
.month-value{font-size:10px;font-weight:600;color:var(--txt)}

@media(max-width:1024px){
  .dashboard-grid-3{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .dashboard-grid-3{grid-template-columns:1fr}
  .donut-chart-container{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .donut-chart{width:120px;height:120px}
  .donut-legend{width:auto;flex:1;min-width:140px}
  .line-chart-container{height:160px}
  .top-expense-item{padding:8px}
  .top-rank{width:24px;height:24px;font-size:10px}
}

/* ========================================== LOYERS MOBILE CARDS ========================================== */
.desktop-only{display:block}
.mobile-only{display:none}

.loyers-cards{display:flex;flex-direction:column;gap:12px;padding:16px}

.loyer-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;transition:all 0.2s}
.loyer-card:hover{border-color:var(--line2)}
.loyer-card-ok{border-left:3px solid var(--ok)}
.loyer-card-partiel{border-left:3px solid var(--warn)}
.loyer-card-impaye{border-left:3px solid var(--bad)}

.loyer-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.loyer-card-tenant{display:flex;align-items:center;gap:10px}
.loyer-card-tenant .tenant-avatar{width:40px;height:40px;font-size:16px}
.tenant-details{display:flex;flex-direction:column;gap:2px}
.tenant-details .tenant-name{font-weight:600;font-size:14px}
.tenant-details .lot-badge{font-size:11px}

.loyer-card-amounts{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;padding:10px;background:var(--panel2);border-radius:8px}
.amount-row{display:flex;justify-content:space-between;align-items:center}
.amount-label{font-size:12px;color:var(--muted)}
.amount-value{font-size:14px;font-weight:600}
.amount-success{color:var(--ok)}
.amount-warning{color:var(--warn)}

.loyer-card-progress{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.progress-bar{flex:1;height:6px;background:var(--panel3);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;border-radius:3px;transition:width 0.3s}
.progress-ok{background:var(--ok)}
.progress-partiel{background:var(--warn)}
.progress-impaye{background:var(--bad)}
.progress-text{font-size:11px;color:var(--muted);min-width:35px;text-align:right}

.loyer-card-actions{display:flex;gap:8px;flex-wrap:wrap}
.loyer-card-actions .btn-action{flex:1;min-width:70px;justify-content:center}

/* ========================================== CARTES MOBILES GENERIQUES ========================================== */
.mobile-cards{display:flex;flex-direction:column;gap:12px;padding:16px}

.mobile-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;transition:all 0.2s}
.mobile-card:hover{border-color:var(--line2)}

.mobile-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;gap:10px}
.mobile-card-identity{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.mobile-card-identity .tenant-avatar,.mobile-card-identity .user-avatar{width:42px;height:42px;font-size:16px;flex-shrink:0}
.mobile-card-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-card-sub{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:2px}
.phone-sm{font-size:11px}

.mobile-card-body{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--panel2);border-radius:8px;margin-bottom:12px}
.mobile-card-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.row-label{font-size:12px;color:var(--muted);flex-shrink:0}
.row-value{font-size:13px;font-weight:500;text-align:right}
.badge-sm{font-size:10px;padding:2px 6px;border-radius:4px}
.badge-sm.badge-ok{background:var(--ok-bg);color:var(--ok)}

.mobile-card-actions{display:flex;gap:8px;flex-wrap:wrap}
.mobile-card-actions .btn-action{flex:1;min-width:60px;justify-content:center;padding:10px 8px !important;font-size:12px !important}
.mobile-card-actions .btn-action span{margin-right:4px}

/* Variantes de cartes */
.card-active{border-left:3px solid var(--ok)}
.card-archived{border-left:3px solid var(--muted);opacity:0.8}
.card-inactive{border-left:3px solid var(--bad);opacity:0.7}

.card-expense{border-left:3px solid var(--bad)}
.expense-icon{font-size:24px}
.expense-amount{font-size:16px;font-weight:700;color:var(--bad)}

.card-movement-in{border-left:3px solid var(--ok)}
.card-movement-out{border-left:3px solid var(--warn)}
.movement-icon{font-size:24px}
.movement-icon.icon-in{color:var(--ok)}
.movement-icon.icon-out{color:var(--warn)}
.movement-qty{font-size:18px;font-weight:700}
.qty-in{color:var(--ok)}
.qty-out{color:var(--warn)}

/* Séjours cards */
.sejours-cards{display:flex;flex-direction:column;gap:12px;padding:16px}
.mobile-card-amount{font-size:16px;font-weight:700;color:var(--ok)}
.mobile-card-label{font-size:12px;color:var(--muted)}
.text-success{color:var(--ok)}
.text-muted{color:var(--muted)}
.font-medium{font-weight:500}
.font-bold{font-weight:700}
.tr-total{background:var(--panel2);border-top:2px solid var(--line)}
.tr-total td{padding-top:12px;padding-bottom:12px}

/* Card collapsible */
.card-collapsible{overflow:hidden}
.card-header-toggle{cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.card-header-toggle:hover{background:var(--panel2)}
.card-header-toggle .header-left{display:flex;align-items:center;gap:12px}
.btn-toggle{display:flex;align-items:center;gap:6px;padding:8px 14px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;font-size:13px;color:var(--fg);cursor:pointer;transition:all 0.2s}
.btn-toggle:hover{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
.toggle-icon{font-size:10px;transition:transform 0.2s}
.card-body-collapsible{border-top:1px solid var(--line)}

/* Pagination */
.pagination-bar{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-top:1px solid var(--line);background:var(--panel2);flex-wrap:wrap;gap:12px}
.pagination-info{font-size:13px;color:var(--muted)}
.pagination-controls{display:flex;align-items:center;gap:12px}
.btn-page{padding:8px 16px;background:var(--bg);border:1px solid var(--line);border-radius:6px;font-size:13px;color:var(--fg);cursor:pointer;transition:all 0.2s}
.btn-page:hover:not(:disabled){background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
.btn-page:disabled{opacity:0.4;cursor:not-allowed}
.page-indicator{font-size:13px;color:var(--muted);min-width:100px;text-align:center}

.card-user{border-left:3px solid var(--accent)}

/* Bouton warning */
.btn-warning-action{border-color:var(--warn-line);color:var(--warn)}
.btn-warning-action:hover{background:var(--warn-bg);border-color:var(--warn)}

/* ========================================== RELANCES WHATSAPP ========================================== */

/* Configuration grid */
.config-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));gap:20px;padding:20px}
.config-item{display:flex;flex-direction:column;gap:8px}
.config-item label{font-size:13px;font-weight:500;color:var(--txt2)}
.config-item select{padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--txt);font-size:14px}
.config-item select:focus{border-color:var(--accent);outline:none}
.config-help{font-size:11px;color:var(--muted)}
.config-actions{display:flex;gap:12px;padding:0 20px 20px;justify-content:flex-end}
.next-execution{padding:12px 20px;background:var(--accent-bg);border-top:1px solid var(--line);font-size:13px;color:var(--accent)}

/* Switch toggle */
.switch{position:relative;display:inline-block;width:48px;height:26px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:var(--line);border-radius:26px;transition:0.3s}
.slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;bottom:3px;background:white;border-radius:50%;transition:0.3s}
input:checked + .slider{background:var(--accent)}
input:checked + .slider:before{transform:translateX(22px)}

/* Locataires écartés */
.ecartes-list{padding:16px;display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto}
.ecarte-item{display:grid;grid-template-columns:1fr 100px 2fr;gap:12px;padding:10px 12px;background:var(--panel);border-radius:8px;font-size:13px;align-items:center}
.ecarte-nom{font-weight:500}
.ecarte-lot{color:var(--muted);text-align:center}
.ecarte-motif{color:var(--txt2);font-size:12px}
.ecarte-more{text-align:center;color:var(--muted);font-size:12px;padding:8px}

/* Aperçu message */
.apercu-message{display:flex;flex-direction:column;gap:12px}
.apercu-header{display:flex;align-items:center;gap:12px}
.apercu-tel,.apercu-periode{font-size:13px;color:var(--muted)}
.apercu-body{background:var(--panel);border-radius:12px;padding:16px;border-left:4px solid var(--accent)}
.apercu-body pre{white-space:pre-wrap;font-family:inherit;font-size:14px;line-height:1.6;margin:0}
.apercu-modele{font-size:12px;color:var(--muted);text-align:right}

/* Boutons secondaires */
.btn-secondary{padding:10px 20px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--txt);font-size:14px;cursor:pointer;transition:all 0.2s}
.btn-secondary:hover{background:var(--panel3);border-color:var(--line2)}
.btn-primary{padding:10px 20px;background:var(--accent);border:none;border-radius:8px;color:white;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.2s}
.btn-primary:hover{background:var(--accent-hover)}

/* Formulaire de message */
.card-highlight{border-left:4px solid var(--accent)}
.message-form{padding:20px;display:flex;flex-direction:column;gap:20px}
.form-row{display:flex;gap:16px;flex-wrap:wrap}
.form-row .field{flex:1;min-width:200px}
.form-row .field.flex-2{flex:2}
.form-row .field.flex-1{flex:1}
.message-textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--txt);font-size:14px;font-family:inherit;resize:vertical;min-height:100px}
.message-textarea:focus{border-color:var(--accent);outline:none}
.message-actions{display:flex;gap:12px;justify-content:flex-end}
.field-warning{color:var(--warn);font-size:12px;margin-top:4px}

/* Info box */
.info-box{display:flex;gap:12px;padding:16px;background:var(--accent-bg);border-radius:8px;border-left:3px solid var(--accent)}
.info-box .info-icon{font-size:20px}
.info-box p{margin:0;font-size:14px;color:var(--txt2)}

/* Aperçu téléphone */
.apercu-container{display:flex;justify-content:center;padding:20px}
.apercu-phone{width:100%;max-width:400px;background:var(--panel);border-radius:16px;padding:16px;border:1px solid var(--line)}
.apercu-header-phone{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.apercu-tel-badge{font-size:12px;color:var(--muted)}
.apercu-bubble{background:var(--ok-bg);border-radius:12px;padding:12px 16px;font-size:14px;line-height:1.5;white-space:pre-wrap;border-left:3px solid var(--ok)}

/* Message dans le journal */
.msg-dest{display:flex;flex-direction:column;gap:2px}
.msg-nom{font-weight:500}
.msg-tel{font-size:12px;color:var(--muted)}
.text-muted{color:var(--muted);font-style:italic}

/* ========================================== MODALE CONFIRMATION WHATSAPP ========================================== */

/* Modale de confirmation */
.wa-confirm-modal{display:flex;flex-direction:column;gap:0;min-width:400px;max-width:500px}
.wa-confirm-header{display:flex;align-items:center;gap:16px;padding:20px 24px;background:linear-gradient(135deg, var(--accent-bg) 0%, var(--panel) 100%);border-bottom:1px solid var(--line)}
.wa-confirm-icon{font-size:32px}
.wa-confirm-header h3{margin:0;font-size:18px;font-weight:600}
.wa-confirm-subtitle{margin:4px 0 0;font-size:13px;color:var(--muted)}

.wa-confirm-body{padding:20px 24px;display:flex;flex-direction:column;gap:20px}
.wa-confirm-section{display:flex;flex-direction:column;gap:8px}
.wa-confirm-label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px}

/* Destinataire */
.wa-confirm-dest{display:flex;align-items:center;gap:12px;padding:12px;background:var(--panel);border-radius:12px;border:1px solid var(--line)}
.wa-dest-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;color:white}
.wa-dest-info{flex:1}
.wa-dest-name{font-size:16px;font-weight:600;margin-bottom:4px}
.wa-dest-details{display:flex;gap:12px;font-size:13px;color:var(--muted)}
.wa-dest-lot{color:var(--txt2)}
.wa-dest-phone{color:var(--accent)}

/* Type */
.wa-confirm-type{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.wa-confirm-periode{font-size:13px;color:var(--txt2)}
.wa-confirm-resume{font-size:13px;color:var(--muted);font-style:italic}

/* Message */
.wa-confirm-message{background:var(--panel);border-radius:12px;padding:16px;border:1px solid var(--line)}
.wa-message-bubble{background:linear-gradient(135deg, #dcf8c6 0%, #c5e1a5 100%);border-radius:12px;padding:12px 16px;margin-bottom:8px;border-left:4px solid #25d366}
.wa-message-bubble pre{margin:0;white-space:pre-wrap;font-family:inherit;font-size:14px;line-height:1.5;color:#1a1a1a}
.wa-message-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.wa-message-time{color:var(--accent)}

/* Avertissement */
.wa-confirm-warning{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;background:var(--warn-bg);border-radius:8px;border-left:3px solid var(--warn)}
.wa-warning-icon{font-size:18px}
.wa-confirm-warning p{margin:0;font-size:13px;color:var(--warn);line-height:1.4}

/* Actions */
.wa-confirm-actions{display:flex;gap:12px;padding:16px 24px;background:var(--panel2);border-top:1px solid var(--line);justify-content:flex-end}
.btn-cancel{padding:12px 24px;background:transparent;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:14px;cursor:pointer;transition:all 0.2s}
.btn-cancel:hover{background:var(--panel);border-color:var(--txt2);color:var(--txt)}
.btn-send{padding:12px 28px;background:linear-gradient(135deg, #25d366 0%, #128c7e 100%);border:none;border-radius:8px;color:white;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:8px}
.btn-send:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(37, 211, 102, 0.3)}
.btn-send:disabled{opacity:0.7;cursor:not-allowed;transform:none}
.btn-send-icon{font-size:16px}

/* Spinner */
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,0.3);border-top-color:white;border-radius:50%;animation:spin 0.8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* Modale de succès */
.wa-success-modal{text-align:center;padding:32px 24px;min-width:320px}
.wa-success-icon{font-size:64px;margin-bottom:16px;animation:successPop 0.4s ease-out}
@keyframes successPop{0%{transform:scale(0)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
.wa-success-modal h3{margin:0 0 8px;font-size:20px;color:var(--ok)}
.wa-success-dest{margin:0 0 20px;font-size:14px;color:var(--txt2)}
.wa-success-details{background:var(--panel);border-radius:12px;padding:16px;margin-bottom:20px;text-align:left}
.wa-success-item{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.wa-success-item:last-child{border-bottom:none}
.wa-success-label{font-size:13px;color:var(--muted)}
.wa-success-simulation{margin-top:12px;padding:10px;background:var(--warn-bg);border-radius:8px;font-size:12px;color:var(--warn);text-align:center}
.wa-success-close{width:100%;padding:14px;font-size:15px}

@media(max-width:768px){
  .wa-confirm-modal{min-width:auto;max-width:100%}
  .wa-confirm-header{padding:16px}
  .wa-confirm-body{padding:16px}
  .wa-confirm-actions{flex-direction:column-reverse}
  .wa-confirm-actions button{width:100%}
  .wa-dest-details{flex-direction:column;gap:4px}
}

@media(max-width:768px){
  .config-grid{grid-template-columns:1fr 1fr;gap:16px;padding:16px}
  .config-actions{flex-direction:column}
  .config-actions button{width:100%}
  .ecarte-item{grid-template-columns:1fr;gap:4px}
  .ecarte-lot{text-align:left}
  .form-row{flex-direction:column}
  .form-row .field{min-width:100%}
  .message-actions{flex-direction:column}
  .message-actions button{width:100%}
}

@media(max-width:768px){
  .desktop-only{display:none !important}
  .mobile-only{display:block !important}
}

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

/* Menu hamburger - caché par défaut sur desktop */
.menu-toggle{display:none;width:44px;height:44px;background:transparent;border:none;cursor:pointer;padding:10px;flex-direction:column;justify-content:space-around;align-items:center}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--txt);border-radius:2px;transition:all 0.3s ease}
.menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Overlay pour fermer le menu */
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:99;opacity:0;transition:opacity 0.3s ease}
.nav-overlay.active{display:block;opacity:1}

/* Header du menu mobile */
.nav-header{display:none;padding:16px 20px;border-bottom:1px solid var(--line);justify-content:space-between;align-items:center}
.nav-title{font-weight:600;font-size:16px}
.nav-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--panel2);border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:16px;color:var(--muted)}
.nav-close:hover{background:var(--panel3);color:var(--txt)}

/* Icônes de navigation - cachées sur desktop */
.nav-icon{display:none;margin-right:10px;font-size:18px}

/* Texte logout - caché sur mobile */
.logout-icon{display:none;font-size:18px}

/* Tablette */
@media(min-width:769px) and (max-width:1100px){
  .brand-text{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #whoami{font-size:12px !important;max-width:120px;overflow:hidden;text-overflow:ellipsis}
}

@media(max-width:768px){
  /* Header mobile */
  header{padding:10px 12px !important;gap:8px !important}
  .menu-toggle{display:flex}
  .brand{font-size:13px !important}
  .brand span:first-child{width:34px !important;height:34px !important;font-size:13px !important}
  .brand-text{display:none}
  #whoami{display:none}
  .logout-text{display:none}
  .logout-icon{display:inline}
  #b-logout{padding:8px 12px !important;min-width:44px}
  
  /* Navigation mobile - slide from left */
  #menu{position:fixed !important;top:0;left:-280px;width:280px;height:100vh;flex-direction:column !important;background:var(--panel) !important;z-index:100;padding:0 !important;gap:0 !important;transition:left 0.3s ease;overflow-y:auto;box-shadow:4px 0 20px rgba(0,0,0,0.3)}
  #menu.open{left:0}
  .nav-header{display:flex}
  .nav-icon{display:inline}
  #menu a{padding:16px 20px !important;border-radius:0 !important;border-bottom:1px solid var(--line);font-size:15px !important;display:flex;align-items:center}
  #menu a:hover,#menu a.on{background:var(--panel2) !important}
  #menu a.on{border-left:3px solid var(--accent)}
  .admin-only{border-left:none;margin-left:0;border-top:1px solid var(--marque)}
  
  /* Main content */
  main{padding:12px !important}
  
  /* Page header */
  .page-header{flex-direction:column;gap:12px}
  .page-title{font-size:22px !important}
  .page-icon{font-size:26px !important}
  .page-actions{width:100%;display:flex;flex-wrap:wrap;gap:8px}
  .btn-primary-lg{flex:1;min-width:140px;font-size:13px !important;padding:10px 14px !important}
  
  /* KPIs */
  .kpis-grid{gap:10px !important}
  .kpi-card{padding:14px !important}
  .kpi-value{font-size:22px !important}
  .kpi-label{font-size:11px !important}
  
  /* Cards */
  .card{padding:14px !important;border-radius:12px !important}
  .card-header{flex-direction:column;align-items:flex-start;gap:8px}
  .card-header h2{font-size:16px !important}
  
  /* Tables */
  .table-responsive{margin:0 -14px;padding:0 14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-modern{font-size:12px !important;min-width:600px}
  .table-modern th,.table-modern td{padding:10px 8px !important}
  .td-actions{white-space:nowrap}
  .btn-action{padding:6px 10px !important;font-size:11px !important}
  
  /* Filtres */
  .filters-bar{flex-direction:column !important;gap:10px !important}
  .search-box{width:100% !important;max-width:none !important}
  .filter-group{width:100%}
  .filter-select,.filter-date{width:100% !important}
  .date-range{flex-direction:column;gap:8px;width:100%}
  .date-separator{display:none}
  
  /* Stock cards */
  .stock-grid{grid-template-columns:1fr !important}
  .stock-card{padding:14px !important}
  .stock-actions{flex-wrap:wrap}
  .btn-stock{flex:1;min-width:80px;font-size:12px !important}
  
  /* Journal timeline */
  .journal-timeline{padding:0 12px 12px}
  .journal-date-header{padding:10px 12px;font-size:13px}
  .journal-events{padding-left:12px}
  .event-time{width:40px;font-size:11px}
  .event-content{padding:10px 12px}
  .action-badge,.entity-badge{font-size:10px;padding:3px 8px}
  
  /* Pagination */
  .pagination-bar{padding:12px;gap:8px}
  .btn-page{padding:8px 12px;font-size:12px}
  .btn-page-num{width:32px;height:32px;font-size:12px}
  
  /* Dashboard */
  .dashboard-grid-2,.dashboard-grid-3{grid-template-columns:1fr !important}
  .chart{height:200px !important}
  
  /* Locataires */
  .tenant-card{padding:14px !important}
  .tenant-header{flex-direction:column;align-items:flex-start;gap:10px}
  .tenant-actions{width:100%;justify-content:flex-start}
  
  /* Export buttons */
  .export-buttons-inline{gap:6px}
  .btn-export-sm{width:32px;height:32px;font-size:14px}
}

@media(max-width:480px){
  /* Extra small screens */
  header{padding:8px 10px !important}
  .brand span:first-child{width:28px !important;height:28px !important;font-size:11px !important}
  
  main{padding:10px !important}
  
  .page-title{font-size:18px !important}
  .page-icon{font-size:22px !important}
  
  .kpis-grid{grid-template-columns:1fr !important}
  .kpi-card{padding:12px !important}
  .kpi-value{font-size:20px !important}
  
  .card{padding:12px !important}
  .card-header h2{font-size:14px !important}
  
  .table-modern{font-size:11px !important}
  .table-modern th,.table-modern td{padding:8px 6px !important}
  
  .btn-action{padding:5px 8px !important;font-size:10px !important}
  .btn-action span{display:none}
  
  .stock-actions{gap:6px}
  .btn-stock{padding:8px !important;font-size:11px !important}
  .btn-stock span{margin-right:4px}
}

/* ========================================== MODALES MOBILE ========================================== */
@media(max-width:768px){
  dialog{width:95vw !important;max-width:none !important;max-height:90vh !important;margin:auto;padding:16px !important;border-radius:16px !important}
  dialog h2{font-size:18px !important}
  dialog .field{margin-bottom:14px}
  dialog label{font-size:13px !important}
  dialog input,dialog select,dialog textarea{font-size:16px !important;padding:12px !important}
  dialog .actions{flex-direction:column-reverse;gap:10px}
  dialog .actions button{width:100%;padding:14px !important;font-size:15px !important}
  
  /* Quick amount buttons */
  .quick-amounts{flex-wrap:wrap;gap:6px}
  .btn-quick-amount{flex:1;min-width:70px;font-size:12px !important;padding:8px !important}
  
  /* Modale archivage/restauration */
  .user-info-card{flex-direction:column;text-align:center;padding:14px !important}
  .user-info-card .user-avatar{margin-bottom:10px}
  .archive-reasons,.restore-reasons{gap:8px}
  .reason-option{padding:10px 12px !important}
}

/* ========================================== TOUCH IMPROVEMENTS ========================================== */
@media(hover:none) and (pointer:coarse){
  /* Larger touch targets */
  button,.btn-action,.btn-stock,.btn-page,.btn-page-num{min-height:44px}
  input,select,textarea{min-height:44px}
  #menu a{min-height:48px}
  
  /* Remove hover effects that don't work on touch */
  .tr-hover:hover{background:transparent}
  .card:hover{transform:none;box-shadow:var(--ombre)}
  .stock-card:hover{transform:none}
  .tenant-card:hover{transform:none}
  
  /* Active states for touch feedback */
  button:active,.btn-action:active,.btn-stock:active{transform:scale(0.97);opacity:0.9}
  #menu a:active{background:var(--panel2) !important}
}