/* ============================================================================
   Brand overrides — load AFTER Bootstrap so these win.
   Bootstrap 5.2.3 compiles its colours into bootstrap.min.css, so its classes (.btn-primary,
   .alert-*, .text-*, .bg-*, .form-*) never read our tokens on their own. This file points every
   Bootstrap colour the app uses at the --fs-* tokens (MudBlazor gets them through PortionPilotMudTheme), so the design system (#1028)
   reaches them too. Values here are var() only; the *-rgb triplets are the tokens' own values,
   because Bootstrap's utilities need rgb numbers, not a colour.
   ============================================================================ */

:root {
  --bs-body-font-family: var(--fs-font-family);
  --bs-body-color: var(--fs-text-primary);
  --bs-body-color-rgb: 26, 26, 26;
  --bs-body-bg: var(--fs-bg-page);

  --bs-primary: var(--fs-primary);
  --bs-primary-rgb: 179, 18, 78;
  --bs-secondary: var(--fs-text-secondary);
  --bs-secondary-rgb: 75, 73, 69;
  --bs-success: var(--fs-success);
  --bs-success-rgb: 26, 26, 26;
  --bs-info: var(--fs-text-secondary);
  --bs-info-rgb: 75, 73, 69;
  --bs-warning: var(--fs-warning);
  --bs-warning-rgb: 131, 90, 1;
  --bs-danger: var(--fs-error);
  --bs-danger-rgb: 180, 74, 0;
  --bs-light: var(--fs-bg-tertiary);
  --bs-light-rgb: 246, 246, 244;
  --bs-dark: var(--fs-text-primary);
  --bs-dark-rgb: 26, 26, 26;

  --bs-link-color: var(--fs-primary-text);
  --bs-link-hover-color: var(--fs-primary-text-active);
  --bs-border-color: var(--fs-border-default);
  --bs-code-color: var(--fs-text-primary); /* <code> was Bootstrap pink (the DELETE MY ACCOUNT chip) */

  --bs-border-radius-sm: var(--fs-radius-sm);
  --bs-border-radius: var(--fs-radius-md);
  --bs-border-radius-lg: var(--fs-radius-lg);
  --bs-border-radius-xl: var(--fs-radius-xl);
  --bs-border-radius-pill: var(--fs-radius-pill);
}

/* ── Focus: one visible ring everywhere, no Bootstrap blue glow. MudBlazor's reset
   (button:focus { outline: none }) and Bootstrap's .btn:focus-visible { outline: 0 } both outrank a
   bare :focus-visible, so the button selectors are named. ── */
:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn-check:focus-visible + .btn,
.btn-close:focus-visible,
a:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
  outline: 2px solid var(--fs-border-focus);
  outline-offset: 2px;
}

/* A MudBlazor checkbox's real input is invisible (opacity 0), so its ring is drawn on the visible box (#1100). */
.mud-checkbox:has(.mud-checkbox-input:focus-visible) > .mud-button-root {
  outline: 2px solid var(--fs-border-focus);
  outline-offset: 2px;
}

.btn-close:focus {
  box-shadow: none;
}

.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-focus-box-shadow: none;
  --bs-btn-border-radius: var(--fs-radius-md);
}

.btn-sm {
  --bs-btn-border-radius: var(--fs-radius-md);
}

.btn-lg {
  --bs-btn-border-radius: var(--fs-radius-lg);
}

/* Tap targets (#1167): Bootstrap's .btn is 38px and .btn-sm 31px; on a phone or any touch screen every
   button and the menu toggle get the design system's 44px. Flex centring keeps the label in the middle
   of the taller box instead of at the top. */
