/* ============================================================================
   OVERVIEW VISUAL REFRESH — page-scoped layer for the Fleet dashboard only.

   Load order matters: this file loads AFTER globals.css and polish.css
   (see resources/views/layouts/app.blade.php). Rules here tie with the
   dashboard-scoped block in globals.css (specificity 0,3,0) and win by
   source order — never use !important in this file.

   SCOPE COUPLING: every rule is prefixed with
     .app[data-screen-label="IRYS Dashboard"]
   which x-shell renders only on the Overview page (fleet.blade.php passes
   label="IRYS Dashboard"). If that label ever changes, this whole file goes
   inert and the page falls back to the globals.css look — fails safe.

   Motion: transitions only (no @keyframes); polish.css's
   prefers-reduced-motion kill-switch (!important) neutralizes all of it.

   Contrast floor: secondary text never below rgba(255,255,255,0.65) —
   the AA floor established by the UX-review overrides in globals.css.
   ========================================================================== */

/* ---- Scoped tokens ------------------------------------------------------ */
.app[data-screen-label="IRYS Dashboard"] {
  --ov-dur: 160ms;
  --ov-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  /* Muted OK green (page-scoped): every var(--ok) consumer on this page —
     availability ring, sys-health NORMAL arcs, .kpi-ok numbers, split-fill,
     empty-state marks — inherits the calmer tone. Red (--bad) is untouched:
     it stays reserved for faults. */
  --ok: #2FB25F;
}

/* ---- Tile & card surface ------------------------------------------------ */
/* Soft top-light gradient over the flat navy + inset highlight + drop. The
   original 1px border is kept underneath as the no-mask fallback. */
.app[data-screen-label="IRYS Dashboard"] .kpi-tile,
.app[data-screen-label="IRYS Dashboard"] .mid-row > .card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 42%),
    var(--surface-1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.35);
}

/* Gradient border ring: a 1px masked frame painted by ::after. Guarded by
   @supports so browsers without mask-composite keep the plain border and
   never get an opaque overlay. (.kpi-tile::after / .card::after are unused
   by globals.css — verified; .sys-cell-link::after is taken by the chevron,
   so sys-cells get a border/shadow treatment further down instead.) */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .app[data-screen-label="IRYS Dashboard"] .kpi-tile::after,
  .app[data-screen-label="IRYS Dashboard"] .mid-row > .card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(165deg,
      rgba(255,255,255,0.16),
      rgba(255,255,255,0.04) 45%,
      rgba(59,130,246,0.10));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }
  /* Tone tiles: tint the ring (visually replaces the tone-* border colors). */
  .app[data-screen-label="IRYS Dashboard"] .kpi-tile.tone-bad::after {
    background: linear-gradient(165deg, rgba(239,68,68,0.45), rgba(239,68,68,0.12) 55%, rgba(239,68,68,0.30));
  }
  .app[data-screen-label="IRYS Dashboard"] .kpi-tile.tone-ok::after {
    background: linear-gradient(165deg, rgba(34,197,94,0.30), rgba(34,197,94,0.08) 55%, rgba(34,197,94,0.18));
  }
  .app[data-screen-label="IRYS Dashboard"] .kpi-tile.tone-warn::after {
    background: linear-gradient(165deg, rgba(245,158,11,0.40), rgba(245,158,11,0.10) 55%, rgba(245,158,11,0.25));
  }
  /* Availability tile echoes its threshold tone on the ring. */
  .app[data-screen-label="IRYS Dashboard"] .kpi-tile.avail--warn::after {
    background: linear-gradient(165deg, rgba(245,158,11,0.40), rgba(245,158,11,0.10) 55%, rgba(245,158,11,0.25));
  }
  .app[data-screen-label="IRYS Dashboard"] .kpi-tile.avail--bad::after {
    background: linear-gradient(165deg, rgba(239,68,68,0.45), rgba(239,68,68,0.12) 55%, rgba(239,68,68,0.30));
  }
}

/* Clickable tiles: lift + soft depth + blue interaction ring. Only
   box-shadow/transform animate (gradients don't interpolate). */
