/*
 * HONGSHAN SMART WATER · TECH THEME V2
 * Load after styles.css. The image border is enhancement-only; CSS corner rails
 * remain visible if ./assets/tech-frame-v2.jpg is unavailable.
 */

:root {
  --tech-cyan: #63dcc4;
  --tech-cyan-soft: rgba(99, 220, 196, .18);
  --tech-blue: #72b9ed;
  --tech-line: rgba(126, 218, 205, .34);
  --tech-line-soft: rgba(151, 194, 203, .13);
  --tech-surface: rgba(10, 24, 32, .975);
  --tech-surface-raised: rgba(14, 32, 41, .98);
  --tech-ease: cubic-bezier(.2, .7, .2, 1);
}

body {
  background:
    radial-gradient(circle at 50% 27%, rgba(43, 126, 127, .13), transparent 38%),
    linear-gradient(180deg, #07131a 0%, #050d12 100%);
  font-feature-settings: "tnum" 1, "ss01" 1;
  text-rendering: geometricPrecision;
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
}

body::before {
  background-image:
    linear-gradient(rgba(115, 192, 194, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(115, 192, 194, .025) 1px, transparent 1px);
  background-size: 40px 40px;
}

body::after {
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.007) 3px 4px);
}

.dashboard-shell { --grid-gap: 12px; }

.topbar {
  border-bottom-color: rgba(126, 218, 205, .18);
  background: linear-gradient(90deg, rgba(6,16,22,.99), rgba(10,25,33,.97) 50%, rgba(6,16,22,.99));
  box-shadow: 0 12px 32px rgba(0,0,0,.26);
}

.topbar::after {
  background: linear-gradient(90deg, transparent 4%, rgba(99,220,196,.18) 24%, rgba(114,185,237,.34) 50%, rgba(99,220,196,.18) 76%, transparent 96%);
}

