/* Escala tipográfica de accesibilidad: +15% respecto al diseño base aprobado. */
:root {
  --deep: #071a45;
  --navy: #0a2868;
  --brand: #1064d8;
  --cyan: #2eb9ff;
  --accent: #e7283f;
  --ink: #14213d;
  --muted: #69748a;
  --line: #dfe5ef;
  --surface: #ffffff;
  --canvas: #f3f6fb;
  --success: #17a673;
  --warning: #e89b27;
  --danger: #d93b4f;
  --purple: #6b62d9;
  --shadow: 0 8px 28px rgba(16, 42, 86, 0.07);
  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body, #app { margin: 0; min-height: 100%; }
body { background: var(--canvas); }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid rgba(46, 185, 255, .42);
  outline-offset: 2px;
}
.icon { width: 20px; height: 20px; flex: 0 0 auto; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 252px;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  background:
    radial-gradient(circle at -10% 110%, rgba(46,185,255,.17), transparent 36%),
    linear-gradient(180deg, #071a45, #061536);
  color: white;
  display: flex;
  flex-direction: column;
  box-shadow: 9px 0 35px rgba(5, 19, 52, .15);
}
.brand-block {
  height: 86px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.brand-block strong { font-size: 23px; letter-spacing: -.5px; }
.brand-block small { display: block; color: #9fb1d5; font-size: 11.5px; margin-top: 2px; letter-spacing: .3px; }
.brand-logo {
  width: 55px;
  height: 36px;
  overflow: hidden;
  border-radius: 8px;
  background: #09579f;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
.brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.main-nav { padding: 25px 14px; }
.nav-section {
  display: block; padding: 0 13px 9px; color: #7187b1; font-size: 10.35px; font-weight: 800;
  letter-spacing: 1.5px;
}
.nav-section.second { margin-top: 23px; }
.nav-item {
  width: 100%; height: 46px; margin: 2px 0; padding: 0 13px; border: 0; border-radius: 10px;
  background: transparent; color: #b8c5df; display: flex; align-items: center; gap: 13px;
  cursor: pointer; font-size: 14.95px; font-weight: 600; text-align: left; position: relative;
}
.nav-item .icon { width: 18px; }
.nav-item:hover { color: white; background: rgba(255,255,255,.06); }
.nav-item.active {
  color: white; background: linear-gradient(90deg, rgba(16,100,216,.9), rgba(29,111,225,.66));
  box-shadow: 0 8px 18px rgba(5, 64, 152, .32);
}
.nav-item.active::before {
  content: ""; position: absolute; left: -14px; height: 26px; width: 3px; border-radius: 0 4px 4px 0; background: #4cc6ff;
}
.nav-dot { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: #35d6a0; box-shadow: 0 0 0 4px rgba(53,214,160,.1); }
.sidebar-footer {
  margin-top: auto; padding: 20px 18px; border-top: 1px solid rgba(255,255,255,.09);
  display: flex; gap: 11px; align-items: center;
}
.user-avatar, .topbar-user > span {
  width: 35px; height: 35px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(145deg, #246fd1, #1f4f9b); color: white; font-size: 12.65px; font-weight: 800;
}
.sidebar-footer strong { font-size: 12.65px; display: block; }
.sidebar-footer small { font-size: 10.35px; color: #8699bf; }

.main-shell { margin-left: 252px; min-width: 0; flex: 1; }
.app-shell.sidebar-collapsed .sidebar { transform: translateX(-100%); }
.app-shell.sidebar-collapsed .main-shell { margin-left: 0; }
.app-shell.sidebar-collapsed .menu-button { display: grid; }
.app-shell.sidebar-collapsed .sidebar.open { transform: translateX(0); }
.app-shell.sidebar-collapsed .sidebar.open + .sidebar-scrim {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 29;
  background: rgba(3,13,35,.5);
}
.topbar {
  height: 64px; padding: 0 30px; background: white; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 20;
}
.topbar-context { min-width: 0; display: flex; align-items: center; gap: 16px; }
.topbar-brand {
  height: 34px;
  padding-right: 13px;
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-brand img {
  width: 45px;
  height: 29px;
  border-radius: 5px;
  object-fit: contain;
  background: #09579f;
}
.topbar-brand strong { color: var(--deep); font-size: 11.5px; letter-spacing: .8px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12.65px; color: var(--muted); }
.breadcrumb .icon { width: 12px; }
.breadcrumb strong { color: var(--ink); }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.live-chip {
  height: 29px; padding: 0 11px; border-radius: 20px; background: #edf9f5; color: #16845f;
  display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700;
}
.live-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(23,166,115,.12); } }
.notification-button, .icon-button {
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); background: white;
  display: grid; place-items: center; cursor: pointer; position: relative;
}
.notification-button.active { color: var(--brand); border-color: #a9c9f4; background: #f2f7ff; }
.notification-button .icon { width: 17px; }
.notification-button span {
  position: absolute; right: -4px; top: -4px; min-width: 16px; height: 16px; border-radius: 8px;
  background: var(--accent); color: white; display: grid; place-items: center; font-size: 9.2px; font-weight: 800;
}
.topbar-user { display: flex; gap: 9px; align-items: center; padding-left: 16px; border-left: 1px solid var(--line); }
.topbar-user strong, .topbar-user small { display: block; }
.topbar-user strong { font-size: 11.5px; }
.topbar-user small { font-size: 10.35px; color: var(--muted); margin-top: 2px; }
.menu-button { display: none; }
.notification-panel {
  position: fixed;
  z-index: 170;
  right: 22px;
  top: 70px;
  width: min(390px, calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid #dbe3ee;
  border-radius: 14px;
  background: white;
  box-shadow: 0 22px 60px rgba(8, 28, 60, .22);
  color: var(--ink);
  animation: modalIn .18s ease-out;
}
.notification-panel > header {
  padding: 15px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e6ebf2;
}
.notification-panel > header h2 { margin: 3px 0 0; font-size: 17.25px; }
.notification-panel > header button {
  width: 29px; height: 29px; border: 0; border-radius: 7px; background: #f1f4f8;
  display: grid; place-items: center; cursor: pointer;
}
.notification-panel > header .icon { width: 14px; }
.notification-scope {
  margin: 12px;
  padding: 10px;
  border: 1px solid #cfe2f8;
  border-radius: 9px;
  background: #eff7ff;
  color: #27629e;
  display: flex;
  align-items: center;
  gap: 9px;
}
.notification-scope .icon { width: 17px; }
.notification-scope strong, .notification-scope small { display: block; }
.notification-scope strong { font-size: 9.2px; }
.notification-scope small { margin-top: 2px; color: #6484a5; font-size: 8.05px; line-height: 1.35; }
.notification-list { padding: 0 12px; }
.notification-item {
  width: 100%;
  min-height: 64px;
  padding: 9px 2px;
  border: 0;
  border-top: 1px solid #e9edf3;
  background: transparent;
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 9px;
  text-align: left;
  cursor: pointer;
}
.notification-item:hover { background: #f8fafc; }
.notification-item > i { width: 7px; height: 36px; border-radius: 4px; background: #9ca9b9; }
.notification-item.danger > i { background: var(--danger); }
.notification-item.warning > i { background: var(--warning); }
.notification-item em, .notification-item strong, .notification-item small { display: block; }
.notification-item em { margin-bottom: 3px; color: var(--brand); font-size: 6.9px; font-style: normal; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.notification-item strong { font-size: 9.77px; }
.notification-item small { margin-top: 3px; color: var(--muted); font-size: 8.05px; }
.notification-item time { color: var(--muted); font-size: 7.47px; }
.notification-panel > footer {
  padding: 11px 13px;
  border-top: 1px solid #e5eaf1;
  background: #f7f9fc;
  color: #718096;
  font-size: 8.05px;
  line-height: 1.4;
}
.notification-panel > footer strong { color: #42536a; }
.demo-banner {
  min-height: 34px; padding: 7px 30px; background: #f0f7ff; color: #315b90; border-bottom: 1px solid #dceafe;
  display: flex; align-items: center; justify-content: space-between; font-size: 10.35px; font-weight: 700; letter-spacing: .1px;
}
.demo-banner span { display: flex; align-items: center; gap: 7px; }
.demo-banner .icon { width: 14px; }
.demo-banner .last-update { font-weight: 500; color: #7189a7; }
.page { padding: 30px; max-width: 1680px; margin: 0 auto; }

.page-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 23px; gap: 20px; }
.page-kicker, .eyebrow {
  display: block; color: var(--brand); font-size: 10.35px; line-height: 1.4; letter-spacing: 1.35px; font-weight: 800;
}
.page-heading h1 { margin: 5px 0 5px; font-size: 28.75px; line-height: 1.2; letter-spacing: -.7px; }
.page-heading p { margin: 0; color: var(--muted); font-size: 12.65px; }
.page-actions { display: flex; align-items: center; gap: 9px; }
.button {
  border: 0; height: 38px; border-radius: 9px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; font-size: 11.5px; font-weight: 800; cursor: pointer; transition: .16s ease;
}
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button .icon { width: 15px; }
.button.primary { background: var(--brand); color: white; box-shadow: 0 6px 14px rgba(16,100,216,.2); }
.button.secondary { border: 1px solid #cfd9e8; background: white; color: #355171; }
.button.danger { background: var(--danger); color: white; }
.button.ghost { height: 35px; background: transparent; color: var(--brand); align-self: end; }
.button.full { width: 100%; }
.button:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }

.metric-grid, .report-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.metric-card {
  min-height: 112px; border: 1px solid var(--line); background: var(--surface); border-radius: 14px;
  padding: 18px; box-shadow: var(--shadow); display: flex; align-items: flex-start; gap: 14px;
}
.metric-icon {
  width: 39px; height: 39px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto;
  background: #edf4ff; color: var(--brand);
}
.metric-icon .icon { width: 18px; }
.metric-icon.green { background: #eaf8f3; color: var(--success); }
.metric-icon.cyan { background: #eaf8ff; color: #109ede; }
.metric-icon.purple { background: #f0effd; color: var(--purple); }
.metric-content { min-width: 0; }
.metric-value { margin: 5px 0 3px; font-size: 25.3px; line-height: 1.15; font-weight: 800; letter-spacing: -.6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.metric-value small { font-size: 12.65px; color: #53627a; letter-spacing: 0; }
.metric-meta { color: var(--muted); font-size: 9.77px; line-height: 1.4; }

.panel { background: white; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.dashboard-grid { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, .85fr); gap: 14px; }
.trend-panel, .alerts-panel { padding: 20px 22px 14px; min-height: 318px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.panel-heading h2, .detail-heading h2 { margin: 4px 0 0; font-size: 17.25px; letter-spacing: -.25px; }
.panel-stat { text-align: right; }
.panel-stat strong { display: block; font-size: 17.25px; font-variant-numeric: tabular-nums; }
.panel-stat span { color: var(--muted); font-size: 9.2px; }
.line-chart { width: 100%; height: 226px; overflow: visible; }
.line-chart .chart-grid { stroke: #e9eef5; stroke-width: 1; }
.line-chart .chart-grid text { fill: #748398; stroke: none; font-size: 9.2px; font-weight: 600; }
.line-chart .chart-area { color: var(--brand); stroke: none; }
.line-chart .chart-line { fill: none; stroke: var(--brand); stroke-width: 3; }
.line-chart circle { fill: white; stroke: var(--brand); stroke-width: 2; }
.line-chart.cyan .chart-area { color: var(--cyan); }
.line-chart.cyan .chart-line, .line-chart.cyan circle { stroke: var(--cyan); }
.line-chart.green .chart-area { color: #22c58b; }
.line-chart.green .chart-line, .line-chart.green circle { stroke: #22c58b; }
.line-chart.amber .chart-area { color: #f0a62a; }
.line-chart.amber .chart-line, .line-chart.amber circle { stroke: #f0a62a; }
.line-chart.interactive .chart-point { cursor: crosshair; outline: none; }
.line-chart.interactive .chart-hit-area { fill: transparent !important; stroke: transparent !important; pointer-events: all; }
.line-chart.interactive .chart-point-marker { transition: r .15s ease, filter .15s ease; }
.line-chart.interactive .chart-point:hover .chart-point-marker,
.line-chart.interactive .chart-point:focus .chart-point-marker { r: 5px; filter: drop-shadow(0 0 4px currentColor); }
.chart-tooltip { opacity: 0; pointer-events: none; transition: opacity .14s ease; }
.chart-point:hover .chart-tooltip,
.chart-point:focus .chart-tooltip,
.chart-point.selected .chart-tooltip { opacity: 1; }
.chart-tooltip rect { fill: #10233f; stroke: rgba(129,170,221,.45); stroke-width: 1; filter: drop-shadow(0 5px 8px rgba(2,12,28,.28)); }
.chart-tooltip text { stroke: none; font-family: inherit; }
.chart-tooltip-label { fill: #a9bdd6; font-size: 8.5px; font-weight: 600; }
.chart-tooltip-value { fill: #fff; font-size: 10px; font-weight: 800; }
.chart-labels { fill: #8a95a7; font-size: 10.35px; text-transform: capitalize; }
.chart-axis-title { fill: #53647b; font-size: 9.2px; font-weight: 800; letter-spacing: .4px; }
.chart-period { margin: 7px 0 0; color: #69788d; font-size: 9.77px; line-height: 1.4; }
.count-badge { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; display: grid; place-items: center; background: #fff0f2; color: var(--danger); font-size: 11.5px; font-weight: 800; }
.alert-list { margin-top: 14px; }
.alert-row {
  width: 100%; border: 0; border-top: 1px solid #edf0f5; background: white; padding: 13px 0; display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; text-align: left; align-items: center; cursor: pointer;
}
.alert-indicator { width: 7px; height: 34px; border-radius: 4px; background: #a8b2c2; }
.alert-indicator.danger { background: var(--danger); }
.alert-indicator.warning { background: var(--warning); }
.alert-row strong, .alert-row small { display: block; }
.alert-row strong { font-size: 10.92px; }
.alert-row small { color: var(--muted); font-size: 9.2px; margin-top: 3px; }
.alert-row time { font-size: 9.2px; color: var(--muted); }
.text-button { border: 0; background: transparent; color: var(--brand); font-size: 10.35px; font-weight: 800; padding: 8px 0; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.text-button .icon { width: 12px; }
.zone-overview { margin-top: 14px; padding: 20px 22px; }
.soft-label, .unit-label, .results-count {
  border-radius: 16px; padding: 6px 10px; background: #f2f5f9; color: #6c788c; font-size: 9.2px; font-weight: 700;
}
.zone-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 15px; }
.zone-card {
  padding: 14px; min-width: 0; border: 1px solid #e1e6ee; border-radius: 11px; background: #fbfcfe;
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; cursor: pointer; text-align: left;
}
.zone-card:hover { border-color: #a7c7f2; background: #f7fbff; }
.zone-icon, .asset-icon {
  width: 34px; height: 34px; border-radius: 9px; background: #edf5ff; color: var(--brand); display: grid; place-items: center;
}
.zone-icon .icon, .asset-icon .icon { width: 16px; }
.zone-card-title strong, .zone-card-title small { display: block; }
.zone-card-title strong { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zone-card-title small { color: var(--muted); font-size: 8.62px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zone-flow { text-align: right; }
.zone-flow strong, .zone-flow small { display: block; }
.zone-flow strong { font-size: 14.95px; }
.zone-flow small { color: var(--muted); font-size: 8.05px; }
.zone-card-footer { grid-column: 2 / -1; display: flex; align-items: center; gap: 6px; color: #6d798c; font-size: 9.2px; border-top: 1px solid #e9edf3; padding-top: 9px; }
.zone-card-footer i { width: 6px; height: 6px; border-radius: 50%; background: var(--warning); }
.zone-card-footer i.online { background: var(--success); }

.legend { padding: 8px 11px; background: white; border: 1px solid var(--line); border-radius: 9px; display: flex; gap: 12px; }
.legend span { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9.2px; font-weight: 700; }
.legend i { width: 7px; height: 7px; border-radius: 50%; background: #aeb7c4; }
.legend i.success { background: var(--success); }
.legend i.danger { background: var(--danger); }
.scada-layout { display: grid; grid-template-columns: minmax(620px, 1fr) 310px; gap: 14px; align-items: start; }
.scada-canvas { overflow: hidden; }
.scada-toolbar { height: 42px; padding: 0 17px; background: #0a2457; color: #c4d2eb; display: flex; align-items: center; justify-content: space-between; font-size: 9.2px; }
.scada-toolbar span { display: flex; align-items: center; gap: 7px; }
.scada-toolbar .icon { width: 15px; color: #55cbff; }
.scada-scroll { overflow-x: auto; padding: 14px 18px 18px; background-color: #f5f9fd; background-image: radial-gradient(#c9d7e8 1px, transparent 1px); background-size: 18px 18px; }
.process-lane {
  min-width: 790px; min-height: 122px; margin: 9px 0; padding: 13px; background: rgba(255,255,255,.94); border: 1px solid #d9e2ee;
  border-left: 3px solid #276dca; border-radius: 10px; display: flex; align-items: center; box-shadow: 0 5px 14px rgba(25,57,99,.05);
}
.source-node { width: 116px; text-align: center; flex: 0 0 auto; }
.source-node strong, .source-node small { display: block; }
.source-node strong { font-size: 10.35px; margin-top: 4px; }
.source-node small { color: var(--muted); font-size: 8.05px; margin-top: 2px; }
.well-glyph { width: 35px; height: 35px; margin: auto; border-radius: 50%; border: 3px solid #9ac5ed; background: #dff2ff; display: grid; place-items: center; position: relative; }
.well-glyph::after { content: ""; position: absolute; width: 43px; height: 7px; top: -8px; border: 3px solid #7495b8; border-bottom: 0; border-radius: 7px 7px 0 0; }
.well-glyph .icon { width: 15px; color: #168ed2; }
.lane-equipment { display: flex; align-items: center; flex: 1; }
.scada-pump {
  width: 117px; height: 66px; padding: 7px 8px; border: 1px solid #ccd7e4; border-radius: 9px; background: white;
  display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 7px; text-align: left; cursor: pointer; box-shadow: 0 3px 8px rgba(25,57,99,.07);
}
.scada-pump.selected { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(16,100,216,.13); }
.scada-pump strong, .scada-pump small { display: block; }
.scada-pump strong { font-size: 9.77px; }
.scada-pump small { color: var(--muted); font-size: 7.47px; }
.scada-pump em { grid-column: 1 / -1; font-style: normal; border-top: 1px solid #edf0f4; padding-top: 4px; color: #405068; font-size: 11.5px; font-weight: 800; }
.pump-wheel {
  width: 28px; height: 28px; border-radius: 50%; background: #e9f7f2; border: 2px solid var(--success); position: relative; display: block;
}
.pump-wheel i { position: absolute; left: 12px; top: 3px; width: 3px; height: 10px; border-radius: 3px; background: var(--success); transform-origin: 1px 10px; }
.pump-wheel i:nth-child(2) { transform: rotate(120deg); }
.pump-wheel i:nth-child(3) { transform: rotate(240deg); }
.scada-pump.idle .pump-wheel, .scada-pump.muted .pump-wheel { background: #f1f3f6; border-color: #9ea8b7; }
.scada-pump.idle .pump-wheel i, .scada-pump.muted .pump-wheel i { background: #9ea8b7; }
.scada-pump.danger .pump-wheel { background: #fff0f2; border-color: var(--danger); }
.scada-pump.danger .pump-wheel i { background: var(--danger); }
.scada-pump.warning .pump-wheel { background: #fff8e9; border-color: var(--warning); }
.scada-pump.warning .pump-wheel i { background: var(--warning); }
.pipe { width: 21px; height: 7px; background: #c5ceda; position: relative; overflow: hidden; flex: 0 0 auto; }
.pipe span { position: absolute; inset: 2px 0; background: transparent; }
.pipe.flowing { background: #7bd5b3; }
.pipe.flowing span { background: repeating-linear-gradient(90deg, transparent 0 5px, white 5px 9px); animation: flow .8s linear infinite; opacity: .8; }
@keyframes flow { to { transform: translateX(9px); } }
.meter-node { width: 27px; height: 37px; border: 2px solid #8da0b5; border-radius: 5px; background: white; display: grid; place-items: center; flex: 0 0 auto; }
.meter-node span { color: var(--brand); line-height: 0; }
.meter-node .icon { width: 15px; }
.meter-node small { font-size: 6.9px; font-weight: 800; color: #6d7d91; }
.pipe.trunk { width: 26px; }
.destination-node {
  width: 80px; height: 69px; border: 3px solid #6f8198; border-top: 0; border-radius: 0 0 12px 12px; flex: 0 0 auto;
  position: relative; display: flex; flex-direction: column; justify-content: center; text-align: center; overflow: hidden;
}
.destination-node::before { content: ""; position: absolute; top: 0; left: -3px; width: 80px; border-top: 3px solid #6f8198; border-radius: 50%; }
.tank-level { position: absolute; inset: 29px 2px 2px; background: linear-gradient(#70c8f4, #359bd9); opacity: .25; border-radius: 0 0 8px 8px; }
.destination-node strong, .destination-node small { position: relative; }
.destination-node strong { font-size: 8.05px; }
.destination-node small { color: var(--muted); font-size: 6.9px; }
.equipment-detail { padding: 19px; position: sticky; top: 113px; }
.detail-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid #e8ecf2; }
.detail-heading small { font-size: 9.2px; color: var(--muted); }
.status-pill {
  min-height: 24px; padding: 0 8px; border-radius: 12px; background: #eff2f6; color: #6e7887;
  display: inline-flex; align-items: center; gap: 5px; font-size: 8.62px; font-weight: 800; white-space: nowrap;
}
.status-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.success { background: #eaf8f3; color: #13845f; }
.status-pill.danger { background: #fff0f2; color: var(--danger); }
.status-pill.warning { background: #fff6e6; color: #bd7813; }
.status-pill.muted, .status-pill.idle { background: #f0f2f5; color: #6f7886; }
.status-pill.compact { min-height: 22px; }
.detail-reading { margin: 15px 0; padding: 14px; border-radius: 10px; background: linear-gradient(135deg, #0b2c69, #1252a9); color: white; }
.detail-reading span, .detail-reading strong, .detail-reading em { display: block; }
.detail-reading span { font-size: 9.2px; color: #aac4eb; }
.detail-reading strong { font-size: 27.6px; margin: 4px 0; }
.detail-reading strong small { font-size: 10.35px; }
.detail-reading em { font-style: normal; font-size: 8.05px; color: #68d8b0; }
.mini-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini-metrics div { padding: 10px; border: 1px solid #e5e9ef; border-radius: 8px; background: #fbfcfd; }
.mini-metrics span, .mini-metrics strong { display: block; }
.mini-metrics span { color: var(--muted); font-size: 8.05px; }
.mini-metrics strong { margin-top: 4px; font-size: 10.35px; }
.mini-chart-heading { margin-top: 15px; display: flex; justify-content: space-between; font-size: 8.05px; color: var(--muted); }
.mini-chart-heading strong { color: var(--ink); }
.equipment-detail .line-chart { height: 118px; }
.control-availability { padding: 10px; border-radius: 9px; display: flex; gap: 8px; align-items: center; margin: 5px 0 12px; }
.control-availability.enabled { background: #eaf8f3; color: #16845f; }
.control-availability.disabled { background: #f3f4f6; color: #7a8493; }
.control-availability .icon { width: 16px; }
.control-availability strong, .control-availability small { display: block; }
.control-availability strong { font-size: 9.2px; }
.control-availability small { font-size: 7.47px; margin-top: 2px; }

/* ── SCADA P&ID viewer: isolated Pepsi industrial theme ───────────── */
.scada-standalone-shell {
  min-height: 100vh;
  overflow: hidden;
  background: #050b18;
}
.scada-standalone-shell .sidebar {
  transform: translateX(-100%);
  transition: transform .2s ease;
}
.scada-standalone-shell .sidebar.open { transform: translateX(0); }
.scada-standalone-shell .sidebar.open + .sidebar-scrim {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 29;
  background: rgba(3,13,35,.62);
}
.scada-workbench {
  --scada-bg: #050b18;
  --scada-panel: #0b1426;
  --scada-card: #0e1728;
  --scada-line: rgba(164, 189, 224, .15);
  --scada-text: #f5f8ff;
  --scada-muted: #8394ad;
  overflow: hidden;
  border: 1px solid #142744;
  border-radius: 15px;
  background: var(--scada-bg);
  box-shadow: 0 20px 50px rgba(4, 17, 42, .2);
  color: var(--scada-text);
}
.scada-workbench.standalone {
  width: 100vw;
  height: 100vh;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  box-shadow: none;
}
.scada-workbench.standalone .scada-workspace { flex: 1; min-height: 0; }
.scada-workbench.standalone .scada-viewport { height: 100%; }
.scada-workbench.standalone .scada-inspector { height: 100%; }
.scada-standalone-shell .notification-panel {
  top: 68px;
  border-color: rgba(129, 165, 212, .22);
  background: #0b1527;
  color: #f5f8ff;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
}
.scada-standalone-shell .notification-panel > header,
.scada-standalone-shell .notification-item,
.scada-standalone-shell .notification-panel > footer { border-color: rgba(138,166,204,.13); }
.scada-standalone-shell .notification-panel > header button { background: rgba(255,255,255,.06); color: #b9c9dc; }
.scada-standalone-shell .notification-scope { border-color: rgba(46,185,255,.2); background: rgba(16,100,216,.12); color: #64cbff; }
.scada-standalone-shell .notification-scope small,
.scada-standalone-shell .notification-item small,
.scada-standalone-shell .notification-item time { color: #6f829d; }
.scada-standalone-shell .notification-item:hover { background: rgba(255,255,255,.035); }
.scada-standalone-shell .notification-item strong { color: #eef5ff; }
.scada-standalone-shell .notification-panel > footer { background: rgba(255,255,255,.025); color: #73859e; }
.scada-standalone-shell .notification-panel > footer strong { color: #b8c8dc; }
.scada-workbench.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 200;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
.scada-workbench.fullscreen .scada-workspace { flex: 1; min-height: 0; }
.scada-workbench.fullscreen .scada-viewport { height: 100%; }
.scada-module-header {
  height: 61px;
  padding: 0 17px;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 15px;
  background:
    linear-gradient(90deg, rgba(16,100,216,.15), transparent 34%),
    #081224;
  border-bottom: 1px solid rgba(93, 148, 221, .2);
  position: relative;
}
.scada-module-header::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 38%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #2eb9ff, #e7283f, transparent);
  animation: scada-scan 5s linear infinite;
}
@keyframes scada-scan { from { transform: translateX(-100%); } to { transform: translateX(360%); } }
.scada-module-title { display: flex; align-items: center; gap: 10px; }
.scada-module-menu {
  width: 35px;
  height: 35px;
  border: 1px solid rgba(139,168,209,.2);
  border-radius: 9px;
  background: rgba(255,255,255,.035);
  color: #b8c9df;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.scada-module-menu:hover { color: white; border-color: #2eb9ff; background: rgba(16,100,216,.15); }
.scada-module-menu .icon { width: 17px; }
.scada-gepp-logo {
  width: 55px;
  height: 36px;
  overflow: hidden;
  border-radius: 6px;
  background: #09579f;
  display: grid;
  place-items: center;
  box-shadow: 0 0 18px rgba(46,185,255,.12);
}
.scada-gepp-logo img { width: 100%; height: 100%; object-fit: contain; }
.scada-module-title strong, .scada-module-title small { display: block; }
.scada-module-title strong { font-size: 13.8px; letter-spacing: .9px; }
.scada-module-title small { margin-top: 2px; color: var(--scada-muted); font-size: 8.05px; }
.scada-module-live { text-align: center; }
.scada-module-live > span {
  height: 25px;
  padding: 0 10px;
  border: 1px solid rgba(40, 206, 150, .25);
  border-radius: 13px;
  background: rgba(23,166,115,.09);
  color: #57ddb0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 8.05px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .55px;
}
.scada-module-live i {
  width: 6px; height: 6px; border-radius: 50%; background: #27d49a;
  box-shadow: 0 0 0 4px rgba(39,212,154,.09), 0 0 8px rgba(39,212,154,.55);
}
.scada-module-live small { display: block; margin-top: 3px; color: #627591; font-size: 6.9px; }
.scada-module-actions { justify-self: end; display: flex; align-items: center; gap: 7px; }
.scada-demo-chip {
  height: 29px;
  padding: 0 9px;
  border: 1px solid rgba(46,185,255,.24);
  border-radius: 15px;
  background: rgba(16,100,216,.1);
  color: #62cfff;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.scada-demo-chip .icon { width: 12px; }
.scada-demo-chip strong { font-size: 6.9px; letter-spacing: .7px; }
.scada-demo-chip em { color: #7990ad; font-size: 6.32px; font-style: normal; }
.scada-module-actions button {
  height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(139, 168, 209, .18);
  border-radius: 7px;
  background: rgba(255,255,255,.035);
  color: #b7c7dd;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 8.05px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.scada-module-actions button:hover { border-color: #2378df; background: rgba(16,100,216,.14); color: white; }
.scada-module-actions .icon { width: 14px; }
.scada-module-actions .scada-alert-button { position: relative; }
.scada-module-actions .scada-alert-button.active { border-color: #2eb9ff; background: rgba(16,100,216,.18); color: white; }
.scada-alert-button > em {
  position: absolute;
  right: -4px;
  top: -5px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: #e7283f;
  color: white;
  display: grid;
  place-items: center;
  font-size: 6.9px;
  font-style: normal;
  font-weight: 800;
}
.scada-view-toolbar {
  min-height: 47px;
  padding: 6px 13px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #0a1528;
  border-bottom: 1px solid rgba(148,174,208,.12);
}
.scada-diagram-select { min-width: 205px; display: flex; align-items: center; gap: 8px; padding-right: 14px; border-right: 1px solid rgba(148,174,208,.14); }
.scada-diagram-select > span { width: 27px; height: 27px; border-radius: 7px; display: grid; place-items: center; background: rgba(16,100,216,.15); color: #43bdfa; }
.scada-diagram-select .icon { width: 14px; }
.scada-diagram-select small, .scada-diagram-select strong { display: block; }
.scada-diagram-select small { color: #60748f; font-size: 6.32px; letter-spacing: 1px; }
.scada-diagram-select strong { margin-top: 2px; font-size: 8.62px; }
.scada-zone-tabs { display: flex; gap: 4px; flex: 1; }
.scada-zone-tabs button {
  height: 27px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #71839d;
  font-size: 8.05px;
  font-weight: 700;
  cursor: pointer;
}
.scada-zone-tabs button:hover { color: #c7d8ee; background: rgba(255,255,255,.04); }
.scada-zone-tabs button.active { color: #eef7ff; border-color: rgba(46,185,255,.35); background: rgba(16,100,216,.2); box-shadow: inset 0 -2px #2eb9ff; }
.scada-state-legend { display: flex; gap: 9px; }
.scada-state-legend span { display: flex; align-items: center; gap: 4px; color: #70829b; font-size: 7.47px; font-weight: 700; }
.scada-state-legend i { width: 6px; height: 6px; border-radius: 50%; background: #59687b; }
.scada-state-legend i.flow { background: #25cb91; box-shadow: 0 0 7px rgba(37,203,145,.65); }
.scada-state-legend i.alarm { background: #ef4860; box-shadow: 0 0 7px rgba(239,72,96,.65); }
.scada-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 28vw); min-height: 0; }
.scada-viewport {
  height: 665px;
  position: relative;
  overflow: auto;
  cursor: grab;
  background-color: #060d1b;
  background-image:
    linear-gradient(rgba(55, 103, 164, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 103, 164, .08) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, rgba(16, 100, 216, .13), transparent 50%);
  background-size: 34px 34px, 34px 34px, 100% 100%;
}
.scada-viewport.dragging { cursor: grabbing; user-select: none; }
.scada-stage-space { position: relative; min-width: 100%; min-height: 100%; }
.scada-pid-stage {
  width: 1450px;
  position: relative;
  transform: scale(var(--scada-zoom));
  transform-origin: 0 0;
  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
}
.pid-pipe-layer { position: absolute; inset: 0; width: 1450px; height: 100%; z-index: 1; overflow: visible; }
.pid-pipe-shell { fill: none; stroke: #243348; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.pid-pipe-water { fill: none; stroke: #47576b; stroke-width: 6; stroke-linecap: butt; stroke-linejoin: round; }
.pid-pipe-water.active {
  stroke: #35bff7;
  stroke-dasharray: 13 9;
  filter: drop-shadow(0 0 4px rgba(46,185,255,.6));
  animation: pid-flow .85s linear infinite;
}
@keyframes pid-flow { to { stroke-dashoffset: -44; } }
.pid-overview-node {
  position: absolute;
  z-index: 4;
  left: 505px;
  top: 20px;
  width: 440px;
  overflow: hidden;
  border: 1px solid rgba(54, 145, 255, .3);
  border-radius: 12px;
  background: #0c1628;
  box-shadow: 0 12px 34px rgba(0,0,0,.36), 0 0 25px rgba(16,100,216,.08);
}
.pid-overview-header {
  height: 27px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(110deg, #0750b8, #126bd8 55%, #071f51);
  color: white;
  font-size: 8.05px;
  font-weight: 800;
  letter-spacing: .7px;
}
.pid-overview-body { min-height: 82px; padding: 10px 12px; display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 12px; align-items: center; }
.pid-overview-body > div:not(:last-child) { border-right: 1px solid rgba(139,164,198,.16); }
.pid-overview-body small, .pid-overview-body strong, .pid-overview-body span { display: block; }
.pid-overview-body small { color: #8191a8; font-size: 7.47px; }
.pid-overview-body strong { margin: 3px 0 5px; font-size: 20.7px; font-variant-numeric: tabular-nums; }
.pid-overview-body strong em { font-size: 8.05px; color: #9eabc0; font-style: normal; }
.pid-overview-body > div > span { color: #6f8098; font-size: 6.9px; }
.pid-overview-body span i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #2eb9ff; }
.pid-overview-body span i.red { background: #e7283f; }
.pid-overview-operation { display: flex; align-items: center; gap: 10px; }
.pid-overview-operation > span:last-child strong { margin: 0; }
.pid-donut {
  --active: 50%;
  width: 57px; height: 57px; border-radius: 50%;
  background: conic-gradient(#2eb9ff var(--active), #1c2a3e 0);
  display: grid !important;
  place-items: center;
  position: relative;
}
.pid-donut::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #0c1628; }
.pid-donut b { position: relative; z-index: 1; font-size: 10.35px; }
.pid-zone-band {
  position: absolute;
  z-index: 2;
  left: 24px;
  right: 24px;
  height: 26px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(94, 131, 180, .17);
  border-bottom: 1px solid rgba(94, 131, 180, .09);
  background: linear-gradient(90deg, rgba(16,100,216,.09), transparent 45%);
}
.pid-zone-index { color: #2eb9ff; font: 800 9.2px ui-monospace, monospace; }
.pid-zone-band > span:nth-child(2) { display: flex; align-items: baseline; gap: 8px; }
.pid-zone-band strong { font-size: 8.05px; letter-spacing: .7px; text-transform: uppercase; }
.pid-zone-band small { color: #60718a; font-size: 6.9px; }
.pid-zone-band > em { margin-left: auto; color: #71cfff; font: normal 700 8.05px ui-monospace, monospace; }
.pid-source-node {
  position: absolute;
  z-index: 4;
  width: 140px;
  height: 98px;
  text-align: center;
  color: white;
}
.pid-well-cap {
  display: block;
  width: 76px;
  height: 13px;
  margin: 0 auto -2px;
  border: 4px solid #637691;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: #0e192b;
}
.pid-well-water {
  width: 76px;
  height: 52px;
  margin: auto;
  border: 4px solid #637691;
  border-radius: 5px 5px 22px 22px;
  background: linear-gradient(180deg, #0b182a 42%, rgba(46,185,255,.35) 43%);
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: inset 0 -11px 18px rgba(46,185,255,.15);
}
.pid-well-water::after { content: ""; position: absolute; top: 22px; left: 5px; right: 5px; border-top: 2px dashed rgba(121,215,255,.55); }
.pid-well-water .icon { width: 18px; color: #62d0ff; filter: drop-shadow(0 0 5px rgba(46,185,255,.55)); }
.pid-source-node strong, .pid-source-node small { display: block; }
.pid-source-node strong { margin-top: 6px; font-size: 8.05px; letter-spacing: .8px; }
.pid-source-node small { margin-top: 2px; color: #7689a5; font-size: 6.9px; }
.pid-pump-node {
  position: absolute;
  z-index: 5;
  width: 210px;
  height: 82px;
  padding: 0;
  border: 0;
  background: transparent;
  color: white;
  text-align: left;
  cursor: pointer;
}
.pid-pump-node:hover { z-index: 7; transform: translateY(-2px); }
.pid-pump-node.selected .pid-node-card { border-color: #2eb9ff; box-shadow: 0 0 0 2px rgba(46,185,255,.17), 0 12px 25px rgba(0,0,0,.38); }
.pid-branch-tag { position: absolute; left: -24px; top: 33px; color: #52657e; font: 700 5.75px ui-monospace, monospace; letter-spacing: .6px; transform: rotate(-90deg); }
.pid-equipment-art { position: absolute; z-index: 3; left: 5px; top: 21px; width: 57px; height: 43px; display: grid; place-items: center; }
.industrial-pump-visual { width: 100%; overflow: visible; filter: drop-shadow(0 5px 5px rgba(0,0,0,.5)); }
.industrial-pump-visual .pump-base { fill: #35465c; }
.industrial-pump-visual .pump-motor { fill: #60758f; stroke: #9daec2; stroke-width: 2; }
.industrial-pump-visual .pump-ribs { fill: none; stroke: #384a61; stroke-width: 2; }
.industrial-pump-visual .pump-body-metal { stroke: #b6c5d6; stroke-width: 1.3; }
.industrial-pump-visual .pump-impeller { fill: #17263b; stroke: #65caff; stroke-width: 2; }
.industrial-pump-visual .pump-blade { fill: #65caff; transform-origin: 66px 44px; }
.industrial-pump-visual.running .pump-blade { animation: scada-spin 1.45s linear infinite; }
@keyframes scada-spin { to { transform: rotate(360deg); } }
.industrial-pump-visual .pump-outlet { fill: none; stroke: #7f93aa; stroke-width: 8; stroke-linejoin: round; }
.industrial-pump-visual .pump-status-light { fill: #7f8a98; }
.industrial-pump-visual.running .pump-status-light { fill: #2bdda2; filter: drop-shadow(0 0 5px #2bdda2); }
.pid-pump-node.danger .pump-status-light { fill: #ef4860; filter: drop-shadow(0 0 5px #ef4860); }
.pid-pump-node.warning .pump-status-light { fill: #e9a634; filter: drop-shadow(0 0 5px #e9a634); }
.pid-node-card {
  position: absolute;
  inset: 7px 0 0;
  display: block;
  height: 75px;
  overflow: hidden;
  border: 1px solid rgba(153, 179, 212, .16);
  border-radius: 8px;
  background: #0d1728;
  box-shadow: 0 7px 17px rgba(0,0,0,.3);
}
.pid-node-header {
  height: 21px;
  padding: 0 6px 0 64px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(105deg, #07469d, #1064d8 58%, #071f4a);
}
.pid-pump-node.danger .pid-node-header { background: linear-gradient(105deg, #7d1630, #c72943 58%, #40101c); }
.pid-pump-node.warning .pid-node-header { background: linear-gradient(105deg, #765016, #b87817 58%, #38270e); }
.pid-pump-node.muted .pid-node-header, .pid-pump-node.idle .pid-node-header { background: linear-gradient(105deg, #243247, #3c4e66 58%, #172132); }
.pid-node-header > strong { font-size: 8.62px; }
.pid-node-header > em {
  margin-left: auto;
  height: 14px;
  padding: 0 5px;
  border: 1px solid rgba(255,255,255,.27);
  border-radius: 7px;
  background: rgba(0,0,0,.2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 6.32px;
  font-style: normal;
  text-transform: uppercase;
}
.pid-node-header > em i { width: 5px; height: 5px; border-radius: 50%; background: #2bdda2; box-shadow: 0 0 5px #2bdda2; }
.pid-pump-node.danger .pid-node-header > em i { background: #ff8293; box-shadow: 0 0 5px #ff8293; }
.pid-pump-node.warning .pid-node-header > em i { background: #ffd277; box-shadow: 0 0 5px #ffd277; }
.pid-pump-node.idle .pid-node-header > em i, .pid-pump-node.muted .pid-node-header > em i { background: #a0aaba; box-shadow: none; }
.pid-node-header > b { width: 14px; height: 14px; border: 1px solid rgba(255,255,255,.26); border-radius: 50%; display: grid; place-items: center; font-size: 8.05px; }
.pid-node-body { height: 36px; padding: 5px 5px 3px 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: linear-gradient(110deg, rgba(16,100,216,.13), transparent 65%); }
.pid-node-body > span { min-width: 0; }
.pid-node-body small, .pid-node-body strong { display: block; }
.pid-node-body small { color: #687a93; font-size: 5.52px; letter-spacing: .45px; }
.pid-node-body strong { margin-top: 2px; font: 700 9.2px ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.pid-node-body strong em { color: #778aa3; font-size: 5.75px; font-style: normal; }
.pid-node-total { display: none; }
.pid-node-footer { height: 17px; padding: 0 6px; border-top: 1px solid rgba(148,173,206,.1); display: flex; align-items: center; gap: 4px; color: #62748c; font-size: 6.32px; }
.pid-node-footer > i { width: 5px; height: 5px; border-radius: 50%; background: #657286; }
.pid-node-footer > i.live { background: #2bdda2; }
.pid-node-footer > em { margin-left: auto; color: #56c7ff; font-style: normal; }
.pid-meter-node {
  position: absolute;
  z-index: 4;
  width: 100px;
  height: 96px;
  padding: 7px;
  border: 1px solid rgba(147, 174, 209, .18);
  border-radius: 10px;
  background: #0d1728;
  box-shadow: 0 7px 17px rgba(0,0,0,.3);
  text-align: center;
}
.pid-meter-gauge {
  width: 66px; height: 36px; margin: 0 auto 5px; overflow: hidden; display: block; position: relative;
}
.pid-meter-gauge::before {
  content: ""; position: absolute; left: 5px; top: 3px; width: 54px; height: 54px; border: 7px solid #27364a; border-radius: 50%;
}
.pid-meter-gauge::after {
  content: ""; position: absolute; left: 5px; top: 3px; width: 54px; height: 54px; border: 7px solid transparent; border-top-color: #2eb9ff; border-left-color: #2eb9ff; border-radius: 50%; transform: rotate(var(--meter-angle));
}
.pid-meter-gauge b { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; font: 800 11.5px ui-monospace, monospace; }
.pid-meter-node > strong, .pid-meter-node > small { display: block; }
.pid-meter-node > strong { font-size: 8.05px; color: #8fdcff; }
.pid-meter-node > small { margin-top: 3px; color: #62758e; font-size: 5.52px; }
.pid-meter-node.active { border-color: rgba(46,185,255,.35); box-shadow: 0 0 16px rgba(46,185,255,.08); }
.pid-destination-node { position: absolute; z-index: 4; width: 175px; height: 140px; text-align: center; }
.pid-tank-shell {
  width: 105px;
  height: 93px;
  margin: auto;
  overflow: hidden;
  border: 5px solid #657890;
  border-top-width: 3px;
  border-radius: 50% / 8%;
  display: block;
  position: relative;
  background: #091326;
  box-shadow: inset 0 0 18px rgba(0,0,0,.55), 0 10px 20px rgba(0,0,0,.27);
}
.pid-tank-shell::before, .pid-tank-shell::after { content: ""; position: absolute; left: -5px; right: -5px; height: 13px; border: 4px solid #657890; border-radius: 50%; z-index: 3; }
.pid-tank-shell::before { top: -5px; background: #17263a; }
.pid-tank-shell::after { bottom: -5px; }
.pid-tank-shell > i { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(46,185,255,.45), rgba(16,100,216,.7)); transition: height .6s ease; }
.pid-tank-shell > i::before { content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 10px; border-radius: 50%; background: #43bff5; opacity: .65; }
.pid-tank-shell > b { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; font: 800 10.35px ui-monospace, monospace; text-shadow: 0 1px 3px #001; }
.pid-destination-node > strong, .pid-destination-node > small { display: block; }
.pid-destination-node > strong { margin-top: 7px; font-size: 9.2px; }
.pid-destination-node > small { margin-top: 2px; color: #64768e; font-size: 6.9px; letter-spacing: .7px; }
.scada-canvas-controls {
  position: sticky;
  left: 14px;
  bottom: 14px;
  z-index: 15;
  width: max-content;
  height: 31px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(140,170,209,.25);
  border-radius: 7px;
  overflow: hidden;
  background: rgba(8,18,36,.94);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.scada-canvas-controls button { width: 31px; height: 31px; border: 0; border-right: 1px solid rgba(140,170,209,.16); background: transparent; color: #d7e6f9; display: grid; place-items: center; font-size: 18.4px; cursor: pointer; }
.scada-canvas-controls button:hover { background: rgba(16,100,216,.24); }
.scada-canvas-controls .icon { width: 13px; }
.scada-canvas-controls span { width: 42px; color: #8fa1b8; font: 700 6.9px ui-monospace, monospace; text-align: center; }
.scada-minimap {
  position: sticky;
  left: calc(100% - 157px);
  bottom: 14px;
  z-index: 14;
  width: 140px;
  height: 89px;
  margin-top: -89px;
  padding: 6px;
  border: 1px solid rgba(140,170,209,.24);
  border-radius: 7px;
  background: rgba(8,18,36,.94);
  color: #71849d;
  cursor: pointer;
}
.minimap-map { display: block; height: 62px; border-radius: 3px; background: #050b17; position: relative; overflow: hidden; }
.minimap-map::before { content: ""; position: absolute; left: 10%; right: 10%; top: 16%; border-top: 3px solid #1d2d43; box-shadow: 0 12px #1d2d43, 0 24px #1d2d43, 0 36px #1d2d43; }
.minimap-map i, .minimap-map b { position: absolute; width: 7px; height: 5px; background: #4c5c71; }
.minimap-map i { left: 25%; }
.minimap-map b { right: 18%; }
.minimap-map i.active { background: #2eb9ff; box-shadow: 0 0 4px #2eb9ff; }
.minimap-map em { position: absolute; inset: 5px 8px 8px; border: 1px solid rgba(46,185,255,.6); background: rgba(46,185,255,.05); }
.scada-minimap > small { display: block; margin-top: 4px; font-size: 5.75px; letter-spacing: .8px; }
.scada-pan-hint { position: sticky; left: 50%; bottom: 17px; z-index: 10; width: max-content; margin: -17px auto 0; color: #52647d; font-size: 6.32px; pointer-events: none; }
.scada-inspector {
  min-width: 0;
  padding: 16px;
  border-left: 1px solid rgba(148,174,208,.16);
  background: linear-gradient(180deg, #0b1527, #081121);
  color: #f5f8ff;
  overflow-y: auto;
}
.scada-inspector-head { position: relative; padding-bottom: 12px; border-bottom: 1px solid rgba(148,174,208,.13); }
.scada-inspector-head .eyebrow { color: #3ebfff; }
.scada-inspector-head h2 { margin: 4px 0 3px; font-size: 17.25px; }
.scada-inspector-head p { margin: 0; color: #71839d; font-size: 8.05px; }
.dark-status { position: absolute; right: 0; top: 0; height: 21px; padding: 0 7px; border-radius: 11px; background: rgba(94,108,129,.15); color: #9ca9ba; display: inline-flex; align-items: center; gap: 4px; font-size: 6.9px; font-weight: 800; text-transform: uppercase; }
.dark-status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.dark-status.success { color: #43d9aa; background: rgba(23,166,115,.12); }
.dark-status.danger { color: #ff7185; background: rgba(217,59,79,.12); }
.dark-status.warning { color: #efb858; background: rgba(232,155,39,.12); }
.scada-inspector-hero { min-height: 104px; padding: 13px 8px; display: grid; grid-template-columns: 105px 1fr; align-items: center; gap: 10px; background: radial-gradient(circle at 20% 50%, rgba(16,100,216,.15), transparent 44%); }
.scada-inspector-hero .industrial-pump-visual { width: 100px; }
.scada-inspector-hero small, .scada-inspector-hero strong, .scada-inspector-hero b { display: block; }
.scada-inspector-hero small { color: #71849d; font-size: 6.9px; letter-spacing: .7px; }
.scada-inspector-hero strong { margin: 5px 0; font: 800 23px ui-monospace, monospace; }
.scada-inspector-hero strong em { color: #8798ae; font-size: 8.05px; font-style: normal; }
.scada-inspector-hero b { color: #42d5a4; font-size: 6.67px; font-weight: 600; }
.scada-inspector-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.scada-inspector-grid div { padding: 8px; border: 1px solid rgba(147,174,209,.12); border-radius: 7px; background: rgba(255,255,255,.025); }
.scada-inspector-grid small, .scada-inspector-grid strong { display: block; }
.scada-inspector-grid small { color: #6f8199; font-size: 6.9px; }
.scada-inspector-grid strong { margin-top: 4px; font-size: 8.62px; }
.condition-monitor {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(43,220,162,.18);
  border-radius: 8px;
  background: rgba(43,220,162,.055);
}
.condition-monitor.warning {
  border-color: rgba(232,155,39,.28);
  background: rgba(232,155,39,.075);
}
.condition-monitor.danger {
  border-color: rgba(231,40,63,.32);
  background: rgba(231,40,63,.075);
}
.condition-monitor.muted {
  border-color: rgba(129,148,173,.2);
  background: rgba(129,148,173,.05);
}
.condition-monitor > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.condition-monitor > header small,
.condition-monitor > header strong { display: block; }
.condition-monitor > header small { color: #6f8199; font-size: 6.32px; letter-spacing: .7px; }
.condition-monitor > header strong { margin-top: 3px; font-size: 8.05px; }
.condition-monitor > header em {
  padding: 4px 6px;
  border-radius: 10px;
  background: rgba(43,220,162,.12);
  color: #43d9aa;
  font-size: 6.09px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .5px;
}
.condition-monitor.warning > header em { color: #efb858; background: rgba(232,155,39,.12); }
.condition-monitor.danger > header em { color: #ff7185; background: rgba(231,40,63,.12); }
.condition-monitor.muted > header em { color: #9aa9bc; background: rgba(129,148,173,.12); }
.condition-metrics {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}
.condition-metrics span {
  min-width: 0;
  padding: 6px;
  border-radius: 6px;
  background: rgba(3,10,24,.24);
}
.condition-metrics small,
.condition-metrics strong { display: block; }
.condition-metrics small { color: #72849d; font-size: 6.55px; }
.condition-metrics strong { margin-top: 3px; font: 700 8.05px ui-monospace, monospace; white-space: nowrap; }
.condition-monitor p { margin: 8px 0 0; color: #94a6bd; font-size: 6.55px; line-height: 1.45; }
.scada-dark-chart-title { margin-top: 13px; display: flex; justify-content: space-between; color: #6d7f97; font-size: 6.9px; }
.scada-dark-chart-title strong { color: #c9d6e8; }
.scada-inspector .line-chart { height: 105px; }
.scada-inspector .line-chart .chart-grid { stroke: rgba(132,158,192,.12); }
.scada-inspector .chart-labels { fill: #5c6e86; font-size: 8.05px; }
.scada-binding-list { margin: 0 0 10px; padding: 7px 0; border-top: 1px solid rgba(147,174,209,.1); border-bottom: 1px solid rgba(147,174,209,.1); }
.scada-binding-list span { height: 21px; display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 5px; }
.scada-binding-list i { width: 5px; height: 5px; border-radius: 50%; background: #68778b; }
.scada-binding-list i.ok { background: #2bdca2; box-shadow: 0 0 5px rgba(43,220,162,.6); }
.scada-binding-list i.off { background: #ef4860; }
.scada-binding-list b { font: 600 6.9px ui-monospace, monospace; color: #8ea1bb; }
.scada-binding-list em { color: #5e718a; font-size: 6.32px; font-style: normal; }
.scada-inspector .control-availability { font-size: 8.05px; background: rgba(23,166,115,.1); }
.scada-inspector-actions { display: grid; gap: 8px; }
.scada-inspector-actions .button.secondary {
  border-color: rgba(107,170,238,.32);
  background: rgba(16,100,216,.1);
  color: #9dd9ff;
}
.scada-inspector-actions .button.secondary:hover:not(:disabled) {
  border-color: rgba(77,192,255,.6);
  background: rgba(16,100,216,.18);
}

@media (max-width: 1180px) {
  .scada-workspace { grid-template-columns: minmax(0, 1fr) 300px; }
  .scada-state-legend { display: none; }
  .scada-module-actions button span { display: none; }
  .scada-demo-chip em { display: none; }
}

@media (max-width: 840px) {
  .scada-module-header { grid-template-columns: 1fr auto; }
  .scada-module-live { display: none; }
  .scada-demo-chip { padding: 0 7px; }
  .scada-view-toolbar { flex-wrap: wrap; }
  .scada-diagram-select { min-width: 0; flex: 1; }
  .scada-zone-tabs { order: 3; width: 100%; overflow-x: auto; flex: 0 0 100%; }
  .scada-workspace { grid-template-columns: 1fr; }
  .scada-viewport { height: 540px; }
  .scada-inspector { border-left: 0; border-top: 1px solid rgba(148,174,208,.16); }
}

.site-detail-toolbar {
  margin-bottom: 14px;
  padding: 15px 17px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: end;
  gap: 15px;
}
.site-selector-field,
.site-range-fields label { display: grid; gap: 5px; }
.site-selector-field > span,
.site-range-fields label > span {
  color: var(--muted);
  font-size: 9.2px;
  font-weight: 800;
}
.site-selector-field select,
.site-range-fields input {
  width: 100%;
  height: 36px;
  padding: 0 11px;
  border: 1px solid #d7dfe9;
  border-radius: 8px;
  background: #fff;
  color: #27374f;
  font-size: 10.35px;
}
.site-range-fields { display: flex; align-items: end; gap: 8px; }
.site-range-fields label { min-width: 127px; }
.site-section-nav {
  height: 36px;
  padding: 3px;
  border: 1px solid #d7dfe9;
  border-radius: 9px;
  background: #f7f9fc;
  display: flex;
  align-items: center;
}
.site-section-nav a {
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  color: #617087;
  display: inline-flex;
  align-items: center;
  font-size: 9.2px;
  font-weight: 800;
  text-decoration: none;
}
.site-section-nav a:hover { background: #fff; color: var(--brand); }
.site-identity-row { margin-bottom: 14px; display: grid; grid-template-columns: minmax(310px, .9fr) minmax(0, 2fr); gap: 14px; }
.site-identity-card {
  min-width: 0;
  padding: 17px;
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.site-identity-icon {
  width: 43px;
  height: 43px;
  border-radius: 12px;
  background: linear-gradient(145deg, #0d5ed0, #0a2868);
  color: #fff;
  display: grid;
  place-items: center;
}
.site-identity-icon .icon { width: 19px; }
.site-identity-card h2 { margin: 4px 0 3px; overflow: hidden; font-size: 18.4px; text-overflow: ellipsis; white-space: nowrap; }
.site-identity-card p { margin: 0; overflow: hidden; color: var(--muted); font-size: 9.2px; text-overflow: ellipsis; white-space: nowrap; }
.site-live-metrics { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.site-live-metrics .metric-card { min-height: 102px; padding: 15px; }
.site-live-metrics .metric-value { font-size: 20.7px; }

.site-telemetry-shell {
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid #112c54;
  border-radius: 15px;
  background:
    radial-gradient(circle at 82% -10%, rgba(29,105,220,.18), transparent 34%),
    linear-gradient(150deg, #07162e, #081d3d 55%, #07162e);
  color: #eff6ff;
  box-shadow: 0 13px 34px rgba(5,21,54,.16);
}
.site-channel-header {
  min-height: 58px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(148,174,208,.16);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
}
.site-channel-header span,
.site-channel-header strong { display: block; }
.site-channel-header span { color: #4dc8ff; font-size: 6.9px; font-weight: 800; letter-spacing: 1px; }
.site-channel-header strong { margin-top: 4px; font-size: 12.65px; }
.site-channel-header > i { height: 1px; background: rgba(148,174,208,.13); }
.site-channel-header em { color: #7890ad; font-size: 8.05px; font-style: normal; white-space: nowrap; }
.site-chart-grid { padding: 15px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.site-chart-card {
  min-width: 0;
  padding: 12px 13px 6px;
  border: 1px solid rgba(140,170,209,.14);
  border-radius: 10px;
  background: rgba(3,14,32,.38);
}
.site-chart-card > header { min-height: 25px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #8ea3bf; }
.site-chart-card > header span { color: #b8c8dc; font-size: 8.05px; font-weight: 800; letter-spacing: .7px; }
.site-chart-card > header strong { color: #627c9c; font: 600 6.9px ui-monospace, monospace; }
.site-chart-meta { display: flex; align-items: center; gap: 8px; }
.site-chart-tools { display: inline-flex; align-items: center; padding: 2px; border: 1px solid rgba(139,176,222,.2); border-radius: 6px; background: rgba(255,255,255,.035); }
.site-chart-tools button {
  min-width: 23px;
  height: 21px;
  padding: 0 5px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #9db4d0;
  font: 800 10px ui-monospace, monospace;
  cursor: pointer;
}
.site-chart-tools button:hover:not(:disabled),
.site-chart-tools button:focus-visible { background: rgba(76,190,255,.14); color: #57caff; outline: none; }
.site-chart-tools button:disabled { color: #435977; cursor: default; }
.site-chart-tools .zoom-level { min-width: 31px; color: #55c6fa; font-size: 7.5px; }
.site-chart-card .line-chart { height: 178px; }
.site-chart-card .line-chart .chart-grid { stroke: rgba(136,166,204,.11); }
.site-chart-card .line-chart .chart-grid text { fill: #7890ae; font-size: 9px; }
.site-chart-card .chart-axis-title { fill: #8ca5c4; font-size: 8.5px; }
.site-chart-card .line-chart circle { fill: #08182f; }
.site-chart-card .chart-labels { fill: #5f7693; font-size: 8.05px; }
.site-chart-help { margin: -3px 0 3px; color: #637c9b; font-size: 7.5px; text-align: right; }
.site-telemetry-values {
  padding: 0 15px 15px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.site-telemetry-values > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(140,170,209,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  display: flex;
  align-items: center;
  gap: 9px;
}
.site-telemetry-values .icon { width: 16px; color: #42bfff; }
.site-telemetry-values small,
.site-telemetry-values strong { display: block; }
.site-telemetry-values small { color: #7187a4; font-size: 6.9px; }
.site-telemetry-values strong { margin-top: 3px; font: 700 10.35px ui-monospace, monospace; }
.site-no-readings { min-height: 250px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #7f94ae; }
.site-no-readings .icon { width: 25px; }
.site-no-readings strong,
.site-no-readings span { display: block; }
.site-no-readings strong { color: #d6e3f2; font-size: 12.65px; }
.site-no-readings span { margin-top: 5px; font-size: 9.2px; }

.site-readings-panel { margin-bottom: 14px; overflow: hidden; }
.site-readings-panel > .panel-heading { padding: 17px 18px 14px; }
.site-table-actions { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 9.2px; }
.site-readings-table { min-width: 1180px; }
.site-readings-table td strong { font-size: 9.2px; }
.site-load-more {
  width: 100%;
  height: 38px;
  border: 0;
  border-top: 1px solid var(--line);
  background: #f8fafc;
  color: var(--brand);
  font-size: 9.2px;
  font-weight: 800;
  cursor: pointer;
}
.site-load-more:hover { background: #eef5ff; }
.site-information-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 14px; }
.site-model-card { padding: 18px; }
.site-model-grid { margin-top: 15px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.site-model-grid > span {
  min-width: 0;
  padding: 10px;
  border: 1px solid #e4e9f0;
  border-radius: 8px;
  background: #fafbfd;
}
.site-model-grid small,
.site-model-grid strong { display: block; }
.site-model-grid small { color: var(--muted); font-size: 8.05px; }
.site-model-grid strong { margin-top: 5px; overflow: hidden; font-size: 9.2px; text-overflow: ellipsis; white-space: nowrap; }
.site-coordinate-card {
  overflow: hidden;
  border: 1px solid #163766;
  border-radius: 14px;
  background: #071b3b;
  color: #fff;
  box-shadow: var(--shadow);
}
.site-coordinate-card header { height: 64px; padding: 13px 15px; display: flex; align-items: center; gap: 10px; }
.site-coordinate-card header > span { width: 34px; height: 34px; border-radius: 9px; background: rgba(46,185,255,.12); color: #47c6ff; display: grid; place-items: center; }
.site-coordinate-card header .icon { width: 17px; }
.site-coordinate-card header small,
.site-coordinate-card header strong { display: block; }
.site-coordinate-card header small { color: #6480a5; font-size: 6.9px; letter-spacing: .7px; }
.site-coordinate-card header strong { margin-top: 4px; font-size: 10.35px; }
.site-coordinate-map {
  height: 183px;
  overflow: hidden;
  position: relative;
  background-color: #0a244b;
  background-image:
    linear-gradient(rgba(76,134,198,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,134,198,.14) 1px, transparent 1px),
    radial-gradient(circle at 65% 38%, rgba(46,185,255,.17), transparent 24%);
  background-size: 29px 29px, 29px 29px, auto;
}
.site-coordinate-map::before,
.site-coordinate-map::after { content: ""; position: absolute; border: 1px solid rgba(80,155,229,.2); border-radius: 50%; }
.site-coordinate-map::before { width: 170px; height: 85px; left: 12px; top: 70px; transform: rotate(-23deg); }
.site-coordinate-map::after { width: 130px; height: 65px; right: -25px; top: 30px; transform: rotate(18deg); }
.site-coordinate-map > i {
  position: absolute;
  z-index: 2;
  left: 57%;
  top: 44%;
  width: 15px;
  height: 15px;
  border: 4px solid #fff;
  border-radius: 50% 50% 50% 0;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(231,40,63,.2), 0 6px 16px rgba(0,0,0,.35);
  transform: rotate(-45deg);
}
.site-coordinate-map > b { position: absolute; z-index: 1; left: calc(57% + 2px); top: calc(44% + 23px); width: 14px; height: 5px; border-radius: 50%; background: rgba(0,0,0,.3); }
.site-coordinate-map > span { position: absolute; left: calc(57% + 22px); top: calc(44% - 1px); padding: 5px 7px; border: 1px solid rgba(255,255,255,.15); border-radius: 5px; background: rgba(4,16,37,.85); color: #a7ddff; font: 700 6.9px ui-monospace, monospace; }
.site-coordinate-card footer { padding: 12px 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.site-coordinate-card footer span { padding: 8px; border: 1px solid rgba(142,172,211,.12); border-radius: 7px; background: rgba(255,255,255,.025); }
.site-coordinate-card footer small,
.site-coordinate-card footer strong { display: block; }
.site-coordinate-card footer small { color: #657e9f; font-size: 6.9px; }
.site-coordinate-card footer strong { margin-top: 4px; font: 700 9.2px ui-monospace, monospace; }

.site-current-button {
  height: 30px; padding: 0 10px; border: 1px solid #bdd5f3; border-radius: 7px;
  background: #eff6ff; color: #155eae; display: inline-flex; align-items: center;
  gap: 6px; font-size: 8.62px; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.site-current-button:hover { border-color: var(--brand); background: #e4f0ff; }
.site-current-button .icon { width: 13px; }
.site-detail-identity {
  margin-bottom: 12px; padding: 14px 17px; display: grid;
  grid-template-columns: 43px minmax(0, 1fr) auto; align-items: center; gap: 12px;
}
.site-detail-identity strong, .site-detail-identity small { display: block; }
.site-detail-identity > div > strong { margin-top: 4px; color: #243b59; font-size: 12.65px; }
.site-detail-identity > div > small { margin-top: 4px; color: var(--muted); font-size: 8.62px; }
.site-detail-tabs {
  margin-bottom: 14px; padding: 5px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; box-shadow: var(--shadow); display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px;
}
.site-detail-tabs button {
  min-height: 42px; padding: 7px 11px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: #6a788c; display: flex; align-items: center;
  justify-content: center; gap: 7px; font-size: 9.2px; font-weight: 800; cursor: pointer;
}
.site-detail-tabs button:hover { color: var(--brand); background: #f6f9fd; }
.site-detail-tabs button.active {
  border-color: #bfd8f6; background: #edf5ff; color: var(--brand);
  box-shadow: inset 0 -2px var(--brand);
}
.site-detail-tabs .icon { width: 15px; }
.site-tab-content { min-height: 420px; }
.site-current-heading {
  margin-bottom: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
}
.site-current-heading h2 { margin: 4px 0 0; font-size: 17.25px; }
.live-reading-chip {
  height: 28px; padding: 0 10px; border-radius: 14px; background: #e9f8f2; color: #15855f;
  display: inline-flex; align-items: center; gap: 6px; font-size: 8.05px; font-weight: 800;
}
.live-reading-chip i { width: 7px; height: 7px; border-radius: 50%; background: #25bf8b; box-shadow: 0 0 0 4px rgba(37,191,139,.12); }
.site-current-metrics { margin-bottom: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.site-current-metrics .metric-card { min-height: 102px; padding: 15px; }
.site-current-metrics .metric-value { font-size: 20.7px; }
.site-no-current-reading {
  min-height: 250px; padding: 30px; display: flex; align-items: center; justify-content: center;
  gap: 13px; color: #75849a;
}
.site-no-current-reading .icon { width: 26px; color: var(--brand); }
.site-no-current-reading strong, .site-no-current-reading span { display: block; }
.site-no-current-reading strong { color: #2c3c54; font-size: 12.65px; }
.site-no-current-reading span { margin-top: 4px; font-size: 9.2px; }
.site-reading-filters {
  padding: 17px 18px; border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
}
.site-reading-filters h2 { margin: 4px 0 0; font-size: 17.25px; }
.site-table-summary { padding: 10px 18px; background: #f7f9fc; color: var(--muted); font-size: 9.2px; }
.site-table-summary strong { color: #264c78; }
.site-information-view { display: grid; gap: 14px; }
.site-map-card {
  height: 500px; overflow: hidden; border: 1px solid #163766; border-radius: 15px;
  background: #071b3b; position: relative; box-shadow: var(--shadow);
}
.site-leaflet-map { width: 100%; height: 100%; background: #0a244b; z-index: 1; }
.site-map-fallback {
  height: 100%; background:
    linear-gradient(rgba(76,134,198,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,134,198,.14) 1px, transparent 1px), #0a244b;
  background-size: 32px 32px; color: #8ebce6; display: flex; align-items: center;
  justify-content: center; gap: 9px; font-size: 10.35px;
}
.site-map-fallback .icon { width: 20px; }
.site-map-overlay {
  position: absolute; z-index: 500; left: 18px; top: 18px; width: min(310px, calc(100% - 36px));
  padding: 17px; border: 1px solid rgba(255,255,255,.24); border-radius: 12px;
  background: rgba(5,20,45,.91); backdrop-filter: blur(6px); color: white;
  box-shadow: 0 12px 34px rgba(0,0,0,.32); pointer-events: none;
}
.site-map-overlay .eyebrow { color: #55c9ff; }
.site-map-overlay h2 { margin: 5px 0 3px; font-size: 18.4px; }
.site-map-overlay p { margin: 0 0 12px; color: #82a1c3; font-size: 8.05px; }
.site-map-overlay > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.site-map-overlay > div > span { padding: 8px; border: 1px solid rgba(147,174,209,.16); border-radius: 7px; background: rgba(255,255,255,.04); }
.site-map-overlay small, .site-map-overlay strong { display: block; }
.site-map-overlay small { color: #7191b5; font-size: 6.9px; }
.site-map-overlay strong { margin-top: 4px; font: 700 9.2px ui-monospace, monospace; }
.integra-leaflet-marker { background: transparent; border: 0; }
.integra-leaflet-marker > span {
  width: 40px; height: 40px; border: 4px solid white; border-radius: 50% 50% 50% 0;
  background: linear-gradient(145deg, #1064d8, #0a2868); color: white;
  display: grid; place-items: center; transform: rotate(-45deg);
  box-shadow: 0 0 0 7px rgba(16,100,216,.22), 0 8px 18px rgba(2,13,35,.42);
}
.integra-leaflet-marker .icon { width: 17px; transform: rotate(45deg); }
.leaflet-popup-content strong, .leaflet-popup-content small { display: block; }
.leaflet-popup-content strong { color: #0a2868; font-size: 13.8px; }
.leaflet-popup-content small { margin-top: 3px; color: #65758a; font-size: 10.35px; }
.leaflet-container { font-size: 13.8px; }
.site-configuration-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.site-config-card { padding: 20px; }
.demo-config-badge { padding: 6px 9px; border-radius: 12px; background: #fff4e5; color: #9a6412; font-size: 8.05px; font-weight: 800; }
.site-config-grid { margin-top: 17px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.site-config-grid label { display: grid; gap: 5px; }
.site-config-grid label.wide { grid-column: 1 / -1; }
.site-config-grid label > span { color: #637187; font-size: 8.62px; font-weight: 800; }
.site-config-grid input, .site-config-grid select {
  width: 100%; height: 36px; padding: 0 10px; border: 1px solid #d8e0ea;
  border-radius: 8px; background: white; color: #2d4059; font-size: 10.35px;
}
.site-config-grid input:disabled { background: #f4f6f9; color: #8a95a4; }
.site-channel-config { margin-top: 17px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.site-channel-config input { position: absolute; opacity: 0; pointer-events: none; }
.site-channel-config label > span {
  min-height: 58px; padding: 11px; border: 1px solid #dfe5ed; border-radius: 9px;
  background: #fafbfd; color: #788598; display: grid; grid-template-columns: 19px 1fr;
  align-items: center; column-gap: 7px; cursor: pointer;
}
.site-channel-config .icon { width: 14px; opacity: .24; }
.site-channel-config strong, .site-channel-config small { display: block; }
.site-channel-config strong { color: #3a4a60; font-size: 9.2px; }
.site-channel-config small { grid-column: 2; color: #8b96a5; font: 600 6.9px ui-monospace, monospace; }
.site-channel-config input:checked + span { border-color: #b9d5f5; background: #eff6ff; color: var(--brand); }
.site-channel-config input:checked + span .icon { opacity: 1; }
.site-config-note {
  margin-top: 15px; padding: 12px; border-radius: 8px; background: #f2f7fd; color: #58708e;
  display: flex; align-items: flex-start; gap: 9px; font-size: 8.62px; line-height: 1.45;
}
.site-config-note .icon { width: 15px; color: var(--brand); flex: 0 0 auto; }
.site-config-actions { margin-top: 16px; display: flex; justify-content: flex-end; }

.table-panel { overflow: hidden; }
.filters-bar {
  padding: 15px 17px; border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px;
}
.filters-bar label { display: grid; gap: 5px; }
.filters-bar label > span { color: var(--muted); font-size: 9.2px; font-weight: 700; }
.filters-bar select, .filters-bar input, .date-range input {
  height: 35px; padding: 0 11px; border: 1px solid #d7dfe9; border-radius: 8px; background: white; color: #34445a; font-size: 10.35px;
}
.filters-bar select { min-width: 132px; }
.search-field { width: min(290px, 32%); position: relative; }
.search-field .icon { width: 14px; position: absolute; left: 11px; bottom: 10px; color: #7c8898; }
.search-field input { padding-left: 33px; width: 100%; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 930px; }
th { padding: 11px 14px; background: #f7f9fc; color: #778396; border-bottom: 1px solid var(--line); font-size: 8.05px; letter-spacing: .55px; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { padding: 12px 14px; border-bottom: 1px solid #e9edf3; font-size: 10.35px; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fbfdff; }
.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.asset-cell { display: flex; align-items: center; gap: 9px; }
.asset-icon { width: 31px; height: 31px; }
.asset-cell strong, .asset-cell small { display: block; }
.asset-cell strong { font-size: 10.35px; }
.asset-cell small, .table-sub { display: block; color: var(--muted); font-size: 8.05px; margin-top: 3px; }
.value-cell strong { font-size: 12.65px; }
.value-cell small { color: var(--muted); font-size: 8.05px; margin-left: 3px; }
.availability { display: inline-flex; align-items: center; gap: 4px; font-size: 9.2px; font-weight: 700; }
.availability .icon { width: 12px; }
.availability.yes { color: var(--success); }
.availability.blocked { color: #ad6d0d; }
.availability.no { color: #929aa7; }
.row-action { width: 29px; height: 29px; border: 1px solid #dfe4eb; border-radius: 7px; background: white; display: grid; place-items: center; cursor: pointer; }
.row-action .icon { width: 13px; }
.empty-state { padding: 40px; text-align: center; }
.empty-state strong, .empty-state span { display: block; }
.empty-state span { color: var(--muted); margin-top: 5px; }
.table-empty {
  min-height: 125px; padding: 24px; color: #75859b;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.table-empty > .icon { width: 25px; color: #7ca5d5; }
.table-empty > span { min-width: 210px; white-space: normal; }
.table-empty strong, .table-empty small { display: block; }
.table-empty strong { color: #2d405b; font-size: 11.5px; }
.table-empty small { margin-top: 4px; color: var(--muted); font-size: 9.2px; }

.permission-chip {
  height: 31px; padding: 0 11px; border-radius: 16px; background: #e9f8f2; color: #16845f;
  display: flex; align-items: center; gap: 6px; font-size: 9.2px; font-weight: 800;
}
.permission-chip .icon { width: 13px; }
.control-disclaimer {
  padding: 12px 15px; margin-bottom: 14px; border: 1px solid #bcdaf8; border-radius: 10px; background: #edf7ff;
  color: #245c92; display: flex; align-items: center; gap: 11px;
}
.control-disclaimer .icon { width: 20px; }
.control-disclaimer strong, .control-disclaimer span { display: block; }
.control-disclaimer strong { font-size: 10.35px; }
.control-disclaimer span { font-size: 9.2px; color: #567b9f; margin-top: 2px; }
.control-layout { display: grid; grid-template-columns: 360px 1fr; gap: 14px; align-items: stretch; }
.control-selector, .command-panel { padding: 20px; }
.control-list { margin-top: 12px; max-height: 454px; overflow-y: auto; }
.control-device {
  width: 100%; min-height: 55px; padding: 8px; margin-bottom: 7px; border: 1px solid #e1e6ed; border-radius: 9px;
  background: white; display: flex; align-items: center; gap: 9px; text-align: left; cursor: pointer;
}
.control-device.selected { border-color: var(--brand); background: #f5f9ff; box-shadow: 0 0 0 2px rgba(16,100,216,.08); }
.device-state { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #f0f2f5; color: #7a8491; }
.device-state.success { background: #eaf8f3; color: var(--success); }
.device-state.warning { background: #fff6e6; color: var(--warning); }
.device-state.danger { background: #fff0f2; color: var(--danger); }
.device-state .icon { width: 16px; }
.control-device > span:nth-child(2) { min-width: 0; }
.control-device strong, .control-device small { display: block; }
.control-device strong { font-size: 9.77px; }
.control-device small { color: var(--muted); font-size: 8.05px; margin-top: 2px; }
.device-reading { margin-left: auto; text-align: right; }
.device-reading strong { font-size: 11.5px; }
.control-device > .icon { width: 13px; color: #8390a2; }
.lock-label { margin-left: auto; padding: 4px 6px; border-radius: 5px; background: #f1f2f5; color: #7d8794; font-size: 6.9px !important; font-weight: 800; }
.command-header { display: flex; align-items: center; gap: 14px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.large-pump { flex: 0 0 auto; width: 78px; height: 58px; padding: 5px 7px; border-radius: 14px; background: #eaf8f3; color: var(--success); display: grid; place-items: center; }
.large-pump.idle, .large-pump.muted { background: #f1f3f5; color: #818b99; }
.large-pump.warning { background: #fff6e6; color: var(--warning); }
.large-pump.danger { background: #fff0f2; color: var(--danger); }
.large-pump .industrial-pump-visual { width: 100%; filter: drop-shadow(0 4px 4px rgba(18, 35, 58, .18)); }
.large-pump.warning .pump-status-light { fill: var(--warning); filter: drop-shadow(0 0 5px var(--warning)); }
.large-pump.danger .pump-status-light { fill: var(--danger); filter: drop-shadow(0 0 5px var(--danger)); }
.command-header h2 { margin: 3px 0; font-size: 20.7px; }
.command-header p { margin: 0; color: var(--muted); font-size: 9.2px; }
.command-header .status-pill { margin-left: auto; }
.command-readings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.command-readings div { padding: 14px; border-radius: 10px; background: #f7f9fc; border: 1px solid #e5e9ef; }
.command-readings span, .command-readings strong { display: block; }
.command-readings span { color: var(--muted); font-size: 8.05px; }
.command-readings strong { font-size: 16.1px; margin-top: 5px; }
.command-readings strong small { font-size: 8.05px; color: var(--muted); }
.command-step { margin: 21px 0 11px; }
.command-step p { color: var(--muted); font-size: 9.2px; }
.command-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.command-button {
  min-height: 80px; padding: 14px; border: 1px solid #dce3ec; border-radius: 11px; background: white; display: flex; align-items: center; gap: 13px; text-align: left; cursor: pointer;
}
.command-button.start:not(:disabled):hover { border-color: var(--success); background: #f6fdfb; }
.command-button.stop:not(:disabled):hover { border-color: var(--danger); background: #fff9fa; }
.command-button > .icon { width: 29px; height: 29px; padding: 6px; border-radius: 50%; background: #eaf8f3; color: var(--success); }
.command-button.stop > .icon { background: #fff0f2; color: var(--danger); }
.command-button strong, .command-button small { display: block; }
.command-button strong { font-size: 12.65px; }
.command-button small { color: var(--muted); font-size: 8.05px; margin-top: 4px; }
.command-button:disabled { opacity: .38; cursor: not-allowed; }
.blocked-command { padding: 16px; margin-top: 24px; border-radius: 10px; background: #fff4f5; color: var(--danger); display: flex; gap: 11px; align-items: center; }
.blocked-command > span { width: 30px; height: 30px; border-radius: 50%; background: #ffe1e5; display: grid; place-items: center; }
.blocked-command .icon { width: 15px; }
.blocked-command strong { font-size: 10.35px; }
.blocked-command p { margin: 3px 0 0; font-size: 9.2px; color: #9f5d66; }
.order-log { margin-top: 14px; padding: 20px 0 0; overflow: hidden; }
.order-log .panel-heading { padding: 0 20px 14px; }
.empty-log { min-height: 92px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 11px; color: #8190a4; }
.empty-log .icon { width: 23px; }
.empty-log strong, .empty-log span { display: block; }
.empty-log strong { color: #526176; font-size: 10.35px; }
.empty-log span { font-size: 9.2px; margin-top: 3px; }
.action-label { padding: 4px 7px; border-radius: 5px; font-size: 8.05px; font-weight: 800; }
.action-label.start { background: #eaf8f3; color: var(--success); }
.action-label.stop { background: #fff0f2; color: var(--danger); }

.report-filters { padding: 17px; display: flex; flex-wrap: wrap; gap: 16px 25px; align-items: flex-end; }
.filter-section { display: grid; gap: 7px; }
.filter-title { font-size: 9.2px; color: var(--muted); font-weight: 800; }
.filter-title small { font-weight: 500; }
.segmented { padding: 3px; border-radius: 9px; background: #edf1f6; display: flex; }
.segmented button, .group-control button {
  height: 28px; padding: 0 11px; border: 0; border-radius: 6px; background: transparent; color: #68778c; font-size: 9.2px; font-weight: 700; cursor: pointer;
}
.segmented button.active, .group-control button.active { background: white; color: var(--brand); box-shadow: 0 2px 7px rgba(31,53,85,.1); }
.date-range { display: flex; gap: 8px; }
.date-range label { display: grid; gap: 4px; }
.date-range label span { font-size: 8.05px; color: var(--muted); }
.date-range label:not(.time-field) { min-width: 125px; }
.date-range .time-field { width: 92px; }
.check-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.check-chip input { position: absolute; opacity: 0; pointer-events: none; }
.check-chip span {
  min-height: 27px; padding: 0 9px; border: 1px solid #d7dfe9; border-radius: 14px; color: #647388; background: white;
  display: flex; align-items: center; gap: 4px; font-size: 8.62px; font-weight: 700; cursor: pointer;
}
.check-chip .icon { display: none; width: 10px; }
.check-chip input:checked + span { border-color: #b6d3f7; color: #2463ac; background: #eff6ff; }
.check-chip input:checked + span .icon { display: block; }
.check-chip-row.compact .check-chip span { min-height: 24px; padding: 0 7px; }
.report-range-summary {
  flex: 0 0 100%;
  min-height: 48px;
  padding: 9px 13px;
  border: 1px solid #d9e5f3;
  border-radius: 9px;
  background: #f6f9fd;
  color: var(--brand);
  display: flex;
  align-items: center;
  gap: 9px;
}
.report-range-summary .icon { width: 17px; }
.report-range-summary span, .report-range-summary strong, .report-range-summary small { display: block; }
.report-range-summary strong { color: #1c3d64; font-size: 9.77px; }
.report-range-summary small { margin-top: 3px; color: #64768d; font-size: 9.2px; font-variant-numeric: tabular-nums; }
.report-metrics { margin-top: 14px; }
.report-operational-strip {
  margin-top: 14px; min-height: 70px; padding: 14px 20px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.report-operational-strip > div { padding: 4px 18px; border-right: 1px solid var(--line); }
.report-operational-strip > div:first-child { padding-left: 0; }
.report-operational-strip > div:last-child { padding-right: 0; border-right: 0; }
.report-operational-strip span, .report-operational-strip strong { display: block; }
.report-operational-strip span { color: var(--muted); font-size: 8.62px; }
.report-operational-strip strong { margin-top: 5px; color: #193452; font-size: 14.95px; font-variant-numeric: tabular-nums; }
.report-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.report-charts .panel { padding: 18px 20px; overflow: hidden; }
.chart-legend { display: flex; align-items: center; gap: 12px; color: #68778c; font-size: 8.62px; font-weight: 700; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend span::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--brand); }
.chart-legend .planned::before { height: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 8px); }
.bar-chart { height: 174px; display: flex; align-items: flex-end; justify-content: space-around; gap: 8px; padding: 17px 6px 0; }
.bar-item { height: 100%; flex: 1; max-width: 58px; display: flex; flex-direction: column; align-items: center; min-width: 24px; }
.bar-track { width: 70%; flex: 1; display: flex; align-items: flex-end; background: #f0f3f7; border-radius: 5px 5px 0 0; overflow: hidden; }
.bar-track span { width: 100%; background: linear-gradient(180deg, #2f88ed, #0e5dbf); border-radius: 5px 5px 0 0; }
.bar-chart.green .bar-track span { background: linear-gradient(180deg, #36c596, #149369); }
.bar-item strong { margin-top: 5px; font-size: 8.05px; }
.bar-item small { display: block; margin-top: 3px; color: #7a8799; font-size: 8.05px; }
.comparison-chart, .dual-line-chart { width: 100%; height: 246px; margin-top: 2px; overflow: visible; }
.chart-axis line { stroke: #e4eaf2; stroke-width: 1; }
.chart-axis text { fill: #66778e; font-size: 9.2px; font-weight: 600; }
.chart-category-label { fill: #63738a; font-size: 9.2px; font-weight: 700; }
.comparison-chart .actual { fill: #2583df; }
.comparison-chart .planned { fill: #dd3e55; }
.dual-line-chart .actual-line { fill: none; stroke: var(--brand); stroke-width: 3; }
.dual-line-chart .planned-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 7 5; }
.dual-line-chart .actual-point { fill: white; stroke: var(--brand); stroke-width: 2; }
.dual-line-chart .chart-labels { fill: #66778e; font-size: 9.2px; font-weight: 600; }
.report-table { margin-top: 14px; overflow: hidden; }
.report-table .panel-heading { padding: 18px 20px 14px; }
.group-control { padding: 3px; border-radius: 8px; background: #edf1f6; display: flex; align-items: center; }
.group-control > span { color: #788497; font-size: 8.05px; padding: 0 8px; }
.uptime-cell { display: inline-flex; align-items: center; gap: 6px; }
.uptime-cell > span { width: 45px; height: 4px; border-radius: 2px; background: #e8ecf1; overflow: hidden; }
.uptime-cell i { display: block; height: 100%; background: var(--brand); }
.compliance-value { display: inline-flex; min-width: 44px; justify-content: center; padding: 4px 7px; border-radius: 12px; font-size: 8.62px; font-weight: 800; }
.compliance-value.good { background: #e7f8f2; color: #13845f; }
.compliance-value.watch { background: #e9f7ff; color: #167daf; }
.compliance-value.low { background: #fff0f2; color: #c2283d; }
.deviation { font-weight: 700; }
.deviation.positive { color: #13845f; }
.deviation.negative { color: #c2283d; }
.method-note { min-height: 45px; padding: 10px 16px; border-top: 1px solid var(--line); background: #f4f8fd; color: #58708c; display: flex; align-items: center; gap: 9px; font-size: 8.62px; }
.method-note .icon { width: 15px; color: var(--brand); }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(3,13,35,.64); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px; }
.modal-card { width: min(460px, 100%); padding: 27px; border-radius: 16px; background: white; box-shadow: 0 24px 70px rgba(0,0,0,.3); position: relative; animation: modalIn .2s ease-out; }
@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal-close { position: absolute; top: 14px; right: 14px; width: 31px; height: 31px; border: 0; border-radius: 8px; background: #f2f4f7; display: grid; place-items: center; cursor: pointer; }
.modal-close .icon { width: 15px; }
.modal-title-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.modal-title-row h2 { margin: 0; font-size: 23px; }
.pump-modal > p { margin: 5px 0 17px; color: var(--muted); font-size: 10.35px; }
.pump-modal-reading { padding: 14px; border-radius: 10px; background: #0b2d6c; color: white; margin-bottom: 12px; }
.pump-modal-reading span, .pump-modal-reading strong { display: block; }
.pump-modal-reading span { color: #aec7eb; font-size: 9.2px; }
.pump-modal-reading strong { margin-top: 4px; font-size: 26.45px; }
.pump-modal-reading small { font-size: 10.35px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.command-modal { text-align: center; }
.confirm-icon { width: 52px; height: 52px; margin: 0 auto 15px; border-radius: 50%; display: grid; place-items: center; background: #eaf8f3; color: var(--success); }
.confirm-icon.stop { background: #fff0f2; color: var(--danger); }
.confirm-icon .icon { width: 24px; }
.command-modal h2 { margin: 6px 0 8px; font-size: 23px; }
.command-modal > p { margin: 0 auto 17px; max-width: 350px; color: var(--muted); font-size: 10.35px; line-height: 1.5; }
.confirmation-data { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; }
.confirmation-data div { padding: 10px; border: 1px solid #e3e8ef; border-radius: 8px; background: #fafbfd; }
.confirmation-data span, .confirmation-data strong { display: block; }
.confirmation-data span { color: var(--muted); font-size: 8.05px; }
.confirmation-data strong { font-size: 10.35px; margin-top: 3px; }
.command-modal .modal-actions { justify-content: center; }
.spinner { width: 22px; height: 22px; border: 3px solid #b8e8d8; border-top-color: var(--success); border-radius: 50%; animation: spin .8s linear infinite; }
.sending-bar { height: 4px; border-radius: 2px; background: #e9edf2; overflow: hidden; margin-top: 22px; }
.sending-bar span { display: block; height: 100%; width: 50%; background: var(--brand); animation: sending 1s ease-in-out infinite; }
@keyframes sending { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.toast {
  position: fixed; right: 22px; bottom: 22px; z-index: 120; min-width: 320px; padding: 13px 15px; border-radius: 11px;
  background: #0e2e58; color: white; box-shadow: 0 14px 40px rgba(3,18,44,.3); display: flex; align-items: center; gap: 11px;
  animation: toastIn .25s ease-out;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
.toast > .icon { width: 20px; padding: 3px; border-radius: 50%; background: var(--success); }
.toast strong, .toast span { display: block; }
.toast strong { font-size: 10.35px; }
.toast span { color: #b9c8dc; font-size: 9.2px; margin-top: 3px; }
.sidebar-scrim { display: none; }

@media (max-width: 1180px) {
  .sidebar { width: 220px; }
  .main-shell { margin-left: 220px; }
  .page { padding: 24px; }
  .metric-grid, .report-metrics { grid-template-columns: 1fr 1fr; }
  .report-operational-strip { grid-template-columns: 1fr 1fr; }
  .report-operational-strip > div:nth-child(2) { border-right: 0; }
  .report-operational-strip > div:nth-child(n+3) { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
  .zone-card-grid { grid-template-columns: 1fr 1fr; }
  .scada-layout { grid-template-columns: minmax(560px, 1fr) 285px; }
  .control-layout { grid-template-columns: 310px 1fr; }
  .site-detail-toolbar { grid-template-columns: minmax(260px, 1fr) auto; }
  .site-section-nav { grid-column: 1 / -1; width: max-content; }
  .site-identity-row { grid-template-columns: 1fr; }
  .site-current-metrics { grid-template-columns: 1fr 1fr; }
  .site-configuration-layout { grid-template-columns: 1fr; }
}

@media (max-width: 940px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; width: 252px; }
  .sidebar.open { transform: translateX(0); }
  .sidebar.open + .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(3,13,35,.5); }
  .main-shell { margin-left: 0; }
  .menu-button { display: grid; }
  .breadcrumb { margin-right: auto; margin-left: 12px; }
  .scada-layout { grid-template-columns: 1fr; }
  .equipment-detail { position: static; }
  .control-layout { grid-template-columns: 1fr; }
  .control-list { max-height: 300px; }
  .site-detail-toolbar { grid-template-columns: 1fr; align-items: stretch; }
  .site-range-fields { flex-wrap: wrap; }
  .site-range-fields label { flex: 1; }
  .site-section-nav { grid-column: auto; }
  .site-chart-grid { grid-template-columns: 1fr; }
  .site-information-layout { grid-template-columns: 1fr; }
  .site-reading-filters { align-items: stretch; flex-direction: column; }
}

@media (max-width: 680px) {
  .topbar { padding: 0 15px; }
  .topbar-user, .breadcrumb span, .live-chip span, .topbar-brand strong { display: none; }
  .topbar-context { gap: 8px; }
  .topbar-brand { padding-right: 8px; }
  .topbar-actions { gap: 8px; }
  .demo-banner { padding: 7px 15px; }
  .demo-banner .last-update { display: none; }
  .page { padding: 20px 14px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .page-actions { width: 100%; flex-wrap: wrap; }
  .metric-grid, .report-metrics, .dashboard-grid, .zone-card-grid, .report-charts { grid-template-columns: 1fr; }
  .report-operational-strip { grid-template-columns: 1fr; }
  .report-operational-strip > div,
  .report-operational-strip > div:first-child,
  .report-operational-strip > div:last-child {
    padding: 10px 0; border-right: 0; border-top: 1px solid var(--line); margin-top: 0;
  }
  .report-operational-strip > div:first-child { border-top: 0; }
  .metric-card { min-height: 100px; }
  .filters-bar { align-items: stretch; flex-direction: column; }
  .search-field { width: 100%; }
  .filters-bar .button { align-self: flex-start; }
  .legend { flex-wrap: wrap; }
  .command-readings { grid-template-columns: 1fr; }
  .command-actions { grid-template-columns: 1fr; }
  .report-filters { flex-direction: column; align-items: stretch; }
  .date-range { flex-wrap: wrap; }
  .date-range label:not(.time-field) { flex: 1 1 145px; }
  .date-range .time-field { flex: 1 1 105px; width: auto; }
  .segmented { overflow-x: auto; }
  .confirmation-data, .mini-metrics { grid-template-columns: 1fr; }
  .toast { min-width: 0; left: 14px; right: 14px; bottom: 14px; }
  .site-range-fields { align-items: stretch; flex-direction: column; }
  .site-range-fields label { min-width: 0; }
  .site-section-nav { width: 100%; overflow-x: auto; }
  .site-live-metrics { grid-template-columns: 1fr; }
  .site-detail-tabs { grid-template-columns: 1fr 1fr; }
  .site-detail-identity { grid-template-columns: 43px minmax(0, 1fr); }
  .site-detail-identity .status-pill { grid-column: 1 / -1; width: max-content; }
  .site-current-heading { align-items: flex-start; flex-direction: column; }
  .site-current-metrics { grid-template-columns: 1fr; }
  .site-map-card { height: 420px; }
  .site-config-grid, .site-channel-config { grid-template-columns: 1fr; }
  .site-config-grid label.wide { grid-column: auto; }
  .site-identity-card { grid-template-columns: 43px minmax(0, 1fr); }
  .site-identity-card .status-pill { grid-column: 1 / -1; width: max-content; }
  .site-telemetry-values { grid-template-columns: 1fr 1fr; }
  .site-model-grid { grid-template-columns: 1fr 1fr; }
}

@media print {
  body { background: white; }
  .sidebar, .topbar, .demo-banner, .page-heading, .report-filters, .report-charts, .report-metrics { display: none !important; }
  .main-shell { margin: 0; }
  .page { padding: 0; }
  .report-table { border: 0; box-shadow: none; }
  .report-table::before {
    content: attr(data-print-label);
    display: block; padding: 20px; color: #0a2868; font-size: 18.4px; font-weight: 800;
  }
}