@media (max-width: 768px), (pointer: coarse) {
  .btn,
  .navbar-toggler {
    min-height: var(--fs-mobile-tap-target-sm);
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Tap targets (#1101): MudBlazor's number-field steppers are 24x22 and unset their own minimum size. Same
   selector as MudBlazor's rule; this file loads later, so it wins. */
.mud-input-control.mud-input-number-control .mud-input-numeric-spin button {
  min-width: 24px;
  min-height: 24px;
}

/* The one main action: a Beet pill. */
.btn-primary,
.btn-success {
  --bs-btn-color: var(--fs-text-inverse);
  --bs-btn-bg: var(--fs-primary);
  --bs-btn-border-color: var(--fs-primary);
  --bs-btn-hover-color: var(--fs-text-inverse);
  --bs-btn-hover-bg: var(--fs-primary-hover);
  --bs-btn-hover-border-color: var(--fs-primary-hover);
  --bs-btn-active-color: var(--fs-text-inverse);
  --bs-btn-active-bg: var(--fs-primary-active);
  --bs-btn-active-border-color: var(--fs-primary-active);
  /* Disabled pill (spec v11): flat tone, quiet label, full opacity so it never reads as a faded Beet. */
  --bs-btn-disabled-color: var(--fs-disabled-text);
  --bs-btn-disabled-bg: var(--fs-disabled-bg);
  --bs-btn-disabled-border-color: var(--fs-border-hover);
  --bs-btn-disabled-opacity: 1;
  --bs-btn-border-radius: var(--fs-radius-pill);
}

.btn-outline-primary,
.btn-outline-success {
  --bs-btn-color: var(--fs-primary-text);
  --bs-btn-border-color: var(--fs-primary-text);
  --bs-btn-hover-color: var(--fs-text-inverse);
  --bs-btn-hover-bg: var(--fs-primary);
  --bs-btn-hover-border-color: var(--fs-primary);
  --bs-btn-active-color: var(--fs-text-inverse);
  --bs-btn-active-bg: var(--fs-primary-active);
  --bs-btn-active-border-color: var(--fs-primary-active);
  --bs-btn-disabled-color: var(--fs-text-muted);
  --bs-btn-disabled-border-color: var(--fs-border-hover);
}

/* Secondary: ink label on a tonal surface. */
.btn-secondary,
.btn-light,
.btn-outline-secondary,
.btn-dark,
.btn-info {
  --bs-btn-color: var(--fs-text-primary);
  --bs-btn-bg: var(--fs-bg-tertiary);
  --bs-btn-border-color: var(--fs-bg-tertiary);
  --bs-btn-hover-color: var(--fs-text-primary);
  --bs-btn-hover-bg: var(--fs-border-default);
  --bs-btn-hover-border-color: var(--fs-border-default);
  --bs-btn-active-color: var(--fs-text-primary);
  --bs-btn-active-bg: var(--fs-border-hover);
  --bs-btn-active-border-color: var(--fs-border-hover);
  --bs-btn-disabled-color: var(--fs-text-muted);
  --bs-btn-disabled-bg: var(--fs-bg-tertiary);
  --bs-btn-disabled-border-color: var(--fs-border-hover);
}

/* Outline secondaries keep a real edge: a tonal fill vanishes on tonal rows and the dew page. */
.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-info {
  --bs-btn-color: var(--fs-text-primary);
  --bs-btn-bg: var(--fs-bg-primary);
  --bs-btn-border-color: var(--fs-border-control);
  --bs-btn-hover-color: var(--fs-text-primary);
  --bs-btn-hover-bg: var(--fs-bg-tertiary);
  --bs-btn-hover-border-color: var(--fs-text-muted);
  --bs-btn-active-color: var(--fs-text-primary);
  --bs-btn-active-bg: var(--fs-border-default);
  --bs-btn-active-border-color: var(--fs-text-muted);
  --bs-btn-disabled-color: var(--fs-text-muted);
  --bs-btn-disabled-bg: var(--fs-bg-primary);
  --bs-btn-disabled-border-color: var(--fs-border-default);
}

/* Destructive: an orange label, never a filled button. */
.btn-danger,
.btn-outline-danger {
  --bs-btn-color: var(--fs-error);
  --bs-btn-bg: var(--fs-bg-primary);
  --bs-btn-border-color: var(--fs-error); /* same destructive edge as the MudBlazor delete button */
  --bs-btn-hover-color: var(--fs-error);
  --bs-btn-hover-bg: var(--fs-error-light);
  --bs-btn-hover-border-color: var(--fs-error);
  --bs-btn-active-color: var(--fs-error);
  --bs-btn-active-bg: var(--fs-error-light);
  --bs-btn-active-border-color: var(--fs-error);
  --bs-btn-disabled-color: var(--fs-text-muted);
  --bs-btn-disabled-bg: var(--fs-bg-primary);
  --bs-btn-disabled-border-color: var(--fs-border-hover);
}

.btn-warning,
.btn-outline-warning {
  --bs-btn-color: var(--fs-warning-text);
  --bs-btn-bg: var(--fs-warning-light);
  --bs-btn-border-color: var(--fs-warning-light);
  --bs-btn-hover-color: var(--fs-warning-text);
  --bs-btn-hover-bg: var(--fs-warning-light);
  --bs-btn-hover-border-color: var(--fs-warning);
  --bs-btn-active-color: var(--fs-warning-text);
  --bs-btn-active-bg: var(--fs-warning-light);
  --bs-btn-active-border-color: var(--fs-warning);
  --bs-btn-disabled-color: var(--fs-text-muted);
  --bs-btn-disabled-bg: var(--fs-bg-primary);
  --bs-btn-disabled-border-color: var(--fs-border-hover);
}

.btn-link {
  --bs-btn-color: var(--fs-primary-text);
  --bs-btn-hover-color: var(--fs-primary-text-active);
  --bs-btn-active-color: var(--fs-primary-text-active);
}

/* ── Alerts: tinted surface, ink text; the state colour lives in the icon and heading ── */
.alert {
  --bs-alert-border-radius: var(--fs-radius-md);
  --bs-alert-border-color: transparent;
  --bs-alert-color: var(--fs-text-primary);
}

.alert-primary,
.alert-info,
.alert-secondary,
.alert-light,
.alert-success {
  --bs-alert-bg: var(--fs-bg-tertiary);
}

.alert-warning {
  --bs-alert-bg: var(--fs-warning-light);
  --bs-alert-border-color: var(--fs-warning);
}

/* An error must look like one: orange text and edge, not ink on a near-white tint. */
.alert-danger {
  --bs-alert-bg: var(--fs-error-light);
  --bs-alert-color: var(--fs-error-text);
  --bs-alert-border-color: var(--fs-error);
}

.alert-danger .alert-heading,
.alert-danger > i,
.alert-danger .fas {
  color: var(--fs-error);
}

.alert-warning > i,
.alert-warning .fas {
  color: var(--fs-warning);
}

/* ── Text: 5.2.3 hard-codes .text-muted, the rest read the *-rgb triplets above ── */
.text-muted {
  color: var(--fs-text-muted) !important;
}

/* A warning badge is a tint with amber text, never dark text on the amber itself (~2.8:1). */
.badge.bg-warning {
  background-color: var(--fs-warning-light) !important;
  color: var(--fs-warning-text) !important;
}

/* 5.2.3 hard-codes its invalid-field red. */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--fs-error);
}

/* Bootstrap's own :focus rule (0,3,0) repaints the invalid field in its compiled red. */
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--fs-error);
  box-shadow: 0 0 0 3px var(--fs-error-a18);
}

