@import url("../landing-tokens.css");

/* ============================================================
   Workspace sidebar — unified business theme (Inter + landing palette).
   Shared across all sidebar pages; linked LAST so it overrides shared.css.
   EVERY sidebar rule is scoped under #sidebar (the <nav class="sidebar"
   id="sidebar"> root rendered by sidebar.js). #sidebarToggle is a fixed
   sibling OUTSIDE #sidebar, so it gets its own id rule.

   Changes ONLY the look. It does NOT change the sidebar WIDTH
   (--sidebar-width / .sidebar width stay — the content's margin-left depends
   on it), nor position/height, nor any JS / id / handler. Colours via
   var(--li-*).
   ============================================================ */

/* ---- shell ---- */
#sidebar{
  background:var(--li-white);
  border-right:1px solid var(--li-border);
  box-shadow:none;
  color:var(--li-ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---- header / "AI Workspace" wordmark ---- */
#sidebar .sidebar-header{
  border-bottom:1px solid var(--li-border);
}
#sidebar .sidebar-logo{
  color:var(--li-ink);
  font-family:inherit;
  font-weight:700;
  font-size:1.2rem;
  letter-spacing:-0.01em;
}

/* ---- section titles: MAIN / TOOLS / SETTINGS ---- */
#sidebar .nav-section-title{
  color:var(--li-gray);
  font-family:inherit;
  font-size:.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* ---- nav items ---- */
#sidebar .nav-item{
  color:var(--li-ink);
  font-family:inherit;
  font-size:.9rem;
  min-height:44px;                 /* tap target — width of sidebar unchanged */
  transition:background .15s ease, color .15s ease;
}
#sidebar .nav-item-text{
  font-family:inherit;
  font-size:.9rem;
  font-weight:500;
}
#sidebar .nav-item-icon{ color:inherit; }

#sidebar .nav-item:hover{
  background:var(--li-tint);
  color:var(--li-blue);
}
#sidebar .nav-item:focus-visible{
  outline:2px solid var(--li-blue);
  outline-offset:-2px;             /* keep ring inside the fixed width */
}

/* ---- active item: quiet blue accent + tidy 3px stripe (no double border) ---- */
#sidebar .nav-item.active{
  background:var(--li-tint);
  color:var(--li-blue);
  font-weight:600;
  border-left-color:transparent;
}
#sidebar .nav-item.active .nav-item-text{ font-weight:600; }
#sidebar .nav-item.active::before{
  background:var(--li-blue);
}

/* ---- collapse toggle — round business button on every sidebar page.
   #sidebarToggle is OUTSIDE #sidebar (fixed sibling), hence un-scoped id.
   Overrides ONLY the visual of shared.css .sidebar-toggle + the generic
   button{min-width:120px;padding:12px 24px}; position/logic/id untouched. ---- */
#sidebarToggle{
  width:44px;
  height:44px;
  min-width:0;
  padding:0;
  border-radius:999px;
  background:var(--li-white);
  border:1px solid var(--li-border);
  box-shadow:none;
  color:var(--li-ink);
  font-size:1rem;
  line-height:1;
}
#sidebarToggle:hover{
  background:var(--li-tint);
  border-color:var(--li-blue);
  color:var(--li-ink);
}
#sidebarToggle:focus-visible{
  outline:3px solid var(--li-blue);
  outline-offset:2px;
}