/* depremvar.site — dashboard.css */

/* ── Status bar ── */
.dash-main { max-width:1360px; margin:0 auto; padding:24px 24px 80px; }

.status-bar {
  display:flex; align-items:center; gap:0;
  background:rgba(0,0,0,.4);
  border:1px solid var(--border);
  border-radius:8px; overflow:hidden;
  margin-bottom:20px;
  font-family:var(--font-mono); font-size:.6rem;
}
.sb-item {
  display:flex; align-items:center; gap:8px;
  padding:10px 18px;
  border-right:1px solid var(--border);
}
.sb-label { color:var(--text-dim); letter-spacing:.12em; }
.sb-val   { color:var(--teal); letter-spacing:.08em; }
.sb-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--text-dim); transition:all .3s;
}
.sb-dot.online  { background:var(--teal); box-shadow:0 0 6px var(--teal); animation:pulse 2s infinite; }
.sb-dot.offline { background:var(--alarm); }
.sb-clock {
  margin-left:auto; padding:10px 18px;
  font-family:var(--font-display); font-size:.9rem;
  font-weight:700; color:var(--teal);
  letter-spacing:.05em;
}

/* ── Dashboard grid ── */
.dash-grid {
  display:grid;
  grid-template-columns:300px 1fr 300px;
  grid-template-rows:auto auto auto;
  gap:16px;
}
.card-gauge    { grid-column:1; grid-row:1/3; }
.card-alarm    { grid-column:3; grid-row:1; }
.card-chart    { grid-column:2; grid-row:1/3; }
.card-hmi      { grid-column:3; grid-row:2; }
.card-spectrum { grid-column:1; grid-row:3; }
.card-raw      { grid-column:2; grid-row:3; }
.card-device   { grid-column:3; grid-row:3; }

/* ── Card base ── */
.dash-card { overflow:hidden; }
.card-header {
  display:flex; align-items:center; gap:10px;
  padding:10px 16px;
  background:rgba(0,0,0,.2);
  border-bottom:1px solid var(--border);
  font-family:var(--font-mono); font-size:.62rem;
}
.card-tag {
  background:var(--teal-soft); border:1px solid rgba(0,255,204,.2);
  color:var(--teal); padding:2px 8px; border-radius:2px;
  font-size:.58rem; letter-spacing:.15em;
}
.card-title { color:var(--text); flex:1; letter-spacing:.1em; }
.blink { animation:blink 1.2s infinite; }

/* ── Gauge ── */
.gauge-wrap { position:relative; display:flex; align-items:center; justify-content:center; padding:8px; }
.gauge-center-text {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  text-align:center; pointer-events:none;
}
.gauge-val {
  font-family:var(--font-display); font-weight:800;
  font-size:2.6rem; color:var(--teal);
  text-shadow:0 0 20px rgba(0,255,204,.4);
  line-height:1;
}
.gauge-unit  { font-family:var(--font-mono); font-size:.58rem; color:var(--text-dim); margin-top:2px; }
.gauge-pct   { font-family:var(--font-display); font-size:.9rem; color:var(--teal-dim); margin-top:4px; }

.gauge-bar-row { padding:0 14px 8px; }
.gauge-bar-track {
  height:7px; background:#050e14;
  border:1px solid var(--border); border-radius:4px;
  position:relative; overflow:visible;
}
.gauge-bar-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--teal) 0%,#ffaa00 70%,var(--alarm) 100%);
  border-radius:4px; transition:width .2s;
  box-shadow:0 0 8px rgba(0,255,204,.3);
}
.gauge-bar-cursor {
  position:absolute; top:-4px;
  width:3px; height:15px;
  background:#fff; border-radius:2px;
  transform:translateX(-50%); transition:left .2s;
  box-shadow:0 0 6px rgba(255,255,255,.5);
}
.gauge-scale {
  display:flex; justify-content:space-between;
  font-family:var(--font-mono); font-size:.52rem;
  color:var(--text-dim); margin-top:4px;
}
.gauge-meta {
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border);
}
.gm-item {
  display:flex; flex-direction:column; align-items:center;
  padding:8px 4px; border-right:1px solid var(--border);
}
.gm-item:last-child { border-right:none; }
.gm-k { font-family:var(--font-mono); font-size:.52rem; color:var(--text-dim); letter-spacing:.12em; }
.gm-v { font-family:var(--font-display); font-size:.9rem; color:var(--teal); margin-top:2px; }