.invalid-feedback {
  color: var(--fs-error-text);
}

/* ── Forms ── */
/* A field's edge is how you find the field: 3:1 against white (WCAG 1.4.11, #1099). An add-on joined to
   a field shares its resting edge, or Bootstrap's #ced4da (1.5:1) breaks the outline halfway (#1244). */
.form-control,
.form-select,
.form-check-input,
.input-group-text {
  border-color: var(--fs-border-control);
}

.form-control,
.form-select {
  border-radius: var(--fs-radius-md);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--fs-border-focus);
  box-shadow: none;
}

.form-check-input:checked {
  background-color: var(--fs-primary);
  border-color: var(--fs-primary);
}

.form-check-input:focus {
  border-color: var(--fs-border-focus);
  box-shadow: none;
}

/* ── Surfaces ── */
.card {
  --bs-card-border-color: var(--fs-border-default);
  --bs-card-border-radius: var(--fs-radius-lg);
  --bs-card-inner-border-radius: calc(var(--fs-radius-lg) - 1px);
  --bs-card-cap-bg: var(--fs-bg-primary);
}

.modal {
  --bs-modal-border-radius: var(--fs-radius-sheet);
  --bs-modal-inner-border-radius: calc(var(--fs-radius-sheet) - 1px);
  --bs-modal-border-width: 0;
}

.modal-backdrop {
  --bs-backdrop-bg: var(--fs-scrim);
  --bs-backdrop-opacity: 0.4;
}

.offcanvas-backdrop {
  background-color: var(--fs-scrim);
}

.offcanvas-backdrop.show {
  opacity: 0.4;
}

.progress {
  --bs-progress-bg: var(--fs-border-default);
  --bs-progress-bar-bg: var(--fs-text-primary);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--fs-primary);
  --bs-dropdown-border-radius: var(--fs-radius-md);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--fs-primary);
}
/* ── Tom Select paints its menu with the page background; the page is dew now, menus stay white ── */
.ts-dropdown,
.ts-dropdown .ts-dropdown-content {
  background-color: var(--fs-bg-primary);
}

/* The row Enter will pick (#1075, Claude Design d00260c3). Tom Select fills .active with --bs-tertiary-bg, which
   Bootstrap 5.2.3 never defines, so the row had no fill. Hover sets .active too, so this covers both. The Beet ring
   carries the state (6.75:1 on the menu); the tint softens it. Doubled class: wins whatever order the vendor sheet
   loads in. Light and dark: the tokens flip on their own. */
