:root {
  --primary: #0f4c81;
  --primary-light: #1f6fb2;
  --primary-dark: #08355c
  --accent: #00a8a8;
  --accent-light: #dff8f8;
  --bg: #f5f7fb;
  --card: #ffffff;
  --border: #e8edf3;
  --text: #1f2937;
  --muted: #6b7280;
  --danger: #dc2626;
  --radius: 20px;
  --radius-field: 14px;
  --radius-pill: 999px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
}
header.topbar {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
header.topbar h1 {
  font-size: 1.25rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
header.topbar nav a {
  color: white;
  text-decoration: none;
  margin-left: 16px;
  font-size: 0.9rem;
  opacity: 0.88;
  padding: 6px 4px;
  border-bottom: 2px solid transparent;
  transition: opacity 0.15s, border-color 0.15s;
}
header.topbar nav a:hover { opacity: 1; border-color: var(--accent); }
.welcome-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 24px 0;
  padding: 16px 22px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  color: white;
  box-shadow: 0 8px 20px -8px rgba(23, 49, 41, 0.35);
}
.welcome-banner-emoji { font-size: 1.8rem; line-height: 1; }
.welcome-banner-title { font-weight: 700; font-size: 1.05rem; }
.welcome-banner-subtitle { font-size: 0.85rem; opacity: 0.9; margin-top: 2px; }
.subscription-badge {
  font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.subscription-badge.warning {
  background: var(--danger);
  color: white;
  font-weight: 600;
}
/* Badge d'alerte dans l'en-tête : visible dès que le récapitulatif (voir renderRecap dans
   admin.js) détecte au moins un point d'attention (secteur à 0, taux de remise élevé...),
   sans avoir besoin d'ouvrir le tableau de bord jusqu'en bas. */
.dashboard-alert-badge {
  font-size: 0.82rem;
  background: var(--danger);
  color: white;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
/* Badge "hors-ligne" (page de saisie index.html, voir offline-queue.js/form.js) : signale
   qu'une ou plusieurs transactions sont en attente de synchronisation. Couleur ambre distincte
   du badge rouge de suppression ci-dessus, pour ne pas donner une fausse impression d'urgence
   critique — c'est une information, pas une alerte grave. */
.offline-badge {
  font-size: 0.82rem;
  background: #b8860b;
  color: white;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
main {
  max-width: 920px;
  margin: 24px auto;
  padding: 0 16px 60px;
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin-bottom: 22px;
  box-shadow: 0 8px 24px -10px rgba(23, 49, 41, 0.16);
  transition: box-shadow 0.15s;
}
.card h2 {
  font-size: 1.1rem;
  color: var(--primary);
  margin-top: 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Icon-box : transforme l'emoji déjà injecté en ::before en pastille arrondie colorée,
   sans toucher au HTML (index.html) ni à la logique JS — pur affinage CSS. */
.card h2::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 14px;
  background: rgba(29, 78, 66, 0.1);
  font-size: 1.1rem;
  line-height: 1;
}
.card h3 {
  font-size: 0.95rem;
  color: var(--primary-light);
  margin: 20px 0 10px;
  font-weight: 700;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.card h3:first-of-type { border-top: none; padding-top: 0; }
/* Différenciation visuelle par module (bordure de couleur + icône), sans toucher au
   HTML ni à la logique : ciblage par ID déjà présent dans index.html. */
#section-hebergement { border-left: 5px solid var(--primary); }
#section-bar { border-left: 5px solid var(--primary-light); }
#section-resto { border-left: 5px solid var(--accent); }
#section-depenses { border-left: 5px solid var(--danger); }
#transfert-section { border-left: 5px solid var(--primary-dark); }
/* Icônes en emoji natives (pas de police/CDN externe à charger : on a déjà eu un
   blocage ORB avec Chart.js par le passé, donc on évite toute dépendance réseau ici). */
main > form > .card:first-child h2::before { content: "👤"; }
#section-hebergement h2::before { content: "🛏️"; }
#section-bar h2::before { content: "🍹"; }
#section-resto h2::before { content: "🍽️"; }
#section-depenses h2::before { content: "💸"; }
#transfert-section h2::before { content: "🏦"; }
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 6px;
  color: var(--text);
}
.field .hint {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 4px;
}
input[type=text], input[type=number], input[type=tel], input[type=date],
select, textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-field);
  /* 16px minimum : en dessous, Safari iOS zoome automatiquement sur le champ au focus,
     ce qui casse l'expérience de saisie sur téléphone. */
  font-size: 1rem;
  background: #fbfcfb;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(47, 122, 103, 0.15);
  background: white;
}
.checkbox-group, .radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.checkbox-group label, .radio-group label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
  background: #eef2f0;
  border: 1.5px solid transparent;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  /* Cible tactile confortable même sur les libellés courts (recommandation ~44px). */
  min-height: 34px;
}
.checkbox-group label:hover, .radio-group label:hover { background: #e2ebe6; }
.checkbox-group label:has(input:checked),
.radio-group label:has(input:checked) {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}
.checkbox-group input, .radio-group input {
  margin: 0;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--primary);
}
.checkbox-group label:has(input:checked) input,
.radio-group label:has(input:checked) input { accent-color: #fff; }
.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .row2 { grid-template-columns: 1fr; }
}
.row3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .row3 { grid-template-columns: 1fr; }
}
.hidden { display: none !important; }
.entry-guidance-tips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.entry-guidance-tip {
  background: #fff;
  border: 1px solid #e2e8e5;
  border-radius: 10px;
  padding: 14px 16px;
}
.entry-guidance-tip strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.95rem;
}
.entry-guidance-tip p {
  margin: 0;
  font-size: 0.85rem;
  color: #5b6b66;
  line-height: 1.5;
}
.note-box {
  background: #f2f8fc;
  border-left: 4px solid var(--primary-light);
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 0.88rem;
  margin: 8px 0;
  text-align: left;
}
.note-box.total {
  font-weight: 700;
  color: var(--primary);
  font-size: 1.05rem;
  background: rgba(29, 78, 66, 0.08);
  border-left-color: var(--primary);
}
.item-row {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
  position: relative;
  background: #fafcfb;
}
.item-row .remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #fdeceb;
  border: none;
  border-radius: var(--radius-pill);
  color: var(--danger);
  font-size: 0.8rem;
  padding: 7px 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.item-row .remove-btn:hover { background: #fadbd9; }
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--primary); color: white; box-shadow: 0 2px 8px rgba(29,78,66,0.25); }
.btn-primary:hover { background: var(--primary-light); box-shadow: 0 4px 12px rgba(29,78,66,0.3); }
.btn-secondary { background: #e5e9e7; color: var(--text); }
.btn-secondary:hover { background: #d5dbd8; }
.btn-add {
  background: var(--accent);
  color: var(--primary-dark);
}
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(23, 49, 41, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--card);
  border-radius: var(--radius);
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 12px 36px -8px rgba(23, 49, 41, 0.4);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { margin: 0; font-size: 1.05rem; }
.modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
}
.modal-body { padding: 18px 22px; }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--border);
}
.demande-champ-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.demande-champ-valeurs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  margin-left: 22px;
}
.demande-valeur-actuelle { font-size: 0.85rem; color: #667; }
.demande-champ-nouvelle:disabled { background: #f0f0f0; }
.btn-sm { padding: 6px 12px; font-size: 0.8rem; }
.agent-entries-actions { white-space: nowrap; }
.btn-add:hover { background: var(--accent-light); }
.error-text {
  color: var(--danger);
  font-size: 0.78rem;
  margin-top: 3px;
  display: none;
}
.field.invalid input, .field.invalid select {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(178, 59, 59, 0.12);
}
.field.invalid .error-text { display: block; }

/* Phase 4 : barre d'onglets pour "Module concerné" -- remplace l'aspect "pilules" par de
   vrais onglets. fillChoiceGroup()/getCheckedValues() restent type-agnostiques ; le
   input radio reste dans le DOM (accessibilité, clic) mais est visuellement masqué au
   profit du style appliqué au label. */
.module-tabs-field { margin-bottom: 26px; }
.module-tabs-field > label { font-size: 1rem; }
.module-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 2px solid var(--border);
}
.module-tabs label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 20px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--muted);
  cursor: pointer;
  border-radius: 10px 10px 0 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.module-tabs label:hover { color: var(--primary); background: var(--bg); }
