/*
 * 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 mt-2 / mb-0.5 / space-y-1 margins, so groups and single rows sit on the
   same grid. */
#sidebar > nav { padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; }
#sidebar.sidebar-collapsed > nav { padding: 16px 8px !important; }
#sidebar .nav-group { display: flex; flex-direction: column; gap: 4px; }
#sidebar > nav > *,
#sidebar .nav-group-main { margin: 0 !important; }

/* Flat sections (Portfolio / Studio / Account): an inert uppercase label over
   always-visible full-size rows — no chevron, no expand state. The section rows
   are .nav-item pills, so they inherit the shared row plumbing above. */
#sidebar .nav-section { display: flex; flex-direction: column; gap: 4px; }
#sidebar .nav-section .nav-item { margin: 0 !important; }
#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;
}

/* ============================================================
   Nav rows (single items + group headers)
   Values mirror the ip-b2b design-system nav (.menu-nav-item in
   pages/agent-page.css): full-pill rows, 44px tall, 600-weight neutral labels,
   12px (0.75rem) text, 10px icon→label gap.
   ============================================================ */
#sidebar .nav-item,
#sidebar .nav-group-main {
  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;
}
/* Group header carries its icon+label in an inner <a>; match the 10px gap there.
   The header anchor is a pure toggle (no href), so give it the pointer cursor an
   <a href> would have had — it expands/collapses the group, never navigates. */
#sidebar .nav-group-main > a { gap: 10px !important; cursor: pointer; }

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

/* Top-level icons sit in a circular tinted disc (ip-b2b .menu-nav-icon): a 28px
   primary-soft circle + inset primary ring. The disc tint persists in every
   state, but the GLYPH is black by default and only turns primary when the row
   is hovered or active (see the override below) — not blue all the time. */
#sidebar .nav-item > .nav-icon,
#sidebar .nav-group-main .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;
}
/* Glyph flips to primary on hover/active (higher specificity than the rest rule
   above and than the generic .bg-indigo-500 * child rule, so it wins in both). */
#sidebar .nav-item:hover > .nav-icon,
#sidebar .nav-group-main:hover .nav-icon,
#sidebar .nav-item.bg-indigo-500 > .nav-icon,
#sidebar .nav-group-main.bg-indigo-500 .nav-icon {
  color: var(--color-primary) !important;
}

/* Footer profile avatar — the same disc, but holding the user's initials instead
   of an icon (ip-b2b .menu-footer-avatar): small bold uppercase letters. The
   selector outweighs both the .nav-icon 16px-glyph rule and the collapsed-rail
   font-size rule, so the initials stay 11px expanded and collapsed. The disc and
   #111827→primary-on-hover colour are inherited from the rules above. */
#sidebar .user-avatar-btn > .nav-icon.user-avatar-initials {
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Sub-items: pill rows, muted 500-weight labels, and PLAIN (disc-less) 22px
   icons that go primary on hover/active (ip-b2b .menu-nav-subitem / -subicon). */
#sidebar .nav-subitem {
  border-radius: 9999px !important;
  padding: 6px 10px !important;
  gap: 10px !important;
  color: #444B55;                   /* ip-b2b --text-muted */
  font-weight: 500;
}
#sidebar .nav-subitem .nav-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px !important;       /* overrides text-lg */
  color: #474E58;                   /* ip-b2b --text-subtle */
  line-height: 1 !important;
}

/* Hover and active share ONE treatment in the design: a primary-soft pill with
   primary text + icon. Overrides the markup's hover:bg-oyster-100 / -indigo-600. */
#sidebar .nav-item:hover,
#sidebar .nav-group-main:hover,
#sidebar .nav-subitem:hover {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
}
#sidebar .nav-subitem:hover .nav-icon { color: var(--color-primary) !important; }

/* ============================================================
   Active state — SOFT tinted pill, not a solid blue fill.
   The C# helpers still emit bg-indigo-500 / bg-indigo-100 as active markers;
   here those classes are restyled to the ip-b2b soft treatment. Placed after
   the hover rules and carrying an extra class, so active always wins.
   ============================================================ */
#sidebar .nav-item.bg-indigo-500,
#sidebar .nav-item.bg-indigo-500:hover,
#sidebar .nav-group-main.bg-indigo-500,
#sidebar .nav-group-main.bg-indigo-500:hover {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
}
#sidebar .nav-item.bg-indigo-500 *,
#sidebar .nav-group-main.bg-indigo-500 * {
  color: var(--color-primary) !important;
}

/* Active sub-item (bg-indigo-100) — same primary-soft pill as a top-level active
   row, with its plain icon turned primary (ip-b2b .menu-nav-subitem.is-active). */
#sidebar .nav-subitem.bg-indigo-100,
#sidebar .nav-subitem.bg-indigo-100:hover {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
}
#sidebar .nav-subitem.bg-indigo-100 .nav-icon { color: var(--color-primary) !important; }

/* ============================================================
   Collapsed → icon rail
   Hide labels, counts and chevrons; 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 .nav-group-chevron,
#sidebar.sidebar-collapsed .sidebar-footer-text,
#sidebar.sidebar-collapsed .user-avatar-btn .user-info,
#sidebar.sidebar-collapsed .nav-subitems,
#sidebar.sidebar-collapsed .nav-lock {
  /* Collapsed rail: drop the trailing lock badge — the row stays grayed-out
     (text-oyster-400/opacity) which is enough to read as locked. */
  display: none !important;
}

#sidebar.sidebar-collapsed .nav-item,
#sidebar.sidebar-collapsed .nav-group-main,
#sidebar.sidebar-collapsed .nav-group-main a,
#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;
}

/* Group headers nest an inner <a> inside the .nav-group-main row. Both match the
   rule above, so without this the row gets padded twice (9px on the row + 9px on
   the inner anchor) and group icons render in a taller/larger box than the single
   nav items — the uneven rail the collapsed view showed. Zero the inner anchor's
   padding (the row already owns the 9px) and let it shrink to its icon so the row
   centers it, giving every collapsed icon the same uniform box. */
#sidebar.sidebar-collapsed .nav-group-main a {
  flex: 0 1 auto !important;        /* don't stretch — size to the icon */
  padding: 0 !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 .nav-group-chevron,
  #sidebar.sidebar-collapsed .user-avatar-btn .user-info,
  #sidebar.sidebar-collapsed .nav-lock {
    display: inline-flex !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-subitems {
    display: flex !important;
    flex-direction: column !important;
  }

  #sidebar.sidebar-collapsed .nav-item,
  #sidebar.sidebar-collapsed .nav-group-main,
  #sidebar.sidebar-collapsed .nav-group-main a,
  #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;
  }
}