:root {
  --brand-charcoal: #282321;
  --brand-copper: #c97945;
  --brand-copper-dark: #92512f;
  --brand-navy: #001b67;
  --brand-cream: #f7f1e8;
  --brand-paper: #fbfaf7;
  --brand-line: #e6ded3;
  --brand-success-bg: #eef4f7;
  --brand-success-text: #31576c;
}
/* Any author `display` rule outranks the UA stylesheet's [hidden] rule, so an
   element marked hidden kept rendering whenever its class set a display value.
   That was live in several places: the wastage form showed the ingredient
   selects and the menu-item select at once, the menu editor's "New category
   name" field never hid, the roster's custom-time inputs always showed, and
   the wastage Retake button appeared before any photo was captured. Several
   selectors already carried their own [hidden] guard; this makes it universal
   so the next one added cannot regress. !important is deliberate -- it is the
   standard reset for exactly this trap. */
[hidden] {
  display: none !important;
}
body {
  background: var(--brand-paper);
}
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  transform: translateY(-150%);
  border-radius: 0.375rem;
  background: var(--brand-navy);
  color: white;
  padding: 0.75rem 1rem;
  font-weight: 800;
  box-shadow: 0 8px 22px rgb(0 0 0 / 0.22);
  transition: transform 160ms ease;
}
.skip-link:focus-visible {
  transform: translateY(0);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  margin: -1px;
  padding: 0;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 3px;
}
:where(button, .btn-primary, .btn-secondary, .chip, .nav-link, .nav-group-trigger, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea, summary) {
  min-height: 2.75rem;
}
input[type="checkbox"],
input[type="radio"] {
  min-width: 1.25rem;
  min-height: 1.25rem;
}
:where(button, .btn-primary, .btn-secondary):disabled,
:where(button, .btn-primary, .btn-secondary)[aria-disabled="true"],
:where(button, .btn-primary, .btn-secondary).is-loading,
:where(input, select, textarea):disabled {
  opacity: 0.62;
  cursor: not-allowed;
}
:where(button, .btn-primary, .btn-secondary).is-loading {
  cursor: progress;
}
#main-content:focus-visible {
  outline-offset: -3px;
}
.app-sidebar {
  position: sticky;
  top: 0;
  width: 18rem;
  height: 100vh;
  border-color: #e6ded3;
  background: #fffdf9;
  transition: width 180ms ease, padding 180ms ease;
  z-index: 30;
}
.app-sidebar.is-collapsed {
  width: 5.5rem;
}
.app-sidebar.is-collapsed.is-expanded {
  width: 18rem;
}
.sidebar-nav {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.brand-card {
  position: relative;
  border: 1px solid #e3d7ca;
  border-radius: 0.5rem;
  background: linear-gradient(180deg, #fffaf3 0%, var(--brand-cream) 100%);
  padding: 0.75rem;
}
.brand-lockup {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}
.brand-logo {
  width: 9.5rem;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.brand-logo-mark {
  display: none;
}
.app-sidebar.is-collapsed .brand-card {
  padding: 0.45rem;
}
.app-sidebar.is-collapsed .brand-lockup {
  justify-content: center;
}
.app-sidebar.is-collapsed .brand-logo-full {
  display: none;
}
.app-sidebar.is-collapsed .brand-logo-mark {
  display: block;
  width: 3.25rem;
  height: auto;
}
.app-sidebar.is-collapsed.is-expanded .brand-card {
  padding: 0.75rem;
}
.app-sidebar.is-collapsed.is-expanded .brand-lockup {
  justify-content: initial;
}
.app-sidebar.is-collapsed.is-expanded .brand-logo-full {
  display: block;
}
.app-sidebar.is-collapsed.is-expanded .brand-logo-mark {
  display: none;
}
.sidebar-collapse {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  display: none;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid #ead9ca;
  border-radius: 999px;
  background: #fffdf9;
  color: var(--brand-copper-dark);
  font-size: 1.25rem;
  line-height: 1;
}
.app-sidebar.is-expanded .sidebar-collapse {
  display: inline-flex;
}
.nav-group {
  position: relative;
  display: block;
  margin-bottom: 0.45rem;
}
.nav-group-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  padding: 0.78rem 0.8rem;
  background: transparent;
  color: #5f524a;
  font-weight: 850;
  letter-spacing: 0;
  text-align: left;
}
.nav-group-trigger:hover,
.nav-group.active-group > .nav-group-trigger {
  border-color: #ead9ca;
  background: var(--brand-cream);
  color: var(--brand-charcoal);
}
.nav-icon {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 0.45rem;
  background: #fffdf9;
  color: var(--brand-copper-dark);
  box-shadow: inset 0 0 0 1px #ead9ca;
}
.nav-icon svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}
.nav-group-title {
  white-space: nowrap;
}
.nav-submenu {
  display: none;
  gap: 0.15rem;
  padding-left: 2.75rem;
  padding-top: 0.35rem;
}
.app-sidebar.is-expanded .nav-group.is-open > .nav-submenu {
  display: grid;
}
.nav-link {
  display: block;
  border-radius: 0.375rem;
  padding: 0.5rem 0.65rem;
  color: #4a403b;
  font-weight: 700;
}
.nav-link:hover {
  background: #fff7ed;
  color: var(--brand-copper-dark);
}
.nav-link.active {
  background: #fff3e8;
  color: var(--brand-copper-dark);
  box-shadow: inset 3px 0 0 var(--brand-copper);
}
.app-sidebar.is-collapsed .nav-group-trigger {
  justify-content: center;
  padding: 0.72rem 0.55rem;
}
.app-sidebar.is-collapsed .nav-group-title,
.app-sidebar.is-collapsed .sidebar-user,
.app-sidebar.is-collapsed form[action$="logout"] {
  display: none;
}
.app-sidebar.is-collapsed.is-expanded .nav-group-trigger {
  justify-content: flex-start;
  padding: 0.78rem 0.8rem;
}
.app-sidebar.is-collapsed.is-expanded .nav-group-title,
.app-sidebar.is-collapsed.is-expanded .sidebar-user,
.app-sidebar.is-collapsed.is-expanded form[action$="logout"] {
  display: block;
}
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid #d6d3d1;
  padding: 0.35rem 0.75rem;
  background: white;
  color: #292524;
  font-weight: 750;
}
.chip.active,
.chip[aria-current="page"] {
  border-color: var(--brand-copper-dark);
  background: #fff3e8;
  color: var(--brand-copper-dark);
}
.page-kicker {
  color: var(--brand-copper-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.page-title {
  margin-top: 0.1rem;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: 0;
}
.page-subtitle {
  margin-top: 0.35rem;
  color: #57534e;
  font-size: 0.95rem;
}
.panel {
  border: 1px solid #e7e5e4;
  border-radius: 0.5rem;
  background: white;
  padding: 1rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}
.panel-title {
  font-size: 1.05rem;
  font-weight: 700;
}
.panel-muted {
  border-color: #d6d3d1;
  background: #fafaf9;
}
.stat {
  border: 1px solid #e7e5e4;
  border-radius: 0.5rem;
  background: white;
  padding: 1rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.035);
}
.stat span {
  display: block;
  color: #78716c;
  font-size: 0.875rem;
}
.stat strong {
  display: block;
  margin-top: 0.35rem;
  font-size: 1.45rem;
}
.stat small {
  display: block;
  margin-top: 0.4rem;
  color: #78716c;
  font-size: 0.78rem;
}
.row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid #e7e5e4;
  padding: 0.65rem 0;
}
.row:last-child {
  border-bottom: 0;
}
.empty {
  color: #78716c;
  font-size: 0.925rem;
}
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  background: #f5f5f4;
  color: #57534e;
  font-size: 0.75rem;
  font-weight: 800;
}
.badge-good {
  background: var(--brand-success-bg);
  color: var(--brand-success-text);
}
.badge-warn {
  background: #fef3c7;
  color: #92400e;
}
.badge-danger {
  background: #fee2e2;
  color: #991b1b;
}
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  padding: 0.6rem 0.9rem;
  font-weight: 700;
  font-size: 0.9rem;
}
.btn-primary {
  background: var(--brand-copper-dark);
  color: white;
}
.btn-primary:hover {
  background: #6f3c26;
}
.btn-secondary {
  border: 1px solid #d6d3d1;
  background: white;
  color: #292524;
}
.btn-secondary:hover {
  background: #f5f5f4;
}
.flag,
.note {
  border-radius: 999px;
  padding: 0.25rem 0.5rem;
  font-weight: 700;
}
.flag {
  background: #fef3c7;
  color: #92400e;
}
.note {
  background: #f5f5f4;
  color: #57534e;
}
.form-grid p,
.form-grid label {
  display: grid;
  gap: 0.35rem;
}
form input,
form select,
form textarea {
  width: 100%;
  border: 1px solid #d6d3d1;
  border-radius: 0.375rem;
  padding: 0.55rem 0.7rem;
  background: white;
}
form input[type="checkbox"] {
  width: auto;
}
.form-grid {
  display: grid;
  gap: 0.8rem;
}
.user-create-grid {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  align-items: end;
}
.user-create-grid p,
.compact-field {
  display: grid;
  gap: 0.35rem;
  color: #57534e;
  font-size: 0.78rem;
  font-weight: 750;
}
.permission-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border: 1px solid #e7e5e4;
  border-radius: 0.5rem;
  background: #fff;
  padding: 0.85rem;
}
.flash-message {
  border: 1px solid #ead9ca;
  border-radius: 0.5rem;
  background: #fff7ed;
  color: var(--brand-copper-dark);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}
.flash-message.success {
  border-color: #b7d7c0;
  background: #edf8f0;
  color: #1f5b32;
}
.flash-message.info,
.flash-message.debug {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1e3a8a;
}
.flash-message.warning {
  border-color: #f3d38a;
  background: #fffbeb;
  color: #7c2d12;
}
.flash-message.error {
  border-color: #fecaca;
  background: #fff1f2;
  color: #991b1b;
}
.detail-link,
.login-kicker {
  color: var(--brand-copper-dark);
  font-weight: 800;
}
.detail-link {
  font-size: 0.9rem;
}
.login-kicker {
  font-size: 0.78rem;
  text-transform: uppercase;
}
/* POS checkout styling lives in static/operations/pos.css, which pos.html loads
   after this file. `.pos-filter` remains only as a JS hook in pos-ui.js and is
   styled there as `.pos-chip`. */
.optional-label {
  color: #a8a29e;
  font-size: 0.75rem;
  font-weight: 700;
}
.form-errors {
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
  background: #fff1f2;
  color: #991b1b;
  padding: 0.75rem;
  font-size: 0.86rem;
}
/* Django renders field validation errors as a bare <ul class="errorlist">
   with no styling of its own -- a rejected save (e.g. a commission rate out
   of range) looked identical to a successful one because the error was
   easy to miss. */
form ul.errorlist {
  list-style: none;
  margin: 0 0 0.35rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
  background: #fff1f2;
  color: #991b1b;
  font-size: 0.82rem;
  font-weight: 650;
}
.segment-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  overflow-x: visible;
  padding-bottom: 0.1rem;
}
.segment-bar a {
  flex: 0 0 auto;
  border: 1px solid #d6d3d1;
  border-radius: 999px;
  background: #fff;
  color: #57534e;
  padding: 0.45rem 0.8rem;
  font-size: 0.86rem;
  font-weight: 800;
}
.segment-bar a.active,
.segment-bar a:hover {
  border-color: var(--brand-copper-dark);
  background: #fff3e8;
  color: var(--brand-copper-dark);
}
.action-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.action-flow span {
  border: 1px solid #d6d3d1;
  border-radius: 999px;
  background: #fafaf9;
  color: #57534e;
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 800;
}
.toggle-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: start;
  gap: 0.7rem;
  border: 1px solid #e7e5e4;
  border-radius: 0.5rem;
  background: #fff;
  padding: 0.85rem;
}
.toggle-row input {
  position: absolute;
  opacity: 0;
}
.toggle-ui {
  position: relative;
  display: inline-flex;
  width: 2.7rem;
  height: 1.5rem;
  border-radius: 999px;
  background: #d6d3d1;
  transition: background 160ms ease;
}
.toggle-ui::after {
  content: "";
  position: absolute;
  top: 0.18rem;
  left: 0.18rem;
  width: 1.14rem;
  height: 1.14rem;
  border-radius: 999px;
  background: white;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.22);
  transition: transform 160ms ease;
}
.toggle-row input:checked + .toggle-ui {
  background: var(--brand-copper-dark);
}
.toggle-row input:checked + .toggle-ui::after {
  transform: translateX(1.2rem);
}
.toggle-row input:focus-visible + .toggle-ui {
  outline: 3px solid #1d4ed8;
  outline-offset: 3px;
}
.stock-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid #e7e5e4;
  border-radius: 0.5rem;
  background: #fff;
  padding: 0.85rem;
}
.stock-card.low {
  border-color: #f3d38a;
  background: #fffbeb;
}
.stock-card.negative {
  border-color: #fecaca;
  background: #fff1f2;
}
.stock-card > div > span,
.inventory-line > div > span,
.inventory-summary small {
  display: block;
  color: #78716c;
  font-size: 0.78rem;
}
.inventory-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.inventory-line {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid #e7e5e4;
  padding: 0.72rem 0;
}
.inventory-line:first-child {
  border-top: 0;
}
.inventory-line-metrics {
  display: grid;
  grid-template-columns: auto minmax(6rem, auto) minmax(6rem, auto);
  align-items: center;
  gap: 0.75rem;
  text-align: right;
}
.component-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.component-preview span {
  border-radius: 999px;
  background: #f5f5f4;
  color: #57534e;
  padding: 0.28rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 750;
}
.striped-table tbody tr:nth-child(odd),
.inventory-line:nth-child(odd),
.metric-line:nth-child(odd) {
  background: #fffdf9;
}
.striped-table tbody tr:nth-child(even),
.inventory-line:nth-child(even),
.metric-line:nth-child(even) {
  background: #f7f3ed;
}
.striped-table td,
.striped-table th {
  border-bottom-color: #eadfd5;
}
.stat-accent {
  border-left: 4px solid var(--brand-copper);
}
.stat-accent.alt {
  border-left-color: var(--brand-navy);
}
.stat-accent.warm {
  border-left-color: #d7a043;
}
.seller-panel {
  border-top: 4px solid var(--brand-copper);
}
.seller-panel.week {
  border-top-color: var(--brand-navy);
}
.seller-panel.month {
  border-top-color: #d7a043;
}
.seller-list {
  display: grid;
  gap: 0.65rem;
}
.seller-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid #eadfd5;
  border-radius: 0.5rem;
  background: #fffdf9;
  padding: 0.75rem;
}
.seller-card:nth-child(even) {
  background: #f8f4ee;
}
.seller-card small,
.attendance-card p {
  display: block;
  color: #78716c;
  font-size: 0.78rem;
}
.seller-rank {
  display: inline-grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: 999px;
  background: #fff3e8;
  color: var(--brand-copper-dark);
  font-weight: 900;
}
.attendance-card {
  overflow: hidden;
  border: 1px solid #eadfd5;
  border-radius: 0.5rem;
  background: white;
}
.attendance-card:nth-child(even) {
  background: #fbf7f1;
}
.attendance-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.attendance-card h2 {
  font-weight: 800;
}
.custom-time-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  margin-top: 0.4rem;
}
.custom-time-row input {
  padding: 0.45rem;
  font-size: 0.85rem;
}
/* Phase 14 roster grid. The chip UI is gated behind .is-enhanced, which only
   roster-grid.js adds: with JavaScript off the chips and the bulk buttons stay
   display:none and the original selects (.roster-cell-fallback) are the page.
   Nothing here uses [hidden] on a wrapper around a form control, because a
   hidden control still submits and the payload must not change either way. */
