/* ---------- App shell ---------- */
#app { min-height: 100vh; min-height: 100dvh; }
.screen { min-height: 100vh; min-height: 100dvh; }
.screen-enter { animation: screen-in 360ms var(--ease) backwards; }
@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- HUD ---------- */
.hud {
  position: sticky; top: 0; z-index: 40; height: var(--hud-h);
  display: flex; align-items: center; gap: var(--s-4); padding: 0 var(--s-4);
  color: var(--cream);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 40%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.035) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--walnut-700), var(--walnut-800));
  border-bottom: 1px solid #140c07;
  box-shadow: 0 6px 18px -10px rgba(20, 12, 7, 0.7);
}
.hud-brand { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.hud-brand .mini-sign { width: 44px; height: 30px; flex: none; }
.hud-title { font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 600; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-sub { font-size: var(--fs-xs); color: var(--cream-dim); letter-spacing: 0.04em; white-space: nowrap; }
.hud-stats { display: flex; align-items: stretch; gap: var(--s-2); margin-left: auto; }
.hud-chip {
  display: flex; flex-direction: column; justify-content: center; padding: 4px 12px; border-radius: var(--r-md);
  background: rgba(255, 244, 228, 0.07); border: 1px solid rgba(255, 244, 228, 0.1); min-width: 88px;
}
button.hud-chip:hover { background: rgba(255, 244, 228, 0.13); }
.hud-chip-label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-dim); display: flex; align-items: center; gap: 4px; }
.hud-chip-label svg { width: 12px; height: 12px; }
.hud-chip-value { font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; color: #fff; white-space: nowrap; }
.hud-chip-value.neg { color: #ffb899; }
.hud-chip .meter { height: 4px; margin-top: 3px; background: rgba(255, 255, 255, 0.15); }
.hud-chip .meter > span { background: #f0c46a; }
.hud-actions { display: flex; gap: 4px; }
.hud-btn { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--cream); }
.hud-btn:hover { background: rgba(255, 244, 228, 0.1); }
.hud-btn svg { width: 22px; height: 22px; }
.hud-help { font-size: 20px; font-weight: 800; line-height: 1; }
.hud-btn[aria-pressed='true'] { background: rgba(255, 244, 228, 0.14); }

@media (max-width: 1080px) {
  .hud-chip.opt { display: none; }
}
@media (max-width: 720px) {
  :root { --hud-h: 56px; }
  .hud { gap: var(--s-2); padding: 0 var(--s-2); }
  .hud-sub { display: none; }
  .hud-title { font-size: var(--fs-md); }
  .hud-chip { min-width: 0; padding: 3px 8px; }
  .hud-chip-value { font-size: var(--fs-md); }
  .hud-chip.opt2 { display: none; }
  .hud-brand .mini-sign { display: none; }
}

/* ---------- Morning ---------- */
.morning { max-width: 1360px; margin: 0 auto; padding: var(--s-6) var(--s-6) 120px; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--s-6); }
.morning-nav { position: sticky; top: calc(var(--hud-h) + var(--s-6)); align-self: start; display: flex; flex-direction: column; gap: 2px; }
.morning-nav .nav-head { padding: 0 var(--s-3) var(--s-3); }
.morning-nav .nav-head h2 { font-size: var(--fs-xl); }
.nav-item {
  display: flex; align-items: center; gap: var(--s-3); padding: 10px var(--s-3); border-radius: var(--r-md);
  font-weight: 650; color: var(--ink-2); text-align: left; width: 100%;
}
.nav-item svg { width: 20px; height: 20px; flex: none; }
.nav-item:hover { background: rgba(255, 251, 244, 0.7); color: var(--ink); }
.nav-item[aria-current='page'] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.nav-item[aria-current='page'] svg { color: var(--accent); }
.nav-item .nav-count { margin-left: auto; }
.nav-item.locked { opacity: 0.55; }
.morning-main { min-width: 0; }
.panel-title { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); flex-wrap: wrap; }
.panel-title p { color: var(--ink-3); max-width: 64ch; margin-top: 4px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-4); }

.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-6);
  background: rgba(255, 251, 244, 0.94); backdrop-filter: blur(8px); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px -18px rgba(40, 24, 12, 0.5);
}
.actionbar-summary { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--fs-sm); color: var(--ink-2); }
.actionbar-summary b { color: var(--ink); font-variant-numeric: tabular-nums; }
.actionbar-actions { margin-left: auto; display: flex; gap: var(--s-2); }

