/* ============================================================
   Gestion des colis — styles d'interface (reconstruits)
   Sidebar, en-tête, cartes, modales, étiquettes, impression.
   La section Messagerie (thème Facebook Messenger) suit plus bas.
   ============================================================ */

/* ---------- En-tête de la page : titre + boutons Enregistrer/Annuler ---------- */

.form-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: auto; /* pousse la rangée vers le bas quand le conteneur parent est flex-column */
  margin-left: auto; /* pousse la rangée à droite quand le conteneur parent est flex-row */
  padding-top: var(--space-6, 1rem);
}

.form-footer .btn,
.form-footer button,
.form-actions-cancel,
.form-actions-submit,
.btn-save,
.btn-cancel {
  min-width: 7.5rem;
  padding: 0.65rem 1.25rem;
  border: none;
  border-radius: var(--radius-md, 0.75rem);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease, color 120ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.form-actions-cancel,
.btn-cancel {
  background: transparent;
  color: var(--primary, #0b2030);
  box-shadow: inset 0 0 0 1.5px rgba(11, 32, 48, 0.25);
}

.form-actions-cancel:hover,
.btn-cancel:hover {
  background: rgba(11, 32, 48, 0.06);
  box-shadow: inset 0 0 0 1.5px rgba(11, 32, 48, 0.4);
  transform: translateY(-1px);
}

.form-actions-cancel:active,
.btn-cancel:active {
  transform: translateY(0);
  background: rgba(11, 32, 48, 0.1);
}

.form-actions-submit,
.btn-save {
  background: var(--primary, #0b2030);
  color: #fff;
  box-shadow: var(--shadow-sm, 0 4px 14px rgba(11, 32, 48, 0.12));
}

.form-actions-submit:hover,
.btn-save:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md, 0 8px 20px rgba(11, 32, 48, 0.18));
}

.form-actions-submit:active,
.btn-save:active {
  transform: translateY(0);
  filter: brightness(0.98);
  box-shadow: var(--shadow-sm, 0 4px 14px rgba(11, 32, 48, 0.12));
}

.form-footer button:focus-visible,
.form-actions-cancel:focus-visible,
.form-actions-submit:focus-visible,
.btn-cancel:focus-visible,
.btn-save:focus-visible {
  outline: 2px solid var(--primary, #0b2030);
  outline-offset: 2px;
}

.form-footer button svg,
.form-footer button .lucide,
.form-actions-submit svg,
.form-actions-submit .lucide,
.btn-save svg,
.btn-save .lucide {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.form-actions--hidden {
  display: none;
}

/* ---------- Barre flottante (Enregistrer / Annuler, formulaire
   « Nouveau colis ») :ifixée en bas de la zone utile, à droite.
   Position calculée par positionParcelFormBar() (app.js) via les
   variables --form-float-* (contour sidebar, clavier virtuel,
   safe-area iPhone). Rendue toujours visible pendant le défilement;
   le formulaire reçoit un padding-bottom égal à sa hauteur (JS)
   pour qu'aucun champ ne reste caché sous elle. */
.form-footer--float {
  position: fixed;
  left: var(--form-float-left, 0px);
  right: var(--form-float-right, 0px);
  bottom: calc(var(--form-float-keyboard, 0px) + var(--form-float-safe, 0px));
  z-index: 45; /* au-dessus du contenu, sous modales (z-50) et lightbox (z-70) */
  margin-top: 0;   /* annule le margin-top:auto du .form-footer de base */
  margin-left: 0;
  justify-content: flex-end; /* rangée alignée à droite (demande utilisateur) */
  padding: 0.75rem 1rem;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.10);
}

@media (max-width: 640px) {
  /* Smartphone : deux boutons de même largeur dans un ordre naturel
     (Annuler à gauche, Enregistrer à droite), gap compact ; la barre
     reste fixe, au-dessus du clavier (variables JS). */
  /* Spécificité 0,2,0 (.form-footer.form-footer--float) : l'emporte sur
     le row-reverse plus bas dans le fichier (.form-footer, 0,1,0) qui
     s'appliquerait sinon aussi à cette barre et inverserait l'ordre. */
  .form-footer.form-footer--float {
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
  }
  .form-footer--float .form-actions-cancel,
  .form-footer--float .form-actions-submit {
    flex: 1 1 auto;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .form-footer {
    flex-direction: row-reverse;
    gap: 0.5rem;
  }
  .form-actions-cancel,
  .btn-cancel,
  .form-actions-submit,
  .btn-save {
    flex: 1 1 auto;
  }
}

:root {
  --space-2: 0.35rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --radius-md: 0.75rem;
  --shadow-md: 0 8px 20px rgba(11, 32, 48, 0.18);
  --shadow-lg: 0 12px 28px rgba(11, 32, 48, 0.28);
  --sidebar-item-gap: 0.15rem;
  --sidebar-item-padding-y: 0.3rem;
  --sidebar-item-margin-y: 0;
  --sidebar-gap: 0.75rem;
    --primary: hsl(22, 93%, 48%);
    --primary-dark: hsl(22, 93%, 42%);
}

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */
html, body {
    height: 100%;
}
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Utilitaire « carte » blanc ombré, partagé par les vues injectées */
.card {
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* ------------------------------------------------------------
   Basculer les icônes lune/soleil des boutons data-theme-toggle
   ------------------------------------------------------------ */
.theme-icon-sun { display: none; }
html.dark .theme-icon-sun { display: inline-block; }
html.dark .theme-icon-moon { display: none; }

/* ------------------------------------------------------------
   Espace vide en bas des pages (demande de correction).
   Les vues injectées se terminent souvent par un enfant portant une
   marge basse (mb-6 / mb-8...). Dans un conteneur défilant
   (#main-container, overflow:auto), cette marge n'est pas
   effondrée : elle s'ajoute au padding-bottom du conteneur et fait
   apparaître ~48px (24 + 24) de zone vide à fond de défilement.
   Neutraliser la marge du dernier élément de chaque vue supprime
   le décalage sans toucher au rythme vertical interne.
   ------------------------------------------------------------ */
#main-container .view > :last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------ */
#sidebar {
    width: 16rem;
    transition: width 0.3s ease, transform 0.3s ease;
}

/* Bouton flottant « Nouveau colis » : taille unique (56px) pour toutes les
   surfaces — mobile, tablette, desktop. Cœur tactile conforme Material (>48px).
   Position : à GAUCHE de l'écran (demande utilisateur). Sur écrans tactiles
   ≥ 1024px, libellé « Nouveau colis » à côté de l'icône. */
#new-parcel-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    font-size: 0.9rem;
    font-weight: 600;
}
#new-parcel-fab svg {
    width: 1.75rem;
    height: 1.75rem;
}
@media (min-width: 1024px) and (pointer: coarse) {
    #new-parcel-fab {
        width: auto;
        padding: 0 1.25rem;
        gap: 0.6rem;
        border-radius: 9999px;
    }
    #new-parcel-fab::after {
        content: 'Nouveau colis';
        display: inline;
    }
}

