/* =========================================================
   LordCaisse — components.css
   Composants réutilisables : cartes, panneaux, tableaux,
   badges, boutons, formulaires, modales, toasts, graphiques
   ========================================================= */

/* ---- Cartes statistiques ---- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:22px;}
.stat-card{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:17px 18px 16px 20px; box-shadow:var(--shadow-sm); transition:box-shadow .18s ease, transform .18s ease;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-1px);}
.stat-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3.5px; background:var(--navy-mid);}
.stat-card .label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; font-weight:700;}
.stat-card .value{font-size:var(--fs-2xl); font-weight:800; margin-top:7px; color:var(--navy-text); letter-spacing:-.5px; font-variant-numeric:tabular-nums;}
.stat-card .value.warn{color:var(--warning);}
.stat-card .value.danger{color:var(--danger);}
.stat-card .hint{font-size:11.5px; color:var(--muted-2); margin-top:5px;}

/* ---- Panneaux ---- */
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px; margin-bottom:18px; box-shadow:var(--shadow-sm);}
.panel h2{font-size:var(--fs-lg); margin:0 0 15px; font-weight:800; color:var(--text); letter-spacing:-.1px;}
.panel h3{font-size:12.5px; margin:20px 0 9px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px;}

/* ---- Tableaux ---- */
table{width:100%; border-collapse:collapse; font-size:13px;}
th{text-align:left; padding:10px 11px; color:var(--muted); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.4px; border-bottom:2px solid var(--border); position:sticky; top:0; background:var(--surface); z-index:1;}
td{padding:11px; border-bottom:1px solid var(--border); vertical-align:middle; transition:background .12s ease;}
tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--navy-pale) 38%, transparent);}
tr:hover td{background:var(--navy-pale);}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums;}
.empty-row td{color:var(--muted-2); text-align:center; padding:28px; font-style:italic;}

/* Tableau à lignes défilantes : l'en-tête et le contexte restent visibles,
   seules les lignes défilent dans leur propre zone. */
.table-scroll{
  max-height:calc(100vh - 320px);
  min-height:180px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
}
.table-scroll th{position:sticky; top:0; z-index:2; box-shadow:inset 0 -1px 0 var(--border);}

