/* ============================================================================
 *  KINGDOM WEALTH — LEFT RAIL  (v4 — corrective)
 *  Load AFTER css/styles.css.
 *
 *  WHAT CHANGED FROM v3 AND WHY
 *  ----------------------------
 *  v3 moved the section navigation into the rail as a "Sections" list and hid
 *  the top tab strip on desktop. That was wrong on both counts: the Sections
 *  list sat greyed out until an agent was selected, and with the tab strip
 *  hidden there was then no navigation on the page at all. It has been removed
 *  outright and the top tab strip is authoritative again.
 *
 *  WHAT THIS FILE STILL DOES — the two things that were actually broken:
 *    · the roster gets its own bounded scroller, so Quick links can no longer be
 *      pushed thousands of pixels below the fold by a long agent list
 *    · the brand block is compact instead of eating 129px of rail height
 *
 *  The rail is otherwise the rail you already had.
 * ==========================================================================*/

/* ---------------------------------------------------------------------------
   0. THE TOP TAB STRIP IS VISIBLE. Non-negotiable — v3 hid it and that is the
      regression this file exists to undo. Stated first and loudly so it cannot
      be quietly overridden again.
   ------------------------------------------------------------------------- */
.topbar .tabs-shell { display: flex !important; }
.topbar .tabs        { display: flex !important; }
/* the topbar section title v3 added is redundant now the tabs are back */
.tb-section { display: none !important; }

/* ---------------------------------------------------------------------------
   1. The "Sections" / "Team overview" group is gone.
      js/sidebar-v3.js removes the node; this hides it even before the script
      runs, and on a stale script cache.
   ------------------------------------------------------------------------- */
.sidebar .sb-group[data-sb="sections"],
.sidebar .sb-nav,
.sidebar .sb-team,
.sidebar .sb-nav-hint { display: none !important; }

/* ---------------------------------------------------------------------------
   2. Shell — desktop only, so the mobile drawer in styles.css still works
   ------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .app { grid-template-columns: 280px 1fr; }
  body.sidebar-collapsed .app { grid-template-columns: 56px 1fr; }
}
.sidebar { background: linear-gradient(180deg, #FFFFFF, #F4F7FB); }

/* ---------------------------------------------------------------------------
   3. Brand — 129px down to 62px, so the roster gets that height instead.
      flex:0 0 auto matters: .sidebar-main is a flex column with overflow:hidden,
      so without it the brand is the first thing squashed when the rail is full.
   ------------------------------------------------------------------------- */
.sidebar .brand {
  flex: 0 0 auto; height: 62px; padding: 0 8px 0 12px;
  display: flex; align-items: center;
}
.sidebar .brand .kw-logo { flex: 1; min-width: 0; display: flex; align-items: center; }
.sidebar .brand .kw-logo-img {
  width: auto; height: auto; max-width: 196px; max-height: 44px;
  object-fit: contain; object-position: left center; display: block;
}
.sidebar .brand .sidebar-collapse-btn { position: static; margin-left: 8px; flex: 0 0 auto; }

.sidebar .user-chip { flex: 0 0 auto; padding: 9px 12px; gap: 9px; background: var(--panel2); }
.sidebar .user-chip .uc-name { font-size: 13.5px; }
.sidebar .user-chip .uc-role { font-size: 10.5px; }

/* ---------------------------------------------------------------------------
   4. The two remaining groups: Agents, then Quick links.
      The rail itself does not scroll — each group scrolls its own body, so both
      headers stay on screen however many agents or links there are.
   ------------------------------------------------------------------------- */
/* The groups below are bounded, so in normal use this never overflows and no
   scrollbar appears. `auto` rather than `hidden` is the safety net: if anything
   ever does make the rail taller than the window, the rail scrolls instead of
   silently swallowing whatever fell off the bottom. */
.sidebar-scroll {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line2) transparent;
}
.sidebar-scroll::-webkit-scrollbar { width: 7px }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent }
.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 99px }
.sb-group { display: flex; flex-direction: column; min-height: 0; }
.sb-group + .sb-group { border-top: 1px solid var(--line); }
.sb-body {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line2) transparent;
}
.sb-body::-webkit-scrollbar { width: 7px }
.sb-body::-webkit-scrollbar-track { background: transparent }
.sb-body::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 99px }

/* Explicit order. Older stylesheets in this project set `order:1` on
   .agent-roster-ui for staff roles, which otherwise flips Quick links above the
   roster; pinning both here makes the rail deterministic on any build. */