/* Sidebar : réduire l'espacement vertical entre les noms de pages.
   Sélecteurs préfixés #sidebar : spécificité supérieure aux utilitaires
   Tailwind p-3 / space-y-1 qui sinon écrasent ces valeurs. */
#sidebar .nav-link {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}
#sidebar nav > * + * {
    margin-top: 0.35rem;
}
#sidebar .admin-menu-title {
    margin-top: 1.25rem;
    margin-bottom: 0.4rem;
}
.app-brand {
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    /* La bordure droite de 0.67px de la sidebar mange une fine tranche du bloc :
       le width:100% s'arrête au contenu, la bande restante montre bg-sidebar
       (blanc) le long du header. Margin négatif = l'orange couvre la bordure. */
    margin-right: -1px;
    width: calc(100% + 1px);
    box-sizing: border-box;
}
.app-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.app-brand-name {
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
}
.app-brand-subtitle {
    font-size: 0.7rem;
    font-weight: 600;             /* même graisse que .app-brand-name */
    letter-spacing: 0.01em;       /* même rythme typographique que le nom */
    opacity: 0.9;                 /* légèrement moins vif : hiérarchie lisible */
    line-height: 1.3;             /* même interligne que .app-brand-text */
    white-space: nowrap;
}
.app-brand i {
    width: 1.5rem;
    height: 1.5rem;
}
.app-brand #close-sidebar {
    flex-shrink: 0;
    padding: 0.25rem;
    border-radius: 0.5rem;
}
.app-brand #close-sidebar svg {
    width: 1.25rem;
    height: 1.25rem;
}

.nav-link {
    font-size: 0.9rem;
    color: #374151;
}
.nav-link svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Icônes de la barre latérale : couleur par section pour repérer
   visuellement chaque entrée d'un coup d'œil (demande de lisibilité).
   L'entrée active reste colorée en orange (bg-primary/10 + text-primary). */
#sidebar .icon-dashboard    { color: #0ea5e9; }  /* Tableau de bord : bleu ciel    */
#sidebar .icon-parcels      { color: #8b5cf6; }  /* Liste des colis : violet       */
#sidebar .icon-add-parcel   { color: #10b981; }  /* Ajouter un colis : vert        */
#sidebar .icon-gc           { color: #f59e0b; }  /* Grands colis : or              */
#sidebar .icon-archived     { color: #06b6d4; }  /* Colis transmis : cyan          */
#sidebar .icon-my-parcels   { color: #ec4899; }  /* Mes colis : rose               */
#sidebar .icon-requests     { color: #ef4444; }  /* Réclamations : rouge           */
#sidebar .icon-users        { color: #6366f1; }  /* Utilisateurs : indigo          */
#sidebar .icon-database     { color: #64748b; }  /* Base de données : gris ardoise */
#sidebar .icon-notifications{ color: #d97706; }  /* Notifications : orange profond */
#sidebar .icon-messagerie   { color: #1877f2; }  /* Messagerie : bleu Messenger    */
#sidebar .icon-settings     { color: #475569; }  /* Paramètres : gris ardoise      */

/* View active : l'icône prend la couleur d'accent de la vue (orange) */
#sidebar .nav-link.bg-primary\/10 svg {
    color: hsl(22, 93%, 48%);
}
.admin-menu-title {
    letter-spacing: 0.05em;
}

/* Sidebar réduite (desktop) : les libellés disparaissent, la
   barre devient un rail d'icônes centré. !important : la classe
   utilitaire Tailwind w-64 posée sur l'élément serait sinon plus
   prioritaire que ce sélecteur. */
#sidebar.sidebar-collapsed {
    width: 4.25rem !important;
}
#sidebar.sidebar-collapsed .sidebar-text,
#sidebar.sidebar-collapsed .app-brand-name,
#sidebar.sidebar-collapsed .app-brand-subtitle,
#sidebar.sidebar-collapsed .user-details {
    display: none !important;
}
#sidebar.sidebar-collapsed .admin-menu-title {
    height: 0.75rem;
    overflow: hidden;
    text-indent: -9999px;
}
#sidebar.sidebar-collapsed .app-brand {
    justify-content: center;
}
#sidebar.sidebar-collapsed .app-brand #close-sidebar {
    display: none;
}
#sidebar.sidebar-collapsed .nav-link {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
#sidebar.sidebar-collapsed #user-info-container {
    justify-content: center;
}
#sidebar.sidebar-collapsed .user-details {
    display: none;
}

/* Bloc utilisateur en bas de barre latérale */
.user-details {
    min-width: 0;
    overflow: hidden;
}