/* Barre de pagination sous les tableaux */
.table-pager{
  display:flex; align-items:center; gap:5px; justify-content:center; flex-wrap:wrap;
  margin-top:12px; font-size:12px;
}
.tp-btn{
  min-width:30px; padding:5px 10px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--navy-text); font-family:var(--font); font-size:12px;
  font-weight:600; cursor:pointer; transition:background .12s ease, border-color .12s ease, transform .1s ease;
}
.tp-btn:hover:not([disabled]){background:var(--navy-pale); border-color:var(--navy-mid);}
.tp-btn.active{background:var(--navy); color:#fff; border-color:var(--navy); font-weight:700; cursor:default;}
.tp-btn[disabled]{opacity:.4; cursor:not-allowed;}
.tp-ellipsis{color:var(--muted-2); padding:0 2px;}
.tp-info{color:var(--muted-2); font-size:11.5px; margin-left:8px; white-space:nowrap;}

/* ---- Badges ---- */
.badge{display:inline-block; padding:3.5px 10px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.1px;}
.badge.navy{background:var(--navy-pale); color:var(--navy-text);}
.badge.gold{background:var(--gold-pale); color:#8a6508; border:1px solid #F0E1B8;}
.badge.success{background:var(--success-pale); color:var(--success);}
.badge.warning{background:var(--warning-pale); color:var(--warning);}
.badge.danger{background:var(--danger-pale); color:var(--danger);}
.badge.muted{background:#EEF0F3; color:var(--muted);}

/* ---- Boutons ---- */
.btn{
  display:inline-flex; align-items:center; gap:6px; padding:9.5px 17px; border-radius:var(--radius-sm); border:1px solid transparent;
  font-family:var(--font); font-size:13px; font-weight:700; cursor:pointer; text-decoration:none;
  transition:transform .1s ease, box-shadow .15s ease, background .15s ease, filter .15s ease;
}
.btn-primary{background:var(--navy); color:#fff; box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--navy-dark); box-shadow:var(--shadow-md); transform:translateY(-1px);}
.btn-gold{background:var(--gold); color:#3D2E05; box-shadow:var(--shadow-sm); font-weight:800;}
.btn-gold:hover{background:#E9B832; box-shadow:var(--shadow-md); transform:translateY(-1px);}
.btn-outline{background:var(--surface); color:var(--navy-text); border-color:var(--border);}
.btn-outline:hover{background:var(--navy-pale); border-color:var(--navy-mid);}
.btn-danger-outline{background:var(--surface); color:var(--danger); border-color:var(--border);}
.btn-danger-outline:hover{background:var(--danger-pale); border-color:var(--danger);}
.btn-sm{padding:6px 11px; font-size:12px;}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none !important; box-shadow:none !important;}
.btn-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}

/* ---- Formulaires ---- */
.field{margin-bottom:14px;}
.field label{display:block; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:5px;}
.field input, .field select, .field textarea{
  width:100%; padding:9.5px 11px; border:1px solid var(--border); border-radius:var(--radius-sm);
  font-family:var(--font); font-size:13.5px; color:var(--text); background:var(--surface);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--navy-mid); box-shadow:0 0 0 3.5px rgba(25,104,190,.14);
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.field-hint{font-size:11px; color:var(--muted-2); margin-top:4px;}
.checkbox-row{display:flex; align-items:center; gap:7px; margin-bottom:13px;}
.checkbox-row input{width:auto;}

/* ---- Modales ---- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(9,22,38,.56); backdrop-filter:blur(2px); display:none;
  align-items:flex-start; justify-content:center; padding:40px 20px; z-index:100;
}
.modal{background:var(--surface); border-radius:var(--radius-lg); width:100%; max-width:560px; padding:26px 28px; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.08);
  /* La fenêtre reste en place : seul son contenu défile à l'intérieur (pas toute la page) */
  max-height:calc(100vh - 60px); max-height:calc(100dvh - 60px);
  overflow-y:auto; overscroll-behavior:contain;
}
.modal-overlay.show{display:flex;}
.modal h2{margin:0 0 4px; font-size:18px; font-weight:800; letter-spacing:-.2px;}
.modal .modal-sub{color:var(--muted); font-size:12.5px; margin-bottom:19px;}
.modal-close{float:right; background:none; border:none; font-size:20px; color:var(--muted); cursor:pointer; line-height:1;}

/* ---- Recherche ---- */
.search-bar{display:flex; gap:10px; margin-bottom:16px;}
.search-bar input{flex:1; padding:10.5px 13px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13.5px; font-family:var(--font); transition:border-color .15s ease, box-shadow .15s ease;}
.search-bar input:focus{outline:none; border-color:var(--navy-mid); box-shadow:0 0 0 3.5px rgba(25,104,190,.14);}

/* ---- Barre d'outils liste clients (recherche + filtres) ---- */
.clients-toolbar{display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap;}
.clients-toolbar .view-toggle{flex-shrink:0;}

/* Colonnes triables */
th.sortable{cursor:pointer; user-select:none; transition:color .15s ease;}
th.sortable:hover{color:var(--navy-mid);}
th.sortable.sorted-asc::after{content:" ▲"; font-size:9px; color:var(--navy-mid);}
th.sortable.sorted-desc::after{content:" ▼"; font-size:9px; color:var(--navy-mid);}

/* ---- États vides ---- */
.empty-state{text-align:center; padding:36px 20px; color:var(--muted); font-size:13px;}

/* ---- Toast : notification discrète en haut centre (snackbar) ---- */
.toast{
  position:fixed; top:78px; left:50%; transform:translate(-50%, -14px); z-index:600;
  background:var(--surface); color:var(--text); padding:11px 18px 11px 12px;
  border-radius:var(--radius-lg); font-size:13.5px; font-weight:500; line-height:1.45;
  border:1px solid var(--border);
  box-shadow:0 8px 28px rgba(10,30,54,.16);
  min-width:260px; max-width:min(540px, calc(100vw - 32px));
  opacity:0; transition:opacity .22s ease, transform .22s ease;
  display:flex; align-items:center; gap:10px; pointer-events:none;
  overflow:hidden;
}
/* Accent coloré à gauche : vert succès / rouge erreur, sans fond criard */
.toast::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--success);
}
.toast::after{
  content:""; position:absolute; left:3px; bottom:0; height:2px; width:calc(100% - 3px);
  background:var(--success); opacity:.25; transform-origin:left;
  animation:toastBar 4.2s linear forwards;
}
@keyframes toastBar{from{transform:scaleX(1);} to{transform:scaleX(0);}}
.toast.show{opacity:1; transform:translate(-50%, 0);}
.toast svg{flex-shrink:0;}
/* Icône en pastille ronde pâle, reprise du vert/rouge en texte */
.toast-ico{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:var(--success-pale); color:var(--success);
}
.toast.danger::before, .toast.danger::after{background:var(--danger);}
.toast.danger .toast-ico{color:var(--danger);}

/* ---- Barre de progression ---- */
.progress-bar{height:7px; border-radius:4px; background:#EAEDF3; overflow:hidden; margin-top:7px;}
.progress-bar .fill{height:100%; background:linear-gradient(90deg, var(--navy-mid), var(--navy)); border-radius:4px;}
.progress-bar .fill.warn{background:var(--warning);}
.progress-bar .fill.danger{background:var(--danger);}

/* ---- Divers ---- */
.detail-header{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:4px; flex-wrap:wrap; gap:10px;}
.id-chip{font-family:ui-monospace,Consolas,monospace; background:var(--navy-pale); color:var(--navy-text); padding:2.5px 8px; border-radius:5px; font-size:11.5px; font-weight:700; letter-spacing:.2px;}

.note-box{background:var(--gold-pale); border:1px solid #EEDCB2; border-radius:8px; padding:12px 15px; font-size:12.5px; color:#6b5320; margin-bottom:16px;}
.note-box.blue{background:var(--navy-pale); border-color:#C9DCF0; color:var(--navy-dark);}

/* ---- Dashboard ---- */
.dash-hero{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  background:linear-gradient(135deg, var(--navy-mid) -8%, var(--navy) 42%, var(--navy-dark) 115%);
  border-radius:var(--radius-lg); padding:26px 30px; margin-bottom:20px; color:#fff;
  box-shadow:0 10px 30px rgba(10,48,84,.35), var(--shadow-md); position:relative; overflow:hidden;
}
/* Halos lumineux doux (aurora) — remplace la grille technique */
.dash-hero .dh-grid{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(640px 320px at 88% -12%, rgba(245,197,66,.16), transparent 62%),
    radial-gradient(560px 300px at -6% 112%, rgba(147,197,253,.13), transparent 58%),
    radial-gradient(420px 220px at 55% 130%, rgba(255,255,255,.06), transparent 60%);
}
/* Reflet diagonal subtil (verre poli) */
.dash-hero .dh-grid::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.045) 50%, transparent 58%);
}
.dash-hero::after{
  content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,151,46,.18), transparent 65%); pointer-events:none;
}
.dash-hero::before{
  content:""; position:absolute; right:40px; bottom:-90px; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.07), transparent 70%); pointer-events:none;
}
.dash-hero-main{position:relative; z-index:1;}
.dash-hero-label{font-size:11px; text-transform:uppercase; letter-spacing:1px; color:#A9C3E0; font-weight:700;}
.dash-hero-value{font-size:var(--fs-hero); font-weight:800; letter-spacing:-.6px; margin-top:6px; font-variant-numeric:tabular-nums;}
.dash-hero-meta{display:flex; align-items:center; gap:9px; margin-top:9px; font-size:12.5px; color:#C9DCF0; flex-wrap:wrap;}
.dash-hero-meta span{display:inline-flex; align-items:center; gap:5px;}
.dash-hero-meta strong{color:#fff; font-weight:700;}
.dash-hero-sep{opacity:.45;}
.dash-hero-anticipe{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  font-size:11.5px; font-weight:700; color:#F5C542;
  background:rgba(245,197,66,.12); border:1px solid rgba(245,197,66,.4);
  padding:4px 11px; border-radius:14px;
}
.dash-hero-actions{display:flex; gap:10px; position:relative; z-index:1; flex-wrap:wrap;}
.dash-hero-actions .btn-outline{
  background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.25); color:#fff;
  backdrop-filter:blur(4px);
}
.dash-hero-actions .btn-outline:hover{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.4);}

.dash-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:1100px){ .dash-grid{grid-template-columns:1fr;} }
.dash-panel{margin-bottom:0;}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.panel-head h2{margin:0; display:flex; align-items:center; gap:8px; font-size:14.5px;}
.panel-head h2 svg{color:var(--navy-mid); flex-shrink:0;}
.panel-count{
  min-width:26px; height:22px; padding:0 8px; border-radius:11px; background:#EEF0F3; color:var(--muted);
  font-size:12px; font-weight:800; display:inline-flex; align-items:center; justify-content:center;
}
.panel-count.warn{background:var(--warning-pale); color:var(--warning);}
.panel-count.danger{background:var(--danger-pale); color:var(--danger);}

