/* ZED shell — the one header the apps sit under. Tokens are the LIVE Nocturne
   Glass values from zed-crm/public/styles.css so the header matches what the
   frames show; the bundle's design-time defaults were not used on purpose. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/InterVariable.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/Manrope-200-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg:         #0b0f17;
  --surface:    #111827;
  --surface-2:  #172136;
  --border:     #243146;
  --border-lit: #35476b;
  --text:       #e6ebf4;
  --text-dim:   #93a1b8;
  --text-mute:  #6b7a94;

  /* Azure Pulse by default; shell.js swaps these for Zednex (violet) or MedEx
     (teal) when the signed-in chat instance says so — the same per-company
     trick Payroll's nav.ejs already does. */
  --accent:       #2f7df6;
  --accent-hover: #4da2ff;
  --accent-soft:  rgba(47,125,246,.14);
  --accent-ring:  rgba(47,125,246,.45);
  --accent-tint:  #9dc1ff;

  --topbar-h: 48px;
  --radius:   10px;
  --radius-lg:14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ── header ──────────────────────────────────────────────────────────────── */
.topbar {
  position: fixed; inset: 0 0 auto 0; height: var(--topbar-h); z-index: 10;
  display: flex; align-items: center; gap: 18px;
  padding: 0 16px 0 18px;
  background: rgba(17,24,39,.78);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 120px; white-space: nowrap; }
.brand-logo { width: 26px; height: 26px; flex: none; display: block; }
.wordmark {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-weight: 800; font-size: 15px; letter-spacing: .06em;
  background: linear-gradient(90deg, #cfd8e6 0%, var(--accent-hover) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.tabs { display: flex; align-items: center; gap: 8px; margin-right: auto; }
.tab {
  appearance: none; border: 0; cursor: pointer;
  padding: 7px 16px; border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .01em;
  color: var(--text-dim); background: transparent;
  box-shadow: inset 0 0 0 1px transparent;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.tab:hover { color: var(--text); background: rgba(255,255,255,.045); }
.tab:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.tab[aria-selected="true"] {
  color: var(--text);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-ring);
}
.tab[hidden] { display: none; }

.who { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.who[hidden] { display: none; }
.who-name { font-size: 13px; font-weight: 600; color: var(--text); }
.who-role { font-size: 12px; color: var(--text-mute); text-transform: capitalize; }
.badge {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--accent-tint); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-ring);
}

.signout { margin: 0; }
.signout[hidden] { display: none; }
.btn-ghost {
  appearance: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; color: var(--text-dim);
  background: transparent; border: 1px solid var(--border);
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.btn-ghost:hover { color: var(--text); border-color: var(--border-lit); background: rgba(255,255,255,.04); }
.btn-ghost:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }

/* ── frames ──────────────────────────────────────────────────────────────── */
.frames { position: fixed; inset: var(--topbar-h) 0 0 0; background: var(--bg); }
.frame { width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }
.frame[hidden] { display: none; }

.nojs {
  position: fixed; inset: var(--topbar-h) 0 0 0; display: grid; place-items: center;
  color: var(--text-dim); background: var(--bg);
}

@media (max-width: 720px) {
  .topbar { gap: 10px; padding: 0 10px 0 12px; }
  .brand { min-width: 0; }
  .tab { padding: 7px 12px; }
  .who-name, .who-role { display: none; }
}