/* Ops Bastion console styles.
   Tokens are lifted verbatim from brand/wordmark.html —
   do not introduce new colors without updating that file first. */

:root{
  --bg:#12151b;
  --panel:#1a1e26;
  --panel-2:#20242e;
  --ink:#eef0f3;
  --ink-dim:#8d94a1;
  --hairline:#2a2f3a;
  --light-bg:#f4f2ec;
  --light-ink:#20232b;

  --ob-accent:#e8542f;
  --ob-wall:#aeb4bf;
  --ob-radius:2px;

  /* Status ramp — ok ties back to the parent Uptime Collective accent. */
  --status-ok:#33b6ab;
  --status-warn:#d9a441;
  --status-crit:var(--ob-accent);
  --status-unknown:var(--ink-dim);

  --topnav-h:56px;
  --rail-w:220px;
  --rail-w-collapsed:56px;
  --incident-w:280px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  line-height:1.5;
  font-size:13.5px;
}
a{ color:inherit; }
button{ font-family:inherit; }

.mono{ font-family:'IBM Plex Mono', monospace; }
.eyebrow{
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-dim);
}

/* ---------- shell ---------- */
.shell{
  display:grid;
  grid-template-rows:var(--topnav-h) 1fr;
  height:100vh;
}

.topnav{
  display:flex;
  align-items:center;
  gap:24px;
  padding-inline:16px;
  background:var(--panel);
  border-bottom:1px solid var(--hairline);
}
.topnav .brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
}
.topnav .brand svg{ width:26px; height:26px; }
.topnav .brand .wordmark{
  font-family:'Oswald',sans-serif;
  font-weight:700;
  text-transform:uppercase;
  font-size:14px;
  line-height:1;
}
.topnav .brand .wordmark .kicker{
  display:block;
  font-size:0.6em;
  letter-spacing:0.28em;
  color:var(--ob-accent);
  margin-bottom:2px;
}
.topnav .rail-toggle{
  background:none;
  border:1px solid var(--hairline);
  color:var(--ink-dim);
  border-radius:var(--ob-radius);
  width:28px; height:28px;
  cursor:pointer;
  flex:none;
}
.topnav .rail-toggle:hover{ color:var(--ink); border-color:var(--ob-wall); }

.topnav-links{
  display:flex;
  gap:4px;
  flex:1;
}
.topnav-links a{
  padding:8px 12px;
  border-radius:var(--ob-radius);
  text-decoration:none;
  color:var(--ink-dim);
  font-family:'Oswald',sans-serif;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-size:12px;
}
.topnav-links a:hover{ color:var(--ink); background:var(--panel-2); }
.topnav-links a.active{ color:var(--ink); background:var(--panel-2); border-bottom:2px solid var(--ob-accent); }

.topnav-user{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
}
.topnav-user .persona{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  line-height:1.2;
}
.topnav-user .persona .name{ font-size:12px; color:var(--ink); }
.topnav-user .persona .role{ font-size:10px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.08em; }
.topnav-user .avatar{
  width:28px; height:28px;
  border-radius:var(--ob-radius);
  background:var(--panel-2);
  border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12px; color:var(--ob-wall);
}
.topnav-user form{ display:inline; }
.topnav-user button.logout{
  background:none; border:1px solid var(--hairline); color:var(--ink-dim);
  border-radius:var(--ob-radius); padding:6px 10px; font-size:11px; cursor:pointer;
}
.topnav-user button.logout:hover{ color:var(--ink); border-color:var(--ob-wall); }

/* ---------- body grid: rail / main / incident pane ---------- */
.body-grid{
  display:grid;
  grid-template-columns:var(--rail-w) 1fr var(--incident-w);
  min-height:0;
}
.body-grid.rail-collapsed{ grid-template-columns:var(--rail-w-collapsed) 1fr var(--incident-w); }
.body-grid.pane-dismissed{ grid-template-columns:var(--rail-w) 1fr 0; }
.body-grid.rail-collapsed.pane-dismissed{ grid-template-columns:var(--rail-w-collapsed) 1fr 0; }

@media (max-width:900px){
  .body-grid, .body-grid.rail-collapsed, .body-grid.pane-dismissed, .body-grid.rail-collapsed.pane-dismissed{
    grid-template-columns:var(--rail-w-collapsed) 1fr 0;
  }
}

