/* ==========================================================================
   WonderFood — Design system partagé (v2, refonte "SaaS pro")
   Palette approfondie, composants cohérents, propagés à toutes les pages
   qui chargent ce fichier (admin, caisse, cuisine, livraison, mobile...).
   ========================================================================== */

:root{
  /* --- Marque (accents) --- */
  --wf-pink:#E31C79;
  --wf-pink-dark:#A80F5C;
  --wf-pink-darker:#7A0B43;
  --wf-pink-pale:#FBEAF3;
  --wf-green:#5FA02A;
  --wf-green-dark:#3F7A18;
  --wf-green-pale:#EAF5DD;
  --wf-blue:#2563EB;
  --wf-blue-pale:#E8EFFD;
  --wf-red:#DC3545;
  --wf-red-pale:#FBEAEA;
  --wf-amber:#D98A0A;
  --wf-amber-pale:#FCF1DE;

  /* --- Neutres (structure) --- */
  --wf-ink:#1B1626;
  --wf-ink-soft:#655F70;
  --wf-ink-faint:#9891A0;
  --wf-bg:#F4F3F8;
  --wf-white:#FFFFFF;
  --wf-cream:#F4F3F8;
  --wf-border:#E7E4EE;
  --wf-border-soft:#F0EEF5;

  /* --- Ombres & rayons (échelle unique = cohérence visuelle) --- */
  --wf-shadow-sm:0 1px 2px rgba(27,22,38,.05), 0 1px 3px rgba(27,22,38,.04);
  --wf-shadow-md:0 4px 14px rgba(27,22,38,.07);
  --wf-shadow-lg:0 12px 32px rgba(27,22,38,.12);
  --wf-radius-sm:8px;
  --wf-radius:12px;
  --wf-radius-lg:18px;
}

*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;}
body{
  margin:0;
  background:var(--wf-bg);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--wf-ink);
  line-height:1.45;
}
h1,h2,h3,.wf-font-display{font-family:'Baloo 2','Inter',sans-serif;font-weight:700;letter-spacing:-.01em;}
h2{font-size:19px;}
h3{font-size:16px;}
a{color:var(--wf-pink-dark);}
::selection{background:var(--wf-pink-pale);color:var(--wf-pink-darker);}

/* ---------- Barre supérieure ---------- */
.wf-topbar{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(120deg,var(--wf-ink) 0%,#2E2140 100%);
  color:#fff;padding:14px 26px;
  box-shadow:var(--wf-shadow-md);
  position:relative;
  border-bottom:3px solid var(--wf-pink);
}
.wf-topbar .wf-logo{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:21px;margin:0;letter-spacing:-.01em;}
.wf-topbar .wf-logo span{color:var(--wf-green);}
.wf-topbar-right{display:flex;align-items:center;gap:14px;font-size:13.5px;color:#E9E5EF;}
.wf-btn-ghost{
  background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.22);
  color:#fff;padding:8px 14px;border-radius:var(--wf-radius-sm);cursor:pointer;font-size:13px;
  font-weight:600;transition:.15s;
}
.wf-btn-ghost:hover{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,.4);}

@media (max-width: 640px){
  .wf-topbar{ flex-wrap:wrap; row-gap:10px; padding:12px 16px; }
  .wf-topbar-right{ flex-wrap:wrap; gap:8px 10px; font-size:12.5px; width:100%; justify-content:flex-end; }
  .wf-btn-ghost{ padding:7px 12px; font-size:12.5px; }
}

.wf-shell{max-width:1220px;margin:0 auto;padding:26px 22px 64px;}

