/* A&S Automations — IIoT Demo / SCADA UI
   Software-style visual layer. Functional markup/data remains unchanged. */
:root{
  --app-bg:#080d0e;
  --panel:#0e1517;
  --panel-2:#111b1d;
  --panel-3:#0a1113;
  --line:#253538;
  --line-soft:#1a292b;
  --text:#f2f6f5;
  --muted:#91a5a5;
  --green:#39d353;
  --green-2:#22c55e;
  --cyan:#6dd3df;
  --amber:#f2c94c;
  --red:#ff5864;
}
.iiot-page{
  min-height:calc(100vh - 90px);
  box-sizing:border-box;
  padding:24px clamp(12px,2.2vw,34px) 34px;
  background:
    radial-gradient(circle at 10% 0%,rgba(57,211,83,.07),transparent 28%),
    radial-gradient(circle at 100% 20%,rgba(109,211,223,.035),transparent 24%),
    var(--app-bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
.iiot-wrap{max-width:1840px;margin:auto}
.iiot-statusbar{
  min-height:68px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:12px 16px 12px 20px;margin-bottom:14px;
  background:linear-gradient(180deg,#11191b,#0d1416);
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.025);
}
.iiot-brand{font-size:16px;letter-spacing:.02em;font-weight:750;color:#fff}
.iiot-brand b{color:var(--green)}
.iiot-sub{margin-top:4px;font-size:10px;letter-spacing:.11em;color:var(--muted)}
.iiot-status{display:flex;align-items:center;gap:14px;color:#9eb0b0;font-size:11px;white-space:nowrap}
.iiot-status>span:not(.iiot-online){padding-left:13px;border-left:1px solid var(--line)}
.iiot-online{display:inline-flex;align-items:center;color:#b9f6c3;font-weight:700;letter-spacing:.06em}
.iiot-online:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(57,211,83,.08),0 0 12px rgba(57,211,83,.7);margin-right:7px}

.iiot-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:14px}
.iiot-kpi,.iiot-card{
  background:linear-gradient(145deg,rgba(17,27,29,.98),rgba(10,16,18,.98));
  border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.018);
}
.iiot-kpi{position:relative;padding:14px 15px;overflow:hidden}
.iiot-kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(var(--green),transparent);opacity:.8}
.iiot-kpi small{display:block;color:#8fa3a3;font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:650}
.iiot-kpi strong{display:block;font-size:24px;line-height:1.15;margin-top:7px;color:#f4f8f7;font-variant-numeric:tabular-nums}
.iiot-unit{color:#718686;font-size:10px}

.iiot-main{display:grid;grid-template-columns:minmax(0,2.08fr) minmax(360px,.92fr);gap:14px}
.iiot-card{padding:14px;overflow:hidden}
.iiot-title{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.12em;color:#c8d4d3;text-transform:uppercase;margin-bottom:11px}
.iiot-title:before{content:"";width:7px;height:7px;border-radius:2px;background:var(--green);box-shadow:0 0 10px rgba(57,211,83,.25)}

.process-scroll{width:100%;height:410px;overflow:hidden;padding:0;border:1px solid #1e3033;border-radius:10px;background:#070e10}
.process{width:1255px;min-width:1255px;height:500px;position:relative;transform:scale(.82);transform-origin:top left;background:#071012;border:0;border-radius:0;overflow:hidden}
.gridbg{background-image:linear-gradient(#1c3235 1px,transparent 1px),linear-gradient(90deg,#1c3235 1px,transparent 1px);background-size:45px 45px;opacity:.22}
.pipe{background:#526b6d;box-shadow:0 0 4px #000}
.pipe.flowing{background:linear-gradient(90deg,#165d36,#39d353,#165d36);background-size:200% 100%;animation:pipe 1s linear infinite}
@keyframes pipe{to{background-position:200% 0}}
.tank{border-color:#637879;background:#071012;box-shadow:inset 0 0 25px #000,0 8px 20px rgba(0,0,0,.18)}
.tank .water{background:linear-gradient(#2bbd5a,#0d6630)}
.tank label{color:#dce8e6}
.tank .lvl{color:#eaf5f2}
.unitbox{background:#0d1b1d;border-color:#2b4648;border-radius:7px;box-shadow:0 6px 16px rgba(0,0,0,.16)}
.unitbox b{color:#62df7a}
.pump{border-color:#587071;background:#0b181a}
.pump.run{border-color:var(--green);box-shadow:0 0 18px rgba(57,211,83,.22)}
.pump small{color:#829797}
.valve{border-color:#d9b83e;background:#0a1517}
.valve.open{border-color:var(--green)}
.tag{color:#91a8a7}.flowtag{color:#67d878}

.instruments{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.inst{position:relative;background:#0b1416;border:1px solid #223537;border-radius:9px;padding:10px 11px;min-height:51px;box-sizing:border-box;transition:.2s ease}
.inst:hover{border-color:#376144;transform:translateY(-1px);background:#0e191a}
.inst small{display:block;color:#7f9695;font-size:8px;letter-spacing:.08em;font-weight:700}
.inst strong{font-size:18px;display:block;margin-top:5px;font-variant-numeric:tabular-nums;color:#edf5f3}
.good{color:var(--green)!important}.warn{color:var(--amber)!important}.bad{color:var(--red)!important}

.alarm-ticker{height:42px;margin-top:14px;background:#0a0f10;border:1px solid #633139;border-radius:10px;overflow:hidden;display:flex;align-items:center;box-shadow:inset 0 0 18px #000}
.alarm-head{flex:0 0 auto;height:100%;display:flex;align-items:center;gap:8px;padding:0 14px;background:#170b0d;border-right:1px solid #633139;color:#ff6570;font-weight:800;font-size:10px;letter-spacing:.08em;position:relative;z-index:3}
.alarm-bell{font-size:16px;animation:alarmPulse 1s infinite}
@keyframes alarmPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.12)}}
.alarm-window{flex:1;height:100%;overflow:hidden;position:relative;white-space:nowrap}.alarm-track{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;white-space:nowrap;will-change:transform}.alarm-item{color:#ff6570;font-size:11px;font-weight:750;text-shadow:0 0 7px #ff273833}.alarm-time{color:#ff9aa2;margin-right:7px;font-weight:600}.alarm-sep{color:#a41e28;margin-left:12px}
.alarm-ticker.normal{border-color:#1e5c36}.alarm-ticker.normal .alarm-head{color:#76e68b;background:#09150d;border-color:#1e5c36}.alarm-ticker.normal .alarm-item{color:#6de07f;text-shadow:0 0 7px #27e97833}

.iiot-bottom{display:grid;grid-template-columns:1.2fr 1.2fr .9fr;gap:14px;margin-top:14px}
.chart{height:205px}.chart canvas{width:100%;height:100%}
.events{height:205px;overflow:auto;padding-right:3px}.events::-webkit-scrollbar{width:5px}.events::-webkit-scrollbar-thumb{background:#294143;border-radius:5px}
.event{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #1b2b2d;padding:9px 4px;font-size:10px;color:#d6e0df}.event:last-child{border-bottom:0}.event small{color:#829797;line-height:1.5}
.badge{border-radius:999px;padding:4px 7px;font-size:8px;letter-spacing:.07em;font-weight:800}.ok{background:#103522;color:#68dc7b}.attention{background:#3d3211;color:#f4cf5d}

@media(min-width:1201px){.process{zoom:.86}}
@media(min-width:1450px){.process{zoom:.92}}
@media(min-width:1750px){.process{zoom:1}}
@media(max-width:1200px){.iiot-kpis{grid-template-columns:repeat(3,1fr)}.iiot-main{grid-template-columns:1fr}.iiot-bottom{grid-template-columns:1fr}}
@media(max-width:700px){.iiot-page{padding:14px 8px 24px}.iiot-statusbar{align-items:flex-start;gap:12px;padding:12px}.iiot-status{flex-direction:column;align-items:flex-end;gap:5px}.iiot-status>span:not(.iiot-online){padding-left:0;border-left:0}.iiot-kpis{grid-template-columns:repeat(2,1fr)}.iiot-kpi{padding:12px}.iiot-kpi strong{font-size:20px}.instruments{grid-template-columns:1fr 1fr}.process-scroll{height:410px;overflow-x:auto;overflow-y:hidden}.process{transform:scale(.72);transform-origin:top left}.alarm-head{padding:0 9px;font-size:9px}.alarm-item{font-size:10px}}


/* ================= REAL-TIME PROCESS PLANT MIMIC — WHITE SCADA ================= */

.process-scroll{
  width:100%;
  height:auto;
  min-height:390px;
  overflow:hidden;
  padding:0;
  border:1px solid #cfd9d8;
  border-radius:10px;
  background:#f7faf9;
}

.process.process-mimic{
  /* IMPORTANT: modern.css has a global .process grid component.
     This page uses the same class name for the SVG viewport, so explicitly
     cancel the global grid layout. On desktop the grid was forcing the SVG
     into the first of four grid columns (~25% width), which is why the plant
     appeared tiny. */
  display:block !important;
  grid-template-columns:none !important;
  grid-template-rows:none !important;
  width:100% !important;
  min-width:0 !important;
  height:auto;
  position:relative;
  transform:none !important;
  transform-origin:top left;
  background:#ffffff !important;
  border:0 !important;
  border-top:0 !important;
  border-radius:0;
  overflow:hidden;
}

.process.process-mimic > .plant-svg{
  display:block !important;
  width:100% !important;
}
.plant-svg{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-width:100% !important;
  max-width:none !important;
  aspect-ratio:1255 / 500 !important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}

/* Desktop/laptop: force a real 1255:500 viewport so the SVG cannot fall back
   to the browser's tiny intrinsic SVG size. */
@media(min-width:701px){
  .process-scroll{
    height:430px !important;
    min-height:430px !important;
  }
  .process.process-mimic{
    width:100% !important;
    min-width:0 !important;
    height:430px !important;
    zoom:1 !important;
  }
  .process.process-mimic .plant-svg{
    width:100% !important;
    height:430px !important;
    min-width:100% !important;
    max-width:100% !important;
    aspect-ratio:auto !important;
  }
}

/* SVG background/grid */
.plant-svg > rect:first-of-type{
  fill:#ffffff;
}
.plant-svg > rect:nth-of-type(2){
  opacity:.55 !important;
}
.plant-svg defs + rect{fill:#ffffff}

/* Top live instruments */
.svg-instruments rect{
  fill:#f8fbfa;
  stroke:#b9c9c7;
  stroke-width:1.2;
}
.svg-instruments text{
  fill:#526766;
  font-size:8px;
  letter-spacing:1px;
  font-weight:800;
}
.svg-instruments .svg-value{
  fill:#149447;
  font-size:12px;
  letter-spacing:.1px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}
.section-label{
  fill:#334b49;
  font-size:9px;
  font-weight:900;
  letter-spacing:2px;
}

/* Tanks */
.svg-tank{filter:drop-shadow(0 5px 7px rgba(20,45,42,.16))}
.tank-label{
  fill:#243b39;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.1px;
}
.level-value{
  fill:#173c35;
  font-size:13px;
  font-weight:900;
}
.device-tag{
  fill:#58716e;
  font-size:8px;
  letter-spacing:1px;
  font-weight:800;
}
.status-dot{
  fill:#20b957;
  filter:url(#greenGlow);
  animation:statusBlink 1.7s ease-in-out infinite;
}
@keyframes statusBlink{0%,100%{opacity:1}50%{opacity:.4}}

.svg-water{
  transition:y .9s ease,height .9s ease;
}
.water-wave{
  fill:none;
  stroke:#69d98e;
  stroke-width:1.5;
  opacity:.85;
  animation:waveMove 2.2s ease-in-out infinite;
}
@keyframes waveMove{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

/* Pumps */
.svg-pump .pump-body{
  fill:#ffffff;
  stroke:#526b68;
  stroke-width:2;
}
.svg-pump .pump-ring{
  fill:#edf4f2;
  stroke:#718985;
  stroke-width:1.5;
}
.svg-pump .pump-impeller{
  fill:#66817c;
  transform-box:fill-box;
  transform-origin:center;
}
.svg-pump.run .pump-body{
  stroke:#18ad50;
  filter:url(#greenGlow);
}
.svg-pump.run .pump-ring{stroke:#18ad50}
.svg-pump.run .pump-impeller{
  fill:#20bd59;
  animation:pumpSpin .8s linear infinite;
}
@keyframes pumpSpin{to{transform:rotate(360deg)}}
.pump-id{
  fill:#173b35;
  font-size:10px;
  font-weight:900;
}
.pump-name{
  fill:#58716e;
  font-size:7px;
  font-weight:800;
  letter-spacing:.7px;
}

/* MGF / Softener / RO / EDI bodies */
.svg-vessel>rect:first-child,
.svg-ro>rect:first-child,
.svg-edi>rect:first-child{
  fill:url(#tankMetal);
  stroke:#58716e;
  stroke-width:1.6;
}
.svg-vessel ellipse{
  fill:#eaf1ef;
  stroke:#708985;
  stroke-width:1;
}
.media-fill{
  fill:#b58b3e;
  opacity:.95;
  stroke:#806324;
}
.soft-fill{
  fill:#67ad8a;
  opacity:.95;
  stroke:#368063;
}
.equipment-title{
  fill:#213c38;
  font-size:10px;
  font-weight:900;
  letter-spacing:.8px;
}
.equipment-sub{
  fill:#159447;
  font-size:8px;
  font-weight:850;
  letter-spacing:.7px;
}

/* RO membranes */
.svg-ro .membrane{
  fill:#f8fbfa;
  stroke:#718985;
  stroke-width:1.5;
}
.svg-ro .mem-dot{
  fill:#20bd59;
  filter:url(#greenGlow);
  animation:memPulse 1.4s infinite;
}
@keyframes memPulse{0%,100%{opacity:.45}50%{opacity:1}}

/* EDI */
.svg-edi .edi-body{
  fill:#f7fbf9;
  stroke:#3d9860;
  stroke-width:1.5;
}
.svg-edi .edi-lines{
  fill:none;
  stroke:#20b957;
  stroke-width:3;
  stroke-dasharray:5 5;
  animation:ediFlow .8s linear infinite;
}
@keyframes ediFlow{to{stroke-dashoffset:-10}}
.edi-value{
  fill:#149447;
  font-size:9px;
  font-weight:900;
}

/* Pipes and live flow */
.pipe-base{
  fill:none;
  stroke:#8da3a0;
  stroke-width:10;
  stroke-linecap:round;
}
.pipe-flow{
  fill:none;
  stroke:url(#pipeGrad);
  stroke-width:6;
  stroke-linecap:round;
  stroke-dasharray:11 8;
  animation:pipeFlow .65s linear infinite;
  filter:drop-shadow(0 0 2px rgba(32,185,87,.35));
}
@keyframes pipeFlow{to{stroke-dashoffset:-19}}
.flow-dots circle{
  fill:#21c45c;
  filter:url(#greenGlow);
  opacity:.98;
}

/* Process annotations */
.svg-tags rect{
  fill:#f8fbfa;
  stroke:#bdccca;
  stroke-width:1;
}
.svg-tags text{
  fill:#3d5b56;
  font-size:9px;
  font-weight:800;
  letter-spacing:.5px;
}
.svg-tags .good-text{
  fill:#149447;
  font-weight:900;
}

/* Keep pump animation tied to RUN/STOP state */
.svg-pump:not(.run) .pump-impeller{opacity:.35}
.svg-pump:not(.run) .pump-body{stroke:#91a4a1}
.svg-pump:not(.run) .pump-ring{stroke:#a2b2af}

/* Make the mimic occupy the complete card width */
@media(min-width:1201px){
  .process.process-mimic{zoom:1 !important}
}
@media(max-width:1200px){
  .process-scroll{min-height:390px}
}
@media(max-width:700px){
  .process-scroll{
    min-height:0;
    height:auto;
    overflow-x:auto;
    overflow-y:hidden;
  }
  .process.process-mimic{
    min-width:900px;
    width:900px;
  }
  .plant-svg{width:900px}
}