/* Shared public-facing sidebar (frontend/shared/public_nav.js) — injected
   into standalone public pages that had no navigation at all. Mirrors
   admin/sidebar.css's approach (body becomes a flex row of sidebar + main). */
/* flex-direction/align-items explicitly forced here (not just display) --
   a page whose own body{} rule sets flex-direction:column + align-items:center
   (the common "center a single card" pattern several of these standalone
   pages used before getting a sidebar) would otherwise leak those two
   properties through, since body{} and this class-scoped rule cascade
   per-property, not per-rule -- a less specific but property-present rule
   still wins for any property this rule doesn't itself set. Real bug hit on
   b2b-signup.html (2026-08-11): sidebar + main stacked in a centered column
   instead of sitting side by side, and the sidebar's position:sticky then
   visually overlapped page content while scrolling. */
body.public-has-sidebar { display: flex; flex-direction: row; align-items: stretch; min-height: 100vh; margin: 0; padding: 0 !important; }

.public-sidebar {
  width: 180px; min-width: 180px; background: var(--panel, #11151D);
  border-right: 1px solid var(--border, #232838); padding: 14px 10px;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  overflow-y: auto; flex-shrink: 0; transition: width .15s ease, min-width .15s ease, padding .15s ease;
}
.public-sidebar.collapsed { width: 48px; min-width: 48px; padding: 14px 4px; align-items: center; }
.public-sidebar.collapsed .nav-item,
.public-sidebar.collapsed .public-sidebar-brand { display: none; }

/* Toggle buttons -- bigger icon + a text label, one pinned at the TOP and one
   pinned at the BOTTOM of the sidebar (Varun, 2026-08-12: "toggle niche aur
   upar dono taraf hona chahiye, always show ho") -- position:sticky keeps
   each visible at its edge of the viewport even while the nav-item list
   scrolls internally (.public-sidebar has its own overflow-y:auto), so at
   least one toggle is always reachable regardless of scroll position. */
.public-sidebar-toggle {
  background: var(--panel-2, #161B25); border: 1px solid var(--border, #232838);
  color: var(--ink-dim, #8B93A7); cursor: pointer; font-family: system-ui, sans-serif;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 100%; padding: 7px 4px; border-radius: 8px; z-index: 2;
  background-clip: padding-box;
}
.public-sidebar-toggle-top { position: sticky; top: 0; margin-bottom: 10px; }
.public-sidebar-toggle-bottom { position: sticky; bottom: 0; margin-top: auto; }
.public-sidebar-toggle:hover { background: var(--accent, #3FA9F5); border-color: var(--accent, #3FA9F5); color: #fff; }
.public-sidebar-toggle .psc-toggle-icon { font-size: 22px; line-height: 1; font-weight: 700; }
.public-sidebar-toggle .psc-toggle-label { font-size: 9.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }

.public-sidebar-brand {
  font-family: system-ui, sans-serif; font-weight: 800; font-size: 14px; color: var(--ink, #E7EAF0);
  padding: 2px 6px 12px; border-bottom: 1px solid var(--border, #232838); margin-bottom: 8px;
}
/* Brand lockup — rapractice hosts only (public_nav.js gates it on isB2BOnlyHost;
   tenant subdomains keep the plain "RA OS" text and never get this treatment).
   Mirrors the proportions of shared/icons/rapractice-logo.svg so the sidebar and
   the logo file read as the same brand rather than two attempts at it.

   Wrapping + centred on purpose: the sidebar is 180px, and ~15px of that
   disappears the moment the OS draws a classic (non-overlay) scrollbar inside
   it — enough to stop the 28px mark and the 15px wordmark sharing a row. Rather
   than clip the name, the lockup is allowed to stack: mark + name side by side
   when there is room, mark over name when there is not, with the descriptor chip
   always on its own full-width row underneath. Centring is what makes both
   states look deliberate instead of like a broken row. */
.public-sidebar-brand.is-lockup {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  column-gap: 9px; row-gap: 7px; text-align: center; font-weight: 400;
}
.public-sidebar-brand .psb-mark { flex: 0 0 auto; display: block; border-radius: 7px; }
/* flex:0 1 auto — the words column takes exactly its own width (so the mark and
   the name centre as one pair) and wraps to its own line rather than being
   squeezed narrower than the wordmark needs. */
.public-sidebar-brand .psb-words { flex: 0 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.public-sidebar-brand .psb-name {
  font-size: 15px; font-weight: 800; letter-spacing: -.015em; line-height: 1.15;
  color: var(--ink, #E7EAF0);
}
/* The TLD is dimmed rather than dropped: it is part of the legal brand, but it
   should not compete with the name for attention. */
.public-sidebar-brand .psb-tld { font-weight: 600; color: var(--ink-dim, #8B93A7); }
/* Descriptor — "RA Marketplace" (Varun, 2026-08-17: "rapractice.com ke niche
   likho RA Marketplace, attractive way, sidebar mein"). Deliberately NOT the
   grey caption it used to be: as flat dim text it read like a subtitle that had
   been left in by accident. It is now a small accent chip — the same pill
   vocabulary this stylesheet already uses for .psc-cal-date and the same accent
   the mark itself is built from — so the lockup reads name-then-badge, with the
   badge carrying the colour and the name carrying the weight.
   It sits on its OWN row (flex-basis:100% against the wrapping .is-lockup above),
   not beside the mark: measured in the real 180px sidebar, the words column next
   to the 28px mark is only ~95px wide, and this chip needs ~123px — squeezed in
   there it clipped. Given the full 132px brand row it fits with room to spare,
   and reading name-then-badge down the page is the better lockup anyway. */
.public-sidebar-brand .psb-desc {
  flex: 1 0 100%;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  /* 2026-08-17: was sized for the two-word "RA Marketplace" with
     white-space:nowrap. The descriptor is now the longer, accurate
     "Marketplace & Practice Management", which at .1em tracking overflows the
     180px rail — Varun screenshotted it clipped on both sides, reading
     "KETPLACE & PRACTICE MANAGI". Fixed by letting it WRAP rather than
     shrinking the type into illegibility: tracking eased, line-height opened,
     nowrap dropped. It now grows to two lines and stays inside the rail even
     when the OS draws a classic scrollbar and steals ~15px. */
  font-size: 8.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.35; white-space: normal; max-width: 100%; text-align: center;
  color: var(--accent, #3FA9F5);
  background: linear-gradient(135deg, rgba(63,169,245,.18), rgba(63,169,245,.05));
  border: 1px solid rgba(63,169,245,.32); border-radius: 999px;
  padding: 4.5px 8px;
}
/* A single lit dot at the head of the chip — the smallest possible "live"
   signal, and it re-uses the mark's own blue so the eye ties the two together. */
.public-sidebar-brand .psb-desc::before {
  content: ""; flex: 0 0 auto; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent, #3FA9F5); box-shadow: 0 0 0 2px rgba(63,169,245,.16);
}

/* Brand lockup on a page body (hero art, not the sidebar) — shared/icons ships a
   DARK build and a LIGHT build of the same lockup, and the wrong one on the wrong
   ground makes the wordmark disappear entirely, leaving a bare "….com" ghost
   (the dark build's ink is #E7EAF0, invisible on white). Pages here are dark, so
   the dark build is the one that renders — but a browser drops page backgrounds
   when PRINTING, which turns every one of these pages into a white ground and
   reproduces the ghost on paper. Hence both builds in the markup, swapped here. */
.brand-lockup-light { display: none; }
@media print {
  .brand-lockup-dark { display: none; }
  .brand-lockup-light { display: block; }
}

.public-sidebar-compliance {
  font-family: system-ui, sans-serif; font-size: 11px; color: var(--ink-dim, #8B93A7);
  background: var(--panel-2, #161B25); border: 1px solid var(--border, #232838);
  border-radius: 8px; padding: 8px 9px; margin-bottom: 10px; line-height: 1.6;
}
.public-sidebar.collapsed .public-sidebar-compliance { display: none; }
.public-sidebar-compliance .psc-title {
  font-weight: 700; color: var(--ink, #E7EAF0); font-size: 11px; margin-bottom: 4px;
  display: flex; align-items: center; justify-content: space-between;
}
/* Calendar-item rows (2026-08-13) -- a small date badge + title, same
   grouped/color-coded-urgency spirit as the real Dashboard's own Compliance
   Calendar widget and the full Filing Calendar tab, just illustrative
   sample dates here (marketing sidebar, not real per-org data). */
.public-sidebar-compliance .psc-cal-item {
  display: flex; align-items: center; gap: 6px; white-space: nowrap; padding: 2px 0;
}
.public-sidebar-compliance .psc-cal-date {
  font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 8px; color: #fff; flex-shrink: 0;
}
.public-sidebar-compliance .psc-cal-date.psc-green { background: #34C77B; }
.public-sidebar-compliance .psc-cal-date.psc-amber { background: #E5A93A; }
.public-sidebar-compliance .psc-cal-date.psc-red { background: #E5504F; }
.public-sidebar-compliance .psc-sample-note {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border, #232838);
  font-size: 9.5px; color: var(--ink-dim, #8B93A7); white-space: normal; line-height: 1.4;
}

.public-sidebar-contact {
  font-family: system-ui, sans-serif; font-size: 11.5px; color: var(--ink-dim, #8B93A7);
  border-top: 1px solid var(--border, #232838); margin-top: 10px; padding-top: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.public-sidebar.collapsed .public-sidebar-contact { display: none; }
.public-sidebar-contact .psc-contact-label {
  font-weight: 700; color: var(--ink, #E7EAF0); font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em;
}
.public-sidebar-contact a { color: var(--accent, #3FA9F5); text-decoration: none; }
.public-sidebar-contact a:hover { text-decoration: underline; }

/* Group section headers + icons (Varun, 2026-08-14, "thoda attractive rich
   UI UX se banao") — rapractice.com's sidebar only (public_nav.js only sets
   `item.group`/`item.icon` on the isB2BOnlyHost NAV_ITEMS array), so these
   rules are simply inert/unused on every other host, no host-check needed
   here in CSS. */
.public-sidebar-group-header {
  font-family: system-ui, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-dim, #8B93A7); padding: 12px 8px 4px; white-space: nowrap;
}
.public-sidebar-group-header:first-of-type { padding-top: 4px; }
.public-sidebar.collapsed .public-sidebar-group-header { display: none; }

.public-sidebar .nav-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 8px;
  color: var(--ink-dim, #8B93A7); text-decoration: none; font-size: 12.5px; font-weight: 500;
  margin-bottom: 2px; font-family: system-ui, sans-serif; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, transform .1s ease;
}
.public-sidebar .nav-item-icon { font-size: 14px; line-height: 1; flex-shrink: 0; }
.public-sidebar.collapsed .nav-item-icon { display: none; }
.public-sidebar .nav-item:hover {
  background: var(--panel-2, #161B25); color: var(--ink, #E7EAF0); transform: translateX(2px);
}
.public-sidebar .nav-item.active {
  background: linear-gradient(90deg, rgba(63,169,245,.20), rgba(63,169,245,.06));
  color: var(--ink, #E7EAF0); font-weight: 700; box-shadow: inset 2px 0 0 var(--accent, #3FA9F5);
}
@media (prefers-reduced-motion: reduce) { .public-sidebar .nav-item { transition: none; } }

.public-main { flex: 1; min-width: 0; overflow-x: auto; }

@media (prefers-reduced-motion: reduce) { .public-sidebar { transition: none; } }