:root {
  --bg: #f4f5f7;
  --card-bg: #ffffff;
  --text: #1f2430;
  --muted: #6b7280;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --danger: #dc2626;
  --success-bg: #ecfdf5;
  --success-text: #047857;
  --error-bg: #fef2f2;
  --error-text: #b91c1c;
  --border: #e5e7eb;
  --radius: 10px;
  /* Hauteur reelle de .topbar, recalculee en JS (header.ejs) car elle varie
     selon le nombre de liens de nav et la largeur d'ecran (repasse sur
     plusieurs lignes en dessous de 1229px, voir media query plus bas). Sert
     de repere "top" aux elements sticky positionnes juste sous la nav
     (ex. .filter-panel). Valeur ci-dessous = filet de securite avant le
     premier calcul JS. */
  --topbar-h: 64px;

  /* Palette "Miro / Kandinsky" : quelques aplats de couleur franche utilises
     uniquement sur les elements decoratifs (bordures, puces, legendes,
     cartes) - jamais sur le texte des donnees chiffrees, pour que l'appli
     reste tres lisible malgre la couleur. */
  --miro-blue: #1d5fd6;
  --miro-blue-bg: #eaf1ff;
  --miro-blue-border: #c3d9ff;
  --miro-red: #d6294a;
  --miro-red-bg: #fdedf0;
  --miro-red-border: #f7c6d0;
  --miro-yellow: #a3720a;
  --miro-yellow-bg: #fff6df;
  --miro-yellow-border: #f3dfa0;
  --miro-green: #12805a;
  --miro-green-bg: #e6f8f0;
  --miro-green-border: #b9e8d2;
}

* { box-sizing: border-box; }

/* Police globale +20% : toutes les tailles de texte de ce fichier sont en
   rem, donc cette seule regle suffit a tout faire grossir proportionnellement.
   Les elements a largeur/hauteur fixe en px (boutons +/-, champs de saisie
   etroits...) sont elargis plus bas pour eviter que le texte ne deborde. */
html { font-size: 120%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  /* Quelques aplats flous dans les coins, tres discrets, un clin d'oeil aux
     formes de Miro/Kandinsky sans jamais gener la lecture du contenu (qui
     reste toujours sur fond blanc uni au premier plan). */
  background-color: var(--bg);
  background-image:
    radial-gradient(480px 320px at 100% 0%, rgba(214, 41, 74, 0.07), transparent 60%),
    radial-gradient(520px 360px at 0% 100%, rgba(29, 95, 214, 0.07), transparent 60%),
    radial-gradient(360px 260px at 85% 90%, rgba(163, 114, 10, 0.08), transparent 60%);
  background-attachment: fixed;
}

.topbar {
  background: var(--card-bg);
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--miro-blue), var(--miro-red), var(--miro-yellow), var(--miro-green)) 1;
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 12px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.brand {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brand::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--miro-red);
  box-shadow: 6px 2px 0 -2px var(--miro-yellow), 12px -1px 0 -3px var(--miro-blue);
}

/* Petit indice visuel affiché uniquement quand l'appli peut être installée
   (voir le script d'installation PWA dans header.ejs). */
.brand.installable::after {
  content: "⬇ installer";
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--miro-blue-bg);
  border: 1px solid var(--miro-blue-border);
  border-radius: 999px;
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.nav a:hover {
  color: var(--primary);
  background: var(--bg);
}

.nav a.active {
  color: var(--primary);
  background: var(--miro-blue-bg);
}

.nav-dropdown { position: relative; }

.nav-dropdown summary {
  list-style: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary::after { content: '\25BE'; margin-left: 4px; font-size: 0.7em; }
.nav-dropdown summary:hover { color: var(--primary); background: var(--bg); }
.nav-dropdown summary.active { color: var(--primary); background: var(--miro-blue-bg); }

.nav-dropdown .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  padding: 6px;
  display: flex;
  flex-direction: column;
  min-width: 170px;
  z-index: 20;
}