/* ------------------------------------------------------------
   En-tête d'application
   ------------------------------------------------------------ */
.app-header {
    min-height: 3.25rem;
}
.app-header-title {
    font-size: 1.05rem;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-header svg {
    width: 1.25rem;
    height: 1.25rem;
}
#header-actions .nav-link svg {
    width: 1rem;
    height: 1rem;
}

/* ------------------------------------------------------------
   Apparitions animées (cartes dashboard et vues)
   ------------------------------------------------------------ */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeIn 0.25s ease both;
}
.animate-fade-in-up {
    animation: fadeInUp 0.3s ease both;
}
/* Enchaînement des cartes du tableau de bord (stagger-1 … stagger-5) */
.stagger-1 { animation: fadeInUp 0.3s ease 0.03s both; }
.stagger-2 { animation: fadeInUp 0.3s ease 0.08s both; }
.stagger-3 { animation: fadeInUp 0.3s ease 0.13s both; }
.stagger-4 { animation: fadeInUp 0.3s ease 0.18s both; }
.stagger-5 { animation: fadeInUp 0.3s ease 0.23s both; }

/* ------------------------------------------------------------
   Tableaux : enveloppe scrollable avec coins arrondis
   ------------------------------------------------------------ */
.table-scroll {
    overflow-x: auto;
    border-radius: 0.75rem;
    background: #ffffff;
}
.table-scroll::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}
.table-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}

/* ------------------------------------------------------------
   Aperçu d'image au survol des listes (grossissement doux)
   ------------------------------------------------------------ */
.parcel-img-preview {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.parcel-img-preview:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
    z-index: 5;
}

/* ------------------------------------------------------------
   Carrousel d'images (mosaïque) : flèches latérales
   ------------------------------------------------------------ */
.mosaic-grid {
    min-height: 8rem;
}
.mosaic-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mosaic-card:hover {
    transform: translateY(-2px);
}
.parcel-card {
    min-width: 0;
}
/* Badge « Emplacement » (vues Grille et Mosaïque) : Arial + couleurs claires
   (fond teinté pâle, texte saturé, fine bordure) — voir renderGridView() /
   renderMosaicView() dans assets/js/app.js */
.emplacement-badge {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
/* Compteur d'images du carrousel : badge positionné à droite sur la
   photo (mosaïque), flux normal en vue grille compacte */
.parcel-carousel-counter-right {
    position: absolute;
    right: 0.35rem;
    bottom: 0.35rem;
    z-index: 5;
}
.parcel-carousel-compact .parcel-carousel-counter-right {
    position: static;
    display: flex;
}
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.92);
    color: #374151;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.15s ease;
}
.carousel-nav:hover {
    background: #ffffff;
}
.carousel-nav svg {
    width: 0.9rem;
    height: 0.9rem;
}
.carousel-nav-prev { left: 0.35rem; }
.carousel-nav-next { right: 0.35rem; }

/* ------------------------------------------------------------
   Lightbox : aperçu en grand des photos de colis
   Proportions d'origine conservées (object-fit: contain), fond
   sombre plein écran, navigation précédent/suivant si plusieurs
   images. Z-index 70 : au-dessus des modales (z-50) et du bandeau
   bas (z-60).
   ------------------------------------------------------------ */
.parcel-lightbox {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 6, 23, 0.92); /* fond encre, glare réduit sur photo */
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 1rem;
    -webkit-tap-highlight-color: transparent;
}
.parcel-lightbox--open {
    opacity: 1;
}
.parcel-lightbox-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: min(1200px, 100%);
    max-height: 100%;
}
.parcel-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;      /* proportions d'origine */
    border-radius: 0.5rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55);
    transition: opacity 0.15s ease;
    user-select: none;
    -webkit-user-drag: none;
}
.parcel-lightbox-img--loading {
    opacity: 0;
}
/* Indicateur de chargement centré sous l'image */
.parcel-lightbox-spinner {
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #ffffff;
    animation: parcel-lightbox-spin 0.8s linear infinite;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.parcel-lightbox-spinner--visible {
    opacity: 1;
}
@keyframes parcel-lightbox-spin {
    to { transform: rotate(360deg); }
}
/* Boutons : fermeture en haut à droite, navigation au centres latéraux */
.parcel-lightbox-close,
.parcel-lightbox-nav {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(4px);
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s ease, transform 0.15s ease;
}
.parcel-lightbox-close:hover,
.parcel-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.05);
}
.parcel-lightbox-close {
    top: 1rem;
    right: 1rem;
}
.parcel-lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
}
.parcel-lightbox-nav:hover {
    transform: translateY(-50%) scale(1.05);
}
.parcel-lightbox-prev { left: 1rem; }
.parcel-lightbox-next { right: 1rem; }
/* Compteur "2 / 3" sous l'image */
.parcel-lightbox-meta {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}
.parcel-lightbox-counter {
    background: rgba(2, 6, 23, 0.7);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Smartphone : boutons plus compacts, marges réduites */
@media (max-width: 640px) {
    .parcel-lightbox {
        padding: 0.5rem;
    }
    .parcel-lightbox-close,
    .parcel-lightbox-nav {
        width: 2.25rem;
        height: 2.25rem;
    }
    .parcel-lightbox-close { top: 0.5rem; right: 0.5rem; }
    .parcel-lightbox-prev { left: 0.35rem; }
    .parcel-lightbox-next { right: 0.35rem; }
    .parcel-lightbox-meta { bottom: 0.75rem; }
}

/* ------------------------------------------------------------
   Case à cocher « SE » / « Grands colis » du formulaire
   ------------------------------------------------------------ */
.se-label {
    cursor: pointer;
}
.se-checkbox {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
}

/* ------------------------------------------------------------
   Modales (print preview déclaré dans index.php ; exports créés
   dynamiquement). La visibilité est gérée par classes utilitaires
   hidden/flex côté JS.
   ------------------------------------------------------------ */
.modal-overlay {
    will-change: opacity;
}
.modal-panel {
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
}
.modal-body {
    min-height: 0;
}

/* ------------------------------------------------------------
   Étiquette (aperçu + impression)
   ------------------------------------------------------------ */
.label-container {
    width: 100%;
    max-width: 90mm;
    margin: 0 auto;
    padding: 4mm;
    display: flex;
    flex-direction: column;
    gap: 2mm;
    box-sizing: border-box;
    page-break-inside: avoid;
}
.label-box {
    border: 2px solid #000;
    border-radius: 8px;
    padding: 4px 8px;
    text-align: center;
    font-weight: bold;
}
.label-tracking {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1.1;
}
.label-qr {
    width: 70px;
    height: 70px;
}
.label-section {
    padding-top: 1mm;
    border-top: 1px dashed #d1d5db;
}
.label-title {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    font-weight: 700;
}
.label-value {
    font-size: 0.8rem;
    color: #111827;
    word-break: break-word;
    line-height: 1.25;
}

/* Zone de préparation de l'impression : elle n'existe qu'à
   l'impression (masquée à l'écran, visible en @media print). */
#print-label-area {
    display: none;
}

