/* =========================================================
* 1) Variables globales, reset & typographie
* ======================================================= */
:root {
  --blue: #0b4e88;
  --blue-d: #093d6a;
  --blue-soft: #e3efff;
  --accent: #16a34a;
  --bg: #f9fbfe;
  --row: #eef4ff;
  --line: #d0d7e2;
  --danger: #dc3545;
  --warning: #ffc107;
  --shadow-soft: 0 8px 18px rgba(15, 35, 52, 0.08);
  --radius: 10px;
}

* {
  box-sizing: border-box;
}

body {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  background: radial-gradient(circle at top left, #ffffff, var(--bg));
  margin: 0;
  color: #1f2933;
}

body.no-scroll {
  overflow: hidden !important;
}

main {
  margin: 0 20px 20px;
}

h1 {
  color: var(--blue);
  margin: 0 0 1rem;
  font-size: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

h1 img.logo {
  height: 42px;
}

h1 i {
  font-size: 24px;
}

h2 {
  color: var(--blue);
  margin: 1.2rem 0 0.6rem;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Fil d'Ariane : zone + année/mois, au-dessus du titre de la commande */
.detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.detail-breadcrumb:empty {
  display: none;
}

.detail-breadcrumb i {
  font-size: 10px;
  color: #94a3b8;
}

.detail-breadcrumb .crumb-zone {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--blue);
}

.detail-breadcrumb .crumb-zone i.crumb-zone-icon {
  font-size: 12px;
  color: var(--blue);
}

p.small {
  margin: 0.3rem 0;
  color: #6b7280;
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

p.small i {
  margin-top: 2px;
  color: var(--blue);
}

#loginErr {
  color: #dc2626;
  margin-top: 8px;
  font-size: 11px;
}

/* =========================================================
* 2) TOP BAR
* ======================================================= */
.topbar {
  position: sticky;
  top: 0;
  /* Sous les modales (998-1000+) mais au-dessus du contenu (th sticky ≤ 5) */
  z-index: 900;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  margin-bottom: 15px;
  background: #111827;
  color: #e5e7eb;
  font-size: 12px;
}

/* Partie gauche : user */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

#currentUserRole {
  opacity: 0.7;
  font-size: 11px;
}

/* Partie droite : boutons */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.topbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #e5e7eb;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.topbar-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.topbar-btn.danger {
  margin-right: 0;
}
.topbar-btn.danger:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #fecaca;
}

/* =========================================================
* 3) PRESENCE BAR
* ======================================================= */
.presence-bar {
  margin: 18px 0 14px;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 8px 18px rgba(15, 35, 52, 0.04);
  background: #ffffff;
  border-radius: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.presence-title {
  padding: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
}

.presence-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  overflow: hidden;
  flex: 1; /* Prend toute la place restante */
  min-width: 0; /* Autorise l'ellipsis/overflow dans un flex */
}

.presence-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f9fafb;
  border: 1px solid #cbd5e1;
  font-size: 12px;
  color: #111827;
}

.presence-chip small {
  color: #64748b;
  font-weight: 600;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

.presence-chip.presence-more {
  cursor: pointer;
  user-select: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: #0b4e88;
  background: rgba(11, 78, 136, 0.08);
  border: 1px dashed rgba(11, 78, 136, 0.35);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.1s ease;
}
.presence-chip.presence-more:hover {
  background: rgba(11, 78, 136, 0.15);
  border-color: rgba(11, 78, 136, 0.6);
}
.presence-chip.presence-more:active {
  transform: scale(0.96);
}

.presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
}

/* =========================================================
* 3bis) PRESENCE CHIP : progress "scan" (remplissage %)
* ======================================================= */
.presence-chip.presence-progress {
  position: relative;
  overflow: hidden; /* Le "scan" reste dans le contenant */
}

/* Remplissage */
.presence-chip.presence-progress {
  position: relative;
  overflow: hidden;
}

.presence-scan {
  position: absolute;
  inset: 0;
  width: var(--presence-fill, 0%);
  background: rgba(34, 197, 94, 0.15);
}

.presence-scan::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  animation: scanMove 2s linear infinite;
}

@keyframes scanMove {
  from {
    left: -40px;
  }
  to {
    left: 100%;
  }
}

/* Remet le contenu AU-DESSUS du scan */
.presence-chip.presence-progress > .presence-dot,
.presence-chip.presence-progress > .user-name,
.presence-chip.presence-progress > small {
  position: relative;
  z-index: 1;
}

/* =========================================================
* 4) Tabs zones (EUROPE / GRAND EXPORT)
*    & Tabs Préparation (Colisage / Palettisation)
* ======================================================= */
#zoneTabs,
#prepTabs {
  display: flex;
  gap: 8px;
  margin-left: 16px;
}

/* Ligne boutons + zone facture (invoice) */
.prep-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 16px 10px;
}

.prep-actions-left {
  display: flex;
  flex-wrap: wrap;
}

/* Invoice ref à droite */
.prep-invoice-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  justify-content: flex-end;
  color: var(--blue);
}

.prep-invoice-bar label {
  white-space: nowrap;
}

.prep-invoice-bar input {
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  min-width: 230px;
}

.zone-tab,
.prep-tab {
  background: #f4f4f4;
  color: #334155;
  border: 1px solid #cbd5e1 !important;
  border-bottom: none;
  padding: 6px 10px;
  margin: 0 0 8px 0;
  font-weight: 700;
  cursor: pointer;
  border-radius: 8px;
  position: relative;
  top: 1px;
  box-shadow: 0 1px 5px rgba(55, 65, 81, 0.03);
  transition: all 0.25s ease;
}
.zone-tab:hover,
.prep-tab:hover {
  background: #f1f5f9;
}

.zone-tab i,
.prep-tab i {
  font-size: 14px;
  margin-right: 6px;
}

.zone-tab.active,
.prep-tab.active {
  background: #fff;
  color: var(--blue-d);
  border-color: #cbd5e1;
  border-bottom: none !important;
  padding: 8px 10px 12px;
  box-shadow: 0 -2px 8px rgba(15, 35, 52, 0.05);
  border-radius: 10px 10px 0 0;
  margin: 0;
  transform: translateY(0) scale(1.02);
}
.zone-tab.active:hover,
.prep-tab.active:hover {
  box-shadow: none !important;
}

