/* ============================================================================
   Dark mode for the libraries (#1179): Bootstrap 5.2.3, Tom Select and MudBlazor bake colours that the
   --fs-* tokens cannot reach. Loaded right after brand-overrides.css. Everything else follows the tokens.
   Loaded for screens only, and only when the page is dark: ThemeHead's head script sets this link's media from
   the theme (#1569), so this file carries no media query of its own.
   ============================================================================ */

/* ── Dark mode (#1179): the colours Bootstrap 5.2.3 compiles in, which no token can reach.
    The tokens flip on their own; this block re-points only what Bootstrap bakes: its *-rgb triplets
    (the text- and bg- utilities), white component surfaces and dark-grey text. ── */
:root {
  --bs-body-color-rgb: 241, 240, 237;
  --bs-body-bg-rgb: 11, 19, 13;
  --bs-primary-rgb: 211, 49, 106;
  --bs-secondary-rgb: 204, 202, 198;
  --bs-success-rgb: 241, 240, 237;
  --bs-info-rgb: 204, 202, 198;
  --bs-warning-rgb: 235, 179, 83;
  --bs-danger-rgb: 246, 138, 79;
  --bs-light-rgb: 46, 50, 47;
  --bs-dark-rgb: 241, 240, 237;
  --bs-border-color-translucent: var(--fs-border-default);
}

.card { --bs-card-bg: var(--fs-bg-primary); }
/* A labelled bar fills with the ink, which turns light: its label takes the inverse text. */
.progress { --bs-progress-bar-color: var(--fs-text-on-inverse); }
/* Mud's default tooltip is its grey with "dark text", which the palette below makes dark: draw it as the
   inverse block, like the app's own tooltips (the arrow reads the same variable). */
.mud-tooltip.mud-tooltip-default { --mud-palette-gray-darker: var(--fs-bg-inverse); }
/* A dark page needs a heavier backdrop to set a dialog apart (the design's 60%). */
.modal-backdrop { --bs-backdrop-opacity: 0.6; }
.offcanvas-backdrop.show { opacity: 0.6; }
.modal { --bs-modal-bg: var(--fs-bg-primary); --bs-modal-color: var(--fs-text-primary); }
.offcanvas, .offcanvas-bottom { --bs-offcanvas-bg: var(--fs-bg-primary); --bs-offcanvas-color: var(--fs-text-primary); }
.dropdown-menu {
  --bs-dropdown-bg: var(--fs-bg-primary);
  --bs-dropdown-color: var(--fs-text-primary);
  --bs-dropdown-link-color: var(--fs-text-primary);
  --bs-dropdown-link-hover-bg: var(--fs-bg-hover);
  --bs-dropdown-link-hover-color: var(--fs-text-primary);
  --bs-dropdown-border-color: var(--fs-border-default);
}
.list-group { --bs-list-group-bg: var(--fs-bg-primary); --bs-list-group-color: var(--fs-text-primary); --bs-list-group-border-color: var(--fs-border-default); }
.table {
  --bs-table-color: var(--fs-text-primary);
  --bs-table-border-color: var(--fs-border-default);
  --bs-table-striped-color: var(--fs-text-primary);
  --bs-table-striped-bg: var(--fs-shade-a05);
  --bs-table-hover-color: var(--fs-text-primary);
  --bs-table-hover-bg: var(--fs-shade-a08);
  --bs-table-active-color: var(--fs-text-primary);
}
.popover { --bs-popover-bg: var(--fs-bg-primary); --bs-popover-body-color: var(--fs-text-primary); }
.toast { --bs-toast-bg: var(--fs-bg-primary); --bs-toast-color: var(--fs-text-primary); }

.form-control,
.form-select,
.form-check-input,
.input-group-text {
  color: var(--fs-text-primary);
  background-color: var(--fs-bg-primary);
}
/* Bootstrap bakes white into :focus and grey into :disabled at 0,2,0; answer both states. */
.form-control:focus,
.form-select:focus {
  color: var(--fs-text-primary);
  background-color: var(--fs-bg-primary);
}
.form-control:disabled,
.form-select:disabled {
  color: var(--fs-disabled-text);
  background-color: var(--fs-disabled-bg);
}
/* Icons drawn as SVG backgrounds cannot take a CSS colour: repeat them with a light stroke (#cccac6,
   --fs-text-secondary in dark). The select chevron is Bootstrap's own, held once on
   .form-select so the validation states can stack their icon on it; the others outrank scoped rules. */
