/* ==========================================================================
   ADVENTURE BALLOON — STYLESHEET (Design System & Permanent Visibility)
   Standards PayTun Pro / HumanisRH
   ========================================================================== */:root {
  --primary: #f59e0b;
  --primary-hover: #d97706;
  --primary-light: #fef3c7;
  --primary-dark: #92400e;
  --bg-main: #f8fafc;
  --bg-card: #ffffff;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --border: #e2e8f0;
  --border-focus: #f59e0b;
  --border-subtle: #cbd5e1;
  --danger: #ef4444;
  --danger-light: #fef2f2;
  --danger-dark: #991b1b;
  --success: #10b981;
  --success-light: #ecfdf5;
  --success-dark: #047857;
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px -1px rgba(0, 0, 0, 0.07);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-modal: 0 20px 25px -5px rgba(15, 23, 42, 0.22), 0 8px 10px -6px rgba(15, 23, 42, 0.22);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ----------------------------------------------------
   1. STRUCTURE D'AFFICHAGE PLEIN ÉCRAN OPTIMISÉE
   (En-tête et Titre figés en haut, scrollbars permanentes)
   ---------------------------------------------------- */
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

/* Barres de défilement permanentes, nettes et compactes */
::-webkit-scrollbar {
  width: 9px !important;
  height: 9px !important;
  display: block !important;
}

::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0;
}

::-webkit-scrollbar-thumb {
  background-color: #94a3b8 !important;
  border-radius: 4px !important;
  border: 2px solid #f1f5f9 !important;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #64748b !important;
}

::-webkit-scrollbar-corner {
  background: #e2e8f0;
}

* {
  scrollbar-color: #94a3b8 #f1f5f9;
  scrollbar-width: thin;
}

/* ----------------------------------------------------
   2. VOLET GAUCHE (SIDEBAR) TOUJOURS VISIBLE
   ---------------------------------------------------- */
.app-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.sidebar {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  background: #0f172a !important;
  color: #f8fafc;
  display: flex !important;
  flex-direction: column;
  flex-shrink: 0 !important;
  height: 100vh;
  z-index: 1000;
  box-shadow: 1px 0 8px rgba(0, 0, 0, 0.15);
  overflow: hidden !important;
}

.sidebar-header {
  height: 48px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #1e293b;
  flex-shrink: 0;
}

.sidebar-logo {
  font-size: 20px;
  line-height: 1;
}

.sidebar-brand h2 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #ffffff;
  line-height: 1.1;
}

.sidebar-brand span {
  color: var(--primary);
}

.sidebar-nav {
  flex: 1;
  padding: 10px 8px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent !important;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sidebar-nav::-webkit-scrollbar {
  display: block !important;
  width: 5px !important;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent !important;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25) !important;
  border-radius: 4px !important;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.45) !important;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border-radius: var(--radius-md);
  color: #94a3b8;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.12s ease;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.nav-item:hover {
  background: #1e293b;
  color: #ffffff;
}

.nav-item.active {
  background: var(--primary);
  color: #0f172a;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.sidebar-footer {
  padding: 8px 12px;
  border-top: 1px solid #1e293b;
  font-size: 10px;
  color: #64748b;
  line-height: 1.3;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  overflow: hidden;
  background-color: var(--bg-main);
}

/* ----------------------------------------------------
   HEADER & GLOBAL SITE SELECTOR (Always visible)
   ---------------------------------------------------- */
.top-header {
  height: 38px;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-selector-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-md);
  padding: 2px 8px;
  height: 26px;
  min-width: 200px;
}

.site-selector {
  border: none;
  background: transparent;
  font-size: 11.5px;
  font-weight: 700;
  color: #78350f;
  outline: none;
  cursor: pointer;
  width: 100%;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  height: 25px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s;
}

.lang-btn:hover {
  background: #f1f5f9;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}

.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0f172a;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 10.5px;
}

.user-info {
  line-height: 1.1;
}

.user-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
}

.user-role {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--primary-dark);
}

.logout-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  transition: all 0.12s;
}

.logout-btn:hover {
  color: var(--danger);
  background: var(--danger-light);
}

/* ----------------------------------------------------
   PAGE CONTENT & VIEWS (ESPACE OPTIMISÉ)
   ---------------------------------------------------- */
.page-container {
  padding: 4px 8px;
  max-width: 100%;
  margin: 0;
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.view-section {
  display: none;
}

.view-section.active {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

/* Vues nécessitant un défilement complet multi-blocs (Tableau de bord, Rôles, Dispatch, États & Rapports, Calendrier, Paramètres Société) */
#view-dashboard.active,
#view-dispatch.active,
#view-roles.active,
#view-reports.active,
#view-calendar.active,
#view-company-settings.active {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 6px;
  padding-bottom: 80px;
  scroll-behavior: smooth;
}

.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-shrink: 0;
  gap: 8px 14px;
  min-height: 40px;
  height: auto;
  padding: 3px 2px;
  margin-bottom: 6px;
}

.view-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.view-title h1 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.2px;
  line-height: 1.2;
}

.view-title p {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.2;
}

.view-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ----------------------------------------------------
   DATE NAVIGATOR (Barre de navigation par date moderne)
   ---------------------------------------------------- */
.date-nav-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ffffff;
  padding: 3px 6px;
  height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}

.date-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #334155;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  transition: all 0.15s ease;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}

.date-nav-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
  border-color: #cbd5e1;
}

.date-nav-btn:active {
  transform: scale(0.94);
}

.date-nav-input-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.date-nav-input {
  height: 28px;
  padding: 0 8px;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  color: #0f172a;
  background: #ffffff;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 130px;
  box-sizing: border-box;
  text-align: center;
}

.date-nav-input:hover {
  border-color: #94a3b8;
}

.date-nav-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.date-nav-today-btn {
  height: 28px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  border: 1px solid #f59e0b;
  background: #fffbeb;
  color: #b45309;
}

.date-nav-today-btn:hover {
  background: #f59e0b;
  color: #ffffff;
  border-color: #d97706;
}

.date-nav-today-btn:active {
  transform: scale(0.96);
}

.date-nav-shortcut-btn {
  height: 28px;
  padding: 0 9px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
}

.date-nav-shortcut-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
  border-color: #cbd5e1;
}

.date-nav-shortcut-btn:active {
  transform: scale(0.96);
}

.date-human-badge {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  padding: 2px 7px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

@media (max-width: 1200px) {
  .date-human-badge {
    display: none;
  }
}

.btn-agency-batch {
  background: #2563eb;
  border: 1px solid #1d4ed8;
  color: #ffffff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-agency-batch:hover {
  background: #1d4ed8;
  border-color: #1e40af;
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.3);
}

.btn-daily-report {
  height: 36px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #0284c7;
  color: #0284c7;
  background: #f0f9ff;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-daily-report:hover {
  background: #e0f2fe;
  border-color: #0369a1;
  color: #0369a1;
}

/* ----------------------------------------------------
   CRITICAL RED UNASSIGNED ALERT (Section 1.3)
   ---------------------------------------------------- */
.unassigned-alert-box {
  background: #fef2f2;
  border: 1.5px solid #ef4444;
  border-radius: var(--radius-md);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.12);
  animation: pulse-border 2s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes pulse-border {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.35); }
  70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.alert-icon-col {
  display: flex;
  align-items: center;
  gap: 10px;
}

.alert-badge-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: #dc2626;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  flex-shrink: 0;
}

.alert-text h4 {
  font-size: 13px;
  font-weight: 800;
  color: #7f1d1d;
  margin: 0;
  line-height: 1.2;
}

.alert-text p {
  font-size: 11px;
  color: #b91c1c;
  margin: 2px 0 0 0;
  line-height: 1.2;
}

.alert-pax-count {
  font-size: 22px;
  font-weight: 900;
  color: #dc2626;
  line-height: 1;
  text-align: right;
}

/* ----------------------------------------------------
   KPI CARDS & SUMMARY
   ---------------------------------------------------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 5px;
  flex-shrink: 0;
}

.kpi-card {
  background: var(--bg-card);
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 46px;
}

.kpi-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: none !important;
  color: var(--text-muted);
  letter-spacing: 0;
  line-height: 1;
}

.kpi-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  margin: 1px 0;
  line-height: 1.1;
}

.kpi-sub {
  font-size: 9px;
  color: var(--text-light);
  line-height: 1;
}

/* ----------------------------------------------------
   TABLES & CARDS WITH MANDATORY SCROLLBARS
   ---------------------------------------------------- */
.table-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.table-toolbar {
  padding: 3px 8px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 6px;
  background: #fdfdfd;
  min-height: 30px;
}

.search-input {
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  width: 190px;
  height: 24px;
  outline: none;
  transition: border 0.15s;
}

.search-input:focus {
  border-color: var(--border-focus);
}

/* BARRE DE DÉFILEMENT FLUIDE ET RESPONSIVE */
.table-responsive {
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  text-align: left;
  min-width: 1180px;
}

/* Tableaux ajustés à la largeur disponible (sans scroll horizontal artificiel) */
#users-table,
#sites-table,
#roles-table {
  min-width: 960px;
  width: 100%;
}

/* En-têtes figés en haut du tableau lors du défilement */
table.data-table thead {
  position: sticky;
  top: 0;
  z-index: 20;
}

table.data-table th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  padding: 4px 6px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
  box-shadow: 0 1px 0 var(--border);
  white-space: nowrap;
  z-index: 20;
}

