/* RoadPilot — design system intégré depuis Claude Design (projet "RoadPilot TMS design system").
   Direction retenue : 1a (cartes calmes, menu latéral sombre). */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Neutrals */
  --bg: #EFEEEA;
  --surface: #FBFAF8;
  --card: #FFFFFF;
  --border: #E4E2DC;
  --border-soft: #F4F2ED;
  --border-softer: #EFEDE8;

  /* Texte */
  --ink: #12283F;
  --ink-soft: #5A6472;
  --ink-faint: #8A9099;
  --ink-fainter: #A0A6AE;

  /* Sidebar */
  --sidebar-bg: #12283F;
  --sidebar-text: #FFFFFF;
  --sidebar-text-muted: #A7B4C4;
  --sidebar-text-fainter: #7E8FA3;

  /* Marque */
  --blue: #114E8C;
  --blue-wash: #E8F0FA;
  --blue-border: #CBDDF2;
  --accent: #E15540;
  --accent-wash: #FCEDEA;
  --accent-fg: #B23A28;
  --accent-border: #F3D3CC;

  /* Statuts (toujours les mêmes 4 couleurs dans toute l'appli) */
  --st-planifier-dot: #E15540; --st-planifier-bg: #FCEDEA; --st-planifier-fg: #B23A28; --st-planifier-bd: #F3D3CC;
  --st-cours-dot: #1466B8;     --st-cours-bg: #E8F0FA;     --st-cours-fg: #114E8C;     --st-cours-bd: #CBDDF2;
  --st-livre-dot: #2F7D5B;     --st-livre-bg: #E7F2EC;     --st-livre-fg: #2A6B4F;     --st-livre-bd: #CFE3D8;
  --st-facture-dot: #8A9099;   --st-facture-bg: #EEF0F2;   --st-facture-fg: #5A6472;   --st-facture-bd: #DDE1E5;

  --radius-card: 14px;
  --radius-input: 10px;
  --radius-btn: 9px;
  --radius-pill: 999px;

  --sidebar-width: 224px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--accent); }

.mono { font-family: "IBM Plex Mono", monospace; }
.tabular { font-variant-numeric: tabular-nums; }

