/* ===================================================================
   FMB — Styles complets (Apple-style) — CLEAN 1.5 (stable)
   =================================================================== */

/* --------- Variables & base ---------- */
:root{
  --bg:#f5f5f7;
  --card:#ffffff;
  --text:#1d1d1f;
  --muted:#6e6e73;
  --line:#e5e5ea;
  --blue:#0a84ff;
  --green:#34c759;
  --red:#ff3b30;
  --orange:#ff9f0a;
  --shadow:0 6px 24px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color: transparent;
}

.center{text-align:center}
.muted{color:var(--muted)}
.hidden{display:none!important}

/* --------- Layout helpers ---------- */
.container{max-width:1200px;margin:0 auto;padding:12px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row.right{justify-content:flex-end}

/* --------- Brand (logo responsive) ---------- */
.brand, .logo-wrap{display:flex;align-items:center;justify-content:center;margin:12px 0 8px;gap:10px}
.brand img, .logo-wrap .logo{
  display:block;height:auto;width:auto;
  max-height:80px; /* global limit */
  object-fit:contain;
}
@media (max-width:760px){ .brand img, .logo-wrap .logo{max-height:44px} }
@media (min-width:1280px){ .brand img, .logo-wrap .logo{max-height:72px} }

/* ===== Topbar + User menu (pro) ===== */
.topbar{
  position:sticky; top:0; z-index:60;
  backdrop-filter:saturate(180%) blur(14px);
  background:rgba(255,255,255,.85);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px;
}
.brand-mini img{ height:28px; max-height:28px; width:auto; display:block; object-fit:contain }

.user-menu details{ position:relative }
.user-menu summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border-radius:12px;
}
.user-menu summary::-webkit-details-marker{ display:none }
.user-menu summary:hover{ background:#f3f4f6 }
.user-menu .avatar{
  width:28px; height:28px; border-radius:50%;
  background:#111; color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12px;
}
.user-menu .name{ font-weight:600; font-size:14px; color:var(--text) }

.user-menu .menu-panel{
  position:absolute; right:0; top:100%; margin-top:8px;
  min-width:220px; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); padding:8px;
}
.user-menu .menu-panel a{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:10px;
  color:var(--text); text-decoration:none;
}
.user-menu .menu-panel a:hover{ background:#f6f7f9 }
.user-menu details[open] summary{ background:#f6f7f9 }

/* --------- Buttons ---------- */
.btn, .btn-inline{
  appearance:none;border:1px solid var(--line);background:#fff;color:var(--text);
  padding:10px 14px;border-radius:12px;font-weight:600;font-size:14px;line-height:1;
  display:inline-flex;gap:8px;align-items:center;cursor:pointer;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.02); text-decoration:none;
}
.btn:hover, .btn-inline:hover{border-color:#d0d0d7; box-shadow:0 6px 20px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06)}
.btn:active, .btn-inline:active{transform:translateY(1px)}
.btn:focus-visible, .btn-inline:focus-visible{outline:none; box-shadow:0 0 0 4px rgba(10,132,255,.18)}
.btn.primary, .btn-blue{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.success{background:var(--green);border-color:var(--green);color:#fff}
.btn.ghost{background:transparent}

/* --------- Inputs & forms ---------- */
.field{display:flex;flex-direction:column;gap:6px}
label{font-size:13px;color:var(--muted)}
.input, select, textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:#fff;color:var(--text);font-size:14px;outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.input:focus, select:focus, textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(10,132,255,.15)}

/* --------- Search (fallback sans wrapper) ---------- */
input#q{
  display:block;
  width:100%;
  margin:8px auto;
  padding:10px 14px 10px 38px; /* left space for icon */
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  font-size:14px;
  outline:none;
  transition:box-shadow .2s ease, border-color .2s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat:no-repeat;
  background-position:12px center;
  background-size:18px 18px;
}
input#q::placeholder{color:#9b9ba1}
input#q:focus{
  border-color:#d0d0d7;
  box-shadow:0 6px 20px rgba(0,0,0,.06), 0 0 0 4px rgba(10,132,255,.12);
}

/* Search + filtre livreur côte à côte (mobile) */
@media (max-width: 640px) {
  .top{
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:space-between;
  }
  .top .search{
    flex:1 1 62%;
    min-width:0 !important;
    max-width:none !important;
    width:auto;
  }
  #livreurFilter{
    flex:1 1 38%;
    min-width:0;
    width:auto;
  }
}

/* --------- Table (desktop) ---------- */
.table{width:100%;border-collapse:separate;border-spacing:0}
.table thead th{
  text-align:left;font-size:12px;letter-spacing:.3px;text-transform:uppercase;
  color:var(--muted);padding:14px 14px;background:linear-gradient(180deg,#fff,#fafafa);
  position:sticky;top:0;z-index:1; box-shadow:inset 0 -1px 0 var(--line);
}
.table tbody td{padding:14px;border-top:1px solid var(--line)}
.table tbody tr{transition:background .18s ease}
.table tbody tr:hover{background:#f6f6f8}
.table .cell-actions{display:flex;gap:8px;justify-content:flex-end}

/* --------- Pills / badges ---------- */
.pill{padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;background:#f2f2f7;color:#3a3a3c}
.pill.green{background:rgba(52,199,89,.1);color:#1e7e34}
.pill.orange{background:rgba(255,159,10,.12);color:#b45309}
.pill.red{background:rgba(255,59,48,.12);color:#b91c1c}

.pill-thali{
  background:#eef2ff;            /* bleu très doux */
  border:1px solid #dbeafe;
  color:#1f3a8a;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

/* Couleur (pastille) */
.color-chip{
  --chip:#e5e7eb;                 /* fallback */
  width:14px; height:14px;
  border-radius:50%;
  background:var(--chip);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
  display:inline-block;
  vertical-align:middle;
}
.color-cell{ display:flex; align-items:center; gap:6px; justify-content:center; }
.color-name{ font-size:12px; color:#6b7280; }

/* Badges readonly */
.ro-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:999px;
  background:#f4f5f7; border:1px solid #eef0f3; color:#6b7280; font-size:12px;
}

/* --------- Alerts ---------- */
.alert{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#fff}
.alert.error{border-color:rgba(255,59,48,.35);background:rgba(255,59,48,.06)}
.alert.success{border-color:rgba(52,199,89,.35);background:rgba(52,199,89,.06)}

/* --------- Toggle (iOS) ---------- */
.switch, .table td .switch {
  position:relative; width:44px; height:24px; display:inline-block; vertical-align:middle;
}
.switch input{
  appearance:none; -webkit-appearance:none; width:100%; height:100%;
  position:absolute; inset:0; opacity:0; cursor:pointer; margin:0;
}
.switch .slider{
  position:absolute; inset:0; background:#e9e9ee; border-radius:999px;
  border:1px solid var(--line); transition:background .2s ease,border-color .2s ease;
  box-sizing:border-box;
}
.switch .slider::before{
  content:""; position:absolute; left:2px; top:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .18s ease;
}
.switch input:checked + .slider{ background:var(--green); border-color:var(--green) }
.switch input:checked + .slider::before{ transform:translateX(20px) }
.switch input:disabled + .slider{ opacity:.5; cursor:not-allowed }
.switch input:focus-visible + .slider{ box-shadow:0 0 0 4px rgba(10,132,255,.18) }

/* --------- Confort iPhone pour la barre sticky ---------- */
.actions-bar{
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  backdrop-filter: saturate(180%) blur(14px);
  background: rgba(255,255,255,.88);
}

/* ====== MOBILE CARDS — version épurée ====== */
@media (max-width: 899px){
  .cards{ gap:12px; padding:0 12px; }
  .cards .card{
    background:#fff; border:1px solid var(--line); border-radius:16px;
    box-shadow:none; overflow:hidden;
  }
  .cards .card-head{
    padding:12px 14px 10px; display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid #f0f2f5;
  }
  .cards .title{ font-size:16px; font-weight:700; line-height:1.25; }
  .cards .chip-row{ display:flex; align-items:center; gap:8px; }

  .cards .card-body.slim{ padding:10px 14px 12px; }

  .meta-inline{
    display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center;
    font-size:13px; color:#5f6368;
  }
  .meta-inline .item{ display:flex; gap:6px; align-items:baseline; }
  .meta-inline .muted{ color:#8b8d94; }

  /* 5 jours sur une ligne */
  .daybar{
    margin-top:8px;
    display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
    gap:8px; align-items:start; justify-items:center;
  }
  .daybar .cell{ text-align:center; }
  .daybar .lbl{
    display:block; margin-bottom:6px;
    font-size:12px; font-weight:700; color:#2c2d2e;
  }
  .daybar .switch{ width:52px; height:28px; margin:0 auto; }
  .daybar .slider{ background:#eceff3; border:1px solid #e6e8ee; border-radius:999px; }
  .daybar .slider:before{ width:22px; height:22px; left:3px; top:3px; }
  .daybar input:checked + .slider{ background:#34c759; border-color:#34c759; }
  .daybar input:checked + .slider:before{ transform:translateX(22px); }

  .cards .ro-badge{ width:26px; height:26px; font-size:13px; }
}

/* ====== VISIBILITÉ TABLE vs CARDS ====== */
@media (min-width: 900px){
  #cards{ display:none !important; }        /* cache les cards en desktop */
  #desktopWrap{ display:block !important; } /* montre la table en desktop */
}
@media (max-width: 899px){
  #desktopWrap{ display:none !important; }  /* cache la table en mobile */
}
/* ===== Toolbar unified (search + select on ONE line) ===== */
.top{
  display:flex;
  align-items:center;
  gap:10px;
  margin:8px auto 12px;
}
.top .search{
  flex:1 1 auto;
  min-width:0;
  max-width:none;
}
#livreurFilter{
  flex:0 0 280px;
  min-width:0;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
}
@media (max-width: 900px){
  .top .search{ flex-basis:60%; }
  #livreurFilter{ flex-basis:40%; }
}

/* ===== Hide Enregistrer bar (autosave active) ===== */
.actions-bar{ display:none !important; }

/* ===== Masthead (titre + sous-titre + boutons semaine) ===== */
.masthead{
  max-width:1180px;
  margin: 6px auto 10px;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--line);
}
.mh-text{
  display:grid;
  grid-template-columns:1fr auto;
  column-gap:16px;
  align-items:center;
}
.mh-title{
  grid-column:1;
  margin:0 0 2px;
  font-size:28px;
  font-weight:800;
  line-height:1.15;
  letter-spacing:.2px;
  text-align:left;
}
.mh-sub{
  grid-column:1;
  margin:0;
  color:var(--muted);
  font-size:14px;
}
.week-switch{
  grid-column:2;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0;
  justify-content:flex-end;
}
.week-switch .btn{
  border-radius:12px;
  padding:10px 14px;
  min-height:40px;
}
@media (max-width:700px){
  .mh-text{
    grid-template-columns:1fr;
    row-gap:6px;
    text-align:center;
  }
  .mh-title{ font-size:22px; text-align:center; }
  .mh-sub{ font-size:13px; }
  .week-switch{ grid-column:1; justify-content:center; gap:6px; }
}

/* ===== KPI (Totaux + actions par jour) ===== */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(260px, 1fr));
  gap:16px;
  max-width:1180px;
  margin:10px auto 14px; /* léger espace sous le masthead */
}
.kpi-card{
  background:linear-gradient(180deg,#fff,#fafafa);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
}
.kpi-body{ padding:18px 20px; }
.kpi-total{
  font-size:12px;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--muted);
  text-align:center;
}
.kpi-number{
  font-size:36px;
  font-weight:800;
  line-height:1;
  margin-top:6px;
  text-align:center;
}
.kpi-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
.kpi-actions a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  color:inherit;
  font-weight:600;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  transition:background .15s ease, transform .02s ease;
}
.kpi-actions a:hover{ background:#f4f5f7; }
.kpi-actions a:active{ transform:translateY(1px); }
.kpi-actions .ic{ width:16px; height:16px; flex:0 0 16px; }

@media (max-width:640px){
  .kpi-grid{ grid-template-columns:1fr; gap:12px; }
  .kpi-card{ border-radius:16px; }
  .kpi-body{ padding:12px 14px; }
  .kpi-total{ font-size:11px; }
  .kpi-number{ font-size:28px; }
}
@media (max-width:380px){
  .kpi-card{ border-radius:14px; }
}

/* ===== Badge livreur (utilisé en “Par livreur”) ===== */
.liv-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  font-weight:700;
}
.liv-chip .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
}

/* KPI — Total adhérents (solo) */
.kpi-card.kpi--solo {
  max-width: 1180px;
  margin: 8px auto 12px;
  background: #fff;
  border: 1px solid var(--line, #e6e6e6);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}
.kpi-card.kpi--solo .kpi-body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 16px;
  gap: 16px;
}
.kpi-card.kpi--solo .kpi-total {
  font-size: 14px;
  color: var(--muted, #6b7280);
  letter-spacing: .2px;
}
.kpi-card.kpi--solo .kpi-number {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--fg, #111827);
}

/* Mobile: stack proprement */
@media (max-width: 768px) {
  .kpi-card.kpi--solo .kpi-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .kpi-card.kpi--solo .kpi-number { font-size: 24px; }
}
.kpi-card.kpi--solo .kpi-number{ font-variant-numeric: tabular-nums; }
.kpi-card.kpi--solo .kpi-total{ user-select: none; }