/* LNG Tanker — Simulator-specific styles (extends shared/simulator-theme.css) */

:root {
  --lng: #00d4ff;
  --lng2: #0090cc;
  --lng3: #005488;
  --purple: #aa44ff;
  --bog: #40aaff;
  --cryo: #c0f0ff;
}

/* Phase nav */
#phases{background:var(--bg3);border-bottom:1px solid var(--b1);display:flex;overflow-x:auto;height:32px;align-items:center;padding:0 6px;gap:2px;}
#phases::-webkit-scrollbar{height:0;}
.ph-btn{padding:4px 12px;font-size:9px;font-family:var(--f1);cursor:pointer;border-radius:2px;border:1px solid var(--b1);color:var(--muted);white-space:nowrap;background:transparent;transition:all .12s;}
.ph-btn:hover{color:var(--lng);border-color:var(--lng3);}
.ph-btn.active{background:rgba(0,212,255,.1);border-color:var(--lng);color:var(--lng);}
.ph-btn.done{color:var(--green);border-color:var(--green);}

/* Layout */
#main{display:flex;height:calc(100vh - 78px);}

/* Sidebar */
#side{width:185px;min-width:185px;background:var(--panel);border-right:1px solid var(--b1);display:flex;flex-direction:column;overflow-y:auto;}
.s-hd{padding:4px 8px;font-size:8px;font-family:var(--f1);color:var(--lng2);letter-spacing:1.5px;background:var(--bg3);border-bottom:1px solid var(--b1);}
.s-item{padding:5px 8px;font-size:10px;color:var(--muted);cursor:pointer;border-left:2px solid transparent;display:flex;align-items:center;gap:5px;transition:all .1s;}
.s-item:hover{color:var(--white);background:rgba(0,212,255,.05);}
.s-item.active{color:var(--lng);border-left-color:var(--lng);background:rgba(0,212,255,.08);}
.s-dot{width:6px;height:6px;border-radius:50%;}

/* Center */
#ctr{flex:1;display:flex;flex-direction:column;overflow:hidden;}
#op-bar{height:36px;background:var(--bg2);border-bottom:1px solid var(--b1);display:flex;align-items:center;padding:0 12px;gap:16px;flex-shrink:0;}
.op-title{font-family:var(--f1);font-size:11px;color:var(--lng);font-weight:700;letter-spacing:1px;}
.op-kpi{font-size:9px;color:var(--muted);}
.op-kpi span{font-family:var(--f1);font-size:10px;}
#canvas-wrap{flex:1;position:relative;overflow:hidden;}
#cv{display:block;}
#ctrl-bar{background:var(--bg3);border-top:1px solid var(--b1);padding:5px 8px;display:flex;gap:4px;flex-wrap:wrap;flex-shrink:0;}
.cbtn{padding:4px 11px;font-size:9px;font-family:var(--f1);border:1px solid var(--b2);background:rgba(0,0,0,.5);color:var(--muted);cursor:pointer;border-radius:2px;transition:all .12s;}
.cbtn:hover{border-color:var(--lng);color:var(--lng);}
.cbtn.on{background:rgba(0,212,255,.12);border-color:var(--lng);color:var(--lng);}
.cbtn.red{border-color:var(--red);color:var(--red);}
.cbtn.red:hover{background:rgba(255,34,68,.15);}
.cbtn.grn{border-color:var(--green);color:var(--green);}
.c-sep{width:1px;height:18px;background:var(--b1);margin:0 2px;}

/* Right panel */
#rp{width:240px;min-width:240px;background:var(--panel);border-left:1px solid var(--b1);display:flex;flex-direction:column;overflow:hidden;}
.rp-hd{padding:4px 8px;font-size:8px;font-family:var(--f1);color:var(--lng2);letter-spacing:1.5px;background:var(--bg3);border-bottom:1px solid var(--b1);}
.rp-
.rp-scroll{overflow-y:auto;flex:1;}
.rp-scroll::-webkit-scrollbar{width:2px;}
.rp-scroll::-webkit-scrollbar-thumb{background:var(--b2);}

/* Gauges */

/* Tank cells */
.tg{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:4px 6px;}
.tc{border:1px solid var(--b1);border-radius:2px;background:var(--bg2);padding:3px 4px;cursor:pointer;position:relative;overflow:hidden;transition:border-color .2s;}
.tc:hover{border-color:var(--lng3);}
.tc-fill{position:absolute;bottom:0;left:0;right:0;transition:height .5s;opacity:.7;}
.tc-lbl{position:relative;font-size:7px;color:rgba(255,255,255,.5);}
.tc-val{position:relative;font-family:var(--f1);font-size:9px;}

/* Alarms */

@keyframes af{0%,100%{background:rgba(255,34,68,.04)}50%{background:rgba(255,34,68,.18)}}

/* Checklist */

/* Modal */

/* ── PIPELINE LINE-UP ── */
.pl-hd{padding:3px 6px;font-size:8px;font-family:var(--f1,monospace);color:var(--lng,#00d4ff);letter-spacing:1.5px;text-transform:uppercase;border-bottom:1px solid var(--b1,#0a1a2e);background:var(--bg3,#060c18);}
.pl-sec{font-size:9px;font-family:var(--f1,monospace);color:var(--muted,#6a9aba);letter-spacing:1px;text-transform:uppercase;padding:4px 6px 1px;border-bottom:1px dashed rgba(255,255,255,.05);}
.pl-row{display:flex;align-items:center;gap:4px;padding:2px 6px;border-bottom:1px solid rgba(255,255,255,.03);}
.pl-id{font-family:var(--f1,monospace);font-size:10px;color:var(--muted,#6a9aba);min-width:58px;}
.pl-desc{font-size:10px;color:rgba(192,232,255,.55);flex:1;}
.pl-vbtn{padding:1px 7px;font-size:8px;font-family:var(--f1,monospace);border-radius:2px;cursor:pointer;border:1px solid;transition:all .12s;flex-shrink:0;}
.pl-vbtn.open{border-color:#00ff88;color:#00ff88;background:rgba(0,255,136,.1);}
.pl-vbtn.closed{border-color:#ff2244;color:#ff2244;background:rgba(255,34,68,.08);}
.pl-vbtn.transitioning { background: rgba(255,171,0,0.12); border-color: var(--amber,#ffab00); color: var(--amber,#ffab00); }
.pl-vbtn.req{box-shadow:0 0 0 1px #ffaa00;animation:plreq .8s infinite;}
.pl-status{margin:4px 6px;padding:3px 8px;border-radius:2px;font-family:var(--f1,monospace);font-size:9px;text-align:center;}
.pl-status.ok{border:1px solid #00ff88;color:#00ff88;background:rgba(0,255,136,.06);}
.pl-status.fault{border:1px solid #ff2244;color:#ff2244;background:rgba(255,34,68,.07);animation:plreq .8s infinite;}
.pl-status.idle{border:1px solid var(--muted,#6a9aba);color:var(--muted,#6a9aba);}