.prep-tab-content.hidden {
  display: none;
}

.zone-badge {
  background: #dc2626;
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  display: inline-block;
  align-content: center;
  min-width: 16px;
  height: 16px;
}

.locked {
  cursor: not-allowed !important;
  opacity: 0.7;
}

/* =========================================================
* 5) Tableau de bord : filtres & actions
* ======================================================= */
#content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  margin-bottom: 80px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 10px;
  border: 1px solid #cbd5e1;
  max-width: 100%;
  overflow-x: auto;
}

/* Filtres toujours visibles */
.dashboard-filters-wrapper {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Zone scrollable du tableau */
.dashboard-table-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: 100%;
}

.dashboard-actions {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard-actions-left {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #f9fafb;
}

.dashboard-empty {
  font-style: italic;
  color: rgb(107, 114, 128);
}

.filters-left {
  flex: 1;
  min-width: 260px;
}

.filter-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 4px;
}

.filter-input-with-icon {
  position: relative;
}
.filter-input-with-icon i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #64748b;
}

.filter-search-input {
  width: 100% !important;
  padding: 6.5px 25px 6.5px 30px !important;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font-size: 13px;
  background: #ffffff;
  outline: none;
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    background-color 0.12s ease;
}
.filter-search-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
  background: #ffffff;
}

.search-clear-btn {
  position: absolute;
  right: 20px;
  top: 11px;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  padding: 2px;
  font-size: 13px;
}
.search-clear-btn:hover {
  box-shadow: none !important;
  background: none !important;
}

#dashboardSearchClear {
  box-shadow: none;
  padding: 0;
  right: 25px;
}

.filters-right {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-field {
  display: flex;
  flex-direction: column;
}

#filterYear,
#filterMonth,
#filterStatus,
#filterPicker {
  width: 130px;
}

/* Wrapper mois + alerte */
.filter-month-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.month-warning {
  display: none;
  color: #f97316;
  font-size: 15px;
}

@media (max-width: 900px) {
  .dashboard-filters {
    align-items: stretch;
  }
  .filters-right {
    width: 100%;
    justify-content: flex-start;
  }
}

/* =========================================================
* 6) Tables principales (dashboard, détails, palettisation)
* ======================================================= */
table {
  border-collapse: collapse;
  width: 100%;
  background: #fff;
  margin-top: 10px;
  border-radius: 6px;
  overflow: hidden;
}

th,
td {
  border: 1px solid var(--line);
  padding: 6px;
  text-align: center;
  font-size: 13px;
}

th {
  background: linear-gradient(90deg, var(--blue), var(--blue-d));
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1;
  font-weight: 600;
}

table tbody tr:nth-child(even) {
  background: var(--row);
}

tr.highlight-row {
  background-color: rgba(0, 123, 255, 0.22) !important;
  transition: background-color 0.2s ease;
}

#dashboardTable td.td-client,
#dashboardTable th.th-client {
  min-width: 200px;
  width: 300px;
}

#dashboardTable td.td-client {
  font-weight: 500;
  text-transform: uppercase;
}

#detailTable {
  margin-top: 0;
}

/* Colonne Désignation du tableau colisage un peu plus compacte */
#detailTable th.col-desig,
#detailTable td.col-desig {
  max-width: 180px;
}

@media (max-width: 1200px) {
  #detailTable th.col-desig,
  #detailTable td.col-desig {
    max-width: 150px;
  }
}

#detailTable td.col-desig {
  text-align: left;
}

/* DÉSIGNATION : ellipsis + icône CYTO à droite (sans mettre flex sur <td>) */
td.col-desig .desig-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0; /* Indispensable pour ellipsis en flex */
}

td.col-desig .desig-text {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

td.col-desig .desig-cyto-icon {
  flex: 0 0 auto;
  color: #dc2626;
}

#detailTable td:nth-child(2),
#detailTable td:nth-child(10),
#detailTable td:nth-child(11) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Colonne "Type" : alignée à gauche + nowrap */
#detailTable td:nth-child(7) {
  text-align: left;
  width: 150px;
}

#detailTable td:nth-child(5),
#detailTable td:nth-child(7) {
  white-space: nowrap;
}

/* Bloc visuel "Colisage" : colonnes spécifiques */
thead th.col-colisage {
  background: linear-gradient(90deg, #0f766e, #115e59);
}

thead th.col-colisage-group {
  background: linear-gradient(90deg, #0f766e, #115e59);
  color: #fff;
  text-align: center;
  font-weight: 600;
}

/* TOTAL WEIGHT Palettisation (ligne de total) */
#palletTable tfoot tr.pallet-total-row td {
  background: #ddeaf7;
  font-weight: 700;
}

#palletTable tfoot .pallet-total-label {
  text-align: right;
}

/* =========================================================
* 7) Inputs, selects et focus states
* ======================================================= */
input[type="text"],
input[type="number"],
select {
  width: 47px;
  padding: 6px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid #cbd5e1;
  color: black;
  background: #ffffff;
  outline: none;
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    background-color 0.12s ease;
}

/* Masquer les flèches des input type="number" (Chrome, Edge, Safari) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

select {
  width: fit-content;
  cursor: pointer;
}

/* Hover sur select actifs */
select:not(:disabled):hover,
span.deadline-chip:hover,
input:not(:disabled):hover,
button:not(:disabled):hover,
textarea:not(:disabled):hover {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 1px rgba(11, 78, 136, 0.15);
}

/* Exception : select désactivé */
select:disabled {
  cursor: not-allowed;
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px rgba(11, 78, 136, 0.2);
  background: #f9fbff;
}

.select-warning {
  border: 1px solid #f97316 !important;
  box-shadow: 0 0 4px rgba(249, 115, 22, 0.5);
}
.select-warning:focus {
  border-color: #f97316 !important;
  box-shadow: 0 0 6px rgba(249, 115, 22, 0.7);
}

/* Inputs spécifiques registre manquants / abîmés */
#missingTable select,
#missingTable input.missing-comment-input {
  width: 82.4px;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
}

#missingTable input.missing-comment-input {
  width: 100%;
  box-sizing: border-box;
}

