/* ============================================================
   LKKZ / VLH — Premium operations UI (app only)
   Print report + Excel export are NOT restyled here.
   Print styles are preserved verbatim at the bottom of this file.
   ============================================================ */

:root {
  /* Shell / surfaces — neutral black (Vercel/Linear language) */
  --bg: #000000;
  --bg-2: #070707;
  --surface: #0a0a0a;
  --surface-2: #111111;
  --surface-3: #171717;
  --surface-hover: #1c1c1c;
  --inset: #0d0d0d;

  /* Borders */
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-soft: rgba(255, 255, 255, 0.08);

  /* Text */
  --text: #fafafa;
  --text-secondary: #d4d4d4;
  --text-muted: #a3a3a3;
  --text-faint: #737373;

  /* Brand / status */
  --primary: #e5484d;
  --primary-strong: #dc2626;
  --primary-hover: #f05055;
  --primary-press: #c21f1f;
  --primary-soft: rgba(229, 72, 77, 0.14);

  --amber: #f5b544;
  --amber-soft: rgba(245, 158, 11, 0.14);
  --success: #3fcf7f;
  --success-soft: rgba(34, 197, 94, 0.13);
  --warning: #f5b544;
  --warning-soft: rgba(217, 119, 6, 0.16);
  --risk: #fb923c;
  --risk-soft: rgba(234, 88, 12, 0.16);
  --critical: #f87171;
  --critical-soft: rgba(220, 38, 38, 0.16);
  --info: #60a5fa;
  --info-soft: rgba(59, 130, 246, 0.14);
  /* VLH: planowana obsada = niebieski, realna obsada = czerwony. */
  --staff-planned: #2563eb;
  --staff-real: #dc2626;

  /* Precise radius scale — less "AI dashboard" roundness */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius: 10px;
  --radius-pill: 999px;

  --font-sans: "Geist Variable", "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono Variable", "Geist Mono", "SF Mono", "Roboto Mono", ui-monospace, monospace;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 160ms;
  --duration-fast: 120ms;
  --duration-normal: 160ms;
  --duration-slow: 220ms;
}

/* ============ LIGHT THEME — full premium variant ============ */
html.theme-light {
  color-scheme: light;

  --bg: #f5f5f5;
  --bg-2: #fafafa;
  --surface: #ffffff;
  --surface-2: #f9f9fa;
  --surface-3: #f1f1f2;
  --surface-hover: #f1f1f2;
  --inset: #ffffff;

  --border: rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.16);
  --border-soft: rgba(0, 0, 0, 0.06);

  --text: #111111;
  --text-secondary: #3f3f46;
  --text-muted: #71717a;
  --text-faint: #a1a1aa;

  /* status colors darkened for legible text on light surfaces */
  --primary: #dc2626;
  --primary-strong: #dc2626;
  --primary-hover: #ef4444;
  --primary-press: #b91c1c;
  --primary-soft: rgba(220, 38, 38, 0.10);

  --amber: #b45309;
  --amber-soft: rgba(245, 158, 11, 0.14);
  --success: #16a34a;
  --success-soft: rgba(22, 163, 74, 0.12);
  --warning: #b45309;
  --warning-soft: rgba(217, 119, 6, 0.14);
  --risk: #ea580c;
  --risk-soft: rgba(234, 88, 12, 0.12);
  --critical: #dc2626;
  --critical-soft: rgba(220, 38, 38, 0.10);
  --info: #2563eb;
  --info-soft: rgba(37, 99, 235, 0.10);
  /* Ciemny motyw: jaśniejsze warianty dla kontrastu na ciemnym tle. */
  --staff-planned: #60a5fa;
  --staff-real: #f87171;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.12);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  background: var(--bg);
  color: var(--text);
  color-scheme: dark;
  transition: background-color var(--duration-slow) var(--ease), color var(--duration-slow) var(--ease);
  font-family: var(--font-sans);
  font-feature-settings: "cv01", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-width: 320px;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--bg);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button,
summary,
select,
input[type="date"] {
  cursor: pointer;
}

/* remove number spinners for a cleaner app feel */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