table.data-table td {
  padding: 3px 6px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  line-height: 1.25;
}

table.data-table tbody tr {
  cursor: pointer;
  transition: background-color 0.12s ease, transform 0.08s ease;
}

table.data-table tbody tr:hover {
  background-color: #f0fdf4 !important; /* Vert menthe subtil pour indiquer la sélection */
}

.kpi-card {
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.kpi-card[ondblclick]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.list-dblclick-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: #64748b;
  background: #f8fafc;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
}

/* Status Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1.5px 5.5px;
  border-radius: var(--radius-sm);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.2;
}

.badge-success { background: var(--success-light); color: var(--success-dark); }
.badge-danger { background: var(--danger-light); color: var(--danger-dark); }
.badge-warning { background: var(--primary-light); color: var(--primary-dark); }
.badge-neutral { background: #f1f5f9; color: #475569; }

/* 1-Click Interactive Authorization Toggle Button in Table */
.btn-auth-toggle {
  cursor: pointer;
  border: none;
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.3;
}

.btn-auth-toggle.authorized {
  background: var(--success-light);
  color: var(--success-dark);
  border: 1px solid #a7f3d0;
}

.btn-auth-toggle.authorized:hover {
  background: #bbf7d0;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.2);
}

.btn-auth-toggle.unauthorized {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.btn-auth-toggle.unauthorized:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* ----------------------------------------------------
   ZONE DE SAISIE SIMPLE POUR LA COLONNE REMISE
   (Couleur différente s'il y a une remise)
   ---------------------------------------------------- */
.discount-inline-input {
  width: 64px;
  height: 24px;
  padding: 1px 5px;
  font-size: 11px;
  font-family: monospace;
  text-align: right;
  border-radius: var(--radius-sm);
  outline: none;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

/* S'il n'y a PAS de remise : zone simple neutre */
.discount-inline-input.discount-no-val {
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  color: #94a3b8;
  font-weight: 500;
}

.discount-inline-input.discount-no-val:hover:not(:disabled) {
  border-color: #94a3b8;
  color: #0f172a;
}

.discount-inline-input.discount-no-val:focus {
  background-color: #ffffff;
  border-color: var(--primary);
  color: #0f172a;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

/* COULEUR DIFFÉRENTE S'IL Y AVAIT UNE REMISE (> 0) */
.discount-inline-input.discount-has-val {
  background-color: #fef2f2 !important; /* Fond teinté rosé/rouge clair */
  border: 1.5px solid #f87171 !important; /* Bordure rouge visible */
  color: #dc2626 !important; /* Texte rouge vif en gras */
  font-weight: 800 !important;
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.12);
}

.discount-inline-input.discount-has-val:hover:not(:disabled) {
  background-color: #fee2e2 !important;
  border-color: #ef4444 !important;
}

.discount-inline-input.discount-has-val:focus {
  background-color: #ffffff !important;
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
}

.discount-inline-input:disabled,
.discount-inline-input[readonly] {
  cursor: not-allowed;
  opacity: 0.75;
}

/* ----------------------------------------------------
   BUTTONS & FORMS
   ---------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 2px 10px;
  height: 26px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.12s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn-sm {
  padding: 1px 6px;
  height: 22px;
  font-size: 10px;
}

.btn-primary {
  background: var(--primary);
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.2);
}

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

.btn-secondary {
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text-main);
}

.btn-secondary:hover {
  background: #f8fafc;
}

.btn-danger {
  background: var(--danger);
  color: #ffffff;
}

.btn-danger:hover {
  background: #b91c1c;
}

/* ----------------------------------------------------
   MODALS (Compact, Elegant, Glassmorphic & Structured Sizing)
   ---------------------------------------------------- */
@keyframes modalBackdropFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalCardSlideUp {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 6px;
  overflow-y: auto;
}

.modal-backdrop.show {
  display: flex;
  animation: modalBackdropFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-card {
  background: #ffffff;
  border-radius: 8px;
  max-width: 580px;
  width: 100%;
  max-height: calc(100vh - 12px);
  overflow: hidden;
  box-shadow: 0 20px 35px -8px rgba(15, 23, 42, 0.3), 0 0 0 1px rgba(15, 23, 42, 0.08);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  animation: modalCardSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  position: relative;
}

.modal-card > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.modal-card.modal-sm {
  max-width: 480px;
}

.modal-card.modal-md {
  max-width: 680px;
}

.modal-card.modal-lg {
  max-width: 960px;
}

.modal-card.modal-site {
  max-width: 820px;
}

/* Modal Réservation Spécifique : Optimisation & Défilement à Gauche */
.res-modal-card {
  max-width: 1020px !important;
  width: 96% !important;
  max-height: calc(100vh - 18px) !important;
}

.res-modal-layout {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #ffffff;
}

/* Barre latérale gauche pour défilement et navigation */
.res-modal-scroll-sidebar {
  width: 44px;
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 3px;
  gap: 3px;
  flex-shrink: 0;
  user-select: none;
  justify-content: flex-start;
  z-index: 5;
}

.res-scroll-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 12px;
  padding: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.res-scroll-btn:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  transform: translateY(-1px);
}

.res-scroll-btn:active {
  transform: translateY(1px);
}

.res-scroll-btn-step-up,
.res-scroll-btn-step-down {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #0284c7;
  font-weight: 800;
}

.res-scroll-btn-step-up:hover,
.res-scroll-btn-step-down:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}

.res-scroll-btn-top,
.res-scroll-btn-bottom {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.res-scroll-anchor {
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

.res-scroll-anchor:hover {
  background: #0284c7;
  color: #ffffff;
}

.res-nav-arrow {
  font-size: 12px;
  line-height: 1;
}

.res-nav-icon {
  font-size: 12px;
  line-height: 1;
}

.res-nav-divider {
  width: 22px;
  height: 1px;
  background: #cbd5e1;
  margin: 2px 0;
}

/* Tooltip au survol des boutons du modal */
.res-scroll-btn .res-nav-tooltip {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: #0f172a;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  z-index: 100;
}

.res-scroll-btn .res-nav-tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: transparent #0f172a transparent transparent;
}

.res-scroll-btn:hover .res-nav-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(2px);
}

.res-modal-body {
  direction: rtl; /* Positionne la barre de défilement native à GAUCHE */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 12px 20px 10px;
  scrollbar-width: thin;
  scrollbar-color: #0284c7 #f1f5f9;
}

.res-modal-body::-webkit-scrollbar {
  width: 8px;
}

.res-modal-body::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.res-modal-body::-webkit-scrollbar-thumb {
  background: #0284c7;
  border-radius: 4px;
}

.res-modal-body::-webkit-scrollbar-thumb:hover {
  background: #0369a1;
}

/* Rétablir le sens d'écriture standard de gauche à droite pour tous les composants */
.res-modal-body > * {
  direction: ltr;
}

/* Pied de page inamovible et séparé, sans aucun chevauchement */
.res-modal-footer {
  position: relative !important;
  bottom: auto !important;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  flex-shrink: 0;
  z-index: 10;
}

.modal-header {
  padding: 6px 12px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: #f8fafc;
  position: sticky;
  top: 0;
  z-index: 10;
}

.modal-header h2,
.modal-header h3 {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.modal-header p {
  font-size: 10px;
  color: #64748b;
  margin: 1px 0 0 0;
}

.modal-close-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  color: #64748b;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.modal-close-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
  transform: rotate(90deg);
}

.modal-body {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: #ffffff;
}

.modal-body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.modal-body::-webkit-scrollbar-track {
  background: #f8fafc;
}

.modal-body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.modal-footer {
  padding: 6px 12px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 10;
}

/* Sections & Cartes internes aux fenêtres */
.modal-section-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal-section-card.accent-amber {
  background: #fffbeb;
  border-color: #fde68a;
}

.modal-section-card.accent-blue {
  background: #f0f9ff;
  border-color: #bae6fd;
}

.modal-section-card.accent-green {
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.modal-section-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: none !important;
  letter-spacing: 0;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 5px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.form-group label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: none !important;
  color: #1e293b;
  letter-spacing: 0;
  line-height: 1.15;
  margin-bottom: 1px;
}

.form-control {
  padding: 1px 6px;
  height: 26px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  outline: none;
  background: #ffffff;
  color: #0f172a;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  width: 100%;
}

.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.22);
}

select.form-control {
  cursor: pointer;
  height: 26px;
  padding: 1px 4px;
  font-size: 11px;
  font-weight: 600;
}

textarea.form-control {
  height: auto;
  min-height: 38px;
  resize: vertical;
  line-height: 1.25;
  padding: 3px 6px;
  font-size: 11px;
}

.amount-calculated-box {
  background: #fffbeb;
  border: 1.5px solid var(--primary);
  border-radius: 4px;
  padding: 1px 6px;
  height: 26px;
  font-size: 11.5px;
  font-weight: 800;
  color: #78350f;
  font-family: monospace;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Grilles dynamiques pour fenêtres */
.modal-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.modal-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.modal-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

@media (max-width: 640px) {
  .modal-grid-2,
  .modal-grid-3 {
    grid-template-columns: 1fr !important;
  }
  .modal-card {
    max-height: 96vh;
  }
  .modal-body {
    padding: 8px 10px;
  }
  .modal-footer {
    padding: 6px 10px;
  }
}

/* ==========================================================================
   LOGIN OVERLAY & DEMO ACCOUNTS ENHANCEMENT
   ========================================================================== */
.login-card {
  background: #ffffff;
  max-width: 480px;
  width: 100%;
  border-radius: 20px;
  padding: 22px 24px;
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
  position: relative;
  box-sizing: border-box;
}

.login-card::-webkit-scrollbar {
  width: 5px;
}

.login-card::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.login-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #d97706);
}