/* ---------- left rail ---------- */
.rail{
  background:var(--panel);
  border-right:1px solid var(--hairline);
  overflow-y:auto;
  padding-block:12px;
}
.rail-section{ margin-bottom:18px; }
.rail-label{
  padding:4px 16px;
  font-size:9.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.rail a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 16px;
  text-decoration:none;
  color:var(--ink-dim);
  font-size:12.5px;
  border-left:2px solid transparent;
  white-space:nowrap;
  overflow:hidden;
}
.rail a:hover{ color:var(--ink); background:var(--panel-2); }
.rail a.active{ color:var(--ink); border-left-color:var(--ob-accent); background:var(--panel-2); }
.rail a .rail-icon{ flex:none; width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; color:var(--ob-wall); }
.rail a .rail-text{ overflow:hidden; text-overflow:ellipsis; }

.body-grid.rail-collapsed .rail .rail-text,
.body-grid.rail-collapsed .rail .rail-label{ display:none; }
.body-grid.rail-collapsed .rail a{ justify-content:center; padding-inline:0; }

/* ---------- powered-by badge (Uptime Collective) ---------- */
.rail{ display:flex; flex-direction:column; }
.rail-foot{ margin-top:auto; padding:0 12px; }
.powered-by{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border:1px solid var(--hairline); border-radius:var(--ob-radius);
  font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-dim);
  text-decoration:none; line-height:1.4;
}
.powered-by:hover{ color:var(--ink); border-color:var(--ob-wall); }
.powered-by b{ color:var(--ink); font-weight:500; }
.powered-by-mark{ width:8px; height:8px; background:var(--status-ok); flex:none; }
/* Inside the rail, override the generic .rail a link styling. */
.rail a.powered-by{
  border-left:1px solid var(--hairline); padding:6px 8px; white-space:normal; overflow:visible;
}
.rail a.powered-by:hover{ background:var(--panel-2); }
.body-grid.rail-collapsed .rail a.powered-by{ justify-content:center; padding:6px 0; border-left-color:var(--hairline); }
.body-grid.rail-collapsed .rail .powered-by-text{ display:none; }
.login-wrap .powered-by{ font-size:10px; }

/* ---------- main content ---------- */
.main{
  overflow-y:auto;
  padding:20px 24px 40px;
  min-width:0;
}
.page-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.page-header h1{
  font-family:'Oswald',sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.02em;
  font-size:18px;
  margin:0;
}
.page-header .sub{ color:var(--ink-dim); font-size:12px; }

.mock-banner{
  display:flex;
  align-items:center;
  gap:10px;
  background:#2b2210;
  border:1px solid #5c4a1a;
  color:#e6c878;
  padding:8px 14px;
  border-radius:var(--ob-radius);
  font-size:11.5px;
  margin-bottom:16px;
}
.mock-banner b{ color:#f4dc9a; }

/* ---------- tile grid ---------- */
.tile-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}
@media (max-width:1100px){ .tile-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .tile-grid{ grid-template-columns:1fr; } }

.tile{
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:var(--ob-radius);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:110px;
  position:relative;
}
.tile[data-span="2"]{ grid-column:span 2; }
@media (max-width:560px){ .tile[data-span="2"]{ grid-column:span 1; } }

.tile-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.tile-title{
  font-size:10.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.tile-remove{
  background:none; border:none; color:var(--ink-dim);
  cursor:pointer; font-size:13px; line-height:1; padding:2px 4px;
}
.tile-remove:hover{ color:var(--status-crit); }

.tile-stat{ font-size:28px; font-weight:600; }
.tile-stat.no-data, .tile-body-empty{ color:var(--ink-dim); font-size:13px; }

.tile-sparkline{ flex:1; display:flex; align-items:flex-end; }
.tile-sparkline svg{ width:100%; height:48px; display:block; }

.tile-link a{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--ink); text-decoration:none; font-size:13px;
}
.tile-link a:hover{ color:var(--ob-accent); }

.status-dot{ width:9px; height:9px; border-radius:50%; flex:none; display:inline-block; }
.status-dot.ok{ background:var(--status-ok); }
.status-dot.warn{ background:var(--status-warn); }
.status-dot.crit{ background:var(--status-crit); }
.status-dot.unknown{ background:var(--status-unknown); }

.client-status{ display:flex; align-items:center; gap:8px; font-size:13px; }
.incident-count-value{ font-size:28px; font-weight:600; }
.incident-count-value.crit{ color:var(--status-crit); }
.incident-count-value.warn{ color:var(--status-warn); }
.incident-count-value.zero{ color:var(--status-ok); }

.add-tile{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--hairline);
}
.add-tile select, .add-tile button{
  background:var(--panel-2); color:var(--ink); border:1px solid var(--hairline);
  border-radius:var(--ob-radius); padding:6px 10px; font-size:12px; font-family:inherit;
}
.add-tile button{ cursor:pointer; }
.add-tile button:hover{ border-color:var(--ob-wall); }