.missing-bl-cell {
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.missing-client-cell {
  text-transform: uppercase;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.missing-desig-cell {
  max-width: 120px;
  min-width: -webkit-fill-available;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Désignation + bouton photo (NE PAS mettre flex sur <td>) */
#missingTable td.missing-desig-cell {
  border: none;
  border-bottom: 1px solid var(--line);
}

/* Wrapper flex interne */
#missingTable td.missing-desig-cell .missing-desig-wrap {
  display: flex;
  align-items: center;
  min-width: 0; /* indispensable pour ellipsis en flex */
  gap: 6px;
}

/* Texte tronqué */
#missingTable td.missing-desig-cell .missing-desig-text {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bouton photo inchangé */
#missingTable .missing-photo-btn {
  flex: 0 0 auto;
  margin: 0;
}

/* Select de statut final dans le registre manquants / abîmés */
.final-status-select {
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.fs-none {
  background: #ffffff;
  color: #111827;
}
.fs-red {
  background: #fee2e2;
  color: #991b1b;
}
.fs-yellow {
  background: #fef3c7;
  color: #92400e;
}
.fs-green {
  background: #dcfce7;
  color: #166534;
}
.fs-blue {
  background: #dbeafe;
  color: #1e3a8a;
}
.fs-purple {
  background-color: #ede9fe;
  color: #5b21b6;
}

/* Filtre registre manquants */
.missing-pagination {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 12px;
  color: #475569;
}

.missing-pagination button {
  margin: 2px 0;
}

.missing-page-info {
  font-size: 12px;
}

.missing-page-btn {
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
}

.missing-page-btn[disabled] {
  opacity: 0.4;
  cursor: default;
}

.missing-search {
  min-width: 0 !important;
  width: 100%;
}

#missingFilters {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  width: 100%;
}

#missingFilters.missing-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

#missingStatusFilter,
#missingTypeFilter {
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  padding: 6px;
  font-size: 13px;
  background: #ffffff;
  width: 100%;
  min-width: 150px;
}

/* =========================================================
* 8) Boutons (primaires, secondaires, icônes, danger)
* ======================================================= */
button {
  margin: 4px 6px 4px 0;
  padding: 7px 12px;
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 10px rgba(9, 61, 106, 0.25);
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease,
    background 0.12s ease;
}
button:hover {
  background: var(--blue-d);
}
button:active {
  transform: translateY(0);
  box-shadow: 0 3px 7px rgba(9, 61, 106, 0.25);
}

button i {
  font-size: 13px;
}

button.secondary {
  background: white;
  color: #475569;
  border: 1px solid #94a3b8;
  box-shadow: 0 1px 5px rgba(55, 65, 81, 0.15);
}

button[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Bouton icône rond (ex: +, commentaire…) */
button.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid var(--blue);
  background: #ffffff;
  color: var(--blue-d);
  box-shadow: 0 1px 4px rgba(9, 61, 106, 0.2);
  cursor: pointer;
  transition: all 0.15s ease;
}
button.icon-btn:not(:disabled):hover {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 2px 6px rgba(9, 61, 106, 0.35);
}

button.icon-btn i {
  font-size: 13px;
  line-height: 1;
}

/* Deadline picker compact : affichage JJ/MM stable */
.deadline-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.deadline-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46.7px;
  height: 29.6px;
  padding: 0 6px;
  color: black;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  user-select: none;
}

/* Input date invisible (sert juste à ouvrir le calendrier + stocker ISO) */
.deadline-date-hidden {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

/* Cache "Voir détail par BL" et "Modifier la deadline" sur appareils tactiles */
/* @media (pointer: coarse) {
  .icon-btn.bl-detail-btn {
    display: none !important;
  }
} */

#backBtn {
  margin-left: 0;
  margin-right: 0;
}

/* Wrapper pour le bouton commentaire */
.comment-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Pastille rouge "1" quand il y a un commentaire */
.comment-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #dc2626;
  color: #ffffff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  display: inline-block;
  align-content: center;
  min-width: 16px;
  height: 16px;
  z-index: 1;
}

#missingListBtn {
  position: relative;
}

#missingListBtn .comment-badge.missing-badge {
  top: -2px;
  right: 0px;
}

#expiryAlertBtn {
  position: relative;
}

#expiryAlertBtn .comment-badge.expiry-badge {
  top: -2px;
  right: 0px;
  background: #d97706;
}

/* Cellule "Exp." en alerte péremption proche (< 6 mois) */
td.exp-near {
  color: #b45309;
  font-weight: 700;
}

.exp-near-icon {
  color: #d97706;
}

/* ⚠️ Péremption proche, à côté du nom du client (dashboard) */
.expiry-warning-icon {
  margin-left: 2px;
}

button.icon-danger {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #b91c1c;
}
button.icon-danger:hover {
  background: #b91c1c !important;
  color: #fecaca;
  border: 1px solid #b91c1c !important;
}

/* Boutons zone dashboard (après les h2) */
#dashboardView > h2 + button,
#dashboardView > h2 + button + button {
  margin-top: 2px;
}

#dashboardView h2,
#detailView h2 {
  justify-content: space-between;
}

#dashboardView h2 {
  margin: 8px 16px;
}

#detailView h2 {
  margin: 8px 16px 4px;
}

/* =========================================================
* 9) Utilitaires généraux (hidden, row-clickable, badges…)
* ======================================================= */
.hidden {
  display: none !important;
}

.dash-row-anchor {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  border-radius: 6px;
}

.row-clickable {
  cursor: pointer;
}
.row-clickable:hover {
  background-color: rgba(0, 123, 255, 0.22) !important;
  transition: background-color 0.2s ease;
}

.user-name {
  font-weight: 500;
}

#status {
  margin: 0.5rem 0;
  color: #4b5563;
  font-size: 13px;
}

.badge {
  display: inline-block;
  align-content: center;
  min-width: 19px;
  height: 19px;
  border-radius: 999px;
  font-size: 11px;
  color: #fff;
  font-weight: 600;
}

/* Wrapper icône commentaires */
.comment-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  color: #0b4e88;
  opacity: 0.9;
}

