/* ============================================================================
   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.
   ============================================================================ */

/* ── 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. ── */
@media screen and (prefers-color-scheme: dark) {
  :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);
  }
  .input-group-text { border-color: var(--fs-border-control); }
  /* 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; the others outrank scoped rules. */
  .form-select {
    background-image: 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");
  }
  .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: 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"),
      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: 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"),
      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");
  }
  .compound-action:has(.compound-action__button:disabled) .compound-action__selector {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccac6' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%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 */
  }
}