/* depop-dashboard: mode40 dark operations screen.
   Offline first: every asset is served locally, no CDN, no external fonts. */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --cyan: #00d4de;
  --cyan-soft: #7ceff5;
  --bg: #12181b;
  --surface: #1f252b;
  --surface-deep: #022b35;
  --ink: #fefffe;
  --ink-dim: #8a949c;
  --ink-faint: #5a646c;
  --line: #2c343b;
  --amber: #ffb454;
  --coral: #ff6b5e;
  --ok: #7dd87d;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  min-height: 100vh;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- header */
header.topbar {
  display: flex; align-items: center; gap: 1.25rem;
  padding: .55rem 1.1rem;
  background: linear-gradient(180deg, #16303a 0%, var(--surface-deep) 100%);
  border-bottom: 1px solid #0a3a46;
  position: sticky; top: 0; z-index: 40;
}
.brand { display: flex; flex-direction: column; line-height: 1.15; }
.brand .wordmark { font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; }
.brand .wordmark em { color: var(--cyan); font-style: normal; }
.brand .app { font-size: .72rem; color: var(--ink-dim); letter-spacing: .14em; text-transform: uppercase; }

.phasebox { display: flex; align-items: center; gap: .9rem; flex: 1; }
.phase-chip {
  font-family: var(--mono); font-weight: 600; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .28rem .7rem; border-radius: 3px;
  background: #0a3a46; color: var(--cyan-soft); border: 1px solid #12525f;
}
.phase-chip.phase-idle { color: var(--ink-dim); background: #232a31; border-color: var(--line); }
.phase-chip.phase-complete { color: var(--ok); background: #17301b; border-color: #2c5a33; }

.plan-progress { flex: 1; max-width: 420px; }
.plan-progress .lbl { font-size: .7rem; color: var(--ink-dim); font-family: var(--mono); display: flex; justify-content: space-between; }
.plan-progress .track { height: 6px; background: #0d1417; border-radius: 3px; overflow: hidden; margin-top: 3px; border: 1px solid #253038; }
.plan-progress .fill { height: 100%; width: 0; background: linear-gradient(90deg, #0b6b7a, var(--cyan)); transition: width .8s linear; }

.headstats { display: flex; gap: 1.3rem; }
.headstat { text-align: right; }
.headstat .v { font-family: var(--mono); font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.headstat .k { font-size: .66rem; color: var(--ink-dim); letter-spacing: .1em; text-transform: uppercase; }
.headstat .v .unit { font-size: .7rem; color: var(--ink-dim); }

.conn { display: flex; align-items: center; gap: .45rem; font-size: .74rem; color: var(--ink-dim); font-family: var(--mono); }
.conn .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); }
.conn.live .dot { background: var(--ok); box-shadow: 0 0 6px rgba(125,216,125,.7); }
.usernav { font-size: .78rem; color: var(--ink-dim); display: flex; gap: .8rem; align-items: center; }

/* ---------------------------------------------------------------- layout */
main.wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) 355px;
  gap: .9rem; padding: .9rem 1.1rem 2rem;
}
@media (max-width: 1200px) { main.wrap { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .7rem .85rem;
}
.card h2 {
  margin: 0 0 .5rem; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-dim); font-weight: 600;
}

/* ---------------------------------------------------------------- floors */
.floorstack { display: flex; flex-direction: column; gap: .9rem; }
.floor-card { display: grid; grid-template-columns: minmax(0,1fr) 210px; gap: .8rem; }
.floor-head { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .3rem; }
.floor-head .fname { font-weight: 700; font-size: .95rem; letter-spacing: .06em; }
.floor-head .gw { font-family: var(--mono); font-size: .68rem; padding: .12rem .5rem; border-radius: 3px; }
.gw.gw-ok { color: var(--ink-faint); }
.gw.gw-bad { color: #12181b; background: var(--amber); font-weight: 600; }

svg.barn { width: 100%; height: auto; display: block; background: #171d21;
  border: 1px solid #262e35; border-radius: 4px; }
.barn .outline { fill: none; stroke: #39434c; stroke-width: .8; }
.barn .fence { stroke: #2c343b; stroke-width: .6; stroke-dasharray: 4 3; }
.barn .axis-label { fill: #4a545c; font-size: 4.2px; font-family: var(--mono); }

g.sensor { cursor: pointer; }
g.sensor circle.body { stroke-width: 1.1; transition: fill .5s; }
g.sensor.fresh-live circle.body { stroke: rgba(254,255,254,.35); }
g.sensor.fresh-stale circle.body { stroke: var(--amber); stroke-dasharray: 2.5 1.6; stroke-width: 1.6; }
g.sensor.fresh-lost circle.body { stroke: var(--coral); stroke-dasharray: 1.4 1.4; stroke-width: 1.7; fill: #232a31 !important; }
g.sensor.fresh-no_data circle.body { stroke: var(--ink-faint); stroke-dasharray: 1 1.6; fill: #1c2329 !important; }
g.sensor.at-target circle.halo { fill: none; stroke: var(--cyan); stroke-width: .9; opacity: .9; }
g.sensor text.val { font-family: var(--mono); font-weight: 600; font-size: 5px;
  fill: var(--ink); text-anchor: middle; pointer-events: none; }
g.sensor text.tag { font-family: var(--mono); font-size: 3.4px;
  fill: var(--ink-dim); text-anchor: middle; pointer-events: none; }
g.sensor text.agewarn { font-family: var(--mono); font-weight: 600; font-size: 3.8px;
  fill: var(--amber); text-anchor: middle; pointer-events: none; }
g.sensor.fresh-lost text.agewarn { fill: var(--coral); }

/* floor side stats */
.floor-side { display: flex; flex-direction: column; gap: .45rem; }
.bandstat { background: #171d21; border: 1px solid #262e35; border-radius: 4px; padding: .45rem .6rem; }
.bandstat .r1 { display: flex; justify-content: space-between; align-items: baseline; }
.bandstat .bname { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.bandstat .o2 { font-family: var(--mono); font-weight: 600; font-size: 1.25rem; }
.bandstat .o2 .unit { font-size: .7rem; color: var(--ink-dim); }
.bandstat .r2 { display: flex; justify-content: space-between; align-items: center; margin-top: .15rem; }
.slope { font-family: var(--mono); font-size: .78rem; color: var(--ink-dim); }
.slope .arrow { font-weight: 700; }
.slope.falling .arrow { color: var(--cyan); }
.slope.stagnant { color: #12181b; background: var(--amber); padding: .1rem .45rem; border-radius: 3px; font-weight: 600; }
.slope.rising { color: var(--coral); font-weight: 600; }
.bandstat .cover { font-family: var(--mono); font-size: .68rem; color: var(--ink-faint); }
.bandstat .cover.short { color: var(--amber); }
.target-flag { font-family: var(--mono); font-size: .66rem; color: var(--cyan); }

/* ---------------------------------------------------------------- right */
.rightcol { display: flex; flex-direction: column; gap: .9rem; }

.bands .bandrow { margin-bottom: .7rem; }
.bands .bandrow .lbl { display: flex; justify-content: space-between; font-size: .78rem; margin-bottom: .25rem; }
.bands .bandrow .lbl .t { color: var(--ink-dim); }
.bands .bandrow .lbl .v { font-family: var(--mono); color: var(--cyan-soft); }
.bands .minibar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.bands .fmini { height: 14px; background: #0d1417; border: 1px solid #253038; border-radius: 2px; position: relative; overflow: hidden; }
.bands .fmini .fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #0b6b7a, var(--cyan)); width: 0; transition: width .8s linear; }
.bands .fmini.done .fill { background: var(--cyan); }
.bands .fmini .fl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .6rem; color: rgba(254,255,254,.85); z-index: 1; }

.steps ol { margin: 0; padding-left: 1.1rem; }
.steps li { font-size: .78rem; color: var(--ink-faint); padding: .18rem 0; }
.steps li.active { color: var(--ink); }
.steps li.active::marker { color: var(--cyan); font-weight: 700; }
.steps li.done { color: var(--ink-dim); text-decoration: line-through; text-decoration-color: rgba(138,148,156,.5); }
.steps li em { font-style: normal; font-family: var(--mono); color: var(--cyan-soft); }

.eventlog { max-height: 300px; overflow-y: auto; }
.eventlog .ev { display: grid; grid-template-columns: 52px 1fr; gap: .5rem;
  padding: .3rem 0; border-bottom: 1px solid #232a31; font-size: .76rem; }
.eventlog .ev .t { font-family: var(--mono); color: var(--ink-faint); font-size: .68rem; }
.eventlog .ev.sev-notice .m { color: var(--ink); }
.eventlog .ev.sev-info .m { color: var(--ink-dim); }
.eventlog .ev.sev-attention .m { color: var(--amber); font-weight: 600; }

.confignote { font-size: .72rem; color: var(--ink-faint); line-height: 1.5; }
.confignote strong { color: var(--ink-dim); }
.confignote .links { margin-top: .4rem; display: flex; gap: .9rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------- detail */
#detail {
  position: fixed; z-index: 60; width: 300px; display: none;
  background: #232b32; border: 1px solid #39434c; border-radius: 6px;
  padding: .7rem .8rem; box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
#detail.open { display: block; }
#detail h3 { margin: 0 0 .1rem; font-size: .95rem; }
#detail .loc { font-size: .7rem; color: var(--ink-dim); font-family: var(--mono); margin-bottom: .5rem; }
#detail table { width: 100%; border-collapse: collapse; font-size: .78rem; }
#detail td { padding: .16rem 0; border-bottom: 1px solid #2c343b; }
#detail td.k { color: var(--ink-dim); }
#detail td.v { text-align: right; font-family: var(--mono); }
#detail .agebig { margin-top: .45rem; font-family: var(--mono); font-size: .8rem; color: var(--ink-dim); }
#detail .agebig.warn { color: var(--amber); font-weight: 600; }
#detail .agebig.bad { color: var(--coral); font-weight: 600; }
#detail canvas { width: 100%; height: 46px; margin-top: .5rem; background: #171d21; border-radius: 3px; }
#detail .close { position: absolute; top: .35rem; right: .55rem; color: var(--ink-dim); cursor: pointer; font-size: 1rem; }

/* ---------------------------------------------------------------- footer */
footer.foot {
  padding: .6rem 1.1rem 1.2rem; color: var(--ink-faint); font-size: .7rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ------------------------------------------------------------- sim panel */
#simpanel {
  position: fixed; top: 84px; right: 24px; width: 330px; z-index: 80;
  background: #241d10;
  border: 1px solid var(--amber);
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(0,0,0,.6);
  font-size: .78rem;
}
#simpanel .sp-head {
  display: flex; align-items: center; gap: .5rem; cursor: grab;
  padding: .45rem .7rem;
  background: repeating-linear-gradient(-45deg, #3a2d12 0 10px, #2c230f 10px 20px);
  border-bottom: 1px solid var(--amber);
  border-radius: 7px 7px 0 0;
  user-select: none;
}
#simpanel .sp-head .ttl { font-family: var(--mono); font-weight: 600; letter-spacing: .1em;
  color: var(--amber); font-size: .72rem; }
#simpanel .sp-head .sub { color: #b89660; font-size: .62rem; flex: 1; }
#simpanel .sp-head .fold { cursor: pointer; color: var(--amber); font-family: var(--mono); }
#simpanel.folded .sp-body { display: none; }
#simpanel .sp-body { padding: .6rem .75rem .8rem; max-height: 70vh; overflow-y: auto; }
#simpanel .grp { margin-bottom: .65rem; }
#simpanel .grp h4 { margin: 0 0 .3rem; font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: #b89660; }
#simpanel .krow { display: grid; grid-template-columns: 108px 1fr 44px; gap: .45rem;
  align-items: center; padding: .12rem 0; }
#simpanel .krow label { color: #d8c49a; font-size: .72rem; }
#simpanel .krow output { font-family: var(--mono); font-size: .7rem; color: var(--amber); text-align: right; }
#simpanel input[type=range] { width: 100%; accent-color: var(--amber); height: 18px; }
#simpanel .btnrow { display: flex; flex-wrap: wrap; gap: .35rem; }
#simpanel button {
  background: #33280f; color: #ffd699; border: 1px solid #6b5320;
  border-radius: 4px; padding: .28rem .55rem; font-size: .7rem;
  font-family: var(--mono); cursor: pointer;
}
#simpanel button:hover { background: #4a3a15; }
#simpanel button.danger { border-color: var(--coral); color: var(--coral); }
#simpanel .simstat { font-family: var(--mono); font-size: .66rem; color: #b89660;
  border-top: 1px dashed #6b5320; padding-top: .45rem; margin-top: .2rem; }

/* ---------------------------------------------------------------- login */
.loginbox { max-width: 360px; margin: 14vh auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; padding: 1.6rem; }
.loginbox h1 { font-size: 1.05rem; margin: 0 0 .2rem; }
.loginbox .sub { color: var(--ink-dim); font-size: .78rem; margin-bottom: 1.2rem; }
.loginbox label { display: block; font-size: .72rem; color: var(--ink-dim);
  text-transform: uppercase; letter-spacing: .1em; margin: .8rem 0 .25rem; }
.loginbox input { width: 100%; background: #12181b; color: var(--ink);
  border: 1px solid var(--line); border-radius: 4px; padding: .55rem .6rem;
  font-family: var(--sans); font-size: .9rem; }
.loginbox input:focus { outline: none; border-color: var(--cyan); }
.loginbox button { margin-top: 1.2rem; width: 100%; background: var(--cyan);
  color: #052026; font-weight: 700; border: none; border-radius: 4px;
  padding: .6rem; font-size: .9rem; cursor: pointer; }
.loginbox .err { color: var(--coral); font-size: .78rem; margin-top: .8rem; }