/** stylesheets/src/day.css **/
/* ============================================================
   AZIMUTH — Bright Light Theme Overrides
   Loaded after main.css and activated when html[data-theme='day']
   ------------------------------------------------------------
   The first block below is the CANONICAL DAY TOKEN FILE: the
   complete day-mode override of every `@theme:color` token from
   variables.css (plus day values for the `@theme:structural`
   shadows). It is parsed by ThemeTokenCatalog / the coverage spec
   and embedded into the AI theme-generation prompt for day mode.
   Selector-level rules further down are structural light-mode
   styling, NOT tokens.
   ============================================================ */

html[data-theme='day'] {
  /* @theme:color */
  --color-ocean-deepest: #eef4ff;
  --color-ocean-deep: #f8fbff;
  --color-ocean-mid: #ffffff;
  --color-ocean-surface: #edf4ff;
  --color-ocean-light: #dbe9ff;
  --color-ocean-mist: #9bb8e6;

  --color-gold: #8a6412;
  --color-gold-light: #a27416;
  --color-gold-dark: #6c4d0d;
  --color-gold-subtle: rgba(138, 100, 18, 0.12);

  --color-text-primary: #10233f;
  --color-text-secondary: #274a78;
  --color-text-muted: #45638d;
  --color-text-tertiary: var(--color-text-secondary);

  --color-border: rgba(25, 52, 87, 0.24);
  --color-border-gold: rgba(138, 100, 18, 0.35);

  --color-danger: #b53a2a;
  --color-danger-light: rgba(181, 58, 42, 0.12);

  --color-warning: #d9821a;
  --color-warning-light: rgba(217, 130, 26, 0.12);
  --color-warning-text: #7a4708;

  --color-success: #0f7c4b;
  --color-success-light: rgba(15, 124, 75, 0.12);

  --color-info: #1f6fa8;
  --color-info-soft: rgba(31, 111, 168, 0.14);
  --color-accent: rgba(38, 100, 235, 0.55);
  --color-accent-primary: #1e58cf;
  --color-ocean-accent: var(--color-info);

  /* Surface elevation ladder — flipped to bright card surfaces. */
  --color-surface: rgba(25, 52, 87, 0.05);
  --surface-base: #f8fbff;
  --surface-elevated: #ffffff;
  --surface-elevated-strong: #edf4ff;
  --surface-elevated-stronger: rgba(25, 52, 87, 0.12);
  --surface-border: rgba(25, 52, 87, 0.16);
  --surface-border-subtle: rgba(25, 52, 87, 0.08);

  --color-avatar-ring: #ffffff;
  /* Stays light on purpose — the chip tint behind it is saturated in both themes. */
  --color-avatar-initials: #ffffff;

  /* Ship's Log category accents. The dark-theme palette is too
     saturated for white backgrounds — these values are picked to
     keep WCAG-AA contrast against `--color-ocean-mid` (#ffffff). */
  --events-color-navigation: #1565c0;
  --events-color-fuel: #a27416;
  --events-color-water: #0e7c8f;
  --events-color-engine: #1d7c4a;
  --events-color-maintenance: #2f7c4d;
  --events-color-weather: #3a64a9;
  --events-color-wildlife: #117a55;
  --events-color-guests: #8a3aa2;
  --events-color-safety: #b8451d;
  --events-color-mooring: #0f6ea0;
  --events-color-provisioning: #8d5e0e;
  --events-color-general: #4a5e80;
  --events-color-checklist: #2360a1;

  /* @theme:structural */
  --shadow-card: 0 2px 18px rgba(7, 34, 79, 0.15);
  --shadow-modal: 0 10px 38px rgba(7, 34, 79, 0.22);
}

html[data-theme='day'] body {
  background-color: var(--color-ocean-deepest);
  background-image: radial-gradient(ellipse at 20% 0%, rgba(159, 190, 237, 0.48) 0%, transparent 62%),
  radial-gradient(ellipse at 85% 100%, rgba(195, 216, 248, 0.35) 0%, transparent 64%);
}

html[data-theme='day'] .navbar {
  box-shadow: 0 2px 12px rgba(7, 34, 79, 0.15);
}

html[data-theme='day'] .startup-overlay {
  background: radial-gradient(ellipse at center, rgba(171, 199, 240, 0.36) 0%, rgba(233, 242, 255, 0.98) 65%);
}

html[data-theme='day'] .account-menu-item-danger {
  color: #a93f33;
}

html[data-theme='day'] .account-menu-item-danger:hover {
  color: #7a2017;
}

html[data-theme='day'] .chat-message-row-own {
  background: rgba(138, 100, 18, 0.12);
  border-color: rgba(138, 100, 18, 0.4);
}

html[data-theme='day'] .chat-message-row-own .chat-message-meta {
  color: #7b5710;
}

html[data-theme='day'] .btn-primary {
  color: #ffffff;
}

html[data-theme='day'] .type-vessel {
  background: rgba(4, 133, 163, 0.16);
  color: #0d6680;
  border-color: rgba(4, 133, 163, 0.35);
}