@media (max-width: 960px) {
  .morning { grid-template-columns: 1fr; padding: var(--s-4) var(--s-4) 140px; gap: var(--s-4); }
  .morning-nav { position: static; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .morning-nav .nav-head { display: none; }
  .nav-item { width: auto; white-space: nowrap; padding: 8px 12px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .actionbar { padding: var(--s-3) var(--s-4); flex-wrap: wrap; }
  .actionbar-summary { display: none; }
  .actionbar-actions { width: 100%; }
  .actionbar-actions .btn { flex: 1; }
}

/* ---------- Service ---------- */
.service {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-4); padding: var(--s-4);
  max-width: 1600px; margin: 0 auto; height: calc(100dvh - var(--hud-h)); min-height: 560px;
}
.floor-card { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.floor-top { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.clock { font-family: var(--font-serif); font-size: var(--fs-2xl); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 110px; }
.dayprogress { flex: 1 1 160px; min-width: 120px; }
.dayprogress .meter { height: 6px; }
.dayprogress .ticks { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-3); margin-top: 3px; font-variant-numeric: tabular-nums; }
.floor-canvas-wrap { position: relative; flex: 1 1 auto; min-height: 0; background: #e9dcc6; }
.floor-canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.floor-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding: var(--s-2) var(--s-4); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-2); }
.side { display: flex; flex-direction: column; gap: var(--s-3); min-height: 0; overflow-y: auto; padding-right: 2px; }
.live-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-radius: var(--r-md); overflow: hidden; }
.live-grid > div { background: var(--paper); padding: 8px 10px; }
.live-grid .stat-value { font-size: var(--fs-xl); }
.station-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.station-row:last-child { border-bottom: 0; }
.station-row .meter { grid-column: 1 / -1; }
.station-row.is-bottleneck .station-name { color: var(--neg); }
.staff-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.staff-row:last-child { border-bottom: 0; }
.log { font-size: var(--fs-sm); max-height: 220px; overflow-y: auto; display: flex; flex-direction: column-reverse; }
.log-item { display: grid; grid-template-columns: 62px 1fr; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--line); color: var(--ink-2); }
.log-item time { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); padding-top: 2px; }
.log-item.lost { color: var(--neg); }
.log-item.alert { color: var(--neg); font-weight: 650; }

@media (max-width: 1024px) {
  .service { grid-template-columns: 1fr; height: auto; }
  .floor-canvas-wrap { aspect-ratio: 1000 / 640; flex: none; }
  .side { overflow: visible; }
}

/* ---------- Evening report ---------- */
.report { max-width: 1240px; margin: 0 auto; padding: var(--s-6) var(--s-6) 120px; }
.report-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); }
.report-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); }
.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
@media (max-width: 960px) {
  .report { padding: var(--s-4) var(--s-4) 140px; }
  .span-8, .span-7, .span-6, .span-5, .span-4 { grid-column: span 12; }
}
.pnl td.pctcol, .pnl th.pctcol { width: 70px; }
.bench { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.bench .badge { margin-left: 4px; }
.chart { position: relative; width: 100%; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font-sans); font-size: 11px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.chart .axis-line { stroke: var(--line-strong); }
.chart .gridline { stroke: var(--grid); }
.chart .zero-line { stroke: var(--ink-3); stroke-dasharray: 3 3; }
.lost-bars { display: grid; gap: 8px; }
.lost-bar { display: grid; grid-template-columns: 150px 1fr 44px; gap: 10px; align-items: center; font-size: var(--fs-sm); }
.lost-bar .meter { height: 12px; }
.lost-bar .meter > span { background: var(--terracotta); }

/* ---------- Floating action for report/overlays ---------- */
.floating-cta { position: fixed; right: var(--s-6); bottom: var(--s-6); z-index: 35; }
@media (max-width: 720px) { .floating-cta { right: var(--s-4); bottom: var(--s-4); left: var(--s-4); } .floating-cta .btn { width: 100%; } }

/* ---------- Polish ---------- */
.actionbar-summary > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.table .cell-name { min-width: 128px; }
.menu-table td, .menu-table th { padding-left: 8px; padding-right: 8px; }
.menu-table .stepper input { width: 52px; }
.menu-table .cell-sub .glyph { width: 14px; height: 14px; }