.login-input {
  height: 40px !important;
  font-size: 13.5px !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  border: 1.5px solid #cbd5e1 !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box;
}

.login-input:focus {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18) !important;
}

.btn-login-submit {
  height: 42px;
  width: 100%;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-login-submit:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45);
  transform: translateY(-1px);
}

.demo-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
  box-sizing: border-box;
}

.demo-account-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: normal !important;
  height: auto !important;
  transition: all 0.15s ease;
  text-decoration: none;
}

.demo-account-card:hover {
  background: #ffffff;
  border-color: #f59e0b;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
  transform: translateY(-1px);
}

.demo-icon-badge {
  font-size: 16px;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.demo-account-card:hover .demo-icon-badge {
  background: #fffbeb;
  border-color: #fde68a;
}

.demo-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.demo-title {
  font-size: 11px;
  font-weight: 800;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.demo-subtitle {
  font-size: 9.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  margin-top: 1px;
}

/* ----------------------------------------------------
   ÉTATS ÉDITABLES & IMPRESSIONS PROFESSIONNELLES
   ---------------------------------------------------- */
.btn-rep-tab {
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-quick-date {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  cursor: pointer;
  color: #475569;
  transition: all 0.15s;
}

.btn-quick-date:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.report-panel {
  display: flex;
  flex-direction: column;
}

.report-document {
  padding: 14px;
  background: #ffffff;
  border-radius: 8px;
}

.report-print-header {
  margin-bottom: 12px;
}

/* ==========================================================================
   MISE EN PAGE DES ÉTATS IMPRIMABLES (ÉCRAN & IMPRESSION) : LISTES ÉPURÉES
   - Lignes fines verticales et horizontales
   - Cellules en police simple noire sans encadrement de champs
   - Dernière colonne intégrale
   ========================================================================== */
table.report-table {
  width: 100% !important;
  min-width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
  border: 0.5pt solid #cbd5e1 !important;
  font-size: 11px;
}

table.report-table th,
table.report-table td {
  border: 0.5pt solid #cbd5e1 !important; /* Lignes fines verticales et horizontales */
  color: #000000 !important; /* Police simple noire */
  padding: 4px 6px !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  background: #ffffff !important;
}

table.report-table th {
  background: #f8fafc !important;
  color: #000000 !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* Titres bilingues centrés */
.th-bilingual {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 1px !important;
  line-height: 1.15 !important;
  width: 100% !important;
}

.th-bilingual .th-fr {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  text-align: center !important;
}

.th-bilingual .th-en {
  font-size: 9px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2px !important;
}

/* RÈGLE CRITIQUE : Suppression absolue de tous caractères gras à l'intérieur des cellules */
table.report-table tbody td,
table.report-table tbody td *,
table.report-table tbody tr td,
table.report-table tbody tr td * {
  font-weight: 400 !important;
  color: #000000 !important;
}

table.report-table tfoot td {
  background: #ffffff !important;
  border-top: 0.5pt solid #000000 !important;
  border-bottom: 0.5pt solid #000000 !important;
  color: #000000 !important;
  font-weight: 700 !important;
  padding: 6px 8px !important;
}

/* Suppression de tout encadrement de champs (badges, pillules, bordures internes) */
table.report-table .badge,
table.report-table .btn-auth-toggle,
table.report-table [class*="badge"],
table.report-table [class*="recovery-badge"],
table.report-table [class*="rank-badge"],
table.report-table .ca-progress-inline,
table.report-table .ca-progress-track {
  display: inline !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #000000 !important;
  font-weight: 400 !important;
}

/* Dernière colonne intégrale : visible, sans débordement ni rognage */
table.report-table th:last-child,
table.report-table td:last-child {
  border-right: 0.5pt solid #cbd5e1 !important;
}

.recovery-badge-unpaid {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.recovery-badge-partial {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.recovery-badge-paid {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   RECOVERY LETTER DOCUMENT STYLES (SCREEN & PRINT)
   Reprend fidèlement la présentation corporate de la maquette validée
   ========================================================================== */
.recovery-doc {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  color: #0f172a;
  line-height: 1.5;
  background: #ffffff;
}

.recovery-master-table {
  width: 100%;
  border-collapse: collapse;
  border: none;
  margin: 0;
  padding: 0;
}
.recovery-master-table thead {
  display: table-header-group;
}
.recovery-master-table tbody {
  display: table-row-group;
}
.recovery-master-table th,
.recovery-master-table td {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

.recovery-doc .letter-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid #0f172a;
  padding-bottom: 12px;
  margin-bottom: 16px;
  gap: 16px;
}

.recovery-doc .letter-logo-block {
  display: flex;
  gap: 12px;
  align-items: center;
}

.recovery-doc .letter-company-info h2 {
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: 0.3px;
  margin: 0;
}

.recovery-doc .letter-company-info .comm-name {
  font-size: 11.5px;
  font-weight: 700;
  color: #0284c7;
  margin-top: 1px;
}

.recovery-doc .letter-company-info .comp-meta {
  font-size: 10px;
  color: #475569;
  margin-top: 2px;
  line-height: 1.35;
}

.recovery-doc .recipient-card {
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 250px;
  text-align: left;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.recovery-doc .recipient-card .rec-badge {
  font-size: 9.5px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.recovery-doc .recipient-card .rec-name {
  font-size: 13.5px;
  font-weight: 900;
  color: #0f172a;
}

.recovery-doc .recipient-card .rec-attn {
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  margin-top: 1px;
}

.recovery-doc .recipient-card .rec-details {
  font-size: 10.5px;
  color: #64748b;
  margin-top: 2px;
  font-family: monospace;
}

.recovery-doc .letter-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 6px 12px;
  background: #f1f5f9;
  border-radius: 6px;
  border-left: 4px solid #0284c7;
}

.recovery-doc .letter-date-ref {
  font-size: 11.5px;
  color: #334155;
  font-weight: 700;
}

.recovery-doc .letter-level-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.recovery-doc .letter-subject-box {
  margin-bottom: 12px;
  font-size: 12.5px;
  color: #0f172a;
}

.recovery-doc .letter-greeting {
  font-size: 11.5px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

.recovery-doc .letter-body-text {
  font-size: 11.5px;
  color: #1e293b;
  line-height: 1.6;
  margin-bottom: 14px;
}

.recovery-doc .doc-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 10px;
  margin-bottom: 14px;
  border: 1px solid #cbd5e1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.recovery-doc .doc-table th {
  background: #f1f5f9;
  color: #0f172a;
  font-weight: 800;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  padding: 5px 6px;
  border: 1px solid #cbd5e1;
  text-align: center !important;
  vertical-align: middle;
}

.recovery-doc .doc-table td {
  padding: 5px 6px;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  vertical-align: middle;
  font-family: inherit;
}

.recovery-doc .doc-table tr:nth-child(even) td {
  background: #fafafa;
}

.recovery-doc .doc-table tfoot td {
  background: #f8fafc;
  font-weight: 800;
  border-top: 1.5px solid #0f172a;
  color: #0f172a;
  padding: 6px 8px;
}

.recovery-doc .letter-deadline {
  font-size: 11px;
  line-height: 1.55;
  color: #334155;
  margin-bottom: 14px;
  background: #f8fafc;
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 3.5px solid #64748b;
}

.recovery-doc .bank-card {
  background: #f0f9ff;
  border: 1.5px solid #0284c7;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
}

.recovery-doc .bank-card-title {
  font-size: 11px;
  font-weight: 900;
  color: #0369a1;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.recovery-doc .bank-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 12px;
  font-size: 10.5px;
  color: #1e293b;
}

.recovery-doc .sign-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

/* ----------------------------------------------------
   STRICT PRINT STYLESHEET (@media print)
   Garantit une impression A4 nette et professionnelle
   (A4 Paysage pour les états de reporting, A4 Portrait pour la lettre de recouvrement)
   ---------------------------------------------------- */
@media print {
  @page {
    size: A4 landscape;
    margin: 8mm 8mm 10mm 8mm;
    @bottom-right {
      content: counter(page) "/" counter(pages);
      font-size: 7.5pt;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      font-weight: 700;
      color: #334155;
    }
  }

  @page pageLandscape {
    size: A4 landscape;
    margin: 8mm 8mm 10mm 8mm;
    @bottom-right {
      content: counter(page) "/" counter(pages);
      font-size: 7.5pt;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      font-weight: 700;
      color: #334155;
    }
  }

  @page pagePortrait {
    size: A4 portrait;
    margin: 8mm 10mm 10mm 10mm;
    @bottom-right {
      content: counter(page) "/" counter(pages);
      font-size: 7.5pt;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      font-weight: 700;
      color: #334155;
    }
  }

  body.printing-letter-portrait,
  body.printing-voucher,
  body.printing-receipt,
  body.printing-combined,
  body.printing-audit-detail,
  #voucher-modal,
  #receipt-modal,
  #audit-modal,
  #recovery-letter-modal:not(.landscape-mode),
  #recovery-letter-document:not(.letter-landscape) {
    page: pagePortrait !important;
  }

  body.printing-letter-landscape,
  #recovery-letter-modal.landscape-mode,
  #recovery-letter-document.letter-landscape {
    page: pageLandscape !important;
  }

  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  html, body {
    overflow: visible !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 7.2pt !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Masquer tous les éléments d'interface non imprimables */
  .sidebar,
  .top-header,
  #login-overlay,
  #test-env-banner,
  .modal-backdrop:not(.show),
  .no-print,
  th.no-print,
  td.no-print,
  .reports-tabs-bar,
  #rep-res-filter-grid,
  #rep-pay-filter-grid,
  #rep-asg-filter-grid,
  #rep-stats-filter-card,
  #rep-stats-filter-grid,
  .stats-filter-card,
  .stats-global-toggle,
  .btn-stats-action,
  .filter-global-pill,
  .btn,
  .btn-quick-date,
  .kpi-grid,
  .stats-kpi-grid,
  .stats-scroll-sidebar,
  .table-toolbar,
  .view-header,
  .table-actions-bar,
  .modal-header.no-print,
  .modal-footer.no-print,
  .modal-close-btn {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  .app-container,
  .main-content,
  .page-container {
    display: block !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  .view-section {
    display: none !important;
  }

  .view-section.active {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* RÈGLE CRITIQUE : Masquer TOUS les panneaux d'états par défaut */
  .report-panel {
    display: none !important;
  }

  /* Afficher UNIQUEMENT le panneau actif demandé (JAMAIS les 4 ensemble) */
  .report-panel.print-active-panel,
  #view-reports .report-panel.print-active-panel {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* ============================================================
     ISOLATION ABSOLUE DE LA LETTRE DE RECOUVREMENT À L'IMPRESSION
     ============================================================ */
  body.printing-letter-portrait .app-container,
  body.printing-letter-landscape .app-container,
  body.printing-letter-portrait .main-content,
  body.printing-letter-landscape .main-content,
  body.printing-letter-portrait .page-container,
  body.printing-letter-landscape .page-container,
  body.printing-letter-portrait .view-section,
  body.printing-letter-landscape .view-section,
  body.printing-letter-portrait .top-header,
  body.printing-letter-landscape .top-header,
  body.printing-letter-portrait .sidebar,
  body.printing-letter-landscape .sidebar,
  body.printing-letter-portrait #client-recovery-modal,
  body.printing-letter-landscape #client-recovery-modal,
  body.printing-letter-portrait .modal-backdrop:not(#recovery-letter-modal),
  body.printing-letter-landscape .modal-backdrop:not(#recovery-letter-modal) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    visibility: hidden !important;
    overflow: hidden !important;
  }

  body.printing-letter-portrait #recovery-letter-modal,
  body.printing-letter-landscape #recovery-letter-modal {
    display: block !important;
    position: static !important;
    background: #ffffff !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    inset: auto !important;
    box-shadow: none !important;
    border: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: auto !important;
  }

  body.printing-letter-portrait #recovery-letter-modal .modal-card,
  body.printing-letter-landscape #recovery-letter-modal .modal-card {
    display: block !important;
    position: static !important;
    background: #ffffff !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.printing-letter-portrait #recovery-letter-modal .modal-body,
  body.printing-letter-landscape #recovery-letter-modal .modal-body {
    display: block !important;
    position: static !important;
    background: #ffffff !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.printing-letter-portrait #recovery-letter-document,
  body.printing-letter-landscape #recovery-letter-document {
    display: block !important;
    position: static !important;
    background: #ffffff !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  /* Nettoyage du texte modifiable de la lettre */
  #recovery-letter-document #rl-letter-body {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
  }

  /* Et en mode impression de rapport normal : masquer les modales de relance */
  body.printing-report-landscape #recovery-letter-modal,
  body.printing-report-landscape #client-recovery-modal {
    display: none !important;
  }

  /* ============================================================
     ISOLATION DU VOUCHER ET DU REÇU DE PAIEMENT À L'IMPRESSION
     ============================================================ */
  body.printing-voucher .app-container,
  body.printing-receipt .app-container,
  body.printing-combined .app-container,
  body.printing-audit-detail .app-container,
  body.printing-voucher .main-content,
  body.printing-receipt .main-content,
  body.printing-combined .main-content,
  body.printing-audit-detail .main-content,
  body.printing-voucher .page-container,
  body.printing-receipt .page-container,
  body.printing-combined .page-container,
  body.printing-audit-detail .page-container,
  body.printing-voucher .view-section,
  body.printing-receipt .view-section,
  body.printing-combined .view-section,
  body.printing-audit-detail .view-section,
  body.printing-voucher .top-header,
  body.printing-receipt .top-header,
  body.printing-combined .top-header,
  body.printing-audit-detail .top-header,
  body.printing-voucher .sidebar,
  body.printing-receipt .sidebar,
  body.printing-combined .sidebar,
  body.printing-audit-detail .sidebar,
  body.printing-voucher .modal-backdrop:not(#voucher-modal),
  body.printing-receipt .modal-backdrop:not(#receipt-modal),
  body.printing-combined .modal-backdrop:not(#voucher-modal),
  body.printing-audit-detail .modal-backdrop:not(#audit-modal) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    visibility: hidden !important;
    overflow: hidden !important;
  }

  body.printing-voucher #voucher-modal,
  body.printing-receipt #receipt-modal,
  body.printing-combined #voucher-modal,
  body.printing-audit-detail #audit-modal {
    display: block !important;
    position: static !important;
    background: #ffffff !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    inset: auto !important;
    box-shadow: none !important;
    border: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: auto !important;
  }

  body.printing-voucher #voucher-modal .modal-card,
  body.printing-receipt #receipt-modal .modal-card,
  body.printing-combined #voucher-modal .modal-card,
  body.printing-audit-detail #audit-modal .modal-card {
    display: block !important;
    position: static !important;
    background: #ffffff !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.printing-voucher #voucher-modal .modal-body,
  body.printing-receipt #receipt-modal .modal-body,
  body.printing-combined #voucher-modal .modal-body,
  body.printing-audit-detail #audit-modal .modal-body {
    display: block !important;
    position: static !important;
    background: #ffffff !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.printing-voucher .voucher-document {
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    max-height: 280mm !important;
    overflow: hidden !important;
  }

  body.printing-receipt .receipt-document {
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    max-height: 280mm !important;
    overflow: hidden !important;
  }

  body.printing-combined .combined-document {
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    max-height: 280mm !important;
    overflow: hidden !important;
  }

  body.printing-voucher .no-print,
  body.printing-receipt .no-print,
  body.printing-combined .no-print,
  body.printing-audit-detail .no-print {
    display: none !important;
  }

  /* ============================================================
     IMPRESSION INTÉGRALE DE LA FICHE INDIVIDUELLE D'AUDIT
     ============================================================ */
  body.printing-audit-detail #audit-printable-record {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 8.5pt !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.printing-audit-detail .print-only-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 2pt solid #0284c7 !important;
    padding-bottom: 10pt !important;
    margin-bottom: 12pt !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  body.printing-audit-detail .audit-meta-card {
    background: #f8fafc !important;
    border: 1pt solid #cbd5e1 !important;
    border-radius: 4pt !important;
    padding: 8pt 12pt !important;
    margin-bottom: 10pt !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  body.printing-audit-detail .audit-narrative-box {
    background: #f8fafc !important;
    border: 1pt solid #cbd5e1 !important;
    border-left: 3.5pt solid #0284c7 !important;
    border-radius: 4pt !important;
    padding: 8pt 12pt !important;
    margin-bottom: 10pt !important;
    color: #0f172a !important;
    font-size: 8.5pt !important;
    line-height: 1.5 !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  body.printing-audit-detail .audit-table-print {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 8pt !important;
    margin-bottom: 10pt !important;
    page-break-inside: auto !important;
  }

  body.printing-audit-detail .audit-table-print th {
    background: #f1f5f9 !important;
    border: 1pt solid #cbd5e1 !important;
    padding: 5pt 8pt !important;
    font-weight: 800 !important;
    color: #1e293b !important;
  }

  body.printing-audit-detail .audit-table-print td {
    border: 1pt solid #cbd5e1 !important;
    padding: 5pt 8pt !important;
    color: #0f172a !important;
  }

  body.printing-audit-detail #audit-detail-attributes-section {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    margin-bottom: 10pt !important;
  }

  body.printing-audit-detail #audit-detail-attributes-container > div {
    background: #f8fafc !important;
    border: 1pt solid #cbd5e1 !important;
  }

  body.printing-audit-detail #audit-modal details {
    display: block !important;
    background: #ffffff !important;
    border: 1pt solid #cbd5e1 !important;
    border-radius: 4pt !important;
    margin-top: 10pt !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  body.printing-audit-detail #audit-modal summary {
    display: block !important;
    font-weight: 800 !important;
    font-size: 8pt !important;
    color: #334155 !important;
    padding: 4pt 8pt !important;
    border-bottom: 0.5pt solid #cbd5e1 !important;
    list-style: none !important;
  }

  body.printing-audit-detail #audit-modal #audit-detail-json {
    display: block !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-family: monospace !important;
    font-size: 7pt !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
    border: none !important;
    padding: 6pt 8pt !important;
    margin: 0 !important;
  }

  body.printing-audit-detail .print-only-signature {
    display: block !important;
    margin-top: 16pt !important;
    padding-top: 10pt !important;
    border-top: 1pt solid #cbd5e1 !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Impression dédiée pour le modal d'édition de rapport */
  body.printing-report .view-section,
  body.printing-report .top-header,
  body.printing-report .sidebar {
    display: none !important;
  }

  body.printing-report #report-document-modal,
  #report-document-modal.print-active-modal {
    display: block !important;
    position: static !important;
    background: #ffffff !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.printing-report #report-document-modal .modal-card,
  #report-document-modal.print-active-modal .modal-card {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
  }

  body.printing-report #report-document-modal .modal-body,
  #report-document-modal.print-active-modal .modal-body {
    padding: 0 !important;
    overflow: visible !important;
  }

  .table-card,
  .report-document {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* Empêcher le conteneur responsive de rogner les colonnes de droite */
  .table-responsive {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .report-print-header {
    display: block !important;
    width: 100% !important;
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
    border-bottom: 1.5pt solid #0f172a !important;
  }

  /* BANDEAU KPI IMPRIMABLE (VISIBLE EN IMPRESSION A4) */
  .report-print-kpi-ribbon {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    margin-bottom: 7px !important;
    width: 100% !important;
  }

  .pkpi-card {
    background: #f8fafc !important;
    border: 0.5pt solid #cbd5e1 !important;
    border-left-width: 3.5pt !important;
    padding: 4px 6px !important;
    border-radius: 3px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  .pkpi-label {
    font-size: 6.2pt !important;
    font-weight: 800 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
  }

  .pkpi-val {
    font-size: 9.2pt !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    font-family: monospace !important;
    line-height: 1.2 !important;
    margin-top: 1px !important;
  }

  .pkpi-sub {
    font-size: 5.8pt !important;
    color: #64748b !important;
    line-height: 1 !important;
  }

  /* TABLEAU A4 : table-layout auto adapté au contenu et répétition thead / tfoot */
  .report-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    border: 0.5pt solid #000000 !important;
    font-size: 7.2pt !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  .report-table thead {
    display: table-header-group !important;
  }

  .report-table tfoot {
    display: table-footer-group !important;
  }

  .report-table tr {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .report-table th,
  .report-table td {
    box-sizing: border-box !important;
    border: 0.5pt solid #000000 !important; /* Lignes fines verticales et horizontales noires */
    padding: 2.5px 4px !important;
    color: #000000 !important; /* Police simple noire */
    vertical-align: middle !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  /* RÈGLE CRITIQUE : Suppression absolue de tous caractères gras à l'intérieur des cellules */
  .report-table tbody td,
  .report-table tbody td *,
  .report-table tbody tr td,
  .report-table tbody tr td * {
    color: #000000 !important;
    font-weight: 400 !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  /* Centrage des titres de colonnes */
  .report-table th {
    background-color: #f8fafc !important;
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 6.8pt !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1px !important;
    border: 0.5pt solid #000000 !important;
    text-align: center !important;
    vertical-align: middle !important;
  }

  .report-table tbody tr td {
    background-color: #ffffff !important;
  }

  .report-table tfoot td {
    background-color: #ffffff !important;
    font-weight: 700 !important;
    border-top: 0.5pt solid #000000 !important;
    border-bottom: 0.5pt solid #000000 !important;
    border-left: 0.5pt solid #000000 !important;
    border-right: 0.5pt solid #000000 !important;
    font-size: 7.2pt !important;
    color: #000000 !important;
  }

  /* Aucun encadrement de champs sur les états imprimables */
  .report-table .badge,
  .report-table .btn-auth-toggle,
  .report-table .recovery-badge-paid,
  .report-table .recovery-badge-partial,
  .report-table .recovery-badge-unpaid,
  .report-table .badge-paid,
  .report-table .badge-partial,
  .report-table .badge-unpaid,
  .report-table .badge-auth,
  .report-table [class*="badge"],
  .report-table [class*="recovery-badge"],
  .report-table [class*="rank-badge"] {
    display: inline !important;
    padding: 0 !important;
    font-size: inherit !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #000000 !important;
    line-height: inherit !important;
    text-transform: none !important;
    box-shadow: none !important;
  }

  /* Pied de page courant */
  .rep-page-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 6px !important;
    padding-top: 4px !important;
    border-top: 0.5pt solid #cbd5e1 !important;
    font-size: 6.2pt !important;
    color: #64748b !important;
  }

  /* Largeurs et alignements adaptés au contenu pour l'État 1 : Réservations */
  #rep-res-printable-doc .report-table th:nth-child(1),
  #rep-res-printable-doc .report-table td:nth-child(1) { font-family: monospace !important; white-space: nowrap !important; } /* N° Dossier */
  #rep-res-printable-doc .report-table th:nth-child(2),
  #rep-res-printable-doc .report-table td:nth-child(2) { white-space: nowrap !important; } /* Date */
  #rep-res-printable-doc .report-table th:nth-child(3),
  #rep-res-printable-doc .report-table td:nth-child(3) { white-space: nowrap !important; } /* Site */
  #rep-res-printable-doc .report-table th:nth-child(5),
  #rep-res-printable-doc .report-table td:nth-child(5) { text-align: center !important; white-space: nowrap !important; } /* Pax */
  #rep-res-printable-doc .report-table th:nth-child(8),
  #rep-res-printable-doc .report-table td:nth-child(8) { text-align: right !important; font-family: monospace !important; white-space: nowrap !important; } /* Prix Unit */
  #rep-res-printable-doc .report-table th:nth-child(9),
  #rep-res-printable-doc .report-table td:nth-child(9) { text-align: center !important; font-family: monospace !important; white-space: nowrap !important; } /* Remise */
  #rep-res-printable-doc .report-table th:nth-child(10),
  #rep-res-printable-doc .report-table td:nth-child(10) { text-align: right !important; font-family: monospace !important; white-space: nowrap !important; } /* Total Net */
  #rep-res-printable-doc .report-table th:nth-child(11),
  #rep-res-printable-doc .report-table td:nth-child(11) { text-align: right !important; font-family: monospace !important; white-space: nowrap !important; border-right: 0.5pt solid #000000 !important; } /* Solde Dû */

  /* Largeurs et alignements adaptés au contenu pour l'État 2 : Recouvrement (vue dossier) */
  #rep-pay-printable-doc .report-table th:nth-child(1),
  #rep-pay-printable-doc .report-table td:nth-child(1) { font-family: monospace !important; white-space: nowrap !important; } /* N° Dossier */
  #rep-pay-printable-doc .report-table th:nth-child(2),
  #rep-pay-printable-doc .report-table td:nth-child(2) { white-space: nowrap !important; } /* Date */
  #rep-pay-printable-doc .report-table th:nth-child(3),
  #rep-pay-printable-doc .report-table td:nth-child(3) { white-space: nowrap !important; } /* Site */
  #rep-pay-printable-doc .report-table th:nth-child(5),
  #rep-pay-printable-doc .report-table td:nth-child(5) { text-align: right !important; font-family: monospace !important; white-space: nowrap !important; } /* Montant */
  #rep-pay-printable-doc .report-table th:nth-child(6),
  #rep-pay-printable-doc .report-table td:nth-child(6) { text-align: right !important; font-family: monospace !important; white-space: nowrap !important; } /* Règlement */
  #rep-pay-printable-doc .report-table th:nth-child(7),
  #rep-pay-printable-doc .report-table td:nth-child(7) { text-align: right !important; font-family: monospace !important; white-space: nowrap !important; } /* Solde */
  #rep-pay-printable-doc .report-table th:nth-child(8),
  #rep-pay-printable-doc .report-table td:nth-child(8) { text-align: center !important; white-space: nowrap !important; border-right: 0.5pt solid #000000 !important; } /* Statut */

  /* Largeurs et alignements adaptés au contenu pour l'État 2 : Recouvrement (vue client) */
  #rep-pay-printable-doc .report-table.is-client-view th:nth-child(2),
  #rep-pay-printable-doc .report-table.is-client-view td:nth-child(2) { text-align: center !important; white-space: nowrap !important; } /* Dossiers */
  #rep-pay-printable-doc .report-table.is-client-view th:nth-child(3),
  #rep-pay-printable-doc .report-table.is-client-view td:nth-child(3) { text-align: center !important; white-space: nowrap !important; } /* Dont Impayés */
  #rep-pay-printable-doc .report-table.is-client-view th:nth-child(4),
  #rep-pay-printable-doc .report-table.is-client-view td:nth-child(4) { text-align: right !important; font-family: monospace !important; white-space: nowrap !important; } /* Total Facturé */
  #rep-pay-printable-doc .report-table.is-client-view th:nth-child(5),
  #rep-pay-printable-doc .report-table.is-client-view td:nth-child(5) { text-align: right !important; font-family: monospace !important; white-space: nowrap !important; } /* Total Encaissé */
  #rep-pay-printable-doc .report-table.is-client-view th:nth-child(6),
  #rep-pay-printable-doc .report-table.is-client-view td:nth-child(6) { text-align: right !important; font-family: monospace !important; white-space: nowrap !important; } /* Solde Global Dû */
  #rep-pay-printable-doc .report-table.is-client-view th:nth-child(7),
  #rep-pay-printable-doc .report-table.is-client-view td:nth-child(7) { text-align: center !important; white-space: nowrap !important; border-right: 0.5pt solid #000000 !important; } /* Statut */

  /* Largeurs et alignements adaptés au contenu pour l'État 3 : Affectations */
  #rep-asg-printable-doc .report-table th:nth-child(1),
  #rep-asg-printable-doc .report-table td:nth-child(1) { white-space: nowrap !important; } /* Date */
  #rep-asg-printable-doc .report-table th:nth-child(2),
  #rep-asg-printable-doc .report-table td:nth-child(2) { text-align: center !important; font-family: monospace !important; white-space: nowrap !important; } /* Horaire */
  #rep-asg-printable-doc .report-table th:nth-child(5),
  #rep-asg-printable-doc .report-table td:nth-child(5) { text-align: center !important; white-space: nowrap !important; } /* Pax */
  #rep-asg-printable-doc .report-table th:nth-child(7),
  #rep-asg-printable-doc .report-table td:nth-child(7) { white-space: nowrap !important; } /* Site */
  #rep-asg-printable-doc .report-table th:nth-child(8),
  #rep-asg-printable-doc .report-table td:nth-child(8) { text-align: center !important; white-space: nowrap !important; border-right: 0.5pt solid #000000 !important; } /* Statut */

  /* RÈGLE UNIVERSELLE : Intégrité absolue de la dernière colonne sur TOUS les états imprimables */
  .report-table th:last-child,
  .report-table td:last-child {
    border-right: 0.5pt solid #000000 !important;
  }
  .report-table th:has(+ .no-print),
  .report-table td:has(+ .no-print) {
    border-right: 0.5pt solid #000000 !important;
  }

  /* ============================================================
     IMPRESSION INDÉPENDANTE DES STATISTIQUES (SAUTS DE PAGE ET ISOLATION)
     ============================================================ */
  .stats-print-section {
    break-before: page !important;
    page-break-before: always !important;
    page-break-inside: auto !important;
    width: 100% !important;
    display: block !important;
    margin-bottom: 0 !important;
    padding-top: 2mm !important;
  }
  #rep-stats-section-site,
  .stats-print-section.is-first-print-section,
  #rep-stats-printable-doc .stats-print-section:first-of-type {
    break-before: avoid !important;
    page-break-before: avoid !important;
    padding-top: 0 !important;
  }

  /* Isolation lors de l'impression d'une seule section statistique */
  body.printing-stats-site #rep-stats-section-client,
  body.printing-stats-site #rep-stats-section-cross {
    display: none !important;
  }
  body.printing-stats-site #rep-stats-print-kpi-ribbon {
    display: grid !important;
  }

  body.printing-stats-client #rep-stats-section-site,
  body.printing-stats-client #rep-stats-section-cross,
  body.printing-stats-client #rep-stats-print-kpi-ribbon {
    display: none !important;
  }

  body.printing-stats-cross #rep-stats-section-site,
  body.printing-stats-cross #rep-stats-section-client,
  body.printing-stats-cross #rep-stats-print-kpi-ribbon {
    display: none !important;
  }

  body.printing-stats-site #rep-stats-section-site,
  body.printing-stats-client #rep-stats-section-client,
  body.printing-stats-cross #rep-stats-section-cross {
    display: block !important;
    break-before: auto !important;
    page-break-before: auto !important;
  }

  /* Répétition de l'en-tête pour tous les états dépassant une page */
  .report-table thead {
    display: table-header-group !important;
  }
  .report-table thead tr.rep-running-header-row th {
    border: none !important;
    border-bottom: 1.5pt solid #0f172a !important;
    padding: 3px 0 5px 0 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-weight: normal !important;
    text-align: left !important;
  }

  /* Éviter tout rognage sur le bord droit */
  .table-responsive,
  .report-document,
  .table-card {
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Impression Lettre de Recouvrement (Ajustée à 100% de la largeur, colonnes auto, en-têtes centrés) */
  body.printing-letter-portrait #recovery-letter-document,
  body.printing-letter-landscape #recovery-letter-document,
  #recovery-letter-document {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  #recovery-letter-document .recovery-master-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #recovery-letter-document .recovery-master-table thead {
    display: table-header-group !important;
  }
  #recovery-letter-document .recovery-master-table tbody {
    display: table-row-group !important;
  }
  #recovery-letter-document .recovery-master-table th,
  #recovery-letter-document .recovery-master-table td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
  }
  #recovery-letter-document .doc-table {
    width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  }
  #recovery-letter-document .doc-table thead {
    display: table-header-group !important;
  }
  #recovery-letter-document .doc-table th {
    text-align: center !important;
    vertical-align: middle !important;
    padding: 3.5px 5px !important;
    font-size: 7.5pt !important;
    font-weight: 700 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 0.5pt solid #cbd5e1 !important;
  }
  #recovery-letter-document .doc-table td {
    padding: 3.5px 5px !important;
    font-size: 7.5pt !important;
    font-family: inherit !important;
    color: #1e293b !important;
    border: 0.5pt solid #e2e8f0 !important;
    vertical-align: middle !important;
  }
  #recovery-letter-document .doc-table th:nth-child(1),
  #recovery-letter-document .doc-table td:nth-child(1),
  #recovery-letter-document .doc-table th:nth-child(2),
  #recovery-letter-document .doc-table td:nth-child(2) {
    white-space: nowrap !important;
    text-align: center !important;
    width: 1% !important;
  }
  #recovery-letter-document .doc-table th:nth-child(3),
  #recovery-letter-document .doc-table td:nth-child(3) {
    text-align: left !important;
    width: auto !important;
  }
  #recovery-letter-document .doc-table th:nth-child(4),
  #recovery-letter-document .doc-table td:nth-child(4),
  #recovery-letter-document .doc-table th:nth-child(5),
  #recovery-letter-document .doc-table td:nth-child(5),
  #recovery-letter-document .doc-table th:nth-child(6),
  #recovery-letter-document .doc-table td:nth-child(6) {
    white-space: nowrap !important;
    text-align: right !important;
    width: 1% !important;
  }
  .recovery-letter-footer-block {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    margin-top: 6px !important;
  }
}