.ts-dropdown.ts-dropdown .active {
  background-color: var(--fs-primary-light);
  color: var(--fs-text-primary);
  box-shadow: inset 0 0 0 2px var(--fs-border-focus);
}

/* The grey Custom pill vanishes into the tint (1.04:1): a hairline keeps it, as on the phone list (#2461). */
.ts-dropdown.ts-dropdown .active .ts-custom-pill {
  box-shadow: inset 0 0 0 1px var(--fs-border-control);
}

/* "Add chicken breast…" is an action: Beet text, not the vendor's 50% grey (2.7:1). After .active, so it keeps
   Beet when highlighted. */
.ts-dropdown.ts-dropdown .create {
  color: var(--fs-primary-text);
}

/* Forced colours drop box-shadow: draw the state as an outline. */
@media (forced-colors: active) {
  .ts-dropdown.ts-dropdown .active {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}

/* An outline button in an input group now has a white fill and sits above the field (z-index 2),
   so it painted over the field's 1px .invalid outline. The invalid field comes first. */
.input-group > .invalid {
  position: relative;
  z-index: 3;
}

/* MudBlazor's filled and outlined buttons are pills like Bootstrap's, whatever their colour, so a
   Cancel beside a Save shares its shape (the theme radius of 12px is for controls). */
.mud-button-filled,
.mud-button-outlined {
  border-radius: var(--fs-radius-pill);
}

/* Blazor's reconnect overlay reads MudBlazor's page colour (now dew); the dialog is a white block. */
#components-reconnect-modal {
  background-color: var(--fs-bg-primary) !important;
}

/* A dialog footer is white, so a tonal Cancel (1.08:1) vanishes, and on phones the sheet's nuclear rule in
   mobile-dropdown-fix.css paints it white on white. Footer secondaries keep a control edge. */
.modal-footer .btn-secondary,
.sheet-footer .btn-secondary {
  --bs-btn-border-color: var(--fs-border-control);
  --bs-btn-hover-border-color: var(--fs-text-muted);
}

/* Footer actions sit side by side, so they share one shape: pills. */
.modal-footer .btn,
.sheet-footer .btn {
  --bs-btn-border-radius: var(--fs-radius-pill);
}

/* Blocks are flat in the locked system: Bootstrap's shadow utilities (page shell, cards, questionnaire
   inputs) draw nothing. Sheets and dialogs take their one elevation from --fs-shadow-lg / -dialog. */
.shadow,
.shadow-sm {
  box-shadow: none !important;
}

/* MudBlazor papers (Elevation 1–4) and filled buttons are blocks and actions, so they are flat too. Menus
   and popovers (elevation 8+) keep Mud's shadow: they float over the page like a dialog. */
.mud-elevation-1,
.mud-elevation-2,
.mud-elevation-3,
.mud-elevation-4,
.mud-button-filled,
.mud-button-filled:hover,
.mud-button-filled:active,
.mud-button-filled:focus-visible {
  box-shadow: none;
}

/* TomSelect builds its dropdown outside the components' scoped CSS, so the vendor shadow won there.
   It floats like a dialog. (Doubled class: wins whatever order the vendor sheet loads in.) */
.ts-dropdown.ts-dropdown {
  box-shadow: var(--fs-shadow-dialog);
}

/* Native radios and checkboxes (e.g. the size sheet's "Just this day") take Beet, the selection colour,
   instead of the browser's blue. */
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--fs-primary);
}

/* A flat MudPaper that still needs an edge (a white card on a white sheet). Inset, so the paper keeps
   its size — Mud's Outlined adds a 1px border that pushed the whole custom-food form down. */
.pp-outline {
  box-shadow: inset 0 0 0 1px var(--fs-border-default);
}

/* Artwork with a dark twin (#1179, #1569): <span class="pp-art"> holds the light <img> and the dark one and adds no
   box, so the one shown lays out as before. Only hiding rules, so each image keeps its own display. A <picture>
   could not follow a chosen theme: its <source media> sees only the phone's setting.
   The dark twin hides unless the page is dark; dark-mode.css hides the light one when it is. */
.pp-art {
  display: contents;
}

:root[data-theme="light"] .pp-art > img.pp-art-dark {
  display: none;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .pp-art > img.pp-art-dark {
    display: none;
  }
}

/* A printout stays light, as the dark sheets do. */
@media print {
  :root .pp-art > img.pp-art-dark {
    display: none;
  }
}