/*
 * WISEcode Intelligence — Sidebar (floating navigation)
 *
 * Restyles the EXISTING #sidebar markup (Components/Layout/Sidebar.razor) to
 * match the ip-b2b design-system navigation (.menu-nav-* in pages/agent-page.css):
 * a floating, rounded panel with a linen→white gradient, full-pill rows with
 * circular tinted icon discs, a soft (tinted) hover/active state shared by both
 * — instead of a solid blue fill — and an icon-rail collapse.
 *
 * This file ONLY changes look & feel — the nav content, structure and C# logic
 * are owned by Sidebar.razor and are intentionally untouched (see the
 * "2026-06-22 Arthur Color & Design" notes: match the look/feel/collapse, keep
 * the content).
 *
 * Loaded LAST in Components/App.razor: every rule here is scoped under the
 * #sidebar id so it wins on specificity over the older utility/component rules
 * baked into components.css and design-system.css (many of which use
 * !important). Keep selectors id-anchored so that ordering stays robust.
 */

:root {
  /* Floating-panel geometry. Expanded width tracks ip-b2b's 268px rail; the
     collapsed rail is a slim icons-only column. The gap is the breathing room
     between the panel and the viewport edges that makes it read as "floating". */
  --sidebar-w: 272px;
  --sidebar-w-collapsed: 76px;
  --sidebar-gap: 12px;
  --sidebar-radius: 24px;
}

/* ============================================================
   Floating container
   ============================================================ */
#sidebar.sidebar-shell {
  position: fixed;
  top: var(--sidebar-gap);
  left: var(--sidebar-gap);
  height: calc(100vh - (var(--sidebar-gap) * 2));
  /* White→linen gradient: white at the top, settling to warm linen at the
     bottom (matches the design). The page behind it (body bg-oyster-100) is the
     linen field the panel floats on. */
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-oyster-200) 100%);
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: var(--sidebar-radius);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 8px 24px rgba(17, 24, 39, 0.06);
  transition:
    width 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

#sidebar.sidebar-expanded { width: var(--sidebar-w); }
#sidebar.sidebar-collapsed { width: var(--sidebar-w-collapsed); }

/* Main-content offset follows the panel's right edge plus a matching gap.
   Higher specificity (id) than the plain .main-content / body:has(...) rules in
   design-system.css, so these win without !important. */
body:has(#sidebar.sidebar-expanded) .main-content {
  margin-left: calc(var(--sidebar-gap) + var(--sidebar-w) + 16px);
}
body:has(#sidebar.sidebar-collapsed) .main-content {
  margin-left: calc(var(--sidebar-gap) + var(--sidebar-w-collapsed) + 16px);
}

/* ============================================================
   Header / logo
   ============================================================ */
#sidebar .sidebar-header-content {
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
}
#sidebar.sidebar-collapsed .sidebar-header-content {
  padding: 18px 8px !important;
}

/* Top collapse toggle (header) — a small icon button, left arrow when expanded
   and right arrow (rotated) when collapsed. Replaces the old footer button. */
#sidebar .sidebar-toggle-btn {
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
#sidebar .sidebar-toggle-btn:hover {
  background: rgba(37, 80, 124, 0.06) !important;
}

/* "INTELLIGENCE™" tagline under the wordmark — right-aligned to the wordmark's
   right edge (the parent span is flex-col items-end). Mirrors the ip-b2b
   portfolio.html lockup: .topbar-tagline / .tagline-tm. */
#sidebar .sidebar-tagline {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-oyster-600);
  line-height: 1;
  margin-top: 4px;
  white-space: nowrap;
}
#sidebar .sidebar-tagline .sidebar-tagline-tm {
  font-size: 0.65em;
  letter-spacing: 0;
  vertical-align: super;
  margin-left: 1px;
}