/* ── Alarm ── */
.alarm-display {
  display:flex; flex-direction:column; align-items:center;
  padding:16px; gap:8px;
}
.alarm-icon { width:64px; transition:all .3s; }
.alarm-tri  { fill:var(--text-faint); stroke:var(--text-dim); stroke-width:1.5; transition:all .3s; }
.alarm-exclam { fill:var(--text-dim); font-size:28px; font-weight:bold; transition:all .3s; }
.alarm-status {
  font-family:var(--font-display); font-weight:700;
  font-size:1.2rem; letter-spacing:.2em;
  color:var(--text-dim); transition:all .3s;
}
.alarm-code { font-family:var(--font-mono); font-size:.62rem; color:var(--text-dim); }

.alarm-display.alarming .alarm-tri   { fill:rgba(255,59,59,.15); stroke:var(--alarm); animation:blink .4s infinite; }
.alarm-display.alarming .alarm-exclam { fill:var(--alarm); }
.alarm-display.alarming .alarm-status { color:var(--alarm); text-shadow:0 0 12px var(--alarm); }

.threshold-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; border-top:1px solid var(--border);
  font-family:var(--font-mono);
}
.thr-label { font-size:.58rem; color:var(--text-dim); letter-spacing:.12em; white-space:nowrap; }
input[type="range"] {
  flex:1; -webkit-appearance:none; appearance:none;
  height:4px; background:var(--border); border-radius:2px; outline:none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; width:14px; height:14px;
  background:var(--teal); border-radius:50%; cursor:pointer;
  box-shadow:0 0 8px var(--teal-glow);
}
.thr-val { font-size:.85rem; color:var(--teal); min-width:32px; text-align:right; }

/* ── Chart ── */
.chart-wrap { padding:14px 16px; height:280px; position:relative; }
#seismicChart { width:100% !important; height:100% !important; }
.chart-ctrl-group { display:flex; gap:4px; }
.chart-ctrl {
  background:var(--teal-soft); border:1px solid var(--border);
  color:var(--text-dim); font-family:var(--font-mono);
  font-size:.58rem; padding:3px 10px; border-radius:2px; cursor:none;
  transition:all .2s;
}
.chart-ctrl:hover,.chart-ctrl.active { border-color:var(--teal); color:var(--teal); background:rgba(0,255,204,.12); }
.chart-footer {
  display:flex; gap:20px; flex-wrap:wrap;
  padding:8px 16px; border-top:1px solid var(--border);
  font-family:var(--font-mono); font-size:.58rem; color:var(--text-dim);
}
.chart-footer b { color:var(--teal-dim); }

/* ── HMI Commands ── */
.cmd-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px; }
.cmd-btn {
  display:flex; flex-direction:column; align-items:center;
  padding:14px 8px; border-radius:6px; cursor:none;
  background:#060e16; transition:all .2s;
  gap:5px;
}
.cmd-icon { font-size:1.8rem; }
.cmd-name { font-family:var(--font-display); font-size:.6rem; font-weight:700; letter-spacing:.1em; }
.cmd-desc { font-size:.55rem; color:var(--text-dim); text-align:center; }
.cmd-alarm { border:1px solid rgba(255,59,59,.3); color:var(--alarm); }
.cmd-alarm:hover { background:rgba(255,59,59,.08); border-color:var(--alarm); box-shadow:0 0 14px rgba(255,59,59,.2); transform:translateY(-2px); }
.cmd-valve { border:1px solid rgba(240,180,41,.3); color:var(--warn); }
.cmd-valve:hover { background:rgba(240,180,41,.06); border-color:var(--warn); transform:translateY(-2px); }
.cmd-reset { border:1px solid var(--border); color:var(--text-dim); }
.cmd-reset:hover { background:var(--teal-soft); border-color:var(--teal); color:var(--teal); transform:translateY(-2px); }
.cmd-confirm {
  display:none; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 14px; border-top:1px solid rgba(240,180,41,.2);
  background:rgba(240,180,41,.04);
  font-family:var(--font-mono); font-size:.65rem; color:var(--warn);
}
.cmd-confirm.visible { display:flex; }
.cmd-ok,.cmd-no {
  padding:5px 14px; font-family:var(--font-mono);
  font-size:.62rem; border-radius:2px; cursor:none;
  letter-spacing:.08em; border:1px solid;
}
.cmd-ok  { background:var(--teal-soft); border-color:var(--teal); color:var(--teal); }
.cmd-no  { background:rgba(255,59,59,.06); border-color:var(--alarm); color:var(--alarm); }

