/* ============================================================================
   IRYS polish layer — supplements globals.css (loaded after it). Kept separate
   so the 4000-line globals.css is never touched and this is fully reversible.
   Scope: missing utility styles, AJAX loading affordances, focus-visible gaps,
   and mobile/responsive tweaks. Contrast is already AA (light text on the very
   dark background), so no color overrides are needed here.
   ============================================================================ */

/* ---- Skip link (a11y: first tab stop) ---- */
.skip-link {
  position: fixed;
  top: -120px;
  left: 12px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 12px;
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

/* ---- STALE flag (from auto-refresh) ---- */
.stale-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--warn);
  color: #0A1428;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  vertical-align: middle;
}

/* ---- Toast sub-note ("saved on this device only") ---- */
.toast-note {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

/* ---- AJAX async-region loading affordance ---- */
[data-async-root] { position: relative; }
[data-async-root].is-loading { cursor: progress; }
[data-async-root].is-loading > * {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.async-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--accent-blue);
  box-shadow: 0 0 8px var(--accent-blue);
  z-index: 2000;
  opacity: 0;
  transition: width 0.25s ease, opacity 0.3s ease;
}
.async-bar.on { opacity: 1; }

/* ---- Focus-visible: fill the gaps globals.css doesn't cover ---- */
.nav-btn:focus-visible,
.tab:focus-visible,
.sev-pill:focus-visible,
.filter-chip:focus-visible,
.toggle-pill:focus-visible,
.back-btn:focus-visible,
.system-nav-item:focus-visible,
.unit-id-link:focus-visible,
.reset-filters-btn:focus-visible,
.search-clear:focus-visible,
.th-inner:focus-visible,
.tl-unit-link:focus-visible,
.btn:focus-visible,
.btn-sm:focus-visible,
.toast-undo:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
  border-radius: 6px;
}
tr.unit-row:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: -2px;
}
/* Native controls */
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 1px;
}

/* ---- Comfortable touch targets ---- */
.nav-btn,
.tab,
.toggle-pill,
.filter-chip,
.back-btn { min-height: 34px; }

/* ---- Mobile / responsive tweaks ---- */
@media (max-width: 720px) {
  .header { flex-wrap: wrap; row-gap: 10px; }
  .nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .header-meta { margin-left: auto; }

  .unit-actions { flex-wrap: wrap; row-gap: 8px; }
  .unit-actions .search { flex: 1 1 100%; }

  .date-range-control { flex-wrap: wrap; row-gap: 8px; }
  .fuel-head { flex-wrap: wrap; row-gap: 10px; }
}

@media (max-width: 520px) {
  .toast-region { left: 12px; right: 12px; }
  .toast { width: auto; }
  .segmented { flex-wrap: wrap; }
  /* keep data tables usable: horizontal scroll hint */
  .table-wrap { -webkit-overflow-scrolling: touch; }
}

/* ---- Respect reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Secondary-text hierarchy (UX review) ----
   globals.css sets both "primary" (near-white) and "muted" (.muted /
   .rc.muted) text to rgba(255,255,255,0.85) — too close to white to read as
   de-emphasized next to KPI numbers / unit IDs. Pull muted text down a step
   so table/detail secondary columns (Type, Updated, "No video", etc.) visibly
   recede behind primary content. Still ~7:1 contrast on --surface-1, well
   past AA. */
.muted,
.rc.muted {
  color: rgba(255, 255, 255, 0.66);
}

/* ---- NO DATA / hint / placeholder contrast margin (UX review) ----
   These sit at rgba(255,255,255,0.5) in globals.css, which computes to
   ~4.5-5:1 on --surface-1 — right at the AA floor with no margin once
   antialiasing/background gradients are factored in. Nudge up slightly for
   headroom while keeping them visibly dimmer than .muted above. */
.val-nodata,
.ring-nodata,
.lube-circle.nodata .lube-state,
.lube-circle.nodata .lube-state-sub,
.lube-faults.nodata,
.lube-state-mini.pause,
.lube-state-mini.nodata,
.device-hero-band.dark .device-hero-band-num,
.device-hero-band-hint,
.system-hero-field-hint,
.search-kbd,
.pw-input::placeholder {
  color: rgba(255, 255, 255, 0.58);
}

/* ---- Date-range filter bar redesign (UX review) ----
   globals.css mixed two alignment patterns in one bar: .date-range-copy had
   its label stacked above its value while .date-field keeps label and input
   on the same line, and Apply/Reset just trailed off the end of the date
   fields with no visual grouping. Restyled here (markup updated in
   components/date-range.blade.php) into three clearly separated clusters —
   summary | Start/End | actions — all on one baseline, with dividers instead
   of an implicit gap doing the separating. */
.date-range-copy {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.date-range-copy-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}
.date-range-copy-value {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.date-range-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border-2);
  flex: none;
}
.date-range-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid var(--border-2);
}
/* Match the date-field inputs' 8px radius so the whole bar reads as one
   family of shapes instead of .btn-sm's slightly tighter global 6px. */
.date-range-control .btn-sm {
  border-radius: 8px;
}
@media (max-width: 620px) {
  .date-range-divider {
    display: none;
  }
  .date-range-actions {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
  }
}

/* ---- Small-label legibility (UX review) ----
   Bumped only for labels in flexible-width containers (header meta, system
   cell subtitles) where a 1px increase can't overflow a fixed shape. Donut/
   ring center labels and the table sort-direction icon are deliberately left
   alone here — they sit inside fixed-diameter SVG chart areas and need a
   visual QA pass (not just a CSS bump) before resizing. */
.meta-label,
.sys-sub {
  font-size: 11px;
}