/* ============================================================
   WORKSPACE SHELL — persistent sidebar wrapping every authenticated
   page (Career Workspace, Interview Setup, Live Interview, Reports).
   ============================================================ */
:root {
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.shell {
  display: flex;
  min-height: 100vh;
}

.shell-nav {
  width: 240px;
  flex-shrink: 0;
  background: var(--slate);
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.shell-nav .brand-logo { padding: 4px 8px 20px; }

.shell-profile { text-align: center; padding: 8px 8px 16px; }
.shell-profile-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--card-hover);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: var(--bright);
  margin: 0 auto 10px;
}
.shell-profile-name { font-size: 14px; font-weight: 700; color: var(--white); }

.shell-package-pill {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px;
  padding: 3px 10px;
  font-size: 11.5px; font-weight: 600;
  border-radius: 999px; border: 1px solid transparent;
}
.pill-explorer   { color: var(--muted); background: rgba(148,163,184,0.12); border-color: rgba(148,163,184,0.25); }
.pill-growth     { color: #34D399; background: rgba(5,150,105,0.16); border-color: rgba(16,185,129,0.35); }
.pill-leadership { color: #A78BFA; background: rgba(109,40,217,0.18); border-color: rgba(109,40,217,0.35); }
.pill-founder    { color: #F2C94C; background: rgba(242,201,76,0.14); border-color: rgba(242,201,76,0.3); }

/* AI Minutes badge -- sits directly under the package pill, centered by
   the same .shell-profile text-align:center. Plain text (not a pill) so
   it doesn't visually compete with the package badge above it. Icon
   color (#FBBF24) matches the bolt icon on the AI Interview Minutes card
   exactly -- same SVG icon, same amber, just used in two places. */
.shell-minutes-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px;
  font-size: 11.5px; font-weight: 500; color: var(--dim);
}
.shell-minutes-badge-icon { display: inline-flex; color: #FBBF24; flex-shrink: 0; }

.shell-preparing {
  padding: 0 8px 20px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 18px;
}
.shell-preparing-label { font-size: 11.5px; color: var(--dim); margin-bottom: 6px; }
.shell-preparing-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--bright);
  text-decoration: none;
}

.shell-links { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.shell-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #B8C1D1;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.shell-link:hover { background: rgba(255,255,255,0.04); color: var(--white); }
.shell-link.active {
  background: rgba(59,130,246,0.12);
  color: var(--bright);
  font-weight: 600;
}
.shell-link .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }

.shell-footer {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 16px;
}
.shell-logout { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); text-decoration: none; }
.shell-logout:hover { color: var(--muted); }

.workspace-content {
  flex: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px 40px 60px;
  width: 100%;
}

@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .shell-nav {
    width: 100%; height: auto; position: static;
    flex-direction: row; align-items: center; padding: 12px 16px;
    overflow-x: auto;
  }
  .shell-nav .brand-logo { padding: 4px 12px 4px 0; }
  .shell-links { flex-direction: row; }
  .shell-footer { display: none; }
  .workspace-content { padding: 24px 16px 60px; }
}

/* ============================================================
   CAREER WORKSPACE — SIDEBAR INTERACTION STATES ONLY
   ------------------------------------------------------------
   Scoped under body.career-workspace. Exactly the three
   already-approved rules, verbatim values — nothing else in the
   sidebar changes. .shell-nav surface, .shell-profile-avatar,
   .shell-profile-name, .shell-minutes-badge, .shell-preparing,
   .shell-footer, .shell-logout, all .pill-* remain completely
   untouched, still navy, per instruction. Base rules above this
   block are untouched; every other page sharing this file is
   unaffected.
   ============================================================ */

body.career-workspace .shell-link:hover {
  background: rgba(124, 58, 237, 0.12);
}
body.career-workspace .shell-link.active {
  background: rgba(124, 58, 237, 0.18);
  color: #C4B5FD;
}
body.career-workspace .shell-link:focus-visible {
  outline: 2px solid #A78BFA;
  outline-offset: 2px;
}