/* ═══════════════════════════════════════════════════
   SOVEL POS — Kitchen Display
   Per sovel-hotel-brand-system §2.1 §3 §5

   Kitchen is also internal staff. Uses Sovel Foundation palette (same
   as operator console). Cards and typography are sized for an iPad
   in landscape, viewable from a kitchen step away — bigger than the
   operator console.
   ═══════════════════════════════════════════════════ */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--hg-font-body);
  font-size: var(--hg-text-base);
  background: var(--hg-pearl);
  color: var(--hg-navy);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }

/* ═══ Reuse login tokens from operator (same look) ═══ */
.screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--hg-space-5); }
.login-card {
  background: var(--hg-pearl);
  border-top: 4px solid var(--hg-gold);
  padding: var(--hg-space-7) var(--hg-space-6);
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(11,29,58,0.12);
  border-radius: 4px;
}
.login-header { margin-bottom: var(--hg-space-6); }
.login-brand {
  font-family: var(--hg-font-display);
  font-size: 28px;
  letter-spacing: 0.18em;
  color: var(--hg-navy);
}
.login-subtitle {
  margin-top: 4px;
  font-family: var(--hg-font-accent);
  color: rgba(11,29,58,0.65);
  font-size: var(--hg-text-lg);
}
.pin-display {
  display: flex;
  justify-content: center;
  gap: var(--hg-space-3);
  margin-bottom: var(--hg-space-5);
}
.pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(11,29,58,0.3);
  transition: background 120ms ease, border-color 120ms ease, transform 200ms ease;
}
.pin-dot.filled { background: var(--hg-gold); border-color: var(--hg-gold); }
.pin-dot.error  { border-color: var(--hg-error); animation: shake 0.4s ease-in-out; }
@keyframes shake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(3px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hg-space-3);
  margin-bottom: var(--hg-space-4);
}
.pin-key {
  font-family: var(--hg-font-display);
  font-size: 24px;
  background: var(--hg-pearl-warm);
  color: var(--hg-navy);
  border: 1px solid rgba(11,29,58,0.08);
  border-radius: 6px;
  padding: var(--hg-space-4) 0;
  cursor: pointer;
  min-height: 56px;
  transition: background 90ms ease;
}
.pin-key:hover  { background: var(--hg-gold-soft); }
.pin-key:active { background: var(--hg-gold); color: #fff; }
.pin-key-action { font-family: var(--hg-font-body); font-size: var(--hg-text-base); color: rgba(11,29,58,0.7); }

.pin-error {
  min-height: 1.4em;
  color: var(--hg-error);
  font-size: var(--hg-text-sm);
  margin-top: var(--hg-space-3);
}
.pin-hint {
  margin-top: var(--hg-space-4);
  padding: var(--hg-space-3) var(--hg-space-4);
  background: rgba(200,164,94,0.12);
  border-left: 3px solid var(--hg-gold);
  border-radius: 4px;
  color: var(--hg-navy);
  font-size: var(--hg-text-sm);
  text-align: left;
  font-style: italic;
}

/* ═══ Chrome ═══ */
.kitchen-chrome { display: flex; flex-direction: column; min-height: 100vh; }

.kitchen-header {
  background: var(--hg-navy);
  color: var(--hg-pearl);
  padding: var(--hg-space-4) var(--hg-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hg-space-4);
}
.kitchen-brand-title {
  font-family: var(--hg-font-display);
  font-size: 22px;
  letter-spacing: 0.16em;
}
.kitchen-brand-sub {
  font-family: var(--hg-font-accent);
  color: var(--hg-gold-light);
  margin-left: var(--hg-space-2);
  font-size: var(--hg-text-base);
}
.kitchen-meta { display: flex; align-items: center; gap: var(--hg-space-3); }
.kitchen-clock {
  font-family: var(--hg-font-mono);
  color: var(--hg-gold-light);
  font-size: var(--hg-text-base);
}
.kitchen-counts {
  font-size: var(--hg-text-sm);
  color: rgba(245,240,232,0.7);
}
.kitchen-icon-btn {
  background: transparent;
  border: 1px solid rgba(245,240,232,0.18);
  color: var(--hg-pearl);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--hg-text-sm);
  min-height: 40px;
  transition: background 120ms ease, border-color 120ms ease;
}
.kitchen-icon-btn:hover { background: rgba(255,255,255,0.06); border-color: var(--hg-gold); }
.kitchen-icon-btn[aria-pressed="true"] { background: var(--hg-gold-soft); border-color: var(--hg-gold); color: var(--hg-gold-light); }
.kitchen-icon-btn-danger:hover { color: #FF9A95; border-color: rgba(255,154,149,0.5); }
.sound-icon { font-size: 16px; line-height: 1; }

/* ═══ Main board ═══ */
.kitchen-main {
  flex: 1;
  padding: var(--hg-space-5) var(--hg-space-6);
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

.kitchen-zone { margin-bottom: var(--hg-space-7, 40px); }
.kitchen-zone-ready { opacity: 0.85; }
.zone-title {
  font-family: var(--hg-font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--hg-navy);
  border-bottom: 1px solid var(--hg-gold);
  padding-bottom: var(--hg-space-3);
  margin: 0 0 var(--hg-space-4);
}
.zone-title-ready { color: rgba(11,29,58,0.55); border-bottom-color: rgba(200,164,94,0.4); }
.zone-count {
  font-family: var(--hg-font-mono);
  font-size: var(--hg-text-base);
  color: var(--hg-gold-dark);
  margin-left: var(--hg-space-2);
}
.zone-empty {
  text-align: center;
  padding: var(--hg-space-6) 0;
  font-style: italic;
  color: rgba(11,29,58,0.4);
  font-family: var(--hg-font-accent);
  font-size: var(--hg-text-lg);
}
.zone-empty[hidden] { display: none; }

/* ═══ Cards grid (responsive) ═══ */
.kitchen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--hg-space-5);
}