/* Scroll area — comfortable insets, slimmer when collapsed. A uniform 4px
   vertical rhythm between every row (ip-b2b .menu-nav gap) replaces the markup's
   mixed margins, so groups and single rows sit on the same grid. The rows
   themselves are WciNavItem (INTEL-389; a group is a row with child rows), styled by its own
   scoped sheet; this file only lays the column out. */
#sidebar > nav { padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; }
#sidebar.sidebar-collapsed > nav { padding: 16px 8px !important; }
#sidebar > nav > * { margin: 0 !important; }

/* Flat sections (Portfolio / Studio / Account): an inert uppercase label over
   always-visible full-size rows — no chevron, no expand state. */
#sidebar .nav-section { display: flex; flex-direction: column; gap: 4px; }
#sidebar .nav-section-label {
  padding: 10px 10px 2px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #474E58;                   /* ip-b2b --text-subtle */
  user-select: none;
}

/* Collapsed rail: the design's rail rows are a 32px box that the rail column
   centres (wise.css 6035 gives the row `margin: 1px auto`; a WCI root never sets
   its own margin, so the column does it). */
#sidebar.sidebar-collapsed > nav,
#sidebar.sidebar-collapsed .nav-section { align-items: center; }

/* ============================================================
   Remaining .nav-item rows: the footer account trigger, the Early Access promo
   card and the signed-out Sign In / Register links. Values mirror the ip-b2b
   design-system nav: full-pill rows, 44px tall, 600-weight neutral labels,
   12px (0.75rem) text, 10px icon→label gap.
   ============================================================ */
#sidebar .nav-item {
  border-radius: 9999px !important; /* full pill (ip-b2b --radius-pill), not a rounded rect */
  padding: 8px 10px !important;
  min-height: 44px;
  gap: 10px !important;             /* icon ↔ label (overrides markup gap-3 = 12px) */
  color: #111827;                   /* ip-b2b --text (neutral near-black, not oyster) */
  font-size: 0.75rem;               /* ip-b2b --fs-ui */
  font-weight: 600;                 /* ip-b2b nav item weight (was 500) */
  letter-spacing: 0.01em;
}

/* Labels: 12px to match --fs-ui (markup carries text-sm = 14px). */
#sidebar .nav-label:not(.material-icons) { font-size: 0.75rem !important; }

/* The promo card's icon sits in a circular tinted disc (ip-b2b .menu-nav-icon):
   a 28px primary-soft circle + inset primary ring, black glyph at rest. */
#sidebar .nav-item > .nav-icon {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background: var(--color-primary-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px !important;       /* glyph size (overrides text-xl) */
  color: #111827 !important;        /* ip-b2b --text — black glyph at rest */
  line-height: 1 !important;
}
#sidebar .nav-item:hover > .nav-icon {
  color: var(--color-primary) !important;
}

/* Hover: a primary-soft pill with primary text + icon. Overrides the markup's
   hover:bg-oyster-100. */
#sidebar .nav-item:hover {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
}

/* ============================================================
   Collapsed → icon rail (the .nav-item rows above)
   Hide labels; centre every row on its icon. Override the older collapsed rules
   (components.css / design-system.css) that stacked a tiny label under each
   icon — id-scoped + !important beats their class rules.
   ============================================================ */
#sidebar.sidebar-collapsed .nav-label,
#sidebar.sidebar-collapsed .nav-section-label,
#sidebar.sidebar-collapsed .sidebar-footer-text,
#sidebar.sidebar-collapsed .user-avatar-btn .user-info {
  display: none !important;
}

#sidebar.sidebar-collapsed .nav-item,
#sidebar.sidebar-collapsed .user-avatar-btn {
  flex-direction: row !important;   /* undo the column-stack collapse */
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 9px !important;
  text-align: center !important;
}

/* Collapsed rail keeps the same 28px disc + 16px glyph as expanded (the base
   disc rule supplies the disc; this just holds the glyph at the design's 16px). */
#sidebar.sidebar-collapsed .nav-icon {
  margin: 0 !important;
  font-size: 16px !important;
}

