/* ============================================================================
   SquidLab dashboard: same professional cyan system as the marketing site.
   (style.css is loaded first and provides the design tokens.)
   ============================================================================ */

/* ---------- login ---------- */
#login-view { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { width: 100%; max-width: 410px; padding: 40px 36px; text-align: center;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--shadow), 0 0 60px -20px var(--accent-glow); }
.login-card .brand { justify-content: center; margin-bottom: 10px; font-size: 24px; }
.login-card .brand img { width: 42px; height: 42px; }
.login-card p.sub { color: var(--muted); margin-bottom: 28px; font-size: 14.5px; }
.field { text-align: left; margin-bottom: 16px; }
.field label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 7px; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 10px;
  padding: 12px 14px; color: var(--text); font-family: var(--font); font-size: 14.5px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(35,174,242,.15); }
.login-error { color: var(--red); font-size: 13.5px; margin-top: 12px; min-height: 18px; }
.login-card code { font-family: var(--mono); color: var(--accent-3); font-size: 13px; }

/* ---------- app shell ---------- */
#app-view { display: none; }
.topbar { border-bottom: 1px solid var(--border); background: rgba(6,11,16,.85); backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 40; }
.topbar .nav-inner { height: 70px; }
.topbar .right { display: flex; align-items: center; gap: 14px; }
.role-badge { font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .6px; }
.role-super { background: rgba(255,196,77,.13); color: var(--amber); border: 1px solid rgba(255,196,77,.3); }
.role-admin { background: rgba(35,174,242,.13); color: var(--accent-2); border: 1px solid rgba(35,174,242,.35); }
.role-staff { background: rgba(147,170,190,.13); color: var(--muted); border: 1px solid var(--border-2); }
.server-select select { background: var(--panel-2); border: 1px solid var(--border-2); color: var(--text); border-radius: 999px;
  padding: 8px 15px; font-size: 13px; font-family: var(--font); outline: none; cursor: pointer; transition: border-color .15s; }
.server-select select:focus, .server-select select:hover { border-color: var(--accent); }

.dash-main { padding: 28px 0 70px; display: grid; gap: 22px; }
.dash-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; }
.dash-row.even { grid-template-columns: 1fr 1fr; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); gap: 12px; }
.panel-head h3 { font-size: 16px; font-weight: 700; letter-spacing: -.2px; }
.panel-head .count { font-size: 12.5px; color: var(--dim); }
.panel-body { padding: 8px 0; max-height: 430px; overflow-y: auto; }

/* subtle glow on panel hover */
.dash-main .panel { transition: border-color .25s, box-shadow .3s; }
.dash-main .panel:hover { border-color: rgba(35,174,242,.28); box-shadow: 0 0 34px -14px var(--accent-glow); }

/* stat tiles */
/* stat tiles: one calm look for all four - white numbers, a single cyan
   tick as the only accent. The old violet/amber/red/green digits made the
   row look like a traffic light instead of a dashboard. */
.tiles { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.tile { padding: 20px 24px 18px; background: linear-gradient(180deg, var(--panel-2), var(--panel));
  transition: border-color .15s, transform .15s; }
.tile:hover { border-color: rgba(35,174,242,.35); transform: translateY(-1px); }
.tile::before { content: ''; display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--accent); opacity: .85; margin-bottom: 12px; }
.tile .k { font-size: 30px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1;
  color: var(--text); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tile .lbl { color: var(--dim); font-size: 11px; margin-top: 6px; text-transform: uppercase;
  letter-spacing: .9px; font-weight: 700; }
/* legacy color classes stay neutral on purpose */
.tile .k.green, .tile .k.violet, .tile .k.amber, .tile .k.red { color: var(--text); }

/* ---------- server status + TPS ring (donut) ---------- */
.status-row { display: grid; grid-template-columns: 300px 1fr; gap: 22px; }
.gauge-wrap { display: grid; place-items: center; padding: 22px 10px; }
.donut { width: 100%; max-width: 210px; filter: drop-shadow(0 0 18px rgba(35,174,242,.12)); }

.status-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-content: center; padding: 22px; }
.meta-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px;
  transition: border-color .2s, box-shadow .25s; }
.meta-card:hover { border-color: rgba(35,174,242,.3); box-shadow: 0 0 20px -8px var(--accent-glow); }
.meta-card .mlbl { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--dim); font-weight: 700; }
.meta-card .mval { font-size: 20px; font-weight: 700; margin-top: 6px; display: flex; align-items: center; gap: 9px; }
.meta-card .mval .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }
.meta-card .mval.mono { font-family: var(--mono); font-size: 16px; }
.meta-card small { color: var(--muted); font-size: 12px; }

/* all-servers view (super-admin / network admins): cards live in .net-cards rows */
.srv-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; cursor: pointer;
  transition: border-color .18s, transform .18s, box-shadow .25s; }