/* ---------- incident pane ---------- */
.incident-pane{
  background:var(--panel);
  border-left:1px solid var(--hairline);
  overflow-y:auto;
  overflow-x:hidden;
}
.body-grid.pane-dismissed .incident-pane{ display:none; }

.incident-pane-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--hairline);
}
.incident-pane-head h2{
  font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:11.5px; letter-spacing:0.1em; margin:0; color:var(--ink-dim);
}
.pane-dismiss{ background:none; border:none; color:var(--ink-dim); cursor:pointer; font-size:14px; }
.pane-dismiss:hover{ color:var(--ink); }

.incident-list{ list-style:none; margin:0; padding:8px; display:flex; flex-direction:column; gap:6px; }
.incident-item{
  display:flex; flex-direction:column; gap:4px;
  background:var(--panel-2); border-left:2px solid var(--hairline);
  border-radius:var(--ob-radius); padding:8px 10px; font-size:11.5px;
  text-decoration:none; color:var(--ink);
}
.incident-item.crit{ border-left-color:var(--status-crit); }
.incident-item.warn{ border-left-color:var(--status-warn); }
.incident-item.unknown{ border-left-color:var(--status-unknown); }
.incident-item .row1{ display:flex; align-items:center; gap:6px; color:var(--ink-dim); font-size:10px; text-transform:uppercase; letter-spacing:0.05em; }
.incident-item .title{ font-size:12px; }
.incident-item .meta{ color:var(--ink-dim); font-size:10.5px; }
.incident-empty{ padding:20px 16px; color:var(--ink-dim); font-size:12px; text-align:center; }
.incident-pane-foot{ padding:10px 16px; color:var(--ink-dim); font-size:10px; text-align:center; border-top:1px solid var(--hairline); }

/* ---------- tables (clients / integrations) ---------- */
table.ob-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
table.ob-table th{
  text-align:left; font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-dim); border-bottom:1px solid var(--hairline); padding:8px 10px;
}
table.ob-table td{ padding:9px 10px; border-bottom:1px solid var(--hairline); }
table.ob-table tr:hover td{ background:var(--panel-2); }

.phase-pill{
  display:inline-block; padding:2px 8px; border-radius:var(--ob-radius);
  font-size:10px; text-transform:uppercase; letter-spacing:0.05em;
  border:1px solid var(--hairline); color:var(--ink-dim);
}
.phase-pill.live{ color:var(--status-ok); border-color:var(--status-ok); }
.phase-pill.in_progress{ color:var(--status-warn); border-color:var(--status-warn); }
.phase-pill.planned{ color:var(--ink-dim); }

.overflow-x{ overflow-x:auto; }

/* ---------- login ---------- */
.login-wrap{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:var(--bg); padding:24px;
}
.login-card{
  width:100%; max-width:380px; background:var(--panel);
  border:1px solid var(--hairline); border-radius:var(--ob-radius);
  padding:32px 28px;
}
.login-card .brand{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.login-card .brand svg{ width:36px; height:36px; }
.login-card .brand .wordmark{
  font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; font-size:18px;
}
.login-card .brand .wordmark .kicker{ display:block; font-size:0.5em; letter-spacing:0.28em; color:var(--ob-accent); }

.persona-list{ display:flex; flex-direction:column; gap:8px; margin:18px 0; }
.persona-btn{
  display:flex; align-items:center; gap:12px; width:100%;
  background:var(--panel-2); border:1px solid var(--hairline); border-radius:var(--ob-radius);
  padding:10px 12px; color:var(--ink); cursor:pointer; font-family:inherit; font-size:13px; text-align:left;
}
.persona-btn:hover{ border-color:var(--ob-wall); }
.persona-btn .avatar{
  width:30px; height:30px; border-radius:var(--ob-radius); background:var(--bg);
  display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--ob-wall); flex:none;
}
.persona-btn .name{ font-size:13px; }
.persona-btn .role{ font-size:10.5px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.06em; }

.login-footer{ margin-top:18px; font-size:10.5px; color:var(--ink-dim); text-align:center; }

/* ---------- misc ---------- */
.card{
  background:var(--panel); border:1px solid var(--hairline); border-radius:var(--ob-radius);
  padding:16px; margin-bottom:16px;
}
.placeholder-note{
  border:1px dashed var(--hairline); border-radius:var(--ob-radius);
  padding:14px; color:var(--ink-dim); font-size:12px;
}