body { background:#f4f6f5; }
.card-plaza { border:none; border-radius:14px; box-shadow:0 2px 10px rgba(0,0,0,.06); }
.table-plaza thead { background:#198754; color:#fff; }
.shortage-bad { background:#f8d7da !important; }
.shortage-ok { background:#d1e7dd !important; }
.section-title { background:#198754; color:#fff; padding:.4rem .8rem; border-radius:8px; font-weight:600; margin:1rem 0 .5rem; }
.suspended-row { opacity:.55; }

/* Aperçu en temps réel du formulaire de rapport : reste DANS le flux normal du
   formulaire (pas "sticky"), pour ne jamais recouvrir les champs de saisie
   situés plus bas, même sur petit écran où ce bloc devient plus haut. */
.preview-box { background:#e9f7ef; border:2px solid #198754; border-radius:12px; padding:.75rem 1rem; }
.preview-box .metric { font-weight:700; font-size:.95rem; }

/* ---------- Rapport (report_view.php) : largeur raisonnable, centré, lisible
   sur tout type d'écran (ordinateur / tablette / mobile), et COMPACT (lignes
   serrées) pour que la capture d'image envoyée par WhatsApp/Messenger reste
   courte plutôt que de s'étirer sur une image interminable. ---------- */
.report-wrap { max-width: 980px; margin: 0 auto; }
.report-wrap .card-plaza { padding: .6rem .75rem !important; margin-bottom: .6rem !important; }
.report-wrap .section-title { margin: 0 0 .35rem; padding: .3rem .7rem; font-size: .92rem; }
.report-wrap .table-sm td, .report-wrap .table-sm th { padding: .2rem .5rem; line-height: 1.2; font-size: .9rem; }
.report-wrap .table td:first-child, .report-wrap .table th:first-child { width: 55%; }

/* Montant + devise(s) sur UNE SEULE ligne (ex: "LRD 234,005 / USD 1,360") —
   jamais coupé au milieu d'un nombre, mais pas de retour à la ligne forcé. */
.amount-wrap { white-space: nowrap; }

/* En-tête ajouté UNIQUEMENT dans l'image capturée (branche + date du rapport) —
   invisible à l'écran, affiché juste le temps de la capture (voir captureReport()). */
#captureHeader { display: none; text-align: center; padding: .5rem 0 .75rem; border-bottom: 2px solid #198754; margin-bottom: .75rem; }
#captureHeader .ch-branch { font-size: 1.15rem; font-weight: 700; color: #198754; }
#captureHeader .ch-date { font-size: .85rem; color: #555; margin-top: .15rem; }

/* Tableau de bord : lignes et cartes plus compactes, qui s'adaptent à la taille
   de l'écran plutôt que d'imposer une largeur fixe. */
@media (max-width: 767.98px) {
  .card-plaza { padding: .6rem !important; }
  .section-title { font-size: .85rem; padding: .3rem .6rem; }
  .table-plaza, .table-plaza td, .table-plaza th { font-size: .82rem; }
}

/* Carte capturée en image (html2canvas) pour partage WhatsApp/Messenger :
   fond plein (pas de transparence) et coins francs pour un rendu propre en image. */
.capture-target { background:#fff; }

/* Désignation retirée de ce rapport, affichée grisée (montant visible, non modifiable)
   au lieu de disparaître — le montant déjà saisi reste visible à l'écran. */
.line-row-removed { opacity:.55; background:#f8f9fa; border-radius:6px; }
.line-row-removed .form-control:disabled { background:#eee; }

/* Menu latéral (Réglages / Utilisateurs / Audits / Profile) — admin et
   superviseur uniquement ; absent pour les autres rôles (voir includes/sidebar.php). */
.plaza-shell { align-items: stretch; }
.plaza-sidebar {
  width: 210px;
  flex: 0 0 210px;
  background: #fff;
  border-right: 1px solid #dee2e6;
  padding: 1rem 0;
  min-height: calc(100vh - 56px);
}
.plaza-sidebar-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1.1rem;
  color: #333;
  text-decoration: none;
  font-weight: 500;
  border-left: 3px solid transparent;
}
.plaza-sidebar-link:hover {
  background: #f1f8f3;
  color: #198754;
  border-left-color: #198754;
}
.plaza-sidebar-icon { font-size: 1.05rem; width: 1.3rem; text-align: center; }
@media (max-width: 767.98px) {
  .plaza-sidebar { width: 64px; flex: 0 0 64px; }
  .plaza-sidebar-link .plaza-sidebar-label { display: none; }
  .plaza-sidebar-link { justify-content: center; padding: .6rem .3rem; }
}

/* Boutons d'action des tableaux admin (Branches, Utilisateurs, Devises, Champs
   de rapport, Personnel) : icône + libellé. Sur grand écran les deux sont
   visibles côte à côte ; sur petit écran (mobile) seul l'icône reste affichée
   (le libellé passe en infobulle via l'attribut "title" déjà présent sur
   chaque bouton), pour que la ligne ne déborde jamais et reste lisible. */
.action-buttons-cell {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}
.action-buttons-cell form { display: inline-flex; margin: 0; }
.action-buttons-cell .btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}
.action-buttons-cell .btn-icon { font-size: .95rem; line-height: 1; }

@media (max-width: 767.98px) {
  .action-buttons-cell .btn { padding: .32rem .5rem; }
  .action-buttons-cell .btn-label { display: none; }
}

/* Logo du système (Réglages > Général), affiché dans la barre du haut et sur
   la page de connexion à la place de l'icône 🏢 par défaut. */
.plaza-logo { height: 28px; width: auto; max-width: 160px; object-fit: contain; }
.plaza-logo-lg { height: 40px; }
.plaza-logo-preview { height: 48px; width: auto; max-width: 160px; object-fit: contain; border: 1px solid #dee2e6; border-radius: 6px; padding: 4px; background: #fff; }

/* ====================================================================
   Thème sombre (Réglages > Général > Thème) : Bootstrap 5.3 gère déjà la
   plupart de ses propres composants via [data-bs-theme="dark"] (cartes,
   tableaux, modales, formulaires...). Les classes "maison" ci-dessous
   (card-plaza, table-plaza, sidebar, etc.) ont leurs propres couleurs fixes
   et ont donc besoin d'un jeu de couleurs sombres équivalent.
   ==================================================================== */
[data-bs-theme="dark"] body { background: #15181a; color: #e9ecef; }
[data-bs-theme="dark"] .card-plaza { background: #1f2327; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
[data-bs-theme="dark"] .table-plaza thead { background: #156944; }
[data-bs-theme="dark"] .preview-box { background: #10281c; border-color: #198754; color: #e9ecef; }
[data-bs-theme="dark"] .shortage-bad { background: #4a2228 !important; color: #f1b0b7; }
[data-bs-theme="dark"] .shortage-ok { background: #113827 !important; color: #a3cfbb; }
[data-bs-theme="dark"] .suspended-row { opacity: .45; }
[data-bs-theme="dark"] .line-row-removed { background: #23272b; }
[data-bs-theme="dark"] .line-row-removed .form-control:disabled { background: #2b2f33; color: #adb5bd; }
[data-bs-theme="dark"] .plaza-sidebar { background: #1a1d20; border-right-color: #2b2f33; }
[data-bs-theme="dark"] .plaza-sidebar-link { color: #d8dadc; }
[data-bs-theme="dark"] .plaza-sidebar-link:hover { background: #10281c; color: #4ade9b; border-left-color: #4ade9b; }
[data-bs-theme="dark"] .plaza-logo-preview { background: #2b2f33; border-color: #3a3f44; }
[data-bs-theme="dark"] #captureHeader .ch-date { color: #adb5bd; }
/* La barre du haut et les bandeaux de titre restent verts dans les deux thèmes
   (identité visuelle) ; seul le texte/contraste autour change. */