/**
 * C360 journey-style sidebar + horizontal tabs (flat nav), scoped to .broker-c360-ui.
 * Source layout rules: docs/C360_Cloud_Complete Initial Journey v4.html
 */
:root {
  /* Matches collapsed sidebar until c360-sidebar.js syncs --c360-sbw-actual on <html> */
  --c360-sbw-actual: 54px;
  --c360-top-nav-h: 40px;
}

/* Viewport band below fixed navbar — sidebar height must NOT follow main content height */
body.broker-c360-ui {
  --c360-sidebar-vh: calc(100dvh - var(--phoenix-navbar-top-height, 4rem));
}


/* Do not set --c360-sbw-actual on body — it would override <html> and pin the top bar at 54px while the sidebar is wider. */

/*
 * Journey-style shell: full-width top bar, then a separate row (sidebar | main).
 * Top nav is NOT sized/positioned from sidebar width — see .c360-page-shell.
 */
body.broker-c360-ui main.c360-page-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
  /* Reserve space for fixed top bar (same pattern as journey: header, then .layout) */
  padding-top: var(--phoenix-navbar-top-height);
}

/*
 * Communications route HTML is very tall (many modals in one fragment). Unbounded main height lets the
 * document exceed the viewport, so a second (OS) scrollbar appears beside #content-container. Pin main to
 * the viewport band (navbar padding is already on this element, border-box).
 */
body.broker-c360-ui main.c360-page-shell:has(#content-container .communications-route) {
  min-height: 0 !important;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  box-sizing: border-box;
}

/* Let the main row shrink inside the pinned shell so #content-container keeps a single scrollport */
body.broker-c360-ui .c360-page-shell > .c360-layout:has(#content-container .communications-route) {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Full-bleed top navigation — independent of sidebar */
body.broker-c360-ui .c360-page-shell > .navbar-top.fixed-top {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

body.broker-c360-ui .c360-layout {
  display: flex;
  flex-direction: row;
  /* Do not stretch columns to the same height — main content can be taller than the viewport */
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  min-height: calc(100dvh - var(--phoenix-navbar-top-height, 4rem));
}

/* ── Sidebar (journey) — fixed viewport height; never grows with main column ───── */
body.broker-c360-ui #sidebar.sidebar {
  width: var(--sb-w);
  flex-shrink: 0;
  align-self: flex-start;
  height: var(--c360-sidebar-vh);
  max-height: var(--c360-sidebar-vh);
  min-height: 0;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  position: sticky;
  top: var(--phoenix-navbar-top-height, 4rem);
  z-index: 25;
  box-shadow: 2px 0 14px rgba(0, 0, 0, 0.18);
}

body.broker-c360-ui #sidebar.sidebar.collapsed {
  width: 54px;
}

/* Brand row (journey: .sb-brand directly under aside, then .sb-toggle) */
body.broker-c360-ui #sidebar .sb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  overflow: hidden;
  min-height: 60px;
}

body.broker-c360-ui .sb-brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--t), var(--t2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fs);
  font-weight: 800;
  font-size: 11px;
  color: #fff;
  letter-spacing: -0.5px;
}

body.broker-c360-ui .sb-brand-txt {
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.18s, width 0.18s;
}

body.broker-c360-ui #sidebar.sidebar.collapsed .sb-brand-txt {
  opacity: 0;
  width: 0;
  pointer-events: none;
}

body.broker-c360-ui .sb-brand-name {
  font-family: var(--fs);
  font-size: 13px;
  color: #fff;
  line-height: 1.2;
}

/* Only "Broker" is heavy; "Portal" stays regular weight (journey-style split title) */
body.broker-c360-ui .sb-brand-name strong {
  font-weight: 800;
}

body.broker-c360-ui .sb-brand-name .sb-brand-portal {
  font-weight: 500;
}