@media print {
    @page {
        margin: 0;
    }
    body * {
        visibility: hidden;
    }
    #print-label-area, #print-label-area * {
        visibility: visible;
    }
    #print-label-area {
        display: block !important;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        max-width: 100mm;
        padding: 5mm;
        background: white;
        font-family: 'Inter', sans-serif;
        color: black;
    }
    html, body {
        height: 100vh;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
    }
}

/* Les toasts passent au-dessus des fenêtres flottantes */
#toast-container {
    z-index: 60;
}

/* ============================================================
   Messagerie interne — thème « Facebook Messenger »
   Dominante bleu/blanc : en-tête #1877F2, bulles envoyées
   #0084FF, bulles reçues gris-clair, avatars colorés avec
   pastille de présence, composer moderne à icônes.
   ============================================================ */
.msg-panel {
    box-sizing: border-box;
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    height: min(72vh, 34rem);
    height: min(72dvh, 34rem);
    max-height: calc(100vh - 6rem);
    max-height: calc(100dvh - 6rem);
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e4e6eb;
    border-radius: 1rem;
    box-shadow: 0 22px 50px rgba(4, 36, 87, 0.22);
}

/* Fenêtre fermée : l'icône flottante reprend la main */
.msg-panel--off {
    display: none !important;
}

/* ----------------------------------------------------------
   En-tête (identité du correspondant + réduire / fermer)
   ---------------------------------------------------------- */