.module-tabs label:has(input:checked) {
  color: var(--primary);
  background: var(--bg);
  border-bottom-color: var(--primary);
}
.module-tabs input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Phase 5 : barre d'onglets de PAGE (au niveau de l'entete, comme "Suivi de caisse"),
   distincte de .module-tabs (Phase 4, desormais masquee) qui restait a l'interieur du
   formulaire. */
.module-tabs-topnav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
}
.module-tabs-topnav a {
  display: inline-block;
  padding: 14px 20px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.module-tabs-topnav a:hover { color: var(--primary); }
.module-tabs-topnav a.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
/* Couleurs distinctes pour Decaissement (sortie d'argent) et Transfert caisse (mouvement
   interne), afin de les differencier visuellement des modules de recette. */
.module-tabs-topnav a.module-tab-decaissement { color: #b23b3b; }
.module-tabs-topnav a.module-tab-decaissement:hover { color: #8f2f2f; }
.module-tabs-topnav a.module-tab-decaissement.active {
  color: #b23b3b;
  border-bottom-color: #b23b3b;
}
.module-tabs-topnav a.module-tab-transfert { color: #1f6feb; }
.module-tabs-topnav a.module-tab-transfert:hover { color: #1856bd; }
.module-tabs-topnav a.module-tab-transfert.active {
  color: #1f6feb;
  border-bottom-color: #1f6feb;
}
/* Sous-onglets du tableau de bord admin (CA, Marge brute, Resultat net, Disponibilite,
   Indicateur hebergement, Top produits, Top clients). Reutilise le style visuel de
   .module-tabs-topnav ; un seul sous-onglet visible a la fois (voir showDashboardSubtab()
   dans admin.js), filtre de dates partage (#filters-card, inchange). */
.dashboard-subtabs-nav { margin-bottom: 4px; }
.dashtab-export-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Export PDF scope a l'onglet "CA & Encaissements" (meme technique window.print() + classe
   sur <body> que le bouton "Exporter PDF" de "Dernieres saisies", voir form.js). */
@media print {
  body.printing-dashtab-ca .topbar,
  body.printing-dashtab-ca #filters-card,
  body.printing-dashtab-ca #dashboard-subtabs-nav,
  body.printing-dashtab-ca #today-glance-card,
  body.printing-dashtab-ca .recap-card,
  body.printing-dashtab-ca .dashtab-export-actions,
  body.printing-dashtab-ca #dashtab-marge,
  body.printing-dashtab-ca #dashtab-resultat,
  body.printing-dashtab-ca #dashtab-dispo,
  body.printing-dashtab-ca #dashtab-hebergement,
  body.printing-dashtab-ca #dashtab-topproduits,
  body.printing-dashtab-ca #dashtab-topclients {
    display: none !important;
  }
  body.printing-dashtab-ca #dashtab-ca {
    display: block !important;
  }
}
@media print {
  body.printing-dashtab-marge .topbar,
  body.printing-dashtab-marge #filters-card,
  body.printing-dashtab-marge #dashboard-subtabs-nav,
  body.printing-dashtab-marge #today-glance-card,
  body.printing-dashtab-marge .recap-card,
  body.printing-dashtab-marge .dashtab-export-actions,
  body.printing-dashtab-marge #dashtab-ca,
  body.printing-dashtab-marge #dashtab-resultat,
  body.printing-dashtab-marge #dashtab-dispo,
  body.printing-dashtab-marge #dashtab-hebergement,
  body.printing-dashtab-marge #dashtab-topproduits,
  body.printing-dashtab-marge #dashtab-topclients {
    display: none !important;
  }
  body.printing-dashtab-marge #dashtab-marge {
    display: block !important;
  }
}
@media print {
  body.printing-dashtab-resultat .topbar,
  body.printing-dashtab-resultat #filters-card,
  body.printing-dashtab-resultat #dashboard-subtabs-nav,
  body.printing-dashtab-resultat #today-glance-card,
  body.printing-dashtab-resultat .recap-card,
  body.printing-dashtab-resultat .dashtab-export-actions,
  body.printing-dashtab-resultat #dashtab-ca,
  body.printing-dashtab-resultat #dashtab-marge,
  body.printing-dashtab-resultat #dashtab-dispo,
  body.printing-dashtab-resultat #dashtab-hebergement,
  body.printing-dashtab-resultat #dashtab-topproduits,
  body.printing-dashtab-resultat #dashtab-topclients {
    display: none !important;
  }
  body.printing-dashtab-resultat #dashtab-resultat {
    display: block !important;
  }
}
@media print {
  body.printing-dashtab-dispo .topbar,
  body.printing-dashtab-dispo #filters-card,
  body.printing-dashtab-dispo #dashboard-subtabs-nav,
  body.printing-dashtab-dispo #today-glance-card,
  body.printing-dashtab-dispo .recap-card,
  body.printing-dashtab-dispo .dashtab-export-actions,
  body.printing-dashtab-dispo #dashtab-ca,
  body.printing-dashtab-dispo #dashtab-marge,
  body.printing-dashtab-dispo #dashtab-resultat,
  body.printing-dashtab-dispo #dashtab-hebergement,
  body.printing-dashtab-dispo #dashtab-topproduits,
  body.printing-dashtab-dispo #dashtab-topclients {
    display: none !important;
  }
  body.printing-dashtab-dispo #dashtab-dispo {
    display: block !important;
  }
}