.srv-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 0 26px -8px var(--accent-glow); }
.srv-card .srv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.srv-card .srv-del { opacity: 0; transition: opacity .15s; flex-shrink: 0; }
.srv-card:hover .srv-del { opacity: 1; }
.srv-card .sname { font-weight: 700; font-size: 15px; letter-spacing: -.2px; }
.srv-card .sip { font-family: var(--mono); font-size: 11.5px; color: var(--dim); margin-top: 2px; }
.srv-card .srow { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; }
.srv-card .stps { font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
.srv-card .smeta { text-align: right; font-size: 12px; color: var(--muted); line-height: 1.5; }
.srv-card .sdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); margin-right: 5px; vertical-align: 1px; }
.srv-card .sdot.on { background: var(--accent-2); box-shadow: 0 0 7px var(--accent-2); }
/* brand rule: blue while healthy, red only when the TPS really tank */
.tps-good { color: var(--accent-2); } .tps-bad { color: var(--red); }
.srv-offline { opacity: .5; }

/* ---------- partner networks (grouped proxy view) ---------- */
#status-grid { padding: 20px 22px; display: grid; gap: 18px; }
.net-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 16px; }
.net-group { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px 16px;
  background: linear-gradient(180deg, rgba(35,174,242,.045), transparent 60%); display: grid; gap: 14px;
  transition: border-color .2s, box-shadow .25s; }
.net-group:hover { border-color: rgba(35,174,242,.35); box-shadow: 0 0 26px -12px var(--accent-glow); }
.net-head { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.net-head.plain { cursor: default; padding-top: 4px; }
.net-head .net-name { font-weight: 800; font-size: 15px; letter-spacing: -.2px; display: flex; align-items: center; gap: 9px; }
.net-head .net-name svg { width: 17px; height: 17px; color: var(--accent-2); }
.net-badge { font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: var(--accent-2); background: rgba(35,174,242,.12); border: 1px solid rgba(35,174,242,.3);
  padding: 3px 9px; border-radius: 999px; }
.net-head .net-meta { color: var(--muted); font-size: 12.5px; margin-left: auto; }
.net-head .net-actions { display: flex; gap: 6px; opacity: 0; transition: opacity .15s; }
.net-group:hover .net-actions, .net-head:hover .net-actions { opacity: 1; }
.tag-net { color: var(--accent-2); background: rgba(35,174,242,.12); }

/* network modal: sub-server picker */
.net-server-list { display: grid; gap: 8px; max-height: 260px; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 10px; padding: 10px; }
/* .net-server-list prefix beats the generic ".field label" block rule */
.net-server-list .net-pick { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  margin: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer;
  transition: border-color .12s, background .12s; font-size: 13.5px; color: var(--text); font-weight: 400; }
.net-server-list .net-pick:hover { border-color: var(--accent); background: rgba(35,174,242,.05); }
.net-server-list .net-pick.locked { opacity: .45; cursor: not-allowed; }
.net-server-list .net-pick input { width: 15px; height: 15px; accent-color: var(--accent); }
.net-server-list .np-name { font-weight: 600; }
.net-server-list .np-ip { font-family: var(--mono); font-size: 11px; color: var(--dim); text-align: right; }

/* chart */
.range-tabs { display: flex; gap: 4px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 4px; }
.range-tabs button { background: none; border: none; color: var(--muted); padding: 6px 13px; border-radius: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: var(--font); transition: color .15s, background .15s; }
.range-tabs button:hover { color: var(--text); }
.range-tabs button.active { background: var(--panel-3); color: var(--accent-2); }
.chart-wrap { padding: 20px 22px; height: 300px; position: relative; }
/* a failed chart request used to look exactly like "no detections" - say it */
.chart-msg { position: absolute; inset: 0; display: none; place-items: center; text-align: center;
  padding: 24px; font-size: 13.5px; color: var(--red); background: rgba(14,23,32,.82); border-radius: 12px; }
.chart-msg.show { display: grid; }

/* tables */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--dim); padding: 8px 22px; font-weight: 700; }
.tbl td { padding: 11px 22px; border-top: 1px solid var(--border); font-size: 14px; vertical-align: middle; }
.tbl tr:hover td { background: rgba(35,174,242,.04); }
.pname { font-weight: 600; display: flex; align-items: center; gap: 9px; }
.pname img { width: 24px; height: 24px; border-radius: 5px; }
.vl-badge { font-weight: 700; font-size: 12.5px; padding: 3px 9px; border-radius: 6px; font-family: var(--mono); }
.vl-low { background: rgba(147,170,190,.15); color: var(--muted); }
.vl-mid { background: rgba(255,196,77,.15); color: var(--amber); }
.vl-high { background: rgba(255,93,117,.15); color: var(--red); }
.tag { font-size: 11px; color: var(--accent-2); background: rgba(35,174,242,.1); padding: 2px 8px; border-radius: 5px; }
.tag-server { color: var(--green); background: rgba(47,214,146,.1); }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.icon-btn { background: var(--panel-2); border: 1px solid var(--border-2); color: var(--muted); border-radius: 8px; width: 30px; height: 30px;
  display: grid; place-items: center; cursor: pointer; transition: all .12s; }
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover { color: var(--text); border-color: var(--accent); box-shadow: 0 0 12px -4px var(--accent-glow); }
.icon-btn.danger:hover { color: var(--red); border-color: var(--red); box-shadow: 0 0 12px -4px rgba(255,93,117,.4); }
.empty { text-align: center; color: var(--dim); padding: 40px 20px; font-size: 14px; }