.nav-dropdown .dropdown-menu a {
  padding: 8px 10px;
  border-radius: 6px;
  border-bottom: none;
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-dropdown .dropdown-menu a:hover {
  background: var(--bg);
  color: var(--primary);
  border-bottom: none;
}
.nav-dropdown .dropdown-menu a.active {
  background: var(--miro-blue-bg);
  color: var(--primary);
  border-bottom: none;
}

.user-pill {
  background: var(--bg);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Sous-menu "Mon mot de passe" / "Deconnexion", accessible en cliquant sur le
   nom d'utilisateur (pastille), pour degager de la place dans le menu
   principal. Reutilise le meme mecanisme <details> que "Configuration". */
.user-menu > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary::after { content: '\25BE'; margin-left: 6px; font-size: 0.7em; }
.user-menu > summary:hover { background: var(--border); }
/* Dernier element du menu, aligne a droite : le menu deroulant s'ouvre donc
   vers la gauche (right:0) pour ne pas deborder hors de l'ecran. */
.user-menu .dropdown-menu { left: auto; right: 0; }

.dropdown-menu-form { margin: 0; }
.dropdown-menu-button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  border: none;
  background: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.dropdown-menu-button:hover { background: var(--bg); color: var(--primary); }

.nav-icon { flex: 0 0 auto; }

.container {
  max-width: 1600px;
  margin: 0 auto;
  /* Marges laterales reduites (au lieu de 20px) pour laisser plus de place
     aux tableaux larges (historiques multi-colonnes) et limiter le recours
     au defilement horizontal. */
  padding: 24px 10px 60px;
}

h1 {
  font-size: 1.6rem;
  margin: 0 0 16px;
  padding-left: 14px;
  border-left: 6px solid var(--miro-blue);
}
h2 {
  font-size: 1.15rem;
  margin: 28px 0 12px;
  padding-left: 12px;
  border-left: 5px solid var(--miro-yellow);
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}

.auth-card {
  max-width: 380px;
  margin: 60px auto;
}

/* Page de réinitialisation (/admin/reinitialisation) : mise en avant forte du
   caractère destructif de l'action, distincte du style neutre des .card. */
.card-danger {
  background: var(--error-bg);
  border: 1px solid #f3b4b4;
  border-left: 5px solid var(--danger);
  color: var(--error-text);
}
.card-danger .muted-text { color: var(--error-text); opacity: 0.85; }

.reset-categories {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reset-category {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 0 !important;
}
.reset-category:hover { border-color: var(--danger); }
.reset-category:has(input:checked) {
  border-color: var(--danger);
  background: var(--error-bg);
}
.reset-category input[type="checkbox"] {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  flex: 0 0 auto;
}
.reset-category span { display: flex; flex-direction: column; gap: 2px; color: var(--text); }
.reset-category .hint { margin-top: 0; }

.flash {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 18px;
  font-size: 0.95rem;
}
.flash-success { background: var(--success-bg); color: var(--success-text); }
.flash-error { background: var(--error-bg); color: var(--error-text); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 10px;
}

.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-top: 4px solid var(--miro-blue);
  border-radius: var(--radius);
  padding: 18px;
}
.stat-card:nth-of-type(4n+2) { border-top-color: var(--miro-red); }
.stat-card:nth-of-type(4n+3) { border-top-color: var(--miro-yellow); }
.stat-card:nth-of-type(4n) { border-top-color: var(--miro-green); }

.stat-label { color: var(--muted); font-size: 0.85rem; margin-bottom: 6px; }
.stat-value { font-size: 1.6rem; font-weight: 700; }

form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 14px;
}

input[type="text"], input[type="password"], input[type="number"], input[type="date"], select {
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  color: var(--text);
  background: #fff;
}

input:focus, select:focus {
  outline: none;
  border-color: var(--primary);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  align-items: end;
}

.form-grid-full { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }

/* Formulaire "Filtrer l'historique" (tableau de bord Caisses admin) : en
   flexbox plutot qu'en grid comme .form-grid, pour deux raisons. D'abord la
   hauteur : le champ "Caisses" (select multiple) est plus haut que les
   autres, et align-items: flex-end pousse les champs courts vers le bas
   uniquement sur leur propre ligne, sans jamais forcer une ligne entiere de
   colonnes vides. Ensuite le bouton "Filtrer" : en grid, un dernier element
   qui ne tient pas sur la ligne se retrouve seul sur une nouvelle ligne de
   la largeur du conteneur (grosse zone vide a droite) ; en flex-wrap, il ne
   prend que la largeur dont il a besoin. */
.filter-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 18px;
}
.filter-grid label {
  flex: 1 1 160px;
  min-width: 140px;
  margin-bottom: 0;
}
.filter-grid select[multiple] { min-height: 0; }
.filter-label-row { display: flex; align-items: center; gap: 2px; }