.order-card {
  background: #fff;
  border-radius: 6px;
  border-left: 5px solid var(--hg-gold);
  box-shadow: 0 4px 14px rgba(11,29,58,0.07);
  padding: var(--hg-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--hg-space-4);
  transition: transform 220ms ease, box-shadow 220ms ease, opacity 220ms ease;
}
.order-card.is-new {
  animation: card-in 380ms cubic-bezier(.2,.7,.3,1);
}
@keyframes card-in {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.order-card.is-ready {
  border-left-color: var(--hg-gray-mid);
  background: var(--hg-pearl-cool);
  box-shadow: none;
}

.order-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hg-space-3);
}
.order-number {
  font-family: var(--hg-font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--hg-navy);
  line-height: 1.05;
  letter-spacing: 0.02em;
}
.order-time {
  font-family: var(--hg-font-mono);
  color: rgba(11,29,58,0.55);
  font-size: var(--hg-text-sm);
  white-space: nowrap;
}
.order-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hg-space-3);
  font-size: var(--hg-text-sm);
  color: rgba(11,29,58,0.7);
  border-bottom: 1px dashed rgba(11,29,58,0.08);
  padding-bottom: var(--hg-space-3);
}
.order-meta-room {
  font-family: var(--hg-font-mono);
  font-weight: 600;
  color: var(--hg-navy);
  background: var(--hg-pearl-warm);
  padding: 2px 10px;
  border-radius: 4px;
}
.order-service-date {
  font-family: var(--hg-font-mono);
  color: var(--hg-gold-dark);
  font-size: var(--hg-text-xs);
  letter-spacing: 0.06em;
}