html[data-theme='day'] .type-engine {
  background: rgba(184, 79, 34, 0.15);
  color: #8d3e20;
  border-color: rgba(184, 79, 34, 0.32);
}

html[data-theme='day'] .type-filter {
  background: rgba(32, 142, 76, 0.15);
  color: #1c6d40;
  border-color: rgba(32, 142, 76, 0.3);
}

html[data-theme='day'] .type-pump {
  background: rgba(98, 57, 176, 0.14);
  color: #56319c;
  border-color: rgba(98, 57, 176, 0.3);
}

html[data-theme='day'] .type-impeller {
  background: rgba(11, 102, 196, 0.14);
  color: #17599c;
  border-color: rgba(11, 102, 196, 0.3);
}

html[data-theme='day'] .type-anode {
  background: rgba(161, 124, 14, 0.15);
  color: #7a5d09;
  border-color: rgba(161, 124, 14, 0.3);
}

html[data-theme='day'] .type-battery {
  background: rgba(4, 128, 91, 0.14);
  color: #09684a;
  border-color: rgba(4, 128, 91, 0.3);
}

html[data-theme='day'] .type-appliance {
  background: rgba(169, 94, 16, 0.15);
  color: #8a4f10;
  border-color: rgba(169, 94, 16, 0.3);
}

html[data-theme='day'] .type-document {
  background: rgba(72, 85, 192, 0.14);
  color: #36459c;
  border-color: rgba(72, 85, 192, 0.3);
}

html[data-theme='day'] .type-other {
  background: rgba(95, 107, 128, 0.14);
  color: #455066;
  border-color: rgba(95, 107, 128, 0.3);
}

html[data-theme='day'] .type-water {
  background: rgba(8, 60, 120, 0.14);
  color: #0d4e7a;
  border-color: rgba(8, 60, 120, 0.3);
}

html[data-theme='day'] .type-fire {
  background: rgba(160, 55, 0, 0.15);
  color: #8c3000;
  border-color: rgba(160, 55, 0, 0.3);
}

html[data-theme='day'] .type-power {
  background: rgba(140, 120, 0, 0.15);
  color: #6e5f00;
  border-color: rgba(140, 120, 0, 0.3);
}

html[data-theme='day'] .type-transmission {
  background: rgba(150, 110, 30, 0.15);
  color: #7a570f;
  border-color: rgba(150, 110, 30, 0.3);
}

html[data-theme='day'] .type-drive {
  background: rgba(40, 80, 140, 0.14);
  color: #1f4f8c;
  border-color: rgba(40, 80, 140, 0.3);
}

html[data-theme='day'] .component-subtype-badge {
  background: rgba(95, 107, 128, 0.12);
  color: #455066;
  border-color: rgba(95, 107, 128, 0.25);
}

html[data-theme='day'] .type-fuel_tank {
  background: rgba(168, 110, 18, 0.15);
  color: #8a5a0e;
  border-color: rgba(168, 110, 18, 0.3);
}

html[data-theme='day'] .type-freshwater_tank {
  background: rgba(8, 60, 120, 0.14);
  color: #0d4e7a;
  border-color: rgba(8, 60, 120, 0.3);
}

html[data-theme='day'] .type-grey_water_tank {
  background: rgba(95, 107, 128, 0.14);
  color: #455066;
  border-color: rgba(95, 107, 128, 0.3);
}

html[data-theme='day'] .type-blackwater_tank {
  background: rgba(96, 70, 44, 0.16);
  color: #5e4326;
  border-color: rgba(96, 70, 44, 0.3);
}

html[data-theme='day'] .type-electronics {
  background: rgba(10, 128, 120, 0.14);
  color: #0a6b64;
  border-color: rgba(10, 128, 120, 0.3);
}

html[data-theme='day'] .relationship-tree .tree-node-label-button:hover {
  border-color: var(--color-border-gold);
  background: #f4f8ff;
  box-shadow: 0 2px 12px rgba(7, 34, 79, 0.14);
}

html[data-theme='day'] .relationship-tree .tree-node-label-button:active,
html[data-theme='day'] .relationship-tree .tree-node-label-button.tree-node-label-active {
  background: #e9f1ff;
  border-color: var(--color-border-gold);
  box-shadow: inset 0 0 0 1px rgba(138, 100, 18, 0.38);
}

/* ============================================================
   Events ("Ship's Log") — bright-light theme overrides
   ------------------------------------------------------------
   The `--events-color-*` day re-tints live in the canonical
   day token block at the top of this file.
   ============================================================ */
html[data-theme='day'] .events-bridge {
  background: #ffffff;
  box-shadow: 0 2px 14px rgba(7, 34, 79, 0.10);
}

html[data-theme='day'] .events-entry {
  background: #ffffff;
  box-shadow: 0 1px 8px rgba(7, 34, 79, 0.08);
}

html[data-theme='day'] .events-entry:hover {
  background: #f4f8ff;
}

html[data-theme='day'] .events-time-row,
html[data-theme='day'] .events-omnibox {
  background: #f4f8ff;
}