/* Regroupe le bouton "Filtrer" et le lien "Reinitialiser" : place a la fin
   du flux et pousse a droite (margin-left: auto) quand la ligne a la place,
   au lieu de rester coince juste sous le champ "Caisses" comme avant. */
.filter-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: auto;
}

/* Reste visible en scrollant (juste sous la barre de nav, elle-meme deja
   sticky - voir .topbar). --topbar-h est calculee en JS (header.ejs) pour
   coller pile sous la nav meme quand elle passe sur deux lignes (mobile,
   fenetre etroite) ; la valeur ci-dessous n'est qu'un filet de securite
   avant que ce calcul ne s'execute. */
.filter-panel {
  position: sticky;
  top: var(--topbar-h, 64px);
  z-index: 6;
}

/* Info-bulle generique (actuellement utilisee pour l'aide du champ
   "Caisses" du filtre ci-dessus) : icone "?" discrete, bulle affichee au
   survol/focus clavier plutot qu'un paragraphe d'aide qui prend de la
   hauteur en permanence. */
.tooltip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 4px;
}
.tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--border);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: help;
}
.tooltip-text {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 230px;
  background: var(--text);
  color: #fff;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  z-index: 30;
  pointer-events: none;
}
.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--text);
}
.tooltip:hover .tooltip-text,
.tooltip:focus .tooltip-text,
.tooltip:focus-within .tooltip-text {
  opacity: 1;
  visibility: visible;
}

.checks-title { font-size: 0.9rem; color: var(--muted); }

/* Grille fixe a 2 colonnes : evite le retour a la ligne irregulier (3 puis 1
   puis 1 puis 1...) qu'on obtient avec un simple flex-wrap quand les libelles
   n'ont pas tous la meme longueur. */
.mode-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 8px;
}

/* Version utilisee la ou plus de largeur est disponible (formulaire de
   creation) : autant de colonnes que la largeur le permet, au lieu de rester
   bloque a 2 comme dans l'etroite colonne du tableau. */
.mode-checks-wide {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px 10px;
}

.col-modes { min-width: 280px; }

.solde-initial-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.solde-initial-cell input[type="number"] { width: 108px; flex: 0 0 108px; }
.solde-initial-cell input[type="date"] { width: 168px; flex: 0 0 168px; }
.solde-initial-au { color: var(--muted); font-size: 0.85rem; }

.mode-chip {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted) !important;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  margin-bottom: 0 !important;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.mode-chip:hover { border-color: var(--primary); }
.mode-chip:has(input:checked) {
  background: #eef4ff;
  border-color: var(--primary);
  color: var(--primary) !important;
  font-weight: 600;
}
.mode-chip input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 0;
  flex: 0 0 auto;
}
.mode-chip span { overflow: hidden; text-overflow: ellipsis; }

.btn {
  display: inline-block;
  padding: 10px 18px;
  min-height: 53px;
  border-radius: 8px;
  border: none;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  touch-action: manipulation;
}

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }

.btn-block { display: block; width: 100%; font-size: 1.05rem; }

