/* Central Valley Ignition — interactive demo dashboard components (shared by industry demos) */
:root{
  --db-amber:#ffc233; --db-green:#5fd38a; --db-red:#ff6a5e; --db-blue:#5fc4f5;
  --db-panel:#222a32; --db-panel2:#1b222a; --db-line:#3a4654; --db-line2:#4c5a67;
  --db-tile:#1a2128; --db-text:#e7ecf1; --db-muted:#94a1b0;
  --db-mono:ui-monospace,Consolas,monospace;
}
.db{margin:8px 0 4px}
.db-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#13171c;border:1px solid var(--db-line);border-radius:8px;padding:10px 14px;margin-bottom:14px;font-family:var(--db-mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--db-muted)}
.db-bar .on{display:inline-flex;align-items:center;gap:8px;color:var(--db-green)}
.db-bar .dot{width:8px;height:8px;border-radius:50%;background:var(--db-green);box-shadow:0 0 8px var(--db-green);animation:db-pulse 2s infinite}
.db-bar .sep{opacity:.4}
.db-bar b{color:var(--db-text)}
.db-bar .alm{margin-left:auto;color:#221900;background:var(--db-amber);border-radius:20px;padding:3px 12px;font-weight:800}
.db-bar .alm.ok{background:var(--db-green)}
.db-pause{font-family:var(--db-mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--db-muted);background:var(--db-tile);border:1px solid var(--db-line2);border-radius:6px;padding:5px 12px;cursor:pointer;transition:.15s}
.db-pause:hover{border-color:var(--db-amber);color:var(--db-amber)}
.db-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:14px}
.db-kpi{background:linear-gradient(160deg,var(--db-panel),var(--db-panel2));border:1px solid var(--db-line2);border-radius:9px;padding:12px 14px}
.db-kpi .l{font-family:var(--db-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--db-muted)}
.db-kpi .v{font-size:1.5rem;font-weight:800;color:var(--db-amber);margin-top:5px;line-height:1;font-variant-numeric:tabular-nums}
.db-kpi .v i{font-size:.62rem;font-style:normal;color:var(--db-muted);font-weight:600;letter-spacing:.03em}
.db-kpi.crit{border-color:var(--db-red)} .db-kpi.crit .v{color:var(--db-red)}
.db-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.db-grid .wide{grid-column:1 / -1}
.db-panel{background:linear-gradient(160deg,var(--db-panel),var(--db-panel2));border:1px solid var(--db-line2);border-radius:10px;padding:15px 17px;display:flex;flex-direction:column}
.db-panel h3{font-family:var(--db-mono);font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--db-amber);margin:0 0 13px;display:flex;align-items:center;gap:9px}
.db-panel h3 .tag{margin-left:auto;font-size:9.5px;color:var(--db-muted);letter-spacing:.04em;text-transform:none}
.db-trend{width:100%;height:128px;display:block;background:var(--db-tile);border-radius:6px}
.db-tank{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-family:var(--db-mono);font-size:12px}
.db-tank .nm{flex:0 0 140px;color:var(--db-text)}
.db-tank .track{flex:1;height:14px;background:var(--db-tile);border:1px solid var(--db-line);border-radius:7px;overflow:hidden}
.db-tank .fill{display:block;height:100%;background:linear-gradient(180deg,#5fccff,#1c7fb8);transition:width .6s ease}
.db-tank .fill.hi{background:linear-gradient(180deg,#ffd569,#d99a14)}
.db-tank .fill.lo{background:linear-gradient(180deg,#ff8b82,#c44a40)}
.db-tank .pct{flex:0 0 46px;text-align:right;color:var(--db-text);font-variant-numeric:tabular-nums}
.db-row{display:flex;align-items:center;gap:10px;font-family:var(--db-mono);font-size:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.db-row:last-child{border-bottom:0}
.db-row .nm{flex:1;color:var(--db-text)}
.db-row .nm small{display:block;color:var(--db-muted);font-size:10px;letter-spacing:.02em;margin-top:2px}
.db-row .val{color:var(--db-text);font-variant-numeric:tabular-nums}
.db-pill{font-family:var(--db-mono);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:20px;white-space:nowrap}
.db-pill.ok{background:rgba(95,211,138,.16);color:var(--db-green)}
.db-pill.warn{background:rgba(255,194,51,.16);color:var(--db-amber)}
.db-pill.bad{background:rgba(255,106,94,.18);color:#ff8b82}
.db-pill.run{background:rgba(95,196,245,.16);color:var(--db-blue)}
.db-pill.idle{background:rgba(120,135,150,.18);color:#aab4be}
.db-gauges{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center}
.db-gauge{font-family:var(--db-mono);background:var(--db-tile);border:1px solid var(--db-line);border-radius:8px;padding:12px 6px}
.db-gauge .num{font-size:1.35rem;font-weight:800;color:var(--db-text);font-variant-numeric:tabular-nums}
.db-gauge.hl .num{color:var(--db-amber)}
.db-gauge .lbl{font-size:9px;text-transform:uppercase;color:var(--db-muted);letter-spacing:.05em;margin-top:3px}
.db-gauge .mini{height:5px;border-radius:3px;background:var(--db-line);margin-top:8px;overflow:hidden}
.db-gauge .mini i{display:block;height:100%;background:var(--db-green)}
.db-alarms{list-style:none;margin:0;padding:0;font-family:var(--db-mono);font-size:11.5px;max-height:210px;overflow:hidden}
.db-alarms li{display:flex;gap:9px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.db-alarms .t{color:var(--db-muted);flex:0 0 58px}
.db-alarms .m{color:var(--db-text)}
.db-alarms .crit .m{color:#ff8b82} .db-alarms .warn .m{color:var(--db-amber)} .db-alarms .ok .m{color:var(--db-green)}
.db-why{font-family:var(--db-mono);font-size:10.5px;line-height:1.55;color:var(--db-muted);margin-top:auto;border-top:1px dashed var(--db-line);padding-top:9px}
.db-why b{color:var(--db-amber);text-transform:uppercase;letter-spacing:.05em;font-size:9.5px}
.db-why a{color:var(--db-blue)} .db-why a:hover{text-decoration:underline}
.db-src{font-family:var(--db-mono);font-size:9.5px;color:var(--db-muted);margin-top:8px}
.db-src a{color:var(--db-blue)} .db-src a:hover{text-decoration:underline}
/* subtle accent tints so the grid isn't a wall of identical cards */
.db-panel.acc-charcoal{background:linear-gradient(160deg,#2e353d,#242b32);border-color:#5a6675}
.db-panel.acc-amber{background:linear-gradient(160deg,#2b2a20,#201d14);border-color:rgba(255,194,51,.38)}
.db-panel.acc-blue{background:linear-gradient(160deg,#1c2a34,#142028);border-color:rgba(95,196,245,.38)}
.db-panel.acc-blue h3{color:var(--db-blue)}
.db-panel.acc-green{background:linear-gradient(160deg,#1d2b25,#152019);border-color:rgba(95,211,138,.38)}
.db-panel.acc-green h3{color:var(--db-green)}
.db-panel.acc-red{background:linear-gradient(160deg,#2c2120,#201615);border-color:rgba(255,106,94,.38)}
.db-panel.reg{background:linear-gradient(160deg,#1c2a34,#142028);border-color:rgba(95,196,245,.4)}
.db-panel.reg h3{color:var(--db-blue)}
/* live process mimic (animated plant-flow schematic) */
.db-mimic{width:100%;height:auto;display:block;background:var(--db-tile);border-radius:6px}
.db-mimic .pipe{fill:none;stroke:#3a4654;stroke-width:5;stroke-linecap:round}
.db-mimic .flow{fill:none;stroke:var(--db-blue);stroke-width:3;stroke-dasharray:7 8;stroke-linecap:round;animation:db-flow 1s linear infinite}
.db-mimic .ret{fill:none;stroke:#3a4654;stroke-width:3;stroke-dasharray:7 8;stroke-linecap:round}
.db-mimic.divert .fwd{stroke:#566472;animation:none}
.db-mimic.divert .ret{stroke:var(--db-red);animation:db-flow 1s linear infinite}
.db-mimic.alarm .fwd{stroke:#566472;animation:none}
.db-mimic.alarm .eq.hot{stroke:var(--db-red)}
.db-mimic.alarm .hot-t{fill:var(--db-red)}
.db-mimic .eq{fill:#20272e;stroke:var(--db-line2);stroke-width:1.4}
.db-mimic .eq.hot{stroke:var(--db-amber)}
.db-mimic.divert .eq.hot{stroke:var(--db-red)}
.db-mimic .lbl{fill:#cdd6df;font-family:var(--db-mono);font-size:10px;text-anchor:middle}
.db-mimic .sub{fill:#8a97a4;font-family:var(--db-mono);font-size:8.5px;text-anchor:middle}
.db-mimic .hot-t{fill:var(--db-amber);font-family:var(--db-mono);font-size:11px;font-weight:700;text-anchor:middle}
.db-mimic.divert .hot-t{fill:var(--db-red)}
.db-paused .db-mimic .flow,.db-paused .db-mimic .ret{animation-play-state:paused}
@keyframes db-flow{to{stroke-dashoffset:-30}}
/* canvas widgets share the tile look */
.db-canvas{width:100%;height:150px;display:block;background:var(--db-tile);border-radius:6px}
.db-canvas.tall{height:188px}
.db-arc{width:100%;height:118px;display:block}
.db-arcrow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.db-arcrow .cell{background:var(--db-tile);border:1px solid var(--db-line);border-radius:8px;padding:6px 4px 4px}
.db-arcrow .cl{font-family:var(--db-mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--db-muted);text-align:center;margin-top:-2px}
/* spatial zone / heat map (facility view) */
.db-map{display:grid;gap:9px}
.db-map.cols4{grid-template-columns:repeat(4,1fr)}
.db-map.cols3{grid-template-columns:repeat(3,1fr)}
.db-cell{border-radius:9px;padding:11px 12px;border:1px solid var(--db-line);font-family:var(--db-mono);min-height:70px;display:flex;flex-direction:column;justify-content:space-between;color:#0d1217}
.db-cell .cn{font-size:11px;font-weight:800;letter-spacing:.02em}
.db-cell .cs{font-size:8.5px;opacity:.8;margin-top:1px}
.db-cell .cv{font-size:1.45rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.db-cell.alarm{border-color:var(--db-red);box-shadow:0 0 0 2px rgba(255,106,94,.5);animation:db-pulse 1.3s infinite}
/* tank-farm matrix (cylinders) */
.db-tanks{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.db-tcell{background:var(--db-tile);border:1px solid var(--db-line);border-radius:9px;padding:9px 6px 8px;font-family:var(--db-mono);text-align:center}
.db-tcell .tn{font-size:10px;color:var(--db-text);font-weight:800}
.db-tcell .tsub{font-size:8px;color:var(--db-muted);margin-top:1px;text-transform:uppercase;letter-spacing:.04em}
.db-cyl{height:70px;width:36px;margin:7px auto 6px;border:1px solid var(--db-line2);border-radius:5px 5px 9px 9px;position:relative;overflow:hidden;background:#13191f}
.db-cyl i{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#9a6ce0,#4a2a86);transition:height .7s ease}
.db-cyl .bub{position:absolute;left:0;right:0;bottom:0;height:100%;background-image:radial-gradient(circle,rgba(255,255,255,.35) 1.5px,transparent 2px);background-size:12px 12px;animation:db-bub 2.4s linear infinite;opacity:.5}
.db-tcell .tv{font-size:10px;color:var(--db-text);font-variant-numeric:tabular-nums}
.db-tcell .tv b{color:var(--db-amber)}
.db-tcell.warn{border-color:var(--db-amber)} .db-tcell.warn .db-cyl i{background:linear-gradient(180deg,#ffd569,#d99a14)}
.db-tcell.done .db-cyl i{background:linear-gradient(180deg,#5fd38a,#2f8a57)}
.db-paused .db-cyl .bub{animation-play-state:paused}
@keyframes db-bub{to{background-position:0 -48px}}
/* batch / schedule gantt */
.db-gantt{font-family:var(--db-mono);font-size:10.5px}
.db-gscale{display:flex;justify-content:space-between;color:var(--db-muted);font-size:8.5px;margin:0 0 6px 104px}
.db-grow{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.db-grow .gl{flex:0 0 96px;color:var(--db-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-gtrack{flex:1;height:19px;background:var(--db-tile);border:1px solid var(--db-line);border-radius:5px;position:relative;overflow:hidden}
.db-gbar{position:absolute;top:2px;bottom:2px;border-radius:4px;display:flex;align-items:center;padding:0 7px;font-size:8.5px;color:#0d1217;font-weight:800;white-space:nowrap;overflow:hidden}
.db-gnow{position:absolute;top:0;bottom:0;width:2px;background:var(--db-amber);box-shadow:0 0 6px var(--db-amber)}
/* vertical process line with inline CCP checkpoints */
.db-vflow{display:flex;flex-direction:column}
.db-vnode{display:flex;align-items:center;gap:12px;padding:9px 13px;background:var(--db-tile);border:1px solid var(--db-line2);border-radius:9px;font-family:var(--db-mono);position:relative}
.db-vnode .vdot{width:9px;height:9px;border-radius:50%;background:var(--db-blue);box-shadow:0 0 8px var(--db-blue);flex:0 0 auto}
.db-vnode .vn{flex:1;color:var(--db-text);font-size:12px;font-weight:700}
.db-vnode .vn small{display:block;color:var(--db-muted);font-size:9px;font-weight:400;margin-top:2px;letter-spacing:.02em}
.db-vnode .vv{font-size:1.05rem;font-weight:800;color:var(--db-text);font-variant-numeric:tabular-nums}
.db-vnode .vtag{font-size:8px;text-transform:uppercase;letter-spacing:.06em;color:#0d1217;background:var(--db-amber);border-radius:10px;padding:2px 7px;font-weight:800}
.db-vnode.ccp{border-color:rgba(255,194,51,.55)}
.db-vnode.ccp.bad{border-color:var(--db-red);box-shadow:0 0 0 2px rgba(255,106,94,.4)} .db-vnode.ccp.bad .vv{color:var(--db-red)} .db-vnode.ccp.bad .vtag{background:var(--db-red);color:#fff}
.db-vconn{height:15px;width:3px;background:var(--db-line2);margin-left:18px;border-radius:2px;background-image:linear-gradient(180deg,var(--db-blue),var(--db-blue));background-size:100% 12px;background-repeat:repeat-y;animation:db-vrun 1s linear infinite}
.db-paused .db-vconn{animation-play-state:paused}
@keyframes db-vrun{0%{background-position:0 -12px}100%{background-position:0 12px}}
.db-note{font-family:var(--db-mono);font-size:11px;color:var(--db-muted);margin-top:12px;border-top:1px solid var(--db-line);padding-top:10px}
.db-paused .db-bar .dot{animation:none}
@keyframes db-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(max-width:820px){.db-kpis{grid-template-columns:repeat(3,1fr)}.db-grid{grid-template-columns:1fr}.db-gauges{grid-template-columns:repeat(2,1fr)}.db-arcrow{grid-template-columns:repeat(2,1fr)}.db-map.cols4{grid-template-columns:repeat(2,1fr)}.db-map.cols3{grid-template-columns:repeat(2,1fr)}.db-tanks{grid-template-columns:repeat(2,1fr)}.db-gscale{margin-left:0}.db-grow .gl{flex-basis:72px;font-size:9px}}