button, .btn {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ============== Boutons ============== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600;
  padding: 11px 18px; border-radius: var(--radius-btn);
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #C8452F; }
.btn-secondary { background: #fff; border: 1px solid var(--blue-border); color: var(--blue); font-weight: 500; }
.btn-secondary:hover { background: var(--blue-wash); }
.btn-ghost { color: var(--ink-soft); font-weight: 500; background: none; padding: 11px 8px; }
.btn-ghost:hover { color: var(--ink); }
.btn-block { width: 100%; justify-content: center; }

/* ============== Layout général ============== */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width); flex: none;
  background: var(--sidebar-bg);
  padding: 22px 16px; display: flex; flex-direction: column; gap: 26px;
  position: sticky; top: 0; height: 100vh;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.sidebar-brand img { width: 30px; height: 30px; object-fit: contain; background: #fff; border-radius: 7px; padding: 2px; }
.sidebar-brand span { color: #fff; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }

.sidebar-nav { display: flex; flex-direction: column; gap: 3px; }
.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  color: var(--sidebar-text-muted); padding: 11px 12px; border-radius: 9px;
  font-size: 14.5px;
}
.sidebar-link .dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; flex: none; }
.sidebar-link:hover { color: #fff; }
.sidebar-link.active { background: rgba(255,255,255,0.10); color: #fff; font-weight: 500; }
.sidebar-link.active .dot { background: var(--accent); }

.sidebar-user {
  margin-top: auto; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-top: 1px solid rgba(255,255,255,0.12);
}
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 600; flex: none;
}
.sidebar-user { min-width: 0; }
.sidebar-user > div { min-width: 0; overflow: hidden; }
.sidebar-user-name { color: #fff; font-size: 13.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-sub { color: var(--sidebar-text-fainter); font-size: 12px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-logout { margin-left: auto; color: var(--sidebar-text-fainter); font-size: 12px; flex: none; }
.sidebar-logout:hover { color: #fff; }

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

.topbar {
  height: 70px; background: #fff; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 28px; flex: none;
}
.topbar-title { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.topbar-sub { font-size: 13px; color: var(--ink-faint); }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.search-box {
  width: 250px; height: 40px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); display: flex; align-items: center; padding: 0 14px;
  font-size: 14px; color: var(--ink-fainter);
}

.content { flex: 1; padding: 22px 28px 26px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ============== Cartes / KPI ============== */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); }
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.kpi-card { padding: 22px; }
.kpi-label { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
.kpi-value { font-size: 38px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.kpi-note { margin-top: 12px; font-size: 13.5px; color: var(--ink-soft); }
.kpi-note.positive { color: var(--st-livre-fg); }
.kpi-note.warning { color: var(--st-planifier-fg); font-weight: 500; }

.dash-columns { display: grid; grid-template-columns: 1fr 320px; gap: 18px; flex: 1; min-height: 0; }

.panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); display: flex; flex-direction: column; overflow: hidden; }
.panel-header {
  padding: 18px 22px; border-bottom: 1px solid var(--border-softer);
  display: flex; align-items: center; justify-content: space-between;
}
.panel-title { font-size: 16.5px; font-weight: 600; }
.panel-link { font-size: 13.5px; color: var(--blue); font-weight: 500; }

/* ============== Liste des tournées / OT ============== */
.tournee-row {
  display: grid; grid-template-columns: 64px 1fr 150px 128px; align-items: center; gap: 14px;
  padding: 14px 22px; border-bottom: 1px solid var(--border-soft);
}
.tournee-row:last-child { border-bottom: none; }
.tournee-heure { font-family: "IBM Plex Mono", monospace; font-size: 14px; color: var(--ink-soft); }
.tournee-client { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; display: block; }
.tournee-trajet { font-size: 13px; color: var(--ink-soft); display: block; }
.tournee-chauffeur { font-size: 13.5px; color: var(--ink); display: block; }
.tournee-plaque { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink-faint); display: block; }

/* ============== Pastilles de statut ============== */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 500; white-space: nowrap;
}
.pill-sm { padding: 6px 12px; font-size: 13px; }
.pill .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pill-sm .dot { width: 8px; height: 8px; }

.pill-a_planifier { background: var(--st-planifier-bg); color: var(--st-planifier-fg); }
.pill-a_planifier .dot { background: var(--st-planifier-dot); }
.pill-en_cours { background: var(--st-cours-bg); color: var(--st-cours-fg); }
.pill-en_cours .dot { background: var(--st-cours-dot); }
.pill-livree { background: var(--st-livre-bg); color: var(--st-livre-fg); }
.pill-livree .dot { background: var(--st-livre-dot); }
.pill-facturee { background: var(--st-facture-bg); color: var(--st-facture-fg); }
.pill-facturee .dot { background: var(--st-facture-dot); }

.status-breakdown-row { display: flex; align-items: center; justify-content: space-between; font-size: 14.5px; }
.status-breakdown-row .label { display: flex; align-items: center; gap: 9px; color: var(--ink-soft); }
.status-breakdown-row .label .dot { width: 9px; height: 9px; border-radius: 50%; }
.status-breakdown-row .count { font-weight: 600; }

.alert-box { border-radius: 12px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; }
.alert-box.warn { background: var(--accent-wash); border: 1px solid var(--accent-border); }
.alert-box .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.alert-box .text { font-size: 14.5px; color: var(--accent-fg); }
.alert-box .cta { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--accent-fg); }