.btn-small { padding: 6px 12px; min-height: 43px; font-size: 0.85rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.btn-small:hover { background: #e9ebee; }

.btn-danger { background: var(--danger); color: #fff; margin-top: 16px; }
.btn-danger:hover { background: #b91c1c; }

/* Modale de confirmation generique (voir footer.ejs). */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 26, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  text-align: center;
}
.modal-box p {
  margin: 0 0 20px;
  font-size: 1.05rem;
  color: var(--text);
}
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.modal-actions .btn { flex: 1 1 auto; }

/* Modale "Details" generique (voir footer.ejs) : contenu libre en lecture
   seule (ex : detail d'une journee de caisse, partials/caisse_entree_detail.ejs),
   plus large et alignee a gauche contrairement a la modale de confirmation
   ci-dessus, avec defilement si le contenu depasse la hauteur de l'ecran. */
.modal-box-large {
  max-width: 560px;
  max-height: 85vh;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.modal-header h3 { margin: 0; font-size: 1.05rem; }
.modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
}
.modal-close:hover { color: var(--text); }
.modal-body {
  padding: 18px 20px 22px;
  overflow-y: auto;
}

.detail-meta { margin-bottom: 14px; }
.detail-meta .hint { margin-top: 2px; }
.detail-block h4 {
  margin: 20px 0 8px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.detail-block h4:first-child { margin-top: 0; }
.detail-subtitle {
  margin: 12px 0 6px;
  font-size: 0.85rem;
  color: var(--text);
}
.detail-line-list {
  margin: 0 0 4px;
  padding-left: 18px;
  font-size: 0.85rem;
}
.detail-line-list li { margin-bottom: 3px; }

/* Onglets "Historique des recettes" / "Historique des depots" (voir
   admin/caisses_dashboard.ejs) : un seul panneau visible a la fois plutot
   que les deux tableaux empiles l'un sous l'autre. */
.history-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 16px;
}
.history-tab {
  background: none;
  border: none;
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.history-tab:hover { color: var(--primary); }
.history-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.history-tab .count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}
.history-tab.active .count { background: var(--miro-blue-bg); color: var(--primary); }
.history-panel[hidden] { display: none; }

@media (max-width: 640px) {
  .history-tab { padding: 10px 12px; font-size: 0.88rem; }
}

.month-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.pct-bar {
  width: 100%;
  min-width: 80px;
  height: 10px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
}
.pct-bar-fill {
  height: 100%;
  background: var(--miro-blue);
  border-radius: 999px;
}

.periode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.periode-tab-active {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

.month-nav input[type="month"],
.month-nav input[type="number"] {
  padding: 6px 10px;
  min-height: 43px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
  background: var(--card-bg);
  color: var(--text);
}

.link-button {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
  text-decoration: underline;
}
.link-button.danger { color: var(--danger); }

.inline-form { display: inline; margin: 0; }
.inline-input { width: 100%; }

/* "form label" (regle generique plus haut) impose flex-direction: column ;
   .checkbox-inline doit l'ecraser explicitement, sinon la case a cocher et
   son texte restent empiles au lieu d'etre alignes sur la meme ligne. */
.checkbox-inline { display: inline-flex; flex-direction: row; align-items: center; gap: 0.5rem; margin: 0; cursor: pointer; }
.checkbox-inline input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; }
tr.row-checked { background: var(--success-bg, #ecfdf5); }
.filter-bar { margin-bottom: 1rem; }
/* Dans un tableau, la cellule se retrecit pour s'adapter aux autres colonnes
   (moyens de paiement, solde initial...) : sans largeur minimale, le champ
   "Nom" (et le select "Attribuee a") devient illisible. Le tableau defile
   deja horizontalement (.table-wrap), donc forcer une largeur lisible ici ne
   casse rien, ca allonge simplement ce scroll. */
input.inline-input[type="text"] { min-width: 160px; }
select.inline-input { min-width: 140px; }

.table-wrap { overflow-x: auto; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); }

/* Sur les tableaux d'historique multi-caisses (tableau de bord Caisses), la
   premiere colonne "Date / Caisse" reste visible quand on defile
   horizontalement pour lire les montants : sans ca, deux lignes de caisses
   differentes peuvent se retrouver l'une sous l'autre sans qu'on sache
   qu'elles ne concernent pas la meme caisse. Uniquement au-dela du seuil
   mobile : en dessous, .table-responsive passe deja en cartes empilees sans
   defilement horizontal, ou le "sticky" n'a pas de sens. */
@media (min-width: 641px) {
  .table-sticky-date th:first-child,
  .table-sticky-date td:first-child {
    position: sticky;
    left: 0;
    background: var(--card-bg);
    z-index: 5;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
  }
  .table-sticky-date thead th:first-child { z-index: 15; }
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.table th, .table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: #fafbfc; }

.actions-cell { display: flex; gap: 10px; align-items: center; white-space: nowrap; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-info { background: #dbeafe; color: #1e40af; }
.badge-success { background: var(--success-bg); color: var(--success-text); }

.hint { color: var(--muted); font-size: 0.78rem; margin-top: 4px; }
.hint-success { color: var(--success-text); }

.solde-fin-detail { margin-top: 4px; }
.solde-fin-detail .hint { margin-top: 2px; }
.solde-total-line { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); color: var(--text); }

/* Journal des modifications admin (avant/apres) — voir admin/caisse_history.ejs
   et user/depots.ejs. */
.diff-list { margin: 0; padding-left: 18px; font-size: 0.85rem; }
.diff-list li { margin-bottom: 4px; }
.diff-before { color: var(--muted); text-decoration: line-through; }
.diff-after { color: var(--text); font-weight: 600; }

/* Ventilation du solde actuel par moyen (solde_actuel_detail.ejs, param
   "grid") : sur 3 colonnes des que la largeur le permet (PC), en 1 seule
   colonne empilee sur smartphone (comme avant, en dessous du seuil mobile). */
@media (min-width: 641px) {
  .solde-actuel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 18px;
  }
  .solde-actuel-grid .hint { margin-top: 2px; }
}

/* Widget "Caisses a afficher" : compact au repos, s'agrandit au survol (ou au
   focus, pour le clavier/tactile) pour reveler la liste a cocher. Filtrage
   entierement cote client (voir le <script> en bas de caisses_dashboard.ejs),
   independant du formulaire de recherche historique plus bas sur la page. */
.caisse-filter { position: relative; display: inline-block; margin-bottom: 16px; }
.caisse-filter-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  font-weight: 600;
  font-size: 0.9rem;
  user-select: none;
}
.caisse-filter-trigger:hover { border-color: var(--primary); color: var(--primary); }
.caisse-filter-count { color: var(--muted); font-weight: 400; }
.caisse-filter-arrow { font-size: 0.7em; color: var(--muted); }

.caisse-filter-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  padding: 8px;
  min-width: 240px;
  z-index: 20;
}
.caisse-filter:hover .caisse-filter-panel,
.caisse-filter:focus-within .caisse-filter-panel { display: block; }

.caisse-filter-list {
  /* ~12 lignes visibles avant defilement (34px par ligne environ). */
  max-height: 408px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}
.caisse-filter-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  margin-bottom: 0 !important;
}
.caisse-filter-item:hover { background: var(--bg); }
.caisse-filter-item input[type="checkbox"] { width: 17px; height: 17px; flex: 0 0 auto; margin: 0; }

/* Bloc de validation comptable dans les tableaux de bord Coffres/Caisses. */
.validate-cell { min-width: 220px; }
.validate-toggle {
  margin-top: 6px;
  position: relative;
}
.validate-toggle summary {
  list-style: none;
  cursor: pointer;
  color: var(--primary);
  font-size: 0.85rem;
  user-select: none;
}
.validate-toggle summary::-webkit-details-marker { display: none; }
.validate-toggle .stack-form {
  margin-top: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  min-width: 220px;
}
.validate-toggle .stack-form label {
  margin-bottom: 10px;
}
.validate-toggle .stack-form button {
  width: 100%;
}

/* --- Ecran d'accueil : gros boutons de choix, optimises smartphone --- */

/* Titre volontairement court : reste toujours sur une seule ligne, y compris
   sur les petits smartphones (la taille s'adapte a la largeur de l'ecran via
   clamp() plutot qu'un simple point de rupture, pour rester correct sur
   toutes les tailles) au lieu de retourner a la ligne au milieu de la phrase. */
.home-title {
  white-space: nowrap;
  font-size: clamp(1.05rem, 5.2vw, 1.6rem);
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 18px 0 8px;
}

.choice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-top: 5px solid var(--miro-blue);
  border-radius: var(--radius);
  padding: 32px 20px;
  min-height: 130px;
  text-decoration: none;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  touch-action: manipulation;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.choice-card:nth-child(2) { border-top-color: var(--miro-red); }
.choice-card:nth-child(3) { border-top-color: var(--miro-yellow); }
.choice-card:nth-child(4) { border-top-color: var(--miro-green); }

.choice-card:hover, .choice-card:active {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}
.choice-card .choice-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.choice-card .choice-title::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--miro-blue);
  flex: 0 0 auto;
}
.choice-card:nth-child(2) .choice-title::before { background: var(--miro-red); }
.choice-card:nth-child(3) .choice-title::before { background: var(--miro-yellow); }
.choice-card:nth-child(4) .choice-title::before { background: var(--miro-green); }
.choice-card .choice-hint {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted);
}