.form-select {
  --dark-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cccac6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-image: var(--dark-select-chevron);
}
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"],
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"] {
  background-image: var(--dark-select-chevron),
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23f68a4f'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23f68a4f' stroke='none'/%3e%3c/svg%3e");
}
.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"] {
  background-image: var(--dark-select-chevron),
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23f1f0ed' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}
.navbar .custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23cccac6' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* A white surface class follows the page's blocks; its !important must be answered with one. */
.bg-white { background-color: var(--fs-bg-primary) !important; }
/* bg-dark follows the ink, which turns light: white text on it takes the inverse pair's text. */
.bg-dark.text-white { color: var(--fs-text-on-inverse) !important; }
/* A light outline on the bg-dark bar (the eaten-meal Undo): the bar turns light, so the outline darkens. */
.bg-dark .btn-outline-light {
  --bs-btn-color: var(--fs-text-on-inverse);
  --bs-btn-border-color: var(--fs-text-on-inverse);
  --bs-btn-hover-color: var(--fs-bg-inverse);
  --bs-btn-hover-bg: var(--fs-text-on-inverse);
  --bs-btn-hover-border-color: var(--fs-text-on-inverse);
  --bs-btn-active-color: var(--fs-bg-inverse);
  --bs-btn-active-bg: var(--fs-text-on-inverse);
  --bs-btn-active-border-color: var(--fs-text-on-inverse);
  --bs-btn-disabled-color: var(--fs-text-on-inverse);
  --bs-btn-disabled-border-color: var(--fs-text-on-inverse);
}
.link-secondary,
.link-secondary:hover,
.link-secondary:focus { color: var(--fs-text-secondary) !important; }
/* Tom Select (the food search) bakes #343a40 text and light chips, and attaches its dropdown to <body>,
   where no scoped rule reaches it. */
.ts-control,
.ts-control input,
.ts-dropdown { color: var(--fs-text-primary); }
.ts-dropdown { border-color: var(--fs-border-default); }
.ts-dropdown .active { background-color: var(--fs-bg-hover); }
.ts-dropdown .optgroup-header,
.ts-dropdown .create,
.ts-wrapper .dropdown-header-close { color: var(--fs-text-muted); }
.ts-dropdown [data-selectable] .highlight { background: var(--fs-warning-light); color: var(--fs-warning-text); }
.ts-wrapper.multi .ts-control > div {
  background: var(--fs-bg-tertiary);
  border-color: var(--fs-border-default);
  color: var(--fs-text-primary);
}
.plugin-dropdown_input .dropdown-input { border-color: var(--fs-border-default); }
/* Filled Mud controls keep the Beet fill with white text, like every other main button. */
.mud-button-filled-primary,
.mud-fab-primary,
.mud-chip-filled.mud-chip-color-primary {
  --mud-palette-primary: var(--fs-primary);
  --mud-palette-primary-rgb: 211, 49, 106;
  --mud-palette-primary-text: var(--fs-text-inverse);
  --mud-palette-primary-darken: var(--fs-primary-active);
}
/* Solid badge fills lighten in dark mode, so their text darkens. (Warning badges are a tint, set in the bridge.) */
.badge.bg-success,
.badge.bg-danger,
.badge.bg-secondary,
.badge.bg-info,
.badge.bg-dark { --bs-badge-color: var(--fs-text-on-status); }
/* Bootstrap's Beet text utilities read the fill triplet; Beet text takes the lighter token. */
.text-primary,
.link-primary { color: var(--fs-primary-text) !important; }
/* The close cross is Bootstrap's black SVG: swap in the same cross in the dark ink (#f1f0ed), rather
   than filtering the element, which would also grey its focus ring. Doubled to outrank scoped rules. */
.btn-close.btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f1f0ed'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}
/* MudBlazor writes its palette (PortionPilotMudTheme, light only) as :root variables in a <style> it
   renders late in the page; :root:root outranks it without a second C# palette. */