.roster-stepper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--brand-line);
  border-radius: 0.5rem;
  background: white;
  padding: 0.6rem 0.75rem;
}
.roster-stepper select {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
}
.roster-step {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--brand-line);
  border-radius: 0.5rem;
  background: white;
  color: var(--brand-copper-dark);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}
.roster-step:hover {
  background: #fff3e8;
}
.roster-grid {
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.9fr) repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}
.roster-head-row,
.roster-row {
  display: contents;
}
.roster-head {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.45rem;
  background: #001b67;
  color: white;
  padding: 0.45rem;
  text-align: center;
  font-weight: 800;
}
.roster-head-day {
  background: color-mix(in srgb, var(--day-color, #001b67) 55%, #001b67);
}
.roster-head-daytext {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.roster-head-day small {
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.9;
}
.roster-staff {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  border-radius: 0.45rem;
  background: #eaf2fe;
  color: #001b67;
  padding: 0.5rem 0.6rem;
  font-weight: 800;
}
.roster-staff-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.roster-bulk {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 0;
  border-radius: 0.4rem;
  background: rgb(255 255 255 / 0.55);
  color: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
}
.roster-head .roster-bulk {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  background: rgb(255 255 255 / 0.28);
  color: white;
}
.roster-bulk:hover {
  background: white;
  color: var(--brand-copper-dark);
}
.roster-grid.is-enhanced .roster-bulk {
  display: inline-flex;
}
.roster-cell {
  display: grid;
  border-radius: 0.45rem;
  background: var(--day-soft, #f7fbff);
  padding: 0.3rem;
}
.roster-cell-day {
  display: none;
}
.roster-cell-fallback {
  display: grid;
  align-content: center;
  gap: 0.3rem;
}
.roster-cell-fallback select {
  font-weight: 800;
  text-align: center;
}
.roster-grid.is-enhanced .roster-cell-fallback {
  display: none;
}
.shift-chip {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  width: 100%;
  min-height: 3.1rem;
  border: 1px solid rgb(0 27 103 / 0.12);
  border-radius: 0.4rem;
  background: var(--chip-color, #eef2f7);
  color: #111;
  padding: 0.35rem 0.3rem;
  text-align: center;
}
.roster-grid.is-enhanced .shift-chip {
  display: flex;
}
.shift-chip:hover {
  border-color: var(--brand-copper-dark);
}
.shift-chip-label {
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.1;
}
.shift-chip-time {
  max-width: 100%;
  overflow: hidden;
  color: #44403c;
  font-size: 0.66rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shift-chip.is-off .shift-chip-label {
  color: #e00012;
}
.roster-cell.is-dirty {
  outline: 2px solid var(--brand-copper-dark);
  outline-offset: -1px;
}
.roster-actionbar {
  display: flex;
  position: sticky;
  bottom: 0;
  z-index: 15;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--brand-line);
  border-radius: 0.5rem;
  background: rgb(255 253 249 / 0.96);
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  backdrop-filter: blur(8px);
}
.roster-actionbar-text {
  display: grid;
  gap: 0.1rem;
}
.roster-actionbar-text strong {
  font-weight: 800;
}
.roster-dirty {
  color: #78716c;
  font-size: 0.82rem;
}
.roster-actionbar.is-dirty .roster-dirty {
  color: var(--brand-copper-dark);
  font-weight: 800;
}
.roster-actionbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.roster-legend {
  border: 1px solid var(--brand-line);
  border-radius: 0.5rem;
  background: white;
  padding: 0.9rem;
}
.roster-legend-title {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #78716c;
}
.roster-legend-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.roster-legend-chip {
  display: inline-flex;
  flex-direction: column;
  border: 1px solid rgb(0 27 103 / 0.12);
  border-radius: 0.4rem;
  background: var(--chip-color, #eef2f7);
  padding: 0.35rem 0.7rem;
  text-align: center;
}
.roster-legend-chip strong {
  font-size: 0.9rem;
  font-weight: 900;
}
.roster-legend-chip small {
  color: #44403c;
  font-size: 0.7rem;
  font-weight: 600;
}
.shift-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.shift-preset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  border: 1px solid rgb(0 27 103 / 0.12);
  border-radius: 0.5rem;
  background: var(--chip-color, #eef2f7);
  padding: 0.6rem 0.4rem;
  text-align: center;
}
.shift-preset strong {
  font-size: 1rem;
  font-weight: 900;
}
.shift-preset small {
  color: #44403c;
  font-size: 0.72rem;
  font-weight: 600;
}
.shift-preset[aria-pressed="true"] {
  outline: 2px solid var(--brand-copper-dark);
  outline-offset: 1px;
}
.shift-drawer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
@media (max-width: 900px) {
  /* Stacked cards, never a horizontal scroller -- this page is used on a
     phone and a 8-column grid cannot be read there. */
  .roster-grid {
    display: block;
  }
  .roster-head-row {
    display: none;
  }
  .roster-row {
    display: block;
    border: 1px solid #dbe7f4;
    border-radius: 0.6rem;
    background: white;
    margin-bottom: 0.75rem;
    padding: 0.6rem;
  }
  .roster-staff {
    margin-bottom: 0.5rem;
  }
  .roster-cell {
    grid-template-columns: 6.5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.6rem;
    background: transparent;
    padding: 0.2rem 0;
  }
  .roster-cell + .roster-cell {
    border-top: 1px solid #f1f5f9;
  }
  .roster-cell-day {
    display: block;
    color: #57534e;
    font-size: 0.8rem;
    font-weight: 700;
  }
  .shift-chip {
    min-height: 2.6rem;
  }
  .roster-actionbar {
    align-items: stretch;
    flex-direction: column;
  }
  .roster-actionbar-actions .btn-primary,
  .roster-actionbar-actions .btn-secondary {
    flex: 1 1 7rem;
  }
}
.btn-secondary.is-selected {
  border-color: var(--brand-copper-dark);
  background: #fff3e8;
  color: var(--brand-copper-dark);
}
.app-sidebar form[action$="logout"] button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.filter-bar {
  display: grid;
  gap: 0.75rem;
  border: 1px solid #e7e5e4;
  border-radius: 0.5rem;
  background: white;
  padding: 0.9rem;
}
.filter-bar label {
  display: grid;
  gap: 0.25rem;
  color: #57534e;
  font-size: 0.78rem;
  font-weight: 750;
}
.filter-bar input,
.filter-bar select {
  min-height: 2.45rem;
}
.mini-list {
  display: grid;
  gap: 0.7rem;
}
.record-card {
  border: 1px solid #e7e5e4;
  border-radius: 0.5rem;
  background: white;
  padding: 0.9rem;
}
.record-card:hover {
  border-color: #d6d3d1;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.05);
}
.metric-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid #e7e5e4;
  padding: 0.65rem 0;
}
.metric-line:last-child {
  border-bottom: 0;
}
.soft-band {
  border: 1px solid #d6d3d1;
  border-radius: 0.5rem;
  background: #f7f5ef;
  padding: 1rem;
}
.bar-list {
  display: grid;
  gap: 0.75rem;
}
.bar-row {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(12rem, 2fr) minmax(7.5rem, auto);
  align-items: center;
  gap: 0.85rem;
}
.bar-row.compact {
  grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1.4fr) minmax(6.5rem, auto);
}
.bar-label {
  min-width: 0;
}
.bar-label strong,
.bar-label small {
  display: block;
}
.bar-label strong {
  overflow-wrap: anywhere;
}
.bar-label small {
  color: #78716c;
  font-size: 0.75rem;
}
.bar-track {
  display: block;
  height: 0.72rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e7e5e4;
}
.bar-track span {
  display: block;
  min-width: 0.35rem;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-copper-dark);
}
.bar-value {
  justify-self: end;
  color: #292524;
  font-size: 0.86rem;
  font-weight: 800;
  text-align: right;
}
.dashboard-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.activity-chart-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--brand-line);
  border-radius: 0.75rem;
  background: var(--brand-paper);
}
.activity-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--brand-line);
  padding: 0.9rem 1rem;
}
.activity-chart-head h3 {
  color: #292524;
}
.activity-chart-head p {
  margin-top: 0.15rem;
  color: #78716c;
  font-size: 0.75rem;
}
.activity-segments {
  display: flex;
  height: 0.6rem;
  gap: 0.16rem;
  margin: 3rem 1rem 1.25rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--brand-cream);
}
.activity-segments > span {
  min-width: 0.25rem;
  border-radius: 999px;
}
.activity-list {
  display: grid;
  gap: 0.85rem;
  max-height: 26rem;
  overflow-y: auto;
  padding: 0 1rem 1rem;
}
.activity-list-ranked {
  padding-top: 0.9rem;
}
.activity-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(7rem, 1.6fr) minmax(3.5rem, auto);
  align-items: center;
  gap: 0.75rem;
}
.activity-row-ranked {
  grid-template-columns: 1.8rem minmax(10rem, 1fr) minmax(3.5rem, auto);
}
.activity-name,
.activity-product > span:first-child {
  min-width: 0;
}
.activity-name {
  display: grid;
  grid-template-columns: 0.55rem minmax(0, 1fr);
  align-items: center;
  column-gap: 0.45rem;
}
.activity-name strong,
.activity-product strong {
  min-width: 0;
  overflow: hidden;
  color: #44403c;
  font-size: 0.79rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-name small {
  grid-column: 2;
}
.activity-name small,
.activity-product small,
.activity-value small {
  display: block;
  color: #a8a29e;
  font-size: 0.68rem;
}
.activity-dot {
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
}
.activity-track {
  display: block;
  height: 0.38rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--brand-line);
}
.activity-track > span {
  display: block;
  min-width: 0.3rem;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-copper), var(--brand-copper-dark));
}
.activity-product {
  display: grid;
  gap: 0.35rem;
}
.activity-product > span:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.activity-rank {
  display: inline-grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-cream);
  color: var(--brand-copper-dark);
  font-size: 0.72rem;
  font-weight: 900;
}
.activity-rank.is-top {
  background: var(--brand-copper-dark);
  color: #fff;
}
.activity-value {
  color: #292524;
  font-size: 0.75rem;
  text-align: right;
}
.activity-value strong {
  display: block;
}
.activity-empty {
  margin: 1rem;
}
.chart-tone-1 { background: #315f4c; }
.chart-tone-2 { background: #c97945; }
.chart-tone-3 { background: #9aa0a6; }
.chart-tone-4 { background: #5f876f; }
.chart-tone-5 { background: #92512f; }
.chart-tone-6 { background: #c4c7ca; }
.activity-track > .chart-tone-1 { background: #315f4c; }
.activity-track > .chart-tone-2 { background: #c97945; }
.activity-track > .chart-tone-3 { background: #9aa0a6; }
.activity-track > .chart-tone-4 { background: #5f876f; }
.activity-track > .chart-tone-5 { background: #92512f; }
.activity-track > .chart-tone-6 { background: #c4c7ca; }
.low-stock-tone-green { background: #315f4c !important; }
.low-stock-tone-orange { background: #c97945 !important; }
.low-stock-tone-silver { background: #9aa0a6 !important; }
.low-stock-category-chart .bar-row {
  border-radius: 0.55rem;
  color: var(--brand-charcoal);
  padding: 0.45rem 0.55rem;
  text-decoration: none;
}
.low-stock-category-chart .bar-row:hover {
  background: var(--brand-cream);
}
details > summary {
  cursor: pointer;
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
.table-wrap {
  overflow-x: auto;
}
.suppliers-layout,
.supplier-table-panel {
  min-width: 0;
}
.supplier-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.supplier-table-wrap .striped-table {
  min-width: 44rem;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
th,
td {
  border-bottom: 1px solid #e7e5e4;
  padding: 0.7rem;
  text-align: left;
}
th {
  color: #78716c;
  font-weight: 700;
}
tbody tr:hover {
  background: #fafaf9;
}
.weekly-roster {
  margin-bottom: 1.5rem;
  overflow-x: auto;
  border: 1px solid #b9d2ea;
  border-radius: 0.75rem;
  background: #fbfdff;
  padding: 0.6rem;
  box-shadow: 0 6px 18px rgb(0 27 103 / 0.08);
}
.weekly-roster-title {
  border-radius: 0.55rem;
  background: #001b67;
  color: white;
  padding: 0.8rem 1rem;
  text-align: center;
  font-size: clamp(1.3rem, 3vw, 2.4rem);
  font-weight: 900;
  letter-spacing: 0;
}
.weekly-roster-grid {
  display: grid;
  grid-template-columns: minmax(130px, 0.9fr) repeat(7, minmax(105px, 1fr));
  margin-top: 0.45rem;
  overflow: hidden;
  border: 1px solid #d8e4f2;
  border-radius: 0.55rem;
}
.roster-head,
.staff-cell,
.shift-cell {
  min-height: 4.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  padding: 0.45rem;
  text-align: center;
  font-weight: 900;
}
.staff-head {
  background: #001b67;
  color: white;
  font-size: 1.25rem;
}
.day-head {
  flex-direction: column;
  background: #001b67;
  background: color-mix(in srgb, var(--day-color, #001b67) 55%, #001b67);
  color: white;
  font-size: 1.2rem;
  text-shadow: 0 1px 1px rgb(0 0 0 / 0.28);
}
.day-head small {
  font-size: 0.72rem;
  opacity: 1;
}
.staff-cell {
  background: #eaf2fe;
  color: #001b67;
  font-size: 1.05rem;
}
.shift-cell {
  background: #f8fbff;
  color: #111;
  font-size: 1.05rem;
}
.shift-cell.off {
  background: #fff0f3;
  color: #e00012;
}
.off-days-panel,
.shift-key-panel {
  display: grid;
  grid-template-columns: repeat(7, minmax(105px, 1fr));
  gap: 0;
  margin-top: 0.8rem;
  overflow: hidden;
  border: 1px solid #b9d2ea;
  border-radius: 0.65rem;
  background: white;
}
.off-title,
.shift-key-title {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #001b67;
  color: white;
  padding: 0.7rem;
  font-weight: 900;
}
.off-title {
  grid-column: 1 / -1;
  justify-content: flex-start;
}
.off-day {
  min-height: 4.8rem;
  display: grid;
  align-content: center;
  gap: 0.25rem;
  border-right: 1px solid #b9d2ea;
  padding: 0.55rem;
  text-align: center;
  font-weight: 800;
}
.shift-key-panel {
  grid-template-columns: 180px repeat(5, minmax(120px, 1fr));
}
.shift-key-title {
  grid-row: 1;
}
.shift-key-item {
  display: grid;
  align-content: center;
  min-height: 5rem;
  margin: 0.5rem;
  border-radius: 0.55rem;
  background: var(--key-color);
  text-align: center;
}
.shift-key-item strong {
  font-size: 1.1rem;
}
.shift-key-item span {
  font-size: 0.82rem;
  font-weight: 800;
}
.off-key {
  --key-color: #ffe0e9;
  color: #e00012;
}
.app-shell {
  background: transparent;
}
.app-content {
  width: 100%;
}
.page-head,
.panel-head,
.page-actions,
.quick-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.page-head {
  flex-wrap: wrap;
}
.page-actions,
.quick-action-row {
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Page-head content pattern (Phase 1 UI foundations). Sits inside the
   existing .page-head flex row above: a title + one-sentence subtitle on
   the left (.page-head-text), actions on the right (.page-head-actions).
   Keep it calm -- at most one .btn-primary among the actions. */
.page-head-text {
  min-width: 0;
}
.page-head-text .page-subtitle {
  max-width: 40rem;
}
.page-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  justify-content: flex-end;
}
@media (max-width: 900px) {
  .page-head-actions {
    width: 100%;
  }
  .page-head-actions .btn-primary,
  .page-head-actions .btn-secondary {
    width: 100%;
  }
}

/* Shared drawer (Phase 1 UI foundations, static/operations/ops-drawer.js).
   Native <dialog>-based sheet: right side on desktop, bottom on mobile.
   The script only opens/closes it and does small DOM conveniences (title
   swap, field prefill, reset) -- forms inside stay plain POST + redirect,
   never AJAX. See the <noscript> reveal rules near the bottom of this file
   for the no-JS fallback (data-drawer-noscript="reveal"). */
dialog.ops-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  height: 100%;
  height: 100dvh;
  width: min(28rem, 92vw);
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--brand-line);
  box-shadow: -12px 0 32px rgb(0 0 0 / 0.18);
  background: white;
  color: #292524;
  display: flex;
  flex-direction: column;
  padding: 0;
  transform: translateX(0);
  transition: transform 0.22s ease, opacity 0.22s ease;
}
dialog.ops-drawer:not([open]) {
  display: none;
}
dialog.ops-drawer::backdrop {
  background: rgb(0 0 0 / 0.42);
}
@starting-style {
  dialog.ops-drawer[open] {
    transform: translateX(100%);
    opacity: 0;
  }
}
.ops-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--brand-line);
  padding: 1rem 1.1rem;
}
.ops-drawer-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--brand-charcoal);
}
.ops-drawer-close {
  border: 0;
  background: transparent;
  color: #78716c;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.25rem 0.4rem;
}
.ops-drawer-close:hover {
  color: var(--brand-copper-dark);
}
.ops-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem;
}
@media (max-width: 900px) {
  dialog.ops-drawer {
    inset: auto 0 0 0;
    top: auto;
    width: 100%;
    height: auto;
    max-height: 85vh;
    border-left: 0;
    border-top: 1px solid var(--brand-line);
    border-radius: 0.75rem 0.75rem 0 0;
    box-shadow: 0 -12px 32px rgb(0 0 0 / 0.18);
    transform: translateY(0);
  }
  @starting-style {
    dialog.ops-drawer[open] {
      transform: translateY(100%);
      opacity: 0;
    }
  }
}

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.75rem;
}
.kpi-tile {
  min-width: 0;
  border: 1px solid #e7e5e4;
  border-radius: 0.5rem;
  background: white;
  padding: 1rem;
}
.kpi-tile span,
.kpi-tile small {
  display: block;
  color: #78716c;
}
.kpi-tile span {
  font-size: 0.82rem;
  font-weight: 800;
}
.kpi-tile strong {
  display: block;
  margin-top: 0.35rem;
  color: #292524;
  font-size: 1.45rem;
  line-height: 1.15;
}
.kpi-tile small {
  margin-top: 0.4rem;
  font-size: 0.76rem;
}
.stat-quiet {
  box-shadow: none;
}
.view-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.view-switch a {
  display: inline-flex;
  min-height: 2.4rem;
  align-items: center;
  justify-content: center;
  border: 1px solid #d6d3d1;
  border-radius: 999px;
  background: white;
  color: #57534e;
  padding: 0.45rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 800;
}
.view-switch a.active,
.view-switch a:hover {
  border-color: var(--brand-copper-dark);
  background: #fff3e8;
  color: var(--brand-copper-dark);
}
.filter-bar-inner {
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.filter-disclosure > summary,
.disclosure-panel > summary,
.form-drawer > summary,
.access-control-block > summary,
.recipe-detail > summary,
.setup-form > summary {
  min-height: 2.4rem;
}
.metric-stack {
  display: grid;
  gap: 0.2rem;
}
.action-queue {
  display: grid;
  gap: 0.75rem;
}
.action-row {
  border: 1px solid #e7e5e4;
  border-radius: 0.5rem;
  background: #fff;
  padding: 0.9rem;
}
.action-row strong,
.action-row small {
  display: block;
}
.action-row small {
  margin-top: 0.2rem;
  color: #78716c;
  font-size: 0.86rem;
}
.product-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0.8rem;
}
.product-tile {
  min-height: 9rem;
}
.recipe-detail {
  border-top: 1px solid #e7e5e4;
  padding-top: 0.7rem;
}
.setup-form {
  background: #fff;
}
.setup-form[open] {
  border-color: #d6d3d1;
}
.user-summary {
  display: flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.user-summary-main strong,
.user-summary-main small {
  display: block;
}
.user-summary-main small {
  color: #78716c;
  font-size: 0.84rem;
}
.user-summary-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}
.access-control-block {
  border: 1px solid #e7e5e4;
  border-radius: 0.5rem;
  padding: 0.85rem;
}
.ui-serenity {
  background: #fbfaf7;
}
.ui-serenity .panel,
.ui-serenity .stat,
.ui-serenity .kpi-tile,
.ui-serenity .record-card,
.ui-serenity .permission-check,
.ui-serenity .toggle-row {
  box-shadow: none;
}
.ui-serenity .panel,
.ui-serenity .stat,
.ui-serenity .kpi-tile {
  border-color: #ebe4dc;
}
.ui-serenity .stat-quiet,
.ui-serenity .kpi-tile {
  background: #fffdf9;
}
.ui-serenity .metric-line:nth-child(odd),
.ui-serenity .metric-line:nth-child(even),
.ui-serenity .inventory-line:nth-child(odd),
.ui-serenity .inventory-line:nth-child(even),
.ui-serenity .striped-table tbody tr:nth-child(odd),
.ui-serenity .striped-table tbody tr:nth-child(even) {
  background: transparent;
}
.ui-serenity .page-title {
  color: var(--brand-charcoal);
}
.ui-serenity .page-subtitle {
  max-width: 44rem;
}
.ui-serenity .disclosure-panel,
.ui-serenity .filter-disclosure,
.ui-serenity .form-drawer {
  background: #fffdf9;
}
.ui-serenity .soft-band {
  border-color: #ebe4dc;
  background: #fbfaf7;
}

@media (max-width: 900px) {
  .dashboard-chart-grid {
    grid-template-columns: 1fr;
  }
  .page-head,
  .panel-head,
  .page-actions,
  .quick-action-row,
  .user-summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .page-actions,
  .quick-action-row {
    width: 100%;
  }
  .page-actions .btn-primary,
  .page-actions .btn-secondary,
  .quick-action-row .btn-secondary {
    width: 100%;
  }
  .kpi-strip {
    grid-template-columns: 1fr;
  }
  .product-tile-grid {
    grid-template-columns: 1fr;
  }
  .user-summary-meta {
    justify-content: flex-start;
  }
  .inventory-line {
    grid-template-columns: 1fr;
  }
  .inventory-line-metrics {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .bar-row,
  .bar-row.compact {
    grid-template-columns: 1fr;
  }
  .bar-value {
    justify-self: start;
    text-align: left;
  }
}

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

/* Weekly inventory count: touch-first, quiet, and deliberately separate from setup. */
.inventory-nav {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
}
.inventory-nav a {
  flex: 0 0 auto;
  min-height: 2.6rem;
  display: inline-flex;
  align-items: center;
  border: 1px solid #d6d3d1;
  border-radius: 999px;
  background: #fff;
  color: #57534e;
  padding: 0.5rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 800;
}
.inventory-nav a.active,
.inventory-nav a:hover {
  border-color: var(--brand-copper-dark);
  background: #fff3e8;
  color: var(--brand-copper-dark);
}
.count-start {
  display: flex;
  align-items: end;
  gap: 0.6rem;
}
.count-start label {
  display: grid;
  gap: 0.25rem;
  color: #57534e;
  font-size: 0.78rem;
  font-weight: 800;
}
.count-start input {
  min-height: 2.7rem;
}
.count-session-list,
.count-row-list,
.count-groups,
.reorder-list {
  display: grid;
  gap: 0.75rem;
}
.count-session-card,
.reorder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid #e7e5e4;
  border-radius: 0.6rem;
  background: #fff;
  padding: 0.9rem;
}
.count-session-card strong,
.count-session-card small,
.reorder-row strong,
.reorder-row small,
.metric-label {
  display: block;
}
.count-session-card small,
.reorder-row small,
.metric-label {
  margin-top: 0.18rem;
  color: #78716c;
  font-size: 0.76rem;
}
.count-status-approved {
  background: #ecfdf5;
  color: #166534;
}
.count-status-open {
  background: #edf8f0;
  color: #315f4c;
}
.count-status-submitted {
  background: #fffbeb;
  color: #92400e;
}
.count-status-cancelled {
  background: #f5f5f4;
  color: #78716c;
}
.count-callout {
  border-color: #f3d38a;
  background: #fffbeb;
}
.count-progress {
  display: grid;
  grid-template-columns: auto minmax(8rem, 1fr) auto;
  align-items: center;
  gap: 1rem;
}
.count-progress strong,
.count-progress span {
  display: block;
}
.count-progress > div:first-child span {
  color: #78716c;
  font-size: 0.76rem;
}
.count-progress-track {
  height: 0.75rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e7e5e4;
}
.count-progress-track span {
  height: 100%;
  border-radius: inherit;
  background: var(--brand-copper-dark);
}
.count-row {
  border: 1px solid #e7e5e4;
  border-radius: 0.65rem;
  background: #fff;
  padding: 0.8rem;
}
.count-entry-form {
  display: grid;
  gap: 0.75rem;
}
.count-entry-toolbar {
  position: sticky;
  top: 0.75rem;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(14rem, 20rem) 1fr auto;
  align-items: end;
  gap: 0.75rem;
  padding: 0.8rem;
  border: 1px solid #e7e5e4;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0.4rem 1.2rem rgba(41, 37, 36, 0.08);
}
.count-filter-label {
  display: grid;
  gap: 0.3rem;
  color: #57534e;
  font-size: 0.78rem;
  font-weight: 800;
}
.count-filter-label input {
  min-height: 2.7rem;
}
.count-entry-help {
  margin: 0;
  color: #78716c;
  font-size: 0.82rem;
}
.count-entry-footer {
  display: flex;
  justify-content: flex-end;
}
.count-entry-form .count-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 16rem);
  align-items: end;
  gap: 0.8rem;
}
.count-row.is-missing {
  border-left: 4px solid #d7a043;
}
.count-row.has-warning {
  border-color: #f3d38a;
  background: #fffbeb;
}
.count-row form {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 16rem) auto;
  align-items: end;
  gap: 0.8rem;
}
.count-field-error {
  grid-column: 2;
  margin: 0;
  color: #b91c1c;
  font-size: 0.82rem;
  font-weight: 700;
}
.count-item strong,
.count-item small {
  display: block;
}
.count-item small {
  margin-top: 0.22rem;
  color: #78716c;
  font-size: 0.78rem;
}
.count-input-label {
  display: grid;
  gap: 0.3rem;
  color: #57534e;
  font-size: 0.78rem;
  font-weight: 800;
}
.count-input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 2px solid #a8a29e;
  border-radius: 0.6rem;
  background: white;
  padding-right: 0.75rem;
}
.count-number-input {
  min-height: 3.5rem;
  border: 0;
  font-size: 1.5rem;
  font-weight: 850;
}
.count-number-input:focus {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}
.count-review-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) repeat(3, minmax(8rem, auto));
  align-items: center;
  gap: 1rem;
}
.count-review-row small {
  display: block;
  color: #78716c;
}
.count-warning {
  grid-column: 1 / -1;
  color: #92400e;
  font-size: 0.82rem;
  font-weight: 800;
}
.count-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
}
.count-actions form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.count-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.reorder-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(8rem, auto) minmax(8rem, auto);
}
/* Reorder setup grid: reuses the count-workbook sticky bar/table shell; the
   two editable columns just need compact spreadsheet-style inputs. */
.reorder-grid .count-workbook-table table {
  min-width: 52rem;
}
.reorder-input-cell {
  min-width: 8.5rem;
}
.reorder-input-cell .count-number-input {
  min-height: 2.6rem;
  max-width: 7.5rem;
  border: 1px solid #a8a29e;
  border-radius: 0.4rem;
  padding: 0.35rem 0.5rem;
  font-size: 1rem;
}
.reorder-input-cell .count-field-error {
  display: block;
  margin-top: 0.3rem;
}
.count-workbook {
  padding: 1rem;
}
.count-workbook-toolbar {
  display: grid;
  grid-template-columns: auto minmax(15rem, 1fr) auto;
  align-items: end;
  gap: 0.6rem 0.75rem;
}
/* The category chips need the toolbar's full width to sit in one neat row
   (the old shared 0.65fr column squeezed all 5 chips into a narrow strip
   next to the search box, forcing an early, cramped wrap). Give the chip
   picker its own full-width row above the search + post-counts row. */
.count-category-control {
  grid-column: 1 / -1;
}
.count-workbook-toolbar label,
.user-picker-row label {
  display: grid;
  gap: 0.3rem;
  color: #57534e;
  font-size: 0.78rem;
  font-weight: 800;
}
.count-workbook-table {
  max-height: 38rem;
  overflow-y: auto;
  border: 1px solid var(--brand-line);
  border-radius: 0.55rem;
  background: white;
}
.count-workbook-table table {
  min-width: 58rem;
}
.count-workbook-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--brand-cream);
  color: var(--brand-charcoal);
}
.count-workbook-table td,
.count-workbook-table th {
  padding: 0.7rem 0.75rem;
  vertical-align: middle;
}
.count-workbook-table tbody tr:nth-child(even) {
  background: #fbfaf7;
}
.count-workbook-table tbody tr:hover {
  background: #fff3e8;
}
.count-workbook-input {
  min-width: 9rem;
}
.count-workbook-input .count-number-input {
  min-height: 2.6rem;
  max-width: 8rem;
  border: 1px solid #a8a29e;
  border-radius: 0.4rem;
  padding: 0.35rem 0.5rem;
  font-size: 1rem;
}
.count-workbook-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.9rem;
  color: #78716c;
  font-size: 0.82rem;
}