.msg-head {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    background: #1877f2;
    color: #ffffff;
}
.msg-head-id {
    flex: 1 1 auto;
    min-width: 0;
}
.msg-head-title {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-head-sub {
    display: block;
    font-size: 0.6875rem;
    line-height: 1.2;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-head-mark,
.msg-avatar--head {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.msg-icon-btn {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    transition: background 0.15s ease;
}
.msg-icon-btn:hover {
    background: rgba(255, 255, 255, 0.32);
}

/* ----------------------------------------------------------
   Fenêtre réduite : seule la barre d'en-tête subsiste, remontée
   au-dessus de l'icône flottante pour ne jamais la recouvrir
   ---------------------------------------------------------- */
.msg-panel--min {
    height: auto;
    bottom: 5.75rem;
}
.msg-panel--min .msg-body,
.msg-panel--min .msg-list,
.msg-panel--min .msg-thread,
.msg-panel--min .msg-composer {
    display: none !important;
}
.msg-panel--min [data-msg-act="min"] {
    display: none;
}
.msg-panel--min .msg-head {
    cursor: pointer;
}
@media (min-width: 640px) {
    .msg-panel {
        left: auto;
        right: 1.5rem;
        bottom: 1.5rem;
        width: 24rem;
        height: 32rem;
    }
    .msg-panel--min {
        bottom: 5.75rem;
        width: 24rem;
    }
}

/* ----------------------------------------------------------
   Liste des utilisateurs
   ---------------------------------------------------------- */
.msg-body {
    padding: 0.6rem 0.75rem;
}
.msg-search-wrap {
    padding: 0.6rem 0.75rem 0;
}
.msg-search {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #e4e6eb;
    border-radius: 9999px;
    padding: 0.45rem 0.85rem;
    font-size: 0.8125rem;
    background: #f0f2f5;
    outline: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.msg-search:focus {
    background: #ffffff;
    border-color: #1877f2;
    box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.18);
}
.msg-list {
    padding: 0.5rem 0.5rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.msg-row {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.msg-row:hover {
    background: #eef3ff;
    border-color: #d6e2fb;
}
.msg-row-main {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}
.msg-row-top,
.msg-row-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}
.msg-row-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #050505;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-row-time {
    font-size: 0.625rem;
    color: #8a8d91;
    flex-shrink: 0;
    white-space: nowrap;
}
.msg-row-preview {
    font-size: 0.75rem;
    color: #65676b;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-row-role {
    display: block;
    font-size: 0.625rem;
    color: #8a8d91;
}
.msg-unread {
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3rem;
    border-radius: 9999px;
    background: #1877f2;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ----------------------------------------------------------
   Avatars : initiale sur fond coloré + pastille « en ligne »
   (pastille commune aux listes, en-têtes et bulles)
   ---------------------------------------------------------- */
.msg-avatar {
    box-sizing: border-box;
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.msg-avatar .status-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    border: 2px solid #ffffff;
    background: #d8dce2;
}
.msg-avatar .status-dot--online {
    background: #31a24c;
}
.msg-avatar--head {
    width: 2.1rem;
    height: 2.1rem;
    font-size: 0.8125rem;
}
.msg-avatar--head .status-dot {
    right: 0;
    bottom: 0;
    border-color: #1877f2;
}
.msg-avatar--soft {
    background: rgba(24, 119, 242, 0.12);
    color: #1877f2;
}
.msg-state {
    text-align: center;
    font-size: 0.75rem;
    color: #8a8d91;
    padding: 1.25rem 0.75rem;
    line-height: 1.5;
}
.msg-state--error {
    color: #dc2626;
}

/* ----------------------------------------------------------
   Conversation : bulles envoyées (droite, bleu) / reçues
   (gauche, gris clair) + avatar de l'expéditeur sur les reçues
   ---------------------------------------------------------- */
.msg-thread {
    padding: 0.7rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: #f5f6fa;
}
.msg-line {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
}
.msg-line--me {
    justify-content: flex-end;
}
.msg-line--other {
    justify-content: flex-start;
}
.msg-avatar--bubble {
    width: 1.65rem;
    height: 1.65rem;
    font-size: 0.6875rem;
}
.msg-bubble {
    max-width: 85%;
    padding: 0.45rem 0.7rem;
    border-radius: 1.05rem;
    font-size: 0.8125rem;
    box-shadow: 0 1px 1px rgba(17, 45, 92, 0.12);
}
.msg-bubble--me {
    background: #0084ff;
    color: #ffffff;
    border-bottom-right-radius: 0.3rem;
}
.msg-bubble--other {
    background: #ffffff;
    color: #050505;
    border-bottom-left-radius: 0.3rem;
}
.msg-who {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #65676b;
    margin-bottom: 0.1rem;
}
.msg-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.35;
}
.msg-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
    font-size: 0.625rem;
    opacity: 0.85;
    margin-top: 0.15rem;
}
.msg-tick {
    width: 0.75rem;
    height: 0.75rem;
}

/* ----------------------------------------------------------
   Champ de saisie : pilule grise + icônes (pièce jointe,
   envoi circulaire bleu) — style Messenger
   ---------------------------------------------------------- */
.msg-composer {
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    padding: 0.5rem 0.55rem;
    border-top: 1px solid #e4e6eb;
    background: #ffffff;
    /* flex-wrap : l'aperçu de pièce jointe prend toute la largeur sur sa propre ligne */
    flex-wrap: wrap;
}
.msg-icon-attach {
    box-sizing: border-box;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #f0f2f5;
    color: #65676b;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.msg-icon-attach:hover {
    background: #e4e6eb;
}
.msg-input {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    resize: none;
    max-height: 6rem;
    border: 1px solid #e4e6eb;
    border-radius: 9999px;
    padding: 0.5rem 0.85rem;
    font-size: 0.875rem;
    font-family: inherit;
    line-height: 1.35;
    background: #f0f2f5;
    outline: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.msg-input:focus {
    background: #ffffff;
    border-color: #0084ff;
    box-shadow: 0 0 0 2px rgba(0, 132, 255, 0.18);
}
.msg-send {
    box-sizing: border-box;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: #0084ff;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.1s ease;
}
.msg-send:hover {
    background: #006fdb;
}
.msg-send:active {
    transform: scale(0.94);
}
.msg-send:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.msg-send--paperplane {
    background: transparent;
    color: #0084ff;
}
.msg-send--paperplane:hover {
    background: #f0f2f5;
    color: #006fdb;
}
.msg-send--paperplane:disabled {
    color: #c9ccd1;
    background: transparent;
}

/* Pièce jointe image du composer : champ fichier masqué + aperçu
   (photo miniature, taille compressée, bouton de retrait) */
.msg-attach-input {
    display: none;
}
.msg-attach-preview {
    box-sizing: border-box;
    flex: 1 0 100%;
    order: -1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.45rem;
    margin-bottom: 0.15rem;
    background: #f0f2f5;
    border: 1px solid #e4e6eb;
    border-radius: 0.75rem;
}
.msg-attach-preview img {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 0.5rem;
    display: block;
    flex-shrink: 0;
}
.msg-attach-info {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.7rem;
    color: #65676b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msg-attach-remove {
    box-sizing: border-box;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #e4e6eb;
    color: #65676b;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.msg-attach-remove:hover {
    background: #d8dce2;
    color: #b03434;
}

/* Photo jointe affichée dans une bulle de conversation
   (clic = ouverture en grand) */
.msg-img {
    display: block;
    width: 100%;
    max-width: 15rem;
    max-height: 15rem;
    object-fit: cover;
    border-radius: 0.75rem;
    margin: 0.15rem 0;
    cursor: zoom-in;
    background: #e4e6eb;
}

/* Icônes lucide rendues dans la fenêtre : taille explicite
   (les <i> convertis en <svg> n'ont plus de classe utilitaire) */
.msg-panel i[data-lucide],
.msg-panel svg,
.msgpage i[data-lucide],
.msgpage svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}
.msg-panel .msg-tick,
.msgpage .msg-tick {
    width: 0.75rem;
    height: 0.75rem;
}

/* ----------------------------------------------------------
   Lisibilité mobile/tablette de la messagerie (≤1023 px) :
   textes des messages, noms d'utilisateurs et avatars
   légèrement agrandis. Desktop (>1023 px) inchangé.
   Le sélecteur spécifique .msgpage/.msg-panel garde la priorité
   sur les règles plus générales définies plus haut.
   ---------------------------------------------------------- */
@media (max-width: 1023px) {
    .msg-row {
        padding: 0.55rem 0.65rem;
    }
    .msg-row-name {
        font-size: 0.9375rem;
    }
    .msg-row-preview {
        font-size: 0.8125rem;
    }
    .msg-row-time,
    .msg-row-role {
        font-size: 0.6875rem;
    }
    .msg-avatar {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }
    .msg-avatar .status-dot {
        width: 0.6875rem;
        height: 0.6875rem;
    }
    .msg-avatar--head,
    .msg-panel .msg-avatar--head,
    .msgpage .msg-avatar--head {
        width: 2.4rem;
        height: 2.4rem;
        font-size: 0.9375rem;
    }
    .msg-avatar--bubble {
        width: 2rem;
        height: 2rem;
        font-size: 0.8125rem;
    }
    .msg-bubble {
        font-size: 0.9375rem;
        padding: 0.5rem 0.75rem;
    }
    .msg-who {
        font-size: 0.6875rem;
    }
    .msg-meta {
        font-size: 0.6875rem;
    }
    .msg-input {
        font-size: 1rem;
    }
    .msg-state {
        font-size: 0.8125rem;
    }
}

/* Les toasts restent au-dessus de la fenêtre de conversation */
#toast-container {
    z-index: 60;
}

/* ----------------------------------------------------------
   Page plein écran « Messagerie » (route /messagerie)
   Un seul volet sur smartphone (bascule .msgpage--chat), liste
   + conversation côte à côte à partir de 768 px.
   ---------------------------------------------------------- */
/* Page Messagerie : ancrée à la hauteur du conteneur principal.
   IMPORTANT : ces règles ne s'appliquent que lorsque la vue est affichée.
   Sans le garde-fou :not(.hidden), display:flex (sélecteur par ID) écrase
   la classe tailwind .hidden du routeur : la messagerie restait affichée
   en bas des autres pages après navigation (bug signalé). */
#view-messagerie:not(.hidden) {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.msgpage {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
    /* Hauteur de la vue : la page ne grandit plus avec le contenu.
       #main-container (overflow-auto) ne défile donc plus — la liste des
       utilisateurs reste fixe, seul le fil défile indépendamment. */
    height: 100%;
}
.msgpage-list,
.msgpage-thread {
    display: flex;
    flex-direction: column;
    overflow: hidden;       /* chaque volet gère son propre scroll */
    min-height: 0;          /* autorise le rétrécissement en flex column */
}
.msgpage-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.75rem 0.35rem;
}
.msgpage-thread .msg-head {
    background: #ffffff;
    color: #050505;
    border-bottom: 1px solid #e4e6eb;
}
.msgpage-thread .msg-head-sub {
    color: #65676b;
    opacity: 1;
}
.msgpage-thread .msg-icon-btn {
    background: #f0f2f5;
    color: #606770;
}
.msgpage-thread .msg-icon-btn:hover {
    background: #e4e6eb;
}
.msgpage-thread .msg-avatar--head {
    background: rgba(24, 119, 242, 0.12);
    color: #1877f2;
}
/* Réduire / Fermer n'ont pas de sens dans la page (la barre latérale suffit) */
.msgpage-thread [data-msg-act="min"],
.msgpage-thread [data-msg-act="close"] {
    display: none;
}