:root:root {
  /* Mud colours both text and fills with "primary"; in dark mode it is the text Beet (4.5:1 on a block),
     and the filled controls below take the Beet fill back on their own element. */
  --mud-palette-primary: var(--fs-primary-text);
  --mud-palette-primary-rgb: 240, 121, 152;
  --mud-palette-primary-text: var(--fs-text-on-inverse);
  --mud-palette-primary-darken: var(--fs-primary-text-hover);
  --mud-palette-primary-lighten: var(--fs-primary-text-active);
  --mud-palette-primary-hover: rgba(var(--mud-palette-primary-rgb), 0.12);
  --mud-palette-secondary: var(--fs-text-secondary);
  --mud-palette-secondary-rgb: 204, 202, 198;
  --mud-palette-secondary-text: var(--fs-text-on-inverse);
  --mud-palette-secondary-darken: var(--fs-text-muted);
  --mud-palette-secondary-lighten: var(--fs-text-primary);
  --mud-palette-secondary-hover: rgba(var(--mud-palette-secondary-rgb), 0.12);
  --mud-palette-tertiary: var(--fs-text-secondary);
  --mud-palette-tertiary-rgb: 204, 202, 198;
  --mud-palette-tertiary-text: var(--fs-text-on-inverse);
  --mud-palette-tertiary-darken: var(--fs-text-muted);
  --mud-palette-tertiary-lighten: var(--fs-text-primary);
  --mud-palette-tertiary-hover: rgba(var(--mud-palette-tertiary-rgb), 0.12);
  --mud-palette-info: var(--fs-text-secondary);
  --mud-palette-info-rgb: 204, 202, 198;
  --mud-palette-info-text: var(--fs-text-on-inverse);
  --mud-palette-info-darken: var(--fs-text-muted);
  --mud-palette-info-lighten: var(--fs-text-primary);
  --mud-palette-info-hover: rgba(var(--mud-palette-info-rgb), 0.12);
  --mud-palette-success: var(--fs-success);
  --mud-palette-success-rgb: 241, 240, 237;
  --mud-palette-success-text: var(--fs-text-on-inverse);
  --mud-palette-success-darken: var(--fs-text-body);
  --mud-palette-success-lighten: var(--fs-text-primary);
  --mud-palette-success-hover: rgba(var(--mud-palette-success-rgb), 0.12);
  --mud-palette-warning: var(--fs-warning);
  --mud-palette-warning-rgb: 235, 179, 83;
  --mud-palette-warning-text: var(--fs-text-on-status);
  --mud-palette-warning-darken: var(--fs-warning);
  --mud-palette-warning-lighten: var(--fs-warning);
  --mud-palette-warning-hover: rgba(var(--mud-palette-warning-rgb), 0.12);
  --mud-palette-error: var(--fs-error);
  --mud-palette-error-rgb: 246, 138, 79;
  --mud-palette-error-text: var(--fs-text-on-status);
  --mud-palette-error-darken: var(--fs-error);
  --mud-palette-error-lighten: var(--fs-error);
  --mud-palette-error-hover: rgba(var(--mud-palette-error-rgb), 0.12);
  --mud-palette-dark: var(--fs-text-primary);
  --mud-palette-dark-rgb: 241, 240, 237;
  --mud-palette-dark-text: var(--fs-text-on-inverse);
  --mud-palette-dark-darken: var(--fs-text-body);
  --mud-palette-dark-lighten: var(--fs-text-primary);
  --mud-palette-dark-hover: rgba(var(--mud-palette-dark-rgb), 0.12);
  --mud-palette-text-primary: var(--fs-text-primary);
  --mud-palette-text-primary-rgb: 241, 240, 237;
  --mud-palette-text-secondary: var(--fs-text-secondary);
  --mud-palette-text-disabled: var(--fs-disabled-text);
  --mud-palette-action-default: var(--fs-text-secondary);
  --mud-palette-action-default-hover: rgba(var(--mud-palette-text-primary-rgb), 0.08);
  --mud-palette-action-disabled: var(--fs-disabled-text);
  --mud-palette-action-disabled-background: var(--fs-disabled-bg);
  --mud-palette-surface: var(--fs-bg-primary);
  --mud-palette-surface-rgb: 28, 31, 28;
  --mud-palette-background: var(--fs-bg-page);
  --mud-palette-background-gray: var(--fs-bg-secondary);
  --mud-palette-drawer-background: var(--fs-bg-primary);
  --mud-palette-drawer-text: var(--fs-text-primary);
  --mud-palette-drawer-icon: var(--fs-text-secondary);
  --mud-palette-appbar-background: var(--fs-bg-primary);
  --mud-palette-appbar-text: var(--fs-text-primary);
  --mud-palette-lines-default: var(--fs-border-default);
  --mud-palette-lines-inputs: var(--fs-border-control);
  --mud-palette-table-lines: var(--fs-border-default);
  --mud-palette-table-striped: rgba(var(--mud-palette-text-primary-rgb), 0.03);
  --mud-palette-table-hover: rgba(var(--mud-palette-text-primary-rgb), 0.06);
  --mud-palette-divider: var(--fs-border-default);
  --mud-palette-divider-rgb: 49, 53, 50;
  --mud-palette-divider-light: rgba(var(--mud-palette-text-primary-rgb), 0.8);
  --mud-palette-skeleton: rgba(var(--mud-palette-text-primary-rgb), 0.11);
  --mud-palette-overlay-light: rgba(var(--mud-palette-surface-rgb), 0.5);
  --mud-native-html-color-scheme: dark; /* Mud inputs' spinners, autofill and pickers follow the page */
}

/* ── The light artwork gives way to its dark twin (#1179, #1569); brand-overrides.css hides the twin otherwise. ── */
:root .pp-art > img.pp-art-light {
  display: none;
}