.brand-mark { border-radius: 5px; box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 8px 24px rgba(0,0,0,.26); }
.brand-name { font-weight: 680; letter-spacing: .12em; }
.header-title h1 { font-size: 21px; font-weight: 660; letter-spacing: .1em; text-shadow: 0 1px 18px rgba(112,185,237,.12); }
.title-kicker { color: #73c9bb; letter-spacing: .38em; }

.nav-item { min-height: 44px; color: #9cafb4; transition: color .2s var(--tech-ease), background-color .2s var(--tech-ease); }
.nav-item:hover { color: #f1f8f7; background: linear-gradient(180deg, transparent, rgba(99,220,196,.045)); }
.nav-item.active::after { height: 2px; background: linear-gradient(90deg, transparent, var(--tech-cyan) 18% 82%, transparent); box-shadow: none; }

.kpi-rail {
  position: relative;
  isolation: isolate;
  border-color: rgba(126, 218, 205, .18);
  background:
    linear-gradient(90deg, rgba(99,220,196,.035), transparent 15% 85%, rgba(114,185,237,.03)),
    linear-gradient(155deg, rgba(17,37,47,.99), rgba(8,20,27,.99));
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 18px 38px rgba(0,0,0,.2);
}

.kpi-rail::after {
  position: absolute;
  right: 18px;
  bottom: 0;
  left: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,220,196,.38), transparent);
  pointer-events: none;
  content: "";
}

.kpi-item { transition: background-color .22s var(--tech-ease); }
.kpi-item:hover { background: rgba(99,220,196,.025); }
.kpi-item + .kpi-item::before { background: linear-gradient(transparent, rgba(157,198,207,.18) 22% 78%, transparent); }
.kpi-label { color: #b7c7ca; font-weight: 520; }
.kpi-value strong { color: #e9faf6; font-weight: 650; text-shadow: 0 0 20px rgba(99,220,196,.09); }
.kpi-meta { color: #82999f; }
.progress { height: 3px; background: rgba(172,210,215,.075); }
.progress i { background: linear-gradient(90deg, rgba(99,220,196,.25), var(--tech-cyan)); box-shadow: 0 0 8px rgba(99,220,196,.16); }

.panel,
.scene-panel {
  position: relative;
  isolation: isolate;
  border-color: rgba(126, 192, 199, .18);
  border-radius: 5px;
  background:
    linear-gradient(rgba(115,192,194,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(115,192,194,.014) 1px, transparent 1px),
    linear-gradient(150deg, var(--tech-surface-raised), var(--tech-surface));
  background-size: 28px 28px, 28px 28px, auto;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 16px 34px rgba(0,0,0,.16);
  transition: border-color .22s var(--tech-ease), box-shadow .22s var(--tech-ease), transform .22s var(--tech-ease);
}

.panel:hover,
.panel:focus-within { border-color: rgba(99,220,196,.29); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 18px 38px rgba(0,0,0,.21); }

/* Deterministic corner brackets: readable fallback for the generated frame. */
.panel::before,
.scene-panel::before {
  position: absolute;
  inset: 4px;
  z-index: 5;
  background:
    linear-gradient(90deg, var(--tech-line) 0 17px, transparent 17px) top left / 30px 1px no-repeat,
    linear-gradient(var(--tech-line) 0 17px, transparent 17px) top left / 1px 30px no-repeat,
    linear-gradient(270deg, var(--tech-line) 0 17px, transparent 17px) top right / 30px 1px no-repeat,
    linear-gradient(var(--tech-line) 0 17px, transparent 17px) top right / 1px 30px no-repeat,
    linear-gradient(90deg, var(--tech-line) 0 17px, transparent 17px) bottom left / 30px 1px no-repeat,
    linear-gradient(0deg, var(--tech-line) 0 17px, transparent 17px) bottom left / 1px 30px no-repeat,
    linear-gradient(270deg, var(--tech-line) 0 17px, transparent 17px) bottom right / 30px 1px no-repeat,
    linear-gradient(0deg, var(--tech-line) 0 17px, transparent 17px) bottom right / 1px 30px no-repeat;
  pointer-events: none;
  content: "";
}

/* Generated border selectively reinforces the most important operational blocks. */
.scene-panel::after,
.water-quality::after,
.equipment-panel::after,
.alarm-panel::after,
.weekly-panel::after {
  position: absolute;
  inset: 0;
  z-index: 6;
  border: 10px solid transparent;
  border-image-source: url("./assets/tech-frame-v2.jpg");
  border-image-slice: 12%;
  border-image-width: 8px;
  border-image-repeat: stretch;
  opacity: .55;
  filter: saturate(.78) contrast(1.12);
  mix-blend-mode: screen;
  pointer-events: none;
  content: "";
}

.scene-panel::after { border-image-width: 11px; opacity: .72; }

.panel-heading { position: relative; padding-bottom: 7px; }
.panel-heading::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(99,220,196,.38), rgba(114,185,237,.14) 46%, transparent 86%);
  content: "";
}

.panel-heading h2,
.scene-heading h2 { color: #eef5f5; font-weight: 640; letter-spacing: .055em; }
.panel-eyebrow { color: #70a49f; font-weight: 780; letter-spacing: .27em; }
.scene-heading { border-bottom-color: rgba(126,218,205,.16); background: linear-gradient(90deg, rgba(15,35,44,.99), rgba(8,22,29,.98)); }
.scene-canvas::before {
  background-image:
    radial-gradient(circle at 50% 50%, transparent 0 50%, rgba(4,11,15,.22) 100%),
    linear-gradient(rgba(99,220,196,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,220,196,.03) 1px, transparent 1px);
  background-size: auto, 36px 36px, 36px 36px;
}

.scene-toolbar { border-color: rgba(126,218,205,.25); border-radius: 5px; background: rgba(5,16,22,.9); box-shadow: 0 12px 28px rgba(0,0,0,.28); }
.tool-button,
.icon-button { min-width: 44px; min-height: 44px; touch-action: manipulation; }
.tool-button { width: 44px; height: 44px; border-radius: 3px; }
.tool-button:hover { color: #f0f8f7; background: rgba(99,220,196,.07); }
.tool-button.active { color: var(--tech-cyan); background: rgba(99,220,196,.1); }

.ghost-select,
.panel-link,
.view-all,
.alarm-item { min-height: 44px; touch-action: manipulation; }
.ghost-select:focus-visible,
.panel-link:focus-visible,
.view-all:focus-visible,
.alarm-item:focus-visible,
.tool-button:focus-visible { outline: 2px solid #8ce7d4; outline-offset: 2px; }
.alarm-item { transition: background-color .18s var(--tech-ease); }
.alarm-item:hover,
.alarm-item:focus-visible { background: rgba(114,185,237,.045); }

.grid-lines { stroke: rgba(174,207,212,.14); }
.series { stroke-width: 2.05; }
.axis-text { fill: #91a5aa; font-size: 8.5px; }
.line-key { height: 3px; }
.teal-series { stroke: #64ddc5; }
.blue-series { stroke: #79bdf0; }
.amber-series { stroke: #f3b457; }
.data-points { stroke: #0a1a21; stroke-width: 1.5; }
.energy-bars { border-bottom-color: rgba(174,207,212,.18); background: repeating-linear-gradient(to bottom, rgba(174,207,212,.095) 0 1px, transparent 1px 20px); }

.donut { box-shadow: 0 0 0 1px rgba(150,202,207,.12), 0 12px 28px rgba(0,0,0,.22); }
.normal-pill,
.saving-pill,
.count-badge { border-radius: 3px; }
.model-badge,
body .plant-device-card,
body .plant-label { border-radius: 4px !important; border-color: rgba(99,220,196,.34) !important; background: rgba(6,18,24,.91) !important; box-shadow: 0 14px 32px rgba(0,0,0,.25) !important; }
body .plant-label:hover,
body .plant-label:focus-visible { border-color: var(--tech-cyan) !important; }

/* Runtime Three.js labels are injected after this stylesheet; the body prefix
   keeps this legibility pass authoritative without modifying model code. */
body .plant-label {
  min-width: 124px;
  max-width: min(178px, calc(100% - 20px));
  padding: 9px 11px 8px;
}
body .plant-label__name { font-size: 13px; line-height: 1.25; }
body .plant-label__metric { color: #b1c1c4; font-size: 11px; line-height: 1.25; }
body .plant-device-card {
  width: min(292px, calc(100% - 28px));
  padding: 14px;
}
body .plant-device-card__eyebrow { color: #7ce2ce; font-size: 11px; }
body .plant-device-card__title { font-size: 16px; line-height: 1.25; }
body .plant-device-card__status { font-size: 11px; }
body .plant-device-card__metric small { color: #9aabad; font-size: 10px; }
body .plant-device-card__metric strong { font-size: 14px; }

@container console-screen (max-width: 1500px) {
  .dashboard-shell { --grid-gap: 9px; }
  .panel-heading { gap: 7px; }
  .panel-heading h2 { letter-spacing: .035em; }
  .panel-eyebrow { letter-spacing: .2em; }
  .equipment-body { justify-content: space-around; }
  .health-grid span { font-size: 8px; }
  .energy-totals { gap: 8px; }
  .alarm-item { padding-right: 2px; padding-left: 2px; }
  body .plant-label { min-width: 110px; max-width: 150px; padding: 7px 8px; }
  body .plant-label__name { overflow: hidden; font-size: 12px; text-overflow: ellipsis; }
  body .plant-label__metric { font-size: 10px; }
  body .plant-device-card { width: min(252px, calc(100% - 24px)); padding: 12px; }
  body .plant-device-card__title { font-size: 15px; }
  body .plant-device-card__metrics { gap: 6px; margin-top: 9px; }
  body .plant-device-card__metric { padding: 7px; }
}

@container console-screen (max-height: 820px) {
  .ghost-select, .panel-link { min-height: 36px; }
  .alarm-item { min-height: 38px; }
  .view-all { min-height: 32px; }
  .panel-heading { padding-bottom: 5px; }
  body .plant-label { padding-top: 6px; padding-bottom: 6px; }
  body .plant-label__metric { display: none; }
  body .plant-device-card { bottom: 10px; padding: 10px; }
  body .plant-device-card__metrics { margin-top: 7px; }
  body .plant-device-card__metric { padding: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .panel, .kpi-item, .nav-item, .alarm-item, .tool-button { transition: none !important; transform: none !important; }
  .progress i, .status-dot { box-shadow: none !important; }
}