@media (max-width: 767px) {
    .msgpage--chat .msgpage-list { display: none; }
    .msgpage:not(.msgpage--chat) .msgpage-thread { display: none; }
}
@media (min-width: 768px) {
    .msgpage { flex-direction: row; align-items: stretch; }
    .msgpage-list { width: 20rem; flex-shrink: 0; }
    .msgpage-thread { flex: 1 1 auto; min-width: 0; }
    /* Les deux volets sont visibles : le retour n'a plus de sens */
    .msgpage-thread [data-msg-act="back"] { display: none; }
}

/* ----------------------------------------------------------
   Indicateur « en train d'écrire… »
   ---------------------------------------------------------- */
.msg-row-preview.is-typing {
    color: #1877f2;
    font-style: italic;
    font-weight: 600;
}
.msg-head-sub.is-typing {
    font-weight: 700;
    animation: msg-blink 1.2s ease-in-out infinite;
}
@keyframes msg-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* ----------------------------------------------------------
   Accusé de lecture : « Vu 10:32 » en gris clair discret, sur
   les deux types de bulle — plus élégant que le vert, cohérent
   avec le thème bleu/blanc et lisible sur les deux fonds.
   ---------------------------------------------------------- */
.msg-time {
    color: rgba(255, 255, 255, 0.75);
}
.msg-bubble--other .msg-time {
    color: #8fd0ff;
}
.msg-time.is-read,
.msg-bubble--me .msg-tick.is-read {
    color: #b7d4f5;
}
.msg-bubble--me .msg-tick.is-read {
    color: #b7d4f5;
}
.msg-bubble--other .msg-tick,
.msg-bubble--other .msg-meta {
    color: #98a2b3;
}

/* ============================================================
   Bulles de conversations réduites (dock Messenger) : une bulle
   compacte par conversation réduite, cliquable, empilées côte
   à côte au-dessus de l'icône flottante ; visibles dans toute
   l'application (elles survivent à la navigation).
   ============================================================ */