/* Journey light-panel subtitle tone: var(--ch3), not teal (--t) */
body.broker-c360-ui #sidebar .sb-brand-sub {
  font-family: var(--fb);
  font-size: 9px;
  font-weight: 500;
  color: var(--ch3);
  letter-spacing: 0.6px;
  text-transform: none;
  margin-top: 2px;
}

body.broker-c360-ui .sb-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  padding: 6px 14px;
  height: 30px;
  border-radius: 99px;
  cursor: pointer;
  color: #fff;
  transition: all 0.15s;
  border: none;
  background: linear-gradient(135deg, var(--t), var(--t2));
  margin: 10px 12px 6px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(92, 189, 180, 0.4);
}

body.broker-c360-ui .sb-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.45);
  outline-offset: 2px;
}

body.broker-c360-ui .sb-toggle:hover {
  background: linear-gradient(135deg, var(--t2), #2d8a81);
  box-shadow: 0 4px 14px rgba(92, 189, 180, 0.55);
}

body.broker-c360-ui .sb-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.22s;
}

body.broker-c360-ui #sidebar.sidebar.collapsed .sb-toggle {
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 10px auto 6px;
  border-radius: 50%;
}

body.broker-c360-ui #sidebar.sidebar.collapsed .sb-toggle svg {
  transform: rotate(180deg);
}

/* Middle region: scroll only inside the rail if labels exceed viewport (shell height is fixed) */
body.broker-c360-ui .sb-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 0 6px;
  /* Stops rubber-band / scroll chaining to body — avoids white gaps at scroll bounds */
  background-color: var(--navy);
  overscroll-behavior: contain;
}

/* Profile row pinned to bottom of the sidebar column */
body.broker-c360-ui .sb-bottom {
  padding: 6px 0 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  margin-top: auto;
}

body.broker-c360-ui .sb-profile.sb-item {
  border-left: none;
}

body.broker-c360-ui .sb-profile .sb-lbl {
  font-size: 12px;
}

body.broker-c360-ui .sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s;
  /* Journey: 3px rail — do not use border:none here; it clears this and hides .on accent */
  border-left: 3px solid transparent;
  border-top: none;
  border-right: none;
  border-bottom: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  background: transparent;
  width: 100%;
  text-align: left;
  font: inherit;
}

/* Journey ".mixed-mode" dark-rail + light content: default / hover / active (docs/C360_Cloud_Complete Initial Journey v4.html) */
body.broker-c360-ui #sidebar .sb-item:hover,
body.broker-c360-ui #sidebar .sb-item:focus-visible {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

body.broker-c360-ui #sidebar .sb-nav .sb-item.on,
body.broker-c360-ui #sidebar .sb-nav .sb-item.on:hover,
body.broker-c360-ui #sidebar .sb-nav .sb-item.on:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--t);
}

body.broker-c360-ui .sb-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

body.broker-c360-ui #sidebar .sb-nav .sb-item.on svg,
body.broker-c360-ui #sidebar .sb-nav .sb-item.on:hover svg,
body.broker-c360-ui #sidebar .sb-nav .sb-item.on:focus-visible svg {
  color: var(--t);
}

body.broker-c360-ui #sidebar .sb-nav .sb-item:hover svg,
body.broker-c360-ui #sidebar .sb-nav .sb-item:focus-visible svg {
  color: rgba(255, 255, 255, 0.7);
}

/* Profile row: dimmer default label/icon (journey .mixed-mode .sb-bottom .sb-item) */
body.broker-c360-ui #sidebar .sb-bottom .sb-item {
  color: rgba(255, 255, 255, 0.4);
}

body.broker-c360-ui #sidebar .sb-bottom .sb-item svg {
  color: rgba(255, 255, 255, 0.4);
}

body.broker-c360-ui #sidebar .sb-bottom .sb-item:hover svg,
body.broker-c360-ui #sidebar .sb-bottom .sb-item:focus-visible svg {
  color: rgba(255, 255, 255, 0.7);
}