/* ============================================================
   Footer
   ============================================================ */
#sidebar .border-t {
  border-top: 1px solid rgba(17, 24, 39, 0.06);
}

/* ============================================================
   Mobile shell
   ============================================================ */
.mobile-header {
  display: none;
}

.mobile-menu-backdrop {
  display: none;
}

@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    padding-top: 64px;
  }

  .mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 10px 14px;
    background: rgba(253, 252, 248, 0.94);
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
    backdrop-filter: blur(14px);
  }

  .mobile-header-logo {
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }

  .mobile-header-logo img {
    display: block;
    width: auto;
    height: 30px;
  }

  .mobile-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(17, 24, 39, 0.10);
    border-radius: 9999px;
    background: #fff;
    color: var(--color-primary);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
  }

  .mobile-menu-button .material-icons {
    font-size: 22px;
    line-height: 1;
  }

  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(17, 24, 39, 0.34);
    backdrop-filter: blur(2px);
  }

  #sidebar.sidebar-shell {
    z-index: 60;
    top: 76px;
    left: 10px;
    width: min(calc(100vw - 20px), 318px) !important;
    height: calc(100dvh - 88px);
    max-height: calc(100vh - 88px);
    transform: translateX(calc(-100% - 24px));
    transition:
      transform 0.28s ease,
      box-shadow 0.3s ease;
  }

  #sidebar.sidebar-shell.sidebar-mobile-open {
    transform: translateX(0);
    box-shadow: 0 18px 44px rgba(17, 24, 39, 0.22);
  }

  #sidebar .sidebar-toggle-btn {
    display: none;
  }

  #sidebar.sidebar-collapsed .nav-label,
  #sidebar.sidebar-collapsed .user-avatar-btn .user-info {
    display: inline-flex !important;
  }

  /* A WciNavItem in the rail hides its label in its own scoped sheet; the drawer
     puts the row back to its labelled shape (wise.css .menu-nav-item). */
  #sidebar.sidebar-collapsed > nav,
  #sidebar.sidebar-collapsed .nav-section { align-items: stretch; }
  #sidebar.sidebar-collapsed .wci-nav-rail {
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 4px 10px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 36px !important;
  }
  #sidebar.sidebar-collapsed .wci-nav-rail .menu-nav-label {
    display: block !important;
  }

  /* The mobile drawer always shows the full menu — restore the flat-section labels
     that the desktop icon rail hides. */
  #sidebar.sidebar-collapsed .nav-section-label {
    display: block !important;
  }

  #sidebar.sidebar-collapsed .nav-item,
  #sidebar.sidebar-collapsed .user-avatar-btn {
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    text-align: left !important;
  }

  body:has(#sidebar.sidebar-expanded) .main-content,
  body:has(#sidebar.sidebar-collapsed) .main-content,
  body:has(#sidebar.sidebar-shell) .main-content {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    margin-left: 0 !important;
  }

  .main-content > .p-8 {
    padding: 1rem !important;
  }
}

/* ============================================================
   Early Access promo card (Studio & AI → /waitlist)
   One status-aware invitation pinned between the scroll area and the footer —
   the single global entry point that replaced master's scattered locked nav
   items. Carries .nav-item so it inherits the shared row plumbing (icon disc,
   collapse behavior, label hiding); the rules here re-skin it as a soft
   indigo-tinted card so it reads as an announcement, not a nav row. Declared
   AFTER the base nav rules so equal-specificity overrides win by order.
   ============================================================ */
#sidebar .sidebar-promo-zone {
  padding: 0 12px 12px;
  flex-shrink: 0;
}