/* Outils du graphique dashboard : total + sélecteur de période */
.dash-chart-tools{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.dash-chart-tools .vt-btn{padding:5px 12px; font-size:11.5px;}
.dash-chart-wrap{position:relative;}
.dash-tooltip{
  position:absolute; top:0; left:0; transform:translateY(6px);
  background:var(--navy-dark); color:#fff; border-radius:7px;
  padding:6px 11px; font-size:11.5px; line-height:1.45;
  box-shadow:var(--shadow-md); pointer-events:none; white-space:nowrap; z-index:5;
}
.dash-tooltip b{display:block; font-weight:700; font-size:11px; opacity:.85;}
.dash-tooltip span{font-weight:800; font-size:12.5px;}
.dash-tooltip small{display:block; font-size:10.5px; opacity:.92; margin-top:2px;}
.dash-tooltip .tt-delta.pos{color:#4CC38A;}
.dash-tooltip .tt-delta.neg{color:#F87171;}

/* Cartes statistiques avec icône */
.stat-card{display:flex; gap:13px; align-items:flex-start;}
.stat-card .stat-ico{
  width:38px; height:38px; border-radius:var(--radius-sm); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--navy-pale); color:var(--navy-text);
}
.stat-card .stat-body{min-width:0;}
.stat-card.tone-success .stat-ico{background:var(--success-pale); color:var(--success);}
.stat-card.tone-warn .stat-ico{background:var(--warning-pale); color:var(--warning);}
.stat-card.tone-gold .stat-ico{background:var(--gold-pale); color:var(--gold-dark);}
.stat-card.tone-muted .stat-ico{background:#EEF0F3; color:var(--muted);}

/* États vides avec icône */
.empty-state{display:flex; flex-direction:column; align-items:center; gap:10px;}
.empty-ico{width:52px; height:52px; border-radius:50%; background:var(--navy-pale); color:var(--navy-mid); display:flex; align-items:center; justify-content:center; opacity:.75;}
.empty-illustration{
  display:flex; flex-direction:column; align-items:center; gap:12px; padding:34px 20px; text-align:center;
}
.empty-illustration .ei-art{
  width:72px; height:72px; border-radius:22px; transform:rotate(-4deg);
  background:linear-gradient(135deg, var(--navy-pale), color-mix(in srgb, var(--navy-pale) 55%, var(--surface)));
  display:flex; align-items:center; justify-content:center; color:var(--navy-mid);
  border:1.5px dashed color-mix(in srgb, var(--navy-mid) 35%, transparent);
}
.empty-illustration .ei-title{font-weight:800; font-size:14px; color:var(--text);}
.empty-illustration .ei-text{font-size:12.5px; color:var(--muted); max-width:320px; line-height:1.5;}
.empty-illustration .btn{margin-top:4px;}

/* ---- Animations d'entrée ---- */
@keyframes fadeInUp{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes popIn{
  from{opacity:0; transform:translateY(8px) scale(.97);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
.view-enter{animation:fadeInUp .28s ease both;}
.cards > .stat-card{animation:popIn .32s ease both;}
.cards > .stat-card:nth-child(1){animation-delay:.03s;}
.cards > .stat-card:nth-child(2){animation-delay:.07s;}
.cards > .stat-card:nth-child(3){animation-delay:.11s;}
.cards > .stat-card:nth-child(4){animation-delay:.15s;}
.cards > .stat-card:nth-child(5){animation-delay:.19s;}
.cards > .stat-card:nth-child(6){animation-delay:.23s;}
@media (prefers-reduced-motion: reduce){
  .view-enter, .cards > .stat-card{animation:none;}
  *{transition:none !important;}
}

/* ---- Squelette de chargement ---- */
@keyframes skPulse{
  0%, 100%{opacity:.55;}
  50%{opacity:1;}
}
.sk-anim{animation:skPulse 1.4s ease-in-out infinite;}
.sk-hero{height:118px; border-radius:14px; margin-bottom:20px; background:var(--navy-pale);}
.sk-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:22px;}
.sk-card{height:96px; border-radius:var(--radius); background:var(--navy-pale); border:1px solid var(--border);}
.sk-panel{height:180px; border-radius:var(--radius); background:var(--navy-pale); border:1px solid var(--border); margin-bottom:18px;}
.sk-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.sk-grid .sk-panel{height:150px; margin-bottom:0;}
@media (max-width:1100px){ .sk-grid{grid-template-columns:1fr;} }
@media (prefers-reduced-motion: reduce){
  .sk-anim{animation:none; opacity:.6;}
}

/* ---- Focus clavier visible ---- */
:focus-visible{
  outline:2.5px solid var(--navy-mid);
  outline-offset:2px;
  border-radius:6px;
}
.nav-item:focus-visible{outline-color:#fff; outline-offset:-2px;}
.btn:focus-visible, .menu-btn:focus-visible{outline-color:var(--gold-dark);}
html.theme-dark :focus-visible{outline-color:var(--gold);}

/* Icônes dans les boutons */
.btn svg{flex-shrink:0;}

/* ---- Bascule graphique / tableau ---- */
.view-toggle{display:flex; gap:0; border:1px solid var(--border); border-radius:8px; overflow:hidden; box-shadow:var(--shadow-sm);}
.vt-btn{
  display:flex; align-items:center; gap:6px; padding:7px 14px; border:none; background:var(--surface);
  font-family:var(--font); font-size:12px; font-weight:700; color:var(--muted); cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .1s ease;
}
.vt-btn + .vt-btn{border-left:1px solid var(--border);}
.vt-btn.active{background:var(--navy); color:#fff;}
.vt-btn:not(.active):hover{background:var(--navy-pale); color:var(--navy-text);}

/* ---- Bande de jours du cycle (couverture des paiements) ---- */
.jour-strip{display:flex; flex-wrap:wrap; gap:2px; margin-top:12px;}
.js-cell{
  width:23px; height:23px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; letter-spacing:-.2px; cursor:default;
  background:var(--navy-pale); color:var(--muted-2);
  border:1px solid var(--border);
}
.js-cell.paid{background:var(--success-pale); color:var(--success); border-color:transparent;}
.js-cell.paid.ant{background:var(--gold-pale); color:var(--gold-dark); border-color:#F0E1B8;}
html.theme-dark .js-cell.paid.ant{border-color:#4A3D1E;}
.js-cell.miss{background:var(--danger-pale); color:var(--danger); border-color:transparent;}
.js-cell:not(.paid):not(.miss){opacity:.75;}
.js-more{font-size:10px; color:var(--muted-2); align-self:center; margin-left:3px;}
.js-legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; font-size:11px; color:var(--muted);}
.js-legend .js-dot{display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:4px; vertical-align:middle;}
.js-legend .js-dot.paid{background:var(--success-pale); border:1px solid var(--success);}
.js-legend .js-dot.ant{background:var(--gold-pale); border:1px solid var(--gold-dark);}
.js-legend .js-dot.miss{background:var(--danger-pale); border:1px solid var(--danger);}
.js-legend .js-dot.fut{background:var(--navy-pale); border:1px solid var(--border);}

/* ---- Datepicker cliquable ---- */
.dp-wrap{position:relative;}
.dp-input{
  width:100%; padding:9.5px 11px; border:1px solid var(--border); border-radius:var(--radius-sm);
  font-family:var(--font); font-size:13.5px; color:var(--text); background:var(--surface);
  cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease;
}
.dp-input:focus{outline:none; border-color:var(--navy-mid); box-shadow:0 0 0 3.5px rgba(25,104,190,.14);}
.dp-panel{
  position:absolute; top:calc(100% + 6px); left:0; z-index:210;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:10px 12px; width:248px;
  animation:dpIn .14s ease;
}
@keyframes dpIn{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}}
.dp-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.dp-title{font-weight:800; font-size:13px; color:var(--text); text-transform:capitalize;}
.dp-nav{
  width:28px; height:28px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface);
  color:var(--navy); cursor:pointer; font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background .12s ease, border-color .12s ease, transform .1s ease;
}
.dp-nav:hover{background:var(--navy-pale); border-color:var(--navy-mid);}
.dp-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:2px;}
.dp-dow{font-size:10px; font-weight:700; color:var(--muted-2); text-align:center; padding:4px 0; text-transform:uppercase;}
.dp-cell{
  width:30px; height:30px; border:none; border-radius:var(--radius-sm); background:none; cursor:pointer;
  font-family:var(--font); font-size:12.5px; color:var(--text); display:flex; align-items:center; justify-content:center;
  transition:background .12s ease, transform .1s ease;
}
.dp-cell:hover{background:var(--navy-pale);}
.dp-cell.dp-empty{visibility:hidden; pointer-events:none;}
.dp-cell.dp-disabled{opacity:.28; cursor:not-allowed;}
.dp-cell.dp-selected{background:var(--navy); color:#fff; font-weight:800;}
.dp-cell.dp-today{box-shadow:inset 0 0 0 1.5px var(--navy-mid);}
.dp-cell.dp-selected.dp-today{box-shadow:none;}

/* ---- Récapitulatif clôture de cycle (modale) ---- */
.close-recap{
  display:flex; flex-direction:column; gap:0; margin-bottom:16px;
  border:1px solid var(--border); border-radius:9px; overflow:hidden;
}
.close-recap > div{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:10px 14px; border-bottom:1px solid var(--border); font-size:13px;
  background:var(--surface);
}
.close-recap > div:last-child{border-bottom:none;}
.close-recap span{color:var(--muted); font-size:12px;}
.close-recap b{font-weight:800; font-variant-numeric:tabular-nums; color:var(--text);}
.close-recap .cr-com b{color:var(--warning);}
.close-recap .cr-total{background:var(--navy-pale);}
.close-recap .cr-total span{color:var(--navy-dark); font-weight:700;}
html.theme-dark .close-recap .cr-total span{color:var(--navy-text);}
.close-recap .cr-total b{color:var(--navy-dark); font-size:15px;}
html.theme-dark .close-recap .cr-total b{color:var(--navy-text);}
.close-recap .cr-note{
  display:flex; align-items:center; gap:6px;
  padding:8px 14px; font-size:11.5px; color:var(--muted);
  background:color-mix(in srgb, var(--navy-pale) 55%, var(--surface)); border-bottom:1px solid var(--border);
}

/* ---- Récapitulatif versement (modal) ---- */
.anticipe-recap{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px;
}
.anticipe-recap > div{
  flex:1; min-width:120px; background:var(--navy-pale); border:1px solid #C9DCF0;
  border-radius:8px; padding:9px 12px;
}
.anticipe-recap span{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); font-weight:700;}
.anticipe-recap strong{display:block; font-size:14px; color:var(--navy-text); margin-top:2px; font-variant-numeric:tabular-nums;}
/* ---- Recherche globale (Ctrl+K) ---- */
.cmdk-overlay{
  position:fixed; inset:0; background:rgba(9,22,38,.45); backdrop-filter:blur(2px);
  z-index:400; display:flex; align-items:flex-start; justify-content:center; padding:12vh 20px 20px;
}
.cmdk{
  width:100%; max-width:560px; background:var(--surface); border-radius:var(--radius-lg);
  box-shadow:0 18px 60px rgba(10,30,55,.35), var(--shadow-lg); border:1px solid var(--border);
  overflow:hidden; animation:cmdk-in .16s ease;
}
@keyframes cmdk-in{ from{opacity:0; transform:translateY(-8px) scale(.98);} to{opacity:1; transform:none;} }
.cmdk-input-row{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border);}
.cmdk-input-row .cmdk-ico{color:var(--muted); display:flex;}
.cmdk-input-row input{flex:1; border:none; outline:none; background:transparent; font-size:14.5px; font-family:var(--font); color:var(--text);}
.cmdk-kbd{font-size:10.5px; color:var(--muted); border:1px solid var(--border); border-radius:5px; padding:2px 6px; font-family:ui-monospace,Consolas,monospace;}
.cmdk-results{max-height:46vh; overflow-y:auto;}
.cmdk-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 16px; background:none; border:none; cursor:pointer; font-family:var(--font);
}
.cmdk-item:hover{background:var(--navy-pale);}
.cmdk-item.selected{background:var(--navy-pale);}
.cmdk-item .ci-name{font-weight:600; color:var(--text); font-size:13.5px;}
.cmdk-item .ci-sub{color:var(--muted); font-size:11.5px;}
.cmdk-item .id-chip{margin-left:auto;}
.cmdk-empty{padding:22px 16px; text-align:center; color:var(--muted); font-size:13px;}
.cmdk-foot{padding:9px 16px; border-top:1px solid var(--border); color:var(--muted); font-size:11px; display:flex; gap:12px;}

/* ---- Recadrage de photo (cropper) ---- */
.crop-box{
  margin:0 auto; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border); background:var(--bg);
}
.crop-canvas{
  display:block; width:100%; cursor:grab; touch-action:none;
}
.crop-canvas:active{cursor:grabbing;}
.crop-help{
  padding:7px 10px; font-size:11px; color:var(--muted-2); text-align:center;
  background:var(--surface); border-top:1px solid var(--border);
}
.crop-zoom-row{
  display:flex; gap:8px; justify-content:center; margin-top:10px;
}

/* ---- Bandeau hors-ligne ---- */
.offline-banner{
  position:fixed; top:0; left:0; right:0; z-index:500;
  background:var(--danger); color:#fff; font-size:12.5px; font-weight:600;
  padding:8px 16px; text-align:center; box-shadow:0 4px 18px rgba(0,0,0,.25);
}

/* ---- Micro-interactions : retour visuel à l'appui, hover doux ---- */
.btn:active{transform:translateY(0) scale(.97); box-shadow:var(--shadow-sm);}
.btn-primary:active{background:var(--navy-dark);}
.tp-btn:active:not([disabled]){transform:scale(.95);}
.vt-btn:active:not(.active){transform:scale(.95);}
.dp-cell:active{transform:scale(.9);}
.dp-nav:active{transform:scale(.9);}
.theme-btn:active{transform:scale(.9); border-color:var(--navy-mid);}
.menu-btn:active{transform:scale(.92);}
.nav-item:active{transform:scale(.985);}
.cmdk-item:active{background:var(--navy-mid); color:#fff;}
.sidebar .nav-item:active{background:rgba(255,255,255,.14);}
@media (prefers-reduced-motion: reduce){
  .btn:active, .tp-btn:active, .vt-btn:active, .dp-cell:active, .dp-nav:active,
  .theme-btn:active, .menu-btn:active, .nav-item:active{transform:none;}
}