/* ================================================================
   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;
}

/* The statuses that have orders sit side by side and share the width equally; an empty status isn't rendered at all,
   so the rest expand into its space. */
.kiosk-sections {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

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

@media (max-width: 900px) {
  .kiosk-sections { flex-direction: column; align-items: stretch; }
}

.kiosk-col-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--k-border);
}

.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: 20px;
  line-height: 1.2;
  margin: 0;
  color: var(--k-ink);
  letter-spacing: 0.01em;
}

.kiosk-count {
  min-width: 34px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: var(--k-card);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--k-ink-sub);
}

/* 3 tile columns in each section by default. With only two statuses showing there is twice the room each, so 4
   columns; with one, 6. On a narrow screen the sections stack and the tiles go back to 2 across. */
.kiosk-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.kiosk-sections[data-visible="2"] .kiosk-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kiosk-sections[data-visible="1"] .kiosk-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .kiosk-sections .kiosk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kiosk-tile {
  background: var(--k-card);
  border-radius: 14px;
  padding: 0 16px;
  text-align: center;
  height: 96px;
  min-width: 0;
  container-type: inline-size;
  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 {
  max-width: 100%;
  font-size: clamp(15px, 17cqw, 26px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kiosk-oplatform {
  max-width: 100%;
  margin-top: 5px;
  min-height: 16px;
  font-size: clamp(11px, 9cqw, 13px);
  line-height: 16px;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kiosk-empty-section {
  grid-column: 1 / -1;
  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;
}

/* ---- QR code sheets (storefront link and table QR codes) ---- */
.qr-sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.qr-card { border: 1px solid var(--ink-200); border-radius: 12px; padding: 14px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; break-inside: avoid; }
.qr-card strong { font-size: 15px; }
.qr-card span { color: var(--ink-500); font-size: 12px; }
.qr-code { width: 100%; max-width: 170px; }
@media (max-width: 700px) { .qr-sheet { grid-template-columns: repeat(2, 1fr); } }
@media print {
  /* Only the sheet is printed: everything else on the page is hidden. */
  body * { visibility: hidden; }
  .qr-sheet, .qr-sheet * { visibility: visible; }
  .qr-sheet { position: absolute; left: 0; top: 0; width: 100%; }
  .modal-backdrop, .modal, .modal-body { position: static !important; overflow: visible !important; max-height: none !important; }
}

/* ---- My account and security; the till clock-in pad; manager approval ---- */
.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.account-required { background: var(--amber-100); border-color: var(--amber-600); color: var(--amber-700); margin-bottom: 14px; }
.account-steps { margin: 0 0 12px 18px; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--ink-700); }
.mfa-qr { width: 190px; max-width: 100%; padding: 8px; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius-sm); margin-bottom: 8px; }
.mfa-qr svg { display: block; width: 100%; height: auto; }
.mfa-key { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 1px; word-break: break-all; user-select: all; }
.recovery-codes { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; }
.recovery-codes li { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; padding: 6px 10px; background: var(--ink-100); border-radius: var(--radius-sm); text-align: center; user-select: all; }
.temp-password { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 24px; font-weight: 700; letter-spacing: 2px; text-align: center; padding: 14px; margin: 10px 0; background: var(--ink-100); border-radius: var(--radius-md); user-select: all; }

.clock-pad { display: grid; gap: 4px; min-width: min(420px, 100%); }
.clock-result { margin: 0 0 8px; padding: 9px 12px; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px; }
.clock-result.is-ok { background: var(--green-100); color: var(--green-700); }
.clock-result.is-error { background: var(--red-100); color: var(--red-700); }
.clock-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.clock-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px; min-height: 76px; text-align: left; background: var(--surface); border: 1px solid var(--ink-200); border-radius: var(--radius-md); cursor: pointer; font: inherit; color: var(--ink-900); }
.clock-tile span:not(.pill) { font-size: 12px; color: var(--ink-500); }
.clock-tile:hover:not(:disabled), .clock-tile.is-picked { border-color: var(--brand-500); background: var(--brand-50); }
.clock-tile:disabled { opacity: .55; cursor: not-allowed; }
.clock-tile:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.clock-dots { display: flex; gap: 10px; justify-content: center; margin: 8px 0 12px; }
.clock-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink-300); }
.clock-dot.on { background: var(--ink-900); border-color: var(--ink-900); }
.clock-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 280px; margin: 0 auto; }
.clock-key { height: 54px; font-size: 20px; font-weight: 600; justify-content: center; }

/* ---- Reports: headline figures, sub-report switch, and the print layout ---- */
.kpi { font-size: 20px; font-weight: 800; margin: 2px 0; font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin-bottom: 14px; background: var(--ink-100); border-radius: var(--radius-sm); }
.seg .seg-btn { border: 0; background: transparent; padding: 6px 12px; border-radius: 6px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-600); cursor: pointer; }
.seg .seg-btn.active { background: var(--surface); color: var(--ink-900); box-shadow: var(--shadow-sm); }
.seg .seg-btn:disabled { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
.qm-unavailable { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-500); }
.seg .seg-btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
.card-head .seg { margin-bottom: 0; }
.print-only { display: none; }
.report-print-head { margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--ink-900); }
.report-print-head h2 { margin: 2px 0; font-size: 20px; }
.report-print-head span { color: var(--ink-600); font-size: 12px; }

@media print {
  @page { size: A4; margin: 12mm; }
  /* Everything except the marked part (and the elements it sits inside) is taken out of the page by print.js, so the report flows
     over as many pages as it needs instead of leaving blank space where the rest of the app was. */
  .print-hide { display: none !important; }
  /* The QR sheet's own print rule above hides everything but itself; a printed report must show again (the specificity is higher). */
  body.printing-report .print-area, body.printing-report .print-area * { visibility: visible !important; }
  .print-chain { display: block !important; height: auto !important; min-height: 0 !important; overflow: visible !important; position: static !important;
                 width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: #fff !important; }
  body.printing-report { background: #fff !important; }
  body.printing-report .print-area .print-only { display: block; }
  body.printing-report .no-print, body.printing-report .pager { display: none !important; }
  body.printing-report .print-area .card { box-shadow: none; break-inside: avoid; }
  body.printing-report .print-area .table-wrap { overflow: visible !important; }
  body.printing-report .print-area tr { break-inside: avoid; }
}