/* Canteen UI — shared modern / interactive layer (Bootstrap 5 base) */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,600&display=swap");

:root {
  --app-font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --app-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --app-radius: 1.125rem;
  --app-radius-sm: 0.625rem;
  --app-shadow: 0 4px 24px rgba(42, 61, 49, 0.08);
  --app-shadow-hover: 0 14px 36px rgba(42, 61, 49, 0.13);
  --app-border: rgba(42, 61, 49, 0.12);
  --app-foody-base: #3b5442;
  --app-foody-base-rgb: 59, 84, 66;
  --app-foody-deep: #2a3d31;
  --app-foody-soft: #4d6b56;
  --app-foody-mist: #6d8878;
  --app-foody-warm: #c47a2c;
  --app-foody-warm-rgb: 196, 122, 44;
  --app-foody-cream: #faf6f0;
  --app-meal-breakfast: #ea580c;
  --app-meal-lunch: #ca8a04;
  --app-meal-dinner: #5b4d8a;
  --app-accent: var(--app-foody-base);
  --app-accent-2: var(--app-foody-soft);
  --app-reveal-duration: 0.55s;
  --app-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
}

body.app-page {
  font-family: var(--app-font);
  min-height: 100vh;
}

/* ——— Light app pages (foody sage + warm cream) ——— */
body.app-page:not(.app-page--login):not(.app-page--scanner) {
  color: #1e2a21;
  background: linear-gradient(165deg, #f6f9f5 0%, #f3ede4 38%, #eef3ec 68%, #f8faf7 100%);
}

body.app-page:not(.app-page--login):not(.app-page--scanner)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 55% at 10% -10%, rgba(var(--app-foody-base-rgb), 0.2), transparent 56%),
    radial-gradient(ellipse 68% 48% at 100% 0%, rgba(var(--app-foody-warm-rgb), 0.12), transparent 52%),
    radial-gradient(ellipse 58% 48% at 45% 100%, rgba(109, 136, 120, 0.14), transparent 50%);
}

body.app-page.app-page--ops-workspace:not(.app-page--login):not(.app-page--scanner)::before {
  background:
    radial-gradient(ellipse 85% 55% at 10% -10%, rgba(var(--app-foody-base-rgb), 0.26), transparent 56%),
    radial-gradient(ellipse 68% 48% at 100% 0%, rgba(var(--app-foody-warm-rgb), 0.16), transparent 52%),
    radial-gradient(ellipse 58% 48% at 45% 100%, rgba(90, 114, 96, 0.18), transparent 50%);
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .app-title {
  font-family: var(--app-font-display);
  font-weight: 700;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  color: var(--app-foody-deep);
  letter-spacing: -0.022em;
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .app-card {
  border-color: rgba(var(--app-foody-base-rgb), 0.12);
  background: rgba(255, 252, 247, 0.92);
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .app-dashboard-hero {
  border-color: rgba(var(--app-foody-base-rgb), 0.32);
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .app-dashboard-hero--workspace {
  background: linear-gradient(
    135deg,
    rgba(var(--app-foody-base-rgb), 0.14) 0%,
    rgba(var(--app-foody-warm-rgb), 0.08) 48%,
    rgba(109, 136, 120, 0.18) 100%
  );
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .app-dashboard-hero__eyebrow {
  color: var(--app-foody-base);
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .app-kpi-tile {
  border-color: rgba(var(--app-foody-base-rgb), 0.22);
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .app-nav-link:hover {
  border-color: rgba(var(--app-foody-base-rgb), 0.35);
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .app-nav-stack--focus .app-nav-link {
  border-color: rgba(var(--app-foody-base-rgb), 0.28);
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .btn.app-btn-primary {
  color: #f8faf7;
  background: linear-gradient(135deg, var(--app-foody-base) 0%, var(--app-foody-soft) 52%, #5f7a68 100%);
  box-shadow: 0 4px 18px rgba(var(--app-foody-base-rgb), 0.35);
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .btn.app-btn-primary:hover {
  color: #f8faf7;
  box-shadow: 0 8px 26px rgba(var(--app-foody-base-rgb), 0.42);
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .btn.app-btn-ghost:hover {
  border-color: rgba(var(--app-foody-base-rgb), 0.35);
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .form-control.app-input:focus,
body.app-page:not(.app-page--login):not(.app-page--scanner) .form-select.app-input:focus {
  border-color: rgba(var(--app-foody-base-rgb), 0.45);
  box-shadow: 0 0 0 3px rgba(var(--app-foody-base-rgb), 0.16);
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .app-table-wrap thead th {
  background: linear-gradient(180deg, #f0f4ef 0%, #e8ebe3 100%) !important;
  color: #4a5c50;
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .app-table-wrap tbody tr:hover {
  background: rgba(var(--app-foody-base-rgb), 0.06) !important;
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .app-brand-link:focus-visible,
body.app-page:not(.app-page--login):not(.app-page--scanner) .app-nav-link:focus-visible {
  outline-color: var(--app-accent);
}

body.app-page:not(.app-page--login):not(.app-page--scanner) h1,
body.app-page:not(.app-page--login):not(.app-page--scanner) h2,
body.app-page:not(.app-page--login):not(.app-page--scanner) .h4,
body.app-page:not(.app-page--login):not(.app-page--scanner) .h5 {
  font-family: var(--app-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--app-foody-deep);
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .modal-title {
  font-family: var(--app-font-display);
  font-weight: 600;
  color: var(--app-foody-deep);
}

/* HR dashboard — meal slot colors + nav icon chips */
body.app-page:not(.app-page--login):not(.app-page--scanner) .app-nav-meta--solo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.7rem;
  background: rgba(var(--app-foody-base-rgb), 0.1);
  color: var(--app-foody-base);
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .app-nav-meta--solo .app-nav-meta__icon--bi {
  opacity: 1;
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .app-dashboard-kpi-row > [class*="col"] > .app-card,
body.app-page:not(.app-page--login):not(.app-page--scanner) #hr-dashboard-kpi-row > .col > .app-card {
  position: relative;
  overflow: hidden;
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .app-dashboard-kpi-row > [class*="col"] > .app-card::before,
body.app-page:not(.app-page--login):not(.app-page--scanner) #hr-dashboard-kpi-row > .col > .app-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--app-foody-base), var(--app-foody-soft));
  opacity: 0.55;
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .app-dashboard-kpi-row > [class*="col"] > .app-stock-status-card::before {
  content: none;
}

body.app-page:not(.app-page--login):not(.app-page--scanner) #hr-dashboard-kpi-row > .col:first-child > .app-card::before {
  background: linear-gradient(
    90deg,
    var(--app-meal-breakfast),
    var(--app-meal-lunch),
    var(--app-meal-dinner)
  );
  opacity: 0.85;
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .app-hr-meals-today .flex-fill:nth-child(1) .app-hr-meals-today__value {
  color: var(--app-meal-breakfast);
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .app-hr-meals-today .flex-fill:nth-child(2) .app-hr-meals-today__value {
  color: var(--app-meal-lunch);
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .app-hr-meals-today .flex-fill:nth-child(3) .app-hr-meals-today__value {
  color: var(--app-meal-dinner);
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .app-hr-meals-today .flex-fill:nth-child(1) .app-hr-meals-today__slot-label {
  color: var(--app-meal-breakfast);
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .app-hr-meals-today .flex-fill:nth-child(2) .app-hr-meals-today__slot-label {
  color: var(--app-meal-lunch);
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .app-hr-meals-today .flex-fill:nth-child(3) .app-hr-meals-today__slot-label {
  color: var(--app-meal-dinner);
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .app-dashboard-toolbar__clock-time {
  color: var(--app-foody-deep);
  font-family: var(--app-font-display);
  font-weight: 600;
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .app-dashboard-kpi-row .border-primary,
body.app-page:not(.app-page--login):not(.app-page--scanner) #hr-dashboard-kpi-row .border-primary {
  border-color: rgba(var(--app-foody-base-rgb), 0.28) !important;
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .app-dashboard-kpi-row .border-warning,
body.app-page:not(.app-page--login):not(.app-page--scanner) #hr-dashboard-kpi-row .border-warning {
  border-color: rgba(var(--app-foody-warm-rgb), 0.45) !important;
}

body.app-page:not(.app-page--login):not(.app-page--scanner) .text-secondary {
  color: var(--app-foody-mist) !important;
}

/* Modals where form is .modal-content: scroll body, keep header/footer fixed */
#menuSetupModal .modal-dialog-scrollable form.modal-content,
#purchaseRecordModal .modal-dialog-scrollable form.modal-content {
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#menuSetupModal .modal-dialog-scrollable .modal-body,
#purchaseRecordModal .modal-dialog-scrollable .modal-body {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

#purchaseRecordModal .modal-dialog {
  max-height: calc(100dvh - 2rem);
  margin: 1rem auto;
}

#purchaseRecordModal .modal-dialog-scrollable form.modal-content {
  max-height: calc(100dvh - 2rem);
}

#purchaseRecordModal .modal-header,
#purchaseRecordModal .modal-footer {
  flex-shrink: 0;
}

#purchaseRecordModal .app-purchase-supplier-stack {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

#purchaseRecordModal .app-purchase-modal-meta .form-label {
  margin-bottom: 0.35rem;
}

#purchaseRecordModal .app-purchase-modal-meta-hint {
  padding-left: 0.15rem;
}

#purchaseRecordModal .app-purchase-lines-panel {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0.65rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.65);
}

#purchaseRecordModal .app-purchase-lines-panel__hint {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(var(--app-foody-base-rgb), 0.06);
}

#purchaseRecordModal .app-purchase-lines-table-wrap {
  border: 0;
  border-radius: 0;
  overflow-x: auto;
}

/* Override global .app-table-wrap { width: max-content } so col widths match header/body */
#purchaseRecordModal .app-purchase-lines-table-wrap .app-purchase-lines-table {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100%;
  table-layout: fixed !important;
  margin-bottom: 0;
  border-collapse: collapse;
}

#purchaseRecordModal .app-purchase-lines-table--has-expiry .app-purchase-col-ingredient {
  width: 30%;
}

#purchaseRecordModal .app-purchase-lines-table--has-expiry .app-purchase-col-qty {
  width: 10%;
}

#purchaseRecordModal .app-purchase-lines-table--has-expiry .app-purchase-col-expiry {
  width: 15%;
}

#purchaseRecordModal .app-purchase-lines-table--has-expiry .app-purchase-col-price {
  width: 14%;
}

#purchaseRecordModal .app-purchase-lines-table--has-expiry .app-purchase-col-subtotal {
  width: 12%;
}

#purchaseRecordModal .app-purchase-lines-table--has-expiry .app-purchase-col-vat {
  width: 8%;
}

#purchaseRecordModal .app-purchase-lines-table--has-expiry .app-purchase-col-action {
  width: 10%;
}

#purchaseRecordModal .app-purchase-lines-table:not(.app-purchase-lines-table--has-expiry) .app-purchase-col-ingredient {
  width: 38%;
}

#purchaseRecordModal .app-purchase-lines-table:not(.app-purchase-lines-table--has-expiry) .app-purchase-col-qty {
  width: 12%;
}

#purchaseRecordModal .app-purchase-lines-table:not(.app-purchase-lines-table--has-expiry) .app-purchase-col-price {
  width: 16%;
}

#purchaseRecordModal .app-purchase-lines-table:not(.app-purchase-lines-table--has-expiry) .app-purchase-col-subtotal {
  width: 14%;
}

#purchaseRecordModal .app-purchase-lines-table:not(.app-purchase-lines-table--has-expiry) .app-purchase-col-vat {
  width: 8%;
}

#purchaseRecordModal .app-purchase-lines-table:not(.app-purchase-lines-table--has-expiry) .app-purchase-col-action {
  width: 10%;
}

#purchaseRecordModal .app-purchase-lines-table .app-purchase-col-h,
#purchaseRecordModal .app-purchase-lines-table .app-purchase-col-d {
  padding: 0.5rem 0.55rem;
  vertical-align: middle;
  box-sizing: border-box;
}

#purchaseRecordModal .app-purchase-lines-table .app-purchase-col-h {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
  white-space: nowrap;
  border-bottom-width: 1px;
  line-height: 1.2;
}

#purchaseRecordModal .app-purchase-col-h--ingredient,
#purchaseRecordModal .app-purchase-col-d--ingredient {
  text-align: left;
}

#purchaseRecordModal .app-purchase-col-h--num,
#purchaseRecordModal .app-purchase-col-d--num {
  text-align: right;
}

#purchaseRecordModal .app-purchase-col-h--expiry,
#purchaseRecordModal .app-purchase-col-d--expiry {
  text-align: left;
}