/* Phase 15 -- Weekly Count soft redesign. Visual only: the count-workbook
   table's rows/columns and the underlying save/post mechanics are untouched.
   Category chips are a progressive enhancement over the existing <select
   data-count-category>: with JS off the select stays visible and simply
   does nothing extra (same baseline as before this phase), and
   inventory-count.js adds .is-enhanced to swap the two over. */
.count-progress-cell {
  display: grid;
  gap: 0.3rem;
  min-width: 9rem;
}
.count-progress-cell span {
  color: #57534e;
  font-size: 0.78rem;
  font-weight: 700;
}
.count-progress-track-sm {
  height: 0.5rem;
}
.count-progress-compact {
  margin-bottom: 0.75rem;
}
.count-progress-live-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--brand-copper-dark);
  font-size: 0.76rem;
  font-weight: 700;
}
.count-sticky-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: -1rem -1rem 0.9rem;
  padding: 1rem 1rem 0.85rem;
  background: white;
  border-bottom: 1px solid var(--brand-line);
}
.count-category-control {
  display: grid;
  gap: 0.4rem;
}
.count-chip-bar {
  display: none;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.count-workbook.is-enhanced .count-select-fallback {
  display: none;
}
.count-workbook.is-enhanced .count-chip-bar {
  display: flex;
}
.count-chip-bar .chip {
  min-height: 2.5rem;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}
/* Subtle tonal alternation so the chip set reads as one related group rather
   than a flat row of identical pills -- reuses the existing cream/line
   tokens, no new colour family. The active chip overrides both the odd and
   even tone with the shared brand-copper "active" treatment (already used
   by .chip.active elsewhere) so it never reads as "just the even one". */
.count-chip-bar .chip:nth-child(even) {
  background: var(--brand-cream);
  border-color: var(--brand-line);
}
.count-chip-bar .chip.active,
.count-chip-bar .chip[aria-pressed="true"] {
  background: #fff3e8;
  border-color: var(--brand-copper-dark);
  color: var(--brand-copper-dark);
}
.count-chip-counter {
  margin-left: 0.4rem;
  font-weight: 800;
  font-size: 0.78rem;
  opacity: 0.75;
}
.count-group-row td {
  position: sticky;
  top: 2.7rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  background: #f5f5f4;
  color: var(--brand-charcoal);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.count-group-count {
  color: #78716c;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.count-variance-cell {
  display: grid;
  gap: 0.3rem;
  justify-items: start;
}
.variance-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  border-radius: 0.5rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.15;
  background: #f5f5f4;
  color: #57534e;
}
.variance-pill small {
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.85;
}
.variance-pill.is-short {
  background: #fee2e2;
  color: #991b1b;
}
.variance-pill.is-over {
  background: #fef3c7;
  color: #92400e;
}
.variance-pill.is-zero {
  background: var(--brand-success-bg);
  color: var(--brand-success-text);
}
@media (max-width: 900px) {
  .count-sticky-bar {
    margin: -1rem -1rem 0.75rem;
    padding: 0.9rem 1rem 0.75rem;
  }
  .count-chip-bar .chip {
    min-height: 2.75rem;
    font-size: 0.92rem;
  }
  .count-workbook-table {
    max-height: 62vh;
  }
  .count-group-row td {
    top: 3.6rem;
  }
}

.user-picker-row {
  display: grid;
  grid-template-columns: minmax(13rem, 0.8fr) minmax(18rem, 1.2fr) auto;
  align-items: end;
  gap: 0.75rem;
}
.dashboard-activity-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(18rem, 0.82fr) minmax(30rem, 1.35fr);
}
.staff-activity-list {
  display: grid;
  gap: 0.2rem;
}
.staff-activity-row {
  align-items: center;
  border-bottom: 1px solid #e7e5e4;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 2rem minmax(8rem, 1fr) minmax(4.3rem, auto) minmax(4.3rem, auto);
  min-height: 3.35rem;
  padding: 0.45rem 0.1rem;
}
.staff-activity-row:last-child {
  border-bottom: 0;
}
.staff-activity-avatar {
  align-items: center;
  background: #315f4c;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 900;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}
.staff-activity-person,
.staff-activity-metric {
  display: grid;
  line-height: 1.2;
}
.staff-activity-person small,
.staff-activity-metric small {
  color: #78716c;
  font-size: 0.68rem;
  margin-top: 0.18rem;
}
.staff-activity-metric {
  min-width: 4.3rem;
  text-align: right;
}
.staff-activity-metric strong {
  color: #292524;
  font-size: 1rem;
}
.weekly-hour-chart {
  min-height: 15rem;
  overflow-x: auto;
}
.weekly-hour-chart svg {
  display: block;
  min-width: 42rem;
  width: 100%;
}
.weekly-hour-grid line {
  stroke: #dedbd7;
  stroke-dasharray: 4 5;
  stroke-width: 1;
}
.weekly-hour-y-labels text {
  fill: #78716c;
  font-size: 10px;
  text-anchor: end;
}
.weekly-hour-line {
  fill: none;
  stroke: #315f4c;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}
.weekly-hour-point {
  fill: #c97945;
  stroke: #fff;
  stroke-width: 3;
  transition: fill 150ms ease, r 150ms ease;
}
.weekly-hour-point-link:hover .weekly-hour-point,
.weekly-hour-point-link:focus .weekly-hour-point {
  fill: #92512f;
  r: 9px;
}
.weekly-hour-point-link:focus {
  outline: none;
}
.weekly-hour-point-label {
  fill: #315f4c;
  font-size: 10px;
  font-weight: 800;
  text-anchor: middle;
}
.weekly-hour-x-label {
  fill: #57534e;
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
}
.weekly-hour-empty-point {
  fill: #c4c7ca;
}
.daily-sales-summary {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(9rem, 1fr));
}
.daily-sales-summary > div {
  background: #f7f6f4;
  border: 1px solid #e7e5e4;
  border-radius: 0.65rem;
  display: grid;
  gap: 0.15rem;
  padding: 0.8rem 1rem;
}
.daily-sales-summary span {
  color: #78716c;
  font-size: 0.75rem;
}
.daily-sales-summary strong {
  color: #315f4c;
  font-size: 1.15rem;
}

@media (max-width: 700px) {
  .dashboard-activity-grid {
    grid-template-columns: 1fr;
  }
  .activity-segments {
    margin-top: 1.5rem;
  }
  .activity-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .activity-row > .activity-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .activity-row-ranked {
    grid-template-columns: 1.8rem minmax(0, 1fr) auto;
  }
  .activity-row-ranked > .activity-product {
    grid-column: 2;
  }
  .activity-row-ranked > .activity-value {
    grid-column: 3;
  }
  .count-start,
  .count-progress,
  .count-workbook-toolbar,
  .user-picker-row,
  .count-row form,
  .count-entry-form .count-row,
  .count-review-row,
  .reorder-row {
    width: 100%;
    grid-template-columns: 1fr;
  }
  .count-start {
    display: grid;
  }
  .count-workbook-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .count-entry-toolbar {
    position: static;
    grid-template-columns: 1fr;
  }
  .count-start .btn-primary,
  .count-save-button {
    min-height: 3.25rem;
    width: 100%;
  }
  .count-number-input {
    min-height: 4rem;
    font-size: 1.75rem;
  }
  .count-session-card {
    align-items: flex-start;
  }
  .staff-activity-row {
    gap: 0.45rem;
    grid-template-columns: 1.8rem minmax(6.5rem, 1fr) minmax(3.4rem, auto) minmax(3.4rem, auto);
  }
  .staff-activity-avatar {
    height: 1.8rem;
    width: 1.8rem;
  }
  .staff-activity-metric {
    min-width: 3.4rem;
  }
  .daily-sales-summary {
    grid-template-columns: 1fr;
  }
}

/* Reference-style dashboard and reporting visuals ------------------------- */
.ops-dashboard {
  display: grid;
  gap: 1.25rem;
}
.ops-dash-topbar {
  align-items: center;
  border-bottom: 1px solid #e8e3dd;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding-bottom: 1rem;
}
.ops-dash-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: flex-end;
}
.compact-action {
  min-height: 2.25rem;
  padding: 0.45rem 0.85rem;
}
.dashboard-hero-panel,
.visual-panel,
.metric-card {
  background: #fff;
  border: 1px solid #e4dfda;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgb(40 35 33 / 0.04);
}
.dashboard-hero-panel {
  align-items: center;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-height: 5.4rem;
  padding: 1.1rem 1.25rem;
}
.dashboard-hero-panel span,
.shop-status span {
  color: #88817b;
  display: block;
  font-size: 0.82rem;
}
.dashboard-hero-panel h2 {
  color: #2c2927;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 900;
  line-height: 1.1;
  margin-top: 0.2rem;
}
.shop-status {
  color: #5f5852;
  display: grid;
  gap: 0.18rem;
  min-width: 8rem;
}
.shop-status strong {
  align-items: center;
  color: #2f7562;
  display: inline-flex;
  gap: 0.35rem;
  font-size: 0.9rem;
}
.shop-status i {
  background: #2f7562;
  border-radius: 999px;
  display: inline-block;
  height: 0.45rem;
  width: 0.45rem;
}
.hero-link {
  align-items: center;
  border: 1px solid #ddd6cf;
  border-radius: 0.45rem;
  color: #4f3a33;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 850;
  gap: 0.35rem;
  min-height: 2.45rem;
  padding: 0.45rem 0.8rem;
  text-decoration: none;
}
.metric-card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.metric-card {
  align-items: flex-start;
  display: flex;
  gap: 0.85rem;
  min-height: 7.3rem;
  padding: 1rem;
}
.metric-icon {
  align-items: center;
  background: #fff0ea;
  border-radius: 0.45rem;
  color: #92512f;
  display: inline-flex;
  flex: 0 0 2rem;
  font-size: 0.76rem;
  font-weight: 950;
  height: 2rem;
  justify-content: center;
}
.metric-card div {
  display: grid;
  gap: 0.32rem;
  min-width: 0;
}
.metric-card span:not(.metric-icon),
.metric-card small {
  color: #827b75;
  display: block;
  font-size: 0.76rem;
  line-height: 1.35;
}
.metric-card strong {
  color: #292624;
  display: block;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 900;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.dashboard-reference-grid,
.report-visual-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.34fr);
}
.dashboard-main-stack,
.dashboard-side-stack {
  display: grid;
  gap: 1rem;
  min-width: 0;
}
.visual-panel {
  min-width: 0;
  padding: 1rem;
}
.visual-panel-head {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.visual-panel-head h2,
.visual-panel-head h3 {
  color: #302d2b;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.2;
}
.visual-panel-head p {
  color: #8a837d;
  font-size: 0.72rem;
  line-height: 1.35;
  margin-top: 0.18rem;
}
.visual-panel-head a {
  color: #6f5147;
  font-size: 0.72rem;
  font-weight: 850;
  text-decoration: none;
}
.visual-select {
  border: 1px solid #dfd9d3;
  border-radius: 0.4rem;
  color: #5f5852;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.35rem 0.55rem;
}
.dot-menu {
  color: #9b948e;
  letter-spacing: 0.12em;
}
.revenue-trend-panel {
  min-height: 23rem;
}
.line-chart-wrap {
  min-height: 17.4rem;
  overflow-x: auto;
  position: relative;
}
.line-chart {
  display: block;
  min-width: 42rem;
  width: 100%;
}
.line-chart-gridline {
  stroke: #ebe7e2;
  stroke-width: 1;
}
.line-chart-axis-y,
.line-chart-axis-x {
  fill: #918b85;
  font-size: 10px;
}
.line-chart-axis-x {
  text-anchor: middle;
}
.line-chart-area {
  opacity: 1;
}
.line-chart-path {
  fill: none;
  stroke: #2f80ed;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.6;
}
.line-chart-point {
  fill: #fff;
  r: 3px;
  stroke: #2f80ed;
  stroke-width: 2;
  transition: r 0.1s ease;
}
.line-chart-point.is-highlighted {
  fill: #2f80ed;
  r: 4.5px;
  stroke: #fff;
  stroke-width: 2.5;
}
.line-chart-marker {
  stroke: #cbc6c0;
  stroke-dasharray: 4 4;
  stroke-width: 1;
}
.trend-callout {
  background: #fff;
  border: 1px solid #e2ddd8;
  border-radius: 0.45rem;
  box-shadow: 0 12px 28px rgb(40 35 33 / 0.1);
  display: grid;
  gap: 0.12rem;
  padding: 0.65rem 0.75rem;
  pointer-events: none;
  position: absolute;
  right: 1rem;
  top: 0.65rem;
}
/* While tracking the pointer, revenue-trend.js drives left/top instead. */
.trend-callout.is-tracking {
  right: auto;
}
.trend-callout span,
.trend-callout small {
  color: #847d77;
  font-size: 0.66rem;
}
.trend-callout span {
  white-space: nowrap;
}
.trend-callout strong {
  color: #292624;
  font-size: 1rem;
  font-weight: 950;
}
.payment-distribution-layout {
  display: grid;
  gap: 0.9rem;
}
.payment-donut-wrap {
  align-items: center;
  display: grid;
  justify-content: center;
  min-height: 11rem;
  position: relative;
}
.payment-donut {
  display: block;
  height: 10.2rem;
  transform: rotate(-90deg);
  width: 10.2rem;
}
.payment-donut-bg,
.payment-donut-segment {
  fill: none;
  stroke-width: 8;
}
.payment-donut-bg {
  stroke: #efedea;
}
.payment-donut-segment {
  stroke-linecap: butt;
}
.payment-donut-center {
  display: grid;
  inset: 0;
  place-content: center;
  pointer-events: none;
  position: absolute;
  text-align: center;
}
.payment-donut-center strong {
  color: #292624;
  font-size: 0.92rem;
  font-weight: 950;
}
.payment-donut-center span {
  color: #8a837d;
  font-size: 0.64rem;
  margin-top: 0.08rem;
}
.payment-table {
  display: grid;
  gap: 0.08rem;
}
.payment-table-head,
.payment-row {
  align-items: center;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: minmax(6.5rem, 1fr) 3.2rem minmax(5.6rem, auto);
}
.payment-table-head {
  color: #9a938d;
  font-size: 0.66rem;
  padding-bottom: 0.35rem;
}
.payment-row {
  border-top: 1px solid #efebe7;
  min-height: 2.25rem;
  padding: 0.36rem 0;
}
.payment-row span:first-child {
  align-items: center;
  color: #494541;
  display: flex;
  font-size: 0.73rem;
  font-weight: 760;
  gap: 0.38rem;
  min-width: 0;
}
.payment-row span:nth-child(2),
.payment-row strong {
  color: #5f5852;
  font-size: 0.72rem;
  text-align: right;
}
.payment-row strong {
  color: #2f2b29;
  font-weight: 900;
}
.payment-row i {
  border-radius: 0.12rem;
  display: inline-block;
  flex: 0 0 auto;
  height: 0.5rem;
  width: 0.5rem;
}
.performance-gauge-panel {
  min-height: 18rem;
}
.gauge-visual {
  height: 10.8rem;
  margin-top: 0.5rem;
  position: relative;
}
.gauge-arc {
  border: 0.74rem solid transparent;
  border-radius: 999px 999px 0 0;
  border-bottom: 0;
  height: 5.4rem;
  left: 50%;
  position: absolute;
  top: 1rem;
  transform: translateX(-50%);
  width: 10.8rem;
}
.gauge-arc-base {
  border-color: #eeecea;
}
.gauge-arc-main {
  border-color: #6c4b43;
  clip-path: polygon(0 0, 76% 0, 76% 100%, 0 100%);
}
.gauge-arc-secondary {
  border-color: #f2bd3d;
  height: 3.95rem;
  top: 2.35rem;
  width: 7.9rem;
}
.gauge-center {
  display: grid;
  left: 0;
  place-items: center;
  position: absolute;
  right: 0;
  text-align: center;
  top: 5.7rem;
}
.gauge-center strong {
  color: #2f2b29;
  font-size: 1rem;
  font-weight: 950;
}
.gauge-center span {
  color: #5f5852;
  font-size: 0.7rem;
  font-weight: 800;
}
.gauge-legend {
  align-items: center;
  border-top: 1px solid #efebe7;
  color: #5f5852;
  display: flex;
  font-size: 0.72rem;
  justify-content: space-between;
  padding-top: 0.7rem;
}
.gauge-legend span {
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
}
.gauge-legend i {
  background: #2f7562;
  border-radius: 999px;
  display: inline-block;
  height: 0.42rem;
  width: 0.42rem;
}
.top-selling-panel .rank-row {
  min-height: 3.2rem;
}
.compact-ops-section {
  border-top-color: #e4dfda;
}
.report-visual-grid {
  align-items: start;
}
.report-visual-grid .revenue-trend-panel {
  min-height: 21rem;
}
.report-visual-grid .payment-panel {
  min-height: 21rem;
}

@media (max-width: 1100px) {
  .dashboard-reference-grid,
  .report-visual-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-side-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .ops-dash-topbar,
  .dashboard-hero-panel,
  .visual-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .dashboard-hero-panel {
    display: flex;
  }
  .dashboard-side-stack {
    grid-template-columns: 1fr;
  }
  .payment-table-head,
  .payment-row {
    grid-template-columns: minmax(0, 1fr) 2.6rem minmax(5rem, auto);
  }
  .metric-card-grid {
    grid-template-columns: 1fr;
  }
}

/* Open reporting canvas --------------------------------------------------- */
.report-page-head {
  padding-bottom: 0.25rem;
}
.section-kicker {
  color: var(--brand-copper-dark);
  display: block;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}
.text-action {
  align-items: center;
  color: var(--brand-copper-dark);
  display: inline-flex;
  font-size: 0.84rem;
  font-weight: 850;
  gap: 0.3rem;
  text-decoration: none;
}
.text-action:hover {
  color: #6f3d24;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}
.source-chip {
  align-items: center;
  background: transparent;
  border: 1px solid #d9d3cc;
  border-radius: 999px;
  color: #57534e;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 800;
  gap: 0.4rem;
  min-height: 1.85rem;
  padding: 0.25rem 0.65rem;
  white-space: nowrap;
}
.source-chip i {
  background: #a8a29e;
  border-radius: 999px;
  display: block;
  height: 0.42rem;
  width: 0.42rem;
}
.source-chip-good {
  border-color: #bdd1c7;
  color: #315f4c;
}
.source-chip-good i {
  background: #315f4c;
}
.plain-count {
  color: #57534e;
  font-size: 0.75rem;
  font-weight: 850;
  white-space: nowrap;
}

.scoreboard {
  border-bottom: 1px solid var(--brand-line);
  border-top: 1px solid var(--brand-line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.scoreboard-metric {
  min-width: 0;
  padding: 1.1rem 1rem;
}
.scoreboard-metric:first-child {
  padding-left: 0;
}
.scoreboard-metric + .scoreboard-metric {
  border-left: 1px solid var(--brand-line);
}
.scoreboard-metric span,
.scoreboard-metric small {
  color: #78716c;
  display: block;
}
.scoreboard-metric span {
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.scoreboard-metric strong {
  color: var(--brand-charcoal);
  display: block;
  font-size: clamp(1.25rem, 2.2vw, 1.85rem);
  line-height: 1.08;
  margin-top: 0.45rem;
  overflow-wrap: anywhere;
}
.scoreboard-metric small {
  font-size: 0.69rem;
  line-height: 1.35;
  margin-top: 0.42rem;
}
.scoreboard-secondary {
  margin-top: 1.25rem;
}
.scoreboard-report {
  margin-top: 1.1rem;
}
.scoreboard-compact {
  grid-template-columns: repeat(2, minmax(9rem, 14rem));
  margin-top: 1rem;
}

.report-section {
  border-top: 2px solid var(--brand-charcoal);
  scroll-margin-top: 1rem;
}
.report-section-head {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem 0 0.9rem;
}
.report-section-title {
  color: var(--brand-charcoal);
  font-size: 1.25rem;
  font-weight: 850;
  line-height: 1.2;
}
.report-section-head p,
.analysis-pane-head p {
  color: #78716c;
  font-size: 0.78rem;
  margin-top: 0.22rem;
}
.source-note {
  align-items: flex-start;
  border-bottom: 1px solid var(--brand-line);
  color: #57534e;
  display: flex;
  font-size: 0.76rem;
  gap: 0.65rem;
  line-height: 1.55;
  padding: 0.85rem 0;
}
.source-note-icon {
  border: 1px solid #a8a29e;
  border-radius: 999px;
  display: inline-grid;
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 900;
  height: 1.2rem;
  place-items: center;
  width: 1.2rem;
}
.source-note-bottom {
  margin-top: 1rem;
}

.analysis-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.analysis-pane {
  min-width: 0;
  padding: 0 1.25rem 0 0;
}
.analysis-pane + .analysis-pane {
  border-left: 1px solid var(--brand-line);
  padding-left: 1.25rem;
  padding-right: 0;
}
.analysis-pane-head {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.analysis-pane-head h2,
.analysis-pane-head h3 {
  color: var(--brand-charcoal);
  font-size: 1rem;
  font-weight: 850;
}
.report-section .activity-segments {
  height: 0.48rem;
  margin: 0 0 1.25rem;
}

.rank-list {
  display: grid;
}
.rank-row {
  align-items: center;
  border-bottom: 1px solid #eee9e3;
  color: inherit;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(8rem, 1fr) minmax(6rem, 1.25fr) minmax(5.5rem, auto);
  min-height: 3.5rem;
  padding: 0.55rem 0;
  text-decoration: none;
}
.rank-row:last-child {
  border-bottom: 0;
}
a.rank-row:hover .rank-label strong {
  color: var(--brand-copper-dark);
}
.rank-row-product {
  grid-template-columns: 1.7rem minmax(8rem, 1fr) minmax(5rem, 1fr) minmax(6.2rem, auto);
}
.rank-number {
  color: #a8a29e;
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
}
.rank-label {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  min-width: 0;
}
.rank-label strong,
.rank-label small,
.rank-value strong,
.rank-value small {
  display: block;
}
.rank-label strong {
  color: #3f3a37;
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-label small,
.rank-value small {
  color: #8c8580;
  font-size: 0.66rem;
  margin-top: 0.18rem;
}
.rank-track,
.period-bar-track {
  background: #ebe7e2;
  border-radius: 999px;
  display: block;
  height: 0.38rem;
  overflow: hidden;
}
.rank-track > span,
.period-bar-track > i {
  background: linear-gradient(90deg, #315f4c, #5f876f);
  border-radius: inherit;
  display: block;
  height: 100%;
  min-width: 0.2rem;
}
.rank-value {
  color: #292524;
  font-size: 0.74rem;
  text-align: right;
}
.empty-inline {
  padding: 1rem 0;
}

.dashboard-primary-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: minmax(0, 1.8fr) minmax(15rem, 0.8fr);
}
.heatmap-wrap {
  min-width: 0;
  overflow-x: auto;
  padding: 0.75rem 0 0.5rem;
}
.sales-heatmap {
  display: grid;
  gap: 0.25rem;
  grid-template-columns: 4.5rem repeat(7, minmax(2.75rem, 1fr));
  min-width: 36rem;
}
.heatmap-corner,
.heatmap-day,
.heatmap-hour {
  color: #78716c;
  font-size: 0.64rem;
}
.heatmap-corner,
.heatmap-hour {
  align-items: center;
  display: flex;
}
.heatmap-day {
  display: grid;
  padding-bottom: 0.4rem;
  text-align: center;
}
.heatmap-day strong {
  color: #57534e;
  font-size: 0.7rem;
}
.heatmap-day small {
  margin-top: 0.1rem;
}
.heatmap-cell {
  border-radius: 0.25rem;
  display: block;
  height: 1rem;
  outline-offset: 2px;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.heatmap-cell:hover,
.heatmap-cell:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-copper-dark);
  transform: scale(1.08);
}
.heat-0 { background: #f1efec; }
.heat-1 { background: #dce9e2; }
.heat-2 { background: #b8d2c3; }
.heat-3 { background: #7eab91; }
.heat-4 { background: #4d8167; }
.heat-5 { background: #285943; }
.heatmap-legend {
  align-items: center;
  color: #78716c;
  display: flex;
  font-size: 0.64rem;
  gap: 0.28rem;
  justify-content: flex-end;
  margin-top: 0.65rem;
  min-width: 36rem;
}
.heatmap-legend i {
  border-radius: 0.15rem;
  height: 0.65rem;
  width: 0.85rem;
}
.empty-data-visual {
  align-items: center;
  border-bottom: 1px solid var(--brand-line);
  border-top: 1px solid var(--brand-line);
  display: flex;
  gap: 1rem;
  min-height: 8rem;
  padding: 1rem 0;
}
.empty-data-mark {
  color: #c7bdb4;
  font-size: 2.7rem;
  font-weight: 300;
}
.empty-data-visual strong {
  color: #44403c;
  display: block;
  font-size: 0.9rem;
}
.empty-data-visual p {
  color: #78716c;
  font-size: 0.76rem;
  margin-top: 0.3rem;
}

.attention-rail {
  border-left: 1px solid var(--brand-line);
  padding-left: 1.25rem;
}
.attention-head h3 {
  color: var(--brand-charcoal);
  font-size: 1rem;
  font-weight: 850;
}
.attention-list {
  margin-top: 0.6rem;
}
.attention-row {
  align-items: center;
  border-bottom: 1px solid #eee9e3;
  color: inherit;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 0.55rem minmax(0, 1fr) auto;
  min-height: 3.8rem;
  padding: 0.65rem 0;
  text-decoration: none;
}
.attention-row > i {
  background: #9ca3af;
  border-radius: 999px;
  height: 0.5rem;
  width: 0.5rem;
}
.attention-row strong,
.attention-row small {
  display: block;
}
.attention-row strong {
  color: #44403c;
  font-size: 0.76rem;
}
.attention-row small {
  color: #78716c;
  font-size: 0.68rem;
  line-height: 1.4;
  margin-top: 0.15rem;
}
.attention-row b {
  color: #a8a29e;
}
.attention-warning > i { background: #c97945; }
.attention-danger > i { background: #b64040; }
.attention-setup > i { background: #3e6f88; }
.attention-good > i { background: #315f4c; }

.operations-ribbon {
  border-bottom: 1px solid var(--brand-line);
  border-top: 1px solid var(--brand-line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin-top: 1.75rem;
}
.operations-ribbon > div {
  align-items: baseline;
  display: flex;
  gap: 0.65rem;
  justify-content: space-between;
  padding: 0.8rem 1rem;
}
.operations-ribbon > div:first-child { padding-left: 0; }
.operations-ribbon > div + div { border-left: 1px solid var(--brand-line); }
.operations-ribbon span { color: #78716c; font-size: 0.72rem; }
.operations-ribbon strong { color: var(--brand-charcoal); font-size: 1rem; }

.readiness-line {
  align-items: center;
  border-bottom: 1px solid var(--brand-line);
  border-top: 1px solid var(--brand-line);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(10rem, 1fr) minmax(8rem, 1.4fr) auto;
  padding: 1rem 0;
}
.readiness-line strong,
.readiness-line small { display: block; }
.readiness-line strong { color: #44403c; font-size: 0.78rem; }
.readiness-line small { color: #78716c; font-size: 0.68rem; margin-top: 0.2rem; }
.readiness-line b { color: #57534e; font-size: 0.75rem; }
.readiness-track {
  background: #e7e5e4;
  border-radius: 999px;
  display: block;
  height: 0.45rem;
  overflow: hidden;
}
.readiness-track i {
  background: #315f4c;
  border-radius: inherit;
  display: block;
  height: 100%;
}
.setup-explainer,
.statement-note {
  color: #78716c;
  font-size: 0.72rem;
  line-height: 1.5;
  margin-top: 0.75rem;
}

.detail-ledger {
  border-top: 2px solid var(--brand-charcoal);
}
.report-disclosure {
  border-bottom: 1px solid var(--brand-line);
}
.report-disclosure > summary {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 4.8rem;
  padding: 0.75rem 0;
}
.report-disclosure > summary strong,
.report-disclosure > summary small { display: block; }
.report-disclosure > summary strong { color: var(--brand-charcoal); font-size: 0.95rem; }
.report-disclosure > summary small { color: #78716c; font-size: 0.72rem; margin-top: 0.2rem; }
.report-disclosure > summary > b { color: var(--brand-copper-dark); font-size: 0.75rem; }
.report-disclosure > summary > b i { font-size: 1rem; margin-left: 0.3rem; }
.report-disclosure[open] > summary > b i { display: inline-block; transform: rotate(45deg); }
.disclosure-body { padding: 0.5rem 0 1.25rem; }
.disclosure-body h3 { font-size: 0.82rem; font-weight: 850; margin-bottom: 0.5rem; }

.report-tabs {
  border-bottom: 1px solid var(--brand-line);
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
}
.report-tabs a {
  border-bottom: 2px solid transparent;
  color: #78716c;
  flex: 0 0 auto;
  font-size: 0.76rem;
  font-weight: 850;
  padding: 0.6rem 0;
  text-decoration: none;
}
.report-tabs a:hover,
.report-tabs a.active {
  border-color: var(--brand-copper-dark);
  color: var(--brand-copper-dark);
}
.report-tabs a:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--brand-copper);
  outline-offset: 2px;
}
/* Applied by report-tabs.js to every non-active tab panel; without the
   script (or with JS disabled) this class is never added and every
   report section stays visible, unstyled by this rule. */
.report-section-inactive {
  display: none;
}
.report-toolbar {
  align-items: flex-end;
  border-bottom: 1px solid var(--brand-line);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.9rem 0;
}
.report-toolbar form {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.report-toolbar label span {
  color: #78716c;
  display: block;
  font-size: 0.65rem;
  font-weight: 850;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
}
.report-toolbar input {
  min-height: 2.35rem;
}
.period-preset {
  border: 1px solid #d9d3cc;
  border-radius: 999px;
  color: #57534e;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 850;
  padding: 0.45rem 0.75rem;
  text-decoration: none;
}
.period-preset:hover { border-color: var(--brand-copper-dark); color: var(--brand-copper-dark); }
/* Reports date-range presets plus the static branch chip (Phase 13). The
   branch is a chip and not a select because request_branch ignores any branch
   in GET during the pilot. */
.report-preset-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.period-preset.is-active {
  background: var(--brand-copper-dark);
  border-color: var(--brand-copper-dark);
  color: #fff;
}
.inline-notice {
  align-items: flex-start;
  border-bottom: 1px solid #d8c5ac;
  display: flex;
  gap: 0.75rem;
  padding: 0.9rem 0;
}
.inline-notice > span {
  border: 1px solid #bf7b2c;
  border-radius: 999px;
  color: #92512f;
  display: inline-grid;
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 900;
  height: 1.3rem;
  place-items: center;
  width: 1.3rem;
}
.inline-notice strong { color: #6f3d24; display: block; font-size: 0.78rem; }
.inline-notice p { color: #785b46; font-size: 0.7rem; line-height: 1.45; margin-top: 0.15rem; }

.metric-viewbar {
  align-items: center;
  border-bottom: 1px solid var(--brand-line);
  display: flex;
  gap: 0.35rem;
  margin-top: 1.25rem;
  padding-bottom: 0.65rem;
}
.metric-viewbar > span { color: #78716c; font-size: 0.68rem; font-weight: 850; margin-right: 0.35rem; text-transform: uppercase; }
.metric-viewbar a {
  border-radius: 999px;
  color: #78716c;
  font-size: 0.72rem;
  font-weight: 850;
  padding: 0.35rem 0.65rem;
  text-decoration: none;
}
.metric-viewbar a.active,
.metric-viewbar a:hover { background: var(--brand-cream); color: var(--brand-copper-dark); }
.period-performance { padding-top: 0.45rem; }
.period-bar-row {
  align-items: center;
  border-bottom: 1px solid #eee9e3;
  color: inherit;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(12rem, 0.8fr) minmax(12rem, 1.8fr) minmax(7rem, auto);
  min-height: 4rem;
  text-decoration: none;
}
.period-bar-label strong,
.period-bar-label small { display: block; }
.period-bar-label strong { color: #44403c; font-size: 0.78rem; }
.period-bar-label small { color: #78716c; font-size: 0.68rem; margin-top: 0.15rem; }
.period-bar-value { color: #292524; font-size: 0.8rem; font-weight: 850; text-align: right; }
.costing-readiness { margin-top: 1rem; }

.statement-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.8fr);
}
.financial-statement > div {
  align-items: baseline;
  border-bottom: 1px solid var(--brand-line);
  display: flex;
  font-size: 0.78rem;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.8rem 0;
}
.financial-statement span { color: #57534e; }
.financial-statement strong { color: #292524; }
.financial-statement .statement-total {
  border-bottom: 3px double #a8a29e;
  font-weight: 900;
}
.vat-visual {
  align-items: center;
  border-bottom: 1px solid var(--brand-line);
  border-top: 1px solid var(--brand-line);
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr auto 1fr;
  padding: 1rem 0;
}
.vat-visual span,
.vat-visual strong,
.vat-visual small { display: block; }
.vat-visual span { color: #78716c; font-size: 0.68rem; }
.vat-visual strong { color: #292524; font-size: 1rem; margin-top: 0.3rem; }
.vat-visual small { color: #8c8580; font-size: 0.64rem; margin-top: 0.25rem; }
.vat-visual .vat-operator { color: #a8a29e; font-size: 1.2rem; }
.staff-list-wide { max-width: 48rem; }
.report-table table { border-collapse: collapse; width: 100%; }
.report-table th {
  border-bottom: 1px solid #bdb7b1;
  color: #78716c;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  padding: 0.65rem 0.5rem;
  text-align: left;
  text-transform: uppercase;
}
.report-table td {
  border-bottom: 1px solid #eee9e3;
  color: #44403c;
  font-size: 0.75rem;
  padding: 0.75rem 0.5rem;
}

@media (max-width: 900px) {
  .dashboard-primary-grid,
  .statement-grid {
    grid-template-columns: 1fr;
  }
  .attention-rail {
    border-left: 0;
    border-top: 1px solid var(--brand-line);
    padding-left: 0;
    padding-top: 1rem;
  }
  .scoreboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .scoreboard-metric:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
  .scoreboard-metric:nth-child(n+3) {
    border-top: 1px solid var(--brand-line);
  }
  .report-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 700px) {
  .analysis-split {
    grid-template-columns: 1fr;
  }
  .analysis-pane {
    padding-right: 0;
  }
  .analysis-pane + .analysis-pane {
    border-left: 0;
    border-top: 1px solid var(--brand-line);
    margin-top: 1.5rem;
    padding-left: 0;
    padding-top: 1.5rem;
  }
  .report-section-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .rank-row,
  .rank-row-product {
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  }
  .rank-row:not(.rank-row-product) {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .rank-row .rank-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .rank-row-product .rank-track {
    grid-column: 2 / -1;
  }
  .scoreboard {
    grid-template-columns: 1fr;
  }
  .scoreboard-metric,
  .scoreboard-metric:first-child,
  .scoreboard-metric:nth-child(odd) {
    border-left: 0;
    border-top: 1px solid var(--brand-line);
    padding-left: 0;
  }
  .scoreboard-metric:first-child {
    border-top: 0;
  }
  .operations-ribbon {
    grid-template-columns: 1fr 1fr;
  }
  .operations-ribbon > div:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
  .operations-ribbon > div:nth-child(n+3) {
    border-top: 1px solid var(--brand-line);
  }
  .period-bar-row,
  .readiness-line {
    grid-template-columns: 1fr auto;
    padding: 0.8rem 0;
  }
  .period-bar-track,
  .readiness-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .report-toolbar form,
  .report-toolbar label,
  .report-toolbar input,
  .report-toolbar .btn-primary {
    width: 100%;
  }
}

/* POS analytics dashboard refresh ---------------------------------------- */
.pos-analytics-dashboard,
.reports-dashboard {
  --analytics-line: #dfe5ec;
  --analytics-muted: #68737d;
  --analytics-ink: #20262c;
  --analytics-panel: #ffffff;
  --analytics-soft: #f4f7fa;
  --analytics-blue: #2f80ed;
  --analytics-green: #2f7562;
  display: grid;
  gap: 1.15rem;
}
.dashboard-command-bar,
.reports-command-bar {
  align-items: center;
  border-bottom: 1px solid var(--analytics-line);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding-bottom: 1rem;
}
.reports-command-bar {
  margin-bottom: 0.25rem;
}
.dashboard-status-panel {
  background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%);
  border-color: var(--analytics-line);
  box-shadow: none;
}
.source-chip--pos {
  border-color: #bad7cc;
  color: #245d4c;
}
.source-chip--pos i {
  background: #2f7562;
}
.kpi-strip {
  background: var(--analytics-panel);
  border: 1px solid var(--analytics-line);
  border-radius: 0.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  overflow: hidden;
}
.kpi-tile {
  min-width: 0;
  padding: 1rem 1.05rem;
}
.kpi-tile + .kpi-tile {
  border-left: 1px solid var(--analytics-line);
}
.kpi-label,
.kpi-detail {
  display: block;
}
.kpi-label {
  color: var(--analytics-muted);
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}
.kpi-value {
  color: var(--analytics-ink);
  display: block;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 950;
  line-height: 1.08;
  margin-top: 0.4rem;
  overflow-wrap: anywhere;
}
.kpi-detail {
  color: #7c8790;
  font-size: 0.7rem;
  line-height: 1.35;
  margin-top: 0.35rem;
}
.dashboard-analytics-grid,
.report-analytics-grid {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 0.8fr);
}
.dashboard-side-stack.insight-rail {
  display: grid;
  gap: 1rem;
}
.visual-panel {
  border-color: var(--analytics-line, #e4dfda);
  box-shadow: 0 1px 2px rgb(32 38 44 / 0.04);
}
.data-source-label {
  align-items: center;
  border: 1px solid var(--analytics-line);
  border-radius: 999px;
  color: var(--analytics-muted);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 850;
  min-height: 1.7rem;
  padding: 0.25rem 0.58rem;
  white-space: nowrap;
}
.data-source-label--pos {
  background: #f1faf6;
  border-color: #c7ded3;
  color: #245d4c;
}
.line-chart-path {
  stroke: var(--analytics-blue);
}
.line-chart-point {
  stroke: var(--analytics-blue);
}
.line-chart-point.is-highlighted {
  fill: var(--analytics-blue);
}
.chart-empty-state {
  align-items: center;
  background: rgb(255 255 255 / 0.92);
  border: 1px solid var(--analytics-line);
  border-radius: 0.5rem;
  display: grid;
  gap: 0.2rem;
  left: 50%;
  min-width: min(18rem, calc(100% - 2rem));
  padding: 0.85rem 1rem;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
}
.chart-empty-state strong {
  color: var(--analytics-ink);
  font-size: 0.85rem;
}
.chart-empty-state span {
  color: var(--analytics-muted);
  font-size: 0.72rem;
}
.today-performance-panel {
  min-height: 15rem;
}
.performance-meter-list {
  display: grid;
  gap: 0.9rem;
  margin-top: 0.4rem;
}
.performance-meter-row {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: minmax(0, 1fr) auto;
}
.performance-meter-row span,
.performance-meter-row strong,
.performance-meter-row small,
.performance-meter-row b {
  display: block;
}
.performance-meter-row strong {
  color: var(--analytics-ink);
  font-size: 0.82rem;
  font-weight: 900;
}
.performance-meter-row small {
  color: var(--analytics-muted);
  font-size: 0.7rem;
  margin-top: 0.15rem;
}
.performance-meter-row b {
  color: var(--analytics-green);
  font-size: 0.8rem;
  font-weight: 950;
  text-align: right;
}
.performance-meter-row > i {
  background: #edf1f4;
  border-radius: 999px;
  display: block;
  grid-column: 1 / -1;
  height: 0.58rem;
  overflow: hidden;
}
.performance-meter-row em {
  background: linear-gradient(90deg, #2f7562, #5fa58e);
  border-radius: inherit;
  display: block;
  height: 100%;
  max-width: 100%;
}
.performance-meter-row-alt em {
  background: linear-gradient(90deg, #f2a83b, #f6c86a);
}
.performance-baseline {
  align-items: baseline;
  border-top: 1px solid var(--analytics-line);
  color: var(--analytics-muted);
  display: flex;
  font-size: 0.72rem;
  gap: 0.75rem;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 0.8rem;
}
.performance-baseline strong {
  color: var(--analytics-ink);
  font-weight: 900;
  text-align: right;
}
.payment-distribution-layout {
  align-items: center;
}
.payment-row span:first-child {
  white-space: nowrap;
}
.compact-rank-list .rank-row-product {
  grid-template-columns: 1.7rem minmax(9rem, 1fr) minmax(6rem, 1fr) minmax(6.2rem, auto);
}
.dashboard-secondary-section {
  margin-top: 2rem;
}
.report-overview-shell .source-note {
  border-bottom: 0;
}

@media (max-width: 1100px) {
  .dashboard-analytics-grid,
  .report-analytics-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-side-stack.insight-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .dashboard-command-bar,
  .reports-command-bar,
  .dashboard-status-panel {
    align-items: flex-start;
    flex-direction: column;
  }
  .dashboard-status-panel {
    display: flex;
  }
  .dashboard-side-stack.insight-rail,
  .report-analytics-grid .payment-distribution-layout {
    grid-template-columns: 1fr;
  }
  .kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kpi-tile + .kpi-tile {
    border-left: 0;
  }
  .kpi-tile:nth-child(even) {
    border-left: 1px solid var(--analytics-line);
  }
  .kpi-tile:nth-child(n+3) {
    border-top: 1px solid var(--analytics-line);
  }
  .performance-baseline {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }
  .performance-baseline strong {
    text-align: left;
  }
}

@media (max-width: 430px) {
  .kpi-strip {
    grid-template-columns: 1fr;
  }
  .kpi-tile:nth-child(even),
  .kpi-tile:nth-child(n+3) {
    border-left: 0;
    border-top: 1px solid var(--analytics-line);
  }
  .kpi-tile:first-child {
    border-top: 0;
  }
}

/* POS checkout and settlements -------------------------------------------- */
.receipt-head {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}
.modifier-chip {
  border: 1px solid #d6d3d1;
  border-radius: 0.375rem;
  background: white;
  font-weight: 850;
}
.receipt-summary > div,
.receipt-payments > div {
  align-items: baseline;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}
.receipt-total {
  border-top: 1px solid var(--brand-line);
  padding-top: 0.8rem;
}
.modifier-sheet {
  background: rgb(0 0 0 / 0.45);
  inset: 0;
  padding: 1rem;
  position: fixed;
  z-index: 80;
}
.modifier-dialog {
  background: #fffdf9;
  border: 1px solid #e2d8ce;
  border-radius: 0.5rem;
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.24);
  margin: 8vh auto 0;
  max-width: 31rem;
  padding: 1rem;
}
.modifier-group h3 {
  color: #57534e;
  font-size: 0.76rem;
  font-weight: 850;
  margin-bottom: 0.45rem;
  text-transform: uppercase;
}
.modifier-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.modifier-chip {
  padding: 0.45rem 0.7rem;
}
.modifier-chip.selected {
  border-color: var(--brand-copper-dark);
  background: #fff3e8;
  color: var(--brand-copper-dark);
}
.settings-row,
.settings-subrow {
  align-items: center;
  border: 1px solid #e7e5e4;
  border-radius: 0.5rem;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 0.7rem;
}
.settings-row {
  background: #fffdf9;
}
.settings-subrow {
  margin-left: 1rem;
  padding: 0.45rem 0.65rem;
}
.settings-row span {
  color: #78716c;
  display: block;
  font-size: 0.76rem;
}
.settings-grid,
.settlement-summary-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

/* ---------- POS settings: platforms, add-ons, discounts ---------- */
/* The page is three URL-driven subtabs now, and every form that used to sit
   inline on it lives in a shared drawer (ops-drawer.js). What is left here is
   the reading layout: a card per platform, add-on options nested inside their
   own group's card, and plain settings rows for discount codes. */
.platform-card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.platform-card {
  border: 1px solid #e7e5e4;
  border-radius: 0.6rem;
  background: #fffdf9;
  padding: 1rem;
}
.platform-card.is-off {
  background: #fafaf9;
  opacity: 0.85;
}
.platform-card-head {
  align-items: center;
  display: flex;
  gap: 0.6rem;
}
.platform-card-head > div {
  flex: 1;
  min-width: 0;
}
.platform-card-name {
  display: block;
  line-height: 1.2;
}
.platform-card-slug {
  color: #a8a29e;
  display: block;
  font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* The registry's per-platform colour, the same one the POS pill uses. */
.platform-dot {
  background: var(--platform-color, #6b7280);
  border-radius: 999px;
  flex: none;
  height: 0.85rem;
  width: 0.85rem;
}
.platform-facts {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.85rem;
}
.platform-facts > div {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}
.platform-facts dt {
  color: #78716c;
  font-size: 0.78rem;
}
.platform-facts dd {
  font-size: 0.78rem;
  font-weight: 650;
  text-align: right;
}
.platform-card-actions {
  margin-top: 0.9rem;
}
.settings-section {
  border: 1px solid #e7e5e4;
  border-radius: 0.75rem;
  background: white;
  padding: 1.25rem;
}
.settings-section + .settings-section {
  margin-top: 1.25rem;
}
.settings-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.settings-section-hint {
  color: #78716c;
  font-size: 0.85rem;
  max-width: 42rem;
  margin-top: 0.2rem;
}
.commission-rate {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
  margin-top: 0.15rem;
}
.commission-rate.is-unset {
  color: #b45309;
  font-size: 1.3rem;
}
.commission-card-meta {
  color: #78716c;
  font-size: 0.8rem;
  margin-top: 0.1rem;
}
.commission-card-meta.is-warn {
  color: #b91c1c;
  font-weight: 650;
}
.commission-history {
  margin-top: 0.75rem;
}
.commission-history summary {
  cursor: pointer;
  color: #78716c;
  font-size: 0.8rem;
  font-weight: 700;
}

/* Wraps a RadioSelect's rendered markup -- restyled into pills instead of a
   plain list. The installed Django version renders `{{ form.field }}` as
   <div class="scope-picker"><div id="id_field"><div><label><input>...
   </label></div>...</div></div> -- there's an extra id-carrying wrapper div
   between .scope-picker and the per-choice divs (not the flatter <ul><li>
   markup the widget docs describe), so both `.scope-picker` and its direct
   child div need to be flex rows for the actual per-choice divs to wrap as a
   row; the `ul`/`li` rules are kept too in case a widget ever renders list
   markup directly under .scope-picker. */
.scope-picker,
.scope-picker > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.scope-picker ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.scope-picker li {
  list-style: none;
}
.scope-picker label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  white-space: nowrap;
  border: 1.5px solid #d6d3d1;
  border-radius: 999px;
  background: #fff;
  color: #57534e;
  padding: 0.5rem 0.9rem;
  font-size: 0.83rem;
  font-weight: 700;
  cursor: pointer;
}
.scope-picker label:has(input:checked) {
  border-color: var(--brand-copper-dark);
  background: #fff3e8;
  color: var(--brand-copper-dark);
}

.addon-group-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
.addon-group-card {
  border: 1px solid #e7e5e4;
  border-radius: 0.6rem;
  background: #fffdf9;
  padding: 0.85rem 1rem;
}
.addon-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.addon-group-head .badge {
  margin-left: 0.4rem;
}
.addon-option-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
}
.addon-option-chip {
  border: 1px solid #d6d3d1;
  border-radius: 999px;
  background: #fff;
  color: #44403c;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
}
.addon-option-chip:hover {
  border-color: var(--brand-copper-dark);
}
.addon-option-chip.is-inactive {
  opacity: 0.5;
  text-decoration: line-through;
}
.addon-option-add {
  border: 1.5px dashed #d6d3d1;
  border-radius: 999px;
  background: transparent;
  color: #78716c;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.addon-option-add:hover {
  border-color: var(--brand-copper-dark);
  color: var(--brand-copper-dark);
}
[data-scope-field][hidden] {
  display: none;
}

.receipt-page {
  background: #f5f5f4;
  color: #292524;
  font-family: system-ui, sans-serif;
}
.receipt {
  background: white;
  margin: 1.5rem auto;
  max-width: 27rem;
  padding: 1.25rem;
}
.receipt-head {
  justify-content: flex-start;
}
.receipt-head img {
  height: 2.5rem;
}
.receipt-lines article {
  border-bottom: 1px solid #e7e5e4;
  padding: 0.75rem 0;
}
.receipt-lines article > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

/* Category discounts panel (_pos_settings_discounts.html) ----------------- */
.setup-form ul {
  max-height: 12rem;
  overflow-y: auto;
  border: 1px solid #e7e5e4;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: 0.25rem 0;
}
.exclusion-chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid #e7e5e4;
  padding: 0.15rem 0.55rem;
  background: #f5f5f4;
  color: #57534e;
  font-size: 0.75rem;
  font-weight: 700;
}
.receipt-lines p {
  color: #78716c;
  font-size: 0.78rem;
  margin-top: 0.2rem;
}
.receipt-summary,
.receipt-payments {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
}
.receipt-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
/* Reports > Shift close -- phase 10 report body ---------------------------- */
.shift-close-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.75rem;
}
.shift-close-card-item {
  border: 1px solid #e7e5e4;
  border-radius: 0.6rem;
  padding: 0.75rem;
  background: #fff;
}
.shift-close-card-item.is-large-variance {
  /* Owner decision (HANDOFF.md #2): a large variance is surfaced, not
     alarmed about -- a quiet left accent and the existing amber .badge-warn,
     never the red .badge-danger the rest of the app reserves for alarms. */
  box-shadow: inset 3px 0 0 #d97706;
  background: #fffaf0;
}
.shift-close-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.shift-close-card-figures {
  display: grid;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
}
.shift-close-card-figures > div {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.shift-close-card-figures dt {
  color: #78716c;
  margin: 0;
}
.shift-close-card-figures dd {
  margin: 0;
  font-weight: 700;
}
.variance-chip.is-large {
  margin-left: 0.35rem;
}
.report-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}
@media print {
  .receipt-actions { display: none; }
  .receipt { margin: 0; max-width: none; }
  /* The reports page is meant to be printable in full: undo the JS-driven
     tab switching so every report section prints, regardless of which
     tab was active on screen. */
  .report-section-inactive { display: block; }
  /* Shift close: print the numbers, not the controls. Every manager action
     (approve/return/close/reopen), the print button itself, and the
     ops-drawer confirm dialogs are useless on paper and would otherwise
     print as dead buttons or -- worse -- an open <dialog>. */
  .shift-close-report .page-head-actions,
  .shift-close-report form,
  .shift-close-report .ops-drawer,
  .shift-close-print-btn {
    display: none !important;
  }
  /* A card or panel splitting across a page break is harder to read than a
     shorter page, so every shift-close card asks to stay whole. */
  .shift-close-report .panel,
  .shift-close-card-item {
    break-inside: avoid;
  }
}
/* pos.css owns every POS/Tables breakpoint now that Tables is a screen
   inside pos.html rather than its own page. */

/* Purchases & Suppliers (Phase 5) ----------------------------------------- */
/* The one KPI tile that is a task rather than a number links into the
   filtered list; it stays a .kpi-tile so the strip reads as one row. */
a.kpi-tile {
  display: block;
  color: inherit;
}
a.kpi-tile:hover {
  border-color: var(--brand-copper-dark);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.05);
}
/* A primary action in the page head is sometimes a one-button <form> (the
   Post action carries a CSRF token and an idempotency key). */
.page-head-actions form {
  margin: 0;
}
@media (max-width: 900px) {
  .page-head-actions form,
  .page-head-actions form .btn-primary,
  .page-head-actions form .btn-secondary {
    width: 100%;
  }
}
.tab-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.table-search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.table-search input {
  width: min(18rem, 62vw);
  min-height: 2.45rem;
}
/* Drafts are the only rows still waiting on a decision, so they carry a
   quiet left accent rather than another column of colour. */
tr.row-draft > td:first-child {
  box-shadow: inset 3px 0 0 var(--brand-copper);
}
.row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}
.row-actions form {
  margin: 0;
}
.btn-compact {
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
}
.rank-list {
  display: grid;
}

/* ---------- Settlements ---------- */
/* Reconciling a platform payout is one linear task: pick the platform, tick
   the orders that were in the deposit, type what landed in the bank. The tab
   bar carries each platform's outstanding money so the choice is informed,
   and the reconcile bar stays pinned to the bottom of the viewport so the
   running total and the variance verdict are visible however far down the
   order table the manager has scrolled. */
.settlement-tabs a {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  border-radius: 0.7rem;
  padding: 0.45rem 0.85rem;
  line-height: 1.25;
}
.settlement-tab-name {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
/* A payout that is past its expected date is the one thing worth interrupting
   for, so it gets a dot rather than another badge competing with the amount. */
.settlement-tab-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #dc2626;
}
.settlement-tab-amount {
  font-size: 0.78rem;
  font-weight: 700;
  color: #78716c;
}
.settlement-tabs a.active .settlement-tab-amount {
  color: var(--brand-copper-dark);
}
.settlement-table .settlement-select-cell {
  width: 2.6rem;
  text-align: center;
}
.settlement-table input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
}
.settlement-reconcile {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: 1rem;
  border: 1px solid var(--brand-line);
  border-radius: 0.6rem;
  background: #fff;
  padding: 0.85rem 1rem;
  box-shadow: 0 -6px 18px rgba(40, 35, 33, 0.08);
}
.settlement-reconcile-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.9rem;
}
.settlement-reconcile-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}
.settlement-reconcile-figures p {
  margin: 0;
}
.settlement-reconcile-figures span {
  display: block;
  color: #78716c;
  font-size: 0.76rem;
  font-weight: 800;
}
.settlement-reconcile-figures strong {
  font-size: 1.15rem;
}
.settlement-amount {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-left: auto;
}
.settlement-amount span {
  color: #78716c;
  font-size: 0.76rem;
  font-weight: 800;
}
.settlement-amount input {
  min-height: 2.6rem;
  width: 10rem;
}
.settlement-variance {
  align-self: center;
  min-height: 2.1rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
}
/* Beat any display:* the badge rules set, so the chip really disappears until
   there is a verdict to show. */
.settlement-variance[hidden] {
  display: none;
}
.settlement-reconcile-error {
  margin: 0 0 0.6rem;
  color: #991b1b;
  font-size: 0.85rem;
  font-weight: 700;
}
.settlement-extra {
  margin-top: 0.6rem;
}
.settlement-extra > summary {
  cursor: pointer;
  color: #78716c;
  font-size: 0.82rem;
  font-weight: 800;
}
@media (max-width: 720px) {
  .settlement-reconcile-main {
    align-items: stretch;
  }
  .settlement-amount {
    margin-left: 0;
  }
  .settlement-amount input,
  .settlement-reconcile-main .btn-primary {
    width: 100%;
  }
}

/* ---- Menu editor (Phase 9) ------------------------------------------- */
/* One calm column: item basics with the photo beside the fields, a stock-mode
   pill pair, the ingredient formset, and a collapsed Advanced block. */
.menu-editor {
  max-width: 52rem;
  margin: 0 auto;
}
.editor-basics {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 720px) {
  .editor-basics {
    grid-template-columns: 1fr;
  }
}
.menu-photo-tile {
  display: grid;
  gap: 0.6rem;
}
.menu-photo-tile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid #e7e5e4;
  background: #fafaf9;
}
.menu-photo-tile #menuPhotoEmpty {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border: 1.5px dashed #d6d3d1;
  border-radius: 0.5rem;
  color: #a8a29e;
  font-size: 0.85rem;
  font-weight: 700;
  background: #fafaf9;
}
.menu-photo-tile #menuPhotoEmpty[hidden],
.menu-photo-tile img[hidden] {
  display: none;
}
.field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
@media (max-width: 560px) {
  .field-pair {
    grid-template-columns: 1fr;
  }
}
.field-error {
  color: #991b1b;
  font-size: 0.78rem;
  font-weight: 700;
}
.check-inline {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #57534e;
}
.check-inline input[type="checkbox"] {
  margin-top: 0.15rem;
}
.new-category-reveal .detail-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
/* Same pill treatment as .scope-picker, but on hand-rendered radios. */
.stock-mode-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.stock-mode-picker label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1.5px solid #d6d3d1;
  border-radius: 999px;
  background: #fff;
  color: #57534e;
  padding: 0.4rem 0.85rem;
  font-size: 0.83rem;
  font-weight: 700;
  cursor: pointer;
}
.stock-mode-picker label:has(input:checked) {
  border-color: var(--brand-copper-dark);
  background: #fff3e8;
  color: var(--brand-copper-dark);
}
.stock-mode-picker input[type="radio"] {
  width: auto;
}
.ingredient-rows {
  display: grid;
  gap: 0.6rem;
}
.ingredient-row {
  display: grid;
  grid-template-columns: 1fr 11rem auto;
  gap: 0.8rem;
  align-items: start;
  border: 1px solid #e7e5e4;
  border-radius: 0.5rem;
  background: #fff;
  padding: 0.7rem 0.8rem;
}
@media (max-width: 560px) {
  .ingredient-row {
    grid-template-columns: 1fr auto;
  }
  .ingredient-row .ingredient-qty {
    grid-column: 1 / -1;
  }
}
.ingredient-remove {
  margin-top: 1.35rem;
  padding: 0.35rem 0.65rem;
  line-height: 1;
}
.unit-hint {
  color: #a8a29e;
  font-weight: 700;
}
.unit-hint:empty {
  display: none;
}
.cost-estimate {
  align-self: center;
  border-radius: 999px;
  background: #f5f5f4;
  color: #57534e;
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 750;
  white-space: nowrap;
}
#ingredientsPanel.is-non-inventory .ingredient-rows,
#ingredientsPanel.is-non-inventory #addIngredientRow {
  opacity: 0.45;
}
.advanced-recipe > summary {
  cursor: pointer;
}
.editor-savebar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid #e7e5e4;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(4px);
  padding: 0.75rem 1rem;
}
.readiness-issue-list {
  margin-top: 0.35rem;
  padding-left: 1.1rem;
  list-style: disc;
}

/* ---- Menu browse (Phase 10) ------------------------------------------ */
/* The owner's catalogue: a quiet card per product with a square photo, one
   status chip, and (for cost-permitted users) an honest cost line. Reuses the
   shared badge/segment-bar/panel tokens; only the grid and card frame are new. */
.menu-alert-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid #f0d3a8;
  border-left: 4px solid var(--brand-copper-dark);
  border-radius: 0.5rem;
  background: #fdf6ec;
  color: #7c4a12;
  padding: 0.7rem 0.95rem;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}
.menu-alert-banner:hover {
  background: #fbeed9;
}
.menu-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}
.menu-search {
  flex: 1 1 18rem;
}
.menu-status-field {
  flex: 0 1 14rem;
}
.menu-result-count {
  color: #78716c;
  font-size: 0.82rem;
  font-weight: 700;
}
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}
.menu-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e7e5e4;
  border-radius: 0.65rem;
  background: #fff;
  overflow: hidden;
}
.menu-card.is-off-menu {
  opacity: 0.72;
}
.menu-card-photo {
  display: block;
  aspect-ratio: 1 / 1;
  background: #f5f5f4;
}
.menu-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.menu-card-initial {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #a8a29e;
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.menu-card-body {
  display: grid;
  gap: 0.55rem;
  padding: 0.8rem 0.9rem 0.9rem;
}
.menu-card-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.menu-card-name {
  color: inherit;
  font-weight: 750;
  line-height: 1.25;
  text-decoration: none;
}
.menu-card-name:hover {
  text-decoration: underline;
}
.menu-card-price {
  white-space: nowrap;
  font-size: 0.88rem;
}
.menu-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.chip-quiet {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #f5f5f4;
  color: #57534e;
  padding: 0.15rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
}
.menu-card-cost {
  color: #57534e;
  font-size: 0.78rem;
  font-weight: 700;
}
.cost-percent {
  color: #78716c;
  font-weight: 700;
}
.cost-unknown {
  color: #a8a29e;
  font-style: italic;
  font-weight: 700;
}
.menu-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.15rem;
}
.menu-card-actions .btn-secondary {
  font-size: 0.78rem;
  padding: 0.3rem 0.6rem;
}

/* Wastage page redesign (Phase 12) -------------------------------------- */
.form-steps {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.form-step {
  border: 1px solid #e7e5e4;
  border-radius: 0.5rem;
  background: #fafaf9;
  padding: 0.75rem 0.85rem;
}
.form-step-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.form-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: var(--brand-copper-dark);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
}
.form-step-title {
  font-weight: 800;
  font-size: 0.95rem;
}
.form-step fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

/* Camera tile: idle placeholder -> live preview -> captured still, switched
   by camera.js setting data-camera-state on the wrapper. Mirrors the square
   .menu-photo-tile pattern but stays 16:9 to match the original preview. */
.camera-tile {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: 0.5rem;
  background: #0c0a09;
}
.camera-tile-empty,
.camera-tile video,
.camera-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.camera-tile-empty {
  display: none;
  place-items: center;
  gap: 0.35rem;
  background: #1c1917;
  color: #a8a29e;
  text-align: center;
  padding: 1rem;
  font-size: 0.85rem;
}
.camera-tile-empty span {
  font-size: 1.6rem;
}
.camera-tile video,
.camera-tile img {
  display: none;
}
.camera-tile[data-camera-state="idle"] .camera-tile-empty {
  display: grid;
}
.camera-tile[data-camera-state="live"] video {
  display: block;
}
.camera-tile[data-camera-state="captured"] img {
  display: block;
}

.wastage-submit-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.85rem;
  padding: 0.6rem 0.25rem;
  background: #fff;
  border-top: 1px solid #e7e5e4;
}
.wastage-photo-status {
  font-size: 0.85rem;
  font-weight: 800;
  color: #b45309;
}
.wastage-photo-status[data-captured="true"] {
  color: #15803d;
}

/* Inventory item settings redesign ---------------------------------------
   Categorized cards + search/pill toolbar + shared Add/Edit/Remove drawer.
   Reuses .panel, .badge, .row-actions, .segment-bar, and .ops-drawer*. */
.settings-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.settings-search {
  flex: 1 1 16rem;
  min-width: 14rem;
}
.settings-filter-status {
  flex-basis: 100%;
  margin: 0;
  color: #78716c;
  font-size: 0.82rem;
  font-weight: 650;
}
/* .segment-bar previously only ever held <a> pills; the settings page uses
   <button> pills because they drive client-side filtering, not navigation. */
.segment-bar button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  border: 1px solid #d6d3d1;
  border-radius: 999px;
  background: #fff;
  color: #57534e;
  padding: 0.45rem 0.8rem;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}
.segment-bar button.active,
.segment-bar button:hover {
  border-color: var(--brand-copper-dark);
  background: #fff3e8;
  color: var(--brand-copper-dark);
}
.settings-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.9rem;
}
.settings-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border: 1px solid #e7e5e4;
  border-radius: 0.65rem;
  background: #fff;
  padding: 0.85rem 0.95rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}
.settings-card.is-inactive {
  opacity: 0.62;
  background: #fafaf9;
}
.settings-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.settings-card-name {
  font-size: 0.95rem;
  font-weight: 750;
  line-height: 1.25;
}
.settings-card-unit {
  color: #57534e;
  font-size: 0.82rem;
}
.settings-card-levels {
  display: flex;
  gap: 1.1rem;
  margin: 0;
}
.settings-card-levels dt {
  color: #78716c;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.settings-card-levels dd {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 700;
}
.settings-card-supplier {
  color: #78716c;
  font-size: 0.78rem;
}
.settings-card-actions {
  margin-top: auto;
  align-items: center;
}
.settings-menu-match {
  border: 1px solid #ecd9c6;
  border-radius: 0.65rem;
  background: #fff8f0;
  padding: 0.85rem 0.95rem;
}
.settings-menu-match-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--brand-copper-dark);
}
.settings-menu-match-hint {
  margin-top: 0.15rem;
  color: #78716c;
  font-size: 0.8rem;
}
.settings-menu-match-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
}
.settings-menu-match-row strong {
  font-size: 0.86rem;
  margin-right: 0.25rem;
}
.settings-menu-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ecd9c6;
  border-radius: 999px;
  background: #fff;
  color: var(--brand-copper-dark);
  padding: 0.22rem 0.6rem;
  font-size: 0.76rem;
  font-weight: 750;
  cursor: pointer;
}
.settings-menu-chip:hover {
  background: #fff3e8;
}
.settings-remove-form {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px dashed #e7e5e4;
}
.settings-remove-note {
  margin-top: 0.45rem;
  color: #78716c;
  font-size: 0.78rem;
}