:focus-visible {
  outline: none;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.table-checkbox:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* ============ TOPBAR ============ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  align-items: center;
  background: color-mix(in srgb, var(--bg-2) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  display: flex;
  justify-content: space-between;
  min-height: 60px;
  padding: 10px max(20px, calc((100% - 1320px) / 2));
}

.brand {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.brand-mark {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  display: flex;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  height: 26px;
  justify-content: center;
  padding: 0 8px;
}

.brand h1 {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 2px 0 0;
}

.eyebrow {
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.topbar .eyebrow {
  color: var(--text-faint);
}

.save-state {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  display: flex;
  font-size: 12.5px;
  font-weight: 500;
  gap: 8px;
  padding: 6px 12px 6px 10px;
}

.save-state span:last-child {
  white-space: nowrap;
}

.save-dot {
  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--success-soft);
  height: 7px;
  width: 7px;
  flex: none;
}

main {
  margin: 0 auto;
  max-width: 1320px;
  padding: 20px 20px 56px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ============ CARD BASE ============ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ============ DATE / COMMAND BAR ============ */
.date-bar {
  align-items: center;
  background: var(--surface);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
}

.icon-button {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  display: inline-flex;
  font-size: 18px;
  height: 40px;
  justify-content: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  width: 40px;
}

.icon-button:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.icon-button:active {
  transform: scale(0.94);
}

.text-button {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-weight: 550;
  min-height: 40px;
  padding: 0 14px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.text-button:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

/* ============ Admin panel link (topbar) ============
   Dedicated class — the .text-button button styles don't reliably
   apply min-height to an inline <a>, so this guarantees a non-shrinking
   readable touch target with proper inline-flex centring. */
.admin-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
  min-height: 40px;
  padding: 0 14px;
  line-height: 1;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.admin-link:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.date-control {
  align-items: center;
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.date-control:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.date-control span {
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.date-control input {
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.day-meta {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.day-meta strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.day-badge {
  align-items: center;
  background: var(--info-soft);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: var(--radius-pill);
  color: var(--info);
  display: inline-flex;
  font-size: 11.5px;
  font-weight: 600;
  gap: 6px;
  padding: 4px 10px;
  white-space: nowrap;
}

.day-badge.weekend {
  background: var(--amber-soft);
  border-color: rgba(245, 181, 68, 0.28);
  color: var(--amber);
}

/* ============ MODE SEGMENT CONTROL ============ */
.mode-switch {
  align-items: center;
  background: var(--surface);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  padding: 8px 12px;
}

.mode-buttons {
  position: relative;
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
}

.mode-buttons::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease);
  z-index: 0;
}

.mode-buttons:has(button[data-mode="shift"].active)::before {
  transform: translateX(100%);
}

.mode-buttons button {
  position: relative;
  z-index: 1;
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  display: inline-flex;
  font-size: 13.5px;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  transition: color var(--dur) var(--ease);
  white-space: nowrap;
}

.mode-buttons button span {
  align-items: center;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  height: 20px;
  justify-content: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  width: 20px;
}

.mode-buttons button:hover {
  color: var(--text);
}

.mode-buttons button.active {
  color: var(--text);
}

.mode-buttons button.active span {
  background: var(--primary);
  border-color: transparent;
  color: #fff;
}

.mode-switch > p {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}

body[data-mode="shift"] .mode-prep-only,
body[data-mode="prep"] .mode-shift-only {
  display: none;
}

/* ============ HERO GRID ============ */
.hero-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}

/* ============ QUICK ENTRY PANEL ============ */
.quick-card {
  padding: 0;
  overflow: hidden;
}

.section-heading {
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 18px 20px;
}

.section-heading.compact {
  border-bottom: 0;
  padding: 18px 18px 12px;
}

.section-heading h2,
.quick-card .section-heading h2,
.section-heading.compact h2 {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 4px 0 0;
}

.section-heading p:not(.eyebrow),
.quick-card .section-heading p:not(.eyebrow) {
  color: var(--text-muted);
  font-size: 12.5px;
  margin: 4px 0 0;
}

.quick-card .eyebrow {
  color: var(--primary);
}

.timer-pill {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  display: inline-flex;
  flex: none;
  font-size: 11.5px;
  font-weight: 550;
  padding: 5px 12px;
  white-space: nowrap;
}

/* slot / hour command block */
.slot-row,
.quick-card .slot-row {
  align-items: stretch;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  padding: 18px 20px 0;
}

.slot-row label {
  align-items: flex-start;
  background: var(--inset);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
}

.slot-row label::before {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
}


.slot-row label > span {
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
}

.slot-row select {
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  padding: 0;
  position: relative;
  width: 100%;
}

.quick-card .slot-row select option {
  background: var(--surface-2);
  color: var(--text);
}

.period-info {
  align-items: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  padding: 12px 14px;
}

.period-info span,
.quick-card .period-info span {
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.period-info strong,
.quick-card .period-info strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

#quickForm {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px 20px;
}

.entry-step {
  padding-top: 16px;
}

.entry-step + .entry-step {
  border-top: 1px solid var(--border-soft);
  margin-top: 4px;
}

.entry-step-title,
.quick-card .entry-step-title {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  font-size: 12px;
  font-weight: 600;
  gap: 8px;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.entry-step-title b {
  align-items: center;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  height: 20px;
  justify-content: center;
  width: 20px;
}

/* ============ QUICK FIELDS ============ */
.quick-fields {
  display: grid;
  gap: 12px;
}

.quick-fields-primary {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}

.quick-fields label,
.quick-card .quick-fields label {
  align-items: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}

.quick-fields label > span {
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.quick-fields label:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.quick-fields input,
.quick-card .quick-fields input {
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 0;
  width: 100%;
}

.quick-fields input::placeholder {
  color: var(--text-faint);
  font-weight: 500;
}

/* main operational field: Realny GC */
.quick-fields label.field-primary {
  background: var(--inset);
  border-color: var(--border-strong);
  padding: 14px 16px;
}

.quick-fields label.field-primary > span {
  color: var(--primary);
}

.quick-fields label.field-primary input {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.quick-fields label.field-primary input::placeholder {
  color: var(--text-faint);
}

.quick-fields label.field-primary:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* staff plan card */
.staff-plan-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
}

.staff-plan-card > span {
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.staff-plan-line {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.staff-plan-line strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.staff-plan-line button {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  font-weight: 550;
  padding: 6px 10px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.staff-plan-line button:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.staff-position-hint {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}

.staff-override {
  align-items: flex-end;
  border-top: 1px solid var(--border-soft);
  display: flex;
  gap: 10px;
  padding-top: 10px;
}

.staff-override label {
  flex: 1;
}

.staff-override label > span {
  color: var(--text-faint);
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.staff-override input {
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  padding: 9px 11px;
  width: 100%;
}

.staff-override input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
  outline: none;
}

.staff-override > button {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  font-weight: 550;
  padding: 9px 12px;
  transition: background var(--dur) var(--ease);
  white-space: nowrap;
}

.staff-override > button:hover {
  background: var(--surface-hover);
}

/* times grid */
.quick-fields-times {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.quick-fields-times.second-side-active {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.input-unit {
  align-items: baseline;
  display: flex;
  gap: 4px;
  width: 100%;
}

.input-unit em {
  color: var(--text-faint);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.quick-fields label.kitchen-field {
  background: var(--surface-2);
}

/* second-side toggle */
.quick-fields label.side-toggle,
.side-toggle {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: space-between;
  padding: 10px 14px;
}

.side-toggle:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.side-toggle > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.side-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.side-toggle-copy small {
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.side-toggle-copy strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.switch {
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  flex: none;
  height: 24px;
  position: relative;
  transition: background var(--dur) var(--ease);
  width: 42px;
}

.switch::after {
  background: #d6d9de;
  border-radius: 50%;
  content: "";
  height: 18px;
  left: 3px;
  position: absolute;
  top: 2px;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
  width: 18px;
}

.side-toggle > input:checked ~ .switch {
  background: var(--primary);
  border-color: transparent;
}

.side-toggle > input:checked ~ .switch::after {
  background: #fff;
  transform: translateX(18px);
}

.mfy-main-readout {
  align-items: center;
  background: var(--inset);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
}

.mfy-main-readout span {
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.mfy-main-readout strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* calculation strip */
.calculation-strip,
.quick-card .calculation-strip {
  align-items: center;
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 16px;
  padding: 14px 16px;
}

.calculation-strip > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.calculation-strip span,
.quick-card .calculation-strip span {
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.calculation-strip strong,
.quick-card .calculation-strip strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.calculation-strip strong.positive,
.quick-card .calculation-strip strong.positive {
  color: var(--success);
}

.calculation-strip strong.negative,
.quick-card .calculation-strip strong.negative {
  color: var(--critical);
}

.calculation-strip p,
.quick-card .calculation-strip p {
  color: var(--text-muted);
  flex: 1 1 100%;
  font-size: 12px;
  margin: 0;
}

/* form actions */
.form-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
}

.button {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  display: inline-flex;
  font-size: 13.5px;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.button:active {
  transform: translateY(1px);
}

.button-primary {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-strong) 100%);
  border: 1px solid var(--primary-press);
  box-shadow: 0 4px 14px rgba(229, 72, 77, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: #fff;
  font-weight: 650;
}

.button-primary:hover {
  background: linear-gradient(180deg, var(--primary-hover) 0%, var(--primary) 100%);
  box-shadow: 0 6px 18px rgba(229, 72, 77, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.form-actions .button-primary {
  flex: 1 1 auto;
  min-height: 48px;
  font-size: 15px;
}

.button-primary b {
  align-items: center;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  height: 20px;
  justify-content: center;
  width: 20px;
}

/* success flash after save */
.button-primary.saved {
  animation: saveFlash 700ms var(--ease);
}

@keyframes saveFlash {
  0% { box-shadow: 0 0 0 0 var(--success-soft); }
  35% { box-shadow: 0 0 0 6px var(--success-soft); background: linear-gradient(180deg, var(--success) 0%, #22a35e 100%); border-color: #1e8a4f; }
  100% { box-shadow: 0 4px 14px rgba(229, 72, 77, 0.28); }
}

.clear-link {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 550;
  padding: 8px 6px;
  transition: color var(--dur) var(--ease);
}

.clear-link:hover {
  color: var(--text);
}

/* ============ PROGRESS PANEL ============ */
.progress-card {
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 6px 18px 18px;
  position: sticky;
  top: 76px;
}

.progress-number {
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.progress-track {
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  height: 8px;
  overflow: hidden;
  width: 100%;
}

.progress-track span {
  background: linear-gradient(90deg, var(--primary) 0%, var(--amber) 100%);
  border-radius: var(--radius-pill);
  display: block;
  height: 100%;
  transition: width 320ms var(--ease);
  width: 0;
}

.progress-card .stat-list,
.stat-list {
  display: grid;
  gap: 8px;
}

.stat-list > div {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  padding: 11px 14px;
}

.stat-list span {
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
}

.stat-list strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stat-list strong.positive {
  color: var(--success);
}

.stat-list strong.negative {
  color: var(--critical);
}

.stat-list strong.neutral {
  color: var(--text);
}

/* position insight card */
.progress-card .position-helper,
.position-helper {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
}

.position-helper > div {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.position-helper > div span {
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.position-helper > div strong {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.position-helper p {
  color: var(--text);
  font-size: 13px;
  margin: 0;
}

.position-helper p b {
  color: var(--text);
  font-weight: 650;
}

.position-helper small {
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1.45;
}

.progress-card .privacy-note,
.privacy-note {
  align-items: center;
  color: var(--text-faint);
  display: flex;
  font-size: 11.5px;
  gap: 8px;
  line-height: 1.4;
  margin: 0;
}

.privacy-note span {
  color: var(--success);
  font-size: 14px;
}

/* ============ DAY SUMMARY ============ */
.day-summary {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.summary-header {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}

.summary-header h2 {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 4px 0 0;
}

.summary-header > span {
  color: var(--text-muted);
  font-size: 12.5px;
}

.summary-header-side {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.summary-header-side > span {
  color: var(--text-muted);
  font-size: 12.5px;
}

.summary-range {
  align-items: flex-end;
  display: flex;
  gap: 8px;
}

.summary-range label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.summary-range span {
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.summary-range select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-weight: 550;
  min-height: 36px;
  padding: 0 10px;
}

/* summary stat cards */
.summary-totals {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.summary-totals > div {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
}

.summary-totals span {
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.summary-totals strong {
  color: var(--text);
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.summary-totals strong.positive {
  color: var(--success);
}

.summary-totals strong.negative {
  color: var(--critical);
}

/* summary columns */
.summary-columns {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}

.summary-columns section {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
}

.summary-columns h3 {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.01em;
  margin: 0 0 12px;
}

.summary-columns dl {
  display: grid;
  gap: 2px;
  margin: 0;
}

.summary-columns dl > div {
  align-items: center;
  border-top: 1px solid var(--border-soft);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 8px 0;
}

.summary-columns dl > div:first-child {
  border-top: 0;
}

.summary-columns dt {
  color: var(--text-muted);
  font-size: 12.5px;
}

.summary-columns dd {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  margin: 0;
  text-align: right;
}

/* auto comment */
.auto-comment {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
}

.auto-comment h3 {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  margin: 0 0 10px;
}

.auto-comment #summaryComments {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auto-comment #summaryComments p {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  padding-left: 16px;
  position: relative;
}

.auto-comment #summaryComments p::before {
  color: var(--primary);
  content: "›";
  font-weight: 700;
  left: 2px;
  position: absolute;
}

/* observation / missing / review shared boxes */
.observation-box,
.missing-box,
.review-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
}

.observation-box > div:first-child,
.missing-box > div:first-child,
.review-box > div:first-child {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.observation-box h3,
.missing-box h3,
.review-box h3 {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  margin: 0;
}

.observation-box > div:first-child span,
.missing-box > div:first-child span,
.review-box > div:first-child span {
  align-items: center;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  justify-content: center;
  min-width: 26px;
  padding: 2px 9px;
}

#observationMessage {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.45;
  margin: 0 0 10px;
}

/* observation alert cards */
#observationList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#observationList p {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-faint);
  border-radius: var(--radius-sm);
  display: grid;
  gap: 4px 12px;
  grid-template-columns: auto auto 1fr;
  margin: 0;
  padding: 12px 14px;
}

#observationList p > strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  grid-row: span 2;
}

#observationList p > span {
  color: var(--text);
  font-size: 13px;
  font-weight: 550;
  grid-column: 3;
}

#observationList small {
  color: var(--text-faint);
  font-size: 11.5px;
  grid-column: 2 / -1;
  line-height: 1.4;
}

#observationList p:has(.risk-badge.critical) {
  border-left-color: var(--critical);
}

#observationList p:has(.risk-badge.risk) {
  border-left-color: var(--risk);
}

#observationList p:has(.risk-badge.warning) {
  border-left-color: var(--warning);
}

/* missing / review lists */
#missingList,
#reviewList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#missingList p,
#reviewList p {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.4;
  margin: 0;
  padding: 10px 12px;
}

#missingList p strong,
#reviewList p strong {
  color: var(--text);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.compact-toggle {
  margin-top: 10px;
}

/* ============ DETAILS / COLLAPSIBLE SECTIONS ============ */
details.card {
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}

details.card[open] {
  border-color: var(--border-strong);
}

summary {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  list-style: none;
  padding: 18px 20px;
}

summary::-webkit-details-marker {
  display: none;
}

summary h2 {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 4px 0 0;
}

summary > div > span {
  color: var(--text-muted);
  display: block;
  font-size: 12.5px;
  margin-top: 4px;
}

summary:focus-visible {
  outline-offset: -2px;
}

.summary-actions {
  align-items: center;
  display: flex;
  gap: 12px;
}

.summary-actions > span:first-child {
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 550;
}

.chevron {
  color: var(--text-faint);
  font-size: 16px;
  transition: transform var(--dur) var(--ease);
}

details[open] .chevron {
  transform: rotate(180deg);
}

.details-body {
  animation: sectionOpen 220ms var(--ease);
  border-top: 1px solid var(--border);
  padding: 18px 20px 20px;
}

@keyframes sectionOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.inline-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.inline-toolbar p {
  color: var(--text-muted);
  font-size: 12.5px;
  margin: 0;
}

.button-quiet {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}

.button-quiet:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

/* prep card */
.prep-card summary .eyebrow,
.sheet-card summary .eyebrow {
  color: var(--text-faint);
}

.legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;
}

.legend span {
  align-items: center;
  color: var(--text-muted);
  display: inline-flex;
  font-size: 12px;
  gap: 6px;
}

.legend-dot {
  border-radius: 3px;
  height: 10px;
  width: 10px;
}

.legend-dot.plan {
  background: var(--info);
}

.legend-dot.live {
  background: var(--success);
}

.legend-dot.time {
  background: var(--amber);
}

/* ============ TABLES ============ */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

th,
td {
  border-bottom: 1px solid var(--border-soft);
  font-size: 12.5px;
  padding: 10px 12px;
  text-align: center;
  white-space: nowrap;
}

th {
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.03em;
  position: sticky;
  top: 0;
  z-index: 2;
  text-transform: uppercase;
}

th:first-child,
td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

th:first-child {
  z-index: 3;
}

th:last-child {
  border-right: 0;
}

td input {
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 7px 8px;
  text-align: center;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  width: 68px;
}

td input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
  outline: none;
}

td input:disabled,
.full-table td input:disabled {
  background: var(--surface);
  color: var(--text-faint);
  opacity: 0.6;
}

/* prep table */
.prep-table thead th {
  background: var(--surface-2);
}

.prep-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.015);
}

.prep-table tbody tr:hover td {
  background: var(--surface-hover);
}

.prep-table td:nth-child(5) input {
  font-weight: 700;
}

/* full table grouped header */
.full-table .group-row th {
  background: var(--surface-3);
  color: var(--text-muted);
}

.full-table .group-row th:first-child {
  z-index: 4;
}

.group-plan {
  color: var(--info) !important;
}

.group-live {
  color: var(--success) !important;
}

.group-time {
  color: var(--amber) !important;
}

.full-table td {
  border-bottom: 1px solid var(--border-soft);
}

.full-table tbody tr:nth-child(even) td:first-child {
  background: color-mix(in srgb, var(--surface-2) 96%, white 4%);
}

.full-table tbody tr:hover td:first-child {
  background: var(--surface-hover);
}

.full-table td .mfy-main-cell {
  margin: 0 auto;
}

/* calculated cells */
.calculated-cell {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  display: inline-flex;
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  justify-content: center;
  min-width: 40px;
  padding: 6px 8px;
}

.last-position-cell {
  color: var(--text-muted);
  font-size: 12px;
  max-width: 190px;
  white-space: normal;
}

.risk-cell small {
  color: var(--text-faint);
  display: block;
  font-size: 10px;
  margin-top: 2px;
  text-transform: uppercase;
}

.table-checkbox {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
}

.table-checkbox input {
  accent-color: var(--primary);
  height: 16px;
  width: 16px;
}

.table-checkbox span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 550;
}

/* ============ BADGES / PILLS ============ */
.risk-badge {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  display: inline-flex;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.01em;
  padding: 3px 9px;
  white-space: nowrap;
}

.risk-badge.ok {
  background: var(--success-soft);
  border-color: rgba(63, 207, 127, 0.25);
  color: var(--success);
}

.risk-badge.warning {
  background: var(--warning-soft);
  border-color: rgba(245, 181, 68, 0.28);
  color: var(--warning);
}

.risk-badge.risk {
  background: var(--risk-soft);
  border-color: rgba(251, 146, 60, 0.28);
  color: var(--risk);
}

.risk-badge.critical {
  background: var(--critical-soft);
  border-color: rgba(248, 113, 113, 0.3);
  color: var(--critical);
}

.status-stack {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}

.status-badge {
  align-items: center;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  display: inline-flex;
  font-size: 11px;
  font-weight: 600;
  gap: 5px;
  padding: 3px 9px;
  white-space: nowrap;
}

.status-badge::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  height: 6px;
  width: 6px;
}

.status-badge.complete {
  background: var(--success-soft);
  border-color: rgba(63, 207, 127, 0.25);
  color: var(--success);
}

.status-badge.partial {
  background: var(--amber-soft);
  border-color: rgba(245, 181, 68, 0.28);
  color: var(--amber);
}

.status-badge.empty {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--text-faint);
}

.row-warning {
  color: var(--amber);
  font-size: 13px;
}

.balance-pill {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  justify-content: center;
  min-width: 40px;
  padding: 3px 9px;
}

.balance-pill.positive {
  background: var(--success-soft);
  border-color: rgba(63, 207, 127, 0.22);
  color: var(--success);
}

.balance-pill.negative {
  background: var(--critical-soft);
  border-color: rgba(248, 113, 113, 0.24);
  color: var(--critical);
}

.balance-pill.neutral {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--text-muted);
}

/* ============ KPI ============ */
.kpi-card {
  padding: 0;
}

.kpi-head {
  border-bottom: 1px solid var(--border);
  padding: 18px 20px;
}

.kpi-head .eyebrow {
  color: var(--text-faint);
}

.kpi-head h2 {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 4px 0 0;
}

.kpi-head span {
  color: var(--text-muted);
  display: block;
  font-size: 12.5px;
  margin-top: 4px;
}

.kpi-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  padding: 18px 20px 20px;
}

.kpi-column {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
}

.kpi-column h3 {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.01em;
  margin: 0 0 12px;
}

.kpi-fields {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

.kpi-fields label {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 8px 10px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.kpi-fields label:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.kpi-fields label > span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 550;
}

.kpi-fields input {
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  max-width: 96px;
  text-align: right;
}

.kpi-fields input:focus {
  outline: none;
}

.kpi-fields input::placeholder {
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 500;
}

.kpi-fields .kpi-avgcheck {
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
  grid-column: 1 / -1;
}

.kpi-fields .kpi-avgcheck input {
  max-width: none;
  text-align: left;
  width: 100%;
}

.kpi-fields .kpi-avgcheck small {
  color: var(--text-faint);
  font-size: 11px;
}

/* ============ NOTES ============ */
.notes-card {
  padding: 18px 20px;
}

.notes-card label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notes-card label span {
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.notes-card textarea {
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 14px;
  min-height: 82px;
  padding: 12px 14px;
  resize: vertical;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  width: 100%;
}

textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
  outline: none;
}

/* ============ HISTORY ============ */
.history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.history-list p {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
}

.history-list strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.history-list span {
  color: var(--text-faint);
  font-size: 12px;
}

/* ============ FOOTER ACTIONS ============ */
.footer-actions {
  align-items: flex-start;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin-top: 8px;
  padding: 20px 4px 0;
}

.footer-actions > div {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.print-status-footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.print-status-footer strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.print-status-footer span {
  color: var(--text-faint);
  font-size: 12px;
}

.file-button {
  cursor: pointer;
}

.file-button input {
  display: none;
}

.import-status {
  align-self: center;
  color: var(--text-muted);
  font-size: 12px;
}

.button-print {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
}

.button-print:hover {
  background: var(--surface-hover);
}

.print-notes-toggle {
  align-items: center;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 12.5px;
  gap: 8px;
}

.print-notes-toggle input {
  accent-color: var(--primary);
  height: 16px;
  width: 16px;
}

.danger-link {
  background: transparent;
  border: 0;
  color: var(--text-faint);
  font-size: 12.5px;
  font-weight: 550;
  padding: 10px 4px;
  transition: color var(--dur) var(--ease);
}

.danger-link:hover {
  color: var(--critical);
}

/* ============ TOAST ============ */
.toast {
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  bottom: 24px;
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 550;
  left: 50%;
  opacity: 0;
  padding: 12px 18px;
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, 12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  z-index: 40;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 960px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .progress-card {
    position: static;
  }

  .summary-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  main {
    padding: 16px 14px 48px;
    gap: 14px;
  }

  .date-bar {
    gap: 8px;
  }

  .day-meta {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }

  .mode-switch {
    flex-direction: column;
    align-items: stretch;
  }

  .mode-buttons {
    width: 100%;
  }

  .slot-row,
  .quick-card .slot-row {
    grid-template-columns: 1fr;
  }

  .quick-fields-primary {
    grid-template-columns: 1fr;
  }

  .quick-fields-times,
  .quick-fields-times.second-side-active {
    grid-template-columns: 1fr 1fr;
  }

  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .kpi-fields {
    grid-template-columns: 1fr;
  }

  .summary-header-side {
    align-items: stretch;
    width: 100%;
  }

  #observationList p {
    grid-template-columns: auto 1fr;
  }

  #observationList p > strong {
    grid-row: auto;
  }

  #observationList p > span {
    grid-column: 1 / -1;
  }

  #observationList small {
    grid-column: 1 / -1;
  }

  /* larger touch targets on mobile */
  .quick-fields input,
  .staff-override input,
  td input {
    min-height: 24px;
  }

  .form-actions .button-primary {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .quick-fields-times,
  .quick-fields-times.second-side-active {
    grid-template-columns: 1fr;
  }

  .summary-totals {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   STAGE 3 additions — modal, toast action, save-state, footer,
   ghost button, monospaced numerics. App-only (not print).
   ============================================================ */

/* Monospaced technical numbers (Geist Mono) */
.quick-slot select,
#quickSlot,
.calculation-strip strong,
.progress-number,
.stat-list strong,
.balance-pill,
.calculated-cell,
td input[type="number"],
.full-table td,
.prep-table td,
.summary-totals strong,
#quickRequired,
#quickDifference,
#quickMfyMainValue {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* Ghost button (secondary action in quick panel) */
.button-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.button-ghost:hover {
  background: var(--surface-hover);
  color: var(--text);
  border-color: var(--border-strong);
}

/* Minimum touch targets on phones */
@media (max-width: 720px) {
  .button,
  .icon-button,
  input,
  select,
  .side-toggle,
  .file-button {
    min-height: 44px;
  }
}

/* ---- Save state (real states) ---- */
.save-state {
  gap: 8px;
}
.save-retry {
  background: var(--primary);
  border: none;
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
}
.save-retry:hover { background: var(--primary-hover); }
.save-state[data-state="saved"] .save-dot { background: var(--success); }
.save-state[data-state="saving"] .save-dot { background: var(--amber); }
.save-state[data-state="offline"] .save-dot { background: var(--text-faint); }
.save-state[data-state="error"] .save-dot { background: var(--primary); }

/* ---- Toast action ---- */
.toast {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.toast-action {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 12px;
  white-space: nowrap;
}
.toast-action:hover { background: rgba(255, 255, 255, 0.08); }

/* ---- Modal system ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.modal-overlay.show { opacity: 1; }
.modal {
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 22px;
  transform: translateY(8px) scale(0.99);
  transition: transform var(--dur) var(--ease);
}
.modal-overlay.show .modal { transform: translateY(0) scale(1); }
.modal-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: -0.01em;
}
.modal-head p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}
.modal-body {
  margin: 14px 0 18px;
  font-size: 13.5px;
  color: var(--text-secondary, var(--text-muted));
}
.modal-body p { margin: 0 0 8px; color: var(--text-muted); line-height: 1.5; }
.modal-warn {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  border: 1px solid rgba(229, 72, 77, 0.3);
  color: var(--text);
  font-weight: 500;
}
.import-preview {
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.import-preview > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--surface);
}
.import-preview dt { color: var(--text-muted); font-size: 12.5px; }
.import-preview dd {
  margin: 0;
  color: var(--text);
  font-weight: 600;
  font-size: 12.5px;
  font-family: var(--font-mono);
  text-align: right;
}
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.modal-button { min-height: 40px; }
.modal-button.primary {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: #fff;
}
.modal-button.primary:hover { background: var(--primary-hover); }
.modal-button.quiet {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text);
}
.modal-button.quiet:hover { background: var(--surface-hover); }
.modal-button.danger {
  background: transparent;
  border: 1px solid rgba(229, 72, 77, 0.4);
  color: var(--primary-hover);
}
.modal-button.danger:hover { background: var(--primary-soft); }

/* ---- Footer action hierarchy ---- */
.footer-groups {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  flex: 1 1 auto;
  min-width: 0;
}
.footer-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.footer-technical-group { opacity: 0.75; }
.footer-technical-group:hover { opacity: 1; }
.footer-technical-group .button-quiet { font-size: 12px; }

/* Primary emphasis depends on mode */
.action-import,
.action-export {
  border: 1px solid var(--border-strong);
  background: var(--surface-3);
  color: var(--text);
}
.action-import:hover,
.action-export:hover { background: var(--surface-hover); }

/* Prep mode: Import Excel is primary */
body[data-mode="prep"] .action-import {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
body[data-mode="prep"] .action-import:hover { background: var(--primary-hover); }

/* Shift mode: Export Excel is primary, Import is red outline */
body[data-mode="shift"] .action-export {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
body[data-mode="shift"] .action-export:hover { background: var(--primary-hover); }
body[data-mode="shift"] .action-import {
  background: transparent;
  border-color: rgba(229, 72, 77, 0.5);
  color: var(--primary-hover);
}
body[data-mode="shift"] .action-import:hover { background: var(--primary-soft); }

/* Keep wide toolbars/tables from forcing horizontal page scroll.
   Root cause: the wide .full-table must scroll inside its wrapper, and flex/grid
   descendants need min-width:0 so they don't shrink-wrap to content width. */
.footer-actions { max-width: 100%; }
.app-shell { max-width: 100%; overflow-x: clip; }
main { max-width: 1320px; overflow-x: clip; }
main > * { min-width: 0; max-width: 100%; }
.details-body { min-width: 0; max-width: 100%; }
.table-wrap { max-width: 100%; overflow-x: auto; }

/* ============================================================
   NEW COMPONENTS — theme switch, month view, VLH preview
   ============================================================ */

.topbar-controls {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
  flex-wrap: nowrap;
}

/* ============ Mobile topbar — no horizontal overflow ============
   On narrow screens (320 / 360 / 390 px) the topbar holds: brand +
   save-state (+ retry) + Admin + Wyloguj + theme switch. Wrapping the
   whole bar and the controls group keeps every element visible without
   forcing horizontal scroll. When "Ponów zapis" appears, controls may
   flow onto an extra row but never exceed the viewport width. */
@media (max-width: 480px) {
  .topbar {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 0;
    padding: 8px 14px;
  }

  .brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  .brand h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-controls {
    flex: 1 1 100%;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }

  .topbar-controls > * {
    flex: 0 0 auto;
    min-width: 0;
  }

  .save-state {
    min-width: 0;
  }

  .save-state span:last-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ---- Theme switch ---- */
.theme-switch { position: relative; }
.theme-trigger {
  font-size: 15px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
}
.theme-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  min-width: 168px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transform-origin: top right;
  animation: menu-pop var(--duration-fast) var(--ease);
}
@keyframes menu-pop {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.theme-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.theme-menu button:hover { background: var(--surface-hover); color: var(--text); }
.theme-menu button[aria-checked="true"] { color: var(--text); }
.theme-menu button[aria-checked="true"]::after {
  content: "✓";
  color: var(--info);
  font-size: 12px;
}

/* ---- VLH preview trigger ---- */
.vlh-open-button {
  margin-top: 10px;
  width: 100%;
  min-height: 40px;
}

/* ---- Wide modal (month + VLH) ---- */
.modal.modal-wide { max-width: 720px; }
.modal.modal-month { max-width: 560px; }

/* ---- Month view ---- */
.month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.month-title {
  font-size: 15px;
  font-weight: 650;
  color: var(--text);
  text-transform: capitalize;
}
.month-nav { display: flex; align-items: center; gap: 6px; }
.month-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.month-weekdays span {
  text-align: center;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.month-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.month-cell:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.month-cell:active { transform: scale(0.96); }
.month-cell.empty { visibility: hidden; }
.month-cell.today { border-color: var(--info); color: var(--text); }
.month-cell.selected { outline: 2px solid var(--info); outline-offset: -2px; }
.month-cell.active-day { box-shadow: inset 0 0 0 2px var(--primary); }
.month-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
}
.month-dot.none { background: var(--text-faint); opacity: 0.35; }
.month-dot.prepared { background: var(--info); }
.month-dot.partial { background: var(--amber); }
.month-dot.complete { background: var(--success); }
.month-dot.risk { background: var(--risk); }
.month-dot.critical { background: var(--critical); }

.month-preview {
  margin-top: 16px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.month-preview.empty { color: var(--text-muted); font-size: 13px; }
.month-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.month-preview-head strong { font-size: 14px; color: var(--text); text-transform: capitalize; }
.month-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
  margin-bottom: 14px;
}
.month-preview-grid > div { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.month-preview-grid dt, .month-preview-grid span:first-child { color: var(--text-muted); }
.month-preview-grid dd, .month-preview-grid strong { margin: 0; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.month-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  background: var(--surface-3);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.month-status-badge .dot { width: 7px; height: 7px; border-radius: 50%; }

/* ---- VLH preview modal ---- */
.vlh-context {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.vlh-context .chip {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  border: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
}
.vlh-hour-select {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.vlh-hour-select select {
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  min-height: 36px;
  padding: 0 10px;
  font-variant-numeric: tabular-nums;
}
.vlh-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 16px;
}
.vlh-metrics > div { background: var(--surface); padding: 10px 12px; }
.vlh-metrics span { display: block; font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.vlh-metrics strong { display: block; margin-top: 3px; font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.vlh-metrics strong.proj { color: var(--info); }
.vlh-metrics strong.real { color: var(--primary-hover); }
.vlh-diff-note {
  margin: 0 0 16px;
  padding: 10px 12px;
  background: var(--info-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.5;
}
.vlh-chart-toolbar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 2px;
  gap: 2px;
}
.segmented-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.segmented-btn:hover { color: var(--text); }
.segmented-btn.active { background: var(--surface-strong, var(--bg)); color: var(--text); box-shadow: 0 1px 0 rgba(0,0,0,0.04); }
.vlh-chart-wrap {
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  background: var(--surface);
}
.vlh-chart-wrap svg { display: block; width: 100%; height: auto; }
.vlh-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.vlh-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vlh-chart-legend i { width: 14px; height: 0; border-top-width: 2px; border-top-style: solid; display: inline-block; }

/* VLH metryki: kolor obsady planowanej (niebieski) i realnej (czerwony). */
.vlh-metrics strong.staff-planned { color: var(--staff-planned); }
.vlh-metrics strong.staff-real { color: var(--staff-real); }

/* Ostrzeżenie ≥144 kanapki przy zamkniętej drugiej stronie kuchni (amber). */
.sandwich-warning-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--radius-sm, 6px);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--warning);
  background: var(--warning-soft);
  border: 1px solid var(--warning);
}
.sandwich-warning-banner {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: var(--radius-md, 8px);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--warning);
  background: var(--warning-soft);
  border: 1px solid var(--warning);
}
.sandwich-warning-banner strong { color: var(--warning); }

.vlh-table-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius-md); }
table.vlh-threshold {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
table.vlh-threshold th, table.vlh-threshold td {
  padding: 7px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
table.vlh-threshold th { background: var(--surface-2); color: var(--text-muted); font-size: 10.5px; text-transform: uppercase; font-weight: 650; }
table.vlh-threshold tr.active-threshold td { background: var(--info-soft); color: var(--text); font-weight: 600; }
table.vlh-threshold tr.active-threshold td:first-child { box-shadow: inset 3px 0 0 var(--info); }

@media (max-width: 560px) {
  .vlh-metrics { grid-template-columns: repeat(2, 1fr); }
  .month-preview-grid { grid-template-columns: 1fr; }
  .modal.modal-wide, .modal.modal-month { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}



/* ============================================================
   PRINT — preserved verbatim. Do NOT restyle.
   ============================================================ */

.print-kpi {
  margin-top: 16px;
}

.print-kpi-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}

.print-kpi h3 {
  font-size: 12px;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.print-kpi dl {
  display: grid;
  gap: 3px;
}

.print-kpi dl > div {
  display: flex;
  font-size: 12px;
  justify-content: space-between;
}

.print-kpi dt {
  color: #444;
}

.print-kpi dd {
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.print-report {
  display: none;
}

.print-report-header {
  border-bottom: 2px solid #111;
  display: flex;
  justify-content: space-between;
  padding-bottom: 5mm;
}

.print-report-header h1 {
  font-size: 19pt;
  margin: 0;
}

.print-report-header p {
  font-size: 9pt;
  margin: 1mm 0 0;
}

.print-report-date {
  text-align: right;
}

.print-metrics {
  display: grid;
  gap: 3mm;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 5mm;
}

.print-metric {
  border: 1px solid #aaa;
  padding: 3mm;
}

.print-metric span {
  display: block;
  font-size: 7.5pt;
  text-transform: uppercase;
}

.print-metric strong {
  display: block;
  font-size: 15pt;
  margin-top: 1mm;
}

.print-details {
  display: grid;
  gap: 5mm;
  grid-template-columns: 1fr 1fr;
  margin-top: 5mm;
}

.print-details h2,
.print-readiness h2,
.print-observations h2,
.print-comments h2,
.print-notes h2 {
  border-bottom: 1px solid #aaa;
  font-size: 10pt;
  margin: 0 0 2mm;
  padding-bottom: 1mm;
}

.print-details dl {
  font-size: 8pt;
  margin: 0;
}

.print-details dl > div {
  display: flex;
  justify-content: space-between;
  padding: 1mm 0;
}

.print-details dd {
  font-weight: 700;
  margin: 0;
  text-align: right;
}

.print-comments,
.print-readiness,
.print-observations,
.print-notes {
  font-size: 8.5pt;
  margin-top: 5mm;
}

.print-readiness p {
  margin: 1mm 0;
}

.print-readiness ul {
  margin: 1mm 0 0 4mm;
  padding: 0;
}

.print-observations p {
  margin: 1mm 0;
}

.print-observations table {
  border-collapse: collapse;
  font-size: 7pt;
  margin-top: 2mm;
  width: 100%;
}

.print-observations th,
.print-observations td {
  border: 1px solid #777;
  padding: 1.2mm;
  text-align: left;
}

.print-comments p {
  margin: 1mm 0;
}

.print-notes-box {
  border: 1px solid #aaa;
  min-height: 16mm;
  padding: 3mm;
  white-space: pre-wrap;
}

.print-signature {
  font-size: 8pt;
  margin-left: auto;
  margin-top: 14mm;
  text-align: center;
  width: 65mm;
}

.print-signature::before {
  border-top: 1px solid #222;
  content: "";
  display: block;
  margin-bottom: 2mm;
}

.print-hourly {
  margin-top: 6mm;
  page-break-before: always;
}

.print-hourly h2 {
  font-size: 12pt;
  margin: 0 0 3mm;
}

.print-hourly table {
  border-collapse: collapse;
  font-size: 6.8pt;
  width: 100%;
}

.print-hourly th,
.print-hourly td {
  border: 1px solid #777;
  height: auto;
  padding: 1.2mm 1mm;
  text-align: center;
}

.print-hourly th {
  background: #e8e8e8 !important;
  border-radius: 0;
  color: #111;
  font-size: 6.5pt;
  letter-spacing: 0;
}

@media print {

  @page {
    size: A4 landscape;
    margin: 10mm;
  }

  html,
  body {
    background: white !important;
  }

  body.printing {
    color: #111;
    font-family: Arial, Helvetica, sans-serif;
  }

  body.printing .app-shell,
  body.printing .toast {
    display: none !important;
  }

  body.printing .print-report {
    display: block !important;
  }

  body.printing .print-report,
  body.printing .print-report * {
    box-shadow: none !important;
    color: #111;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  body.printing .print-report {
    background: white;
    border: 0;
    margin: 0;
    padding: 0;
  }

  /* --------------------------------------------------------------
     P0 FIX — the black hours column regression.
     The app's global rule `th:first-child, td:first-child` sets a
     dark theme surface + sticky positioning. That rule cascades into
     the print report tables (same element selectors), painting the
     first column (hours) with a dark background on paper.
     Neutralize the theme + sticky styles for every printed cell so
     the hours column (and all cells) print white with black text,
     independent of the active light/dark/system theme.
     -------------------------------------------------------------- */
  body.printing .print-report table th,
  body.printing .print-report table td,
  body.printing .print-report table th:first-child,
  body.printing .print-report table td:first-child {
    position: static !important;
    left: auto !important;
    top: auto !important;
    z-index: auto !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    border: 1px solid #777 !important;
    border-radius: 0 !important;
  }

  /* Table header cells keep a light grey fill for readability. */
  body.printing .print-report table thead th {
    background: #e8e8e8 !important;
    background-color: #e8e8e8 !important;
    color: #111 !important;
  }

  body.printing .print-report table th *,
  body.printing .print-report table td * {
    background: transparent !important;
    color: #000000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* ============= IMPORT OBSADY ============= */
.staffing-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.staffing-status-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: var(--surface);
}
.staffing-status-item span {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.staffing-status-item strong {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  color: var(--text-muted);
}
.staffing-status-item strong.ok { color: var(--text); }
.staffing-status-item small {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--text-faint);
}
.staffing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.staffing-note {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}
.staffing-warnings {
  border: 1px solid var(--warning, var(--border-strong));
  border-radius: var(--radius-md);
  padding: 8px 12px;
  margin-bottom: 12px;
  background: var(--surface);
}
.staffing-warnings p {
  margin: 2px 0;
  font-size: 12px;
  color: var(--text-muted);
}
.staffing-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.staffing-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.staffing-preview-table th,
.staffing-preview-table td {
  padding: 7px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
.staffing-preview-table thead th {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  background: var(--surface);
}
.staffing-preview-table tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 560px) {
  .staffing-status { grid-template-columns: 1fr; }
}

/* ---- Skan grafiku ---- */
.scan-consent p { margin: 0 0 10px; }
.scan-consent ul {
  margin: 0 0 14px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}
.scan-consent-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}
.button.is-disabled,
.button:disabled { opacity: 0.45; pointer-events: none; }

.scan-modal {
  width: min(680px, 94vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}
.scan-head h3 { margin: 0; font-size: 17px; }
.scan-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--text-muted); }
.scan-stage {
  position: relative;
  background: #000;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}
.scan-stage video {
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  display: block;
}
.scan-stage-mask { background: var(--surface-2); }
.scan-stage-mask canvas {
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
  display: block;
  touch-action: none;
  cursor: crosshair;
}
.scan-error {
  font-size: 12.5px;
  color: var(--danger, #ef4444);
  padding: 6px 2px;
}
.scan-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.scan-mask-hint {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}
.scan-loading {
  width: auto;
  min-width: 220px;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 28px 32px;
}
.scan-loading p { margin: 0; font-size: 13px; color: var(--text-secondary); }
.scan-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--border-strong);
  border-top-color: var(--text);
  margin: 0 auto;
  animation: scan-spin 0.8s linear infinite;
}
@keyframes scan-spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .scan-controls { justify-content: stretch; }
  .scan-controls .button { flex: 1 1 auto; }
}

/* ---------- Rozpoznane zmiany (edytor wierszy skanu) ---------- */
.scan-rows.modal { max-width: 860px; }
.scan-rows-wrap { max-height: 52vh; overflow: auto; }
.scan-rows-table th, .scan-rows-table td { white-space: nowrap; vertical-align: middle; }
.scan-rows-table input[type="text"],
.scan-rows-table select {
  font: inherit;
  padding: 4px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface, transparent);
  color: var(--text);
}
.scan-rows-table .scan-eff input { width: 62px; }
.scan-rows-table .scan-eff span { margin: 0 2px; color: var(--text-muted); }
.scan-rows-table .scan-code { width: 54px; text-transform: uppercase; }
.scan-rows-table tr.row-excluded { opacity: 0.62; }
.scan-rows-table .scan-reason { font-size: 11px; color: var(--text-muted); }
.scan-review { color: var(--danger, #ef4444); font-weight: 700; }
.scan-conf { font-size: 12px; font-weight: 600; padding: 1px 6px; border-radius: 6px; }
.scan-conf.conf-high { color: #16a34a; }
.scan-conf.conf-mid { color: #d97706; }
.scan-conf.conf-low { color: var(--danger, #ef4444); }
.scan-rows-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 6px 2px;
}
.scan-rows-summary { font-size: 12px; color: var(--text-secondary); }




/* ---------- Edycja godzin skanu (walidacja) ---------- */
.scan-rows-table .scan-eff .scan-eff-row { display: flex; align-items: center; }
.scan-rows-table .scan-eff input.invalid { border-color: var(--danger, #ef4444); }
.scan-rows-table .scan-eff-err {
  margin-top: 3px;
  font-size: 11px;
  color: var(--danger, #ef4444);
}

/* ---------- Papierowe LKKZ: zakres + podgląd ---------- */
.paper-range {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 10px 0;
}
.paper-range label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.paper-range select {
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface, transparent);
  color: var(--text);
}
.paper-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 4px 2px 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.paper-toolbar select {
  font: inherit;
  padding: 4px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface, transparent);
  color: var(--text);
}
.paper-table th, .paper-table td { vertical-align: middle; }
.paper-table input[type="number"],
.paper-table select {
  font: inherit;
  padding: 4px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface, transparent);
  color: var(--text);
  width: 84px;
}
.paper-table tr.paper-conflict td { background: color-mix(in srgb, var(--danger, #ef4444) 12%, transparent); }
.paper-preview .scan-warning {
  margin: 8px 0 4px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  background: color-mix(in srgb, var(--warning, #f59e0b) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 40%, transparent);
}

/* =============================================================
   BEZPIECZEŃSTWO ŻYWNOŚCI — TERMINY PRODUKTÓW
   ============================================================= */
.food-safety-card { display: flex; flex-direction: column; gap: 16px; }
.food-safety-head { align-items: flex-start; }
.food-safety-summary { margin: 4px 0 0; color: var(--text-muted); font-size: 0.9rem; }
.food-safety-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.food-safety-head-actions .button { min-height: 40px; }
.food-safety-push { margin: 10px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.food-safety-push .button { min-height: 38px; }
.food-safety-push-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.food-safety-push-status { margin: 0; color: var(--text-muted); font-size: 0.82rem; line-height: 1.4; }
.food-safety-push-hint { margin: 0; padding: 8px 10px; border-radius: 8px; background: color-mix(in oklab, var(--accent, #f5a524) 15%, transparent); color: var(--text); font-size: 0.82rem; line-height: 1.45; }
.food-safety-push-diag { margin-top: 6px; font-size: 0.82rem; }
.food-safety-push-diag > summary { cursor: pointer; color: var(--text-muted); user-select: none; }
.fs-diag-list { list-style: none; padding: 8px 0 4px; margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
.fs-diag-list li { display: contents; }
.fs-diag-list li > span { color: var(--text-muted); }
.fs-diag-list li > strong { color: var(--text); font-weight: 600; text-align: right; }


.food-safety-list { display: flex; flex-direction: column; gap: 10px; }

.fs-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.fs-item-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fs-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fs-name { font-weight: 600; color: var(--text); }
.fs-item-time { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; font-size: 0.9rem; }
.fs-exact { color: var(--text); font-variant-numeric: tabular-nums; }
.fs-abs { color: var(--text-muted); font-size: 0.82rem; }
.fs-item-rel { font-size: 0.86rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fs-item-meta { font-size: 0.85rem; color: var(--text-muted); }
.fs-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.fs-item-actions .button { min-height: 40px; }

.fs-note-toggle {
  align-self: flex-start;
  margin-top: 2px;
  background: none;
  border: none;
  padding: 0;
  color: var(--primary);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.fs-note-toggle:hover { text-decoration: underline; }
.fs-note {
  margin: 4px 0 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 0.85rem;
  white-space: pre-wrap;
}

/* Badge'e */
.fs-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.fs-badge-warn { color: var(--amber); background: var(--amber-soft); border-color: var(--amber-soft); }
.fs-badge-urgent, .fs-badge-overdue { color: var(--primary); background: var(--primary-soft); border-color: var(--primary-soft); }

/* Stany pilności */
.fs-neutral { border-left-color: var(--border-strong); }
.fs-warn { border-left-color: var(--amber); background: color-mix(in srgb, var(--amber-soft) 40%, var(--surface-2)); }
.fs-urgent { border-left-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 45%, var(--surface-2)); }
.fs-overdue {
  border-color: var(--primary);
  border-left-color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 60%, var(--surface-2));
}
.fs-overdue .fs-badge-overdue::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  margin-right: 5px;
  animation: fs-pulse 1.6s ease-in-out infinite;
}

@keyframes fs-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .fs-overdue .fs-badge-overdue::before { animation: none; }
}

.food-safety-more-wrap { display: flex; }
.food-safety-more-wrap .button { min-height: 40px; }

/* Puste stany */
.fs-empty { padding: 18px 4px; text-align: center; }
.fs-empty-title { margin: 0; color: var(--text); font-weight: 600; }
.fs-empty-sub { margin: 4px 0 0; color: var(--text-muted); font-size: 0.88rem; }

/* Formularz */
.fs-form { display: flex; flex-direction: column; gap: 12px; }
.fs-field { display: flex; flex-direction: column; gap: 4px; }
.fs-field > span { font-size: 0.82rem; color: var(--text-muted); }
.fs-field input, .fs-field textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.fs-field input:focus, .fs-field textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}
.fs-field textarea { resize: vertical; }
.fs-field-row { display: flex; gap: 10px; }
.fs-field-row .fs-field { flex: 1; min-width: 0; }
.fs-form-error { margin: 0; color: var(--primary); font-size: 0.85rem; }

/* Zakończenie */
.fs-close-options { display: flex; flex-direction: column; gap: 8px; }
.fs-result { min-height: 44px; justify-content: center; border: 1px solid var(--border); }
.fs-result-used { color: var(--success); border-color: var(--success-soft); background: var(--success-soft); }
.fs-result-discarded { color: var(--primary); border-color: var(--primary-soft); background: var(--primary-soft); }
.fs-result-invalid { color: var(--text-muted); }

/* Historia */
.fs-hist-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.fs-hist-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.fs-hist-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fs-hist-line { font-size: 0.83rem; color: var(--text-muted); }
.fs-hist-used { color: var(--success); background: var(--success-soft); }
.fs-hist-discarded { color: var(--primary); background: var(--primary-soft); }
.fs-hist-invalid { color: var(--text-muted); background: var(--surface-3); }
.fs-hist-more-wrap { display: flex; margin-top: 10px; }
.fs-hist-loading { color: var(--text-muted); }

@media (max-width: 640px) {
  .food-safety-head { flex-direction: column; gap: 10px; }
  .food-safety-head-actions { width: 100%; }
  .food-safety-head-actions .button { flex: 1; }
  .fs-item { flex-direction: column; }
  .fs-item-actions { width: 100%; }
  .fs-item-actions .button { flex: 1; }
  .fs-field-row { flex-direction: column; }
}

/* ===== Tabela progów VLH — wyróżnienia realnej i planowanej obsady ===== */
.vlh-table-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin: 12px 0 6px;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.vlh-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.vlh-table-note {
  margin: 4px 0 8px;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
}
.vlh-badge {
  display: inline-block;
  min-width: 14px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  text-align: center;
  letter-spacing: 0.02em;
}
.vlh-badge-real { background: var(--staff-real); }
.vlh-badge-planned { background: var(--staff-planned); }
.vlh-staff-cell { white-space: nowrap; }
.vlh-staff-cell .vlh-badge + .vlh-badge { margin-left: 4px; }

table.vlh-threshold tr.staff-row-real td {
  background: color-mix(in srgb, var(--staff-real) 16%, transparent);
  color: var(--text);
  font-weight: 700;
}
table.vlh-threshold tr.staff-row-real td:first-child {
  box-shadow: inset 4px 0 0 var(--staff-real);
}
table.vlh-threshold tr.staff-row-planned td {
  background: color-mix(in srgb, var(--staff-planned) 12%, transparent);
  color: var(--text);
  font-weight: 600;
}
table.vlh-threshold tr.staff-row-planned td:first-child {
  box-shadow: inset 4px 0 0 var(--staff-planned);
}
table.vlh-threshold tr.staff-row-both td {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--staff-real) 16%, transparent),
      color-mix(in srgb, var(--staff-planned) 14%, transparent));
  color: var(--text);
  font-weight: 700;
}
table.vlh-threshold tr.staff-row-both td:first-child {
  box-shadow: inset 4px 0 0 var(--staff-real);
}

/* --- Ekran logowania --- */
.login-screen {
  color: var(--text);
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card {
  width: min(420px, 100%);
  display: grid;
  gap: 16px;
  padding: 24px;
}
.login-brand {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}
.login-brand h1 { font-size: 1.05rem; margin: 0; }
.login-field { display: grid; gap: 6px; font-size: 0.85rem; }
.login-field input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #d4d4d8);
  background: var(--surface, #fff);
  color: var(--text, inherit);
  font: inherit;
}
.login-field input:focus-visible {
  outline: 2px solid var(--primary, #2563eb);
  outline-offset: 1px;
}
.login-password { display: flex; gap: 8px; align-items: center; }
.login-password input { flex: 1; min-width: 0; }
.login-password .text-button, .login-remember, .login-admin-link { min-height: 44px; }
.login-remember { display: flex; gap: 8px; align-items: center; font-size: 0.85rem; }
.login-submit {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  background: var(--primary, #2563eb);
  color: var(--primary-foreground, #fff);
}
.login-submit:disabled { opacity: 0.6; cursor: default; }
.login-status { margin: 0; text-align: center; }
.login-error { margin: 0; color: #dc2626; font-size: 0.85rem; }
.logout-error { padding: 8px 16px; text-align: center; }
.login-admin-link {
  display: block;
  margin-top: -4px;
  padding: 6px 4px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted, #a3a3a3);
  text-decoration: none;
  border-radius: 6px;
  transition: color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}
.login-admin-link:hover {
  color: var(--text, #fafafa);
  text-decoration: underline;
}
.login-admin-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ============ Help Lite (PATCH 4D.2) ============ */
.lkkz-help-layout { display: flex; min-width: 0; }
.lkkz-help-main { flex: 1 1 auto; min-width: 0; }
.lkkz-help-trigger { white-space: nowrap; flex: none; }
.lkkz-help-link {
  background: none; border: 0; padding: 2px 0; margin-top: 4px;
  color: var(--text-muted); font-size: 12.5px; font-weight: 550;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  display: inline-block; text-align: left;
}
.lkkz-help-link:hover { color: var(--text); }
.lkkz-help-dock {
  position: sticky; top: 0; align-self: flex-start; height: 100vh; flex: none;
  width: 0; overflow: hidden; background: var(--bg-2, var(--surface));
}
.lkkz-help-dock[data-open="true"] { width: 380px; border-left: 1px solid var(--border); }
@media (min-width: 1536px) { .lkkz-help-dock[data-open="true"] { width: 420px; } }
.lkkz-help-panel { width: 380px; height: 100%; transform: translateX(32px); opacity: 0; }
@media (min-width: 1536px) { .lkkz-help-panel { width: 420px; } }
.lkkz-help-dock[data-open="true"] .lkkz-help-panel { transform: none; opacity: 1; }
.lkkz-help-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.45); }
.lkkz-help-sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(420px, calc(100vw - 24px)); background: var(--bg-2, var(--surface));
  border-left: 1px solid var(--border); color: var(--text); outline: none;
}
.lkkz-help-inner { display: flex; flex-direction: column; height: 100%; color: var(--text); font-family: var(--font-sans); }
.lkkz-help-head { display: flex; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.lkkz-help-title { font-size: 16px; font-weight: 650; margin: 0; }
.lkkz-help-desc { font-size: 13px; color: var(--text-muted); margin: 4px 0 0; }
.lkkz-help-close { flex: none; }
.lkkz-help-body { flex: 1; overflow-y: auto; padding: 16px 18px 24px; overscroll-behavior: contain; }
.lkkz-help-search {
  width: 100%; min-height: 40px; padding: 0 12px; font: inherit; font-size: 14px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.lkkz-help-sub { margin: 18px 0 8px; }
.lkkz-help-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lkkz-help-list button {
  width: 100%; text-align: left; display: grid; gap: 2px; padding: 10px 12px; cursor: pointer;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lkkz-help-list button:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.lkkz-help-list-id { font-size: 11px; color: var(--text-faint); font-weight: 650; letter-spacing: 0.04em; }
.lkkz-help-list-title { font-size: 14px; font-weight: 550; }
.lkkz-help-empty { font-size: 13.5px; color: var(--text-muted); }
.lkkz-help-back { background: none; border: 0; padding: 4px 0; color: var(--text-muted); font-size: 13px; font-weight: 550; cursor: pointer; }
.lkkz-help-back:hover { color: var(--text); }
.lkkz-help-id { margin-top: 12px; }
.lkkz-help-article-title { font-size: 18px; font-weight: 650; margin: 4px 0 6px; line-height: 1.3; }
.lkkz-help-article-desc { font-size: 14px; color: var(--text-secondary); margin: 0; line-height: 1.5; }
.lkkz-help-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lkkz-help-steps li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.lkkz-help-steps span {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; font-weight: 650;
}
.lkkz-help-steps p { margin: 2px 0 0; font-size: 14px; line-height: 1.5; }
.lkkz-help-notes { list-style: disc; margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; }
@media (max-width: 640px) { .lkkz-help-trigger { padding: 0 10px; } }
@media print { .lkkz-help-dock, .lkkz-help-trigger, .lkkz-help-link { display: none !important; } }