/*!
 * Copyright (c) 2026 Tekantis Limited. All rights reserved.
 * Icon Map (https://www.icon-map.com) is a trademark of Tekantis Limited.
 * Proprietary and confidential. This file and the methods in it are not licensed for copying, modification,
 * reuse or redistribution, in whole or in part, without written permission from Tekantis Limited.
 */
/* the utilities page: a transmission grid control room through a storm (grid-page.js, grid-storm.js) */
.sol-hero--grid { background: #020617; }
.sol-hero--grid .sol-hero__shade { background: linear-gradient(90deg, rgba(2, 6, 23, 0.86) 0%, rgba(2, 6, 23, 0.55) 34%, rgba(2, 6, 23, 0) 62%); }
.grid-hero-card { position: absolute; right: 16px; top: 16px; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; padding: 10px 14px; border-radius: 12px; background: rgba(15, 23, 42, 0.62); border: 1px solid rgba(148, 163, 184, 0.22); backdrop-filter: blur(10px); color: #e2e8f0; font: 13px/1.35 var(--pp-font); min-width: 200px; }
.grid-hero-card b { grid-column: 1 / -1; font-size: 14px; letter-spacing: 0.02em; }
.grid-hero-card span { grid-column: 1 / -1; color: #94a3b8; font-variant-numeric: tabular-nums; }
.grid-hero-card i { width: 10px; height: 10px; border-radius: 2px; }
.grid-hero-card em { font-style: normal; color: #f8fafc; }
.grid-hero-card:empty { display: none; }

.grid-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grid-ops { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: stretch; height: 700px; }
.grid-ops__map { position: relative; min-height: 600px; }
.grid-ops__map .pp-map { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; }

.grid-warnbar { position: absolute; top: 12px; left: 12px; right: 64px; z-index: 3; display: flex; flex-wrap: nowrap; gap: 6px; overflow: hidden; pointer-events: none; }
.grid-warn--more { color: #94a3b8; flex: none; }
.grid-warn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 10px; border-radius: 8px; background: rgba(2, 6, 23, 0.78); border: 1px solid rgba(148, 163, 184, 0.25); color: #e2e8f0; font: 12px/1.25 var(--pp-font); backdrop-filter: blur(8px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: auto; }
.grid-warn i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.grid-warn--4, .grid-warn--5 { border-color: rgba(229, 53, 43, 0.7); animation: grid-warn-pulse 2.4s ease-in-out infinite; }
@keyframes grid-warn-pulse { 50% { box-shadow: 0 0 0 3px rgba(229, 53, 43, 0.25); } }

.grid-layers { position: absolute; left: 12px; bottom: 64px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 180px); }
.grid-layers button, .grid-wallbtn { padding: 6px 10px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: rgba(7, 14, 26, 0.72); backdrop-filter: blur(8px); color: #cbd5e1; font: 600 12px/1.2 var(--pp-font); cursor: pointer; }
.grid-layers button[aria-pressed="true"] { color: #fff; border-color: #38bdf8; background: rgba(56, 189, 248, 0.22); }
.grid-wallbtn { position: absolute; right: 12px; bottom: 64px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; color: #fff; }
.grid-wallbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.grid-layers button:focus-visible, .grid-wallbtn:focus-visible, .grid-clock button:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }

.grid-clock { position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 12px; background: rgba(2, 6, 23, 0.78); border: 1px solid rgba(148, 163, 184, 0.22); backdrop-filter: blur(8px); color: #e2e8f0; font-size: 13px; }
.grid-clock__play { border: 0; border-radius: 8px; background: #38bdf8; color: #020617; font: 700 12px/1 var(--pp-font); padding: 7px 10px; cursor: pointer; min-width: 56px; }
.grid-clock__time { flex: 1; display: flex; }
.grid-clock__time input { width: 100%; accent-color: #38bdf8; }
.grid-clock b { font-variant-numeric: tabular-nums; min-width: 82px; text-align: right; }

.grid-panel { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; overflow-y: auto; background: #0b1222; border: 1px solid rgba(148, 163, 184, 0.18); color: #e2e8f0; min-height: 0; }
.grid-panel h4 { margin: 4px 0 0; font: 700 12px/1.2 var(--pp-font); letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; }
.grid-h4note { text-transform: none; letter-spacing: 0; font-weight: 600; color: #64748b; }
.grid-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid-kpis:empty { display: none; }
.grid-alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; overflow-y: auto; max-height: 420px; }
.grid-note { margin: auto 0 0; font-size: 11.5px; color: #64748b; line-height: 1.4; }

/* wall mode: the control room wall - the warnings across the top, the map, status and alerts at the side */
.grid-ops.is-wall { position: fixed; inset: 0; z-index: 1000; grid-template-columns: minmax(0, 1fr) 380px; gap: 0; background: #020617; padding: 0; height: auto; }
.grid-ops.is-wall .grid-ops__map { min-height: 0; }
.grid-ops.is-wall .grid-ops__map .pp-map { border-radius: 0; }
.grid-ops.is-wall .grid-panel { border-radius: 0; border-width: 0 0 0 1px; }
.grid-ops.is-wall .grid-alerts { max-height: none; flex: 1; }
.grid-ops.is-wall .grid-warn { font-size: 14px; padding: 8px 12px; }

@media (max-width: 900px) {
  .grid-ops { grid-template-columns: 1fr; height: auto; }
  .grid-ops__map { min-height: 460px; }
  .grid-alerts { max-height: 260px; }
}
@media (max-width: 640px) {
  .grid-hero-card { display: none; }
  .grid-warnbar { right: 52px; }
  .grid-warn { font-size: 11px; padding: 5px 8px; }
  .grid-layers { bottom: 58px; max-width: calc(100% - 130px); }
  .grid-layers button, .grid-wallbtn { padding: 5px 8px; font-size: 11px; }
  .grid-wallbtn { bottom: 58px; }
  .grid-clock { gap: 6px; padding: 6px 8px; }
}
@media (prefers-reduced-motion: reduce) { .grid-warn--4, .grid-warn--5 { animation: none; } }

/* the status panel: KPIs, the frequency gauge, interconnectors, incidents, the alert stream */
.grid-kpi { padding: 9px 11px; border-radius: 10px; background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(148, 163, 184, 0.16); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.grid-kpi--wide { grid-column: 1 / -1; }
.grid-kpi__label { font: 600 10.5px/1.2 var(--pp-font); letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; }
.grid-kpi__value { font: 700 20px/1.15 var(--pp-font); color: #f8fafc; font-variant-numeric: tabular-nums; }
.grid-kpi__value small { font-size: 0.6em; font-weight: 600; color: #94a3b8; margin-left: 2px; }
.grid-kpi.is-bad .grid-kpi__value { color: #f87171; }
.grid-kpi.is-warn .grid-kpi__value { color: #fbbf24; }
.grid-kpi.is-good .grid-kpi__value { color: #34d399; }
.grid-hz { position: relative; display: block; height: 6px; margin-top: 4px; border-radius: 3px; background: linear-gradient(90deg, #ef4444, #fbbf24 30%, #34d399 45%, #34d399 55%, #fbbf24 70%, #ef4444); opacity: 0.85; }
.grid-hz i { position: absolute; top: -3px; width: 3px; height: 12px; margin-left: -1px; border-radius: 1px; background: #fff; box-shadow: 0 0 4px rgba(255, 255, 255, 0.8); }
.grid-ics { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 600 13px/1.3 var(--pp-font); color: #e2e8f0; font-variant-numeric: tabular-nums; }
.grid-ic b { color: #94a3b8; margin-right: 4px; }
.grid-ic i { font-style: normal; margin-right: 2px; }
.grid-ic i.is-in { color: #34d399; }
.grid-ic i.is-out { color: #38bdf8; }
.grid-incidents { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 3px; font-size: 12px; color: #cbd5e1; }
.grid-incidents b { text-transform: capitalize; color: #fbbf24; font-weight: 700; }
.grid-incidents li.is-critical b { color: #f87171; }
.grid-alert { display: grid; grid-template-columns: 42px 1fr; gap: 6px; padding: 6px 8px; border-radius: 8px; background: rgba(15, 23, 42, 0.75); border-left: 3px solid #475569; font-size: 12px; line-height: 1.35; color: #cbd5e1; }
.grid-alert time { color: #64748b; font-variant-numeric: tabular-nums; }
.grid-alert em { font-style: normal; color: #94a3b8; }
.grid-alert.is-critical { border-left-color: #ef4444; color: #fee2e2; }
.grid-alert.is-major { border-left-color: #f59e0b; }
.grid-alert.is-minor { border-left-color: #38bdf8; }
.grid-alert[data-lon] { cursor: pointer; }
.grid-alert[data-lon]:hover, .grid-alert[data-lon]:focus-visible { background: rgba(30, 41, 59, 0.95); outline: none; }
.grid-alert.is-new { animation: grid-alert-in 1.2s ease-out; }
@keyframes grid-alert-in { from { background: rgba(239, 68, 68, 0.35); transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) { .grid-alert.is-new { animation: none; } }

/* a strong lightning strike lights the whole sky for a moment (grid-page.js skyFlash) */
.grid-skyflash { position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0;
  background: radial-gradient(ellipse at 60% 40%, rgba(214, 222, 255, 0.55), rgba(160, 150, 255, 0.18) 55%, rgba(120, 110, 220, 0) 80%);
  mix-blend-mode: screen; }