/* ============================================================
   Career Move (public) — Stage 2 navy/purple shell
   ------------------------------------------------------------
   1. Remaps the public app's CSS variables to the navy/purple
      Command Center palette (dark + light themes).
   2. Adds the persistent sidebar + slim topbar shell.
   The public app's own styles.css must load BEFORE this file.
   ============================================================ */

/* ---------- 1. Palette remap (dark) ---------- */
:root{
  color-scheme:dark;
  --bg:#0a0f2e;
  --glow:#2b1f66;
  --header:#0c1233e8;
  --panel:#131a44;
  --panel2:#1a2260;
  --column:#0e1438;
  --empty:#141b4e;
  --line:#2c3778;
  --dash:#4a56a0;
  --text:#f2f4ff;
  --muted:#a6b0da;
  --lime:#a78bfa;          /* accent: violet */
  --score:#2b2358;
  --shell1:#0b1030;
  --shell2:#221659;
  --accent:#8b5cf6;
  --accent2:#6366f1;
}

/* ---------- 1b. Palette remap (light) ---------- */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f2ff;
  --glow:#ddd0ff;
  --header:#faf9fff0;
  --panel:#ffffff;
  --panel2:#f3f0ff;
  --column:#ece8fb;
  --empty:#e9e4fb;
  --line:#cfc6ee;
  --dash:#a89bd4;
  --text:#1c1440;
  --muted:#5d548a;
  --lime:#7c3aed;
  --score:#e6dcff;
  --shell1:#2a1e63;
  --shell2:#4c2f9e;
}
/* keep button text readable when the accent deepens in light mode */
html[data-theme="light"] button{color:#fff}
html[data-theme="light"] button.ghost,
html[data-theme="light"] .cc-nav button{color:var(--muted)}
html[data-theme="light"] .cc-nav button.active{color:#fff}

/* ---------- 2. Shell layout ---------- */
.cc-shell{display:flex;min-height:100vh}

.cc-sidebar{
  position:fixed;inset:0 auto 0 0;z-index:5;
  width:264px;display:flex;flex-direction:column;gap:1rem;
  padding:1.1rem 1rem;
  background:linear-gradient(180deg,var(--shell1),var(--shell2));
  border-right:1px solid var(--line);
}
.cc-sidebar .brand{margin:0;font-weight:800;font-size:1.05rem}
.cc-sidebar .brand span:first-child{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.cc-sidebar .brand-name{white-space:nowrap}

.cc-nav{display:flex;flex-direction:column;gap:.3rem;overflow-y:auto;flex:1}
.cc-nav button{
  display:flex;align-items:center;gap:.6rem;
  justify-content:flex-start;text-align:left;white-space:nowrap;
  background:transparent;color:var(--muted);
  border:1px solid transparent;border-radius:12px;
  padding:.68rem .85rem;font-weight:700;
}
.cc-nav button:hover{border-color:var(--line);color:var(--text)}
.cc-nav button.active{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;border-color:transparent;
  box-shadow:0 6px 22px #8b5cf655;
}

#careerMoveReturn{
  display:block;padding:.7rem .85rem;border:1px dashed var(--dash);
  border-radius:12px;color:var(--muted);text-decoration:none;
  font-size:.85rem;text-align:center;
}
#careerMoveReturn:hover{color:var(--text);border-color:var(--lime)}

.cc-main{flex:1;min-width:0;margin-left:264px;display:flex;flex-direction:column}

.cc-topbar{
  position:sticky;top:0;z-index:4;
  display:flex;align-items:center;gap:.7rem;
  padding:.65rem 2.5vw;
  background:var(--header);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.cc-topbar .toolbar{
  flex:1;display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;margin:0;
}
.cc-topbar .toolbar #search{flex:1 1 220px;min-width:160px}
.cc-topbar .toolbar #fit{flex:0 1 130px}
.cc-topbar .toolbar button{padding:.6rem .9rem;white-space:nowrap}
.sync-status{font-size:.78rem;color:var(--muted,#9aa4c4);white-space:nowrap}
.sync-status[data-state="saved"]{color:#5ee9b5}
.sync-status[data-state="pending"]{color:#f6c76b}
.sync-status[data-state="error"]{color:#ff7d8c}
#theme{flex:none}

/* content column keeps the public app's max-width rhythm */
.cc-content{width:min(1500px,95vw);margin:0 auto;padding:1.6rem 0 3rem}
.cc-content .intro{margin-bottom:1.6rem}

/* application brief panel sits with the views */
#brief{margin:1.4rem 0}

/* ---------- 3. Responsive: sidebar becomes a top strip ---------- */
@media(max-width:960px){
  .cc-topbar{position:static}
  .cc-sidebar{
    position:sticky;top:0;width:100%;
    flex-direction:row;align-items:center;gap:.7rem;
    padding:.55rem .8rem;overflow-x:auto;
    border-right:0;border-bottom:1px solid var(--line);
  }
  .cc-sidebar .brand{flex:none}
  .cc-nav{flex-direction:row;flex:1;overflow-x:auto;overflow-y:visible}
  .cc-nav button{flex:none}
  #careerMoveReturn{display:none}
  .cc-main{margin-left:0}
  .cc-topbar{flex-wrap:wrap}
}