/* Écran : Transition du document de recouvrement en mode paysage */
#recovery-letter-document.letter-landscape {
  max-width: 1060px !important;
  transition: max-width 0.25s ease;
}

/* ----------------------------------------------------
   STYLES DU RAPPORT STATISTIQUE DE CHIFFRE D'AFFAIRES (OPTIMISÉ)
   ---------------------------------------------------- */
.stats-filter-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.stats-global-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.stats-global-toggle:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.stats-global-toggle.active {
  background: #ecfdf5;
  border-color: #10b981;
  color: #065f46;
}
.stats-global-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #059669;
  cursor: pointer;
}

.btn-stats-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 7px;
  transition: all 0.15s ease;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-stats-primary {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 1px 2px rgba(2, 132, 199, 0.2);
}
.btn-stats-primary:hover {
  background: #0369a1;
  border-color: #0369a1;
}
.btn-stats-secondary {
  background: #ffffff;
  color: #334155;
  border-color: #cbd5e1;
}
.btn-stats-secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}
.btn-stats-ghost {
  background: #f8fafc;
  color: #64748b;
  border-color: #e2e8f0;
}
.btn-stats-ghost:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}

/* Ruban KPI Exécutif */
.stats-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.stats-kpi-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stats-kpi-card:hover {
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08);
}
.stats-kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.stats-kpi-rev::before { background: #10b981; }
.stats-kpi-pax::before { background: #0284c7; }
.stats-kpi-cnt::before { background: #64748b; }
.stats-kpi-avg::before { background: #f59e0b; }
.stats-kpi-paid::before { background: #16a34a; }
.stats-kpi-bal::before { background: #ef4444; }

.stats-kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.stats-kpi-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #64748b;
}
.stats-kpi-icon {
  font-size: 13px;
  opacity: 0.85;
}
.stats-kpi-val {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 3px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.2px;
}
.stats-kpi-sub {
  font-size: 10.5px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-kpi-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}

/* Progress bar inline pour la part de CA */
.ca-progress-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.ca-pct-value {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
  font-size: 11px;
  font-weight: 700;
  min-width: 44px;
  text-align: right;
  color: #1e293b;
}
.ca-progress-track {
  flex: 1;
  height: 6px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  margin-top: 0;
}
.ca-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #059669);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.ca-progress-bar-client {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #0284c7);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.ca-pct-badge {
  display: inline-block;
  font-family: monospace;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #0f172a;
}

/* Badges de classement & Pax */
.rank-badge-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
}
.rank-badge-1 {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
  box-shadow: 0 1px 2px rgba(180, 83, 9, 0.15);
}
.rank-badge-2 {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}
.rank-badge-3 {
  background: #ffedd5;
  color: #c2410c;
  border: 1px solid #fed7aa;
}
.rank-badge-pill {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 700;
}

.badge-pax-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #dbeafe;
  padding: 1px 7px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 11px;
}

.badge-balance-alert {
  color: #e11d48;
  font-weight: 800;
  background: #fff1f2;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #ffe4e6;
  display: inline-block;
}
.badge-balance-zero {
  color: #16a34a;
  font-weight: 700;
  background: #f0fdf4;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}

/* Ligne des totaux élégante */
.report-table tfoot tr {
  background: #f8fafc !important;
}
.report-table tfoot td {
  border-top: 2px solid #0f172a !important;
  border-bottom: 2px solid #0f172a !important;
  color: #0f172a !important;
  padding: 8px 10px !important;
}

/* ----------------------------------------------------
   BARRE GAUCHE LATÉRALE POUR DÉFILEMENT & NAVIGATION (STATS)
   ---------------------------------------------------- */
.stats-layout-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  width: 100%;
}

.stats-scroll-sidebar {
  position: sticky;
  top: 8px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 8px 5px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  flex-shrink: 0;
  user-select: none;
  width: 48px;
  transition: all 0.2s ease;
}

.stats-scroll-sidebar:hover {
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
  border-color: #94a3b8;
}

.stats-scroll-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: #f8fafc;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 13px;
  padding: 0;
}

.stats-scroll-btn:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  transform: translateY(-1px);
}