body.broker-c360-ui .sb-lbl {
  font-family: var(--fb);
  font-size: 13px;
  transition: opacity 0.15s, width 0.15s;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

/* Long labels (e.g. Business Performance Reports): wrap instead of clipping */
body.broker-c360-ui #sidebar .sb-nav .sb-item {
  align-items: flex-start;
  white-space: normal;
  overflow: visible;
}

body.broker-c360-ui #sidebar .sb-nav .sb-item svg {
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}

body.broker-c360-ui #sidebar .sb-nav .sb-lbl {
  white-space: normal;
  line-height: 1.3;
  overflow: visible;
}

body.broker-c360-ui #sidebar.sidebar.collapsed .sb-lbl {
  opacity: 0;
  width: 0;
  pointer-events: none;
}

body.broker-c360-ui .sb-bdg,
body.broker-c360-ui .sb-item .badge {
  font-family: var(--fs);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 99px;
  flex-shrink: 0;
  min-width: 0;
}

/* Feedback & Issues: unread ClickUp resolve — highlight the whole nav row + vivid badge */
body.broker-c360-ui #sidebar .sb-nav .sb-item.sb-has-unread {
  color: #fff;
  background: rgba(92, 189, 180, 0.14);
  border-left-color: var(--t, #5cbdb4);
}

body.broker-c360-ui #sidebar .sb-nav .sb-item.sb-has-unread svg {
  color: var(--t, #5cbdb4);
}

body.broker-c360-ui #sidebar .sb-nav .sb-item.sb-has-unread .sb-lbl {
  font-weight: 700;
  color: #fff;
}

body.broker-c360-ui #sidebar .sb-bdg-unread,
body.broker-c360-ui #sidebar .sb-item.sb-has-unread .sb-bdg {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  color: #12322f !important;
  background: var(--t, #5cbdb4) !important;
  border-radius: 99px;
  box-shadow: 0 0 0 2px rgba(92, 189, 180, 0.35);
}

body.broker-c360-ui #sidebar.sidebar.collapsed .sb-bdg,
body.broker-c360-ui #sidebar.sidebar.collapsed .sb-item .badge {
  display: none;
}

/* ── Collapsible groups (Book of Business / Reports & Insights / Tools & Settings) ── */
body.broker-c360-ui #sidebar .sb-group {
  display: flex;
  flex-direction: column;
}

body.broker-c360-ui #sidebar .sb-group-header {
  justify-content: flex-start;
}

body.broker-c360-ui #sidebar .sb-group-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}

body.broker-c360-ui #sidebar .sb-group-header:hover .sb-group-icon,
body.broker-c360-ui #sidebar .sb-group-header:focus-visible .sb-group-icon {
  color: rgba(255, 255, 255, 0.7);
}

body.broker-c360-ui #sidebar .sb-group-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
  transition: transform 0.2s ease;
}

body.broker-c360-ui #sidebar .sb-group.sb-group-open .sb-group-chevron {
  transform: rotate(180deg);
}

/* Collapsed sidebar rail (icon-only) — chevron has no room, mirror .sb-bdg's hide rule */
body.broker-c360-ui #sidebar.sidebar.collapsed .sb-group-chevron {
  display: none;
}

/* Grid-rows trick: animates height from 0 to content height without a hardcoded max-height */
body.broker-c360-ui #sidebar .sb-group-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
}

body.broker-c360-ui #sidebar .sb-group-body-inner {
  overflow: hidden;
  min-height: 0;
}

body.broker-c360-ui #sidebar .sb-group.sb-group-open > .sb-group-body {
  grid-template-rows: 1fr;
}

@media (prefers-reduced-motion: reduce) {
  body.broker-c360-ui #sidebar .sb-group-body,
  body.broker-c360-ui #sidebar .sb-group-chevron {
    transition: none;
  }
}

body.broker-c360-ui .sb-tip {
  position: fixed;
  left: calc(var(--c360-sbw-actual) + 12px);
  background: var(--navy2);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-family: var(--fb);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  box-shadow: var(--sh2);
  z-index: 10000;
}

body.broker-c360-ui .sb-item:hover .sb-tip {
  opacity: 1;
}

