/* PORTAL_SIDEBAR_EXACT_V4 */

:root {
 --portal-sidebar-width:250px;
}

/* One sidebar shell across portal pages */
body .portal-sidebar {
 position:fixed;
 inset:0 auto 0 0;
 z-index:100;
 display:flex;
 flex-direction:column;
 width:var(--portal-sidebar-width);
 height:100vh;
 padding:24px 15px 16px;
 margin:0;
 overflow-x:hidden;
 overflow-y:auto;
 box-sizing:border-box;
 background:linear-gradient(
  165deg,#07172e 0%,#101d42 65%,#0b1840 100%
 );
 border-right:1px solid #26395f;
 box-shadow:none;
 color:#e7eeff;
 font-family:Inter,"Segoe UI",Arial,sans-serif;
}

body .portal-sidebar *,
body .portal-sidebar *::before,
body .portal-sidebar *::after {
 box-sizing:border-box;
}

body .portal-sidebar .portal-brand {
 display:flex;
 align-items:center;
 justify-content:center;
 flex:0 0 auto;
 width:100%;
 min-height:0;
 margin:0;
 padding:8px 8px 28px;
 border:0;
 background:transparent;
}

body .portal-sidebar .portal-logo-link {
 display:flex;
 align-items:center;
 justify-content:center;
 width:100%;
 text-decoration:none;
}

body .portal-sidebar .portal-logo {
 display:block;
 width:150px;
 max-width:100%;
 max-height:90px;
 height:auto;
 object-fit:contain;
}

body .portal-sidebar .portal-nav {
 display:flex;
 flex-direction:column;
 flex:0 0 auto;
 width:100%;
 gap:8px;
 margin:0;
 padding:0;
 border:0;
 background:transparent;
}

body .portal-sidebar .portal-nav-item {
 display:flex;
 align-items:center;
 justify-content:flex-start;
 flex:0 0 auto;
 width:100%;
 min-width:0;
 min-height:48px;
 gap:12px;
 margin:0;
 padding:11px 13px;
 border:1px solid transparent;
 border-radius:11px;
 background:transparent;
 box-shadow:none;
 color:#bfd0eb;
 font:550 13px/1.35 Inter,"Segoe UI",Arial,sans-serif;
 text-decoration:none;
 white-space:normal;
 transition:background .15s,color .15s;
}

body .portal-sidebar .portal-nav-item:hover {
 background:#21396f;
 color:#fff;
}

