/** stylesheets/src/day.css **/
/* ============================================================
   AZIMUTH — Bright Light Theme Overrides
   Loaded after main.css and activated when html[data-theme='day']
   ============================================================ */

html[data-theme='day'] {
  --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-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);

  --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'] .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
   ------------------------------------------------------------
   Re-tint the category accent tokens. The dark-theme palette is
   too saturated for white backgrounds — these values are picked
   to keep WCAG-AA contrast against `--color-ocean-mid` (#ffffff).
   ============================================================ */
html[data-theme='day'] {
  --events-color-navigation:   #1565c0;
  --events-color-fuel:         #a27416;
  --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;
}

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 "Upcoming 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 either:
     • a hardcoded `rgba(255, 255, 255, X)` wash (a "white tint
       on dark surface" accent that disappears on a light card), or
     • a `var(--surface-*, #darkhex)` reference where the
       `--surface-*` family is NOT defined in :root NOR in the day
       block, so the dark hex fallback always wins.
   These need explicit day overrides to remain legible on the
   light palette. A longer-term cleanup would be to define the
   `--surface-*` family in both themes, but that's a broader
   refactor — these per-selector overrides match the existing
   pattern in the rest of this file.
   ============================================================ */

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

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