.sidebar-scroll > .sb-group[data-sb="agents"],
.sidebar-scroll > .agent-roster-ui { order: 1 !important; }
.sidebar-scroll > .sb-group[data-sb="links"] { order: 2 !important; }

/* !important throughout this block on purpose: the retired KW-SIDEBAR-SCROLL-V2
   rules in older copies of styles.css declare
     .sidebar-scroll > .agent-roster-ui { flex:0 0 auto !important; overflow:visible !important }
   and would otherwise let the roster grow to its full height and push Quick
   links off the bottom of the rail — the original complaint. */
.sidebar-scroll > .sb-group[data-sb="agents"],
.sidebar-scroll > .agent-roster-ui {
  flex: 1 1 auto !important; min-height: 150px !important;
  max-height: none !important; overflow: hidden !important;
}
/* `0 1 auto` — Quick links keeps its natural height when there is room, but is
   allowed to shrink on a short window rather than forcing the whole rail to
   overflow. Its body scrolls internally, so nothing becomes unreachable. */
.sidebar-scroll > .sb-group[data-sb="links"] {
  flex: 0 1 auto !important; min-height: 42px !important; overflow: hidden !important;
}
.sb-group[data-sb="links"] .sb-body { max-height: min(34vh, 300px); }
@supports (height: 100dvh) {
  .sb-group[data-sb="links"] .sb-body { max-height: min(34dvh, 300px) }
}
/* A collapsed group is its header and nothing else.
   !important is load-bearing here: `.sidebar .agent-roster-ui > .sb-body` further
   down sets display:flex at the same specificity, and being later in the file it
   used to win — so clicking "Agents" marked the group closed but left the roster
   at full height, shoving Quick links off the bottom of a rail that cannot
   scroll. That is the bug this comment exists to prevent coming back. */
.sidebar-scroll > .sb-group.is-closed { flex: 0 0 auto !important; min-height: 0 !important; }
.sidebar .sb-group.is-closed > .sb-body,
.sb-group.is-closed .sb-body { display: none !important; }

/* Short windows — a laptop at 150% zoom, a small browser window, a phone in
   landscape. Both groups give ground so the rail itself never has to scroll:
   two stacked section scrollbars is normal, a scrollbar inside a scrollbar is
   not. */
@media (max-height: 620px) {
  .sidebar-scroll > .sb-group[data-sb="agents"],
  .sidebar-scroll > .agent-roster-ui { min-height: 104px !important; }
  .sb-group[data-sb="links"] .sb-body { max-height: min(26vh, 190px); }
}
@media (max-height: 460px) {
  .sidebar-scroll > .sb-group[data-sb="agents"],
  .sidebar-scroll > .agent-roster-ui { min-height: 84px !important; }
  .sb-group[data-sb="links"] .sb-body { max-height: min(22vh, 130px); }
  .sidebar .brand { height: 48px !important; }
}

/* ---------------------------------------------------------------------------
   5. Group headers
   ------------------------------------------------------------------------- */