/* ============== Filtres en pilules (liste OT) ============== */
.filter-bar { padding: 20px 28px 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-pill {
  font-size: 14px; padding: 9px 15px; border-radius: var(--radius-pill);
  background: #fff; border: 1px solid var(--border); color: var(--ink-soft);
  display: flex; align-items: center; gap: 8px;
}
.filter-pill.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.filter-pill .dot { width: 9px; height: 9px; border-radius: 50%; }
.filter-spacer { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.select-pill { background: #fff; border: 1px solid var(--border); color: var(--ink-soft); font-size: 14px; padding: 9px 15px; border-radius: 9px; }

/* ============== Tableau (liste OT) ============== */
.data-table { margin: 0 28px 24px; }
.data-table-head, .data-row {
  display: grid; grid-template-columns: 106px 1.1fr 1.5fr 1fr 104px 132px; gap: 14px; align-items: center;
}
.data-table-head {
  padding: 13px 22px; background: var(--surface); border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint);
}
.data-row { padding: 15px 22px; border-bottom: 1px solid var(--border-soft); }
.data-row:last-child { border-bottom: none; }
.data-row .num { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--ink-soft); }
.data-row .client { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.data-row .price { font-size: 14px; font-weight: 600; text-align: right; }

.facture-table-head, .facture-row {
  display: grid; grid-template-columns: 140px 1.4fr 110px 110px 120px 120px; gap: 14px; align-items: center;
}
.facture-table-head {
  padding: 13px 22px; background: var(--surface); border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint);
}
.facture-row { padding: 15px 22px; border-bottom: 1px solid var(--border-soft); color: inherit; }
.facture-row:last-child { border-bottom: none; }
.facture-row .num { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--ink-soft); }
.facture-row .client { font-weight: 600; }
.facture-row .date { font-size: 13.5px; color: var(--ink-soft); }
.facture-row .ttc { font-weight: 600; text-align: right; }
.facture-row .ttc.tabular { font-variant-numeric: tabular-nums; }