.app[data-screen-label="IRYS Dashboard"] .kpi-tile.clickable {
  transition:
    transform var(--ov-dur) var(--ov-ease),
    box-shadow var(--ov-dur) var(--ov-ease),
    border-color var(--ov-dur);
}
.app[data-screen-label="IRYS Dashboard"] .kpi-tile.clickable:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 14px 36px rgba(0,0,0,0.45),
    0 0 0 1px rgba(59,130,246,0.28);
}
.app[data-screen-label="IRYS Dashboard"] .kpi-chev {
  color: rgba(255,255,255,0.55);
  transition: color var(--ov-dur), transform var(--ov-dur) var(--ov-ease);
}
.app[data-screen-label="IRYS Dashboard"] .kpi-tile.clickable:hover .kpi-chev {
  color: var(--accent-blue);
  transform: translateX(2px);
}

/* ---- Numeric typography hierarchy --------------------------------------- */
/* Numbers lead, labels recede. Font SIZES are untouched — the 96/56/44
   ladder belongs to the viewport-fit contract in globals.css. */
.app[data-screen-label="IRYS Dashboard"] .kpi-num {
  letter-spacing: -0.03em;
  font-weight: 700;
}
.app[data-screen-label="IRYS Dashboard"] .kpi-title {
  color: rgba(255,255,255,0.72);
  font-weight: 600;
  letter-spacing: 0.18em;
}
.app[data-screen-label="IRYS Dashboard"] .kpi-comp-num-label,
.app[data-screen-label="IRYS Dashboard"] .kpi-alerts-num-label,
.app[data-screen-label="IRYS Dashboard"] .kpi-readiness-anchor-label,
.app[data-screen-label="IRYS Dashboard"] .kpi-avail-frac-label,
.app[data-screen-label="IRYS Dashboard"] .kpi-comp-legend-label,
.app[data-screen-label="IRYS Dashboard"] .kpi-alerts-time,
.app[data-screen-label="IRYS Dashboard"] .kpi-alerts-msg,
.app[data-screen-label="IRYS Dashboard"] .kpi-meta {
  color: rgba(255,255,255,0.70);
}

/* ---- Ring gauge / donut labels ------------------------------------------ */
.app[data-screen-label="IRYS Dashboard"] .ring-label {
  color: rgba(255,255,255,0.70);
  letter-spacing: 0.18em;
}
.app[data-screen-label="IRYS Dashboard"] .ring-value { letter-spacing: -0.02em; }
.app[data-screen-label="IRYS Dashboard"] .ring-sub,
.app[data-screen-label="IRYS Dashboard"] .donut-top,
.app[data-screen-label="IRYS Dashboard"] .donut-sub {
  color: rgba(255,255,255,0.66);
}
.app[data-screen-label="IRYS Dashboard"] .donut-big { letter-spacing: -0.02em; }

/* Availability threshold: the % value only turns warn/bad — when OK it stays
   white and the green lives in the arc alone (color discipline). */
.app[data-screen-label="IRYS Dashboard"] .avail--warn .ring-value { color: var(--warn); }
.app[data-screen-label="IRYS Dashboard"] .avail--bad  .ring-value { color: var(--bad); }

/* Faulting system cell: the FAULT ring label goes loud. */
.app[data-screen-label="IRYS Dashboard"] .sys-cell.is-fault .ring-label {
  color: var(--bad);
  font-weight: 700;
}

