/* doc-project | cuisine/assets/css/cuisine.css | Définit l’interface dédiée cuisine en smartphone portrait avec header lisible incluant heure, délai centré sur deux lignes avec mots complets Avance/Retard et OK en gros, et production, footer repoussé en bas du flux recentré sur le total pizzas et les contrôles PDV/date/appareil, page scrollable verticalement, board horizontal à colonnes compactes, horloge temps réel, créneaux bleu foncé de taille homogène, badge rond bordeaux du total pizzas positionné en bas à droite de l’entête de chaque créneau, colonnes et commandes justifiées en haut sous les créneaux, tickets non imprimés gris clair à texte noir et tickets imprimés en bordeaux, avec un thème couleur unique aligné sur Lançon pour tous les PDV, et des fondations visuelles harmonisées pour les nouvelles modales premium liées au PDV appareil. | Expose: aucun | Dépend de: cuisine/index.php, cuisine/assets/js/cuisine.js, cuisine/assets/js/_render.js, cuisine/assets/js/_delayIndicator.js | Impacte: UI cuisine, lisibilité des tickets, feedback opérateur, structure responsive mobile portrait, affichage compact du délai avance/retard/OK entre heure et production, gestion du scroll horizontal, scroll vertical de page, uniformité visuelle des créneaux, compacité des cartes commandes, affichage du total pizzas sur l’entête de créneau, contraste des tickets non imprimés, alignement haut des commandes, équilibre du footer, présence d’une action dédiée pour changer le PDV par défaut, hiérarchie visuelle production/impression, suppression de la variante couleur Pélissanne et cohérence visuelle des flux PDV | Tables: aucune */

:root {
  --k-bg: #0f172a;
  --k-panel: #111827;
  --k-panel-2: #1f2937;
  --k-border: #334155;
  --k-text: #e5e7eb;
  --k-muted: #94a3b8;
  --k-accent: #38bdf8;
  --k-accent-2: #082f49;
  --k-ok: #22c55e;
  --k-warn: #f59e0b;
  --k-danger: #fb7185;
  --k-slot-bg: #102a56;
  --k-printed: #7f1d3a;
  --k-printed-border: #9f1239;
  --k-gap: 14px;
  --k-header-h: 112px;
  --k-footer-h: 126px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--k-bg);
  color: var(--k-text);
  font-family: Inter, Arial, sans-serif;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.k-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.k-header {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(82px, .55fr) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--k-gap);
  padding: 14px;
  border-bottom: 1px solid var(--k-border);
  background: var(--k-panel);
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: var(--k-header-h);
}

.k-header__metric {
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: center;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--k-border);
  background: linear-gradient(180deg, rgba(17, 24, 39, .96), rgba(17, 24, 39, .84));
}

.k-header__metric--remaining {
  text-align: right;
}

.k-header__metric--delay {
  text-align: center;
}

.k-header__label,
.k-footer__label,
.k-field__label {
  font-size: 11px;
  color: var(--k-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.k-header__value {
  display: block;
  line-height: 1;
  font-weight: 800;
}

.k-header__value--clock {
  font-size: clamp(28px, 8.6vw, 48px);
  letter-spacing: -.04em;
}

.k-header__value--delay {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 48px;
  font-size: clamp(17px, 5vw, 30px);
  letter-spacing: -.02em;
  line-height: .96;
  text-align: center;
  white-space: normal;
}

.k-header__value--delay .k-delay__code,
.k-header__value--delay .k-delay__minutes {
  display: block;
}

.k-header__value--delay .k-delay__code {
  font-size: .72em;
  letter-spacing: .02em;
}

.k-header__value--delay .k-delay__minutes {
  font-size: 1.22em;
  letter-spacing: -.03em;
}

.k-header__value--delay.is-ok {
  font-size: clamp(30px, 8vw, 48px);
  line-height: 1;
}

.k-header__value--delay.is-early {
  color: #93c5fd;
}

.k-header__value--delay.is-late {
  color: #fbbf24;
}

.k-header__value--delay.is-ok {
  color: #86efac;
}

.k-header__value--remaining {
  font-size: clamp(20px, 5.8vw, 34px);
  letter-spacing: -.03em;
}

.k-main {
  min-height: 0;
  overflow: visible;
  padding: 10px 12px;
  display: block;
}

.k-board {
  min-height: 0;
  background: var(--k-panel);
  border: 1px solid var(--k-border);
  border-radius: 18px;
  padding: 10px;
  overflow: visible;
  display: grid;
  grid-template-rows: auto auto;
}

.k-feedback {
  min-height: 22px;
  margin-bottom: 10px;
  color: var(--k-muted);
  font-size: 14px;
}

.k-feedback.is-error { color: #fca5a5; }
.k-feedback.is-success { color: #86efac; }

.k-app {
  min-height: 0;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
}

.k-board__viewport {
  min-height: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(160px, 21vw, 220px);
  gap: 8px;
  align-items: start;
  width: max-content;
  min-width: 100%;
  padding-bottom: 6px;
}

.k-slot-column {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  align-items: start;
  align-self: start;
  gap: 8px;
  padding: 0;
}

.k-slot__head {
  position: relative;
  height: 64px;
  min-height: 64px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 16px;
  background: var(--k-slot-bg);
  color: #fff;
  padding: 10px 14px;
  text-align: center;
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.k-slot__head-label {
  display: inline-block;
}

.k-slot__head:hover,
.k-slot__head:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(56, 189, 248, .45);
}

.k-slot__orders {
  min-height: 0;
  display: grid;
  align-content: start;
  align-items: start;
  justify-items: stretch;
  gap: 8px;
  overflow: visible;
  padding-right: 2px;
}

.k-slot__total-badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--k-printed);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .28);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  pointer-events: none;
}

.k-order {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  background: #e5e7eb;
  color: #111827;
  padding: 10px 12px;
  text-align: center;
  cursor: pointer;
  min-height: 76px;
}

.k-order:hover,
.k-order:focus-visible {
  outline: none;
  border-color: var(--k-accent);
  transform: translateY(-1px);
}

.k-order--printed {
  background: var(--k-printed);
  border-color: var(--k-printed-border);
  color: #fff;
  opacity: 1;
}

.k-order__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.15;
}

