:root {
  color-scheme: dark;
  --bg: #101013;
  --panel: #19191d;
  --panel-raised: #202025;
  --line: #353239;
  --text: #f5f2f4;
  --muted: #b4adb7;
  --accent: #D98BA5;
  --soft: color-mix(in srgb, var(--accent) 13%, #151518);
  --accent-line: color-mix(in srgb, var(--accent) 35%, #353239);
  --good: #b4d6bf;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button {
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 12px;
  min-height: 48px;
  padding: 12px 18px;
  font-weight: 650;
}
button:disabled { cursor: default; opacity: .5; }
button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}
input, textarea, select {
  width: 100%;
  min-height: 48px;
  border: 1px solid #48404a;
  border-radius: 12px;
  padding: 12px 14px;
  background: #121215;
  color: var(--text);
  font-size: 16px;
}
input::placeholder, textarea::placeholder { color: #8e8591; opacity: 1; }
input[type=checkbox] {
  width: 21px;
  min-height: 21px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
input[type=number] { font-variant-numeric: tabular-nums; }
textarea { resize: vertical; min-height: 106px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
label { display: block; }
small, .muted { color: var(--muted); }
h1, h2, h3, p { margin-top: 0; }
h1 {
  font-size: clamp(30px, 3.7vw, 44px);
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.12;
  margin-bottom: 14px;
}
h2 { font-size: 22px; font-weight: 650; letter-spacing: -.55px; }
h3 { font-size: 17px; font-weight: 650; letter-spacing: -.2px; }
.primary {
  background: var(--accent);
  color: #211219;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 9%, transparent);
}
.secondary { background: var(--panel-raised); color: var(--text); border-color: #4b414b; }
.text-btn { background: transparent; color: var(--muted); padding: 8px 0; }
.full { width: 100%; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 1.8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 12px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--accent-line);
  background: var(--soft);
  border-radius: 99px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
  color: var(--accent);
  white-space: nowrap;
}
.pill.neutral { background: #222126; border-color: #423d46; color: #c9c2cc; }
.pill.good { background: #202c25; border-color: #40564a; color: var(--good); }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 6px 24px #0000000d;
}
.notice {
  border: 1px solid var(--accent-line);
  border-left: 3px solid var(--accent);
  background: var(--soft);
  padding: 15px 18px;
  border-radius: 12px;
  color: #ded4de;
  font-size: 13px;
  margin: 20px 0;
}
.notice strong { display: block; margin-bottom: 3px; color: var(--text); }
.error { color: #ffb5b5; }
.error:empty { margin: 0; }
.loading { text-align: center; padding: 100px 24px; color: var(--muted); }
#toast {
  position: fixed;
  bottom: 95px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 90%;
  z-index: 40;
  display: none;
  background: var(--accent);
  color: #211219;
  box-shadow: 0 8px 50px #0008;
  padding: 13px 20px;
  border-radius: 12px;
}

/* Brand and sign-in */
.login-shell {
  max-width: 1100px;
  min-height: 100dvh;
  margin: auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 100px;
  align-items: center;
  padding: 64px 40px;
}
.brand-logo { width: 106px; height: 106px; object-fit: contain; border-radius: 16px; }
.login-art h1 { font-size: 60px; max-width: 500px; margin-top: 32px; letter-spacing: -2.3px; }
.login-art .lead { font-size: 18px; max-width: 380px; color: var(--muted); }
.brand-word { font-size: 14px; font-weight: 700; letter-spacing: -.25px; }
.brand-word span { color: var(--accent); }
.login-card { padding: 34px; border-color: #403741; }
.login-card h2 { font-size: 25px; margin-bottom: 16px; }
.login-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #121215;
}
.login-modes button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 7px 4px;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
}
.login-modes button[aria-pressed="true"] { background: var(--soft); border-color: var(--accent-line); color: var(--text); }
.login-modes button[aria-pressed="true"] .ui-icon { color: var(--accent); }
.login-modes .ui-icon, .login-confirmation .ui-icon { width: 15px; height: 15px; flex: none; }
.login-description { font-size: 13px; }
.login-confirmation {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #40564a;
  border-radius: 10px;
  background: #202c25;
  color: var(--good);
  font-size: 13px;
}
.field { margin: 20px 0; }
.field label { font-size: 12px; font-weight: 600; color: #d2c9d3; margin-bottom: 8px; }
.login-footer { font-size: 11px; color: var(--muted); margin: 24px 0 0; }

/* App frame and navigation */
.app-shell { max-width: 1440px; min-height: 100dvh; margin: auto; display: grid; grid-template-columns: 240px 1fr; }
.sidebar {
  padding: 34px 22px;
  border-right: 1px solid #29262d;
  background: #121215;
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}
.sidebar .brand-logo { width: 72px; height: 72px; margin-bottom: 15px; }
.sidebar .brand-word { font-size: 22px; }
.client { font-size: 12px; color: var(--muted); margin: 6px 0 38px; }
.nav-list { display: grid; gap: 9px; }
.nav-btn {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 13px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  border-radius: 13px;
}
.nav-btn.active { background: var(--soft); color: var(--accent); border-color: var(--accent-line); }
.nav-icon { display: inline-flex; width: 22px; height: 22px; flex-shrink: 0; align-items: center; justify-content: center; }
.nav-icon svg { display: block; width: 21px; height: 21px; }
.sidebar-bottom { margin-top: auto; font-size: 12px; color: var(--muted); }
.sidebar-bottom strong { display: block; color: var(--text); font-weight: 600; }
.workspace { min-width: 0; padding: 0 48px 52px; }
.preview-banner { display: flex; align-items: center; gap: 9px; margin-top: 18px; padding: 10px 14px; border: 1px solid var(--accent-line); border-radius: 10px; background: var(--soft); color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.5; }
.preview-banner > span { font-size: 7px; color: var(--accent); }
.topbar {
  min-height: 92px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid #302b34;
  margin-bottom: 38px;
}
.topbar p { margin: 0; font-size: 13px; color: var(--muted); }
.topbar .date { font-size: 12px; color: var(--muted); }
.topbar > div:last-child { text-align: right; }
.topbar .text-btn { font-size: 12px; }
.mobile-brand { display: none; }
.page-heading { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin-bottom: 28px; }
.page-heading p { color: var(--muted); max-width: 550px; margin-bottom: 0; font-size: 14px; }
.page-heading .eyebrow { color: var(--accent); font-size: 10px; margin-bottom: 13px; }
.page-heading > .pill { margin-top: 3px; }

/* Sector selection */
.sector-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 24px 0; }
.sector-card {
  background: var(--panel);
  color: var(--text);
  border: 1px solid #3d3640;
  text-align: left;
  padding: 23px;
  min-height: 176px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 17px;
  border-radius: 18px;
}
.sector-card.selected {
  border-color: var(--accent);
  background: var(--soft);
  box-shadow: inset 0 2px 0 var(--accent);
}
.sector-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sector-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid #49404b;
  background: #222126;
  color: #d0c7d2;
  border-radius: 12px;
}
.sector-icon svg { width: 22px; height: 22px; display: block; }
.selected .sector-icon { color: var(--accent); border-color: var(--accent-line); background: color-mix(in srgb, var(--accent) 10%, #1d1920); }
.sector-number { font-size: 11px; line-height: 1; font-weight: 600; letter-spacing: 1.2px; color: #a399a6; }
.sector-title { display: block; font-size: 21px; line-height: 1.25; font-weight: 650; letter-spacing: -.5px; }
.sector-bottom { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-top: auto; }
.sector-card .caption { font-size: 12px; line-height: 1.5; font-weight: 400; color: var(--muted); }
.sector-selected {
  display: inline-flex;
  width: 23px;
  height: 23px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #62505e;
  color: var(--accent);
  flex-shrink: 0;
}
.selected .sector-selected { background: var(--accent); border-color: var(--accent); color: #211219; }
.sector-selected svg { width: 15px; height: 15px; }

/* Compact source guidance */
.source-notice { max-width: none; margin: 22px 0 0; padding: 0; border-left-width: 1px; }
.source-notice summary {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 14px 17px;
  min-height: 48px;
  font-size: 12px;
  font-weight: 600;
  color: #e1d7e2;
}
.source-notice summary::-webkit-details-marker { display: none; }
.source-notice summary::marker { content: ""; }
.source-notice summary > span { color: inherit; font: inherit; }
.source-notice summary svg { width: 16px; height: 16px; flex-shrink: 0; margin-left: auto; color: var(--accent); }
.source-notice[open] summary svg { transform: rotate(180deg); }
.source-notice > p { margin: 0; padding: 0 17px 16px; font-size: 12px; line-height: 1.7; color: var(--muted); }

/* Checklist */
.section-top { display: flex; justify-content: space-between; gap: 15px; align-items: center; margin-bottom: 20px; }
.section-top h2 { margin: 0; }
.count-instructions { font-size: 13px; margin-bottom: 16px; line-height: 1.65; }
.checklist-tools { position: sticky; top: 0; z-index: 4; padding: 12px 0 14px; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: 0 8px 12px #00000012; }
.checklist-tools progress { display: block; width: 100%; height: 5px; margin: 0 0 19px; border: 0; border-radius: 10px; overflow: hidden; accent-color: var(--accent); background: #342a34; }
.checklist-tools progress::-webkit-progress-bar { background: #342a34; }
.checklist-tools progress::-webkit-progress-value { background: var(--accent); }
.checklist-tools progress::-moz-progress-bar { background: var(--accent); }
.catalog-search label, .catalog-filters label { font-size: 12px; font-weight: 600; color: #d2c9d3; }
.catalog-search input, .catalog-filters select { margin-top: 7px; }
.catalog-filters { display: flex; align-items: end; gap: 10px; margin-top: 12px; }
.catalog-filters label { flex: 1; min-width: 140px; }
.catalog-filters button { flex-shrink: 0; min-height: 48px; font-size: 12px; }
.filter-toggle[aria-pressed=true] { border-color: var(--accent); background: var(--soft); color: var(--accent); }
.filter-status { font-size: 11px; color: var(--muted); margin: 11px 0 0; }
.count-list { border-top: 1px solid var(--line); }
.checklist-card .count-list { border-top: 0; }
.count-group-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 25px 0 12px; border-bottom: 1px solid var(--accent-line); }
.count-group-heading h3 { font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--accent); margin: 0; overflow-wrap: anywhere; }
.count-group-progress { font-size: 11px; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.count-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding: 21px 0; border-bottom: 1px solid #322d36; }
.count-description { min-width: 0; flex: 1; }
.checklist-unit {display:inline-block;margin-left:7px;padding:2px 7px;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:11px;font-weight:500;line-height:1.4;white-space:nowrap;vertical-align:middle}
.count-description>.checklist-unit {display:table;margin:6px 0 0}
.count-name { font-weight: 600; overflow-wrap: anywhere; line-height: 1.5; }
.count-unit { font-size: 12px; color: var(--muted); margin-top: 4px; }
.count-control { display: flex; align-items: center; flex-shrink: 0; gap: 7px; padding-top: 2px; }
.count-control input { width: 94px; text-align: center; font-weight: 650; padding: 11px 7px; scroll-margin-top: 255px; scroll-margin-bottom: 140px; }
.count-control button { width: 44px; min-height: 46px; padding: 0; border: 1px solid #423944; background: #26212a; color: #e5dce8; font-size: 22px; line-height: 1; }
.ideal-reference { font-size: 11px; color: #c9b4c7; margin-top: 7px; line-height: 1.5; }
.source-reference { font-size: 11px; margin-top: 6px; color: var(--muted); max-width: 440px; }
.source-reference summary { cursor: pointer; color: #c8b7ca; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; min-height: 44px; padding: 10px 0; }
.source-reference p { margin: 1px 0 9px; line-height: 1.65; overflow-wrap: anywhere; }
.source-reference .review-reminder { color: var(--accent); }
.filter-empty { padding: 30px 12px; margin: 0; }
.form-bottom { margin-top: 26px; }
.form-bottom > label { font-size: 13px; font-weight: 600; margin-bottom: 9px; }
.confirmation { display: flex; align-items: start; gap: 12px; font-size: 13px; line-height: 1.65; color: var(--muted); margin: 24px 0; padding: 16px 0; }
.actions { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.actions small { max-width: 320px; font-size: 11px; line-height: 1.65; }

/* Dashboard, history and Excel */
.summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-bottom: 32px; }
.summary .card { padding: 25px; }
.summary h3 { font-size: 21px; margin-bottom: 22px; letter-spacing: -.5px; }
.summary .number { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: var(--soft); color: var(--accent); margin-bottom: 18px; font-size: 27px; font-weight: 600; }
.summary .number svg { width: 28px; height: 28px; }
.summary .card > .muted { font-size: 12px; margin: 14px 0 0; line-height: 1.65; }
.history-card { margin-bottom: 14px; }
.history-card summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 15px; list-style: none; }
.history-card summary::-webkit-details-marker { display: none; }
.history-card h3 { margin: 0 0 5px; }
.history-card summary small { display: block; font-size: 11px; line-height: 1.75; }
.history-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
  gap: 6px;
  padding: 6px;
  margin-bottom: 22px;
  border: 1px solid var(--accent-line);
  border-radius: 16px;
  background: var(--soft);
}
.history-sections button { min-height: 44px; padding: 8px; background: transparent; color: var(--text); font-size: 13px; }
.history-sections button[aria-pressed="true"] { background: var(--accent); color: #211219; }
.history-location { max-width: 280px; margin-bottom: 16px; font-size: 12px; color: var(--muted); }
.history-location select { margin-top: 5px; }
.history-stock-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding: 12px 0; }
.history-stock-row.card { border-color: var(--accent-line); padding: 16px; margin-bottom: 10px; }
.history-stock-row > div { min-width: 0; overflow-wrap: anywhere; }
.history-stock-row > strong { max-width: 44%; flex: 0 0 auto; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.history-stock-row small { display: block; margin-top: 4px; }
.operation-record { margin-bottom: 10px; padding: 14px 16px; }
.operation-record > summary, .operation-summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.operation-record > summary { cursor: pointer; list-style: none; min-height: 44px; }
.operation-record > summary::-webkit-details-marker { display: none; }
.operation-record > summary > div:first-child, .operation-heading { min-width: 0; overflow-wrap: anywhere; }
.operation-heading > small { display: block; margin-top: 4px; color: var(--muted); }
.operation-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 8px; font-size: 12px; color: var(--text); }
.operation-meta small, .history-card summary .operation-meta small { display: block; color: var(--muted); font-size: 11px; line-height: 1.35; }
.operation-result { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; max-width: 46%; text-align: right; font-variant-numeric: tabular-nums; }
.operation-result .ui-icon { width: 16px; height: 16px; color: var(--accent); }
.operation-record[open] > summary .operation-result .ui-icon { transform: rotate(180deg); }
.operation-detail { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.operation-detail > small, .operation-line small { display: block; color: var(--muted); }
.operation-line + .operation-line { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.operation-line > span { margin-left: 8px; font-variant-numeric: tabular-nums; }
.history-reconciliation > summary { cursor: pointer; min-height: 32px; }
.closure-comparison-table .closure-delta { color: var(--text); }
.details-body { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }
.history-line { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; font-size: 13px; border-bottom: 1px solid #2b2830; }
.history-line span { min-width: 0; overflow-wrap: anywhere; }
.history-line strong { text-align: right; flex-shrink: 0; max-width: 48%; font-variant-numeric: tabular-nums; }
.history-notes { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); padding-top: 14px; margin: 16px 0 0; }
.closure-comparison { margin-bottom: 20px; }
.closure-comparison > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  cursor: pointer;
  list-style: none;
  font-weight: 650;
}
.closure-comparison > summary::-webkit-details-marker { display: none; }
.closure-comparison > summary .ui-icon { width: 18px; height: 18px; color: var(--accent); }
.closure-comparison[open] > summary .ui-icon { transform: rotate(180deg); }
.closure-comparison-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  align-items: end;
  gap: 12px;
  margin: 12px 0 18px;
}
.closure-comparison-form label { min-width: 0; color: var(--muted); font-size: 12px; }
.closure-comparison-form input, .closure-comparison-form select { min-width: 0; margin-top: 5px; }
.closure-comparison-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.closure-comparison-actions button { padding-inline: 12px; font-size: 13px; }
.closure-comparison-period { margin-bottom: 5px; font-size: 13px; }
.closure-comparison-period .pill { margin-left: 5px; }
.closure-comparison-note { font-size: 12px; margin-bottom: 12px; }
.kitchen-assignment-form { display: grid; gap: 12px; margin-bottom: 12px; }
.kitchen-assignment-form select { margin-top: 5px; }
.kitchen-assignment-form > .confirmation { margin: 0; }
.kitchen-assignment-form > button { justify-self: start; }
.closure-comparison-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.closure-comparison-table :is(th, td) { padding: 9px 5px; border-bottom: 1px solid var(--line); text-align: right; overflow-wrap: anywhere; }
.closure-comparison-table th:first-child { width: 43%; padding-left: 0; text-align: left; }
.closure-comparison-table thead th { color: var(--muted); font-size: 11px; font-weight: 600; }
.closure-comparison-table td { font-variant-numeric: tabular-nums; }
.closure-comparison-table td small { display: block; font-size: 10px; }
.closure-delta.down { color: #f6a6ad; }
.closure-delta.up { color: var(--good); }
.closure-delta.same { color: var(--muted); }
@media (max-width: 700px) {
  .closure-comparison > summary { min-height: 44px; }
  .closure-comparison-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .closure-comparison-form label:has(select), .closure-comparison-actions { grid-column: 1 / -1; }
  .closure-comparison-form input { padding-inline: 8px; }
  .closure-comparison-table { font-size: 12px; }
}
.empty { text-align: center; padding: 45px 20px; color: var(--muted); }
.filter { display: flex; gap: 14px; align-items: end; margin-bottom: 26px; }
.filter label { font-size: 12px; color: var(--muted); }
.filter input { margin-top: 7px; }
.filter button { flex-shrink: 0; }
.export-panel { display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid var(--line); border-radius: 16px; background: #17161b; padding: 20px 22px; margin-bottom: 24px; }
.export-panel h2 { font-size: 15px; margin: 0 0 7px; letter-spacing: -.1px; }
.export-panel p { font-size: 12px; color: var(--muted); margin: 0 0 7px; max-width: 420px; line-height: 1.6; }
.export-panel small { font-size: 11px; }
.export-download { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 12px; padding: 11px 16px; text-decoration: none; white-space: nowrap; font-size: 12px; font-weight: 650; }
.export-download svg { width: 17px; height: 17px; }
.record-trial { font-size: 12px; color: var(--accent); padding-bottom: 13px; border-bottom: 1px solid var(--line); }

/* Available and planned modules */
.modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.module { border: 1px solid #312d36; border-radius: 16px; padding: 21px; color: var(--muted); background: #16161a; }
.module h3 { font-size: 15px; margin: 15px 0 6px; }
.module p { font-size: 12px; line-height: 1.6; margin: 0; }
.module .lock { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: #afa0b3; }
.module .lock svg { width: 13px; height: 13px; }
.footnote { font-size: 10px; line-height: 1.75; color: #a69ca9; margin-top: 28px; }
.install { margin: 20px 0; }
.offline-banner { background: #493b24; color: #f3deba; padding: 10px; text-align: center; font-size: 13px; }
.success-panel { text-align: center; padding: 45px 24px; }
.success-icon { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 22px; margin: 0 auto 23px; background: #202c25; border: 1px solid #40564a; color: var(--good); font-size: 38px; }
.success-icon svg { width: 34px; height: 34px; }
.success-panel h2 { margin-top: 17px; font-size: 28px; }
.success-panel p { color: var(--muted); font-size: 13px; }
.success-panel .primary { margin-top: 20px; }

@media (max-width: 1050px) {
  .workspace { padding: 0 28px 44px; }
  .app-shell { grid-template-columns: 210px 1fr; }
  .login-shell { gap: 45px; }
  .login-art h1 { font-size: 48px; }
  .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .login-shell { display: block; padding: 32px 23px; max-width: 460px; }
  .login-art .brand-logo { width: 68px; height: 68px; }
  .login-art h1 { font-size: 38px; margin-top: 24px; letter-spacing: -1.5px; }
  .login-art .lead { font-size: 15px; max-width: 330px; }
  .login-card { padding: 24px; margin-top: 30px; }
  .login-card h2 { font-size: 23px; }
  .login-art .eyebrow { margin-bottom: 8px; }
  .app-shell { display: block; }
  .sidebar { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; z-index: 30; border-right: 0; border-top: 1px solid #3a303c; padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); background: #141317f5; backdrop-filter: blur(18px); }
  .sidebar > .brand-logo, .sidebar > .brand-word, .sidebar > .client, .sidebar-bottom { display: none; }
  .nav-list { display: flex; justify-content: space-around; gap: 6px; }
  .nav-btn { flex: 1; flex-direction: column; justify-content: center; gap: 5px; font-size: 10px; padding: 8px 3px; min-height: 58px; border-radius: 12px; line-height: 1.3; }
  .nav-icon, .nav-icon svg { width: 21px; height: 21px; }
  .workspace { padding: 0 20px 118px; }
  .topbar { min-height: 84px; margin-bottom: 28px; padding: 15px 0; gap: 12px; }
  .topbar > div { min-width: 0; }
  .topbar > div:first-child { max-width: 52%; }
  .topbar > div:last-child { max-width: 48%; }
  .mobile-brand { display: block; font-size: 17px; letter-spacing: -.5px; line-height: 1.2; margin-bottom: 5px; }
  .topbar .date { font-size: 10px; }
  .topbar p { font-size: 10px; line-height: 1.6; }
  .topbar .text-btn { font-size: 11px; min-height: 44px; padding: 5px 0; }
  .page-heading { display: block; position: relative; padding-right: 0; margin-bottom: 23px; }
  .page-heading h1 { font-size: 33px; letter-spacing: -1.15px; }
  .page-heading p { font-size: 13px; line-height: 1.65; }
  .page-heading .eyebrow { font-size: 9px; margin-bottom: 10px; }
  .page-heading > .pill { margin-top: 16px; font-size: 10px; }
  .sector-grid { gap: 11px; margin: 20px 0; }
  .sector-card { padding: 17px 15px; min-height: 176px; gap: 14px; border-radius: 16px; }
  .sector-icon { width: 34px; height: 34px; border-radius: 10px; }
  .sector-icon svg { width: 20px; height: 20px; }
  .sector-number { font-size: 10px; }
  .sector-title { font-size: 17px; letter-spacing: -.35px; min-height: 2.5em; }
  .sector-card .caption { font-size: 11px; line-height: 1.5; }
  .sector-bottom { gap: 7px; }
  .sector-selected { width: 20px; height: 20px; }
  .sector-selected svg { width: 13px; height: 13px; }
  .card { padding: 20px; border-radius: 18px; }
  .section-top { margin-bottom: 16px; }
  .section-top h2 { font-size: 21px; }
  .source-notice { margin-top: 19px; }
  .source-notice summary { padding: 13px 14px; font-size: 12px; gap: 9px; }
  .source-notice > p { padding: 0 14px 14px; font-size: 11px; }
  .notice { font-size: 12px; }
  .count-instructions { font-size: 12px; }
  .checklist-tools { padding-top: 11px; padding-bottom: 12px; }
  .checklist-tools progress { margin-bottom: 16px; }
  .catalog-filters { flex-wrap: wrap; gap: 9px; margin-top: 12px; }
  .catalog-filters label { flex-basis: 100%; }
  .catalog-filters button { min-height: 44px; padding: 10px 12px; font-size: 11px; }
  .catalog-filters .text-btn { padding-left: 8px; }
  .filter-status { font-size: 10px; line-height: 1.65; }
  .count-row { gap: 13px; padding: 20px 0; }
  .count-group-heading { padding-top: 23px; }
  .count-group-heading h3 { font-size: 10px; }
  .count-name { font-size: 14px; }
  .count-unit { font-size: 11px; }
  .count-control { gap: 6px; }
  .count-control input { width: 72px; min-height: 46px; padding: 10px 4px; scroll-margin-top: 300px; }
  .count-control button { width: 44px; min-height: 46px; }
  .source-reference { font-size: 11px; }
  .ideal-reference { font-size: 10px; }
  .actions { display: block; margin-top: 20px; padding-top: 20px; }
  .actions .primary { width: 100%; margin-top: 17px; }
  .actions small { display: block; max-width: none; }
  .confirmation { font-size: 12px; }
  .summary { gap: 11px; margin-bottom: 28px; }
  .summary .card { padding: 18px 15px; }
  .summary .eyebrow { font-size: 9px; letter-spacing: 1.3px; margin-bottom: 9px; }
  .summary h3 { font-size: 17px; margin-bottom: 18px; min-height: 2.5em; line-height: 1.25; }
  .summary .number { width: 39px; height: 39px; border-radius: 12px; margin-bottom: 15px; }
  .summary .number svg { width: 24px; height: 24px; }
  .summary .card > .muted { font-size: 10px; line-height: 1.7; }
  .summary .pill { font-size: 9px; padding: 5px 8px; }
  .history-card summary { align-items: start; gap: 10px; }
  .history-card h3 { font-size: 16px; }
  .history-card summary small { font-size: 10px; }
  .history-card summary > .pill { font-size: 9px; padding: 5px 8px; }
  .history-line { gap: 12px; font-size: 12px; }
  .filter { flex-wrap: wrap; gap: 10px; }
  .filter label { flex: 1; min-width: 170px; }
  .export-panel { padding: 18px; align-items: stretch; flex-direction: column; gap: 15px; border-radius: 16px; }
  .export-download { align-self: flex-start; min-width: 170px; }
  .modules { grid-template-columns: 1fr; }
  .module { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 18px; }
  .module h3 { margin: 0; grid-column: 1; grid-row: 1; }
  .module p { grid-column: 1; grid-row: 2; }
  .module .lock { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 9px; }
  .footnote { font-size: 10px; }
  .success-panel { padding: 35px 20px; }
  .success-panel h2 { font-size: 26px; }
}
@media (max-width: 380px) {
  .workspace { padding-left: 16px; padding-right: 16px; }
  .card { padding: 18px; }
  .checklist-card .count-row { flex-wrap: wrap; gap: 9px; }
  .count-description { flex-basis: 100%; }
  .count-control { margin-left: auto; }
  .sector-card { padding: 15px 13px; }
  .sector-title { font-size: 16px; }
  .sector-card .caption { font-size: 10px; }
  .preview-banner { font-size: 10px; }
  .export-download { width: 100%; min-width: 0; }
  .summary .card { padding: 17px 12px; }
  .summary h3 { font-size: 16px; }
  .summary .pill { font-size: 9px; padding-left: 6px; padding-right: 6px; }
}
@media (prefers-reduced-motion: no-preference) {
  button, a, input, textarea, select { transition: background-color .16s, border-color .16s, box-shadow .16s, color .16s; }
}
@media (hover: hover) {
  .primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 90%, white); }
  .secondary:hover:not(:disabled), .count-control button:hover:not(:disabled) { border-color: var(--accent-line); background: var(--soft); }
  .text-btn:hover:not(:disabled) { color: var(--accent); }
  .nav-btn:hover:not(:disabled):not(.active) { color: var(--text); background: #212025; }
  .sector-card:hover:not(:disabled):not(.selected) { border-color: #796271; background: #201c23; }
}

/* Shared checklist view: report quantities remain separate for every product. */
.excel-state{font-size:11px!important;margin:9px 0 0!important;line-height:1.5;color:var(--muted)}
.excel-state[data-state=ready]{color:var(--good)}
.excel-state[data-state=pending]{color:#ecd2a0}
.live-overview{margin:0 0 32px}
.live-overview>.section-top{margin-bottom:12px}
.live-overview>.section-top h2{margin-bottom:5px}
.live-overview>.section-top p{margin:0;font-size:12px}
.live-refresh{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 18px;color:var(--good);font-size:12px}
.live-refresh small{margin-left:auto;font-size:10px}
.live-dot{width:6px;height:6px;background:currentColor;border-radius:50%;flex-shrink:0}
.live-refresh.disconnected{color:#ecd2a0}
.live-sectors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.live-sector{padding:20px;min-width:0}
.live-sector>summary,.live-sector-summary{display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:44px}
.live-sector>summary{cursor:pointer;list-style:none}
.live-sector>summary::-webkit-details-marker{display:none}
.live-sector>summary .pill svg{width:14px;height:14px}
.live-sector[open]>summary .pill svg{transform:rotate(180deg)}
.live-sector-title{display:flex;align-items:center;gap:9px;font-weight:650;font-size:17px}
.live-sector-title small{display:block;margin-top:4px;color:var(--muted);font-weight:400;font-size:12px;overflow-wrap:anywhere}
.live-sector-icon{color:var(--accent);display:flex;align-items:center}
.live-sector-icon svg{width:22px;height:22px}
.kitchen-day-sector{min-width:0;padding:20px}
.kitchen-day-sector .section-top{flex-wrap:wrap;gap:8px;margin-bottom:8px}
.kitchen-day-sector h3{margin:0}
.kitchen-day-sector>p{margin-bottom:12px;font-size:13px}
.kitchen-day-sector details>summary{cursor:pointer;color:var(--accent);padding:10px 0;min-height:44px}
.kitchen-day-list,.kitchen-day-events{list-style:none;margin:0;padding:0}
.kitchen-day-product{border-top:1px solid var(--line);padding:12px 0;overflow-wrap:anywhere}
.kitchen-day-product dl{display:flex;flex-wrap:wrap;gap:8px 20px;margin:7px 0}
.kitchen-day-product dt{color:var(--muted);font-size:12px}
.kitchen-day-product dd{margin:2px 0 0;font-variant-numeric:tabular-nums}
.kitchen-day-events{display:flex;flex-wrap:wrap;gap:5px 12px;font-size:13px;color:var(--muted)}
.kitchen-day-estimate{font-size:13px;margin-top:6px}
.live-table-wrap{max-height:385px;margin-top:12px;overflow:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overscroll-behavior:contain}
.live-table{border-collapse:collapse;width:100%;font-size:12px;text-align:left}
.live-table th{position:sticky;top:0;background:var(--panel);color:var(--accent);font-size:10px;letter-spacing:.7px;padding:12px 4px;border-bottom:1px solid var(--accent-line)}
.live-table td{padding:11px 4px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.live-table th:last-child,.live-table td:last-child{text-align:right;width:72px;font-variant-numeric:tabular-nums}
.live-quantity{font-weight:650;color:var(--text)}
@media(max-width:900px){.live-sectors{grid-template-columns:1fr}}
@media(max-width:700px){.live-sector{padding:17px}.live-sector-title{font-size:16px}.live-refresh small{width:100%;margin-left:14px}.live-table-wrap{max-height:330px}.live-table{font-size:12px}}

.live-overview>.section-top>.text-btn{white-space:nowrap}
.today-submissions>summary{cursor:pointer;color:var(--accent);margin-bottom:14px}

@media(max-width:700px){.live-overview>.section-top{flex-wrap:wrap;align-items:flex-start;gap:8px}.live-overview>.section-top>div{flex:1 1 100%;min-width:0}}

/* Inventory: source review, physical counts and movements share a mobile workspace. */
.available-modules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.available-modules .card>h2{margin-top:18px}
.available-modules .card>.primary{margin-top:12px}
.inventory-intro{margin-bottom:26px}
.inventory-intro .notice{margin-bottom:12px}
.inventory-intro>p{color:var(--muted);font-size:12px;line-height:1.75;max-width:750px;margin:0 0 16px}
.inventory-opening{margin:0 0 22px;border-color:var(--accent-line)}
.inventory-opening summary{cursor:pointer;color:var(--accent);font-weight:600}
.inventory-opening[open] summary{margin-bottom:16px}
.inventory-opening form{display:grid;justify-items:start;gap:12px;margin-top:16px}
.inventory-opening input[type="file"]{display:block;max-width:100%;margin-top:6px}
.inventory-opening-preview{display:grid;gap:8px;max-height:400px;overflow:auto}
.inventory-opening-preview article{padding:12px;border:1px solid var(--line);border-radius:10px}
.inventory-opening-preview article p{margin:6px 0}
.inventory-opening-preview article small{display:block;color:var(--muted)}
.inventory-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 22px}
.inventory-summary .card{padding:20px}
.inventory-summary strong{display:block;font-size:30px;font-weight:650;letter-spacing:-1px;color:var(--text);line-height:1.2}
.inventory-summary span{display:block;color:var(--muted);font-size:11px;line-height:1.6;margin-top:9px}
.inventory-select-hint{display:flex;align-items:center;gap:18px;margin-bottom:28px}
.inventory-select-hint h2{font-size:18px;margin:0 0 7px}
.inventory-select-hint p{font-size:12px;color:var(--muted);line-height:1.7;margin:0}
.inventory-symbol{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:46px;height:46px;background:var(--soft);color:var(--accent);border:1px solid var(--accent-line);border-radius:14px}
.inventory-editor{margin-bottom:30px;border-color:var(--accent-line)}
.inventory-editor-top{display:flex;justify-content:space-between;gap:14px;align-items:start}
.inventory-editor-top>div{min-width:0}
.inventory-editor-top .eyebrow{font-size:10px;margin:0 0 10px}
.inventory-editor-top h2{font-size:23px;line-height:1.4;overflow-wrap:anywhere;margin:0 0 12px;scroll-margin-top:20px}
.inventory-editor-top>.text-btn{padding:0 0 10px;min-height:44px;flex-shrink:0;font-size:11px}
.inventory-current{font-size:13px;color:var(--muted);margin:0 0 12px;line-height:1.7}
.inventory-current strong{color:var(--text);font-variant-numeric:tabular-nums}
.inventory-stock-type{font-size:10px;color:var(--accent);display:block;margin-top:3px}
.inventory-source{font-size:11px;color:var(--muted);margin:3px 0 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.inventory-source>summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;cursor:pointer;list-style:none;gap:10px;color:#d4c6d1}
.inventory-source>summary::-webkit-details-marker{display:none}
.inventory-source>summary svg{width:15px;height:15px;flex-shrink:0}
.inventory-source[open]>summary svg{transform:rotate(180deg)}
.inventory-source p{line-height:1.75;margin:0 0 10px;overflow-wrap:anywhere}
.inventory-source ul{padding-left:18px;line-height:1.75;overflow-wrap:anywhere;margin:0 0 14px}
.inventory-review-note{color:#ead0ab}
.inventory-tabs{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:24px}
.inventory-tabs .secondary{font-size:12px;min-height:44px;padding:10px 13px}
.inventory-tabs .chosen{background:var(--soft);border-color:var(--accent-line);color:var(--accent)}
.inventory-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
.inventory-form-grid label,.inventory-notes{font-size:12px;font-weight:600;min-width:0;display:block;line-height:1.65}
.inventory-form-grid label input,.inventory-form-grid label select,.inventory-notes textarea{margin-top:8px}
.inventory-form-grid label small,.inventory-notes small{font-size:11px;font-weight:400;color:var(--muted)}
.inventory-help{font-size:11px;color:var(--muted);line-height:1.75;margin:13px 0 20px;max-width:650px}
.inventory-notes textarea{min-height:95px;resize:vertical}
.inventory-editor .confirmation{margin:18px 0 7px;max-width:720px}
.inventory-editor .error{margin:12px 0 18px}
.inventory-editor .inventory-refresh-product{margin-bottom:16px;display:block}
.inventory-catalog>.section-top{align-items:start;flex-wrap:wrap;margin-bottom:17px}
.inventory-catalog>.section-top>div{min-width:0;flex:1 1 240px}
.inventory-catalog>.section-top p{font-size:11px;line-height:1.65;margin:8px 0 0}
.inventory-catalog>.section-top button{font-size:12px;padding-top:0;min-height:44px}
.inventory-tools{margin-bottom:16px}
.inventory-tools>label,.inventory-filter-grid>label{display:block;font-size:12px;font-weight:600}
.inventory-tools input,.inventory-tools select{margin-top:8px}
.inventory-filter-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:13px;margin-top:15px}
.inventory-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.inventory-product{padding:21px;min-width:0;display:flex;flex-direction:column}
.inventory-product[hidden]{display:none}
.inventory-product.selected{border-color:var(--accent)}
.inventory-product-heading{display:flex;align-items:start;justify-content:space-between;gap:10px}
.inventory-product-heading>div{min-width:0}
.inventory-product-heading h3{font-size:15px;line-height:1.55;overflow-wrap:anywhere;margin:0}
.inventory-category-label{font-size:9px;line-height:1.6;color:var(--accent);letter-spacing:1px;text-transform:uppercase;margin:0 0 8px}
.inventory-product-heading>.pill{font-size:9px;line-height:1.4;white-space:normal;text-align:center;flex-shrink:0;max-width:100px;padding:6px 8px}
.inventory-low{color:#ffb4bd!important;border-color:#8d3f50!important;background:#3c2029!important}
.inventory-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0}
.inventory-values>div{min-width:0}
.inventory-values dt{font-size:10px;line-height:1.6;color:var(--muted);margin:0 0 7px}
.inventory-values dd{font-size:14px;line-height:1.5;font-weight:600;margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.inventory-product>.secondary{margin-top:auto;font-size:11px;min-height:44px}
.inventory-history{margin-top:28px}
.inventory-history>.section-top p{font-size:11px;line-height:1.7;margin:9px 0 0}
.inventory-history-row{border-top:1px solid var(--line);padding:15px 0}
.inventory-history-row>summary{display:flex;justify-content:space-between;gap:18px;align-items:start;list-style:none;cursor:pointer;min-height:44px}
.inventory-history-row>summary::-webkit-details-marker{display:none}
.inventory-history-row>summary>div:first-child{min-width:0}
.inventory-history-row strong{font-size:13px;line-height:1.65;overflow-wrap:anywhere}
.inventory-history-row small{display:block;font-size:10px;line-height:1.8;color:var(--muted);margin-top:5px}
.inventory-history-amount{text-align:right;flex-shrink:0}
.inventory-history-amount>strong{font-size:17px;font-variant-numeric:tabular-nums}
.inventory-trial{display:block;font-size:9px;color:var(--accent);margin-top:5px}
.inventory-history-detail{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.inventory-history-detail p{font-size:11px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 8px}
.inventory-history-detail strong{font-size:11px}
@media(max-width:1050px){.inventory-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-products{grid-template-columns:1fr}}
@media(max-width:700px){
  .nav-list{gap:3px}.nav-btn{min-width:0;font-size:9px;padding-left:2px;padding-right:2px}.nav-icon,.nav-icon svg{width:20px;height:20px}
  .available-modules{grid-template-columns:1fr;gap:14px}
  .inventory-summary{gap:10px;margin-bottom:18px}.inventory-summary .card{padding:16px}.inventory-summary strong{font-size:25px}.inventory-summary span{font-size:10px;margin-top:7px}
  .inventory-intro>p{font-size:11px}.inventory-intro .export-download{width:auto;min-width:0}
  .inventory-select-hint{align-items:start;gap:12px;margin-bottom:24px}.inventory-select-hint h2{font-size:16px;line-height:1.5}.inventory-select-hint p{font-size:11px}.inventory-symbol{width:36px;height:36px;border-radius:11px}.inventory-symbol svg{width:21px;height:21px}
  .inventory-editor-top h2{font-size:19px}.inventory-current{font-size:12px}.inventory-editor-top .eyebrow{font-size:9px}
  .inventory-form-grid{grid-template-columns:1fr;gap:16px}.inventory-form-grid label,.inventory-notes{font-size:12px}.inventory-editor .confirmation{font-size:11px}
  .inventory-editor form>.primary{width:100%}
  .inventory-tabs{gap:8px;margin-bottom:20px}.inventory-tabs .secondary{font-size:11px;flex:1;min-width:0;padding:10px 9px}
  .inventory-filter-grid{grid-template-columns:1fr;gap:12px}.inventory-tools{padding:17px}
  .inventory-product{padding:18px}.inventory-product-heading h3{font-size:14px}.inventory-product-heading>.pill{max-width:93px;font-size:8px}
  .inventory-values{gap:10px;margin:19px 0}.inventory-values dt{font-size:9px;min-height:2.9em}.inventory-values dd{font-size:13px}
  .inventory-history-row>summary{gap:12px}.inventory-history-row strong{font-size:12px}.inventory-history-amount>strong{font-size:16px}.inventory-history-row small{font-size:9px}.inventory-history-detail strong{font-size:11px}
}


/* Inventory report is a readable paper sheet, independent of catalog filters. */
.inventory-sheet-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 16px}
.inventory-sheet-actions button{font-size:12px}
.inventory-sheet-downloads{margin-top:22px}
.inventory-sheet-feedback{font-size:12px;line-height:1.75;color:var(--muted);margin:0 0 22px;max-width:800px}
.inventory-simulation{margin:0 0 24px}
.inventory-simulation>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;min-height:44px;font-weight:650}
.inventory-simulation>summary::-webkit-details-marker{display:none}
.inventory-simulation>summary svg{width:16px;height:16px;flex-shrink:0}
.inventory-simulation[open]>summary svg{transform:rotate(180deg)}
.inventory-simulation>p{font-size:12px;line-height:1.75;color:var(--muted);margin:14px 0 20px;max-width:780px}
.inventory-simulation-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.inventory-simulation-fields label{font-size:12px;font-weight:600;min-width:0}
.inventory-simulation-fields input,.inventory-simulation-fields select{margin-top:8px}
.inventory-simulation-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.inventory-simulation-actions button{font-size:12px}
.inventory-simulation-result{font-size:12px;line-height:1.8;margin:18px 0 0;color:var(--good)}
.inventory-sheet{background:#fff;color:#292329;border-radius:18px;border:1px solid #e5dce1;padding:28px;min-width:0}
.inventory-sheet-heading{display:flex;justify-content:space-between;gap:22px;align-items:flex-start;padding-bottom:18px;border-bottom:3px solid #D98BA5}
.inventory-sheet-heading>div{min-width:0}
.inventory-sheet-heading p{font-size:11px;font-weight:650;letter-spacing:.2px;color:#65535d;margin:0 0 10px}
.inventory-sheet-heading h2{font-size:25px;line-height:1.3;color:#201b20;margin:0}
.inventory-sheet-heading>div:last-child{text-align:right;font-size:12px;line-height:1.6}
.inventory-sheet-heading strong,.inventory-sheet-heading span{display:block}
.inventory-sheet-heading span{font-size:10px;color:#65535d;max-width:240px;margin-top:7px}
.inventory-sheet-note{font-size:11px;line-height:1.8;color:#65535d;margin:17px 0}
.inventory-sheet-scroll-help{display:none;font-size:11px;color:#65535d;margin:0 0 12px}
.inventory-sheet-scroll{overflow:auto;max-width:100%;border:1px solid #ddd2d9;border-radius:8px}
.inventory-sheet-table{border-collapse:collapse;width:100%;min-width:880px;text-align:left;font-size:11px;line-height:1.6;color:#292329}
.inventory-sheet-table caption{caption-side:top;text-align:left;padding:12px 14px;color:#65535d;background:#faf7f9;font-size:10px}
.inventory-sheet-table thead th{background:#292329;color:#fff;font-size:10px;line-height:1.5;font-weight:650;padding:12px 10px;vertical-align:top;border-right:1px solid #53464f}
.inventory-sheet-table tbody th,.inventory-sheet-table td{border-bottom:1px solid #e2d9df;padding:12px 10px;vertical-align:top;overflow-wrap:anywhere}
.inventory-sheet-table tbody th{font-weight:600;min-width:170px;width:24%}
.inventory-sheet-table tbody tr:nth-child(even){background:#faf7f9}
.inventory-sheet-table small{display:block;color:#766772;font-size:9px;font-weight:400;margin-top:4px}
.inventory-sheet-table .inventory-sheet-quantity{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.inventory-sheet-pending{font-size:10px;color:#766772;font-weight:400}
.inventory-sheet-footnote{font-size:10px;line-height:1.8;color:#766772;margin:18px 0 0}
@media(max-width:900px){.inventory-simulation-fields{grid-template-columns:1fr}.inventory-sheet-heading{flex-direction:column;gap:14px}.inventory-sheet-heading>div:last-child{text-align:left}.inventory-sheet-scroll-help{display:block}}
@media(max-width:700px){.inventory-sheet{padding:18px;border-radius:14px}.inventory-sheet-heading h2{font-size:21px}.inventory-sheet-actions{gap:8px}.inventory-sheet-actions>.primary,.inventory-sheet-actions>.secondary{width:100%}.inventory-sheet-actions button{font-size:11px}.inventory-sheet-feedback{font-size:11px}.inventory-simulation>summary{font-size:14px}.inventory-simulation>p,.inventory-simulation-result{font-size:11px}.inventory-simulation-actions{gap:8px}.inventory-simulation-actions .secondary{width:100%}}
@media print{
  @page{size:A4 landscape;margin:12mm}
  body:has(.inventory-sheet){background:#fff;color:#000}
  body:has(.inventory-sheet) .sidebar,body:has(.inventory-sheet) .preview-banner,body:has(.inventory-sheet) .topbar,body:has(.inventory-sheet) .page-heading,body:has(.inventory-sheet) .footnote,body:has(.inventory-sheet) .inventory-sheet-actions,body:has(.inventory-sheet) .inventory-sheet-feedback,body:has(.inventory-sheet) .inventory-simulation,body:has(.inventory-sheet) .inventory-sheet-scroll-help,body:has(.inventory-sheet) #toast,body:has(.inventory-sheet) .offline-banner{display:none!important}
  body:has(.inventory-sheet) .app-shell{display:block}
  body:has(.inventory-sheet) .workspace{padding:0;max-width:none}
  .inventory-sheet{padding:0;border:0;border-radius:0;background:#fff;box-shadow:none}
  .inventory-sheet-heading{flex-direction:row;break-inside:avoid;gap:16px}
  .inventory-sheet-heading>div:last-child{text-align:right}
  .inventory-sheet-scroll{overflow:visible;border:0;border-radius:0}
  .inventory-sheet-table{min-width:0;width:100%;font-size:9px;table-layout:fixed}
  .inventory-sheet-table caption{padding:7px 0;background:#fff;font-size:9px}
  .inventory-sheet-table thead{display:table-header-group}
  .inventory-sheet-table thead th{background:#eee!important;color:#111!important;border:1px solid #bbb;padding:8px 6px;font-size:9px}
  .inventory-sheet-table tbody th,.inventory-sheet-table td{padding:7px 6px;border:1px solid #ddd;min-width:0}
  .inventory-sheet-table tbody tr{break-inside:avoid}
  .inventory-sheet-table .inventory-sheet-quantity{white-space:normal}
  .inventory-sheet-table small,.inventory-sheet-pending{font-size:8px}
}

/* Keep labels visible while reading the full inventory sheet. */
.inventory-sheet-scroll{max-height:70vh}
.inventory-sheet-table thead th{position:sticky;top:0;z-index:2}
.inventory-sheet-table thead th:first-child{left:0;z-index:3}
.inventory-sheet-table tbody th{position:sticky;left:0;z-index:1;background:#fff}
.inventory-sheet-table tbody tr:nth-child(even) th{background:#faf7f9}
@media print{.inventory-sheet-scroll{max-height:none}.inventory-sheet-table thead th,.inventory-sheet-table tbody th{position:static}}

/* Red denotes a confirmed, numeric shortage; pending quantities stay neutral. */
.inventory-product[data-status="low"]{border-color:#8d3f50}
.inventory-product[data-status="low"] .inventory-product-heading h3,.inventory-values .inventory-shortage-amount{color:#ffb4bd}
.inventory-sheet-table tbody tr.inventory-sheet-shortage,.inventory-sheet-table tbody tr.inventory-sheet-shortage th{background:#fff1f2}
.inventory-sheet-table tbody tr.inventory-sheet-shortage th,.inventory-sheet-table tbody tr.inventory-sheet-shortage td:nth-child(6){color:#9f263b;font-weight:700}
.inventory-sheet-table tbody tr.inventory-sheet-shortage th{box-shadow:inset 3px 0 #bb324b}
.inventory-simulation-result.inventory-simulation-shortage{color:#ffb4bd;background:#3c2029;border:1px solid #8d3f50;border-radius:10px;padding:12px 14px}
.inventory-simulation-result.error{color:#ffb4bd}
@media print{
  .inventory-sheet-table tbody tr.inventory-sheet-shortage,.inventory-sheet-table tbody tr.inventory-sheet-shortage th{background:#fff1f2!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .inventory-sheet-table tbody tr.inventory-sheet-shortage th,.inventory-sheet-table tbody tr.inventory-sheet-shortage td:nth-child(6){color:#9f263b!important}
}

/* Catalogue controls keep routine changes separate from physical stock movements. */
.inventory-catalog-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 22px}
.inventory-catalog-actions>.primary{font-size:12px;min-height:48px}
.inventory-archive-toggle{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);margin:0;min-height:48px;padding:9px 13px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.inventory-archive-toggle>input{margin:0;flex-shrink:0}
.inventory-archive-toggle strong{font-size:11px;color:var(--text);font-weight:600;min-width:22px;display:inline-block;text-align:center;margin-left:7px}
.inventory-form-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.inventory-form-actions>.primary,.inventory-form-actions>.secondary{font-size:12px}
.inventory-create-panel .inventory-help{margin-top:0}
.inventory-create-panel fieldset>.inventory-help{margin-top:12px;margin-bottom:0}
.inventory-archive-section{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.inventory-archive-section>div{flex:1 1 240px;min-width:0}
.inventory-archive-section h3{font-size:13px;line-height:1.6;margin:0 0 5px;color:var(--text)}
.inventory-archive-section p{font-size:11px;line-height:1.75;color:var(--muted);margin:0}
.inventory-archive-section .secondary{font-size:11px;min-height:44px}
.inventory-archive-section>small{font-size:10px;width:100%;color:var(--muted)}
.inventory-product-archived,.inventory-editor-archived{border-style:dashed;border-color:#625363}
.inventory-product-archived .inventory-product-heading h3{color:#d2c6d0}
.inventory-product-archived .inventory-values dd{color:var(--muted)}
#inventory-status-form>h3{font-size:17px;margin:0 0 14px}
#inventory-status-form>.notice{margin-bottom:20px}
#inventory-status-form>.inventory-refresh-product{margin:0 0 16px}
@media(max-width:700px){
 .inventory-catalog-actions{align-items:stretch;gap:10px;margin-bottom:18px}
 .inventory-catalog-actions>.primary{width:100%}.inventory-archive-toggle{justify-content:center;flex:1;font-size:11px}
 .inventory-form-actions{flex-direction:column;align-items:stretch;gap:8px}.inventory-form-actions>.primary,.inventory-form-actions>.secondary{width:100%}
 .inventory-archive-section{margin-top:25px;padding-top:20px;gap:12px}.inventory-archive-section>.secondary{width:100%}
}

/* Purchasing uses the same quiet rose palette as the rest of the mobile workspace. */
.order-toolbar,.order-title,.order-buttons{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.order-toolbar{margin-bottom:16px}.order-toolbar p{margin:0;font-size:12px}.order-toolbar button{font-size:12px}
.order-toolbar-actions{display:flex;gap:8px;flex-wrap:wrap}
.order-followup>summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
.order-followup[open]>summary{margin-bottom:12px}
.order-scope{font-size:12px;margin-bottom:24px}.order-title h2{margin:0 0 5px}.order-title .eyebrow{margin-bottom:6px}
.order-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.order-stats .card{margin:0;display:flex;flex-direction:column;padding:22px}.order-stats strong{font-size:29px;font-weight:600;color:var(--accent);line-height:1.25}.order-stats span{font-size:11px;color:var(--muted);margin-top:8px}
.order-suggestions,.order-lines{margin:20px 0}.order-suggestion,.order-line{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.order-suggestion strong,.order-line strong{font-size:14px}.order-suggestion small,.order-line small,.order-card small,.order-receipt small{display:block;color:var(--muted);font-size:11px;line-height:1.8;margin-top:4px}
.order-shortage{min-width:80px;text-align:right;color:#ffb4bd}.order-shortage span{display:block;text-transform:uppercase;font-size:9px;letter-spacing:.09em}.order-shortage strong{font-size:24px}
.order-list{display:grid;gap:10px;margin-top:18px}.order-card{width:100%;padding:18px;background:var(--panel-raised);border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;color:var(--text)}
.order-card:hover{border-color:var(--accent)}.order-card strong{font-size:14px}.order-card .pill{flex-shrink:0}
.order-empty{padding:18px 0;color:var(--muted);font-size:13px}.order-editor,.order-detail{margin-top:18px}
.order-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.order-editor fieldset{padding:0;border:0;margin:0;min-width:0}
.order-line>div:first-child{flex:1;min-width:0;overflow-wrap:anywhere}.order-line-input{width:110px;flex-shrink:0}.order-line-input label{display:block;font-size:10px;color:var(--muted);margin-bottom:5px}.order-line-input input{width:100%;min-height:44px}.order-line-input button{font-size:11px;margin-top:5px}
.order-buttons{justify-content:flex-start;margin-top:22px}.order-buttons button{font-size:12px;min-height:44px}.order-note{white-space:pre-wrap;font-size:13px;overflow-wrap:anywhere}
.order-table-scroll{overflow:auto;border:1px solid var(--line);border-radius:12px;margin:22px 0}.order-table{border-collapse:collapse;width:100%;font-size:12px;text-align:left;min-width:420px}.order-table th,.order-table td{padding:15px 12px;border-bottom:1px solid var(--line)}.order-table thead{color:var(--muted);background:var(--panel-raised)}.order-table tbody th{font-weight:500;min-width:160px}.order-table td{font-variant-numeric:tabular-nums;text-align:right}
.order-receipt{padding:16px 0;border-bottom:1px solid var(--line);font-size:12px}.order-receipt strong{font-size:13px}.order-receipt ul{padding-left:18px}.order-receipt p{white-space:pre-wrap}
.order-audit{margin-top:24px;font-size:12px}.order-audit summary{cursor:pointer;color:var(--muted)}.order-audit p{padding-top:12px;border-top:1px solid var(--line)}
.order-editor .confirm{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.7;margin:20px 0}.order-editor .confirm input{flex-shrink:0;min-height:auto;width:18px;height:18px;margin-top:2px}
@media(max-width:700px){
 .order-stats{gap:8px}.order-stats .card{padding:14px 10px;border-radius:14px}.order-stats strong{font-size:24px}.order-stats span{font-size:10px}
 .order-fields{grid-template-columns:1fr;gap:0}.order-title{align-items:flex-start}.order-title>.primary{width:100%}
 .order-suggestion,.order-line{gap:12px}.order-suggestion strong,.order-line strong{font-size:13px}.order-shortage{min-width:65px}
 .order-line-input{width:90px}.order-card{flex-direction:column;align-items:flex-start;gap:10px;padding:15px}
 .order-buttons{align-items:stretch;gap:9px}.order-buttons>.primary,.order-buttons>.secondary{width:100%}.order-toolbar{align-items:flex-start}
 .order-editor h2,.order-detail h2{font-size:21px}.order-editor .pill{font-size:10px}.order-editor fieldset{width:100%}
}

@media(max-width:700px){
 .order-table{min-width:0}.order-table thead{display:none}.order-table tbody{display:block}
 .order-table tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:12px;border-bottom:1px solid var(--line)}
 .order-table tbody tr:last-child{border-bottom:0}.order-table tbody th{grid-column:1/-1;min-width:0;padding:0 0 12px;border:0;overflow-wrap:anywhere}
 .order-table tbody td{padding:0 5px 0 0;border:0;text-align:left;display:block;font-size:14px}
 .order-table tbody td::before{display:block;font-size:9px;color:var(--muted);font-weight:400;margin-bottom:5px}
 .order-table tbody td:nth-child(2)::before{content:"Pedido"}.order-table tbody td:nth-child(3)::before{content:"Recibido"}.order-table tbody td:nth-child(4)::before{content:"Pendiente"}
}

@media(max-width:700px){.order-table tbody td:nth-child(4)::before{content:attr(data-label)}}

/* Team guide: readable steps and a separate, read-only preparation overview. */
.guide-open{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:5px 11px;margin-top:5px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--muted);font-size:11px}
.guide-open .ui-icon{width:15px;height:15px}.guide-open:hover,.guide-open:focus-visible{color:var(--accent);border-color:var(--accent)}
.guide-page{max-width:920px}.guide-topics{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 23px}
.guide-topics button{padding:10px 16px;min-height:44px;border-radius:12px;background:var(--panel);border:1px solid var(--line);color:var(--muted);font-size:12px}
.guide-topics button.active{color:var(--accent);background:var(--soft);border-color:var(--accent-line)}
.guide-welcome{position:relative;overflow:hidden;background:radial-gradient(ellipse at 100% 0%,var(--soft),transparent 65%),var(--panel);padding:32px}
.guide-welcome>p{max-width:580px;color:var(--muted);font-size:14px;line-height:1.8}.guide-welcome h2{font-size:28px;letter-spacing:-.04em;margin:0 0 12px}
.guide-welcome-mark{width:46px;height:46px;border-radius:15px;border:1px solid var(--accent-line);color:var(--accent);background:var(--soft);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.guide-welcome .eyebrow{color:var(--accent);font-size:10px}.guide-path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:25px}
.guide-path button{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--bg);text-align:left;color:var(--text);min-width:0}
.guide-path button>span{color:var(--accent);font-size:10px;letter-spacing:.08em}.guide-path button>strong{font-size:14px;font-weight:600}.guide-path small{color:var(--muted);font-size:11px}.guide-path button:hover{border-color:var(--accent)}
.guide-reading{padding:28px}.guide-reading>p{font-size:13px;line-height:1.9;color:var(--muted)}.guide-reading .eyebrow{color:var(--accent);font-size:10px}
.guide-reading h2,.guide-readiness h2{font-size:23px;letter-spacing:-.035em;line-height:1.3;margin:0 0 18px}.guide-steps{padding:0;margin:28px 0;list-style:none;display:grid;gap:24px}
.guide-steps>li{display:flex;gap:16px;align-items:flex-start}.guide-step-number{display:flex;justify-content:center;align-items:center;width:33px;height:33px;border-radius:10px;flex-shrink:0;background:var(--soft);border:1px solid var(--accent-line);color:var(--accent);font-size:10px}
.guide-steps h3{margin:3px 0 6px;font-size:14px;font-weight:600}.guide-steps p{margin:0;font-size:13px;line-height:1.85;color:var(--muted)}
.guide-actions{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}.guide-actions button{font-size:12px}
.guide-faq{padding:17px 0;border-top:1px solid var(--line);font-size:13px}.guide-faq summary{cursor:pointer;font-weight:500;line-height:1.7}.guide-faq p{font-size:12px;line-height:1.9;color:var(--muted);margin-bottom:0}
.guide-basics,.guide-meeting-list ul{padding-left:19px;color:var(--muted);font-size:13px;line-height:1.9}.guide-basics li,.guide-meeting-list li{margin-bottom:12px}.guide-basics strong{color:var(--text);font-weight:500}
.guide-meeting-list{padding-top:5px;margin:18px 0 26px}.guide-meeting-list h3{font-size:15px}
.guide-readiness{padding:28px}.guide-readiness .eyebrow{color:var(--accent);font-size:10px}.guide-readiness .section-top{gap:16px;align-items:flex-start}
.guide-readiness .section-top h2{margin-bottom:5px}.guide-readiness .section-top button{font-size:12px;min-height:44px}
.guide-readiness-lead{font-size:14px;line-height:1.8}.guide-readiness-lead>strong{color:var(--accent);font-size:24px;margin-right:4px}
.guide-readiness>.muted{font-size:12px;line-height:1.8}.guide-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0}
.guide-metrics>div{background:var(--bg);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;padding:16px 12px}.guide-metrics strong{font-size:23px;font-weight:500}.guide-metrics span{font-size:10px;color:var(--muted);margin-top:5px}
.guide-readiness>h3{font-size:14px}.guide-tasks{display:grid;gap:8px;margin-bottom:22px}.guide-tasks button{display:flex;align-items:center;gap:12px;text-align:left;padding:15px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel-raised);color:var(--text);font-size:12px;min-height:48px}
.guide-tasks button>span:first-child{flex:1}.guide-tasks strong{font-size:12px;font-weight:500;color:var(--accent);background:var(--soft);padding:3px 8px;border-radius:7px}.guide-tasks button:hover{border-color:var(--accent)}
.guide-updated{display:block;color:var(--muted);font-size:10px;line-height:1.7;margin-top:18px}.guide-ready-note{font-size:13px;line-height:1.8;color:var(--good)}
@media(max-width:700px){
 .guide-topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.guide-topics button{padding:10px 7px;font-size:11px}
 .guide-topics button:last-child:nth-child(odd){grid-column:1/-1}.guide-welcome,.guide-reading,.guide-readiness{padding:22px 18px}
 .guide-welcome h2{font-size:25px}.guide-path{grid-template-columns:1fr;gap:8px}.guide-path button{display:grid;grid-template-columns:24px 1fr;padding:14px;gap:3px 10px;min-height:68px;align-items:center}
 .guide-path button>span{grid-row:1/3}.guide-path button>small{grid-column:2}.guide-path button>strong{font-size:13px}
 .guide-steps>li{gap:12px}.guide-steps{gap:22px}.guide-steps p,.guide-basics,.guide-meeting-list ul{font-size:12px}
 .guide-reading h2,.guide-readiness h2{font-size:21px}.guide-actions{flex-direction:column}.guide-actions button{width:100%}
 .guide-metrics{gap:7px}.guide-metrics>div{padding:13px 9px}.guide-metrics strong{font-size:21px}.guide-metrics span{font-size:9px}
 .guide-open{min-height:36px;padding:5px 9px;font-size:10px}
}

/* Five clear destinations on phones; the rest stays available in Más. */
.nav-label-mobile{display:none}
.account-shell{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:28px 18px;background:radial-gradient(ellipse at top,var(--soft),transparent 60%)}
.account-pin-card{width:min(100%,440px);padding:30px}.account-pin-card h1{font-size:28px;line-height:1.25;letter-spacing:-.035em}
.account-pin-card .eyebrow{font-size:10px;color:var(--accent)}.account-pin-card>.muted{font-size:13px;line-height:1.8}
.account-pin-actions{display:flex;justify-content:space-between;gap:12px;margin-top:24px;flex-wrap:wrap}
@media(max-width:700px){
 .app-shell[data-role="manager"] .nav-btn[data-nav="checklist"],.app-shell[data-role="manager"] .nav-btn[data-nav="history"],.app-shell[data-role="manager"] .nav-btn[data-nav="team"]{display:none}
 .nav-btn[data-nav="modules"] .nav-label{display:none}.nav-btn[data-nav="modules"] .nav-label-mobile{display:block}
 .nav-list{gap:4px!important;justify-content:space-around}.nav-btn{font-size:10px!important;line-height:1.35!important;min-height:58px;flex:1;min-width:0!important;padding:8px 4px!important}
 .nav-label{display:block;white-space:normal;overflow-wrap:normal}.nav-icon svg{width:22px;height:22px}
 .workspace{padding-bottom:104px}.topbar .date{max-width:55%;font-size:11px}.topbar .date .text-btn{font-size:11px;max-width:100%;overflow-wrap:anywhere}
 .page-heading h1{font-size:30px}.page-heading p{font-size:14px;line-height:1.7}
 .available-modules .card>h2{font-size:21px}.available-modules .card>p{font-size:13px;line-height:1.75}
 .account-pin-card{padding:25px 20px}.account-pin-card input{font-size:16px}
}

/* Keep every desktop navigation item reachable on shorter screens. */
@media (min-width: 701px) {
  .sidebar { min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: #66515e transparent; }
  .sidebar > * { flex-shrink: 0; }
  .nav-list { align-content: start; }
  .sidebar-bottom { padding-top: 22px; }
  .sidebar::-webkit-scrollbar { width: 5px; }
  .sidebar::-webkit-scrollbar-track { background: transparent; }
  .sidebar::-webkit-scrollbar-thumb { background: #66515e; border-radius: 8px; }
  .sidebar::-webkit-scrollbar-button { display: none; height: 0; }
}

/* Small visual finish: deeper blacks, soft rose light and clearer surfaces. */
@media screen {
  :root { --bg: #08080a; --panel: #151518; --panel-raised: #1c1b20; }
  body { background: var(--bg); }
  .workspace { background-image: radial-gradient(ellipse at 90% 0%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 58%); background-size: 100% 560px; background-repeat: no-repeat; }
  .sidebar { background: linear-gradient(155deg, #151014, #0c0c0e 55%); }
  .sidebar .brand-logo { border: 1px solid var(--accent-line); background: #171217; padding: 6px; box-shadow: 0 8px 26px #0004; }
  .nav-btn.active { background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 18%, #161216), #1b171c); box-shadow: inset 3px 0 0 var(--accent); }
  .sidebar-bottom { border-top: 1px solid #30262e; }
  .page-heading .eyebrow { display: flex; align-items: center; gap: 9px; }
  .page-heading .eyebrow::before { content: ''; width: 22px; height: 2px; flex-shrink: 0; border-radius: 2px; background: var(--accent); opacity: .8; }
  .workspace .card { box-shadow: 0 10px 30px #0003, inset 0 1px 0 #ffffff05; }
  .available-modules .card { background: linear-gradient(145deg, #211a21, var(--panel) 65%); }
  .sector-card { background-image: radial-gradient(ellipse at 100% 0%, #ffffff05, transparent 65%); }
  .sector-card.selected { background-image: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%); box-shadow: inset 0 2px 0 var(--accent), 0 10px 32px #0003; }
  .sector-icon, .summary .number { box-shadow: inset 0 1px 0 #ffffff0a; }
  .preview-banner { background: linear-gradient(105deg, #21171f, #141116); border-color: #49323e; }
  .preview-banner > span { color: var(--accent); box-shadow: 0 0 9px color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 50%; }
  .primary { background-image: linear-gradient(120deg, #ffffff12, transparent 70%); box-shadow: 0 5px 18px color-mix(in srgb, var(--accent) 12%, transparent), inset 0 1px 0 #ffffff24; }
  .guide-open { border-color: #473441; background: #1b151c; }
  .meeting-summary > div, .team-summary > div, .schedule-summary > div { box-shadow: inset 0 1px 0 #ffffff07; }
  @media (hover: hover) and (pointer: fine) {
    .nav-btn:not(.active):hover { background: #201a20; color: var(--text); }
    .available-modules .card:hover { border-color: #67505f; }
    .primary:hover:not(:disabled) { filter: brightness(1.06); }
  }
  @media (max-width: 700px) {
    .sidebar { background: #0d0c10f5; }
    .nav-btn.active { box-shadow: inset 0 2px 0 var(--accent); }
    .workspace { background-size: 100% 400px; }
  }
}

/* Swipe through every destination permitted for the signed-in role. */
.nav-scroll-hint { display: none; }
@media (max-width: 700px) {
  .app-shell[data-role="manager"] .nav-btn[data-nav="checklist"], .app-shell[data-role="manager"] .nav-btn[data-nav="history"], .app-shell[data-role="manager"] .nav-btn[data-nav="team"] { display: flex; }
  .sidebar { padding-left: 8px; padding-right: 8px; }
  .nav-scroll-hint { display: block; text-align: right; padding: 0 8px 5px; color: var(--muted); font-size: 9px; letter-spacing: .15px; }
  .nav-list { width: 100%; min-width: 0; flex-wrap: nowrap; justify-content: flex-start; gap: 5px !important; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #6b485a transparent; padding: 3px 2px 5px; }
  .nav-list::-webkit-scrollbar { height: 3px; }
  .nav-list::-webkit-scrollbar-thumb { background: #6b485a; border-radius: 4px; }
  .nav-btn { flex: 0 0 88px !important; min-height: 60px; scroll-snap-align: center; }
  .nav-btn .nav-label { max-width: 86px; }
  .workspace { padding-bottom: 132px; }
}

@media (max-width:700px){
 .app-shell[data-role="staff"] .nav-list{justify-content:space-around;overflow-x:hidden}
 .app-shell[data-role="staff"] .nav-btn{flex:1 1 0!important;max-width:none;min-width:0!important}
}

/* Worker home: one large button per task. */
.worker-home { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 18px; }
.worker-task { display: flex; align-items: center; gap: 16px; min-height: 92px; padding: 18px 20px; text-align: left; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; cursor: pointer; }
.worker-task:hover, .worker-task:focus-visible { border-color: var(--accent); background: var(--panel-raised); }
.worker-task strong { display: block; font-size: 1.15rem; }
.worker-task small { display: block; margin-top: 4px; color: var(--muted); font-size: .9rem; }
.worker-task-icon { display: grid; place-items: center; flex: 0 0 52px; height: 52px; border-radius: 14px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent); }
.worker-task-icon .ui-icon { width: 28px; height: 28px; }
.worker-home-more { margin-top: 14px; }
.worker-back { margin-bottom: 4px; }

/* Team food cost: one percentage against the goal, with a bar and the goal marked on it. */
.team-foodcost { margin-top: 22px; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); display: grid; gap: 8px; }
.team-foodcost-title { margin: 0; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.team-foodcost-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.team-foodcost-number { font-size: 2.6rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.team-foodcost-status { font-weight: 700; font-size: .9rem; padding: 4px 10px; border-radius: 999px; border: 1px solid currentColor; }
.team-foodcost-status.good { color: var(--good); }
.team-foodcost-status.close { color: #e8c27a; }
.team-foodcost-status.high { color: #f0a08f; }
.team-foodcost-lead { margin: 0; color: var(--text); }
.team-foodcost-pending { margin: 0; color: var(--muted); font-size: .92rem; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line); }
.team-foodcost-bar { position: relative; height: 10px; border-radius: 999px; background: var(--panel-raised); margin: 6px 0 2px; }
.team-foodcost-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: var(--good); }
.team-foodcost-fill.close { background: #e8c27a; }
.team-foodcost-fill.high { background: #f0a08f; }
.team-foodcost-goal { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 2px; }
.team-foodcost-other, .team-foodcost-source { margin: 0; color: var(--muted); font-size: .9rem; }
.team-foodcost-source { font-size: .8rem; }

/* Tutorial: a quieter card on the worker home, and the topic list and doubts inside the tutorial. */
.tutorial-card { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 22px; padding: 14px 18px; text-align: left; color: var(--text);
  background: transparent; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 18px; cursor: pointer; }
.tutorial-card:hover, .tutorial-card:focus-visible { border-style: solid; border-color: var(--accent); background: var(--panel); }
.tutorial-card strong { display: block; font-size: 1rem; }
.tutorial-card small { display: block; margin-top: 3px; color: var(--muted); font-size: .88rem; }
.tutorial-card .worker-task-icon { flex-basis: 44px; height: 44px; }
.tutorial-list-title { margin: 6px 0 0; font-size: 1.05rem; }
.tutorial-video { display: flex; align-items: center; gap: 16px; margin: 4px 0 22px; padding: 16px 20px; border-radius: 18px; text-decoration: none; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.tutorial-video:hover, .tutorial-video:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.tutorial-video strong { display: block; font-size: 1.08rem; }
.tutorial-video small { display: block; margin-top: 3px; color: var(--muted); font-size: .88rem; }
.tutorial-video-play { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border-radius: 50%; background: var(--accent); color: #2a1520; font-size: 18px; padding-left: 3px; }
.tutorial-list { margin: 10px 0 18px; }
.tutorial-faq-title { margin: 22px 0 8px; font-size: 1rem; }

/* Tránsito: what was left on the line, counted first in each sector's closure. */
.transit-group { margin-top: 14px; padding: 0 14px 6px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 7%, transparent); }
.transit-group .count-group-heading { padding-top: 16px; }
.transit-note { margin: 10px 0 2px; color: var(--muted); font-size: .9rem; }
.transit-remove { display: block; margin-top: 6px; padding: 0; font-size: 12px; color: var(--muted); }
.transit-add { display: grid; gap: 10px; margin: 14px 0 10px; padding-top: 14px; border-top: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--line)); }
.transit-add label, .transit-new label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.transit-new { display: grid; gap: 10px; grid-template-columns: 2fr 1fr; }
.transit-new[hidden] { display: none; }
.transit-add [data-transit-status]:empty { display: none; }
@media (max-width: 520px) { .transit-new { grid-template-columns: 1fr; } }

/* One row of sub-sections under a grouped menu entry (Hoy, Compras y costos, Equipo). */
.section-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.section-tabs button { padding: 8px 14px; border-radius: 999px; background: transparent; color: var(--muted); border: 1px solid var(--line); }
.section-tabs button.active { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.history-reconciliation { margin: 18px 0; }
.history-reconciliation h3 { margin-bottom: 8px; }

/* General polish: gentle feedback on interactive elements and aligned figures in tables. */
button, .nav-btn, .button-link, .worker-task, .section-tabs button { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; }
button:active:not(:disabled), .worker-task:active { transform: translateY(1px); }
.nav-btn:hover:not(.active) { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.section-tabs button:hover:not(.active) { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
table td, table th { font-variant-numeric: tabular-nums; }
.page-heading h1 { letter-spacing: -.015em; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* Ambient background: one smooth, fixed gradient behind the whole app, so no area ends in a hard edge.
   The sidebar and the top band were solid blocks of slightly different darks; they now let it show through. */
html { background: var(--bg); }
body {
  background:
    radial-gradient(1100px 760px at 88% -12%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 62%),
    radial-gradient(900px 720px at -12% 38%, color-mix(in srgb, #9085e9 16%, transparent), transparent 64%),
    radial-gradient(700px 600px at 6% -8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(1000px 760px at 55% 112%, color-mix(in srgb, #199e70 7%, transparent), transparent 62%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100dvh;
}
.app-shell .workspace { background-image: none; }
/* Sidebar as light glass over the ambient background (no dark block on the left). */
.app-shell .sidebar { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border-right: 1px solid rgba(255,255,255,.07); box-shadow: inset -1px 0 0 rgba(255,255,255,.03); }
/* On phones it is a bottom bar over scrolling content: a small blurred glass bar stays readable and light. */
@media (max-width: 700px) {
  .app-shell .sidebar { background: rgba(22,20,26,.72); border-right: 0; border-top: 1px solid rgba(255,255,255,.10); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
}

/* Hoy: what needs attention, before the detail. */
.dash-attention{display:grid;gap:14px;margin-bottom:26px}
.dash-attention .section-top{margin-bottom:0}
.dash-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dash-tile{display:grid;gap:6px;align-content:start;text-align:left;padding:18px 20px;border-radius:18px;border:1px solid var(--line);background:var(--panel);color:var(--text);text-decoration:none;font:inherit;min-width:0}
button.dash-tile,a.dash-tile{cursor:pointer}button.dash-tile:hover,a.dash-tile:hover{border-color:var(--accent-line)}
.dash-tile .dash-label{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px}.dash-tile .dash-label svg{width:16px;height:16px}
.dash-tile strong{font-size:22px;line-height:1.15}.dash-tile small{color:var(--muted);font-size:12.5px}
.dash-ok{border-color:#40564a}.dash-ok strong{color:var(--good)}
.dash-warn{border-color:color-mix(in srgb,var(--accent) 60%,#353239);background:var(--soft)}.dash-warn strong{color:var(--accent)}
.dash-wait strong{color:#efbf91}
.dash-actions{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:900px){.dash-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-tile{padding:14px 16px}.dash-tile strong{font-size:18px}.dash-actions>*{flex:1 1 160px}}

/* Faltantes: grouped by place, next step beside the list, history folded. */
.shortage-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.shortage-top h2{margin:0 0 4px}.shortage-group{display:flex;align-items:center;gap:8px;margin:20px 0 6px;font-size:15px}
.inventory-history-folded>summary{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;list-style:none}
.inventory-history-folded>summary::-webkit-details-marker{display:none}
.inventory-history-folded>summary span{display:grid;gap:4px}.inventory-history-folded[open]>summary{margin-bottom:14px}
.inventory-history-folded>summary svg{transition:transform .2s}.inventory-history-folded[open]>summary svg{transform:rotate(180deg)}

/* Recetas: filter what still needs work. */
.recipe-filters{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.recipe-filter{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text);font:inherit;font-size:13px;cursor:pointer}
.recipe-filter span{color:var(--muted);font-size:12px}
.recipe-filter.active{border-color:var(--accent);background:var(--soft);color:var(--accent)}.recipe-filter.active span{color:var(--accent)}

/* Faltantes: each room in its own coloured card. */
.shortage-sectors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.shortage-sector{border:1px solid var(--line);border-top:4px solid var(--sector-color);border-radius:16px;padding:14px 16px;background:color-mix(in srgb,var(--sector-color) 7%,transparent);min-width:0}
.shortage-sector header{display:flex;align-items:center;gap:10px;padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.shortage-sector header h3{margin:0;font-size:16px;color:var(--sector-color)}.shortage-sector header svg{width:20px;height:20px;color:var(--sector-color)}
.shortage-count{margin-left:auto;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;color:var(--sector-color);border:1px solid var(--sector-color)}
.shortage-frio{--sector-color:#8fc1ee}.shortage-caliente{--sector-color:#f0a46a}
@media (max-width:900px){.shortage-sectors{grid-template-columns:minmax(0,1fr)}}

/* Cierre: chips per category, a visible count and bigger numbers. */
.count-progress-label{margin:-12px 0 10px;font-size:13px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}
.count-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;margin-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.count-chips::-webkit-scrollbar{display:none}
.count-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#26212a;color:var(--text);font:inherit;font-size:13px;font-weight:600;white-space:nowrap}
.count-chip span{font-size:11.5px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.count-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#1d1418}.count-chip[aria-pressed="true"] span{color:#3b2430}
.count-chip.done:not([aria-pressed="true"]){border-color:#40564a}.count-chip.done span{color:var(--good)}
.next-category{display:block;width:100%;margin:18px 0 4px;min-height:50px}
.count-group-heading{border-bottom-color:var(--line)}.count-group-heading h3{color:#d8cfd9}
.count-control input{font-size:18px}
@media (max-width:640px){.count-control input{width:84px;font-size:19px}}
/* Inicio del cocinero: 2×2. */
.worker-home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.worker-home-grid .worker-task{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px;min-height:150px;padding:18px}
.worker-home-grid .worker-task strong{font-size:1.05rem}.worker-home-grid .worker-task small{font-size:.82rem;line-height:1.35}
@media (max-width:640px){.worker-home-grid{gap:10px}.worker-home-grid .worker-task{min-height:138px;padding:15px}.worker-home-grid .worker-task-icon{flex-basis:auto;width:46px;height:46px}}
/* Registrar and home tiles: a soft brand glow on hover (mouse only). */
@media (hover:hover){.worker-task:hover{box-shadow:0 0 0 1px var(--accent-line),0 10px 30px color-mix(in srgb,var(--accent) 22%,transparent)}}
@media (max-width:640px){.checklist-tools .filter-status{display:none}.count-progress-label{margin-top:-8px}}

/* Top bar: who is signed in, and a visible way out. */
.topbar-user{display:inline-block;margin-top:4px;font-weight:600;color:var(--text)}
.topbar-logout{color:var(--text)}.topbar-logout:hover,.topbar-logout:focus-visible{color:var(--accent);border-color:var(--accent)}

/* Cierre: the sticky tools use the same glass as the bottom bar, edge to edge, and the app's own selected style. */
.checklist-tools{margin-inline:-26px;padding:12px 26px 12px;background:rgba(22,20,26,.72);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:none}
@media (max-width:700px){.checklist-tools{margin-inline:-20px;padding-inline:20px}}
@media (max-width:380px){.checklist-tools{margin-inline:-18px;padding-inline:18px}}
.checklist-tools progress{height:4px;margin-bottom:10px;background:rgba(255,255,255,.08)}
.checklist-tools progress::-webkit-progress-bar{background:rgba(255,255,255,.08)}
.checklist-tools progress::-webkit-progress-value{background:linear-gradient(90deg,#c47492,#e7aec2)}
.checklist-tools progress::-moz-progress-bar{background:linear-gradient(90deg,#c47492,#e7aec2)}
.count-progress-label{margin:0 0 10px;color:var(--muted);font-weight:500}
.count-chip{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10)}
.count-chip[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 16%,#151518);border-color:color-mix(in srgb,var(--accent) 45%,#353239);color:var(--accent)}
.count-chip[aria-pressed="true"] span{color:color-mix(in srgb,var(--accent) 70%,#999)}

/* User menu in the top bar. */
.user-menu{position:relative;display:inline-block}
.user-menu>summary{list-style:none;cursor:pointer;color:var(--text);font-weight:600}.user-menu>summary::-webkit-details-marker{display:none}
.user-menu[open]>summary{border-color:var(--accent-line);color:var(--accent)}.user-menu-caret{font-size:10px;opacity:.7}
.user-menu-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:40;display:grid;gap:2px;min-width:170px;padding:6px;border-radius:14px;background:rgba(22,20,26,.97);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 14px 34px #0007;text-align:left}
.user-menu-panel .text-btn{display:block;width:100%;padding:11px 12px;border-radius:10px;text-align:left;font-size:13px;color:var(--text);max-width:none}
.user-menu-panel .text-btn:hover,.user-menu-panel .text-btn:focus-visible{background:rgba(255,255,255,.06);color:var(--accent)}
.user-menu-logout{border-top:1px solid rgba(255,255,255,.08)!important}
/* Cierre: sticky tools solid enough that the list does not show through. */
.checklist-tools{background:rgba(24,21,27,.96)}
.checklist-tools{background:#1c191f}

/* Comparar cierres: on phones each date gets its own line, so the date fields never overlap. */
@media (max-width:700px){.closure-comparison-form{grid-template-columns:minmax(0,1fr)}.closure-comparison-form input[type=date]{display:block;width:100%;max-width:100%;-webkit-appearance:none;appearance:none;min-height:46px}}

/* Cierre: the tools blend into the card; only once they stick to the top do they take the bottom bar's glass. */
.checklist-tools{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;transition:background-color .2s ease,box-shadow .2s ease}
.checklist-tools.is-stuck{background:rgba(22,20,26,.94);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-bottom-color:rgba(255,255,255,.08);box-shadow:0 10px 24px #0006}
/* Kitchen team bottom bar: five shortcuts, swipe sideways instead of squeezing them. */
@media (max-width:700px){
 .app-shell[data-role="staff"] .nav-list{justify-content:flex-start;overflow-x:auto}
 .app-shell[data-role="staff"] .nav-btn{flex:0 0 86px!important;min-width:86px!important}
}
/* Bottom bar: two-line labels stay centred (iPhone aligned them left). */
@media (max-width:700px){.nav-btn{align-items:center;text-align:center}.nav-btn .nav-label{display:block;width:100%;text-align:center;margin-inline:auto}}
.fc-source .text-btn{min-height:0;padding:0;vertical-align:baseline}

/* Records kept on the phone while there is no connection. */
.outbox-status{position:fixed;right:20px;bottom:20px;z-index:60;display:grid;gap:8px;max-width:min(420px,calc(100vw - 32px));padding:12px 16px;border-radius:16px;background:rgba(22,20,26,.96);border:1px solid var(--accent-line);box-shadow:0 14px 34px #0007;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-size:13px}
.outbox-status p{margin:0;display:grid;gap:2px}.outbox-status p span{color:var(--muted);font-size:12px}
.outbox-status summary{cursor:pointer;color:#efbf91;font-weight:600}
.outbox-status ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px;max-height:40vh;overflow:auto}
.outbox-status li{display:grid;gap:2px}.outbox-status li small{color:var(--muted)}.outbox-status li .text-btn{justify-self:start;padding:4px 0;min-height:0}
@media (max-width:700px){.outbox-status{left:16px;right:16px;bottom:96px;max-width:none}}

/* Hoy: approvals waiting, the owner's sales and food cost, and the manager's register shortcuts set apart. */
.dash-approval{display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;border-radius:14px;border:1px solid var(--accent-line);background:var(--soft);color:var(--text);font:inherit;font-weight:600;text-align:left;cursor:pointer}
.dash-approval svg{width:18px;height:18px;color:var(--accent);flex:none}
.dash-tiles-owner{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.dash-tiles-owner{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dash-register{margin-top:26px;padding-top:16px;border-top:1px solid var(--line)}
.dash-register h3{margin:0 0 10px;font-size:13px;color:var(--muted);font-weight:600}
.dash-register div{display:flex;flex-wrap:wrap;gap:8px}
.dash-register .text-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;min-height:0}
.dash-register svg{width:16px;height:16px}
/* Desktop menu: Registrar sits apart for managers. */
@media (min-width:701px){.app-shell[data-role="manager"] .nav-btn[data-nav="register"]{margin-top:16px;opacity:.78}}
/* Anotar compra. */
.qp-card form{display:grid;gap:14px;max-width:560px}
.qp-card label{display:grid;gap:6px;font-size:13px;font-weight:600;color:#d2c9d3}
.qp-amount{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}
.qp-toggle{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.qp-toggle legend{font-size:13px;font-weight:600;color:#d2c9d3;margin-bottom:6px;padding:0}
.qp-toggle label{display:inline-flex;cursor:pointer}
.qp-toggle input{position:absolute;opacity:0;pointer-events:none}
.qp-toggle span{padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:13px;color:var(--text)}
.qp-toggle input:checked+span{background:color-mix(in srgb,var(--accent) 16%,#151518);border-color:color-mix(in srgb,var(--accent) 45%,#353239);color:var(--accent)}
.qp-toggle input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.qp-list h2{margin-top:0}.qp-list ul{list-style:none;margin:0;padding:0;display:grid}
.qp-list li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.qp-list li>div{display:grid;gap:3px;min-width:0}.qp-list small{color:var(--muted);font-size:12px}
.qp-right{text-align:right;justify-items:end}.qp-right .text-btn{padding:2px 0;min-height:0}
.qp-voided strong{text-decoration:line-through;opacity:.6}
@media (max-width:640px){.qp-amount{grid-template-columns:minmax(0,1fr)}}

/* iPhone: date and time fields keep a width of their own and spill over the field beside them unless told to fit. */
@media (max-width:900px){
 input[type=date],input[type=time],input[type=datetime-local],input[type=month]{display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;-webkit-appearance:none;appearance:none;min-height:46px}
 input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value,input[type=datetime-local]::-webkit-date-and-time-value{text-align:left;min-height:1.2em}
 .field,.field>label,label:has(>input[type=date]),label:has(>input[type=time]){min-width:0}
}
@media (max-width:900px){
 /* Any pair of fields side by side (Desde/Hasta, quantity/unit?): a field never grows wider than its column. */
 input,select,textarea{min-width:0;max-width:100%;box-sizing:border-box}
 label,.field{min-width:0}
}

/* Mi food cost: the manager's own percentage, recalculated after every purchase he writes down. */
.qp-summary{display:grid;gap:6px}.qp-summary p{margin:0}
.qp-summary-label{color:var(--muted);font-size:13px}
.qp-pct{font-size:44px;line-height:1.05;font-weight:700;font-variant-numeric:tabular-nums}
.qp-good{color:var(--good)}.qp-close{color:#efbf91}.qp-high{color:#e8735f}
.qp-previous{margin-top:6px!important;padding-top:10px;border-top:1px solid rgba(255,255,255,.06);font-size:14px}
.qp-card h2{margin-top:0}

/* Owner: change view for training, and the banner that says which view is on. */
.view-as{display:grid;gap:2px;padding:4px 0 6px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.08)}
.view-as>span{padding:6px 12px 2px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.view-as .text-btn.active{color:var(--accent);background:rgba(255,255,255,.04)}
.view-as-banner{position:sticky;top:0;z-index:70;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;padding:8px 14px;background:color-mix(in srgb,var(--accent) 22%,#151518);border-bottom:1px solid var(--accent-line);font-size:13px;text-align:center}
.view-as-banner .text-btn{min-height:0;padding:4px 10px;border:1px solid var(--accent-line);border-radius:999px;font-size:12px}
.team-admin-actions{gap:14px}.team-danger{color:#e8735f!important}

/* Dropdown lists open dark like the rest of the app (Windows drew them white with light text until hovered). */
:root{color-scheme:dark}
select option,select optgroup{background:#151518;color:#f2edf3}
select option:checked{background:#3a2a33;color:#fff}
select option:disabled{color:#8e8591}