.stats-scroll-btn:active {
  transform: translateY(1px);
}

.stats-scroll-btn.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 2px 4px rgba(2, 132, 199, 0.3);
}

.stats-scroll-step-up,
.stats-scroll-step-down {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #0284c7;
  font-weight: 800;
}

.stats-scroll-step-up:hover,
.stats-scroll-step-down:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}

.stats-scroll-nav-top,
.stats-scroll-nav-bottom {
  background: #f1f5f9;
}

.stats-nav-arrow {
  font-size: 13px;
  line-height: 1;
}

.stats-nav-icon {
  font-size: 14px;
  line-height: 1;
}

.stats-nav-divider {
  width: 22px;
  height: 1px;
  background: #e2e8f0;
  margin: 3px 0;
}

/* Tooltip au survol */
.stats-nav-tooltip {
  position: absolute;
  left: calc(100% + 9px);
  top: 50%;
  transform: translateY(-50%);
  background: #0f172a;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  z-index: 100;
}

.stats-nav-tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: transparent #0f172a transparent transparent;
}

.stats-scroll-btn:hover .stats-nav-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(2px);
}

.stats-content-area {
  flex: 1;
  min-width: 0;
  padding-bottom: 40px;
}

/* Assurer que les tableaux de rapport ne tronquent jamais leurs pieds de page (tfoot) */
.report-document .table-responsive {
  overflow-y: visible !important;
  max-height: none !important;
  margin-bottom: 12px;
}