#purchaseRecordModal .app-purchase-col-h--vat,
#purchaseRecordModal .app-purchase-col-d--vat {
  text-align: center;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

#purchaseRecordModal .app-purchase-col-d--vat .form-check-input {
  margin: 0;
  float: none;
}

#purchaseRecordModal .app-purchase-col-h--action,
#purchaseRecordModal .app-purchase-col-d--action {
  text-align: center;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

#purchaseRecordModal .app-purchase-lines-table .form-control,
#purchaseRecordModal .app-purchase-lines-table .form-select {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
}

#purchaseRecordModal .app-purchase-col-d--num .form-control {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#purchaseRecordModal .app-purchase-col-d--action .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding-inline: 0.65rem;
  margin: 0 auto;
}

#purchaseRecordModal .app-purchase-expiry-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.1rem;
  width: 100%;
}

#purchaseRecordModal .app-purchase-expiry-hint {
  font-size: 0.625rem;
  line-height: 1;
  color: #64748b;
  text-align: right;
  min-height: 0.625rem;
}

#purchaseRecordModal .app-purchase-expiry--inactive,
#purchaseRecordModal .js-purchase-expiry:disabled {
  background-color: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
  opacity: 1;
}

#purchaseRecordModal .app-purchase-lines-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.65rem 0.85rem;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(248, 250, 252, 0.9);
}

#purchaseRecordModal .app-purchase-lines-toolbar__summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

#purchaseRecordModal .app-purchase-vat-summary {
  font-variant-numeric: tabular-nums;
}

#purchaseRecordModal .app-purchase-lines-toolbar__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  font-size: 0.875rem;
}

#purchaseRecordModal .app-purchase-lines-toolbar__total .fw-semibold {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 991.98px) {
  #purchaseRecordModal .app-purchase-lines-table-wrap .app-purchase-lines-table {
    table-layout: fixed !important;
    min-width: 56rem;
  }
}

/* Profit analytics — period filter + summary KPI strip */
.app-profit-summary-card .app-profit-filter {
  padding: 1.35rem 1.5rem 1.25rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 247, 237, 0.5) 100%);
  border-bottom: 1px solid var(--app-border);
}

body.app-page--ops-foody .app-profit-summary-card .app-profit-filter {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(237, 243, 235, 0.65) 100%);
}

body.app-page:not(.app-page--ops-foody) .app-profit-summary-card .app-profit-filter {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(241, 245, 249, 0.65) 100%);
}

.app-profit-filter__intro {
  margin-bottom: 1.1rem;
}

.app-profit-filter__form .app-profit-filter__date {
  min-height: 2.85rem;
}

@media (min-width: 576px) {
  .app-profit-filter__form .app-profit-filter__date {
    min-width: 11.5rem;
  }
}

.app-profit-filter__range-mark {
  display: block;
  width: 1.75rem;
  height: 2px;
  margin-block: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(100, 116, 139, 0.35) 20%, rgba(100, 116, 139, 0.35) 80%, transparent);
  position: relative;
  flex-shrink: 0;
}

.app-profit-filter__range-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(100, 116, 139, 0.45);
  border-bottom: 2px solid rgba(100, 116, 139, 0.45);
  margin-left: -1px;
}

body.app-page--ops-foody .app-profit-filter__range-mark {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(59, 84, 66, 0.28) 15%,
    rgba(90, 114, 96, 0.32) 50%,
    rgba(59, 84, 66, 0.28) 85%,
    transparent
  );
}

body.app-page--ops-foody .app-profit-filter__range-mark::after {
  border-right-color: rgba(42, 61, 49, 0.5);
  border-bottom-color: rgba(42, 61, 49, 0.5);
}

.app-profit-kpis {
  padding: 1.25rem 1.5rem 1.4rem;
  background: rgba(255, 255, 255, 0.28);
}

body.app-page:not(.app-page--ops-foody) .app-profit-kpis {
  background: rgba(248, 250, 252, 0.55);
}

body.app-page--ops-foody .app-profit-kpis {
  background: rgba(241, 247, 240, 0.55);
}

.app-profit-kpi {
  border-radius: var(--app-radius-sm);
  border: 1px solid var(--app-border);
  padding: 1rem 1.15rem;
  height: 100%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.app-profit-kpi:hover {
  border-color: rgba(79, 70, 229, 0.2);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}

body.app-page--ops-foody .app-profit-kpi:hover {
  border-color: rgba(59, 84, 66, 0.3);
  box-shadow: 0 6px 22px rgba(59, 84, 66, 0.1);
}

.app-profit-chart-panel {
  background: linear-gradient(180deg, #fafcfa 0%, #ffffff 42%);
  border: 1px solid #dce8e0;
  border-radius: 1rem;
  padding: 1rem 1rem 0.75rem;
  box-shadow: 0 4px 24px rgba(30, 42, 33, 0.06);
}

.app-profit-chart-toolbar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.25rem;
  margin-bottom: 1rem;
  background: #eef4ef;
  border-radius: 999px;
  border: 1px solid #d4e0d8;
}

.app-profit-chart-grain {
  appearance: none;
  border: 0;
  background: transparent;
  color: #4a5c50;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.app-profit-chart-grain:hover {
  color: #1e2a21;
  background: rgba(255, 255, 255, 0.65);
}

.app-profit-chart-grain.is-active {
  background: #ffffff;
  color: #1e2a21;
  box-shadow: 0 2px 10px rgba(30, 42, 33, 0.1);
}

.app-profit-chart-grain:focus-visible {
  outline: 2px solid #3d6b4f;
  outline-offset: 2px;
}

.app-profit-trend-card .app-profit-chart-panel {
  margin-top: 0.25rem;
}

.app-profit-trend-card .app-profit-chart-wrap,
.app-profit-chart-wrap {
  position: relative;
  width: 100%;
}

.app-profit-svg-chart {
  display: block;
  width: 100%;
  height: auto;
  min-height: 320px;
}

.app-profit-chart-hit {
  cursor: crosshair;
}

.app-profit-chart-tooltip {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  min-width: 14.5rem;
  max-width: min(22rem, 92vw);
  padding: 0.65rem 0.8rem;
  border-radius: 0.55rem;
  background: #1e2a21;
  color: #f8faf8;
  font-size: 0.78rem;
  line-height: 1.4;
  pointer-events: none;
  box-shadow: 0 10px 28px rgba(30, 42, 33, 0.32);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}

.app-profit-chart-wrap.is-tooltip-visible .app-profit-chart-tooltip {
  opacity: 1;
  visibility: visible;
}

.app-profit-chart-tooltip__date {
  font-weight: 700;
  margin-bottom: 0.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(248, 250, 248, 0.15);
}

.app-profit-chart-tooltip__row {
  display: grid;
  grid-template-columns: 0.5rem 1fr auto;
  gap: 0.35rem 0.55rem;
  align-items: center;
  margin-top: 0.25rem;
}

.app-profit-chart-tooltip__row--summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(248, 250, 248, 0.14);
}

.app-profit-chart-tooltip__row--summary .app-profit-chart-tooltip__label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}

.app-profit-chart-tooltip__row--summary .app-profit-chart-tooltip__value {
  flex: 0 0 auto;
  white-space: nowrap;
}

.app-profit-chart-tooltip__swatch {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.app-profit-chart-tooltip__label {
  color: rgba(248, 250, 248, 0.82);
  min-width: 0;
}

.app-profit-chart-tooltip__value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.app-profit-chart-tooltip__value--over {
  color: #fca5a5;
}

.app-profit-chart-tooltip__value--under {
  color: #86efac;
}

@media (max-width: 575.98px) {
  .app-profit-trend-card .app-profit-chart-wrap {
    height: min(280px, 50vh);
  }
}

.app-profit-kpi__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
  line-height: 1.35;
  margin-bottom: 0.45rem;
}

body.app-page--ops-foody .app-profit-kpi__label {
  color: #5a6b5f;
}

.app-profit-kpi__sublabel {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #94a3b8;
  margin-top: 0.2rem;
}

body.app-page--ops-foody .app-profit-kpi__sublabel {
  color: #7a8a80;
}

.app-profit-kpi__value {
  font-size: clamp(1.15rem, 3.2vw, 1.45rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.2;
}

body.app-page--ops-foody .app-profit-kpi__value {
  color: var(--app-foody-deep);
}

/* Profit analytics — period snapshot cards (Today / week / month / year) */
.app-profit-period-grid {
  margin-bottom: 1.25rem;
}

.app-profit-period-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--app-radius-sm);
  border: 1px solid var(--app-border);
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 4px 18px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.app-profit-period-card:hover {
  border-color: rgba(79, 70, 229, 0.22);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

body.app-page--ops-foody .app-profit-period-card {
  border-color: #d4e0d8;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 6px 22px rgba(59, 84, 66, 0.08);
}

body.app-page--ops-foody .app-profit-period-card:hover {
  border-color: rgba(59, 84, 66, 0.35);
  box-shadow: 0 10px 30px rgba(59, 84, 66, 0.12);
}

.app-profit-period-card__head {
  padding: 0.95rem 1.1rem 0.75rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(248, 250, 252, 0.65);
}

body.app-page--ops-foody .app-profit-period-card__head {
  background: rgba(237, 245, 239, 0.85);
  border-bottom-color: #d4e0d8;
}

.app-profit-period-card__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #475569;
  line-height: 1.3;
}

body.app-page--ops-foody .app-profit-period-card__title {
  color: #3d5345;
}

.app-profit-period-metrics {
  margin: 0;
  padding: 0.65rem 1.1rem 0.5rem;
  flex: 1 1 auto;
}

.app-profit-period-metric {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem 1rem;
  align-items: baseline;
  padding: 0.42rem 0;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.28);
}

.app-profit-period-metric:last-child {
  border-bottom: 0;
}

.app-profit-period-metric dt {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #64748b;
  line-height: 1.35;
}

body.app-page--ops-foody .app-profit-period-metric dt {
  color: #5a6b5f;
}

.app-profit-period-metric dd {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
  text-align: right;
  white-space: nowrap;
}

body.app-page--ops-foody .app-profit-period-metric dd {
  color: var(--app-foody-deep);
}

.app-profit-period-metric--hint dt {
  color: #94a3b8;
  font-size: 0.78rem;
}

.app-profit-period-metric--hint dd {
  font-weight: 500;
  color: #64748b;
}

.app-profit-period-card__net {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(241, 245, 249, 0.75);
}

body.app-page--ops-foody .app-profit-period-card__net {
  border-top-color: #c9d9ce;
  background: linear-gradient(90deg, #eef4ef 0%, #e4eee7 100%);
}

.app-profit-period-card__net-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

body.app-page--ops-foody .app-profit-period-card__net-label {
  color: #4a5c50;
}

.app-profit-period-card__net-value {
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.2;
}

body.app-page--ops-foody .app-profit-period-card__net-value {
  color: var(--app-foody-deep);
}

.app-profit-period-card__net-value.is-positive {
  color: #166534;
}

.app-profit-period-card__net-value.is-negative {
  color: #b91c1c;
}

.app-profit-period-card__net-value::before {
  content: "ETB ";
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.72;
}

.app-profit-period-metric dd::before {
  content: "ETB ";
  font-size: 0.72em;
  font-weight: 600;
  opacity: 0.65;
  margin-right: 0.12rem;
}

/* Manage account — full-width settings card (matches other app pages) */
.app-account-card {
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: calc(var(--app-radius) + 2px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.9) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 16px 40px rgba(15, 23, 42, 0.08);
}

.app-account-card:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 20px 48px rgba(15, 23, 42, 0.1);
}

.app-account-card__head {
  padding: 1.35rem 1.5rem 1.15rem;
  border-bottom: 1px solid var(--app-border);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.9) 0%, rgba(255, 255, 255, 0.5) 100%);
}

.app-account-card__profile {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.app-account-card__avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(135deg, var(--app-accent) 0%, var(--app-accent-2) 100%);
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.28);
}

.app-account-card__identity-label {
  margin: 0 0 0.15rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.app-account-card__username {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
  word-break: break-word;
}

.app-account-card__role {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #475569;
  background: rgba(148, 163, 184, 0.18);
  border-radius: 999px;
}

.app-account-card__lede {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #64748b;
}

.app-account-card__body {
  padding: 1.35rem 1.5rem 1.5rem;
}

.app-account-notice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 1.35rem;
  padding: 0.85rem 1rem;
  border-radius: var(--app-radius-sm);
  border: 1px solid rgba(79, 70, 229, 0.18);
  background: rgba(79, 70, 229, 0.06);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #475569;
}