/* Phase 6 : tableau "Dernieres saisies" (vue agent) */
.wide-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 16px 60px;
}
.agent-entries-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.agent-entries-table th, .agent-entries-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  white-space: normal;
  min-width: 100px;
}
.agent-entries-table th {
  color: var(--primary);
  background: var(--bg);
  font-weight: 700;
  font-size: 0.78rem;
}
.agent-entries-table tbody tr:hover { background: var(--bg); }
.agent-entries-table tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--primary);
  border-bottom: none;
  background: var(--bg);
}
.agent-entries-recap {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 4px 0 20px;
}
.agent-entries-recap .recap-box {
  flex: 1;
  min-width: 180px;
  background: var(--bg);
  border-radius: var(--radius);
  padding: 14px 18px;
  text-align: center;
}
.agent-entries-recap .recap-label {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.agent-entries-recap .recap-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary);
}
.agent-entries-recap .recap-input {
  width: 100%;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: var(--radius);
  padding: 6px 8px;
  color: var(--primary);
  background: #fff;
}
.agent-entries-recap .recap-ecart-negatif {
  color: #c0392b;
}
.agent-entries-recap .recap-ecart-positif {
  color: #b8860b;
}

/* Phase 7 : export PDF du tableau "Dernieres saisies" via window.print() (meme technique
   que le bouton Exporter PDF de l'admin). Masque tout le reste de la page pendant
   l'impression pour n'isoler que le tableau deja filtre a l'ecran. */
