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

/* 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-text-primary);
  --bs-backdrop-opacity: 0.4;
}

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

.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);
}