/* alerts feed */
.feed-item { padding: 11px 22px; border-top: 1px solid var(--border); font-size: 13.5px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.feed-item .t { color: var(--dim); font-size: 12px; white-space: nowrap; }

/* checks grid */
.checks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 10px; padding: 20px 22px; }
.checks-grid .empty { grid-column: 1 / -1; }
.check-item { display: flex; align-items: center; justify-content: space-between; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 9px; padding: 10px 14px; font-size: 13.5px; transition: border-color .15s; }
.check-item:hover { border-color: var(--border-2); }
.check-item.readonly { opacity: .75; }
/* check badges (e.g. EXPERIMENTAL on the XRay checks) */
.check-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .6px; padding: 2px 6px; border-radius: 5px;
  vertical-align: 1px; cursor: help; }
.check-tag.experimental { color: var(--amber); background: rgba(255,196,77,.14); border: 1px solid rgba(255,196,77,.35); }
.switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background: var(--border-2); border-radius: 999px; cursor: pointer; transition: .2s; }
.slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + .slider { background: var(--accent); box-shadow: 0 0 10px -2px var(--accent-glow); }
.switch input:checked + .slider::before { transform: translateX(18px); }
.switch input:disabled + .slider { cursor: not-allowed; opacity: .6; }

/* modal + toast */
.overlay { position: fixed; inset: 0; background: rgba(2,6,10,.7); display: none; place-items: center; z-index: 100; padding: 20px; backdrop-filter: blur(3px); }
.overlay.show { display: grid; }
.modal { width: 100%; max-width: 470px; padding: 30px; background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--shadow), 0 0 60px -18px var(--accent-glow); animation: modal-in .22s ease; }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.modal h3 { font-size: 21px; margin-bottom: 8px; font-weight: 800; letter-spacing: -.4px; }
.modal p { color: var(--muted); font-size: 14.5px; margin-bottom: 18px; }
.modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }
.radio-row { display: flex; gap: 10px; margin-bottom: 12px; }
.radio-card { flex: 1; border: 1px solid var(--border-2); border-radius: 12px; padding: 14px; cursor: pointer; font-size: 13.5px; transition: border-color .12s, background .12s, box-shadow .2s; }
.radio-card b { font-weight: 700; }
.radio-card.active { border-color: var(--accent); background: rgba(35,174,242,.07); box-shadow: 0 0 18px -8px var(--accent-glow); }
#toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(90px); background: var(--panel-3);
  border: 1px solid var(--border-2); color: var(--text); padding: 13px 24px; border-radius: 12px; font-size: 14px; z-index: 120;
  transition: transform .25s; box-shadow: var(--shadow); }
#toast.show { transform: translateX(-50%) translateY(0); }
#toast.ok { border-color: var(--green); } #toast.err { border-color: var(--red); }

/* ---------- detections panel: stat column + multi series chart ---------- */
.detect-row { display: grid; grid-template-columns: 190px 1fr; gap: 18px; padding: 18px 22px 8px; }
.detect-stats { display: flex; flex-direction: column; gap: 12px; }
.detect-stat { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
  background: var(--panel-2); border-left: 3px solid var(--accent-2); }
.detect-stat.mit { border-left-color: var(--green); }
.detect-stat.cloud { border-left-color: var(--border-2); }
.detect-stat .lbl { font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--dim); }
.detect-stat .k { font-size: 30px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
.detect-stat .sub { font-size: 11.5px; color: var(--dim); }
@media (max-width: 900px) {
  .detect-row { grid-template-columns: 1fr; }
  .detect-stats { flex-direction: row; }
  .detect-stat { flex: 1; }
}

/* legal links: permanently reachable as required, visually a footnote */
.login-legal { margin-top: 18px; font-size: 12px; color: var(--dim); text-align: center; }
.login-legal a { color: var(--dim); text-decoration: none; }
.login-legal a:hover { color: var(--muted); text-decoration: underline; }
.app-legal { padding: 26px 0 20px; text-align: center; font-size: 12px; color: var(--dim); }
.app-legal a { color: var(--dim); text-decoration: none; }
.app-legal a:hover { color: var(--muted); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .modal { animation: none; }
}

@media (max-width: 900px) {
  .dash-row, .dash-row.even { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2,1fr); }
  .status-row { grid-template-columns: 1fr; }
  .nav-links { display: none; }
}

/* ---------------- check settings ----------------
   The danger colour is the only opinionated thing in here. Every limit in
   SquidLab was measured, and dragging one down to where honest players sit is
   the quickest way to make it flag somebody innocent. Red is not decoration:
   it marks the value where our own recordings say that starts. */
.check-item.inop { border-color: rgba(255,92,92,.45); background: rgba(255,92,92,.05); }
.check-tag.inop { color: #ff5c5c; background: rgba(255,92,92,.14); border: 1px solid rgba(255,92,92,.45); }