/* ================================================================
   Additive styles for screens the prototype (ui/css/styles.css) never
   needed — e.g. a real Login page, since the prototype assumes an
   always-signed-in demo user. Everything here reuses the prototype's
   own design tokens (--brand-*, --ink-*, --surface, --radius-*,
   --shadow-*) rather than introducing a second palette. Never edit
   styles.css itself — it stays a byte-for-byte copy of the prototype.
================================================================ */

.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 16px;
}

.login-card {
  width: 100%;
  max-width: 380px;
  padding: 28px 26px 26px;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.login-brand .brand-text strong { color: var(--ink-900); }
.login-brand .brand-text span { font-size: 11.5px; color: var(--ink-500); }

/* Blazor's own unhandled-error banner (index.html #blazor-error-ui) — the WASM template's default
   app.css normally supplies this "display: none until JS shows it" rule. We removed that template
   stylesheet in favor of the prototype's own CSS, which never needed to know this element exists,
   so the rule has to live here instead or the banner renders visible on every page load. */
#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

/* Customer-facing order-ready display (FR-KDS-09, ui/display.html), opened from the Kitchen
   Display page as its own browser window/monitor. The prototype deliberately gives this screen
   its own dark, high-contrast palette distinct from the admin app — it's meant to be read from
   across a counter, not to match the back-office UI — so it keeps its own --k-* tokens instead of
   reusing --ink- or --surface tokens. Scoped entirely under .kiosk to avoid colliding with admin
   classes. */
.kiosk {
  --k-bg: #1c1917;
  --k-card: #292524;
  --k-new: #1e3a8a;
  --k-progress: #92400e;
  --k-ready: #15803d;
  --k-ink: #f5f5f4;
  --k-ink-sub: #a8a29e;
  --k-border: #44403c;

  position: fixed;
  inset: 0;
  background: var(--k-bg);
  color: var(--k-ink);
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif;
}

.kiosk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 40px;
  border-bottom: 1px solid var(--k-border);
  flex-shrink: 0;
}

.kiosk-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.kiosk-mark {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f97316, #c2410c);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
}

.kiosk-brand-text strong {
  display: block;
  font-size: 19px;
}

.kiosk-brand-text span {
  color: var(--k-ink-sub);
  font-size: 13px;
}

.kiosk-clock {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.kiosk-clock small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--k-ink-sub);
}

.kiosk-main {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 36px 40px;
}

.kiosk-sections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
  height: 100%;
}

@media (max-width: 900px) {
  .kiosk-sections {
    grid-template-columns: 1fr;
  }
}

.kiosk-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.kiosk-col-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.kiosk-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}

.kiosk-swatch.kiosk-new { background: var(--k-new); }
.kiosk-swatch.kiosk-progress { background: var(--k-progress); }
.kiosk-swatch.kiosk-ready { background: var(--k-ready); }

.kiosk-col-head h2 {
  font-size: 17px;
  margin: 0;
}

.kiosk-count {
  margin-left: auto;
  background: var(--k-card);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--k-ink-sub);
}

.kiosk-tiles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kiosk-tile {
  background: var(--k-card);
  border-radius: 14px;
  padding: 0 16px;
  text-align: center;
  height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background .3s ease;
}

.kiosk-tile.kiosk-new { background: var(--k-new); }
.kiosk-tile.kiosk-progress { background: var(--k-progress); }
.kiosk-tile.kiosk-ready { background: var(--k-ready); }

.kiosk-oid {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.kiosk-oplatform {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}

.kiosk-empty-section {
  text-align: center;
  padding: 30px 12px;
  color: var(--k-ink-sub);
  font-size: 13px;
  border: 1px dashed var(--k-border);
  border-radius: 14px;
}

.kiosk-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--k-ink-sub);
}

.kiosk-empty-big {
  font-size: 20px;
  font-weight: 700;
  color: var(--k-ink);
  margin-bottom: 8px;
}

.kiosk-foot {
  padding: 14px 40px;
  text-align: center;
  color: var(--k-ink-sub);
  font-size: 12px;
  border-top: 1px solid var(--k-border);
  flex-shrink: 0;
}