/* ============== Planning ============== */
.planning-grid { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.planning-head-row { display: flex; border-bottom: 1px solid var(--border); background: var(--surface); }
.planning-col-camion { width: 200px; flex: none; padding: 12px 18px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); border-right: 1px solid var(--border-soft); }
.planning-hours { flex: 1; display: flex; }
.planning-hour { flex: 1; padding: 12px 0; text-align: center; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink-faint); border-left: 1px solid var(--border-softer); }
.planning-row { display: flex; border-bottom: 1px solid var(--border-soft); min-height: 76px; }
.planning-row-camion { width: 200px; flex: none; padding: 14px 18px; display: flex; flex-direction: column; gap: 3px; border-right: 1px solid var(--border-soft); }
.planning-row-camion .name { font-size: 14.5px; font-weight: 600; }
.planning-row-camion .plate { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink-faint); }
.planning-row-track { flex: 1; position: relative; padding: 12px 0; }
.planning-block {
  position: absolute; top: 12px; bottom: 12px; border-radius: 9px; border-left: 4px solid;
  padding: 9px 11px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; cursor: pointer;
}
.planning-block .client { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planning-block .trajet { font-size: 12px; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planning-legend { display: flex; gap: 22px; padding-left: 4px; flex-wrap: wrap; }
.planning-legend .item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.planning-legend .dot { width: 9px; height: 9px; border-radius: 50%; }
.planning-nav { display: flex; align-items: center; gap: 6px; }
.planning-nav-btn { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: 15px; }
.planning-nav-today { height: 36px; border: 1px solid var(--border); border-radius: 8px; background: #fff; display: flex; align-items: center; padding: 0 14px; color: var(--ink); font-size: 14px; font-weight: 500; }
.planning-nav-today:disabled { opacity: 0.45; cursor: default; }
.nav-date-trigger { cursor: pointer; text-transform: capitalize; min-width: 150px; justify-content: center; font-family: inherit; }
.planning-titlegroup { display: flex; align-items: center; gap: 18px; }
.view-toggle { display: flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: #fff; }
.view-toggle .opt { font-size: 14px; padding: 9px 15px; color: var(--ink-soft); }
.view-toggle .opt.active { font-weight: 600; color: #fff; background: var(--blue); }

/* ============== Facture ============== */
.facture-layout { flex: 1; display: flex; gap: 24px; padding: 24px 28px; overflow: hidden; }
.facture-doc { flex: 1; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 24px 36px; display: flex; flex-direction: column; gap: 13px; overflow-y: auto; }
.facture-side { width: 300px; flex: none; display: flex; flex-direction: column; gap: 16px; }
.facture-header-row { display: flex; justify-content: space-between; align-items: flex-start; }
.facture-issuer { display: flex; align-items: center; gap: 12px; }
.facture-issuer img { width: 44px; height: 44px; object-fit: contain; }
.facture-meta-box { display: flex; gap: 40px; padding: 13px 18px; background: var(--surface); border-radius: 11px; flex-wrap: wrap; }
.facture-meta-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }
.facture-lines-head, .facture-line {
  display: grid; grid-template-columns: 1fr 92px 116px 124px; gap: 12px; align-items: baseline;
}
.facture-lines-head { padding: 0 4px 10px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); }
.facture-line { padding: 14px 4px; border-bottom: 1px solid var(--border-soft); }
.facture-totals { display: flex; justify-content: flex-end; }
.facture-totals-box { width: 340px; display: flex; flex-direction: column; gap: 10px; }
.facture-totals-row { display: flex; justify-content: space-between; font-size: 14.5px; color: var(--ink-soft); }
.facture-totals-final { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--border); }
.facture-totals-final .label { font-size: 16px; font-weight: 600; }
.facture-totals-final .value { font-size: 28px; font-weight: 600; letter-spacing: -0.025em; }
.co2-banner { margin-top: auto; display: flex; gap: 14px; align-items: flex-start; background: var(--st-livre-bg); border: 1px solid var(--st-livre-bd); border-radius: 11px; padding: 16px 18px; }
.co2-banner .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--st-livre-dot); margin-top: 5px; flex: none; }
.co2-banner .text { font-size: 13.5px; color: var(--st-livre-fg); line-height: 1.55; }
.side-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px; }
.side-card-title { font-size: 15.5px; font-weight: 600; margin-bottom: 14px; }
.historique-row { display: flex; flex-direction: column; gap: 5px; }
.historique-row .label { font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-faint); }
.historique-row .value { font-size: 14px; color: var(--ink); }
.historique-row input[type="date"] {
  height: 38px; border: 1px solid var(--border); border-radius: var(--radius-input);
  padding: 0 10px; font-size: 14px; color: var(--ink); background: #fff; font-family: inherit;
}
.checklist-item { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 12px; }
.checklist-item:last-child { margin-bottom: 0; }
.checklist-item .ok { color: var(--st-livre-fg); }
.checklist-item .warn { color: var(--accent); }