/* ---------- Navigation par onglets (admin, filtres) ---------- */
.wf-onglets{
  display:flex;gap:4px;margin-bottom:22px;flex-wrap:wrap;
  background:var(--wf-white);padding:6px;border-radius:var(--wf-radius);
  border:1px solid var(--wf-border);box-shadow:var(--wf-shadow-sm);
}
.wf-onglet{
  padding:9px 15px;border-radius:var(--wf-radius-sm);border:none;background:transparent;
  color:var(--wf-ink-soft);font-family:'Baloo 2';font-weight:700;font-size:13.5px;cursor:pointer;
  transition:.15s;
}
.wf-onglet:hover{background:var(--wf-border-soft);color:var(--wf-ink);}
.wf-onglet.actif{background:var(--wf-pink);color:#fff;box-shadow:0 2px 8px rgba(227,28,121,.32);}
.wf-onglet.actif:hover{background:var(--wf-pink-dark);}

/* ---------- Cartes / sections ---------- */
.wf-card{
  background:var(--wf-white);border-radius:var(--wf-radius);padding:20px;
  border:1px solid var(--wf-border);box-shadow:var(--wf-shadow-sm);
}
.wf-section-titre{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:30px 0 14px;flex-wrap:wrap;}
.wf-section-titre h2,.wf-section-titre h3{margin:0;}
.wf-section-titre h2::before,.wf-section-titre h3::before{
  content:'';display:inline-block;width:4px;height:16px;background:var(--wf-pink);
  border-radius:3px;margin-right:9px;vertical-align:-2px;
}

/* ---------- Boutons ---------- */
.wf-btn{
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:14px;
  background:var(--wf-pink);color:#fff;border:none;border-radius:var(--wf-radius-sm);
  padding:10px 18px;cursor:pointer;transition:.15s;box-shadow:0 1px 2px rgba(168,15,92,.15);
}
.wf-btn:hover{background:var(--wf-pink-dark);box-shadow:0 3px 10px rgba(168,15,92,.28);transform:translateY(-1px);}
.wf-btn:active{transform:translateY(0);}
.wf-btn.secondaire{background:var(--wf-white);color:var(--wf-ink);border:1.5px solid var(--wf-border);box-shadow:none;}
.wf-btn.secondaire:hover{border-color:var(--wf-pink);color:var(--wf-pink-dark);background:var(--wf-pink-pale);}
.wf-btn.vert{background:var(--wf-green);color:#fff;box-shadow:0 1px 2px rgba(63,122,24,.15);}
.wf-btn.vert:hover{background:var(--wf-green-dark);box-shadow:0 3px 10px rgba(63,122,24,.28);}
.wf-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}

/* ---------- Formulaires ---------- */
input,select,textarea{
  font-family:'Inter',sans-serif;font-size:14px;
  border:1.5px solid var(--wf-border);border-radius:var(--wf-radius-sm);padding:9px 12px;
  background:#fff;color:var(--wf-ink);width:100%;transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--wf-pink);box-shadow:0 0 0 3px var(--wf-pink-pale);}
label{font-size:12.5px;font-weight:600;color:var(--wf-ink-soft);display:block;margin:0 0 4px;}

/* ---------- Badges de statut ---------- */
.wf-badge{
  display:inline-block;font-size:11.5px;font-weight:700;padding:3px 10px;
  border-radius:999px;font-family:'Baloo 2',sans-serif;
}
.wf-badge.nouvelle{background:var(--wf-pink-pale);color:var(--wf-pink-dark);}
.wf-badge.en_preparation{background:var(--wf-amber-pale);color:var(--wf-amber);}
.wf-badge.prete{background:var(--wf-green-pale);color:var(--wf-green-dark);}
.wf-badge.en_livraison{background:var(--wf-blue-pale);color:var(--wf-blue);}
.wf-badge.livree,.wf-badge.recuperee,.wf-badge.servie{background:var(--wf-border-soft);color:var(--wf-ink-soft);}
.wf-badge.annulee{background:var(--wf-red-pale);color:var(--wf-red);}
.wf-badge.libre{background:var(--wf-green-pale);color:var(--wf-green-dark);}
.wf-badge.occupee{background:var(--wf-red-pale);color:var(--wf-red);}

/* ---------- Grilles ---------- */
.wf-grid{display:grid;gap:16px;}
.wf-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.wf-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.wf-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.wf-grid.cols-5{grid-template-columns:repeat(5,1fr);}
.wf-grid.auto{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
@media(max-width:820px){.wf-grid.cols-2,.wf-grid.cols-3,.wf-grid.cols-4,.wf-grid.cols-5{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.wf-grid.cols-2,.wf-grid.cols-3,.wf-grid.cols-4,.wf-grid.cols-5{grid-template-columns:1fr;}}

/* ---------- Tableaux ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{text-align:left;color:var(--wf-ink-soft);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;padding:10px;border-bottom:2px solid var(--wf-border);font-weight:700;}
td{padding:11px 10px;border-bottom:1px solid var(--wf-border-soft);}
tbody tr{transition:background .1s;}
tbody tr:hover{background:var(--wf-border-soft);}

/* ---------- Notifications ---------- */
.wf-toast{
  position:fixed;bottom:20px;right:20px;background:var(--wf-ink);color:#fff;
  padding:12px 18px;border-radius:var(--wf-radius-sm);font-size:13.5px;box-shadow:var(--wf-shadow-lg);
  z-index:999;max-width:320px;
}
.wf-toast.erreur{background:var(--wf-red);}
.wf-toast.succes{background:var(--wf-green-dark);}

/* ---------- Fenêtres modales ---------- */
.wf-modal-fond{
  position:fixed;inset:0;background:rgba(27,22,38,.55);display:flex;
  align-items:center;justify-content:center;z-index:900;padding:20px;
  backdrop-filter:blur(2px);
}
.wf-modal{background:#fff;border-radius:var(--wf-radius-lg);padding:24px;max-width:520px;width:100%;max-height:86vh;overflow-y:auto;box-shadow:var(--wf-shadow-lg);}

/* ---------- Connexion ---------- */
.wf-login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--wf-ink) 0%,#2E2140 55%,var(--wf-pink-darker) 100%);padding:16px;}
.wf-login-box{background:#fff;border-radius:var(--wf-radius-lg);padding:26px 24px;max-width:300px;width:100%;box-shadow:var(--wf-shadow-lg);}
.wf-login-box h1{color:var(--wf-ink);font-size:19px;margin:0 0 2px;text-align:center;}
.wf-login-box p{color:var(--wf-ink-soft);font-size:11.5px;margin:0 0 16px;text-align:center;}
.wf-login-box .wf-champ{margin-bottom:11px;}
.wf-login-box .wf-champ label{font-size:11px;margin:0 0 3px;}
.wf-login-box input{padding:8px 10px;font-size:13px;}
.wf-login-box .wf-btn{padding:9px 14px;font-size:13px;margin-top:4px;width:100%;}
.wf-login-box .wf-btn.secondaire{padding:7px 12px;font-size:12px;}
.wf-erreur-txt{color:var(--wf-red);font-size:12px;margin-top:6px;}

.wf-empty{text-align:center;color:var(--wf-ink-soft);padding:44px 20px;font-size:14px;background:var(--wf-white);border:1.5px dashed var(--wf-border);border-radius:var(--wf-radius);}
.wf-empty::before{content:'🍽️';display:block;font-size:26px;margin-bottom:8px;}

/* ---------- Statut de connexion (points, livreurs) ---------- */
.wf-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;flex-shrink:0;}
.wf-dot.en-ligne{background:var(--wf-green-dark);box-shadow:0 0 0 3px rgba(63,122,24,.16);}
.wf-dot.hors-ligne{background:var(--wf-ink-faint);}
.wf-dot.pulse.en-ligne{animation:wf-pulse 1.8s ease-in-out infinite;}
@keyframes wf-pulse{0%,100%{box-shadow:0 0 0 0 rgba(63,122,24,.35);}50%{box-shadow:0 0 0 5px rgba(63,122,24,0);}}

/* ---------- Cartes statistiques (tableaux de bord) ---------- */
.wf-stat{
  background:var(--wf-white);border-radius:var(--wf-radius);padding:18px 20px;
  border:1px solid var(--wf-border);box-shadow:var(--wf-shadow-sm);
  border-top:3px solid var(--wf-pink);transition:box-shadow .15s, transform .15s;
}
.wf-stat:hover{box-shadow:var(--wf-shadow-md);transform:translateY(-1px);}
.wf-stat p.wf-stat-label{font-size:11.5px;color:var(--wf-ink-soft);margin:0 0 7px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;}
.wf-stat p.wf-stat-valeur{font-family:'Baloo 2',sans-serif;font-size:25px;margin:0;font-weight:700;color:var(--wf-ink);}

/* ---------- Cartes livreur / personne ---------- */
.wf-avatar{
  width:38px;height:38px;border-radius:50%;background:var(--wf-pink-pale);color:var(--wf-pink-dark);
  display:flex;align-items:center;justify-content:center;font-family:'Baloo 2',sans-serif;font-weight:700;
  font-size:15px;flex-shrink:0;
}
.wf-pastille-compte{
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:999px;background:var(--wf-pink);color:#fff;font-size:11.5px;font-weight:700;
  font-family:'Baloo 2',sans-serif;
}
.wf-lien-carte{
  display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--wf-pink-dark);
  text-decoration:none;
}
.wf-lien-carte:hover{text-decoration:underline;}
.wf-indicateur-partage{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--wf-ink-soft);
  background:#fff;border:1px solid var(--wf-border);border-radius:999px;padding:5px 12px;
}

/* ---------- Barre de défilement (aspect plus soigné) ---------- */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#D8D3E2;border-radius:999px;}
::-webkit-scrollbar-thumb:hover{background:var(--wf-ink-faint);}