.guest-group {
  margin-bottom: var(--hg-space-3);
}
.guest-group-label {
  font-family: var(--hg-font-accent);
  font-style: italic;
  font-size: var(--hg-text-base);
  color: var(--hg-gold-dark);
  border-bottom: 1px solid var(--hg-gold-soft);
  padding-bottom: 2px;
  margin-bottom: var(--hg-space-2);
}
.item-line {
  display: flex;
  gap: var(--hg-space-2);
  padding: 2px 0;
  font-size: var(--hg-text-base);
}
.item-qty {
  flex-shrink: 0;
  font-family: var(--hg-font-mono);
  font-weight: 600;
  color: var(--hg-navy);
  width: 28px;
}
.item-name { color: var(--hg-navy); }
.item-modifiers {
  margin-top: 2px;
  margin-left: 28px;
  font-style: italic;
  color: rgba(11,29,58,0.6);
  font-size: var(--hg-text-sm);
  font-family: var(--hg-font-accent);
}

.order-actions { margin-top: auto; padding-top: var(--hg-space-2); }

.btn-mark-ready {
  width: 100%;
  background: var(--hg-navy);
  color: var(--hg-pearl);
  border: 0;
  padding: var(--hg-space-4);
  font-family: var(--hg-font-display);
  font-size: 18px;
  letter-spacing: 0.18em;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  min-height: 56px;
  border-bottom: 3px solid var(--hg-gold);
  transition: background 120ms ease;
}
.btn-mark-ready:hover { background: var(--hg-navy-light); }
.btn-mark-ready:active { background: var(--hg-navy-dark); }
.btn-mark-ready:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-undo-ready {
  width: 100%;
  background: transparent;
  color: var(--hg-gray-dark);
  border: 1px solid rgba(11,29,58,0.2);
  padding: var(--hg-space-3);
  font-family: inherit;
  font-size: var(--hg-text-sm);
  letter-spacing: 0.04em;
  border-radius: 4px;
  cursor: pointer;
  min-height: 44px;
  transition: background 120ms ease, color 120ms ease;
}
.btn-undo-ready:hover  { background: var(--hg-pearl-warm); color: var(--hg-navy); }
.btn-undo-ready:disabled { opacity: 0.4; cursor: not-allowed; }

.ready-stamp {
  font-family: var(--hg-font-accent);
  font-style: italic;
  color: var(--hg-success);
  font-size: var(--hg-text-base);
  margin-bottom: var(--hg-space-3);
}

/* ═══ Toasts (reuse style) ═══ */
.toasts {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  background: var(--hg-navy);
  color: var(--hg-pearl);
  padding: 12px 20px;
  border-radius: 4px;
  border-left: 3px solid var(--hg-gold);
  box-shadow: 0 8px 24px rgba(11,29,58,0.2);
  font-size: 14px;
}
.toast-success { border-left-color: var(--hg-success); }
.toast-error   { border-left-color: var(--hg-error); }

/* ═══ Responsive (tablet portrait) ═══ */
@media (max-width: 720px) {
  .kitchen-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--hg-space-3);
    padding: var(--hg-space-3) var(--hg-space-4);
  }
  .kitchen-meta { justify-content: space-between; flex-wrap: wrap; }
  .kitchen-main { padding: var(--hg-space-4); }
  .kitchen-grid { grid-template-columns: 1fr; gap: var(--hg-space-4); }
  .order-number { font-size: 24px; }
}

/* === Allergy callouts (N1.1) ======================================= */
.item-allergy {
  margin: 2px 0 6px 34px;
  padding: 2px 8px;
  display: inline-block;
  background: #C83D3D;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  border-radius: 4px;
}
.order-card.has-allergy { border-left: 6px solid #C83D3D; }

/* === Live age timers (N1.4) ======================================== */
.order-elapsed {
  font-weight: 700;
  font-size: 0.9rem;
  padding: 2px 10px;
  border-radius: 999px;
  margin: 0 8px;
}
.order-elapsed.age-fresh { background: rgba(46,151,80,0.15);  color: #2E9750; }
.order-elapsed.age-warn  { background: rgba(212,164,38,0.18); color: #8A6A14; }
.order-elapsed.age-late  { background: rgba(200,61,61,0.16);  color: #C83D3D; }
.order-card.age-warn { box-shadow: 0 0 0 2px rgba(212,164,38,0.55); }
.order-card.age-late { box-shadow: 0 0 0 2px rgba(200,61,61,0.7); }