/* ============================================================================
   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);
  --bs-link-hover-color: var(--fs-primary-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;
}

.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);
  --bs-btn-border-color: var(--fs-primary);
  --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);
  --bs-btn-hover-color: var(--fs-primary-active);
  --bs-btn-active-color: var(--fs-primary-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). */
.form-control,
.form-select,
.form-check-input {
  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);
}

/* 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);
}