/* ── Interactive KDS demo — self-contained ──────────────────────────────────
   A faithful, click-through replica of the real Küchenmonitor
   (frontend/src/views/kds/KdsView.vue), rendered by /landing/kds-demo.js from
   localStorage state. Board CSS is ported from index.html's inline .vue-shot
   KDS block and re-scoped under .kds-demo so the landing page stays
   self-contained. Nothing here depends on app.js. */

.kds-demo {
  --c-bg: #2B2B2B;
  --c-bg-soft: #333333;
  --c-bg-muted: #3A3A3A;
  --c-border: #484848;
  --c-text: #E0E0E0;
  --c-text-secondary: #9E9E9E;
  --c-primary: #FFC66D;
  --c-primary-dark: #E5A84A;
  --c-success: #4ADE80;
  --c-warning: #EAB308;
  --c-error: #F87171;
  font-family: 'Hanken Grotesk', 'Hanken Fallback Roboto', 'Hanken Fallback Arial', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--c-text);
}

/* ── Tablet frame (landscape) ── */
.kds-demo-tablet {
  max-width: 60rem;
  margin: 0 auto;
  border-radius: 26px;
  padding: 14px 16px;
  background: linear-gradient(150deg, #14140f 0%, #3a3a34 100%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  position: relative;
}
.kds-demo-tablet::before { /* front camera dot */
  content: "";
  position: absolute; top: 50%; left: 8px; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: #0c0c0a; box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
}
.kds-demo-screen {
  border-radius: 14px;
  overflow: hidden;
  background: var(--c-bg);
  border: 1px solid #000;
}

/* ── Header ── */
.kds-demo .kds-header {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.75rem 1rem; background: var(--c-bg-soft); border-bottom: 1px solid var(--c-border);
}
.kds-demo .kds-header__left { display: flex; align-items: center; gap: 0.55rem; }
.kds-demo .kds-header__title { margin: 0; font-size: 1.05rem; color: var(--c-primary); font-weight: 700; letter-spacing: 0.02em; }
.kds-demo .kds-count-badge {
  background: var(--c-primary); color: #1a1a1a; font-weight: 800; border-radius: 999px;
  padding: 0.1rem 0.55rem; font-size: 0.72rem; min-width: 22px; text-align: center;
}

/* ── Grid + cards ── */
.kds-demo .kds-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.7rem; padding: 0.85rem; max-height: 32rem; overflow-y: auto;
}
.kds-demo .kds-card {
  display: flex; flex-direction: column; gap: 0.55rem; padding: 0.6rem 0.55rem;
  background: var(--c-bg-soft); border: 2px solid var(--c-border); border-radius: 10px; min-width: 0;
}
.kds-demo .kds-card.urgent-low { border-color: rgba(98,151,85,0.4); }
.kds-demo .kds-card.urgent-mid { border-color: var(--c-warning); background: #332d0a; }
.kds-demo .kds-card.urgent-high { border-color: var(--c-error); background: #331818; animation: kds-pulse-red 3s ease-in-out infinite; }
@keyframes kds-pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0); }
  50%      { box-shadow: 0 0 14px 1px rgba(248,113,113,0.4); }
}
.kds-demo .kds-card__head { display: flex; align-items: center; gap: 0.45rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--c-border); }
.kds-demo .kds-card__table { font-size: 0.92rem; font-weight: 700; color: var(--c-primary); letter-spacing: 0.02em; }
.kds-demo .kds-card__progress-badge {
  font-size: 0.58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--c-primary); border: 1px solid rgba(255,198,109,0.5); border-radius: 999px; padding: 0.08rem 0.4rem;
}
.kds-demo .kds-card__ah-badge { background: var(--c-warning); color: #1a1a1a; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.6rem; font-weight: 800; }
.kds-demo .kds-time-badge {
  margin-left: auto; font-variant-numeric: tabular-nums; font-size: 0.7rem; font-weight: 800;
  color: var(--c-text-secondary); background: rgba(255,255,255,0.06); border: 1px solid var(--c-border);
  padding: 0.12rem 0.45rem; border-radius: 999px;
}
.kds-demo .kds-time-badge--warn { color: var(--c-warning); border-color: rgba(234,179,8,0.4); background: rgba(234,179,8,0.12); }
.kds-demo .kds-time-badge--danger { color: var(--c-error); border-color: rgba(248,113,113,0.45); background: rgba(248,113,113,0.12); }
.kds-demo .kds-card__body { display: flex; flex-direction: column; gap: 0.7rem; }

/* ── Course sections ── */
.kds-demo .kds-course { display: flex; flex-direction: column; gap: 0.45rem; }
.kds-demo .kds-course__head { display: flex; align-items: center; gap: 0.4rem; padding-bottom: 0.3rem; border-bottom: 1px dashed var(--c-border); }
.kds-demo .kds-course__icon { color: var(--c-primary); flex-shrink: 0; }
.kds-demo .kds-course__title { margin: 0; font-size: 0.7rem; color: var(--c-text); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.kds-demo .kds-course__count {
  margin-left: auto; font-size: 0.6rem; color: var(--c-text-secondary); background: var(--c-bg-muted);
  border-radius: 999px; padding: 0 0.45rem; min-width: 20px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
.kds-demo .kds-course__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }

/* ── Item rows ── */
.kds-demo .kds-item {
  display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.45rem;
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 8px; min-width: 0;
}
.kds-demo .kds-item--started { background: rgba(255,198,109,0.08); border-color: rgba(255,198,109,0.5); }
.kds-demo .kds-item__qty { flex-shrink: 0; width: 22px; text-align: right; color: var(--c-primary); font-weight: 800; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.kds-demo .kds-item__main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
/* 650 is not a loaded cut (Hanken Grotesk ships 300-900 in steps of 100) and
   silently resolved to 700 — written as what actually renders. */
.kds-demo .kds-item__name { color: var(--c-text); font-weight: 700; font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; }
.kds-demo .kds-item__variant { font-size: 0.62rem; color: var(--c-text-secondary); }
.kds-demo .kds-item__note { margin: 0.15rem 0 0; font-size: 0.62rem; color: var(--c-warning); font-style: italic; }
.kds-demo .kds-item__btn {
  flex-shrink: 0; width: 30px; height: 30px; border: 0; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: filter 0.12s ease, transform 0.12s ease;
}
.kds-demo .kds-item__btn:hover { filter: brightness(1.08); }
.kds-demo .kds-item__btn:active { transform: scale(0.92); }
.kds-demo .kds-item__btn--start { background: var(--c-primary); color: #1a1a1a; }
.kds-demo .kds-item__btn--ready { background: var(--c-success); color: #1a1a1a; }

/* ── Status footer ── */
.kds-demo .kds-status-footer {
  display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem;
  border-top: 1px solid var(--c-border); background: var(--c-bg-soft);
  font-size: 0.65rem; color: var(--c-text-secondary);
}
.kds-demo .kds-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.kds-demo .kds-status-dot--ok { background: var(--c-success); box-shadow: 0 0 6px rgba(74,222,128,0.6); }
.kds-demo .kds-status-sep { margin: 0 0.3rem; opacity: 0.5; }
.kds-demo .kds-empty { padding: 3rem 1rem; text-align: center; color: var(--c-text-secondary); font-size: 0.85rem; }

/* ── Demo toolbar (below the tablet) ── */
.kds-demo-toolbar {
  max-width: 60rem; margin: 1rem auto 0; display: flex; align-items: center;
  justify-content: center; gap: 0.8rem; flex-wrap: wrap;
}
.kds-demo-hint { font-size: 0.78rem; color: #9E9E9E; }
.kds-demo-reset {
  font-family: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  color: #E0E0E0; background: transparent; border: 1px solid var(--c-border);
  border-radius: 0.5rem; padding: 0.5rem 1rem; transition: border-color 0.15s ease, color 0.15s ease;
}
.kds-demo-reset:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* JS-only: hide the no-JS fallback once the script boots */
.kds-demo[data-ready="1"] .kds-demo-fallback { display: none; }