/* Badge compteur en haut à droite */
.comment-count-badge {
  position: absolute;
  top: -8px;
  right: -11px;

  min-width: 16px;
  height: 16px;
  padding: 0 4px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 10px;
  font-weight: 600;
  line-height: 1;

  color: #0b4e88;
  background: #ffffff;
  border: 1px solid #0b4e88;
  border-radius: 999px;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.b-pending {
  background: #0b4e88;
}
.b-mod {
  background: var(--warning);
  color: #000;
}
.b-del {
  background: var(--danger);
}

.pill {
  display: inline-block;
  padding: 2px 8px 3px;
  border-radius: 999px;
  font-size: 11px;
  color: #fff;
  font-weight: 500;
}
.pill-missing {
  background: #dc2626;
  color: #ffffff;
}
.pill-damaged {
  background: #eab308;
  color: #ffffff;
}
.pill-mixte {
  background: linear-gradient(90deg, #dc2626, #eab308);
  color: #ffffff;
}

/* Types de ligne (AMBIANT, FROID, STUP, PSY) */
.type-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px 3px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}

.type-ambiant {
  background: #ffe4c7;
  color: #9a3412;
}
.type-froid {
  background: #dbeafe;
  color: #1e3a8a;
}
.type-stup {
  background: #fecaca;
  color: #7f1d1d;
}
.type-psy {
  background: #e9d5ff;
  color: #6b21a8;
}

.ok {
  background: var(--accent);
  white-space: nowrap;
}
.warn {
  background: var(--warning);
  color: #000;
}
.err {
  background: var(--danger);
}

/* =========================================================
* 10) Désérialisation & statut global de la commande
* ======================================================= */
/* Désérialisation */
.deser-neutral {
  background: #e5e7eb;
  color: #111827;
}

.deser-cell {
  text-align: center;
}

.deser-pill {
  display: inline-block;
  border-radius: 999px;
  font-size: 11px;
}

.deser-afaire {
  background: #dc2626;
  color: #ffffff;
}
.deser-scanne {
  background: #eab308;
  color: #ffffff;
}
.deser-controle {
  background: #f97316;
  color: #ffffff;
}
.deser-aexporter {
  background: #dc2626;
  color: #ffffff;
}
.deser-exporte {
  background: #16a34a;
  color: #ffffff;
}
.deser-echantillon {
  background: #7c3aed;
  color: #ffffff;
}

/* Statut global */
.status-neutral {
  background: #e5e7eb;
  color: #111827;
}
.status-colisage-finalise,
.status-second-ok {
  background: #2563eb;
}
.status-colisage-afinaliser {
  background: #f97316;
}
.status-a-controler,
.status-a-filmer {
  background: #dc2626;
}
.status-filme,
.status-expedie {
  background: #16a34a;
}

.global-status-cell {
  white-space: nowrap;
}

.global-status-cell .icon-btn {
  margin-left: 6px;
}

.info-transport-cell {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
* 11) Modals : Login, Historique, BL détail, statut global, commentaires,
*             manquants / abîmés, choix M / A, photo, split refs
* ======================================================= */
/* ----- Login modal (auth) ----- */
.modal-overlay {
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9999;
  padding: 16px;
}

.modal {
  width: min(420px, 100%);
  background: #111827;
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  padding: 16px 16px 14px;
}

.modal h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 700;
}

#newUserRole {
  height: 35px;
}

.form-row {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.form-row label {
  font-size: 12px;
  opacity: 0.9;
}

.form-row input {
  height: 35px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #e5e7eb;
  padding: 0 10px;
  outline: none;
}
.form-row input:focus {
  border-color: rgba(255, 255, 255, 0.28);
}
.form-row input:focus,
.form-row input:active {
  background: rgba(255, 255, 255, 0.06);
  color: #e5e7eb;
  outline: none;
}

/* Champ password avec bouton oeil */
.password-field {
  position: relative;
  display: flex;
  align-items: center;
}

.password-field input {
  width: 100%;
  padding-right: 42px;
  box-sizing: border-box;
}

.toggle-pass-btn {
  position: absolute;
  right: 5px;
  border: none;
  background: transparent;
  color: rgba(229, 231, 235, 0.9);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.toggle-pass-btn:hover {
  color: rgba(229, 231, 235, 1);
}
.toggle-pass-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}

.btn.primary {
  border-radius: 10px;
  padding: 9.1px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(59, 130, 246, 0.35);
  color: #e5e7eb;
  cursor: pointer;
}
.btn.primary:hover {
  background: rgba(59, 130, 246, 0.45);
}
.btn.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#loginBtn,
#createUserSaveBtn,
#changePwSaveBtn {
  margin-right: 0;
}

/* ----- Modal historique (audit) ----- */
#auditPopup {
  display: none;
  position: fixed;
  z-index: 99999;
  min-width: 320px;
  max-width: 520px;
  background: #0b1220;
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

#auditModalHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#auditPopupTitle {
  font-weight: 700;
  font-size: 13px;
}

#auditPopupClose {
  padding: 6px 8px;
}

#auditPopupBody {
  padding: 0px 12px;
  max-height: 320px;
  overflow: auto;
  font-size: 12px;
}
#auditPopupBody > div:last-child {
  border-bottom: none !important;
}

#auditPopupFooter {
  padding: 0px 12px 12px;
  display: none;
}

#auditPopupMore {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}
#auditPopupMore:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ----- Modal détail BL ----- */
#blModal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

#blModalOverlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

#blModalCard {
  position: relative;
  z-index: 1000;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
  padding: 14px 16px 16px;
  width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(148, 163, 184, 0.6);
}

#blModalHeader {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

#blModalSub {
  margin: 2px 0 0;
  font-size: 12px;
  color: #6b7280;
}

#blModalBody {
  margin-top: 6px;
  overflow: auto;
  border-radius: 8px;
}

#blModalTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

#blModalTable th,
#blModalTable td {
  border: 1px solid #e5e7eb;
  padding: 6px 8px;
  text-align: center;
}

#blModalTable th {
  background: linear-gradient(90deg, var(--blue), var(--blue-d));
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1;
}

#blModalTable tbody tr:nth-child(even) {
  background: #f3f4ff;
}

/* ----- Modal statut global ----- */
#statusModal {
  position: fixed;
  inset: 0;
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
}

#statusModalOverlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

#statusModalCard {
  position: relative;
  z-index: 999;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
  padding: 14px 16px 16px;
  width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(148, 163, 184, 0.6);
}

#statusModalHeader {
  display: flex;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 8px;
}

#statusRenameClientBtn {
  margin-right: 10px;
}

.status-modal-title-block {
  min-width: 0;
}

.status-modal-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-rename-btn {
  padding: 3px 6px;
  box-shadow: none;
  background: transparent;
  border-radius: 999px;
}
.status-rename-btn:hover {
  background: #e5e7eb;
}