/* ── Alarm log ── */
.alarm-log,.cmd-log { border-top:1px solid var(--border); padding:10px 14px; }
.log-head { font-family:var(--font-mono); font-size:.58rem; color:var(--teal-dim); letter-spacing:.15em; margin-bottom:6px; }
.log-body {
  font-family:var(--font-mono); font-size:.62rem;
  color:var(--text-dim); line-height:1.7;
  max-height:80px; overflow-y:auto;
}
.log-line { padding:1px 0; }
.log-line.alarm { color:var(--alarm); }

/* ── Spectrum ── */
.spectrum-wrap { padding:14px 16px 10px; }
.spectrum-bars { display:flex; align-items:flex-end; gap:3px; height:80px; }
.spec-bar {
  flex:1; border-radius:2px 2px 0 0; min-width:6px;
  background:linear-gradient(0deg,var(--teal) 0%,#ffaa00 65%,var(--alarm) 100%);
  transition:height .15s; box-shadow:0 -2px 5px var(--teal-soft);
}
.spectrum-scale {
  display:flex; justify-content:space-between;
  font-family:var(--font-mono); font-size:.52rem;
  color:var(--text-dim); margin-top:6px;
}

/* ── Raw ── */
.raw-json {
  font-family:var(--font-mono); font-size:.78rem;
  color:#00cc88; line-height:1.9;
  padding:14px 16px; background:#030810;
  white-space:pre-wrap;
}
.lcd-strip {
  display:flex; align-items:center; gap:16px;
  padding:10px 16px; border-top:1px solid var(--border);
  background:rgba(0,6,0,.6);
}
.lcd-label { font-family:var(--font-mono); font-size:.58rem; color:#006633; letter-spacing:.15em; flex-shrink:0; }
.lcd-text  { font-family:var(--font-mono); font-size:.82rem; color:#00ee66; text-shadow:0 0 8px rgba(0,238,100,.5); }

/* ── Device ── */
.hb-wrap { padding:12px 14px 0; }
.hb-svg  { width:100%; filter:drop-shadow(0 0 5px var(--teal)); }
.device-table { padding:8px 14px 14px; }
.dt-row {
  display:flex; justify-content:space-between;
  padding:5px 0; border-bottom:1px dashed var(--text-faint);
  font-family:var(--font-mono); font-size:.62rem;
}
.dt-row:last-child { border-bottom:none; }
.dt-k { color:var(--text-dim); }
.dt-v { color:var(--text); text-align:right; }

/* ── Alarm overlay ── */
.alarm-overlay {
  position:fixed; inset:0; pointer-events:none; z-index:600;
  border:4px solid transparent; transition:border-color .1s;
}
.alarm-overlay.active {
  border-color:var(--alarm);
  animation:alarm-border .4s infinite;
  box-shadow:inset 0 0 60px rgba(255,59,59,.1);
}
@keyframes alarm-border { 0%,100%{border-color:var(--alarm)} 50%{border-color:transparent} }

/* ── Responsive ── */
@media (max-width:1100px) {
  .dash-grid { grid-template-columns:1fr 1fr; }
  .card-gauge  { grid-column:1; grid-row:1/3; }
  .card-alarm  { grid-column:2; grid-row:1; }
  .card-chart  { grid-column:1/3; grid-row:3; }
  .card-hmi    { grid-column:2; grid-row:2; }
  .card-spectrum,.card-raw,.card-device { grid-column:auto; grid-row:auto; }
}
@media (max-width:700px) {
  .dash-grid { grid-template-columns:1fr; }
  .card-gauge,.card-chart { grid-column:1; grid-row:auto; }
  .status-bar { flex-wrap:wrap; }
}