:root {
  --bg: #f4f6f9;
  --panel: #ffffff;
  --border: #e2e8f0;
  --text: #1e293b;
  --text-muted: #64748b;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --topbar-bg: #4338ca;
  --topbar-text: #ffffff;
  --topbar-text-muted: #c7d2fe;
  --green: #16a34a;
  --red: #dc2626;
  --orange: #ea580c;
  --purple: #7c3aed;
  --gray: #64748b;
  --radius: 8px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Tahoma, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}
a { color: var(--primary); text-decoration: none; }

.app { display: flex; height: 100vh; overflow: hidden; }

/* Sidebar */
.sidebar {
  width: 220px;
  background: #111827;
  color: #e5e7eb;
  flex-shrink: 0;
  padding: 16px 0;
  transition: width .15s ease;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  padding: 0 20px 16px;
  border-bottom: 1px solid #1f2937;
  margin-bottom: 12px;
  white-space: nowrap;
}
.sidebar-brand .brand-full { display: flex; align-items: center; gap: 10px; }
.sidebar-brand .brand-logo { width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0; }
.sidebar-brand .brand-short { display: none; }
.sidebar-brand .brand-short .brand-logo { width: 22px; height: 22px; }
.nav { display: flex; flex-direction: column; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 20px;
  color: #cbd5e1;
  white-space: nowrap;
}
.nav-link:hover { background: #1f2937; color: #fff; }
.nav-link.active { background: var(--primary); color: #fff; }
.nav-icon { width: 20px; text-align: center; flex-shrink: 0; }

.nav-section { margin-top: 14px; padding: 6px 20px 4px; border-top: 1px solid #1f2937; }
.nav-section:first-child { margin-top: 0; border-top: none; }
.nav-section-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b7280;
}
.nav-section-label:empty { display: none; }

/* Sidebar réduite (icônes seules) — desktop */
html.sidebar-collapsed .sidebar { width: 64px; }
html.sidebar-collapsed .sidebar-brand .brand-full { display: none; }
html.sidebar-collapsed .sidebar-brand .brand-short { display: block; text-align: center; }
html.sidebar-collapsed .nav-link { justify-content: center; padding: 5px 10px; }
html.sidebar-collapsed .nav-label { display: none; }
html.sidebar-collapsed .nav-section { padding: 6px 12px 4px; }
html.sidebar-collapsed .nav-section-label { display: none; }

.sidebar-toggle {
  background: none;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius);
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: var(--topbar-text);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-toggle:hover { background: rgba(255,255,255,.15); }
.sidebar-backdrop { display: none; }

/* Main */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar {
  height: 56px;
  flex-shrink: 0;
  background: var(--topbar-bg);
  border-bottom: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 20px;
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar-user { display: flex; align-items: center; gap: 12px; }
.topbar-search { position: relative; flex: 1 1 auto; min-width: 0; max-width: 420px; }
.topbar-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}
.topbar-search-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  max-height: 400px;
  overflow-y: auto;
  padding: 4px;
  z-index: 60;
}
.topbar-search-panel.open { display: block; }
.topbar-search-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  padding: 8px 10px 4px;
}
.topbar-search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
}
.topbar-search-item:hover { background: var(--bg); }
.topbar-search-item-sub { color: var(--text-muted); font-size: 12px; }
.topbar-search-empty { padding: 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
@media (max-width: 640px) {
  .topbar-search { display: none; }
}

/* Habillage clair des éléments de la topbar sur son fond foncé (--topbar-bg) */
.topbar .lang-switcher-btn {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.3);
  color: var(--topbar-text);
}
.topbar .lang-switcher-btn:hover { background: rgba(255,255,255,.22); }
.topbar .lang-switcher-caret { color: var(--topbar-text-muted); }
.topbar .tour-btn { border-color: rgba(255,255,255,.35); color: var(--topbar-text); }
.topbar .tour-btn:hover { background: rgba(255,255,255,.15); color: var(--topbar-text); }
.topbar .notif-menu-toggle:hover { background: rgba(255,255,255,.15); }
.topbar .user-menu-toggle { color: var(--topbar-text); }
.topbar .user-menu-toggle:hover { background: rgba(255,255,255,.15); }
.topbar .user-menu-caret { color: var(--topbar-text-muted); }
.content { flex: 1; overflow-y: auto; padding: 24px; }

/* Sidebar en superposition — mobile/tablette */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 240px;
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 1001;
  }
  html[dir="rtl"] .sidebar { left: auto; right: 0; transform: translateX(100%); }
  .sidebar.mobile-open { transform: translateX(0); }
  html.sidebar-collapsed .sidebar { width: 240px; } /* la réduction desktop ne s'applique pas en mobile */
  html.sidebar-collapsed .sidebar-brand .brand-full { display: block; }
  html.sidebar-collapsed .sidebar-brand .brand-short { display: none; }
  html.sidebar-collapsed .nav-link { justify-content: flex-start; padding: 5px 20px; }
  html.sidebar-collapsed .nav-label { display: inline; }
  html.sidebar-collapsed .nav-section { padding: 6px 20px 4px; }
  html.sidebar-collapsed .nav-section-label { display: block; }
  .sidebar-backdrop.open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 1000;
  }
  .content { padding: 16px; }
}