.status-rename-btn i {
  font-size: 11px;
}

#statusModalSub {
  margin: 2px 0 0;
  font-size: 12px;
  color: #6b7280;
}

#statusModalBody {
  margin-top: 13px;
  overflow-y: auto;
}

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

.status-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.status-section {
  background: #f9fafb;
  border-radius: 12px;
  padding: 10px 12px 12px;
  border: 1px solid #e5e7eb;
  margin-bottom: 12px;
}

.status-section:last-child {
  margin-bottom: 0;
}

.status-section-title {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}

.status-field-wide {
  grid-column: 1 / -1;
}

.status-field-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
}

.status-field label {
  font-weight: 500;
  color: #111827;
  font-size: 12px;
}

.status-field select,
.status-field input,
.status-field textarea {
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  padding: 6px;
  font-size: 13px;
  min-width: 100px;
}
.status-field select:disabled,
.status-field input:disabled,
.status-field textarea:disabled {
  background-color: #e5e7eb;
  color: #6b7280;
  cursor: not-allowed;
}

.status-field textarea {
  resize: vertical;
  min-height: 70px;
}

label[for="statusDateEnlev"] {
  margin-top: 5px;
}

#statusModalFooter {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

#statusSaveBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ----- Modal photos client ----- */
#clientPhotosModal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#clientPhotosOverlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

#clientPhotosCard {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
  padding: 14px 16px 16px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  width: min(900px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#clientPhotosHeader {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

#clientPhotosHeader > div {
  min-width: 0; /* Nécessaire pour que l’ellipsis marche dans un flex */
}

#clientPhotosSub {
  margin: 2px 0 0;
  font-size: 12px;
  color: #64748b;
}

#clientPhotosActions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

#clientPhotosActions input[type="file"] {
  flex: 1;
}

#clientPhotosGrid {
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

@media (max-width: 900px) {
  #clientPhotosGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.client-photo-tile {
  min-height: 220px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #f9fafb;
}

.client-photo-tile img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}

.client-photo-meta {
  padding: 8px;
  font-size: 11px;
  color: #374151;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.client-photo-del {
  border: 1px solid rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
  border-radius: 8px;
  padding: 6px 8px;
  margin: 0;
  cursor: pointer;
}
.client-photo-del:hover {
  background: rgba(239, 68, 68, 0.14);
}

.client-photos-empty {
  grid-column: 1 / -1;
  padding: 14px 12px;
  font-size: 13px;
  text-align: center;
  font-size: 13px;
  color: #6b7280;
  font-style: italic;
}

.client-photo-open {
  width: 100%;
  border: 0;
  padding: 0;
  margin-top: 0;
  background: transparent;
  cursor: pointer;
  display: block;
  box-shadow: none;
  border-color: transparent;
}
.client-photo-open:hover {
  box-shadow: none !important;
}
.client-photo-open:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.25);
  outline-offset: 2px;
  border-radius: 10px;
}

.file-input-modern {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 13px;
  border: 1.5px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
.file-input-modern:hover {
  border-color: var(--blue);
  background: #f1f5f9;
}
.file-input-modern:has(input:focus-visible) {
  border-color: var(--blue-d);
  background: #eef2ff;
}

/* Icône */
.file-input-modern i {
  font-size: 18px;
  color: var(--blue-d);
}

/* Texte */
.file-input-modern span {
  font-size: 13px;
  color: #334155;
  user-select: none;
}

/* Input réel invisible */
.file-input-modern input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* ----- Viewer photos client (FULLSCREEN, largeur fixe) ----- */
#clientPhotoViewerModal {
  position: fixed;
  inset: 0;
  z-index: 4000;
}

#clientPhotoViewerOverlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
}

/* Le "card" devient un conteneur plein écran */
#clientPhotoViewerCard {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  background: #0b1220;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image au centre, sans impacter la position des boutons */
#clientPhotoViewerImg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0b1220;
}

/* Close */
#clientPhotoViewerClose {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
}

/* Flèches FIXES (plus de missclick quand la photo est étroite) */
.photo-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

#clientPhotoViewerPrev {
  left: 14px;
}

#clientPhotoViewerNext {
  right: 14px;
}

/* Caption discret */
#clientPhotoViewerCaption {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
}

/* ----- Viewer photos client : boutons style "bulle" + zoom/pan ----- */
/* Zoom via variables CSS (pilotées en JS) */
#clientPhotoViewerImg {
  --photo-scale: 1;
  --photo-tx: 0px;
  --photo-ty: 0px;

  transform: translate(var(--photo-tx), var(--photo-ty))
    scale(var(--photo-scale));
  transform-origin: center center;
  transition: transform 0.06s linear;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}

/* Quand zoom actif */
#clientPhotoViewerImg.is-zoomed {
  cursor: grab;
}
#clientPhotoViewerImg.is-zoomed:active {
  cursor: grabbing;
}

/* Boutons (croix + flèches) : même style que #clientPhotoViewerCaption */
#clientPhotoViewerModal .photo-nav-btn,
#clientPhotoViewerModal #clientPhotoViewerClose {
  width: 33px;
  height: 33px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  transition:
    transform 0.06s ease,
    background 0.16s ease,
    border-color 0.16s ease;
}

#clientPhotoViewerModal .photo-nav-btn:hover,
#clientPhotoViewerModal #clientPhotoViewerClose:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.2);
}

#clientPhotoViewerModal .photo-nav-btn:active,
#clientPhotoViewerModal #clientPhotoViewerClose:active {
  transform: translateY(-50%) scale(0.98);
}

/* Fix : le close n'a pas de translateY(-50%), donc on neutralise l'active */
#clientPhotoViewerModal #clientPhotoViewerClose:active {
  transform: scale(0.98);
}

/* ----- Modals commentaires / manquants / photo ----- */
#commentModal,
#missingModal,
#missingPhotoModal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#commentModalOverlay,
#missingModalOverlay,
#missingPhotoOverlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

#commentModalCard,
#missingModalCard,
#missingPhotoCard {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
  padding: 14px 16px 16px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  width: 500px;
}

/* Taille spécifique pour la card photo */
#missingPhotoCard {
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#missingModalCard,
#missingPhotoCard {
  width: 100%;
  max-width: 90vw;
  max-height: 90vh;
  margin: auto;
}

