/* Phalanx Overwatch console.
   Same palette as the marketing site so the product a client is sold and the
   product they sign into are visibly one thing: obsidian, one bronze accent,
   square corners, Archivo. */
:root{
  --obsidian:#0A0B0D; --surface:#101216; --surface-high:#171A20;
  --hairline:rgba(201,135,63,.16); --hairline-soft:rgba(236,234,230,.09);
  --bronze:#C9873F; --bronze-bright:#E8A455;
  --ink:#ECEAE6; --ink-dim:#9BA0A8; --ink-faint:#868C95;
  --crit:#E0674F; --high:#D89A3C; --med:#7E8BA3; --ok:#4FA07A;
  --rail:250px;
  --font:"Archivo","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--obsidian);color:var(--ink);font-family:var(--font);
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--bronze);text-decoration:none}
h1,h2,h3{margin:0;letter-spacing:-.02em;font-weight:800}
.muted{color:var(--ink-dim)}
.mono{font-family:var(--mono)}

/* ---------- gates ---------- */
.gate{position:fixed;inset:0;display:grid;place-items:center;background:var(--obsidian);z-index:50;padding:1.5rem}
.gate__card{width:min(380px,100%);background:var(--surface);border:1px solid var(--hairline-soft);
  border-top:2px solid var(--bronze);padding:2rem;display:grid;gap:1rem}
.gate__brand{display:flex;align-items:center;gap:.7rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.4rem}
.gate__brand b{color:var(--bronze)}
.gate label{display:grid;gap:.35rem;font-size:.82rem;color:var(--ink-dim)}
.gate input{background:var(--obsidian);border:1px solid var(--hairline-soft);color:var(--ink);
  padding:.6rem .7rem;font:inherit;border-radius:0}
.gate input:focus{outline:2px solid var(--bronze-bright);outline-offset:1px;border-color:transparent}
.gate__err{color:var(--crit);font-size:.85rem;margin:0;min-height:1.1em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.55rem 1rem;font:700 .84rem/1 var(--font);border:1px solid transparent;
  border-radius:0;cursor:pointer;white-space:nowrap;
  transition:background .2s,border-color .2s,color .2s,transform .15s}
.btn--primary{background:var(--bronze);color:#14100A}
.btn--primary:hover{background:var(--bronze-bright)}
.btn--ghost{border-color:var(--hairline);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--bronze);color:var(--bronze)}
.btn--sm{padding:.4rem .7rem;font-size:.78rem}
.btn--danger{border-color:rgba(224,103,79,.5);color:var(--crit);background:transparent}
.btn--danger:hover{background:rgba(224,103,79,.12)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- shell ---------- */
#shell{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh}
.rail{background:var(--surface);border-right:1px solid var(--hairline-soft);
  display:flex;flex-direction:column;padding:1.2rem .9rem;gap:1.2rem;position:sticky;top:0;height:100vh}
.rail__brand{display:flex;gap:.6rem;align-items:center;font-size:.72rem;letter-spacing:.06em;line-height:1.25}
.rail__brand b{color:var(--bronze)}
#nav{display:grid;gap:2px;overflow:auto}
#nav button{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  background:none;border:0;border-left:2px solid transparent;color:var(--ink-dim);
  font:600 .86rem/1 var(--font);padding:.6rem .7rem;text-align:left;cursor:pointer;width:100%}
#nav button:hover{color:var(--ink);background:rgba(255,255,255,.03)}
#nav button[aria-current="true"]{color:var(--ink);border-left-color:var(--bronze);background:rgba(201,135,63,.09)}
#nav .n{font:500 .72rem/1 var(--mono);color:var(--ink-faint)}
#nav button[aria-current="true"] .n{color:var(--bronze)}
.rail__foot{margin-top:auto;display:grid;gap:.6rem}
#orgPick{background:var(--obsidian);border:1px solid var(--hairline-soft);color:var(--ink);
  padding:.45rem;font:inherit;font-size:.8rem;border-radius:0;width:100%}
.who{font-size:.78rem;line-height:1.3}
.who small{display:block;color:var(--ink-faint);font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em}

.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.6rem;
  border-bottom:1px solid var(--hairline-soft);position:sticky;top:0;background:rgba(10,11,13,.9);
  backdrop-filter:blur(10px);z-index:5}
.top h1{font-size:1.15rem}
.top__actions{margin-left:auto;display:flex;gap:.5rem;align-items:center}
.view{padding:1.6rem;display:grid;gap:1.4rem;align-content:start}