.app-account-notice__icon {
  flex-shrink: 0;
  margin-top: 0.1rem;
  font-size: 1.1rem;
  color: var(--app-accent);
}

.app-account-section {
  margin-bottom: 1.35rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.35);
}

.app-account-section:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.app-account-section__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #475569;
}

.app-account-section__title .bi {
  font-size: 1rem;
  opacity: 0.85;
}

.app-account-section__hint {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: #94a3b8;
}

.app-account-card .form-control.app-input {
  padding: 0.72rem 1rem;
  background: rgba(255, 255, 255, 0.92);
}

.app-account-card .form-text {
  font-size: 0.78rem;
  color: #94a3b8;
}

.app-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--app-border);
}

.app-account-actions .btn.app-btn-primary {
  flex: 1 1 auto;
  min-width: 10rem;
  padding-block: 0.65rem;
  font-weight: 600;
}

.app-account-actions .btn.app-btn-ghost {
  flex: 0 0 auto;
}

@media (max-width: 575.98px) {
  .app-account-actions {
    flex-direction: column;
  }

  .app-account-actions .btn {
    width: 100%;
  }
}

/* Menu recipes listing: merged menu + action columns */
.app-menus-recipe-table .app-menu-table__menu-cell,
.app-menus-recipe-table .app-menu-table__action-cell {
  vertical-align: middle;
}

.app-menus-recipe-table .app-menu-table__menu-cell {
  text-align: center;
  background: rgba(255, 255, 255, 0.45);
  border-right: 1px solid var(--app-border);
}

body.app-page--ops-foody .app-menus-recipe-table .app-menu-table__menu-cell {
  background: rgba(237, 243, 235, 0.75);
}

/* Kitchen request form (chef) — match profit / ops form polish */
.app-kitchen-request-card .app-kitchen-request__head {
  padding: 1.35rem 1.5rem 1.1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(241, 245, 249, 0.65) 100%);
  border-bottom: 1px solid var(--app-border);
}

body.app-page--ops-foody .app-kitchen-request-card .app-kitchen-request__head {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(237, 243, 235, 0.72) 100%);
}

.app-kitchen-request-card .app-kitchen-request__form {
  padding: 1.25rem 1.5rem 1.45rem;
  background: rgba(255, 255, 255, 0.25);
}

body.app-page--ops-foody .app-kitchen-request-card .app-kitchen-request__form {
  background: rgba(241, 247, 240, 0.45);
}

.app-kitchen-request-card .app-kitchen-request__form .form-select.app-input,
.app-kitchen-request-card .app-kitchen-request__form .form-control.app-input {
  min-height: 2.7rem;
}

.app-kitchen-request-mode__toggle .btn-check:checked + .btn {
  background: var(--app-primary, #0d6efd);
  border-color: var(--app-primary, #0d6efd);
  color: #fff;
}

.app-kitchen-cost-preview {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: linear-gradient(135deg, rgba(59, 84, 66, 0.06) 0%, rgba(255, 255, 255, 0.92) 100%);
  padding: 1rem 1.1rem;
}

body.app-page--ops-foody .app-kitchen-cost-preview {
  border-color: rgba(59, 84, 66, 0.16);
  background: linear-gradient(135deg, rgba(59, 84, 66, 0.08) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.app-kitchen-cost-preview__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
}

.app-kitchen-cost-preview__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--app-muted, #64748b);
}

.app-kitchen-cost-preview__total {
  font-size: 1.45rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--app-text, #0f172a);
}

.app-kitchen-cost-preview__meta {
  max-width: 28rem;
  text-align: right;
}

.app-kitchen-cost-preview__details summary {
  cursor: pointer;
  color: var(--app-primary, #0d6efd);
  user-select: none;
}

.app-kitchen-cost-preview__table th,
.app-kitchen-cost-preview__table td {
  font-size: 0.82rem;
}

.app-kitchen-cost-chart-card .app-kitchen-cost-chart-kpis {
  border-top: 1px solid var(--app-border);
  padding-top: 1rem;
}

.app-live-preview-region {
  transition: opacity 0.28s var(--app-reveal-ease);
}

.app-live-preview-region.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

.app-live-preview-region.is-entering {
  animation: app-live-preview-in 0.32s var(--app-reveal-ease);
}

@keyframes app-live-preview-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#operations_reports_range_fields {
  transition: opacity 0.24s var(--app-reveal-ease);
}

#operations_reports_range_fields.d-none {
  opacity: 0;
}

.app-ops-reports-filter__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
}

.app-ops-reports-filter__field {
  flex: 0 1 auto;
  min-width: 0;
}

.app-ops-reports-filter__field--report {
  flex: 1 1 12rem;
  min-width: min(100%, 12rem);
  max-width: 20rem;
}

.app-ops-reports-filter__range {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  flex: 1 1 auto;
}

.app-ops-reports-filter__date {
  min-width: 9.5rem;
}

.app-ops-reports-filter__actions {
  flex: 0 0 auto;
  margin-left: auto;
}

@media (max-width: 575.98px) {
  .app-ops-reports-filter__actions {
    width: 100%;
    margin-left: 0;
  }

  .app-ops-reports-filter__actions .btn {
    width: 100%;
  }
}

.app-kitchen-cost-chart-kpi {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.85);
  height: 100%;
}

body.app-page--ops-foody .app-kitchen-cost-chart-kpi {
  border-color: rgba(59, 84, 66, 0.14);
  background: rgba(255, 255, 255, 0.92);
}

.app-kitchen-cost-chart-kpi__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--app-muted, #64748b);
  margin-bottom: 0.35rem;
}

.app-kitchen-cost-chart-kpi__value {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.app-vip-consumption-card {
  border-color: rgba(109, 79, 199, 0.18);
}

body.app-page--ops-foody .app-vip-consumption-card {
  border-color: rgba(109, 79, 199, 0.22);
}

.app-vip-consumption-card .card-body {
  background: linear-gradient(180deg, rgba(109, 79, 199, 0.04) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.app-kitchen-ops-tabnav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: #475569;
  border: 1px solid transparent;
  background: transparent;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.app-kitchen-ops-tabnav .nav-link:hover {
  color: var(--app-foody-deep, #1e3a2f);
  background: rgba(59, 84, 66, 0.08);
}

.app-kitchen-ops-tabnav .nav-link.active {
  color: #fff;
  background: linear-gradient(145deg, var(--app-foody-base, #3b5442) 0%, #2d6a4f 100%);
  border-color: rgba(59, 84, 66, 0.35);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.app-kitchen-ops-panel > .card {
  margin-bottom: 0;
}

/* Open kitchen requests — ingredient issue list for storekeeper */
.app-kitchen-open-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.app-kitchen-open-card {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: rgba(255, 255, 255, 0.92);
  overflow: hidden;
}

body.app-page--ops-foody .app-kitchen-open-card {
  border-color: rgba(59, 84, 66, 0.14);
  background: rgba(255, 255, 255, 0.95);
}

.app-kitchen-open-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  padding: 0.9rem 1rem;
  background: linear-gradient(90deg, rgba(59, 84, 66, 0.07) 0%, transparent 100%);
  border-bottom: 1px solid var(--app-border);
}

.app-kitchen-open-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  font-size: 0.8125rem;
}

.app-kitchen-open-card__id {
  font-weight: 700;
  color: #1e2a21;
}

.app-kitchen-open-card__menus {
  font-size: 0.8125rem;
  color: #475569;
  margin: 0;
  padding: 0 1rem 0.65rem;
}

.app-kitchen-open-card__menus strong {
  color: #334155;
}

.app-kitchen-ingredients-table {
  width: 100%;
  font-size: 0.8125rem;
  margin: 0;
}

.app-kitchen-ingredients-table thead th {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  padding: 0.5rem 1rem;
  background: rgba(241, 245, 249, 0.85);
  border-bottom: 1px solid var(--app-border);
}

body.app-page--ops-foody .app-kitchen-ingredients-table thead th {
  background: rgba(237, 243, 235, 0.9);
  color: #4a5c50;
}

.app-kitchen-ingredients-table tbody td {
  padding: 0.45rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

.app-kitchen-ingredients-table tbody tr:last-child td {
  border-bottom: 0;
}

.app-kitchen-ingredients-table tbody tr.is-short td {
  background: rgba(254, 226, 226, 0.35);
}

.app-kitchen-ingredients-table .qty-need {
  font-weight: 600;
  color: #0f172a;
}

.app-kitchen-open-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--app-border);
  background: rgba(248, 250, 252, 0.65);
}

body.app-page--ops-foody .app-kitchen-open-card__foot {
  background: rgba(241, 247, 240, 0.75);
}

.app-kitchen-open-card__stock-hint {
  font-size: 0.75rem;
  color: #64748b;
  margin: 0;
}

.app-kitchen-history-ingredients {
  font-size: 0.75rem;
  color: #475569;
  margin-top: 0.25rem;
  line-height: 1.45;
}

.app-kitchen-history-row td {
  vertical-align: top;
}

.app-kitchen-history-table-wrap {
  border: 1px solid var(--app-border, #e2e8f0);
  border-radius: 0.9rem;
  background: #fff;
}

.app-kitchen-history-table thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.app-kitchen-history-table tbody td {
  font-size: 0.86rem;
}

.app-kitchen-history-table tbody tr:hover {
  background: rgba(241, 245, 249, 0.55);
}

.app-pdf-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-radius: 999px;
  border-color: #cbd5e1;
  color: #334155;
  background: #fff;
  transition: all 0.15s ease;
}

.app-pdf-btn:hover,
.app-pdf-btn:focus-visible {
  border-color: #94a3b8;
  color: #0f172a;
  background: #f8fafc;
}

.app-pdf-btn i {
  font-size: 0.9rem;
  line-height: 1;
}

.app-pdf-btn--disabled {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b !important;
}

.app-kitchen-history-ingredients-cell {
  min-width: 13rem;
}

.app-kitchen-history-menu-cell {
  min-width: 13rem;
}

.app-kitchen-history-menu-label {
  font-weight: 500;
  color: #0f172a;
  line-height: 1.4;
}

.app-kitchen-history-toggle {
  font-weight: 600;
  color: var(--bs-link-color, #0d6efd);
}

.app-kitchen-history-toggle__icon {
  display: inline-block;
  margin-right: 0.2rem;
  transition: transform 0.15s ease;
}

.app-kitchen-history-row.is-expanded .app-kitchen-history-toggle__icon {
  transform: rotate(90deg);
}

.app-kitchen-history-expand-panel {
  margin-top: 0.5rem;
}

.app-purchase-items-cell {
  min-width: 7.5rem;
}

.app-kitchen-history-detail-table {
  width: 100%;
  font-size: 0.8125rem;
  margin: 0;
  border: 1px solid var(--app-border, #e2e8f0);
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
}

.app-kitchen-history-detail-table thead th {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  padding: 0.45rem 0.75rem;
  background: rgba(241, 245, 249, 0.95);
  border-bottom: 1px solid var(--app-border, #e2e8f0);
}

body.app-page--ops-foody .app-kitchen-history-detail-table thead th {
  background: rgba(237, 243, 235, 0.95);
  color: #4a5c50;
}

.app-kitchen-history-detail-table tbody td {
  padding: 0.4rem 0.75rem;
  vertical-align: middle;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.app-kitchen-history-detail-table tbody tr:nth-child(even) td {
  background: rgba(248, 250, 252, 0.85);
}

.app-kitchen-history-detail-table tbody tr:last-child td {
  border-bottom: 0;
}

.app-kitchen-history-detail-table .qty-need {
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
}

.app-kitchen-report-list .app-kitchen-open-card:last-child {
  margin-bottom: 0 !important;
}

.app-kitchen-report-meta {
  font-size: 0.8125rem;
  margin-bottom: 0;
}

.app-kitchen-report-meta dt {
  font-weight: 600;
  color: #475569;
}

.app-kitchen-report-meta dd {
  color: #0f172a;
}

.app-menus-recipe-table .app-menu-table__menu-name {
  font-weight: 600;
  display: inline-block;
  max-width: 14rem;
}

/* Menu recipes — card grid listing */
.app-menu-recipe-filters {
  padding: 0.85rem 1rem;
  border-radius: var(--app-radius);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--app-border);
}

body.app-page--ops-foody .app-menu-recipe-filters {
  background: rgba(237, 243, 235, 0.65);
}

.app-menu-recipe-card {
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--app-shadow);
}

body.app-page--ops-foody .app-menu-recipe-card {
  background: rgba(255, 255, 255, 0.82);
}

.app-menu-recipe-card--inactive {
  opacity: 0.88;
}

.app-menu-recipe-card__head {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.55) 100%);
}

body.app-page--ops-foody .app-menu-recipe-card__head {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(237, 243, 235, 0.6) 100%);
}

.app-menu-recipe-card__title {
  font-weight: 700;
  line-height: 1.25;
}

.app-menu-recipe-card__description {
  line-height: 1.45;
}

.app-menu-recipe-card__table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--app-muted, #64748b);
  border-bottom-width: 1px;
}

.app-menu-recipe-card__table .table > :not(caption) > * > * {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

body.app-page.is-loaded .app-reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Page chrome must show even if app.js fails to load */
.app-page-header .app-reveal {
  opacity: 1;
  transform: none;
}

.app-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--app-reveal-duration) var(--app-reveal-ease),
    transform var(--app-reveal-duration) var(--app-reveal-ease);
  transition-delay: calc(var(--reveal-delay, 0) * 70ms);
}

/* Main content width (same as former admin reports / “wide” layout) */
.app-shell {
  max-width: 1120px;
}

/* Canonical header row (reference: print_qr_badges) — use via includes/app_page_header.php */
.app-page-header__logo {
  display: block;
  max-height: 52px;
  width: auto;
  height: auto;
}

.app-site-footer {
  margin-top: 2rem;
}

.app-site-footer__inner {
  padding-top: 1.35rem;
  padding-bottom: 1rem;
  border-top: 1px solid var(--app-border);
  text-align: center;
}

.app-site-footer__copyright {
  font-size: 0.8125rem;
  color: #64748b;
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}

.app-site-footer__powered {
  font-size: 0.75rem;
  color: #94a3b8;
  letter-spacing: 0.03em;
}

.app-site-footer__powered strong {
  color: #475569;
  font-weight: 600;
}

body.app-page--login .app-site-footer--login.app-site-footer {
  margin-top: 1.75rem;
}

body.app-page--login .app-site-footer--login .app-site-footer__inner {
  padding-top: 1.1rem;
  padding-bottom: 0;
  border-top: none;
}

body.app-page--login .app-site-footer--login .app-site-footer__copyright {
  margin-bottom: 0.35rem;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: rgba(248, 250, 252, 0.52);
}

body.app-page--login .app-site-footer--login .app-site-footer__powered {
  font-size: 0.6875rem;
  color: rgba(248, 250, 252, 0.45);
}

body.app-page--login .app-site-footer--login .app-site-footer__powered strong {
  color: rgba(248, 250, 252, 0.72);
}

body.app-page--scanner .app-site-footer--scanner.app-site-footer {
  margin-top: auto;
  padding-top: 0.5rem;
}

body.app-page--scanner .app-site-footer--scanner .app-site-footer__inner {
  border-top: 1px solid rgba(148, 163, 184, 0.25);
  padding-top: 1rem;
  padding-bottom: 0.75rem;
}

body.app-page--scanner .app-site-footer--scanner .app-site-footer__copyright {
  color: rgba(148, 163, 184, 0.95);
}

body.app-page--scanner .app-site-footer--scanner .app-site-footer__powered {
  color: rgba(148, 163, 184, 0.85);
}

body.app-page--scanner .app-site-footer--scanner .app-site-footer__powered strong {
  color: rgba(226, 232, 240, 0.95);
}

@media print {
  .app-site-footer {
    display: none !important;
  }
}

.app-brand-link {
  display: inline-block;
  transition: transform 0.25s var(--app-reveal-ease);
}

.app-brand-link:hover {
  transform: scale(1.03);
}

.app-brand-link:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 4px;
  border-radius: 0.5rem;
}