.muted-text { color: var(--muted); font-size: 0.9rem; margin-bottom: 16px; }
.muted-link { margin-top: 14px; font-size: 0.9rem; }
.muted-link a { color: var(--muted); }

fieldset {
  border: 1px solid var(--border);
  border-left: 4px solid var(--miro-blue-border);
  border-radius: var(--radius);
  background: var(--bg);
  margin-bottom: 28px;
  padding: 20px 16px 10px;
}

legend {
  padding: 5px 14px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primary);
  background: #eef4ff;
  border: 1px solid #d7e5ff;
  border-radius: 999px;
  margin-left: 2px;
}

/* Chaque section d'un formulaire (Recettes, Especes, CB, Cheques...) recoit
   une couleur qui lui est propre, en boucle sur la palette : cela aide a
   reperer d'un coup d'oeil ou l'on se trouve dans un long formulaire, comme
   des zones de couleur dans une composition de Kandinsky. */
fieldset:nth-of-type(4n+1) { border-left-color: var(--miro-blue-border); }
fieldset:nth-of-type(4n+1) legend { color: var(--miro-blue); background: var(--miro-blue-bg); border-color: var(--miro-blue-border); }

fieldset:nth-of-type(4n+2) { border-left-color: var(--miro-red-border); }
fieldset:nth-of-type(4n+2) legend { color: var(--miro-red); background: var(--miro-red-bg); border-color: var(--miro-red-border); }