.messages-docks {
    position: fixed;
    right: 1.25rem;
    bottom: 6.25rem;
    z-index: 45;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    gap: 0.5rem;
    max-width: calc(100vw - 2.5rem);
    overflow-x: auto;
    padding: 0.25rem;
    scrollbar-width: none;
    pointer-events: none;
}
.messages-docks::-webkit-scrollbar {
    display: none;
}
.msg-dock {
    pointer-events: auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.75rem 0.3rem 0.35rem;
    border-radius: 9999px;
    background: #ffffff;
    border: 1px solid #e4e6eb;
    box-shadow: 0 6px 16px rgba(4, 36, 87, 0.18);
    cursor: pointer;
    user-select: none;
    transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    animation: msg-dock-in 0.18s ease;
}
.msg-dock:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(4, 36, 87, 0.24);
    border-color: #d0e1fb;
}
.msg-dock:active {
    transform: scale(0.96);
}
@keyframes msg-dock-in {
    from { opacity: 0; transform: translateY(8px) scale(0.9); }
    to   { opacity: 1; transform: none; }
}
.msg-dock .msg-dock-avatar {
    box-sizing: border-box;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    color: #fff;
    font-weight: 700;
    font-size: 0.8125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.msg-dock .msg-dock-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: #050505;
    max-width: 7.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-dock .msg-dock-unread {
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3rem;
    border-radius: 9999px;
    background: #0084ff;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.msg-dock .msg-dock-close {
    box-sizing: border-box;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f0f2f5;
    color: #606770;
    flex-shrink: 0;
    font-size: 0.75rem;
    transition: background 0.15s ease;
}
.msg-dock .msg-dock-close:hover {
    background: #e4e6eb;
}

/* Sur smartphone : avatars ronds seuls (nom masqué), scroll horizontal */
@media (max-width: 640px) {
    .messages-docks {
        right: 0.9rem;
        bottom: 6rem;
        gap: 0.4rem;
    }
    .msg-dock {
        padding: 0.35rem;
        border-radius: 9999px;
    }
    .msg-dock .msg-dock-name,
    .msg-dock .msg-dock-close {
        display: none;
    }
}

/* ----------------------------------------------------------
   Icône flottante de la messagerie : ronde, bleue Messenger
   (la couleur Tailwind bg-primary du markup est écrasée ici
   car le module a désormais sa propre identité visuelle)
   ---------------------------------------------------------- */
#messages-fab {
    background: #1877f2 !important;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(24, 119, 242, 0.35);
}
#messages-fab:hover {
    background: #166fe5 !important;
}

/* ============================================================
   MODE SOMBRE
   L'application utilise Tailwind (CDN) avec darkMode:'class' :
   le thème sombre s'active via la classe .dark sur <html>.
   La quasi-totalité du markup est généré en JS (app.js) avec des
   classes utilitaires figées : plutôt que de réécrire des milliers
   de chaînes, on re-mappe ici, sous html.dark, les utilitaires
   réellement employés dans le projet. La palette : points de surface
   en ardoise (slate) pour conserver la hiérarchie et le contraste.
   ============================================================ */
html.dark {
    color-scheme: dark;
}

/* ---------- Surfaces de base ---------- */
html.dark body {
    background-color: #0f172a;
    color: #e2e8f0;
}
html.dark .bg-background {
    background-color: #0f172a;
}
html.dark .bg-sidebar {
    background-color: #111827;
}
html.dark .bg-white {
    background-color: #1e293b;
}
html.dark .hover\:bg-white:hover {
    background-color: rgba(226, 232, 240, 0.08);
}
html.dark .bg-white\/90,
html.dark .bg-white\/80,
html.dark .bg-white\/70,
html.dark .bg-white\/60,
html.dark .bg-white\/50 {
    background-color: rgba(30, 41, 59, 0.9);
}

/* Surfaces dégradées de gris (fonds légèrement ordinaires) */
html.dark .bg-gray-50 {
    background-color: #1a2334;
}
html.dark .from-gray-50.to-gray-100,
html.dark .from-gray-50 {
    --tw-gradient-from: #1a2334;
    background-image: none;
    background-color: #1a2334;
}
html.dark .bg-gray-100 {
    background-color: #243044;
}
html.dark .bg-gray-200 {
    background-color: #334155;
}

/* Survol des surfaces neutres (barre latérale, lignes, boutons) */
html.dark .hover\:bg-gray-100:hover {
    background-color: #243044;
}
html.dark .hover\:bg-gray-50:hover {
    background-color: #1a2334;
}
html.dark .hover\:bg-gray-200:hover {
    background-color: #334155;
}

