/* ==========================================================================
   cockpit-restaurant.css — « l'écran de service ».

   Parti pris : cet écran est une tablette posée près de la caisse, touchée
   avec les doigts, en plein service. D'où les très grosses cibles, la
   navigation EN BAS (là où se trouve le pouce), les chiffres surdimensionnés
   lisibles à un mètre — et une bascule midi / soir, parce qu'un restaurant ne
   vit pas une journée mais deux services.

   Habillage ivoire et laiton, à mi-chemin de la salle et du carnet de
   réservations : lisible en plein jour comme le soir.

   Le plan de salle remplace l'agenda : on ne cherche pas un créneau, on
   cherche une table.
   ========================================================================== */

:root {
  --ac: #a97722;
  --ac-d: #8c6018;
  --bg: #f8f3e9;
  --panel: #ffffff;
  --panel-2: #f3ece0;
  --ink: #241f18;
  --ink-2: #6d6455;
  --ink-3: #9a9182;
  --line: #e5dbc9;
  --ok: #2f8558;
  --warn: #b0801d;
  --bad: #c04b3e;
  --ck-ac: var(--ac);
  --ck-ink: var(--ink);
  --ck-paper: var(--panel);
  --ck-line: var(--line);
  --ck-radius: 14px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.45 "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-family: "Bricolage Grotesque", sans-serif; }
.num { font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }
button { font: inherit; color: inherit; }

#flag {
  height: 38px; display: flex; align-items: center; gap: 12px; padding: 0 18px;
  background: var(--ink); color: rgba(255, 255, 255, 0.72); font-size: 12.5px;
}
#flag b { font: 600 10px "JetBrains Mono", monospace; letter-spacing: 0.15em; padding: 3px 9px; border-radius: 999px; background: var(--ac); color: #fff; }
#flag .sp { flex: 1; }
#flag button, #flag a {
  border: 1px solid rgba(255, 255, 255, 0.24); background: none; color: rgba(255, 255, 255, 0.9);
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
#flag a.cta { background: var(--ac); border-color: var(--ac); color: #fff; font-weight: 700; }