#missingPhotoCard {
  width: auto;
}

#commentModalHeader,
#missingModalHeader {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

#missingModalTitle {
  margin: 0;
  font-size: 18px;
  color: var(--blue-d);
}

#commentModalSub,
#missingModalSub {
  margin: 2px 0 0;
  font-size: 12px;
  color: #6b7280;
}

#commentModalBody {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

/* ----- Modale "Enlèvement urgent" (alerte + récap quotidien) ----- */
#urgentAlertModal {
  position: fixed;
  inset: 0;
  z-index: 1200; /* au-dessus des autres modales : alerte proactive */
  display: flex;
  align-items: center;
  justify-content: center;
}

#urgentAlertOverlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

#urgentAlertCard {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
  padding: 16px 18px 18px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  width: 480px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

#urgentAlertHeader {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f59e0b;
}

#urgentAlertTitle {
  margin: 0;
  font-size: 17px;
  color: #b45309;
}

#urgentAlertSub {
  margin: 2px 0 0;
  font-size: 12px;
  color: #6b7280;
}

#urgentAlertBody {
  overflow-y: auto;
  flex: 1;
}

#urgentAlertList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#urgentAlertList li {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13.5px;
}

#urgentAlertList .urgent-client {
  font-weight: 700;
  color: #1e293b;
}

#urgentAlertList .urgent-meta {
  color: #92400e;
  font-size: 11.5px;
  margin-top: 1px;
}

#urgentAlertList .urgent-when {
  font-weight: 700;
}

#urgentAlertList .urgent-when.today {
  color: #dc2626;
}

#urgentAlertList .urgent-when.tomorrow {
  color: #d97706;
}

#urgentAlertList .urgent-status {
  color: #64748b;
  font-size: 12px;
  margin-top: 2px;
}

#urgentAlertFooter {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

/* ----- Modale "Nouveau(x) message(s) chat" ----- */
#chatMessageAlertModal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
}

#chatMessageAlertOverlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

#chatMessageAlertCard {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
  padding: 16px 18px 18px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  width: 420px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

#chatMessageAlertHeader {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--blue);
}

#chatMessageAlertTitle {
  margin: 0;
  font-size: 17px;
  color: var(--blue-d);
}

#chatMessageAlertBody {
  overflow-y: auto;
  flex: 1;
}

#chatMessageAlertList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#chatMessageAlertList li {
  background: var(--blue-soft);
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 10px 12px;
}

#chatMessageAlertList .chat-alert-sender {
  font-weight: 700;
  color: #1e293b;
  font-size: 13.5px;
}

#chatMessageAlertList .chat-alert-count {
  font-weight: 400;
  color: #64748b;
  font-size: 12px;
}

#chatMessageAlertList .chat-alert-body {
  color: #1f2937;
  font-size: 13.5px;
  margin: 4px 0 8px;
  white-space: pre-wrap;
  word-break: break-word;
}

#chatMessageAlertList .chat-alert-reply-btn {
  margin: 0;
}

/* ----- Popup choix manquant / abîmé (avant enregistrement) ----- */
#missingChoiceModal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#missingChoiceOverlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

#missingChoiceCard {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
  padding: 14px 16px 16px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  max-width: 500px;
  width: calc(100% - 32px);
}

#missingChoiceHeader {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

#missingChoiceSub {
  margin: 2px 0 0;
  font-size: 12px;
  color: #6b7280;
}

#missingChoiceBody {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#missingChoiceValidate {
  margin-right: 0;
}

#missingQtyInfo {
  font-size: 13px;
  color: #111827;
}

.missing-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.missing-choice-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #111827;
  margin-bottom: 3px;
}

.missing-choice-field input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  padding: 6px;
  font-size: 13px;
}

.missing-choice-hint {
  font-size: 11px;
  color: #6b7280;
  margin: 4px 0 0;
}

#missingChoiceFooter {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ----- Contenu modal manquants / abîmés ----- */
/* Corps de la modale : pas de scroll global */
#missingModalBody {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Filtres toujours visibles */
.missing-filters-wrapper {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  background: #f9fafb;
  z-index: 2;
}

/* Zone scrollable du tableau */
.missing-table-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: 100%;
}

/* Toggle colonnes (Manquants / abîmés) */
.missing-cols-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6.5px 9px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  background: #ffffff;
  color: #1f2937;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
}
.missing-cols-toggle:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.missing-cols-toggle i {
  font-size: 14px;
  color: #334155;
}

/* Mode actif = colonnes affichées */
.missing-cols-toggle.is-active {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #1e3a8a;
}

.missing-cols-toggle.is-active i {
  color: #1e3a8a;
}

/* Par défaut : on masque BL (col 3) et Préparateur (col 10) */
#missingTable.missing-cols-compact th:nth-child(3),
#missingTable.missing-cols-compact td:nth-child(3),
#missingTable.missing-cols-compact th:nth-child(10),
#missingTable.missing-cols-compact td:nth-child(10) {
  display: none;
}

/* ----- Liste commentaires dans la modal ----- */
#commentList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 13px;
}

.comment-empty {
  font-size: 13px;
  color: #6b7280;
  font-style: italic;
  text-align: center;
  padding: 23px 10px;
  border-radius: 8px;
  background: #f3f4ff;
  margin: 0;
}

.comment-item {
  padding: 8px 10px 14px;
  border-radius: 8px;
  background: #f3f4ff;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Ligne du haut : date + poubelle */
.comment-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  opacity: 0.85;
}

/* Ligne du message */
.comment-item-body {
  line-height: 1.4;
  word-break: break-word;
}

.comment-delete-btn i {
  font-size: 13px;
}

#commentModalForm {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#commentModalForm label {
  font-size: 12px;
  color: #64748b;
}

#commentModalInput {
  resize: vertical;
  min-height: 60px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  padding: 6px 8px;
  font-size: 13px;
}

#commentModalAdd {
  align-self: flex-end;
  margin-top: 16px;
  margin-right: 0;
}

/* ----- Modal dissociation références ----- */
#refSplitModal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#refSplitModalOverlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

#refSplitModalCard {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
  padding: 14px 16px 16px;
  width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(148, 163, 184, 0.6);
}

#refSplitModalHeader {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

#refSplitModalSub {
  margin: 2px 0 0;
  font-size: 12px;
  color: #64748b;
}