html[data-theme='day'] .events-action-tile {
  background: #f4f8ff;
}

html[data-theme='day'] .events-action-tile:hover:not(:disabled) {
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(7, 34, 79, 0.12);
}

html[data-theme='day'] .events-entry-category-badge {
  background: #f4f8ff;
}

html[data-theme='day'] .events-metric {
  color: var(--events-color-fuel);
}

/* Universal Log Modal — day theme */
html[data-theme='day'] .events-accordion-section {
  background: #f8fbff;
}

html[data-theme='day'] .events-accordion-section-expanded {
  background: #ffffff;
}

html[data-theme='day'] .events-accordion-header-included {
  background: #ffffff;
}

html[data-theme='day'] .events-universal-modal-actions {
  background: #ffffff;
}

html[data-theme='day'] .scroll-wheel,
html[data-theme='day'] .scroll-wheel-pair,
html[data-theme='day'] .form-control-compact {
  background: #ffffff;
}

html[data-theme='day'] .unit-pill {
  background: #ffffff;
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

html[data-theme='day'] .unit-pill:hover {
  background: color-mix(in srgb, var(--color-gold-light) 8%, #ffffff);
}

html[data-theme='day'] .unit-pill-active {
  background: color-mix(in srgb, var(--color-gold-light) 20%, #ffffff);
  border-color: var(--color-gold-light);
  color: color-mix(in srgb, var(--color-gold-light) 60%, #000000);
}

html[data-theme='day'] .events-toggle-pill,
html[data-theme='day'] .events-species-quick-pick {
  background: #f4f8ff;
}

html[data-theme='day'] .events-toggle-pill-active,
html[data-theme='day'] .events-species-quick-pick-active {
  background: rgba(138, 100, 18, 0.14);
  color: #6c4d0d;
}

/* Swap the embedded SVG checkmark colour for the day theme's darker gold */
html[data-theme='day'] input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6l2.8 2.8 4.2-4.8' stroke='%238a6412' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Home dashboard (day theme) ──────────────────────────────────────────
   Light-mode treatment for the bento canvas and widgets. The dark default
   uses dark surfaces with a faint white grid; the day theme inverts that
   to a soft sky background with a subtle navy grid and ivory widget cards.
*/
html[data-theme='day'] .home-canvas {
  background-color: var(--color-ocean-deep);
  background-image:
    linear-gradient(to right, rgba(25, 52, 87, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(25, 52, 87, 0.10) 1px, transparent 1px);
  border-color: var(--color-border);
}

html[data-theme='day'] .home-widget {
  background: #ffffff;
  border-color: var(--color-border);
  box-shadow: var(--shadow-card);
  color: var(--color-text-primary);
}

html[data-theme='day'] .home-widget-invalid {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 2px rgba(181, 58, 42, 0.45), var(--shadow-card);
}

html[data-theme='day'] .home-widget-header {
  background: var(--color-ocean-light);
  border-bottom-color: var(--color-border);
  color: var(--color-text-primary);
}

html[data-theme='day'] .home-widget-body {
  color: var(--color-text-secondary);
}

html[data-theme='day'] .home-widget-resize {
  background:
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 50%,
      rgba(25, 52, 87, 0.45) 50%,
      rgba(25, 52, 87, 0.45) 60%,
      transparent 60%,
      transparent 70%,
      rgba(25, 52, 87, 0.45) 70%,
      rgba(25, 52, 87, 0.45) 80%,
      transparent 80%
    );
}

/* ── Day theme — Home dashboard Drive widget ─────────────────────────────
   The default (night) styling assumes a dark surface and uses translucent
   white accents that disappear on a light ivory widget card. Re-anchor the
   widget's surfaces, dividers, and hover states to the day palette here so
   the file browser is legible inside a `.home-widget` on a light theme.
*/
html[data-theme='day'] .home-drive-widget {
  color: var(--color-text-primary);
}

html[data-theme='day'] .home-drive-widget-toolbar {
  border-bottom-color: var(--color-border);
}

html[data-theme='day'] .home-drive-widget-breadcrumbs-segment {
  color: var(--color-text-secondary);
}

html[data-theme='day'] .home-drive-widget-breadcrumbs-segment:hover:not(:disabled) {
  background: rgba(25, 52, 87, 0.08);
  color: var(--color-text-primary);
}

html[data-theme='day'] .home-drive-widget-breadcrumbs-segment-current,
html[data-theme='day'] .home-drive-widget-breadcrumbs-segment-current:hover {
  /* `--color-ocean-deep` is INVERTED in the day palette (it's a near-white
     surface tone, not the dark navy of the night palette), so we explicitly
     pick the day text-primary color here. Without this the disabled "current
     folder" button rendered as near-white text on a near-white card. */
  color: var(--color-text-primary);
  background: transparent;
}

html[data-theme='day'] .home-drive-widget-breadcrumbs-separator {
  color: var(--color-text-muted);
}

html[data-theme='day'] .home-drive-widget-empty,
html[data-theme='day'] .home-drive-widget-loading {
  color: var(--color-text-muted);
}

html[data-theme='day'] .home-drive-widget-list thead th {
  background: var(--color-ocean-light);
  color: var(--color-text-primary);
  border-bottom-color: var(--color-border);
}

html[data-theme='day'] .home-drive-widget-list thead th:hover {
  color: var(--color-text-primary);
}

html[data-theme='day'] .home-drive-widget-list-column-active {
  color: var(--color-text-primary);
}

html[data-theme='day'] .home-drive-widget-list tbody tr:hover {
  background: rgba(25, 52, 87, 0.06);
}

html[data-theme='day'] .home-drive-widget-list tbody td {
  border-bottom-color: var(--color-border);
}

html[data-theme='day'] .home-drive-widget-list-icon {
  color: var(--color-text-secondary);
}

html[data-theme='day'] .home-drive-widget-list-row-folder .home-drive-widget-list-icon,
html[data-theme='day'] .home-drive-widget-tile-folder .home-drive-widget-tile-icon {
  /* Folders are accented with the day-theme gold tone (same as `.btn-primary`
     etc), since `--color-ocean-deep` is a NEAR-WHITE surface in this palette
     and would render folder icons invisible on the widget card. */
  color: var(--color-gold);
}

html[data-theme='day'] .home-drive-widget-list-cell-muted {
  color: var(--color-text-muted);
}

html[data-theme='day'] .home-drive-widget-tile {
  color: var(--color-text-primary);
}

html[data-theme='day'] .home-drive-widget-tile:hover {
  background: rgba(25, 52, 87, 0.06);
  border-color: var(--color-border);
}

html[data-theme='day'] .home-drive-widget-tile-thumbnail {
  background: var(--color-ocean-light);
}

html[data-theme='day'] .home-drive-widget-tile-icon {
  color: var(--color-text-secondary);
}

html[data-theme='day'] .home-drive-widget-tile-label {
  color: var(--color-text-primary);
}

/* ── Day theme — Home dashboard Ship's Log widget ────────────────────────
   The default (night) Ship's Log widget styling pins its dividers via
   `--surface-border` with white-tint fallbacks that disappear on a light
   widget card. Re-anchor the pill-bar bottom border to the day palette so
   the visual separation between filter pills and the feed survives.
*/
html[data-theme='day'] .home-ship-log-widget-pill-bar {
  border-bottom-color: var(--color-border);
}

/* ── Day theme — Home dashboard Ship's Log + widget ──────────────────────
   The widget body re-uses `.events-action-tile`, `.events-time-button`,
   and `.events-omnibox` whose day overrides already live further up in
   this file. The only widget-local override needed is the gear-button
   hover swatch — the night version of `--color-gold-subtle` is too dim
   on a light card and the day-theme one is already defined in this
   file's `:root` block, so we can lean on the existing CSS variable.
*/
html[data-theme='day'] .home-ship-log-create-widget-settings-button {
  color: var(--color-text-muted);
}

html[data-theme='day'] .home-ship-log-create-widget-settings-button:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
  background: var(--color-gold-subtle);
}

html[data-theme='day'] .home-ship-log-create-widget-empty {
  color: var(--color-text-muted);
}

/* ── Day theme — Settings modal: Ship's Log pill reorder list ────────────
   The night-mode rows pin themselves to the `--surface-elevated` (dark)
   surface. On day theme that fallback is wrong (renders dark cards on a
   bright modal). Re-pin to the day palette + adjust hover/drop-target
   accents so the drag interaction reads correctly on a light surface.
*/
html[data-theme='day'] .settings-ship-log-pill-row {
  background: var(--color-ocean-light);
  border-color: var(--color-border);
}

html[data-theme='day'] .settings-ship-log-pill-row-drop-target {
  border-color: var(--color-gold);
  /* `--color-gold-subtle` is the day-palette amber wash (12% opacity over
     the muted gold). Reads clearly as "drop here" without overpowering
     the modal's bright surface. */
  background: var(--color-gold-subtle);
}

html[data-theme='day'] .settings-ship-log-pill-row-drag-handle:hover {
  color: var(--color-text-primary);
  background: rgba(25, 52, 87, 0.08);
}

html[data-theme='day'] .settings-ship-log-pill-row-tile-preview {
  background: var(--color-ocean-deep);
  border-color: var(--color-border);
}

html[data-theme='day'] .settings-ship-log-pill-row-visibility-hint {
  color: var(--color-text-muted);
}

/* ── Day theme — Home dashboard Inventory widget ─────────────────────────
   The widget's filter banner, low-supply highlights, and section-count
   badge are all amber-themed. On the night theme we lean on pale amber
   text + low-opacity amber wash because the surface is dark; on the day
   theme the surface is near-white so we flip to DARKER amber text on
   slightly more saturated washes. The amber palette tracks the
   `--color-warning` family already defined for both themes.
*/

/* Filter banner — the visually-loud "you're looking at a sub-count"
   indicator. Both themes need this to be UNMISSABLE, so we keep a
   saturated amber treatment in day mode — just inverted for contrast
   on a light surface. */
html[data-theme='day'] .home-inventory-widget-filter-banner {
  background: var(--color-warning-light);
  border-color: color-mix(in srgb, var(--color-warning) 60%, transparent);
  border-left-color: var(--color-warning);
  color: var(--color-warning-text);
  /* The night-theme box-shadow used a dark amber glow; on a light card a
     subtle warm shadow keeps the banner feeling elevated without
     overshadowing the rest of the widget. */
  box-shadow: 0 2px 10px rgba(217, 130, 26, 0.18);
}

html[data-theme='day'] .home-inventory-widget-filter-banner-icon {
  color: var(--color-warning);
}

html[data-theme='day'] .home-inventory-widget-filter-banner-text strong {
  color: #5a3406; /* deeper amber for the location-name emphasis */
}

html[data-theme='day'] .home-inventory-widget-filter-banner-clear {
  background: rgba(25, 52, 87, 0.06);
  border-color: rgba(25, 52, 87, 0.18);
  color: var(--color-warning-text);
}

html[data-theme='day'] .home-inventory-widget-filter-banner-clear:hover {
  background: rgba(25, 52, 87, 0.12);
  border-color: rgba(25, 52, 87, 0.32);
}

/* Location pill bar — anchor the dividers and pill outlines to the day
   border palette. The ACTIVE pill (amber-on-white) reads correctly
   without any override (saturated amber is theme-independent here). */
html[data-theme='day'] .home-inventory-widget-pill-bar {
  border-bottom-color: var(--color-border);
}

html[data-theme='day'] .home-inventory-widget-pill {
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

html[data-theme='day'] .home-inventory-widget-pill:hover:not(.home-inventory-widget-pill-active) {
  background: var(--color-ocean-light);
  border-color: var(--color-border-gold);
  color: var(--color-text-primary);
}

/* Section headers are sticky-positioned; their bg must match the widget
   surface or rows scrolling underneath will bleed through. The night
   sticky bg was `--color-ocean-deep` (dark), which on day theme is a
   near-white surface — close to but not exactly the widget card. Pin
   to pure white to match the day-theme `.home-widget` background. */
html[data-theme='day'] .home-inventory-widget-section-header {
  background: #ffffff;
}

html[data-theme='day'] .home-inventory-widget-section-icon {
  color: var(--color-text-secondary);
}

html[data-theme='day'] .home-inventory-widget-low-supply-icon {
  color: var(--color-warning);
}

html[data-theme='day'] .home-inventory-widget-section-title {
  color: var(--color-text-secondary);
}

html[data-theme='day'] .home-inventory-widget-section-count {
  background: var(--color-ocean-light);
  color: var(--color-text-secondary);
}

html[data-theme='day'] .home-inventory-widget-section-count-attention {
  background: var(--color-warning-light);
  color: var(--color-warning-text);
}

html[data-theme='day'] .home-inventory-widget-section-empty {
  color: var(--color-text-muted);
}

html[data-theme='day'] .home-inventory-widget-section-empty i {
  color: var(--color-success);
}

/* Row separators — the night theme used a faint white-tint that's
   invisible on a light surface. Anchor to the day border palette so
   rows stay visually distinguishable. */
html[data-theme='day'] .home-inventory-widget-row {
  border-bottom-color: var(--color-border);
}

html[data-theme='day'] .home-inventory-widget-row-name {
  color: var(--color-text-primary);
}

html[data-theme='day'] .home-inventory-widget-row-quantity-value {
  color: var(--color-text-primary);
}

html[data-theme='day'] .home-inventory-widget-row-quantity-unit,
html[data-theme='day'] .home-inventory-widget-row-quantity-min {
  color: var(--color-text-muted);
}

/* Low-supply rows: keep the amber left-accent strong in both themes,
   but swap the pale-amber quantity text for the day-theme warning
   colour so the number remains legible against a near-white row bg. */
html[data-theme='day'] .home-inventory-widget-row-low-supply {
  border-left-color: var(--color-warning);
  background: var(--color-warning-light);
}

html[data-theme='day'] .home-inventory-widget-row-low-supply .home-inventory-widget-row-quantity-value,
html[data-theme='day'] .home-inventory-widget-row-low-supply-highlight .home-inventory-widget-row-quantity-value {
  color: var(--color-warning-text);
}

html[data-theme='day'] .home-inventory-widget-row-low-supply-highlight {
  background: color-mix(in srgb, var(--color-warning) 6%, transparent);
}

/* Error banner — the night-theme used pale-pink text on a dark red wash.
   On day we flip to a darker red text on a lighter red wash so the
   message stays readable against the widget's bright surface. */
html[data-theme='day'] .home-inventory-widget-error {
  background: var(--color-danger-light);
  border-color: color-mix(in srgb, var(--color-danger) 50%, transparent);
  color: var(--color-danger);
}

/* ── Day theme — Home dashboard Checklists widget ────────────────────────
   The widget body re-uses theme-aware canonical variables for most colors
   (`--color-border`, `--color-text-*`, `--color-ocean-*`, `--color-success`,
   `--events-color-navigation`) so it largely adapts automatically. The
   overrides below cover the cases where the night-theme baseline used a
   value that doesn't translate well to a near-white widget card.
*/

/* Sticky section header bg — `--color-ocean-deep` is a near-white surface
   on day (`#f8fbff`) but the day-theme `.home-widget` card is pure
   `#ffffff`, so the off-white sticky header would draw a faint line as
   rows scroll past. Pin to pure white to match the card. (Mirrors the
   same fix applied to the inventory widget's sticky headers.) */
html[data-theme='day'] .home-checklist-widget-section-header {
  background: #ffffff;
}

/* Recently-run icon — `--color-text-muted` is already theme-aware
   (deeper navy on day, soft gray on night) so no override needed for
   the icon color; the same applies to the section-title text. The
   running-icon uses `--events-color-navigation` which is themed
   automatically (`#1565c0` on day). */

/* Section-count attention badge — `color-mix` over
   `--events-color-navigation` works in both themes, but on day the
   resulting 22%-opacity wash over the deep-navy hue produces a
   slightly-too-saturated chip. Bump the wash opacity down so the
   badge stays readable on the widget's bright surface. */
html[data-theme='day'] .home-checklist-widget-section-count-attention {
  background: color-mix(in srgb, var(--events-color-navigation) 14%, transparent);
  color: var(--events-color-navigation);
}

/* Empty-section hint icon — uses `--color-success` already, which is
   defined for both themes (green-700 on day, green-500 on night).
   No override needed. */

/* Row hover (running rows) — `var(--color-ocean-light)` is theme-aware,
   but on day it's `#dbe9ff` (very light blue) which can wash out the
   row's text. Bump to a slightly stronger blue wash for hover-clarity. */
html[data-theme='day'] .home-checklist-widget-row-running:hover {
  background: rgba(25, 52, 87, 0.06);
}

/* Progress bar track — `--color-ocean-surface` is a light blue on day
   (`#edf4ff`); a touch darker gives the bar visible contrast on the
   widget card. */
html[data-theme='day'] .home-checklist-widget-row-progress-bar {
  background: rgba(25, 52, 87, 0.10);
}

/* Error banner — same flip as the inventory widget: dark red text on
   light red wash so the message stays readable on the bright card. */
html[data-theme='day'] .home-checklist-widget-error {
  background: var(--color-danger-light);
  border-color: color-mix(in srgb, var(--color-danger) 50%, transparent);
  color: var(--color-danger);
}

/* ──────────────────────────────────────────────────────────────────────────
   Home dashboard "Maintenance" widget — day-theme overrides
   ──────────────────────────────────────────────────────────────────────────
*/

/* Sticky section header bg — same fix as the inventory + checklist widgets:
   `--color-ocean-deep` is `#f8fbff` on day, but the `.home-widget` card is
   pure `#ffffff`, so the off-white header would draw a faint line as rows
   scroll past. Pin to pure white to match the card. */
html[data-theme='day'] .home-maintenance-widget-section-header {
  background: #ffffff;
}

/* Section-count attention chips — `color-mix` over `--color-danger` /
   `--color-warning` at 22% produces an overly-saturated wash on the bright
   white card. Drop the wash opacity to keep the chip readable. */
html[data-theme='day'] .home-maintenance-widget-section-count-late {
  background: color-mix(in srgb, var(--color-danger) 14%, transparent);
  color: var(--color-danger);
}

html[data-theme='day'] .home-maintenance-widget-section-count-due {
  background: color-mix(in srgb, var(--color-warning) 16%, transparent);
  /* On day the warning amber is lighter, so use a darker warning shade for
     the chip text to keep AA-level contrast against the wash. */
  color: color-mix(in srgb, var(--color-warning) 70%, #000);
}

/* Row hover — `var(--color-ocean-light)` is the very-light blue `#dbe9ff`
   on day which washes out the row text. Bump to a subtler navy tint that
   provides hover affordance without bleaching the row content. (Mirrors the
   checklist widget's hover-clarity fix.) */
html[data-theme='day'] .home-maintenance-widget-row-button:hover {
  background: rgba(25, 52, 87, 0.06);
}

/* Late/Due row tint — the danger and warning hues are darker on day so the
   plain `var(--color-danger)` / `var(--color-warning)` text-on-white is
   already AA-readable; no additional override needed. The left border
   stripe also stays sufficiently visible against the white card.

   Empty-state icon — `--color-success` is theme-aware (green-700 on day,
   green-500 on night); no override needed. */

/* ── Home dashboard "Chat" widget ───────────────────────────────────────
   The widget defaults assume a dark canvas (white-with-low-alpha row
   backgrounds, neon-blue accent pill). On day mode we keep the structure
   but flip the canvas-derived colours so the row backgrounds read against
   a white card and the channel pill stays legible without being garish. */
html[data-theme='day'] .home-chat-widget-row {
  background: rgba(0, 0, 0, 0.02);
}

html[data-theme='day'] .home-chat-widget-row:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.08);
}

html[data-theme='day'] .home-chat-widget-row-own-message {
  background: rgba(38, 100, 235, 0.06);
}

html[data-theme='day'] .home-chat-widget-row-own-message:hover {
  background: rgba(38, 100, 235, 0.10);
}

html[data-theme='day'] .home-chat-widget-row-channel-pill {
  background: rgba(38, 100, 235, 0.12);
  color: #1e58cf;
  border-color: rgba(38, 100, 235, 0.30);
}

html[data-theme='day'] .home-chat-widget-error {
  background: rgba(217, 56, 56, 0.10);
  border-color: rgba(217, 56, 56, 0.28);
  color: #a02323;
}

/* ============================================================
   THEME AUDIT — additional day overrides
   ------------------------------------------------------------
   The selectors below were identified by a day/night gap audit
   as places where the night-mode rule uses a hardcoded
   `rgba(255, 255, 255, X)` wash (a "white tint on dark surface"
   accent that disappears on a light card). The surface token
   family is defined in variables.css with day values in the
   canonical day token block above, so token references resolve
   correctly in both themes; the per-selector overrides below
   handle the remaining hardcoded night washes.
   ============================================================ */

/* ── Drive page — directory tree (sidebar) ────────────────────────────
   The hover wash on tree toggles, labels, and file nodes is a
   white-tint-on-dark accent that is invisible against the day-theme
   bright surface. Anchor to a faint navy tint for hover affordance. */
html[data-theme='day'] .drive-directory-tree-toggle:hover,
html[data-theme='day'] .drive-directory-tree-label:hover,
html[data-theme='day'] .drive-directory-file-node:hover {
  background: rgba(25, 52, 87, 0.06);
}

/* ── Settings → Home Layouts (settings modal rows) ────────────────────
   `.settings-home-layout-row` (the editable list item) and
   `.settings-home-layout-row-name-input` (its inline rename input) both
   reference `--surface-elevated` / `--surface-base`, which is undefined
   globally — so on day theme they fall through to dark hex literals
   (#1f2630 / #14181f) and render dark inside a bright modal. */
html[data-theme='day'] .settings-home-layout-row {
  background: var(--color-ocean-light);
  border-color: var(--color-border);
}

html[data-theme='day'] .settings-home-layout-row-name-input {
  background: #ffffff;
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

/* ── Navbar — home-layout selector dots / add button ──────────────────
   Same `--surface-*` fallback issue: the per-layout dots and the
   "+ add layout" button render as dark pellets on the day-theme navbar
   (which is light). Re-anchor surfaces and dashed border to the day
   palette so they read as subtle controls, not floating dark blobs. */
html[data-theme='day'] .home-layout-selector-dot {
  background: var(--color-ocean-light);
  border-color: var(--color-border);
}

html[data-theme='day'] .home-layout-selector-add {
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

/* ── Home dashboard "Calendar" widget — day-theme overrides ───────────
   The widget defines ~12 selectors that anchor surface tints, dividers,
   day-cell backgrounds, and chips to `--surface-elevated{,-strong,
   -stronger}` and `--surface-border{,-subtle}`. None of those tokens
   are defined in :root or the day block, so every reference falls
   through to its dark hex fallback. Result: the whole widget renders
   as a dark calendar embedded in a white card.
   The category/task pill colors (late/due/upcoming/completed) ride on
   saturated `--color-danger / --color-warning / --color-info /
   --color-success` which are already theme-aware (or theme-independent
   for `--color-info`), so they don't need additional overrides — they
   just need a legible surface to sit on. */
html[data-theme='day'] .home-calendar-widget-toolbar {
  border-bottom-color: var(--color-border);
}

html[data-theme='day'] .home-calendar-widget-toolbar-button,
html[data-theme='day'] .home-calendar-widget-toolbar-select {
  background: var(--color-ocean-light);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

html[data-theme='day'] .home-calendar-widget-toolbar-button:hover {
  background: color-mix(in srgb, var(--color-ocean-light) 80%, #ffffff);
}

html[data-theme='day'] .home-calendar-widget-grid {
  /* The grid `background` is what shows through the 1px gaps between
     day cells, so it's effectively the cell-divider color. */
  background: var(--color-border);
  border-color: var(--color-border);
}

html[data-theme='day'] .home-calendar-widget-day {
  background: #ffffff;
}

html[data-theme='day'] .home-calendar-widget-day:hover {
  background: var(--color-ocean-light);
}

html[data-theme='day'] .home-calendar-widget-day-count {
  background: rgba(25, 52, 87, 0.10);
  color: var(--color-text-secondary);
}

html[data-theme='day'] .home-calendar-widget-selected-strip {
  border-top-color: var(--color-border);
}

html[data-theme='day'] .home-calendar-widget-selected-strip-row {
  background: var(--color-ocean-light);
}

html[data-theme='day'] .home-calendar-widget-selected-strip-row:hover {
  background: color-mix(in srgb, var(--color-ocean-light) 70%, #ffffff);
}

/* Untagged "uncategorized" tag chip (the saturated late/due/upcoming/
   completed variants are theme-independent and stay as-is). */
html[data-theme='day'] .home-calendar-widget-selected-strip-row-tag {
  background: rgba(25, 52, 87, 0.10);
  color: var(--color-text-secondary);
}

/* ── Forms — read-only static value affordance ─────────────────────────
   `.form-static-value` is the boxed "this is a read-only display of a
   value" element. Its white-tint background disappears entirely on the
   day-theme white modal/card surface. Re-anchor to a faint blue tint
   so the box still reads as a value-display, not running text. */
html[data-theme='day'] .form-static-value {
  background: rgba(25, 52, 87, 0.05);
}

/* ── Status / progress / work-log badges ──────────────────────────────
   Every colored badge variant uses a material-light text color
   (#ef9a9a, #ffd54f, #ffb74d, #81c784, #7ab8e8) over a low-opacity
   wash of the same hue. That's deliberately optimized for AA contrast
   against the night theme's dark surfaces, but on a near-white day
   surface those pale text colors fail contrast badly. Swap each text
   color for a darker, theme-appropriate shade of the same hue and
   firm up the wash so the badge stays visually distinct.

   The "unstarted" / "dismissed" gray variants use a white-tint
   background that goes invisible on day; re-anchor those to a faint
   navy tint. */
html[data-theme='day'] .progress-badge.progress-unstarted,
html[data-theme='day'] .work-log-status-badge.work-log-status-unstarted {
  background: rgba(25, 52, 87, 0.05);
  color: var(--color-text-muted);
}

html[data-theme='day'] .progress-badge.progress-dismissed {
  background: rgba(25, 52, 87, 0.05);
  color: var(--color-text-secondary);
}

html[data-theme='day'] .status-badge.status-created,
html[data-theme='day'] .progress-badge.progress-complete,
html[data-theme='day'] .work-log-status-badge.work-log-status-completed {
  background: rgba(15, 124, 75, 0.12);
  color: #0f6e43;
  border-color: rgba(15, 124, 75, 0.32);
}

html[data-theme='day'] .progress-badge.progress-started,
html[data-theme='day'] .work-log-status-badge.work-log-status-started {
  background: rgba(36, 99, 161, 0.10);
  color: #1b5b9b;
  border-color: rgba(36, 99, 161, 0.32);
}

html[data-theme='day'] .status-badge.status-warn {
  background: rgba(217, 130, 26, 0.12);
  color: #8a5408;
  border-color: rgba(217, 130, 26, 0.35);
}

html[data-theme='day'] .status-badge.status-due {
  background: rgba(217, 130, 26, 0.16);
  color: #7a4708;
  border-color: rgba(217, 130, 26, 0.40);
}

html[data-theme='day'] .status-badge.status-late {
  background: rgba(181, 58, 42, 0.12);
  color: #8a2a1d;
  border-color: rgba(181, 58, 42, 0.40);
}

/* ── Maintenance task group headers (/tasks list) ─────────────────────
   Mirrors the home Maintenance widget's day tuning above: a 22% `color-mix`
   over `--color-danger` / `--color-warning` produces an over-saturated wash
   on day's near-white table band, so the count chips drop their wash opacity.
   The Due chip's text uses `--color-warning-text`, the token that already
   carries "warning text readable on this theme's background" and the same
   value the Due status badge uses on day.

   The group band and its hover need NO day override: tasks.css paints the band
   with `--color-ocean-deep`, the same token `.data-table th` uses, so a group
   header matches the column header in the same table on both themes, and the
   row's `--color-border` top/bottom rules delineate it either way. Hover is
   `--color-ocean-surface`, exactly what `.data-table tbody tr:hover` uses. */
html[data-theme='day'] .maintenance-task-group-count-late {
  background: color-mix(in srgb, var(--color-danger) 14%, transparent);
  color: var(--color-danger);
}

html[data-theme='day'] .maintenance-task-group-count-due {
  background: color-mix(in srgb, var(--color-warning) 16%, transparent);
  color: var(--color-warning-text);
}

/* ── Onboarding tree — fact chips ─────────────────────────────────────
   White-tint background goes invisible on day's bright onboarding
   panel. Re-anchor to a faint navy tint that still reads as "chip
   floating on the panel". */
html[data-theme='day'] .onboarding-tree-node-fact {
  background: rgba(25, 52, 87, 0.05);
}

/* ── Inventory ledger — adjustment details expanded row ──────────────
   The expanded details row hardcodes a dark navy fill (rgba(13,25,43,…))
   that stays dark on the bright day modal, looking out of place. Re-anchor
   to a faint navy tint so it reads as a gently recessed panel. */
html[data-theme='day'] .inventory-ledger-adjustment-details-row td {
  background: rgba(25, 52, 87, 0.06);
}

/* ── Inventory ledger — adjustment details table row borders ─────────
   The white-tint top border on each table row is invisible against
   the day modal background. Anchor to the day border palette so the
   table retains visible row separation. */
html[data-theme='day'] .inventory-ledger-adjustment-details-table td {
  border-top-color: var(--color-border);
}