/* ---------- Texte : graduations ardoise lisibles ---------- */
html.dark .text-gray-900 { color: #f1f5f9; }
html.dark .text-gray-800 { color: #e2e8f0; }
html.dark .text-gray-700 { color: #cbd5e1; }
html.dark .text-gray-600 { color: #a8b3c4; }
html.dark .text-gray-500 { color: #94a3b8; }
html.dark .text-gray-400 { color: #8492a6; }
html.dark .text-gray-300 { color: #64748b; }
html.dark .text-slate-500, html.dark .text-slate-600 { color: #94a3b8; }
html.dark .text-black { color: #f1f5f9; }
html.dark .hover\:text-gray-900:hover,
html.dark .hover\:text-gray-700:hover { color: #f1f5f9; }

/* Textes « teintés » : on éclaircit les variantes foncées prévues
   pour fond clair afin de garder un contraste correct sur fond sombre */
html.dark .text-red-700, html.dark .text-red-600 { color: #fca5a5; }
html.dark .text-red-500 { color: #f87171; }
html.dark .text-green-700, html.dark .text-green-600 { color: #6ee7b7; }
html.dark .text-emerald-600 { color: #6ee7b7; }
html.dark .text-blue-700, html.dark .text-blue-600 { color: #93c5fd; }
html.dark .text-blue-500 { color: #60a5fa; }
html.dark .text-sky-700 { color: #7dd3fc; }
html.dark .text-amber-700, html.dark .text-amber-800 { color: #fcd34d; }
html.dark .text-amber-600 { color: #fbbf24; }
html.dark .text-orange-700, html.dark .text-orange-600 { color: #fdba74; }
html.dark .text-orange-100 { color: #fed7aa; }
html.dark .text-purple-700 { color: #d8b4fe; }

/* ---------- Bordures ---------- */
html.dark .border-gray-300 { border-color: #3f4c63; }
html.dark .border-gray-200 { border-color: #334155; }
html.dark .border-gray-100 { border-color: #2b3648; }
html.dark .border-slate-200 { border-color: #334155; }
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #2b3648; }
html.dark .border-white { border-color: rgba(226, 232, 240, 0.25); }

/* Pastilles / bandes teintées : fond clair plein -> translucide coloré,
   le texte apparenté passe dans sa variante claire (définie ci-dessus) */
html.dark .bg-red-100   { background-color: rgba(239, 68, 68, 0.16); }
html.dark .bg-red-50    { background-color: rgba(239, 68, 68, 0.10); }
html.dark .bg-green-100 { background-color: rgba(16, 185, 129, 0.16); }
html.dark .bg-emerald-50{ background-color: rgba(16, 185, 129, 0.10); }
html.dark .bg-blue-100  { background-color: rgba(59, 130, 246, 0.16); }
html.dark .bg-blue-50   { background-color: rgba(59, 130, 246, 0.10); }
html.dark .bg-sky-100   { background-color: rgba(14, 165, 233, 0.16); }
html.dark .bg-violet-100{ background-color: rgba(139, 92, 246, 0.16); }
html.dark .bg-purple-100{ background-color: rgba(168, 85, 247, 0.16); }
html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.16); }
html.dark .bg-amber-50  { background-color: rgba(245, 158, 11, 0.10); }
html.dark .bg-orange-100{ background-color: rgba(234, 88, 12, 0.16); }
html.dark .bg-orange-50 { background-color: rgba(234, 88, 12, 0.10); }
html.dark .hover\:bg-red-50:hover      { background-color: rgba(239, 68, 68, 0.14); }
html.dark .hover\:bg-blue-50:hover     { background-color: rgba(59, 130, 246, 0.14); }
html.dark .hover\:bg-emerald-50:hover  { background-color: rgba(16, 185, 129, 0.14); }
html.dark .hover\:bg-orange-50:hover   { background-color: rgba(234, 88, 12, 0.14); }
html.dark .hover\:bg-orange-100:hover  { background-color: rgba(234, 88, 12, 0.20); }

/* Champs de saisie : fond légèrement surélevé + bordure visible */
html.dark input,
html.dark textarea,
html.dark select {
    background-color: #0f172a;
    color: #e2e8f0;
    border-color: #3f4c63;
}
html.dark input[type="checkbox"],
html.dark input[type="radio"] {
    background-color: #1e293b;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b;
}
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
    border-color: var(--primary);
}

/* ombres : plus discrètes et profondes sur fond sombre */
html.dark .shadow,
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl {
    --tw-shadow-color: rgba(0, 0, 0, 0.55);
    --tw-shadow: var(--tw-shadow-colored);
}

/* ---------- Classes maison qui utilisent du blanc/ardoise figé ---------- */
html.dark .card {
    background: #1e293b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.28);
}
html.dark .table-scroll {
    background: #1e293b;
}
html.dark .table-scroll::-webkit-scrollbar-thumb {
    background: #475569;
}
html.dark .nav-link {
    color: #cbd5e1;
}
html.dark .carousel-nav {
    background: rgba(30, 41, 59, 0.92);
    color: #e2e8f0;
    border-color: #3f4c63;
}
html.dark .carousel-nav:hover {
    background: #1e293b;
}
html.dark .label-value {
    color: #e2e8f0;
}

/* ---------- Modales ---------- */
html.dark .modal-panel,
html.dark .bg-white.rounded-xl,
html.dark .bg-white.rounded-2xl,
html.dark .bg-white.rounded-3xl {
    background-color: #1e293b;
}

/* ---------- Messagerie interne (thème Messenger adapté au sombre) ---------- */
html.dark .msg-panel {
    background: #1e293b;
    border-color: #334155;
}
html.dark .msg-row:hover {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.25);
}
html.dark .msg-row-name { color: #f1f5f9; }
html.dark .msg-row-preview, html.dark .msg-row-role, html.dark .msg-row-time { color: #94a3b8; }
html.dark .msg-thread {
    background: #0f172a;
}
html.dark .msg-bubble--other {
    background: #334155;
    color: #e2e8f0;
}
html.dark .msg-who { color: #94a3b8; }
html.dark .msg-search {
    background: #243044;
    border-color: #3f4c63;
    color: #e2e8f0;
}
html.dark .msg-search:focus {
    background: #1e293b;
}
html.dark .msg-composer {
    background: #1e293b;
    border-top-color: #334155;
}
html.dark .msg-input {
    background: #243044;
    border-color: #3f4c63;
    color: #e2e8f0;
}
html.dark .msg-input:focus {
    background: #1e293b;
}
html.dark .msg-icon-attach {
    background: #243044;
    color: #94a3b8;
}
html.dark .msg-icon-attach:hover { background: #334155; }
html.dark .msgpage-thread .msg-head {
    background: #1e293b;
    color: #e2e8f0;
    border-bottom-color: #334155;
}
html.dark .msgpage-thread .msg-head-sub { color: #94a3b8; }
html.dark .msgpage-thread .msg-icon-btn {
    background: #243044;
    color: #94a3b8;
}
html.dark .msgpage-thread .msg-icon-btn:hover { background: #334155; }
html.dark .msg-dock {
    background: #1e293b;
    border-color: #334155;
}
html.dark .msg-dock .msg-dock-name { color: #f1f5f9; }
html.dark .msg-dock-close { background: #243044; color: #94a3b8; }
html.dark .msg-dock-close:hover { background: #334155; }
html.dark .msg-attach-preview { background: #243044; border-color: #3f4c63; }
html.dark .msg-attach-info { color: #94a3b8; }
html.dark .msg-state { color: #94a3b8; }

/* ---------- Barre flottante du formulaire « Nouveau colis » ---------- */
html.dark .form-footer--float {
    background: #1e293b;
    border-top-color: #334155;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.45);
}

/* ---------- Impression : toujours claire, quel que soit le thème ---------- */
@media print {
    html.dark { color-scheme: light; }
}