#refSplitModalBody {
  flex: 1;
  overflow: auto;
  font-size: 13px;
}

#refSplitList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

#refSplitSaveBtn {
  margin-right: 0;
}

.ref-split-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font-size: 14px;
}

.ref-split-row input[type="checkbox"][data-ref-key] {
  transform: scale(1.05);
  accent-color: #0b4e88;
  width: 14px;
  height: 14px;
  cursor: pointer;
  border-radius: 20px;
}
.ref-split-row input[type="checkbox"][data-ref-key]:hover {
  filter: brightness(1.1);
}

.ref-split-label {
  flex: 1;
  font-weight: 500;
}

.ref-split-row.ref-split-row-disabled {
  opacity: 0.6;
  background: #f1f5f9;
}

.ref-split-row.ref-split-row-disabled input[type="checkbox"] {
  cursor: not-allowed;
}

#refSplitModalActions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* ----- Lignes BL supprimées dans la table ----- */
.bl-removed-row {
  background: #e5e7eb !important;
  color: #6b7280;
  font-style: italic;
}

.bl-removed-row td:first-child {
  color: #4b5563;
}

/* ----- Modals sur petits écrans ----- */
@media (max-width: 540px) {
  #commentModalCard,
  #statusModalCard,
  #blModalCard,
  #refSplitModalCard,
  #missingModalCard,
  #missingPhotoCard,
  #urgentAlertCard {
    width: calc(100% - 24px) !important;
  }
}

/* =========================================================
* CHAT (modal Teams-like)
* ======================================================= */
#chatBtn {
  position: relative;
}

#chatSendBtn {
  background: var(--blue);
  margin-right: 0;
  flex-shrink: 0;
}

#chatCloseBtn {
  margin-right: 0;
}

.chat-modal {
  position: relative;
  width: min(1100px, calc(100vw - 40px));
  height: min(720px, calc(100vh - 100px));
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chat-header {
  height: 46px;
  background: #111827;
  color: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
}

.chat-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
}

.chat-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.chat-sidebar {
  border-right: 1px solid #e5e7eb;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  min-width: 200px;
}

.chat-sidebar-title {
  display: flex;
  align-items: center;
  height: 42px;
  padding: 10px 12px;
  font-weight: 700;
  color: #334155;
  border-bottom: 1px solid #e5e7eb;
}

.chat-users {
  flex: 1;
  overflow: auto;
  padding: 6px;
}

.chat-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
}

.chat-user:hover {
  background: rgba(11, 78, 136, 0.08);
}

.chat-user.active {
  background: rgba(11, 78, 136, 0.14);
  outline: 1px solid rgba(11, 78, 136, 0.2);
}

.chat-user-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.chat-user-name {
  font-weight: 600;
  font-size: 12px;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.chat-user-role {
  font-size: 11px;
  opacity: 0.65;
}

.chat-online-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #94a3b8;
}

.chat-online-dot.online {
  background: #22c55e;
}

.chat-unread {
  min-width: 17px;
  height: 17px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-thread-header {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-thread-name {
  font-weight: 700;
  color: #0b4e88;
}

.chat-thread-status {
  font-size: 12px;
  color: #64748b;
}

.chat-messages {
  flex: 1;
  overflow: auto;
  padding: 16px;
  background: radial-gradient(circle at top left, #ffffff, #f7fbff);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Composer disabled */
#chatInput:disabled {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}
#chatSendBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(1);
}

/* Meta row + delete button */
.chat-bubble-meta-row {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chat-bubble {
  max-width: 75%;
  padding: 8px 10px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.3;
  box-shadow: 0 6px 14px rgba(15, 35, 52, 0.06);
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-bubble.me {
  align-self: flex-end;
  background: rgba(11, 78, 136, 0.12);
  border: 1px solid rgba(11, 78, 136, 0.18);
}

.chat-bubble.other {
  align-self: flex-start;
  background: #fff;
  border: 1px solid #e5e7eb;
}

.chat-bubble-meta {
  font-size: 11px;
  opacity: 0.7;
}

.chat-inputbar {
  border-top: 1px solid #e5e7eb;
  padding: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}

#chatInput {
  flex: 1;
  min-width: 0; /* sans ça, un <input> refuse de rétrécir sous sa largeur intrinsèque en flexbox */
  width: auto !important;
  padding: 9.1px 12px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  font-size: 13px;
}

/* Reply preview */
.chat-reply-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-top: 1px solid #e5e7eb;
  border-left: 3px solid var(--blue);
  background: #f8fafc;
}
.chat-reply-preview-title {
  font-size: 11px;
  font-weight: 700;
  color: #334155;
}
.chat-reply-preview-text {
  font-size: 12px;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 520px;
}

/* Emoji panel */
.chat-emoji-panel {
  position: fixed;
  left: 0;
  top: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  z-index: 2000;
}
.chat-emoji-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px;
  border-radius: 8px;
}
.chat-emoji-btn:hover {
  background: rgba(11, 78, 136, 0.1);
}

#chatEmojiBtn:disabled {
  cursor: not-allowed;
}

/* Bubble hover actions */
.chat-bubble {
  position: relative;
}
.chat-bubble-actions {
  position: absolute;
  top: -16px;
  right: 8px;
  display: none;
  gap: 6px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 2px 6px;
  z-index: 1;
}
.chat-bubble:hover .chat-bubble-actions {
  display: inline-flex;
}
.chat-action-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 999px;
  color: #1f2933;
  opacity: 0.9;
  border: 1px solid rgba(11, 78, 136, 0.18);
}
.chat-action-btn:hover {
  background: rgba(11, 78, 136, 0.1);
}
.chat-action-btn[title="Supprimer"] {
  margin-right: 0;
}

/* Reactions row */
.chat-reactions {
  position: relative;
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chat-reaction-pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
  font-size: 14px;
  top: -4px;
}
.chat-reaction-pill.me {
  border-color: rgba(11, 78, 136, 0.35);
}

/* Read receipts (check icons) */
.chat-receipt {
  margin-left: 8px;
  opacity: 0.75;
}

/* =========================================================
* 12) Modales — Titres tronqués avec ellipsis + hover natif
* ======================================================= */