/* Flash */
.flash { padding: 10px 16px; border-radius: var(--radius); margin-bottom: 16px; }
.flash-success { background: #dcfce7; color: #166534; }
.flash-error { background: #fee2e2; color: #991b1b; }

/* Cards */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.kpi-label { color: var(--text-muted); font-size: 13px; margin-bottom: 6px; }
.kpi-value { font-size: 26px; font-weight: 700; }

.chart-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.chart-view-toggle { display: flex; gap: 4px; }
.chart-view-btn {
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text-muted);
  cursor: pointer;
}
.chart-view-btn:hover { background: var(--bg); }
.chart-view-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.chart-view-panel { display: none; }
.chart-view-panel.active { display: block; }

/* Page header */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.page-header h1 { font-size: 20px; margin: 0; }

/* Récapitulatif de montants (total produits / frais de livraison / total général) —
   même langage visuel que le bon de commande imprimable (commande_print.php). */
.totaux { max-width: 320px; margin-inline-start: auto; }
.totaux p { display: flex; justify-content: space-between; gap: 12px; margin: 4px 0; font-size: 13.5px; }
.totaux .total-final { font-size: 16px; font-weight: 700; border-top: 2px solid var(--text); padding-top: 8px; margin-top: 8px; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}
.btn:hover { background: var(--primary-dark); }
.btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
.btn-outline:hover { background: var(--bg); }
.btn-danger { background: var(--red); }
.btn-danger:hover { background: #b91c1c; }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* Table */
.table-wrap { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; overflow-y: visible; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: start; padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; }
.sort-link { color: inherit; text-decoration: none; }
.sort-link:hover { color: var(--text); text-decoration: underline; }

/* En-tête figé pendant le défilement vertical de la page (tables larges/longues) */
.table-wrap thead th { position: sticky; top: 0; background: var(--panel); z-index: 2; }

/* Ombres de bord signalant qu'un tableau a des colonnes cachées par défilement horizontal
   (la barre de défilement native reste souvent invisible tant qu'on ne la survole pas —
   macOS, tactile). Le wrapper ne défile pas lui-même : les ombres restent donc fixées aux
   bords tandis que .table-wrap défile en dessous. Classes can-scroll-start/-end ajoutées en
   JS (voir commandes.php) selon la position de défilement réelle. */
.table-scroll-shadow { position: relative; }
.table-scroll-shadow::before, .table-scroll-shadow::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 28px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 3;
}
.table-scroll-shadow::before { inset-inline-start: 0; background: linear-gradient(to right, rgba(15,23,42,.12), transparent); }
.table-scroll-shadow::after { inset-inline-end: 0; background: linear-gradient(to left, rgba(15,23,42,.12), transparent); }
.table-scroll-shadow.can-scroll-start::before { opacity: 1; }
.table-scroll-shadow.can-scroll-end::after { opacity: 1; }

/* Colonnes figées pendant le défilement horizontal de commandes.php : case à cocher
   (col-sticky-checkbox, 40px, si présente), puis icône "voir" + actions rapides (à
   valider/dévalider/corbeille — col-sticky-voir-*, largeur fixe plus large que
   .col-icon car elle contient plusieurs boutons), puis référence (col-sticky-ref-*,
   largeur variable, dernière de la série figée). Deux variantes des classes voir/ref
   selon que la case à cocher est présente ou non, pour que le décalage en pixels de
   chaque colonne figée reste exact dans les deux cas. */
.col-sticky-checkbox, .col-sticky-voir-cb, .col-sticky-voir-nocb, .col-sticky-ref-cb, .col-sticky-ref-nocb {
  position: sticky; background: var(--row-bg, var(--panel)); z-index: 1;
}
.col-sticky-checkbox { inset-inline-start: 0; }
.col-sticky-voir-nocb { inset-inline-start: 0; }
.col-sticky-voir-cb { inset-inline-start: 40px; }
.col-sticky-ref-nocb { inset-inline-start: 150px; }
.col-sticky-ref-cb { inset-inline-start: 190px; }
/* .table-wrap ajouté au sélecteur pour battre la spécificité de ".table-wrap thead th"
   (z-index:2) plus bas dans ce fichier — sinon cette règle, censée faire passer les
   colonnes figées de l'en-tête devant, était silencieusement annulée par la règle
   générique de l'en-tête collant, et l'en-tête "Référence" perdait la bataille de
   superposition face aux en-têtes suivants au défilement horizontal. */
.table-wrap thead .col-sticky-checkbox, .table-wrap thead .col-sticky-voir-cb, .table-wrap thead .col-sticky-voir-nocb, .table-wrap thead .col-sticky-ref-cb, .table-wrap thead .col-sticky-ref-nocb { z-index: 3; }
tbody tr:hover .col-sticky-checkbox, tbody tr:hover .col-sticky-voir-cb, tbody tr:hover .col-sticky-voir-nocb, tbody tr:hover .col-sticky-ref-cb, tbody tr:hover .col-sticky-ref-nocb { background: var(--row-bg, #f8fafc); filter: brightness(0.97); }

/* Colonne étroite à contenu centré (case à cocher) — largeur fixe pour que le décalage
   des colonnes figées suivantes reste prévisible. min-width est indispensable en plus de
   width : en table-layout auto, width n'est qu'une préférence que le navigateur réduit si
   le contenu réel de la colonne (sur la page affichée) a besoin de moins de place — sans
   plancher garanti, la colonne référence suivante (sticky, décalage calculé sur ces
   largeurs) se décale visuellement et recouvre la colonne d'après (statut). Reproduit
   quand aucune ligne visible n'affiche le badge texte "à valider" (ex: résultat filtré
   sur un agent, ou une seule page de commandes déjà validées). */
.col-icon { width: 40px; min-width: 40px; text-align: center; }

/* Colonne "voir" + actions rapides (à valider/dévalider/corbeille) — largeur fixe plus
   large que .col-icon pour accueillir plusieurs boutons côte à côte. */
.col-actions { width: 150px; min-width: 150px; text-align: start; white-space: nowrap; }
.col-actions .row-view-btn { margin-inline-start: 0; }

/* Badge ne contenant qu'une icône (source d'import) — coussin resserré par rapport au
   badge texte standard. */
.badge-icon { display: inline-flex; align-items: center; justify-content: center; padding: 4px 6px; }

/* Lignes du tableau présentées comme des cartes espacées (a_valider.php uniquement, voir
   consigne) — border-spacing horizontal à 0 pour ne pas perturber le calcul en pixels des
   colonnes figées (col-sticky-*), seul l'espacement vertical entre lignes est ajouté. */
.table-cards table { border-collapse: separate; border-spacing: 0 6px; }
.table-cards tbody tr { box-shadow: 0 1px 3px rgba(15, 23, 42, .1), 0 1px 2px rgba(15, 23, 42, .06); }
.table-cards tbody td:first-child { border-start-start-radius: var(--radius); border-end-start-radius: var(--radius); }
.table-cards tbody td:last-child { border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); }
.table-cards tbody td { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.table-cards tbody td:first-child { border-inline-start: 1px solid var(--border); }
.table-cards tbody td:last-child { border-inline-end: 1px solid var(--border); }

/* Petit écran : le tableau devient une pile de cartes (une par ligne) au lieu de forcer un
   défilement horizontal peu pratique. Opt-in via la classe table-responsive-cards — chaque
   <td> doit porter un data-label pour son intitulé (voir commandes.php). */
@media (max-width: 768px) {
  .table-responsive-cards thead { display: none; }
  .table-responsive-cards table, .table-responsive-cards tbody, .table-responsive-cards tr, .table-responsive-cards td {
    display: block;
    width: 100%;
  }
  .table-responsive-cards tbody tr {
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
  }
  .table-responsive-cards tbody tr:last-child { margin-bottom: 0; }
  .table-responsive-cards td {
    border-bottom: none;
    padding: 6px 0;
    white-space: normal;
  }
  .table-responsive-cards td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
  }
  .table-responsive-cards .col-sticky-checkbox, .table-responsive-cards .col-sticky-voir-cb, .table-responsive-cards .col-sticky-voir-nocb, .table-responsive-cards .col-sticky-ref-cb, .table-responsive-cards .col-sticky-ref-nocb { position: static; }
  .table-responsive-cards .col-icon { width: auto; text-align: start; }
  .table-responsive-cards .col-actions { width: auto; white-space: normal; }
}

/* Pavés repliables (ex: config_transporteurs.php) */
.card-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  text-align: start;
  padding: 0;
  color: var(--text);
}
.card-toggle-caret { margin-inline-start: auto; font-size: 12px; color: var(--text-muted); transition: transform .15s; }
.card-toggle.open .card-toggle-caret { transform: rotate(180deg); }
.card-toggle-body { display: none; margin-top: 16px; }
.card-toggle-body.open { display: block; }
/* Coloration de ligne selon le statut (commandes.php, activable/désactivable — voir
   #toggle-row-colors). --row-bg n'est posée par le JS que si l'option est activée ; sans
   elle, ces règles retombent sur le rendu normal (transparent / gris au survol), donc
   sans effet sur les autres tableaux du site qui ne posent jamais cette variable. */
tbody tr { background: var(--row-bg, transparent); }
tbody tr:hover { background: var(--row-bg, #f8fafc); filter: brightness(0.97); }

/* Cartes cliquables (ex: configurations.php) */
.config-card { display: block; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.config-card:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.config-card-danger { border-color: #fecaca; background: #fef2f2; }
.config-card-danger:hover { border-color: var(--red); box-shadow: 0 2px 10px rgba(220,38,38,.1); }
.config-card-danger h3 { color: var(--red); }
.config-card-icon { font-size: 26px; margin-bottom: 10px; }
.config-card h3 { font-size: 15px; margin: 0 0 6px; }
.config-card p { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* Connexion Google en 2 étapes (config_google_sheet_form.php, mode oauth) */
.oauth-step {
  display: flex;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  transition: opacity .15s;
}
.oauth-step-disabled { opacity: .55; }
.oauth-step-num {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gray);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}
.oauth-step-done .oauth-step-num { background: var(--green); }
.oauth-step:not(.oauth-step-disabled):not(.oauth-step-done) .oauth-step-num { background: var(--primary); }
.oauth-step-body { flex: 1; min-width: 0; }
.oauth-step-title { font-weight: 600; font-size: 14px; }
.btn-google {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #dadce0;
  color: #3c4043;
  padding: 9px 16px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  line-height: 1;
}
.btn-google:hover { box-shadow: 0 1px 3px rgba(0,0,0,.2); }

.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(0,0,0,.15);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .6s linear infinite;
  vertical-align: middle;
  margin-inline-end: 5px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Clignotement d'un champ dont la valeur vient d'être appliquée automatiquement (ex:
   frais de livraison recalculé au changement de wilaya/transporteur/type de livraison). */
.input-highlight { animation: input-highlight-flash 1.5s ease-out; }
@keyframes input-highlight-flash {
  0%   { background-color: #fef08a; box-shadow: 0 0 0 3px rgba(250, 204, 21, .5); }
  100% { background-color: transparent; box-shadow: none; }
}

/* Documentation intégrée (documentation.php) */
.doc-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.doc-toc a { font-size: 13px; padding: 5px 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--text); text-decoration: none; }
.doc-toc a:hover { border-color: var(--primary); color: var(--primary); }
.doc-section p { color: var(--text-muted); line-height: 1.6; margin: 0 0 14px; }
.doc-screenshot { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 2px 10px rgba(0,0,0,.06); display: block; }
.doc-screenshot-missing { display: flex; align-items: center; justify-content: center; min-height: 160px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-muted); font-size: 13px; background: var(--bg); }

/* Badges */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-btn { border: none; cursor: pointer; font-family: inherit; }
.badge-btn:hover { opacity: .8; }
.badge-gray   { background: #f1f5f9; color: #475569; }
.copy-btn, .row-view-btn, .row-action-btn {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-inline-start: 6px;
  color: var(--text-muted);
  vertical-align: middle;
}
.copy-btn:hover, .row-view-btn:hover, .row-action-btn:hover { color: var(--primary); }
.row-action-danger:hover { color: var(--red); }
.phone-value { border-radius: 4px; padding: 1px 3px; transition: background-color .3s ease, color .3s ease; }
.phone-value.flash-copy { background-color: #dcfce7; color: #166534; }
select.statut-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  /* Un <select> a une largeur minimale intrinsèque bien plus petite que son texte (contrairement
     à du texte nowrap) : sans min-width, la mise en page auto du tableau peut le compresser et
     tronquer le libellé du statut dès que les autres colonnes ont moins besoin d'espace (ex: liste
     filtrée par agent). */
  min-width: 120px;
  transition: box-shadow .3s ease;
}
/* Confirmation visuelle brève après un changement de statut en AJAX (commandes.php) —
   voir le gestionnaire "change" sur .statut-select. */
select.statut-select.statut-select-flash { box-shadow: 0 0 0 2px #22c55e; }
.badge-blue   { background: #dbeafe; color: #1e40af; }
.badge-purple { background: #ede9fe; color: #5b21b6; }
.badge-green  { background: #dcfce7; color: #166534; }
.badge-orange { background: #ffedd5; color: #9a3412; }
.badge-red    { background: #fee2e2; color: #991b1b; }

/* Popup générique (overlay + boîte centrée) — ex: ajouter une remarque transporteur
   dans suivi.php. Un seul markup partagé par page, réutilisé pour toutes les lignes. */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .5);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
  background: var(--panel); border-radius: var(--radius); padding: 20px;
  width: 100%; max-width: 420px; margin: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.modal-box textarea { width: 100%; resize: vertical; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* Chat d'équipe (chat.php) */
.chat-layout { display: flex; gap: 16px; height: calc(100vh - 180px); min-height: 420px; }
.chat-sidebar { width: 240px; flex-shrink: 0; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; overflow-y: auto; }
.chat-sidebar-section { margin-bottom: 18px; }
.chat-sidebar-title { display: flex; align-items: center; justify-content: space-between; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-bottom: 6px; }
.chat-channel-link { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: 13px; }
.chat-channel-link:hover { background: var(--bg); }
.chat-channel-link.active { background: var(--chat-accent, var(--primary)); color: #fff; }
.chat-unread-badge { background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center; line-height: 1.5; }
.chat-main { flex: 1; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; min-width: 0; }
/* --chat-bg/--chat-font-* : personnalisation par utilisateur (chat.php, bouton "Personnaliser"),
   définies en style inline sur .chat-layout — retombent sur le thème global si absentes
   (ex. dans la bulle flottante du footer, qui n'utilise pas .chat-layout). */
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; font-family: var(--chat-font-family, inherit); }
/* --chat-bg colore la bulle des messages reçus (pas le fond du conteneur, presque
   invisible derrière des bulles qui remplissent toute la zone). */
.chat-message { max-width: 70%; background: var(--chat-bg, var(--bg)); border-radius: 10px; padding: 8px 12px; align-self: flex-start; }
.chat-message-mine { align-self: flex-end; background: var(--chat-mine-bg, #dbeafe); }
.chat-message-author { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 2px; }
.chat-message-body { font-size: var(--chat-font-size, 14px); white-space: pre-wrap; word-break: break-word; }
.chat-send-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.chat-send-form textarea { flex: 1; resize: none; font-family: inherit; }
.chat-send-form .btn { background: var(--chat-accent, var(--primary)); }
@media (max-width: 768px) {
  .chat-layout { flex-direction: column; height: auto; }
  .chat-sidebar { width: auto; }
  .chat-messages { max-height: 50vh; }
}

/* Bulle de chat flottante (footer.php, présente sur toutes les pages) */
.chat-bubble-widget { position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 500; }
.chat-bubble-btn {
  position: relative; width: 52px; height: 52px; border-radius: 50%; border: none;
  background: var(--chat-accent, var(--primary)); color: #fff; font-size: 22px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center;
}
.chat-bubble-btn:hover { background: var(--chat-accent, var(--primary-dark)); filter: brightness(0.9); }
.chat-bubble-badge {
  position: absolute; top: -4px; inset-inline-end: -4px; background: #ef4444; color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center;
}
.chat-bubble-panel {
  position: absolute; bottom: 64px; inset-inline-end: 0; width: 360px; height: 460px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.2); display: flex; flex-direction: column; overflow: hidden;
}
.chat-bubble-panel[hidden] { display: none; }
.chat-bubble-header {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 14px;
  background: var(--topbar-bg); color: var(--topbar-text); font-weight: 600; font-size: 14px;
}
.chat-bubble-header-actions { display: flex; align-items: center; gap: 10px; }
.chat-bubble-expand, .chat-bubble-close { color: var(--topbar-text); text-decoration: none; background: none; border: none; cursor: pointer; font-size: 14px; padding: 0; }
.chat-bubble-body { flex: 1; display: flex; min-height: 0; }
.chat-bubble-channels { width: 120px; flex-shrink: 0; border-inline-end: 1px solid var(--border); overflow-y: auto; padding: 8px; }
.chat-bubble-channels .chat-channel-link { font-size: 12px; padding: 5px 6px; }
.chat-bubble-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-bubble-messages { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.chat-bubble-messages .chat-message { max-width: 85%; font-size: 13px; }
.chat-bubble-send { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border); }
.chat-bubble-send textarea { flex: 1; resize: none; font-family: inherit; font-size: 13px; padding: 6px 8px; }
.chat-bubble-send button { border: none; background: var(--chat-accent, var(--primary)); color: #fff; border-radius: var(--radius); padding: 0 12px; cursor: pointer; font-size: 15px; }
.chat-bubble-send button:hover { filter: brightness(0.9); }
@media (max-width: 480px) {
  .chat-bubble-panel { width: calc(100vw - 24px); inset-inline-end: -8px; }
}

/* Grille d'informations en lecture seule (ex: rappel client de commande_suivi_dhd.php) —
   une seule colonne sur téléphone (voir consigne : "une seule colonne dans le cas d'un
   téléphone"), plusieurs colonnes au-delà. */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 20px; }
@media (max-width: 640px) { .info-grid { grid-template-columns: 1fr; } }
.info-grid .info-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-bottom: 2px; }
.info-grid .info-value { font-size: 14px; }

/* Forms */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; }
.form-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .form-grid-3 { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
/* Dans une grille, l'espacement vertical vient déjà du gap de la grille — annuler la
   marge propre au form-group évite de cumuler les deux (espace visuellement doublé). */
.form-grid .form-group { margin-bottom: 0; }
.form-group.full { grid-column: 1 / -1; }
label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
input, select, textarea {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: -1px; }

/* Formulaire de commande (commande_form.php) : contenu principal (cartes Commande/Client/
   Livraison/Produits) + colonne latérale "Résumé" fixée pendant le défilement, à la manière
   d'un récapitulatif de panier e-commerce. Repasse en une seule colonne (résumé en dernier,
   défilement normal) sur petit écran. */
.order-form-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.order-form-sidebar { position: sticky; top: 20px; }
@media (max-width: 900px) {
  .order-form-layout { grid-template-columns: 1fr; }
  .order-form-sidebar { position: static; }
}

/* Bannière de risque client / doublon (commande_form.php) — remplace un simple badge
   discret quand la situation mérite vraiment l'attention de l'agent (risque moyen/élevé,
   ou commande récente en double) ; le badge discret reste utilisé pour les cas rassurants
   (risque faible/inconnu), voir risk-badge-spacer. */
.risk-alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: 13px; font-weight: 600; border-inline-start: 4px solid transparent; }
.risk-alert div + div { margin-top: 4px; font-weight: 400; }
.risk-alert-red { background: #fee2e2; color: #991b1b; border-inline-start-color: var(--red); }
.risk-alert-orange { background: #ffedd5; color: #9a3412; border-inline-start-color: var(--orange); }

/* Filters bar */
.filters {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* Variante pour les pages à nombreux filtres (ex: commandes.php) — organise les mêmes
   contrôles en rangées logiques (recherche seule, classification, portée/période,
   actions), dans une carte compacte plutôt qu'à même le fond de page. Taille réduite
   par rapport aux formulaires de saisie classiques : c'est une barre d'outils, pas un
   formulaire principal. */
.filters.filters-grouped {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  gap: 10px;
}
.filters-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.filters-row + .filters-row { border-top: 1px solid var(--border); padding-top: 10px; }
.filters-row-actions { justify-content: flex-end; }
.filters-grouped .form-group { gap: 4px; }
/* :not(:has(input)) exclut les labels "case à cocher + texte" (Doublons/À valider), qui
   restent en casse normale — seuls les libellés de champ (au-dessus d'un select/menu)
   passent en petites majuscules, cohérent avec les en-têtes de tableau (th). */
.filters-grouped label:not(:has(input)) { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }

/* Barre d'outils au-dessus du tableau (actions groupées à gauche, options d'affichage
   à droite) — regroupe en une seule ligne ce qui était deux blocs empilés séparément. */
.table-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.table-toolbar-bulk { display: flex; align-items: center; gap: 10px; }
.table-toolbar-bulk-count { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.table-toolbar-colonnes { margin-inline-start: auto; }
/* Variante icône seule (⚙) du bouton "Colonnes"/"Affichage" — pas de largeur minimale
   forcée, contrairement à la variante texte utilisée sur commandes.php/suivi.php. */
.multiselect-toggle.multiselect-toggle-icon { min-width: auto; gap: 0; padding: 6px; }

/* Bouton "Affichage" en icône flottant au-dessus du coin supérieur droit du tableau
   (a_valider.php) — ancré à .table-scroll-shadow (qui ne défile pas, contrairement à
   .table-wrap en dessous) pour rester visible/cliquable même en cas de défilement
   horizontal du tableau. */
.table-corner-settings.multiselect { position: absolute; top: 6px; inset-inline-end: 10px; z-index: 5; }
.table-corner-settings .multiselect-toggle { background: var(--panel); box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.table-corner-settings .multiselect-menu { inset-inline-start: auto; inset-inline-end: 0; }
.table-toolbar-row-colors { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); white-space: nowrap; cursor: pointer; }

/* suivi.php uniquement : fusionne "Colonnes"/"Colorer les lignes" avec la barre de
   pagination du haut sur une seule ligne, pour gagner la hauteur d'un bloc entier —
   annule le margin-inline-start:auto générique (qui visait à pousser Colonnes seul à
   droite d'une ligne sans pagination) et pousse plutôt la pagination elle-même à droite. */
.table-toolbar-pagination-row .table-toolbar-colonnes { margin-inline-start: 0; }
.table-toolbar-pagination-row .pagination-bar-nav-only { margin-inline-start: auto; margin-top: 0; margin-bottom: 0; }
.filters-grouped input[type="text"], .filters-grouped select {
  padding: 6px 8px;
  font-size: 13px;
}
.filters-grouped .multiselect-toggle { padding: 6px 8px; min-width: 130px; font-size: 13px; }
.filters-grouped .multiselect-item { font-size: 12px; }

/* Filtre multivaleur (menu déroulant à cases à cocher) */
.multiselect { position: relative; }
.multiselect-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 160px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}
.multiselect-toggle:hover { background: var(--bg); }
.multiselect-caret { margin-inline-start: auto; font-size: 10px; color: var(--text-muted); transition: transform .15s; }
.multiselect-toggle.open .multiselect-caret { transform: rotate(180deg); }
.multiselect-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 200px;
  padding: 6px;
  z-index: 60;
}
.multiselect-menu.open { display: block; }
.multiselect-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: normal;
  color: var(--text);
  cursor: pointer;
  /* --statut-item-bg n'est posée par le JS (voir #toggle-row-colors) que si "Colorer les
     lignes selon le statut" est actif — sans elle, transparent comme avant. */
  background: var(--statut-item-bg, transparent);
}
.multiselect-item:hover { background: var(--statut-item-bg, var(--bg)); filter: brightness(0.97); }
.multiselect-menu-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); padding: 6px 8px 2px; }
.multiselect-menu-divider { border-top: 1px solid var(--border); margin: 6px 0; }

/* Lines (commande produits) */
#lignes-table input { width: 100%; }
/* La 1ère cellule contient le select produit ET le champ nom libre côte à côte : le
   width:100% générique ci-dessus s'appliquait à 100% de TOUTE la cellule (en ignorant le
   select déjà présent à côté), faisant déborder le champ texte sur les colonnes suivantes.
   Passage en flex avec largeurs proportionnelles + min-width:0 (indispensable pour qu'un
   enfant flex contenant du texte puisse rétrécir sous sa largeur naturelle). */
#lignes-table td:first-child { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#lignes-table td:first-child .ligne-produit { width: auto; flex: 1 1 130px; }
#lignes-table td:first-child .ligne-nom { width: auto; flex: 2 1 150px; min-width: 0; }
.ligne-remove { color: var(--red); cursor: pointer; background: none; border: none; font-size: 16px; }

/* Login */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.login-card { width: 340px; }
.login-card h1 { font-size: 18px; margin: 0 0 20px; text-align: center; }

/* Pagination */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.pagination-summary { color: var(--text-muted); font-size: 13px; }
.pagination-bar-nav-only { justify-content: flex-end; margin-top: 0; margin-bottom: 8px; }
.pagination { display: flex; gap: 6px; flex-wrap: wrap; }
.pagination a, .pagination span {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}
.pagination .active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pagination-arrow { font-weight: 700; }
.pagination-arrow.disabled { opacity: .4; }
.pagination-ellipsis { border: none; color: var(--text-muted); padding: 6px 2px; }

.text-muted { color: var(--text-muted); }
.mt-16 { margin-top: 16px; }

/* Landing page */
.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  max-width: 1100px;
  margin: 0 auto;
}
.landing-nav .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
.landing-nav .brand .brand-logo { width: 32px; height: 32px; border-radius: 8px; }
.hero {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 60px 40px 80px;
  max-width: 1100px;
  margin: 0 auto;
}
.hero-text { flex: 1 1 420px; min-width: 0; }
.hero-illustration { flex: 1 1 320px; min-width: 220px; max-width: 380px; margin: 0 auto; }
.hero-illustration svg, .hero-illustration img { width: 100%; height: auto; display: block; }
.hero h1 { font-size: 34px; margin: 0 0 16px; line-height: 1.25; }
.hero p { color: var(--text-muted); font-size: 16px; margin-bottom: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-badge {
  display: inline-block;
  background: #dbeafe;
  color: #1e40af;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 18px;
}
@media (max-width: 860px) {
  .hero { flex-direction: column; text-align: center; padding: 40px 20px 60px; }
  .hero-actions { justify-content: center; }
  .hero-illustration { order: -1; max-width: 280px; }
}
.showcase-section { max-width: 1100px; margin: 0 auto; padding: 0 20px 80px; }
.showcase-section h2 { text-align: center; font-size: 26px; margin-bottom: 40px; }
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.showcase-card { text-align: center; }
.showcase-card svg { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 8px 24px rgba(15,23,42,.08); }
.showcase-card h3 { font-size: 16px; margin: 16px 0 6px; }
.showcase-card p { font-size: 13.5px; color: var(--text-muted); margin: 0; line-height: 1.5; }
.cta-section {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 20px 90px;
}
.cta-section h2 { font-size: 26px; margin: 0 0 10px; }
.cta-section p { color: var(--text-muted); font-size: 15px; margin-bottom: 24px; }
.features-section { max-width: 1100px; margin: 0 auto; padding: 0 20px 80px; }
.features-section h2 { text-align: center; font-size: 26px; margin-bottom: 40px; }
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.feature-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.feature-card .icon { font-size: 26px; margin-bottom: 12px; }
.feature-card h3 { font-size: 16px; margin: 0 0 8px; }
.feature-card p { font-size: 13.5px; color: var(--text-muted); margin: 0; line-height: 1.5; }
.feature-card.soon { opacity: 0.7; border-style: dashed; }
.landing-footer {
  text-align: center;
  padding: 30px 20px;
  color: var(--text-muted);
  font-size: 13px;
  border-top: 1px solid var(--border);
}

/* Sélecteur de langue */
.lang-switcher { position: relative; display: inline-block; }
.lang-switcher-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
}
.lang-switcher-btn:hover { background: var(--bg); }
.lang-switcher-flag { font-size: 15px; line-height: 1; }
.lang-switcher-code { font-weight: 600; }
.lang-switcher-caret { font-size: 9px; color: var(--text-muted); transition: transform .15s; }
.lang-switcher-btn.open .lang-switcher-caret { transform: rotate(180deg); }

.lang-switcher-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 170px;
  padding: 4px;
  z-index: 60;
}
.lang-switcher-menu.open { display: block; }
.lang-switcher-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
}
.lang-switcher-item:hover { background: var(--bg); }
.lang-switcher-item.active { background: #eff6ff; color: var(--primary); font-weight: 600; }
.lang-switcher-check { margin-inline-start: auto; color: var(--primary); }

/* Menu utilisateur (topbar) */
.user-menu { position: relative; }
.user-menu-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 4px 6px;
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  color: var(--text);
}
.user-menu-toggle:hover { background: var(--bg); }
.user-menu-caret { font-size: 9px; color: var(--text-muted); transition: transform .15s; }
.user-menu-toggle.open .user-menu-caret { transform: rotate(180deg); }

.user-menu-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 160px;
  padding: 4px;
  z-index: 60;
}
.user-menu-panel.open { display: block; }
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
}
.user-menu-item svg { flex-shrink: 0; color: var(--text-muted); }
.user-menu-item:hover { background: var(--bg); }

/* Statut de présence agent (en-tête) — menu déroulant à 3 états, avec plage de dates
   pour le congé, sur le même pattern que .user-menu/.notif-menu. */
.presence-menu { position: relative; }
.presence-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid rgba(255,255,255,.35);
  color: var(--topbar-text);
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
}
.presence-toggle:hover { background: rgba(255,255,255,.15); }
.presence-toggle .multiselect-caret { font-size: 9px; color: var(--topbar-text-muted); transition: transform .15s; }
.presence-toggle.open .multiselect-caret { transform: rotate(180deg); }
.presence-menu-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 200px;
  padding: 10px;
  z-index: 60;
}
.presence-menu-panel.open { display: block; }
.presence-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: normal;
  color: var(--text);
  cursor: pointer;
}
.presence-option:hover { background: var(--bg); }
.presence-conge-dates { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; padding: 8px; background: var(--bg); border-radius: 6px; }
.presence-conge-dates label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; text-transform: uppercase; }
.presence-conge-dates input[type="date"] { padding: 5px 6px; font-size: 13px; }
#presence-form .btn { width: 100%; }