.app-title {
  font-weight: 700;
  letter-spacing: -0.03em;
}

.app-nav-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.app-nav-link__start {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}

.app-nav-link__title {
  min-width: 0;
}

.app-nav-link__badge {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 1.65rem;
  padding: 0.35em 0.55em;
}

.app-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--app-radius-sm);
  text-decoration: none;
  color: var(--app-foody-deep) !important;
  font-weight: 600;
  border: 1px solid var(--app-border);
  background: rgba(255, 252, 247, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--app-shadow);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

.app-nav-link:hover {
  transform: translateY(-3px);
  box-shadow: var(--app-shadow-hover);
  border-color: rgba(var(--app-foody-base-rgb), 0.35);
  background: rgba(255, 255, 255, 0.97);
}

.app-nav-link:active {
  transform: translateY(-1px);
}

.app-nav-link:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
}

.app-nav-link .app-nav-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #64748b;
}

.app-nav-meta__icon {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  opacity: 0.88;
  vertical-align: -0.1em;
}

.app-nav-meta__icon--bi {
  width: auto;
  height: auto;
  font-size: 1.05rem;
  line-height: 1;
  display: inline-block;
  vertical-align: -0.12em;
  opacity: 0.88;
}

.app-nav-meta--solo .app-nav-meta__icon--bi {
  font-size: 1.35rem;
  opacity: 0.9;
}

.app-nav-link::after {
  content: "→";
  font-size: 1.1rem;
  opacity: 0.35;
  transition:
    transform 0.22s ease,
    opacity 0.22s ease;
}

.app-nav-link:hover::after {
  transform: translateX(5px);
  opacity: 0.85;
}

/* Section above app launcher (matches site footer separator) */
.app-apps-section {
  margin-top: 2rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--app-border);
}

/* Odoo-style app launcher grid (home & operations dashboards) */
.app-apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.25rem, 7.25rem));
  justify-content: center;
  gap: 1.25rem 1rem;
  margin-top: 0;
}

@media (min-width: 576px) {
  .app-apps-grid {
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 8.5rem));
    gap: 1.5rem 1.25rem;
  }
}

@media (min-width: 992px) {
  .app-apps-grid {
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 9.5rem));
    gap: 1.75rem 1.5rem;
  }
}

.app-app-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.25rem;
  text-decoration: none;
  color: #334155;
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.25;
  text-align: center;
  border: none;
  background: transparent;
  border-radius: 0.5rem;
  transition:
    transform 0.18s ease,
    color 0.18s ease;
}

.app-app-tile:hover {
  color: #0f172a;
  transform: translateY(-2px);
}

.app-app-tile:active {
  transform: translateY(0);
}

.app-app-tile:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 4px;
}

.app-app-tile__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 1.125rem;
  background: var(--app-tile-bg, #714b67);
  color: #fff;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 6px 16px rgba(15, 23, 42, 0.1);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.app-app-tile__icon .bi {
  font-size: 1.65rem;
  line-height: 1;
}

.app-app-tile:hover .app-app-tile__icon {
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.08),
    0 10px 22px rgba(15, 23, 42, 0.14);
  transform: scale(1.04);
}

.app-app-tile__icon .app-nav-link__badge {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  margin: 0;
  min-width: 1.35rem;
  padding: 0.2em 0.45em;
  font-size: 0.6875rem;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}

.app-app-tile__label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  max-width: 100%;
  padding: 0 0.15rem;
  overflow-wrap: anywhere;
}