fieldset:nth-of-type(4n+3) { border-left-color: var(--miro-yellow-border); }
fieldset:nth-of-type(4n+3) legend { color: var(--miro-yellow); background: var(--miro-yellow-bg); border-color: var(--miro-yellow-border); }

fieldset:nth-of-type(4n) { border-left-color: var(--miro-green-border); }
fieldset:nth-of-type(4n) legend { color: var(--miro-green); background: var(--miro-green-bg); border-color: var(--miro-green-border); }

/* --- Saisie du comptage : liste de compteurs +/- (optimise pour le tactile) --- */

.qty-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.qty-label { flex: 1 1 auto; min-width: 0; }
.qty-label strong { display: block; font-size: 1rem; }
.qty-label small { display: block; color: var(--muted); font-size: 0.72rem; margin-top: 2px; }

.qty-control {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.qty-btn {
  width: 53px;
  height: 53px;
  flex: 0 0 53px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}
.qty-btn:active { background: var(--bg); }

/* Rouge pour diminuer, vert pour augmenter : la couleur renforce le sens du
   bouton en plus du symbole, utile en saisie rapide sur smartphone. */
.qty-btn[data-step^="-"] { color: var(--miro-red); border-color: var(--miro-red-border); }
.qty-btn[data-step^="-"]:active { background: var(--miro-red-bg); }
.qty-btn[data-step="1"] { color: var(--miro-green); border-color: var(--miro-green-border); }
.qty-btn[data-step="1"]:active { background: var(--miro-green-bg); }

.qty-btn-5 {
  width: auto;
  flex: 0 0 auto;
  padding: 0 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  border-color: var(--primary);
  background: #eef4ff;
}
.qty-btn-5:active { background: #dce8ff; }

.qty-input {
  width: 65px;
  flex: 0 0 65px;
  height: 53px;
  text-align: center;
  font-size: 1.05rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-subtotal {
  flex: 0 0 auto;
  min-width: 86px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--muted);
  font-size: 0.82rem;
}

.total-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 2px solid var(--primary);
  border-top: 5px solid var(--miro-red);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 18px 0;
  font-size: 1.05rem;
}
.total-banner strong { font-size: 1.3rem; color: var(--primary); }

.note-label { max-width: 400px; }

/* --- Saisie des caisses : montants groupes par section --- */

.amount-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.amount-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  margin-bottom: 0 !important;
  font-size: 0.95rem;
  color: var(--text) !important;
}

.amount-input {
  width: 144px;
  flex: 0 0 144px;
  height: 53px;
  text-align: right;
  font-size: 1.05rem;
}

.calc-summary {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 18px 0 4px;
}

.calc-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.9rem;
  border-bottom: 1px dashed var(--border);
}
.calc-row:last-child { border-bottom: none; }
.calc-row strong { font-variant-numeric: tabular-nums; }