/* ---------- pieces ---------- */
.pill{font:500 .68rem/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;
  padding:.32rem .5rem;border:1px solid var(--hairline);color:var(--bronze)}
.pill--sim{color:var(--ink-faint);border-color:var(--hairline-soft)}

.grid{display:grid;gap:1px;background:var(--hairline-soft);border:1px solid var(--hairline-soft)}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.tile{background:var(--obsidian);padding:1.1rem 1.2rem}
.tile__k{font:500 .68rem/1 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint)}
.tile__v{font-weight:800;font-size:1.9rem;letter-spacing:-.03em;margin-top:.5rem;line-height:1}
.tile__s{color:var(--ink-dim);font-size:.8rem;margin-top:.35rem}
.tile--click{cursor:pointer}
.tile--click:hover{background:var(--surface)}

.panel{background:var(--surface);border:1px solid var(--hairline-soft);border-top:2px solid var(--bronze)}
.panel__h{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--hairline-soft)}
.panel__h h2{font-size:.95rem}
.panel__h .btn{margin-left:auto}
.panel__b{padding:1.1rem}

table{width:100%;border-collapse:collapse;font-size:.85rem}
th{text-align:left;font:500 .68rem/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-faint);padding:.6rem 1.1rem;border-bottom:1px solid var(--hairline-soft)}
td{padding:.7rem 1.1rem;border-bottom:1px solid rgba(236,234,230,.05);vertical-align:top}
tr.clickable{cursor:pointer}
tr.clickable:hover td{background:rgba(255,255,255,.03)}
.wrap{overflow-x:auto}

.sev{font:700 .68rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;
  padding:.3rem .45rem;border:1px solid currentColor;white-space:nowrap}
.sev--critical{color:var(--crit)} .sev--high{color:var(--high)}
.sev--medium{color:var(--med)} .sev--info,.sev--low{color:var(--ink-faint)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:.45rem}
.dot--online{background:var(--ok)} .dot--stale{background:var(--crit)} .dot--unknown{background:var(--ink-faint)}

.empty{padding:2.4rem 1.2rem;text-align:center;color:var(--ink-dim)}
.empty b{display:block;color:var(--ink);font-size:1rem;margin-bottom:.4rem}

.bar{height:6px;background:rgba(236,234,230,.08);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--bronze)}

.kv{display:grid;grid-template-columns:11rem 1fr;gap:.5rem 1rem;font-size:.85rem}
.kv dt{color:var(--ink-faint);font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.kv dd{margin:0}

.modal{position:fixed;inset:0;background:rgba(6,7,9,.78);display:grid;place-items:center;z-index:40;padding:1.5rem}
.modal__card{background:var(--surface);border:1px solid var(--hairline);border-top:2px solid var(--bronze);
  width:min(720px,100%);max-height:86vh;overflow:auto}
.modal__h{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid var(--hairline-soft)}
.modal__h h2{font-size:1rem}
.modal__h .btn{margin-left:auto}
.modal__b{padding:1.2rem;display:grid;gap:1rem}
pre.body{background:var(--obsidian);border:1px solid var(--hairline-soft);padding:1rem;
  white-space:pre-wrap;word-break:break-word;font-family:var(--mono);font-size:.8rem;margin:0;max-height:40vh;overflow:auto}
.warn{border-left:2px solid var(--high);padding-left:.8rem;color:var(--high);font-size:.85rem}

.toast{position:fixed;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:60;
  background:var(--surface-high);border:1px solid var(--hairline);border-left:2px solid var(--bronze);
  padding:.7rem 1.1rem;font-size:.85rem;max-width:min(560px,92vw)}
.toast--bad{border-left-color:var(--crit)}

form.row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:end}
form.row label{display:grid;gap:.3rem;font-size:.75rem;color:var(--ink-faint);
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em}
form.row input,form.row select{background:var(--obsidian);border:1px solid var(--hairline-soft);
  color:var(--ink);padding:.5rem .6rem;font:inherit;font-size:.85rem;border-radius:0;min-width:12rem}

@media (max-width:900px){
  #shell{grid-template-columns:1fr}
  .rail{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center}
  #nav{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;flex:1 1 100%}
  #nav button{border-left:0;border-bottom:2px solid transparent;white-space:nowrap}
  #nav button[aria-current="true"]{border-left:0;border-bottom-color:var(--bronze)}
  .rail__foot{margin:0;grid-auto-flow:column;align-items:center}
  .view{padding:1rem}
  .kv{grid-template-columns:1fr}
}