#sidebar .sidebar-promo {
  border-radius: 18px !important;   /* card, not the nav pill */
  padding: 10px !important;
  gap: 10px !important;
  min-height: 52px;
  background:
    radial-gradient(140px 70px at 100% 0%, color-mix(in srgb, var(--color-mint-400) 22%, transparent), transparent 70%),
    color-mix(in srgb, var(--color-primary) 6%, var(--color-white)) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  color: #111827;
}
#sidebar .sidebar-promo:hover {
  background:
    radial-gradient(140px 70px at 100% 0%, color-mix(in srgb, var(--color-mint-400) 28%, transparent), transparent 70%),
    color-mix(in srgb, var(--color-primary) 11%, var(--color-white)) !important;
  color: #111827 !important;
}
/* Active (= on /waitlist): the same soft-primary treatment the nav rows use. */
#sidebar .sidebar-promo.sidebar-promo-active {
  background: var(--color-primary-soft) !important;
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
}

/* Solid primary disc + white sparkle glyph, in every state — the one accent
   that makes the card pop against the plain rows (their discs stay soft). */
#sidebar .sidebar-promo > .nav-icon,
#sidebar .sidebar-promo:hover > .nav-icon {
  background: var(--color-primary) !important;
  box-shadow: none !important;
  color: var(--color-white) !important;
}

/* Two-line label: bold title over a primary-tinted status line. */
#sidebar .sidebar-promo-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#sidebar .sidebar-promo-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  white-space: nowrap;
}
#sidebar .sidebar-promo-sub {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1.3;
  white-space: nowrap;
}

/* Collapsed rail: the generic .nav-item rules already hide the label and centre
   the icon; shrink the card down to a circular icon chip to match the rail. */
#sidebar.sidebar-collapsed .sidebar-promo-zone { padding: 0 8px 10px; }
#sidebar.sidebar-collapsed .sidebar-promo {
  border-radius: 9999px !important;
  min-height: 0;
}

@media (max-width: 768px) {
  /* Mobile drawer always renders expanded content, even when the desktop state
     is collapsed — undo the icon-chip override so the full card shows. */
  #sidebar.sidebar-collapsed .sidebar-promo-zone { padding: 0 12px 12px; }
  #sidebar.sidebar-collapsed .sidebar-promo {
    border-radius: 18px !important;
    min-height: 52px;
  }
}

/* ── Locked state (onboarding brand research in progress) ──────────────────────
   The sidebar stays fully visible so a just-signed-up user is oriented, but every
   destination is inert: pointer-events:none on the nav, promo, and footer disables
   both hrefs and @onclick. It's a UI lock only (typing a URL still works). A dimmed
   look plus the lock hint above the nav make the inertness read as intentional. */
#sidebar.sidebar-locked .sidebar-lock-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 16px 0;
  padding: 10px 12px;
  border: 1px dashed var(--oyster-200, #e2ddd3);
  border-radius: 12px;
  background: var(--oyster-50, #faf8f4);
  color: var(--oyster-600, #6b6357);
  font-size: 0.75rem;
  line-height: 1.3;
}
#sidebar.sidebar-locked .sidebar-lock-hint-ico {
  font-size: 16px;
  line-height: 1.3;
  flex-shrink: 0;
}
/* Collapsed rail: the hint text would overflow the narrow rail, so hide it there. */
#sidebar.sidebar-collapsed .sidebar-lock-hint { display: none; }

/* Every destination is inert while locked: disable all links (nav, logo, promo, user-menu) and the
   footer button that opens the user menu. The collapse/mobile toggles stay live (harmless, no nav).
   Sidebar.razor also puts `inert` on the nav, the promo zone and the footer while locked, which is
   what stops keyboard activation and assistive technology; this rule covers the pointer (and the
   logo link, which stays reachable by keyboard as the way home). */
#sidebar.sidebar-locked a,
#sidebar.sidebar-locked nav button,
#sidebar.sidebar-locked .user-avatar-btn {
  pointer-events: none;
}
/* Dim the working regions so the inertness reads as intentional; leave the logo at full strength. */
#sidebar.sidebar-locked nav,
#sidebar.sidebar-locked .sidebar-promo-zone,
#sidebar.sidebar-locked .user-avatar-btn {
  opacity: 0.5;
}