/* ============== Modale — nouvelle course (1f) ============== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(18,40,63,0.45);
  display: none; align-items: center; justify-content: center; padding: 36px; z-index: 100;
}
.modal-overlay.open { display: flex; }
.modal-box { width: 760px; max-width: 100%; max-height: 100%; background: #fff; border-radius: 16px; box-shadow: 0 30px 60px -30px rgba(18,40,63,0.5); display: flex; flex-direction: column; overflow: hidden; }
.modal-head { padding: 24px 32px; border-bottom: 1px solid var(--border-softer); display: flex; align-items: center; justify-content: space-between; }
.modal-head-title { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; display: block; }
.modal-head-sub { font-size: 13.5px; color: var(--ink-faint); }
.modal-close { font-size: 20px; color: var(--ink-faint); cursor: pointer; background: none; border: none; }
.modal-body { padding: 26px 32px; display: flex; flex-direction: column; gap: 22px; overflow-y: auto; }
.modal-footer { padding: 20px 32px; border-top: 1px solid var(--border-softer); background: var(--surface); display: flex; align-items: center; gap: 12px; }

.field { display: flex; flex-direction: column; gap: 9px; }
.field label { font-size: 14px; font-weight: 600; }
.field label .hint { font-weight: 400; color: var(--ink-faint); }
.field input, .field select {
  height: 50px; border: 1px solid var(--border); border-radius: var(--radius-input);
  padding: 0 14px; font-size: 15.5px; color: var(--ink); background: #fff; font-family: inherit; width: 100%;
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(17,78,140,0.10);
}
.field input::placeholder { color: var(--ink-fainter); }
.field input[type="checkbox"] { height: auto; width: auto; flex: none; }
.field-row { display: grid; gap: 18px; }
.field-row-2 { grid-template-columns: 1fr 1fr; }
.field-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.field-row-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.field-subrow { display: flex; gap: 10px; }
.field-subrow input { height: 44px; font-size: 14.5px; min-width: 0; }
.field-subrow-time input { flex: 1; }
.field-subrow-time input[type="time"] { flex: 0 0 104px; }
.field-subrow-qty input[type="number"] { flex: 0 0 90px; }
.field-subrow-qty select { flex: 1; min-width: 0; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { font-size: 13px; color: var(--ink-soft); background: #F6F5F1; border: 1px solid var(--border); padding: 7px 12px; border-radius: var(--radius-pill); cursor: pointer; }
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip-note { font-size: 13px; color: var(--ink-faint); padding: 7px 4px; }

/* ============== Login ============== */
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.login-card { width: 380px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 36px; display: flex; flex-direction: column; gap: 22px; }
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-brand img { width: 44px; height: 44px; object-fit: contain; }
.login-brand span { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.login-error { font-size: 13.5px; color: var(--accent-fg); background: var(--accent-wash); border: 1px solid var(--accent-border); border-radius: 9px; padding: 10px 12px; display: none; }
.login-error.visible { display: block; }

/* ============== Empty / loading ============== */
.empty-state { padding: 40px 22px; text-align: center; color: var(--ink-faint); font-size: 14px; }

/* ============== Administration ============== */
.admin-section { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.admin-section-head { display: flex; align-items: baseline; gap: 10px; }
.admin-section-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.admin-section-head .hint { font-size: 13px; color: var(--ink-faint); }
.admin-inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.admin-inline-form input, .admin-inline-form select {
  height: 42px; border: 1px solid var(--border); border-radius: var(--radius-input);
  padding: 0 12px; font-size: 14px; color: var(--ink); background: #fff; font-family: inherit;
}
.admin-inline-form input { flex: 1; min-width: 140px; }
.admin-list { display: flex; flex-direction: column; }
.admin-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--border-softer);
}
.admin-row:last-child { border-bottom: none; }
.admin-row-primary { font-size: 14.5px; font-weight: 600; margin-right: 10px; }
.admin-row-secondary { font-size: 13px; color: var(--ink-faint); }
.admin-row-delete {
  font-size: 13px; color: var(--accent-fg); background: none; border: 1px solid var(--accent-border);
  border-radius: 7px; padding: 6px 12px; cursor: pointer;
}
.admin-row-delete:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============== Sélecteur de date custom (tableau de bord + planning) ============== */
.rp-datepicker-popover {
  position: absolute; z-index: 200; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: 0 20px 40px -20px rgba(18,40,63,0.35);
  padding: 16px; width: 300px; display: flex; flex-direction: column; gap: 14px;
}
.rp-datepicker-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-datepicker-shortcut {
  font-size: 13px; padding: 7px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-soft); cursor: pointer; font-family: inherit;
}
.rp-datepicker-shortcut:hover { border-color: var(--blue); color: var(--blue); }
.rp-datepicker-header { display: flex; align-items: center; gap: 8px; }
.rp-datepicker-header select {
  flex: 1; height: 34px; border: 1px solid var(--border); border-radius: 7px; font-size: 13.5px;
  padding: 0 8px; background: #fff; color: var(--ink); font-family: inherit;
}
.rp-datepicker-nav {
  width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 7px; background: #fff;
  color: var(--ink-soft); font-size: 14px; flex: none; cursor: pointer; font-family: inherit;
}
.rp-datepicker-nav:hover { border-color: var(--blue); color: var(--blue); }
.rp-datepicker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.rp-datepicker-daylabel { font-size: 11px; color: var(--ink-faint); text-align: center; font-weight: 600; }
.rp-datepicker-day {
  height: 32px; border: none; background: none; border-radius: 7px; font-size: 13px; color: var(--ink);
  cursor: pointer; font-family: inherit;
}
.rp-datepicker-day:hover { background: var(--surface); }
.rp-datepicker-day.today { font-weight: 700; color: var(--blue); }
.rp-datepicker-day.selected { background: var(--blue); color: #fff; }
.rp-datepicker-monthgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rp-datepicker-month {
  height: 40px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-size: 13.5px;
  color: var(--ink); cursor: pointer; font-family: inherit;
}
.rp-datepicker-month:hover { border-color: var(--blue); color: var(--blue); }
.rp-datepicker-month.selected { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ============== Responsive : sidebar → barre d'onglets basse ============== */
.mobile-tabbar { display: none; }

@media (max-width: 900px) {
  .app-shell { flex-direction: column; }
  .sidebar { display: none; }
  .main { min-height: 100vh; }
  .topbar { flex-wrap: wrap; height: auto; padding: 14px 18px; gap: 10px; }
  .topbar-actions { width: 100%; flex-wrap: wrap; }
  .search-box { flex: 1; width: auto; }
  .nav-date-trigger { min-width: 0; flex: 1; }
  .content { padding: 16px; padding-bottom: 84px; }
  .kpi-grid { grid-template-columns: 1fr; }
  .dash-columns { grid-template-columns: 1fr; }
  .data-table-head { display: none; }
  .data-row { grid-template-columns: 1fr; row-gap: 6px; padding: 14px 16px; }
  .data-row .num { order: -1; }
  .facture-table-head { display: none; }
  .facture-row { grid-template-columns: 1fr; row-gap: 6px; padding: 14px 16px; }
  .facture-row .num { order: -1; }
  .facture-row .ttc { text-align: left; order: 3; }
  .filter-bar { padding: 14px 16px; }
  .filter-spacer { width: 100%; margin-left: 0; }
  .facture-layout { flex-direction: column; padding: 16px; overflow: visible; }
  .facture-side { width: auto; }
  .facture-doc { padding: 20px; }
  .facture-header-row { flex-direction: column; gap: 12px; }
  .planning-col-camion { width: 130px; }
  .planning-titlegroup { flex-wrap: wrap; row-gap: 10px; }
  .modal-overlay { padding: 0; }
  .modal-box { width: 100%; border-radius: 0; height: 100vh; }
  .modal-head, .modal-footer { padding: 18px 18px; }
  .modal-body { padding: 20px 18px; }
  .modal-footer { flex-wrap: wrap; }
  .modal-footer > span { width: 100%; }
  .modal-footer > div { margin-left: 0 !important; width: 100%; }
  .modal-footer > div button { flex: 1; }
  .field-row-2, .field-row-3, .field-row-4 { grid-template-columns: minmax(0, 1fr); }

  .mobile-tabbar {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; left: 0; right: 0; bottom: 0; background: #fff;
    border-top: 1px solid var(--border); padding: 10px 12px 20px; z-index: 50;
  }
  .mobile-tabbar a { flex: 1; text-align: center; font-size: 12.5px; color: var(--ink-faint); }
  .mobile-tabbar a.active { font-weight: 600; color: var(--blue); }
  .mobile-tabbar .fab {
    width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: #fff;
    font-size: 24px; font-weight: 500; display: flex; align-items: center; justify-content: center;
    margin-top: -24px; box-shadow: 0 6px 14px -4px rgba(225,85,64,0.7);
  }
  .mobile-tabbar .fab-slot { flex: none; width: 52px; display: flex; justify-content: center; }
}