/* ===========================================================
   WatiTaxi — Dashboard DISPATCHER PRO (desktop uniquement)
   Visible seulement si  body.is-dispatcher-pro.is-desktop
   Le shell (3.1) : sidebar + topbar + grille (carte / live / KPI).
   =========================================================== */
/* Cadre desktop UNIVERSEL : s'affiche pour TOUT compte connecté sur PC
   (chauffeur ET dispatcher_pro). Le contenu/la sidebar s'adaptent au rôle. */
#dpro-root { display: none; }
body.is-desktop.is-logged #dpro-root {
  display: flex;
  position: fixed; inset: 0;
  z-index: 5000;
  background: #EEF2F4;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #0F172A;
}
body.is-desktop.is-logged .bottom-nav { display: none !important; }

/* ── Deux espaces (compte dispatcher_pro) : Mon espace / Espace Pro ── */
/* Modules Pro : visibles seulement pour un compte pro ET dans l'Espace Pro */
body:not(.is-dispatcher-pro) .dpro-pro-only { display: none !important; }
body:not(.dpro-ws-pro)       .dpro-pro-only { display: none !important; }
/* Items perso (Planning/Messages/Répertoire) : cachés dans l'Espace Pro */
body.dpro-ws-pro .dpro-perso-item { display: none !important; }
/* Carte « Ma journée » (perso) : cachée dans l'Espace Pro */
body.dpro-ws-pro .dpro-chauffeur-only { display: none !important; }

/* ── Espace Pro : SIDEBAR SOMBRE (Centre de dispatch) ──
   Scopé strictement à body.dpro-ws-pro → Mon espace (chauffeur) reste clair,
   mobile jamais impacté (#dpro-root invisible sous 1024px). */
