/* machine.css — dark SCADA console skin for the TSGB machine web app.
 * Sits on top of the TSGB brand site.css. Dark instruments on a warm-dark room. */

.machine-room {
  background:
    radial-gradient(80% 60% at 20% 0%, rgba(1,33,105,0.35) 0%, transparent 60%),
    radial-gradient(70% 60% at 100% 10%, rgba(200,16,46,0.18) 0%, transparent 55%),
    #0b1020;
  color: #dbe4f5;
  min-height: calc(100vh - 3.5rem);
}
.machine-room .panel {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.6rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 30px -18px rgba(0,0,0,0.8);
}
.machine-room .panel-head {
  display:flex; align-items:center; gap:.5rem;
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#7f8fb3; padding:.6rem .9rem; border-bottom:1px solid rgba(255,255,255,0.06);
}
.machine-room .panel-body { padding: .9rem; }

/* ---- Arc gauge ---- */
.mg { position: relative; text-align: center; }
.mg-svg { width: 100%; max-width: 150px; display: block; margin: 0 auto; overflow: visible; }
.mg-track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 8; stroke-linecap: round; }
.mg-fill  { fill: none; stroke: #3b82f6; stroke-width: 8; stroke-linecap: round;
            transition: stroke-dashoffset .18s ease, stroke .2s ease; }
.mg.warn .mg-fill { stroke: #f59e0b; }
.mg.crit .mg-fill { stroke: #ef4444; }
.mg-val { margin-top: -1.9rem; }
.mg-num { font-family: "JetBrains Mono", monospace; font-size: 1.5rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.mg-unit { font-size: .7rem; color: #7f8fb3; margin-left: .2rem; }
.mg-label { font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: #7f8fb3; margin-top: .25rem; }

/* ---- Stat tile (compact numeric readout) ---- */
.stat { background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:.5rem; padding:.7rem .85rem; }
.stat .k { font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:#7f8fb3; }
.stat .v { font-family:"JetBrains Mono",monospace; font-size:1.35rem; font-weight:700; color:#fff; line-height:1.1; font-variant-numeric:tabular-nums; }
.stat .u { font-size:.7rem; color:#93a2c4; font-weight:500; }

/* ---- Lamps ---- */
.ml { display:inline-block; width:.7rem; height:.7rem; border-radius:50%; background:#334155; box-shadow:0 0 0 2px rgba(0,0,0,.35) inset; vertical-align:middle; }
.ml-on   { background:#22c55e; box-shadow:0 0 8px 1px rgba(34,197,94,.7); }
.ml-warn { background:#f59e0b; box-shadow:0 0 8px 1px rgba(245,158,11,.7); }
.ml-fault{ background:#ef4444; box-shadow:0 0 8px 1px rgba(239,68,68,.8); animation:ml-blink 1s steps(2,end) infinite; }
.ml-off  { background:#334155; }
@keyframes ml-blink { 50% { opacity:.35; } }
.lamp-row { display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:#c3cee4; padding:.2rem 0; }

/* ---- State badge ---- */
.state-badge { display:inline-flex; align-items:center; gap:.4rem; font-weight:700; letter-spacing:.05em;
  padding:.25rem .8rem; border-radius:999px; font-size:.8rem; }
.state-Online       { background:rgba(34,197,94,.15); color:#4ade80; }
.state-Synchronising{ background:rgba(59,130,246,.15); color:#60a5fa; }
.state-SpinningUp   { background:rgba(59,130,246,.12); color:#93c5fd; }
.state-Tripped      { background:rgba(239,68,68,.18); color:#f87171; }
.state-Stopped      { background:rgba(148,163,184,.15); color:#cbd5e1; }

/* ---- Breaker pill ---- */
.brk { display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .7rem; border-radius:.4rem;
  font-size:.72rem; font-weight:700; letter-spacing:.05em; border:1px solid rgba(255,255,255,.1); cursor:pointer; user-select:none; }
.brk.closed { background:rgba(34,197,94,.16); color:#4ade80; border-color:rgba(34,197,94,.4); }
.brk.open   { background:rgba(148,163,184,.1); color:#94a3b8; }

/* ---- Buttons in the room ---- */
.mbtn { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .9rem; border-radius:.45rem; font-weight:600; font-size:.82rem;
  background:rgba(255,255,255,.06); color:#dbe4f5; border:1px solid rgba(255,255,255,.12); cursor:pointer; transition:background .15s; }
.mbtn:hover { background:rgba(255,255,255,.12); }
.mbtn-red { background:#C8102E; border-color:#C8102E; color:#fff; }
.mbtn-red:hover { background:#9b0d23; }
.mbtn-estop { background:#b91c1c; border-color:#ef4444; color:#fff; font-weight:800; letter-spacing:.06em; }

/* ---- SCADA log ---- */
.scada { font-family:"JetBrains Mono",monospace; font-size:.72rem; line-height:1.5; max-height:14rem; overflow:auto; }
.scada .Info  { color:#93a2c4; }
.scada .Ok    { color:#4ade80; }
.scada .Warn  { color:#fbbf24; }
.scada .Alarm { color:#f87171; }

/* ---- Toasts ---- */
.mtoast-host { position:fixed; right:1rem; bottom:1rem; z-index:80; display:flex; flex-direction:column; gap:.5rem; }
.mtoast { background:#111827; color:#e5e7eb; border:1px solid rgba(255,255,255,.12); border-left:3px solid #3b82f6;
  padding:.6rem .9rem; border-radius:.4rem; font-size:.82rem; opacity:0; transform:translateY(8px); transition:all .25s; max-width:22rem; }
.mtoast.show { opacity:1; transform:none; }
.mtoast-warn { border-left-color:#f59e0b; }
.mtoast-ok { border-left-color:#22c55e; }
.mtoast-err { border-left-color:#ef4444; }

/* ---- Single-line mimic ---- */
.mimic { width:100%; }
.mimic .node { fill:#0f172a; stroke:#475569; stroke-width:1.5; }
.mimic .node.live { stroke:#22c55e; }
.mimic .wire { stroke:#475569; stroke-width:2.5; fill:none; }
.mimic .wire.live { stroke:#22c55e; }
.mimic text { fill:#c3cee4; font-size:9px; font-family:"JetBrains Mono",monospace; }
.mimic .lab { fill:#7f8fb3; font-size:7px; text-transform:uppercase; letter-spacing:.05em; }

/* connection status dot */
.constat { font-size:.72rem; color:#7f8fb3; }
.constat b { color:#4ade80; }
.constat.offline b { color:#f87171; }
.constat.reconnecting b { color:#fbbf24; }