#rep-stats-printable-doc {
  margin-bottom: 30px;
}

/* Paramètres Société : Défilement fluide garanti, aucune coupure et zone tarifaire agrandie */
#view-company-settings.active {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 8px !important;
  padding-bottom: 80px !important;
  scroll-behavior: smooth !important;
}

#view-company-settings #company-settings-form {
  flex: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: min-content !important;
}

#view-company-settings .table-card,
#comp-quotas-card,
#comp-tariffs-card {
  flex: none !important;
  min-height: min-content !important;
  overflow: visible !important;
  padding: 8px 12px !important;
  margin-bottom: 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

#view-company-settings label,
#comp-quotas-card label,
#comp-tariffs-card label,
.company-settings-card label {
  text-transform: none !important;
  letter-spacing: normal !important;
  margin-bottom: 2px !important;
  font-size: 10px !important;
  color: #334155 !important;
}

#view-company-settings .form-group {
  gap: 2px !important;
  margin-bottom: 0 !important;
}

#view-company-settings .form-control {
  height: 26px !important;
  padding: 2px 6px !important;
  font-size: 11.5px !important;
}

#comp-tariffs-card {
  min-height: 175px !important;
}

/* ==========================================================================
   12-MONTH FORECAST CALENDAR & AVAILABILITY STYLES
   ========================================================================== */