.notif-menu { position: relative; }
.notif-menu-toggle {
  position: relative;
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 6px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.notif-menu-toggle:hover { background: var(--bg); }
.notif-badge {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  background: #e74c3c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 999px;
  min-width: 15px;
  text-align: center;
}
.notif-menu-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 260px;
  padding: 4px;
  z-index: 60;
}
.notif-menu-panel.open { display: block; }
.notif-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
}
.notif-item:hover { background: var(--bg); }
.notif-item-icon { font-size: 16px; flex-shrink: 0; }
.notif-item-label { flex: 1; }
.notif-item-count {
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.notif-item-count.has-items { background: #fdecea; color: #e74c3c; }
.notif-empty { padding: 16px; text-align: center; color: var(--text-muted); font-size: 13px; }

.tour-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tour-btn:hover { background: var(--bg); color: var(--text); }

.tour-active-el {
  position: relative;
  z-index: 9999;
  border-radius: 6px;
  box-shadow: 0 0 0 4px rgba(37,99,235,.55), 0 0 0 9999px rgba(15,23,42,.6);
  transition: box-shadow .15s ease;
}

.tour-tooltip {
  position: fixed;
  z-index: 10000;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
  padding: 16px;
  width: 300px;
  max-width: calc(100vw - 24px);
}
.tour-tooltip-centered {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}
.tour-tooltip-step { font-size: 11px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.tour-tooltip-title { margin: 0 0 6px; font-size: 15px; }
.tour-tooltip-text { margin: 0 0 14px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.tour-tooltip-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Badge de risque (marge logique, indépendante du sens de lecture) */
.risk-badge-spacer { margin-inline-start: 8px; }

/* Bandeau d'installation PWA (voir header.php + pwa.js) */
.install-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.install-banner[hidden] { display: none; }
.install-banner span { flex: 1; color: var(--text); line-height: 1.4; }
.install-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.install-btn {
  padding: 8px 16px;
  border-radius: 999px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.install-dismiss {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: var(--border);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
}