@media print {
  body.printing-agent-entries .topbar,
  body.printing-agent-entries .module-tabs-topnav,
  body.printing-agent-entries #main-form,
  body.printing-agent-entries .filters,
  body.printing-agent-entries #btn-agent-entries-export-pdf {
    display: none !important;
  }
  body.printing-agent-entries #agent-entries-section {
    box-shadow: none;
    border: none;
  }
}
@media print {
  body.printing-transferts-history .topbar,
  body.printing-transferts-history .module-tabs-topnav,
  body.printing-transferts-history #main-form,
  body.printing-transferts-history .filters,
  body.printing-transferts-history #btn-transferts-history-export-pdf {
    display: none !important;
  }
  body.printing-transferts-history #transferts-history-section {
    box-shadow: none;
    border: none;
  }
}
#transferts-table th,
#transferts-table td {
  text-align: center;
}
.saisi-le {
  color: #6b7280;
  font-size: 0.85em;
}
.item-row.invalid-row {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
}
.total-general {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  color: white;
  padding: 22px 26px;
  border-radius: var(--radius);
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 22px;
  box-shadow: 0 4px 14px rgba(19, 58, 48, 0.25);
}
.total-general span { color: var(--accent-light); font-weight: 800; }
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--primary);
  color: white;
  padding: 14px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 1000;
  max-width: 320px;
}
.toast.error { background: var(--danger); }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
th, td {
  border: 1px solid var(--border);
  padding: 9px 10px;
  text-align: left;
}
/* En-tête colorée + lignes alternées, pour une lecture plus rapide des tableaux du
   tableau de bord (et de la page de saisie). */