body .portal-sidebar .portal-nav-item.selected,
body .portal-sidebar .portal-nav-item.active {
 background:linear-gradient(100deg,#128fee,#5140d8);
 border-color:#ffffff1c;
 box-shadow:0 8px 24px #1e64e040;
 color:#fff;
}

body .portal-sidebar .portal-nav-icon {
 display:inline-flex;
 align-items:center;
 justify-content:center;
 flex:0 0 20px;
 width:20px;
 height:20px;
 font-size:20px;
 line-height:1;
}

body .portal-sidebar .portal-sidebar-spacer {
 display:block;
 flex:1 1 auto;
 min-height:24px;
}

body .portal-sidebar .portal-note {
 display:block;
 flex:0 0 auto;
 width:100%;
 margin:0;
 padding:14px;
 border:1px solid #31446c;
 border-radius:14px;
 background:#15295799;
 box-shadow:none;
 color:#bac9e5;
 font:400 12px/1.6 Inter,"Segoe UI",Arial,sans-serif;
}

body .portal-sidebar .portal-note strong {
 display:block;
 margin:0 0 7px;
 color:#fff;
 font-size:13px;
}

body .portal-sidebar .portal-note p {
 margin:0;
 color:#bac9e5;
 font-size:12px;
 line-height:1.6;
}

body .portal-sidebar .portal-simulation {
 display:block;
 margin-top:8px;
 color:#5ce5ee;
 font-size:10px;
}

/* Authenticated Inventory Health only */
body .portal-sidebar .portal-logout {
 display:block;
 flex:0 0 auto;
 width:100%;
 margin:12px 0 0;
 padding:0;
}

body .portal-sidebar .portal-logout button {
 width:100%;
 padding:9px;
 background:transparent;
 border:1px solid #adc0e4;
 border-radius:9px;
 color:#e7eeff;
 cursor:pointer;
}

/* Align existing page shells */
@media(min-width:1051px) {
 body.ih-body {
  --ih-sidebar:var(--portal-sidebar-width);
 }

 body.billing-future-ui .fc-app-shell {
  margin-left:var(--portal-sidebar-width);
 }
}

@media(min-width:1051px) and (max-width:1150px) {
 :root {
  --portal-sidebar-width:220px;
 }
}

/* Preserve Inventory Health's existing tablet layout */
@media(max-width:1050px) {
 body.ih-body .portal-sidebar {
  display:none;
 }
}

/* Preserve Billing's horizontal mobile navigation */
@media(max-width:750px) {
 body.billing-future-ui .portal-sidebar {
  position:relative;
  inset:auto;
  width:100%;
  height:auto;
  padding:12px;
  overflow:visible;
 }

 body.billing-future-ui .portal-brand {
  padding:4px 8px 12px;
 }

 body.billing-future-ui .portal-logo {
  width:110px;
 }

 body.billing-future-ui .portal-nav {
  flex-direction:row;
  overflow-x:auto;
 }

 body.billing-future-ui .portal-nav-item {
  width:auto;
  flex:0 0 auto;
  min-height:40px;
  padding:9px 11px;
  white-space:nowrap;
 }

 body.billing-future-ui .portal-note,
 body.billing-future-ui .portal-sidebar-spacer {
  display:none;
 }

 body.billing-future-ui .fc-app-shell {
  margin-left:0;
 }
}

/* =======================================================
   PORTAL_SIDEBAR_NAV_V5
   Shared collapsible navigation.
   Maximum visible submenu: 5 rows.
   ======================================================= */

/* Override the previous flat-navigation layout */
body .portal-sidebar .portal-nav {
 display:flex;
 flex-direction:column;
 flex-wrap:nowrap;
 flex:0 0 auto;
 gap:16px;
 width:100%;
 min-width:0;
 margin:0;
 padding:0;
 overflow:visible;
}

/* Section container */
body .portal-sidebar .portal-nav-section {
 display:block;
 width:100%;
 min-width:0;
 margin:0;
 padding:0;
 border:1px solid rgba(255,255,255,.08);
 border-radius:14px;
 background:rgba(255,255,255,.025);
 overflow:hidden;
}

body .portal-sidebar .portal-nav-section[open] {
 background:rgba(255,255,255,.035);
}

/* Clickable collapsible heading */
body .portal-sidebar .portal-nav-heading {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
 min-height:47px;
 margin:0;
 padding:12px 13px;
 list-style:none;
 cursor:pointer;
 color:#dde8ff;
 user-select:none;
 font-family:Inter,"Segoe UI",Arial,sans-serif;
 font-size:13px;
 font-weight:750;
 line-height:1.3;
}

body .portal-sidebar .portal-nav-heading::-webkit-details-marker {
 display:none;
}

body .portal-sidebar .portal-nav-heading::marker {
 content:"";
}

body .portal-sidebar .portal-nav-heading:hover {
 background:rgba(255,255,255,.055);
}

body .portal-sidebar .portal-nav-heading:focus-visible {
 outline:2px solid #60b5ff;
 outline-offset:-3px;
 border-radius:10px;
}

body .portal-sidebar .portal-nav-heading-left {
 display:flex;
 align-items:center;
 gap:11px;
 min-width:0;
}

body .portal-sidebar .portal-section-symbol {
 display:inline-flex;
 align-items:center;
 justify-content:center;
 flex:0 0 20px;
 width:20px;
 height:20px;
 font-size:18px;
 color:#a9c2ee;
}

body .portal-sidebar .portal-section-chevron {
 display:inline-flex;
 align-items:center;
 justify-content:center;
 flex:0 0 18px;
 color:#94abd2;
 font-size:19px;
 line-height:1;
 transform:rotate(90deg);
 transition:transform .18s ease;
}

body .portal-sidebar .portal-nav-section[open]
.portal-section-chevron {
 transform:rotate(0deg);
}

/* Five visible rows, scrolling beyond the fifth */
body .portal-sidebar .portal-subnav {
 display:flex;
 flex-direction:column;
 flex-wrap:nowrap;
 gap:7px;
 width:100%;
 min-width:0;
 max-height:calc(5 * 48px + 4 * 7px + 12px);
 margin:0;
 padding:0 8px 12px;
 overflow-x:hidden;
 overflow-y:auto;
 overscroll-behavior:contain;
 scrollbar-width:thin;
 scrollbar-color:#536999 transparent;
}

body .portal-sidebar .portal-subnav::-webkit-scrollbar {
 width:5px;
}

body .portal-sidebar .portal-subnav::-webkit-scrollbar-thumb {
 background:#536999;
 border-radius:8px;
}

/* Unified submenu row */
body .portal-sidebar .portal-subnav-link {
 display:flex;
 align-items:center;
 justify-content:flex-start;
 flex:0 0 48px;
 gap:11px;
 width:100%;
 min-width:0;
 height:48px;
 padding:7px 10px;
 margin:0;
 border:1px solid transparent;
 border-radius:10px;
 background:transparent;
 color:#bfcfeb;
 box-shadow:none;
 text-decoration:none;
 font:550 12.5px/1.3 Inter,"Segoe UI",Arial,sans-serif;
 transition:background .15s,color .15s;
}

body .portal-sidebar .portal-subnav-link:hover {
 background:#23396c;
 color:#fff;
}

body .portal-sidebar .portal-subnav-link.active {
 background:linear-gradient(100deg,#128fee,#5140d8);
 border-color:#ffffff24;
 box-shadow:0 6px 17px #1e64e033;
 color:#fff;
}

body .portal-sidebar .portal-subnav-icon {
 display:inline-flex;
 align-items:center;
 justify-content:center;
 flex:0 0 19px;
 width:19px;
 height:19px;
 font-size:18px;
 line-height:1;
}

body .portal-sidebar .portal-subnav-text {
 display:block;
 min-width:0;
 overflow-wrap:anywhere;
}

/* Mobile: the same collapsible sections */
@media(max-width:750px) {
 body.billing-future-ui .portal-sidebar .portal-nav {
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:visible;
 }

 body.billing-future-ui .portal-sidebar .portal-nav-section {
  width:100%;
 }

 body.billing-future-ui .portal-sidebar .portal-subnav {
  max-height:calc(5 * 48px + 4 * 7px + 12px);
  overflow-y:auto;
 }

 body.billing-future-ui .portal-sidebar .portal-subnav-link {
  width:100%;
  flex:0 0 48px;
  white-space:normal;
 }
}

@media(prefers-reduced-motion:reduce) {
 body .portal-sidebar .portal-section-chevron,
 body .portal-sidebar .portal-subnav-link {
  transition:none;
 }
}

/* =========================================================
   PORTAL_DATA_NAV_V6
   Nested Data navigation.
   Five-row independently scrollable lists.
   ========================================================= */

body .portal-sidebar .portal-data-groups {
 display:flex;
 flex-direction:column;
 gap:8px;
 padding:0 8px 12px;
 min-width:0;
}

body .portal-sidebar .portal-data-group {
 width:100%;
 min-width:0;
 border:1px solid #ffffff12;
 border-radius:10px;
 background:#ffffff05;
 overflow:hidden;
}

body .portal-sidebar .portal-data-heading {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:8px;
 min-height:42px;
 padding:10px;
 color:#cbd9f3;
 cursor:pointer;
 font:600 12px/1.4 Inter,"Segoe UI",Arial,sans-serif;
 list-style:none;
 user-select:none;
}

body .portal-sidebar .portal-data-heading::-webkit-details-marker {
 display:none;
}

body .portal-sidebar .portal-data-heading::marker {
 content:"";
}

body .portal-sidebar .portal-data-heading:hover {
 background:#ffffff0c;
 color:white;
}

body .portal-sidebar .portal-data-heading:focus-visible {
 outline:2px solid #69b9ff;
 outline-offset:-2px;
}

body .portal-sidebar .portal-data-group[open]
.portal-data-heading {
 color:#ffffff;
}

body .portal-sidebar .portal-data-group[open]
.portal-section-chevron {
 transform:rotate(0deg);
}

body .portal-sidebar .portal-data-scroll {
 display:flex;
 flex-direction:column;
 gap:4px;
 width:100%;
 max-height:calc(5 * 38px + 4 * 4px + 8px);
 padding:0 6px 8px;
 overflow-x:hidden;
 overflow-y:auto;
 overscroll-behavior:contain;
 scrollbar-width:thin;
 scrollbar-color:#536999 transparent;
}

body .portal-sidebar .portal-data-scroll::-webkit-scrollbar {
 width:5px;
}

body .portal-sidebar .portal-data-scroll::-webkit-scrollbar-thumb {
 background:#536999;
 border-radius:8px;
}

body .portal-sidebar .portal-data-link {
 display:flex;
 align-items:center;
 flex:0 0 38px;
 min-height:38px;
 padding:7px 10px;
 border:1px solid transparent;
 border-radius:8px;
 background:transparent;
 color:#acbfdf;
 font:500 12px/1.35 Inter,"Segoe UI",Arial,sans-serif;
 text-decoration:none;
 overflow-wrap:anywhere;
}

body .portal-sidebar .portal-data-link:hover {
 background:#21396f;
 color:white;
}

body .portal-sidebar .portal-data-link.active {
 background:linear-gradient(100deg,#128fee,#5140d8);
 border-color:#ffffff24;
 color:white;
 font-weight:650;
}

/* Base-template Data pages use the common 250px offset */
@media(min-width:761px) {
 body .portal-base-main {
  margin-left:var(--portal-sidebar-width);
  min-width:0;
 }
}

/* Preserve legacy Data-page mobile content layout */
@media(max-width:760px) {
 body .portal-base-main {
  margin-left:0;
 }
 body .portal-base-page-sidebar {
  display:none;
 }
}

/* ==================================================
   PORTAL_SIDEBAR_V7
   Collapsed icon rail and floating navigation
   ================================================== */

:root {
 --portal-sidebar-expanded:250px;
 --portal-sidebar-compact:72px;
}

body .portal-sidebar {
 transition:width .2s ease;
}

body .portal-sidebar .portal-brand {
 position:relative;
}

/* Toggle is part of the single shared component */
body .portal-sidebar .portal-sidebar-toggle {
 position:absolute;
 z-index:5;
 top:14px;
 right:9px;
 display:grid;
 place-items:center;
 width:27px;
 height:27px;
 border:1px solid #ffffff30;
 border-radius:8px;
 background:#203766;
 color:#fff;
 cursor:pointer;
 font-size:22px;
 line-height:1;
}

body .portal-sidebar .portal-sidebar-toggle:hover {
 background:#34518a;
}

body .portal-sidebar .portal-sidebar-toggle:focus-visible {
 outline:2px solid #79c9ff;
 outline-offset:2px;
}

/* Default sidebar keeps V6 appearance */
@media(min-width:1051px) {
 body.portal-sidebar-collapsed {
  --portal-sidebar-width:
   var(--portal-sidebar-compact);
 }

 body.portal-sidebar-collapsed .portal-sidebar {
  width:var(--portal-sidebar-compact);
  padding:20px 9px 14px;
 }

 body.portal-sidebar-collapsed
 .portal-sidebar .portal-brand {
  padding:12px 0 38px;
 }

 body.portal-sidebar-collapsed
 .portal-sidebar .portal-logo {
  width:47px;
  max-height:47px;
 }

 body.portal-sidebar-collapsed
 .portal-sidebar .portal-sidebar-toggle {
  top:66px;
  right:13px;
  width:27px;
  height:27px;
 }

 body.portal-sidebar-collapsed
 .portal-sidebar .portal-toggle-glyph {
  transform:rotate(180deg);
 }

 body.portal-sidebar-collapsed
 .portal-sidebar .portal-nav {
  gap:12px;
 }

 body.portal-sidebar-collapsed
 .portal-sidebar .portal-nav-section {
  border:0;
  border-radius:11px;
  background:transparent;
  overflow:visible;
 }

 body.portal-sidebar-collapsed
 .portal-sidebar .portal-nav-heading {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:48px;
  padding:10px 0;
  border-radius:11px;
 }

 body.portal-sidebar-collapsed
 .portal-sidebar .portal-nav-heading-left {
  justify-content:center;
  width:100%;
 }

 body.portal-sidebar-collapsed
 .portal-sidebar .portal-section-symbol {
  width:25px;
  height:25px;
  flex-basis:25px;
  font-size:24px;
 }

 body.portal-sidebar-collapsed
 .portal-sidebar .portal-nav-heading-left > span:last-child,
 body.portal-sidebar-collapsed
 .portal-sidebar .portal-nav-heading
 .portal-section-chevron,
 body.portal-sidebar-collapsed
 .portal-sidebar .portal-nav-section > .portal-subnav,
 body.portal-sidebar-collapsed
 .portal-sidebar .portal-data-groups {
  display:none !important;
 }

 body.portal-sidebar-collapsed
 .portal-sidebar .portal-nav-section.portal-rail-active
 .portal-nav-heading {
  background:linear-gradient(135deg,#128fee,#5140d8);
  color:#fff;
 }

 body.portal-sidebar-collapsed
 .portal-sidebar .portal-sidebar-spacer {
  flex:1;
 }

 body.portal-sidebar-collapsed
 .portal-sidebar .portal-note {
  display:none;
 }

 body.portal-sidebar-collapsed
 .portal-sidebar .portal-logout {
  margin-top:10px;
 }

 body.portal-sidebar-collapsed
 .portal-sidebar .portal-logout button {
  font-size:0;
  padding:10px 4px;
 }

 body.portal-sidebar-collapsed
 .portal-sidebar .portal-logout button::before {
  content:"⇥";
  font-size:22px;
  color:#e7eeff;
 }

 /* Dashboard page content offsets */
 body.portal-sidebar-collapsed.billing-future-ui
 .fc-app-shell {
  margin-left:var(--portal-sidebar-compact);
 }

 body.portal-sidebar-collapsed.ih-body {
  --ih-sidebar:var(--portal-sidebar-compact);
 }

 body.portal-sidebar-collapsed
 .portal-base-main {
  margin-left:var(--portal-sidebar-compact);
 }
}

/* Floating submenu surface */
.portal-sidebar-flyout {
 position:fixed;
 z-index:20000;
 width:275px;
 max-width:calc(100vw - 90px);
 max-height:calc(100vh - 24px);
 overflow-y:auto;
 padding:12px;
 border:1px solid #344b79;
 border-radius:14px;
 background:linear-gradient(
  155deg,#101f43,#14254d
 );
 box-shadow:0 18px 45px #06102070;
 color:#e7eeff;
 font-family:Inter,"Segoe UI",Arial,sans-serif;
}

.portal-sidebar-flyout[hidden] {
 display:none !important;
}

.portal-sidebar-flyout *,
.portal-sidebar-flyout *::before,
.portal-sidebar-flyout *::after {
 box-sizing:border-box;
}

.portal-sidebar-flyout .portal-nav-section {
 display:block;
 border:0;
 background:transparent;
}

.portal-sidebar-flyout .portal-nav-heading {
 display:flex;
 align-items:center;
 justify-content:space-between;
 min-height:40px;
 padding:8px;
 color:#fff;
 font-size:14px;
 font-weight:700;
 list-style:none;
}

.portal-sidebar-flyout .portal-nav-heading::-webkit-details-marker,
.portal-sidebar-flyout .portal-data-heading::-webkit-details-marker {
 display:none;
}

.portal-sidebar-flyout .portal-nav-heading-left {
 display:flex;
 align-items:center;
 gap:10px;
}

.portal-sidebar-flyout .portal-nav-heading
.portal-section-chevron {
 display:none;
}

.portal-sidebar-flyout .portal-subnav,
.portal-sidebar-flyout .portal-data-groups {
 display:flex;
 flex-direction:column;
 gap:6px;
 padding:5px 0;
}

.portal-sidebar-flyout .portal-subnav-link,
.portal-sidebar-flyout .portal-data-link {
 display:flex;
 align-items:center;
 gap:10px;
 min-height:40px;
 padding:9px 11px;
 border-radius:9px;
 color:#c9daf5;
 text-decoration:none;
 font-size:13px;
}

.portal-sidebar-flyout .portal-subnav-link.active,
.portal-sidebar-flyout .portal-data-link.active {
 background:linear-gradient(100deg,#128fee,#5140d8);
 color:white;
}

.portal-sidebar-flyout .portal-data-group {
 border:1px solid #ffffff19;
 border-radius:10px;
 overflow:hidden;
}

.portal-sidebar-flyout .portal-data-heading {
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:12px;
 color:#dce8fc;
 cursor:pointer;
 list-style:none;
 font-size:13px;
}

.portal-sidebar-flyout .portal-data-scroll {
 display:flex;
 flex-direction:column;
 gap:3px;
 max-height:calc(5 * 38px + 4 * 4px + 8px);
 padding:3px 6px 8px;
 overflow-y:auto;
 scrollbar-width:thin;
 scrollbar-color:#536999 transparent;
}

.portal-sidebar-flyout .portal-data-link {
 flex:0 0 38px;
 min-height:38px;
 padding:7px 9px;
}

.portal-sidebar-flyout .portal-data-heading:hover,
.portal-sidebar-flyout .portal-subnav-link:hover,
.portal-sidebar-flyout .portal-data-link:hover {
 background:#253e71;
 color:#fff;
}

/* Preserve existing responsive dashboard layouts */
@media(max-width:1050px) {
 body.ih-body .portal-sidebar {
  display:none;
 }
}

@media(max-width:760px) {
 body .portal-sidebar-toggle {
  display:none !important;
 }

 body .portal-sidebar-flyout {
  display:none !important;
 }

 body .portal-base-main {
  margin-left:0;
 }

 body:not(.billing-future-ui):not(.ih-body)
 .portal-sidebar {
  display:none;
 }
}

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