.app-app-tile--teal { --app-tile-bg: linear-gradient(145deg, #0d9488 0%, #14b8a6 100%); }
.app-app-tile--blue { --app-tile-bg: linear-gradient(145deg, #2563eb 0%, #3b82f6 100%); }
.app-app-tile--indigo { --app-tile-bg: linear-gradient(145deg, #4f46e5 0%, #6366f1 100%); }
.app-app-tile--green { --app-tile-bg: linear-gradient(145deg, #15803d 0%, #22c55e 100%); }
.app-app-tile--cyan { --app-tile-bg: linear-gradient(145deg, #0891b2 0%, #06b6d4 100%); }
.app-app-tile--amber { --app-tile-bg: linear-gradient(145deg, #d97706 0%, #f59e0b 100%); }
.app-app-tile--orange { --app-tile-bg: linear-gradient(145deg, #ea580c 0%, #f97316 100%); }
.app-app-tile--rose { --app-tile-bg: linear-gradient(145deg, #e11d48 0%, #f43f5e 100%); }
.app-app-tile--violet { --app-tile-bg: linear-gradient(145deg, #7c3aed 0%, #8b5cf6 100%); }
.app-app-tile--emerald { --app-tile-bg: linear-gradient(145deg, #059669 0%, #10b981 100%); }
.app-app-tile--slate { --app-tile-bg: linear-gradient(145deg, #475569 0%, #64748b 100%); }
.app-app-tile--lime { --app-tile-bg: linear-gradient(145deg, #65a30d 0%, #84cc16 100%); }
.app-app-tile--sky { --app-tile-bg: linear-gradient(145deg, #0284c7 0%, #38bdf8 100%); }
.app-app-tile--purple { --app-tile-bg: linear-gradient(145deg, #714b67 0%, #875a7b 100%); }
.app-app-tile--grape { --app-tile-bg: linear-gradient(145deg, #6d28d9 0%, #9333ea 100%); }
.app-app-tile--pink { --app-tile-bg: linear-gradient(145deg, #db2777 0%, #ec4899 100%); }
.app-app-tile--coral { --app-tile-bg: linear-gradient(145deg, #f43f5e 0%, #fb7185 100%); }
.app-app-tile--mint { --app-tile-bg: linear-gradient(145deg, #0f766e 0%, #2dd4bf 100%); }

body.app-page--home .app-app-tile:focus-visible {
  outline-color: var(--app-accent);
}

.app-card {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: rgba(255, 252, 247, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--app-shadow);
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}

.app-card:hover {
  box-shadow: var(--app-shadow-hover);
}

.app-card .card-body {
  padding: 1.35rem 1.5rem;
  min-width: 0;
}

/* Keep card content readable and inside card bounds on all viewports. */
.app-card .card-body,
.app-card .card-body p,
.app-card .card-body .small,
.app-card .card-body .text-secondary,
.app-card .card-body td,
.app-card .card-body th,
.app-card .card-body label,
.app-card .card-body .app-nav-link__title {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.app-card .card-body .h4 {
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  line-height: 1.25;
}

.app-card .card-body .small {
  font-size: clamp(0.7rem, 1.55vw, 0.8125rem);
  line-height: 1.35;
}

/* HR “Meals today”: must beat .app-card .card-body overflow-wrap or multi-digit counts break (e.g. 10 → 1/0 “two rows”). */
.app-card .card-body.app-hr-meals-today,
.app-card .card-body.app-hr-meals-today .small {
  overflow-wrap: normal;
  word-break: normal;
}

.app-card .card-body.app-hr-meals-today .app-hr-meals-today__value {
  white-space: nowrap;
}

.app-hr-meals-today__slot-label {
  white-space: nowrap;
  font-size: 0.65rem !important;
  letter-spacing: 0.06em;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.35rem;
}

.app-hr-meals-today__value {
  font-variant-numeric: tabular-nums;
}

.app-dashboard-toolbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
}

.app-dashboard-toolbar__filters {
  flex: 1 1 14rem;
  min-width: 0;
}

.app-dashboard-toolbar__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1.25rem;
}

.app-dashboard-toolbar__field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  min-width: 0;
}

.app-dashboard-toolbar__field .form-select {
  flex: 1 1 9rem;
  min-width: 0;
  max-width: 16rem;
}

.app-dashboard-toolbar__field .form-select#dashboard_employee_type {
  max-width: 12rem;
}

.app-dashboard-toolbar__clock {
  flex: 0 0 auto;
  text-align: right;
  line-height: 1.2;
}

.app-dashboard-toolbar__clock-time {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
  .app-dashboard-toolbar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }

  .app-dashboard-toolbar__filters {
    flex: 1 1 auto;
    width: 100%;
  }

  .app-dashboard-toolbar__form {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .app-dashboard-toolbar__field {
    width: 100%;
  }

  .app-dashboard-toolbar__field .form-select,
  .app-dashboard-toolbar__field .form-select#dashboard_employee_type {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }

  .app-dashboard-toolbar__clock {
    text-align: center;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(148, 163, 184, 0.35);
  }
}

.app-dashboard-kpi-row,
#hr-dashboard-kpi-row {
  transition: opacity 0.22s ease;
}

.app-dashboard-kpi-row.is-hr-kpi-loading,
#hr-dashboard-kpi-row.is-hr-kpi-loading {
  opacity: 0.52;
  pointer-events: none;
}

.app-dashboard-kpi-row > [class*="col"] > .app-card .card-body.py-3 {
  padding-top: 0.85rem !important;
  padding-bottom: 0.85rem !important;
}

/* Unified KPI strip: equal-width cards in one row on desktop (any role/card count). */
.app-dashboard-kpi-row.row {
  --app-kpi-gap: 1rem;
  margin-left: 0;
  margin-right: 0;
}

.app-dashboard-kpi-row.row > [class*="col"] {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 767.98px) {
  .app-dashboard-kpi-row.row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--app-kpi-gap);
  }

  .app-dashboard-kpi-row.row > [class*="col"] {
    width: auto;
    max-width: none;
    flex: none;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .app-dashboard-kpi-row.row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--app-kpi-gap);
  }

  .app-dashboard-kpi-row.row > [class*="col"] {
    width: auto;
    max-width: none;
    flex: none;
  }
}

@media (min-width: 1200px) {
  .app-dashboard-kpi-row.row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: var(--app-kpi-gap);
  }

  .app-dashboard-kpi-row.row > [class*="col"] {
    width: auto;
    max-width: none;
    flex: none;
  }
}

.app-dashboard-hero {
  border-radius: var(--app-radius);
  border: 1px solid rgba(var(--app-foody-base-rgb), 0.22);
  box-shadow: var(--app-shadow);
}

.app-dashboard-hero__body {
  padding: 1.1rem 1.35rem;
}

.app-dashboard-hero__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--app-foody-base);
}

/* Shared hero treatment for storekeeper and chef dashboards */
.app-dashboard-hero--workspace {
  background: linear-gradient(
    135deg,
    rgba(var(--app-foody-base-rgb), 0.14) 0%,
    rgba(var(--app-foody-warm-rgb), 0.1) 100%
  );
}

.app-kpi-tile {
  border-color: rgba(var(--app-foody-base-rgb), 0.22);
}

.app-kpi-tile .app-kpi-tile__value {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--app-foody-deep);
}

.app-kpi-tile .app-kpi-tile__next {
  font-size: 0.95rem;
  line-height: 1.35;
  color: #334155;
}

/* Recent activity panel (matches storekeeper “Recent purchase activity” card) */
.app-dashboard-recent .card-body > h2 {
  letter-spacing: -0.01em;
}

.app-dashboard-recent .table thead th {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: #64748b;
  border-bottom-width: 1px;
  white-space: nowrap;
}

.app-dashboard-recent .table tbody td {
  vertical-align: middle;
}

/* Storekeeper stock status dashboard cards */
.app-stock-status-dashboard .app-stock-status-card {
  overflow: hidden;
  position: relative;
}

.app-stock-status-card__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.app-stock-status-card--ok .app-stock-status-card__accent {
  background: linear-gradient(90deg, #16a34a 0%, #4ade80 100%);
}

.app-stock-status-card--low .app-stock-status-card__accent {
  background: linear-gradient(90deg, #ca8a04 0%, #facc15 100%);
}

.app-stock-status-card--critical .app-stock-status-card__accent {
  background: linear-gradient(90deg, #dc2626 0%, #f87171 100%);
}

.app-stock-status-card--near_expiry .app-stock-status-card__accent {
  background: linear-gradient(90deg, #b45309 0%, #fbbf24 100%);
}

.app-stock-status-card--ok .app-stock-status-card__count {
  color: #15803d;
}

.app-stock-status-card--low .app-stock-status-card__count {
  color: #a16207;
}

.app-stock-status-card--critical .app-stock-status-card__count {
  color: #b91c1c;
}

.app-stock-status-card--near_expiry .app-stock-status-card__count {
  color: #b45309;
}

.app-stock-status-card__label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.app-stock-status-card__open-modal {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #334155;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.app-stock-status-card__open-modal:hover:not(:disabled) {
  border-color: rgba(var(--app-foody-base-rgb), 0.35);
  background: rgba(var(--app-foody-base-rgb), 0.08);
  color: var(--app-foody-deep);
}

.app-stock-status-modal {
  border: 1px solid rgba(var(--app-foody-base-rgb), 0.2);
  border-radius: var(--app-radius);
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
}

.app-stock-status-modal__header {
  padding-top: 1.1rem;
  padding-bottom: 0.25rem;
}

.app-stock-status-modal__accent {
  height: 4px;
  border-radius: 999px;
  margin-bottom: 0.85rem;
}

.app-stock-status-modal__accent--ok {
  background: linear-gradient(90deg, #16a34a 0%, #4ade80 100%);
}

.app-stock-status-modal__accent--low {
  background: linear-gradient(90deg, #ca8a04 0%, #facc15 100%);
}

.app-stock-status-modal__accent--critical {
  background: linear-gradient(90deg, #dc2626 0%, #f87171 100%);
}

.app-stock-status-modal__accent--near_expiry {
  background: linear-gradient(90deg, #b45309 0%, #fbbf24 100%);
}

.app-stock-status-modal .modal-body {
  overflow: hidden;
}

.app-stock-status-modal__table-wrap {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.65rem;
  max-height: min(55vh, 440px);
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* .table-responsive.app-table-wrap sets overflow-y: hidden globally — allow vertical scroll here */
.table-responsive.app-table-wrap.app-stock-status-modal__table-wrap {
  overflow-x: auto;
  overflow-y: auto;
}

.app-stock-status-modal__table-wrap .table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f0f4ef;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08);
}

.app-stock-status-modal__footer {
  background: linear-gradient(180deg, rgba(248, 250, 247, 0.5) 0%, #fff 100%);
}

/* Full-page purchase request preview: taller scroll region, actions stay below */
.app-stock-status-preview-form .app-stock-status-modal__table-wrap {
  max-height: min(58vh, 520px);
}

body.app-page.app-page--ops-foody .app-stock-status-card {
  border-color: rgba(var(--app-foody-base-rgb), 0.18);
}

.app-status-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.28em 0.65em;
  border-radius: 999px;
}

.app-status-badge--open {
  color: #92400e;
  background: rgba(245, 158, 11, 0.2);
}

.app-status-badge--done {
  color: #14532d;
  background: rgba(34, 197, 94, 0.18);
}

.app-status-badge--rejected {
  color: #991b1b;
  background: rgba(239, 68, 68, 0.16);
}

.app-nav-stack--focus .app-nav-link {
  border-color: rgba(79, 70, 229, 0.25);
  background: rgba(255, 255, 255, 0.95);
}

@media (max-width: 576px) {
  .app-card .card-body {
    padding: 1.05rem 1rem;
  }
}

.app-form-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: #475569;
}

/* KPI entry modal / form */
.canteen-kpi-page .kpi-entry-form-card {
  padding: 0;
}

.canteen-kpi-page .modal-body.kpi-entry-form-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.canteen-kpi-page .kpi-entry-form .form-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #171445;
  margin-bottom: 0.35rem;
}

.canteen-kpi-page .kpi-entry-form .form-control,
.canteen-kpi-page .kpi-entry-form .form-select {
  border-radius: 8px;
  border-color: rgb(23 20 69 / 0.12);
  min-height: 2.45rem;
}

.canteen-kpi-page .kpi-entry-form .form-control:focus,
.canteen-kpi-page .kpi-entry-form .form-select:focus {
  border-color: #171445;
  box-shadow: 0 0 0 3px rgb(23 20 69 / 0.12);
}

.canteen-kpi-page .kpi-entry-guidance {
  border-radius: 8px;
  border: 1px solid rgb(23 20 69 / 0.12) !important;
  background: linear-gradient(135deg, rgb(23 20 69 / 0.06) 0%, rgb(197 36 40 / 0.08) 100%);
}

.canteen-kpi-page .kpi-entry-guidance strong {
  color: #171445;
}

.canteen-kpi-page .kpi-entry-form .btn-primary {
  background: #171445;
  border-color: #171445;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.55rem 1.25rem;
}

.canteen-kpi-page .kpi-entry-form .btn-primary:hover {
  background: #252070;
  border-color: #252070;
}

.app-table-wrap {
  border-radius: calc(var(--app-radius) - 2px);
  overflow: hidden;
}

/* Keep horizontal table scrolling available on mobile. */
.table-responsive.app-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* Lets flex/grid parents shrink this region so overflow-x can engage instead of crushing columns. */
  min-width: 0;
}

.app-table-wrap .table {
  margin-bottom: 0;
  /* Wider than viewport when needed → horizontal scroll; still fills row when content is short. */
  width: max-content;
  min-width: 100%;
}

.app-table-wrap .table th,
.app-table-wrap .table td {
  /* Override .app-card .card-body aggressive wrapping (avoids one-letter-per-line columns). */
  overflow-wrap: normal;
  word-break: normal;
}

.app-table-wrap thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #64748b;
  border-bottom-width: 1px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
}

.app-table-wrap tbody tr {
  transition: background 0.15s ease;
}

.app-table-wrap tbody tr:hover {
  background: rgba(var(--app-foody-base-rgb), 0.06) !important;
}

.btn.app-btn-primary {
  font-weight: 600;
  padding-inline: 1.25rem;
  border: none;
  color: #f8faf7;
  background: linear-gradient(135deg, var(--app-foody-base) 0%, var(--app-foody-soft) 52%, #5f7a68 100%);
  box-shadow: 0 4px 18px rgba(var(--app-foody-base-rgb), 0.35);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.btn.app-btn-primary:hover {
  transform: translateY(-1px);
  color: #f8faf7;
  box-shadow: 0 8px 26px rgba(var(--app-foody-base-rgb), 0.42);
  filter: brightness(1.05);
}

.btn.app-btn-primary:active {
  transform: translateY(0);
}

.btn.app-btn-ghost {
  font-weight: 600;
  border: 1px solid var(--app-border);
  background: rgba(255, 255, 255, 0.6);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.btn.app-btn-ghost:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--app-foody-base-rgb), 0.35);
  background: #fff;
}

.form-control.app-input,
.form-select.app-input {
  border-radius: var(--app-radius-sm);
  border: 1px solid var(--app-border);
  padding: 0.65rem 0.9rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.form-control.app-input:focus,
.form-select.app-input:focus {
  border-color: rgba(var(--app-foody-base-rgb), 0.45);
  box-shadow: 0 0 0 3px rgba(var(--app-foody-base-rgb), 0.16);
}

.alert.app-alert {
  border-radius: var(--app-radius-sm);
  border: none;
  box-shadow: var(--app-shadow);
}

/* ——— QR badges (screen) ——— */
.badge-card {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  padding: 1.15rem;
  height: 100%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--app-shadow);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.badge-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--app-shadow-hover);
  border-color: rgba(14, 165, 233, 0.25);
}

.badge-card .qr-host {
  min-height: 148px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-card .qr-host img {
  max-width: 100%;
  height: auto;
}

@media print {
  body.app-page {
    background: #fff !important;
  }

  body.app-page::before {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }

  .badge-card {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #dee2e6 !important;
    transform: none !important;
  }
}

/* ——— Scanner (dark) ——— */
body.app-page--scanner .text-secondary {
  color: rgba(232, 238, 252, 0.58) !important;
}

body.app-page--scanner {
  font-family: var(--app-font);
  --scanner-bg: #070b14;
  --scanner-surface: rgba(15, 23, 42, 0.65);
  --scanner-glow: rgba(99, 102, 241, 0.45);
  color: #e8eefc;
  background: var(--scanner-bg);
  min-height: 100vh;
}

body.app-page--scanner::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 55% at 50% -20%, rgba(99, 102, 241, 0.22), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(14, 165, 233, 0.12), transparent 45%),
    radial-gradient(ellipse 50% 30% at 0% 80%, rgba(79, 70, 229, 0.1), transparent 40%);
}

body.app-page--scanner #app-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.app-page--scanner #qr-reader {
  width: 100%;
  max-width: 640px;
  border-radius: var(--app-radius);
  overflow: hidden;
  background: #000;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 12px 48px rgba(0, 0, 0, 0.45),
    0 0 60px rgba(79, 70, 229, 0.12);
  animation: app-scanner-glow 4s ease-in-out infinite alternate;
}

@keyframes app-scanner-glow {
  from {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.06),
      0 12px 48px rgba(0, 0, 0, 0.45),
      0 0 40px rgba(79, 70, 229, 0.1);
  }
  to {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 16px 56px rgba(0, 0, 0, 0.55),
      0 0 72px rgba(14, 165, 233, 0.14);
  }
}

body.app-page--scanner #qr-reader video {
  border-radius: var(--app-radius);
}

body.app-page--scanner #statusLine {
  min-height: 3.5rem;
  font-size: clamp(1.25rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  transition:
    color 0.2s ease,
    transform 0.25s ease;
}

body.app-page--scanner #statusLine.is-pulse {
  animation: app-status-pop 0.35s ease;
}

@keyframes app-status-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}

body.app-page--scanner #flashOverlay {
  z-index: 1050;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.14s ease-out,
    background-color 0.14s ease-out;
}

body.app-page--scanner #flashOverlay.show {
  opacity: 0.55;
}

body.app-page--scanner #flashOverlay.flash-green {
  background-color: #198754;
}

body.app-page--scanner #flashOverlay.flash-red {
  background-color: #dc3545;
}

body.app-page--scanner .brand-logo {
  max-height: 44px;
  width: auto;
  vertical-align: middle;
}

body.app-page--scanner .brand-logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.96);
  border-radius: var(--app-radius-sm);
  padding: 0.35rem 0.65rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

body.app-page--scanner .brand-logo-chip:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

body.app-page--scanner #btnStart {
  font-weight: 700;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 999px;
  padding-inline: 2.5rem;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 45%, #0ea5e9 130%);
  box-shadow:
    0 4px 20px rgba(79, 70, 229, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

body.app-page--scanner #btnStart:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.06);
  box-shadow:
    0 10px 32px rgba(79, 70, 229, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

body.app-page--scanner #btnStart:active:not(:disabled) {
  transform: translateY(0) scale(0.99);
}

body.app-page--scanner #btnStart:disabled {
  opacity: 0.75;
}

/* Meal type modal — brand accent */
body.app-page--scanner .app-scanner-meal-modal .modal-content {
  border: 1px solid rgba(79, 70, 229, 0.2);
  border-radius: var(--app-radius);
  box-shadow:
    0 18px 48px rgba(79, 70, 229, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  overflow: hidden;
}

body.app-page--scanner .app-scanner-meal-modal .modal-content::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--app-accent) 0%, #6366f1 45%, var(--app-accent-2) 100%);
}

body.app-page--scanner .app-scanner-meal-modal__title {
  color: var(--app-accent);
  font-weight: 700;
  letter-spacing: -0.02em;
}

body.app-page--scanner .app-scanner-meal-modal__hint {
  margin-bottom: 1rem !important;
  padding: 0.7rem 0.95rem;
  border-radius: var(--app-radius-sm);
  color: #334155;
  background: linear-gradient(
    135deg,
    rgba(79, 70, 229, 0.09) 0%,
    rgba(99, 102, 241, 0.06) 50%,
    rgba(14, 165, 233, 0.07) 100%
  );
  border: 1px solid rgba(79, 70, 229, 0.18);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
}

body.app-page--scanner #mealTypeModal .form-check-input {
  width: 1.1rem;
  height: 1.1rem;
  border-color: rgba(79, 70, 229, 0.35);
}

body.app-page--scanner #mealTypeModal .form-check-input:checked {
  background-color: var(--app-accent);
  border-color: var(--app-accent);
}

body.app-page--scanner #mealTypeModal .form-check-input:focus {
  border-color: rgba(79, 70, 229, 0.55);
  box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.2);
}

body.app-page--scanner #mealTypeModal .form-check-label {
  color: #0f172a;
}

body.app-page--scanner #mealTypeChip strong {
  color: var(--app-accent);
}

body.app-page--scanner .app-scanner-meal-modal__change {
  color: var(--app-accent) !important;
  font-weight: 600;
}

body.app-page--scanner .app-scanner-meal-modal__change:hover {
  color: #4338ca !important;
}

body.app-page--scanner .app-scanner-meal-modal__change:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

body.app-page--scanner #onlineDot {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
  transition: background 0.3s ease;
}

body.app-page--scanner #onlineDot.is-live {
  animation: app-dot-pulse 2s ease-in-out infinite;
}

@keyframes app-dot-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(32, 201, 151, 0.25);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(32, 201, 151, 0.15);
  }
}

body.app-page--scanner #pendingBadge {
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.4em 0.75em;
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.app-page--scanner .app-scanner-footer {
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: var(--scanner-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* Meal type modal (scanner) */
body.app-page--scanner .modal-backdrop {
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.app-page--scanner .app-meal-modal {
  --meal-option-radius: 0.9rem;
}

body.app-page--scanner .app-meal-modal__dialog {
  max-width: 420px;
}

body.app-page--scanner .app-meal-modal__sheet {
  border-radius: 1.25rem !important;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.99) 55%, rgba(15, 23, 42, 1) 100%);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #e8eefc;
}

body.app-page--scanner .app-meal-modal__accent {
  height: 5px;
  background: linear-gradient(90deg, #6366f1 0%, #0ea5e9 45%, #a855f7 100%);
  opacity: 0.95;
}

body.app-page--scanner .app-meal-modal__title {
  font-weight: 700;
  font-size: clamp(1.2rem, 4vw, 1.45rem);
  letter-spacing: -0.035em;
  line-height: 1.25;
  color: #f8fafc;
}

body.app-page--scanner .app-meal-modal__lead {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(232, 238, 252, 0.62);
}

body.app-page--scanner .app-meal-option {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
  border-radius: var(--meal-option-radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.45);
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
}

body.app-page--scanner .app-meal-option:hover {
  border-color: rgba(99, 102, 241, 0.42);
  background: rgba(30, 41, 59, 0.55);
}

body.app-page--scanner .app-meal-option:active {
  transform: scale(0.99);
}

body.app-page--scanner .app-meal-option:focus-within {
  outline: 2px solid rgba(99, 102, 241, 0.75);
  outline-offset: 2px;
}

body.app-page--scanner .app-meal-option:has(input:checked) {
  border-color: rgba(129, 140, 248, 0.85);
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.22) 0%, rgba(14, 165, 233, 0.1) 100%);
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.app-page--scanner .app-meal-option__body {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  min-height: 3.5rem;
}

body.app-page--scanner .app-meal-option__icon {
  font-size: 1.65rem;
  line-height: 1;
  width: 2.5rem;
  text-align: center;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

body.app-page--scanner .app-meal-option__main {
  flex: 1;
  min-width: 0;
}

body.app-page--scanner .app-meal-option__title {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: #f1f5f9;
}

body.app-page--scanner .app-meal-option__hint {
  display: block;
  font-size: 0.72rem;
  color: rgba(232, 238, 252, 0.48);
  margin-top: 0.2rem;
  letter-spacing: 0.01em;
}

body.app-page--scanner .app-meal-option__check {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  opacity: 0;
  transition:
    opacity 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
  color: #fff;
}

body.app-page--scanner .app-meal-option:has(input:checked) .app-meal-option__check {
  opacity: 1;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #0ea5e9 130%);
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(79, 70, 229, 0.45);
}

body.app-page--scanner .app-meal-modal__confirm {
  font-weight: 700;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 999px;
  padding: 0.8rem 1.25rem;
  color: #fff;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 45%, #0ea5e9 130%);
  box-shadow:
    0 4px 22px rgba(79, 70, 229, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.18s ease;
}

body.app-page--scanner .app-meal-modal__confirm:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow:
    0 8px 28px rgba(79, 70, 229, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

body.app-page--scanner .app-meal-modal__confirm:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

body.app-page--scanner .app-meal-chip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.app-page--scanner .app-meal-chip__label {
  font-size: 0.8rem;
  color: rgba(232, 238, 252, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

body.app-page--scanner .app-meal-chip__value {
  font-size: 0.95rem;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.02em;
}

body.app-page--scanner .app-meal-chip__change {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #a5b4fc;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

body.app-page--scanner .app-meal-chip__change:hover {
  color: #c7d2fe;
}

body.app-page--scanner .app-meal-chip__change:focus-visible {
  outline: 2px solid rgba(165, 180, 252, 0.8);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ——— Login — photo + brand overlay ——— */
body.app-page.app-page--login {
  color: #f8fafc;
  /* Fallback if bg.jpg is missing */
  background-color: #2a3d31;
  /* Warm sage tint over photo */
  background-image:
    linear-gradient(
      155deg,
      rgba(var(--app-foody-base-rgb), 0.52) 0%,
      rgba(42, 61, 49, 0.62) 48%,
      rgba(var(--app-foody-warm-rgb), 0.38) 100%
    ),
    url("../images/bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

body.app-page.app-page--login::before {
  background: radial-gradient(ellipse 120% 90% at 50% 0%, transparent 0%, rgba(15, 23, 42, 0.22) 100%);
}

.login-stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 3rem) 1rem;
}

.login-panel {
  width: 100%;
  max-width: 26rem;
  text-align: center;
}

.login-crest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.35rem;
  margin-bottom: 1.5rem;
  border-radius: var(--app-radius);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 16px 48px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.login-crest img {
  display: block;
  max-height: 3.25rem;
  width: auto;
}

.login-eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.72);
}

.login-title {
  margin: 0 0 0.65rem;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 2.45rem);
  line-height: 1.12;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 1px 24px rgba(15, 23, 42, 0.35);
}

.login-rule {
  width: 3rem;
  height: 1px;
  margin: 0 auto 1rem;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
}

.login-lede {
  margin: 0 auto 1.75rem;
  max-width: 20rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(248, 250, 252, 0.88);
  font-weight: 500;
}

.login-card.card {
  text-align: left;
  border: 1px solid rgba(28, 25, 23, 0.1);
  border-radius: calc(var(--app-radius) + 2px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.86) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 20px 50px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.login-card.card:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 24px 56px rgba(15, 23, 42, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.55) inset;
}

.login-card .card-body {
  padding: 1.65rem 1.65rem 1.5rem;
}

.login-card .form-control.app-input {
  padding: 0.72rem 1rem;
  background: rgba(255, 255, 255, 0.92);
}

.login-card .btn.app-btn-primary {
  margin-top: 0.25rem;
  padding-block: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8125rem;
}

body.app-page--login .alert.app-alert {
  text-align: left;
  border-radius: var(--app-radius-sm);
}

/* ——— Weekly meal plan (admin) ——— */
body.app-page--meal-plan {
  --meal-plan-accent: #3b5442;
  --meal-plan-accent-rgb: 59, 84, 66;
  --meal-plan-warm: var(--app-foody-warm);
  --meal-plan-breakfast: var(--app-meal-breakfast);
  --meal-plan-lunch: var(--app-meal-lunch);
  --meal-plan-dinner: var(--app-meal-dinner);
  --meal-plan-surface: rgba(255, 255, 255, 0.94);
}

body.app-page--meal-plan .app-title {
  font-family: var(--app-font-display);
  font-weight: 700;
  letter-spacing: -0.022em;
}

.app-meal-plan-hero {
  display: grid;
  gap: 1.25rem;
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: var(--app-radius);
  border: 1px solid rgba(var(--meal-plan-accent-rgb), 0.18);
  background: linear-gradient(
    135deg,
    rgba(var(--meal-plan-accent-rgb), 0.1) 0%,
    rgba(255, 255, 255, 0.92) 42%,
    rgba(245, 158, 11, 0.08) 100%
  );
  box-shadow: var(--app-shadow);
}

.app-meal-plan-hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--meal-plan-accent);
  margin-bottom: 0.35rem;
}

.app-meal-plan-hero__title {
  font-family: var(--app-font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.5rem;
  color: #0f172a;
}

.app-meal-plan-hero__text {
  font-size: 0.9rem;
  color: #475569;
  margin-bottom: 0;
  max-width: 42rem;
}

.app-meal-plan-hero__text code {
  font-size: 0.78rem;
  padding: 0.12rem 0.4rem;
  border-radius: 0.35rem;
  background: rgba(15, 23, 42, 0.06);
}

.app-meal-plan-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

@media (min-width: 768px) {
  .app-meal-plan-hero {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .app-meal-plan-stats {
    min-width: 14rem;
  }
}

.app-meal-plan-stat {
  padding: 0.75rem 0.85rem;
  border-radius: var(--app-radius-sm);
  border: 1px solid var(--app-border);
  background: var(--meal-plan-surface);
  text-align: center;
}

.app-meal-plan-stat__value {
  display: block;
  font-family: var(--app-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--meal-plan-accent);
}

.app-meal-plan-stat__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-top: 0.2rem;
}

.app-meal-plan-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: var(--app-radius-sm);
  border: 1px solid var(--app-border);
  background: var(--meal-plan-surface);
}

.app-meal-plan-toolbar__search {
  flex: 1 1 12rem;
  min-width: 0;
  position: relative;
}

.app-meal-plan-toolbar__search .bi {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.app-meal-plan-toolbar__search .form-control {
  padding-left: 2.35rem;
}

.app-meal-plan-toolbar__hint {
  font-size: 0.8rem;
  color: #64748b;
  margin: 0;
}

.app-meal-plan-board {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.app-meal-plan-day {
  border-radius: var(--app-radius);
  border: 1px solid var(--app-border);
  background: var(--meal-plan-surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.app-meal-plan-day:hover {
  border-color: rgba(var(--meal-plan-accent-rgb), 0.22);
  box-shadow: var(--app-shadow);
}

.app-meal-plan-day__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.15rem;
  background: linear-gradient(90deg, rgba(var(--meal-plan-accent-rgb), 0.08) 0%, transparent 100%);
  border-bottom: 1px solid var(--app-border);
}

.app-meal-plan-day__name {
  font-family: var(--app-font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: #0f172a;
}

.app-meal-plan-day__badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(var(--meal-plan-accent-rgb), 0.1);
  color: var(--meal-plan-accent);
  border: 1px solid rgba(var(--meal-plan-accent-rgb), 0.15);
}

.app-meal-plan-day__grid {
  display: grid;
  gap: 0;
}

@media (min-width: 992px) {
  .app-meal-plan-day__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.app-meal-plan-slot {
  padding: 1rem 1.1rem 1.05rem;
  border-bottom: 1px solid var(--app-border);
}

@media (min-width: 992px) {
  .app-meal-plan-slot {
    border-bottom: 0;
    border-right: 1px solid var(--app-border);
  }

  .app-meal-plan-slot:last-child {
    border-right: 0;
  }

  .app-meal-plan-day__grid .app-meal-plan-slot {
    min-height: 100%;
  }
}

.app-meal-plan-day:last-child .app-meal-plan-slot:last-child {
  border-bottom: 0;
}

@media (max-width: 991.98px) {
  .app-meal-plan-day .app-meal-plan-slot:last-child {
    border-bottom: 0;
  }
}

.app-meal-plan-slot__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.app-meal-plan-slot__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  flex-shrink: 0;
}

.app-meal-plan-slot--breakfast .app-meal-plan-slot__icon {
  color: var(--meal-plan-breakfast);
  background: rgba(234, 88, 12, 0.12);
}

.app-meal-plan-slot--lunch .app-meal-plan-slot__icon {
  color: var(--meal-plan-lunch);
  background: rgba(202, 138, 4, 0.14);
}

.app-meal-plan-slot--dinner .app-meal-plan-slot__icon {
  color: var(--meal-plan-dinner);
  background: rgba(99, 102, 241, 0.12);
}

.app-meal-plan-slot__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #334155;
  flex: 1;
}

.app-meal-plan-count {
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 1.5rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid var(--app-border);
  text-align: center;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.app-meal-plan-count:not(:empty) {
  min-width: 1.65rem;
}

.app-meal-plan-slot--has-selection .app-meal-plan-count {
  background: rgba(var(--meal-plan-accent-rgb), 0.12);
  color: var(--meal-plan-accent);
  border-color: rgba(var(--meal-plan-accent-rgb), 0.25);
}

.app-meal-plan-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 1.75rem;
  margin-bottom: 0.6rem;
}

.app-meal-plan-selected:empty::before {
  content: "No menus selected";
  font-size: 0.75rem;
  color: #94a3b8;
  font-style: italic;
}

.app-meal-plan-selected__chip {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(var(--meal-plan-accent-rgb), 0.1);
  color: #3730a3;
  border: 1px solid rgba(var(--meal-plan-accent-rgb), 0.18);
}

.app-meal-plan-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-height: 9.5rem;
  overflow-y: auto;
  padding: 0.15rem 0.1rem 0.35rem;
  margin-bottom: 0.55rem;
  scrollbar-width: thin;
}

.app-meal-plan-pill {
  margin: 0;
  cursor: pointer;
}

.app-meal-plan-pill__inner {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
  padding: 0.38rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--app-border);
  background: #fff;
  color: #334155;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
  user-select: none;
}

.app-meal-plan-pill:hover .app-meal-plan-pill__inner {
  border-color: rgba(var(--meal-plan-accent-rgb), 0.35);
  background: #f8fafc;
}

.app-meal-plan-pill input:checked + .app-meal-plan-pill__inner {
  background: linear-gradient(135deg, var(--meal-plan-accent) 0%, var(--app-foody-soft) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 10px rgba(var(--meal-plan-accent-rgb), 0.35);
}

.app-meal-plan-pill input:focus-visible + .app-meal-plan-pill__inner {
  outline: 2px solid var(--meal-plan-accent);
  outline-offset: 2px;
}

.app-meal-plan-pill--inactive .app-meal-plan-pill__inner {
  opacity: 0.72;
  border-style: dashed;
}

.app-meal-plan-pill.is-filter-hidden {
  display: none;
}

.app-meal-plan-slot__actions {
  display: flex;
  gap: 0.35rem;
}

.app-meal-plan-slot__actions .btn {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

.app-meal-plan-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--app-radius);
  border: 1px solid var(--app-border);
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.04);
}

@media (min-width: 768px) {
  .app-meal-plan-footer {
    position: sticky;
    bottom: 0.75rem;
    z-index: 20;
  }
}

.app-meal-plan-footer__note {
  font-size: 0.82rem;
  color: #64748b;
  margin: 0;
  max-width: 36rem;
}

.app-meal-plan-footer__note strong {
  color: #334155;
}

.app-meal-plan-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  border-radius: var(--app-radius);
  border: 1px dashed var(--app-border);
  background: rgba(255, 255, 255, 0.6);
}

.app-meal-plan-empty .bi {
  font-size: 2rem;
  color: #94a3b8;
  margin-bottom: 0.5rem;
}

.app-meal-setup-table-card {
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
}

.app-meal-setup-table thead th {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  white-space: nowrap;
}

.app-meal-setup-table tbody td {
  vertical-align: middle;
  font-size: 0.9rem;
}

.app-meal-setup-table__date {
  min-width: 9.5rem;
}

.app-meal-plan-slot--modal {
  padding: 0.85rem 1rem;
  border-radius: var(--app-radius-sm);
  border: 1px solid rgba(var(--meal-plan-accent-rgb), 0.12);
  background: rgba(255, 255, 255, 0.85);
}

.meal-setup-modal-menus .app-meal-plan-pill.is-filter-hidden {
  display: none;
}

/* Meal setup edit modal: scroll menu list, keep Save/Cancel visible */
#mealSetupEditModal .modal-dialog {
  max-height: calc(100dvh - 2rem);
  margin: 1rem auto;
}

#mealSetupEditModal .modal-dialog-scrollable .app-meal-setup-modal-content {
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#mealSetupEditModal .app-meal-setup-edit-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#mealSetupEditModal .modal-header {
  flex-shrink: 0;
}

#mealSetupEditModal .modal-body {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#mealSetupEditModal .modal-footer {
  flex-shrink: 0;
  background: var(--meal-plan-surface, #fff);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  position: sticky;
  bottom: 0;
  z-index: 1;
}

/* Ingredient suppliers page */
body.app-page--embed {
  background: transparent;
}

body.app-page--embed::before {
  display: none;
}

body.app-page--embed .app-shell {
  max-width: 100%;
}

.app-suppliers-tabnav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: #475569;
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.app-suppliers-tabnav .nav-link:hover {
  color: var(--app-foody-deep);
  background: rgba(var(--app-foody-base-rgb), 0.08);
}

.app-suppliers-tabnav .nav-link.active {
  color: #fff;
  background: linear-gradient(145deg, var(--app-foody-base) 0%, #2d6a4f 100%);
  border-color: rgba(var(--app-foody-base-rgb), 0.35);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.app-suppliers-embed-card {
  overflow: hidden;
}

.app-suppliers-embed-frame {
  display: block;
  width: 100%;
  min-height: 72vh;
  border: 0;
  background: transparent;
}

.app-suppliers-hero {
  overflow: hidden;
  border-color: rgba(var(--app-foody-base-rgb), 0.22);
  background: linear-gradient(
    135deg,
    rgba(var(--app-foody-base-rgb), 0.1) 0%,
    rgba(255, 252, 247, 0.95) 55%
  );
}

.app-suppliers-hero__body {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 1.25rem 1.5rem;
}

.app-suppliers-hero__intro {
  flex: 1 1 16rem;
  min-width: 0;
}

.app-suppliers-hero__eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--app-foody-base);
  margin-bottom: 0.35rem;
}

.app-suppliers-hero__text {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #475569;
  max-width: 36rem;
}

.app-suppliers-quicklinks {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 1 1 18rem;
  min-width: min(100%, 17rem);
  max-width: 22rem;
}

.app-suppliers-quicklink {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: var(--app-radius-sm);
  text-decoration: none;
  color: var(--app-foody-deep) !important;
  border: 1px solid var(--app-border);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.app-suppliers-quicklink:hover {
  transform: translateY(-2px);
  box-shadow: var(--app-shadow);
  border-color: rgba(var(--app-foody-base-rgb), 0.3);
}

.app-suppliers-quicklink__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: #fff;
}

.app-suppliers-quicklink__icon--sky {
  background: linear-gradient(145deg, #0369a1 0%, #38bdf8 100%);
}

.app-suppliers-quicklink__icon--grape {
  background: linear-gradient(145deg, #6d28d9 0%, #a78bfa 100%);
}

.app-suppliers-quicklink__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.app-suppliers-quicklink__title {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.25;
}

.app-suppliers-quicklink__meta {
  display: block;
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.3;
  margin-top: 0.1rem;
}

.app-suppliers-quicklink__arrow {
  flex-shrink: 0;
  color: #94a3b8;
  font-size: 0.85rem;
}

.app-suppliers-stat .card-body {
  padding: 1rem 1.1rem;
}

.app-suppliers-stat__label {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 0.25rem;
}

.app-suppliers-stat__value {
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--app-foody-deep);
  font-variant-numeric: tabular-nums;
}

.app-suppliers-stat--active .app-suppliers-stat__value {
  color: #15803d;
}

.app-suppliers-stat--inactive .app-suppliers-stat__value {
  color: #b45309;
}

.app-suppliers-form-card {
  position: relative;
  overflow: hidden;
}

.app-suppliers-form-card__accent {
  height: 4px;
  background: linear-gradient(90deg, var(--app-foody-base) 0%, #2dd4bf 100%);
}

.app-suppliers-form-card--edit .app-suppliers-form-card__accent {
  background: linear-gradient(90deg, #0369a1 0%, #38bdf8 100%);
}

.app-suppliers-form .input-group-text {
  background: rgba(248, 250, 252, 0.9);
  border-color: var(--app-border);
  color: #64748b;
}

.app-suppliers-active-check {
  padding: 0.65rem 0.85rem;
  border-radius: var(--app-radius-sm);
  background: rgba(248, 250, 252, 0.85);
  border: 1px solid var(--app-border);
}

.app-suppliers-list-card .app-suppliers-table-wrap {
  width: 100%;
  max-width: 100%;
}

.app-suppliers-list-card .app-suppliers-table {
  table-layout: auto;
}

.app-suppliers-modal .modal-content {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow-hover);
}

.app-suppliers-modal .modal-header {
  border-bottom-color: rgba(148, 163, 184, 0.25);
  padding: 1.1rem 1.35rem;
}

.app-suppliers-modal .modal-body {
  padding: 1rem 1.35rem 1.25rem;
}

.app-suppliers-modal .modal-footer {
  border-top-color: rgba(148, 163, 184, 0.25);
  padding: 0.85rem 1.35rem 1.15rem;
}

.app-suppliers-table thead th {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: #64748b;
  border-bottom-width: 1px;
  white-space: nowrap;
  padding-top: 0.5rem;
  padding-bottom: 0.65rem;
}

.app-suppliers-table tbody td {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  vertical-align: middle;
}

.app-suppliers-table__row--active {
  background: rgba(56, 189, 248, 0.08);
}

.app-suppliers-table__row--inactive {
  opacity: 0.72;
}

.app-suppliers-table__name {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.app-suppliers-avatar {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--app-foody-deep);
  background: linear-gradient(
    145deg,
    rgba(var(--app-foody-base-rgb), 0.18) 0%,
    rgba(var(--app-foody-warm-rgb), 0.12) 100%
  );
  border: 1px solid rgba(var(--app-foody-base-rgb), 0.2);
}

.app-suppliers-table__title {
  font-weight: 600;
  color: var(--app-foody-deep);
}

.app-suppliers-table__sub,
.app-suppliers-table__meta {
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.35;
}

.app-suppliers-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.4em 0.65em;
}

.app-suppliers-badge--active {
  background: rgba(22, 163, 74, 0.12) !important;
  color: #15803d !important;
  border: 1px solid rgba(22, 163, 74, 0.25);
}

.app-suppliers-badge--inactive {
  background: rgba(180, 83, 9, 0.1) !important;
  color: #b45309 !important;
  border: 1px solid rgba(180, 83, 9, 0.22);
}

.app-suppliers-count-badge {
  font-weight: 600;
  font-size: 0.75rem;
}

.app-suppliers-empty__icon {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.12);
}

@media (max-width: 991.98px) {
  .app-suppliers-quicklinks {
    max-width: none;
    width: 100%;
  }

  .app-suppliers-hero__body {
    flex-direction: column;
  }
}

@media (max-width: 575.98px) {
  .app-suppliers-table thead {
    display: none;
  }

  .app-suppliers-table tbody tr {
    display: block;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  }

  .app-suppliers-table tbody tr:last-child {
    border-bottom: 0;
  }

  .app-suppliers-table tbody td {
    display: block;
    padding: 0.25rem 0;
    border: 0;
    text-align: left !important;
  }

  .app-suppliers-table tbody td:last-child {
    padding-top: 0.65rem;
  }
}

.app-index-trend-filters {
  padding: 1rem 1.1rem;
  border-radius: 1rem;
  background:
    linear-gradient(160deg, rgba(var(--app-foody-base-rgb), 0.06) 0%, transparent 42%),
    linear-gradient(180deg, #f8faf9 0%, #fff 100%);
  border: 1px solid rgba(var(--app-foody-base-rgb), 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.app-index-trend-filters__grid {
  display: grid;
  grid-template-columns: minmax(15rem, 1.6fr) auto minmax(11rem, 1fr);
  gap: 0.85rem 1.15rem;
  align-items: end;
}

.app-index-trend-filters__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.app-index-trend-filters__field--dates {
  min-width: 15rem;
}

.app-index-trend-filters__field--presets {
  justify-self: start;
}

.app-index-trend-filters__field--metric {
  min-width: 11rem;
}

.app-index-trend-filters__label {
  display: block;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.app-index-trend-filters__date-range {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.45rem;
  border-radius: 0.7rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.app-index-trend-filters__date {
  flex: 1 1 0;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.app-index-trend-filters__date:focus {
  outline: none;
  box-shadow: none !important;
}

.app-index-trend-filters__date-sep {
  flex: 0 0 auto;
  color: #94a3b8;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  user-select: none;
}

.app-index-trend-filters__select {
  border-color: rgba(15, 23, 42, 0.1);
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.app-index-trend-preset-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.22rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.app-index-trend-preset {
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.38rem 0.8rem;
  border-radius: 999px;
  line-height: 1.2;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.app-index-trend-preset:hover {
  color: var(--app-foody-deep);
  background: rgba(var(--app-foody-base-rgb), 0.1);
}

.app-index-trend-preset:active {
  transform: translateY(1px);
}

.app-index-trend-filters__note {
  margin-top: 0.75rem;
  padding-top: 0.7rem;
  border-top: 1px dashed rgba(var(--app-foody-base-rgb), 0.16);
  font-size: 0.8125rem;
  color: #64748b;
}

.app-index-trend-filters__note:empty {
  display: none;
}

.app-index-trends-card.is-loading {
  opacity: 0.72;
  pointer-events: none;
}

.app-index-trend-toolbar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.22rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.app-index-trend-grain {
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.app-index-trend-grain:hover {
  color: var(--app-foody-deep);
  background: rgba(var(--app-foody-base-rgb), 0.1);
}

.app-index-trend-grain.is-active {
  color: #fff;
  background: linear-gradient(145deg, var(--app-foody-base) 0%, #2d6a4f 100%);
  box-shadow: 0 2px 8px rgba(var(--app-foody-base-rgb), 0.28);
}

.app-index-trend-chart-wrap {
  min-height: 280px;
}

.app-index-trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.1rem;
  margin-top: 0.75rem;
  padding: 0 0.15rem;
}

.app-index-trend-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
}

.app-index-trend-legend__swatch {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 999px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.app-index-trend-tooltip__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.35rem 0.5rem;
  align-items: center;
  margin-top: 0.35rem;
}

.app-index-trend-tooltip__swatch {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.app-pr-award-method__label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.app-pr-award-method__toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.22rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.app-pr-award-method__option {
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}

.app-pr-award-method__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.app-pr-award-method__option span {
  display: inline-block;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #64748b;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.app-pr-award-method__option input:checked + span {
  color: #fff;
  background: linear-gradient(145deg, var(--app-foody-base) 0%, #2d6a4f 100%);
  box-shadow: 0 2px 8px rgba(var(--app-foody-base-rgb), 0.28);
}

.app-pr-award-method__option input:focus-visible + span {
  outline: 2px solid var(--app-foody-base);
  outline-offset: 2px;
}

.app-pr-award-method__option input:disabled + span {
  opacity: 0.45;
  cursor: not-allowed;
}

.app-pr-award-card .card-body {
  padding: 1.35rem 1.4rem 1.5rem;
}

.app-pr-award-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(var(--app-foody-base-rgb), 0.12);
}

.app-pr-award-header__eyebrow {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.2rem;
}

.app-pr-award-header__title {
  margin: 0 0 0.55rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--app-foody-deep);
}

.app-pr-award-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
}

.app-pr-award-header__link {
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.app-pr-award-header__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  padding: 0.55rem 0.85rem;
  border-radius: 0.85rem;
  background: linear-gradient(160deg, rgba(var(--app-foody-base-rgb), 0.1) 0%, rgba(var(--app-foody-base-rgb), 0.04) 100%);
  border: 1px solid rgba(var(--app-foody-base-rgb), 0.14);
}

.app-pr-award-header__stat-value {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--app-foody-deep);
  font-variant-numeric: tabular-nums;
}

.app-pr-award-header__stat-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
}

.app-pr-award-existing {
  padding: 0.75rem 0.9rem;
  border-radius: 0.75rem;
  background: rgba(15, 23, 42, 0.03);
  border: 1px dashed rgba(15, 23, 42, 0.1);
}

.app-pr-award-existing__title {
  margin: 0 0 0.45rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #475569;
}

.app-pr-award-existing__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-pr-award-existing__list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  padding: 0.3rem 0;
  font-size: 0.8125rem;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.app-pr-award-existing__list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.app-pr-award-existing__ingredient {
  font-weight: 600;
  color: var(--app-foody-deep);
}

.app-pr-award-existing__detail {
  color: #64748b;
}

.app-pr-award-controls {
  margin-bottom: 1.15rem;
  padding: 1rem 1.05rem;
  border-radius: 1rem;
  background:
    linear-gradient(160deg, rgba(var(--app-foody-base-rgb), 0.06) 0%, transparent 42%),
    linear-gradient(180deg, #f8faf9 0%, #fff 100%);
  border: 1px solid rgba(var(--app-foody-base-rgb), 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.app-pr-award-controls__grid {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(14rem, 1.4fr);
  gap: 1rem 1.25rem;
  align-items: end;
}

.app-pr-award-controls__hint {
  margin-top: 0.45rem;
  font-size: 0.8125rem;
  color: #64748b;
}

.app-pr-award-supplier__select {
  border-color: rgba(15, 23, 42, 0.1);
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.app-pr-award-lines {
  margin-bottom: 1.15rem;
}

.app-pr-award-lines__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.65rem;
}

.app-pr-award-lines__title {
  margin: 0 0 0.15rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--app-foody-deep);
}

.app-pr-award-lines__subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: #64748b;
}

.app-pr-award-lines__summary {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}

.app-pr-award-lines__summary.is-ready {
  color: var(--app-foody-deep);
}

.app-pr-award-lines__summary.is-warning {
  color: #b45309;
}

.app-pr-award-table-wrap {
  border-radius: 0.85rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  overflow: hidden;
  background: #fff;
}

.app-pr-award-table {
  margin-bottom: 0;
}

.app-pr-award-table thead th {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
  background: #f8faf9;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  white-space: nowrap;
}

.app-pr-award-table tbody td {
  vertical-align: middle;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  border-color: rgba(15, 23, 42, 0.06);
}

.app-pr-award-table tbody tr:nth-child(even) {
  background: rgba(var(--app-foody-base-rgb), 0.025);
}

.app-pr-award-table tbody tr.is-row-missing {
  background: rgba(220, 38, 38, 0.04);
}

.app-pr-award-table__ingredient {
  font-weight: 600;
  color: var(--app-foody-deep);
}

.app-pr-award-table__price {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.app-pr-award-table__price.is-empty {
  color: #94a3b8;
}

.app-pr-award-table__price.is-ready {
  color: var(--app-foody-deep);
}

.app-pr-award-table__price.is-missing {
  color: #dc2626;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.app-pr-award-table__note {
  font-size: 0.8125rem;
  color: #64748b;
  max-width: 12rem;
}

.app-pr-award-table__note.is-missing {
  color: #b45309;
}

.app-pr-award-table__note.is-ready {
  color: #475569;
}

.app-pr-award-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(var(--app-foody-base-rgb), 0.1);
}

.app-pr-award-list-card__title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--app-foody-deep);
}

.app-pr-award-list-card__subtitle {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: #64748b;
}

@media (max-width: 767.98px) {
  .app-pr-award-controls__grid {
    grid-template-columns: 1fr;
  }

  .app-pr-award-header__stat {
    align-self: stretch;
    flex-direction: row;
    justify-content: center;
    gap: 0.45rem;
  }

  .app-pr-award-table__note {
    max-width: none;
  }
}

.app-index-trend-tooltip {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  min-width: 10.5rem;
  max-width: min(16rem, 88vw);
  padding: 0.7rem 0.85rem 0.75rem;
  border-radius: 0.65rem;
  background: rgba(22, 32, 26, 0.96);
  color: #f8faf8;
  font-size: 0.8125rem;
  line-height: 1.4;
  pointer-events: none;
  backdrop-filter: blur(8px);
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}

.app-profit-chart-wrap.is-tooltip-visible .app-index-trend-tooltip {
  opacity: 1;
  visibility: visible;
}

.app-index-trend-tooltip__date {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(248, 250, 248, 0.72);
  margin-bottom: 0.45rem;
}

.app-index-trend-tooltip__metric {
  color: rgba(248, 250, 248, 0.88);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 0.2rem;
  white-space: normal;
  word-break: normal;
}

.app-index-trend-tooltip__value {
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.25;
}

.app-index-trend-tooltip__unit {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(248, 250, 248, 0.72);
}

@media (max-width: 991.98px) {
  .app-index-trend-filters__grid {
    grid-template-columns: 1fr 1fr;
  }

  .app-index-trend-filters__field--dates {
    grid-column: 1 / -1;
  }

  .app-index-trend-filters__field--metric {
    grid-column: 1 / -1;
  }
}

@media (max-width: 575.98px) {
  .app-index-trend-filters__grid {
    grid-template-columns: 1fr;
  }

  .app-index-trend-filters__field--dates,
  .app-index-trend-filters__field--metric {
    grid-column: auto;
  }

  .app-index-trend-filters__date-range {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }

  .app-index-trend-filters__date-sep {
    align-self: center;
  }
}

.app-dashboard-toolbar__field--presets .btn-group {
  flex-wrap: nowrap;
}

.app-dashboard-toolbar__field input[type="date"].form-control-sm {
  min-width: 9.5rem;
}

.app-canteen-setup-page .app-shell {
  max-width: 1320px;
}

.app-canteen-setup-shell {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
}

.app-canteen-setup-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.15rem;
  padding: 0.65rem 0.85rem 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(255, 255, 255, 0.94) 100%);
  overflow-x: auto;
  scrollbar-width: thin;
}

.app-canteen-setup-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  padding: 0.72rem 1rem 0.82rem;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 0.75rem 0.75rem 0 0;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  color: #64748b;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.app-canteen-setup-tabs__tab .bi {
  font-size: 1rem;
  opacity: 0.9;
}

.app-canteen-setup-tabs__tab:hover {
  color: var(--app-foody-deep);
  background: rgba(var(--app-foody-base-rgb), 0.07);
}

.app-canteen-setup-tabs__tab.is-active {
  color: var(--app-foody-deep);
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.9) inset;
  position: relative;
}

.app-canteen-setup-tabs__tab.is-active::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--app-foody-base) 0%, #2d6a4f 100%);
}

.app-canteen-setup-panel {
  min-height: 12rem;
  padding: 1.25rem 1.35rem 1.5rem;
}

.app-canteen-setup-panel__intro {
  margin-bottom: 1.15rem;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.app-canteen-setup-panel__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

body.app-page.app-canteen-setup-page .app-canteen-setup.app-reveal,
body.app-page.app-canteen-setup-page .app-canteen-setup-panel__content,
body.app-page.app-canteen-setup-page .app-canteen-setup-panel__content .card {
  opacity: 1;
  transform: none;
}

@media (max-width: 575.98px) {
  .app-canteen-setup-tabs {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }

  .app-canteen-setup-tabs__tab {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    font-size: 0.8125rem;
  }

  .app-canteen-setup-panel {
    padding: 1rem 0.9rem 1.15rem;
  }
}