#statusModalTitle,
#blModalTitle,
#commentModalTitle,
#refSplitModalTitle,
#missingChoiceTitle,
#clientPhotosTitle {
  margin: 0;
  font-size: 18px;
  color: var(--blue-d);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Autoriser la réduction dans les headers flex */
#statusModalHeader .status-modal-title-block,
#blModalHeader > div,
#commentModalHeader > div,
#refSplitModalHeader > div,
#missingChoiceHeader > div {
  min-width: 0;
}

/* =========================================================
* 13) Overlay Reconnexion
* ======================================================= */
#reconnectOverlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reconnect-card {
  background: #fff;
  padding: 25px;
  border-radius: 14px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  text-align: center;
  width: auto;
}

.reconnect-card .title {
  font-weight: 700;
  margin-top: 15px;
}

.reconnect-card .subtitle {
  font-size: 13px;
  opacity: 0.75;
  margin-top: 6px;
}

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #cbd5e1;
  border-top-color: #0b4e88;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
* CALCULATRICE FLOTTANTE
* ======================================================= */
.calc-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9000;
  width: 260px;
  background: #1c2432;
  border-radius: 16px;
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.07);
  overflow: hidden;
  user-select: none;
}

.calc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #111827;
  color: #e5e7eb;
  font-size: 12px;
  font-weight: 600;
  cursor: move;
  letter-spacing: 0.4px;
}

.calc-header i.fa-calculator {
  margin-right: 6px;
  color: #60a5fa;
}

#calcCloseBtn {
  margin-right: 0;
}

.calc-display {
  padding: 10px 16px;
  text-align: right;
}

.calc-expression {
  font-size: 11px;
  color: #6b7280;
  min-height: 16px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calc-screen {
  font-size: 36px;
  font-weight: 300;
  color: #f9fafb;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.calc-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.05);
  padding: 1px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.calc-btn {
  margin: 4px;
  border: none;
  background: #252e3e;
  color: #e5e7eb;
  font-size: 17px;
  font-weight: 400;
  height: 54px;
  cursor: pointer;
  transition:
    background 0.1s ease,
    transform 0.08s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calc-btn:hover {
  background: #2e3a4e;
}

.calc-btn:active {
  background: #3a475e;
  transform: scale(0.94);
}

.calc-btn.calc-fn {
  background: #2c3547;
  color: #93c5fd;
  font-size: 14px;
  font-weight: 500;
}

.calc-btn.calc-fn:hover {
  background: #35405a;
}

.calc-btn.calc-op {
  background: #0b4e88;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
}

.calc-btn.calc-op:hover {
  background: #1260a0;
}

.calc-btn.calc-op.active-op {
  background: #e5e7eb;
  color: #0b4e88;
}

.calc-btn.calc-eq {
  background: #16a34a;
  color: #fff;
  font-size: 20px;
}

.calc-btn.calc-eq:hover {
  background: #15803d;
}

.calc-btn.calc-zero {
  grid-column: span 2;
  justify-content: flex-start;
  padding-left: 22px;
}

/* =========================================================
* RESPONSIVE MOBILE / TABLETTE ÉTROITE
* (nécessite la meta viewport dans index.html)
* ======================================================= */
@media (max-width: 820px) {
  main {
    margin: 0 8px 16px;
  }

  h1 {
    font-size: 18px;
  }
  h1 img.logo {
    height: 30px;
  }
  h1 i {
    font-size: 18px;
  }

  /* --- Topbar : cibles tactiles plus grandes, retour à la ligne --- */
  .topbar {
    height: auto;
    min-height: 42px;
    padding: 4px 10px;
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .topbar-btn {
    min-width: 36px;
    min-height: 36px;
    font-size: 15px;
  }

  /* --- Onglets zones / préparation --- */
  #zoneTabs,
  #prepTabs {
    margin-left: 0;
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* --- Filtres dashboard --- */
  .dashboard-filters {
    flex-wrap: wrap;
    gap: 8px;
  }
  .filters-right {
    flex-wrap: wrap;
  }

  /* --- Barre d'actions préparation (boutons + Invoice ref) --- */
  .prep-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .prep-invoice-bar {
    justify-content: flex-start;
    width: 100%;
  }
  .prep-invoice-bar input {
    min-width: 0;
    flex: 1;
  }

  /* --- Tableaux : défilement horizontal (aucune colonne masquée) --- */
  #dashboardView #content,
  #detailView #content,
  #blModalBody,
  #missingModalBody {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  th,
  td {
    font-size: 12px;
    padding: 5px 4px;
  }

  /* Largeur minimale : garde les colonnes lisibles, le reste défile */
  #dashboardTable {
    min-width: 860px;
  }
  #detailTable,
  #palletTable {
    min-width: 980px;
  }

  #dashboardTable td.td-client,
  #dashboardTable th.th-client {
    min-width: 140px;
    width: auto;
  }

  /* --- Modales : pleine largeur écran --- */
  #commentModalCard,
  #statusModalCard,
  #blModalCard,
  #refSplitModalCard,
  #missingChoiceCard,
  #missingModalCard,
  #missingPhotoCard,
  #clientPhotosCard {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: 90dvh;
  }

  /* --- Chat : quasi plein écran --- */
  .chat-modal {
    width: calc(100vw - 12px);
    height: calc(100dvh - 24px);
  }
  .chat-sidebar {
    min-width: 132px;
  }

  /* --- Calculatrice : ne déborde jamais de l'écran --- */
  .calc-panel {
    right: 12px;
    bottom: 12px;
    width: min(260px, calc(100vw - 24px));
  }
}

/* --- Téléphone --- */
@media (max-width: 540px) {
  main {
    margin: 0 6px 12px;
  }

  .topbar {
    padding: 4px 6px;
  }

  .topbar-left {
    font-size: 11px;
  }

  .presence-bar {
    margin: 10px 0 8px;
    font-size: 11px;
    gap: 6px;
  }

  h2 {
    font-size: 15px;
  }

  .zone-tab,
  .prep-tab {
    padding: 6px 8px;
    font-size: 12px;
  }

  /* Les selects / inputs des filtres prennent toute la largeur dispo */
  .dashboard-filters select,
  .dashboard-filters input {
    max-width: 100%;
  }

  /* --- Chat : bouton "Envoyer" en icône seule (sinon coupé par la modale) --- */
  .chat-send-label {
    display: none;
  }
  #chatSendBtn {
    padding: 9.1px 10px;
  }
}