.k-order__count {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: inherit;
}

.k-order__meta {
  display: none;
  margin-top: 0;
  color: #475569;
  font-size: 15px;
}

.k-order__badge {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(56, 189, 248, .12);
  color: #bae6fd;
}

.k-order--printed .k-order__meta {
  color: rgba(255, 255, 255, .86);
}

.k-order--printed .k-order__badge {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

.k-empty {
  padding: 20px 8px;
  color: var(--k-muted);
}

.k-footer {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(320px, 2fr);
  gap: 12px;
  align-items: end;
  padding: 12px;
  border-top: 1px solid var(--k-border);
  background: var(--k-panel);
  position: relative;
  z-index: 10;
  min-height: var(--k-footer-h);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  margin-top: 12px;
}

.k-footer__summary,
.k-footer__controls {
  min-width: 0;
}

.k-footer__summary {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--k-border);
  border-radius: 16px;
  background: var(--k-panel-2);
}

.k-footer__value {
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
}

.k-footer__controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.k-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.k-select,
.k-input,
.k-button {
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid var(--k-border);
  background: var(--k-panel-2);
  color: var(--k-text);
  padding: 0 14px;
  font: inherit;
}

.k-button {
  cursor: pointer;
  font-weight: 700;
  text-align: center;
}

.k-button--secondary {
  background: linear-gradient(180deg, rgba(8, 47, 73, .92), rgba(15, 23, 42, .98));
  border-color: rgba(56, 189, 248, .34);
  color: #e0f2fe;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

.k-button--secondary:hover,
.k-button--secondary:focus-visible {
  outline: none;
  border-color: rgba(56, 189, 248, .62);
  box-shadow: 0 10px 24px rgba(8, 47, 73, .28);
}

@media (max-width: 900px) {
  :root {
    --k-gap: 12px;
    --k-header-h: 104px;
    --k-footer-h: 154px;
  }

  .k-board {
    border-radius: 16px;
  }

  .k-footer {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

@media (max-width: 560px) and (orientation: portrait) {
  :root {
    --k-header-h: 98px;
    --k-footer-h: 160px;
  }

  .k-header {
    padding: 10px;
    gap: 8px;
  }

  .k-header__metric {
    padding: 10px 8px;
    border-radius: 16px;
  }

  .k-header__label {
    font-size: 10px;
    letter-spacing: .06em;
  }

  .k-header__value--clock {
    font-size: clamp(24px, 7.6vw, 36px);
  }

  .k-header__value--delay {
    min-height: 42px;
    font-size: clamp(14px, 4.6vw, 22px);
  }

  .k-header__value--delay.is-ok {
    font-size: clamp(26px, 7.4vw, 38px);
  }

  .k-header__value--remaining {
    font-size: clamp(16px, 4.7vw, 26px);
  }

  .k-main {
    padding: 8px 10px;
  }

  .k-board {
    padding: 8px;
  }

  .k-board__viewport {
    grid-auto-columns: minmax(148px, 44vw);
  }

  .k-slot__head {
    height: 58px;
    min-height: 58px;
    font-size: 18px;
  }

  .k-slot__total-badge {
    right: 4px;
    bottom: 4px;
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .k-order {
    min-height: 70px;
    padding: 10px;
  }

  .k-order__title {
    font-size: 15px;
  }

  .k-order__count {
    font-size: 17px;
  }

  .k-footer {
    padding: 12px;
    gap: 10px;
  }

  .k-footer__controls {
    grid-template-columns: 1fr;
  }
}