/* Palta Zerlegerei – light theme for a shared iPad on the cutting floor, phone-first for management. */
:root {
  --brand: #d35400;
  --brand-dark: #a84300;
  --brand-soft: #fdf0e7;
  --ink: #1d2327;
  --ink-2: #4b5560;
  --muted: #6b7680;
  --line: #e3e6ea;
  --bg: #f4f5f7;
  --card: #ffffff;
  --ok: #1e8e3e;
  --ok-soft: #e6f4ea;
  --bad: #c62828;
  --bad-soft: #fdecea;
  --warn: #b26a00;
  --warn-soft: #fff4e0;
  --info: #1f5fa8;
  /* safety pyramid (paper checklist) */
  --safety-red: #d32f2f;
  --safety-orange: #ef6c00;
  --safety-yellow: #f9c400;
  --safety-blue: #1976d2;
  --demo: #ffd600;
  --radius: 16px;
  --radius-sm: 10px;
  --touch: 56px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 8px rgba(16, 24, 40, .06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 16px; }
@media (min-width: 700px) { html { font-size: 18px; } :root { --gutter: 24px; } }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-family: var(--font);
  line-height: 1.4; -webkit-tap-highlight-color: transparent;
  padding-bottom: env(safe-area-inset-bottom);
}
body.has-demo { padding-top: 64px; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
a { color: var(--brand-dark); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 3px solid rgba(211, 84, 0, .45); outline-offset: 2px; }
.muted { color: var(--muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.good { color: var(--ok); font-weight: 600; }
.center { text-align: center; }

/* ---------- top bar ---------- */
#top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--brand); color: #fff; padding: 10px var(--gutter); padding-top: max(10px, env(safe-area-inset-top));
  min-height: 64px; box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
body.has-demo #top { top: 64px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo { width: 40px; height: 40px; border-radius: 10px; flex: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.brand-text { min-width: 0; }
.brand-title { font-weight: 700; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub { font-size: .85rem; opacity: .92; }
.top-right { display: flex; align-items: center; gap: 8px; flex: none; }
.lang { display: inline-flex; background: rgba(255, 255, 255, .18); border-radius: 999px; padding: 3px; }
.lang button {
  min-width: 52px; min-height: 48px; border: 0; border-radius: 999px; background: transparent; color: #fff; font-weight: 700;
}
.lang button.on { background: #fff; color: var(--brand-dark); }
#top .btn.done { background: #fff; color: var(--brand-dark); border-color: #fff; }

/* ---------- layout ---------- */
#view { max-width: 1100px; margin: 0 auto; padding: var(--gutter); }
.screen { display: flex; flex-direction: column; gap: 16px; }
.card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px;
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.card > h2 { color: var(--brand-dark); }
.page-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bottom-actions { display: flex; justify-content: center; padding: 8px 0 24px; }
.bottom-actions .btn { min-width: 220px; }
.row-buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.note { background: var(--brand-soft); border-radius: var(--radius-sm); padding: 12px 14px; }
.note.warn { background: var(--warn-soft); color: var(--warn); font-weight: 600; }

/* ---------- buttons ---------- */
.btn {
  min-height: var(--touch); padding: 0 22px; border-radius: 12px; border: 2px solid var(--line); background: #fff;
  font-weight: 650; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:active { background: var(--brand-dark); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.block { width: 100%; }
.btn.save { min-height: 68px; font-size: 1.25rem; border-radius: var(--radius); }
.btn.done { min-height: 48px; }

/* ---------- start screen ---------- */
.tiles { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 8px; }
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 4vh; } }
.tile {
  min-height: 132px; border: 0; border-radius: 20px; padding: 20px; color: #fff; text-align: left;
  display: flex; align-items: center; gap: 18px; box-shadow: 0 4px 14px rgba(16, 24, 40, .14);
  transition: transform .08s ease;
}
.tile:active { transform: scale(.98); }
@media (min-width: 700px) {
  .tile { min-height: 260px; flex-direction: column; justify-content: center; text-align: center; gap: 22px; }
}
.tile-capture { background: linear-gradient(145deg, #e8630f, var(--brand-dark)); }
.tile-ranking { background: linear-gradient(145deg, #2f7dd1, #1b5a9e); }
.tile-leader { background: linear-gradient(145deg, #3d4a56, #232b33); }
.tile .icon { width: 56px; height: 56px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 700px) { .tile .icon { width: 84px; height: 84px; } }
.tile-label { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.foot-link { text-align: center; padding: 24px 0 8px; }
.foot-link a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; color: var(--muted); font-size: .95rem; }

/* ---------- overlays: PIN pad, dialogs ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 50; background: rgba(20, 24, 28, .55); display: flex; align-items: center;
  justify-content: center; padding: 16px; animation: fade .12s ease-out;
}
@keyframes fade { from { opacity: 0; } }
.sheet {
  background: #fff; border-radius: 22px; padding: 20px; width: 100%; max-width: 440px; max-height: 100%; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3); display: flex; flex-direction: column; gap: 14px;
}
.pinpad .sheet { max-width: 420px; }
@media (max-width: 480px) { .overlay.pinpad { padding: 0; } .pinpad .sheet { border-radius: 0; height: 100%; justify-content: center; } }
.pin-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pin-head h2 { color: var(--brand-dark); font-size: 1.3rem; }
.pin-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pin-field {
  border: 2px solid var(--line); border-radius: 14px; background: var(--bg); padding: 10px 12px; min-height: 76px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; text-align: left;
}
.pin-field.active { border-color: var(--brand); background: var(--brand-soft); }
.pin-label { font-size: .8rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.pin-value { font-size: 1.6rem; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.pin-value.empty { color: #b8bec4; }
.pin-dots { display: flex; gap: 10px; padding: 8px 0; }
.pin-dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink-2); }
.pin-dots i.on { background: var(--ink); border-color: var(--ink); }
.pin-msg { min-height: 1.4em; color: var(--bad); font-weight: 600; text-align: center; }
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.key {
  min-height: 72px; border-radius: 16px; border: 0; background: #eef0f3; font-size: 1.8rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.key:active { background: #dfe3e8; }
.key-fn { font-size: 1.5rem; color: var(--ink-2); }
.key-ok { background: var(--brand); color: #fff; font-size: 1.1rem; }
.key-ok:active { background: var(--brand-dark); }
.dialog h2 { font-size: 1.3rem; }
.dialog-body { display: flex; flex-direction: column; gap: 8px; }
.dialog-body p { margin: 0; }
.warn-line { background: var(--warn-soft); color: var(--warn); font-weight: 650; padding: 12px 14px; border-radius: var(--radius-sm); }
.dialog-buttons { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.dialog-buttons .btn { flex: 1 1 140px; }

/* ---------- login ---------- */
.login-card { max-width: 440px; width: 100%; margin: 4vh auto 0; }
.login-card label { font-weight: 600; font-size: .9rem; color: var(--ink-2); margin-bottom: -6px; }
.login-card input, .text-input {
  min-height: var(--touch); border: 2px solid var(--line); border-radius: 12px; padding: 0 14px; background: #fff; width: 100%;
}
.login-card input:focus, .text-input:focus { border-color: var(--brand); outline: none; }
.form-msg { color: var(--bad); font-weight: 600; min-height: 1.2em; }
.back-link { align-self: center; min-height: 48px; display: inline-flex; align-items: center; color: var(--muted); }

/* ---------- segmented control (tabs, shift switch) ---------- */
.segmented { display: inline-flex; background: #e6e8ec; border-radius: 14px; padding: 4px; gap: 4px; max-width: 100%; }
.segmented button {
  min-height: 48px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; font-weight: 650; color: var(--ink-2);
  flex: 1 1 auto; white-space: nowrap;
}
.segmented button.on { background: #fff; color: var(--brand-dark); box-shadow: var(--shadow); }

/* ---------- entry form ---------- */
.entry-form { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) {
  .entry-form { grid-template-columns: 1fr 1fr; align-items: start; }
  .entry-form > .note, .entry-form > .btn.save { grid-column: 1 / -1; }
}
.field-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.field-label { font-weight: 600; color: var(--ink-2); }
.total-row { border-top: 1px solid var(--line); padding-top: 12px; }
.hours-out { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.hours-out.bad { color: var(--bad); }
.stepper { display: inline-flex; align-items: stretch; gap: 6px; }
.step-btn {
  width: var(--touch); min-height: var(--touch); border-radius: 12px; border: 0; background: #eef0f3; font-size: 1.6rem;
  font-weight: 700; color: var(--ink); user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.step-btn:active { background: var(--brand-soft); color: var(--brand-dark); }
.step-input, .time-input {
  width: 96px; min-height: var(--touch); border: 2px solid var(--line); border-radius: 12px; text-align: center;
  font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; background: #fff; padding: 0 4px;
}
.time-input { width: 112px; }
.step-input:focus, .time-input:focus { border-color: var(--brand); outline: none; }
.step-input::-webkit-outer-spin-button, .step-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step-input { -moz-appearance: textfield; appearance: textfield; }
.stepper.big .step-btn { width: 64px; min-height: 64px; font-size: 1.9rem; }
.stepper.big .step-input { width: 104px; min-height: 64px; font-size: 1.6rem; }
.order-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 4px 0; }
.order-row + .order-row { border-top: 1px solid var(--line); padding-top: 14px; }
.order-name { display: flex; flex-direction: column; min-width: 0; }
.order-name span { font-size: 1.15rem; font-weight: 700; }
.order-name small { color: var(--muted); }
@media (max-width: 400px) {
  .step-input { width: 76px; }
  .time-input { width: 104px; }
  .stepper.big { width: 100%; }
  .stepper.big .step-input { flex: 1; }
}

/* ---------- saved screen ---------- */
.saved-screen {
  border: 0; background: var(--card); border-radius: 24px; box-shadow: var(--shadow); padding: 48px 24px; margin-top: 6vh;
  display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%;
}
.saved-check {
  width: 112px; height: 112px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 64px; line-height: 112px;
  font-weight: 700; animation: pop .25s ease-out;
}
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.saved-screen h1 { font-size: 2rem; }
.saved-line { font-size: 1.5rem; font-weight: 650; margin: 0; font-variant-numeric: tabular-nums; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; margin: 0 -4px; }
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); text-align: left; padding: 8px 6px; border-bottom: 2px solid var(--line); }
.table th.num { text-align: right; }
.table td { padding: 10px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
@media (max-width: 420px) {
  .table { font-size: .9rem; }
  .table th { font-size: .68rem; letter-spacing: 0; }
  .table td, .table th { padding-left: 3px; padding-right: 3px; }
  .table .wd { display: none; }
  .history { padding-left: 12px; padding-right: 12px; }
}

/* ---------- ranking ---------- */
.ranking { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .ranking { grid-template-columns: 1fr 1fr; align-items: start; } }
.range { margin-top: -6px; }
.rank-card { gap: 4px; }
.rank-card h2 { margin-bottom: 6px; }
.rank-head, .rank-row {
  display: grid; grid-template-columns: 2.2em minmax(0, 1fr) 3.6em 3.8em 4.6em; gap: 6px; align-items: center;
}
.rank-head { font-size: .75rem; text-transform: uppercase; color: var(--muted); letter-spacing: .03em; padding: 0 8px 4px; }
.rank-row { min-height: 52px; padding: 0 8px; border-radius: 10px; font-variant-numeric: tabular-nums; }
.rank-row:nth-child(odd) { background: #fafbfc; }
.rank-row.me { background: var(--brand-soft); box-shadow: inset 4px 0 0 var(--brand); font-weight: 700; }
.rank-no { font-weight: 700; color: var(--muted); }
.rank-row:nth-of-type(-n+3) .rank-no { color: var(--brand-dark); }
.rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strong { font-weight: 700; }
.tick { color: var(--ok); font-weight: 800; }
.reached .num:last-child { color: var(--ok); }

/* ---------- team leader checklist ---------- */
.leader { padding-bottom: 8px; }
.cl-head { gap: 14px; }
.cl-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cl-title h1 { font-size: 1.6rem; }
.cl-when { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; }
.cl-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cl-field .field-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cl-kw strong { min-height: 56px; display: inline-flex; align-items: center; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.date-input { width: auto; min-width: 11em; }
.badge { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px; border-radius: 999px; font-weight: 700; font-size: .9rem; }
.badge.open { background: var(--ok-soft); color: var(--ok); }
.badge.closed { background: #e8eaed; color: var(--ink); }
.note.lock { background: #eef1f4; color: var(--ink); display: flex; flex-direction: column; gap: 4px; border-left: 4px solid var(--ink-2); }

.cl-form { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cl-sec { padding: 0 16px 16px; overflow: hidden; }
.cl-sec > h2.cl-band {
  margin: 0 -16px 4px; padding: 10px 16px; background: var(--brand); color: #fff; font-size: 1.05rem;
  letter-spacing: .04em; text-transform: uppercase; text-align: center;
}
.sub-h { display: flex; align-items: center; gap: 8px; font-size: 1rem; color: var(--ink-2); }
.sub-label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--ink-2); font-size: .9rem; }
.count { min-width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; padding: 0 8px; }
.count.warn { background: var(--warn-soft); color: var(--warn); }
.count.ok { background: var(--ok-soft); color: var(--ok); }
.text-area {
  width: 100%; min-height: 96px; border: 2px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fff; resize: vertical;
}
.text-area:focus { border-color: var(--brand); outline: none; }
.text-input.invalid { border-color: var(--bad); background: var(--bad-soft); }
.field-msg { color: var(--bad); font-size: .85rem; font-weight: 600; min-height: 0; }
.field-msg:empty { display: none; }
.cl-form:disabled .text-input, .cl-form:disabled .text-area, .cl-form:disabled .step-input, .cl-form:disabled .qty-input {
  background: #f7f8fa; color: var(--ink); opacity: 1; -webkit-text-fill-color: var(--ink);
}
.cl-form:disabled .step-btn { opacity: .35; pointer-events: none; }

/* safety pyramid: each row's band is one trapezoid slice, together they form the paper's pyramid */
.safety { display: flex; flex-direction: column; }
.safety-row {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "pyr label step" "pyr remark remark";
  gap: 8px 14px; align-items: center; padding: 10px 0;
}
.safety-row + .safety-row { border-top: 1px solid var(--line); }
.pyr { grid-area: pyr; align-self: stretch; margin: -10px 0; min-height: 100%;
  clip-path: polygon(calc(50% - var(--i) * 12.5%) 0, calc(50% + var(--i) * 12.5%) 0,
    calc(50% + (var(--i) + 1) * 12.5%) 100%, calc(50% - (var(--i) + 1) * 12.5%) 100%); }
.safety-row:first-child .pyr { margin-top: 0; }
.safety-row:last-child .pyr { margin-bottom: 0; }
.pyr.red { background: var(--safety-red); }
.pyr.orange { background: var(--safety-orange); }
.pyr.yellow { background: var(--safety-yellow); }
.pyr.blue { background: var(--safety-blue); }
.safety-label { grid-area: label; font-weight: 650; min-width: 0; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
.safety-row .stepper { grid-area: step; }
.safety-remark { grid-area: remark; display: flex; flex-direction: column; gap: 4px; }
@media (min-width: 900px) {
  .safety-row { grid-template-columns: 96px minmax(10em, 1fr) auto minmax(0, 1.4fr); grid-template-areas: "pyr label step remark"; }
}

/* Personal */
.staff-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(3em, .5fr) minmax(3em, .5fr); gap: 10px 14px; align-items: center; }
.sg-h { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; text-align: center; }
.sg-h.num { text-align: right; }
.sg-group { display: flex; flex-direction: column; }
.sg-group strong { font-size: 1.2rem; }
.sg-group small { color: var(--muted); }
.big-num { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.neg { color: var(--bad); }
.missing { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.missing-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.missing-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px;
  background: var(--warn-soft); border-radius: 12px; min-width: 0;
}
.who { display: flex; flex-direction: column; min-width: 0; }
.who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who small { color: var(--muted); }
.btn.small { min-height: 48px; padding: 0 14px; font-size: .9rem; white-space: nowrap; flex: none; }
.all-in { color: var(--ok); font-weight: 600; margin: 0; }
.leader .who .other-shift { color: var(--ink-2); font-weight: 600; white-space: normal; }
.sheet .btn.ent-delete { margin-top: 12px; color: var(--bad); border-color: var(--bad); background: transparent; }

/* Mengen: product rows grouped by order */
.qty { display: flex; flex-direction: column; gap: 6px; }
.qty-row {
  display: grid; gap: 8px; align-items: center;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)) minmax(2.8em, .7fr) minmax(0, 1fr) minmax(2.8em, .7fr);
}
.qty-head { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 700; line-height: 1.15; }
.qty-head > span:not(:first-child):not(:last-child) { text-align: center; }
.qty-order { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.qty-order-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.qty-order-head strong { font-size: 1.05rem; }
.counted { color: var(--ink-2); font-size: .9rem; background: #eef1f4; border-radius: 999px; padding: 2px 10px; }
.qty-prod { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qty-input {
  width: 100%; min-width: 0; min-height: var(--touch); border: 2px solid var(--line); border-radius: 12px; text-align: center;
  font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; background: #fff; padding: 0 2px;
  -moz-appearance: textfield; appearance: textfield;
}
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input:focus { border-color: var(--brand); outline: none; background: var(--brand-soft); }
.qty-total, .qty-grand { font-weight: 700; font-variant-numeric: tabular-nums; }
.qty-total > span:not(.qty-prod), .qty-grand > span:not(.qty-prod) { text-align: center; }
.qty-total > .qty-diff, .qty-grand > .qty-diff, .qty-row > .qty-diff { text-align: right; }
.qty-total { padding-top: 4px; color: var(--ink-2); }
.qty-grand { border-top: 2px solid var(--ink); padding-top: 10px; font-size: 1.1rem; }
.qty-grand .qty-prod { white-space: normal; line-height: 1.15; }
.qty-diff { font-weight: 700; font-variant-numeric: tabular-nums; }
.qty-diff.pos { color: var(--ok); }
.dev-hint { display: none; background: var(--warn-soft); color: var(--warn); font-weight: 650; border-radius: var(--radius-sm); padding: 8px 12px; font-size: .9rem; }
.dev-hint.show { display: block; }

/* Anwesenheit (team leader, one tap per person) */
.attendance { display: flex; flex-direction: column; gap: 10px; }
.attendance:not(:empty) { padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.att-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.att-times { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.att-field { display: flex; flex-direction: column; gap: 4px; }
.att-times .time-input { width: 5.5em; min-height: 48px; text-align: center; font-size: 1.1rem; border: 1px solid var(--line); border-radius: 10px; }
.att-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.att-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; min-width: 0; }
.att-list li.on { background: var(--ok-soft); border-color: var(--ok); }
.att-toggle { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; min-height: 56px; padding: 0 4px; border: 0; background: none; text-align: left; font: inherit; color: inherit; }
.att-knob { flex: none; width: 46px; height: 28px; border-radius: 999px; background: #d5d9de; position: relative; transition: background .15s; }
.att-knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; }
.att-list li.on .att-knob { background: var(--ok); }
.att-list li.on .att-knob::after { transform: translateX(18px); }
.att-list .other-shift { color: var(--ink-2); font-weight: 600; white-space: normal; }
/* Einträge */
.entries { display: flex; flex-direction: column; gap: 6px; }
.ent-row {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, 1.4fr) auto; gap: 6px 14px; align-items: center;
  width: 100%; min-height: 60px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-align: left;
}
.ent-row:not(:disabled):active { background: var(--brand-soft); border-color: var(--brand); }
.ent-row:disabled { opacity: 1; }
.ent-who, .ent-time { display: flex; flex-direction: column; min-width: 0; }
.ent-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent-who small, .ent-time small { color: var(--muted); }
.ent-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.ent-pcs { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .9rem; min-width: 0; }
.pc b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.ent-status { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.chip { font-size: .75rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #eef1f4; color: var(--ink-2); white-space: nowrap; }
.chip.confirmed { background: var(--ok-soft); color: var(--ok); }
.chip.corrected { background: var(--warn-soft); color: var(--warn); }

/* sticky save / close bar */
.cl-bar {
  position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 calc(-1 * var(--gutter)); padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: rgba(244, 245, 247, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--line);
}
.cl-bar .btn.primary { min-height: 60px; font-size: 1.1rem; }
.save-ind {
  border: 0; background: transparent; font-weight: 650; color: var(--muted); min-height: 48px; padding: 0 4px; text-align: left;
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
}
.save-ind:disabled { opacity: 1; cursor: default; }
.save-ind::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.save-ind.idle::before, .save-ind.closed::before { display: none; }
.save-ind.saved { color: var(--ok); }
.save-ind.pending, .save-ind.saving { color: var(--warn); }
.save-ind.saving::before { animation: blink .8s ease-in-out infinite alternate; }
@keyframes blink { to { opacity: .2; } }
.save-ind.failed { color: #fff; background: var(--bad); border-radius: 12px; padding: 0 14px; text-decoration: none; cursor: pointer; }

/* dialogs of the checklist */
.sheet.wide { max-width: 640px; }
.sheet.wide .entry-form { grid-template-columns: 1fr; }
.sheet.wide .entry-form .card { box-shadow: none; border: 1px solid var(--line); }
.close-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; margin: 0; padding: 12px 14px; background: var(--bg); border-radius: var(--radius-sm); }
.close-sum dt { color: var(--ink-2); }
.close-sum dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.dlg-label { font-weight: 650; margin-bottom: -4px; }
.small { font-size: .85rem; margin: 0; }

@media (max-width: 600px) {
  .cl-sec { padding: 0 12px 14px; }
  .cl-sec > h2.cl-band { margin: 0 -12px 4px; }
  .cl-title h1 { font-size: 1.3rem; }
  .cl-when { gap: 10px; }
  .cl-when .cl-field:first-child { flex: 1 1 100%; }
  .date-input { width: 100%; }
  .safety-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px 10px; }
  .safety-row .step-input { width: 60px; }
  .safety-row .step-btn { width: 48px; }
  .staff-grid { gap: 8px; grid-template-columns: minmax(0, 1fr) auto minmax(2.2em, .4fr) minmax(2.4em, .4fr); }
  .staff-grid .step-input { width: 56px; }
  .staff-grid .step-btn { width: 48px; }
  .big-num { font-size: 1.2rem; }
  .qty-row { gap: 4px; grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr)) minmax(2.4em, .7fr) minmax(0, 1fr) minmax(2.4em, .7fr); }
  .qty-head { font-size: .62rem; letter-spacing: 0; }
  .qty-input { font-size: 1.05rem; border-radius: 10px; }
  .ent-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who time" "pcs status"; }
  .ent-who { grid-area: who; } .ent-time { grid-area: time; text-align: right; } .ent-pcs { grid-area: pcs; } .ent-status { grid-area: status; }
  .cl-bar .btn.primary { padding: 0 14px; font-size: 1rem; }
  .missing-list { grid-template-columns: minmax(0, 1fr); }
  .att-list { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  #top, .cl-bar, .demo-bar { display: none; }
}

/* ---------- management: dashboard, employee days, shift list (task 12) ---------- */
:root {
  /* chart roles (dataviz reference palette, light): categorical slots 1/2 for the two lines, status good/critical for ± */
  --viz-rev: #2a78d6;
  --viz-cost: #eb6834;
  --viz-pos: #0ca30c;
  --viz-neg: #d03b3b;
  --viz-grid: #e1e0d9;
  --viz-axis: #c3c2b7;
  --viz-muted: #898781;
  --viz-surface: #ffffff;
  --ok-text: #006300;
}
.dash { padding-bottom: 8px; }
.dash-body { display: flex; flex-direction: column; gap: 14px; transition: opacity .2s; }
.dash .loading { opacity: .55; }
.stand.stale { color: #ffe0c2; font-weight: 700; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sec-head h2 { color: var(--ink); font-size: 1.1rem; }

/* period bar */
.period-bar { display: flex; flex-direction: column; gap: 8px; }
.period-tabs { width: 100%; }
.period-tabs button { min-height: 44px; }
.pb-nav { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 6px;
  background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 4px; }
.pb-step { min-height: 44px; border: 0; border-radius: 10px; background: transparent; font-size: 1.8rem; line-height: 1; color: var(--ink-2); padding: 0 0 4px; }
.pb-step:not(:disabled):active { background: var(--brand-soft); color: var(--brand-dark); }
.pb-step:disabled { opacity: .25; }
.pb-label { border: 0; background: transparent; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 10px; padding: 0 6px; line-height: 1.15; }
.pb-main { font-weight: 750; font-size: 1.05rem; }
.pb-sub { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pb-label:not(.current) .pb-main::after { content: ' ↺'; color: var(--brand); font-weight: 600; }
.crew-sel, .sort-sel { min-height: 44px; border: 2px solid var(--line); border-radius: 12px; background: #fff; padding: 0 10px; max-width: 100%; }
@media (min-width: 700px) {
  .period-bar { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .period-tabs { width: auto; min-width: 340px; }
  .pb-nav { flex: 0 1 360px; }
}

/* KPI tiles: 2 x 3 on phones, 3 x 2 from 700 px */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kpis.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .kpis.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi {
  background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 11px 13px 12px; min-width: 0;
  display: flex; flex-direction: column; gap: 2px; border: 1px solid transparent;
}
.kpi-label { font-size: .78rem; font-weight: 650; color: var(--muted); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-value { display: flex; align-items: baseline; gap: 5px; min-width: 0; color: var(--ink); }
.kpi-num { font-size: 1.6rem; font-weight: 720; letter-spacing: -.01em; line-height: 1.15; white-space: nowrap; }
.kpi-unit { font-size: .72rem; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.kpi-sub { font-size: .8rem; font-weight: 650; color: var(--ink-2); }
.kpi.neg-text .kpi-num { color: var(--bad); }
.kpi.ok-text .kpi-num { color: var(--ok-text); }
.kpi.diff-tile.neg { background: var(--bad-soft); border-color: #f6c9c4; }
.kpi.diff-tile.neg .kpi-num, .kpi.diff-tile.neg .kpi-sub { color: var(--bad); }
.kpi.diff-tile.pos { background: var(--ok-soft); border-color: #bfe3c9; }
.kpi.diff-tile.pos .kpi-num, .kpi.diff-tile.pos .kpi-sub { color: var(--ok-text); }
@media (min-width: 700px) { .kpi { padding: 16px 18px; } .kpi-num { font-size: 2rem; } .kpi-label { font-size: .85rem; } }
@media (max-width: 360px) { .kpi-num { font-size: 1.35rem; } }

/* facts under the tiles */
.facts { display: flex; flex-wrap: wrap; gap: 6px; }
.fact { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; font-size: .8rem; font-weight: 600;
  color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fact.ok { border-color: #bfe3c9; color: var(--ok-text); background: var(--ok-soft); }
.fact.warn { border-color: #f3d39b; color: var(--warn); background: var(--warn-soft); }
.banner { display: flex; gap: 12px; align-items: center; border-radius: 14px; padding: 12px 14px; font-weight: 700; }
.banner.bad { background: var(--bad); color: #fff; box-shadow: 0 4px 14px rgba(198, 40, 40, .25); }
.banner-ico { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--bad); display: grid; place-items: center; font-weight: 900; }
.empty-note { align-items: center; }
.empty-note p { margin: 0; }

/* trend chart */
.trend { display: flex; flex-direction: column; gap: 8px; }
.trend-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8rem; color: var(--ink-2); }
.trend-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.trend-legend .lkey { width: 16px; height: 4px; }
.trend-legend .lkey line { stroke-width: 2.5; stroke-linecap: round; }
.lkey.k-rev line { stroke: var(--viz-rev); }
.lkey.k-cost line { stroke: var(--viz-cost); }
.k-bar { width: 8px; height: 10px; border-radius: 2px; display: inline-block; }
.k-bar.pos { background: var(--viz-pos); }
.k-bar.neg { background: var(--viz-neg); margin-left: -4px; }
.trend-stage { position: relative; }
.trend-plot { width: 100%; height: 180px; }
.trend-svg { display: block; width: 100%; height: 180px; touch-action: pan-y; }
.trend-svg:focus { outline: none; }
.trend-svg:focus-visible { outline: 3px solid rgba(211, 84, 0, .45); outline-offset: 2px; border-radius: 6px; }
.trend-svg .grid { stroke: var(--viz-grid); stroke-width: 1; }
.trend-svg .axis { stroke: var(--viz-axis); stroke-width: 1; }
.trend-svg .ylab, .trend-svg .xlab { fill: var(--viz-muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.trend-svg .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend-svg .ln.rev { stroke: var(--viz-rev); }
.trend-svg .ln.cost { stroke: var(--viz-cost); }
.trend-svg .bar.pos { fill: var(--viz-pos); }
.trend-svg .bar.neg { fill: var(--viz-neg); }
.trend-svg .bar { transition: opacity .12s; }
.trend-svg .bar.dim { opacity: .35; }
.trend-svg .cross { stroke: var(--ink-2); stroke-width: 1; }
.trend-svg .dot { stroke: var(--viz-surface); stroke-width: 2; }
.trend-svg .dot.rev { fill: var(--viz-rev); }
.trend-svg .dot.cost { fill: var(--viz-cost); }
.trend-svg .hit { fill: transparent; cursor: crosshair; }
.trend-tip {
  position: absolute; top: 0; left: 0; z-index: 5; min-width: 150px; pointer-events: none; opacity: 0; transition: opacity .12s;
  background: #fff; border: 1px solid rgba(11, 11, 11, .1); border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 24, 40, .16);
  padding: 8px 10px; font-size: .8rem; display: flex; flex-direction: column; gap: 3px;
}
.trend-tip.show { opacity: 1; }
.tt-date { font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.tt-row { display: grid; grid-template-columns: 14px auto 1fr; align-items: center; gap: 6px; }
.tt-row strong { font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; }
.tt-row span { color: var(--ink-2); }
.tt-key { width: 12px; height: 2px; border-radius: 2px; background: var(--ink-2); }
.tt-key.rev { background: var(--viz-rev); }
.tt-key.cost { background: var(--viz-cost); }
.tt-key.bar { height: 8px; width: 6px; }
.tt-key.bar.pos { background: var(--viz-pos); }
.tt-key.bar.neg { background: var(--viz-neg); }
.tt-foot { color: var(--muted); font-size: .75rem; }
.trend-table summary { cursor: pointer; color: var(--ink-2); font-size: .85rem; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.table.compact td { padding: 6px; }

/* management tables: sortable, cards on phones */
.th-btn { border: 0; background: transparent; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; padding: 4px 0;
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.table th.num .th-btn { flex-direction: row; }
.sort-ind { font-size: .65rem; color: var(--brand-dark); }
.sort-ind:empty { display: none; }
.rtable tr.link { cursor: pointer; }
.rtable tbody tr.link:hover { background: #fafbfc; }
.rtable tbody tr.link:active { background: var(--brand-soft); }
.rtable tr.unassigned { color: var(--muted); }
.rtable tr.unassigned strong { font-weight: 600; font-style: italic; }
.rtable tfoot td { border-top: 2px solid var(--ink); font-weight: 700; padding-top: 10px; }
.cell-name { display: inline-flex; flex-direction: column; gap: 1px; min-width: 0; }
.cell-name .chip { align-self: flex-start; }
.ph-only { display: none; }
.dash .diff { font-weight: 700; }
.dash .diff.neg { color: var(--bad); }   /* plain .neg is the shared rule above */
.dash .diff.pos { color: var(--ok-text); }
.dash .tp.ok { color: var(--ok-text); font-weight: 700; }
.dash .chip.bad { background: var(--bad-soft); color: var(--bad); }
/* status chips of the shift list only (the checklist's entry chips keep their own colours) */
.shift-row .chip.open { background: var(--ok-soft); color: var(--ok); }
.shift-row .chip.closed { background: #e8eaed; color: var(--ink-2); }
.sort-bar { display: none; }
@media (min-width: 700px) {
  .dash .table td, .dash .table th { padding-left: 10px; padding-right: 10px; }
  .dash .table td { padding-top: 12px; padding-bottom: 12px; }
}
@media (max-width: 699px) {
  .sort-bar { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
  .sort-sel { flex: 1; min-width: 0; }
  .sort-dir { width: 44px; min-height: 44px; border: 2px solid var(--line); border-radius: 12px; background: #fff; font-size: .8rem; }
  .ph-only { display: block; color: var(--muted); font-size: .8rem; font-weight: 500; }
  .desk-only { display: none !important; }
  .rtable thead { display: none; }
  .rtable, .rtable tbody, .rtable tfoot { display: block; }
  .rtable tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 12px; margin-bottom: 8px;
    border: 1px solid var(--line); border-radius: 12px; background: #fff;
  }
  .rtable tr.link { box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
  .rtable tr.unassigned { background: #f7f8fa; }
  .rtable td { display: flex; flex-direction: column; padding: 0; border: 0; white-space: normal; text-align: left; min-width: 0; font-size: .95rem; }
  .rtable td.num { text-align: left; }
  .rtable td::before { content: attr(data-label); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rtable td:empty, .rtable td.c-title::before { display: none; }
  .rtable td.c-title { grid-column: 1 / 3; order: -2; justify-content: center; }
  .rtable td.c-key { grid-column: 3; order: -1; text-align: right; align-items: flex-end; }
  .rtable td.c-key .diff { font-size: 1.05rem; }
  .rtable tfoot tr { border: 2px solid var(--ink); background: var(--bg); }
  .rtable tfoot td { border-top: 0; padding-top: 0; }
  .rtable tr:last-child td { border-bottom: 0; }
}

/* safety & quality */
.sq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .sq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.pyramid { display: flex; flex-direction: column; }
.pyr-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 40px; }
.pyr-row + .pyr-row { border-top: 1px solid var(--line); }
.pyr-band { align-self: stretch;
  clip-path: polygon(calc(50% - var(--i) * 12.5%) 0, calc(50% + var(--i) * 12.5%) 0,
    calc(50% + (var(--i) + 1) * 12.5%) 100%, calc(50% - (var(--i) + 1) * 12.5%) 100%); }
.pyr-band.red { background: var(--safety-red); }
.pyr-band.orange { background: var(--safety-orange); }
.pyr-band.yellow { background: var(--safety-yellow); }
.pyr-band.blue { background: var(--safety-blue); }
.pyr-label { font-weight: 600; }
.pyr-n { font-size: 1.25rem; font-variant-numeric: tabular-nums; min-width: 1.5em; text-align: right; color: var(--muted); }
.pyr-n.hot { color: var(--ink); }
.notes { display: flex; flex-direction: column; gap: 8px; }
.notes p { margin: 0; }
.note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.note-list li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--bg); }
.note-when { font-size: .8rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.note-text { overflow-wrap: anywhere; }

.teaser { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 12px 14px; border: 1px dashed #cfd4da;
  border-radius: 14px; color: var(--muted); font-size: .88rem; }
.teaser strong { color: var(--ink-2); }

/* employee detail */
.emp-head { padding: 14px 16px; }
.emp-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.emp-rate { display: flex; flex-direction: column; align-items: flex-end; }
.emp-rate strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* shift list */
.shift-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.shift-row { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding: 6px 0; }
.shift-row:first-child { border-top: 0; }
.sr-main {
  flex: 1; min-width: 0; display: grid; grid-template-columns: 5.6em minmax(0, 1fr) 4.2em auto; align-items: center; gap: 10px;
  min-height: 56px; color: inherit; text-decoration: none; border-radius: 10px; padding: 4px 6px;
}
.sr-main:active { background: var(--brand-soft); }
.sr-date, .sr-crew, .sr-safety { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sr-date small, .sr-crew small, .sr-safety small { color: var(--muted); font-size: .78rem; }
.sr-date strong { font-variant-numeric: tabular-nums; }
.sr-crew > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-safety { align-items: center; }
.sr-safety strong { font-variant-numeric: tabular-nums; color: var(--muted); }
.sr-safety.hot strong { color: var(--safety-orange); }
.shift-row .reopen { flex: none; min-height: 44px; width: 10rem; padding: 0 10px; }
.sr-spacer { flex: none; width: 10rem; }
.sr-main .chip { justify-self: start; }
.ph-inline { display: none; }
@media (min-width: 700px) {
  .sr-main { grid-template-columns: 9em minmax(0, 1fr) 5em 9em; }
}
@media (max-width: 480px) {
  .shift-row { flex-wrap: wrap; gap: 0; }
  .sr-main { flex: 1 1 100%; grid-template-columns: 4.9em minmax(0, 1fr) auto; gap: 8px; padding: 6px 2px; }
  .sr-crew small { white-space: normal; }
  .tl-label { display: none; }
  .sr-main .sr-safety { display: none; }
  .ph-inline { display: inline; }
  .ph-inline.hot { color: var(--safety-orange); font-weight: 700; }
  .sr-date strong { white-space: nowrap; }
  .shift-row .reopen { width: auto; min-height: 40px; margin: 0 0 8px auto; font-size: .85rem; }
  .sr-spacer { display: none; }
}

/* management shell ("MIRA · Run Operations"): dark navy sidebar from 900 px, a navy top bar below.
   Scoped to pages that carry .mgmt-nav, so kiosk / employee / team-leader screens keep their look. */
:root {
  --navy: #0e1a33;
  --navy-2: #16264a;
  --navy-ink: #c9d3e6;
  --side-w: 232px;
  --ops-bg: #f3f5f9;
  --ops-line: #e4e8ef;
}
body:has(.mgmt-nav) { background: var(--ops-bg); }
.mgmt-nav { background: var(--navy); color: var(--navy-ink); z-index: 25; }
.mn-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.mn-mark { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
  background: linear-gradient(135deg, #ff8a3d, var(--brand)); color: #fff; flex: none; }
.mn-word { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.mn-word strong { font-size: 1.05rem; letter-spacing: .08em; }
.mn-word small { font-size: .7rem; color: var(--navy-ink); letter-spacing: .04em; white-space: nowrap; }
.mn-items { display: flex; gap: 4px; }
.nav-item {
  min-height: 44px; border: 0; background: transparent; display: flex; align-items: center; gap: 10px; color: var(--navy-ink);
  text-decoration: none; font-size: .88rem; font-weight: 600; border-radius: 10px; padding: 0 12px; white-space: nowrap; flex: none;
}
.nav-item span { overflow: hidden; text-overflow: ellipsis; }
.nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-item.on { background: var(--navy-2); color: #fff; box-shadow: inset 3px 0 0 #ff8a3d; }
.nav-item:active { background: rgba(255, 255, 255, .12); }
.nav-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible.nav-item, .mn-brand:focus-visible { outline-color: #ff8a3d; }

/* the top bar on management pages: white, quiet */
body:has(.mgmt-nav) #top { background: #fff; color: var(--ink); box-shadow: none; border-bottom: 1px solid var(--ops-line); }
body:has(.mgmt-nav) #top .logo { display: none; }
body:has(.mgmt-nav) #top .brand-sub { color: var(--muted); opacity: 1; }
body:has(.mgmt-nav) #top .stand.stale { color: var(--bad); }
body:has(.mgmt-nav) .lang { background: var(--ops-bg); border: 1px solid var(--ops-line); }
body:has(.mgmt-nav) .lang button { color: var(--ink-2); min-height: 36px; min-width: 42px; }
body:has(.mgmt-nav) .lang button.on { background: var(--navy); color: #fff; }
body:has(.mgmt-nav) #top .btn.done { background: #fff; color: var(--navy); border: 1px solid var(--ops-line); }
.user-chip { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--ink-2); min-width: 0; }
.uc-ini { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: .78rem; font-weight: 700; flex: none; }
.uc-name { max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 900px) {
  .mgmt-nav {
    position: fixed; left: 0; top: 0; bottom: 0; width: var(--side-w); display: flex; flex-direction: column; gap: 22px;
    padding: 20px 14px calc(16px + env(safe-area-inset-bottom));
  }
  body.has-demo .mgmt-nav { top: 64px; }
  .mn-brand { padding: 4px 6px 10px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .mn-items { flex-direction: column; flex: 1; }
  .mn-logout { margin-top: auto; }
  body:has(.mgmt-nav) #top, body:has(.mgmt-nav) #view { margin-left: var(--side-w); }
  body:has(.mgmt-nav) #view { max-width: none; padding: 20px 28px 32px; }
  body:has(.mgmt-nav) #view > .screen { max-width: 1320px; margin: 0 auto; }
  body:has(.mgmt-nav) #top { padding: 8px 28px; min-height: 64px; }
  body:has(.mgmt-nav) #top .brand-title { font-size: 1.05rem; }
  body:has(.mgmt-nav) #top { flex-wrap: wrap; row-gap: 8px; }
  body:has(.mgmt-nav) #top .brand { flex: none; }
  body:has(.mgmt-nav) #top .top-right { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
  /* period picker in the top bar */
  #top .period-bar { flex-direction: row; align-items: center; gap: 8px; flex-wrap: nowrap; }
  #top .period-tabs { min-width: 0; width: auto; }
  #top .period-tabs button { min-height: 36px; padding: 0 12px; font-size: .85rem; }
  #top .pb-nav { flex: 0 0 auto; width: 250px; box-shadow: none; border: 1px solid var(--ops-line); grid-template-columns: 38px minmax(0, 1fr) 38px; padding: 2px; }
  #top .pb-step, #top .pb-label { min-height: 38px; }
  #top .pb-main { font-size: .92rem; }
  #top .pb-sub { font-size: .7rem; }
  #top .crew-sel { min-height: 40px; font-size: .85rem; border-width: 1px; }
}
@media (max-width: 899px) {
  /* the sidebar collapses into a navy top bar: wordmark + a horizontally scrolling row of nav items */
  .mgmt-nav {
    position: fixed; top: 0; left: 0; right: 0; height: 56px; display: flex; align-items: center; gap: 12px;
    padding: 0 var(--gutter); box-shadow: 0 2px 8px rgba(14, 26, 51, .25);
  }
  body:has(.mgmt-nav) { padding-top: 56px; }
  body.has-demo .mgmt-nav { top: 64px; }
  body.has-demo:has(.mgmt-nav) { padding-top: 120px; }
  .mn-word small { display: none; }
  .mn-mark { width: 30px; height: 30px; }
  .mn-items { overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
  .mn-items::-webkit-scrollbar { display: none; }
  .nav-item { min-height: 40px; padding: 0 10px; font-size: .82rem; gap: 6px; }
  .nav-item.on { box-shadow: inset 0 -2px 0 #ff8a3d; }
  .nav-ico { width: 18px; height: 18px; }
  /* the white header sits above the navy bar and scrolls away; its period picker gets its own row */
  body:has(.mgmt-nav) #top { position: static; flex-wrap: wrap; row-gap: 8px; padding: 10px var(--gutter); min-height: 0; }
  body:has(.mgmt-nav) #top .top-right:has(.period-bar) { display: contents; }
  #top .period-bar { order: 10; flex: 1 1 100%; }
  #top .crew-sel { flex: 1 1 100%; }
  .uc-name { display: none; }
  body:has(.mgmt-nav) #top .lang { margin-left: auto; }
}
@media (max-width: 420px) { .mn-word { display: none; } }
@media print { .mgmt-nav, .period-bar { display: none; } }

/* ---------- toast, idle countdown ---------- */
#toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: 80;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; width: max-content; max-width: calc(100vw - 32px);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast { padding: 14px 20px; border-radius: 14px; background: var(--ink); color: #fff; font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.toast.ok { background: var(--ok); }
.toast.warn { background: var(--warn); }
.toast.error { background: var(--bad); }
.idle {
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%); z-index: 60; display: none; background: var(--bad);
  color: #fff; font-weight: 700; padding: 12px 20px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  max-width: calc(100vw - 32px); text-align: center;
}
body.has-demo .idle { top: 144px; }
.idle.show { display: block; }

/* ---------- demo bar ---------- */
.demo-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 64px; background: var(--demo); color: #3a3000;
  display: flex; align-items: center; gap: 10px; padding: 0 12px; font-size: .85rem; overflow-x: auto;
  white-space: nowrap; scrollbar-width: none;
}
.demo-bar::-webkit-scrollbar { display: none; }
.demo-buttons { display: flex; gap: 6px; }
.demo-bar button {
  min-height: 48px; border: 1px solid rgba(0, 0, 0, .25); border-radius: 10px; background: rgba(255, 255, 255, .6); padding: 0 12px;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.error-card { align-items: center; text-align: center; }

/* ---------- phone ---------- */
@media (max-width: 480px) {
  #top { min-height: 58px; }
  .logo { width: 34px; height: 34px; }
  .brand-title { font-size: 1.05rem; }
  .brand-sub { font-size: .78rem; }
  h1 { font-size: 1.3rem; }
  .page-title .segmented { width: 100%; }
  .bottom-actions .btn { width: 100%; }
  .rank-head, .rank-row { grid-template-columns: 1.8em minmax(0, 1fr) 3em 3.4em 4.2em; gap: 4px; font-size: .95rem; }
}

/* ---------- management: master data, PIN sheet, audit log (task 13). Everything is scoped under .master ---------- */
.master { padding-bottom: 8px; }
.master [hidden] { display: none !important; }   /* filtered rows: beats the card/grid display of rows */
.master .m-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.master .m-tabs button {
  min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-weight: 650;
  color: var(--ink-2); font-size: .92rem; box-shadow: var(--shadow);
}
.master .m-tabs button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.master .m-body { display: flex; flex-direction: column; gap: 16px; }
.master .m-head h2 { color: var(--ink); }
.master .m-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.master .m-actions .btn { text-decoration: none; color: inherit; }
.master .m-actions .btn.primary { color: #fff; }
.master .m-hint { color: var(--muted); font-size: .85rem; margin: 0; }
.master .m-tabnote { margin: 0; font-weight: 600; }
.master .m-search { max-width: 420px; }
.master .m-empty { margin: 0; }
.master .m-slot:empty { display: none; }
.master .chip.m-off { background: #eceef1; color: var(--muted); }
.master .chip.m-warnchip { background: var(--warn-soft); color: var(--warn); }
.master .chip.m-curchip { background: var(--ok-soft); color: var(--ok-text, var(--ok)); }
.master .m-yes { color: var(--ok); font-weight: 800; }
.master .m-no { color: var(--muted); }
.master .m-mono { font-variant-numeric: tabular-nums; font-weight: 600; }

/* list tables (cards below 700 px) */
.master .m-scroll { overflow-x: auto; }
.master .m-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.master .m-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); text-align: left;
  padding: 8px 10px; border-bottom: 2px solid var(--line); white-space: nowrap; }
.master .m-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.master .m-table th.num, .master .m-table td.num { text-align: right; }
.master .m-table th.center, .master .m-table td.center { text-align: center; }
.master .m-table tr:last-child td { border-bottom: 0; }
.master .m-table tr.link { cursor: pointer; }
.master .m-table tbody tr.link:hover { background: #fafbfc; }
.master .m-table tr.m-inactive td { color: var(--muted); }
.master .m-open { border: 0; background: transparent; padding: 4px 0; min-height: 40px; text-align: left; display: inline-flex; flex-direction: column;
  justify-content: center; color: var(--ink); }
.master .m-open strong { color: var(--brand-dark); }
.master tr.m-inactive .m-open strong { color: var(--muted); }
.master .m-open small { color: var(--muted); font-size: .78rem; font-weight: 500; }
.master .m-pact { text-align: right; white-space: nowrap; }
@media (max-width: 699px) {
  .master .m-table thead { display: none; }
  .master .m-table, .master .m-table tbody { display: block; }
  .master .m-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 10px 12px; margin-bottom: 8px;
    border: 1px solid var(--line); border-radius: 12px; background: #fff; }
  .master .m-table tr.m-inactive { background: #f7f8fa; }
  .master .m-table td { display: flex; flex-direction: column; padding: 0; border: 0; min-width: 0; text-align: left; overflow-wrap: anywhere; }
  .master .m-table td.num, .master .m-table td.center { text-align: left; align-items: flex-start; }
  .master .m-table td::before { content: attr(data-label); font-size: .66rem; font-weight: 700; text-transform: uppercase; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .master .m-table td.c-title { grid-column: 1 / -1; order: -1; }
  .master .m-table td.c-title::before, .master .m-table td.m-flag::before, .master .m-table td.m-pact::before { display: none; }
  .master .m-table td.m-flag:empty { display: none; }
  .master .m-table td.m-flag, .master .m-table td.m-pact { grid-column: 1 / -1; align-items: flex-start; }
  .master .m-table td.desk-col { display: none; }
  .master .m-open { min-height: 44px; }
}

/* inline editor */
.master .m-editor { border: 2px solid var(--brand); scroll-margin-top: 140px; }
.master .m-ed-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.master .m-ed-head h2 { color: var(--brand-dark); overflow-wrap: anywhere; }
.master .m-ed-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.master .m-ed-buttons .btn { flex: 1 1 140px; max-width: 220px; }
.master .m-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 16px; }
@media (min-width: 700px) { .master .m-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .master .m-field.wide { grid-column: 1 / -1; } }
.master .m-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.master .m-field > label { font-weight: 650; font-size: .88rem; color: var(--ink-2); }
.master .m-unit { color: var(--muted); font-weight: 600; }
.master .m-field .text-input { min-height: 48px; }
.master select.text-input { padding: 0 10px; }
.master .m-numin { font-variant-numeric: tabular-nums; }
.master .m-checkf { justify-content: center; }
.master .m-check { display: flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 600; cursor: pointer; }
.master .m-check input { width: 24px; height: 24px; accent-color: var(--brand); flex: none; margin: 0; }
.master .m-checks { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 12px 8px; margin: 0;
  display: flex; flex-wrap: wrap; gap: 0 20px; min-width: 0; }
.master .m-checks legend { font-weight: 650; font-size: .88rem; color: var(--ink-2); padding: 0 4px; }
.master .m-preview { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.master .m-collide[hidden] { display: none; }
.master .m-pin { border-top: 1px dashed var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.master .m-pin h3 { font-size: 1rem; }
.master .m-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.master .m-inline .m-form { flex: 1 1 200px; grid-template-columns: minmax(0, 1fr); }
.master .m-pin-out:empty { display: none; }
.master .m-pin-note { background: var(--ok-soft); color: var(--ok-text, var(--ok)); font-weight: 750; font-size: 1.1rem; padding: 12px 14px;
  border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; }

/* orders & prices */
.master .m-cust { gap: 10px; }
.master .m-order { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.master .m-order.m-inactive { opacity: .7; }
.master .m-order-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.master .m-order-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.master .m-order-title strong { font-size: 1.05rem; }
.master .m-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.master .m-prices { background: var(--bg); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }
.master .m-ptable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.master .m-ptable th { font-size: .7rem; text-transform: uppercase; color: var(--muted); text-align: left; padding: 4px 6px; }
.master .m-ptable th.num, .master .m-ptable td.num { text-align: right; }
.master .m-ptable td { padding: 4px 6px; border-top: 1px solid var(--line); }
.master .m-ptable tr.m-cur td { background: #fff; }
.master .m-ptable tr.m-cur td.num { color: var(--ok-text, var(--ok)); }
.master .m-ptable tr:not(.m-cur):not(.m-future) td { color: var(--muted); }
.master .m-ptable .m-pact-in { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.master .m-ptable .btn.small { min-height: 40px; padding: 0 10px; }
.master .m-noprice { margin: 0; color: var(--bad); font-weight: 650; }
.master .m-newprice { align-self: flex-start; }
@media (max-width: 480px) {
  .master .m-ptable { font-size: .88rem; }
  .master .m-ptable td, .master .m-ptable th { padding-left: 3px; padding-right: 3px; }
  .master .m-ptable .chip { display: none; }
  .master .m-ptable tr.m-cur td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
}

/* settings */
.master .m-settings { display: flex; flex-direction: column; }
.master .m-setting { display: flex; gap: 10px; align-items: flex-end; padding: 10px 0; border-top: 1px solid var(--line); }
.master .m-setting:first-child { border-top: 0; }
.master .m-setting .m-form { flex: 1; grid-template-columns: minmax(0, 1fr); }

/* PIN print sheet */
.master .m-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.master .m-toolbar .btn { text-decoration: none; color: inherit; }
.master .m-toolbar .btn.primary { color: #fff; }
.master .m-sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.master .m-pintable { width: 100%; border-collapse: collapse; }
.master .m-pintable th { text-align: left; font-size: .75rem; text-transform: uppercase; color: var(--muted); padding: 6px; border-bottom: 2px solid var(--ink); }
.master .m-pintable td { padding: 14px 6px 8px; border-bottom: 1px solid var(--line); vertical-align: bottom; }
.master .m-pinline { white-space: nowrap; font-weight: 700; }
.master .m-blank { display: inline-block; width: 5.5em; border-bottom: 2px solid var(--ink); height: 1.1em; vertical-align: bottom; }
@media (max-width: 480px) { .master .m-pintable th:nth-child(3), .master .m-pintable td:nth-child(3) { display: none; } .master .m-blank { width: 3.5em; } }

/* audit log */
.master .m-alist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.master .m-arow { border-top: 1px solid var(--line); }
.master .m-arow:first-child { border-top: 0; }
.master .m-arow-grid { display: grid; grid-template-columns: 9.5em minmax(6em, 1fr) 10em minmax(8em, 1.4fr) 4em auto; gap: 8px; align-items: center; padding: 8px 0; }
.master .m-ahead { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 700;
  border-bottom: 2px solid var(--line); padding-bottom: 6px; }
.master .m-at, .master .m-id { font-variant-numeric: tabular-nums; }
.master .m-at { font-weight: 600; }
.master .m-ent small { color: var(--muted); }
.master .m-ent, .master .m-user { min-width: 0; overflow-wrap: anywhere; }
.master .chip.m-act-create { background: var(--ok-soft); color: var(--ok-text, var(--ok)); }
.master .chip.m-act-update, .master .chip.m-act-correct { background: #e8f0fb; color: var(--info); }
.master .chip.m-act-pin_reset, .master .chip.m-act-save_manager, .master .chip.m-act-reopen { background: var(--warn-soft); color: var(--warn); }
.master .m-dbtn { min-height: 40px; }
.master .m-dbtn.on { background: var(--brand-soft); border-color: var(--brand); }
.master .m-detail { padding: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.master .m-detail[hidden] { display: none; }
.master .m-changed { margin: 0; font-weight: 650; color: var(--info); overflow-wrap: anywhere; }
.master .m-json { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.master .m-json h3 { font-size: .75rem; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.master .m-json pre { margin: 0; background: var(--bg); border-radius: var(--radius-sm); padding: 10px; font-size: .8rem; line-height: 1.35;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow: auto; }
@media (max-width: 699px) {
  .master .m-ahead { display: none; }
  .master .m-arow-grid { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "at btn" "act btn" "ent ent" "user id"; gap: 4px 10px; padding: 10px 0; }
  .master .m-at { grid-area: at; } .master .m-act { grid-area: act; } .master .m-ent { grid-area: ent; }
  .master .m-user { grid-area: user; color: var(--muted); font-size: .85rem; } .master .m-id { grid-area: id; color: var(--muted); font-size: .85rem; text-align: right; }
  .master .m-dbtn { grid-area: btn; }
  .master .m-json { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  body:has(.master) { padding: 0; background: #fff; }
  .master .m-toolbar, .master .m-tabs { display: none !important; }
  .master.m-pins .m-sheet { box-shadow: none; padding: 0; }
  .master .m-pintable td { padding: 18px 6px 8px; }
  .master .m-pintable tr { break-inside: avoid; }
  .master .m-pintable th:nth-child(3), .master .m-pintable td:nth-child(3) { display: table-cell !important; }
  .master .m-blank { width: 8em !important; }
  body:has(.master) #view { max-width: none; padding: 0; }
  body:has(.master) #toast, body:has(.master) .idle { display: none !important; }
}


/* ---------- dashboard body, Run Operations look (spec 2026-10-10-mira-dashboard-ui.md) ---------- */
:root {
  --b-safety: #d64545; --b-safety-soft: #fdecec;
  --b-quality: #7b4fd6; --b-quality-soft: #f1ecfc;
  --b-performance: #2a78d6; --b-performance-soft: #e8f1fc;
  --b-staff: #0f9488; --b-staff-soft: #e2f5f3;
  --b-cost: #c77700; --b-cost-soft: #fdf3e2;
  --b-digital: #3f51b5; --b-digital-soft: #eaedfa;
}
.ops .dash-body { gap: 16px; }
.ops .card { border: 1px solid var(--ops-line); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); border-radius: 14px; }
.site-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 2px 2px 0; }
.site-head h1 { font-size: 1.45rem; font-weight: 750; color: var(--navy); letter-spacing: -.01em; }
.sh-cust { color: var(--ink-2); font-weight: 600; }
.sh-sub { color: var(--muted); font-size: .85rem; margin-top: 4px; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .site-head h1 { font-size: 1.2rem; } .sh-vs { display: block; } .sh-sep { display: none; } }

/* six KPI cards: 2 per row on phones, 3 from 700 px, 6 from 1280 px */
.ops-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .ops-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1680px) { .ops-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ops-card { background: var(--card); border: 1px solid var(--ops-line); border-radius: 14px; padding: 12px; min-width: 0;
  display: flex; flex-direction: column; gap: 4px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
@media (min-width: 700px) { .ops-card { padding: 16px; gap: 6px; } }
.oc-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.oc-label { font-size: .7rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-badge { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.badge-ico { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.b-safety { background: var(--b-safety-soft); color: var(--b-safety); }
.b-quality { background: var(--b-quality-soft); color: var(--b-quality); }
.b-performance { background: var(--b-performance-soft); color: var(--b-performance); }
.b-staff { background: var(--b-staff-soft); color: var(--b-staff); }
.b-cost { background: var(--b-cost-soft); color: var(--b-cost); }
.b-digital { background: var(--b-digital-soft); color: var(--b-digital); }
.oc-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 5px; min-width: 0; margin-top: 2px; }
.oc-num { font-size: 1.6rem; font-weight: 760; letter-spacing: -.02em; line-height: 1.1; color: var(--navy); white-space: nowrap;
  font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 700px) { .oc-num { font-size: 1.85rem; } }
@media (max-width: 360px) { .oc-num { font-size: 1.35rem; } }
.oc-unit { font-size: .72rem; font-weight: 700; color: var(--muted); letter-spacing: .03em; white-space: nowrap; }
.ops-card.money.neg .oc-num { color: var(--bad); }
.ops-card.money.pos .oc-num { color: var(--ok-text); }
.ops-card.is-warn .oc-num { color: var(--warn); }
.oc-hint { font-size: .75rem; color: var(--muted); line-height: 1.3; }
.oc-sub { display: flex; flex-direction: column; gap: 1px; font-size: .75rem; color: var(--ink-2); line-height: 1.35; font-variant-numeric: tabular-nums; }
.oc-sub span { overflow-wrap: anywhere; }
.oc-delta { margin-top: auto; padding-top: 6px; border-top: 1px dashed var(--ops-line); }
.delta { font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.delta-vs { font-weight: 500; color: var(--muted); }
.delta.good { color: var(--ok-text); }
.delta.bad { color: var(--bad); }
.delta.neutral { color: var(--info); }
.delta.flat, .delta.none { color: var(--muted); font-weight: 600; }

/* panels: 1 column on phones, 2 from 700 px, 3 from 1100 px */
.ops-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 700px) { .ops-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ops-panels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ops-panel { gap: 10px; }
.ops-panel .sec-head h2 { font-size: .98rem; }
.panel-empty { flex: 1; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--muted); font-size: .85rem; text-align: center; background: var(--ops-bg); border-radius: 10px; padding: 12px; }
.panel-empty strong { font-size: 1.4rem; color: var(--ink-2); }
.mini { display: flex; flex-direction: column; gap: 6px; }
.mini-legend { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: .74rem; color: var(--ink-2); }
.mini-legend span { display: inline-flex; align-items: center; gap: 5px; }
.mk { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.mk.ln-key { height: 3px; width: 12px; border-radius: 2px; }
.mini-svg { display: block; width: 100%; height: auto; }
.mini-svg .grid { stroke: var(--viz-grid); stroke-width: 1; }
.mini-svg .axis { stroke: var(--viz-axis); stroke-width: 1; }
.mini-svg .ylab, .mini-svg .xlab { fill: var(--viz-muted); font-size: 9.5px; font-variant-numeric: tabular-nums; }
.mini-svg .xlab.on { fill: var(--navy); font-weight: 700; }
.mini-svg .mark { fill: var(--navy); }
.mini-svg .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mini-svg .pt { stroke: #fff; stroke-width: 1.2; }
.s-red { fill: var(--safety-red); background: var(--safety-red); }
.s-orange { fill: var(--safety-orange); background: var(--safety-orange); }
.s-yellow { fill: var(--safety-yellow); background: var(--safety-yellow); }
.s-blue { fill: var(--safety-blue); background: var(--safety-blue); }
.q-quality { fill: var(--b-quality); background: var(--b-quality); }
.q-fault { fill: #c4b3ef; background: #c4b3ef; }
.l-downtime { stroke: var(--b-cost); fill: var(--b-cost); background: var(--b-cost); }
.mini-svg .ylab.l-downtime, .mini-svg .ylab.l-pph { stroke: none; }
.p-tocut { fill: #d6e4f7; background: #d6e4f7; }
.p-cut { fill: var(--b-performance); background: var(--b-performance); }
.l-pph { stroke: var(--b-staff); fill: var(--b-staff); background: var(--b-staff); }
.mini-svg .ln.l-downtime, .mini-svg .ln.l-pph { fill: none; }

.staff-panel { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 16px; }
.donut { width: 120px; height: 120px; }
.d-track { fill: none; stroke: var(--ops-bg); stroke-width: 12; }
.d-val { fill: none; stroke: var(--b-staff); stroke-width: 12; stroke-linecap: round; }
.d-val.under { stroke: var(--warn); }
.d-num { font-size: 18px; font-weight: 760; fill: var(--navy); font-variant-numeric: tabular-nums; }
.d-sub { font-size: 10px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.sp-rows { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sp-row { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: .85rem; }
.sp-lab { font-weight: 700; color: var(--ink-2); }
.sp-bar, .cp-bar { height: 8px; border-radius: 4px; background: var(--ops-bg); overflow: hidden; }
.sp-bar i, .cp-bar i { display: block; height: 100%; border-radius: 4px; background: var(--b-staff); }
.sp-bar i.under { background: var(--warn); }
.sp-row strong, .cp-row strong { font-variant-numeric: tabular-nums; }
.sp-target { font-size: .8rem; color: var(--ink-2); }
.cost-panel { display: flex; flex-direction: column; gap: 12px; }
.cp-row { display: grid; grid-template-columns: 10em minmax(40px, 1fr) auto; align-items: center; gap: 10px; font-size: .85rem; }
.cp-lab { color: var(--ink-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-bar { height: 12px; }
.cp-bar i.rev { background: var(--viz-rev); }
.cp-bar i.cost { background: var(--viz-cost); }
.cp-diff { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; background: var(--ops-bg); }
.cp-diff span { font-weight: 600; color: var(--ink-2); }
.cp-diff strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.cp-diff small { color: var(--muted); font-weight: 600; margin-left: auto; }
.cp-diff.neg { background: var(--bad-soft); } .cp-diff.neg strong { color: var(--bad); }
.cp-diff.pos { background: var(--ok-soft); } .cp-diff.pos strong { color: var(--ok-text); }
.ops-panel .note-list { max-height: 260px; overflow-y: auto; }
.ops-panel .note-list li { background: var(--ops-bg); font-size: .85rem; }

/* status pills */
.pill { display: inline-flex; align-items: center; gap: 2px; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700;
  white-space: nowrap; background: #eef1f5; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pill.ok { background: var(--ok-soft); color: var(--ok-text); }
.pill.open { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.fn { font-weight: 600; }
.cell-name .pill { align-self: flex-start; }

/* tables as clean cards; wide tables scroll inside their card, never the page */
.ops .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ops .table th { font-size: .7rem; letter-spacing: .06em; color: var(--muted); background: #f8f9fb; }
.ops .table tbody tr:hover { background: #fafbfd; }
.ops-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 1700px) { .ops-pair { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } }
.ops-pair .ops-panel .table-wrap { max-height: 440px; overflow-y: auto; }
.ops-table { width: 100%; }
.ops-table td { white-space: nowrap; }
.ops-table a { font-weight: 700; color: var(--navy); }
.rtable td .pill { align-self: flex-start; }
@media (max-width: 480px) { .pill-time { display: none; } .ops-table td, .ops-table th { padding-left: 4px; padding-right: 4px; } }