body.broker-c360-ui #sidebar.sidebar:not(.collapsed) .sb-tip {
  opacity: 0 !important;
}

/* Main column — top bar lives in .c360-page-shell; only tabs + content here */
body.broker-c360-ui .c360-main-stack {
  flex: 1;
  min-width: 0;
  min-height: 0;
  /* Cap height so long routes scroll inside #content-container, not the document (avoids white overscroll) */
  max-height: var(--c360-sidebar-vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
}

/* Horizontal tabs (below fixed navbar; main-stack already offsets for navbar height) */
body.broker-c360-ui .c360-top-nav-area {
  flex-shrink: 0;
  position: relative;
  z-index: 1015;
}

body.broker-c360-ui .c360-tn-row {
  display: flex;
  align-items: stretch;
  padding: 0 12px;
  background: #fff;
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
  min-height: var(--c360-top-nav-h);
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Journey v4 parity: .ph-tab / .pt — Montserrat 11.5px / 600, underline rail */
body.broker-c360-ui .c360-tn-row .tn-item {
  display: flex;
  align-items: center;
  gap: 5px;
  height: auto;
  padding: 8px 13px;
  font-family: var(--fs);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ch2);
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: all 0.15s;
  line-height: 1.5;
}

body.broker-c360-ui .c360-tn-row .tn-item:hover,
body.broker-c360-ui .c360-tn-row .tn-item:focus-visible {
  color: var(--ch);
  outline: none;
}

body.broker-c360-ui .c360-tn-row .tn-item.on {
  color: var(--t);
  border-bottom-color: var(--t);
}

body.broker-c360-ui .c360-tn-sep {
  width: 1px;
  align-self: center;
  height: 16px;
  background: rgba(0, 0, 0, 0.08);
  margin: 0 2px;
  flex-shrink: 0;
}

body.broker-c360-ui .c360-tn-bdg:empty {
  display: none;
}

body.broker-c360-ui .c360-tn-bdg {
  margin-left: 4px;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--fs);
  min-width: 0;
}

/* My Book row counts — same teal pill for Claims, Quotes (WIP), and the rest */
body.broker-c360-ui .c360-tn-bdg[data-c360-badge-source='NumberOfClaims'],
body.broker-c360-ui .c360-tn-bdg[data-c360-badge-source='NumberOfPolicies'],
body.broker-c360-ui .c360-tn-bdg[data-c360-badge-source='NumberOfRenewals'],
body.broker-c360-ui .c360-tn-bdg[data-c360-badge-source='NumberOfLeads'],
body.broker-c360-ui .c360-tn-bdg[data-c360-badge-source='NumberOfQuotes'],
body.broker-c360-ui .c360-tn-bdg[data-c360-badge-source='NumberOfQuotesWIP'] {
  background: var(--gp);
  color: var(--g);
  border: 1px solid rgba(5, 150, 105, 0.35);
}

body.broker-c360-ui .c360-tn-bdg[data-c360-badge-source='communicationsNavBadge'] {
  background: var(--tlt);
  color: var(--t2);
  border: 1px solid var(--t);
}

body.broker-c360-ui .c360-tn-bdg[data-c360-badge-source='feedbackIssuesNavBadge'] {
  background: var(--t, #5cbdb4);
  color: #12322f;
  border: 1px solid rgba(18, 50, 47, 0.2);
  font-weight: 800;
}

body.broker-c360-ui .c360-tn-row .tn-item.tn-has-unread {
  color: var(--t, #5cbdb4);
  font-weight: 700;
}

/* Secondary section tabs (Tasks: Outstanding / Completed / Deleted) — fixed height strip above scroll body */
body.broker-c360-ui .c360-main-stack .subnav.vis {
  flex-shrink: 0;
}

/* Content sits below the tab row; only inner spacing (navbar + tabs are outside this box) */
body.broker-c360-ui .c360-main-stack .content#content-container {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 2rem !important;
  margin-left: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--bg);
}