#head {
  display: flex; align-items: center; gap: 18px; padding: 18px 22px 14px; flex-wrap: wrap;
}
#head h1 { font-size: 25px; letter-spacing: -0.015em; }
#head p { margin: 3px 0 0; color: var(--ink-2); font-size: 13.5px; }
.svc { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.svc button { border: 0; background: none; border-radius: 999px; padding: 9px 20px; font-weight: 700; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.svc button.on { background: var(--ac); color: #fff; }
#head .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
#q { width: 220px; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); outline: none; }
#q::placeholder { color: var(--ink-3); }
#q:focus { border-color: var(--ac); }
.who { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-2); }
.who b { width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--ac) 13%, #fff); color: var(--ac); display: grid; place-items: center; font-size: 12.5px; }

#ck-scroll { height: calc(100vh - 38px - 74px - 76px); overflow-y: auto; padding: 0 22px 28px; }

/* Chiffres du service : très gros, lisibles à un mètre. */
.big { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.big > div { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.big h4 { margin: 0 0 8px; font: 600 10px "JetBrains Mono", monospace; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-3); }
.big b { display: block; font: 800 32px/1 "Bricolage Grotesque", sans-serif; letter-spacing: -0.02em; }
.big small { display: block; margin-top: 6px; color: var(--ink-2); font-size: 12.5px; }
.big .up { color: var(--ok); font-weight: 700; } .big .down { color: var(--bad); font-weight: 700; }

.two { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; margin-bottom: 16px; }
.card > h3 {
  font: 600 10.5px "JetBrains Mono", monospace; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}
.card > h3 em { margin-left: auto; font-style: normal; letter-spacing: 0; text-transform: none; font-family: "DM Sans", sans-serif; font-size: 13px; color: var(--ac); }

/* Le plan de salle : des tables, pas des créneaux. */
.salle { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.table {
  border: 1px solid var(--line); background: var(--panel); border-radius: 14px;
  padding: 14px; text-align: left; cursor: pointer; min-height: 118px;
  display: flex; flex-direction: column; gap: 4px;
}
.table:hover { border-color: var(--ac); }
.table .n { font: 700 13px "JetBrains Mono", monospace; color: var(--ink-3); letter-spacing: 0.08em; }
.table b { font: 700 16px "Bricolage Grotesque", sans-serif; }
.table span { color: var(--ink-2); font-size: 12.5px; }
.table .h { margin-top: auto; font: 700 15px "JetBrains Mono", monospace; color: var(--ac); }
.table.libre { background: none; border-style: dashed; color: var(--ink-3); }
.table.libre b { color: var(--ink-3); font-weight: 600; }
.table.servi { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.table.servi .h { color: var(--ok); }
.table.attente { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
.table.attente .h { color: var(--warn); }

.pastille { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--panel-2); color: var(--ink-2); border: 1px solid var(--line); }
.pastille.ok, .pastille.warn, .pastille.bad, .pastille.ac { background: #fff; }
.pastille.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.pastille.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.pastille.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.pastille.ac { color: var(--ac); border-color: color-mix(in srgb, var(--ac) 40%, var(--line)); }

.btn {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 999px; padding: 11px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn:hover { border-color: var(--ac); color: var(--ac); }
.btn.solid { background: var(--ac); border-color: var(--ac); color: #fff; }
.btn.solid:hover { color: #fff; background: var(--ac-d); }
.btn.mini { padding: 7px 13px; font-size: 12.5px; }
.bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }

.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; gap: 13px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.rows li:first-child { border-top: 0; padding-top: 0; }
.rows .t { font: 700 14px "JetBrains Mono", monospace; color: var(--ac); min-width: 52px; }
.rows .b { flex: 1; min-width: 0; }
.rows .b b { display: block; font-weight: 600; }
.rows .b span { color: var(--ink-2); font-size: 12.8px; }
.rows input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--ac); }

table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: left; font: 600 10px "JetBrains Mono", monospace; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 11px; }
table.t td { padding: 12px 10px 12px 0; border-top: 1px solid var(--line); }
table.t td.r, table.t th.r { text-align: right; padding-right: 0; }

.week { display: grid; grid-template-columns: repeat(6, minmax(145px, 1fr)); gap: 11px; }
.dayhead { padding-bottom: 10px; border-bottom: 2px solid var(--line); margin-bottom: 11px; }
.dayhead small { display: block; font: 600 10px "JetBrains Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.dayhead b { font: 700 18px "Bricolage Grotesque", sans-serif; }
.dayhead.today { border-bottom-color: var(--ac); }
.dayhead.today b, .dayhead.today small { color: var(--ac); }
.resa { width: 100%; text-align: left; border: 0; border-left: 3px solid var(--ac); background: color-mix(in srgb, var(--ac) 8%, #fff); border-radius: 0 10px 10px 0; padding: 9px 11px; margin-bottom: 8px; cursor: pointer; }
.resa:hover { background: var(--panel-2); }
.resa b { display: block; font: 700 11px "JetBrains Mono", monospace; color: var(--ac); }
.resa strong { display: block; font-size: 13px; font-weight: 600; }
.resa span { display: block; font-size: 11.5px; color: var(--ink-2); }
.resa.done { opacity: 0.5; border-left-color: var(--ink-3); }
.wadd { width: 100%; border: 1px dashed var(--line); background: none; border-radius: 10px; padding: 9px; color: var(--ink-3); font-size: 12.5px; cursor: pointer; }
.wadd:hover { border-color: var(--ac); color: var(--ac); }
.ferme { text-align: center; color: var(--ink-3); font-size: 13px; padding: 12px 0; }

.split { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.list { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; max-height: calc(100vh - 300px); overflow-y: auto; }
.list button { display: block; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); padding: 13px 16px; cursor: pointer; }
.list button:first-child { border-top: 0; }
.list button:hover { background: var(--panel-2); }
.who b { font-weight: 700; }
.list button.on { background: color-mix(in srgb, var(--ac) 9%, #fff); box-shadow: inset 3px 0 0 var(--ac); }
.list b { display: block; font-size: 14.5px; font-weight: 600; }
.list span { font-size: 12px; color: var(--ink-2); }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; margin: 0; font-size: 14px; }
.dl dt { color: var(--ink-2); }
.dl dd { margin: 0; text-align: right; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

.chart { display: flex; align-items: flex-end; gap: 6px; height: 175px; }
.chart > div { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; position: relative; }
.chart i { flex: 1; background: var(--ac); border-radius: 4px 4px 0 0; min-height: 3px; }
.chart i.b { background: #ded2ba; }
.chart > div:hover::after { content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 5px 10px; border-radius: 8px; font-size: 12px; white-space: nowrap; margin-bottom: 6px; z-index: 5; }
.chart-x { display: flex; gap: 6px; margin-top: 8px; }
.chart-x span { flex: 1; text-align: center; font: 500 9.5px "JetBrains Mono", monospace; color: var(--ink-3); }
.legend { display: flex; gap: 18px; margin-top: 12px; font-size: 12.5px; color: var(--ink-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--ac); margin-right: 6px; }
.legend i.b { background: #ded2ba; }
.bars { list-style: none; margin: 0; padding: 0; }
.bars li { padding: 9px 0; font-size: 14px; }
.bars .l { display: flex; justify-content: space-between; margin-bottom: 6px; }
.bars u { display: block; height: 8px; background: var(--panel-2); border-radius: 999px; }
.big > div, .card { box-shadow: 0 1px 0 rgba(36, 31, 24, 0.05); }
.bars u i { display: block; height: 100%; background: var(--ac); border-radius: 999px; }
.empty { color: var(--ink-3); font-size: 14px; }

/* Navigation en bas : c'est là qu'est le pouce sur une tablette de comptoir. */
#nav {
  position: fixed; bottom: 0; left: 0; right: 0; height: 76px; z-index: 30;
  display: flex; background: var(--panel); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px -14px rgba(36, 31, 24, 0.5);
}
#nav button {
  flex: 1; border: 0; background: none; cursor: pointer; color: var(--ink-3);
  display: grid; justify-items: center; align-content: center; gap: 5px; position: relative;
}
#nav button svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#nav button small { font-size: 11.5px; font-weight: 600; }
#nav button.on { color: var(--ac); }
#nav button.on::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; background: var(--ac); border-radius: 0 0 3px 3px; }
#nav em {
  position: absolute; top: 12px; right: 50%; margin-right: -26px; font-style: normal;
  background: var(--ac); color: #fff; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px;
}

@media (max-width: 1080px) { .two { grid-template-columns: minmax(0, 1fr); } .big { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  #q { width: 140px; }
  /* La page défile d'un bloc, avec la place réservée à la barre du bas. */
  html, body { height: auto; }
  #ck-scroll { height: auto; overflow: visible; padding-bottom: 96px; }
  #head { padding: 14px 16px 12px; }
  #ck-scroll { padding: 0 16px 28px; }
  .week { grid-template-columns: repeat(6, 150px); overflow-x: auto; }
  #nav button small { font-size: 10.5px; }
}
@media (max-width: 820px) {
  /* 26 px : au-dessus du minimum de 24 px du critère WCAG 2.5.8 « taille de
     cible », qui s'applique à une case à cocher isolée dans une ligne. */
  .rows input[type="checkbox"] { width: 26px; height: 26px; }
  .card > table.t { display: block; overflow-x: auto; }
}
@media (max-width: 620px) {
  /* Le client, le montant, le statut, le geste : le reste attend un écran
     plus large. Mieux qu'un défilement qui cacherait justement le montant. */
  .card > table.t th:nth-child(1), .card > table.t td:nth-child(1),
  .card > table.t th:nth-child(3), .card > table.t td:nth-child(3),
  .card > table.t th:nth-child(4), .card > table.t td:nth-child(4) { display: none; }
  .card > table.t { font-size: 13px; }
  /* Un statut ne chevauche pas le bouton d'à côté. */
  table.t .pastille { white-space: nowrap; font-size: 10.5px; padding: 3px 8px; }
  table.t td.r { white-space: nowrap; }
  .btn.mini { padding: 8px 11px; font-size: 12px; }
  .big { grid-template-columns: 1fr; }
  .big b { font-size: 26px; }
  #head { gap: 12px; }
  #head .right { width: 100%; margin-left: 0; }
  #q { flex: 1; width: auto; }
  .salle { grid-template-columns: 1fr 1fr; }
}


/* Sur mobile, le bandeau démo garde sa ligne : le texte s'efface, les deux
   boutons restent. Un bandeau qui passe sur trois lignes mange l'écran. */
@media (max-width: 700px) {
  #flag { flex-wrap: nowrap; overflow: hidden; padding: 0 12px; gap: 8px; }
  #flag span:not(.sp) { display: none; }
  #flag b, #flag button, #flag a { white-space: nowrap; flex: none; }
}

@media (max-width: 430px) {
  /* Le bouton dit déjà l'état : « Encaisser » n'apparaît que sur une note qui
     ne l'est pas. La colonne statut rend sa place au montant. */
  .card > table.t th:nth-child(6), .card > table.t td:nth-child(6) { display: none; }
}