#view-calendar.active {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: 100% !important;
  max-height: 100% !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  padding: 8px 10px 140px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.cal-top-header {
  min-height: 52px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 4px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  flex-shrink: 0;
}

.cal-legend-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 14px;
  margin-bottom: 8px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  flex-shrink: 0;
}

.cal-toolbar-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
}

.calendar-12m-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 14px;
  align-items: start;
}

.cal-month-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cal-month-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.cal-month-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f1f5f9;
}

.cal-month-title {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  text-transform: capitalize;
}

.cal-month-pax-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  background: #f1f5f9;
  color: #475569;
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  text-align: center;
  font-size: 9.5px;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 4px;
}

.cal-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-day-cell {
  position: relative;
  height: 36px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.cal-day-cell .cal-day-num {
  font-size: 11px;
  line-height: 1;
}

.cal-day-cell .cal-day-pax-sub {
  font-size: 8.5px;
  line-height: 1;
  margin-top: 2px;
  opacity: 0.9;
  font-weight: 700;
}

/* Past days (Gris) */
.cal-day-past {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  border: 1px solid #cbd5e1 !important;
  cursor: pointer !important;
}
.cal-day-past:hover {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
}

/* Available days (Vert) */
.cal-day-available {
  background: #ecfdf5 !important;
  color: #065f46 !important;
  border: 1.5px solid #34d399 !important;
  font-weight: 700 !important;
}
.cal-day-available:hover {
  background: #d1fae5 !important;
  border-color: #10b981 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

/* Full days (Rouge) */
.cal-day-full {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border: 2px solid #ef4444 !important;
  font-weight: 800 !important;
}
.cal-day-full:hover {
  background: #fee2e2 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
}

/* Today indicator ring */
.cal-day-today {
  outline: 2px solid #0284c7;
  outline-offset: 1px;
}

.cal-day-empty {
  background: transparent !important;
  border: none !important;
  cursor: default !important;
}

/* Red indicator on reservation date picker */
.input-capacity-full {
  border: 2px solid #ef4444 !important;
  background-color: #fef2f2 !important;
  color: #b91c1c !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

.input-capacity-available {
  border: 2px solid #10b981 !important;
  background-color: #f0fdf4 !important;
  color: #15803d !important;
}

/* Official Report Print Layout */
.rep-doc-container {
  background: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: #0f172a;
  line-height: 1.35;
}

.rep-doc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid #0f172a;
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.rep-doc-logo-title {
  display: flex;
  gap: 12px;
  align-items: center;
}

.rep-doc-logo {
  max-height: 52px;
  width: auto;
}

.rep-kpi-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.rep-kpi-item {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px 10px;
  text-align: center;
}

.rep-kpi-item-val {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}

.rep-kpi-item-lbl {
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
}

.rep-table-styled {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  margin-bottom: 14px;
}

.rep-table-styled th {
  background: #f8fafc;
  color: #000000;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 9px;
  padding: 5px 6px;
  border: 1px solid #cbd5e1;
  text-align: left;
}

.rep-table-styled td {
  padding: 4px 6px;
  border: 1px solid #cbd5e1;
  color: #000000;
}

.rep-table-styled th:last-child,
.rep-table-styled td:last-child {
  border-right: 1px solid #000000;
}

/* ==========================================================================
   Dossiers non autorisés / Dépassement quota par réservation (Mise en rouge)
   ========================================================================== */
.res-row-unauthorized {
  background-color: #fef2f2 !important;
  border-left: 5px solid #ef4444 !important;
  transition: background-color 0.15s ease-in-out;
}

.res-row-unauthorized:hover {
  background-color: #fee2e2 !important;
}

.res-row-unauthorized td {
  color: #7f1d1d !important;
}

.res-row-unauthorized td strong {
  color: #991b1b !important;
}

.badge-overflow-pending {
  background: #ef4444;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 1px 2px rgba(239, 68, 68, 0.35);
  animation: pulse-danger 2s infinite ease-in-out;
}

@keyframes pulse-danger {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

.badge-overflow-authorized {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* ==========================================================================
   Traçage fin entre les réservations (Séparation visuelle nette)
   ========================================================================== */
.res-row-single td {
  border-bottom: 1.5px solid #cbd5e1 !important;
}

.res-row-mixed-1 td:not([rowspan="2"]) {
  border-bottom: 1px dashed #cbd5e1 !important;
}

.res-row-mixed-2 td {
  border-bottom: 1.5px solid #cbd5e1 !important;
}

.res-row-mixed-1 td[rowspan="2"] {
  border-bottom: 1.5px solid #cbd5e1 !important;
}

#workspace-modal {
  z-index: 10005;
}

/* ==========================================================================
   DOCUMENTS IMPRIMABLES : VOUCHER DE RÉSERVATION & REÇU DE PAIEMENT
   (Design Simple, Professionnel, Optimisé A4 Portrait)
   ========================================================================== */
.voucher-printable-area,
.receipt-printable-area {
  display: flex;
  justify-content: center;
  width: 100%;
}

.voucher-document,
.receipt-document {
  background: #ffffff;
  width: 100%;
  max-width: 800px;
  padding: 28px 32px;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  color: #0f172a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
}

.doc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 2px solid #0284c7;
  margin-bottom: 14px;
  gap: 16px;
}

.receipt-document .doc-header {
  border-bottom: 2px solid #059669;
}

.doc-company-info {
  display: flex;
  gap: 14px;
  align-items: center;
}

.doc-logo {
  max-height: 58px;
  width: auto;
  object-fit: contain;
}

.doc-company-name {
  font-size: 17px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.2px;
  text-transform: uppercase;
}

.doc-company-sub {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
  line-height: 1.35;
}

.doc-badge-card {
  text-align: right;
  min-width: 220px;
}

.doc-title-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 4px;
}

.voucher-document .doc-title-badge {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}

.receipt-document .doc-title-badge {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.doc-code {
  font-family: monospace;
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
  margin-top: 4px;
}

.doc-date-meta {
  font-size: 10.5px;
  color: #64748b;
  margin-top: 2px;
}

.doc-card {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: #f8fafc;
}

.doc-card-title {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #475569;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.doc-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}

.doc-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px 14px;
}

.doc-grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px 12px;
}

.doc-field-label {
  font-size: 10px;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.doc-field-value {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
}

.doc-pax-hero {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1.5px solid #7dd3fc;
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.doc-pax-count {
  font-size: 20px;
  font-weight: 900;
  color: #0369a1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.doc-pax-detail {
  font-size: 11px;
  color: #0369a1;
  font-weight: 600;
  text-align: right;
}

.doc-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
  font-size: 11.5px;
}

.doc-table th {
  background: #f1f5f9;
  color: #475569;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 7px 10px;
  border: 1px solid #cbd5e1;
  text-align: left;
}

.doc-table td {
  padding: 7px 10px;
  border: 1px solid #e2e8f0;
  font-size: 11px;
  color: #1e293b;
}

.doc-total-box {
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.doc-total-box.success {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  color: #15803d;
}

.doc-total-box.warning {
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  color: #b45309;
}

.doc-total-box.info {
  background: #f0f9ff;
  border: 1.5px solid #7dd3fc;
  color: #0369a1;
}

.doc-notice-box {
  background: #fafafa;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 9.5px;
  color: #475569;
  line-height: 1.45;
  margin-bottom: 12px;
}

.doc-notice-box ul {
  margin: 4px 0 0 16px;
  padding: 0;
}

.doc-notice-box li {
  margin-bottom: 2px;
}

.doc-signatures-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 10px;
}

.doc-signature-box {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  height: 76px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #ffffff;
}

.doc-signature-title {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
}

.doc-footer-legal {
  font-size: 8.5px;
  color: #94a3b8;
  text-align: center;
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px solid #e2e8f0;
}

/* Optimisation ultra-compacte dédiée au Voucher (1 page A4 strict) */
.voucher-document {
  padding: 14px 18px !important;
  max-width: 820px !important;
}

.voucher-document .doc-header {
  padding-bottom: 8px !important;
  margin-bottom: 8px !important;
  gap: 12px !important;
}

.voucher-document .doc-logo {
  max-height: 40px !important;
}

.voucher-document .doc-company-name {
  font-size: 15px !important;
}

.voucher-document .doc-company-sub {
  font-size: 9.5px !important;
  line-height: 1.25 !important;
}

.voucher-document .doc-title-badge {
  font-size: 9.5px !important;
  padding: 2px 7px !important;
}

.voucher-document .doc-code {
  font-size: 15px !important;
  margin-top: 2px !important;
}

.voucher-document .doc-date-meta {
  font-size: 9.5px !important;
  margin-top: 1px !important;
}

.voucher-document .doc-pax-hero {
  padding: 5px 10px !important;
  margin-bottom: 6px !important;
}

.voucher-document .doc-pax-count {
  font-size: 15px !important;
  gap: 6px !important;
}

.voucher-document .doc-pax-detail {
  font-size: 10px !important;
}

.voucher-document .doc-card {
  padding: 6px 10px !important;
  margin-bottom: 6px !important;
  border-radius: 5px !important;
}

.voucher-document .doc-card-title {
  font-size: 9.5px !important;
  margin-bottom: 4px !important;
  gap: 4px !important;
}

.voucher-document .doc-grid-2 {
  gap: 4px 12px !important;
}

.voucher-document .doc-field-label {
  font-size: 8.5px !important;
  margin-bottom: 1px !important;
}

.voucher-document .doc-field-value {
  font-size: 11px !important;
}

.voucher-document .doc-table {
  font-size: 10px !important;
  margin-top: 2px !important;
}

.voucher-document .doc-table th {
  padding: 4px 8px !important;
  font-size: 9.5px !important;
}

.voucher-document .doc-table td {
  padding: 3px 8px !important;
  font-size: 10px !important;
}

.voucher-document .doc-total-box {
  padding: 6px 10px !important;
  margin-bottom: 6px !important;
}

.voucher-document .doc-notice-box {
  padding: 4px 8px !important;
  font-size: 8.5px !important;
  line-height: 1.25 !important;
  margin-bottom: 6px !important;
}

.voucher-document .doc-signatures-grid {
  gap: 12px !important;
  margin-top: 6px !important;
}

.voucher-document .doc-signature-box {
  height: 44px !important;
  padding: 4px 8px !important;
}

.voucher-document .doc-footer-legal {
  font-size: 7.5px !important;
  margin-top: 4px !important;
  padding-top: 3px !important;
}

/* Optimisation ultra-compacte dédiée au Reçu de Paiement (1 page A4 strict) */
.receipt-document {
  padding: 16px 20px !important;
  max-width: 820px !important;
}

.receipt-document .doc-header {
  padding-bottom: 8px !important;
  margin-bottom: 8px !important;
  gap: 12px !important;
}

.receipt-document .doc-logo {
  max-height: 40px !important;
}

.receipt-document .doc-company-name {
  font-size: 15px !important;
}

.receipt-document .doc-company-sub {
  font-size: 9.5px !important;
  line-height: 1.25 !important;
}

.receipt-document .doc-title-badge {
  font-size: 9.5px !important;
  padding: 2px 8px !important;
}

.receipt-document .doc-code {
  font-size: 15px !important;
  margin-top: 2px !important;
}

.receipt-document .doc-date-meta {
  font-size: 9.5px !important;
  margin-top: 1px !important;
}

.receipt-document .doc-total-box {
  padding: 8px 12px !important;
  margin-bottom: 8px !important;
}

.receipt-document .doc-card {
  padding: 6px 10px !important;
  margin-bottom: 6px !important;
  border-radius: 5px !important;
}

.receipt-document .doc-card-title {
  font-size: 9.5px !important;
  margin-bottom: 4px !important;
  gap: 4px !important;
}

.receipt-document .doc-grid-3 {
  gap: 4px 10px !important;
}

.receipt-document .doc-field-label {
  font-size: 8.5px !important;
  margin-bottom: 1px !important;
}

.receipt-document .doc-field-value {
  font-size: 11px !important;
}

.receipt-document .doc-table {
  font-size: 10px !important;
  margin-top: 2px !important;
}

.receipt-document .doc-table th {
  padding: 4px 8px !important;
  font-size: 9.5px !important;
}

.receipt-document .doc-table td {
  padding: 4px 8px !important;
  font-size: 10px !important;
}

.receipt-document .doc-notice-box {
  padding: 5px 8px !important;
  font-size: 8.5px !important;
  line-height: 1.25 !important;
  margin-bottom: 6px !important;
}

.receipt-document .doc-signatures-grid {
  gap: 12px !important;
  margin-top: 6px !important;
}

.receipt-document .doc-signature-box {
  height: 44px !important;
  padding: 4px 8px !important;
}

.receipt-document .doc-footer-legal {
  font-size: 7.5px !important;
  margin-top: 4px !important;
  padding-top: 3px !important;
}

/* Optimisation pour document combiné Voucher + Reçu (1 page A4 strict) */
.combined-document {
  background: #ffffff;
  width: 100%;
  max-width: 820px;
  padding: 10px 14px !important;
  box-sizing: border-box;
}

.combined-document .voucher-section {
  border-bottom: 1.5px dashed #94a3b8;
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.combined-document .receipt-section {
  padding-top: 2px;
}

/* ==========================================================================
   TABLE COLUMN SORTING STYLES (Volet Réservations)
   ========================================================================== */
th.sortable-th {
  cursor: pointer !important;
  user-select: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  position: relative !important;
}

th.sortable-th:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

.sort-indicator {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.5;
  font-weight: 800;
}

th.sortable-th.sort-asc .sort-indicator {
  opacity: 1;
  color: #0284c7;
}
th.sortable-th.sort-asc .sort-indicator::after {
  content: " ▲";
}

th.sortable-th.sort-desc .sort-indicator {
  opacity: 1;
  color: #0284c7;
}
th.sortable-th.sort-desc .sort-indicator::after {
  content: " ▼";
}

/* ==========================================================================
   CALENDAR HEATMAP OCCUPANCY CLASSES (12 MOIS)
   ========================================================================== */
.cal-day-cell.cal-pax-0 {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}
.cal-day-cell.cal-pax-0:hover {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

.cal-day-cell.cal-pax-low {
  background-color: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #065f46 !important;
  font-weight: 600 !important;
}
.cal-day-cell.cal-pax-low:hover {
  background-color: #d1fae5 !important;
  border-color: #34d399 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(16, 185, 129, 0.2);
}

.cal-day-cell.cal-pax-mid {
  background-color: #fefce8 !important;
  border: 1.5px solid #fde047 !important;
  color: #854d0e !important;
  font-weight: 700 !important;
}
.cal-day-cell.cal-pax-mid:hover {
  background-color: #fef9c3 !important;
  border-color: #eab308 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(234, 179, 8, 0.25);
}

.cal-day-cell.cal-pax-high {
  background-color: #fff7ed !important;
  border: 1.5px solid #fdba74 !important;
  color: #9a3412 !important;
  font-weight: 700 !important;
}
.cal-day-cell.cal-pax-high:hover {
  background-color: #ffedd5 !important;
  border-color: #f97316 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(249, 115, 22, 0.3);
}

.cal-day-cell.cal-pax-critical {
  background-color: #fef2f2 !important;
  border: 1.5px solid #fca5a5 !important;
  color: #991b1b !important;
  font-weight: 800 !important;
}
.cal-day-cell.cal-pax-critical:hover {
  background-color: #fee2e2 !important;
  border-color: #f87171 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
}

.cal-day-cell.cal-pax-full {
  background-color: #fee2e2 !important;
  border: 2px solid #ef4444 !important;
  color: #b91c1c !important;
  font-weight: 800 !important;
}
.cal-day-cell.cal-pax-full:hover {
  background-color: #fecaca !important;
  border-color: #dc2626 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
}