/* Command Centre widget tiles (EXAMPLE watermark + status/alerts layout).
 * Theme tokens come from nexus.css [data-theme] — keep colors on CSS variables
 * so all six DaisyUI themes pick them up automatically. */

.widget-example {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Size the watermark off the tile, not the viewport — the strip's
     Communications/System Health tiles are far narrower than a full-width one. */
  container-type: inline-size;
}

.widget-example::after {
  content: "EXAMPLE";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: clamp(0.75rem, 18cqi, 3.5rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-base-content);
  opacity: 0.08;
  transform: rotate(-28deg);
  pointer-events: none;
  z-index: 1;
  user-select: none;
}

.widget-example > * {
  position: relative;
  z-index: 0;
}

.widget-status-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .widget-status-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .widget-status-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.widget-status-tile {
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box, 0.5rem);
  background: var(--color-base-200);
  padding: 0.875rem 1rem;
  min-height: 5.5rem;
}

.widget-status-tile__label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.widget-status-tile__label .iconify {
  opacity: 1;
  flex-shrink: 0;
}

.widget-status-tile__value {
  margin-top: 0.35rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.widget-status-tile__meta {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  opacity: 0.55;
}

/* Turbo frames are inline by default, which breaks every flex/height chain
   they sit inside. */
turbo-frame {
  display: block;
}

/* Announced to screen readers, never painted. Not provided by the bundled
   theme, so it lives here. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Scrollable list + a footer that never scrolls with it. */
.widget-alerts-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 0.4rem;
}

.widget-alerts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
}

/* Cap height so a long alert list can't stretch a board past one viewport. */
.widget-alerts--compact {
  max-height: 13.5rem;
  overflow-y: auto;
  gap: 0.25rem;
  /* Reserve the gutter so the scrollbar is the affordance and its appearance
     never reflows the rows. A fade would have to lie when nothing overflows. */
  scrollbar-gutter: stable;
  padding-right: 0.15rem;
}

.widget-alerts__empty {
  /* Not opacity-50: this is the only text in an empty widget and it has to be
     readable in plant light. */
  color: color-mix(in oklch, var(--color-base-content) 72%, transparent);
  font-size: 0.875rem;
  padding: 0.5rem 0;
  text-align: center;
}

.widget-alerts__footer {
  flex: 0 0 auto;
  padding-top: 0.15rem;
}

.widget-alerts__footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  min-height: 2rem;
  color: color-mix(in oklch, var(--color-base-content) 78%, transparent);
}

.widget-alerts__footer-link:hover {
  color: var(--color-base-content);
}

.widget-alert-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box, 0.5rem);
  padding: 0.625rem 0.75rem;
  background: var(--color-base-200);
}

.widget-alert-row--compact {
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.4rem;
}

.widget-alert-row--compact .widget-alert-row__message {
  font-size: 0.75rem;
  line-height: 1.25;
  margin: 0;
}

.widget-alert-row--compact .widget-alert-row__meta {
  margin-top: 0;
  font-size: 0.65rem;
  line-height: 1.2;
}

/* Field-ready acknowledge target: ≥40px so a gloved thumb on a phone can hit
 * it reliably (DaisyUI btn-sm alone is 32px). */
.widget-alert-ack {
  min-height: 2.5rem;
  min-width: 2.75rem;
  gap: 0.3rem;
}

/* Countdown digits on the Undo button: tabular so the width doesn't jitter
   as the number ticks down. */
.widget-alert-ack__countdown {
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  opacity: 0.7;
}

.widget-alert-row__body {
  min-width: 0;
  flex: 1;
}

.widget-alert-row__message {
  font-size: 0.875rem;
  font-weight: 500;
}

.widget-alert-row__meta {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  opacity: 0.55;
}

/* A tile that failed to load. Muted, not alarming — this is a data-plumbing
   problem, and it must not compete with a real plant alarm for attention. */
.widget-error {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  border: 1px dashed var(--color-base-300);
  border-radius: var(--radius-box, 0.5rem);
  background: var(--color-base-200);
  padding: 0.875rem 1rem;
  color: color-mix(in oklch, var(--color-base-content) 78%, transparent);
}

.widget-error__title {
  font-size: 0.875rem;
  font-weight: 500;
}

.widget-error__meta {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: color-mix(in oklch, var(--color-base-content) 68%, transparent);
}

/* Live badge, degraded: the refresh stopped landing, so the badge stops
   claiming freshness. */
.widget-status-badge.is-stale {
  color: var(--color-warning);
  border-color: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-300));
}

.widget-kpi-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .widget-kpi-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  /* auto-fit, not a fixed 6: the tile count changes when a placeholder tile is
     retired, and the band should still fill its row. */
  .widget-kpi-strip {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }
}

.widget-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.widget-correlation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .widget-correlation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.widget-scatter-placeholder {
  height: 8rem;
  border: 1px dashed var(--color-base-300);
  border-radius: var(--radius-box, 0.5rem);
  background:
    radial-gradient(circle at 30% 40%, var(--color-primary) 0 0.2rem, transparent 0.25rem),
    radial-gradient(circle at 55% 60%, var(--color-primary) 0 0.15rem, transparent 0.2rem),
    radial-gradient(circle at 70% 35%, var(--color-primary) 0 0.18rem, transparent 0.22rem),
    radial-gradient(circle at 40% 70%, var(--color-primary) 0 0.12rem, transparent 0.17rem),
    var(--color-base-200);
  opacity: 0.85;
}

/* Water Quality composite: side-by-side thin tall modules (mockup layout). */
.widget-water-quality {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.75rem;
  min-height: 0;
}

.widget-water-quality__series {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.widget-water-quality__series.is-empty {
  display: none;
}

.widget-water-quality__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  margin-bottom: 0.35rem;
}

.widget-water-quality .board-chart-wrap {
  flex: 1 1 auto;
  min-height: 12rem;
  height: 14rem;
}

.board-density-compact .widget-water-quality {
  gap: 0.5rem;
}

/* Narrow viewports: stack modules again so charts stay readable. */
@media (max-width: 767px) {
  .widget-water-quality {
    flex-direction: column;
  }

  .widget-water-quality .board-chart-wrap {
    min-height: 8rem;
    height: 10rem;
  }
}

.widget-flow-stages {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
}

.widget-flow-stage {
  flex: 1 1 7rem;
  min-width: 6.5rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box, 0.5rem);
  background: var(--color-base-200);
  padding: 0.75rem;
}

.widget-flow-stage[data-status="warning"] {
  border-color: color-mix(in oklab, var(--color-warning) 50%, var(--color-base-300));
}

.widget-flow-stage[data-status="error"],
.widget-flow-stage[data-status="critical"] {
  border-color: color-mix(in oklab, var(--color-error) 50%, var(--color-base-300));
}

.widget-flow-stage[data-status="ok"] {
  border-color: color-mix(in oklab, var(--color-success) 45%, var(--color-base-300));
}

.widget-flow-arrow {
  display: none;
  align-items: center;
}

@media (min-width: 768px) {
  .widget-flow-arrow {
    display: flex;
  }
}