/* ---- System health cells ------------------------------------------------- */
.app[data-screen-label="IRYS Dashboard"] .sys-cell {
  transition:
    transform var(--ov-dur) var(--ov-ease),
    box-shadow var(--ov-dur) var(--ov-ease),
    border-color var(--ov-dur),
    background var(--ov-dur);
}
.app[data-screen-label="IRYS Dashboard"] .sys-cell:hover {
  transform: translateY(-2px);
  border-color: rgba(59,130,246,0.35);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
.app[data-screen-label="IRYS Dashboard"] .sys-cell.is-fault {
  border-color: rgba(239,68,68,0.35);
  background: rgba(239,68,68,0.04);
}
.app[data-screen-label="IRYS Dashboard"] .sys-cell-link::after {
  transition: color var(--ov-dur), transform var(--ov-dur) var(--ov-ease);
}

/* ---- Not-ready breakdown: rows, "+N more", tags -------------------------- */
/* Blue = interactive; replaces the neutral surface-2 hover. */
.app[data-screen-label="IRYS Dashboard"] .breakdown-unit {
  transition: background var(--ov-dur), color var(--ov-dur);
}
.app[data-screen-label="IRYS Dashboard"] .breakdown-unit:hover,
.app[data-screen-label="IRYS Dashboard"] .breakdown-unit:focus-visible {
  background: rgba(59,130,246,0.10);
}
.app[data-screen-label="IRYS Dashboard"] .breakdown-unit:hover .breakdown-unit-cause-label,
.app[data-screen-label="IRYS Dashboard"] .breakdown-unit:hover .breakdown-unit-time {
  color: rgba(255,255,255,0.95);
}
.app[data-screen-label="IRYS Dashboard"] .breakdown-unit-chev {
  transition: color var(--ov-dur), transform var(--ov-dur) var(--ov-ease);
}
.app[data-screen-label="IRYS Dashboard"] .breakdown-list-more:hover {
  color: var(--accent-blue);
}

.app[data-screen-label="IRYS Dashboard"] .breakdown-tag {
  transition:
    background var(--ov-dur),
    border-color var(--ov-dur),
    opacity var(--ov-dur);
}
.app[data-screen-label="IRYS Dashboard"] .breakdown-tag:hover,
.app[data-screen-label="IRYS Dashboard"] .breakdown-tag.hover {
  background: rgba(59,130,246,0.10);
  border-color: rgba(59,130,246,0.35);
}
/* While the donut↔tag JS sync is active, non-matching tags step back. */
.app[data-screen-label="IRYS Dashboard"] .breakdown-tags.is-syncing .breakdown-tag:not(.hover) {
  opacity: 0.55;
}

/* ---- Fleet composition: class-based steel ramp --------------------------- */
/* Replaces the :nth-child coloring from globals.css, which silently
   misaligns bar segments with the legend whenever a type count is 0
   (fleet.blade.php skips empty segments). Class-per-type is robust, and the
   legend dots reuse the exact same values. Deliberately a neutral ramp —
   NOT the subsystem semantic colors. */
.app[data-screen-label="IRYS Dashboard"] .kpi-comp-seg--exc { background: #C9D4E4; }
.app[data-screen-label="IRYS Dashboard"] .kpi-comp-seg--trk { background: #9AA9C0; }
.app[data-screen-label="IRYS Dashboard"] .kpi-comp-seg--ldr { background: #6C7E9C; }
.app[data-screen-label="IRYS Dashboard"] .kpi-comp-seg--dzr { background: #47587A; }

.app[data-screen-label="IRYS Dashboard"] .kpi-comp-legend-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.app[data-screen-label="IRYS Dashboard"] .kpi-comp-legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  display: inline-block;
  flex: none;
}
.app[data-screen-label="IRYS Dashboard"] .kpi-comp-legend-dot--exc { background: #C9D4E4; }
.app[data-screen-label="IRYS Dashboard"] .kpi-comp-legend-dot--trk { background: #9AA9C0; }
.app[data-screen-label="IRYS Dashboard"] .kpi-comp-legend-dot--ldr { background: #6C7E9C; }
.app[data-screen-label="IRYS Dashboard"] .kpi-comp-legend-dot--dzr { background: #47587A; }

/* ---- Alerts preview + empty states --------------------------------------- */
.app[data-screen-label="IRYS Dashboard"] .kpi-alerts-row {
  padding: 2px 6px;
  margin: 0 -6px;
  border-radius: 6px;
  transition: background var(--ov-dur);
}
.app[data-screen-label="IRYS Dashboard"] .kpi-tile-alerts:hover .kpi-alerts-row:hover {
  background: rgba(255,255,255,0.05);
}
.app[data-screen-label="IRYS Dashboard"] .kpi-alerts-empty-mark {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: rgba(34,197,94,0.12);
  color: var(--ok);
}
.app[data-screen-label="IRYS Dashboard"] .breakdown-empty-mark {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34,197,94,0.10);
}

/* ---- Gauge sizing plumbing ------------------------------------------------ */
/* ring-gauge/donut components now expose their size as --ring-size /
   --donut-size instead of hard inline width/height, so stylesheets can
   constrain them. These base rules reproduce the exact former rendering.
   (Both components are used only on this page; the svg width/height
   attributes remain as a fallback anywhere else.) */
.app[data-screen-label="IRYS Dashboard"] .ring-gauge {
  width: var(--ring-size, 140px);
  height: var(--ring-size, 140px);
}
.app[data-screen-label="IRYS Dashboard"] .donut {
  width: var(--donut-size, 220px);
  height: var(--donut-size, 220px);
}
.app[data-screen-label="IRYS Dashboard"] .ring-gauge svg,
.app[data-screen-label="IRYS Dashboard"] .donut svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- Viewport-fit: gauges shrink instead of clipping ---------------------- */
/* The 100dvh dashboard contract gives the mid-row card bodies a fixed height
   with overflow:hidden — on short screens the fixed-size gauges were cut off
   at the bottom. Inside the fit regime (>980px, matching globals' breakpoint
   where the contract is active) the gauges become flexible: they fill the
   available height up to their design size and scale down proportionally
   (viewBox) when space runs out. Below 981px heights are auto and the page
   scrolls, so nothing clips there. */
@media (min-width: 981px) {
  .app[data-screen-label="IRYS Dashboard"] .sys-health {
    height: 100%;
    min-height: 0;
  }
  .app[data-screen-label="IRYS Dashboard"] .sys-cell {
    min-height: 0;
  }
  .app[data-screen-label="IRYS Dashboard"] .sys-cell .ring-gauge {
    flex: 1 1 0;
    align-self: center;
    width: auto;
    height: auto;
    min-height: 72px;
    max-height: var(--ring-size, 120px);
    max-width: 100%;
    aspect-ratio: 1 / 1;
  }
  .app[data-screen-label="IRYS Dashboard"] .kpi-availability {
    min-height: 0;
  }
  .app[data-screen-label="IRYS Dashboard"] .kpi-availability .ring-gauge {
    flex: 0 1 auto;
    width: auto;
    height: min(var(--ring-size, 160px), 100%);
    min-height: 96px;
    aspect-ratio: 1 / 1;
  }
  .app[data-screen-label="IRYS Dashboard"] .breakdown-donut .donut {
    width: auto;
    height: min(var(--donut-size, 220px), 100%);
    min-height: 120px;
    aspect-ratio: 1 / 1;
  }
}

/* ---- Short-viewport fallback: scroll instead of clip --------------------- */
/* globals.css already has a proven "give up on the one-screen-fit contract"
   fallback (height:auto + overflow:visible), but it's gated on
   @media (max-width: 980px) only — i.e. it assumes a short viewport always
   comes with a narrow one too. That's wrong for a very common desktop case:
   a wide-but-short window (e.g. 1920x1200 @ 150% OS scaling -> ~1280x800
   CSS px, then minus browser chrome/taskbar -> well under 800px tall). Those
   users are wide enough to keep the 4-column desktop grid but too short for
   the fixed 100dvh/overflow:hidden contract, so fixed-size KPI numbers/
   gauges get clipped instead of shrinking or scrolling — reported as the
   dashboard looking "berantakan" at 100% browser zoom and fine only once
   zoomed out enough to regain height. Mirror the same fallback here, gated
   on height instead of width, so a short-but-wide window degrades to a
   normal scrollable page (like every other page in the app) rather than
   clipping. Desktop column layout (kpi-row/mid-row grid-template-columns)
   is intentionally left untouched — only the fixed-height contract lifts. */
@media (max-height: 800px) {
  .app[data-screen-label="IRYS Dashboard"] {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }
  .app[data-screen-label="IRYS Dashboard"] .overview {
    display: flex;
    flex-direction: column;
  }
}

/* ---- Card head / section rhythm ------------------------------------------ */
.app[data-screen-label="IRYS Dashboard"] .card-title {
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.92);
}
.app[data-screen-label="IRYS Dashboard"] .card-sub {
  color: rgba(255,255,255,0.66);
}
.app[data-screen-label="IRYS Dashboard"] .card-head {
  border-bottom-color: rgba(255,255,255,0.07);
}
.app[data-screen-label="IRYS Dashboard"] .breakdown-tags {
  border-top-color: rgba(255,255,255,0.07);
}