.sb-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 12px 9px 13px; cursor: pointer; user-select: none;
  border: none; width: 100%; text-align: left; font: inherit;
  flex: 0 0 auto; background: transparent;
}
.sb-head:hover .sb-head-t,
.sb-head:hover > span:first-of-type { color: var(--gold-soft); }
.sb-head-t,
.roster-head.sb-head > span:first-of-type {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--muted); transition: color .15s; flex: 0 0 auto;
}
.sb-head-count {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: var(--muted2);
  background: var(--panel3); border-radius: 20px; padding: 1px 7px; flex: 0 0 auto;
}
.sb-head-sp { flex: 1 1 auto; min-width: 4px; }
.sb-caret {
  flex: 0 0 auto; width: 16px; height: 16px; display: grid; place-items: center;
  color: var(--muted2); font-size: 10px; line-height: 1;
  transition: transform .22s cubic-bezier(.22,1,.36,1), color .15s;
}
.sb-head:hover .sb-caret { color: var(--gold-soft); }
.sb-group.is-closed .sb-caret { transform: rotate(-90deg); }
.roster-head.sb-head { justify-content: flex-start; }
.roster-head.sb-head .btn-add { font-size: 10.5px; padding: 4px 9px; border-radius: 7px; flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   6. Agents — the roster scrolls inside its group, the search box stays put.
      This is the fix that actually mattered: however many agents load, the
      Quick links group below cannot be pushed off the screen.
   ------------------------------------------------------------------------- */
.sidebar .agent-roster-ui { display: flex; flex-direction: column; overflow: hidden; }
.sidebar .agent-roster-ui > .sb-body { display: flex; flex-direction: column; overflow: hidden; }
/* KW-SIDEBAR-SCROLL-V2 made the roster header and search box sticky with a
   hardcoded `top:34px`, which in this layout drags the search box down on top of
   the first agent row. Both are ordinary flex rows here. */
.sidebar .search,
.sidebar-scroll .search,
.sidebar-scroll .roster-head {
  position: static !important; top: auto !important; z-index: auto !important;
}
.sidebar .search { flex: 0 0 auto; padding: 0 12px 8px; }
.sidebar .search input {
  width: 100%; box-sizing: border-box; padding: 7px 11px; font-size: 12.5px;
  border: 1px solid var(--line2); border-radius: 8px; background: #fff;
  color: var(--text); font-family: inherit;
}
.sidebar .search input:focus {
  outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(0,32,90,.10);
}
.sidebar .roster,
.sidebar-scroll .roster {
  flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important;
  padding: 0 8px 10px; overflow-y: auto !important; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line2) transparent;
  /* stop Chrome's scroll anchoring nudging the list off the first row when the
     roster repaints */
  overflow-anchor: none;
}
.sidebar .roster::-webkit-scrollbar { width: 7px }
.sidebar .roster::-webkit-scrollbar-track { background: transparent }
.sidebar .roster::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 99px }

/* slightly denser rows so more of the team is visible at once */
.sidebar .agent-item { padding: 7px 10px 7px 11px; margin-bottom: 1px; border-radius: 8px; }
.sidebar .agent-item-name { font-size: 13px; line-height: 1.3; }
.sidebar .agent-item-meta { font-size: 10px; margin-top: 1px; line-height: 1.5; }
.sidebar .agent-item:not(.active):not(.active-selected-style):hover { transform: none; }
.sidebar .agent-item:hover { box-shadow: inset 3px 0 0 0 var(--gold-soft); }
.sidebar .agent-item.active::before,
.sidebar .agent-item.active-selected-style::before { top: 6px; bottom: 6px; }
.sidebar .stage-pill { font-size: 9px; padding: 1px 5px; }
.sidebar .roster-empty { padding: 18px 14px; font-size: 11.5px; }

/* dashboard-render.js prepends an "All Agents" item into .agent-roster-ui; in
   this layout it lands above the group header, so it is laid out inline with the
   roster instead of floating loose. */
.sidebar #nav-team-dashboard {
  order: -1; margin: 8px 10px 0; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel2);
  font-size: 12.5px; font-weight: 700; color: var(--gold); cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
.sidebar #nav-team-dashboard:hover { border-color: var(--gold-deep); background: var(--panel3); }
.sidebar #nav-team-dashboard.active { border-color: rgba(0,32,90,.32); background: rgba(0,32,90,.08); }

/* ---------------------------------------------------------------------------
   7. Quick links
   ------------------------------------------------------------------------- */
.sidebar .ph-ql { margin-top: 0; padding: 0 8px 10px; border-top: none; }
.sidebar .ph-ql .ql-head { display: none; }      /* the group header replaces it */
.sidebar .ph-ql .ql-item { padding: 6px 9px; font-size: 12.5px; border-radius: 8px; }
.sidebar .ph-ql .ql-home { margin-bottom: 4px; }
.sb-links-edit {
  border: none; background: none; color: var(--muted2); cursor: pointer;
  font-size: 12px; padding: 2px 6px; border-radius: 6px; flex: 0 0 auto;
}
.sb-links-edit:hover { background: var(--panel3); color: var(--gold-soft); }

/* ---------------------------------------------------------------------------
   8. Footer, collapsed rail, mobile
   ------------------------------------------------------------------------- */
.sidebar-foot { flex-shrink: 0; }
.side-foot-settings { padding: 8px 12px; }
.side-foot.side-foot-status { padding: 0 14px 9px; }

.sidebar.collapsed .sb-head-t,
.sidebar.collapsed .sb-head-count { display: none; }

@media (max-width: 980px) {
  .sidebar-scroll { overflow-y: auto; }
  .sb-group[data-sb="agents"] { flex: 0 0 auto; }
  .sidebar .roster { max-height: none; overflow: visible; }
  .sb-group[data-sb="links"] .sb-body { max-height: none; }
}