/* ============================================================
   dashboard.css — style commun aux 3 interfaces réservations
   Charte CenterCloud : bleu #0078B8, Bricolage Grotesque + Plus Jakarta Sans
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Bistronomie : vert forêt + terracotta doux + crème */
  --blue:#2F5D50; --blue-dark:#234A40; --blue-light:#e8efe9; --blue-mid:#a9c6ba;
  --terra:#D98E5B; --terra-dark:#c2774a; --terra-light:#fbeee2;
  --text:#21271f; --muted:#6f7a6c; --border:#e7e0d2;
  --bg:#fff; --bg-soft:#f8f5ee; --bg-app:#f3eee2;
  --green:#3f8c5e; --green-light:#e6f1ea;
  --red:#c0563b; --red-light:#f9e8e1;
  --amber:#D98E5B; --amber-light:#fbeee2;
  --violet:#8a6f3d; --violet-light:#f3ecdd;
  --radius:14px; --radius-sm:10px; --radius-lg:20px;
  --shadow:0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --shadow-md:0 4px 16px rgba(16,24,40,.08);
  --shadow-lg:0 12px 40px rgba(16,24,40,.12);
  --sidebar-w:260px;
}

* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  font-family:'Plus Jakarta Sans',sans-serif; color:var(--text);
  background:var(--bg-app); line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5 { font-family:'Fraunces',serif; line-height:1.15; letter-spacing:-.01em; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:#cbd6e2; border-radius:10px; border:2px solid var(--bg-app); }

/* ---- App shell ----------------------------------------------------- */
.app { display:flex; min-height:100vh; }

.sidebar {
  width:var(--sidebar-w); flex-shrink:0; background:#fff; border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sb-brand {
  display:flex; align-items:center; gap:10px; padding:20px 22px; border-bottom:1px solid var(--border);
}
.sb-logo {
  width:34px; height:34px; border-radius:9px; background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Fraunces';
  font-weight:800; font-size:16px; flex-shrink:0;
}
.sb-brand-txt b { font-family:'Fraunces'; font-weight:800; font-size:15px; letter-spacing:-.03em; display:block; }
.sb-brand-txt span { font-size:11px; color:var(--muted); font-weight:500; }

.sb-resto {
  margin:16px 16px 6px; padding:12px 14px; background:var(--bg-soft); border:1px solid var(--border);
  border-radius:var(--radius-sm); display:flex; align-items:center; gap:10px;
}
.sb-resto-ava { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:'Fraunces'; font-weight:700; font-size:13px; flex-shrink:0; }
.sb-resto b { font-size:13.5px; font-family:'Fraunces'; display:block; line-height:1.2; }
.sb-resto span { font-size:11px; color:var(--muted); }

.sb-section { font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); padding:18px 22px 8px; }
.sb-nav { padding:0 12px; display:flex; flex-direction:column; gap:2px; }
.sb-link {
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--radius-sm);
  font-size:14px; font-weight:600; color:#3a4859; transition:all .15s; position:relative;
}
.sb-link svg { width:18px; height:18px; flex-shrink:0; stroke-width:2; }
.sb-link:hover { background:var(--bg-soft); color:var(--text); }
.sb-link.active { background:var(--blue-light); color:var(--blue-dark); }
.sb-link.active::before { content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:3px; height:20px; background:var(--blue); border-radius:0 3px 3px 0; }
.sb-link.soon { color:#aeb9c6; cursor:default; }
.sb-link.soon:hover { background:none; }
.sb-tag { margin-left:auto; font-size:9px; font-weight:700; padding:2px 7px; border-radius:20px;
  background:#eef2f7; color:#94a3b8; letter-spacing:.04em; }
.sb-tag.new { background:var(--blue-light); color:var(--blue); }
.sb-foot { margin-top:auto; padding:16px 22px; border-top:1px solid var(--border); font-size:11px; color:var(--muted); }

/* ---- Main ---------------------------------------------------------- */
.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar {
  height:64px; background:#fff; border-bottom:1px solid var(--border); display:flex; align-items:center;
  gap:16px; padding:0 28px; position:sticky; top:0; z-index:20;
}
.topbar h1 { font-size:20px; font-weight:800; }
.crumbs { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); }
.crumbs svg { width:14px; height:14px; }
.topbar-spacer { flex:1; }
.topbar-icon { width:38px; height:38px; border-radius:10px; background:var(--bg-soft); display:flex;
  align-items:center; justify-content:center; color:var(--muted); position:relative; }
.topbar-icon .dot { position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--red); border:2px solid #fff; }
.topbar-user { display:flex; align-items:center; gap:10px; padding-left:6px; }
.topbar-user .ava { width:36px; height:36px; border-radius:50%; background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Fraunces'; font-weight:700; font-size:13px; }

.content { padding:28px; flex:1; }
.content-narrow { max-width:1180px; margin:0 auto; }

/* ---- Buttons ------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:'Fraunces';
  font-weight:600; font-size:14px; border-radius:var(--radius-sm); padding:11px 18px; transition:all .16s; white-space:nowrap; }
.btn svg { width:17px; height:17px; }
.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:hover { background:var(--blue-dark); }
.btn-ghost { background:#fff; color:var(--text); border:1.5px solid var(--border); }
.btn-ghost:hover { border-color:var(--blue-mid); background:var(--bg-soft); }
.btn-green { background:var(--green); color:#fff; }
.btn-green:hover { filter:brightness(.94); }
.btn-red { background:var(--red); color:#fff; }
.btn-red:hover { filter:brightness(.94); }
.btn-sm { padding:8px 13px; font-size:13px; border-radius:9px; }
.btn-block { width:100%; }

/* ---- Cards & grid -------------------------------------------------- */
.card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.grid { display:grid; gap:18px; }
.g4 { grid-template-columns:repeat(4,1fr); }
.g3 { grid-template-columns:repeat(3,1fr); }
.g2 { grid-template-columns:repeat(2,1fr); }

/* KPI */
.kpi { padding:20px; display:flex; flex-direction:column; gap:6px; position:relative; overflow:hidden; }
.kpi-ico { width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; margin-bottom:6px; }
.kpi-ico svg { width:21px; height:21px; }
.kpi-label { font-size:12.5px; color:var(--muted); font-weight:600; }
.kpi-val { font-family:'Fraunces'; font-size:32px; font-weight:800; letter-spacing:-.03em; line-height:1; }
.kpi-sub { font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.kpi-sub.up { color:var(--green); } .kpi-sub.down { color:var(--red); }
.ic-blue { background:var(--blue-light); color:var(--blue); }
.ic-green { background:var(--green-light); color:var(--green); }
.ic-amber { background:var(--amber-light); color:var(--amber); }
.ic-violet { background:var(--violet-light); color:var(--violet); }

/* Section header */
.sec-head { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.sec-head h2 { font-size:18px; font-weight:800; }
.sec-head .spacer { flex:1; }

/* ---- Chart (barres CSS) -------------------------------------------- */
.chart { display:flex; align-items:flex-end; gap:10px; height:180px; padding:8px 4px 0; }
.bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.bar { width:100%; max-width:46px; background:linear-gradient(180deg,var(--blue),var(--blue-mid));
  border-radius:7px 7px 0 0; min-height:4px; position:relative; transition:height .4s; }
.bar:hover { background:linear-gradient(180deg,var(--blue-dark),var(--blue)); }
.bar-val { font-size:12px; font-weight:700; font-family:'Fraunces'; }
.bar-lbl { font-size:11px; color:var(--muted); font-weight:600; }

/* ---- Reservations service blocks ----------------------------------- */
.daybar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); padding:14px 18px; margin-bottom:18px; box-shadow:var(--shadow); }
.daynav { display:flex; gap:6px; }
.daynav button { width:36px; height:36px; border-radius:9px; border:1.5px solid var(--border); background:#fff;
  display:flex; align-items:center; justify-content:center; color:var(--muted); }
.daynav button:hover { border-color:var(--blue-mid); color:var(--blue); }
.daypill { padding:9px 14px; border-radius:9px; border:1.5px solid var(--border); background:#fff; font-weight:600; font-size:13.5px; font-family:'Fraunces'; }
.daypill.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.day-date { font-family:'Fraunces'; font-weight:800; font-size:17px; text-transform:capitalize; }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { font-size:12px; font-weight:700; padding:5px 11px; border-radius:20px; background:var(--bg-soft); color:var(--muted); font-family:'Fraunces'; }
.chip.ok { background:var(--green-light); color:var(--green); }
.chip.wait { background:var(--amber-light); color:var(--amber); }
.chip.no { background:var(--red-light); color:var(--red); }

.service { margin-bottom:22px; }
.service-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:linear-gradient(90deg,var(--blue-dark),var(--blue));
  color:#fff; border-radius:var(--radius) var(--radius) 0 0; padding:14px 20px; }
.service-head h3 { font-size:16px; font-weight:700; display:flex; align-items:center; gap:9px; }
.service-head .chips .chip { background:rgba(255,255,255,.18); color:#fff; }
.service-body { background:#fff; border:1px solid var(--border); border-top:none; border-radius:0 0 var(--radius) var(--radius); }
.group-label { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
  padding:12px 20px 4px; }

.resa { display:grid; grid-template-columns:200px 1fr 90px 1fr 150px; gap:16px; align-items:center;
  padding:16px 20px; border-top:1px solid var(--border); }
.resa:first-of-type { border-top:none; }
.resa-actions { display:flex; flex-direction:column; gap:7px; }
.resa-actions .btn { width:100%; }
.resa-who b { font-family:'Fraunces'; font-weight:700; font-size:14.5px; display:block; }
.resa-who .tel { font-size:12.5px; color:var(--muted); }
.resa-meta { display:flex; flex-direction:column; gap:3px; font-size:13px; }
.resa-meta .time { font-weight:700; font-family:'Fraunces'; }
.resa-meta .muted { color:var(--muted); font-size:12px; }
.pax { font-family:'Fraunces'; font-weight:800; font-size:15px; text-align:center; }
.pax span { display:block; font-size:11px; font-weight:600; color:var(--muted); }
.tablebadge { display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:24px; padding:0 7px;
  background:var(--blue-light); color:var(--blue-dark); border-radius:7px; font-weight:700; font-size:12.5px; font-family:'Fraunces'; }
.note { font-size:12.5px; color:#4b5563; font-style:italic; background:var(--bg-soft); border-radius:9px; padding:9px 11px; border-left:3px solid var(--blue-mid); }
.note.warn { background:var(--red-light); border-left-color:var(--red); color:#9b1c1c; font-style:normal; font-weight:600; }
.statline { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; }
.statdot { width:8px; height:8px; border-radius:50%; }
.arrived { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--green); }

/* ---- Form / widget ------------------------------------------------- */
.field { margin-bottom:15px; }
.field label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:#374151; }
.field input, .field select, .field textarea {
  width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-family:inherit; font-size:14.5px; color:var(--text); background:#fff; transition:border .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-light);
}
.field textarea { resize:vertical; min-height:78px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.seg { display:flex; gap:8px; }
.seg button { flex:1; padding:12px; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:#fff;
  font-weight:600; font-size:14px; color:var(--text); transition:all .15s; font-family:'Fraunces'; }
.seg button.on { border-color:var(--blue); background:var(--blue-light); color:var(--blue-dark); }
.steppers { display:flex; align-items:center; gap:0; border:1.5px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; width:fit-content; }
.steppers button { width:46px; height:46px; font-size:20px; font-weight:700; color:var(--blue); background:#fff; }
.steppers button:hover { background:var(--blue-light); }
.steppers .val { min-width:54px; text-align:center; font-family:'Fraunces'; font-weight:800; font-size:18px; }

/* ---- Modal --------------------------------------------------------- */
.modal-back { position:fixed; inset:0; background:rgba(16,24,40,.45); display:none; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-back.open { display:flex; }
.modal { background:#fff; border-radius:var(--radius-lg); width:100%; max-width:480px; box-shadow:var(--shadow-lg); max-height:92vh; overflow-y:auto; }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--border); }
.modal-head h3 { font-size:18px; font-weight:800; }
.modal-x { width:34px; height:34px; border-radius:9px; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; color:var(--muted); }
.modal-body { padding:22px; }
.modal-foot { padding:16px 22px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; }

/* ---- Toast --------------------------------------------------------- */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(120%); background:var(--text); color:#fff;
  padding:13px 20px; border-radius:12px; font-size:14px; font-weight:600; box-shadow:var(--shadow-lg); z-index:200; transition:transform .35s cubic-bezier(.2,.9,.3,1); display:flex; align-items:center; gap:10px; }
.toast.show { transform:translateX(-50%) translateY(0); }
.toast svg { width:18px; height:18px; color:#4ade80; }

/* ---- Login --------------------------------------------------------- */
.login-wrap { min-height:100vh; display:flex; }
.login-aside { flex:1; background:linear-gradient(150deg,var(--blue-dark),var(--blue) 60%,#3aa0d8); color:#fff;
  padding:54px; display:flex; flex-direction:column; justify-content:space-between; }
.login-aside .big { font-family:'Fraunces'; font-size:40px; font-weight:800; letter-spacing:-.03em; line-height:1.08; margin-bottom:18px; }
.login-aside p { font-size:16px; opacity:.92; max-width:420px; }
.login-feat { display:flex; flex-direction:column; gap:14px; margin-top:30px; }
.login-feat div { display:flex; align-items:center; gap:11px; font-weight:600; font-size:15px; }
.login-feat .fi { width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; }
.login-form { width:480px; max-width:100%; display:flex; flex-direction:column; justify-content:center; padding:54px; }
.login-form h2 { font-size:26px; font-weight:800; margin-bottom:6px; }
.login-form .sub { color:var(--muted); margin-bottom:28px; font-size:14.5px; }

/* ---- Misc ---------------------------------------------------------- */
.empty { text-align:center; padding:40px 20px; color:var(--muted); }
.empty svg { width:40px; height:40px; margin-bottom:10px; opacity:.5; }
.plan-badge { font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; font-family:'Fraunces'; }
.plan-Pro { background:var(--violet-light); color:var(--violet); }
.plan-Standard { background:var(--blue-light); color:var(--blue); }
.row-resto { display:grid; grid-template-columns:1fr 120px 90px 90px 110px; gap:14px; align-items:center; padding:15px 18px; border-top:1px solid var(--border); }
.row-resto:first-child { border-top:none; }
.row-resto .rname { display:flex; align-items:center; gap:11px; }
.row-resto .rava { width:38px; height:38px; border-radius:10px; color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Fraunces'; font-weight:700; }

.banner { background:var(--blue-light); border:1px solid var(--blue-mid); border-radius:var(--radius); padding:13px 18px;
  display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--blue-dark); margin-bottom:20px; }
.banner svg { width:20px; height:20px; flex-shrink:0; }
.banner code { background:#fff; padding:2px 8px; border-radius:6px; font-size:12.5px; color:var(--blue-dark); }

/* ---- Lisibilité : éléments d'action restent en sans ---------------- */
.btn, .seg button, .daypill, .chip, .sb-link, .sb-tag, .plan-badge, .bar-lbl,
.kpi-label, .kpi-sub, .resa-who .tel, .note { font-family:'Plus Jakarta Sans',sans-serif; }
/* Accent terracotta : badges "Nouveau" + boutons d'arrivée signalée */
.sb-tag.new { background:var(--terra-light); color:var(--terra-dark); }
.bar { background:linear-gradient(180deg,var(--blue),var(--terra) 180%); }

/* ---- Burger + overlay (base) --------------------------------------- */
.topbar-burger {
  display:none; width:38px; height:38px; flex-shrink:0;
  border-radius:var(--radius-sm); background:var(--bg-soft);
  border:1px solid var(--border); align-items:center; justify-content:center;
  color:var(--muted); cursor:pointer; transition:all .15s;
}
.topbar-burger:hover { border-color:var(--blue-mid); color:var(--blue); }

.sidebar-overlay {
  display:none; position:fixed; inset:0; z-index:99;
  background:rgba(0,0,0,.42);
}
.sidebar-overlay.open { display:block; }

/* ---- Responsive ---------------------------------------------------- */
@media(max-width:1100px){
  .g4{grid-template-columns:repeat(2,1fr);}
  .resa{grid-template-columns:1fr; gap:10px;}
  .resa-actions{flex-direction:row; flex-wrap:wrap;}
}

@media(max-width:860px){
  /* Sidebar : drawer slide-in à la place de display:none */
  .topbar-burger { display:flex; }
  .sidebar {
    position:fixed; left:calc(-1 * var(--sidebar-w)); top:0; bottom:0; z-index:100;
    transition:left .3s cubic-bezier(.22,.1,.25,1);
    box-shadow:4px 0 32px rgba(0,0,0,.14);
  }
  .sidebar.open { left:0; }

  /* Topbar */
  .crumbs { display:none; }
  .topbar { padding:0 16px; gap:10px; }
  .topbar-icon#ic-search { display:none; }

  /* Grilles */
  .g4,.g3,.g2 { grid-template-columns:1fr; }

  /* Login */
  .login-aside { display:none; }
  .login-form { width:100%; padding:32px 24px; }

  /* Super-admin row */
  .row-resto { grid-template-columns:1fr 80px; gap:8px; }
  .row-resto .hide-sm { display:none; }
}

@media(max-width:640px){
  .content { padding:16px; }

  /* Daybar compact */
  .daybar { padding:10px 12px; gap:8px; }
  .day-date { font-size:14px; }
  .daypill { padding:7px 10px; font-size:12px; }
  .chip { font-size:11px; padding:4px 9px; }

  /* Service header : capacité full-width sur petits écrans */
  .service-head { padding:10px 14px; gap:8px; }
  .service-head h3 { font-size:14px; }

  /* Resa card */
  .resa { padding:12px 14px; gap:8px; }
  .resa-actions .btn { font-size:12px; padding:7px 10px; }

  /* KPI */
  .kpi-val { font-size:26px; }

  /* Modal */
  .modal { border-radius:var(--radius) var(--radius) 0 0; }
  .modal-back { align-items:flex-end; padding:0; }
  .field-row { grid-template-columns:1fr; gap:0; }
}