@font-face {
  font-family: "Ricemill Druk";
  src: url("https://www.eatricemill.com/_next/static/media/951c2737bee7870d-s.p.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Ricemill Exposure";
  src: url("https://www.eatricemill.com/_next/static/media/edaa9b636b726910-s.p.woff2") format("woff2");
  font-display: swap;
  font-style: italic;
  font-weight: 400;
}

@font-face {
  font-family: "Ricemill Geist";
  src: url("https://www.eatricemill.com/_next/static/media/4cf2300e9c8272f7-s.p.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400 700;
}

:root {
  --bg: #f7eedc;
  --bg-soft: #fdf7ee;
  --bg-strong: #ead7b1;
  --panel: rgba(255, 250, 242, 0.88);
  --panel-strong: #fff8ec;
  --ink: #480f02;
  --ink-soft: #6e2f16;
  --muted: #78624f;
  --accent: #12992e;
  --accent-deep: #0d7723;
  --accent-2: #f5b034;
  --accent-3: #f06d2f;
  --danger: #e15320;
  --warn: #9a861d;
  --line: #e4cfaf;
  --line-strong: #d3ab72;
  --ok: #12992e;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 18px 44px rgba(72, 15, 2, 0.12);
  --shadow-soft: 0 10px 24px rgba(72, 15, 2, 0.08);
  --font: "Ricemill Geist", "Avenir Next", "Segoe UI", "Noto Sans", sans-serif;
  --font-display: "Ricemill Druk", "Impact", "Arial Narrow", "Avenir Next Condensed", sans-serif;
  --font-accent: "Ricemill Exposure", "Palatino Linotype", "Book Antiqua", serif;
  --mono: "SFMono-Regular", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  color: var(--ink);
  min-height: 100%;
  background: linear-gradient(180deg, #fcf7ef 0%, var(--bg) 44%, #f1e2c5 100%);
}

body {
  position: relative;
  overflow-x: hidden;
}

.sms-policy-shell {
  max-width: 980px;
}

.sms-policy-head {
  margin-top: 18px;
}

.sms-policy-panel {
  margin-bottom: 18px;
}

.sms-policy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.sms-policy-card {
  border: 1px solid rgba(18, 153, 46, 0.18);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.55);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.sms-policy-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.sms-policy-card p,
.sms-policy-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.sms-policy-copy h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.sms-policy-copy > * + h2 {
  margin-top: 22px;
}

.sms-policy-note {
  margin-top: 24px !important;
  font-size: 0.92rem;
}

.sms-consent-form {
  display: grid;
  gap: 18px;
}

.sms-consent-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.sms-consent-form label {
  display: grid;
  gap: 8px;
  font-weight: 600;
}

.sms-consent-form input {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  padding: 13px 14px;
  font: inherit;
  color: var(--ink);
}

.sms-consent-form input:focus {
  outline: 2px solid rgba(18, 153, 46, 0.22);
  border-color: var(--accent);
}

.sms-consent-legal {
  border: 1px solid rgba(240, 109, 47, 0.2);
  border-radius: 20px;
  background: rgba(255, 248, 232, 0.74);
  padding: 18px;
}

.sms-consent-legal h3 {
  margin: 0 0 10px;
}

.sms-consent-legal p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.sms-consent-checkbox {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  font-weight: 600;
}

.sms-consent-checkbox input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  padding: 0;
}

.sms-consent-actions {
  display: flex;
  justify-content: flex-start;
}

.sms-consent-actions button {
  min-height: 48px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-deep) 0%, var(--accent) 100%);
  color: #fff9ec;
  padding: 0 22px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 14px 24px rgba(18, 153, 46, 0.18);
}

.sms-consent-actions button:disabled {
  opacity: 0.6;
  cursor: wait;
}

.sms-consent-error {
  margin: 0;
  color: var(--danger);
  font-weight: 600;
}

.sms-consent-success {
  border: 1px solid rgba(18, 153, 46, 0.26);
  border-radius: 18px;
  background: rgba(18, 153, 46, 0.08);
  padding: 16px 18px;
}

.sms-consent-success strong {
  display: block;
  margin-bottom: 6px;
}

.sms-consent-success p {
  margin: 0;
  color: var(--muted);
}

body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
  filter: blur(10px);
}

body::before {
  inset: auto auto -10vh -8vw;
  width: 32vw;
  height: 32vw;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(18, 153, 46, 0.13) 0%, rgba(18, 153, 46, 0) 72%);
}

body::after {
  inset: 9vh -10vw auto auto;
  width: 38vw;
  height: 38vw;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(240, 109, 47, 0.12) 0%, rgba(240, 109, 47, 0) 70%);
}

a {
  color: inherit;
}

.app-shell {
  position: relative;
  z-index: 1;
  max-width: 1360px;
  margin: 0 auto;
  padding: 28px 18px 64px;
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}

header.page-head {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(18, 153, 46, 0.42);
  border-radius: 30px;
  padding: 26px 28px;
  margin-bottom: 22px;
  background:
    linear-gradient(135deg, rgba(9, 91, 28, 0.9) 0%, rgba(18, 153, 46, 0.94) 42%, rgba(27, 118, 47, 0.96) 100%),
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 30%);
  box-shadow: 0 24px 42px rgba(18, 153, 46, 0.18);
}

header.page-head::before {
  content: "";
  position: absolute;
  inset: auto -40px -38px auto;
  width: 220px;
  height: 220px;
  opacity: 0.12;
  background: url("https://www.eatricemill.com/_next/static/media/logo.ac5e2d91.svg") no-repeat center / contain;
  transform: rotate(-8deg);
}

header.page-head::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 36%),
    radial-gradient(circle at 85% 18%, rgba(255, 176, 0, 0.18) 0%, rgba(255, 176, 0, 0) 24%);
  pointer-events: none;
}

header.page-head > * {
  position: relative;
  z-index: 1;
}

header.page-head > div > .page-title::before {
  content: "";
  display: block;
  width: 176px;
  height: 40px;
  margin: 0 0 12px;
  background: url("https://www.eatricemill.com/_next/static/media/logo.ac5e2d91.svg") no-repeat left center / contain;
}

.page-title {
  margin: 0;
  font-size: clamp(2rem, 1.2rem + 2vw, 3.3rem);
  letter-spacing: 0.03em;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.95;
}

.page-subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 70ch;
}

header.page-head .page-title,
header.page-head .page-subtitle,
header.page-head .nav-chip,
header.page-head .lang-switch label {
  color: #fff8e8;
}

header.page-head .page-subtitle {
  opacity: 0.95;
  color: rgba(255, 248, 232, 0.92);
}

.back-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  border: 1px solid rgba(255, 248, 232, 0.76);
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.14);
  color: #fff8e8;
  padding: 10px 14px;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 700;
  backdrop-filter: blur(6px);
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.back-home-btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 248, 232, 0.22);
  border-color: #fff8e8;
}

.nav-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.nav-chip {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid rgba(72, 15, 2, 0.12);
  background: rgba(255, 248, 232, 0.86);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 0.84rem;
  text-decoration: none;
  font-weight: 700;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.nav-chip:hover {
  transform: translateY(-1px);
  border-color: #ffaf00;
  background: #ffaf00;
  color: #480f02;
}

header.page-head .nav-chip {
  border-color: rgba(255, 248, 232, 0.58);
  background: rgba(255, 248, 232, 0.12);
}

header.page-head .nav-chip:hover {
  border-color: #ffaf00;
  background: #ffaf00;
  color: #480f02;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
}

.lang-switch label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
}

.lang-switch select {
  width: auto;
  min-width: 128px;
  border-radius: 999px;
  padding: 10px 12px;
}

header.page-head .lang-switch select {
  border-color: rgba(255, 248, 232, 0.68);
  background: rgba(255, 248, 232, 0.12);
  color: #fff8e8;
}

header.page-head .lang-switch select option {
  color: #480f02;
}

.tab-switch {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}

.dashboard-subtab-switch {
  margin: 16px 0 0;
}

.tab-chip {
  min-height: 46px;
  border: 1px solid rgba(72, 15, 2, 0.14);
  background: rgba(255, 248, 232, 0.82);
  color: var(--ink);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  box-shadow: var(--shadow-soft);
}

.tab-chip.active {
  background: linear-gradient(135deg, #12992e 0%, #0f8428 100%);
  color: #fff8e8;
  border-color: var(--accent);
}

.tab-panel {
  display: grid;
  gap: 14px;
}

.tab-panel[hidden] {
  display: none !important;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.panel {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 24%),
    var(--panel);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(196, 159, 107, 0.44);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 18px;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-2) 0%, var(--accent) 36%, rgba(18, 153, 46, 0) 100%);
  opacity: 0.72;
}

a.panel {
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

a.panel:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 176, 52, 0.72);
  box-shadow: 0 22px 40px rgba(72, 15, 2, 0.14);
}

.panel h2,
.panel h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
}

.panel h2 {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 0.95;
}

label {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}

input,
select,
textarea,
button {
  font-family: inherit;
}

input,
select,
textarea {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(172, 136, 88, 0.42);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(18, 153, 46, 0.76);
  box-shadow: 0 0 0 4px rgba(18, 153, 46, 0.12);
  background: #fffdf9;
}

/*
 * Global keyboard focus visibility.
 *
 * Applies only to keyboard focus (:focus-visible), never to mouse click
 * focus, so pointer users don't get halo'd buttons. Without this rule
 * the existing inputs had focus styles but buttons, links, tabs, nav
 * chips, and custom interactive divs had nothing — keyboard operators
 * literally could not tell where focus was.
 */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
.nav-chip:focus-visible,
.ai-chat-primary:focus-visible,
.ai-chat-secondary:focus-visible,
.chip:focus-visible,
.pill:focus-visible,
summary:focus-visible {
  outline: 2px solid rgba(18, 153, 46, 0.85);
  outline-offset: 2px;
  border-radius: inherit;
}

.table-checkbox {
  width: 18px !important;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  margin: 0 auto;
  display: block;
  border-radius: 4px;
}

.dashboard-filter-lg {
  min-height: 56px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 1.06rem;
  font-weight: 600;
}

textarea {
  min-height: 104px;
  resize: vertical;
}

button {
  min-height: 46px;
  border: 1px solid #0f8428;
  border-radius: 14px;
  padding: 10px 14px;
  cursor: pointer;
  background: linear-gradient(135deg, #18ab35 0%, #12992e 100%);
  color: #fff8e8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 12px 22px rgba(18, 153, 46, 0.18);
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}

button:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #1ab33a 0%, #0f8428 100%);
  box-shadow: 0 16px 28px rgba(18, 153, 46, 0.22);
}

button:active {
  transform: translateY(0);
}

button.secondary {
  background: rgba(255, 248, 232, 0.84);
  color: var(--ink);
  border-color: rgba(172, 136, 88, 0.36);
  box-shadow: var(--shadow-soft);
}

.produce-submit-btn {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  overflow: hidden;
  text-align: center;
  text-transform: none;
}

.produce-submit-label {
  font-size: 0.9em;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.produce-submit-state {
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: none;
  opacity: 0.92;
}

.produce-submit-btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -38%;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  opacity: 0;
  pointer-events: none;
}

.produce-submit-btn.is-submitting {
  background: linear-gradient(135deg, #d18a22 0%, #b96f0d 100%);
  border-color: #9f5d07;
  box-shadow: 0 14px 28px rgba(185, 111, 13, 0.26);
}

.produce-submit-btn.is-submitting::after {
  opacity: 1;
  animation: produce-submit-sweep 1.05s linear infinite;
}

.produce-submit-btn.is-queued {
  background: linear-gradient(135deg, #1fbf4d 0%, #15983a 100%);
  border-color: #0f8428;
  box-shadow: 0 14px 30px rgba(21, 152, 58, 0.28);
  animation: produce-submit-pop 0.28s ease-out;
}

.produce-submit-btn.is-error {
  background: linear-gradient(135deg, #d65f34 0%, #b3431b 100%);
  border-color: #9d3010;
  box-shadow: 0 14px 30px rgba(179, 67, 27, 0.24);
}

@keyframes produce-submit-sweep {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(420%);
  }
}

@keyframes produce-submit-pop {
  0% {
    transform: scale(0.985);
  }

  55% {
    transform: scale(1.02);
  }

  100% {
    transform: scale(1);
  }
}

a.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1px solid #0f8428;
  border-radius: 14px;
  padding: 10px 14px;
  cursor: pointer;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease, border-color 0.14s ease, opacity 0.14s ease;
}

a.button-link.secondary {
  background: rgba(255, 248, 232, 0.84);
  color: var(--ink);
  border-color: rgba(172, 136, 88, 0.36);
  box-shadow: var(--shadow-soft);
}

a.button-link.disabled {
  pointer-events: none;
  opacity: 0.45;
}

button.warn {
  background: linear-gradient(135deg, #ffc24d 0%, var(--accent-2) 100%);
  border-color: #e7a11c;
  color: #4a2a00;
  box-shadow: 0 12px 24px rgba(245, 176, 52, 0.2);
}

button.danger {
  background: linear-gradient(135deg, #f37139 0%, var(--danger) 100%);
  border-color: #cf4214;
  box-shadow: 0 12px 24px rgba(225, 83, 32, 0.2);
}

form .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}

.admin-launch-card {
  display: grid;
  gap: 16px;
  min-height: 210px;
  align-content: space-between;
}

.admin-launch-actions {
  display: grid;
  justify-items: flex-start;
  gap: 12px;
}

.admin-launch-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.material-admin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Materials tab — 3 cards per row on wide screens; stepped-down
   column counts below that so cards never get uncomfortably narrow. */
.material-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1180px) {
  .material-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .material-card-grid {
    grid-template-columns: 1fr;
  }
}

.material-admin-card {
  height: 100%;
}

/* Card action row — Edit / Thresholds / Delete.  Three buttons now
   instead of the original two; fall back to 2 columns on narrow
   cards so labels don't clip. */
.material-admin-card-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}
@media (max-width: 560px) {
  .material-admin-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Per-entity threshold section inside the Edit Material modal. */
.material-form-thresholds {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.02);
}
.material-form-thresholds-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.material-form-thresholds input.material-threshold-input {
  width: 100px;
  padding: 4px 8px;
  margin-right: 6px;
}

.material-admin-card-actions > button {
  width: 100%;
}

.material-admin-empty {
  grid-column: 1 / -1;
}

.store-sms-form-block {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.store-sms-alert-grid,
.cooked-waste-container-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1180px) {
  .store-sms-alert-grid,
  .cooked-waste-container-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .store-sms-alert-grid,
  .cooked-waste-container-grid {
    grid-template-columns: 1fr;
  }
}

.store-sms-alert-card .inventory-health-stat strong {
  line-height: 1.45;
  word-break: break-word;
}

.store-sms-provider-missing {
  color: #8f1f16;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid var(--line);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge.green {
  color: var(--ok);
  border-color: #8bd5a0;
  background: #e8f6eb;
}

.badge.yellow {
  color: var(--warn);
  border-color: #e3d67f;
  background: #fff8d9;
}

.badge.red {
  color: var(--danger);
  border-color: #f1b39c;
  background: #fff0ea;
}

.table-wrap {
  overflow: auto;
  border: 1px solid rgba(196, 159, 107, 0.44);
  border-radius: 18px;
  background: rgba(255, 252, 247, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.planning-forecast-summary {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.planning-forecast-summary .metric {
  min-height: 112px;
}

.planning-forecast-legend {
  justify-content: flex-start;
  margin: 12px 0 14px;
}

table.planning-forecast-table {
  min-width: 980px;
}
/* The Planning Forecast panel must contain its wide table inside the
   table-wrap's horizontal scroll. Without explicit `min-width: 0` on
   the panel + `max-width: 100%` on the wrap, the 980px min-width was
   propagating up and pushing the WHOLE PAGE into horizontal scroll. */
#dashboard-store-planning-forecast-panel,
.dashboard-store-view-panel {
  min-width: 0;
}
#dashboard-store-planning-forecast-panel .table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

table.planning-forecast-table tbody tr[data-tone="danger"] td {
  background: rgba(225, 83, 32, 0.06);
}

table.planning-forecast-table tbody tr[data-tone="warn"] td {
  background: rgba(255, 247, 219, 0.72);
}

table.planning-forecast-table tbody tr[data-tone="ok"] td {
  background: rgba(232, 246, 235, 0.52);
}

.planning-forecast-row td {
  vertical-align: middle;
}

.planning-forecast-row .badge {
  min-width: 0;
  white-space: nowrap;
}

.kiosk-touch-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.kiosk-touch-scroll.drag-scroll-active {
  cursor: grabbing;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
  background: transparent;
}

th,
td {
  border-bottom: 1px solid rgba(228, 207, 175, 0.82);
  padding: 12px 12px;
  text-align: left;
  font-size: 0.88rem;
  vertical-align: top;
}

th {
  background: linear-gradient(180deg, #f8ead1 0%, #f4dfbc 100%);
  color: #5b1a0a;
  position: sticky;
  top: 0;
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  font-size: 0.78rem;
  text-transform: uppercase;
}

td.mono {
  font-family: var(--mono);
  font-size: 0.8rem;
}

.inventory-row-clickable {
  cursor: pointer;
}

.inventory-row-clickable:hover td,
.inventory-row-clickable:hover {
  background: #f1fbf3;
}

.inventory-row-clickable:active td,
.inventory-row-clickable:active {
  background: #e3f4e7;
}

.inventory-health-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.inventory-health-card {
  display: grid;
  gap: 8px;
  min-height: 0;
  padding: 12px 13px;
  align-content: start;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    border-color 0.14s ease,
    background 0.14s ease;
}

.inventory-health-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.inventory-health-card .inventory-health-card-store {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.inventory-health-card .inventory-health-card-material {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.22;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
}

.inventory-health-card-qty {
  font-family: var(--font-display);
  font-size: 1.42rem;
  line-height: 0.92;
  color: var(--accent);
}

.inventory-health-card-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.inventory-health-card-progress {
  margin-top: 2px;
}

.inventory-health-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 2px;
}

.inventory-health-stat {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.inventory-health-card .inventory-health-stat-label,
.inventory-health-expiry-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.inventory-health-card .inventory-health-stat strong {
  font-size: 0.9rem;
  line-height: 1.15;
  color: var(--accent);
  word-break: break-word;
  text-transform: none;
  letter-spacing: 0;
}

.inventory-health-empty {
  border: 1px dashed rgba(196, 159, 107, 0.5);
  border-radius: 18px;
  padding: 18px;
  text-align: center;
  color: var(--muted);
  background: rgba(255, 252, 247, 0.9);
}

.card-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.metric {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(196, 159, 107, 0.46);
  border-radius: 20px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76) 0%, rgba(255, 255, 255, 0) 24%),
    #fffdf6;
  box-shadow: var(--shadow-soft);
}

.store-consumption-summary .value {
  font-size: clamp(1.4rem, 1rem + 1vw, 2rem);
}

.store-waste-summary {
  margin-top: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.store-waste-summary .metric {
  min-height: 100px;
}

.store-waste-summary .label {
  /* Force 2-line equal-height label so multi-word ones don't push the
     value down and break alignment across the 7-card row. */
  min-height: 2.6em;
  display: flex;
  align-items: flex-start;
}

.store-waste-summary .value {
  font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.8rem);
}

.store-waste-section {
  margin-top: 18px;
}

.store-waste-trend-panel {
  margin-top: 18px;
}

.store-waste-trend-head {
  align-items: flex-start;
  gap: 14px;
}

.store-waste-trend-head .waste-trend-range-tabs {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.store-yield-section {
  margin-top: 18px;
}

.store-yield-summary {
  margin-top: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.metric.metric-danger {
  border-color: rgba(194, 56, 33, 0.38);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76) 0%, rgba(255, 255, 255, 0) 24%),
    rgba(255, 242, 238, 0.96);
}

table.store-yield-table {
  min-width: 1120px;
}

table.store-yield-table tbody tr[data-tone="danger"] td {
  background: rgba(225, 83, 32, 0.08);
}

table.store-yield-table tbody tr[data-tone="ok"] td {
  background: rgba(232, 246, 235, 0.42);
}

table.store-yield-table tbody tr[data-tone="muted"] td {
  background: rgba(248, 246, 240, 0.92);
}

.metric-action {
  cursor: pointer;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    border-color 0.14s ease;
}

.metric-action:hover,
.metric-action:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(133, 101, 43, 0.28);
  box-shadow: 0 14px 24px rgba(72, 15, 2, 0.08);
}

.metric-action:focus-visible {
  outline: 2px solid rgba(24, 140, 101, 0.35);
  outline-offset: 2px;
}

.metric .label {
  font-size: 0.74rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
}

.metric .value {
  margin-top: 8px;
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2.5rem);
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-display);
  line-height: 0.95;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  background: rgba(72, 15, 2, 0.96);
  color: #fff8e8;
  border: 1px solid #7d3d2d;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 0.85rem;
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.2s ease;
  pointer-events: none;
  box-shadow: 0 18px 32px rgba(72, 15, 2, 0.28);
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.kds-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.kds-item {
  border: 1px solid rgba(196, 159, 107, 0.5);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 24%),
    #fffdf6;
  padding: 14px;
  display: grid;
  gap: 10px;
  box-shadow: var(--shadow-soft);
}

.kds-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.kds-title {
  margin: 0;
  font-size: 1.38rem;
  line-height: 1;
  color: var(--ink);
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.kds-task-no {
  color: var(--muted);
  font-size: 0.7rem;
  font-family: var(--mono);
  /* Task numbers are 30+ chars (TASK-CP-CAT-20260412-031333252-1).
     Truncate visually so the row stays compact; operators only need
     the ID to tell tasks apart, not to read it character-by-character. */
  max-width: 14ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
.kds-task-no:hover {
  max-width: none;
  text-overflow: clip;
}

.kds-primary {
  border: 1px solid rgba(18, 153, 46, 0.18);
  border-radius: 18px;
  padding: 12px;
  background:
    radial-gradient(circle at top right, rgba(245, 176, 52, 0.12) 0%, rgba(245, 176, 52, 0) 26%),
    linear-gradient(180deg, #f3faf1 0%, #eef7ec 100%);
  display: grid;
  gap: 6px;
}

.kds-qty {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.kds-qty-label {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kds-qty-value {
  font-size: clamp(1.7rem, 1.2rem + 1vw, 2.5rem);
  font-weight: 800;
  line-height: 0.95;
  color: #0f8428;
  font-family: var(--font-display);
}

.kds-meta {
  color: var(--muted);
  font-size: 0.8rem;
}

.kds-pack-controls {
  display: grid;
  gap: 5px;
}

.kds-pack-controls label {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kds-pack-controls input {
  height: 34px;
  font-size: 0.95rem;
  font-weight: 700;
}

.kds-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.kds-actions button {
  min-height: 44px;
  padding: 8px 10px;
  font-size: 0.76rem;
}

/* Click-feedback: dim + spinner cursor while an action is in flight. */
.kds-actions button.kds-action-pending {
  opacity: 0.55;
  cursor: progress;
  position: relative;
}
.kds-actions button.kds-action-pending::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: kds-action-spin 0.7s linear infinite;
}
@keyframes kds-action-spin {
  to { transform: rotate(360deg); }
}

.order-board {
  display: grid;
  gap: 14px;
}

.order-card {
  border: 1px solid rgba(196, 159, 107, 0.48);
  border-radius: 22px;
  background: #fffdf6;
  padding: 14px;
  display: grid;
  gap: 10px;
  box-shadow: var(--shadow-soft);
}

.order-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.order-title {
  margin: 0;
  font-size: 1rem;
  font-family: var(--font-display);
  text-transform: uppercase;
}

.order-flow {
  font-size: 0.82rem;
  color: var(--muted);
}

.order-meta {
  font-size: 0.78rem;
  color: var(--muted);
}

.order-qr {
  font-family: var(--mono);
  font-size: 0.78rem;
}

.order-items {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 2px;
}

.order-items li {
  font-size: 0.82rem;
}

.order-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 6px;
}

.order-actions button {
  padding: 7px 8px;
  font-size: 0.76rem;
}

.order-picklist {
  border: 1px solid rgba(196, 159, 107, 0.44);
  border-radius: 18px;
  background: linear-gradient(180deg, #fbf0dd 0%, #f8ead0 100%);
  padding: 12px;
  display: grid;
  gap: 8px;
}

.order-picklist-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.order-picklist-summary {
  color: var(--muted);
  font-size: 0.8rem;
}

.dispatch-checklist {
  display: grid;
  gap: 8px;
}

.dispatch-check-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffdf6;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.dispatch-check-item.is-done {
  border-color: #7acb94;
  background: #e8f6eb;
}

.dispatch-check-mark {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  color: transparent;
  font-size: 0.92rem;
  font-weight: 800;
  background: #fff;
}

.dispatch-check-item.is-done .dispatch-check-mark {
  border-color: #12992e;
  background: #12992e;
  color: #fff8e8;
}

.dispatch-check-content {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dispatch-check-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dispatch-check-index {
  font-size: 0.72rem;
  font-family: var(--mono);
  color: var(--muted);
}

.dispatch-check-line {
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.dispatch-check-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 0.76rem;
  color: var(--muted);
}

.dispatch-check-status {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.dispatch-check-flag {
  border: 1px solid #8ed2a3;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #0f8428;
  background: #dff3e5;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.dispatch-check-empty {
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 10px;
  color: var(--muted);
  font-size: 0.82rem;
}

.order-picklist-table {
  min-width: 0;
}

.order-picklist-table th,
.order-picklist-table td {
  font-size: 0.78rem;
}

.order-picklist-input {
  min-height: 76px;
  font-family: var(--mono);
  font-size: 0.8rem;
}

.order-picklist-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.order-picklist-actions button {
  padding: 7px 8px;
  font-size: 0.76rem;
}

.order-picklist-recent {
  display: grid;
  gap: 6px;
}

.order-picklist-recent ul {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 2px;
}

.order-picklist-recent li {
  font-size: 0.76rem;
  font-family: var(--mono);
}

.order-print-sheet {
  display: none;
  background: #fff;
  color: #1a1a1a;
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 10mm;
}

.order-print-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10mm;
  margin-bottom: 8mm;
}

.order-print-title {
  margin: 0 0 4px;
  font-size: 22px;
}

.order-print-sub {
  margin: 0;
  font-size: 12px;
  color: #444;
}

.order-print-qr {
  width: 42mm;
  height: 42mm;
  object-fit: contain;
  border: 1px solid #ddd;
}

.order-print-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5mm 8mm;
  margin-bottom: 7mm;
}

.order-print-field {
  font-size: 12px;
}

.order-print-label {
  font-weight: 700;
  margin-right: 4px;
}

.order-print-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
}

.order-print-table th,
.order-print-table td {
  border: 1px solid #ddd;
  padding: 6px 8px;
  font-size: 12px;
}

.order-print-note {
  margin-top: 6mm;
  font-size: 12px;
}

.order-print-sign {
  margin-top: 12mm;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12mm;
}

.order-print-sign > div {
  border-top: 1px solid #444;
  padding-top: 4px;
  font-size: 12px;
}

.checklist-table input[type="number"] {
  max-width: 130px;
}

.checklist-active {
  background: #e8f6eb;
}

.scan-qr-input {
  min-height: 140px;
  font-family: var(--mono);
  font-size: 0.94rem;
  line-height: 1.45;
}

.scan-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.scan-actions .camera-btn {
  flex: 1 1 100%;
  min-height: 60px;
  padding: 14px 16px;
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  border: 2px solid #0f8428;
  background: linear-gradient(180deg, #18ab35 0%, #12992e 100%);
  color: #fff8e8;
  box-shadow: 0 8px 18px rgba(18, 153, 46, 0.28);
  touch-action: manipulation;
}

.scan-actions .camera-btn:active {
  transform: translateY(1px);
}

.scan-itemid-open-btn {
  min-height: 52px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.scanner-hid-panel {
  border: 1px solid rgba(196, 159, 107, 0.54);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0) 28%),
    #f6eddd;
}

.scanner-hid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.scanner-focus-btn {
  min-height: 52px;
  width: 100%;
  font-weight: 700;
}

.scanner-hid-live {
  margin: 4px 0 0;
  font-weight: 700;
  color: #0f8428;
}

.scanner-hid-live.error {
  color: #b22a14;
}

.scanner-hid-live.warn {
  color: #8e9026;
}

.scanner-hid-feedback {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(196, 159, 107, 0.42);
  background: rgba(255, 250, 242, 0.9);
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.scanner-hid-feedback-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.scanner-hid-feedback-item {
  margin-top: 6px;
  color: var(--ink);
  font-size: clamp(1.05rem, 2vw, 1.32rem);
  font-weight: 900;
  line-height: 1.22;
}

.scanner-hid-feedback-detail {
  margin: 7px 0 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.38;
}

.scanner-status-card.scan-feedback-success {
  border-color: rgba(18, 153, 46, 0.34);
  background:
    linear-gradient(180deg, rgba(227, 248, 232, 0.86) 0%, rgba(255, 255, 255, 0) 34%),
    #f6eddd;
}

.scanner-status-card.scan-feedback-error {
  border-color: rgba(225, 83, 32, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 234, 226, 0.9) 0%, rgba(255, 255, 255, 0) 34%),
    #f6eddd;
}

.scanner-status-card.scan-feedback-fifo {
  border-color: rgba(245, 176, 52, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 243, 213, 0.92) 0%, rgba(255, 255, 255, 0) 34%),
    #f6eddd;
}

.scanner-hid-feedback.scan-feedback-success {
  border-color: rgba(18, 153, 46, 0.28);
  background: rgba(234, 249, 238, 0.95);
}

.scanner-hid-feedback.scan-feedback-success .scanner-hid-feedback-item,
.scanner-hid-feedback.scan-feedback-success .scanner-hid-feedback-detail {
  color: #0f8428;
}

.scanner-hid-feedback.scan-feedback-error {
  border-color: rgba(225, 83, 32, 0.28);
  background: rgba(255, 236, 230, 0.96);
}

.scanner-hid-feedback.scan-feedback-error .scanner-hid-feedback-item,
.scanner-hid-feedback.scan-feedback-error .scanner-hid-feedback-detail {
  color: #b22a14;
}

.scanner-hid-feedback.scan-feedback-fifo {
  border-color: rgba(245, 176, 52, 0.34);
  background: rgba(255, 247, 224, 0.96);
}

.scanner-hid-feedback.scan-feedback-fifo .scanner-hid-feedback-item,
.scanner-hid-feedback.scan-feedback-fifo .scanner-hid-feedback-detail {
  color: #8a6400;
}

.scan-sync-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(196, 159, 107, 0.32);
  background: rgba(255, 250, 242, 0.88);
}

.scan-sync-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.scan-sync-title {
  color: var(--text-strong);
  font-size: 0.95rem;
  font-weight: 900;
}

.scan-sync-detail {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.35;
}

.scan-sync-banner.is-online .scan-sync-title {
  color: var(--brand-green-700);
}

.scan-sync-banner.is-pending .scan-sync-title,
.scan-sync-banner.is-syncing .scan-sync-title {
  color: #9b6200;
}

.scan-sync-banner.is-offline,
.scan-sync-banner.is-failed {
  background: rgba(255, 241, 236, 0.92);
}

.scan-sync-banner.is-offline .scan-sync-title,
.scan-sync-banner.is-failed .scan-sync-title {
  color: #b22a14;
}

.scan-sync-now {
  min-height: 40px;
  white-space: nowrap;
}

.scan-modal {
  position: fixed;
  inset: 0;
  background: rgba(38, 15, 8, 0.72);
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 14px;
  overflow: auto;
  overscroll-behavior: contain;
}

.scan-modal[hidden] {
  display: none !important;
}

.scan-modal-card {
  width: min(760px, 100%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 26%),
    #fff9f0;
  border-radius: 22px;
  padding: 18px;
  border: 1px solid rgba(196, 159, 107, 0.48);
  box-shadow: var(--shadow);
}

.scan-processing-modal {
  z-index: 45;
}

.scan-itemid-modal {
  z-index: 44;
}

.scan-itemid-modal-card {
  width: min(620px, 100%);
  display: grid;
  gap: 14px;
}

.kiosk-value-shell {
  display: flex;
  align-items: center;
  min-height: 64px;
  border-radius: 16px;
  border: 1px solid rgba(196, 159, 107, 0.42);
  background: rgba(255, 252, 246, 0.96);
  overflow: hidden;
}

.kiosk-value-shell:focus-within {
  border-color: rgba(18, 153, 46, 0.52);
  box-shadow: 0 0 0 3px rgba(18, 153, 46, 0.14);
}

.kiosk-value-prefix {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-right: 1px solid rgba(196, 159, 107, 0.32);
  background: rgba(244, 231, 209, 0.55);
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.kiosk-value-display {
  width: 100%;
  min-height: 62px;
  border: 0;
  padding: 0 16px;
  background: transparent;
  font: inherit;
  font-family: var(--mono);
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text-strong);
}

.kiosk-value-display:focus {
  outline: none;
}

.kiosk-value-display[readonly] {
  cursor: default;
}

.kiosk-numpad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.kiosk-numpad-btn {
  min-height: 54px;
  border-radius: 16px;
  border: 1px solid rgba(196, 159, 107, 0.42);
  background: rgba(255, 252, 246, 0.98);
  color: var(--text-strong);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition:
    transform 120ms ease,
    background 120ms ease,
    box-shadow 120ms ease;
}

.kiosk-numpad-btn:hover {
  background: rgba(250, 240, 226, 0.98);
}

.kiosk-numpad-btn:active {
  transform: translateY(1px);
}

.kiosk-numpad-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.kiosk-numpad-btn-muted {
  background: rgba(244, 231, 209, 0.55);
  color: var(--ink-soft);
}

.scan-itemid-form {
  display: grid;
  gap: 10px;
}

.scan-itemid-form label {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.scan-itemid-form .kiosk-value-display {
  font-size: 1.2rem;
}

.scan-itemid-hint {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.4;
}

.scan-itemid-error {
  margin: 0;
  color: #b22a14;
  font-weight: 700;
  line-height: 1.35;
}

.scan-itemid-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.scan-itemid-confirm-btn {
  min-width: 172px;
}

.admin-form-modal-card {
  width: min(760px, 100%);
  max-height: min(88vh, 980px);
  overflow: auto;
}

.admin-form-modal-card-wide {
  width: min(940px, 100%);
}

.admin-form-modal .scan-modal-head {
  align-items: flex-start;
  margin-bottom: 14px;
}

.admin-form-modal .page-subtitle {
  max-width: none;
}

.inventory-expiry-modal-card {
  width: min(980px, 100%);
  max-height: min(88vh, 980px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.inventory-expiry-modal-card .table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 62vh;
  overflow: auto;
  overscroll-behavior: contain;
}

.inventory-expiry-group-row td {
  background: linear-gradient(180deg, rgba(248, 234, 208, 0.62), rgba(255, 253, 246, 0.98));
  vertical-align: top;
}

.inventory-expiry-group-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.inventory-expiry-toggle {
  min-width: 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 800;
  flex: 0 0 auto;
}

.inventory-expiry-group-meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.inventory-expiry-group-meta strong {
  color: var(--accent);
  font-size: 0.95rem;
  line-height: 1.15;
}

.inventory-expiry-group-meta span {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
  word-break: break-word;
}

.inventory-expiry-summary-note {
  color: var(--muted);
  font-size: 0.78rem;
}

.inventory-expiry-item-row td {
  background: rgba(255, 253, 246, 0.96);
}

.inventory-expiry-item-row td:first-child {
  padding-left: 26px;
}

.inventory-expiry-item-label {
  display: grid;
  gap: 4px;
}

.inventory-expiry-item-label .mono {
  color: var(--accent);
  font-weight: 700;
}

.scan-modal-head {
  margin-bottom: 8px;
}

.scan-video {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 72vh;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #111;
  object-fit: cover;
}

.scan-video-wrap {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.scan-video-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}

.scan-video-wrap.flash-success::after {
  background: rgba(18, 153, 46, 0.36);
  animation: scan-flash 360ms ease-out;
}

.scan-video-wrap.flash-error::after {
  background: rgba(247, 77, 24, 0.42);
  animation: scan-flash 260ms ease-out;
}

.scan-feedback {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 28px);
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: center;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

.scan-feedback.show {
  opacity: 1;
}

.scan-feedback.success {
  background: rgba(18, 153, 46, 0.94);
}

.scan-feedback.error {
  background: rgba(183, 42, 18, 0.95);
}

.scan-processing-modal {
  z-index: 55;
}

.scan-processing-card {
  width: min(560px, 100%);
}

.scan-processing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.scan-processing-progress {
  position: relative;
  height: 14px;
  border-radius: 999px;
  border: 1px solid #dbc6a5;
  overflow: hidden;
  background: #f9efdf;
}

.scan-processing-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, #18ab35 0%, #12992e 100%);
  transition: width 180ms ease;
}

.scan-processing-stage {
  margin: 10px 0 0;
  font-weight: 700;
  color: #0f8428;
}

.scan-processing-queue {
  margin-top: 12px;
  border: 1px solid #dbc6a5;
  border-radius: 10px;
  background: #fffaf1;
  padding: 10px;
}

.scan-processing-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
}

.scan-processing-queue-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  max-height: 140px;
  overflow: auto;
}

.scan-processing-queue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #ebdcc5;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.9rem;
  background: #fff;
}

.scan-processing-queue-main {
  display: grid;
  gap: 2px;
}

.scan-processing-queue-status {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #0f8428;
  text-transform: uppercase;
}

.scan-processing-queue-item code {
  font-size: 0.86rem;
  font-weight: 700;
}

.scan-processing-queue-item time {
  color: #6e6658;
  font-size: 0.8rem;
  white-space: nowrap;
}

.scan-processing-queue-empty {
  color: #6e6658;
  font-size: 0.9rem;
}

.scan-processing-card.error .scan-processing-progress-fill {
  background: linear-gradient(90deg, #f74d18 0%, #b22a14 100%);
}

.scan-processing-card.error .scan-processing-stage {
  color: #b22a14;
}

.scan-processing-close {
  margin-top: 12px;
}

@keyframes scan-flash {
  0% {
    opacity: 0;
  }
  28% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.label-preview-shell {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.label-preview-box {
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  width: min(100%, 440px);
}

.label-preview-title {
  font-weight: 700;
  margin-bottom: 8px;
}

.label-preview-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 10px;
  align-items: start;
}

.label-preview-lines {
  display: grid;
  gap: 4px;
  word-break: break-word;
}

.label-preview-qr {
  width: 120px;
  height: 120px;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: contain;
  background: #fff;
}

.label-preview-json {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 8px;
  font-family: var(--mono);
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.9fr);
  gap: 18px;
  margin-bottom: 20px;
}

.hero-panel {
  min-height: 100%;
}

.hero-panel h2 {
  margin-bottom: 14px;
  font-size: clamp(2rem, 1.3rem + 1.8vw, 3rem);
}

.hero-panel p {
  margin: 0;
}

.pulse-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.pulse-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(196, 159, 107, 0.48);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 252, 246, 0.84);
  box-shadow: var(--shadow-soft);
}

.pulse-card-action {
  cursor: pointer;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    border-color 0.14s ease;
}

.pulse-card-action:hover,
.pulse-card-action:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(133, 101, 43, 0.3);
  box-shadow: 0 16px 26px rgba(72, 15, 2, 0.1);
}

.pulse-card-action:focus-visible {
  outline: 2px solid rgba(24, 140, 101, 0.35);
  outline-offset: 2px;
}

.pulse-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-2) 0%, var(--accent) 100%);
  opacity: 0.8;
}

.pulse-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.pulse-value {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 1.3vw, 3rem);
  line-height: 0.9;
}

.pulse-meta {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.88rem;
}

.pulse-bar,
.table-progress {
  height: 10px;
  border-radius: 999px;
  background: rgba(218, 196, 164, 0.54);
  overflow: hidden;
}

.pulse-bar > span,
.table-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-2) 0%, var(--accent) 100%);
}

.table-progress {
  min-width: 88px;
}

.table-progress.danger > span {
  background: linear-gradient(90deg, #f7b85d 0%, var(--danger) 100%);
}

.table-progress.warn > span {
  background: linear-gradient(90deg, #f2c95c 0%, #bb9c20 100%);
}

.focus-list,
.signal-list,
.watchlist-grid {
  display: grid;
  gap: 10px;
}

.focus-item,
.signal-item,
.watch-card {
  border: 1px solid rgba(196, 159, 107, 0.44);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 252, 247, 0.9);
  box-shadow: var(--shadow-soft);
}

.focus-item strong,
.signal-item strong,
.watch-card strong {
  display: block;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.focus-item p,
.signal-item p,
.watch-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.focus-item-action {
  cursor: pointer;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    border-color 0.14s ease;
}

.focus-item-action:hover,
.focus-item-action:focus-within {
  transform: translateY(-1px);
  border-color: rgba(133, 101, 43, 0.28);
  box-shadow: 0 14px 24px rgba(72, 15, 2, 0.08);
}

.focus-item[data-tone="danger"],
.signal-item[data-tone="danger"],
.watch-card[data-tone="danger"] {
  border-color: rgba(225, 83, 32, 0.34);
  background: linear-gradient(180deg, rgba(255, 240, 233, 0.92) 0%, rgba(255, 252, 247, 0.9) 100%);
}

.focus-item[data-tone="warn"],
.signal-item[data-tone="warn"],
.watch-card[data-tone="warn"] {
  border-color: rgba(173, 146, 39, 0.34);
  background: linear-gradient(180deg, rgba(255, 247, 220, 0.92) 0%, rgba(255, 252, 247, 0.9) 100%);
}

.trace-row {
  background: rgba(255, 245, 233, 0.92);
  box-shadow: inset 4px 0 0 rgba(240, 109, 47, 0.9);
}

tr.trace-action {
  cursor: pointer;
}

tr.trace-action:hover td,
tr.trace-action:focus-visible td {
  background: #fdf5e8;
}

.trace-panel {
  border-color: rgba(240, 109, 47, 0.55);
  box-shadow:
    0 18px 34px rgba(72, 15, 2, 0.1),
    inset 0 0 0 2px rgba(240, 109, 47, 0.16);
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.module-card {
  display: grid;
  gap: 12px;
  min-height: 190px;
}

.module-card .module-kicker {
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.module-card h2 {
  margin: 0;
  font-size: 1.45rem;
}

.module-card .page-subtitle {
  margin: 0;
}

.module-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}

.module-stat {
  display: grid;
  gap: 2px;
}

.module-stat strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 0.9;
}

.module-stat span {
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.module-arrow {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent-2) 0%, #ffd37a 100%);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.dashboard-story-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.05fr) minmax(0, 1.3fr);
  gap: 16px;
}

.visual-list {
  display: grid;
  gap: 12px;
}

.visual-row {
  display: grid;
  gap: 6px;
}

.visual-row.trace-action,
.watch-card.trace-action,
.focus-item.trace-action {
  cursor: pointer;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    border-color 0.14s ease;
}

.visual-row.trace-action:hover,
.visual-row.trace-action:focus-visible,
.watch-card.trace-action:hover,
.watch-card.trace-action:focus-visible,
.focus-item.trace-action:hover,
.focus-item.trace-action:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(133, 101, 43, 0.28);
  box-shadow: 0 14px 24px rgba(72, 15, 2, 0.08);
}

.visual-row.trace-action:focus-visible,
.watch-card.trace-action:focus-visible,
.focus-item.trace-action:focus-visible {
  outline: 2px solid rgba(24, 140, 101, 0.35);
  outline-offset: 2px;
}

.visual-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.88rem;
}

.visual-row-head strong {
  font-size: 0.88rem;
}

.visual-caption {
  color: var(--muted);
  font-size: 0.82rem;
}

.watch-score {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 0.9;
  color: var(--accent);
}

.story-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.story-hero p {
  margin: 8px 0 0;
}

.ops-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ops-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 8px rgba(18, 153, 46, 0.12);
}

.ops-dot.warn {
  background: var(--accent-2);
  box-shadow: 0 0 0 8px rgba(245, 176, 52, 0.14);
}

.ops-dot.danger {
  background: var(--danger);
  box-shadow: 0 0 0 8px rgba(225, 83, 32, 0.14);
}

.table-cell-stack {
  display: grid;
  gap: 6px;
}

.table-cell-inline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.table-note {
  color: var(--muted);
  font-size: 0.78rem;
}

.table-action-stack {
  display: grid;
  gap: 0.45rem;
}

.dispatch-preview-shell {
  width: min(920px, calc(100vw - 40px));
}

.dispatch-preview-meta {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dispatch-preview-body {
  margin: 0;
  min-height: 320px;
  max-height: 58vh;
  overflow: auto;
}

.dispatch-preview-email-card {
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.86);
  overflow: hidden;
}

.dispatch-preview-email-head {
  padding: 1rem 1.1rem;
  background: linear-gradient(135deg, rgba(18, 153, 46, 0.94), rgba(13, 119, 35, 0.96));
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.dispatch-preview-email-content {
  padding: 1.1rem;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.7;
}

.dispatch-preview-email-content p {
  margin: 0 0 1rem;
}

.dispatch-preview-cta {
  margin: 1.35rem 0 1rem;
}

.dispatch-preview-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.85rem 1.2rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
}

.dispatch-preview-link {
  word-break: break-word;
}

.dispatch-failure-modal .candidate-workspace-sticky {
  background: linear-gradient(180deg, rgba(255, 245, 243, 0.98) 0%, rgba(255, 241, 238, 0.94) 100%);
}

.dispatch-failure-copy {
  margin: 0;
  color: #7f2118;
  font-size: 1rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 840px) {
  .dispatch-preview-meta {
    grid-template-columns: minmax(0, 1fr);
  }
}

.split-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 16px;
  margin-bottom: 18px;
}

.scanner-console {
  display: grid;
  gap: 14px;
}

.scanner-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.scanner-status-card {
  min-height: 100%;
}

.scanner-status-card .badge {
  margin-bottom: 10px;
}

.page-store-terminal .app-shell {
  max-width: 1180px;
}

.kiosk-head {
  align-items: flex-start;
}

.kiosk-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.kiosk-home-btn {
  margin-top: 18px;
}

.kiosk-terminal-hero {
  align-items: stretch;
}

.kiosk-context-panel,
.kiosk-status-panel,
.kiosk-launch-card {
  min-height: 100%;
}

.kiosk-context-summary {
  margin-top: 14px;
  border: 1px dashed rgba(72, 15, 2, 0.18);
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.56);
  font-weight: 700;
  color: var(--ink-soft);
}

.kiosk-status-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.kiosk-status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(18, 153, 46, 0.22);
  background: rgba(18, 153, 46, 0.1);
  color: var(--accent-deep);
  font-weight: 700;
}

.kiosk-status-chip.muted {
  color: var(--muted);
  border-color: rgba(72, 15, 2, 0.1);
  background: rgba(255, 248, 232, 0.78);
}

.kiosk-launch-grid {
  margin-top: 8px;
}

.kiosk-launch-card {
  display: grid;
  gap: 14px;
  text-decoration: none;
}

.kiosk-launch-card h2 {
  font-size: clamp(2rem, 1.1rem + 2vw, 3rem);
}

.kiosk-launch-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.kiosk-launch-hint {
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 700;
}

.store-kiosk-mode .desktop-nav-row,
.store-kiosk-mode .desktop-home-btn {
  display: none !important;
}

body.store-kiosk-mode {
  overflow: hidden;
}

body.store-kiosk-mode,
body.store-kiosk-mode * {
  -webkit-tap-highlight-color: transparent;
}

.kiosk-ops-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 8px;
}

.kiosk-mode-switch {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.kiosk-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(196, 159, 107, 0.44);
  background: rgba(255, 248, 232, 0.82);
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  touch-action: manipulation;
}

.kiosk-mode-btn.active {
  border-color: rgba(18, 153, 46, 0.52);
  background: linear-gradient(180deg, rgba(18, 153, 46, 0.14), rgba(18, 153, 46, 0.06));
  color: var(--accent-deep);
}

.kiosk-ops-item {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(196, 159, 107, 0.44);
  background: rgba(255, 248, 232, 0.8);
  box-shadow: var(--shadow-soft);
}

.kiosk-ops-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kiosk-ops-value {
  font-size: 0.92rem;
  line-height: 1.25;
}

.store-kiosk-mode .app-shell {
  max-width: 100vw;
  min-height: 100vh;
  height: 100vh;
  padding: 8px 10px 10px;
  gap: 8px;
  overflow: hidden;
}

.store-kiosk-mode header.page-head {
  display: none !important;
}

.store-kiosk-mode header.page-head .page-subtitle,
.store-kiosk-mode .kiosk-aux-copy,
.store-kiosk-mode .kiosk-back-btn {
  display: none !important;
}

.store-kiosk-mode .kiosk-mode-switch {
  display: grid;
}

.store-kiosk-mode .split-hero {
  grid-template-columns: 1fr;
}

.store-kiosk-mode .panel {
  padding: 16px;
  min-height: 0;
}

.store-kiosk-mode.store-kiosk-layout-pi .kiosk-ops-bar {
  gap: 6px;
}

.store-kiosk-mode.store-kiosk-layout-pi .kiosk-ops-item {
  padding: 10px 12px;
  min-height: 0;
}

.store-kiosk-mode.store-kiosk-layout-pi .kiosk-ops-label {
  font-size: 0.68rem;
}

.store-kiosk-mode.store-kiosk-layout-pi .kiosk-ops-value {
  font-size: 0.95rem;
  line-height: 1.1;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-scan .kiosk-mode-switch,
.store-kiosk-mode.store-kiosk-layout-pi.page-store-production .kiosk-mode-switch {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 6px;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-scan.store-kiosk-waste-workflow .kiosk-mode-switch {
  margin: 0 0 2px;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-scan .kiosk-mode-btn,
.store-kiosk-mode.store-kiosk-layout-pi.page-store-production .kiosk-mode-btn {
  min-height: 34px;
  padding: 5px 8px;
  border-radius: 12px;
  font-size: 0.72rem;
  line-height: 1.05;
  white-space: nowrap;
}

.store-kiosk-mode input,
.store-kiosk-mode select,
.store-kiosk-mode textarea,
.store-kiosk-mode button,
.store-kiosk-mode .tab-chip,
.store-kiosk-mode .camera-btn {
  min-height: 52px;
  font-size: 0.94rem;
  touch-action: manipulation;
}

.store-kiosk-mode button,
.store-kiosk-mode .tab-chip,
.store-kiosk-mode .camera-btn,
.store-kiosk-mode .kiosk-mode-btn,
.store-kiosk-mode .material-picker-btn {
  user-select: none;
  -webkit-user-select: none;
}

.store-kiosk-mode .tab-chip {
  padding-inline: 20px;
}

.store-kiosk-mode .scan-actions,
.store-kiosk-mode .nav-row {
  gap: 8px;
}

.scan-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 12px;
}

.scan-view-section {
  display: grid;
  gap: 12px;
}

.scan-history-panel {
  display: grid;
  gap: 12px;
}

.scan-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.scan-history-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}

.scan-history-date-group,
.scan-history-filter-group {
  display: grid;
  gap: 8px;
}

.scan-history-date-row,
.scan-history-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.scan-history-filter-label {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.scan-history-summary {
  color: var(--ink-soft);
  font-weight: 700;
}

.scan-history-list {
  display: grid;
  gap: 10px;
}

.scan-history-card {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(196, 159, 107, 0.32);
  background: rgba(255, 250, 242, 0.88);
}

.scan-history-card.is-expanded {
  border-color: rgba(18, 153, 46, 0.46);
  box-shadow: 0 10px 18px rgba(18, 153, 46, 0.1);
}

.scan-history-card.is-revoked {
  background: rgba(255, 241, 236, 0.92);
}

.scan-history-card.is-pending {
  background: rgba(255, 247, 230, 0.94);
}

.scan-history-card.is-failed {
  background: rgba(255, 241, 236, 0.92);
}

.scan-history-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.scan-history-time {
  color: var(--text-strong);
  font-size: 1rem;
}

.scan-history-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.scan-history-title {
  color: var(--brand-green-700);
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.15;
}

.scan-history-subtitle,
.scan-history-meta,
.scan-history-empty {
  color: var(--ink-soft);
  line-height: 1.35;
}

.scan-history-actions {
  display: flex;
  justify-content: flex-start;
  padding: 0 10px 0 0;
  overflow: visible;
}

.scan-history-entry-btn {
  display: grid;
  gap: 8px;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
}

.scan-history-entry-btn:hover,
.scan-history-entry-btn:active {
  transform: none;
  background: transparent;
  box-shadow: none;
}

.history-revoke-btn {
  margin-right: auto;
  max-width: 100%;
}

.scan-waste-panel {
  display: grid;
  gap: 14px;
}

.scan-waste-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.scan-waste-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.waste-trend-tab-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.waste-trend-tab-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex: 0 0 auto;
}

.scan-waste-head > div {
  min-width: 0;
}

.scan-waste-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.scan-waste-view-panel {
  display: grid;
  gap: 14px;
}

.scan-waste-entry-panel {
  min-height: 0;
}

.scan-waste-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.scan-waste-card {
  display: grid;
  gap: 10px;
  min-height: 0;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(196, 159, 107, 0.32);
  background: linear-gradient(180deg, rgba(255, 252, 247, 0.96) 0%, rgba(255, 248, 232, 0.82) 100%);
  box-shadow: var(--shadow-soft);
}

.scan-waste-card .eyebrow {
  margin: 0;
}

.scan-waste-weight {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.3rem + 2.6vw, 4rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.scan-waste-weight.is-error {
  color: var(--danger);
}

.scan-waste-status {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}

.scan-waste-detail,
.scan-waste-selection,
.scan-waste-summary {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.scan-waste-selection {
  color: var(--ink-soft);
  font-size: 1.02rem;
  font-weight: 700;
}

.scan-waste-section {
  display: grid;
  gap: 12px;
}

.scan-waste-section-materials {
  min-height: 0;
}

.scan-waste-section-head {
  display: grid;
  gap: 4px;
}

.scan-waste-section-head h3 {
  margin: 0;
}

.scan-waste-section-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.scan-waste-button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.waste-picker-btn {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 4px;
  min-height: 84px;
  padding: 14px 16px;
  text-transform: none;
  letter-spacing: 0.01em;
  text-align: left;
  border-color: rgba(172, 136, 88, 0.4);
  background: linear-gradient(180deg, rgba(255, 248, 232, 0.96) 0%, rgba(255, 255, 255, 0.84) 100%);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}

.waste-picker-btn:hover {
  background: linear-gradient(180deg, rgba(255, 249, 236, 1) 0%, rgba(255, 255, 255, 0.92) 100%);
}

.waste-picker-btn.active {
  border-color: rgba(18, 153, 46, 0.6);
  background: linear-gradient(135deg, rgba(18, 153, 46, 0.12) 0%, rgba(255, 255, 255, 0.98) 100%);
  color: var(--accent-deep);
  box-shadow: 0 14px 24px rgba(18, 153, 46, 0.12);
}

.waste-picker-btn:disabled {
  cursor: not-allowed;
  opacity: 0.56;
  transform: none;
  box-shadow: none;
}

.waste-picker-btn-material {
  min-height: 92px;
}

.waste-picker-name {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.15;
}

.waste-picker-meta {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.waste-picker-btn.active .waste-picker-meta {
  color: rgba(13, 119, 35, 0.92);
}

.scan-waste-history-list {
  display: grid;
  gap: 12px;
}

.scan-waste-history-panel .scan-waste-history-list {
  max-height: min(54vh, 520px);
  overflow: auto;
}

.scan-waste-history-list .scan-history-card {
  min-height: 0;
}

.scan-waste-history-list .scan-history-subtitle {
  color: var(--ink-soft);
}

.store-kiosk-mode.page-store-scan .scan-kiosk-grid {
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: 8px;
}

.store-kiosk-mode.page-store-scan.store-kiosk-locked .scan-kiosk-grid {
  grid-template-columns: 1fr;
}

.store-kiosk-mode.page-store-scan #scan-input-panel label,
.store-kiosk-mode.page-store-scan textarea.scan-qr-input {
  display: none;
}

.store-kiosk-mode.page-store-scan #scan-input-panel {
  padding-top: 10px;
  padding-bottom: 10px;
}

.store-kiosk-mode.page-store-scan #scan-results-panel {
  padding-top: 10px;
  padding-bottom: 10px;
}

.store-kiosk-mode.page-store-scan .scan-view-tabs {
  margin: 8px 0;
}

.store-kiosk-mode.page-store-scan .scan-history-panel {
  padding-top: 10px;
  padding-bottom: 10px;
}

.store-kiosk-mode.page-store-scan .scan-history-toolbar {
  grid-template-columns: 1fr;
  gap: 10px;
}

.store-kiosk-mode.page-store-scan .scan-history-card {
  padding: 10px 12px;
}

.store-kiosk-mode.page-store-scan .scan-waste-panel {
  padding-top: 10px;
  padding-bottom: 10px;
}

.store-kiosk-mode.page-store-scan .scan-waste-head {
  align-items: center;
}

.store-kiosk-mode.page-store-scan .scan-waste-view-tabs {
  gap: 8px;
}

.store-kiosk-mode.page-store-scan .scan-waste-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.store-kiosk-mode.page-store-scan .scan-waste-card {
  padding: 12px 13px;
}

.store-kiosk-mode.page-store-scan .scan-waste-button-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.store-kiosk-mode.page-store-scan .waste-picker-btn {
  min-height: 96px;
}

.store-kiosk-mode.page-store-scan .waste-picker-name {
  font-size: 1.04rem;
}

.store-kiosk-mode.page-store-scan .waste-picker-meta {
  font-size: 0.74rem;
}

.store-kiosk-mode.page-store-scan .scan-waste-weight {
  line-height: 0.88;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-panel {
  gap: 10px;
  min-height: 0;
  padding-top: 4px;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .app-shell {
  gap: 5px;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-head {
  gap: 8px;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-actions {
  gap: 6px;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-head .page-subtitle {
  font-size: 0.82rem;
  line-height: 1.24;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-trend-tab-chip {
  min-height: 36px;
  padding: 6px 10px;
  font-size: 0.78rem;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-trend-tab-icon {
  width: 14px;
  height: 14px;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow #waste-scale-refresh {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 0.8rem;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-view-tabs {
  gap: 8px;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-view-tabs .tab-chip {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 0.8rem;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-view-panel {
  gap: 10px;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-entry-panel {
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-grid {
  gap: 8px;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-card {
  gap: 6px;
  padding: 10px 12px;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-weight {
  font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.7rem);
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-status {
  font-size: 0.84rem;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-detail,
.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-summary {
  font-size: 0.8rem;
  line-height: 1.28;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-selection {
  font-size: 0.94rem;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-section {
  gap: 8px;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-section-materials {
  grid-template-rows: auto minmax(0, 1fr);
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-section-head {
  gap: 2px;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-section-head p {
  font-size: 0.78rem;
  line-height: 1.22;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-button-grid-containers {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-button-grid-materials {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  min-height: 0;
  align-content: start;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 1px;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-picker-btn {
  min-height: 54px;
  padding: 7px 8px;
  gap: 2px;
  border-radius: 14px;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-picker-btn-material {
  min-height: 58px;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-picker-name {
  font-size: 0.9rem;
  line-height: 1.04;
  font-weight: 800;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-picker-meta {
  font-size: 0.6rem;
  letter-spacing: 0.02em;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-trend-toolbar {
  gap: 8px;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-trend-range-tabs .tab-chip {
  min-height: 34px;
  padding: 5px 10px;
  font-size: 0.76rem;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-trend-chart-shell {
  min-height: 232px;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-trend-chart {
  height: 232px;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-trend-legend {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  max-height: 110px;
  overflow: auto;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-trend-legend-item {
  padding: 7px 8px;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-trend-legend-name {
  font-size: 0.82rem;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-trend-legend-total,
.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-trend-axis-label {
  font-size: 0.72rem;
}

.waste-success-modal-card {
  max-width: 440px;
}

.waste-undo-modal-card {
  max-width: 460px;
}

.waste-trend-toolbar {
  display: grid;
  gap: 10px;
}

.waste-trend-range-tabs {
  gap: 8px;
}

.waste-trend-subcopy {
  margin: 0;
}

.waste-trend-chart-shell {
  position: relative;
  min-height: 360px;
  border-radius: 24px;
  border: 1px solid rgba(196, 159, 107, 0.24);
  background: linear-gradient(180deg, rgba(255, 252, 247, 0.98) 0%, rgba(255, 247, 229, 0.86) 100%);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.waste-trend-chart {
  width: 100%;
  height: 360px;
  display: block;
}

.waste-trend-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  background: rgba(255, 252, 247, 0.72);
}

.waste-trend-empty[hidden] {
  display: none;
}

.waste-trend-bg {
  fill: rgba(255, 255, 255, 0.72);
}

.waste-trend-grid-line {
  stroke: rgba(169, 130, 82, 0.18);
  stroke-width: 1;
}

.waste-trend-axis-line {
  stroke: rgba(124, 96, 61, 0.34);
  stroke-width: 1.2;
}

.waste-trend-axis-label {
  fill: rgba(108, 81, 53, 0.86);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.waste-trend-axis-label-y {
  text-anchor: end;
}

.waste-trend-point {
  opacity: 0.96;
}

.waste-trend-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.waste-trend-legend-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 252, 247, 0.86);
  border: 1px solid rgba(196, 159, 107, 0.24);
}

.waste-trend-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.84);
}

.waste-trend-legend-name {
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--ink);
}

.waste-trend-legend-total {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.waste-success-detail {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(18, 153, 46, 0.26);
  background: rgba(243, 255, 246, 0.9);
  color: var(--brand-green-700);
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1.08;
  text-align: center;
}

.waste-undo-detail {
  min-height: 54px;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-history-list {
  max-height: min(48vh, 420px);
  gap: 8px;
  overflow: auto;
  padding-right: 10px;
}

.store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-history-list .scan-history-card {
  padding: 8px 10px;
  gap: 4px;
}

@media (max-width: 920px) {
  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-button-grid-materials {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-grid {
    grid-template-columns: 1fr;
  }

  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-button-grid-containers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-button-grid-materials {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.store-kiosk-mode.page-store-scan .scan-sync-banner {
  padding: 8px 10px;
  gap: 8px;
}

.store-kiosk-mode.page-store-scan .scan-sync-detail {
  font-size: 0.8rem;
}

.store-kiosk-mode.page-store-scan .scan-sync-now {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 0.78rem;
}

.store-kiosk-mode.page-store-scan .scan-history-title {
  font-size: 1rem;
}

.store-kiosk-mode.page-store-scan .scan-itemid-open-btn {
  min-height: 48px;
  padding-inline: 16px;
}

.store-kiosk-mode.page-store-scan .scan-itemid-modal-card {
  width: min(560px, 100%);
  padding: 16px;
}

.store-kiosk-mode.page-store-scan .kiosk-value-shell {
  min-height: 58px;
}

.store-kiosk-mode.page-store-scan .scan-itemid-form .kiosk-value-display {
  min-height: 56px;
  font-size: 1.08rem;
}

.store-kiosk-mode.page-store-scan .scan-itemid-form .kiosk-value-prefix {
  font-size: 0.96rem;
}

.store-kiosk-mode.page-store-scan .kiosk-numpad-btn {
  min-height: 50px;
}

.store-kiosk-mode.page-store-scan .scan-results-table {
  display: none;
}

.kiosk-scan-log {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 8px;
}

.store-kiosk-mode.page-store-scan .kiosk-scan-log {
  display: grid;
}

.kiosk-scan-log-item {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(196, 159, 107, 0.38);
  background: rgba(255, 248, 232, 0.72);
}

.kiosk-scan-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.kiosk-scan-log-body,
.kiosk-scan-log-empty {
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.35;
}

.kiosk-scan-log-foot {
  display: flex;
  justify-content: flex-end;
}

.scan-log-action-cell {
  white-space: nowrap;
}

.scan-log-revoke-btn {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 0.78rem;
  line-height: 1.1;
}

.store-kiosk-mode.page-store-production.store-kiosk-locked #sp-store-panel {
  display: none !important;
}

.store-kiosk-mode.page-store-production #sp-secondary-row {
  display: none !important;
}

.store-kiosk-mode.page-store-production #sp-produce-submit,
.store-kiosk-mode.page-store-production #sp-produce-clear {
  min-height: 40px;
  padding: 6px 12px;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(72, 15, 2, 0.12);
}

.store-kiosk-mode.page-store-production #sp-produce-submit.produce-submit-btn {
  gap: 1px;
}

.store-kiosk-mode.page-store-production #sp-produce-submit .produce-submit-label {
  font-size: 0.8rem;
}

.store-kiosk-mode.page-store-production #sp-produce-submit .produce-submit-state {
  font-size: 0.56rem;
  line-height: 1.08;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production .tab-panel[data-sp-tab-panel="sp-produce-panel"]:not([hidden]) {
  display: grid;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production .tab-panel[data-sp-tab-panel="sp-history-panel"]:not([hidden]) {
  display: grid;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production .tab-panel[data-sp-tab-panel="sp-produce-panel"] > .panel:first-child {
  display: grid;
  gap: 8px;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production .tab-panel[data-sp-tab-panel="sp-produce-panel"] > .panel:first-child > .row:first-child {
  grid-template-columns: minmax(0, 2.15fr) minmax(164px, 0.7fr);
  align-items: start;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production .tab-panel[data-sp-tab-panel="sp-produce-panel"] > .panel:first-child > .nav-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production #sp-produce-summary {
  margin-top: 0;
  font-size: 0.78rem;
  line-height: 1.25;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production .material-picker-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-height: 336px;
  gap: 6px;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production .material-picker-btn {
  min-height: 58px;
  padding: 8px 9px;
  border-radius: 12px;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production .material-picker-name {
  display: -webkit-box;
  font-size: 0.82rem;
  line-height: 1.08;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production .material-picker-meta {
  display: none;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production .pack-count-shell {
  gap: 0;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production .pack-count-stepper {
  grid-template-columns: 58px minmax(0, 1fr) 58px;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production .pack-count-btn {
  min-height: 58px;
  border-radius: 14px;
  font-size: 1.5rem;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production #sp-pack-count {
  min-height: 58px;
  border-radius: 14px;
  font-size: 1.18rem;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production #sp-tab-switch {
  margin-bottom: 10px;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production #sp-tab-switch .tab-chip {
  min-height: 42px;
  padding: 8px 14px;
  font-size: 0.82rem;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production #sp-results-panel {
  display: grid;
  gap: 8px;
}

.sp-history-controls,
.sp-history-date-group {
  display: grid;
  gap: 6px;
}

.sp-history-date-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sp-history-date-row input[type="date"] {
  min-width: 170px;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production #sp-history-summary {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.3;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production .sp-history-controls {
  justify-items: end;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production .sp-history-date-row input[type="date"] {
  min-height: 40px;
  font-size: 0.86rem;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production #sp-history-today {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 0.76rem;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production #sp-results-panel .table-wrap {
  max-height: calc(100vh - 258px);
  overflow: auto;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production .production-history-table th,
.store-kiosk-mode.store-kiosk-layout-pi.page-store-production .production-history-table td {
  padding: 7px 8px;
  font-size: 0.74rem;
  line-height: 1.2;
  vertical-align: top;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production .production-history-table .badge {
  min-height: 24px;
  padding: 4px 8px;
  font-size: 0.68rem;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production .history-reprint-btn {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 0.72rem;
  line-height: 1.1;
}

.store-kiosk-mode.store-kiosk-layout-pi.page-store-production .history-revoke-btn {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 0.72rem;
  line-height: 1.1;
}

.kiosk-production-latest {
  display: none;
}

.store-kiosk-mode.page-store-production .kiosk-production-latest {
  display: grid;
  gap: 8px;
}

.kiosk-production-card,
.kiosk-production-empty {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(196, 159, 107, 0.38);
  background: rgba(255, 248, 232, 0.72);
}

.kiosk-production-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.kiosk-production-card-body {
  display: grid;
  gap: 4px;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.kiosk-production-strip {
  display: grid;
  gap: 8px;
  min-height: 0;
}

.kiosk-production-strip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.kiosk-production-strip-head strong {
  font-size: 0.94rem;
}

.kiosk-production-strip-summary {
  margin-top: 0;
}

.kiosk-production-list {
  display: grid;
  gap: 6px;
  max-height: clamp(240px, 34vh, 420px);
  overflow-y: auto;
  padding-right: 2px;
}

.kiosk-production-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(196, 159, 107, 0.34);
  background: rgba(255, 248, 232, 0.78);
}

.kiosk-production-item-head {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.kiosk-production-item-head strong {
  font-size: 0.84rem;
  line-height: 1.05;
}

.kiosk-production-item-head span {
  color: var(--ink-soft);
  font-size: 0.74rem;
  line-height: 1.1;
}

.kiosk-production-item-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.kiosk-production-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.15;
}

.kiosk-production-item-foot {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: 0.72rem;
  line-height: 1.15;
  word-break: break-word;
}

.page-login .app-shell {
  max-width: 620px;
}

.page-login header.page-head {
  padding-bottom: 22px;
}

@media (max-width: 980px) {
  .grid.two,
  .grid.three,
  .card-metrics,
  .pulse-grid,
  .module-grid,
  .hero-grid,
  .dashboard-story-grid,
  .split-hero,
  .scanner-quick-grid,
  form .row {
    grid-template-columns: 1fr;
  }

  .page-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .inventory-health-card-grid {
    grid-template-columns: 1fr;
  }

  .material-admin-card-grid {
    grid-template-columns: 1fr;
  }

  .material-admin-card-actions {
    grid-template-columns: 1fr;
  }

  header.page-head > div > .page-title::before {
    width: 132px;
    height: 30px;
  }

  header.page-head {
    padding: 22px 20px;
  }

  .page-title {
    font-size: clamp(1.8rem, 1.1rem + 2vw, 2.6rem);
  }

  .label-preview-content {
    grid-template-columns: 1fr;
  }

  .kds-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .order-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .order-picklist-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scan-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .kiosk-ops-bar,
  .kiosk-launch-grid,
  .kiosk-mode-switch {
    grid-template-columns: 1fr;
  }

  .kiosk-launch-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (min-width: 900px) {
  .inventory-health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .material-admin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .inventory-health-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .material-admin-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1800px) {
  .inventory-health-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .app-shell {
    padding: 18px 12px 44px;
  }

  header.page-head {
    border-radius: 24px;
    padding: 18px 16px;
  }

  .kds-list {
    grid-template-columns: 1fr;
  }

  .kds-title {
    font-size: 1.2rem;
  }

  .kds-qty-value {
    font-size: 1.7rem;
  }

  .order-actions {
    grid-template-columns: 1fr;
  }

  .order-picklist-actions {
    grid-template-columns: 1fr;
  }

  .dispatch-check-item {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .dispatch-check-status {
    grid-column: 2;
    justify-items: start;
    grid-auto-flow: column;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
  }

  .table-cell-inline {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

@media print {
  @page {
    size: A4 portrait;
    margin: 10mm;
  }

  body.printing-order {
    background: #fff;
  }

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

  body.printing-order .order-print-sheet {
    display: block !important;
    margin: 0;
    width: auto;
    min-height: 0;
    padding: 0;
  }
}

.hiring-layout {
  display: grid;
  gap: 1.25rem;
}

.hiring-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}

.hiring-grid--wide {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
}

.hiring-candidate-grid {
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
}

.candidate-pipeline-panel {
  width: 100%;
}

.candidate-upload-tool {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.candidate-upload-row {
  align-items: end;
}

.opening-board-panel {
  width: 100%;
}

.candidate-pipeline-filters {
  align-items: end;
}

.opening-board-panel .table-wrap,
.candidate-pipeline-panel .table-wrap,
.opening-board-panel table,
.candidate-pipeline-panel .hiring-table-candidates {
  width: 100%;
}

.page-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.opening-editor-modal {
  position: fixed;
  inset: 0;
  z-index: 2450;
  display: grid;
  justify-items: end;
  overflow: hidden;
}

.opening-editor-modal[hidden] {
  display: none !important;
}

.opening-editor-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(245, 176, 52, 0.12), transparent 28%),
    rgba(58, 24, 7, 0.4);
  backdrop-filter: blur(3px);
}

.opening-editor-shell {
  position: relative;
  z-index: 1;
  width: min(560px, 100vw);
  height: 100dvh;
  max-width: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.99) 0%, rgba(250, 244, 233, 0.98) 100%);
  border-left: 1px solid rgba(172, 136, 88, 0.18);
  box-shadow: -20px 0 40px rgba(72, 15, 2, 0.16);
}

.opening-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid rgba(172, 136, 88, 0.18);
}

.opening-editor-head h2 {
  margin: 4px 0 0;
}

.opening-editor-body {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 18px 22px;
}

.opening-editor-card {
  gap: 0.9rem;
}

.opening-prompt-card {
  gap: 0.95rem;
}

.opening-editor-warning-box {
  min-height: 84px;
  white-space: pre-wrap;
  line-height: 1.5;
}

#opening-editor-openclaw-prompt {
  min-height: 320px;
  white-space: pre-wrap;
  font-family: "SFMono-Regular", SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.55;
}

.opening-editor-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.opening-editor-actions {
  display: grid;
  gap: 14px;
  padding: 18px 22px 22px;
  border-top: 1px solid rgba(172, 136, 88, 0.18);
  background: rgba(255, 250, 241, 0.96);
}

.opening-editor-action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.candidate-workspace-modal {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: grid;
  place-items: center;
  overflow: auto;
}

.candidate-workspace-modal[hidden] {
  display: none !important;
}

.candidate-workspace-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(245, 176, 52, 0.15), transparent 30%),
    rgba(58, 24, 7, 0.48);
  backdrop-filter: blur(3px);
}

.candidate-workspace-shell {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  margin: 20px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border-radius: 30px;
}

.candidate-workspace-sticky {
  display: grid;
  gap: 1rem;
  padding: 1.35rem 1.45rem 0;
  background:
    linear-gradient(180deg, rgba(255, 251, 243, 0.98) 0%, rgba(255, 250, 241, 0.92) 100%);
  border-bottom: 1px solid rgba(172, 136, 88, 0.18);
}

.candidate-workspace-body {
  overflow: auto;
  min-height: 0;
  display: grid;
  gap: 1rem;
  padding: 1rem 1.45rem 1.45rem;
  background:
    linear-gradient(180deg, rgba(255, 249, 239, 0.96) 0%, rgba(250, 244, 233, 0.96) 100%);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.candidate-workspace-head {
  align-items: flex-start;
}

.candidate-workspace-actions {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.candidate-workspace-close {
  min-width: 112px;
}

.candidate-workspace-summary {
  margin-bottom: 0.35rem;
}

.candidate-workspace-section {
  gap: 0.8rem;
}

.candidate-inline-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.75rem;
  margin-top: 0.45rem;
}

.candidate-status-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.candidate-status-field {
  display: grid;
  gap: 0.28rem;
  min-width: 170px;
}

.candidate-status-field label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-text);
}

.candidate-status-toolbar select {
  min-height: 44px;
}

.candidate-status-toolbar button {
  width: auto;
  min-width: 112px;
  align-self: end;
}

.candidate-profile-section {
  display: grid;
  gap: 0.9rem;
  padding-top: 0.9rem;
}

.candidate-section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
}

.candidate-section-head h3 {
  margin-bottom: 0.2rem;
}

.candidate-control-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.candidate-interview-eval-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
}

.candidate-subcard {
  display: grid;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(133, 101, 43, 0.14);
  background: rgba(255, 252, 246, 0.92);
}

.candidate-subcard h4 {
  margin: 0;
}

.candidate-summary-notes textarea {
  min-height: 150px;
  resize: vertical;
}

.candidate-resume-panel {
  gap: 0.9rem;
}

.candidate-resume-panel .button-link {
  width: auto;
  min-width: 180px;
}

.resume-preview-wrap {
  border: 1px solid rgba(133, 101, 43, 0.18);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(248, 243, 233, 0.92);
  min-height: 640px;
}

.resume-preview-wrap iframe {
  display: block;
  width: 100%;
  height: 640px;
  border: 0;
  background: #fff;
}

.candidate-evaluation-stack .log-box {
  min-height: 3.25rem;
}

.candidate-evaluation-selected {
  padding: 0.85rem 0.95rem;
  border-radius: 16px;
  border: 1px solid rgba(133, 101, 43, 0.16);
  background: rgba(249, 244, 235, 0.95);
  color: var(--text-primary);
}

.candidate-evaluation-selected-grid {
  display: grid;
  gap: 0.75rem 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.candidate-evaluation-selected-grid .wide {
  grid-column: 1 / -1;
}

.candidate-evaluation-selected-grid .label {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--text-muted);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.interview-selection-empty {
  padding: 0.95rem 1rem;
  border-radius: 16px;
  border: 1px dashed rgba(133, 101, 43, 0.22);
  background: rgba(250, 244, 234, 0.9);
}

.interview-selection-empty strong {
  display: block;
  margin-bottom: 0.3rem;
}

.interview-selection-card {
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem 0.95rem;
  border-radius: 16px;
  border: 1px solid rgba(133, 101, 43, 0.16);
  background: rgba(255, 252, 246, 0.96);
}

.interview-selection-card.is-active {
  border-color: rgba(24, 140, 101, 0.38);
  box-shadow: inset 0 0 0 1px rgba(24, 140, 101, 0.18);
  background: rgba(244, 252, 248, 0.96);
}

.interview-selection-main {
  display: grid;
  gap: 0.15rem;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.interview-selection-time {
  font-weight: 700;
  font-size: 1rem;
}

.interview-selection-meta {
  color: var(--text-muted);
  font-size: 0.92rem;
}

.interview-selection-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

html.modal-open,
body.modal-open {
  overflow: hidden;
}

body.modal-open {
  overflow: hidden;
  position: fixed;
  inset: 0;
  width: 100%;
}

.hiring-zone {
  border-width: 2px;
  box-shadow:
    0 20px 42px rgba(72, 15, 2, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.hiring-zone::before {
  height: 7px;
  opacity: 0.96;
}

.hiring-zone-create::before {
  background: linear-gradient(90deg, #12992e 0%, #5bc56f 35%, rgba(18, 153, 46, 0.08) 100%);
}

.hiring-zone-board::before {
  background: linear-gradient(90deg, #f5b034 0%, #f06d2f 44%, rgba(240, 109, 47, 0.08) 100%);
}

.hiring-zone-pipeline::before {
  background: linear-gradient(90deg, #480f02 0%, #9c3c13 42%, rgba(156, 60, 19, 0.08) 100%);
}

.hiring-zone-detail::before {
  background: linear-gradient(90deg, #12992e 0%, #f5b034 48%, rgba(245, 176, 52, 0.08) 100%);
}

.hiring-zone .page-head,
.hiring-zone .inline-form {
  position: relative;
  z-index: 1;
}

.hiring-zone .page-head {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(172, 136, 88, 0.42);
}

.detail-card {
  border: 1px solid rgba(133, 101, 43, 0.18);
  border-radius: 22px;
  background: rgba(255, 252, 246, 0.88);
  padding: 1rem 1.1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.detail-card h3,
.detail-card h4 {
  margin: 0 0 0.45rem;
}

.detail-meta {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-top: 0.85rem;
}

.detail-meta strong {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-text);
  margin-bottom: 0.18rem;
}

.detail-actions,
.inline-form,
.stack-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.stack-actions {
  flex-direction: column;
  align-items: stretch;
}

.log-box {
  white-space: pre-wrap;
  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
  font-size: 0.92rem;
  background: rgba(248, 243, 233, 0.92);
  border: 1px solid rgba(133, 101, 43, 0.18);
  border-radius: 18px;
  padding: 0.9rem 1rem;
  min-height: 6rem;
}

.hiring-list {
  display: grid;
  gap: 0.75rem;
}

.hiring-list-item {
  display: grid;
  gap: 0.35rem;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  border: 1px solid rgba(133, 101, 43, 0.16);
  background: rgba(255, 252, 246, 0.92);
}

.hiring-list-item button.link-button {
  padding: 0;
}

.link-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--brand-green-700);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.link-button:hover {
  color: var(--brand-orange-700);
}

.metric-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(243, 239, 228, 0.92);
  color: var(--brand-green-700);
  font-weight: 700;
}
.metric-inline input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #1c7a31;
}

.feedback-err-details summary {
  cursor: pointer;
  font-size: 0.78rem;
}
.feedback-err-trace {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: rgba(193, 39, 39, 0.05);
  border-radius: 6px;
  font-size: 0.72rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 360px;
  max-height: 200px;
  overflow: auto;
}

.interview-setup-panel,
.interview-schedule-panel {
  align-content: start;
}

.interview-setup-panel {
  display: grid;
  gap: 1rem;
}

.interview-setup-card {
  display: grid;
  gap: 0.85rem;
}

.interviewer-roster {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.interviewer-roster-card {
  display: grid;
  gap: 0.22rem;
  padding: 0.8rem 0.9rem;
  border-radius: 16px;
  border: 1px solid rgba(133, 101, 43, 0.14);
  background: rgba(248, 243, 233, 0.82);
}

.interviewer-drawer {
  display: grid;
  gap: 0.85rem;
  padding-top: 0.25rem;
}

.interview-secondary-tool {
  display: grid;
  gap: 0.85rem;
}

.interview-secondary-tool summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--text-strong);
  list-style: none;
}

.interview-secondary-tool summary::-webkit-details-marker {
  display: none;
}

.interview-secondary-tool summary::after {
  content: "Open";
  margin-left: 0.65rem;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-text);
}

.interview-secondary-tool[open] summary::after {
  content: "Close";
}

.interview-schedule-toolbar {
  align-items: end;
}

.interview-schedule-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.interview-agenda-board {
  display: grid;
  gap: 1rem;
}

.interview-empty-state {
  color: var(--muted-text);
  font-weight: 700;
}

.interview-day-card {
  display: grid;
  gap: 1rem;
}

.interview-day-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px dashed rgba(172, 136, 88, 0.32);
}

.interview-day-head h3 {
  margin: 0;
}

.interview-agenda-list {
  display: grid;
  gap: 0.7rem;
}

.interview-agenda-item {
  display: grid;
  grid-template-columns: minmax(160px, 188px) minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  padding: 1rem 1.05rem;
  border-radius: 20px;
  border: 1px solid rgba(133, 101, 43, 0.16);
  background: rgba(255, 252, 246, 0.96);
}

.interview-agenda-primary {
  display: grid;
  gap: 0.55rem;
  align-content: start;
}

.interview-agenda-time {
  display: grid;
  gap: 0.16rem;
  align-content: start;
}

.interview-agenda-time-main {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--text-strong);
  line-height: 1;
}

.interview-candidate-link {
  font-size: 1.28rem;
  font-weight: 900;
  line-height: 1.02;
  color: var(--text-strong);
}

.interview-agenda-candidate {
  display: inline-block;
  text-align: left;
  font-size: 1.55rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.interview-agenda-main {
  display: grid;
  gap: 0.32rem;
  min-width: 0;
  align-content: start;
  padding-top: 0.15rem;
}

.interview-agenda-subline {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted-text);
}

.interview-agenda-meta {
  display: grid;
  gap: 0.12rem;
  font-size: 0.82rem;
  color: var(--muted-text);
}

.interview-agenda-status {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 0.35rem;
}

.onboarding-candidate-board {
  display: grid;
  gap: 1rem;
}

.onboarding-candidate-card {
  display: grid;
  gap: 1rem;
}

.onboarding-candidate-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px dashed rgba(172, 136, 88, 0.32);
}

.onboarding-candidate-head h3 {
  margin: 0 0 0.4rem;
}

.onboarding-checklist {
  display: grid;
  gap: 0.85rem;
}

.onboarding-checklist-item {
  display: grid;
  gap: 0.8rem;
  padding: 1rem 1.05rem;
  border-radius: 20px;
  border: 1px solid rgba(133, 101, 43, 0.16);
  background: rgba(255, 252, 246, 0.96);
}

.onboarding-task-main {
  display: grid;
  gap: 0.18rem;
}

.onboarding-task-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  align-items: end;
}

.onboarding-task-action {
  display: flex;
  gap: 0.65rem;
  justify-content: flex-end;
}

.onboarding-offer-preview {
  display: grid;
  gap: 0.8rem;
  padding-top: 0.4rem;
  border-top: 1px dashed rgba(172, 136, 88, 0.24);
}

.dispatch-preview-attachments {
  padding: 0.95rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(172, 136, 88, 0.18);
  background: rgba(255, 250, 242, 0.9);
}

.dispatch-preview-attachments strong {
  display: block;
  margin-bottom: 0.55rem;
}

.dispatch-preview-attachments ul {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.28rem;
}

.dispatch-preview-attachments a {
  color: #0d7723;
  font-weight: 700;
  text-decoration: none;
}

.dispatch-preview-attachments a:hover,
.dispatch-preview-attachments a:focus {
  text-decoration: underline;
}

.error-text {
  color: #9d2f15;
}

.booking-slot-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.booking-date-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.booking-date-tab {
  border: 1px solid rgba(133, 101, 43, 0.18);
  background: rgba(255, 252, 246, 0.92);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.7rem 1rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 120ms ease,
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}

.booking-date-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(156, 35, 12, 0.28);
}

.booking-date-tab.active {
  background: linear-gradient(135deg, rgba(18, 153, 46, 0.94), rgba(15, 126, 39, 0.96));
  color: #fff;
  border-color: rgba(18, 153, 46, 0.88);
  box-shadow: 0 10px 24px rgba(18, 153, 46, 0.22);
}

.booking-slot-card {
  border-radius: 20px;
  border: 1px solid rgba(133, 101, 43, 0.16);
  background: rgba(255, 252, 246, 0.96);
  padding: 1rem;
  display: grid;
  gap: 0.75rem;
}

.booking-slot-time {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-strong);
}

.booking-slot-card p {
  margin: 0;
}

.booking-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.35rem;
}

.code-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: rgba(244, 234, 210, 0.9);
  color: var(--brand-orange-700);
  font-weight: 700;
  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
  font-size: 0.82rem;
}

.detail-head-side {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.detail-badge-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(172, 136, 88, 0.28);
  background: rgba(255, 248, 232, 0.9);
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-badge::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.58);
}

.status-badge[data-tone="ok"] {
  background: #e8f6eb;
  border-color: #8bd5a0;
  color: var(--ok);
}

.status-badge[data-tone="warn"] {
  background: #fff7db;
  border-color: #e9d17a;
  color: var(--warn);
}

.status-badge[data-tone="danger"] {
  background: #fff0ea;
  border-color: #f1b39c;
  color: var(--danger);
}

.status-badge[data-tone="info"] {
  background: #f3f4ff;
  border-color: #bfc5f0;
  color: #5547b8;
}

.status-badge[data-tone="neutral"] {
  background: #f4ead2;
  border-color: #ddc599;
  color: #8a5b24;
}

.status-badge[data-tone="muted"] {
  background: #f3eee7;
  border-color: #d8c8b4;
  color: #7a6551;
}

.table-primary-stack {
  display: grid;
  gap: 6px;
}

.table-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(244, 234, 210, 0.68);
  color: #6d4218;
  border: 1px solid rgba(172, 136, 88, 0.28);
  font-size: 0.74rem;
  font-weight: 700;
}

.summary-chip strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.96rem;
  line-height: 1;
}

.table-note-strong {
  color: #6c4a23;
  font-weight: 700;
}

.hiring-table-candidates {
  min-width: 0;
  width: 100%;
}

.status-stack-compact {
  display: grid;
  gap: 6px;
}

.status-stack-compact .status-badge {
  justify-self: start;
}

.opening-status-stack {
  display: grid;
  gap: 8px;
  align-content: start;
}

.opening-status-meta {
  gap: 6px;
}

.opening-status-select {
  min-height: 40px;
  max-width: 180px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 0.84rem;
  font-weight: 700;
}

.template-editor {
  display: grid;
  gap: 0.9rem;
}

.template-editor textarea {
  min-height: 9rem;
}

.booking-shell {
  max-width: 980px;
  margin: 0 auto;
}

.booking-hero {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

@media (max-width: 980px) {
  .hiring-grid,
  .hiring-grid--wide,
  .booking-hero {
    grid-template-columns: 1fr;
  }

  .candidate-pipeline-filters {
    grid-template-columns: 1fr;
  }

  .interview-day-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .interviewer-roster {
    grid-template-columns: 1fr;
  }

  .interview-agenda-item {
    grid-template-columns: 1fr;
  }

  .interview-agenda-status {
    justify-content: flex-start;
  }

  .onboarding-candidate-head {
    flex-direction: column;
  }

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

  .onboarding-task-action {
    justify-content: flex-start;
  }

  .candidate-workspace-modal {
    place-items: start stretch;
    padding: 9px 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .candidate-workspace-shell {
    width: min(100vw, calc(100vw - 18px));
    margin: 9px;
    align-self: start;
  }

  .page-head-actions {
    justify-content: flex-start;
  }

  .opening-editor-modal {
    justify-items: stretch;
    padding: 0;
  }

  .opening-editor-shell {
    width: 100vw;
    min-height: 100dvh;
    border-left: 0;
  }

  .opening-editor-head,
  .opening-editor-body,
  .opening-editor-actions {
    padding-left: 16px;
    padding-right: 16px;
  }

  .opening-editor-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .opening-editor-head > button {
    width: 100%;
  }

  .opening-editor-grid {
    grid-template-columns: 1fr;
  }

  .opening-editor-action-row {
    justify-content: stretch;
  }

  .opening-editor-action-row > button {
    width: 100%;
  }

  #candidate-detail-panel .candidate-workspace-shell {
    display: block;
    min-height: calc(100dvh - 18px);
    height: auto;
    max-height: none;
    overflow: visible;
    overflow-x: hidden;
  }

  #candidate-detail-panel .candidate-workspace-head,
  #candidate-detail-panel .candidate-workspace-actions,
  #candidate-detail-panel .detail-head-side,
  #candidate-detail-panel .detail-badge-strip,
  #candidate-detail-panel .candidate-inline-status,
  #candidate-detail-panel .candidate-status-toolbar,
  #candidate-detail-panel .candidate-workspace-summary,
  #candidate-detail-panel .candidate-workspace-section,
  #candidate-detail-panel .detail-card,
  #candidate-detail-panel .candidate-subcard,
  #candidate-detail-panel .candidate-workspace-body {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #candidate-detail-panel .candidate-workspace-sticky {
    position: static;
  }

  #candidate-detail-panel .candidate-workspace-body {
    overflow: visible;
    min-height: auto;
    padding-bottom: calc(1.45rem + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
  }

  #candidate-detail-panel .candidate-workspace-body *,
  #candidate-detail-panel .candidate-workspace-sticky * {
    min-width: 0;
  }

  #candidate-detail-panel .candidate-workspace-head,
  #candidate-detail-panel .candidate-workspace-actions,
  #candidate-detail-panel .detail-head-side,
  #candidate-detail-panel .detail-badge-strip,
  #candidate-detail-panel .candidate-inline-status,
  #candidate-detail-panel .candidate-status-toolbar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  #candidate-detail-panel .candidate-inline-status {
    gap: 0.55rem;
  }

  #candidate-detail-panel .candidate-status-field {
    min-width: 0;
    width: 100%;
  }

  #candidate-detail-panel .candidate-workspace-actions {
    gap: 12px;
  }

  #candidate-detail-panel .candidate-workspace-actions > button,
  #candidate-detail-panel .candidate-workspace-actions > .detail-head-side,
  #candidate-detail-panel .candidate-workspace-actions > .code-pill {
    max-width: 100%;
  }

  #candidate-detail-panel .detail-meta,
  #candidate-detail-panel form .row {
    grid-template-columns: 1fr;
  }

  #candidate-detail-panel .detail-meta {
    grid-template-columns: 1fr !important;
  }

  #candidate-detail-panel .detail-meta > div,
  #candidate-detail-panel .detail-card,
  #candidate-detail-panel .candidate-subcard,
  #candidate-detail-panel .log-box,
  #candidate-detail-panel .code-pill,
  #candidate-detail-panel .status-badge,
  #candidate-detail-panel .metric-inline,
  #candidate-detail-panel .table-note,
  #candidate-detail-panel h2,
  #candidate-detail-panel h3,
  #candidate-detail-panel h4,
  #candidate-detail-panel p,
  #candidate-detail-panel a,
  #candidate-detail-panel label,
  #candidate-detail-panel strong,
  #candidate-detail-panel span {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  #candidate-detail-panel input,
  #candidate-detail-panel select,
  #candidate-detail-panel textarea,
  #candidate-detail-panel .button-link,
  #candidate-detail-panel button {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #candidate-detail-panel .detail-badge-strip .status-badge,
  #candidate-detail-panel .detail-head-side .code-pill {
    width: auto;
    max-width: 100%;
  }

  #candidate-detail-panel .detail-card,
  #candidate-detail-panel .candidate-subcard {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #candidate-detail-panel .resume-preview-wrap {
    min-height: 420px;
  }

  #candidate-detail-panel .resume-preview-wrap iframe {
    height: 420px;
  }

  .candidate-control-grid,
  .candidate-interview-eval-grid {
    grid-template-columns: 1fr;
  }

  .interview-agenda-item {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .interview-agenda-status {
    justify-items: start;
  }

  .candidate-evaluation-selected-grid {
    grid-template-columns: 1fr;
  }

  .hiring-detail-head {
    align-items: flex-start;
  }

  .detail-head-side,
  .detail-badge-strip,
  .candidate-workspace-actions {
    justify-items: start;
    justify-content: flex-start;
  }
}

.material-picker-shell {
  display: grid;
  gap: 12px;
}

.pack-count-shell {
  display: block;
}

.pack-count-stepper {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  gap: 6px;
  align-items: stretch;
}

.pack-count-btn {
  min-height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(72, 15, 2, 0.14);
  background: linear-gradient(180deg, rgba(255, 248, 232, 0.96), rgba(248, 235, 210, 0.92));
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: var(--shadow-soft);
}

.pack-count-btn:disabled {
  opacity: 0.46;
  box-shadow: none;
}

#sp-pack-count {
  min-height: 52px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff9ef;
  color: var(--ink);
  text-align: center;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

#sp-pack-count::-webkit-outer-spin-button,
#sp-pack-count::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#sp-pack-count[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.material-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
  max-height: 300px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 252, 247, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.material-picker-btn {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 4px;
  width: 100%;
  min-height: 88px;
  text-align: left;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fff9ef;
  color: var(--ink);
  overflow: hidden;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.material-picker-btn:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
}

.material-picker-btn.active {
  border-color: rgba(18, 153, 46, 0.52);
  background: linear-gradient(180deg, rgba(18, 153, 46, 0.12), rgba(18, 153, 46, 0.05));
  box-shadow: 0 12px 24px rgba(18, 153, 46, 0.14);
}

.material-picker-btn.active .material-picker-name {
  color: var(--accent-deep);
}

.material-picker-name {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.material-picker-meta {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Category tag — tiny uppercase label that prints the bucket
   ("Protein"/"Vegetable"/"Sauce"/"Other") above the material name so
   the operator can scan-confirm the grouping at a glance. Each
   category gets its own tone. */
.material-picker-cat {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(58, 16, 2, 0.5);
  display: inline-block;
  align-self: start;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(58, 16, 2, 0.06);
  margin-bottom: 2px;
}
.material-picker-btn[data-material-category="protein"] .material-picker-cat {
  color: #b3231e;
  background: rgba(193, 39, 39, 0.10);
}
.material-picker-btn[data-material-category="vegetable"] .material-picker-cat {
  color: #146a26;
  background: rgba(28, 122, 49, 0.12);
}
.material-picker-btn[data-material-category="sauce"] .material-picker-cat {
  color: #8a5a14;
  background: rgba(214, 150, 35, 0.18);
}
/* The colored left rail on the button mirrors the category, so even at
   a glance the protein/veg/sauce groups stand out. */
.material-picker-btn[data-material-category="protein"] {
  border-left: 4px solid rgba(193, 39, 39, 0.55);
}
.material-picker-btn[data-material-category="vegetable"] {
  border-left: 4px solid rgba(28, 122, 49, 0.55);
}
.material-picker-btn[data-material-category="sauce"] {
  border-left: 4px solid rgba(214, 150, 35, 0.7);
}
.material-picker-btn[data-material-category="other"] {
  border-left: 4px solid rgba(58, 16, 2, 0.18);
}

.material-picker-empty {
  padding: 18px;
  border-radius: 18px;
  border: 1px dashed var(--line);
  color: var(--muted);
  background: rgba(255, 250, 242, 0.72);
}

body.store-kiosk-mode .material-picker-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: 260px;
  gap: 8px;
  padding: 10px;
}

body.store-kiosk-mode .pack-count-stepper {
  grid-template-columns: 60px minmax(0, 1fr) 60px;
}

body.store-kiosk-mode .pack-count-btn {
  min-height: 56px;
  font-size: 1.5rem;
}

body.store-kiosk-mode #sp-pack-count {
  min-height: 56px;
  font-size: 1.14rem;
}

body.store-kiosk-mode .material-picker-btn {
  min-height: 56px;
  padding: 10px 12px;
}

.history-action-cell {
  white-space: nowrap;
}

.history-action-stack {
  display: grid;
  gap: 6px;
}

.history-reprint-btn {
  min-height: 38px;
  min-width: 88px;
  padding: 8px 12px;
  font-size: 0.82rem;
  line-height: 1.1;
}

.history-revoke-btn {
  min-height: 38px;
  min-width: 88px;
  padding: 8px 12px;
  font-size: 0.82rem;
  line-height: 1.1;
}

body.store-kiosk-mode .material-picker-name {
  font-size: 0.9rem;
  line-height: 1.15;
}

body.store-kiosk-mode .material-picker-meta {
  font-size: 0.72rem;
  line-height: 1.2;
}

.kiosk-inline-btn {
  min-height: 36px !important;
  padding: 6px 10px !important;
  font-size: 0.78rem !important;
  justify-self: start;
}

.kiosk-exit-btn {
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  width: auto;
  justify-self: start;
  box-shadow: none;
}

.kiosk-exit-slot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 2px;
}

.kiosk-exit-slot-terminal {
  margin-top: 8px;
}

.kiosk-exit-modal {
  z-index: 52;
}

.kiosk-exit-modal-card {
  width: min(420px, 100%);
  display: grid;
  gap: 14px;
}

.kiosk-exit-form {
  display: grid;
  gap: 10px;
}

.kiosk-exit-form label {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.kiosk-exit-form .kiosk-value-display {
  text-align: center;
  font-size: 1.16rem;
  letter-spacing: 0.18em;
}

.kiosk-value-shell-password .kiosk-value-display::placeholder {
  letter-spacing: 0.08em;
}

.kiosk-exit-error {
  margin: 0;
  color: #b22a14;
  font-weight: 700;
  line-height: 1.35;
}

.kiosk-exit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.kiosk-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.store-kiosk-mode.page-store-production .kiosk-printer-panel {
  display: none;
}

.store-kiosk-mode.page-store-production .kiosk-printer-panel:not([hidden]) {
  display: block;
}

.store-kiosk-mode.page-store-production .kiosk-printer-modal {
  position: fixed;
  inset: 8px;
  z-index: 60;
  overflow: auto;
}

.store-kiosk-mode .kiosk-exit-btn {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 0.68rem;
}

.store-kiosk-mode.page-store-production #sp-printer-advanced-row-1,
.store-kiosk-mode.page-store-production #sp-printer-advanced-row-2,
.store-kiosk-mode.page-store-production #sp-printer-advanced-row-3,
.store-kiosk-mode.page-store-production #sp-printer-table-panel {
  display: none !important;
}

@media (max-width: 980px) {
  .material-picker-grid {
    grid-template-columns: 1fr;
    max-height: 280px;
  }
}

@media (max-height: 700px) {
  .store-kiosk-mode .app-shell {
    padding: 8px 10px 10px;
    gap: 8px;
  }

  .store-kiosk-mode .panel,
  .store-kiosk-mode .kiosk-ops-item {
    padding: 12px 14px;
  }

  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production .material-picker-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-height: 260px;
  }

  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production .pack-count-stepper {
    grid-template-columns: 52px minmax(0, 1fr) 52px;
  }

  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production .pack-count-btn,
  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production #sp-pack-count {
    min-height: 50px;
  }

  .store-kiosk-mode.page-store-production #sp-produce-submit,
  .store-kiosk-mode.page-store-production #sp-produce-clear {
    min-height: 36px;
    padding: 5px 10px;
    font-size: 0.74rem;
  }

  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production .material-picker-btn {
    min-height: 52px;
    padding: 7px 8px;
  }

  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production .material-picker-name {
    font-size: 0.74rem;
  }

  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production #sp-pack-count {
    font-size: 1.02rem;
  }

  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production .material-picker-meta {
    display: none;
  }

  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production #sp-produce-summary {
    font-size: 0.72rem;
  }

  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production #sp-results-panel .table-wrap {
    max-height: calc(100vh - 228px);
  }

  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production .kiosk-production-list {
    max-height: clamp(210px, 32vh, 320px);
  }

  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production .kiosk-production-item {
    padding: 8px 10px;
  }

  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production .kiosk-production-item-head strong {
    font-size: 0.78rem;
  }

  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production .kiosk-production-item-head span,
  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production .kiosk-production-item-meta,
  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production .kiosk-production-item-foot {
    font-size: 0.68rem;
  }
}

@media (max-height: 820px) {
  .store-kiosk-mode.page-store-production .app-shell,
  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .app-shell {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 14px;
  }

  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .app-shell {
    gap: 4px;
  }

  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-panel {
    gap: 6px;
    padding-top: 2px;
  }

  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-head .page-subtitle {
    display: none;
  }

  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-card {
    gap: 4px;
    padding: 7px 9px;
  }

  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-weight {
    font-size: clamp(1.25rem, 0.95rem + 0.92vw, 1.95rem);
  }

  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-status {
    font-size: 0.72rem;
  }

  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-detail,
  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-summary {
    font-size: 0.66rem;
    line-height: 1.12;
  }

  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-selection {
    font-size: 0.8rem;
  }

  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-button-grid-containers,
  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-button-grid-materials {
    gap: 4px;
  }

  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-picker-btn {
    min-height: 46px;
    padding: 6px 6px;
    border-radius: 10px;
  }

  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-picker-btn-material {
    min-height: 50px;
  }

  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-picker-name {
    font-size: 0.78rem;
    line-height: 0.98;
  }

  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .waste-picker-meta {
    font-size: 0.52rem;
  }

  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-view-tabs {
    gap: 6px;
  }

  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-view-tabs .tab-chip,
  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow #waste-scale-refresh {
    min-height: 32px;
    padding: 5px 10px;
    font-size: 0.72rem;
  }

  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-section {
    gap: 6px;
  }

  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-section-head p {
    display: none;
  }

  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-entry-panel {
    gap: 6px;
  }

  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-grid {
    gap: 6px;
  }

  .store-kiosk-mode.page-store-scan.store-kiosk-waste-workflow .scan-waste-history-list {
    max-height: min(42vh, 300px);
  }

  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production .tab-panel[data-sp-tab-panel="sp-produce-panel"] > .panel:first-child {
    gap: 6px;
  }

  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production .tab-panel[data-sp-tab-panel="sp-produce-panel"] > .panel:first-child > .row:first-child {
    grid-template-columns: minmax(0, 2.2fr) minmax(138px, 0.62fr);
    gap: 6px;
  }

  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production .tab-panel[data-sp-tab-panel="sp-produce-panel"] > .panel:first-child > .nav-row {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding-top: 4px;
    background: linear-gradient(180deg, rgba(255, 248, 232, 0) 0%, rgba(255, 248, 232, 0.94) 34%, rgba(255, 248, 232, 0.99) 100%);
  }

  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production .material-picker-grid {
    gap: 5px;
    max-height: 220px;
  }

  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production .material-picker-btn {
    min-height: 48px;
    padding: 6px 7px;
  }

  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production .material-picker-name {
    font-size: 0.7rem;
    line-height: 1.02;
  }

  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production .pack-count-stepper {
    grid-template-columns: 46px minmax(0, 1fr) 46px;
  }

  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production .pack-count-btn,
  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production #sp-pack-count {
    min-height: 46px;
  }

  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production #sp-pack-count {
    font-size: 0.94rem;
  }

  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production #sp-tab-switch .tab-chip {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 0.74rem;
  }

  .store-kiosk-mode.page-store-production #sp-produce-submit,
  .store-kiosk-mode.page-store-production #sp-produce-clear {
    min-height: 34px;
    padding: 4px 8px;
    font-size: 0.7rem;
  }

  .store-kiosk-mode.page-store-production #sp-produce-submit .produce-submit-label {
    font-size: 0.72rem;
  }

  .store-kiosk-mode.page-store-production #sp-produce-submit .produce-submit-state {
    font-size: 0.52rem;
  }

  .store-kiosk-mode.store-kiosk-layout-pi.page-store-production #sp-produce-summary {
    font-size: 0.68rem;
    line-height: 1.16;
  }
}

.marketing-shell {
  max-width: 1440px;
}

.marketing-head {
  background:
    linear-gradient(135deg, rgba(48, 17, 6, 0.96) 0%, rgba(92, 37, 10, 0.94) 38%, rgba(18, 153, 46, 0.92) 100%),
    radial-gradient(circle at 12% 20%, rgba(255, 212, 96, 0.16) 0%, rgba(255, 212, 96, 0) 24%);
  border-color: rgba(255, 196, 111, 0.46);
  box-shadow: 0 28px 52px rgba(72, 15, 2, 0.2);
}

.marketing-head .eyebrow {
  color: rgba(255, 239, 203, 0.78);
}

.marketing-hero-grid,
.marketing-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.9fr);
  gap: 18px;
  margin-bottom: 18px;
  align-items: start;
}

.marketing-two-col--coverage {
  grid-template-columns: minmax(320px, 0.84fr) minmax(0, 1.16fr);
}

.marketing-coverage-panel,
.marketing-heatmap-panel {
  align-self: start;
}

.marketing-heatmap-panel {
  min-width: 0;
}

.marketing-hero-panel {
  min-height: 260px;
  background:
    radial-gradient(circle at 85% 18%, rgba(255, 176, 52, 0.18) 0%, rgba(255, 176, 52, 0) 28%),
    linear-gradient(180deg, rgba(255, 250, 242, 0.98) 0%, rgba(250, 240, 219, 0.98) 100%);
}

.marketing-hero-copy h2 {
  margin: 0;
  font-size: clamp(1.7rem, 1rem + 1.6vw, 2.6rem);
  line-height: 1;
  font-family: var(--font-display);
  text-transform: uppercase;
}

.marketing-filter-panel {
  display: grid;
  align-content: start;
  gap: 14px;
}

.marketing-filter-coverage {
  display: grid;
  gap: 12px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(72, 15, 2, 0.08);
}

.marketing-filter-coverage-head {
  margin-bottom: 0;
}

.marketing-filter-location-switch {
  margin-bottom: 0;
}

.marketing-location-list--compact .marketing-location-card {
  padding: 14px 16px;
}

.marketing-location-list--compact .marketing-location-head strong {
  font-size: 0.96rem;
}

.marketing-location-list--compact .marketing-location-meta {
  gap: 8px 14px;
}

.marketing-filter-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.marketing-filter-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.marketing-filter-form input,
.marketing-filter-form select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 12px;
  font: inherit;
  color: var(--ink);
  background: rgba(255, 251, 245, 0.92);
}

.marketing-filter-wide {
  grid-column: 1 / -1;
}

.marketing-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.marketing-summary-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.marketing-store-overview {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-store-stack {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.marketing-store-panel {
  display: grid;
  gap: 18px;
}

.marketing-store-panel-head {
  align-items: flex-start;
}

.marketing-store-panel-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.marketing-store-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.marketing-store-block {
  padding: 18px;
  border: 1px solid rgba(72, 15, 2, 0.08);
  border-radius: 22px;
  background: rgba(255, 252, 246, 0.94);
  box-shadow: var(--shadow-soft);
}

.marketing-summary-card {
  min-height: 160px;
  justify-content: space-between;
  background:
    linear-gradient(180deg, rgba(255, 252, 245, 0.98) 0%, rgba(247, 238, 220, 0.98) 100%);
  border: 1px solid rgba(18, 153, 46, 0.14);
}

.marketing-summary-card .value {
  font-size: clamp(1.8rem, 1.2rem + 1vw, 2.6rem);
}

.marketing-summary-note {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.marketing-trend-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.marketing-trend-chip {
  border: 1px solid rgba(72, 15, 2, 0.08);
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(255, 252, 246, 0.92);
  box-shadow: var(--shadow-soft);
}

.marketing-trend-chip span,
.marketing-trend-chip small {
  display: block;
  color: var(--muted);
}

.marketing-trend-chip span {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.marketing-trend-chip strong {
  display: block;
  font-size: 1.24rem;
  margin-bottom: 4px;
}

.marketing-location-list,
.marketing-repeat-list {
  display: grid;
  gap: 12px;
  align-content: start;
}

.marketing-location-card,
.marketing-repeat-card {
  padding: 16px 18px;
  border: 1px solid rgba(72, 15, 2, 0.08);
  border-radius: 20px;
  background: rgba(255, 252, 246, 0.94);
  box-shadow: var(--shadow-soft);
}

.marketing-location-card {
  display: grid;
  gap: 12px;
}

.marketing-location-head,
.marketing-repeat-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.marketing-location-head strong,
.marketing-repeat-head strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
}

.marketing-protein-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(18, 153, 46, 0.22);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.marketing-protein-link:hover,
.marketing-protein-link:focus-visible {
  color: var(--accent);
  text-decoration-color: rgba(18, 153, 46, 0.64);
  outline: none;
}

.marketing-location-head p,
.marketing-repeat-head p,
.marketing-location-meta,
.marketing-repeat-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.marketing-location-meta,
.marketing-repeat-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.marketing-protein-forward {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(72, 15, 2, 0.08);
}

.marketing-protein-modal {
  z-index: 60;
}

.marketing-protein-modal-card {
  width: min(1040px, 100%);
  max-height: min(88vh, 920px);
  overflow: auto;
}

.marketing-protein-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.marketing-protein-modal-controls {
  display: grid;
  justify-items: end;
  gap: 12px;
}

.marketing-protein-cohort-threshold-switch {
  justify-content: flex-end;
}

.marketing-protein-modal-subtitle {
  margin: 8px 0 0;
}

.marketing-protein-modal .marketing-protein-forward {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.marketing-protein-forward-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 10px;
}

.marketing-protein-forward-head strong {
  font-size: 0.9rem;
}

.marketing-protein-forward-head span,
.marketing-protein-forward-note {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
  margin: 0;
}

.marketing-protein-forward-wrap {
  margin-top: 0;
}

.marketing-protein-cohort-table td {
  min-width: 90px;
}

.marketing-protein-forward-table th,
.marketing-protein-forward-table td {
  min-width: 78px;
  text-align: center;
  vertical-align: middle;
}

.marketing-protein-forward-table td:first-child,
.marketing-protein-forward-table th:first-child {
  text-align: left;
  min-width: 92px;
}

.marketing-protein-forward-table td span {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: rgba(72, 15, 2, 0.72);
  font-weight: 600;
}

.marketing-location-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 18px;
  margin-top: 0;
}

.marketing-coverage-track,
.marketing-repeat-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(72, 15, 2, 0.08);
}

.marketing-coverage-track span,
.marketing-repeat-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent) 0%, #29b647 68%, #ffd374 100%);
}

.marketing-repeat-track {
  margin-top: 12px;
}

.marketing-heatmap-panel--full {
  margin-bottom: 18px;
}

.marketing-repeat-rates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.marketing-repeat-rate {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(18, 153, 46, 0.12);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0) 100%),
    rgba(239, 248, 241, 0.94);
}

.marketing-repeat-rate span {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.marketing-repeat-rate strong {
  font-size: 1.5rem;
  line-height: 0.92;
  font-family: var(--font-display);
  color: var(--accent);
}

.marketing-repeat-rate small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.marketing-heatmap-wrap {
  overflow-x: auto;
}

.marketing-heatmap-grid {
  display: grid;
  grid-template-columns: 112px repeat(7, minmax(78px, 1fr));
  gap: 10px;
  min-width: 760px;
}

.marketing-heatmap-cell {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-size: 0.9rem;
  font-weight: 700;
  border: 1px solid rgba(72, 15, 2, 0.06);
  background: rgba(255, 252, 246, 0.86);
}

.marketing-heatmap-label,
.marketing-heatmap-row-label {
  background: rgba(72, 15, 2, 0.05);
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.marketing-window-switch {
  gap: 8px;
}

.marketing-protein-window-switch {
  justify-content: flex-end;
  margin-bottom: 14px;
}

.marketing-table-wrap {
  margin-top: 14px;
}

.marketing-cohort-table th span {
  display: block;
  margin-top: 4px;
  font-size: 0.74rem;
  color: var(--muted);
  font-weight: 600;
}

.marketing-cohort-table td {
  min-width: 86px;
  text-align: center;
  font-weight: 700;
  vertical-align: middle;
}

.marketing-cohort-table td span {
  display: block;
  margin-top: 4px;
  font-size: 0.74rem;
  color: rgba(72, 15, 2, 0.78);
  font-weight: 600;
}

.marketing-empty-cell {
  color: var(--muted);
}

.marketing-chart-card {
  padding: 14px 16px;
  border: 1px solid rgba(72, 15, 2, 0.08);
  border-radius: 20px;
  background: rgba(255, 252, 246, 0.94);
  box-shadow: var(--shadow-soft);
}

.marketing-chart svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.marketing-chart text {
  fill: var(--muted);
  font-size: 11px;
  font-family: var(--font);
}

.marketing-chart-guides line {
  stroke: rgba(72, 15, 2, 0.12);
  stroke-dasharray: 4 6;
}

.marketing-line {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.marketing-line-active {
  stroke: #f06d2f;
}

.marketing-line-retained {
  stroke: var(--accent);
}

.marketing-chart-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.82rem;
}

.marketing-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 999px;
}

.marketing-dot-active {
  background: #f06d2f;
}

.marketing-dot-retained {
  background: var(--accent);
}

.marketing-dot-neutral {
  background: #6a4b33;
}

.marketing-empty-state {
  padding: 18px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: 18px;
  background: rgba(255, 249, 239, 0.8);
}

.marketing-empty-state strong {
  display: block;
  margin-bottom: 6px;
}

.marketing-empty-state p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 1180px) {
  .marketing-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .marketing-trend-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-store-overview,
  .marketing-store-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .marketing-hero-grid,
  .marketing-two-col {
    grid-template-columns: 1fr;
  }

  .marketing-filter-form {
    grid-template-columns: 1fr;
  }

  .marketing-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .marketing-summary-grid,
  .marketing-trend-strip {
    grid-template-columns: 1fr;
  }

  .marketing-location-head,
  .marketing-repeat-head,
  .marketing-protein-forward-head,
  .marketing-protein-modal-head,
  .marketing-location-meta,
  .marketing-repeat-meta {
    display: grid;
  }

  .marketing-location-meta {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .marketing-repeat-rates {
    grid-template-columns: 1fr;
  }

  .marketing-heatmap-grid {
    grid-template-columns: 96px repeat(7, minmax(56px, 1fr));
    min-width: 560px;
  }
}

.ordering-metrics-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ordering-summary-stack {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.ordering-summary-note {
  border: 1px solid rgba(196, 159, 107, 0.44);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 252, 247, 0.88);
}

.ordering-summary-note strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.96rem;
  color: var(--ink);
}

.ordering-summary-note p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.ordering-deadline-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  margin: 14px 0 18px;
  border-radius: 20px;
  border: 1px solid rgba(196, 159, 107, 0.46);
  background: rgba(255, 252, 247, 0.9);
  box-shadow: var(--shadow-soft);
}

.ordering-deadline-card[data-tone="green"] {
  border-color: rgba(18, 153, 46, 0.28);
  background: linear-gradient(180deg, rgba(232, 246, 235, 0.92) 0%, rgba(255, 252, 247, 0.96) 100%);
}

.ordering-deadline-card[data-tone="red"] {
  border-color: rgba(225, 83, 32, 0.28);
  background: linear-gradient(180deg, rgba(255, 240, 234, 0.94) 0%, rgba(255, 252, 247, 0.96) 100%);
}

.ordering-deadline-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.ordering-deadline-head h3 {
  margin: 4px 0 0;
  font-size: 1.1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  font-family: var(--font);
}

.ordering-deadline-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.ordering-selection-block {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.ordering-field-hint {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.page-ordering input[readonly] {
  background: rgba(246, 239, 226, 0.92);
  color: var(--ink);
  font-weight: 700;
  border-color: rgba(196, 159, 107, 0.5);
  cursor: default;
}

.ordering-selection-tabs {
  margin: 0;
}

.ordering-selection-tabs .tab-chip {
  flex: 1 1 150px;
  min-height: 54px;
  text-align: center;
}

.ordering-channel-tabs .tab-chip {
  flex-basis: 140px;
}

.ordering-selection-code,
.ordering-selection-name {
  display: block;
}

.ordering-selection-code {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.ordering-selection-tabs .tab-chip.active .ordering-selection-code {
  color: rgba(255, 248, 232, 0.82);
}

.ordering-selection-name {
  font-size: 0.92rem;
  line-height: 1.2;
}

.ordering-category-stack {
  display: grid;
  gap: 16px;
}

.ordering-category-card {
  padding: 16px;
}

.ordering-category-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.ordering-category-head h3 {
  margin: 4px 0 0;
  font-size: 1.2rem;
}

.ordering-item-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ordering-item-card {
  border: 1px solid rgba(196, 159, 107, 0.42);
  border-radius: 20px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0) 24%),
    rgba(255, 252, 247, 0.92);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 12px;
}

.ordering-item-main {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.ordering-item-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.ordering-item-meta,
.ordering-item-id {
  color: var(--muted);
  font-size: 0.78rem;
}

.ordering-item-price {
  margin-top: 4px;
  font-size: 0.76rem;
  font-weight: 700;
}

.ordering-item-price.is-muted {
  color: var(--muted);
}

.ordering-item-price.is-stable {
  color: #165d2a;
}

.ordering-item-price.is-up {
  color: #8f1f16;
}

.ordering-item-price.is-down {
  color: #165d2a;
}

.ordering-item-id {
  font-family: var(--mono);
}

.ordering-item-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 176px;
  gap: 10px;
}

.ordering-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ordering-note-toggle {
  min-height: 38px;
  padding: 7px 12px;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  box-shadow: none;
}

.ordering-note-toggle.is-open {
  border-color: rgba(18, 153, 46, 0.3);
  background: rgba(232, 246, 235, 0.86);
}

.ordering-qty-stepper {
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  gap: 6px;
}

.ordering-qty-btn {
  padding: 0;
  font-size: 1.5rem;
}

.ordering-qty-stepper input[data-role="qty"] {
  min-height: 52px;
  padding: 8px 10px;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
}

.ordering-qty-stepper input[data-role="qty"]::-webkit-outer-spin-button,
.ordering-qty-stepper input[data-role="qty"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ordering-qty-stepper input[data-role="qty"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.ordering-item-note {
  display: grid;
  gap: 6px;
}

.ordering-lower-grid {
  align-items: start;
}

.ordering-guidance-table {
  min-width: 920px;
}

.ordering-empty {
  border: 1px dashed rgba(196, 159, 107, 0.56);
  border-radius: 18px;
  padding: 20px;
  background: rgba(255, 252, 247, 0.9);
  text-align: center;
  color: var(--muted);
}

.ordering-empty strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
}

.ordering-empty p {
  margin: 0;
}

.ordering-analytics-stack {
  display: grid;
  gap: 12px;
}

.ordering-analytics-card {
  border: 1px solid rgba(196, 159, 107, 0.44);
  border-radius: 20px;
  padding: 14px;
  background: rgba(255, 252, 247, 0.92);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 10px;
}

.ordering-analytics-card.is-flagged {
  border-color: rgba(225, 83, 32, 0.34);
  background: linear-gradient(180deg, rgba(255, 240, 234, 0.9) 0%, rgba(255, 252, 247, 0.96) 100%);
}

.ordering-analytics-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.ordering-analytics-head strong {
  display: block;
  font-size: 0.98rem;
}

.ordering-analytics-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.ordering-analytics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ordering-analytics-grid span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ordering-analytics-grid strong {
  color: var(--ink);
  font-size: 0.94rem;
}

.ordering-analytics-reason {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.ordering-board-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.ordering-board-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ordering-board-stat {
  border: 1px solid rgba(196, 159, 107, 0.38);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.62);
}

.ordering-board-stat span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ordering-board-stat strong {
  color: var(--accent);
  font-size: 1.1rem;
  font-family: var(--font-display);
  line-height: 0.95;
}

.ordering-flow-row {
  display: grid;
  grid-template-columns: minmax(0, 220px);
  gap: 10px;
}

.ordering-success-modal-card {
  width: min(620px, 100%);
  border-color: rgba(18, 153, 46, 0.3);
  box-shadow:
    0 24px 72px rgba(38, 15, 8, 0.26),
    var(--shadow);
  background:
    linear-gradient(180deg, rgba(232, 246, 235, 0.86) 0%, rgba(255, 255, 255, 0.2) 24%),
    #fff9f0;
}

.ordering-success-summary-note {
  margin-bottom: 12px;
  border-color: rgba(18, 153, 46, 0.24);
  background: rgba(255, 255, 255, 0.78);
}

.ordering-success-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 12px;
}

.ordering-success-grid .ordering-board-stat strong {
  font-size: 0.94rem;
  line-height: 1.15;
  word-break: break-word;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font);
}

.ordering-success-actions {
  justify-content: flex-end;
}

.ordering-success-actions > button {
  flex: 1 1 180px;
}

.ordering-invoice-metrics {
  margin-bottom: 12px;
}

.ordering-price-tabs {
  margin-bottom: 12px;
}

.ordering-workspace-tabs {
  margin-bottom: 14px;
}

.ordering-workspace-tabs .tab-chip {
  flex: 1 1 220px;
  justify-content: center;
}

.ordering-workspace-panel {
  gap: 14px;
}

.ordering-invoice-tab-note {
  margin-bottom: 12px;
}

.ordering-price-tabs .tab-chip {
  flex: 0 0 auto;
}

.ordering-invoice-grid {
  gap: 12px;
  margin-bottom: 0;
}

.ordering-invoice-panel {
  min-height: 100%;
  margin-top: 12px;
}

.ordering-invoice-panel-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  min-height: 18px;
}

.ordering-invoice-panel-meta {
  font-size: 0.78rem;
  color: rgba(58, 16, 2, 0.55);
  letter-spacing: 0.04em;
}

.ordering-price-history-toolbar {
  margin-bottom: 10px;
}

.ordering-price-item-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.ordering-price-item-link:hover,
.ordering-price-item-link:focus {
  color: #0f7e27;
  text-decoration: underline;
}

.ordering-invoice-warning-list {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.ordering-invoice-warning-note {
  border-color: rgba(214, 150, 35, 0.22);
  background: rgba(255, 249, 235, 0.88);
}

.ordering-invoice-modal-card {
  width: min(920px, 100%);
  max-height: min(90vh, 100%);
  overflow: auto;
  border-color: rgba(196, 132, 31, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 248, 234, 0.95) 0%, rgba(255, 255, 255, 0.24) 26%),
    #fff9f0;
}

.ordering-invoice-summary-note {
  margin-bottom: 10px;
}

.ordering-invoice-save-status {
  margin-bottom: 10px;
}

.ordering-invoice-save-status.is-error {
  border-color: rgba(167, 36, 22, 0.28);
  background: rgba(255, 241, 238, 0.95);
}

.ordering-invoice-save-status.is-warn {
  border-color: rgba(214, 150, 35, 0.22);
  background: rgba(255, 249, 235, 0.94);
}

.ordering-invoice-save-status.is-ok {
  border-color: rgba(29, 160, 73, 0.24);
  background: rgba(240, 255, 244, 0.94);
}

.ordering-invoice-result-modal {
  z-index: 46;
}

.ordering-invoice-result-modal-card {
  width: min(760px, 100%);
  display: grid;
  gap: 12px;
  border-color: rgba(196, 132, 31, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 248, 234, 0.96) 0%, rgba(255, 255, 255, 0.26) 26%),
    #fff9f0;
}

.ordering-invoice-result-summary-note.is-error {
  border-color: rgba(167, 36, 22, 0.28);
  background: rgba(255, 241, 238, 0.95);
}

.ordering-invoice-result-summary-note.is-warn {
  border-color: rgba(214, 150, 35, 0.22);
  background: rgba(255, 249, 235, 0.94);
}

.ordering-invoice-result-summary-note.is-ok {
  border-color: rgba(29, 160, 73, 0.24);
  background: rgba(240, 255, 244, 0.94);
}

.ordering-invoice-result-list {
  display: grid;
  gap: 10px;
  max-height: min(42vh, 360px);
  overflow: auto;
  padding-right: 2px;
}

.ordering-invoice-result-item {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(196, 132, 31, 0.18);
  background: rgba(255, 255, 255, 0.9);
}

.ordering-invoice-result-item.is-ok {
  border-color: rgba(29, 160, 73, 0.24);
  background: rgba(244, 255, 247, 0.96);
}

.ordering-invoice-result-item.is-warn {
  border-color: rgba(214, 150, 35, 0.22);
  background: rgba(255, 251, 241, 0.96);
}

.ordering-invoice-result-item-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.ordering-invoice-result-item p {
  margin: 0;
}

.ordering-price-history-modal {
  z-index: 45;
}

.ordering-price-history-modal-card {
  width: min(860px, 100%);
  display: grid;
  gap: 12px;
}

.ordering-price-history-chart-shell {
  border-radius: 22px;
  border: 1px solid rgba(172, 136, 88, 0.18);
  background: rgba(255, 255, 255, 0.84);
  padding: 10px;
}

.ordering-price-history-chart-shell svg {
  width: 100%;
  height: auto;
  display: block;
}

.ordering-price-history-modal-table-wrap {
  max-height: min(34vh, 320px);
  overflow: auto;
}

.ordering-invoice-line-stack {
  display: grid;
  gap: 10px;
}

.ordering-invoice-batch-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid rgba(196, 132, 31, 0.18);
  background: rgba(255, 255, 255, 0.9);
}

.ordering-invoice-batch-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.ordering-invoice-batch-title {
  display: grid;
  gap: 4px;
}

.ordering-invoice-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ordering-invoice-meta-grid > div,
.ordering-invoice-line-list,
.ordering-invoice-inline-warnings {
  display: grid;
  gap: 8px;
}

.ordering-invoice-meta-grid span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7c5d41;
}

.ordering-invoice-meta-grid strong {
  color: #402114;
}

.ordering-invoice-line-actions {
  justify-content: flex-end;
}

.ordering-invoice-line-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(196, 132, 31, 0.16);
  background: rgba(255, 255, 255, 0.78);
}

.ordering-invoice-line-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.page-ordering .app-shell {
  max-width: 1240px;
  padding: 20px 14px 48px;
}

.page-ordering .page-head {
  gap: 12px;
  margin-bottom: 16px;
}

.page-ordering header.page-head {
  padding: 20px 18px;
  margin-bottom: 18px;
  border-radius: 26px;
}

.page-ordering header.page-head > div > .page-title::before {
  width: 152px;
  height: 34px;
  margin-bottom: 10px;
}

.page-ordering .page-title {
  font-size: clamp(1.8rem, 1.05rem + 2vw, 2.6rem);
}

.page-ordering .page-subtitle {
  margin-top: 4px;
  font-size: 0.92rem;
  line-height: 1.45;
}

.page-ordering .back-home-btn {
  margin-top: 10px;
  padding: 8px 12px;
}

.page-ordering .nav-row {
  gap: 8px;
}

.page-ordering .nav-chip,
.page-ordering .back-home-btn {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 0.78rem;
}

.page-ordering .lang-switch {
  min-height: 38px;
  gap: 6px;
}

.page-ordering .lang-switch label {
  font-size: 0.78rem;
}

.page-ordering .lang-switch select {
  min-width: 108px;
  min-height: 38px;
  padding: 8px 10px;
}

.page-ordering .panel {
  padding: 15px;
}

.page-ordering .panel h2,
.page-ordering .panel h3 {
  margin-bottom: 8px;
}

.page-ordering .split-hero,
.page-ordering .hero-grid {
  gap: 14px;
  margin-bottom: 14px;
}

.page-ordering .story-hero {
  gap: 10px;
  margin-bottom: 10px;
}

.page-ordering .story-hero p {
  margin-top: 6px;
}

.page-ordering .eyebrow {
  margin-bottom: 4px;
}

.page-ordering input,
.page-ordering select,
.page-ordering textarea {
  min-height: 48px;
  padding: 10px 12px;
}

.page-ordering button {
  min-height: 42px;
  padding: 9px 12px;
  font-size: 0.78rem;
}

.page-ordering .ordering-metrics-grid {
  gap: 10px;
}

.page-ordering .metric {
  padding: 12px;
  border-radius: 18px;
}

.page-ordering .metric .value {
  margin-top: 6px;
  font-size: clamp(1.4rem, 1.1rem + 0.8vw, 2rem);
}

.page-ordering .ordering-summary-stack {
  gap: 8px;
  margin-top: 10px;
}

.page-ordering .ordering-summary-note {
  padding: 12px;
  border-radius: 16px;
}

.page-ordering .ordering-summary-note strong {
  margin-bottom: 4px;
  font-size: 0.92rem;
}

.page-ordering .ordering-summary-note p {
  font-size: 0.82rem;
  line-height: 1.42;
}

.page-ordering .ordering-selection-block {
  gap: 6px;
  margin-bottom: 10px;
}

.page-ordering .ordering-selection-tabs {
  gap: 8px;
}

.page-ordering .ordering-selection-tabs .tab-chip {
  flex: 1 1 132px;
  min-height: 50px;
  padding: 8px 10px;
}

.page-ordering .ordering-channel-tabs .tab-chip {
  flex-basis: 118px;
}

.page-ordering .ordering-selection-code {
  font-size: 0.64rem;
}

.page-ordering .ordering-selection-name {
  font-size: 0.84rem;
  line-height: 1.15;
}

.page-ordering .ordering-deadline-card {
  gap: 8px;
  padding: 13px;
  margin: 10px 0 14px;
  border-radius: 18px;
}

.page-ordering .ordering-deadline-head {
  gap: 8px;
}

.page-ordering .ordering-deadline-head h3 {
  margin-top: 2px;
  font-size: 1rem;
}

.page-ordering .ordering-deadline-copy {
  font-size: 0.84rem;
  line-height: 1.45;
}

.page-ordering .badge {
  min-width: 80px;
  padding: 5px 9px;
  font-size: 0.68rem;
}

.page-ordering .ordering-category-stack {
  gap: 12px;
}

.page-ordering .ordering-category-card {
  padding: 12px;
}

.page-ordering .ordering-category-head {
  margin-bottom: 10px;
}

.page-ordering .ordering-category-head h3 {
  font-size: 1.08rem;
}

.page-ordering .ordering-item-grid {
  gap: 10px;
}

.page-ordering .ordering-item-card {
  padding: 12px;
  gap: 10px;
  border-radius: 18px;
}

.page-ordering .ordering-item-main {
  gap: 10px;
}

.page-ordering .ordering-item-name {
  font-size: 0.94rem;
}

.page-ordering .ordering-item-meta,
.page-ordering .ordering-item-id {
  font-size: 0.74rem;
}

.page-ordering .ordering-item-price {
  font-size: 0.76rem;
  line-height: 1.35;
}

.page-ordering .ordering-item-fields {
  grid-template-columns: minmax(0, 1fr) 184px;
  gap: 8px;
}

.page-ordering .ordering-note-toggle {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 0.7rem;
}

.page-ordering .ordering-qty-stepper {
  grid-template-columns: 54px minmax(0, 1fr) 54px;
}

.page-ordering .ordering-qty-btn {
  min-height: 48px;
  font-size: 1.55rem;
}

.page-ordering .ordering-qty-stepper input[data-role="qty"] {
  min-height: 48px;
  font-size: 0.98rem;
}

.page-ordering .ordering-lower-grid {
  gap: 12px;
}

.page-ordering .ordering-price-tabs {
  gap: 8px;
}

.page-ordering .ordering-workspace-tabs {
  gap: 8px;
  margin-bottom: 14px;
}

.page-ordering .ordering-workspace-tabs .tab-chip {
  min-height: 48px;
  font-size: 0.82rem;
}

.page-ordering .ordering-invoice-grid {
  gap: 12px;
}

.page-ordering .ordering-empty {
  padding: 16px;
}

.page-ordering .ordering-analytics-stack {
  gap: 10px;
}

.page-ordering .ordering-analytics-card {
  padding: 12px;
  gap: 8px;
  border-radius: 18px;
}

.page-ordering .ordering-analytics-head strong {
  font-size: 0.92rem;
}

.page-ordering .ordering-analytics-grid {
  gap: 8px;
}

.page-ordering .ordering-analytics-grid span {
  font-size: 0.68rem;
}

.page-ordering .ordering-analytics-grid strong {
  font-size: 0.88rem;
}

.page-ordering .ordering-analytics-reason {
  font-size: 0.8rem;
  line-height: 1.42;
}

.page-ordering .order-board {
  gap: 10px;
}

.page-ordering .order-card {
  padding: 12px;
  gap: 8px;
  border-radius: 18px;
}

.page-ordering .order-title {
  font-size: 0.92rem;
}

.page-ordering .order-flow,
.page-ordering .order-meta {
  font-size: 0.76rem;
}

.page-ordering .ordering-board-grid {
  gap: 8px;
}

.page-ordering .ordering-board-stat {
  padding: 10px;
}

.page-ordering .ordering-board-stat strong {
  font-size: 1rem;
}

.page-ordering .ordering-board-badges {
  gap: 5px;
}

.page-ordering .ordering-flow-row {
  grid-template-columns: minmax(0, 200px);
}

@media (max-width: 980px) {
  .page-ordering header.page-head {
    padding: 18px 16px;
  }

  .page-ordering .panel {
    padding: 14px;
  }

  .ordering-item-grid,
  .ordering-lower-grid,
  .ordering-invoice-grid {
    grid-template-columns: 1fr;
  }

  .page-ordering .ordering-price-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .page-ordering .ordering-workspace-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .page-ordering .ordering-price-tabs::-webkit-scrollbar {
    display: none;
  }

  .page-ordering .ordering-workspace-tabs::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 640px) {
  .page-ordering .app-shell {
    padding: 14px 10px 34px;
  }

  .page-ordering header.page-head {
    padding: 16px 14px;
    border-radius: 22px;
  }

  .page-ordering header.page-head > div > .page-title::before {
    width: 132px;
    height: 30px;
    margin-bottom: 8px;
  }

  .page-ordering .page-title {
    font-size: clamp(1.55rem, 1.15rem + 2vw, 2rem);
  }

  .page-ordering header.page-head .page-subtitle,
  .page-ordering .story-hero .page-subtitle {
    display: none;
  }

  .page-ordering .nav-row {
    gap: 6px;
  }

  .page-ordering .nav-chip,
  .page-ordering .back-home-btn {
    padding: 8px 11px;
    font-size: 0.76rem;
  }

  .page-ordering .lang-switch {
    width: 100%;
  }

  .page-ordering .lang-switch select {
    min-width: 0;
    width: 100%;
  }

  .page-ordering .panel {
    padding: 12px;
    border-radius: 18px;
  }

  .page-ordering .ordering-selection-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .page-ordering .ordering-selection-tabs::-webkit-scrollbar {
    display: none;
  }

  .page-ordering .ordering-selection-tabs .tab-chip {
    flex: 0 0 auto;
    min-width: 108px;
    min-height: 46px;
    padding: 7px 10px;
  }

  .page-ordering .ordering-workspace-tabs .tab-chip {
    flex: 1 1 50%;
    min-width: 156px;
    min-height: 46px;
    padding: 7px 12px;
  }

  .page-ordering .ordering-selection-name {
    font-size: 0.82rem;
  }

  .page-ordering .ordering-deadline-head {
    gap: 8px;
  }

  .page-ordering .ordering-deadline-head h3 {
    font-size: 1rem;
  }

  .page-ordering .ordering-deadline-copy,
  .page-ordering .ordering-summary-note p,
  .page-ordering .ordering-analytics-reason,
  .page-ordering .ordering-item-price {
    font-size: 0.8rem;
  }

  .page-ordering .ordering-summary-note {
    padding: 10px;
  }

  .page-ordering .ordering-category-card,
  .page-ordering .ordering-item-card,
  .page-ordering .ordering-analytics-card,
  .page-ordering .order-card,
  .page-ordering .ordering-invoice-batch-card,
  .page-ordering .ordering-invoice-line-card {
    padding: 10px;
  }

  .page-ordering .ordering-category-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .page-ordering .ordering-category-head .badge {
    align-self: flex-start;
  }

  .page-ordering .ordering-item-card {
    gap: 8px;
  }

  .page-ordering .ordering-item-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .page-ordering .ordering-item-id {
    align-self: flex-start;
  }

  .page-ordering .metric {
    padding: 10px;
    border-radius: 16px;
  }

  .page-ordering .metric .value {
    font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem);
  }

  .page-ordering .ordering-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ordering-metrics-grid,
  .ordering-board-grid,
  .ordering-analytics-grid {
    grid-template-columns: 1fr;
  }

  .page-ordering .ordering-board-badges {
    justify-content: flex-start;
  }

  .page-ordering .nav-row > button {
    flex: 1 1 100%;
  }

  .page-ordering .table-wrap {
    margin: 0 -2px;
  }

  .page-ordering .ordering-item-fields {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .page-ordering .ordering-qty-stepper {
    grid-template-columns: 54px minmax(0, 1fr) 54px;
  }

  .page-ordering .ordering-qty-btn {
    min-height: 48px;
    font-size: 1.5rem;
  }

  .page-ordering .ordering-success-modal-card {
    padding: 14px;
    border-radius: 20px;
  }

  .page-ordering .ordering-invoice-modal-card {
    padding: 14px;
    border-radius: 20px;
  }

  .page-ordering .ordering-price-history-modal-card {
    padding: 14px;
    border-radius: 20px;
    max-height: min(100dvh - 14px, 100%);
    overflow: auto;
  }

  .page-ordering .ordering-invoice-batch-head,
  .page-ordering .ordering-invoice-line-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-ordering .ordering-invoice-meta-grid {
    grid-template-columns: 1fr;
  }

  .page-ordering .ordering-success-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .page-ordering .ordering-success-actions {
    gap: 8px;
  }

  .page-ordering .ordering-price-history-chart-shell {
    padding: 8px;
  }

  .page-ordering .ordering-item-actions {
    width: 100%;
  }

  .page-ordering .ordering-note-toggle {
    width: 100%;
    justify-content: center;
  }

  .page-ordering .ordering-item-note {
    gap: 5px;
  }

.page-ordering .ordering-item-note input[data-role="note"] {
    min-height: 44px;
  }

  .ordering-item-fields,
  .ordering-flow-row {
    grid-template-columns: 1fr;
  }

  .ordering-invoice-line-actions {
    width: 100%;
  }
}

.page-store-audit .audit-hero,
.page-store-audit .audit-lower-hero {
  align-items: start;
}

.page-store-audit .audit-panel {
  min-height: 100%;
}

.page-store-audit .app-shell {
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
}

.page-store-audit .audit-row {
  margin-bottom: 12px;
}

.page-store-audit .audit-meta-notes {
  display: grid;
  gap: 12px;
}

.page-store-audit .audit-advanced-details,
.page-store-audit .audit-recent-details {
  border: 1px solid rgba(196, 159, 107, 0.34);
  border-radius: 18px;
  background: rgba(255, 252, 247, 0.9);
  overflow: hidden;
  margin: 0 0 12px;
}

.page-store-audit .audit-advanced-details summary,
.page-store-audit .audit-recent-details summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 700;
  color: var(--ink-soft);
}

.page-store-audit .audit-advanced-details[open] summary,
.page-store-audit .audit-recent-details[open] summary {
  border-bottom: 1px solid rgba(196, 159, 107, 0.22);
}

.page-store-audit .audit-advanced-body {
  padding: 0 14px 14px;
}

.page-store-audit .audit-actions {
  margin-top: 4px;
}

.page-store-audit .audit-actions button {
  flex: 1 1 180px;
}

.page-store-audit .audit-inline-status {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.page-store-audit .audit-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

.page-store-audit .audit-status-card {
  border: 1px solid rgba(196, 159, 107, 0.42);
  border-radius: 16px;
  background: rgba(255, 252, 247, 0.86);
  padding: 12px;
  display: grid;
  gap: 4px;
}

.page-store-audit .audit-status-label {
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.page-store-audit .audit-status-card strong {
  font-size: 0.98rem;
}

.page-store-audit .audit-category-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-store-audit .audit-category-card {
  border: 1px solid rgba(196, 159, 107, 0.44);
  border-radius: 20px;
  padding: 16px;
  background: rgba(255, 252, 247, 0.82);
  box-shadow: var(--shadow-soft);
}

.page-store-audit .audit-category-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.page-store-audit .audit-rating-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(280px, 100%);
}

.page-store-audit .audit-rating-chip {
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(172, 136, 88, 0.3);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.9rem;
}

.page-store-audit .audit-rating-chip:hover {
  transform: none;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.96);
}

.page-store-audit .audit-rating-chip.is-active[data-rating-value="ok"] {
  border-color: rgba(18, 153, 46, 0.54);
  background: rgba(219, 248, 225, 0.92);
  color: #0f5c22;
}

.page-store-audit .audit-rating-chip.is-active[data-rating-value="watch"] {
  border-color: rgba(196, 159, 107, 0.64);
  background: rgba(255, 242, 214, 0.96);
  color: #7e5314;
}

.page-store-audit .audit-rating-chip.is-active[data-rating-value="issue"] {
  border-color: rgba(196, 119, 39, 0.7);
  background: rgba(255, 232, 208, 0.96);
  color: #8d3602;
}

.page-store-audit .audit-rating-chip.is-active[data-rating-value="critical"] {
  border-color: rgba(164, 35, 28, 0.72);
  background: rgba(255, 224, 220, 0.96);
  color: #8b1911;
}

.page-store-audit .audit-category-head h3 {
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.page-store-audit .audit-category-head p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.page-store-audit .audit-category-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.page-store-audit .audit-category-count {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(196, 159, 107, 0.34);
  background: rgba(255, 252, 247, 0.9);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.page-store-audit .audit-category-head select {
  min-width: 132px;
  width: 132px;
}

.page-store-audit .audit-add-observation,
.page-store-audit .audit-remove-observation {
  min-height: 40px;
  padding: 10px 12px;
  text-transform: none;
  letter-spacing: 0.01em;
}

.page-store-audit .audit-observation-list {
  display: grid;
  gap: 12px;
}

.page-store-audit .audit-observation-item {
  border: 1px solid rgba(196, 159, 107, 0.28);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.68);
  display: grid;
  gap: 12px;
}

.page-store-audit .audit-observation-item[data-rating="watch"] {
  border-color: rgba(196, 159, 107, 0.62);
}

.page-store-audit .audit-observation-item[data-rating="issue"] {
  border-color: rgba(196, 119, 39, 0.62);
  background: rgba(255, 247, 239, 0.82);
}

.page-store-audit .audit-observation-item[data-rating="critical"] {
  border-color: rgba(164, 35, 28, 0.56);
  background: rgba(255, 241, 240, 0.84);
}

.page-store-audit .audit-observation-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.page-store-audit .audit-observation-toolbar div {
  display: grid;
  gap: 4px;
}

.page-store-audit .audit-observation-toolbar span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.page-store-audit .audit-category-fields {
  display: grid;
  gap: 10px;
}

.page-store-audit .audit-category-card[data-rating="watch"] {
  border-color: rgba(196, 159, 107, 0.74);
}

.page-store-audit .audit-category-card[data-rating="issue"] {
  border-color: rgba(196, 119, 39, 0.78);
  box-shadow: 0 16px 34px rgba(196, 119, 39, 0.1);
}

.page-store-audit .audit-category-card[data-rating="critical"] {
  border-color: rgba(164, 35, 28, 0.74);
  box-shadow: 0 18px 36px rgba(164, 35, 28, 0.12);
}

.page-store-audit .audit-category-fields textarea {
  min-height: 88px;
}

.page-store-audit .audit-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-store-audit .audit-category-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.page-store-audit .audit-upload-chip {
  min-height: 52px;
  border: 1px dashed rgba(172, 136, 88, 0.45);
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(255, 249, 238, 0.88);
  color: var(--ink);
  font-weight: 700;
  display: grid;
  place-items: center;
  text-align: center;
  cursor: pointer;
}

.page-store-audit .audit-upload-chip-primary {
  border-style: solid;
  border-color: rgba(18, 153, 46, 0.28);
  background: linear-gradient(135deg, rgba(223, 249, 228, 0.98) 0%, rgba(240, 255, 243, 0.95) 100%);
  color: #0f5c22;
}

.page-store-audit .audit-category-evidence-tray {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.page-store-audit .audit-category-evidence-card {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(196, 159, 107, 0.32);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  padding: 8px;
}

.page-store-audit .audit-category-evidence-thumb {
  width: 62px;
  height: 62px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(196, 159, 107, 0.32);
  display: grid;
  place-items: center;
}

.page-store-audit .audit-category-evidence-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-store-audit .audit-category-evidence-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.page-store-audit .audit-category-evidence-body strong,
.page-store-audit .audit-category-evidence-body span {
  word-break: break-word;
}

.page-store-audit .audit-mini-remove,
.page-store-audit .audit-evidence-remove {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(164, 35, 28, 0.22);
  background: rgba(255, 238, 236, 0.92);
  color: #7f2118;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0.01em;
}

.page-store-audit .audit-mini-remove:hover,
.page-store-audit .audit-evidence-remove:hover {
  transform: none;
  box-shadow: none;
  background: rgba(255, 230, 227, 0.96);
}

.page-store-audit .audit-upload-block {
  margin-bottom: 12px;
}

.page-store-audit .audit-evidence-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.page-store-audit .audit-evidence-list {
  display: grid;
  gap: 10px;
}

.page-store-audit .audit-empty-state {
  border: 1px dashed rgba(196, 159, 107, 0.58);
  border-radius: 16px;
  background: rgba(255, 250, 242, 0.72);
  padding: 16px;
  color: var(--muted);
}

.page-store-audit .audit-evidence-item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(196, 159, 107, 0.42);
  border-radius: 16px;
  background: rgba(255, 252, 247, 0.9);
  padding: 10px;
}

.page-store-audit .audit-evidence-thumb {
  width: 84px;
  height: 84px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(196, 159, 107, 0.38);
  background: #fff;
  display: grid;
  place-items: center;
}

.page-store-audit .audit-evidence-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-store-audit .audit-file-icon {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--ink-soft);
}

.page-store-audit .audit-evidence-meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.page-store-audit .audit-evidence-meta span,
.page-store-audit .audit-evidence-meta strong {
  word-break: break-word;
}

.page-store-audit .audit-evidence-index {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.page-store-audit .audit-evidence-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.page-store-audit .audit-preview-shell {
  display: grid;
  gap: 12px;
}

.page-store-audit .audit-preview-summary {
  border: 1px dashed rgba(196, 159, 107, 0.56);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255, 250, 242, 0.76);
  font-weight: 700;
  color: var(--ink-soft);
}

.page-store-audit .audit-preview-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.page-store-audit .audit-preview-card {
  border: 1px solid rgba(196, 159, 107, 0.42);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 252, 247, 0.92);
  display: grid;
  gap: 6px;
}

.page-store-audit .audit-preview-card span {
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.page-store-audit .audit-preview-card strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
}

.page-store-audit .audit-preview-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.page-store-audit .audit-check-item {
  border: 1px solid rgba(196, 159, 107, 0.36);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 252, 247, 0.9);
  display: grid;
  gap: 4px;
}

.page-store-audit .audit-check-item strong {
  font-size: 0.92rem;
}

.page-store-audit .audit-check-item span {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.page-store-audit .audit-check-item.is-good {
  border-color: rgba(18, 153, 46, 0.34);
  background: rgba(236, 252, 239, 0.96);
}

.page-store-audit .audit-check-item.is-missing {
  border-color: rgba(196, 119, 39, 0.34);
  background: rgba(255, 245, 233, 0.96);
}

.page-store-audit .audit-preview-details {
  border: 1px solid rgba(196, 159, 107, 0.36);
  border-radius: 18px;
  background: rgba(255, 252, 247, 0.92);
  overflow: hidden;
}

.page-store-audit .audit-preview-details summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 700;
  color: var(--ink-soft);
}

.page-store-audit .audit-preview-details[open] summary {
  border-bottom: 1px solid rgba(196, 159, 107, 0.26);
}

.page-store-audit .audit-inline-open {
  min-height: 36px;
  padding: 8px 12px;
  text-transform: none;
  letter-spacing: 0.01em;
}

.page-store-audit .audit-preview-json {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 14px;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 420px;
  overflow: auto;
}

.page-store-audit .audit-recent-wrap {
  max-height: 290px;
}

.page-store-audit .audit-recent-table {
  min-width: 100%;
}

.page-store-audit .mono {
  font-family: var(--mono);
}

.page-store-audit header.page-head .nav-chip.active {
  border-color: #ffaf00;
  background: #ffaf00;
  color: #480f02;
}

.page-store-audit .audit-report-empty {
  border: 1px dashed rgba(196, 159, 107, 0.56);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255, 250, 242, 0.72);
  color: var(--muted);
}

.page-store-audit .audit-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.page-store-audit .audit-edit-banner {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 175, 0, 0.18);
  color: #6a3d00;
  font-size: 0.85rem;
  font-weight: 600;
}

.page-store-audit .audit-report-shell {
  display: grid;
  gap: 16px;
}

.page-store-audit .audit-report-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}

.page-store-audit .audit-report-kicker {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.page-store-audit .audit-report-hero h3 {
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
}

.page-store-audit .audit-report-score {
  min-width: 104px;
  padding: 16px 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 244, 220, 0.98) 0%, rgba(255, 252, 247, 0.92) 100%);
  border: 1px solid rgba(196, 159, 107, 0.42);
  font-family: var(--font-display);
  font-size: 2rem;
  text-align: center;
  color: var(--ink-soft);
}

.page-store-audit .audit-report-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.page-store-audit .audit-report-card {
  border: 1px solid rgba(196, 159, 107, 0.38);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 252, 247, 0.92);
  display: grid;
  gap: 6px;
}

.page-store-audit .audit-report-card span,
.page-store-audit .audit-report-card small {
  color: var(--muted);
}

.page-store-audit .audit-report-card strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
}

.page-store-audit .audit-report-section {
  display: grid;
  gap: 10px;
}

.page-store-audit .audit-report-section h3 {
  margin: 0;
}

.page-store-audit .audit-report-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-store-audit .audit-report-badge {
  display: inline-grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(196, 159, 107, 0.32);
  background: rgba(255, 252, 247, 0.9);
}

.page-store-audit .audit-report-badge strong {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-store-audit .audit-report-list {
  display: grid;
  gap: 10px;
}

.page-store-audit .audit-report-media {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.page-store-audit .audit-report-media-card {
  border: 1px solid rgba(196, 159, 107, 0.34);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 252, 247, 0.96);
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
}

.page-store-audit .audit-report-media-thumb {
  width: 108px;
  min-height: 108px;
  background: linear-gradient(135deg, rgba(255, 244, 220, 0.92) 0%, rgba(255, 252, 247, 0.96) 100%);
  display: grid;
  place-items: center;
}

.page-store-audit .audit-report-media-thumb img,
.page-store-audit .audit-report-media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-store-audit .audit-report-media-placeholder {
  font-family: var(--font-display);
  color: var(--muted);
  letter-spacing: 0.08em;
}

.page-store-audit .audit-report-media-body {
  padding: 12px 14px 14px;
  display: grid;
  gap: 6px;
}

.page-store-audit .audit-report-media-body p,
.page-store-audit .audit-report-media-body span {
  margin: 0;
}

.page-store-audit .audit-report-media-body span {
  color: var(--muted);
}

.page-store-audit .audit-report-list-item {
  border: 1px solid rgba(196, 159, 107, 0.34);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255, 252, 247, 0.94);
  display: grid;
  gap: 6px;
}

.page-store-audit .audit-report-list-item p,
.page-store-audit .audit-report-list-item span {
  margin: 0;
}

.page-store-audit .audit-report-list-item span {
  color: var(--muted);
}

.page-store-audit .audit-report-finding-media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 96px));
  gap: 10px;
  margin-top: 4px;
}

.page-store-audit .audit-report-finding-media-card {
  display: grid;
  gap: 6px;
}

.page-store-audit .audit-report-finding-thumb {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(196, 159, 107, 0.32);
  background: rgba(255, 252, 247, 0.94);
  display: grid;
  place-items: center;
}

.page-store-audit .audit-report-finding-thumb img,
.page-store-audit .audit-report-finding-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-store-audit .audit-report-finding-media-card span {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
  word-break: break-word;
}

.page-store-audit .audit-mobile-dock {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: none;
  gap: 12px;
  border: 1px solid rgba(196, 159, 107, 0.36);
  border-radius: 22px;
  background: rgba(255, 252, 247, 0.96);
  box-shadow: 0 18px 36px rgba(72, 15, 2, 0.16);
  padding: 12px;
  backdrop-filter: blur(12px);
}

.page-store-audit .audit-mobile-dock-summary {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.page-store-audit .audit-mobile-dock-summary strong,
.page-store-audit .audit-mobile-dock-summary span {
  word-break: break-word;
}

.page-store-audit .audit-mobile-dock-summary span {
  color: var(--muted);
  font-size: 0.85rem;
}

.page-store-audit .audit-mobile-dock-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 980px) {
  .page-store-audit .audit-category-grid,
  .page-store-audit .audit-preview-cards,
  .page-store-audit .audit-preview-checklist,
  .page-store-audit .audit-status-grid {
    grid-template-columns: 1fr 1fr;
  }

  .page-store-audit .audit-report-card-grid {
    grid-template-columns: 1fr 1fr;
  }

  .page-store-audit .audit-report-media {
    grid-template-columns: 1fr 1fr;
  }

  .page-store-audit .audit-evidence-item {
    grid-template-columns: 74px minmax(0, 1fr);
  }

  .page-store-audit .audit-evidence-index {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

@media (max-width: 760px) {
  .page-store-audit .audit-category-grid,
  .page-store-audit .audit-preview-cards,
  .page-store-audit .audit-preview-checklist,
  .page-store-audit .audit-status-grid,
  .page-store-audit .split-hero {
    grid-template-columns: 1fr;
  }

  .page-store-audit .audit-report-hero,
  .page-store-audit .audit-report-card-grid {
    grid-template-columns: 1fr;
  }

  .page-store-audit .audit-report-media {
    grid-template-columns: 1fr;
  }

  .page-store-audit .audit-report-media-card {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .page-store-audit .audit-report-media-thumb {
    width: 92px;
    min-height: 92px;
  }

  .page-store-audit .audit-report-finding-thumb {
    width: 84px;
    height: 84px;
  }

  .page-store-audit header.page-head .nav-row {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 6px;
    flex-wrap: nowrap;
  }

  .page-store-audit .audit-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .page-store-audit .audit-actions button:last-child {
    grid-column: 1 / -1;
  }

  .page-store-audit .audit-category-head {
    flex-direction: column;
  }

  .page-store-audit .audit-observation-toolbar {
    flex-direction: column;
  }

  .page-store-audit .audit-rating-group {
    width: 100%;
  }

  .page-store-audit .audit-category-upload-grid {
    grid-template-columns: 1fr;
  }

  .page-store-audit .audit-category-evidence-card {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .page-store-audit .audit-mini-remove {
    grid-column: 1 / -1;
    width: 100%;
  }

  .page-store-audit .audit-evidence-item {
    grid-template-columns: 74px minmax(0, 1fr);
  }

  .page-store-audit .audit-evidence-actions {
    grid-column: 1 / -1;
    justify-items: stretch;
  }

  .page-store-audit .audit-mobile-dock {
    display: grid;
  }
}

.page-catering-planning .app-shell {
  max-width: 1280px;
  padding: 20px 14px 48px;
}

.page-catering-planning .page-head {
  gap: 12px;
  margin-bottom: 16px;
}

.page-catering-planning header.page-head {
  padding: 20px 18px;
  margin-bottom: 18px;
  border-radius: 26px;
}

.page-catering-planning header.page-head > div > .page-title::before {
  width: 152px;
  height: 34px;
  margin-bottom: 10px;
}

.page-catering-planning .page-title {
  font-size: clamp(1.8rem, 1.05rem + 2vw, 2.6rem);
}

.page-catering-planning .page-subtitle {
  margin-top: 4px;
  font-size: 0.92rem;
  line-height: 1.45;
}

.page-catering-planning .back-home-btn {
  margin-top: 10px;
  padding: 8px 12px;
}

.page-catering-planning .nav-row {
  gap: 8px;
}

.page-catering-planning .nav-chip,
.page-catering-planning .back-home-btn {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 0.78rem;
}

.page-catering-planning .lang-switch {
  min-height: 38px;
  gap: 6px;
}

.page-catering-planning .lang-switch label {
  font-size: 0.78rem;
}

.page-catering-planning .lang-switch select {
  min-width: 108px;
  min-height: 38px;
  padding: 8px 10px;
}

.page-catering-planning .panel {
  padding: 15px;
}

.page-catering-planning .panel h2,
.page-catering-planning .panel h3 {
  margin-bottom: 8px;
}

.page-catering-planning .split-hero,
.page-catering-planning .hero-grid {
  gap: 14px;
  margin-bottom: 14px;
  align-items: start;
}

.page-catering-planning .story-hero {
  gap: 10px;
  margin-bottom: 10px;
}

.page-catering-planning .story-hero p {
  margin-top: 6px;
}

.page-catering-planning .eyebrow {
  margin-bottom: 4px;
}

.page-catering-planning .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 10px;
  align-items: start;
}

.page-catering-planning .row > div {
  min-width: 0;
}

.page-catering-planning input,
.page-catering-planning select,
.page-catering-planning textarea {
  min-height: 48px;
  padding: 10px 12px;
}

.page-catering-planning button {
  min-height: 42px;
  padding: 9px 12px;
  font-size: 0.78rem;
}

.page-catering-planning .catering-action-row {
  justify-content: flex-start;
}

.page-catering-planning .catering-launch-panel {
  display: grid;
  gap: 12px;
  align-content: start;
}

.page-catering-planning .catering-launch-note {
  margin: 0;
}

.page-catering-planning .catering-summary-stack {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.page-catering-planning .catering-delivery-fields {
  display: grid;
  gap: 12px;
  margin: 10px 0 6px;
}

.page-catering-planning .catering-delivery-fields .catering-delivery-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.page-catering-planning .catering-delivery-fields .catering-delivery-row.catering-delivery-row-address {
  grid-template-columns: minmax(0, 1fr);
}

.page-catering-planning .catering-preview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-catering-planning .catering-lines-table,
.page-catering-planning .catering-ingredients-table,
.page-catering-planning .catering-schedule-table,
.page-catering-planning .catering-orders-table {
  min-width: 920px;
}

.page-catering-planning .catering-lines-table select,
.page-catering-planning .catering-lines-table input {
  min-height: 44px;
}

.page-catering-planning .catering-kids-bowl-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 700;
  white-space: nowrap;
}

.page-catering-planning .catering-kids-bowl-toggle input {
  width: 18px;
  height: 18px;
  min-height: 18px;
}

.page-catering-planning #catering-store-select {
  min-height: 60px;
  padding: 14px 18px;
  padding-right: 48px;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}

.page-catering-planning .catering-lines-table td:first-child {
  min-width: 320px;
}

.page-catering-planning .catering-lines-table select[data-field="menu_item_code"] {
  min-height: 54px;
  min-width: 280px;
  padding: 12px 16px;
  padding-right: 46px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.page-catering-planning .catering-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.page-catering-planning .catering-order-actions > button {
  min-height: 36px;
  padding: 7px 10px;
  font-size: 0.68rem;
}

.page-catering-planning .catering-orders-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: end;
}

.page-catering-planning .catering-orders-toolbar > div {
  min-width: 160px;
}

.page-catering-planning .metric {
  min-height: 104px;
}

.page-catering-planning .metric .value {
  font-size: clamp(1.3rem, 1rem + 1vw, 2rem);
}

.page-catering-planning .ordering-summary-note {
  min-height: 100%;
}

.page-catering-planning.drawer-open {
  overflow: hidden;
}

.page-catering-planning .catering-drawer-shell {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  pointer-events: none;
}

/* 2026-05-09 fix: when the global sidebar is mounted (desktop), the
   drawer was centered relative to the FULL viewport which made the
   modal hug the sidebar's right edge while leaving a wide empty
   stripe on the right. Shift `left` so the shell only covers the
   content area; the sidebar (z-index 88) was already on top of the
   shell (z-index 70), but the modal itself had to be visually
   centered within the *visible* page region. Mobile (≤960px) keeps
   left:0 because the sidebar collapses to a hamburger there. */
body.has-app-sidebar.page-catering-planning .catering-drawer-shell {
  left: var(--app-sidebar-width);
}

@media (max-width: 960px) {
  body.has-app-sidebar.page-catering-planning .catering-drawer-shell {
    left: 0;
  }
}

.page-catering-planning .catering-drawer-shell[aria-hidden="true"] {
  visibility: hidden;
}

.page-catering-planning .catering-drawer-shell.is-open {
  pointer-events: auto;
}

.page-catering-planning .catering-drawer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(42, 16, 6, 0.34);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 180ms ease;
}

.page-catering-planning .catering-drawer {
  position: relative;
  width: min(1180px, calc(100vw - 44px));
  max-height: min(94dvh, 1080px);
  height: min(94dvh, 1080px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: linear-gradient(180deg, rgba(255, 251, 245, 0.98), rgba(250, 242, 229, 0.98));
  border: 1px solid rgba(191, 151, 89, 0.3);
  border-radius: 28px;
  box-shadow: 0 26px 72px rgba(61, 24, 4, 0.28);
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  transition: transform 220ms ease, opacity 220ms ease;
  overflow: hidden;
}

.page-catering-planning .catering-drawer-shell.is-open .catering-drawer-backdrop {
  opacity: 1;
}

.page-catering-planning .catering-drawer-shell.is-open .catering-drawer {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.page-catering-planning .catering-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 14px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(191, 151, 89, 0.22);
  background: rgba(255, 252, 247, 0.9);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 1;
}

.page-catering-planning .catering-drawer-close {
  min-width: 88px;
}

.page-catering-planning .catering-drawer-body {
  overflow-y: auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.page-catering-planning .catering-drawer-body > * {
  flex: 0 0 auto;
  min-width: 0;
}

.page-catering-planning .catering-drawer .panel {
  margin: 0;
}

.page-catering-planning .catering-drawer .hero-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .page-catering-planning .catering-drawer-backdrop,
  .page-catering-planning .catering-drawer {
    transition: none;
  }
}

@media (max-width: 980px) {
  .page-catering-planning header.page-head {
    padding: 18px 16px;
  }

  .page-catering-planning .panel {
    padding: 14px;
  }

  .page-catering-planning .split-hero,
  .page-catering-planning .hero-grid {
    grid-template-columns: 1fr;
  }

  .page-catering-planning .catering-drawer-shell {
    padding: 16px;
  }

  .page-catering-planning .catering-drawer {
    width: min(100vw - 32px, 1080px);
    height: min(96dvh, 1080px);
    max-height: min(96dvh, 1080px);
  }

  .page-catering-planning .catering-drawer .hero-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .page-catering-planning .app-shell {
    padding: 14px 10px 34px;
  }

  .page-catering-planning header.page-head {
    padding: 16px 14px;
    border-radius: 22px;
  }

  .page-catering-planning header.page-head > div > .page-title::before {
    width: 132px;
    height: 30px;
    margin-bottom: 8px;
  }

  .page-catering-planning .page-title {
    font-size: clamp(1.55rem, 1.15rem + 2vw, 2rem);
  }

  .page-catering-planning header.page-head .page-subtitle,
  .page-catering-planning .story-hero .page-subtitle {
    display: none;
  }

  .page-catering-planning .nav-row {
    gap: 6px;
  }

  .page-catering-planning .nav-chip,
  .page-catering-planning .back-home-btn {
    padding: 8px 11px;
    font-size: 0.76rem;
  }

  .page-catering-planning .lang-switch {
    width: 100%;
  }

  .page-catering-planning .lang-switch select {
    min-width: 0;
    width: 100%;
  }

  .page-catering-planning .panel {
    padding: 12px;
    border-radius: 18px;
  }

  .page-catering-planning .metric {
    padding: 10px;
    border-radius: 16px;
  }

  .page-catering-planning .metric .value {
    font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem);
  }

  .page-catering-planning .catering-preview-grid {
    grid-template-columns: 1fr;
  }

  .page-catering-planning .row {
    grid-template-columns: 1fr;
  }

  .page-catering-planning .catering-orders-toolbar {
    width: 100%;
  }

  .page-catering-planning .catering-orders-toolbar > div {
    min-width: 0;
    flex: 1 1 140px;
  }

  .page-catering-planning .catering-order-actions > button {
    flex: 1 1 100%;
  }

  .page-catering-planning .catering-drawer-shell {
    padding: 0;
  }

  .page-catering-planning .catering-drawer {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }

  .page-catering-planning .catering-drawer-head {
    padding: 16px 14px 12px;
  }

  .page-catering-planning .catering-drawer-body {
    padding: 12px;
  }
}

/* -----------------------------------------------------------------
   Rice Man chat layout — fixed sidebar, main content offsets right

   Desktop: sidebar is `position: fixed` at the left edge, main shell
   gets `margin-left` equal to sidebar width. This sidesteps the grid
   / sticky / flex-shrink bugs that earlier iterations hit (items
   getting squished to zero height inside a constrained flex column).

   Mobile: sidebar is a slide-over drawer behind a toggle button;
   main shell gets no offset.
   ----------------------------------------------------------------- */

.page-ai-ops .ai-chat-layout {
  display: block;
  width: 100%;
}

.page-ai-ops .app-shell {
  max-width: 1460px;
  padding: 20px 14px 52px;
  margin-left: 290px;
  margin-right: auto;
  min-width: 0;
}

.page-ai-ops .ai-chat-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  display: flex;
  flex-direction: column;
  padding: 18px 10px 20px 14px;
  background: rgba(247, 238, 220, 0.72);
  border-right: 1px solid rgba(120, 98, 79, 0.16);
  z-index: 30;
  box-sizing: border-box;
}

.page-ai-ops .ai-chat-sidebar-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 4px 12px;
  border-bottom: 1px solid rgba(120, 98, 79, 0.16);
  margin-bottom: 10px;
}

.page-ai-ops .ai-chat-sidebar-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(90, 60, 30, 0.62);
}

/* 2026-05-11 v18: aligned with the composer's NEW CHAT button so the
   two "start a new chat" affordances share a visual language. Same
   amber-cream pill, different sizes (sidebar is more compact). */
.page-ai-ops .ai-chat-sidebar-new {
  border: 1px solid rgba(211, 171, 114, 0.44);
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease;
}

.page-ai-ops .ai-chat-sidebar-new:hover {
  background: #fff;
}

/* Scroll container: takes all remaining vertical space, scrolls its
   contents vertically when they exceed the viewport. min-height: 0 is
   REQUIRED on a flex child that needs to be able to shrink below its
   content height so overflow:auto actually kicks in. */
.page-ai-ops .ai-chat-sidebar-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 98, 79, 0.28) transparent;
}

.page-ai-ops .ai-chat-sidebar-body::-webkit-scrollbar {
  width: 6px;
}

.page-ai-ops .ai-chat-sidebar-body::-webkit-scrollbar-thumb {
  background: rgba(120, 98, 79, 0.28);
  border-radius: 999px;
}

.page-ai-ops .ai-chat-sidebar-empty {
  margin: 24px 10px;
  color: rgba(120, 98, 79, 0.68);
  font-size: 0.85rem;
  text-align: center;
  line-height: 1.55;
}

.page-ai-ops .ai-chat-sidebar-retry {
  margin-top: 12px;
  background: none;
  border: 1px solid rgba(120, 98, 79, 0.32);
  padding: 4px 12px;
  border-radius: 999px;
  color: rgba(90, 60, 30, 0.82);
  cursor: pointer;
}

/* Each row is a <button> with two stacked lines: title + meta.
   Critical flags:
     - `flex-shrink: 0`: without this, items get squished inside the
       scroll container's flex column and titles disappear
     - `display: block`: simpler, more predictable layout than nested
       flex column for a two-line button
     - `overflow: visible`: don't clip children, the scroll container
       is the ONLY place we hide overflow */
.page-ai-ops .ai-chat-sidebar-item {
  box-sizing: border-box;
  font-family: inherit;
  width: 100%;
  min-height: 56px;
  display: block;
  padding: 12px 14px;
  margin-bottom: 4px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  overflow: visible;
  flex-shrink: 0;
  transition: background 120ms ease, border-color 120ms ease;
}

.page-ai-ops .ai-chat-sidebar-item:hover {
  background: rgba(255, 248, 236, 0.9);
  border-color: rgba(211, 171, 114, 0.4);
}

.page-ai-ops .ai-chat-sidebar-item.is-active {
  background: linear-gradient(180deg, rgba(18, 153, 46, 0.14) 0%, rgba(18, 153, 46, 0.06) 100%);
  border-color: rgba(18, 153, 46, 0.5);
}

.page-ai-ops .ai-chat-sidebar-item-title {
  display: block;
  width: 100%;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(40, 25, 10, 0.94);
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
  /* The global `button { text-transform: uppercase }` rule was
     making conversation titles render in all-caps. Sentence case
     is friendlier for actual sentences. */
  text-transform: none;
  letter-spacing: 0;
}

.page-ai-ops .ai-chat-sidebar-item.is-active .ai-chat-sidebar-item-title {
  color: var(--accent-deep);
}

.page-ai-ops .ai-chat-sidebar-item-meta {
  display: block;
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(120, 98, 79, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-ai-ops .ai-chat-sidebar-item-meta span {
  display: inline;
}

.page-ai-ops .ai-chat-sidebar-item-meta span + span::before {
  content: " · ";
  color: rgba(120, 98, 79, 0.4);
}

.page-ai-ops .ai-chat-sidebar-toggle {
  display: none;
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 40;
  background: rgba(255, 248, 236, 0.95);
  border: 1px solid rgba(211, 171, 114, 0.52);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(72, 15, 2, 0.12);
}

/* Mobile: sidebar becomes a left slide-over drawer; main loses offset. */
@media (max-width: 960px) {
  .page-ai-ops .app-shell {
    margin-left: 0;
    padding-top: 64px; /* room for the ☰ toggle */
  }
  .page-ai-ops .ai-chat-sidebar {
    width: min(86vw, 300px);
    z-index: 50;
    background: rgba(247, 238, 220, 0.98);
    backdrop-filter: blur(12px);
    box-shadow: 14px 0 40px rgba(72, 15, 2, 0.16);
    transform: translateX(-105%);
    transition: transform 180ms ease;
  }
  .page-ai-ops .ai-chat-sidebar.is-open {
    transform: translateX(0);
  }
  .page-ai-ops .ai-chat-sidebar-toggle {
    display: block;
  }
  .page-ai-ops .ai-chat-sidebar.is-open .ai-chat-sidebar-toggle {
    left: auto;
    right: -52px;
    position: absolute;
    top: 16px;
  }
}

.page-ai-ops .page-head {
  gap: 12px;
}

.page-ai-ops header.page-head {
  padding: 22px 22px 24px;
  margin-bottom: 18px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(9, 67, 24, 0.96) 0%, rgba(18, 153, 46, 0.95) 46%, rgba(15, 121, 38, 0.95) 100%),
    radial-gradient(circle at 86% 18%, rgba(255, 212, 96, 0.18) 0%, rgba(255, 212, 96, 0) 28%);
  border-color: rgba(255, 211, 152, 0.42);
  box-shadow: 0 28px 52px rgba(18, 153, 46, 0.18);
}

.page-ai-ops header.page-head .eyebrow {
  color: rgba(255, 239, 203, 0.8);
}

.page-ai-ops header.page-head .page-subtitle,
.page-ai-ops header.page-head .nav-chip,
.page-ai-ops header.page-head .lang-switch label,
.page-ai-ops header.page-head .back-home-btn {
  color: #fff8e8;
}

.page-ai-ops header.page-head .page-subtitle {
  color: rgba(255, 248, 232, 0.92);
}

.page-ai-ops header.page-head .nav-chip {
  border-color: rgba(255, 248, 232, 0.58);
  background: rgba(255, 248, 232, 0.12);
}

.page-ai-ops header.page-head .nav-chip:hover,
.page-ai-ops header.page-head .nav-chip.active {
  border-color: #ffaf00;
  background: #ffaf00;
  color: #480f02;
}

.page-ai-ops .ai-ops-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(320px, 0.82fr);
  gap: 16px;
  align-items: start;
}

.page-ai-ops .ai-ops-main-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.page-ai-ops .ai-ops-context-panel {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 12px;
  align-self: start;
  max-height: calc(100vh - 48px);
  overflow: auto;
}

.page-ai-ops .ai-ops-hero {
  margin-bottom: 0;
}

.page-ai-ops .ai-ops-hero-actions {
  flex-direction: column;
  align-items: flex-end;
}

.page-ai-ops .ai-ops-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page-ai-ops .ai-ops-block {
  display: grid;
  gap: 12px;
}

.page-ai-ops .ai-ops-suggestion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.page-ai-ops .ai-ops-suggestion {
  display: grid;
  gap: 6px;
  align-content: start;
  border: 1px solid rgba(196, 159, 107, 0.42);
  border-radius: 18px;
  background: rgba(255, 252, 247, 0.92);
  box-shadow: var(--shadow-soft);
  padding: 14px;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  min-height: 126px;
}

.page-ai-ops .ai-ops-suggestion strong {
  display: block;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.page-ai-ops .ai-ops-suggestion span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.page-ai-ops .ai-ops-status-line {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(196, 159, 107, 0.42);
  border-radius: 18px;
  background: rgba(255, 252, 247, 0.9);
  padding: 12px 14px;
  color: var(--muted);
  box-shadow: var(--shadow-soft);
}

.page-ai-ops .ai-ops-status-line[data-tone="loading"] {
  border-color: rgba(245, 176, 52, 0.36);
  background: rgba(255, 247, 220, 0.88);
  color: var(--ink-soft);
}

.page-ai-ops .ai-ops-status-line[data-tone="error"] {
  border-color: rgba(225, 83, 32, 0.34);
  background: rgba(255, 242, 238, 0.92);
  color: var(--danger);
}

.page-ai-ops .ai-ops-feed {
  display: grid;
  gap: 12px;
  max-height: 720px;
  overflow: auto;
  padding-right: 4px;
}

.page-ai-ops .ai-ops-empty {
  border: 1px dashed rgba(196, 159, 107, 0.5);
  border-radius: 18px;
  background: rgba(255, 249, 239, 0.82);
  padding: 18px;
}

.page-ai-ops .ai-ops-empty strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.page-ai-ops .ai-ops-empty p,
.page-ai-ops .ai-ops-empty-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.page-ai-ops .ai-ops-message {
  border: 1px solid rgba(196, 159, 107, 0.42);
  border-radius: 20px;
  padding: 14px 14px 12px;
  background: rgba(255, 252, 247, 0.94);
  box-shadow: var(--shadow-soft);
}

.page-ai-ops .ai-ops-message[data-role="user"] {
  border-color: rgba(18, 153, 46, 0.28);
  background: linear-gradient(180deg, rgba(240, 251, 243, 0.98) 0%, rgba(255, 252, 247, 0.96) 100%);
}

.page-ai-ops .ai-ops-message[data-role="assistant"] {
  border-color: rgba(196, 159, 107, 0.42);
}

.page-ai-ops .ai-ops-message[data-tone="loading"] {
  border-color: rgba(245, 176, 52, 0.36);
  background: linear-gradient(180deg, rgba(255, 247, 220, 0.92) 0%, rgba(255, 252, 247, 0.96) 100%);
}

.page-ai-ops .ai-ops-message[data-tone="danger"] {
  border-color: rgba(225, 83, 32, 0.34);
  background: linear-gradient(180deg, rgba(255, 242, 238, 0.94) 0%, rgba(255, 252, 247, 0.96) 100%);
}

.page-ai-ops .ai-ops-message-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.page-ai-ops .ai-ops-message-role {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.page-ai-ops .ai-ops-message-time {
  color: var(--muted);
  font-size: 0.76rem;
}

.page-ai-ops .ai-ops-message-body {
  color: var(--ink);
  line-height: 1.68;
}

.page-ai-ops .ai-ops-message-body p {
  margin: 0 0 0.72rem;
}

.page-ai-ops .ai-ops-message-body p:last-child {
  margin-bottom: 0;
}

.page-ai-ops .ai-ops-message-state {
  margin-top: 10px;
  font-size: 0.84rem;
  color: var(--muted);
}

.page-ai-ops .ai-ops-message-state.error {
  color: var(--danger);
}

.page-ai-ops .ai-ops-message-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.page-ai-ops .ai-ops-message-meta span {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(244, 234, 210, 0.68);
  color: #6d4218;
  border: 1px solid rgba(172, 136, 88, 0.24);
  font-size: 0.72rem;
  font-weight: 700;
}

.page-ai-ops .ai-ops-feedback-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.page-ai-ops .ai-ops-feedback-btn {
  border: 1px solid rgba(160, 124, 77, 0.28);
  border-radius: 999px;
  background: rgba(255, 248, 236, 0.86);
  color: #6d4218;
  padding: 6px 10px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.page-ai-ops .ai-ops-feedback-btn:hover,
.page-ai-ops .ai-ops-feedback-btn:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(18, 153, 46, 0.35);
}

.page-ai-ops .ai-ops-feedback-btn.active {
  background: rgba(217, 245, 224, 0.95);
  border-color: rgba(18, 153, 46, 0.35);
  color: #14532d;
}

.page-ai-ops .ai-ops-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.page-ai-ops .ai-ops-source-card {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(196, 159, 107, 0.38);
  border-radius: 18px;
  background: rgba(255, 249, 239, 0.9);
  padding: 12px 12px 11px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-soft);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.page-ai-ops .ai-ops-source-card:hover,
.page-ai-ops .ai-ops-source-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(18, 153, 46, 0.3);
  box-shadow: 0 16px 28px rgba(72, 15, 2, 0.1);
}

.page-ai-ops .ai-ops-source-head,
.page-ai-ops .ai-ops-context-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.page-ai-ops .ai-ops-source-card strong,
.page-ai-ops .ai-ops-context-item strong {
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.page-ai-ops .ai-ops-source-card p,
.page-ai-ops .ai-ops-context-item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.52;
  font-size: 0.88rem;
}

.page-ai-ops .ai-ops-source-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.75rem;
}

.page-ai-ops .ai-ops-context-card {
  display: grid;
  gap: 10px;
}

.page-ai-ops .ai-ops-context-card h3 {
  margin: 0;
  font-size: 1rem;
}

.page-ai-ops .ai-ops-context-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.page-ai-ops .ai-ops-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-ai-ops .ai-ops-context-list {
  display: grid;
  gap: 10px;
}

.page-ai-ops .ai-ops-context-item {
  border: 1px solid rgba(196, 159, 107, 0.34);
  border-radius: 16px;
  background: rgba(255, 252, 247, 0.92);
  padding: 12px;
}

.page-ai-ops .ai-ops-context-item strong {
  color: var(--ink);
}

.page-ai-ops .ai-ops-context-item .summary-chip {
  flex: 0 0 auto;
}

.page-ai-ops .ai-ops-composer {
  display: grid;
  gap: 12px;
  padding-top: 2px;
}

.page-ai-ops .ai-ops-composer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.page-ai-ops .ai-ops-composer textarea {
  min-height: 118px;
}

.page-ai-ops .ai-ops-composer button {
  min-width: 132px;
}

@media (max-width: 1180px) {
  .page-ai-ops .ai-ops-overview {
    grid-template-columns: 1fr;
  }

  .page-ai-ops .ai-ops-context-panel {
    position: static;
    max-height: none;
  }

  .page-ai-ops .ai-ops-hero-actions {
    align-items: flex-start;
  }
}

@media (max-width: 980px) {
  .page-ai-ops .app-shell {
    padding-left: 12px;
    padding-right: 12px;
  }

  .page-ai-ops header.page-head {
    padding: 20px 18px 22px;
  }

  .page-ai-ops .ai-ops-metrics,
  .page-ai-ops .ai-ops-suggestion-grid,
  .page-ai-ops .ai-ops-source-grid {
    grid-template-columns: 1fr;
  }

  .page-ai-ops .ai-ops-status-line {
    align-items: flex-start;
  }

  .page-ai-ops .ai-ops-message-head,
  .page-ai-ops .ai-ops-context-card-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-ai-ops .ai-ops-composer button {
    min-width: 0;
    width: 100%;
  }
}

body.page-ai-ops {
  min-height: 100vh;
  color: var(--ink);
}

.page-ai-ops .ai-chat-shell {
  max-width: 1120px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-ai-ops .rice-man-head {
  margin-bottom: 12px;
}

.page-ai-ops .rice-man-head .eyebrow {
  margin: 0 0 8px;
  color: rgba(255, 248, 232, 0.82);
}

.page-ai-ops .rice-man-head .page-title {
  font-size: clamp(2.3rem, 1.4rem + 2.3vw, 3.7rem);
}

.page-ai-ops .rice-man-head .page-subtitle {
  max-width: 62ch;
}

.page-ai-ops .rice-man-head-actions {
  justify-content: flex-end;
  align-items: center;
}

.page-ai-ops .ai-chat-feed {
  flex: 1 1 auto;
  display: grid;
  /* Without an explicit template, grid auto-sizes the track to the
     widest child's intrinsic content. A single wide markdown table
     in an answer can blow the track to 1200px+ and overflow the
     parent feed (which is ~952px in the constrained answer column),
     visually clipping the right edge of the bubble. minmax(0, 1fr)
     forces the track to fit the parent container regardless of
     content's intrinsic width. */
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-content: start;
  padding: 4px 14px 188px;
  overflow: auto;
  min-width: 0;
  min-height: 0;
}

/* Chat container — single column as of 2026-05-11. The reasoning-trail
   column was removed (operators didn't read tool calls; the composer's
   red Cancel + "Rice Man is thinking…" note is enough live feedback).
   The class `.ai-chat-cols` is kept for selector reuse. Legacy
   `.ai-chat-feed-thinking` / `.ai-chat-thinking-toggle` rules below
   are dead targets (no DOM nodes anymore) and harmless. */
.page-ai-ops .ai-chat-cols {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  border-top: 1px solid var(--border, #e2e8f0);
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fdfaf3);
  position: relative;
}
/* Collapse toggle — chevron pinned to the BORDER between thinking and
   answer columns. Click hides the thinking feed and lets the answer
   feed claim full width. State persists in localStorage. */
/* 2026-05-11: the reasoning column was removed alongside its toggle,
   thinking-collapsed state, and "live tool-call steps" inline panel.
   All `.ai-chat-feed-thinking`, `.ai-chat-thinking-toggle`,
   `.ai-chat-thinking-empty`, `.ai-chat-answer-live-steps`,
   `body.thinking-collapsed` rules are gone — the single column
   layout (.ai-chat-feed-answer alone in .ai-chat-cols) is canonical.
   See web/ai-ops.html v=20260511uxbatch9+ for the DOM. */
.page-ai-ops .ai-chat-feed-answer {
  padding: 10px 18px 120px;
}
@media (max-width: 1279px) {
  .page-ai-ops .ai-chat-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  /* At narrow viewport, auto-hide HISTORY sidebar (eats ~280px).
     Operator can still toggle it via the sidebar-toggle button. */
  .page-ai-ops #ai-ops-sidebar { display: none; }
}

.page-ai-ops .ai-chat-answer-pending {
  margin: 0;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  background: rgba(255, 250, 242, 0.6);
  border: 1px dashed var(--border, #e2e8f0);
  border-radius: 10px;
  font-style: italic;
}
.page-ai-ops .ai-chat-answer-pending::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: #d97706;
  vertical-align: middle;
  animation: ai-chat-live-pulse 1.4s infinite;
}
/* 2026-05-11: .ai-chat-answer-live-steps was the inline tool-call
   trace panel rendered while the agent was composing. The reasoning
   column removal phased out tool-call display entirely. Only the
   ai-chat-live-pulse keyframe stays — it's still used by
   .ai-chat-answer-pending to animate the "Composing answer..." dot. */
@keyframes ai-chat-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Verdict + Actions visual hierarchy — the 结论 / Conclusion section
   and 行动建议 / Recommended Actions section are the two parts an
   operator needs to skim to. Before this, they rendered as plain
   <h2> + body and blended into the rest of the answer. Now each
   gets a distinct callout treatment.
   Detection is via JS post-processing of the rendered markdown
   (assignSectionClasses in ai-ops.js). */
.page-ai-ops .ai-chat-markdown .ai-chat-section-conclusion {
  margin: 0 -4px 14px;
  padding: 12px 16px 14px;
  background: linear-gradient(180deg, rgba(15, 118, 110, 0.07), rgba(15, 118, 110, 0.03));
  border-left: 4px solid #0f766e;
  border-radius: 8px;
}
.page-ai-ops .ai-chat-markdown .ai-chat-section-conclusion > h1,
.page-ai-ops .ai-chat-markdown .ai-chat-section-conclusion > h2,
.page-ai-ops .ai-chat-markdown .ai-chat-section-conclusion > h3 {
  margin: 0 0 6px;
  font-size: 14px;
  color: #0f766e;
  letter-spacing: 0.02em;
}
.page-ai-ops .ai-chat-markdown .ai-chat-section-conclusion > h1::before,
.page-ai-ops .ai-chat-markdown .ai-chat-section-conclusion > h2::before,
.page-ai-ops .ai-chat-markdown .ai-chat-section-conclusion > h3::before {
  content: "✓ ";
  color: #0f766e;
  font-weight: 700;
}
.page-ai-ops .ai-chat-markdown .ai-chat-section-actions {
  margin: 0 -4px 14px;
  padding: 12px 16px 14px;
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.08), rgba(217, 119, 6, 0.03));
  border-left: 4px solid #d97706;
  border-radius: 8px;
}
.page-ai-ops .ai-chat-markdown .ai-chat-section-actions > h1,
.page-ai-ops .ai-chat-markdown .ai-chat-section-actions > h2,
.page-ai-ops .ai-chat-markdown .ai-chat-section-actions > h3 {
  margin: 0 0 6px;
  font-size: 14px;
  color: #b45309;
  letter-spacing: 0.02em;
}
.page-ai-ops .ai-chat-markdown .ai-chat-section-actions > h1::before,
.page-ai-ops .ai-chat-markdown .ai-chat-section-actions > h2::before,
.page-ai-ops .ai-chat-markdown .ai-chat-section-actions > h3::before {
  content: "→ ";
  color: #d97706;
  font-weight: 700;
}
.page-ai-ops .ai-chat-markdown .ai-chat-section-sources {
  margin: 12px -4px 0;
  padding: 10px 14px;
  background: rgba(15, 23, 42, 0.025);
  border-radius: 6px;
  border-top: 1px solid var(--border, #e2e8f0);
  font-size: 12px;
}
.page-ai-ops .ai-chat-markdown .ai-chat-section-sources > h1,
.page-ai-ops .ai-chat-markdown .ai-chat-section-sources > h2,
.page-ai-ops .ai-chat-markdown .ai-chat-section-sources > h3 {
  margin: 0 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #6b7280);
}
/* User Q chip — compact preview of the user's question rendered in
   the ANSWER column. Quiet when the thinking column is showing the
   full Q bubble, but essential when thinking is collapsed (operator
   needs to see what they asked). */
.page-ai-ops .answer-side .ai-chat-q-chip {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 6px 12px;
  margin: 4px 0 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted, #6b7280);
  background: rgba(15, 23, 42, 0.03);
  border-radius: 999px;
  max-width: 100%;
  overflow: hidden;
}
.page-ai-ops .answer-side .ai-chat-q-chip-label {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-deep, #0d7723);
}
.page-ai-ops .answer-side .ai-chat-q-chip-text {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 2026-05-11: With the reasoning column gone, the answer-side Q chip
   is always the user-question representation. Promote it to a full
   bubble at all times (the old `body.thinking-collapsed` qualifier
   no longer exists). Also widen the assistant card so the answer
   doesn't look lonely on wide viewports. */
.page-ai-ops .answer-side .ai-chat-q-chip {
  background: var(--surface-strong, #f8f5ec);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--text, #1f2937);
  margin-bottom: 6px;
  border: 1px solid rgba(18, 153, 46, 0.14);
  max-width: 880px;
  overflow: visible;
}
.page-ai-ops .answer-side .ai-chat-q-chip-text {
  white-space: pre-wrap;
  overflow: visible;
  text-overflow: clip;
}
.page-ai-ops .ai-chat-feed-answer .ai-chat-bubble.assistant {
  max-width: 880px;
}

.page-ai-ops .ai-chat-empty {
  min-height: calc(100vh - 360px);
  display: grid;
  place-content: center;
  gap: 14px;
  text-align: center;
  padding: 34px 24px;
  border: 1px solid rgba(18, 153, 46, 0.16);
  border-radius: 28px;
  background: rgba(255, 250, 242, 0.82);
  box-shadow: var(--shadow-soft);
}

.page-ai-ops .ai-chat-empty-eyebrow {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.page-ai-ops .ai-chat-empty h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.page-ai-ops .ai-chat-empty p {
  max-width: 640px;
  margin: 0 auto;
  color: var(--muted);
  line-height: 1.7;
  font-size: 1rem;
}

.page-ai-ops .ai-chat-message {
  display: flex;
}

.page-ai-ops .ai-chat-message.user {
  justify-content: flex-end;
}

.page-ai-ops .ai-chat-message.assistant {
  justify-content: flex-start;
}

.page-ai-ops .ai-chat-bubble {
  width: min(100%, 820px);
  border: 1px solid rgba(18, 153, 46, 0.14);
  border-radius: 28px;
  background: var(--panel);
  backdrop-filter: blur(10px);
  padding: 18px 20px 16px;
  box-shadow: var(--shadow-soft);
}

.page-ai-ops .ai-chat-bubble.user {
  width: min(100%, 700px);
  background: linear-gradient(180deg, rgba(255, 248, 236, 0.98) 0%, rgba(248, 233, 207, 0.95) 100%);
  border-color: rgba(211, 171, 114, 0.52);
  /* Harmonized asymmetric radius — the bottom-right corner is the
     "tail" that points toward the operator, matching the assistant
     bubble's mirrored tail on the bottom-left for visual balance. */
  border-radius: 22px 22px 6px 22px;
  box-shadow: 0 10px 24px rgba(72, 15, 2, 0.08);
}

.page-ai-ops .ai-chat-message.assistant .ai-chat-bubble.assistant:not(.loading):not(.error) {
  border-radius: 22px 22px 22px 6px;
}

.page-ai-ops .ai-chat-bubble.assistant.loading {
  width: min(100%, 880px);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  padding: 2px 4px 6px 0;
}

.page-ai-ops .ai-chat-bubble.assistant.error {
  border-color: rgba(225, 83, 32, 0.28);
  background: rgba(255, 244, 239, 0.9);
}

.page-ai-ops .ai-chat-bubble-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.page-ai-ops .ai-chat-role {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.page-ai-ops .ai-chat-time {
  color: rgba(120, 98, 79, 0.74);
  font-size: 0.78rem;
  white-space: nowrap;
}

.page-ai-ops .ai-chat-message-body {
  color: var(--ink);
  display: grid;
  /* Implicit grid-template-columns is `auto` — sizes to widest
     child's intrinsic content. With wide tables in answers, that
     defeats the bubble width constraint. Force minmax(0, 1fr) so
     the column is always parent-bounded. */
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}

.page-ai-ops .ai-chat-markdown {
  word-break: break-word;
  /* `overflow-wrap: anywhere` lets long unbreakable strings (inline
     code spans like `get_store_inventory_snapshot`, encoded ids,
     URLs) break mid-character when needed. Without this, even with
     a properly-sized parent, a single 239px-wide inline code can
     force the paragraph to be at least that wide at its wrap
     point, overflowing the bubble. */
  overflow-wrap: anywhere;
  line-height: 1.75;
  font-size: 0.98rem;
  min-width: 0;
}

.page-ai-ops .ai-chat-markdown h1,
.page-ai-ops .ai-chat-markdown h2,
.page-ai-ops .ai-chat-markdown h3 {
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.page-ai-ops .ai-chat-markdown h1 {
  font-size: 1.25rem;
}

.page-ai-ops .ai-chat-markdown h2 {
  font-size: 1.08rem;
}

.page-ai-ops .ai-chat-markdown h3 {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.page-ai-ops .ai-chat-markdown p {
  margin: 0;
}

.page-ai-ops .ai-chat-markdown ul {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 6px;
}

.page-ai-ops .ai-chat-markdown code {
  /* Was `inline-flex` — that makes the code element atomic and
     unbreakable, so a long string like `get_store_inventory_snapshot`
     becomes a 239px solid block that can force the parent paragraph
     to overflow its bubble. Plain `inline` lets the line layout
     break inside the code span when overflow-wrap: anywhere is set
     on the parent. */
  display: inline;
  padding: 0.12rem 0.38rem;
  border-radius: 8px;
  background: rgba(18, 153, 46, 0.1);
  color: var(--accent-deep);
  font-size: 0.86em;
  font-family: var(--mono);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.page-ai-ops .ai-chat-message-state {
  font-size: 0.88rem;
  color: var(--muted);
}

.page-ai-ops .ai-chat-message-state.error {
  color: var(--danger);
}

.page-ai-ops .ai-chat-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.page-ai-ops .ai-chat-section-head span:first-child {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-ai-ops .ai-chat-live-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(211, 171, 114, 0.42);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  background: rgba(255, 248, 236, 0.78);
}

.page-ai-ops .ai-chat-live-pill.live {
  color: var(--accent-deep);
  background: rgba(18, 153, 46, 0.1);
  border-color: rgba(18, 153, 46, 0.26);
}

.page-ai-ops .ai-chat-worklog,
.page-ai-ops .ai-chat-answer-panel,
.page-ai-ops .ai-chat-structured-panel {
  border: 1px solid rgba(211, 171, 114, 0.42);
  border-radius: 22px;
  background: rgba(255, 250, 242, 0.86);
  padding: 14px 16px;
}

.page-ai-ops .ai-chat-worklog {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.page-ai-ops .ai-chat-step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.page-ai-ops .ai-chat-step-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid rgba(120, 98, 79, 0.14);
}

.page-ai-ops .ai-chat-step-item:first-child {
  border-top: 1px solid rgba(120, 98, 79, 0.14);
}

.page-ai-ops .ai-chat-step-dot {
  display: none;
}

.page-ai-ops .ai-chat-step-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
  /* Long base64 ids / unbroken URLs would otherwise overflow the
     thinking column and bleed into the answer pane. anywhere lets
     mid-word breaks kick in only when no soft break exists. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.page-ai-ops .ai-chat-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.page-ai-ops .ai-chat-step-head strong {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(120, 98, 79, 0.92);
}

.page-ai-ops .ai-chat-step-head span {
  font-size: 0.76rem;
  color: rgba(120, 98, 79, 0.62);
  white-space: nowrap;
}

.page-ai-ops .ai-chat-step-copy p {
  margin: 0;
  color: var(--ink);
  line-height: 1.75;
  font-size: 1rem;
}

.page-ai-ops .ai-chat-answer-markdown {
  color: var(--ink);
}

.page-ai-ops .ai-chat-markdown .ai-chat-table-wrap {
  margin: 14px 0;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(211, 171, 114, 0.42);
  background: rgba(255, 255, 255, 0.7);
  /* The intrinsic-content sizing of a block wrapper with
     overflow-x:auto and no explicit width was letting the wrap
     size to its child table's intrinsic width (760px+). When the
     answer column is narrower than that (e.g. 696px when workspace
     is open), the wrap overflowed and the right edge of the table
     was clipped. max-width:100% forces the wrap to fit the parent;
     overflow-x:auto then handles the internal table scroll. */
  max-width: 100%;
  min-width: 0;
}

.page-ai-ops .ai-chat-markdown table.ai-chat-table {
  width: 100%;
  /* Without `table-layout: fixed`, the browser computes the table's
     min-width from the widest cell's intrinsic content (e.g.
     "Defrost CurryChicken" + threshold value). That min-width
     propagates up every ancestor whose width is `auto`, defeating
     the bubble / answer-column width constraint. Fixed layout
     ignores intrinsic content widths and distributes columns
     proportionally — cells wrap inside if needed. */
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.92rem;
  color: var(--ink);
}
.page-ai-ops .ai-chat-markdown table.ai-chat-table th,
.page-ai-ops .ai-chat-markdown table.ai-chat-table td {
  /* Allow long content (item names, threshold descriptions) to wrap
     inside fixed-layout cells instead of overflowing. */
  word-break: break-word;
  overflow-wrap: anywhere;
}

.page-ai-ops .ai-chat-markdown table.ai-chat-table thead {
  background: rgba(211, 171, 114, 0.18);
}

.page-ai-ops .ai-chat-markdown table.ai-chat-table th,
.page-ai-ops .ai-chat-markdown table.ai-chat-table td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(211, 171, 114, 0.24);
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}

.page-ai-ops .ai-chat-markdown table.ai-chat-table th {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.page-ai-ops .ai-chat-markdown table.ai-chat-table tbody tr:last-child td {
  border-bottom: none;
}

.page-ai-ops .ai-chat-markdown table.ai-chat-table tbody tr:hover {
  background: rgba(18, 153, 46, 0.05);
}

.page-ai-ops .ai-chat-markdown table.ai-chat-table strong {
  color: var(--accent-deep);
  font-weight: 700;
}

.page-ai-ops .ai-chat-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.page-ai-ops .ai-chat-info-card {
  display: grid;
  gap: 5px;
  padding: 12px 13px;
  border-radius: 16px;
  border: 1px solid rgba(211, 171, 114, 0.34);
  background: rgba(255, 255, 255, 0.78);
}

.page-ai-ops .ai-chat-info-card span {
  font-size: 0.76rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.page-ai-ops .ai-chat-info-card strong {
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.45;
}

.page-ai-ops .ai-chat-data-section {
  margin-top: 14px;
}

.page-ai-ops .ai-chat-chip-row,
.page-ai-ops .ai-chat-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-ai-ops .ai-chat-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(18, 153, 46, 0.1);
  color: var(--accent-deep);
  font-size: 0.78rem;
  font-weight: 700;
}

.page-ai-ops .ai-chat-chip.subtle {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(211, 171, 114, 0.34);
  color: var(--muted);
}

.page-ai-ops .ai-chat-chip.guardrail {
  background: rgba(240, 109, 47, 0.12);
  color: #9a3412;
  border: 1px solid rgba(240, 109, 47, 0.22);
}

.page-ai-ops .ai-chat-guardrail-row {
  margin-top: 12px;
}

.page-ai-ops .ai-chat-source-list {
  display: grid;
  gap: 10px;
}

.page-ai-ops .ai-chat-source-card {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(211, 171, 114, 0.34);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
}

.page-ai-ops .ai-chat-source-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.page-ai-ops .ai-chat-source-card strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.page-ai-ops .ai-chat-source-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.9rem;
}

.page-ai-ops .ai-chat-source-time {
  color: rgba(120, 98, 79, 0.62);
  font-size: 0.78rem;
}

.page-ai-ops .ai-chat-warning-list {
  display: grid;
  gap: 8px;
}

.page-ai-ops .ai-chat-warning-item {
  padding: 10px 12px;
  border: 1px solid rgba(245, 176, 52, 0.34);
  border-radius: 14px;
  background: rgba(255, 247, 231, 0.92);
  color: #92400e;
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Assistant footer action row — Copy button etc. Replaces the old
   ai-chat-feedback-* styles which were deleted with the v1 feedback
   endpoint. */
.page-ai-ops .ai-chat-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.page-ai-ops .ai-chat-action-btn {
  border: 1px solid rgba(211, 171, 114, 0.44);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink-soft);
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.page-ai-ops .ai-chat-action-btn:hover {
  border-color: rgba(18, 153, 46, 0.42);
  background: rgba(18, 153, 46, 0.08);
  color: var(--accent-deep);
}

.page-ai-ops .ai-chat-action-btn.is-copied {
  border-color: rgba(18, 153, 46, 0.5);
  background: rgba(18, 153, 46, 0.16);
  color: var(--accent-deep);
}

.page-ai-ops .ai-chat-action-btn--retry {
  border-color: rgba(217, 119, 6, 0.42);
  color: #b45309;
}
.page-ai-ops .ai-chat-action-btn--retry:hover {
  border-color: rgba(217, 119, 6, 0.65);
  background: rgba(217, 119, 6, 0.12);
  color: #92400e;
}
.page-ai-ops .ai-chat-action-btn--retry:disabled {
  opacity: 0.55;
  cursor: progress;
}
/* Email-PDF action button — green accent to match the SEND primary
   action. Operator's "send this off" affordance lives in the same
   visual family as the composer's Send button so they look related. */
.page-ai-ops .ai-chat-action-btn--email {
  border-color: rgba(18, 153, 46, 0.42);
  color: #0d7723;
}
.page-ai-ops .ai-chat-action-btn--email:hover {
  border-color: rgba(18, 153, 46, 0.65);
  background: rgba(18, 153, 46, 0.10);
  color: #075d1c;
}
.page-ai-ops .ai-chat-action-btn--email:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* Send button transforms to red "× Cancel" while a query is in flight.
   Reuses the same id (ai-ops-send-btn) so the existing form-submit path
   still works for the Send state — the JS toggles button.type between
   "submit" and "button". */
.page-ai-ops .ai-chat-primary.ai-chat-send-cancel {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  color: white !important;
  animation: ai-chat-cancel-pulse 1.6s ease-in-out infinite;
}
@keyframes ai-chat-cancel-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(185, 28, 28, 0); }
}

/* Card separator — soft horizontal rule between answer cards so the
   operator can visually parse where one answer ends and the next
   begins. The separator hugs the bottom of every assistant card
   except the most recent one. */
.page-ai-ops .ai-chat-feed-answer > .ai-chat-message.assistant:not(:last-child) {
  position: relative;
}
.page-ai-ops .ai-chat-feed-answer > .ai-chat-message.assistant:not(:last-child)::after {
  content: "";
  display: block;
  margin: 14px 32px 0;
  border-bottom: 1px dashed rgba(58, 16, 2, 0.16);
}

/* Top KPI strip — slim row of 4 clickable signal tiles above the chat
   columns. Mirrors home page's signals tiles but in a thin row, and each
   tile is a click-to-ask shortcut: clicking "Low stock 5" pre-fills the
   composer with "show me the 5 low-stock items grouped by store" and
   submits. Operator's eye notices state without opening Dashboard, and
   one click drills into a Riceman answer with context.
   STICKY: pinned to the top of the chat column so it stays visible even
   when the conversation scrolls. The chat-shell has a small banner above
   it (~58px); we set top:0 and rely on the banner being a separate sibling
   (it scrolls away normally). z-index high enough to sit above answer
   tables but below the workspace overlay. */
.page-ai-ops .ai-chat-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 18px;
  background: var(--surface, #fdfaf3);
  position: sticky;
  top: 0;
  z-index: 6;
  border-bottom: 1px solid var(--border, #e7e7e3);
}
.page-ai-ops .ai-chat-kpi-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border, #e7e7e3);
  border-left: 3px solid #cbd5e1;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
}
.page-ai-ops .ai-chat-kpi-tile:hover {
  background: rgba(255, 250, 242, 1);
  border-color: #d3ab72;
  border-left-color: #d97706;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}
.page-ai-ops .ai-chat-kpi-tile.tone-warn {
  border-left-color: #d97706;
  background: rgba(254, 252, 245, 0.95);
}
.page-ai-ops .ai-chat-kpi-tile.tone-danger {
  border-left-color: #b91c1c;
  background: rgba(254, 245, 245, 0.95);
}
.page-ai-ops .ai-chat-kpi-tile.tone-ok {
  border-left-color: #16a34a;
}
.page-ai-ops .ai-chat-kpi-icon {
  font-size: 22px;
  line-height: 1;
  flex: 0 0 auto;
}
.page-ai-ops .ai-chat-kpi-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}
.page-ai-ops .ai-chat-kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6b7280);
  font-weight: 600;
}
.page-ai-ops .ai-chat-kpi-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--text, #1f2937);
}
.page-ai-ops .ai-chat-kpi-tile.tone-warn .ai-chat-kpi-value {
  color: #b45309;
}
.page-ai-ops .ai-chat-kpi-tile.tone-danger .ai-chat-kpi-value {
  color: #b91c1c;
}
.page-ai-ops .ai-chat-kpi-sub {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* When the workspace is open the chat shell margin shrinks → the strip
   should still fit. Tighten the gap so tiles don't crowd. */
body.workspace-open .page-ai-ops .ai-chat-kpi-strip,
body.workspace-open.page-ai-ops .ai-chat-kpi-strip {
  gap: 6px;
  padding: 8px 12px 0;
}
body.workspace-open .page-ai-ops .ai-chat-kpi-value,
body.workspace-open.page-ai-ops .ai-chat-kpi-value {
  font-size: 18px;
}
@media (max-width: 980px) {
  .page-ai-ops .ai-chat-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Narrative vs tool-call step visual distinction. Both kinds of
   progress steps used to render identically (just different title
   strings), so operators couldn't tell "Riceman's plan" text apart
   from "calling get_toast_live_sales" at a glance. Narrative steps now
   get an accent left-border and a slight background tint so they pop
   visually as "here is the model thinking out loud". */
.page-ai-ops .ai-chat-step-item[data-step-kind="narrative"] {
  border-left: 3px solid rgba(18, 153, 46, 0.55);
  padding-left: 12px;
  background: rgba(18, 153, 46, 0.04);
  border-top-color: rgba(18, 153, 46, 0.18);
}

.page-ai-ops .ai-chat-step-item[data-step-kind="narrative"] .ai-chat-step-head span:first-child {
  color: rgba(13, 119, 35, 0.9);
  font-weight: 700;
}

.page-ai-ops .ai-chat-step-item[data-step-kind="narrative"] .ai-chat-step-copy p {
  color: rgba(40, 30, 15, 0.9);
  font-style: italic;
}

.page-ai-ops .ai-chat-step-item[data-step-kind="tool"] .ai-chat-step-head span:first-child {
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 0.82rem;
  color: rgba(90, 60, 30, 0.85);
}

.page-ai-ops .ai-chat-step-item[data-step-kind="halted"] {
  border-left: 3px solid rgba(225, 83, 32, 0.6);
  padding-left: 12px;
  background: rgba(255, 244, 239, 0.55);
}

.page-ai-ops .ai-chat-meta-row {
  margin-top: 12px;
}

.page-ai-ops .ai-chat-composer {
  position: sticky;
  bottom: 0;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(247, 238, 220, 0) 0%, rgba(247, 238, 220, 0.88) 18%, rgba(247, 238, 220, 0.98) 52%);
}

.page-ai-ops .ai-chat-composer-surface {
  border: 1px solid rgba(211, 171, 114, 0.42);
  border-radius: 30px;
  background: rgba(255, 250, 242, 0.94);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 44px rgba(72, 15, 2, 0.12);
  overflow: hidden;
}

.page-ai-ops .ai-chat-composer textarea {
  width: 100%;
  min-height: 56px;
  max-height: 240px;
  resize: none;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  padding: 18px 20px 0;
  font-size: 1rem;
  line-height: 1.65;
}

.page-ai-ops .ai-chat-composer textarea::placeholder {
  color: rgba(120, 98, 79, 0.72);
}

.page-ai-ops .ai-chat-composer-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 16px;
}

.page-ai-ops .ai-chat-compose-note {
  flex: 1 1 auto;
  color: var(--muted);
  font-size: 0.82rem;
}

.page-ai-ops .ai-chat-primary,
.page-ai-ops .ai-chat-secondary {
  border-radius: 999px;
  padding: 10px 15px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.page-ai-ops .ai-chat-primary {
  border: 1px solid var(--accent-deep);
  background: var(--accent-deep);
  color: #fff8e8;
}

.page-ai-ops .ai-chat-primary:disabled {
  opacity: 0.6;
  cursor: default;
}

.page-ai-ops .ai-chat-secondary {
  border: 1px solid rgba(211, 171, 114, 0.44);
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink-soft);
}

.page-ai-ops .ai-chat-secondary:disabled {
  opacity: 0.6;
  cursor: default;
}

@media (max-width: 780px) {
  .page-ai-ops .ai-chat-shell {
    min-height: auto;
  }

  .page-ai-ops .rice-man-head {
    gap: 16px;
  }

  .page-ai-ops .ai-chat-feed {
    gap: 16px;
    padding-top: 0;
    padding-bottom: 156px;
  }

  .page-ai-ops .ai-chat-info-grid {
    grid-template-columns: 1fr;
  }

  .page-ai-ops .ai-chat-composer-footer {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .page-ai-ops .ai-chat-compose-note {
    order: 3;
    width: 100%;
  }

  .page-ai-ops .ai-chat-primary {
    margin-left: auto;
  }
}

/* ====================================================================== */
/* SOP Cost preview modal                                                 */
/* ====================================================================== */

.sop-cost-modal[hidden] {
  display: none !important;
}
.sop-cost-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sop-cost-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 0, 0.55);
}
.sop-cost-modal-dialog {
  position: relative;
  width: min(780px, 95vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--card-bg, #fff);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(20, 12, 0, 0.35);
  overflow: hidden;
}
.sop-cost-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: #f5efd7;
}
.sop-cost-modal-head h2 {
  font-size: 1.05rem;
  margin: 0;
  color: #2a1a00;
}
.sop-cost-modal-head-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.sop-cost-pricing-label {
  font-size: 0.78rem;
  color: #5c3d00;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.sop-cost-pricing-label select {
  font-size: 0.8rem;
  padding: 0.18rem 0.35rem;
  border-radius: 6px;
  border: 1px solid #c9bd94;
}
.sop-cost-modal-body {
  padding: 1rem 1.1rem;
  overflow-y: auto;
  flex: 1;
}
.sop-cost-modal-foot {
  padding: 0.55rem 1.1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: #fbf8ee;
}
.sop-cost-store + .sop-cost-store {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
}
.sop-cost-store h3 {
  font-size: 0.95rem;
  margin: 0 0 0.45rem;
  color: #2a1a00;
}
.sop-cost-big {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0.2rem 0 0.2rem;
}
.sop-cost-big-num {
  font-size: 1.65rem;
  font-weight: 700;
  color: #2a1a00;
}
.sop-cost-big-label {
  font-size: 0.9rem;
  color: #5c3d00;
}
.sop-cost-sub {
  font-size: 0.85rem;
  margin-bottom: 0.6rem;
}
.sop-cost-warnings {
  background: #fff6e0;
  border: 1px solid #e0c56e;
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
  margin: 0.3rem 0;
  list-style: none;
}
.sop-cost-warnings li {
  font-size: 0.8rem;
  color: #664200;
}
.sop-cost-missing {
  background: #fff0ee;
  border: 1px solid #e0b5b0;
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
  margin: 0.3rem 0;
}
.sop-cost-missing strong {
  color: #7a1f17;
  font-size: 0.85rem;
  display: block;
  margin-bottom: 0.2rem;
}
.sop-cost-missing ul {
  margin: 0.2rem 0 0.1rem;
  padding-left: 1.2rem;
  font-size: 0.8rem;
}
.sop-cost-breakdown {
  margin-top: 0.8rem;
}
.sop-cost-breakdown summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: #5c3d00;
  padding: 0.3rem 0;
}
.sop-cost-step {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  margin: 0.35rem 0;
  background: #fbf8ee;
}
.sop-cost-step-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.sop-cost-step-idx {
  font-weight: 600;
  color: #2a1a00;
  min-width: 3.2rem;
}
.sop-cost-step-name {
  flex: 1;
  color: #2a1a00;
}
.sop-cost-step-total {
  font-weight: 600;
  color: #2a1a00;
}
.sop-cost-step-meta {
  font-size: 0.75rem;
  margin-top: 0.1rem;
}
.sop-cost-step-inputs {
  margin-top: 0.4rem;
  display: grid;
  gap: 0.15rem;
}
.sop-cost-input-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.82rem;
  line-height: 1.3;
  color: #2a1a00;
}
.sop-cost-input-row > span:last-child {
  text-align: right;
}
.sop-cost-error {
  color: #7a1f17;
  font-size: 0.9rem;
}
.sop-cost-computed-at {
  font-size: 0.75rem;
  margin: 0 0 0.6rem;
}

/* SOP sidebar actions */
.ai-chat-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.ai-chat-sidebar-import {
  font-size: 0.78rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px dashed #c9bd94;
  background: #fbf8ee;
  color: #5c3d00;
  cursor: pointer;
}
.ai-chat-sidebar-import:hover {
  background: #f5efd7;
}

/* ====================================================================== */
/* SOP sidebar delete × button                                            */
/* ====================================================================== */

.ai-chat-sidebar-row {
  position: relative;
  display: flex;
  align-items: stretch;
}
.ai-chat-sidebar-row .ai-chat-sidebar-item {
  flex: 1 1 auto;
  min-width: 0;  /* allow truncation inside flex child */
}
.ai-chat-sidebar-delete {
  flex: 0 0 auto;
  width: 22px;
  border: none;
  background: transparent;
  color: #8a6d3f;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
  margin-left: -22px;  /* overlap the item's right edge */
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
  cursor: pointer;
  border-radius: 4px;
  z-index: 2;
}
.ai-chat-sidebar-row:hover .ai-chat-sidebar-delete,
.ai-chat-sidebar-delete:focus {
  opacity: 0.9;
}
.ai-chat-sidebar-delete:hover {
  color: #fff;
  background: #c24a2c;
  opacity: 1 !important;
}

/* ====================================================================== */
/* SOP Import Source thumbnail card                                       */
/* ====================================================================== */

.sop-import-source-card {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.6rem 0.8rem;
  margin: 0.2rem 0 0.5rem;
  background: #fbf8ee;
  border: 1px dashed #c9bd94;
  border-radius: 8px;
  font-size: 0.85rem;
}
.sop-import-source-thumb-link {
  flex: 0 0 auto;
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  background: #f2ead6;
  border: 1px solid #d4c9a4;
}
.sop-import-source-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sop-import-source-icon {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: #f2ead6;
  border: 1px solid #d4c9a4;
  border-radius: 6px;
}
.sop-import-source-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: #4a3a12;
}
.sop-import-source-title {
  font-weight: 600;
  color: #2a1a00;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sop-import-source-sub {
  font-size: 0.78rem;
  opacity: 0.8;
}
.sop-import-source-sub a {
  color: #5c3d00;
  text-decoration: underline;
}

/* ==========================================================================
   Master Data Admin — 2026-04 redesign
   Scoped to admin.html. Reuses .panel / .tab-switch / .tab-chip / .table-wrap.
   ========================================================================== */

.admin-section-switch {
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px;
  background: rgba(255, 250, 242, 0.72);
  border: 1px solid rgba(196, 159, 107, 0.38);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.admin-section-switch .tab-chip {
  min-height: 40px;
  padding: 8px 16px;
  font-size: 0.82rem;
  box-shadow: none;
  background: transparent;
  border-color: transparent;
  white-space: nowrap;
}

.admin-section-switch .tab-chip:hover:not(.active) {
  background: rgba(245, 176, 52, 0.18);
  border-color: rgba(245, 176, 52, 0.38);
  color: var(--ink);
}

.admin-section-switch .tab-chip.active {
  background: linear-gradient(135deg, #12992e 0%, #0f8428 100%);
  color: #fff8e8;
  border-color: var(--accent);
  box-shadow: 0 6px 14px rgba(18, 153, 46, 0.22);
}

.admin-tab-panel {
  gap: 18px;
}

.admin-panel {
  padding: 22px 24px;
  border-radius: 24px;
}

.admin-panel + .admin-panel {
  margin-top: 0;
}

.admin-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
  padding: 0;
  flex-wrap: wrap;
}

.admin-panel-head > div:first-child {
  flex: 1 1 320px;
  min-width: 0;
}

.admin-panel-head h2 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  font-family: var(--font);
  text-transform: none;
  line-height: 1.25;
}

.admin-panel-head h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.admin-panel-head p {
  margin: 4px 0 0;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.45;
  max-width: 72ch;
}

.admin-panel-head-sub {
  margin-top: 10px;
  margin-bottom: 10px;
}

.admin-panel-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
}

.admin-panel-actions > button {
  min-height: 38px;
  padding: 8px 14px;
  font-size: 0.8rem;
  border-radius: 12px;
  text-transform: none;
  letter-spacing: 0.01em;
}

.admin-panel-note {
  margin: -4px 0 16px;
  padding: 10px 14px;
  font-size: 0.82rem;
  color: var(--muted);
  background: rgba(255, 248, 232, 0.52);
  border: 1px solid rgba(228, 207, 175, 0.52);
  border-radius: 12px;
  line-height: 1.45;
}

.admin-panel-note-warn {
  color: #8f1f16;
  background: rgba(255, 228, 217, 0.6);
  border-color: #f1b39c;
}

.admin-panel-note-inline {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.admin-subsection-divider {
  height: 1px;
  margin: 22px -24px 20px;
  background: linear-gradient(90deg, rgba(196, 159, 107, 0), rgba(196, 159, 107, 0.42), rgba(196, 159, 107, 0));
}

/* --- Tables --- */

.admin-table-wrap {
  border-radius: 14px;
  border-color: rgba(196, 159, 107, 0.38);
  background: rgba(255, 253, 248, 0.85);
}

.admin-table {
  min-width: 0;
  background: transparent;
}

.admin-table-materials {
  min-width: 980px;
}

.admin-table thead th {
  font-size: 0.68rem;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(248, 234, 209, 0.82) 0%, rgba(244, 223, 188, 0.78) 100%);
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(196, 159, 107, 0.42);
}

.admin-table tbody td {
  padding: 10px 12px;
  font-size: 0.84rem;
  border-bottom: 1px solid rgba(228, 207, 175, 0.42);
  vertical-align: middle;
}

.admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-table tbody tr:nth-child(even) td {
  background: rgba(255, 249, 237, 0.46);
}

.admin-table tbody tr:hover td {
  background: rgba(232, 246, 235, 0.52);
}

.admin-table td.mono {
  font-size: 0.76rem;
}

.admin-table-empty td {
  padding: 22px 12px !important;
  text-align: center;
  color: var(--muted);
  font-style: italic;
  background: transparent !important;
}

.admin-col-action {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.admin-row-action {
  min-height: 34px !important;
  padding: 6px 12px !important;
  font-size: 0.74rem !important;
  border-radius: 10px !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
}

.admin-row-actions {
  display: inline-flex;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.admin-cell-primary {
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.admin-cell-subtle {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.3;
  margin-top: 2px;
}

.admin-cell-template {
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.4;
  max-width: 340px;
  word-break: break-word;
}

/* --- Pills / badges --- */

.admin-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(72, 15, 2, 0.1);
  background: rgba(255, 248, 232, 0.82);
  color: var(--ink-soft);
  white-space: nowrap;
}

.admin-pill-store {
  border-color: rgba(18, 153, 46, 0.28);
  background: rgba(232, 246, 235, 0.82);
  color: #0d7723;
}

.admin-pill-warehouse {
  border-color: rgba(245, 176, 52, 0.32);
  background: rgba(253, 239, 210, 0.82);
  color: #7a4d0a;
}

.admin-pill-central_kitchen {
  border-color: rgba(240, 109, 47, 0.32);
  background: rgba(253, 224, 210, 0.82);
  color: #8d3608;
}

.admin-pill-supplier {
  border-color: rgba(72, 15, 2, 0.18);
  background: rgba(239, 225, 200, 0.82);
  color: #5a2f14;
}

.admin-badge-compact {
  min-width: 0;
  padding: 3px 9px;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
}

/* --- Inline form / filters (outside modal) --- */

.admin-inline-form {
  display: grid;
  gap: 0;
}

.admin-inline-form .row {
  margin-bottom: 12px;
}

.admin-inline-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.admin-inline-filters label {
  font-size: 0.72rem;
  margin-bottom: 4px;
}

.admin-inline-filters input,
.admin-inline-filters select {
  min-height: 44px;
  font-size: 0.88rem;
}

/* --- Help notes under inputs --- */

.admin-help-note {
  margin: 6px 0 0;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.4;
}

.admin-help-note code {
  font-family: var(--mono);
  background: rgba(244, 231, 209, 0.7);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.78rem;
}

/* --- Toggles (replacing <select>true/false) --- */

.admin-form-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
  margin: 6px 0 14px;
  padding: 12px 14px;
  background: rgba(255, 248, 232, 0.48);
  border: 1px solid rgba(228, 207, 175, 0.56);
  border-radius: 14px;
}

.admin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}

.admin-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  min-width: 40px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  border: 1px solid rgba(172, 136, 88, 0.48);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 2px rgba(72, 15, 2, 0.08);
  position: relative;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.admin-toggle input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(72, 15, 2, 0.18);
  transition: transform 0.16s ease;
}

.admin-toggle input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #18ab35 0%, #12992e 100%);
  border-color: #0f8428;
}

.admin-toggle input[type="checkbox"]:checked::after {
  transform: translateX(18px);
}

.admin-toggle input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(18, 153, 46, 0.85);
  outline-offset: 2px;
}

/* --- Advanced collapsible --- */

.admin-form-advanced {
  grid-column: 1 / -1;
  width: 100%;
  margin: 4px 0 0;
  font-size: 0.82rem;
}

.admin-form-advanced summary {
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 248, 232, 0.6);
  border: 1px solid rgba(228, 207, 175, 0.52);
  user-select: none;
}

.admin-form-advanced summary::-webkit-details-marker {
  display: none;
}

.admin-form-advanced summary::before {
  content: "▸";
  font-size: 0.7rem;
  transition: transform 0.14s ease;
}

.admin-form-advanced[open] summary::before {
  transform: rotate(90deg);
}

.admin-form-advanced[open] {
  padding-bottom: 4px;
}

.admin-form-advanced .row {
  margin-top: 10px;
}

/* --- Form action row --- */

.admin-form-actions {
  margin-top: 4px;
  gap: 10px;
}

.admin-form-actions button {
  min-height: 44px;
  padding: 10px 20px;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.9rem;
}

/* --- Modal title override (less shout-y) --- */

.admin-modal-title {
  font-size: 1.2rem !important;
  font-family: var(--font) !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

.admin-form-modal .scan-modal-head {
  border-bottom: 1px solid rgba(228, 207, 175, 0.52);
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.admin-form-modal .page-subtitle {
  font-size: 0.84rem;
  color: var(--muted);
  margin-top: 4px;
}

@media (max-width: 720px) {
  .admin-panel {
    padding: 18px 16px;
  }
  .admin-subsection-divider {
    margin-left: -16px;
    margin-right: -16px;
  }
  .admin-panel-head {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-panel-actions {
    width: 100%;
  }
  .admin-panel-actions > button {
    flex: 1 1 auto;
  }
  .admin-cell-template {
    max-width: 220px;
  }
}

/* =========================================================
   Global left sidebar (nav-sidebar.js injects .app-sidebar)
   ========================================================= */

:root {
  --app-sidebar-width: 244px;
  --app-sidebar-bg-top: #0c5a1d;
  --app-sidebar-bg-bottom: #124b1b;
  --app-sidebar-text: rgba(255, 248, 232, 0.92);
  --app-sidebar-muted: rgba(255, 248, 232, 0.58);
  --app-sidebar-active-bg: rgba(255, 175, 0, 0.96);
  --app-sidebar-active-ink: #3a1002;
  --app-sidebar-hover-bg: rgba(255, 255, 255, 0.08);
  --app-sidebar-border: rgba(255, 248, 232, 0.12);
}

.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--app-sidebar-width);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--app-sidebar-bg-top) 0%, var(--app-sidebar-bg-bottom) 100%);
  color: var(--app-sidebar-text);
  /* Sidebar must sit ABOVE the scrim or mobile users can't tap the nav
     items — the scrim catches every click otherwise. */
  z-index: 88;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.18);
  font-family: inherit;
}

body.has-app-sidebar {
  padding-left: var(--app-sidebar-width);
  box-sizing: border-box;
}

.app-sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--app-sidebar-border);
}

.app-sidebar-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.app-sidebar-brand-mark {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 175, 0, 0.95);
  color: #3a1002;
  font-weight: 800;
  font-size: 1rem;
  font-family: var(--font-display, inherit);
  letter-spacing: 0.02em;
  flex: 0 0 34px;
}

.app-sidebar-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.1;
}

.app-sidebar-brand-title {
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  color: #fff8e8;
}

.app-sidebar-brand-sub {
  font-size: 0.72rem;
  color: var(--app-sidebar-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.app-sidebar-close {
  display: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--app-sidebar-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}

.app-sidebar-close svg {
  width: 18px;
  height: 18px;
}

.app-sidebar-nav {
  flex: 1 1 0;
  /* min-height: 0 is required for overflow-y: auto to actually scroll
     inside a flex column — without it the child stretches and the
     bottom of the nav gets clipped on short viewports, hiding the
     People + Hiring + Vendor Labels groups. */
  min-height: 0;
  overflow-y: auto;
  padding: 10px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-sidebar-nav::-webkit-scrollbar {
  width: 6px;
}
.app-sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 248, 232, 0.18);
  border-radius: 3px;
}

.app-sidebar-group {
  margin-top: 14px;
}

.app-sidebar-group:first-child {
  margin-top: 4px;
}

.app-sidebar-group-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 4px;
  font-size: 0.7rem;
  color: var(--app-sidebar-muted);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.app-sidebar-group-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: rgba(255, 248, 232, 0.45);
}
.app-sidebar-group-icon svg {
  width: 14px;
  height: 14px;
}

.app-sidebar-group-items {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.app-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: 1px 4px;
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--app-sidebar-text);
  text-decoration: none;
  font-weight: 600;
  transition: background 0.14s ease, color 0.14s ease;
  line-height: 1.2;
}

.app-sidebar-item:hover {
  background: var(--app-sidebar-hover-bg);
  color: #fff8e8;
  transform: none;
}

.app-sidebar-item.is-current {
  background: var(--app-sidebar-active-bg);
  color: var(--app-sidebar-active-ink);
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(255, 175, 0, 0.28);
}

.app-sidebar-item.is-current:hover {
  background: var(--app-sidebar-active-bg);
  color: var(--app-sidebar-active-ink);
}

.app-sidebar-item-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  align-items: center;
  justify-content: center;
}
.app-sidebar-item-icon svg {
  width: 18px;
  height: 18px;
}

.app-sidebar-item-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-sidebar-item-standalone {
  margin: 0 4px 6px;
  padding: 10px 12px;
  font-size: 0.92rem;
}

.app-sidebar-foot {
  padding: 12px 12px 14px;
  border-top: 1px solid var(--app-sidebar-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.app-sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  min-width: 0;
}

.app-sidebar-user-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: rgba(255, 175, 0, 0.95);
  color: #3a1002;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
}

.app-sidebar-user-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.app-sidebar-user-name {
  color: #fff8e8;
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-sidebar-user-role {
  color: var(--app-sidebar-muted);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.app-sidebar-foot-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.app-sidebar-lang {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-sidebar-lang label {
  margin: 0;
  font-size: 0.74rem;
  color: var(--app-sidebar-muted);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.app-sidebar-lang select {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255, 248, 232, 0.1);
  color: #fff8e8;
  border: 1px solid var(--app-sidebar-border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.82rem;
}

.app-sidebar-lang select option {
  color: #3a1002;
}

.app-sidebar-logout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--app-sidebar-border);
  border-radius: 8px;
  color: var(--app-sidebar-text);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.86rem;
  background: rgba(255, 255, 255, 0.04);
  transition: background 0.14s ease, border-color 0.14s ease;
}

.app-sidebar-logout svg {
  width: 16px;
  height: 16px;
}

.app-sidebar-logout:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 248, 232, 0.28);
}

/* Hide the legacy per-page top nav/lang-switch once the sidebar is present,
   so Phase 1/2 can coexist if any page still carries the old chips. */
body.has-app-sidebar header.page-head .nav-row,
body.has-app-sidebar header.page-head .lang-switch,
body.has-app-sidebar header.page-head .back-home-btn {
  display: none !important;
}

.app-sidebar-hamburger {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  width: 42px;
  height: 42px;
  z-index: 90;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(72, 15, 2, 0.2);
  background: #fff8e8;
  color: #3a1002;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.app-sidebar-hamburger svg {
  width: 22px;
  height: 22px;
}

.app-sidebar-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(18, 30, 18, 0.5);
  z-index: 85;
  backdrop-filter: blur(2px);
}

/* iPad-and-narrower: collapse sidebar to a hamburger so the workspace
   gets the full viewport width. Operators on Pi kiosks + tablets need
   the screen real-estate for the actual content (material grids, audit
   forms, KDS task cards). Bumped from 960 → 1100 to catch landscape
   iPads (1024×768). */
@media (max-width: 1100px) {
  .app-sidebar {
    transform: translateX(-100%);
    transition: transform 0.18s ease;
    width: min(82vw, 300px);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  .app-sidebar.is-open {
    transform: translateX(0);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  }
  .app-sidebar-close {
    display: inline-flex;
  }
  .app-sidebar-hamburger {
    display: inline-flex;
  }
  .app-sidebar-scrim:not([hidden]) {
    display: block;
  }
  body.has-app-sidebar {
    padding-left: 0;
    padding-top: 60px; /* room for hamburger */
  }
  body.app-sidebar-open {
    overflow: hidden;
  }
}

/* Kiosk & login never show the global sidebar. */
body.store-kiosk-mode .app-sidebar,
body.store-kiosk-mode .app-sidebar-hamburger,
body.store-kiosk-mode .app-sidebar-scrim,
body.page-login .app-sidebar,
body.page-login .app-sidebar-hamburger,
body.page-login .app-sidebar-scrim {
  display: none !important;
}

/* /ai-ops also hides the global mobile hamburger — the page provides
   its own ☰ in the rice-man head, and two hamburgers in the same
   top-left corner is visually broken. The scrim/sidebar themselves
   stay so they can overlay when the header ☰ is clicked. */
body.page-ai-ops .app-sidebar-hamburger {
  display: none !important;
}

body.store-kiosk-mode,
body.page-login {
  /* reset: even if the class got added, don't leave a phantom padding */
}
body.store-kiosk-mode.has-app-sidebar,
body.page-login.has-app-sidebar {
  padding-left: 0;
}

/* ai-ops and SOP Author share .page-ai-ops body class. Their chat history sidebar
   is position:fixed at left:0 which collides with the global sidebar. Offset it
   and adjust the app-shell margin so the three columns line up cleanly. */
body.has-app-sidebar.page-ai-ops {
  padding-left: 0; /* the chat-sidebar itself handles positioning; body stays flush */
}
body.has-app-sidebar.page-ai-ops .ai-chat-sidebar {
  left: var(--app-sidebar-width);
}
/* 2026-05-11: BOTH the global nav AND the history sidebar are now
   hidden by default on /ai-ops (overlay panels, click-to-open). So
   the chat shell no longer needs to leave 534px of left margin for
   them. The old rule (margin-left: 244+290) hung around after both
   sidebars were collapsed, pushing all chat content way off-center
   to the right. Reset to auto-center (`.ai-chat-shell` has
   max-width 1120 — symmetric margins put it dead-center). */
body.has-app-sidebar.page-ai-ops .app-shell {
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   Home (slim landing): greeting, signals, priorities, recent
   ========================================================= */

.page-home .app-shell {
  padding-top: 30px;
}

.home-greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding: 6px 4px 0;
}

.home-greeting-title {
  margin: 0;
  font-size: clamp(1.7rem, 1.1rem + 1.5vw, 2.4rem);
  font-family: var(--font-display, inherit);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink, #3a1002);
  line-height: 1.05;
}

.home-greeting-date {
  margin: 6px 0 0;
  color: var(--muted, #7a5a40);
  font-size: 0.98rem;
  font-weight: 600;
}

.home-greeting-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(72, 15, 2, 0.08);
  box-shadow: 0 2px 10px rgba(72, 15, 2, 0.05);
}

.home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.home-section-head .eyebrow {
  margin: 0;
}

.home-signals,
.home-priorities,
.home-recent {
  margin-bottom: 18px;
}

.home-recent-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-recent-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.78);
  border: 1px solid rgba(72, 15, 2, 0.1);
  color: var(--ink, #3a1002);
  font-weight: 700;
  font-size: 0.86rem;
  text-decoration: none;
  transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}

.home-recent-chip:hover {
  transform: translateY(-1px);
  background: #ffaf00;
  border-color: #ffaf00;
  color: #3a1002;
}

@media (max-width: 600px) {
  .home-greeting {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* =============================================================
   Shared interaction layer: toast / skeleton / command palette
   ============================================================= */

:root {
  --ros-z-toast: 200;
  --ros-z-palette: 300;
  --ros-z-palette-scrim: 295;
}

/* Toast ------------------------------------------------------ */

.ros-toast-root {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: var(--ros-z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: min(92vw, 380px);
}

.ros-toast {
  background: #fff;
  border: 1px solid rgba(58, 16, 2, 0.1);
  border-left: 4px solid #7a7a7a;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(18, 30, 18, 0.16);
  pointer-events: auto;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--ink, #3a1002);
  animation: ros-toast-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  min-width: 220px;
}

.ros-toast.is-leaving {
  animation: ros-toast-out 0.18s cubic-bezier(0.4, 0, 1, 1) both;
}

.ros-toast-success { border-left-color: #12992e; }
.ros-toast-error { border-left-color: #d64f27; }
.ros-toast-warn { border-left-color: #f5b034; }
.ros-toast-info { border-left-color: #0b76a4; }

.ros-toast-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}
.ros-toast-icon svg {
  width: 18px;
  height: 18px;
}
.ros-toast-body {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}
.ros-toast-title {
  font-weight: 800;
  font-size: 0.92rem;
  margin-bottom: 2px;
}
.ros-toast-message {
  color: rgba(58, 16, 2, 0.72);
  line-height: 1.4;
}
.ros-toast-close {
  background: transparent;
  border: 0;
  padding: 0;
  margin-left: 4px;
  margin-top: -2px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  color: rgba(58, 16, 2, 0.42);
  font-size: 1.1rem;
  line-height: 1;
  flex: 0 0 auto;
}
.ros-toast-close:hover {
  color: rgba(58, 16, 2, 0.82);
}

@keyframes ros-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ros-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateX(12px); }
}

/* Skeleton --------------------------------------------------- */

.ros-skeleton {
  display: inline-block;
  vertical-align: middle;
  background: linear-gradient(
    90deg,
    rgba(58, 16, 2, 0.08) 0%,
    rgba(58, 16, 2, 0.16) 50%,
    rgba(58, 16, 2, 0.08) 100%
  );
  background-size: 200% 100%;
  border-radius: 6px;
  color: transparent !important;
  user-select: none;
  pointer-events: none;
  animation: ros-skeleton-shimmer 1.4s ease-in-out infinite;
  min-height: 1em;
  min-width: 2em;
}
.ros-skeleton-block {
  display: block;
  width: 100%;
}

@keyframes ros-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Command Palette -------------------------------------------- */

.ros-palette-scrim {
  position: fixed;
  inset: 0;
  background: rgba(18, 30, 18, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--ros-z-palette-scrim);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: min(14vh, 140px);
  animation: ros-palette-scrim-in 0.14s ease-out both;
}
.ros-palette-scrim[hidden] {
  display: none;
}

.ros-palette {
  width: min(92vw, 640px);
  max-height: 70vh;
  background: #fffdf6;
  border: 1px solid rgba(58, 16, 2, 0.14);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(18, 30, 18, 0.32);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: var(--ros-z-palette);
  animation: ros-palette-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.ros-palette-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(58, 16, 2, 0.08);
}

.ros-palette-search-icon {
  width: 18px;
  height: 18px;
  color: rgba(58, 16, 2, 0.5);
  flex: 0 0 auto;
}

.ros-palette-input {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 1rem;
  color: var(--ink, #3a1002);
  font-family: inherit;
  padding: 4px 0;
  min-width: 0;
}
.ros-palette-input::placeholder {
  color: rgba(58, 16, 2, 0.38);
}

.ros-palette-kbd {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(58, 16, 2, 0.55);
  border: 1px solid rgba(58, 16, 2, 0.16);
  border-radius: 6px;
  padding: 3px 8px;
  background: rgba(58, 16, 2, 0.04);
  flex: 0 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ros-palette-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px 8px 10px;
}

.ros-palette-group-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(58, 16, 2, 0.4);
  padding: 12px 12px 4px;
}

.ros-palette-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--ink, #3a1002);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  transition: background 0.1s ease;
}
.ros-palette-item.is-active {
  background: rgba(18, 153, 46, 0.14);
  box-shadow: inset 0 0 0 1px rgba(18, 153, 46, 0.22);
}
.ros-palette-item-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: rgba(58, 16, 2, 0.55);
  flex: 0 0 auto;
}
.ros-palette-item-icon svg {
  width: 18px;
  height: 18px;
}
.ros-palette-item.is-active .ros-palette-item-icon {
  color: #0c5a1d;
}
.ros-palette-item-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ros-palette-item-meta {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(58, 16, 2, 0.44);
  flex: 0 0 auto;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ros-palette-empty {
  padding: 44px 16px;
  text-align: center;
  color: rgba(58, 16, 2, 0.5);
  font-size: 0.92rem;
}

.ros-palette-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid rgba(58, 16, 2, 0.08);
  background: rgba(58, 16, 2, 0.03);
  font-size: 0.72rem;
  color: rgba(58, 16, 2, 0.55);
  font-weight: 600;
  flex-wrap: wrap;
}

.ros-palette-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ros-palette-hint-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  border: 1px solid rgba(58, 16, 2, 0.18);
  border-radius: 4px;
  padding: 1px 6px;
  background: #fff;
  color: rgba(58, 16, 2, 0.66);
}

@keyframes ros-palette-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ros-palette-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Sidebar Cmd+K hint ----------------------------------------- */

.app-sidebar-palette-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 8px 4px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 248, 232, 0.14);
  border-radius: 10px;
  color: rgba(255, 248, 232, 0.7);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
  width: calc(100% - 16px);
  text-align: left;
  font-family: inherit;
}
.app-sidebar-palette-hint:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff8e8;
}
.app-sidebar-palette-hint-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.app-sidebar-palette-hint-icon svg {
  width: 14px;
  height: 14px;
}
.app-sidebar-palette-hint-label {
  flex: 1 1 auto;
  text-align: left;
}
.app-sidebar-palette-hint-kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  background: rgba(255, 248, 232, 0.12);
  border: 1px solid rgba(255, 248, 232, 0.26);
  border-radius: 4px;
  padding: 1px 6px;
  color: #fff8e8;
  flex: 0 0 auto;
  letter-spacing: 0.04em;
}

/* =============================================================
   Unified visual layer v2
   - Slim page-head on inner pages (sidebar-mode)
   - Tab-chip restyle: underline, not pills
   - Button tiers (opt-in via .btn-*)
   - Camera page shell + Investment harmonization
   ============================================================= */

/* ---- Slim page-head when sidebar is present ---------------- */
/* Home uses .home-greeting instead, so this only affects inner pages. */

body.has-app-sidebar header.page-head {
  border: 1px solid rgba(72, 15, 2, 0.1);
  border-left: 4px solid var(--accent, #12992e);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 18px;
  background: linear-gradient(180deg, #fffdf5 0%, #fdf5e5 100%);
  box-shadow: 0 2px 10px rgba(72, 15, 2, 0.05);
  overflow: visible;
}
body.has-app-sidebar header.page-head::before,
body.has-app-sidebar header.page-head::after {
  display: none;
}
body.has-app-sidebar header.page-head > div > .page-title::before {
  display: none;
}
body.has-app-sidebar header.page-head .page-title {
  font-size: clamp(1.35rem, 1.05rem + 0.6vw, 1.75rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.15;
  color: var(--ink, #3a1002);
  margin: 0;
}
body.has-app-sidebar header.page-head .page-subtitle {
  color: rgba(58, 16, 2, 0.62);
  font-size: 0.92rem;
  line-height: 1.45;
  margin-top: 4px;
}
/* AI-ops / SOP use .page-head.rice-man-head — keep accent but apply same slim */
body.has-app-sidebar header.page-head.rice-man-head {
  padding: 18px 22px;
}
body.has-app-sidebar header.page-head.rice-man-head .eyebrow {
  color: var(--accent-deep, #0c5a1d);
}

/* Kiosk mode keeps the big green hero. */
body.store-kiosk-mode header.page-head,
body:not(.has-app-sidebar) header.page-head {
  /* unchanged */
}

/* ---- Tab: pill → underline segmented ---------------------- */

body.has-app-sidebar .tab-switch {
  gap: 4px;
  border-bottom: 1px solid rgba(58, 16, 2, 0.12);
  padding: 0;
  margin: 0 0 18px;
  flex-wrap: wrap;
}

body.has-app-sidebar .tab-chip {
  min-height: 36px;
  border: 0;
  background: transparent;
  color: rgba(58, 16, 2, 0.6);
  border-radius: 0;
  padding: 9px 14px;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: 0.01em;
  box-shadow: none;
  position: relative;
  transition: color 0.14s ease;
}
body.has-app-sidebar .tab-chip:hover {
  background: transparent;
  color: var(--ink, #3a1002);
  transform: none;
  border-color: transparent;
}
body.has-app-sidebar .tab-chip::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 2px;
  background: transparent;
  border-radius: 2px 2px 0 0;
  transition: background 0.14s ease;
}
body.has-app-sidebar .tab-chip.active {
  background: transparent;
  color: var(--accent-deep, #0c5a1d);
  border-color: transparent;
}
body.has-app-sidebar .tab-chip.active::after {
  background: var(--accent, #12992e);
}

/* Keep the kiosk tab look untouched */
body.store-kiosk-mode .tab-chip {
  min-height: 46px;
  border-radius: 999px;
  /* ride on the default .tab-chip cascade above unchanged */
}

/* ---- Button tier system (opt-in via .btn classes) --------- */
/* Existing <button> styles are preserved; new pages use .btn-*. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.1;
  text-decoration: none;
  box-shadow: none;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.1s ease;
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn:focus-visible {
  outline: 2px solid rgba(18, 153, 46, 0.5);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--accent, #12992e);
  color: #fff8e8;
  border-color: var(--accent, #12992e);
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-deep, #0c5a1d);
  border-color: var(--accent-deep, #0c5a1d);
}

.btn-secondary {
  background: #fffdf6;
  color: var(--ink, #3a1002);
  border-color: rgba(58, 16, 2, 0.16);
}
.btn-secondary:hover:not(:disabled) {
  background: #fff;
  border-color: rgba(58, 16, 2, 0.3);
}

.btn-ghost {
  background: transparent;
  color: var(--ink, #3a1002);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
  background: rgba(58, 16, 2, 0.06);
}

.btn-danger {
  background: #d64f27;
  color: #fff;
  border-color: #d64f27;
}
.btn-danger:hover:not(:disabled) {
  background: #b93f1a;
  border-color: #b93f1a;
}

.btn-sm { min-height: 30px; padding: 6px 10px; font-size: 0.8rem; border-radius: 8px; }
.btn-lg { min-height: 46px; padding: 12px 20px; font-size: 1rem; border-radius: 12px; }

/* ---- Camera pages visual shell ---------------------------- */

body.page-camera-admin.has-app-sidebar,
body.page-camera-review.has-app-sidebar {
  max-width: none;
  margin: 0;
  padding: 0 0 0 var(--app-sidebar-width);
  background: linear-gradient(180deg, rgba(255, 248, 232, 0.5) 0%, rgba(255, 253, 246, 1) 300px);
  min-height: 100vh;
  font-family: inherit;
  color: var(--ink, #3a1002);
}

@media (max-width: 960px) {
  body.page-camera-admin.has-app-sidebar,
  body.page-camera-review.has-app-sidebar {
    padding-left: 0;
    padding-top: 60px;
  }
}

body.page-camera-admin .camera-shell,
body.page-camera-review .camera-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 24px 64px;
}

body.page-camera-admin .camera-page-head,
body.page-camera-review .camera-page-head {
  border: 1px solid rgba(72, 15, 2, 0.1);
  border-left: 4px solid var(--accent, #12992e);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 18px;
  background: linear-gradient(180deg, #fffdf5 0%, #fdf5e5 100%);
  box-shadow: 0 2px 10px rgba(72, 15, 2, 0.05);
}
body.page-camera-admin .camera-page-head h1,
body.page-camera-review .camera-page-head h1 {
  font-size: 1.55rem;
  font-weight: 800;
  margin: 0 0 4px;
  color: var(--ink, #3a1002);
}
body.page-camera-admin .camera-page-head .muted,
body.page-camera-review .camera-page-head .muted {
  margin: 0;
  font-size: 0.92rem;
  color: rgba(58, 16, 2, 0.62);
}

body.page-camera-admin .card,
body.page-camera-review .card,
body.page-camera-review .filters {
  border: 1px solid rgba(72, 15, 2, 0.1);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 14px;
  background: #fffdf6;
  box-shadow: 0 2px 10px rgba(72, 15, 2, 0.04);
}
body.page-camera-admin h2,
body.page-camera-review h2 {
  font-size: 1.08rem;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--ink, #3a1002);
}

/* Table restyle in camera pages */
body.page-camera-admin table,
body.page-camera-review table {
  width: 100%;
  border-collapse: collapse;
}
body.page-camera-admin th,
body.page-camera-review th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(58, 16, 2, 0.5);
  padding: 8px 10px;
  background: rgba(58, 16, 2, 0.04);
  border-bottom: 1px solid rgba(58, 16, 2, 0.1);
}
body.page-camera-admin td,
body.page-camera-review td {
  padding: 10px;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(58, 16, 2, 0.06);
}

body.page-camera-admin input[type="text"],
body.page-camera-admin input[type="number"],
body.page-camera-admin select,
body.page-camera-review input[type="text"],
body.page-camera-review input[type="number"],
body.page-camera-review select {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid rgba(58, 16, 2, 0.18);
  border-radius: 8px;
  background: #fff;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--ink, #3a1002);
}

body.page-camera-admin .row,
body.page-camera-review .filters {
  gap: 12px;
}

body.page-camera-admin .pill,
body.page-camera-review .pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(18, 153, 46, 0.12);
  color: var(--accent-deep, #0c5a1d);
}
body.page-camera-admin .pill.inactive,
body.page-camera-review .pill.inactive {
  background: rgba(214, 79, 39, 0.12);
  color: #a93a1a;
}
body.page-camera-review .pill.flag-review {
  background: rgba(245, 176, 52, 0.18);
  color: #7b4a02;
}
body.page-camera-review .pill.flag-reviewed_alert {
  background: rgba(214, 79, 39, 0.14);
  color: #a93a1a;
}
body.page-camera-review .pill.flag-reviewed_ok {
  background: rgba(18, 153, 46, 0.14);
  color: var(--accent-deep, #0c5a1d);
}

body.page-camera-review .thumb {
  border: 1px solid rgba(58, 16, 2, 0.1);
  border-radius: 12px;
  padding: 10px;
  background: #fffdf6;
}
body.page-camera-review .thumb img {
  border-radius: 8px;
}

body.page-camera-admin .err,
body.page-camera-review .err {
  color: #b93f1a;
  font-size: 0.88rem;
  font-weight: 600;
}
body.page-camera-admin .muted,
body.page-camera-review .muted {
  color: rgba(58, 16, 2, 0.56);
}

/* ---- Investment page harmonization ------------------------ */

body.page-investment.has-app-sidebar {
  background: linear-gradient(180deg, #fdf6e5 0%, #fffdf6 420px);
}
body.page-investment.has-app-sidebar .page-shell {
  padding-top: 22px;
}
body.page-investment.has-app-sidebar .hero {
  border: 1px solid rgba(72, 15, 2, 0.1);
  border-left: 4px solid var(--accent, #12992e);
  border-radius: 14px;
  background: linear-gradient(180deg, #fffdf5 0%, #fdf5e5 100%);
  box-shadow: 0 2px 10px rgba(72, 15, 2, 0.05);
  padding: 18px 22px;
  margin-bottom: 18px;
}
body.page-investment.has-app-sidebar .hero h1 {
  font-size: clamp(1.35rem, 1.05rem + 0.6vw, 1.75rem);
}
body.page-investment.has-app-sidebar .mode-switch {
  padding: 0;
  border-bottom: 1px solid rgba(58, 16, 2, 0.12);
  margin-bottom: 18px;
}

/* =============================================================
   Advisor Subscriptions — folded cards per brief type
   ============================================================= */

.advisor-sub-cards {
  display: grid;
  gap: 14px;
}

.advisor-sub-loading,
.advisor-sub-empty {
  padding: 14px 18px;
  background: rgba(58, 16, 2, 0.03);
  border: 1px dashed rgba(58, 16, 2, 0.14);
  border-radius: 10px;
  color: rgba(58, 16, 2, 0.58);
  font-size: 0.9rem;
}

.advisor-sub-card {
  padding: 18px 20px;
}

.advisor-sub-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(58, 16, 2, 0.08);
}

.advisor-sub-card-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.advisor-sub-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex: 0 0 auto;
}

.advisor-sub-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--ink, #3a1002);
  line-height: 1.2;
}

.advisor-sub-hint {
  font-size: 0.78rem;
  color: rgba(58, 16, 2, 0.55);
  margin-top: 2px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.advisor-sub-channel {
  margin-top: 14px;
}

.advisor-sub-channel-head {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(58, 16, 2, 0.5);
  padding: 0 4px 6px;
  border-bottom: 1px solid rgba(58, 16, 2, 0.05);
  margin-bottom: 2px;
}

.advisor-sub-channel-body {
  display: grid;
  gap: 2px;
}

.advisor-sub-rec {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto;
  gap: 16px;
  padding: 10px 10px;
  border-radius: 8px;
  align-items: center;
  transition: background 0.12s ease;
}

.advisor-sub-rec:hover {
  background: rgba(58, 16, 2, 0.035);
}

.advisor-sub-rec.is-inactive {
  opacity: 0.52;
}

.advisor-sub-rec-main {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.advisor-sub-rec-dest {
  font-weight: 700;
  color: var(--ink, #3a1002);
  font-size: 0.92rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.advisor-sub-rec-label {
  font-size: 0.82rem;
  color: rgba(58, 16, 2, 0.6);
  font-weight: 600;
}

.advisor-sub-rec-meta {
  display: flex;
  gap: 12px;
  font-size: 0.82rem;
  color: rgba(58, 16, 2, 0.62);
  align-items: center;
  min-width: 0;
  flex-wrap: wrap;
}

.advisor-sub-rec-status {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(58, 16, 2, 0.55);
  background: rgba(58, 16, 2, 0.08);
  padding: 2px 7px;
  border-radius: 999px;
}

.advisor-sub-rec-actions {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
}

.advisor-sub-rec-actions .btn-ghost {
  color: rgba(58, 16, 2, 0.62);
}
.advisor-sub-rec-actions .btn-ghost:hover:not(:disabled) {
  color: var(--ink, #3a1002);
}
.advisor-sub-rec-actions .advisor-sub-del:hover:not(:disabled) {
  color: #b93f1a;
  background: rgba(214, 79, 39, 0.08);
}

@media (max-width: 820px) {
  .advisor-sub-rec {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .advisor-sub-rec-actions {
    justify-self: end;
  }
}

/* =============================================================
   Dashboard — Home tab: data-first, no marketing copy
   ============================================================= */

.dashboard-home-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 6px 2px 16px;
  flex-wrap: wrap;
}

.dashboard-home-date {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink, #3a1002);
  letter-spacing: 0.01em;
}

.dashboard-home-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 4-number hero KPI strip. Inherits .metric / .metric-action behavior
   (trace clicks, tab-index) from the existing dashboard wiring. */
.dashboard-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.dashboard-kpi {
  background: #fffdf6;
  border: 1px solid rgba(58, 16, 2, 0.09);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 1px 3px rgba(72, 15, 2, 0.03);
}
.dashboard-kpi:hover,
.dashboard-kpi:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(18, 153, 46, 0.3);
  box-shadow: 0 6px 18px rgba(72, 15, 2, 0.08);
  outline: none;
}

.dashboard-kpi-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(58, 16, 2, 0.55);
}

.dashboard-kpi-value {
  font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--ink, #3a1002);
  font-family: var(--font-display, inherit);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 820px) {
  .dashboard-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Section-level headers replace the old eyebrow + H2 + subtitle stack. */
.dashboard-section {
  padding: 18px 22px;
  margin-bottom: 16px;
}

.dashboard-section-head {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(58, 16, 2, 0.08);
}
.dashboard-section-head h3 {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(58, 16, 2, 0.58);
}
.dashboard-section-head-split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.dashboard-section-head-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: rgba(58, 16, 2, 0.62);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
}
.dashboard-section-head-filter label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(58, 16, 2, 0.5);
}
.dashboard-section-head-filter select {
  width: auto;
  min-width: 180px;
  min-height: 34px;
  padding: 4px 10px;
  font-size: 0.88rem;
  border-radius: 8px;
}

.dashboard-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 980px) {
  .dashboard-home-grid {
    grid-template-columns: 1fr;
  }
}

/* Alert category guide: reference-style content hidden behind a
   collapsible so daily users aren't pushed past it every load. */
.dashboard-details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(58, 16, 2, 0.58);
  padding: 6px 2px;
  border-bottom: 1px solid rgba(58, 16, 2, 0.08);
}
.dashboard-details summary::-webkit-details-marker { display: none; }
.dashboard-details summary::before {
  content: "▸";
  font-size: 0.8rem;
  color: rgba(58, 16, 2, 0.4);
  transition: transform 0.14s ease;
  margin-right: 4px;
}
.dashboard-details[open] summary::before {
  transform: rotate(90deg);
  display: inline-block;
}
.dashboard-details-hint {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(58, 16, 2, 0.4);
  background: rgba(58, 16, 2, 0.05);
  padding: 2px 8px;
  border-radius: 999px;
}
.dashboard-details > *:not(summary) {
  margin-top: 14px;
}

/* Tighten the existing priority focus-list when rendered inside
   the new dashboard-section wrapper. */
.dashboard-section .focus-list {
  gap: 8px;
}

/* =============================================================
   Dashboard — dense Home: store-card grid + compact status line
   ============================================================= */

/* Header: date + inline KPI chips on one line */
.dashboard-home-head-left {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}

.dashboard-home-status {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  font-size: 0.95rem;
  color: rgba(58, 16, 2, 0.62);
}

.dashboard-home-status .status-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  transition: background 0.12s ease;
}
.dashboard-home-status .status-chip:hover,
.dashboard-home-status .status-chip:focus-visible {
  background: rgba(58, 16, 2, 0.05);
  outline: none;
}

.dashboard-home-status .status-chip-num {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink, #3a1002);
  font-variant-numeric: tabular-nums;
}

.dashboard-home-status .status-chip-label {
  font-size: 0.82rem;
  color: rgba(58, 16, 2, 0.58);
  font-weight: 600;
}

.dashboard-home-status .status-chip-sep {
  color: rgba(58, 16, 2, 0.24);
  font-weight: 600;
  padding: 0 2px;
}

/* Sites at risk — store cards as grid, each is a mini-dashboard */
.dashboard-sites-section {
  margin-bottom: 14px;
}

.dashboard-section-head-plain {
  margin: 0 0 10px;
  padding-bottom: 0;
  border-bottom: 0;
}
.dashboard-section-head-plain h3 {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(58, 16, 2, 0.48);
}

.store-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 820px) {
  .store-card-grid {
    grid-template-columns: 1fr;
  }
}

.store-card {
  border: 1px solid rgba(58, 16, 2, 0.12);
  border-left: 4px solid rgba(245, 176, 52, 0.7);
  border-radius: 12px;
  padding: 14px 16px;
  background: #fffdf6;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(72, 15, 2, 0.04);
}
.store-card:hover,
.store-card:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(72, 15, 2, 0.09);
  outline: none;
  border-color: rgba(18, 153, 46, 0.3);
}
.store-card.danger {
  border-left-color: #d64f27;
  background: linear-gradient(180deg, rgba(214, 79, 39, 0.04) 0%, #fffdf6 40%);
}
.store-card.warn {
  border-left-color: #e29018;
}
.store-card.store-card-empty {
  cursor: default;
  color: rgba(58, 16, 2, 0.6);
  border-left-color: rgba(58, 16, 2, 0.1);
  background: rgba(58, 16, 2, 0.02);
}

.store-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.store-card-title {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--ink, #3a1002);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.store-card-score {
  font-family: var(--font-display, inherit);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
  color: rgba(58, 16, 2, 0.82);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.store-card.danger .store-card-score {
  color: #c43e1a;
}

.store-card-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.store-card-chip {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(58, 16, 2, 0.07);
  color: rgba(58, 16, 2, 0.62);
}
.store-card-chip.chip-low { background: rgba(214, 79, 39, 0.12); color: #a93a1a; }
.store-card-chip.chip-expiry { background: rgba(214, 79, 39, 0.12); color: #a93a1a; }
.store-card-chip.chip-expiry-warn { background: rgba(245, 176, 52, 0.16); color: #7b4a02; }
.store-card-chip.chip-fifo { background: rgba(11, 99, 206, 0.12); color: #0b4a8a; }

.store-card-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.store-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 0.85rem;
  padding: 4px 0;
  border-top: 1px dashed rgba(58, 16, 2, 0.08);
}
.store-card-row:first-child {
  border-top: 0;
  padding-top: 0;
}
.store-card-row-mat {
  font-weight: 700;
  color: var(--ink, #3a1002);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.store-card-row-meta {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: rgba(58, 16, 2, 0.6);
}
.store-card-row-qty {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink, #3a1002);
}
.store-card-row-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.store-card-row-low .store-card-row-tag { color: #a93a1a; }
.store-card-row-expiry_red .store-card-row-tag { color: #a93a1a; }
.store-card-row-fifo .store-card-row-tag { color: #0b4a8a; }

.store-card-empty-row {
  font-size: 0.82rem;
  color: rgba(58, 16, 2, 0.48);
  padding: 4px 0;
}

.store-card-foot {
  font-size: 0.72rem;
  color: rgba(58, 16, 2, 0.48);
  letter-spacing: 0.06em;
  font-weight: 700;
  text-transform: uppercase;
  padding-top: 2px;
  margin-top: auto;
}
.store-card:hover .store-card-foot {
  color: var(--accent-deep, #0c5a1d);
}

/* Priorities: compact one-line each */
.dashboard-priority-compact {
  padding: 14px 18px;
  margin-bottom: 14px;
}
.focus-list-compact {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.focus-list-compact .focus-item {
  padding: 8px 10px;
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  border: 0;
  background: transparent;
}
.focus-list-compact .focus-item:hover {
  background: rgba(58, 16, 2, 0.04);
}
.focus-list-compact .focus-item strong {
  font-size: 0.9rem;
  font-weight: 700;
  flex: 0 0 auto;
  margin: 0;
}
.focus-list-compact .focus-item p {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(58, 16, 2, 0.55);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.focus-list-compact .focus-item[data-tone="danger"] strong { color: #b93f1a; }
.focus-list-compact .focus-item[data-tone="warn"] strong { color: #7b4a02; }
.focus-list-compact .focus-item[data-tone="ok"] strong { color: var(--accent-deep, #0c5a1d); }

/* =============================================================
   Table enhance: search + sort + sticky header + progressive cols
   ============================================================= */

.ros-table-wrap {
  position: relative;
  overflow: auto;
  max-height: 70vh;
  border: 1px solid rgba(58, 16, 2, 0.08);
  border-radius: 12px;
  background: #fffdf6;
}

.ros-table-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: #fffdf6;
  border-bottom: 1px solid rgba(58, 16, 2, 0.08);
}

.ros-table-search {
  flex: 1 1 auto;
  min-height: 32px;
  border: 1px solid rgba(58, 16, 2, 0.14);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 0.86rem;
  font-family: inherit;
  color: var(--ink, #3a1002);
  background: #fff;
  width: auto;
  min-width: 0;
}
.ros-table-search:focus {
  outline: 2px solid rgba(18, 153, 46, 0.32);
  outline-offset: 1px;
  border-color: rgba(18, 153, 46, 0.42);
}

.ros-table-cols-toggle {
  flex: 0 0 auto;
  font-size: 0.78rem;
  white-space: nowrap;
}

.ros-table {
  width: 100%;
  border-collapse: collapse;
}

.ros-table thead {
  position: sticky;
  top: 49px; /* under the toolbar */
  z-index: 2;
  background: #fdf5e5;
}

.ros-table thead th {
  background: #fdf5e5;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(58, 16, 2, 0.6);
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(58, 16, 2, 0.12);
  user-select: none;
  position: relative;
  white-space: nowrap;
}

.ros-table.ros-th-sortable,
.ros-table th.ros-th-sortable {
  cursor: pointer;
}
.ros-table th.ros-th-sortable:hover {
  color: var(--ink, #3a1002);
}

.ros-th-sort-indicator {
  display: inline-block;
  width: 10px;
  margin-left: 4px;
  color: rgba(58, 16, 2, 0.32);
}
.ros-table th[data-sort-dir="asc"] .ros-th-sort-indicator::before {
  content: "▲";
  color: var(--accent-deep, #0c5a1d);
}
.ros-table th[data-sort-dir="desc"] .ros-th-sort-indicator::before {
  content: "▼";
  color: var(--accent-deep, #0c5a1d);
}

.ros-table tbody td {
  padding: 8px 12px;
  border-top: 1px solid rgba(58, 16, 2, 0.06);
  font-size: 0.88rem;
  vertical-align: top;
}
.ros-table tbody tr:hover {
  background: rgba(58, 16, 2, 0.025);
}

.ros-col-hidden {
  display: none !important;
}
.ros-row-hidden {
  display: none !important;
}

@media (max-width: 720px) {
  .ros-table-wrap {
    border-radius: 8px;
    max-height: none;
  }
  .ros-table thead {
    top: 41px;
  }
}

/* Make data-fmt elements look stable while loading (avoid 0-width flash) */
[data-fmt-time]:empty::before,
[data-fmt-num]:empty::before,
[data-fmt-money]:empty::before {
  content: "—";
  color: rgba(58, 16, 2, 0.3);
}

/* =============================================================
   Riceman (ai-ops) UI v2: slim head, prompt grid, snapshot polish
   ============================================================= */

/* Slim header — replaces the green-gradient hero with a thin row */
.page-ai-ops .rice-man-head-slim,
body.has-app-sidebar header.page-head.rice-man-head-slim {
  padding: 14px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffdf5 0%, #fdf5e5 100%);
  border-left: 4px solid var(--accent, #12992e);
  box-shadow: 0 2px 10px rgba(72, 15, 2, 0.05);
  margin-bottom: 14px;
  overflow: visible;
}
.rice-man-head-slim::before,
.rice-man-head-slim::after { display: none !important; }
.rice-man-head-slim .page-title::before { display: none !important; }

.rice-man-head-slim .rice-man-head-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.rice-man-head-slim .page-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink, #3a1002);
  line-height: 1.05;
}
.rice-man-head-meta {
  font-size: 0.82rem;
  color: rgba(58, 16, 2, 0.55);
  font-weight: 600;
}
.rice-man-head-row {
  align-items: center !important;
}
.rice-man-head-newchat {
  margin-left: auto;
  padding: 6px 14px;
  border: 1px solid rgba(18, 153, 46, 0.32);
  background: rgba(18, 153, 46, 0.06);
  color: var(--accent-deep, #0d7723);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.rice-man-head-newchat:hover {
  background: rgba(18, 153, 46, 0.13);
  border-color: rgba(18, 153, 46, 0.55);
}

/* Empty state v2 — suggested prompt tiles */
.page-ai-ops .ai-chat-empty {
  text-align: left;
  padding: 24px 28px;
  border: 1px solid rgba(58, 16, 2, 0.08);
  border-radius: 16px;
  background: #fffdf6;
  box-shadow: 0 2px 10px rgba(72, 15, 2, 0.04);
  margin: 12px 0;
}
.page-ai-ops .ai-chat-empty-head h2 {
  margin: 0 0 4px;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ink, #3a1002);
}
.page-ai-ops .ai-chat-empty-head p {
  margin: 0 0 18px;
  color: rgba(58, 16, 2, 0.62);
  font-size: 0.92rem;
  max-width: 64ch;
}

.ai-chat-prompt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.ai-chat-prompt-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid rgba(58, 16, 2, 0.1);
  border-radius: 12px;
  background: linear-gradient(180deg, #fffefa 0%, #fcf5e7 120%);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--ink, #3a1002);
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  /* Reset legacy <button> defaults (UPPERCASE + heavy shadow) so the tile
     reads as a card, not a primary action button. */
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  min-height: 0;
  box-shadow: none;
}
.ai-chat-prompt-tile:hover,
.ai-chat-prompt-tile:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(18, 153, 46, 0.35);
  box-shadow: 0 6px 18px rgba(72, 15, 2, 0.08);
  outline: none;
}
.ai-chat-prompt-icon {
  font-size: 1.4rem;
  line-height: 1;
}
.ai-chat-prompt-title {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--ink, #3a1002);
}
.ai-chat-prompt-text {
  font-size: 0.82rem;
  color: rgba(58, 16, 2, 0.6);
  line-height: 1.4;
}

/* Worklog: collapsible "Steps" card (auto-collapse when answer ready) */
.page-ai-ops .ai-chat-message.assistant.complete .ai-chat-worklog {
  border: 1px solid rgba(58, 16, 2, 0.08);
  border-radius: 12px;
  background: rgba(58, 16, 2, 0.02);
  padding: 10px 14px;
}
.page-ai-ops .ai-chat-message.assistant.complete .ai-chat-worklog::before {
  content: "▸ Show reasoning trail (" attr(data-step-count) " steps)";
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(58, 16, 2, 0.55);
  cursor: pointer;
  user-select: none;
}
.page-ai-ops .ai-chat-message.assistant.complete .ai-chat-worklog:not(.is-expanded) .ai-chat-section-head,
.page-ai-ops .ai-chat-message.assistant.complete .ai-chat-worklog:not(.is-expanded) .ai-chat-step-list {
  display: none;
}
.page-ai-ops .ai-chat-message.assistant.complete .ai-chat-worklog.is-expanded::before {
  content: "▾ Hide reasoning trail";
}

/* Camera snapshots inline grid — replace inline styles with design tokens */
.page-ai-ops .ai-chat-attached-snapshots {
  margin-top: 14px !important;
  padding: 12px 14px;
  border: 1px solid rgba(58, 16, 2, 0.08);
  border-radius: 12px;
  background: #fffdf6;
}
.ai-chat-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.ai-chat-snapshot-thumb {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(58, 16, 2, 0.12);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.ai-chat-snapshot-thumb:hover {
  transform: translateY(-1px);
  border-color: rgba(18, 153, 46, 0.32);
  box-shadow: 0 6px 18px rgba(72, 15, 2, 0.1);
}
.ai-chat-snapshot-thumb img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  background: rgba(58, 16, 2, 0.05);
}
/* Inline person-legend / camera thumb wrapper. Same click-to-open
   behaviour as .ai-chat-snapshot-thumb but lives inline inside the
   markdown text flow (so display:inline-block, not flex). Added
   2026-04-25 with the "click to view full snapshot" change. */
.ai-chat-inline-thumb-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  line-height: 0;
  vertical-align: middle;
}
.ai-chat-inline-thumb-link:hover img {
  border-color: rgba(18, 153, 46, 0.55);
  box-shadow: 0 2px 8px rgba(72, 15, 2, 0.12);
}
.ai-chat-snapshot-meta {
  font-size: 0.72rem;
  padding: 6px 10px;
  color: rgba(58, 16, 2, 0.62);
  background: rgba(58, 16, 2, 0.03);
  display: flex;
  justify-content: space-between;
  font-weight: 600;
}

/* History sidebar polish — search input + group labels */
.page-ai-ops .ai-chat-sidebar-search {
  margin: 6px 14px 8px;
  padding: 6px 10px;
  border: 1px solid rgba(58, 16, 2, 0.16);
  border-radius: 8px;
  background: #fffdf6;
  font-size: 0.84rem;
  font-family: inherit;
  color: var(--ink, #3a1002);
  width: calc(100% - 28px);
  min-height: 30px;
}
.page-ai-ops .ai-chat-sidebar-search:focus {
  outline: 2px solid rgba(18, 153, 46, 0.32);
  outline-offset: 1px;
  border-color: rgba(18, 153, 46, 0.42);
}
.page-ai-ops .ai-chat-sidebar-group-label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(58, 16, 2, 0.42);
  padding: 12px 14px 4px;
}

/* =============================================================
   Store Order — slim form panel + inline summary
   ============================================================= */

.store-order-form-panel {
  padding: 18px 22px;
}
.store-order-form-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(58, 16, 2, 0.08);
}
.store-order-form-head h3 {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(58, 16, 2, 0.58);
}
.store-order-summary {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink, #3a1002);
  background: rgba(18, 153, 46, 0.1);
  border: 1px solid rgba(18, 153, 46, 0.22);
  padding: 4px 12px;
  border-radius: 999px;
}

.store-order-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(58, 16, 2, 0.06);
}
.store-order-actions-spacer { flex: 1 1 auto; }

/* =============================================================
   Store Orders — material card grid + qty stepper
   ============================================================= */

.store-order-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}

.store-order-checklist-empty {
  font-size: 0.92rem;
  color: rgba(58, 16, 2, 0.55);
  padding: 12px 6px;
}

.store-order-item {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(58, 16, 2, 0.03);
  border: 1px solid rgba(58, 16, 2, 0.08);
  border-left: 3px solid rgba(58, 16, 2, 0.12);
  transition: background 0.12s ease, border-color 0.12s ease;
  min-height: 56px;
}

.store-order-item[data-selected="true"] {
  background: rgba(28, 122, 49, 0.08);
  border-color: rgba(28, 122, 49, 0.25);
  border-left-color: #1c7a31;
}

.store-order-item-tap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  border-radius: 8px;
  min-width: 0;
}
.store-order-item-tap:hover,
.store-order-item-tap:focus-visible {
  background: rgba(58, 16, 2, 0.04);
  outline: 0;
}

.store-order-item-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(58, 16, 2, 0.6);
  background: rgba(58, 16, 2, 0.06);
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}
.store-order-item[data-selected="true"] .store-order-item-code {
  color: #146a26;
  background: rgba(28, 122, 49, 0.12);
}

.store-order-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.store-order-item-text strong {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink, #3a1002);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.store-order-item-meta {
  font-size: 0.72rem;
  color: rgba(58, 16, 2, 0.5);
  letter-spacing: 0.02em;
}

/* Stepper: − [ N ] +  unit */
.store-order-item-stepper {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 0 0 auto;
}
.store-order-step {
  width: 30px;
  height: 36px;
  border: 1px solid rgba(58, 16, 2, 0.18);
  background: rgba(255, 253, 246, 0.85);
  color: var(--ink, #3a1002);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  user-select: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.store-order-step:hover,
.store-order-step:focus-visible {
  background: rgba(58, 16, 2, 0.06);
  outline: 0;
}
.store-order-step:active {
  background: rgba(58, 16, 2, 0.12);
}
.store-order-step:first-of-type {
  border-radius: 8px 0 0 8px;
  border-right: 0;
}
.store-order-step:last-of-type {
  border-radius: 0 8px 8px 0;
  border-left: 0;
}
.store-order-item-stepper input[type="number"] {
  width: 44px;
  height: 36px;
  text-align: center;
  border: 1px solid rgba(58, 16, 2, 0.18);
  border-radius: 0;
  background: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink, #3a1002);
  padding: 0 4px;
  margin: 0;
  -moz-appearance: textfield;
}
.store-order-item-stepper input[type="number"]::-webkit-outer-spin-button,
.store-order-item-stepper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.store-order-item-stepper input[type="number"]:focus {
  outline: 2px solid rgba(28, 122, 49, 0.32);
  outline-offset: -2px;
  border-color: rgba(28, 122, 49, 0.5);
}
.store-order-item-unit {
  font-size: 0.7rem;
  color: rgba(58, 16, 2, 0.55);
  align-self: center;
  padding: 0 0 0 8px;
  white-space: nowrap;
}

@media (max-width: 540px) {
  .store-order-checklist {
    grid-template-columns: 1fr;
  }
  .store-order-item {
    padding: 8px;
  }
  .store-order-step {
    width: 36px;
    height: 40px;
  }
  .store-order-item-stepper input[type="number"] {
    width: 48px;
    height: 40px;
  }
}

/* =============================================================
   Supplier Ordering — slim form, inline status, slim modal heads
   ============================================================= */

.page-ordering .ordering-status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  margin: 6px 2px 14px;
  font-size: 0.95rem;
  color: rgba(58, 16, 2, 0.62);
}
.page-ordering .ordering-status-strip .status-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
}
.page-ordering .ordering-invoice-status-strip {
  margin-bottom: 12px;
}

.page-ordering .ordering-build-panel {
  padding: 0;
  overflow: hidden;
}
.page-ordering .ordering-build-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  cursor: pointer;
  user-select: none;
  background: transparent;
}
.page-ordering .ordering-build-summary::-webkit-details-marker { display: none; }
.page-ordering .ordering-build-panel[open] .ordering-build-summary {
  border-bottom: 1px solid rgba(58, 16, 2, 0.08);
}
.page-ordering .ordering-build-summary-main {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
  flex-wrap: wrap;
}
.page-ordering .ordering-build-summary-main strong {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink, #3a1002);
}
.page-ordering .ordering-build-summary-context {
  font-size: 0.82rem;
  color: rgba(58, 16, 2, 0.6);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-ordering .ordering-build-summary-toggle {
  font-size: 0.95rem;
  color: rgba(58, 16, 2, 0.45);
  transition: transform 0.15s ease;
}
.page-ordering .ordering-build-panel[open] .ordering-build-summary-toggle {
  transform: rotate(180deg);
}
.page-ordering .ordering-build-body {
  padding: 14px 22px 18px;
}

.page-ordering .ordering-history-hint {
  font-size: 0.78rem;
  color: rgba(58, 16, 2, 0.55);
  margin: 0 0 10px;
}

/* Slim Order guidance: 4-col + clickable expand row.
   Fixed-layout keeps Suggested / Actual / Δ on screen instead of
   pushing them off into a horizontal scroll. */
.page-ordering .ordering-guidance-table-slim {
  table-layout: fixed;
  width: 100%;
  min-width: 0;
}
.page-ordering .ordering-guidance-table-slim th,
.page-ordering .ordering-guidance-table-slim td {
  padding: 8px 10px;
  font-size: 0.86rem;
  vertical-align: middle;
}
.page-ordering .ordering-guidance-table-slim th:nth-child(1),
.page-ordering .ordering-guidance-table-slim td:nth-child(1) {
  width: auto;
}
.page-ordering .ordering-guidance-table-slim th:nth-child(2),
.page-ordering .ordering-guidance-table-slim td:nth-child(2),
.page-ordering .ordering-guidance-table-slim th:nth-child(3),
.page-ordering .ordering-guidance-table-slim td:nth-child(3) {
  width: 80px;
  text-align: right;
}
.page-ordering .ordering-guidance-table-slim th:nth-child(4),
.page-ordering .ordering-guidance-table-slim td:nth-child(4) {
  width: 60px;
  text-align: right;
}
.page-ordering .ordering-guidance-row {
  cursor: pointer;
}
.page-ordering .ordering-guidance-row:hover td:not(.ordering-guidance-num),
.page-ordering .ordering-guidance-row:focus-visible {
  background: rgba(58, 16, 2, 0.04);
  outline: 0;
}
.page-ordering .ordering-guidance-row[aria-expanded="true"] td {
  background: rgba(58, 16, 2, 0.04);
}
.page-ordering .ordering-guidance-item-cell {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.page-ordering .ordering-guidance-chev {
  font-size: 0.7rem;
  color: rgba(58, 16, 2, 0.45);
  flex: 0 0 12px;
  width: 12px;
}
.page-ordering .ordering-guidance-item-name {
  font-weight: 600;
  color: var(--ink, #3a1002);
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-ordering .ordering-guidance-item-pack {
  font-size: 0.72rem;
  color: rgba(58, 16, 2, 0.5);
  text-transform: lowercase;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.page-ordering .ordering-guidance-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.page-ordering .ordering-guidance-delta[data-tone="warn"] {
  color: #8a5a14;
  font-weight: 700;
}
.page-ordering .ordering-guidance-delta[data-tone="critical"] {
  color: #b3231e;
  font-weight: 700;
}
.page-ordering .ordering-guidance-delta[data-tone="neutral"] {
  color: rgba(58, 16, 2, 0.45);
}
.page-ordering .ordering-guidance-detail-row td {
  background: rgba(58, 16, 2, 0.03);
  padding: 8px 12px;
}
.page-ordering .ordering-guidance-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 4px 14px;
  margin: 0;
}
.page-ordering .ordering-guidance-detail > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.page-ordering .ordering-guidance-detail dt {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(58, 16, 2, 0.45);
  margin: 0;
}
.page-ordering .ordering-guidance-detail dd {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink, #3a1002);
}
.page-ordering .ordering-build-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(58, 16, 2, 0.06);
}
.page-ordering .ordering-build-actions-spacer { flex: 1 1 auto; }
.page-ordering .ordering-summary-inline {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  font-size: 0.82rem;
  color: rgba(58, 16, 2, 0.62);
  margin-right: 8px;
  text-align: right;
  line-height: 1.2;
}
.page-ordering .ordering-summary-inline strong {
  font-size: 0.86rem;
  color: var(--ink, #3a1002);
  font-weight: 700;
}

/* Modal head slim — used across ordering modals (invoice upload, success,
   price history). Replaces the legacy .page-head + eyebrow + H2 + subtitle
   triple stack inside scan-modal cards. */
.scan-modal-head-slim {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(58, 16, 2, 0.08);
  margin-bottom: 14px;
}
.scan-modal-head-slim .page-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink, #3a1002);
}
.scan-modal-head-slim::before { display: none; }

/* =============================================================
   Mobile + tablet friendly layer — cross-cutting, additive
   Affects every page; only kicks in at narrow widths or on
   touch devices, so desktop layouts are unchanged.
   ============================================================= */

/* Calmer tap highlight — replaces ugly default blue flash */
html {
  -webkit-tap-highlight-color: rgba(18, 153, 46, 0.18);
}

/* Touch device — floor tap targets at 44px (WCAG 2.5.5 / Apple HIG).
   `pointer: coarse` matches phones + tablets without forcing desktop
   buttons to bloat. Tiny chips like .btn-sm get a gentler 38px so
   compact toolbars don't double in height. */
@media (pointer: coarse) {
  button:not(.btn-sm):not(.tab-chip):not(.app-sidebar-item):not(.app-sidebar-close):not(.ros-toast-close):not(.ros-table-cols-toggle):not(.app-sidebar-palette-hint):not(.btn-ghost),
  a.nav-chip,
  a.btn:not(.btn-sm) {
    min-height: 44px;
  }
  button.btn-sm,
  a.btn-sm,
  .ros-table-cols-toggle,
  .ai-chat-prompt-tile,
  .app-sidebar-palette-hint {
    min-height: 38px;
  }
  /* Form inputs are already 52px from main.css base — no override needed. */
}

/* Form `.row` rows: single column under 600px so two-up fields don't
   crush. The selector is broad on purpose — `.row` is the global
   form-grid utility used on every page that has a form. */
@media (max-width: 600px) {
  .row {
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .row > * {
    width: 100%;
    min-width: 0;
  }
}

/* Tabs — when there are more than the viewport can hold, scroll
   horizontally instead of wrapping into a multi-line block. Hides
   the scrollbar so the tabs read as a single tactile row. */
@media (max-width: 720px) {
  .tab-switch {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .tab-switch::-webkit-scrollbar {
    display: none;
  }
  .tab-chip {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Modals — full-screen on phone. The default centered-card pattern
   leaves ~40-60px of margin around the dialog at 375px; the dialog
   then has to scroll inside an already-narrow column. Filling the
   viewport gives the form room to breathe. */
@media (max-width: 600px) {
  .scan-modal:not([hidden]) {
    align-items: stretch !important;
    padding: 0;
  }
  .scan-modal-card,
  .opening-editor-shell,
  .admin-form-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 !important;
    overflow-y: auto;
  }
}

/* Enhanced tables — the sticky thead offset assumes a ~49px toolbar.
   On phone the toolbar wraps and grows to ~60-72px; bump the offset
   so the thead doesn't slide under it during scroll. */
@media (max-width: 720px) {
  .ros-table thead {
    top: 64px;
  }
  .ros-table-toolbar {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* Action rows — make sure submit / cancel button rows wrap and put
   the primary action on its own line at the bottom on phone. */
@media (max-width: 600px) {
  .nav-row,
  .ordering-build-actions,
  .store-order-actions,
  .admin-form-actions,
  .ordering-success-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .ordering-build-actions .btn-primary,
  .store-order-actions .btn-primary,
  .admin-form-actions [type="submit"],
  .nav-row > button[type="submit"] {
    flex: 1 1 100%;
    order: 99;
  }
}

/* Page-shell padding on phone — keep content from kissing the edge.
   Different shells (.app-shell / .camera-shell / .page-shell) all
   need the same baseline. */
@media (max-width: 600px) {
  body.has-app-sidebar main.app-shell,
  body.has-app-sidebar > .page-shell,
  body.has-app-sidebar > .camera-shell {
    padding-left: 14px;
    padding-right: 14px;
  }
  /* The slim page-head on inner pages can shrink padding too. */
  body.has-app-sidebar header.page-head {
    padding: 14px 16px;
    border-radius: 12px;
  }
  body.has-app-sidebar header.page-head .page-title {
    font-size: 1.2rem;
  }
}

/* Card-metrics grids — most pages use 4 KPI cards in a row. On phone
   stack to 2 columns instead of 1 so the screen still fits the four
   numbers in two rows (better information density than 4 stacked). */
@media (max-width: 600px) {
  .card-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Order board (Recent supplier orders custom card grid) — on phone
   each board card spans full width. */
@media (max-width: 600px) {
  .order-board {
    grid-template-columns: 1fr !important;
  }
}

/* Hiring layout — its own grid pattern. Force single column on phone. */
@media (max-width: 720px) {
  .hiring-layout {
    grid-template-columns: 1fr !important;
  }
}

/* Investment page custom layout — controls + results stack on tablet portrait. */
@media (max-width: 980px) {
  body.page-investment .layout {
    grid-template-columns: 1fr !important;
  }
}

/* =============================================================
   Store Audit Report page (viewer-only) — page-action row
   ============================================================= */

.page-store-audit-report .audit-report-page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 2px 14px;
  flex-wrap: wrap;
}
.page-store-audit-report .audit-report-page-spacer {
  flex: 1 1 auto;
}
.page-store-audit-report .audit-report-page-actions .btn {
  text-transform: none;
  letter-spacing: 0.01em;
}

/* =============================================================
   Store Audit Report — viewer v2 (denser hero, lightbox)
   ============================================================= */

/* Tone tokens for score / status / severity */
.page-store-audit-report {
  --tone-ok-bg: rgba(28, 122, 49, 0.12);
  --tone-ok-fg: #146a26;
  --tone-warn-bg: rgba(214, 150, 35, 0.18);
  --tone-warn-fg: #8a5a14;
  --tone-critical-bg: rgba(193, 39, 39, 0.16);
  --tone-critical-fg: #b3231e;
  --tone-neutral-bg: rgba(58, 16, 2, 0.06);
  --tone-neutral-fg: rgba(58, 16, 2, 0.65);
}

.page-store-audit-report .audit-report-empty {
  font-size: 0.92rem;
  color: rgba(58, 16, 2, 0.65);
  padding: 8px 2px;
}

.page-store-audit-report .audit-report-empty-line {
  font-size: 0.85rem;
  color: rgba(58, 16, 2, 0.55);
  font-style: italic;
  padding: 6px 2px;
}

/* HERO: tight 2-column row (score | meta) */
.page-store-audit-report .audit-report-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: stretch;
  padding: 14px 0 18px;
  border-bottom: 1px solid rgba(58, 16, 2, 0.08);
  margin-bottom: 16px;
}

.page-store-audit-report .audit-report-score-cell {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
  min-width: 130px;
  justify-content: center;
}
.page-store-audit-report .audit-report-score-cell[data-tone="ok"] {
  background: var(--tone-ok-bg);
  color: var(--tone-ok-fg);
}
.page-store-audit-report .audit-report-score-cell[data-tone="warn"] {
  background: var(--tone-warn-bg);
  color: var(--tone-warn-fg);
}
.page-store-audit-report .audit-report-score-cell[data-tone="critical"] {
  background: var(--tone-critical-bg);
  color: var(--tone-critical-fg);
}

.page-store-audit-report .audit-report-score-num {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}
.page-store-audit-report .audit-report-score-divider {
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.6;
}

.page-store-audit-report .audit-report-hero-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.page-store-audit-report .audit-report-hero-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.page-store-audit-report .audit-report-hero-title-row h2 {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--ink, #3a1002);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.page-store-audit-report .audit-report-status-badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
}
.page-store-audit-report .audit-report-status-badge[data-tone="ok"] {
  background: var(--tone-ok-bg);
  color: var(--tone-ok-fg);
}
.page-store-audit-report .audit-report-status-badge[data-tone="warn"] {
  background: var(--tone-warn-bg);
  color: var(--tone-warn-fg);
}
.page-store-audit-report .audit-report-status-badge[data-tone="critical"] {
  background: var(--tone-critical-bg);
  color: var(--tone-critical-fg);
}

.page-store-audit-report .audit-report-hero-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 4px 18px;
  margin: 0;
  font-size: 0.86rem;
}
.page-store-audit-report .audit-report-hero-meta > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.page-store-audit-report .audit-report-hero-meta dt {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(58, 16, 2, 0.45);
  margin: 0;
}
.page-store-audit-report .audit-report-hero-meta dd {
  margin: 0;
  font-weight: 600;
  color: var(--ink, #3a1002);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* SCORECARDS: compact pill row */
.page-store-audit-report .audit-report-scorecards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.page-store-audit-report .audit-report-scorecard {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(58, 16, 2, 0.03);
  border-left: 3px solid rgba(58, 16, 2, 0.12);
}
.page-store-audit-report .audit-report-scorecard[data-tone="ok"] {
  border-left-color: var(--tone-ok-fg);
}
.page-store-audit-report .audit-report-scorecard[data-tone="warn"] {
  border-left-color: var(--tone-warn-fg);
}
.page-store-audit-report .audit-report-scorecard[data-tone="critical"] {
  border-left-color: var(--tone-critical-fg);
}
.page-store-audit-report .audit-report-scorecard-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(58, 16, 2, 0.55);
}
.page-store-audit-report .audit-report-scorecard-score {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink, #3a1002);
}
.page-store-audit-report .audit-report-scorecard-issues {
  font-size: 0.72rem;
  color: rgba(58, 16, 2, 0.6);
}

/* SIGNALS: compact strip */
.page-store-audit-report .audit-report-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.page-store-audit-report .audit-report-signal-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
}
.page-store-audit-report .audit-report-signal-chip[data-tone="ok"] {
  background: var(--tone-ok-bg);
  color: var(--tone-ok-fg);
}
.page-store-audit-report .audit-report-signal-chip[data-tone="warn"] {
  background: var(--tone-warn-bg);
  color: var(--tone-warn-fg);
}
.page-store-audit-report .audit-report-signal-chip[data-tone="critical"] {
  background: var(--tone-critical-bg);
  color: var(--tone-critical-fg);
}
.page-store-audit-report .audit-report-signal-chip .audit-report-signal-label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.page-store-audit-report .audit-report-signal-chip strong {
  font-weight: 800;
}

/* TWO-COLUMN: findings + actions */
.page-store-audit-report .audit-report-twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.page-store-audit-report .audit-report-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.page-store-audit-report .audit-report-block:last-child {
  margin-bottom: 0;
}
.page-store-audit-report .audit-report-block-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(58, 16, 2, 0.08);
}
.page-store-audit-report .audit-report-block-head h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink, #3a1002);
}
.page-store-audit-report .audit-report-block-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(58, 16, 2, 0.5);
  background: rgba(58, 16, 2, 0.05);
  padding: 1px 8px;
  border-radius: 999px;
}

/* FINDINGS list — severity-toned left edge, compact */
.page-store-audit-report .audit-report-findings {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-store-audit-report .audit-report-finding {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(58, 16, 2, 0.03);
  border-left: 3px solid rgba(58, 16, 2, 0.12);
}
.page-store-audit-report .audit-report-finding[data-tone="ok"] {
  border-left-color: var(--tone-ok-fg);
}
.page-store-audit-report .audit-report-finding[data-tone="warn"] {
  border-left-color: var(--tone-warn-fg);
}
.page-store-audit-report .audit-report-finding[data-tone="critical"] {
  border-left-color: var(--tone-critical-fg);
  background: rgba(193, 39, 39, 0.04);
}
.page-store-audit-report .audit-report-finding header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.page-store-audit-report .audit-report-finding-tag {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
}
.page-store-audit-report .audit-report-finding[data-tone="ok"] .audit-report-finding-tag {
  background: var(--tone-ok-bg);
  color: var(--tone-ok-fg);
}
.page-store-audit-report .audit-report-finding[data-tone="warn"] .audit-report-finding-tag {
  background: var(--tone-warn-bg);
  color: var(--tone-warn-fg);
}
.page-store-audit-report .audit-report-finding[data-tone="critical"] .audit-report-finding-tag {
  background: var(--tone-critical-bg);
  color: var(--tone-critical-fg);
}
.page-store-audit-report .audit-report-finding header strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink, #3a1002);
  flex: 1 1 auto;
  min-width: 0;
}
.page-store-audit-report .audit-report-finding-cat {
  font-size: 0.7rem;
  color: rgba(58, 16, 2, 0.55);
  letter-spacing: 0.04em;
}
.page-store-audit-report .audit-report-finding p {
  margin: 0;
  font-size: 0.84rem;
  color: rgba(58, 16, 2, 0.78);
  line-height: 1.45;
}
.page-store-audit-report .audit-report-finding-thumbs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* CORRECTIVE ACTIONS list */
.page-store-audit-report .audit-report-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-store-audit-report .audit-report-action {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(58, 16, 2, 0.03);
  border-left: 3px solid rgba(58, 16, 2, 0.12);
}
.page-store-audit-report .audit-report-action[data-tone="warn"] {
  border-left-color: var(--tone-warn-fg);
}
.page-store-audit-report .audit-report-action[data-tone="critical"] {
  border-left-color: var(--tone-critical-fg);
}
.page-store-audit-report .audit-report-action header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.page-store-audit-report .audit-report-action-tag {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
}
.page-store-audit-report .audit-report-action[data-tone="warn"] .audit-report-action-tag {
  background: var(--tone-warn-bg);
  color: var(--tone-warn-fg);
}
.page-store-audit-report .audit-report-action[data-tone="critical"] .audit-report-action-tag {
  background: var(--tone-critical-bg);
  color: var(--tone-critical-fg);
}
.page-store-audit-report .audit-report-action header strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink, #3a1002);
  flex: 1 1 auto;
}
.page-store-audit-report .audit-report-action-meta {
  font-size: 0.78rem;
  color: rgba(58, 16, 2, 0.6);
}

/* THUMBNAIL grid for evidence */
.page-store-audit-report .audit-report-thumbgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

/* Generic thumbnail (used in both findings + evidence) */
.page-store-audit-report .audit-report-thumb {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.page-store-audit-report .audit-report-thumb-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(58, 16, 2, 0.06);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.page-store-audit-report .audit-report-thumb:hover .audit-report-thumb-frame,
.page-store-audit-report .audit-report-thumb:focus-visible .audit-report-thumb-frame {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(58, 16, 2, 0.18);
  outline: 0;
}
.page-store-audit-report .audit-report-thumb-frame img,
.page-store-audit-report .audit-report-thumb-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-store-audit-report .audit-report-thumb-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(58, 16, 2, 0.45);
}
.page-store-audit-report .audit-report-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.32));
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  pointer-events: none;
}
.page-store-audit-report .audit-report-thumb-caption {
  font-size: 0.72rem;
  color: rgba(58, 16, 2, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Findings-inline thumbs are tighter (no caption, smaller frame) */
.page-store-audit-report .audit-report-finding-thumbs .audit-report-thumb {
  width: 56px;
  flex: 0 0 auto;
}
.page-store-audit-report .audit-report-finding-thumbs .audit-report-thumb-frame {
  border-radius: 6px;
}

/* LIGHTBOX */
.page-store-audit-report .audit-report-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 6, 4, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
}
body.audit-report-lightbox-open {
  overflow: hidden;
}
.page-store-audit-report .audit-report-lightbox-stage {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.page-store-audit-report .audit-report-lightbox-stage img,
.page-store-audit-report .audit-report-lightbox-stage video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.page-store-audit-report .audit-report-lightbox-fallback {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
  padding: 24px;
}
.page-store-audit-report .audit-report-lightbox-caption {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.86rem;
  text-align: center;
  max-width: 800px;
  line-height: 1.4;
}
.page-store-audit-report .audit-report-lightbox-close,
.page-store-audit-report .audit-report-lightbox-prev,
.page-store-audit-report .audit-report-lightbox-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 0;
  border-radius: 999px;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease;
}
.page-store-audit-report .audit-report-lightbox-close:hover,
.page-store-audit-report .audit-report-lightbox-prev:hover,
.page-store-audit-report .audit-report-lightbox-next:hover {
  background: rgba(255, 255, 255, 0.22);
}
.page-store-audit-report .audit-report-lightbox-close {
  top: 18px;
  right: 18px;
}
.page-store-audit-report .audit-report-lightbox-prev {
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
}
.page-store-audit-report .audit-report-lightbox-next {
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}

/* Responsive */
@media (max-width: 900px) {
  .page-store-audit-report .audit-report-twocol {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .page-store-audit-report .audit-report-hero {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .page-store-audit-report .audit-report-score-cell {
    align-self: start;
  }
}

@media (max-width: 540px) {
  .page-store-audit-report .audit-report-thumbgrid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }
  .page-store-audit-report .audit-report-score-num {
    font-size: 2.2rem;
  }
  .page-store-audit-report .audit-report-lightbox-close,
  .page-store-audit-report .audit-report-lightbox-prev,
  .page-store-audit-report .audit-report-lightbox-next {
    width: 38px;
    height: 38px;
    font-size: 1.3rem;
  }
}

/* =============================================================
   Store Audit intake — step-head pattern + sticky bottom dock
   ============================================================= */

/* Top-level tab strip (New audit / Audit history) */
.page-store-audit .audit-workspace-tabs {
  margin-bottom: 14px;
}
.page-store-audit .audit-workspace-tabs .tab-chip {
  flex: 1 1 200px;
  justify-content: center;
}
.page-store-audit .audit-workspace-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-store-audit .audit-step-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(58, 16, 2, 0.08);
  flex-wrap: wrap;
}
.page-store-audit .audit-step-badge {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(58, 16, 2, 0.5);
  background: rgba(58, 16, 2, 0.05);
  padding: 3px 9px;
  border-radius: 999px;
}
.page-store-audit .audit-step-head h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink, #3a1002);
}
.page-store-audit .audit-step-status {
  font-size: 0.78rem;
  color: rgba(58, 16, 2, 0.55);
  margin-left: auto;
  font-weight: 600;
}

.page-store-audit .audit-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(58, 16, 2, 0.06);
  font-size: 0.92rem;
  color: rgba(58, 16, 2, 0.62);
}
.page-store-audit .audit-status-row .status-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.page-store-audit .audit-status-row .status-chip-num {
  font-weight: 700;
  color: var(--ink, #3a1002);
  font-size: 0.95rem;
}
.page-store-audit .audit-status-row .status-chip-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  color: rgba(58, 16, 2, 0.55);
}
.page-store-audit .audit-status-row .status-chip-sep {
  color: rgba(58, 16, 2, 0.3);
  user-select: none;
}

/* Sticky bottom dock — visible across viewport sizes (was mobile-only).
   Acts as the page's primary action surface so the in-form Save / Submit
   pair can be retired. Reserve space at the bottom of the page so the
   dock never overlaps content. */
.page-store-audit main.app-shell {
  padding-bottom: 100px;
}
.page-store-audit .audit-mobile-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 75;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: rgba(255, 253, 246, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(58, 16, 2, 0.12);
  box-shadow: 0 -6px 20px rgba(72, 15, 2, 0.06);
}
body.has-app-sidebar .page-store-audit .audit-mobile-dock,
body.has-app-sidebar.page-store-audit .audit-mobile-dock {
  left: var(--app-sidebar-width);
}
@media (max-width: 960px) {
  body.has-app-sidebar.page-store-audit .audit-mobile-dock {
    left: 0;
  }
}
.page-store-audit .audit-mobile-dock-summary {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.page-store-audit .audit-mobile-dock-summary strong {
  font-size: 0.92rem;
  color: var(--ink, #3a1002);
  font-weight: 800;
}
.page-store-audit .audit-mobile-dock-summary span {
  font-size: 0.8rem;
  color: rgba(58, 16, 2, 0.6);
}
.page-store-audit .audit-mobile-dock-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
@media (max-width: 600px) {
  .page-store-audit .audit-mobile-dock {
    padding: 10px 14px;
  }
  .page-store-audit main.app-shell {
    padding-bottom: 130px;
  }
}

/* =============================================================
   Login page — full-screen centered card, brand, polish
   ============================================================= */

body.page-login {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255, 220, 150, 0.45), transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(28, 122, 49, 0.10), transparent 55%),
    linear-gradient(180deg, #fff8e8 0%, #f6e9c4 100%);
}

.page-login .login-stage {
  width: 100%;
  max-width: 420px;
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: stretch;
}

.page-login .login-card {
  background: #fffdf6;
  border-radius: 18px;
  padding: 28px 28px 24px;
  box-shadow:
    0 18px 40px rgba(58, 16, 2, 0.10),
    0 2px 8px rgba(58, 16, 2, 0.05);
  border: 1px solid rgba(58, 16, 2, 0.05);
}

.page-login .login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.page-login .login-brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #e9b441;
  color: #3a1002;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  box-shadow: 0 2px 6px rgba(58, 16, 2, 0.12);
}
.page-login .login-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.page-login .login-brand-text strong {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--ink, #3a1002);
  letter-spacing: 0.005em;
}
.page-login .login-brand-text span {
  font-size: 0.7rem;
  color: rgba(58, 16, 2, 0.55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-login .login-headline {
  margin-bottom: 20px;
}
.page-login .login-title {
  margin: 0 0 4px;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink, #3a1002);
}
.page-login .login-subtitle {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(58, 16, 2, 0.62);
}

.page-login .login-error {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(193, 39, 39, 0.08);
  border-left: 3px solid #b3231e;
  color: #8a1f1a;
  font-size: 0.86rem;
  line-height: 1.4;
}

.page-login .login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-login .login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.page-login .login-field label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(58, 16, 2, 0.55);
  margin: 0;
}
.page-login .login-field input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(58, 16, 2, 0.18);
  border-radius: 10px;
  background: #fff;
  font-size: 1rem;
  color: var(--ink, #3a1002);
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}
.page-login .login-field input:focus {
  outline: 0;
  border-color: rgba(28, 122, 49, 0.55);
  box-shadow: 0 0 0 3px rgba(28, 122, 49, 0.15);
}
.page-login .login-field input::placeholder {
  color: rgba(58, 16, 2, 0.32);
}

.page-login .login-password-wrap {
  position: relative;
}
.page-login .login-password-wrap input {
  padding-right: 46px;
}
.page-login .login-password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: rgba(58, 16, 2, 0.55);
  transition: background 0.12s ease;
}
.page-login .login-password-toggle:hover,
.page-login .login-password-toggle:focus-visible {
  background: rgba(58, 16, 2, 0.06);
  outline: 0;
  color: var(--ink, #3a1002);
}

.page-login .login-caps-hint {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: #8a5a14;
  background: rgba(214, 150, 35, 0.12);
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-block;
  align-self: flex-start;
}

.page-login .login-submit {
  width: 100%;
  height: 46px;
  margin-top: 6px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
}
.page-login .login-submit:disabled,
.page-login .login-submit.is-loading {
  opacity: 0.85;
  cursor: progress;
}
.page-login .login-submit-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: login-spin 0.75s linear infinite;
}
@keyframes login-spin {
  to { transform: rotate(360deg); }
}

.page-login .login-helper {
  margin: 18px 0 0;
  font-size: 0.78rem;
  color: rgba(58, 16, 2, 0.55);
  text-align: center;
}

.page-login .login-footer {
  display: flex;
  justify-content: center;
}
.page-login .login-lang {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: rgba(58, 16, 2, 0.5);
}
.page-login .login-lang-label {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}
.page-login .login-lang-select {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(58, 16, 2, 0.15);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.82rem;
  color: var(--ink, #3a1002);
  font-family: inherit;
}
.page-login .login-lang-select:focus {
  outline: 2px solid rgba(28, 122, 49, 0.32);
  outline-offset: -1px;
}

@media (max-width: 480px) {
  .page-login .login-card {
    padding: 22px 20px 20px;
    border-radius: 14px;
  }
  .page-login .login-stage {
    padding: 18px 14px;
  }
  .page-login .login-title {
    font-size: 1.3rem;
  }
}


/* ===== Riceman workspace (right pane, /ai-ops) — moved from inline
   <style> on 2026-05-05. Inline rules cached with the HTML and the
   browser would serve a stale layout when only the HTML was bumped. */
      /* Two-column shell — Manus / Claude artifacts pattern. The
         existing left sidebar (conversation history) is at
         position:fixed left:0 width:280px; the main shell sits to its
         right via margin-left. When workspace opens we anchor it to
         the right viewport edge as a real fixed column (not flex,
         not sticky inside a block parent — that produces the
         "floating window" the operator complained about). The main
         shell shrinks via right-margin so chat + workspace don't
         overlap. */
      .riceman-workspace {
        display: none;
        flex-direction: column;
        position: fixed;
        /* Align top with the chat shell content (.page-ai-ops .app-shell
           has padding-top:20px before the rice-man-head banner). Without
           this offset the workspace head sits ~50px above the chat banner
           and the two columns look visually decoupled. Bottom stays at 0
           so the iframe gets every pixel of vertical room. */
        top: 20px;
        right: 0;
        bottom: 0;
        width: min(45vw, 760px);
        min-width: 380px;
        background: var(--surface, #fdfaf3);
        border-left: 1px solid var(--border, #e2e8f0);
        border-top-left-radius: 14px;
        z-index: 25;
        overflow: hidden;
      }
      body.workspace-open .riceman-workspace {
        display: flex;
      }
      /* When the workspace is open we have THREE columns competing
         for horizontal space: nav-sidebar (left, fixed), conversation
         history sidebar (left, fixed), main chat, and workspace
         (right, fixed). At typical 1280–1440 widths the chat column
         gets squeezed to nothing. Auto-hide the conversation history
         sidebar when workspace is open — operator's attention is on
         the workspace, history is one toggle-tap away if needed.
         Also collapse the chat column's left margin to just the
         nav-sidebar's reserved width, and override the upstream
         max-width caps that would otherwise center the chat column
         at the wrong x. */
      body.workspace-open.sidebar-collapsed #ai-ops-sidebar { display: none; }
      /* 2026-05-11: when the user explicitly opens history (via the 🕒
         header toggle) while the workspace is showing, the auto-hide
         rule above must yield. The sidebar floats as an overlay above
         the workspace; the operator dismisses it by clicking 🕒 again
         (or clicking outside via the existing collapse-on-click flow). */
      body.workspace-open:not(.sidebar-collapsed) #ai-ops-sidebar {
        display: flex;
        z-index: 220;
      }
      /* 2026-05-11: on /ai-ops the global nav is hidden by default
         (overlay-only when ☰ is clicked), so reserving 244px for it
         here wastes a fat strip of dead space on the left whenever
         the workspace is open. Margin-left:0 lets the chat shell
         hug the viewport edge; nav-sidebar still overlays correctly
         (it's position:fixed) when the operator opens it. */
      body.workspace-open.has-app-sidebar.page-ai-ops .app-shell,
      body.workspace-open.page-ai-ops .app-shell,
      body.workspace-open #ai-ops-main,
      body.workspace-open .page-ai-ops .ai-chat-shell {
        max-width: none;
        width: auto;
        margin-left: 0;
        margin-right: min(45vw, 760px);
      }
      /* Workspace minimized — collapse to a 36px vertical sliver hugging
         the right edge. The artifact stays loaded (no re-fetch on
         restore), the body content is hidden, and the head rotates to
         vertical text so the operator can still see what artifact is
         there. Click anywhere on the sliver (except buttons) to
         restore. Adjusts the chat shell's right-margin so the answer
         column reclaims the freed width. */
      body.workspace-open.workspace-minimized .riceman-workspace {
        width: 36px;
        min-width: 36px;
        cursor: pointer;
      }
      body.workspace-open.workspace-minimized .riceman-workspace-body {
        display: none;
      }
      body.workspace-open.workspace-minimized .riceman-workspace-head {
        padding: 14px 4px;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        height: 100%;
        background: linear-gradient(180deg, #f8f5ec 0%, #fdfaf3 100%);
      }
      body.workspace-open.workspace-minimized .riceman-workspace-title-block {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        max-height: 60vh;
      }
      body.workspace-open.workspace-minimized .riceman-workspace-kind {
        writing-mode: horizontal-tb;
        transform: rotate(0deg);
        margin: 0 0 4px;
        font-size: 9px;
        padding: 1px 6px;
      }
      body.workspace-open.workspace-minimized .riceman-workspace-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
        max-height: 50vh;
      }
      body.workspace-open.workspace-minimized .riceman-workspace-actions {
        flex-direction: column-reverse;
        gap: 2px;
      }
      body.workspace-open.workspace-minimized .riceman-workspace-prev,
      body.workspace-open.workspace-minimized .riceman-workspace-browser-toggle {
        display: none !important;
      }
      body.workspace-open.workspace-minimized.has-app-sidebar.page-ai-ops .app-shell,
      body.workspace-open.workspace-minimized.page-ai-ops .app-shell,
      body.workspace-open.workspace-minimized #ai-ops-main,
      body.workspace-open.workspace-minimized .page-ai-ops .ai-chat-shell {
        margin-right: 36px;
      }
      /* 2026-05-11: the reasoning column was removed (single-column
         layout). The legacy workspace-minimized rules used to restore
         a 2-track grid here are now harmful — they create a phantom
         360px "thinking" track that has no DOM in it, pushing the
         answer feed into a narrow first column and leaving ~900px
         of dead whitespace. The single-column rule from
         `.ai-chat-cols` (line ~11012) already covers this case; no
         override needed. */
      /* Workspace maximized — expand to nearly full width over the
         chat columns. Operator opted in via the ⤢ button so they want
         the artifact to be the focus. Chat shell content gets a thin
         left strip and the workspace overlays everything else. The
         workspace body is also taller. */
      body.workspace-open.workspace-maximized .riceman-workspace {
        width: calc(100vw - var(--app-sidebar-width, 0px) - 60px);
        min-width: calc(100vw - var(--app-sidebar-width, 0px) - 60px);
      }
      body.workspace-open.workspace-maximized.has-app-sidebar.page-ai-ops .app-shell,
      body.workspace-open.workspace-maximized.page-ai-ops .app-shell,
      body.workspace-open.workspace-maximized #ai-ops-main,
      body.workspace-open.workspace-maximized .page-ai-ops .ai-chat-shell {
        margin-right: calc(100vw - var(--app-sidebar-width, 0px) - 60px);
      }
      .riceman-workspace-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 14px 18px;
        border-bottom: 1px solid var(--border, #e2e8f0);
        background: var(--surface, #fdfaf3);
      }
      .riceman-workspace-title-block { min-width: 0; flex: 1 1 auto; }
      .riceman-workspace-kind {
        display: inline-block;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--accent-deep, #0d7723);
        margin-bottom: 4px;
        background: rgba(18, 153, 46, 0.08);
        padding: 2px 8px;
        border-radius: 999px;
      }
      .riceman-workspace-title {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--text, #1f2937);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .riceman-workspace-actions { display: flex; gap: 4px; align-items: center; }
      /* SCOPED to .riceman-workspace-head — there's another element with
         class .riceman-workspace-actions inside the body (the bottom
         slot for action-choice strips). Without this scope, the
         28x28 button styling here would shrink the action-choice
         buttons in that bottom slot too, causing them to render at
         padding-only width with their text overflowing on top of
         each other. */
      .riceman-workspace-head .riceman-workspace-actions button {
        background: transparent;
        border: 0;
        width: 28px;
        height: 28px;
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
        color: var(--text-muted, #9ca3af);
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 0.12s ease, color 0.12s ease;
      }
      .riceman-workspace-head .riceman-workspace-actions button:hover { background: rgba(15, 23, 42, 0.06); color: var(--text, #1f2937); }
      .riceman-workspace-body {
        flex: 1 1 auto;
        overflow: auto;
        padding: 0;
        background: var(--surface, #fdfaf3);
      }

      /* Per-renderer styles — kind-specific blocks inside the body. */
      /* iframe wrap: the noVNC-streamed Mac Chrome canvas inside the
         iframe is fixed at the desktop resolution (≈1366×820). When
         the PRIMARY pane shrinks (e.g. an ACTIONS strip is up
         underneath), without scroll the bottom of the canvas gets
         clipped — including the actual interaction zone (Cloudflare
         "I am human" button at the bottom of the page). overflow:auto
         + a min-height that covers the full Cloudflare page lets the
         operator scroll the iframe to whatever they need to click. */
      .riceman-art-iframe-wrap {
        width: 100%;
        height: 100%;
        overflow: auto;
        background: #0f172a;
      }
      .riceman-art-iframe-wrap iframe {
        width: 100%;
        min-height: 820px;
        height: 820px;
        border: 0;
        display: block;
        background: #0f172a;
      }

      /* document_draft renderer — JD draft form with editable fields
         and Approve/Re-draft buttons. All fields editable as of
         2026-05-06: text/multiline as input/textarea, list as
         newline-separated textarea. */
      .riceman-art-doc-draft {
        padding: 16px;
        background: var(--surface, #fdfaf3);
      }
      .riceman-art-doc-draft .dd-description {
        margin: 0 0 14px;
        font-size: 13px;
        line-height: 1.5;
        color: var(--text-muted, #6b7280);
      }
      .riceman-art-doc-draft .dd-field {
        display: block;
        margin-bottom: 14px;
        font-size: 12px;
        color: #374151;
      }
      .riceman-art-doc-draft .dd-label {
        font-weight: 600;
        display: block;
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 11px;
        color: var(--text-muted, #6b7280);
      }
      .riceman-art-doc-draft .dd-hint {
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0;
        color: var(--text-muted, #9ca3af);
        font-size: 10px;
        margin-left: 4px;
      }
      .riceman-art-doc-draft .dd-input {
        width: 100%;
        padding: 8px 12px;
        font-size: 13px;
        line-height: 1.5;
        border: 1px solid var(--border, #d4d4d8);
        border-radius: 8px;
        box-sizing: border-box;
        font-family: inherit;
        color: var(--text, #1f2937);
        background: #ffffff;
        transition: border-color 0.12s ease, box-shadow 0.12s ease;
      }
      .riceman-art-doc-draft textarea.dd-input {
        min-height: 60px;
        resize: vertical;
      }
      .riceman-art-doc-draft .dd-input:focus {
        outline: none;
        border-color: var(--accent, #12992e);
        box-shadow: 0 0 0 3px rgba(18, 153, 46, 0.12);
      }
      .riceman-art-doc-draft .dd-actions {
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px solid var(--border, #e2e8f0);
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .riceman-art-doc-draft .dd-empty {
        padding: 24px;
        text-align: center;
        color: var(--text-muted, #6b7280);
        font-size: 13px;
      }

      /* data_grid renderer — refined card style with proper horizontal
         scroll containment so wide tables (e.g. Mar 19 23:00 → Mar 20
         01:00 timestamp columns) don't get clipped at the workspace
         edge. Body cells wrap when content is short text but stay on
         one line for tabular numerics. */
      .riceman-art-data-grid {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 16px;
        gap: 10px;
        background: var(--surface, #fdfaf3);
      }
      .riceman-art-data-grid .dg-description {
        margin: 0;
        font-size: 13px;
        line-height: 1.5;
        color: var(--text, #1f2937);
      }
      .riceman-art-data-grid .dg-table-wrap {
        flex: 1 1 auto;
        overflow: auto;
        background: #ffffff;
        border: 1px solid var(--border, #e2e8f0);
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
        min-width: 0;
      }
      .riceman-art-data-grid .dg-table {
        width: 100%;
        min-width: max-content;
        border-collapse: separate;
        border-spacing: 0;
        font-family: inherit;
      }
      .riceman-art-data-grid .dg-th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 11px 16px;
        font-weight: 600;
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--text-muted, #6b7280);
        background: #faf7ed;
        border-bottom: 1px solid var(--border, #e2e8f0);
        white-space: nowrap;
      }
      .riceman-art-data-grid .dg-tr:nth-child(even) .dg-td {
        background: rgba(252, 250, 244, 0.6);
      }
      .riceman-art-data-grid .dg-tr:hover .dg-td {
        background: rgba(244, 239, 222, 0.7);
      }
      .riceman-art-data-grid .dg-td {
        padding: 11px 16px;
        font-size: 13px;
        line-height: 1.45;
        color: var(--text, #1f2937);
        border-bottom: 1px solid #f1ede1;
        vertical-align: middle;
        white-space: nowrap;
      }
      .riceman-art-data-grid .dg-tr:last-child .dg-td {
        border-bottom: 0;
      }
      .riceman-art-data-grid .dg-num {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
      }
      .riceman-art-data-grid .dg-empty {
        padding: 32px 14px;
        text-align: center;
        color: var(--text-muted, #6b7280);
        font-size: 13px;
        background: rgba(252, 250, 244, 0.6);
        white-space: normal;
      }
      .riceman-art-data-grid .dg-meta {
        font-size: 11px;
        color: var(--text-muted, #6b7280);
        text-align: right;
        padding-right: 4px;
        font-variant-numeric: tabular-nums;
      }

      /* ACTIONS strip — refined: drop the cream gradient (felt too
         designer-y), use a flat surface with a subtle top divider so
         the strip reads as part of the workspace, not a separate
         skin. Title is a quiet caption above the buttons rather than
         a competing pill. Primary action takes the brand green;
         abort/cancel is text-only so the eye doesn't land there. */
      .riceman-actions-bar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 14px 18px;
        background: var(--surface, #fdfaf3);
        border-top: 1px solid var(--border, #e2e8f0);
        position: relative;
      }
      .riceman-actions-label {
        flex: 0 0 auto;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--text-muted, #6b7280);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
      }
      .riceman-actions-list {
        flex: 1 1 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
      }
      .riceman-actions-btn {
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.2;
        padding: 8px 14px;
        border-radius: 8px;
        cursor: pointer;
        white-space: nowrap;
        transition: transform 0.06s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
        letter-spacing: 0;
        text-transform: none;
      }
      .riceman-actions-btn:active { transform: translateY(1px); }
      .riceman-actions-btn:disabled { opacity: 0.5; cursor: not-allowed; }
      .riceman-actions-btn:focus-visible {
        outline: 2px solid var(--accent, #12992e);
        outline-offset: 2px;
      }
      /* Buttons with a source_kind badge stack the main label + the
         small provenance tag vertically. The single-line layout (no
         nowrap, allow tag wrap) keeps long labels readable when they
         get a badge underneath. Without this rule the badge would sit
         inline next to the label and overflow on narrow viewports.
         Source-kind badge: server's ai_ops_v2/run_state.py annotates
         each anchor with which tool surfaced it (NEW_SCREENING /
         EXISTING_INTAKE_DB / etc.). Visible to operator so they can
         instantly tell "Send invite to Erica · 已有档案" (existing
         pool) vs "Send invite to Travis · 新筛选" (newly screened),
         catching the prose-drift case where the agent's narrative
         claims "screened this session" while the anchor is from DB. */
      .riceman-actions-with-tag {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        white-space: normal;
        line-height: 1.25;
        gap: 3px;
        text-align: left;
        max-width: 320px;
      }
      .riceman-actions-btn-label {
        display: block;
        font-size: 13px;
        font-weight: 500;
      }
      .riceman-actions-source-tag {
        display: inline-block;
        font-size: 11px;
        font-weight: 400;
        opacity: 0.78;
        letter-spacing: 0.02em;
        padding: 1px 6px;
        border-radius: 4px;
        background: rgba(15, 23, 42, 0.06);
      }
      /* Primary button has a dark background; the default tag is
         too dim against it. Lighten the chip backdrop so it stays
         legible on the green primary. */
      .riceman-actions-primary .riceman-actions-source-tag {
        background: rgba(255, 255, 255, 0.18);
        color: rgba(255, 255, 255, 0.92);
        opacity: 1;
      }
      /* Source-kind specific accents — subtle so the main label is
         still the visual focus. NEW_SCREENING gets a green tint
         (positive: just-screened this session), EXISTING_INTAKE_DB
         gets an amber tint (caution: existing pool, NOT newly
         screened). All other kinds keep the neutral default. */
      .riceman-actions-secondary .riceman-actions-source-NEW_SCREENING,
      .riceman-actions-tertiary .riceman-actions-source-NEW_SCREENING {
        background: rgba(18, 153, 46, 0.12);
        color: var(--accent-deep, #0d7723);
      }
      .riceman-actions-secondary .riceman-actions-source-EXISTING_INTAKE_DB,
      .riceman-actions-tertiary .riceman-actions-source-EXISTING_INTAKE_DB {
        background: rgba(217, 119, 6, 0.12);
        color: #b45309;
      }
      /* Primary — filled brand green, white text, subtle elevation. */
      .riceman-actions-primary {
        background: linear-gradient(135deg, var(--accent, #12992e) 0%, var(--accent-deep, #0d7723) 100%);
        color: #ffffff;
        border: 1px solid var(--accent-deep, #0d7723);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
      }
      .riceman-actions-primary:hover {
        box-shadow: 0 2px 6px rgba(13, 119, 35, 0.28);
        filter: brightness(1.03);
      }
      /* Secondary — outlined, brand-tinted text. */
      .riceman-actions-secondary {
        background: #ffffff;
        color: var(--accent-deep, #0d7723);
        border: 1px solid var(--border, #d4cdb6);
      }
      .riceman-actions-secondary:hover {
        background: #f4efde;
        border-color: var(--accent, #12992e);
        color: var(--accent-deep, #0d7723);
      }
      /* Tertiary — text-only, lowest weight (cancel/abort). */
      .riceman-actions-tertiary {
        background: transparent;
        color: var(--text-muted, #6b7280);
        border: 1px solid transparent;
        padding: 8px 10px;
      }
      .riceman-actions-tertiary:hover {
        color: var(--text, #1f2937);
        background: rgba(15, 23, 42, 0.04);
      }
      /* Close X — corner-anchored above the strip so it doesn't
         compete with the action buttons themselves. */
      .riceman-actions-dismiss {
        position: absolute;
        top: 10px;
        right: 12px;
        background: transparent;
        border: 0;
        width: 24px;
        height: 24px;
        line-height: 1;
        font-size: 16px;
        cursor: pointer;
        color: var(--text-muted, #9ca3af);
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 0.12s ease, color 0.12s ease;
      }
      .riceman-actions-dismiss:hover {
        background: rgba(15, 23, 42, 0.06);
        color: var(--text, #1f2937);
      }

      /* Chat-side inline action choices (rendered inside the assistant
         message bubble). Reuses the .riceman-actions-btn role classes
         above for visual consistency with the workspace ACTIONS strip;
         only the surrounding wrapper / prompt label is local to chat. */
      .ai-chat-action-choices {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--border, #e2e8f0);
      }
      .ai-chat-action-prompt {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-muted, #6b7280);
        margin-bottom: 8px;
      }
      .ai-chat-action-choices-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
      }

      .riceman-art-records { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
      .riceman-art-records .description { font-size: 13px; color: var(--text-muted, #6b7280); margin: 0 0 4px; }
      .riceman-art-record-card {
        border: 1px solid var(--border, #e2e8f0);
        border-radius: 8px;
        padding: 12px;
        background: white;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .riceman-art-record-card .primary {
        font-size: 14px;
        font-weight: 600;
        color: var(--text, #1f2937);
      }
      .riceman-art-record-card .secondary {
        font-size: 12px;
        color: var(--text-muted, #6b7280);
      }
      .riceman-art-record-card .body {
        font-size: 13px;
        color: #374151;
        line-height: 1.5;
        margin-top: 2px;
      }
      .riceman-art-record-card .meta-row {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-top: 4px;
      }
      .riceman-art-record-card .meta-chip {
        font-size: 11px;
        padding: 2px 8px;
        border-radius: 999px;
        background: var(--surface-muted, #f1ede1);
        color: var(--text, #374151);
      }
      .riceman-art-record-card .meta-chip strong { font-weight: 600; margin-right: 3px; }
      .riceman-art-record-card .actions {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-top: 6px;
      }
      .riceman-art-record-card .actions button {
        font-size: 12px;
        padding: 4px 10px;
        border-radius: 999px;
        border: 1px solid var(--accent, #f59e0b);
        background: #fef3c7;
        color: #78350f;
        cursor: pointer;
        font-weight: 600;
      }
      .riceman-art-record-card .actions button:hover { background: #fde68a; }
      .riceman-art-record-card .actions button:disabled { opacity: 0.5; cursor: default; }

      /* analysis_report — markdown analysis canvas. Renders rich
         operator-cut answers (4-dim ops scan, weekly review) in the
         workspace PRIMARY slot so the chat thread can stay lean. */
      .riceman-art-analysis {
        padding: 18px 20px 28px;
        height: 100%;
        overflow-y: auto;
        background: var(--surface, #faf6ec);
      }
      .riceman-art-analysis-desc {
        margin: 0 0 14px;
        padding: 8px 12px;
        font-size: 13px;
        color: var(--text-muted, #6b7280);
        background: var(--surface-muted, #f3eedb);
        border-left: 3px solid var(--accent, #7c2d12);
        border-radius: 4px;
      }
      .riceman-art-analysis-body {
        font-size: 14px;
        line-height: 1.55;
        color: var(--text, #1f2937);
      }
      .riceman-art-analysis-body h1,
      .riceman-art-analysis-body h2,
      .riceman-art-analysis-body h3 {
        margin: 18px 0 8px;
        font-weight: 700;
        color: var(--accent, #7c2d12);
      }
      .riceman-art-analysis-body h1 { font-size: 20px; }
      .riceman-art-analysis-body h2 { font-size: 17px; }
      .riceman-art-analysis-body h3 { font-size: 15px; }
      .riceman-art-analysis-body table {
        width: 100%;
        border-collapse: collapse;
        margin: 10px 0 14px;
        font-size: 13px;
      }
      .riceman-art-analysis-body table th,
      .riceman-art-analysis-body table td {
        border: 1px solid var(--border, #e2e8f0);
        padding: 6px 10px;
        text-align: left;
      }
      .riceman-art-analysis-body table th {
        background: var(--surface-muted, #f3eedb);
        font-weight: 600;
      }
      .riceman-art-analysis-body ul,
      .riceman-art-analysis-body ol { padding-left: 22px; margin: 8px 0; }
      .riceman-art-analysis-body code {
        background: var(--surface-muted, #f3eedb);
        padding: 1px 5px;
        border-radius: 3px;
        font-size: 12.5px;
      }
      .riceman-art-analysis-body strong { color: var(--accent, #7c2d12); }

      /* Compact pill button used in the workspace ACTIONS strip — the
         small bar below the PRIMARY pane that shows confirm/cancel
         choices during e.g. CAPTCHA flow. Kept short so the iframe
         above doesn't get clipped. */
      .riceman-actions-pill {
        font-size: 12px;
        padding: 5px 12px;
        border-radius: 999px;
        border: 1px solid var(--accent, #f59e0b);
        background: #fef3c7;
        color: #78350f;
        cursor: pointer;
        font-weight: 600;
        white-space: nowrap;
      }
      .riceman-actions-pill:hover { background: #fde68a; }
      .riceman-actions-pill:disabled { opacity: 0.5; cursor: default; }

      /* 2026-05-06 — narrow-viewport rewrite. The previous breakpoint
         tried to keep BOTH the global left nav (244px) AND a 60vw
         workspace AND the chat column visible at the same time. At
         <=1100px (and especially at the 746px viewport from a half-
         maximised window) the chat column got squashed to ~54px and
         text wrapped one character per line — unusable.

         New approach at <=1100px:
           - Workspace becomes a FULL-VIEWPORT overlay (left:0 right:0).
           - Global left nav and conversation history sidebar both hide
             (operator's attention is on the workspace; chat / nav are
             one close-button away).
           - Chat shell's margins go to 0 so when workspace is closed
             the chat fills the viewport.
         At >1100px the original side-by-side layout still applies. */
      @media (max-width: 1100px) {
        body.workspace-open .riceman-workspace {
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          width: auto;
          min-width: 0;
          border-top-left-radius: 0;
          border-left: 0;
        }
        body.workspace-open.has-app-sidebar.page-ai-ops .app-shell,
        body.workspace-open.page-ai-ops .app-shell,
        body.workspace-open #ai-ops-main,
        body.workspace-open .page-ai-ops .ai-chat-shell {
          margin-left: 0;
          margin-right: 0;
        }
        /* Belt-and-suspenders: even though chat shell doesn't show
           through the workspace overlay, clamp the global nav so a
           rotation back to wide doesn't leave artifacts. */
        body.workspace-open .app-sidebar { display: none; }
        /* Hide the floating hamburger toggle while the workspace is
           full-overlay — its z-index (90) is higher than the workspace
           pane (25), so without this rule it visibly punches through
           the workspace header. The workspace's own × close button is
           sufficient to dismiss the overlay; once dismissed, the
           hamburger reappears via the rule above being inactive. */
        body.workspace-open .app-sidebar-hamburger { display: none; }
        /* Same logic for the conversation history sidebar's collapse
           toggle (☰) — it floats with z-index above the workspace. */
        body.workspace-open .ai-chat-sidebar-toggle { display: none; }
      }

/* =============================================================
   Users — permission row layout (compact checkbox + label)
   ============================================================= */
.users-perm-row {
  margin: 4px 0;
}
.users-perm-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.users-perm-label:hover {
  background: rgba(58, 16, 2, 0.04);
}
.users-perm-checkbox {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  cursor: pointer;
  accent-color: #1c7a31;
}
.users-perm-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.users-perm-text strong {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink, #3a1002);
  line-height: 1.25;
}
.users-perm-desc {
  font-size: 0.78rem;
  color: rgba(58, 16, 2, 0.55);
  line-height: 1.4;
}

/* =============================================================
   Riceman v3 minimal layout (2026-05-11) — Perplexity-style
   ─────────────────────────────────────────────────────────────
   Goals: one centered composer, a thin toggle row, a compact
   KPI pill in the header, and history sidebar hidden by default.
   The Q/A scrolling layout used during a conversation is mostly
   untouched — these styles only affect the empty state + chrome.
   ============================================================= */

/* Minimal header — replaces the slim header gradient + "Signed in as
   Harry · ADMIN · 4 store scope" line with a thin row.
   The brand text is small; the KPI pill and "+ New" sit inline. */
.page-ai-ops .rice-man-head-minimal,
body.has-app-sidebar header.page-head.rice-man-head-minimal {
  padding: 10px 16px;
  border-radius: 12px;
  background: transparent;
  border: 0;
  border-left: 0;
  box-shadow: none;
  margin-bottom: 6px;
  overflow: visible;
}
.rice-man-head-minimal::before,
.rice-man-head-minimal::after { display: none !important; }
.rice-man-head-minimal .rice-man-head-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-ai-ops .rice-man-brand {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink, #3a1002);
  user-select: none;
}
.page-ai-ops .rice-man-head-minimal .rice-man-head-newchat {
  margin-left: 0;  /* overrides .rice-man-head-newchat margin-left:auto */
}

/* KPI pill — compact one-line summary in the header. Click to expand
   the full 4-tile strip below. */
.page-ai-ops .ai-chat-kpi-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid rgba(217, 119, 6, 0.32);
  background: rgba(217, 119, 6, 0.07);
  color: #92400e;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.page-ai-ops .ai-chat-kpi-pill:hover {
  background: rgba(217, 119, 6, 0.14);
  border-color: rgba(217, 119, 6, 0.5);
}
.page-ai-ops .ai-chat-kpi-pill-icon {
  color: #d97706;
  font-size: 0.85rem;
}
.page-ai-ops .ai-chat-kpi-pill-chev {
  opacity: 0.55;
  font-size: 0.7rem;
}
.page-ai-ops .ai-chat-kpi-pill.is-clear {
  border-color: rgba(15, 118, 110, 0.32);
  background: rgba(15, 118, 110, 0.07);
  color: #0f766e;
}
.page-ai-ops .ai-chat-kpi-pill.is-clear .ai-chat-kpi-pill-icon {
  color: #0f766e;
}
/* When the strip is expanded, give the pill an "active" look so it's
   obvious clicking again collapses it. */
.page-ai-ops .ai-chat-kpi-pill[aria-expanded="true"] {
  background: rgba(217, 119, 6, 0.18);
}

/* The full 4-tile strip is opt-in now (.kpi-strip-open class on body).
   Default = hidden even after data loads. The JS removes the `hidden`
   attribute when the pill is clicked. */
.page-ai-ops .ai-chat-kpi-strip {
  margin-top: 4px;
}

/* History sidebar — slim 36-px rail by default, full width when open.
   Body class `sidebar-collapsed` controls. Toggle button sticks out
   on the right edge of the rail so it's reachable when collapsed. */
body.sidebar-collapsed.page-ai-ops .ai-chat-sidebar {
  width: 36px;
  min-width: 36px;
  overflow: hidden;
  background: linear-gradient(180deg, #f8f5ec 0%, #fdfaf3 100%);
  border-right: 1px solid var(--border, #e2e8f0);
  position: relative;
}
body.sidebar-collapsed.page-ai-ops .ai-chat-sidebar-head,
body.sidebar-collapsed.page-ai-ops .ai-chat-sidebar-body {
  display: none;
}
body.sidebar-collapsed.page-ai-ops .ai-chat-sidebar-toggle {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid var(--border, #e2e8f0);
  background: #fff;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =====================================================================
   Empty-state hero (Perplexity-style centered composer)
   ─────────────────────────────────────────────────────────────────────
   Triggered by body.is-empty-chat (set/cleared from ai-ops.js based on
   state.messages.length). The chat layout vertically centers the
   composer, the answer feed becomes a hero with title + starter pills,
   the toggle row sits below the composer instead of inline.
   ===================================================================== */
body.is-empty-chat.page-ai-ops .ai-chat-shell {
  display: flex;
  flex-direction: column;
  /* 2026-05-11 polish: vertically center the hero + composer as a
     visual unit. Previously `.ai-chat-cols` ate all remaining flex
     space (flex:1 1 auto), pushing the composer to the absolute
     bottom edge of the viewport. Center the whole stack instead so
     the composer hugs the starter pills above it. */
  justify-content: center;
}
body.is-empty-chat.page-ai-ops .ai-chat-cols {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
}
body.is-empty-chat.page-ai-ops .ai-chat-feed-answer {
  width: min(720px, 92%);
  padding: 0;
  background: transparent;
  border: 0;
}
body.is-empty-chat.page-ai-ops .ai-chat-empty {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}
body.is-empty-chat.page-ai-ops .ai-chat-empty-head h2 {
  /* 2026-05-11 v13 polish: bigger, more confident headline.
     1.6rem felt timid; 2rem + tight letter-spacing reads as the
     focal point of the page (Perplexity uses a similar weight). */
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 24px;
  letter-spacing: -0.015em;
  color: var(--ink, #3a1002);
  line-height: 1.2;
}
body.is-empty-chat.page-ai-ops .ai-chat-empty-head p {
  color: rgba(58, 16, 2, 0.55);
  font-size: 0.88rem;
  margin: 0 0 22px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Starter pills — replaces the 6-card grid with a horizontal row.
   Wraps to a second line on narrow viewports. */
.page-ai-ops .ai-chat-prompt-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 16px;
}
.page-ai-ops .ai-chat-prompt-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid var(--border, #e2e8f0);
  background: #fff;
  color: var(--ink, #3a1002);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.page-ai-ops .ai-chat-prompt-pill:hover {
  background: rgba(18, 153, 46, 0.07);
  border-color: rgba(18, 153, 46, 0.32);
  color: #0d7723;
}

/* Composer — when empty-state, sits right under the starter pills
   as part of the hero block (justify-content:center on shell). */
body.is-empty-chat.page-ai-ops .ai-chat-composer {
  position: static;
  background: transparent;
  border-top: 0;
  padding: 16px 24px 0;
}
body.is-empty-chat.page-ai-ops .ai-chat-composer-surface {
  /* v13 polish: more elevation + clean inner padding. Perplexity-style
     "card" feel — the composer should be the visual anchor of the
     empty state, not a thin afterthought along the bottom. */
  margin: 0 auto;
  max-width: 720px;
  width: 100%;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(58, 16, 2, 0.08);
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.08);
}
body.is-empty-chat.page-ai-ops .ai-chat-composer-surface textarea {
  padding: 18px 22px 8px;
  font-size: 1rem;
  min-height: 44px;
}
body.is-empty-chat.page-ai-ops .ai-chat-toggle-row {
  padding: 8px 16px 12px;
  border-top: 1px solid rgba(58, 16, 2, 0.06);
}

/* New toggle row replaces the old composer-footer. Stays visible in
   both empty and conversation states. */
.page-ai-ops .ai-chat-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 8px;
  border-top: 1px dashed rgba(58, 16, 2, 0.08);
  flex-wrap: wrap;
}
.page-ai-ops .ai-chat-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: rgba(58, 16, 2, 0.65);
}
.page-ai-ops .ai-chat-toggle-label {
  font-weight: 600;
  color: rgba(58, 16, 2, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.68rem;
}
.page-ai-ops .ai-chat-toggle-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border, #e2e8f0);
  background: #fff
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4 L5 7 L8 4' fill='none' stroke='%23666' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right 6px center;
  padding: 3px 22px 3px 8px;
  border-radius: 7px;
  font-size: 0.78rem;
  color: var(--ink, #3a1002);
  cursor: pointer;
}
.page-ai-ops .ai-chat-toggle-select:focus {
  outline: 2px solid rgba(18, 153, 46, 0.35);
  outline-offset: 1px;
}
.page-ai-ops .ai-chat-toggle-newchat {
  margin-left: auto;
}
.page-ai-ops .ai-chat-toggle-row .ai-chat-compose-note {
  font-size: 0.72rem;
  color: rgba(58, 16, 2, 0.45);
}

/* When conversation has messages, composer pins to the bottom edge
   with a subtle elevation. Same layout you had before — just keeping
   the styles explicit alongside the new toggle row. */
body:not(.is-empty-chat).page-ai-ops .ai-chat-composer {
  border-top: 1px solid var(--border, #e2e8f0);
  background: rgba(255, 253, 246, 0.85);
  backdrop-filter: blur(6px);
}

/* Hide the legacy `.ai-chat-composer-footer` (replaced by toggle-row).
   The HTML stopped emitting it but defensive in case templates lag. */
.page-ai-ops .ai-chat-composer-footer {
  display: none;
}

/* =====================================================================
   2026-05-11: hide the global Ricemill nav on /ai-ops by default.
   The page is a single-purpose conversation app; the global SaaS menu
   is just chrome. Click the ☰ button in the header to open it as an
   overlay (uses the existing `body.app-sidebar-open` pattern that
   mobile already had).
   ===================================================================== */
body.page-ai-ops.has-app-sidebar {
  padding-left: 0;
}
body.page-ai-ops:not(.app-sidebar-open) .app-sidebar {
  transform: translateX(-100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.18s ease, visibility 0.18s ease;
}
body.page-ai-ops.app-sidebar-open .app-sidebar {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  z-index: 200;
}
/* Click-outside scrim when nav is open (so users can dismiss by tapping
   the chat area). Only renders when open. */
body.page-ai-ops.app-sidebar-open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.28);
  z-index: 150;
}

/* Menu toggle + history toggle buttons in the Riceman header */
.page-ai-ops .rice-man-menu-toggle,
.page-ai-ops .rice-man-history-toggle {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border, #e2e8f0);
  background: #fff;
  border-radius: 8px;
  font-size: 1rem;
  color: var(--ink, #3a1002);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.page-ai-ops .rice-man-menu-toggle:hover,
.page-ai-ops .rice-man-history-toggle:hover {
  background: var(--surface-strong, #f8f5ec);
  border-color: rgba(18, 153, 46, 0.32);
}

/* 2026-05-11 polish: hide the legacy slim history rail entirely.
   The little white blob it left on the page (a 36-px wide vertical
   strip with the ☰ toggle absolutely positioned in the top-left)
   was visually noisy without explaining its purpose. History is
   now reached only via the 🕒 button in the header — the aside
   stays in the DOM (so renderSidebar still hydrates it for when
   the user opens it) but its slim rail is collapsed to 0 width. */
body.sidebar-collapsed.page-ai-ops .ai-chat-sidebar {
  width: 0;
  min-width: 0;
  border-right: 0;
  background: transparent;
}
body.sidebar-collapsed.page-ai-ops .ai-chat-sidebar-toggle {
  display: none;
}
/* When OPENED (sidebar-collapsed removed), the sidebar expands as
   a floating overlay anchored to the left edge — same UX as the
   ☰ menu, separate panel. */
body.page-ai-ops:not(.sidebar-collapsed) .ai-chat-sidebar {
  position: fixed;
  top: 64px;
  left: 12px;
  bottom: 12px;
  width: 320px;
  z-index: 180;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  background: #fffdf6;
  /* 2026-05-11 v18: previous shadow (0 12px 32px @ 0.18 opacity) was
     a giant gray blob bleeding 32px into the chat area whenever the
     history panel was open. Tightened to a much softer, contained
     elevation that just lifts the panel off the page without
     painting half the viewport. */
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  padding: 0;
  overflow: hidden;
}
/* 2026-05-11 v18: kill the global decorative blobs on /ai-ops.
   The body::before / body::after rules (line ~238) paint a green
   radial circle bottom-left and an orange radial circle top-right
   on EVERY page. We removed body's own radial-gradient earlier,
   but missed these pseudo-element blobs. /ai-ops is the
   Perplexity-minimal page — no decorative ambient art. */
body.page-ai-ops::before {
  display: none;
}
/* Important: don't `display: none` body::after — we still need it
   as the scrim under the history overlay. Just neutralize its
   default decorative styling and let the scrim override below
   take care of the rest. */
body.page-ai-ops.sidebar-collapsed::after {
  display: none;
}

body.page-ai-ops:not(.sidebar-collapsed)::after {
  content: "";
  display: block;
  position: fixed;
  inset: 0;
  /* Override the global rule's width/height/border-radius/filter
     so the scrim is a proper full-viewport overlay, not a blurred
     38vw circle pinned to the top-left corner (which is what
     v17 was actually rendering — the gray blob bug). */
  width: auto;
  height: auto;
  border-radius: 0;
  filter: none;
  background: rgba(15, 23, 42, 0.22);
  z-index: 170;
}

/* 2026-05-11 polish: when workspace is open, auto-collapse the KPI
   4-tile strip back into the header pill. The strip would otherwise
   squish its tiles into ~150px columns and wrap labels awkwardly
   ("HIGH-PRIORITY / ALERTS" stacked). Operator can still re-expand
   by clicking the pill. */
body.workspace-open.page-ai-ops .ai-chat-kpi-strip {
  display: none;
}

/* ============================================================
   2026-05-11 v17 — proactive UI cleanup pass
   ------------------------------------------------------------
   Items 3, 4, 5, 7 from the "I should have flagged these" list.
   Items 1, 2, 6 are handled in HTML/JS (removed nodes outright).
   ============================================================ */

/* --- Fix 3: empty-state composer hides NEW CHAT button.
       In the empty state there's no conversation to clear — the
       button is a no-op affordance. */
body.is-empty-chat.page-ai-ops .ai-chat-toggle-newchat {
  display: none;
}
body.is-empty-chat.page-ai-ops .ai-chat-toggle-row .ai-chat-compose-note {
  margin-left: auto;
}

/* --- Fix 4: composer divider line was useful when toggle row
       held selects + buttons; with only NEW CHAT/hint/SEND it's
       a meaningless rule cutting the composer in half. */
.page-ai-ops .ai-chat-toggle-row {
  border-top: 0;
}
body.is-empty-chat.page-ai-ops .ai-chat-toggle-row {
  border-top: 0;
}

/* --- Fix 5: unify Q/A visual language.
       Assistant card was a heavy bordered box w/ drop-shadow, user
       chip was a quiet pill. The mismatch made the assistant feel
       like an authoritative form and the user message like a
       throwaway label. Strip the assistant's border + shadow so the
       answer reads as text-in-flow; the bubble-head label "Rice Man"
       and the timestamp are enough scaffolding. The user q-chip
       stays a quiet right-aligned pill so the eye can still
       distinguish turns at a glance. */
.page-ai-ops .ai-chat-feed-answer .ai-chat-bubble.assistant,
.page-ai-ops .ai-chat-message.assistant .ai-chat-bubble.assistant:not(.loading):not(.error) {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;
  border-radius: 0;
}
.page-ai-ops .ai-chat-feed-answer .ai-chat-bubble.assistant .ai-chat-bubble-head {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(58, 16, 2, 0.08);
}
.page-ai-ops .ai-chat-feed-answer .ai-chat-bubble.assistant .ai-chat-role {
  color: var(--accent-deep, #0d7723);
}

/* --- Fix 7: starter pills go from flex-wrap (5+1 at common widths)
       to a 3-column grid (always 3+3). Pills stay full-width within
       their cell so titles align tidily. Single-row fallback at very
       wide breakpoints (≥1200px) lets all six sit on one line. */
.page-ai-ops .ai-chat-prompt-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}
.page-ai-ops .ai-chat-prompt-pill {
  justify-content: center;
  width: 100%;
  padding: 8px 14px;
}
@media (max-width: 720px) {
  .page-ai-ops .ai-chat-prompt-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}



/* ============================================================
   Phase 1.B (2026-05-16) — in-chat display upload panel.
   Server-injected {{DISPLAY_UPLOAD_PANEL}} markers render here
   as a row of per-screen upload cards. See:
     * web/assets/ai-ops.js  → renderDisplayUploadPanel
     * src/ros/services/ai_ops_v2/display_panel_inject.py
   Visual style mirrors the action-choices chip row: light cream
   surface, gold accent border, clear primary/secondary spacing.
   ============================================================ */
.riceman-display-panel {
  margin-top: 12px;
  padding: 14px;
  background: rgba(211, 171, 114, 0.08);
  border: 1px solid rgba(211, 171, 114, 0.32);
  border-radius: 10px;
}
.riceman-display-panel-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-deep, #0d7723);
  margin-bottom: 10px;
}
.riceman-display-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 720px) {
  .riceman-display-panel-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
.riceman-display-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(18, 153, 46, 0.18);
  border-radius: 8px;
  padding: 10px;
  gap: 8px;
  min-height: 220px;
}
.riceman-display-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.riceman-display-card-code {
  font-weight: 800;
  font-size: 13px;
  color: var(--ink, #3a1002);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.riceman-display-card-store {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
}
.riceman-display-card-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #f3efe5;
  border-radius: 6px;
  border: 1px solid rgba(58, 16, 2, 0.06);
}
.riceman-display-card-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #6b7280);
  font-size: 12px;
}
.riceman-display-card-meta {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
}
.riceman-display-card-meta-faint { opacity: 0.7; }
.riceman-display-card-canvas {
  font-size: 10px;
  color: var(--text-muted, #6b7280);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
}
.riceman-display-card-btn {
  margin-top: auto;
  padding: 8px 12px;
  border: 1px solid rgba(13, 119, 35, 0.45);
  background: var(--accent-deep, #0d7723);
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 120ms ease, transform 80ms ease;
}
.riceman-display-card-btn:hover { background: #0a6b1f; }
.riceman-display-card-btn:active { transform: translateY(1px); }
.riceman-display-card-btn:disabled { cursor: not-allowed; }
.riceman-display-card-status {
  /* 2026-05-20: bumped from 11px+min-height-16 (too easy to miss) to a
     prominent banner. Empty status takes no vertical space so the card
     stays compact pre-upload. */
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
  margin-top: 8px;
  padding: 0;
  border-radius: 6px;
  word-break: break-word;
}
.riceman-display-card-status:not(:empty) {
  padding: 8px 10px;
}
.riceman-display-card-status-progress {
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
}
.riceman-display-card-status-ok {
  color: #064e3b;
  background: #d1fae5;
  border: 1px solid #6ee7b7;
}
.riceman-display-card-status-failed {
  color: #7f1d1d;
  background: #fee2e2;
  border: 1px solid #fca5a5;
}