th { background: var(--primary); color: #ffffff; font-weight: 600; }
tbody tr:nth-child(even) { background: #f4f7f5; }
tbody tr:hover { background: #eaf3ee; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(23, 49, 41, 0.06);
}
.stat-card .label { font-size: 0.78rem; color: var(--muted); }
.stat-card .value { font-size: 1.3rem; font-weight: 700; color: var(--primary); }
.stat-card .subtext { font-size: 0.76rem; color: var(--muted); margin-top: 2px; }
.kpi-section-title {
  grid-column: 1 / -1;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary);
  margin: 14px 0 -2px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.kpi-section-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin-bottom: 18px;
}
.filters .field { margin-bottom: 0; min-width: 150px; }
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  background: #eef2f0;
  margin-right: 4px;
}
.badge-libre { background: #d7f5e3; color: #1f8a4c; }
.badge-occupee { background: #fde2e2; color: var(--danger); }
.badge-reservee { background: #fff3d6; color: #a6720c; }
.badge-hors-service { background: #e5e7eb; color: #4b5563; }
.kpi-alert { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.kpi-card { position: relative; }
.kpi-card .trend {
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 4px;
}
.kpi-card .trend.up { color: #1f8a4c; }
.kpi-card .trend.down { color: var(--danger); }
.kpi-card .trend.flat { color: var(--muted); }
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.chart-header h2 { margin: 0; }
.chart-header select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.charts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.charts-row .card { margin-bottom: 0; }
/* Export PDF (bouton "Exporter PDF" du tableau de bord) en orientation paysage : les tableaux
   larges (Indicateurs de contrôle, Transactions...) tiennent mieux sur la page. */
@page {
  size: landscape;
  margin: 12mm;
}
#print-header { display: none; }
/* Ecran de verrouillage PIN (formulaire de saisie) : recouvre toute la page tant qu'aucun
   agent n'a saisi son code. Une fois deverrouille, body perd la classe "pin-locked" et le
   contenu normal (topbar + main) redevient visible. Voir public/js/pin-lock.js. */
.pin-lock-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #1d4e42, #123a30);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
body.pin-locked .pin-lock-overlay { display: flex; }
body.pin-locked > header.topbar,
body.pin-locked > main { display: none; }
.pin-lock-box {
  background: rgba(255,255,255,0.96);
  border-radius: 28px;
  padding: 36px 32px;
  width: 90%;
  max-width: 380px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 25px 60px rgba(0,0,0,0.18), 0 8px 25px rgba(0,0,0,0.08);
}
.pin-lock-box h2 { margin: 0 0 6px; color: #1d4e42; }
.pin-lock-box p { color: #667; font-size: 0.9rem; margin: 0 0 18px; }
#pin-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 1.6rem;
  letter-spacing: 6px;
  text-align: center;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 12px;
  margin-bottom: 12px;
}
#pin-error { color: #b23b3b; font-size: 0.85rem; min-height: 1.2em; margin-bottom: 10px; }
#pin-lock-logo { max-height: 60px; max-width: 200px; display: block; margin: 0 auto 10px; }
.pin-lock-etab-nom { font-weight: 800; color: #1d4e42; font-size: 1.1rem; margin-bottom: 4px; }
.pin-lock-contact { margin-top: 14px; font-size: 0.8rem; color: #889; }
.agent-session-badge { font-weight: 600; margin-left: 10px; }
.statut-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.statut-badge-ok { background: #e3f5ea; color: #1d7a44; }
.statut-badge-warn { background: #fdf1d6; color: #a6650a; }
.statut-badge-info { background: #e6edfb; color: #2451a8; }
.corbeille-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #d64545;
  color: white;
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: 4px;
  vertical-align: middle;
}
@media print {
  .no-print { display: none !important; }
  body { background: white; }
  main { max-width: 100%; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  /* Empile le(s) graphique(s) et le tableau associe au lieu de les afficher cote a cote :
     un canvas Chart.js garde ses dimensions pixel fixees au moment du rendu ecran et ne se
     redimensionne pas de façon fiable pour l'impression, ce qui pouvait le faire deborder
     sur le contenu voisin (ex. graphique d'occupation des chambres). */
  .charts-row { display: block; }
  .charts-row > div { margin-bottom: 16px; max-width: 100%; overflow: hidden; }
  th { background: #eef2f0 !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #print-header { display: block !important; text-align: center; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 2px solid #1d4e42; }
  #print-header-logo { max-height: 60px; max-width: 180px; display: none; margin: 0 auto 8px; }
  #print-header-logo[src]:not([src=""]) { display: block; }
  #print-header-nom { font-size: 1.2rem; font-weight: 800; color: #1d4e42; }
  #print-header-meta { font-size: 0.85rem; color: #555; margin-top: 2px; }
}
/* ---------------- Optimisation mobile (formulaire de saisie) ---------------- */
@media (max-width: 640px) {
  header.topbar {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px;
  }
  header.topbar h1 { font-size: 1.1rem; }
  header.topbar nav {
    display: flex;
    gap: 6px;
    width: 100%;
  }
  header.topbar nav a {
    flex: 1;
    margin-left: 0;
    text-align: center;
    padding: 9px 8px;
    background: rgba(255,255,255,0.14);
    border-radius: 6px;
    font-size: 0.85rem;
  }
  main { padding: 0 12px 96px; margin: 16px auto; }
  .card { padding: 18px; }
  .card h2 { font-size: 1rem; }
  /* Boutons pleine largeur : plus faciles à atteindre du pouce sur petit écran. */
  .btn-add { width: 100%; text-align: center; padding: 12px; }
  /* Le bouton d'enregistrement reste accessible en bas de l'écran pendant le
     défilement d'un formulaire long, sans que l'agent doive remonter en fin de page. */
  #submit-btn {
    position: sticky;
    bottom: 0;
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
    z-index: 50;
  }
  .total-general { font-size: 1.15rem; padding: 14px 18px; }
  input[type=text], input[type=number], input[type=tel], input[type=date],
  select, textarea {
    padding: 12px 14px;
  }
  .field { margin-bottom: 18px; }
}
.audit-subtabs-nav { margin-bottom: 4px; }
@media print {
  body[class*="printing-audittab-"] #audit-content > *:not(#audit-tx-section) { display: none !important; }
  body[class*="printing-audittab-"] .topbar,
  body[class*="printing-audittab-"] #filters-card,
  body[class*="printing-audittab-"] #tx-table-legacy-section,
  body[class*="printing-audittab-"] #audit-subtabs-nav,
  body[class*="printing-audittab-"] .dashtab-export-actions,
  body[class*="printing-audittab-"] .audit-subtab {
    display: none !important;
  }
  body.printing-audittab-hebergement #audittab-hebergement,
  body.printing-audittab-bar #audittab-bar,
  body.printing-audittab-restaurant #audittab-restaurant,
  body.printing-audittab-salle #audittab-salle,
  body.printing-audittab-cafe #audittab-cafe,
  body.printing-audittab-eaux #audittab-eaux,
  body.printing-audittab-autre #audittab-autre,
  body.printing-audittab-decaissement #audittab-decaissement {
    display: block !important;
  }
  body.printing-audit-log .topbar,
  body.printing-audit-log #filters-card,
  body.printing-audit-log #tx-table-legacy-section,
  body.printing-audit-log #audit-subtabs-nav,
  body.printing-audit-log #audit-tx-section,
  body.printing-audit-log .dashtab-export-actions {
    display: none !important;
  }
  body.printing-audit-log #audit-log-section {
    display: block !important;
  }
}
table[id^="audit-table-"] th,
table[id^="audit-table-"] td {
  text-align: center;
}
.field-modified {
  background-color: #fef9c3 !important;
  cursor: help;
}
.field-modified-icon {
  font-size: 12px;
  margin-right: 4px;
}