body.dpro-ws-pro .dpro-sidebar { background: #0F172A; border-right-color: #18233A; }
body.dpro-ws-pro .dpro-brand-name { color: #F1F5F9; }
body.dpro-ws-pro .dpro-nav-item { color: #94A3B8; }
body.dpro-ws-pro .dpro-nav-item:hover { background: #1B2740; color: #fff; }
body.dpro-ws-pro .dpro-nav-item.active { background: #00A86B; color: #fff; box-shadow: 0 6px 16px rgba(0,168,107,.35); }
body.dpro-ws-pro .dpro-nav-badge { background: #1B2740; color: #CBD5E1; }
body.dpro-ws-pro .dpro-ws-switch { background: #18233A; }
body.dpro-ws-pro .dpro-ws-btn { color: #94A3B8; }
body.dpro-ws-pro .dpro-ws-btn:hover { color: #fff; }
body.dpro-ws-pro .dpro-ws-btn.active { background: #0F172A; color: #fff; box-shadow: none; }
body.dpro-ws-pro .dpro-status { color: #E2E8F0; }
body.dpro-ws-pro .dpro-version { color: #475569; }

/* Sélecteur d'espace (haut de sidebar) — seulement pour un compte pro */
.dpro-ws-switch { display: none; }
body.is-dispatcher-pro .dpro-ws-switch { display: flex; gap: 4px; background: #F1F5F9;
  border-radius: 11px; padding: 4px; margin: 4px 6px 12px; }
.dpro-ws-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; border: none; background: transparent; border-radius: 8px; font-size: 12.5px;
  font-weight: 700; color: #64748B; cursor: pointer; transition: all .15s; }
.dpro-ws-btn svg { width: 15px; height: 15px; }
.dpro-ws-btn:hover { color: #0F172A; }
.dpro-ws-btn.active { background: #fff; color: #00A86B; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* ─────────────── SIDEBAR ─────────────── */
.dpro-sidebar {
  width: 248px; flex-shrink: 0;
  background: #fff; border-right: 1px solid #E5E9EC;
  display: flex; flex-direction: column; padding: 16px 14px;
}
.dpro-brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 18px; }
.dpro-brand-logo { width: 42px; height: 42px; border-radius: 12px; background: #00A86B;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dpro-brand-name { font-size: 18px; font-weight: 800; line-height: 1; }
.dpro-brand-sub  { font-size: 11.5px; font-weight: 600; color: #00A86B; margin-top: 3px; }
/* CTA Nouvelle course (sidebar) */
.dpro-newride { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 4px 6px 14px;
  height: 46px; border: none; border-radius: 12px; background: #00A86B; color: #fff; font-size: 14.5px;
  font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0,168,107,.3); transition: background .15s; }
.dpro-newride svg { width: 18px; height: 18px; }
.dpro-newride:hover { background: #009760; }
.dpc-dispatch { display: flex; align-items: center; gap: 9px; margin-top: 16px; font-size: 14px; font-weight: 600; color: #475569; cursor: pointer; }
.dpc-dispatch input { width: 18px; height: 18px; accent-color: #00A86B; }

.dpro-nav { display: flex; flex-direction: column; gap: 2px; }
.dpro-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: #64748B; cursor: pointer;
  transition: background .15s, color .15s;
}
.dpro-nav-item svg { width: 19px; height: 19px; flex-shrink: 0; }
.dpro-nav-item:hover { background: #F1F5F9; color: #0F172A; }
.dpro-nav-item.active { background: #00A86B; color: #fff; box-shadow: 0 4px 12px rgba(0,168,107,.28); }
.dpro-nav-badge { margin-left: auto; background: #E2E8F0; color: #475569;
  font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.dpro-nav-item.active .dpro-nav-badge { background: rgba(255,255,255,.25); color: #fff; }
.dpro-sidebar-foot { margin-top: auto; padding: 8px; }
.dpro-status { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.dpro-status-dot { width: 9px; height: 9px; border-radius: 50%; background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.dpro-status-sub { font-size: 11.5px; color: #00A86B; font-weight: 600; margin-left: 17px; }
.dpro-version { font-size: 10.5px; color: #CBD5E1; padding: 12px 8px 0; }

/* ── Topbar : date réelle (affichage) + panneau cloche ── */
.dpro-top-date { cursor: default; pointer-events: none; color: #475569; }
.dpro-bell { position: relative; }
.dpro-notif-panel { position: absolute; top: calc(100% + 10px); right: -8px; z-index: 6000; width: 330px;
  background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; box-shadow: 0 14px 40px rgba(15,23,42,.18);
  overflow: hidden; cursor: default; }
.dpro-np-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px;
  border-bottom: 1px solid #EEF1F4; font-size: 13px; font-weight: 800; color: #0F172A; }
.dpro-np-readall { border: none; background: none; font-size: 11.5px; font-weight: 700; color: #00A86B; cursor: pointer; }
.dpro-np-readall:hover { text-decoration: underline; }
.dpro-np-item { display: flex; gap: 9px; align-items: flex-start; width: 100%; text-align: left; border: none;
  background: none; padding: 10px 14px; border-bottom: 1px solid #F1F5F9; cursor: pointer; font-family: inherit; }
.dpro-np-item:last-child { border-bottom: none; }
.dpro-np-item:hover { background: #F8FAFC; }
.dpro-np-dot { width: 8px; height: 8px; border-radius: 50%; background: #E2E8F0; margin-top: 5px; flex-shrink: 0; }
.dpro-np-item.is-unread .dpro-np-dot { background: #00A86B; }
.dpro-np-main { min-width: 0; }
.dpro-np-main b { display: block; font-size: 12.5px; font-weight: 700; color: #0F172A; }
.dpro-np-item.is-unread .dpro-np-main b { font-weight: 800; }
.dpro-np-main i { display: block; font-style: normal; font-size: 11.5px; font-weight: 500; color: #64748B;
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpro-np-empty { padding: 22px 14px; text-align: center; font-size: 12.5px; font-weight: 500; color: #94A3B8; }

/* ── Sidebar réduite (« Réduire le menu ») ── */
.dpro-collapse { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 8px 10px;
  border: none; border-radius: 10px; background: none; font-family: inherit; font-size: 12px; font-weight: 700;
  color: #94A3B8; cursor: pointer; }
.dpro-collapse:hover { background: rgba(148,163,184,.12); color: #475569; }
body.dpro-ws-pro .dpro-collapse:hover { color: #E2E8F0; }
.dpro-collapse svg { flex-shrink: 0; transition: transform .2s; }
body.dpro-side-min .dpro-sidebar { width: 64px; min-width: 64px; }
/* Sidebar réduite → les pages/overlays en position fixe suivent (248px → 64px) */
body.dpro-side-min.is-desktop.is-logged.dpro-page-open #dpro-page,
body.dpro-side-min.is-desktop.is-logged.dpro-course-open #dpro-course,
body.dpro-side-min.is-desktop.is-logged.dpro-overlay .screen.active { left: 64px; }
body.dpro-side-min .dpro-brand-name { display: none; }
body.dpro-side-min #dpro-ws-switch { display: none; }
body.dpro-side-min .dpro-nav-item { justify-content: center; padding-left: 0; padding-right: 0; font-size: 0; gap: 0; }
body.dpro-side-min .dpro-nav-badge { display: none; }
body.dpro-side-min .dpro-avail { display: none; }
body.dpro-side-min .dpro-status, body.dpro-side-min .dpro-status-sub, body.dpro-side-min .dpro-version { display: none; }
body.dpro-side-min .dpro-collapse { justify-content: center; }

/* ── Compte Dispatcher Pro : bascule d'espace via le menu profil uniquement ── */
body.is-dispatcher-pro #dpro-ws-switch { display: none !important; }
.dpro-pro-account-only { display: none !important; }
body.is-dispatcher-pro .dpro-pro-account-only { display: flex !important; }

/* ── Bascule disponibilité chauffeur (Mon espace) ── */
.dpro-avail { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
  border: 1.5px solid #E2E8F0; border-radius: 13px; background: #fff; cursor: pointer;
  font-family: inherit; text-align: left; transition: border-color .15s, background .15s; }
.dpro-avail:hover { border-color: #CBD5E1; }
.dpro-avail-dot { width: 10px; height: 10px; border-radius: 50%; background: #94A3B8; flex-shrink: 0; transition: background .15s, box-shadow .15s; }
.dpro-avail.is-on .dpro-avail-dot { background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.dpro-avail-main { flex: 1; min-width: 0; }
.dpro-avail-lbl { display: block; font-size: 13px; font-weight: 800; color: #0F172A; }
.dpro-avail-sub { display: block; font-size: 10.5px; font-weight: 600; color: #94A3B8; margin-top: 2px; }
.dpro-avail-track { width: 34px; height: 20px; border-radius: 999px; background: #E2E8F0; position: relative; flex-shrink: 0; transition: background .18s; }
.dpro-avail-thumb { position: absolute; top: 2.5px; left: 3px; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.25); transition: left .18s; }
.dpro-avail.is-on .dpro-avail-track { background: #00A86B; }
.dpro-avail.is-on .dpro-avail-thumb { left: 16px; }

/* ── Cartes réelles de l'Accueil perso (bas) ── */
.dpro-me-empty { padding: 14px 0; font-size: 12.5px; font-weight: 500; color: #94A3B8; line-height: 1.5; }
.dpro-me-ride { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid #F1F5F9; cursor: pointer; }
.dpro-me-ride:last-child { border-bottom: none; }
.dpro-me-ride:hover .dpro-me-ride-route { color: #00A86B; }
.dpro-me-ride-time { font-size: 12.5px; font-weight: 800; color: #0F172A; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.dpro-me-ride-route { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: #475569;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .12s; }
.dpro-dept-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; }
.dpro-dept-n { width: 30px; flex-shrink: 0; font-size: 12.5px; font-weight: 800; color: #0F172A; }
.dpro-dept-bar { flex: 1; height: 8px; background: #F1F5F9; border-radius: 999px; overflow: hidden; }
.dpro-dept-bar span { display: block; height: 100%; background: #00A86B; border-radius: 999px; }
.dpro-dept-v { width: 76px; flex-shrink: 0; text-align: right; font-size: 11.5px; font-weight: 700; color: #64748B; }

/* ─────────────── MAIN ─────────────── */
.dpro-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dpro-topbar {
  height: 66px; flex-shrink: 0; background: #fff; border-bottom: 1px solid #E5E9EC;
  display: flex; align-items: center; gap: 14px; padding: 0 22px;
  position: relative; z-index: 5700;   /* au-dessus de #dpro-page (5500) / #dpro-course (5600) → menu compte cliquable */
}
.dpro-search { flex: 1; max-width: 540px; position: relative; }
.dpro-search input { width: 100%; height: 42px; border: 1px solid #E2E8F0; border-radius: 11px;
  padding: 0 14px 0 42px; font-size: 14px; background: #F8FAFC; outline: none; }
.dpro-search input:focus { border-color: #00A86B; background: #fff; }
.dpro-search > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94A3B8; }
.dpro-kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: #94A3B8; border: 1px solid #E2E8F0; border-radius: 6px; padding: 1px 6px; }
.dpro-top-btn { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px;
  border: 1px solid #E2E8F0; border-radius: 11px; background: #fff; font-size: 13.5px;
  font-weight: 600; color: #334155; cursor: pointer; white-space: nowrap; }
.dpro-top-btn:hover { background: #F8FAFC; }
.dpro-top-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.dpro-bell { position: relative; cursor: pointer; color: #475569; }
.dpro-bell-badge { position: absolute; top: -6px; right: -6px; background: #EF4444; color: #fff;
  font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.dpro-user { display: flex; align-items: center; gap: 10px; cursor: pointer; position: relative; padding: 4px 6px; border-radius: 12px; transition: background .15s; }
.dpro-user:hover { background: #F4FBF8; }
.dpro-account-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; background: #fff;
  border: 1px solid #E5E9EC; border-radius: 13px; box-shadow: 0 12px 34px rgba(15,23,42,.16); padding: 7px;
  display: none; z-index: 100; }
.dpro-account-menu.open { display: block; }
.dpro-acc-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: none;
  background: none; padding: 11px 12px; border-radius: 9px; font-size: 14px; font-weight: 600; color: #334155;
  cursor: pointer; transition: background .12s; }
.dpro-acc-item:hover { background: #F1F5F9; }
.dpro-acc-item svg { color: #64748B; flex-shrink: 0; }
.dpro-acc-logout { color: #DC2626; }
.dpro-acc-logout svg { color: #DC2626; }
.dpro-acc-logout:hover { background: #FEF2F2; }
.dpro-user-av { width: 40px; height: 40px; border-radius: 50%; background: #00A86B; color: #fff;
  font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.dpro-user-name { font-size: 14px; font-weight: 700; line-height: 1.15; }
.dpro-user-role { font-size: 11.5px; color: #94A3B8; }

/* ─────────────── CONTENT GRID ─────────────── */
.dpro-content {
  flex: 1; padding: 18px 22px; overflow: auto;
  display: grid; gap: 16px;
  grid-template-columns: 1.15fr 1fr;   /* écran coupé en deux : carte thermique | pool */
  grid-template-rows: minmax(460px, 1fr) auto;
  grid-template-areas: "map live" "bottom bottom";
}
.dpro-card { background: #fff; border: 1px solid #E9EDF0; border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16,24,40,.04); }

/* Carte */
.dpro-map { grid-area: map; position: relative; overflow: hidden; min-height: 430px; }
.dpro-map-canvas { position: absolute; inset: 0;
  background:
    radial-gradient(120% 120% at 30% 20%, #EAF6EE 0%, transparent 60%),
    linear-gradient(135deg, #EEF3F1 0%, #F1F5F9 100%); }
.dpro-map-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  text-align: center; color: #94A3B8; font-size: 14px; font-weight: 600; }
.dpro-map-hint span { display: block; font-size: 12.5px; font-weight: 500; margin-top: 4px; color: #B6C2CC; }
.dpro-legend { position: absolute; top: 16px; left: 16px; background: #fff; border-radius: 12px;
  box-shadow: 0 4px 16px rgba(16,24,40,.10); padding: 12px 14px; }
.dpro-legend-title { font-size: 11px; font-weight: 800; letter-spacing: .5px; color: #94A3B8; text-transform: uppercase; margin-bottom: 8px; }
.dpro-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #475569; margin: 4px 0; }
.dpro-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dpro-zoom { position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column;
  background: #fff; border-radius: 10px; box-shadow: 0 4px 14px rgba(16,24,40,.10); overflow: hidden; }
.dpro-zoom button { width: 38px; height: 38px; border: none; background: #fff; cursor: pointer;
  color: #334155; border-bottom: 1px solid #EEF2F4; }
.dpro-zoom button:last-child { border-bottom: none; }

/* Courses temps réel */
.dpro-live { grid-area: live; display: flex; flex-direction: column; min-height: 0; }
.dpro-live-head { padding: 16px 18px; border-bottom: 1px solid #F1F5F9;
  font-size: 12.5px; font-weight: 800; letter-spacing: .4px; color: #334155;
  text-transform: uppercase; display: flex; align-items: center; gap: 9px; }
.dpro-live-count { background: #00A86B; color: #fff; font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 999px; }
.dpro-live-list { flex: 1; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.dpro-ride { border: 1px solid #EEF2F4; border-radius: 12px; padding: 12px; }
.dpro-ride-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.dpro-ride-time { font-size: 13px; font-weight: 800; color: #0F172A; }
.dpro-ride-route { font-size: 13px; font-weight: 600; color: #334155; }
.dpro-ride-badge { margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.dpro-ride-client { font-size: 12px; color: #94A3B8; margin-bottom: 9px; }
.dpro-ride-actions { display: flex; gap: 7px; }
.dpro-ride-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  height: 32px; border-radius: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: 1px solid #E2E8F0; background: #fff; color: #475569; }
.dpro-ride-btn.primary { background: #00A86B; border-color: #00A86B; color: #fff; }
.dpro-ride-btn:hover { filter: brightness(.97); }
/* statuts */
.st-encours    { background: #EFF6FF; color: #2563EB; }
.st-prete      { background: #ECFDF3; color: #047857; }
.st-attente    { background: #FFF7ED; color: #C2410C; }
.st-dispatchee { background: #F5F3FF; color: #7C3AED; }
.st-terminee   { background: #F1F5F9; color: #475569; }
.st-annulee    { background: #FEF2F2; color: #DC2626; }
.bar-encours    { border-left: 3px solid #3B82F6; }
.bar-prete      { border-left: 3px solid #22C55E; }
.bar-attente    { border-left: 3px solid #F59E0B; }
.bar-dispatchee { border-left: 3px solid #8B5CF6; }
.bar-terminee   { border-left: 3px solid #94A3B8; }
.bar-annulee    { border-left: 3px solid #EF4444; }

/* KPI du bas */
.dpro-bottom { grid-area: bottom; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dpro-stat { padding: 18px; }
.dpro-stat-title { font-size: 11.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  color: #64748B; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
.dpro-stat-title .dpro-mini-badge { background: #FFF7ED; color: #C2410C; border-radius: 999px; font-size: 11px; padding: 1px 8px; }
.dpro-online { display: flex; align-items: center; gap: 18px; }
.dpro-online-num { font-size: 34px; font-weight: 800; line-height: 1; }
.dpro-online-num small { font-size: 16px; color: #94A3B8; font-weight: 600; }
.dpro-online-leg { font-size: 12.5px; color: #475569; display: flex; flex-direction: column; gap: 5px; }
.dpro-online-leg span { display: flex; align-items: center; gap: 7px; }
.dpro-donut { width: 72px; height: 72px; border-radius: 50%;
  background: conic-gradient(#00A86B 0 43%, #86EFAC 43% 100%, #E2E8F0 0); position: relative; }
.dpro-donut::after { content: ""; position: absolute; inset: 11px; background: #fff; border-radius: 50%; }
.dpro-msg-row, .dpro-alert-row { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #F1F5F9; }
.dpro-msg-row:last-child, .dpro-alert-row:last-child { border-bottom: none; }
.dpro-msg-av { width: 30px; height: 30px; border-radius: 50%; background: #E2E8F0; color: #475569;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dpro-msg-name { font-size: 13px; font-weight: 700; }
.dpro-msg-text { font-size: 12px; color: #94A3B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.dpro-msg-time { margin-left: auto; font-size: 11.5px; color: #CBD5E1; }
.dpro-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dpro-kpi-val { font-size: 22px; font-weight: 800; }
.dpro-kpi-lbl { font-size: 11.5px; color: #94A3B8; }
.dpro-kpi-up { font-size: 11.5px; color: #16A34A; font-weight: 600; }
.dpro-link { margin-top: 12px; font-size: 13px; font-weight: 600; color: #00A86B; cursor: pointer; display: inline-block; }

@media (max-width: 1180px) {
  .dpro-content { grid-template-columns: 1fr; grid-template-areas: "map" "live" "bottom"; }
  .dpro-bottom { grid-template-columns: repeat(2, 1fr); }
}

/* Écran de l'app ouvert depuis le cadre desktop → REMPLIT la zone de contenu
   (à droite de la sidebar 248px, sous la topbar 66px), pas un panneau flottant. */
body.is-desktop.is-logged.dpro-overlay .screen.active {
  position: fixed; left: 248px; top: 66px; right: 0; bottom: 0;
  width: auto; max-width: none; transform: none;
  z-index: 6000; overflow-y: auto;
  background: #EEF2F4; box-shadow: none;
  padding: 26px 28px 40px;
}
/* Page centrée façon « carte desktop » (blanche, large, arrondie) */
body.is-desktop.is-logged.dpro-overlay .screen.active > * {
  max-width: 940px; margin-left: auto; margin-right: auto;
}
/* On élargit les conteneurs internes mobiles (plafonnés à 480px) */
body.is-desktop.is-logged.dpro-overlay .screen.active .container,
body.is-desktop.is-logged.dpro-overlay .screen.active .container-bottom-nav,
body.is-desktop.is-logged.dpro-overlay .screen.active .plgn-wrap,
body.is-desktop.is-logged.dpro-overlay .screen.active .plgn-card,
body.is-desktop.is-logged.dpro-overlay .screen.active .ibx-list,
body.is-desktop.is-logged.dpro-overlay .screen.active .rep-list {
  max-width: none !important; width: 100% !important;
}
/* La carte blanche contenant le scroll (lisibilité desktop) */
body.is-desktop.is-logged.dpro-overlay .screen.active .container,
body.is-desktop.is-logged.dpro-overlay .screen.active .container-bottom-nav {
  background: #fff; border: 1px solid #E9EDF0; border-radius: 16px;
  padding: 22px 24px; box-shadow: 0 1px 3px rgba(16,24,40,.04);
}
/* En-têtes des écrans → bandeau desktop arrondi, collant en haut de la colonne */
body.is-desktop.is-logged.dpro-overlay .screen.active .topbar,
body.is-desktop.is-logged.dpro-overlay .screen.active .planning-header,
body.is-desktop.is-logged.dpro-overlay .screen.active .cr2-header {
  position: sticky !important; top: 0 !important; left: auto !important; right: auto !important; width: 100% !important;
  border-radius: 14px 14px 0 0; margin-bottom: 12px;
}

/* Carte thermique réelle (chauffeur) dans la zone carte */
#dpro-heatmap { position: absolute; inset: 0; z-index: 0; background: #0e1726; }
body.dpro-ws-pro #dpro-heatmap { background: #e8ecef; }   /* fond clair en Espace Pro */
body.dpro-has-heatmap .dpro-map-canvas,
body.dpro-has-heatmap #dpro-map-hint,
body.dpro-has-heatmap .dpro-legend { display: none; }
#dpro-heatmap .leaflet-control-container { display: none; }   /* on garde le zoom custom */

/* ── Panneau d'acceptation DESKTOP (modale dédiée, sans étapes de course) ── */
.dpro-accept-overlay {
  position: fixed; inset: 0; z-index: 7000;
  background: rgba(15,23,42,.5);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.dpro-accept-card {
  background: #fff; border-radius: 18px; width: 540px; max-width: 100%;
  padding: 24px 26px; box-shadow: 0 24px 70px rgba(0,0,0,.28); position: relative; color: #0F172A;
}
.dpro-accept-close { position: absolute; top: 12px; right: 16px; border: none; background: none;
  font-size: 26px; color: #94A3B8; cursor: pointer; line-height: 1; }
.dpro-accept-close:hover { color: #475569; }
.dpro-accept-title { font-size: 18px; font-weight: 800; margin-bottom: 16px; }
.dpro-accept-route { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700;
  background: #F8FAFC; border: 1px solid #EEF2F4; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; flex-wrap: wrap; }
.dpro-accept-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dpro-accept-dot.from { background: #00A86B; } .dpro-accept-dot.to { background: #0F172A; }
.dpro-accept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-bottom: 18px; }
.dpro-accept-grid > div { display: flex; flex-direction: column; gap: 2px; }
.dpro-accept-grid .lbl { font-size: 11.5px; color: #94A3B8; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.dpro-accept-grid .val { font-size: 14.5px; font-weight: 700; }
.dpro-accept-eta-lbl { font-size: 13.5px; font-weight: 600; color: #334155; margin-bottom: 9px; }
.dpro-accept-eta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.dpro-eta-chip { min-height: 42px; padding: 0 18px; border-radius: 10px; border: 1.5px solid #E2E8F0;
  background: #fff; font-size: 14px; font-weight: 700; color: #475569; cursor: pointer; transition: all .15s; }
.dpro-eta-chip:hover { border-color: #00A86B; }
.dpro-eta-chip.sel { background: #00A86B; border-color: #00A86B; color: #fff; }
.dpro-accept-hint { font-size: 12.5px; color: #94A3B8; margin: 6px 0 18px; }
.dpro-accept-actions { display: flex; gap: 10px; }
.dpro-accept-cancel { padding: 0 22px; height: 50px; border-radius: 12px; border: 1.5px solid #E2E8F0;
  background: #fff; font-size: 14px; font-weight: 700; color: #475569; cursor: pointer; }
.dpro-accept-cancel:hover { background: #F8FAFC; }
.dpro-accept-confirm { flex: 1; height: 50px; border-radius: 12px; border: none; background: #00A86B;
  color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 14px rgba(0,168,107,.3); }
.dpro-accept-confirm:hover { background: #009760; }
.dpro-accept-confirm:disabled { opacity: .6; cursor: default; }

/* ═══════════════════════════════════════════════════════════════
   PAGE DESKTOP DEDIEE  (#dpro-page)  — PLANNING
   Liste de courses a gauche + detail a droite + KPIs en bas.
   Style WatiTaxi clair (blanc / vert tres clair / vert #00A86B).
   z-index 5500 : au-dessus du dashboard (5000), sous overlays ecran (6000).
   ═══════════════════════════════════════════════════════════════ */
#dpro-page { display: none; }
body.is-desktop.is-logged.dpro-page-open #dpro-page {
  display: block;
  position: fixed; left: 248px; top: 66px; right: 0; bottom: 0;
  z-index: 5500; overflow-y: auto;
  background: #F4F8F6;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #0F172A;
}

.dpl { padding: 20px 30px 40px; max-width: 1500px; }

/* ── Onglets Mon planning / Mon réseau (à droite de la date) ── */
.dpl-tabs { display: flex; gap: 6px; }
.dpl-tab { border: none; background: none; padding: 8px 4px; margin-right: 14px; position: relative;
  font-size: 14.5px; font-weight: 700; color: #94A3B8; cursor: pointer; transition: color .15s; }
.dpl-tab:hover { color: #475569; }
.dpl-tab.active { color: #00A86B; }
.dpl-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px;
  background: #00A86B; border-radius: 3px 3px 0 0; }

/* ── Barre d'outils : date + onglets · stats + tri ── */
.dpl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; flex-wrap: wrap; }

/* ── Bande semaine (pastilles = nb de courses) ── */
.dpl-week { display: flex; gap: 7px; margin-bottom: 16px; }
.dpl-day { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 58px;
  padding: 7px 10px 6px; border: 1.5px solid #E2E8F0; border-radius: 12px; background: #fff; cursor: pointer;
  font-family: inherit; transition: border-color .12s, background .12s; }
.dpl-day:hover { border-color: #CBD5E1; }
.dpl-day-wd { font-size: 10px; font-weight: 700; color: #94A3B8; text-transform: uppercase; letter-spacing: .4px; }
.dpl-day-n { font-size: 15px; font-weight: 800; color: #0F172A; }
.dpl-day-count { font-size: 9.5px; font-weight: 800; color: #00875A; background: #E7F6EE; border-radius: 999px;
  padding: 2px 7px; min-height: 14px; }
.dpl-day-count.is-zero { background: transparent; }
.dpl-day.is-today .dpl-day-wd { color: #00A86B; }
.dpl-day.is-cur { background: #00A86B; border-color: #00A86B; }
.dpl-day.is-cur .dpl-day-wd, .dpl-day.is-cur .dpl-day-n { color: #fff; }
.dpl-day.is-cur .dpl-day-count { background: rgba(255,255,255,.25); color: #fff; }

/* ── Messages : non-lus + réponses rapides ── */
.dms-conv-av { position: relative; }
.dms-unread-dot { position: absolute; top: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%;
  background: #00A86B; border: 2px solid #fff; }
.dms-conv.is-unread .dms-conv-name { font-weight: 800; color: #0F172A; }
.dms-quick { display: flex; gap: 7px; padding: 8px 14px 0; flex-wrap: wrap; }
.dms-quick-chip { height: 28px; padding: 0 12px; border: 1.5px solid #E2E8F0; border-radius: 999px; background: #fff;
  font: 600 12px/1 inherit; font-family: inherit; color: #475569; cursor: pointer; transition: all .12s; }
.dms-quick-chip:hover { border-color: #00A86B; color: #00875A; background: #E7F6EE; }

/* ── Répertoire : liens tel + bouton nouvelle course ── */
.drp-tel { color: inherit; text-decoration: none; }
.drp-tel:hover { color: #00A86B; text-decoration: underline; }
.drp-newride { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 12px 0 4px;
  height: 38px; border: none; border-radius: 11px; background: #00A86B; color: #fff;
  font: 700 13px/1 inherit; font-family: inherit; cursor: pointer; box-shadow: 0 3px 10px rgba(0,168,107,.22); }
.drp-newride:hover { background: #019760; }

/* ── Marqueur « Maintenant » ── */
.dpl-now { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; color: #00A86B;
  text-transform: uppercase; letter-spacing: .5px; margin: 2px 0; }
.dpl-now-dot { width: 9px; height: 9px; border-radius: 50%; background: #00A86B; box-shadow: 0 0 0 3px rgba(0,168,107,.2); }
.dpl-now-line { flex: 1; height: 2px; background: linear-gradient(90deg, #00A86B, rgba(0,168,107,.08)); border-radius: 2px; }
.dpl-toolbar-left { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.dpl-datesel { display: flex; align-items: center; gap: 10px; }
.dpl-nav { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #E2E8F0; background: #fff;
  font-size: 20px; line-height: 1; color: #00A86B; cursor: pointer; transition: all .15s; }
.dpl-nav:hover { background: #00A86B; color: #fff; border-color: #00A86B; }
.dpl-datelabel { height: 40px; padding: 0 26px; border-radius: 12px; border: none; background: #EAF1EE;
  font-size: 15px; font-weight: 700; color: #0F172A; cursor: pointer; text-transform: capitalize; transition: background .15s; }
.dpl-datelabel:hover { background: #DDE9E4; }
.dpl-toolbar-right { display: flex; align-items: center; gap: 14px; }
.dpl-stats { display: flex; gap: 8px; }
.dpl-stat-pill { background: #fff; border: 1px solid #E6EDEA; border-radius: 999px;
  padding: 7px 14px; font-size: 12.5px; color: #64748B; font-weight: 600; white-space: nowrap; }
.dpl-stat-pill b { color: #0F172A; font-weight: 800; }
.dpl-sortwrap { position: relative; }
.dpl-sort { height: 40px; padding: 0 38px 0 16px; border-radius: 12px; border: 1.5px solid #E2E8F0; background: #fff;
  font-size: 13.5px; font-weight: 600; color: #475569; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round'><path d='M3 5l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; }
.dpl-sort:hover { border-color: #00A86B; }

/* ── Disposition 2 colonnes : liste / detail ── */
.dpl-split { display: grid; grid-template-columns: 1fr 420px; gap: 22px; align-items: start; }

/* ════════ COLONNE GAUCHE : vignettes ════════ */
.dpl-listcol { min-width: 0; }
.dpl-cards { display: flex; flex-direction: column; gap: 12px; }

.dpl-card { display: grid; grid-template-columns: 86px 1fr auto auto; gap: 16px; align-items: center;
  background: #fff; border: 1px solid #E6EDEA; border-left: 5px solid #CBD5E1; border-radius: 14px;
  padding: 16px 20px; cursor: pointer; transition: all .15s; }
.dpl-card:hover { box-shadow: 0 6px 18px rgba(15,23,42,.07); transform: translateY(-1px); }
.dpl-card-time { font-size: 21px; font-weight: 800; color: #0F172A; white-space: nowrap; }
.dpl-card-main { min-width: 0; }
.dpl-card-client { font-size: 15.5px; font-weight: 700; color: #1E293B; margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpl-card-route { font-size: 13.5px; color: #64748B; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpl-arrow { color: #00A86B; font-weight: 800; }
.dpl-card-pax { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: #475569; }
.dpl-card-pax svg { color: #94A3B8; }
.dpl-card { position: relative; }
/* Bouton Supprimer (panneau détail) */
.dpl-act-del { grid-column: 1 / -1; background: #fff; color: #DC2626; border: 1.5px solid #FCA5A5; }
.dpl-act-del:hover { background: #FEF2F2; border-color: #DC2626; }

/* ── Bouton "Sélectionner" (barre d'outils) — intégré à la charte ── */
.dpl-selbtn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px;
  border-radius: 11px; border: none; background: #EAF1EE; font-size: 13.5px; font-weight: 700;
  color: #0F766E; cursor: pointer; transition: all .15s; }
.dpl-selbtn svg { color: #00A86B; }
.dpl-selbtn:hover { background: #DDE9E4; }
.dpl-selbtn.active { background: #00A86B; color: #fff; }
.dpl-selbtn.active svg { color: #fff; }

/* ── Mode sélection multiple ── */
.dpl-cards.selmode .dpl-card { grid-template-columns: 34px 78px 1fr auto auto; cursor: pointer; }
.dpl-cards.selmode .dpl-card:hover { box-shadow: 0 4px 14px rgba(15,23,42,.08); }
/* Indicateur rond bien visible (style mobile) */
.dpl-card-check { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid #CBD5E1; background: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .12s; }
.dpl-card-check svg { opacity: 0; transition: opacity .12s; }
.dpl-card-checked .dpl-card-check { background: #00A86B; border-color: #00A86B; box-shadow: 0 0 0 4px rgba(0,168,107,.18); }
.dpl-card-checked .dpl-card-check svg { opacity: 1; }
/* Carte cochée : très visible (bord vert épais + fond vert + barre gauche verte) */
.dpl-cards.selmode .dpl-card { border-left-width: 5px; }
.dpl-card-checked { border-color: #00A86B !important; border-left-color: #00A86B !important;
  background: #E3F6EC !important; box-shadow: 0 0 0 2px #00A86B, 0 6px 16px rgba(0,168,107,.18); }

/* Barre d'action groupée — verte WatiTaxi */
.dpl-bulkbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #00A86B; color: #fff; border-radius: 13px; padding: 12px 18px; margin-bottom: 14px;
  position: sticky; top: 0; z-index: 3; box-shadow: 0 6px 18px rgba(0,168,107,.28); }
.dpl-bulk-count { font-size: 14.5px; font-weight: 800; }
.dpl-bulk-actions { display: flex; gap: 9px; }
.dpl-bulk-del { background: #fff; color: #DC2626; border: none; border-radius: 10px; padding: 9px 18px;
  font-size: 13.5px; font-weight: 800; cursor: pointer; transition: all .15s; }
.dpl-bulk-del:disabled { opacity: .55; cursor: default; }
.dpl-bulk-del:not(:disabled):hover { background: #FEF2F2; }
.dpl-bulk-cancel { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.45);
  border-radius: 10px; padding: 9px 16px; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.dpl-bulk-cancel:hover { background: rgba(255,255,255,.15); }

/* Fonds + bords gauche selon statut */
.dpl-bg-incoming  { background: #FFF7ED; border-left-color: #F59E0B; }
.dpl-bg-draft     { background: #F8FAFC; border-left-color: #94A3B8; }
.dpl-bg-dispatch  { background: #F5F3FF; border-left-color: #8B5CF6; }
.dpl-bg-accepted  { background: #ECFDF3; border-left-color: #00A86B; }
.dpl-bg-progress  { background: #EFF6FF; border-left-color: #3B82F6; }
.dpl-bg-aboard    { background: #ECFDF5; border-left-color: #22C55E; }
.dpl-bg-done      { background: #F8FAFC; border-left-color: #CBD5E1; }
.dpl-bg-cancelled { background: #FEF2F2; border-left-color: #EF4444; }

/* Vignette selectionnee */
.dpl-card-sel { border-color: #00A86B; border-left-color: #00A86B;
  box-shadow: 0 0 0 2px rgba(0,168,107,.35), 0 8px 22px rgba(0,168,107,.12);
  background: #E8F8F1; }
.dpl-card-sel:hover { transform: none; }

/* Pastilles de statut */
.dpl-pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 5px 13px; border-radius: 999px; white-space: nowrap; }
.dpl-pill-incoming  { background: #FEF3C7; color: #B45309; }
.dpl-pill-draft     { background: #F1F5F9; color: #475569; }
.dpl-pill-dispatch  { background: #EDE9FE; color: #6D28D9; }
.dpl-pill-accepted  { background: #D1FADF; color: #027A48; }
.dpl-pill-progress  { background: #DBEAFE; color: #1D4ED8; }
.dpl-pill-aboard    { background: #DCFCE7; color: #15803D; }
.dpl-pill-done      { background: #EAEEF2; color: #64748B; }
.dpl-pill-cancelled { background: #FEE2E2; color: #B91C1C; }

.dpl-loadmore { width: 100%; margin-top: 14px; padding: 15px; border-radius: 14px; border: 1px dashed #CBD5E1;
  background: #fff; font-size: 14px; font-weight: 600; color: #64748B; cursor: pointer; transition: all .15s; }
.dpl-loadmore:hover { border-color: #00A86B; color: #00A86B; background: #F4FBF8; }

.dpl-empty { background: #fff; border: 1px dashed #CBD5E1; border-radius: 16px; padding: 54px 24px; text-align: center; }
.dpl-empty-ic { font-size: 32px; margin-bottom: 10px; }
.dpl-empty-t { font-size: 16px; font-weight: 700; color: #475569; margin-bottom: 4px; }
.dpl-empty-s { font-size: 13.5px; color: #94A3B8; }

/* ════════ COLONNE DROITE : detail ════════ */
.dpl-detailcol { position: sticky; top: 0; background: #fff; border: 1px solid #E6EDEA; border-radius: 18px;
  padding: 22px 22px 24px; box-shadow: 0 10px 30px rgba(15,23,42,.06); }
.dpl-detail-empty { text-align: center; padding: 60px 18px; }

.dpl-d-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dpl-d-kicker { font-size: 13px; font-weight: 700; color: #64748B; }
.dpl-d-client { font-size: 22px; font-weight: 800; color: #0F172A; line-height: 1.2; }
.dpl-d-sub { font-size: 13px; color: #94A3B8; margin-top: 3px; }
.dpl-d-row2 { display: flex; align-items: center; gap: 18px; margin: 14px 0 16px; flex-wrap: wrap; }
.dpl-d-pax { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: #475569; }
.dpl-d-pax svg, .dpl-d-phone svg { color: #00A86B; }
.dpl-d-phone { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: #0F172A; text-decoration: none; }
.dpl-d-phone:hover { color: #00A86B; }

.dpl-d-map { height: 168px; border-radius: 14px; overflow: hidden; margin-bottom: 16px; background: #EAF1EE; }
.dpl-d-map.dpl-map-empty { display: flex; align-items: center; justify-content: center;
  color: #64748B; font-size: 13.5px; font-weight: 600; border: 1px dashed #CBD5E1; }
.dpl-d-map .leaflet-container { height: 100%; width: 100%; background: #EAF1EE; }

.dpl-d-trip { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.dpl-d-stop { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.dpl-d-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.dpl-d-dot-from { background: #00A86B; box-shadow: 0 0 0 4px rgba(0,168,107,.15); }
.dpl-d-dot-to { background: #0F172A; box-shadow: 0 0 0 4px rgba(15,23,42,.1); }
.dpl-d-stop-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dpl-d-stop-lbl { font-size: 11.5px; font-weight: 600; color: #94A3B8; }
.dpl-d-stop-addr { font-size: 14px; font-weight: 700; color: #1E293B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpl-d-stop-time { font-size: 13.5px; font-weight: 800; color: #0F172A; }

.dpl-d-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.dpl-d-cell { background: #F8FAFC; border: 1px solid #EEF2F4; border-radius: 11px; padding: 10px 11px;
  display: flex; flex-direction: column; gap: 3px; }
.dpl-d-cell-lbl { font-size: 10.5px; font-weight: 600; color: #94A3B8; }
.dpl-d-cell-val { font-size: 14px; font-weight: 800; color: #0F172A; }

.dpl-d-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dpl-act { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .15s; }
.dpl-act-primary { grid-column: 1 / -1; background: #00A86B; color: #fff; border: none; box-shadow: 0 4px 14px rgba(0,168,107,.28); }
.dpl-act-primary:hover { background: #009760; }
.dpl-act-ghost { background: #fff; color: #00A86B; border: 1.5px solid #BFE6D6; }
.dpl-act-ghost:hover { background: #F4FBF8; border-color: #00A86B; }
.dpl-act-ghost:disabled { opacity: .45; cursor: default; border-color: #E2E8F0; color: #94A3B8; }

/* ════════ KPIs bas ════════ */
.dpl-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 22px; }
.dpl-kpi { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid #E6EDEA;
  border-radius: 16px; padding: 18px 20px; box-shadow: 0 4px 14px rgba(15,23,42,.04); }
.dpl-kpi-ic { width: 46px; height: 46px; border-radius: 13px; background: #E8F8F1; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; }
.dpl-kpi-lbl { font-size: 12.5px; font-weight: 600; color: #94A3B8; margin-bottom: 3px; }
.dpl-kpi-val { font-size: 23px; font-weight: 800; color: #0F172A; line-height: 1; }
.dpl-kpi-foot { font-size: 12px; margin-top: 5px; display: flex; align-items: center; gap: 6px; }
.dpl-kpi-up { color: #027A48; font-weight: 700; }
.dpl-kpi-down { color: #DC2626; font-weight: 700; }
.dpl-kpi-vs { color: #CBD5E1; font-weight: 500; }

/* ════════ Responsive PC etroit ════════ */
@media (max-width: 1240px) {
  .dpl-split { grid-template-columns: 1fr 360px; }
  .dpl-d-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1040px) {
  .dpl-split { grid-template-columns: 1fr; }
  .dpl-detailcol { position: static; }
  .dpl-kpis { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   PAGE "VOIR LA COURSE" DESKTOP  (#dpro-course)
   Couvre la zone de contenu (au-dessus du Planning), retour possible.
   z-index 5600 : au-dessus de la page Planning (5500).
   ═══════════════════════════════════════════════════════════════ */
#dpro-course { display: none; }
body.is-desktop.is-logged.dpro-course-open #dpro-course {
  display: block;
  position: fixed; left: 248px; top: 66px; right: 0; bottom: 0;
  z-index: 5600; overflow-y: auto;
  background: #F4F8F6;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #0F172A;
}
.dco-loading { padding: 60px; text-align: center; color: #94A3B8; font-size: 15px; }

.dco { padding: 22px 30px 40px; max-width: 1400px; }

/* En-tete */
.dco-top { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.dco-back { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px;
  border-radius: 11px; border: 1.5px solid #E2E8F0; background: #fff; font-size: 14px; font-weight: 700;
  color: #475569; cursor: pointer; transition: all .15s; }
.dco-back:hover { border-color: #00A86B; color: #00A86B; }
.dco-top-title { display: flex; align-items: center; gap: 12px; }
.dco-top-client { font-size: 22px; font-weight: 800; }

/* Grille 2 colonnes */
.dco-grid { display: grid; grid-template-columns: 1fr 380px; gap: 22px; align-items: start; }
.dco-main { min-width: 0; }

/* Grande carte */
.dco-map { height: 340px; border-radius: 16px; overflow: hidden; background: #EAF1EE;
  border: 1px solid #E6EDEA; margin-bottom: 16px; }
.dco-map.dco-map-empty { display: flex; align-items: center; justify-content: center;
  color: #64748B; font-size: 14px; font-weight: 600; border: 1px dashed #CBD5E1; }
.dco-map .leaflet-container { height: 100%; width: 100%; background: #EAF1EE; }

/* Barre d'etapes */
.dco-steps { display: flex; align-items: center; background: #fff; border: 1px solid #E6EDEA;
  border-radius: 14px; padding: 16px 20px; margin-bottom: 16px; }
.dco-step { display: flex; align-items: center; gap: 8px; }
.dco-step-dot { width: 13px; height: 13px; border-radius: 50%; background: #E2E8F0; flex-shrink: 0; }
.dco-step-lbl { font-size: 13px; font-weight: 700; color: #94A3B8; white-space: nowrap; }
.dco-step-bar { flex: 1; height: 2px; background: #E2E8F0; margin: 0 10px; }
.dco-step-done .dco-step-dot { background: #00A86B; }
.dco-step-done .dco-step-lbl { color: #475569; }
.dco-step-active .dco-step-dot { background: #00A86B; box-shadow: 0 0 0 4px rgba(0,168,107,.2); }
.dco-step-active .dco-step-lbl { color: #00A86B; }
.dco-cancel-banner { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; border-radius: 14px;
  padding: 16px 20px; font-weight: 700; margin-bottom: 16px; text-align: center; }

/* Trajet */
.dco-trip { background: #fff; border: 1px solid #E6EDEA; border-radius: 14px; padding: 8px 20px; }
.dco-stop { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.dco-stop + .dco-stop { border-top: 1px solid #F1F5F9; }
.dco-stop-dot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; }
.dco-stop-from { background: #00A86B; box-shadow: 0 0 0 4px rgba(0,168,107,.15); }
.dco-stop-to { background: #0F172A; box-shadow: 0 0 0 4px rgba(15,23,42,.1); }
.dco-stop-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dco-stop-lbl { font-size: 11.5px; font-weight: 600; color: #94A3B8; }
.dco-stop-addr { font-size: 15px; font-weight: 700; color: #1E293B; }
.dco-stop-time { font-size: 15px; font-weight: 800; color: #0F172A; }

/* Colonne droite */
.dco-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 0; }
.dco-card { background: #fff; border: 1px solid #E6EDEA; border-radius: 16px; padding: 18px 20px;
  box-shadow: 0 4px 14px rgba(15,23,42,.04); }
.dco-card-h { font-size: 12px; font-weight: 700; color: #94A3B8; text-transform: uppercase;
  letter-spacing: .4px; margin-bottom: 12px; }
.dco-client-name { font-size: 18px; font-weight: 800; color: #0F172A; margin-bottom: 8px; }
.dco-client-row { display: flex; align-items: center; gap: 10px; }
.dco-muted { color: #94A3B8; font-size: 13.5px; }
.dco-phone { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700;
  color: #0F172A; text-decoration: none; }
.dco-phone svg { color: #00A86B; }
.dco-phone:hover { color: #00A86B; }
.dco-copy { margin-left: auto; border: 1px solid #E2E8F0; background: #fff; border-radius: 8px;
  padding: 5px 11px; font-size: 12px; font-weight: 700; color: #64748B; cursor: pointer; }
.dco-copy:hover { border-color: #00A86B; color: #00A86B; }

.dco-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dco-cell { background: #F8FAFC; border: 1px solid #EEF2F4; border-radius: 11px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px; }
.dco-cell-lbl { font-size: 10.5px; font-weight: 600; color: #94A3B8; }
.dco-cell-val { font-size: 14px; font-weight: 800; color: #0F172A; }
.dco-driver { margin-top: 12px; font-size: 13.5px; color: #475569; }
.dco-driver b { color: #0F172A; }

/* Actions */
.dco-actions { display: flex; flex-direction: column; gap: 10px; }
.dco-act { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; border-radius: 12px; font-size: 14.5px; font-weight: 700; cursor: pointer; transition: all .15s; border: 1.5px solid transparent; }
.dco-act:disabled { opacity: .6; cursor: default; }
.dco-act-primary { background: #00A86B; color: #fff; border: none; box-shadow: 0 4px 14px rgba(0,168,107,.28); }
.dco-act-primary:hover { background: #009760; }
.dco-act-ghost { background: #fff; color: #00A86B; border-color: #BFE6D6; }
.dco-act-ghost:hover { background: #F4FBF8; border-color: #00A86B; }
.dco-act-danger { background: #fff; color: #DC2626; border-color: #FCA5A5; height: 44px; font-size: 13.5px; }
.dco-act-danger:hover { background: #FEF2F2; border-color: #DC2626; }
.dco-no-action { color: #94A3B8; font-size: 13.5px; text-align: center; padding: 10px; }

/* Modales desktop (terminer / noter) */
.dco-modal-ov { position: fixed; inset: 0; z-index: 7200; background: rgba(15,23,42,.5);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.dco-modal { background: #fff; border-radius: 18px; width: 420px; max-width: 100%; padding: 24px 26px;
  box-shadow: 0 24px 70px rgba(0,0,0,.28); font-family: 'Inter', sans-serif; }
.dco-modal-h { font-size: 18px; font-weight: 800; margin-bottom: 16px; }
.dco-modal-lbl { display: block; font-size: 12.5px; font-weight: 700; color: #64748B; margin: 12px 0 6px; }
.dco-modal-input { width: 100%; height: 46px; border: 1.5px solid #E2E8F0; border-radius: 11px;
  padding: 0 14px; font-size: 16px; font-weight: 700; outline: none; }
.dco-modal-input:focus { border-color: #00A86B; }
.dco-modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.dco-modal-actions .dco-act { flex: 1; height: 46px; }
.dco-stars { display: flex; gap: 8px; justify-content: center; margin: 8px 0; }
.dco-star { font-size: 34px; line-height: 1; background: none; border: none; cursor: pointer; color: #E2E8F0; transition: color .12s; }
.dco-star.on, .dco-star:hover { color: #F5B301; }

@media (max-width: 1100px) {
  .dco-grid { grid-template-columns: 1fr; }
  .dco-side { position: static; }
}

/* ═══════════════════════════════════════════════════════════════
   MODALE DISPATCH DESKTOP  (.ddx)  — re-dispatch centré (≠ bottom-sheet)
   ═══════════════════════════════════════════════════════════════ */
.ddx-ov { position: fixed; inset: 0; z-index: 7200; background: rgba(15,23,42,.5);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.ddx { background: #fff; border-radius: 18px; width: 480px; max-width: 100%; max-height: 88vh; overflow-y: auto;
  padding: 22px 24px 24px; box-shadow: 0 24px 70px rgba(0,0,0,.3); color: #0F172A; }
.ddx-head { display: flex; align-items: center; justify-content: space-between; font-size: 18px; font-weight: 800; margin-bottom: 16px; }
.ddx-x { border: none; background: none; font-size: 26px; line-height: 1; color: #94A3B8; cursor: pointer; }
.ddx-x:hover { color: #475569; }
.ddx-sec-lbl { font-size: 12.5px; font-weight: 700; color: #334155; margin: 14px 0 8px; }
.ddx-opt { font-weight: 500; color: #94A3B8; }

.ddx-search { position: relative; margin-bottom: 8px; }
.ddx-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); }
.ddx-search input { width: 100%; height: 42px; border: 1.5px solid #E2E8F0; border-radius: 11px;
  padding: 0 14px 0 38px; font-size: 14px; outline: none; }
.ddx-search input:focus { border-color: #00A86B; }

.ddx-drivers { display: flex; flex-direction: column; gap: 6px; max-height: 230px; overflow-y: auto; padding-right: 2px; }
.ddx-driver { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  border: 1.5px solid #EEF2F4; background: #fff; border-radius: 12px; padding: 9px 12px; cursor: pointer; transition: all .12s; }
.ddx-driver:hover { background: #F8FAFC; }
.ddx-driver.sel { border-color: #00A86B; background: #F4FBF8; }
.ddx-driver-av { width: 36px; height: 36px; border-radius: 50%; background: #00A86B; color: #fff;
  font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ddx-driver-all { background: #E8F8F1; color: #00A86B; }
.ddx-driver-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ddx-driver-name { font-size: 14px; font-weight: 700; color: #1E293B; }
.ddx-driver-sub { font-size: 12px; color: #94A3B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ddx-check { color: #00A86B; font-weight: 800; font-size: 16px; }
.ddx-nodriver { font-size: 13px; color: #94A3B8; padding: 12px; text-align: center; }

.ddx-chips { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.ddx-chip { height: 40px; border: 1.5px solid #E2E8F0; background: #fff; border-radius: 10px;
  font-size: 13.5px; font-weight: 700; color: #475569; cursor: pointer; transition: all .12s; }
.ddx-chip:hover { border-color: #00A86B; color: #00A86B; }
.ddx-chip.sel { background: #00A86B; border-color: #00A86B; color: #fff; }

.ddx-actions { display: flex; gap: 10px; margin-top: 22px; }
.ddx-btn { flex: 1; height: 48px; border-radius: 12px; font-size: 14.5px; font-weight: 700; cursor: pointer; transition: all .15s; border: 1.5px solid transparent; }
.ddx-btn-ghost { background: #fff; color: #475569; border-color: #E2E8F0; }
.ddx-btn-ghost:hover { background: #F8FAFC; }
.ddx-btn-primary { background: #00A86B; color: #fff; box-shadow: 0 4px 14px rgba(0,168,107,.28); }
.ddx-btn-primary:hover { background: #009760; }
.ddx-btn.ddx-disabled { opacity: .5; pointer-events: none; }

@media (max-width: 560px) {
  .ddx-chips { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   MODALE "MODIFIER LA COURSE" DESKTOP  (.dpe)
   ═══════════════════════════════════════════════════════════════ */
.dpe-ov { position: fixed; inset: 0; z-index: 7200; background: rgba(15,23,42,.5);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.dpe { background: #fff; border-radius: 18px; width: 640px; max-width: 100%; max-height: 90vh;
  display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(0,0,0,.3); color: #0F172A; }
.dpe-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px;
  border-bottom: 1px solid #EEF2F4; font-size: 18px; font-weight: 800; }
.dpe-x { border: none; background: none; font-size: 26px; line-height: 1; color: #94A3B8; cursor: pointer; }
.dpe-x:hover { color: #475569; }
.dpe-body { padding: 8px 24px 18px; overflow-y: auto; }
.dpe-sec { font-size: 12px; font-weight: 700; color: var(--wt-green, #00A86B); text-transform: uppercase; letter-spacing: .4px;
  margin: 18px 0 10px; }
.dpe-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.dpe-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.dpe-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dpe-lbl { font-size: 12px; font-weight: 600; color: #64748B; }
.dpe-in { height: 44px; border: 1.5px solid #E2E8F0; border-radius: 11px; padding: 0 13px;
  font-size: 14px; outline: none; background: #fff; width: 100%; color: #0F172A; }
.dpe-in:focus { border-color: var(--wt-green, #00A86B); }
select.dpe-in { cursor: pointer; }
.dpe-check { display: flex; align-items: center; gap: 8px; height: 44px; font-size: 14px; font-weight: 600; color: #475569; cursor: pointer; }
.dpe-check input { width: 18px; height: 18px; accent-color: #00A86B; }
.dpe-actions { display: flex; gap: 12px; padding: 16px 24px; border-top: 1px solid #EEF2F4; }

/* ══ Nouvelle course v5 (dcr-*) ══ */
/* Voile renforcé + léger flou → rien ne dépasse derrière la modale */
.dcr-ov, .dpe-ov { backdrop-filter: blur(2px); }
.dpe-ov { background: rgba(15,23,42,.62); }
/* Puce ville éditable sous l'adresse */
.dcr-city { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 4px 6px 4px 9px;
  border: 1px solid #E2E8F0; border-radius: 999px; background: #F8FAFC; color: #94A3B8; max-width: 100%; }
.dcr-city:focus-within { border-color: var(--wt-green, #00A86B); background: #fff; color: var(--wt-green, #00A86B); }
.dcr-city input { border: none; outline: none; background: transparent; font: 600 12.5px/1 'Inter', sans-serif;
  color: #0F172A; padding: 2px 4px; min-width: 90px; max-width: 220px; }
/* Segmented controls (type de trajet, quand) */
.dcr-seg { display: inline-flex; gap: 3px; background: #F1F5F9; border-radius: 11px; padding: 3px; margin-bottom: 12px; flex-wrap: wrap; }
.dcr-seg button { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; height: 34px;
  padding: 0 13px; border-radius: 8px; font: 700 13px/1 'Inter', sans-serif; color: #64748B; cursor: pointer; transition: all .12s; }
.dcr-seg button:hover { color: #0F172A; }
.dcr-seg button.is-on { background: #fff; color: #0F172A; box-shadow: 0 1px 4px rgba(16,24,40,.1); }
.dcr-when { display: flex; }
.dcr-when button { flex: 1; justify-content: center; height: 40px; }
.dcr-when button.is-on { color: var(--wt-green, #00A86B); }
/* Messages d'erreur près des champs */
.dcr-err { display: block; font: 600 11.5px/1.3 'Inter', sans-serif; color: #DC2626; margin-top: 5px; }
/* Sections repliables */
.dcr-fold { border-top: 1px solid #EEF2F4; margin-top: 16px; padding-top: 4px; }
.dcr-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  font: 700 13.5px/1 'Inter', sans-serif; color: #0F172A; padding: 12px 0; }
.dcr-fold > summary::-webkit-details-marker { display: none; }
.dcr-fold > summary::before { content: "›"; font-size: 18px; color: #94A3B8; transition: transform .15s; }
.dcr-fold[open] > summary::before { transform: rotate(90deg); }
.dcr-badge { font: 800 10px/1 'Inter', sans-serif; color: #fff; background: var(--wt-green, #00A86B);
  border-radius: 999px; padding: 3px 8px; }
/* Toggle récurrence */
.dcr-switch { display: flex; align-items: center; gap: 10px; font: 600 13.5px/1 'Inter', sans-serif; color: #475569; cursor: pointer; }
.dcr-switch input { display: none; }
.dcr-switch-tr { width: 36px; height: 21px; border-radius: 999px; background: #E2E8F0; position: relative; transition: background .18s; flex-shrink: 0; }
.dcr-switch-th { position: absolute; top: 2.5px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.25); transition: left .18s; }
.dcr-switch input:checked + .dcr-switch-tr { background: var(--wt-green, #00A86B); }
.dcr-switch input:checked + .dcr-switch-tr .dcr-switch-th { left: 17px; }
/* Jours de récurrence */
.dcr-days { display: flex; gap: 6px; }
.dcr-days button { width: 34px; height: 34px; border: 1.5px solid #E2E8F0; border-radius: 9px; background: #fff;
  font: 800 12.5px/1 'Inter', sans-serif; color: #64748B; cursor: pointer; transition: all .12s; }
.dcr-days button:hover { border-color: #CBD5E1; }
.dcr-days button.is-on { background: var(--wt-green, #00A86B); border-color: var(--wt-green, #00A86B); color: #fff; }
.dcr-recur-preview { font: 500 12.5px/1.5 'Inter', sans-serif; color: #475569; background: #F0FDF4; border: 1px solid #BBF7D0;
  border-radius: 10px; padding: 9px 11px; margin: 12px 0 0; }
.dcr-recur-preview b { color: #067647; }
.dpe-btn { flex: 1; height: 48px; border-radius: 12px; font-size: 14.5px; font-weight: 700;
  cursor: pointer; transition: all .15s; border: 1.5px solid transparent; }
.dpe-btn-ghost { background: #fff; color: #475569; border-color: #E2E8F0; max-width: 160px; }
.dpe-btn-ghost:hover { background: #F8FAFC; }
.dpe-btn-primary { background: #00A86B; color: #fff; box-shadow: 0 4px 14px rgba(0,168,107,.28); }
.dpe-btn-primary:hover { background: #009760; }
.dpe-btn:disabled { opacity: .6; cursor: default; }

@media (max-width: 620px) {
  .dpe-row2, .dpe-row3 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   MESSAGES DESKTOP  (.dms)  — 3 colonnes : liste · fil · infos
   ═══════════════════════════════════════════════════════════════ */
.dms { display: grid; grid-template-columns: 320px 1fr 320px; height: 100%;
  background: #fff; }
#dpro-page[data-page="messages"] { padding: 0; }
body.is-desktop.is-logged.dpro-page-open #dpro-page[data-page="messages"] { background: #fff; }

/* ── Colonne gauche : liste ── */
.dms-list { border-right: 1px solid #E9EDF0; display: flex; flex-direction: column; min-height: 0; }
.dms-list-head { font-size: 19px; font-weight: 800; padding: 20px 20px 12px; }
.dms-search { position: relative; padding: 0 16px 12px; }
.dms-search svg { position: absolute; left: 30px; top: 11px; }
.dms-search input { width: 100%; height: 40px; border: 1.5px solid #E2E8F0; border-radius: 11px;
  padding: 0 12px 0 38px; font-size: 13.5px; outline: none; background: #F8FAFC; }
.dms-search input:focus { border-color: #00A86B; background: #fff; }
.dms-convs { flex: 1; overflow-y: auto; padding: 4px 8px 12px; }
.dms-empty { text-align: center; color: #94A3B8; font-size: 13.5px; padding: 28px 12px; }

.dms-conv { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: none; background: none; padding: 11px 12px; border-radius: 12px; cursor: pointer; transition: background .12s; }
.dms-conv:hover { background: #F4FBF8; }
.dms-conv.active { background: #E8F8F1; }
.dms-conv-av { width: 44px; height: 44px; border-radius: 50%; background: #00A86B; color: #fff;
  font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dms-conv-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dms-conv-name { font-size: 14.5px; font-weight: 700; color: #1E293B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dms-conv-route { font-size: 12.5px; color: #94A3B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dms-conv-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.dms-conv-time { font-size: 11.5px; color: #94A3B8; }
/* Corbeille de conversation — apparait au survol */
.dms-conv { position: relative; }
.dms-conv-del { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 8px; border: none; background: #fff; color: #DC2626;
  display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(15,23,42,.12); }
.dms-conv:hover .dms-conv-del { display: flex; }
.dms-conv-del:hover { background: #FEF2F2; }

/* ── Colonne centre : fil ── */
.dms-thread { display: flex; flex-direction: column; min-height: 0; background: #F7FAF9; }
.dms-thread-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #94A3B8; }
.dms-empty-ic { font-size: 36px; }
.dms-empty-t { font-size: 15px; font-weight: 600; }
.dms-th-head { display: flex; align-items: center; gap: 12px; padding: 14px 22px; background: #fff; border-bottom: 1px solid #E9EDF0; }
.dms-th-av { width: 42px; height: 42px; border-radius: 50%; background: #00A86B; color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dms-th-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dms-th-name { font-size: 16px; font-weight: 800; color: #0F172A; }
.dms-th-sub { font-size: 12.5px; color: #94A3B8; }
.dms-th-call { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #E2E8F0; color: #00A86B;
  display: flex; align-items: center; justify-content: center; text-decoration: none; }
.dms-th-call:hover { background: #F4FBF8; border-color: #00A86B; }

.dms-th-msgs { flex: 1; overflow-y: auto; padding: 20px 26px; display: flex; flex-direction: column; gap: 8px; }
.dms-daysep { align-self: center; background: #E8EEEC; color: #64748B; font-size: 11.5px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; margin: 8px 0; text-transform: capitalize; }
.dms-bub { max-width: 68%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.4; position: relative; }
.dms-bub.other { align-self: flex-start; background: #fff; border: 1px solid #EAEFED; border-bottom-left-radius: 5px; color: #1E293B; }
.dms-bub.mine { align-self: flex-end; background: #D1F2E1; border-bottom-right-radius: 5px; color: #0F3D29; }
.dms-bub-author { font-size: 11.5px; font-weight: 700; color: #00A86B; margin-bottom: 2px; }
.dms-bub-time { font-size: 10.5px; color: #8AA59A; text-align: right; margin-top: 3px; }
.dms-bub.other .dms-bub-time { color: #B6C2CC; }
.dms-bub-img { max-width: 230px; border-radius: 10px; display: block; }
.dms-bub-file { font-size: 13.5px; font-weight: 600; }
.dms-sys { align-self: center; font-size: 12px; color: #94A3B8; background: #EEF3F1; padding: 5px 12px; border-radius: 999px; margin: 4px 0; }

.dms-composer { display: flex; align-items: center; gap: 10px; padding: 14px 22px; background: #fff; border-top: 1px solid #E9EDF0; }
.dms-composer input { flex: 1; height: 46px; border: 1.5px solid #E2E8F0; border-radius: 23px; padding: 0 18px; font-size: 14.5px; outline: none; background: #F8FAFC; }
.dms-composer input:focus { border-color: #00A86B; background: #fff; }
.dms-send { width: 46px; height: 46px; border-radius: 50%; border: none; background: #00A86B; color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,168,107,.3); }
.dms-send:hover { background: #009760; }

/* ── Colonne droite : infos ── */
.dms-side { border-left: 1px solid #E9EDF0; padding: 18px 18px 30px; overflow-y: auto; background: #FBFDFC; }
.dms-side-h { font-size: 13px; font-weight: 800; color: #0F172A; margin: 18px 2px 10px; display: flex; align-items: center; justify-content: space-between; }
.dms-side-h:first-child { margin-top: 2px; }
.dms-card { background: #fff; border: 1px solid #E9EDF0; border-radius: 14px; padding: 16px; box-shadow: 0 2px 8px rgba(15,23,42,.03); }
.dms-cli { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dms-cli-av { width: 50px; height: 50px; border-radius: 50%; background: #00A86B; color: #fff; font-weight: 800; font-size: 18px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dms-cli-id { display: flex; flex-direction: column; gap: 4px; }
.dms-cli-name { font-size: 16px; font-weight: 800; color: #0F172A; }
.dms-cli-rows { display: flex; flex-direction: column; gap: 9px; }
.dms-cli-row { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #475569; }
.dms-cli-row svg { flex-shrink: 0; }

.dms-ride-date { font-size: 13px; font-weight: 700; color: #475569; margin-bottom: 12px; }
.dms-ride-trip { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.dms-ride-stop { display: flex; align-items: center; gap: 10px; }
.dms-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.dms-dot-from { background: #00A86B; }
.dms-dot-to { background: #0F172A; }
.dms-ride-city { flex: 1; font-size: 13.5px; font-weight: 700; color: #1E293B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dms-ride-time { font-size: 12.5px; font-weight: 800; color: #0F172A; }
.dms-ride-meta { font-size: 12.5px; color: #94A3B8; border-top: 1px solid #F1F5F9; padding-top: 10px; }

.dms-actions { display: flex; flex-direction: column; gap: 10px; }
.dms-act { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px;
  border-radius: 12px; border: 1.5px solid #BFE6D6; background: #fff; color: #00A86B; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .15s; }
.dms-act:hover { background: #F4FBF8; border-color: #00A86B; }
.dms-act-off { opacity: .45; pointer-events: none; }

@media (max-width: 1200px) {
  .dms { grid-template-columns: 280px 1fr; }
  .dms-side { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   RÉPERTOIRE DESKTOP  (.drp)  — table à gauche + fiche à droite
   ═══════════════════════════════════════════════════════════════ */
.drp { display: grid; grid-template-columns: 1fr 400px; height: 100%; background: #fff; }
#dpro-page[data-page="repertoire"] { padding: 0; }
body.is-desktop.is-logged.dpro-page-open #dpro-page[data-page="repertoire"] { background: #fff; }

/* ── Colonne gauche ── */
.drp-list { display: flex; flex-direction: column; min-height: 0; padding: 24px 28px; overflow: hidden; }
.drp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.drp-title { font-size: 26px; font-weight: 800; margin: 0; letter-spacing: -.5px; }
.drp-add { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border: none;
  border-radius: 11px; background: #00A86B; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,168,107,.28); transition: background .15s; }
.drp-add:hover { background: #009760; }

.drp-tabs { display: flex; gap: 22px; border-bottom: 1px solid #E9EDF0; margin-bottom: 14px; }
.drp-tab { border: none; background: none; padding: 10px 2px; position: relative; font-size: 14.5px; font-weight: 700;
  color: #94A3B8; cursor: pointer; transition: color .15s; }
.drp-tab:hover { color: #475569; }
.drp-tab.active { color: #00A86B; }
.drp-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: #00A86B; border-radius: 3px 3px 0 0; }

.drp-search { position: relative; margin-bottom: 12px; }
.drp-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); }
.drp-search input { width: 100%; height: 42px; border: 1.5px solid #E2E8F0; border-radius: 11px; padding: 0 14px 0 38px;
  font-size: 14px; outline: none; background: #F8FAFC; }
.drp-search input:focus { border-color: #00A86B; background: #fff; }

.drp-tablewrap { flex: 1; overflow-y: auto; }
.drp-empty { padding: 40px; text-align: center; color: #94A3B8; }
.drp-table { width: 100%; border-collapse: collapse; }
.drp-table thead th { text-align: left; font-size: 11.5px; font-weight: 700; color: #94A3B8; text-transform: uppercase;
  letter-spacing: .4px; padding: 10px 14px; position: sticky; top: 0; background: #fff; border-bottom: 1px solid #EEF2F4; }
.drp-table tbody td { padding: 12px 14px; border-bottom: 1px solid #F4F7F6; font-size: 13.5px; vertical-align: middle; }
.drp-row { cursor: pointer; transition: background .12s; }
.drp-row:hover { background: #F8FAFC; }
.drp-row.active { background: #E8F8F1; }
.drp-row.active td:first-child { box-shadow: inset 3px 0 0 #00A86B; }
.drp-name { display: flex; align-items: center; gap: 11px; font-weight: 700; color: #1E293B; }
.drp-av { width: 36px; height: 36px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 12.5px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.drp-act-date { font-weight: 600; color: #1E293B; }
.drp-act-status { font-size: 12px; font-weight: 600; margin-top: 2px; }
.drp-st-done { color: #027A48; } .drp-st-cancelled { color: #DC2626; } .drp-st-progress, .drp-st-accepted, .drp-st-aboard, .drp-st-dispatch { color: #1D4ED8; }
.drp-muted { color: #94A3B8; }
.drp-avail { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.drp-avail-available { background: #D1FADF; color: #027A48; }
.drp-avail-busy { background: #FEF3C7; color: #B45309; }
.drp-avail-offline { background: #EAEEF2; color: #64748B; }
.drp-row-act { display: flex; gap: 4px; justify-content: flex-end; opacity: 0; transition: opacity .12s; }
.drp-row:hover .drp-row-act, .drp-row.active .drp-row-act { opacity: 1; }
.drp-act-edit, .drp-act-del { width: 30px; height: 30px; border-radius: 8px; border: none; background: #F1F5F9;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: #64748B; }
.drp-act-edit:hover { background: #E8F8F1; color: #00A86B; }
.drp-act-del:hover { background: #FEF2F2; color: #DC2626; }

/* ── Colonne droite : fiche ── */
.drp-detail { border-left: 1px solid #E9EDF0; padding: 22px 22px 30px; overflow-y: auto; background: #FBFDFC; }
.drp-detail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 8px; color: #94A3B8; }
.drp-empty-ic { font-size: 34px; }
.drp-empty-t { font-size: 15px; font-weight: 600; }

.drp-d-head { display: flex; align-items: center; gap: 13px; margin-bottom: 6px; }
.drp-d-av { width: 56px; height: 56px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 18px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.drp-d-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.drp-d-name { font-size: 19px; font-weight: 800; color: #0F172A; }
.drp-d-phone { font-size: 13px; color: #94A3B8; }
.drp-d-headbtns { display: flex; gap: 7px; }
.drp-d-iconbtn { width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid #E2E8F0; background: #fff;
  color: #00A86B; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.drp-d-iconbtn:hover { background: #F4FBF8; border-color: #00A86B; }

.drp-d-sec { font-size: 12px; font-weight: 800; color: #94A3B8; text-transform: uppercase; letter-spacing: .4px;
  margin: 18px 2px 9px; display: flex; align-items: center; gap: 8px; }
.drp-count { background: #E8F8F1; color: #00A86B; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; }
.drp-card { background: #fff; border: 1px solid #E9EDF0; border-radius: 13px; padding: 14px 16px; }
.drp-crow { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #475569; padding: 5px 0; }
.drp-crow svg { flex-shrink: 0; }
.drp-note { font-size: 13.5px; color: #475569; line-height: 1.5; background: #F4FBF8; border-color: #D7EEE4; }

.drp-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.drp-col-h { font-size: 11.5px; font-weight: 700; color: #94A3B8; margin-bottom: 8px; }
.drp-place { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: #1E293B; padding: 4px 0; }
.drp-place-n { font-size: 11px; font-weight: 700; color: #00A86B; background: #E8F8F1; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }

.drp-rc { padding: 10px 0; border-bottom: 1px solid #F4F7F6; }
.drp-rc:last-child { border-bottom: none; }
.drp-rc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.drp-rc-date { font-size: 13px; font-weight: 700; color: #1E293B; flex: 1; }
.drp-rc-price { font-size: 13px; font-weight: 800; color: #0F172A; }
.drp-rc-route { font-size: 12.5px; color: #64748B; }

@media (max-width: 1180px) {
  .drp { grid-template-columns: 1fr 340px; }
}
@media (max-width: 1000px) {
  .drp { grid-template-columns: 1fr; }
  .drp-detail { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   PROFIL DESKTOP  (.dpf)
   ═══════════════════════════════════════════════════════════════ */
.dpf { padding: 26px 30px 44px; max-width: 1100px; }

/* Héro */
.dpf-hero { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid #E6EDEA;
  border-radius: 18px; padding: 22px 26px; box-shadow: 0 4px 16px rgba(15,23,42,.04); margin-bottom: 22px; }
.dpf-hero-av { width: 72px; height: 72px; border-radius: 50%; background: #00A86B; color: #fff;
  font-size: 26px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dpf-hero-name { font-size: 24px; font-weight: 800; color: #0F172A; }
.dpf-hero-sub { display: flex; align-items: center; gap: 16px; margin-top: 5px; font-size: 14px; color: #64748B; flex-wrap: wrap; }
.dpf-stars { display: inline-flex; align-items: center; gap: 3px; }
.dpf-star { color: #E2E8F0; font-size: 16px; }
.dpf-star.on { color: #F5B301; }
.dpf-stars b { color: #0F172A; margin-left: 4px; }
.dpf-rcount { color: #94A3B8; font-size: 13px; }

/* Grille */
.dpf-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: start; }
.dpf-col { display: flex; flex-direction: column; gap: 20px; }
.dpf-card { background: #fff; border: 1px solid #E6EDEA; border-radius: 16px; padding: 20px 22px; box-shadow: 0 2px 10px rgba(15,23,42,.03); }
.dpf-card-h { font-size: 15px; font-weight: 800; color: #0F172A; margin-bottom: 4px; }
.dpf-card-sub { font-size: 12.5px; color: #94A3B8; margin-bottom: 14px; }

/* Formulaire infos */
.dpf-form { margin-top: 14px; }
.dpf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.dpf-field { display: flex; flex-direction: column; gap: 5px; }
.dpf-field { margin-bottom: 12px; }
.dpf-row2 .dpf-field { margin-bottom: 0; }
.dpf-lbl { font-size: 12px; font-weight: 600; color: #64748B; }
.dpf-in { height: 44px; border: 1.5px solid #E2E8F0; border-radius: 11px; padding: 0 13px; font-size: 14px; outline: none; background: #fff; }
.dpf-in:focus { border-color: #00A86B; }
.dpf-save { width: 100%; height: 48px; margin-top: 6px; border: none; border-radius: 12px; background: #00A86B;
  color: #fff; font-size: 14.5px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0,168,107,.28); }
.dpf-save:hover { background: #009760; }
.dpf-save:disabled { opacity: .6; cursor: default; }

/* Canaux */
.dpf-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.dpf-chip { height: 44px; border: 1.5px solid #E2E8F0; background: #fff; border-radius: 11px; font-size: 14px;
  font-weight: 700; color: #475569; cursor: pointer; transition: all .12s; }
.dpf-chip:hover { border-color: #00A86B; color: #00A86B; }
.dpf-chip.on { background: #00A86B; border-color: #00A86B; color: #fff; }

/* Véhicules */
.dpf-vtypes { display: flex; flex-direction: column; gap: 10px; }
.dpf-vtype { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  border: 1.5px solid #E2E8F0; background: #fff; border-radius: 12px; padding: 12px 15px; cursor: pointer; transition: all .12s; }
.dpf-vtype:hover { border-color: #BFE6D6; }
.dpf-vtype.on { border-color: #00A86B; background: #F4FBF8; }
.dpf-vtype-lbl { font-size: 14.5px; font-weight: 700; color: #1E293B; }
.dpf-vtype.on .dpf-vtype-lbl { color: #00A86B; }
.dpf-vtype-sub { font-size: 12px; color: #94A3B8; }

/* Déconnexion */
.dpf-logout { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 18px; width: 100%;
  justify-content: center; border: 1.5px solid #FCA5A5; background: #fff; color: #DC2626; border-radius: 12px;
  font-size: 14px; font-weight: 700; cursor: pointer; transition: all .15s; }
.dpf-logout:hover { background: #FEF2F2; border-color: #DC2626; }

@media (max-width: 980px) {
  .dpf-grid { grid-template-columns: 1fr; }
  .dpf-chips { grid-template-columns: repeat(8, 1fr); }
}

/* ── Profil : statistiques + lien réservation ── */
.dpf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.dpf-stat { background: #fff; border: 1px solid #E6EDEA; border-radius: 14px; padding: 16px 18px; box-shadow: 0 2px 10px rgba(15,23,42,.03); }
.dpf-stat-val { font-size: 24px; font-weight: 800; color: #00A86B; line-height: 1; }
.dpf-stat-lbl { font-size: 12.5px; font-weight: 600; color: #94A3B8; margin-top: 6px; }

.dpf-booking { margin-top: 20px; }
.dpf-bk-row { display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; flex-wrap: wrap; }
.dpf-bk-prefix { font-size: 13px; color: #94A3B8; font-weight: 600; white-space: nowrap; }
.dpf-bk-slug { flex: 1; min-width: 180px; height: 44px; }
.dpf-bk-save { height: 44px; padding: 0 18px; border: none; border-radius: 11px; background: #00A86B; color: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer; }
.dpf-bk-save:hover { background: #009760; }
.dpf-bk-full { display: flex; align-items: center; gap: 12px; background: #F4FBF8; border: 1px solid #D7EEE4;
  border-radius: 11px; padding: 12px 14px; flex-wrap: wrap; }
.dpf-bk-full > span { flex: 1; min-width: 200px; font-size: 13.5px; color: #0F766E; font-weight: 600; word-break: break-all; }
.dpf-bk-copy { border: none; background: #00A86B; color: #fff; border-radius: 9px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.dpf-bk-copy:hover { background: #009760; }
.dpf-bk-open { border: 1.5px solid #BFE6D6; color: #00A86B; border-radius: 9px; padding: 7px 14px; font-size: 13px; font-weight: 700; text-decoration: none; }
.dpf-bk-open:hover { background: #fff; }

/* ═══════════════════════════════════════════════════════════════
   PARAMÈTRES DESKTOP  (.dst)
   ═══════════════════════════════════════════════════════════════ */
.dst { padding: 26px 30px 44px; max-width: 1000px; }
.dst-title { font-size: 26px; font-weight: 800; margin: 0 0 20px; letter-spacing: -.5px; }
.dst-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.dst-card { background: #fff; border: 1px solid #E6EDEA; border-radius: 16px; padding: 20px 22px; box-shadow: 0 2px 10px rgba(15,23,42,.03); }
.dst-card-wide { grid-column: 1 / -1; }
.dst-card-h { font-size: 15px; font-weight: 800; color: #0F172A; margin-bottom: 4px; }
.dst-card-sub { font-size: 12.5px; color: #94A3B8; margin-bottom: 14px; }

.dst-notif { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dst-notif-state { font-size: 13px; font-weight: 700; padding: 6px 13px; border-radius: 999px; }
.dst-ns-granted { background: #D1FADF; color: #027A48; }
.dst-ns-default { background: #FEF3C7; color: #B45309; }
.dst-ns-denied { background: #FEE2E2; color: #B91C1C; }
.dst-ns-unsupported { background: #EAEEF2; color: #64748B; }

.dst-btn { height: 44px; padding: 0 18px; border-radius: 11px; font-size: 13.5px; font-weight: 700; cursor: pointer; border: 1.5px solid transparent; transition: all .15s; }
.dst-btn-primary { background: #00A86B; color: #fff; border: none; }
.dst-btn-primary:hover { background: #009760; }
.dst-btn-ghost { background: #fff; color: #00A86B; border-color: #BFE6D6; }
.dst-btn-ghost:hover { background: #F4FBF8; border-color: #00A86B; }
.dst-btn-danger { background: #fff; color: #DC2626; border-color: #FCA5A5; }
.dst-btn-danger:hover { background: #FEF2F2; border-color: #DC2626; }
.dst-btn:disabled { opacity: .6; cursor: default; }

.dst-test { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Switch */
.dst-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.dst-switch input { display: none; }
.dst-switch-track { width: 48px; height: 28px; border-radius: 999px; background: #CBD5E1; position: relative; transition: background .15s; flex-shrink: 0; }
.dst-switch-thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.dst-switch input:checked + .dst-switch-track { background: #00A86B; }
.dst-switch input:checked + .dst-switch-track .dst-switch-thumb { transform: translateX(20px); }
.dst-switch-lbl { font-size: 14px; font-weight: 700; color: #475569; }

.dst-logout { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 18px; width: 100%;
  justify-content: center; border: 1.5px solid #FCA5A5; background: #fff; color: #DC2626; border-radius: 12px;
  font-size: 14px; font-weight: 700; cursor: pointer; transition: all .15s; }
.dst-logout:hover { background: #FEF2F2; border-color: #DC2626; }

@media (max-width: 900px) {
  .dst-grid { grid-template-columns: 1fr; }
  .dst-test { grid-template-columns: 1fr; }
}

/* ── Codes promo (section Paramètres) ── */
.dpr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.dpr-create { background: #F8FAFC; border: 1.5px solid #E2E8F0; border-radius: 12px; padding: 18px; margin-bottom: 16px; }
.dpr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.dpr-field { display: flex; flex-direction: column; gap: 5px; }
.dpr-lbl { font-size: 12px; font-weight: 700; color: #475569; }
.dpr-opt { font-weight: 500; color: #94A3B8; }
.dpr-in { height: 40px; padding: 0 12px; border: 1.5px solid #E2E8F0; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: #0F172A; background: #fff; outline: none; transition: border-color .15s; }
.dpr-in:focus { border-color: #00A86B; }
.dpr-form-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.dpr-table-wrap { overflow-x: auto; border-radius: 10px; border: 1.5px solid #E2E8F0; }
.dpr-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dpr-th { padding: 10px 14px; text-align: left; font-size: 11.5px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: .04em; background: #F8FAFC; border-bottom: 1.5px solid #E2E8F0; }
.dpr-td { padding: 11px 14px; border-bottom: 1px solid #F1F5F9; vertical-align: middle; color: #1E293B; }
.dpr-tr:last-child .dpr-td { border-bottom: none; }
.dpr-tr--off .dpr-td { color: #94A3B8; }
.dpr-empty { padding: 20px 14px; color: #94A3B8; font-style: italic; text-align: center; }
.dpr-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.dpr-badge--on  { background: #DCFCE7; color: #15803D; }
.dpr-badge--off { background: #F1F5F9; color: #94A3B8; }
.dpr-actions { display: flex; gap: 6px; white-space: nowrap; }
@media (max-width: 900px) { .dpr-form-grid { grid-template-columns: 1fr; } }