.text-danger { color: var(--danger); }
.text-success { color: var(--success-text); }

/* --- Especes de caisse, cheques, titres resto / cheques vacances --- */

.fieldset-subtitle {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 22px 0 8px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}
.fieldset-subtitle:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.line-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

/* --- Depots : liste des cheques non remis a cocher --- */

.cheque-pick-actions {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
}

.cheque-pick-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.cheque-pick-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  margin-bottom: 0 !important;
  cursor: pointer;
}

.cheque-pick-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin: 0;
}

.cheque-pick-row .cheque-amount {
  font-weight: 600;
  color: var(--text);
}

.cheque-pick-row .cheque-date {
  color: var(--muted);
  font-size: 0.82rem;
  margin-left: auto;
}

.line-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.line-row .amount-input { flex: 1 1 auto; width: auto; }
.line-row .comment-input { flex: 2 1 auto; width: auto; }

.qty-input-inline {
  width: 84px;
  flex: 0 0 84px;
  height: 53px;
  text-align: center;
  font-size: 1rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.line-x { color: var(--muted); font-weight: 600; flex: 0 0 auto; }

.line-subtotal {
  flex: 0 0 auto;
  min-width: 82px;
  text-align: right;
  font-weight: 600;
  color: var(--muted);
  font-size: 0.85rem;
}

.remove-line-btn {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--danger);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.remove-line-btn:active { background: var(--bg); }

.add-line-btn { margin-bottom: 10px; }

@media (max-width: 640px) {
  .amount-row { padding: 10px; }
  .amount-input { width: 120px; flex-basis: 120px; }

  .line-row { flex-wrap: wrap; }
  .line-row .amount-input,
  .line-row .qty-input-inline { flex: 1 1 40%; }
  .line-row .comment-input { flex: 1 1 100%; }
  /* Le sous-total ne prend plus toute la largeur : il partage sa ligne avec
     la croix de suppression, qui ne doit jamais se retrouver seule sur sa
     propre ligne. */
  .line-subtotal { flex: 1 1 auto; text-align: right; }
  .remove-line-btn { width: 48px; height: 48px; flex: 0 0 48px; }
}

/* --- Tables responsives : passent en cartes empilees sur mobile --- */

@media (max-width: 640px) {
  .topbar-inner { flex-direction: column; align-items: flex-start; }
  .container { padding: 8px; }

  .card { padding: 12px; }
  .auth-card { margin: 30px auto; }

  fieldset { padding: 14px 8px 6px; margin-bottom: 20px; }
  legend { padding: 4px 10px; font-size: 0.85rem; }

  .qty-list { gap: 8px; }

  /* Sur mobile, chaque ligne passe en grille 2 zones : le libelle+sous-total en
     haut, puis les boutons seuls sur toute la largeur en dessous. Cela laisse
     la place de bien ecarter les boutons (moins d'erreurs de frappe). */
  .qty-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "label subtotal" "control control";
    row-gap: 10px;
    column-gap: 10px;
    padding: 10px 12px;
  }
  .qty-label { grid-area: label; }
  .qty-label strong { font-size: 0.95rem; }
  .qty-label small { font-size: 0.7rem; }

  .qty-subtotal {
    grid-area: subtotal;
    text-align: right;
    padding-left: 0;
    min-width: 0;
  }

  .qty-control {
    grid-area: control;
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }

  .qty-btn { width: 55px; height: 55px; flex-basis: 55px; font-size: 1.3rem; }
  .qty-input { width: 60px; flex-basis: 60px; height: 55px; font-size: 1.1rem; }
  .qty-btn-5 { padding: 0 10px; font-size: 0.85rem; height: 55px; }

  .btn-block-mobile { display: block; width: 100%; text-align: center; }

  .table-responsive thead { display: none; }
  .table-responsive, .table-responsive tbody, .table-responsive tr, .table-responsive td {
    display: block;
    width: 100%;
  }
  .table-responsive tr {
    border-bottom: 1px solid var(--border);
    padding: 10px 14px;
  }
  .table-responsive tbody tr:last-child { border-bottom: none; }
  .table-responsive td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    border: none;
    white-space: normal;
    text-align: right;
  }
  .table-responsive td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
    flex-shrink: 0;
  }
}