/* Styles propres aux écrans refondus (v2). Les composants génériques sont dans components.css. */

/* ---------- Contrôle segmenté (périodes, filtres rapides) ---------- */
.segmented {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--ink-100); border-radius: 10px;
}
.segmented .seg {
  min-height: 32px; padding: 0 12px; border: none; border-radius: 8px;
  background: transparent; color: var(--ink-600); font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.segmented .seg:hover { color: var(--ink-900); }
.segmented .seg.active { background: var(--color-surface); color: var(--brand-800); font-weight: 600; box-shadow: var(--shadow-card); }

/* ---------- Caisse ---------- */
.caisse-barre {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px;
}
.caisse-periode { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.caisse-dates { display: flex; align-items: center; gap: 8px; }
.caisse-dates.hidden { display: none; }
.caisse-dates .input { min-height: 34px; width: auto; }
.caisse-actions { display: flex; align-items: center; gap: 10px; }
.caisse-auto { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-500); }
.caisse-auto-point { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }

.kpi-accent { background: linear-gradient(135deg, var(--brand-600), var(--brand-700)); border-color: var(--brand-700); }
.kpi-accent .kpi-label, .kpi-accent .kpi-meta { color: rgba(255, 255, 255, .8); }
.kpi-accent .kpi-value { color: #fff; }
.kpi-accent .kpi-icon { background: rgba(255, 255, 255, .16); color: #fff; }

.caisse-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
@media (max-width: 1023px) { .caisse-detail { grid-template-columns: 1fr; } }
.mode-liste { padding-top: 8px; padding-bottom: 8px; }
.mode-ligne { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--ink-200); font-size: 14px; }
.mode-ligne:last-child { border-bottom: none; }
.mode-pastille { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.mode-libelle { color: var(--ink-700); }
.mode-montant { margin-left: auto; font-weight: 600; color: var(--ink-900); }
.mode-total { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--ink-200); border-bottom: none; }
.mode-total .mode-libelle { font-weight: 600; color: var(--ink-900); }
.mode-total .mode-montant { color: var(--brand-700); font-size: 16px; }
.tresorerie-liste { display: grid; gap: 4px; padding-top: 10px; padding-bottom: 10px; }
.tresorerie-ligne { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.tresorerie-icone { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tresorerie-libelle { font-size: 14px; font-weight: 500; color: var(--ink-800); }
.tresorerie-texte .kpi-meta { margin-top: 0; }
.tresorerie-montant { margin-left: auto; font-size: 15px; font-weight: 600; color: var(--ink-900); }

.caisse-onglets > .tabs { padding: 0 12px; margin-bottom: 0; }
.caisse-onglets > .tab-content { padding: 20px !important; }
.caisse-onglets .tab-button { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Facturation ---------- */
.facturation-onglets { overflow: visible; }
.facturation-onglets > .tabs { padding: 0 12px; margin-bottom: 0; }
.facturation-onglets .tab-button { display: inline-flex; align-items: center; gap: 6px; }
.facturation-onglets > .tab-content { padding: 20px !important; }
.liste-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

/* ---------- Listes : barre intégrée (recherche + filtres) ---------- */
.filter-bar.barre-integree { flex: 1; margin-bottom: 0; }
.clientele-liste > .tabs { padding: 0 12px; margin-bottom: 0; }
.clientele-liste .tab-button { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Boutons d'action des tableaux (toutes les pages) ----------
   Un bouton qui ne contient qu'une icône prend l'aspect standard des boutons d'icône. */
.table td button:not(.btn):not(.btn-icon):has(> svg:only-child) {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: none; border-radius: 8px;
  background: transparent; transition: background-color .12s ease;
}
.table td button:not(.btn):not(.btn-icon):has(> svg:only-child):hover { background: var(--ink-100); }
.table td button:not(.btn):not(.btn-icon) > svg:only-child { width: 18px; height: 18px; }
.table td .flex.space-x-2 { gap: 2px; }
.table td .flex.space-x-2 > * + * { margin-left: 0; }

/* ---------- Tuiles de statistiques (anciens dégradés vifs, convertis) ---------- */
.kpi-tonal {
  --tone-50: var(--ink-100); --tone-600: var(--ink-600);
  background: var(--color-surface) !important; color: var(--ink-800);
  border: 1px solid var(--ink-200); border-radius: var(--radius-container); box-shadow: var(--shadow-card);
}
.kpi-tonal.ton-brand { --tone-50: var(--brand-50); --tone-600: var(--brand-600); }
.kpi-tonal.ton-info { --tone-50: var(--info-50); --tone-600: var(--info-500); }
.kpi-tonal.ton-amber { --tone-50: var(--amber-50); --tone-600: var(--amber-600, var(--amber-600)); }
.kpi-tonal.ton-red { --tone-50: var(--red-50); --tone-600: var(--red-500); }
.kpi-tonal.ton-plum { --tone-50: var(--plum-50); --tone-600: var(--plum-500); }
.kpi-tonal .opacity-90, .kpi-tonal .opacity-80, .kpi-tonal .opacity-75 { opacity: 1; }
.kpi-tonal h3, .kpi-tonal h4, .kpi-tonal .text-sm { color: var(--ink-500); font-weight: 500; }
.kpi-tonal .text-3xl, .kpi-tonal .text-2xl { color: var(--ink-900); font-size: 24px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kpi-tonal .text-xs { color: var(--ink-500); }
.kpi-tonal svg { color: var(--tone-600); background: var(--tone-50); border-radius: 10px; padding: 7px; width: 36px; height: 36px; opacity: 1; }
.kpi-tonal { border-top: 3px solid var(--tone-600); }

/* ---------- Recouvrement : tableau compact (pas de défilement horizontal) ---------- */
.table-compacte th { white-space: normal; line-height: 1.25; }
.table-compacte .cellule-client { min-width: 160px; max-width: 240px; }
.table-compacte .cellule-client > div:first-child { white-space: normal; line-height: 1.3; }
.table-compacte .cellule-statut { min-width: 130px; }
.table-compacte .cellule-statut .badge { margin: 2px 0; }

/* ---------- Tous les tableaux : marges de cellule raisonnables (anciennes cellules px-6 = 24 px) ---------- */
#content table th.px-6, #content table td.px-6 { padding-left: 14px !important; padding-right: 14px !important; }

/* ---------- Mobile (agents terrain) ---------- */
/* 16 px minimum dans les champs : empêche le zoom automatique d'iOS à la saisie */
@media (max-width: 640px) {
  #content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #content select, #content textarea { font-size: 16px !important; }
}
/* Rôles à un seul écran (agent terrain, livreur) : pas de menu latéral ni de bouton menu */
body.shell-mono #sidebar, body.shell-mono .topbar-burger, body.shell-mono #sidebar-overlay { display: none !important; }
body.shell-mono #topbar { left: 0 !important; }
body.shell-mono #content { margin-left: 0 !important; }
body.shell-actif .titre-doublon { display: none; }
/* Barres collées en haut des pages (onglets d'Espace vente…) : sous la barre supérieure fixe */
body.shell-actif #content > div > .sticky.top-0 { top: var(--topbar-h); }