/* App 139 Navigation Spacing & Pure SVG Left/Right Arrow Toggle — 2026-08-28m
   - EXACT VERTICAL ALIGNMENT (NO UPSIDE SHIFT):
     * TreeNav padding-top: 16px in BOTH expanded and collapsed modes
     * .a-TreeView-node--topLevel:first-child margin-top: 0 in BOTH modes
     * Card height: 50px in BOTH expanded and collapsed modes
     * Card margin-bottom: 6px in BOTH expanded and collapsed modes
     * Item #1 (Dashboard) and all main icons start at the exact same Y pixel position
   - COLLAPSED MODE: 84px sidebar, 52px x 50px icon boxes with 16px equal margins on left and right
   - EXPANDED MODE: 280px sidebar, 50px cards with 38px icons + full labels ('Classes Operations' fits)
   - PURE ARROWS: Left Arrow (←) when Expanded, Right Arrow (→) when Collapsed (22px clean SVG)
   - TOTAL GLYPH SUPPRESSION: Zero dots/cross font collisions
   - UNIFIED 3D THEME: Modern 3D soft-blue styling on toggle button, ikbadmin, and sub-nav items across all pages
*/

:root {
  --v0-nav-width: 280px;
  --v0-nav-collapsed-width: 84px;
  --v0-nav-row-height: 50px;
  --v0-nav-row-margin: 15px;
  --v0-nav-ico-size: 38px;
  --v0-nav-ico-text-gap: 14px;
  --v0-nav-item-end-gap: 16px;
  --v0-nav-sub-indent: 18px;
  --v0-nav-top-pad: 16px;
}

/* ============================================================
   0. UNIFIED TREE CONTAINER VERTICAL ALIGNMENT (BOTH STATES)
   ============================================================ */

html .t-Body-nav,
html #t_Body_nav,
body .t-Body-nav,
body #t_Body_nav {
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

html .t-Body-nav .t-TreeNav,
html #t_Body_nav .t-TreeNav,
html #t_TreeNav,
body .t-Body-nav .t-TreeNav,
body #t_Body_nav .t-TreeNav,
body #t_TreeNav,
.t-TreeNav,
.a-TreeView {
  padding-top: var(--v0-nav-top-pad) !important;
  padding-bottom: 20px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* Unified Icon Sizing (38px x 38px in BOTH states) */
.t-TreeNav span.v0-ico,
.t-TreeNav .t-Icon.v0-ico,
.t-TreeNav .v0-ico,
.t-TreeNav .t-Icon {
  width: var(--v0-nav-ico-size) !important;
  height: var(--v0-nav-ico-size) !important;
  min-width: var(--v0-nav-ico-size) !important;
  min-height: var(--v0-nav-ico-size) !important;
  max-width: var(--v0-nav-ico-size) !important;
  max-height: var(--v0-nav-ico-size) !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  display: block !important;
  flex: 0 0 var(--v0-nav-ico-size) !important;
  margin: 0 !important;
  transform: none !important;
}

/* ============================================================
   1. EXPANDED MODE (280px Width, 50px Height, Locked Vertical Pitch)
   ============================================================ */

html:not(.js-navCollapsed) body:not(.t-PageBody--leftNavCollapsed) .t-Body-nav,
html.js-navExpanded .t-Body-nav,
body.t-PageBody--leftNavExpanded .t-Body-nav,
html:not(.js-navCollapsed) body:not(.t-PageBody--leftNavCollapsed) #t_Body_nav {
  width: var(--v0-nav-width) !important;
  min-width: var(--v0-nav-width) !important;
  max-width: var(--v0-nav-width) !important;
  flex: 0 0 var(--v0-nav-width) !important;
  transition: width 0.15s ease !important;
}

/* Top-level item wrapper in expanded mode */
html:not(.js-navCollapsed) body:not(.t-PageBody--leftNavCollapsed) .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel,
html.js-navExpanded .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel {
  padding: 0 !important;
  padding-right: var(--v0-nav-item-end-gap) !important;
  padding-left: 14px !important;
  margin: 0 0 var(--v0-nav-row-margin) 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  display: block !important;
}

/* Top-level content card in expanded mode (Locked 50px height) */
html:not(.js-navCollapsed) body:not(.t-PageBody--leftNavCollapsed) .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content,
html.js-navExpanded .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content {
  display: flex !important;
  align-items: center !important;
  height: var(--v0-nav-row-height) !important;
  min-height: var(--v0-nav-row-height) !important;
  max-height: var(--v0-nav-row-height) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 12px 0 6px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

/* Expanded Text Labels */
html:not(.js-navCollapsed) body:not(.t-PageBody--leftNavCollapsed) .t-Body-nav .t-TreeNav .a-TreeView-label,
html.js-navExpanded .t-Body-nav .t-TreeNav .a-TreeView-label {
  display: inline-block !important;
  visibility: visible !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 13.5px !important;
  font-weight: 550 !important;
  padding-left: var(--v0-nav-ico-text-gap) !important;
}

/* Sub-items in expanded mode */
html:not(.js-navCollapsed) body:not(.t-PageBody--leftNavCollapsed) .t-Body-nav .t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel),
html.js-navExpanded .t-Body-nav .t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) {
  width: auto !important;
  max-width: none !important;
  margin-left: var(--v0-nav-sub-indent) !important;
  margin-right: 0 !important;
  margin-bottom: 5px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* ============================================================
   2. COLLAPSED MODE (84px Width, Locked 50px Height & Margins)
   ============================================================ */

html.js-navCollapsed .t-Body-nav,
body.t-PageBody--leftNavCollapsed .t-Body-nav,
html:has(#t_Button_navControl[aria-expanded="false"]) .t-Body-nav,
html.js-navCollapsed #t_Body_nav,
body.t-PageBody--leftNavCollapsed #t_Body_nav,
html:has(#t_Button_navControl[aria-expanded="false"]) #t_Body_nav {
  width: var(--v0-nav-collapsed-width) !important;
  min-width: var(--v0-nav-collapsed-width) !important;
  max-width: var(--v0-nav-collapsed-width) !important;
  flex: 0 0 var(--v0-nav-collapsed-width) !important;
  padding: 0 !important;
  margin: 0 !important;
  border-right: 1px solid #e2e8f0 !important;
  box-sizing: border-box !important;
  transition: width 0.15s ease !important;
}

/* Zero out internal container horizontal offsets */
html.js-navCollapsed .t-Body-nav .t-TreeNav,
body.t-PageBody--leftNavCollapsed .t-Body-nav .t-TreeNav,
html:has(#t_Button_navControl[aria-expanded="false"]) .t-Body-nav .t-TreeNav,
html.js-navCollapsed .t-TreeNav .a-TreeView,
body.t-PageBody--leftNavCollapsed .t-TreeNav .a-TreeView,
html:has(#t_Button_navControl[aria-expanded="false"]) .t-TreeNav .a-TreeView,
html.js-navCollapsed #t_TreeNav,
body.t-PageBody--leftNavCollapsed #t_TreeNav,
html:has(#t_Button_navControl[aria-expanded="false"]) #t_TreeNav {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: var(--v0-nav-top-pad) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Hide labels and sub-items in collapsed mode */
html.js-navCollapsed .t-TreeNav .a-TreeView-label,
body.t-PageBody--leftNavCollapsed .t-TreeNav .a-TreeView-label,
html:has(#t_Button_navControl[aria-expanded="false"]) .t-TreeNav .a-TreeView-label,
html.js-navCollapsed .t-TreeNav ul.a-TreeView-nodeList,
body.t-PageBody--leftNavCollapsed .t-TreeNav ul.a-TreeView-nodeList,
html:has(#t_Button_navControl[aria-expanded="false"]) .t-TreeNav ul.a-TreeView-nodeList,
html.js-navCollapsed .t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel),
body.t-PageBody--leftNavCollapsed .t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel),
html:has(#t_Button_navControl[aria-expanded="false"]) .t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Top-level item wrapper in collapsed mode (Locked margin-bottom: 6px) */
html.js-navCollapsed .t-TreeNav .a-TreeView-node--topLevel,
body.t-PageBody--leftNavCollapsed .t-TreeNav .a-TreeView-node--topLevel,
html:has(#t_Button_navControl[aria-expanded="false"]) .t-TreeNav .a-TreeView-node--topLevel {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 0 var(--v0-nav-row-margin) 0 !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Collapsed Icon Card (Locked 50px height, centered horizontally with 16px margins) */
html.js-navCollapsed .t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content,
body.t-PageBody--leftNavCollapsed .t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content,
html:has(#t_Button_navControl[aria-expanded="false"]) .t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: var(--v0-nav-row-height) !important;
  min-height: var(--v0-nav-row-height) !important;
  max-height: var(--v0-nav-row-height) !important;
  padding: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  justify-self: center !important;
  float: none !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

/* Active Parent / Current Page Icon Box (Both states) */
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.v0-parent-active > .a-TreeView-content,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-current > .a-TreeView-content,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-selected > .a-TreeView-content,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel:has(.is-current) > .a-TreeView-content,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel:has(.is-selected) > .a-TreeView-content,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel:has(.a-TreeView-node.is-current) > .a-TreeView-content,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel:has(.a-TreeView-node.is-selected) > .a-TreeView-content,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel:has(.a-TreeView-content.is-current) > .a-TreeView-content,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel:has(.a-TreeView-content.is-selected) > .a-TreeView-content,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel:has(a[aria-current="page"]) > .a-TreeView-content,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel:has(.a-TreeView-nodeList > .a-TreeView-node.is-current) > .a-TreeView-content,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel:has(.a-TreeView-nodeList > .a-TreeView-node.is-selected) > .a-TreeView-content,
.t-TreeNav .a-TreeView-node--topLevel.v0-parent-active > .a-TreeView-content,
.t-TreeNav .a-TreeView-node--topLevel:has(.is-current) > .a-TreeView-content {
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 55%, #dbeafe 100%) !important;
  border: 1.5px solid #93c5fd !important;
  border-top-color: #bfdbfe !important;
  border-bottom-color: #60a5fa !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 6px rgba(59, 130, 246, 0.22),
    0 2px 0 #60a5fa !important;
}

html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.v0-parent-active > .a-TreeView-content .a-TreeView-label,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-current > .a-TreeView-content .a-TreeView-label,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel.is-selected > .a-TreeView-content .a-TreeView-label,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel:has(.is-current) > .a-TreeView-content .a-TreeView-label,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel:has(.is-selected) > .a-TreeView-content .a-TreeView-label,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel:has(.a-TreeView-node.is-current) > .a-TreeView-content .a-TreeView-label,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel:has(.a-TreeView-node.is-selected) > .a-TreeView-content .a-TreeView-label,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel:has(.a-TreeView-content.is-current) > .a-TreeView-content .a-TreeView-label,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel:has(.a-TreeView-content.is-selected) > .a-TreeView-content .a-TreeView-label,
html body .t-Body-nav .t-TreeNav .a-TreeView-node--topLevel:has(a[aria-current="page"]) > .a-TreeView-content .a-TreeView-label,
.t-TreeNav .a-TreeView-node--topLevel.v0-parent-active > .a-TreeView-content .a-TreeView-label,
.t-TreeNav .a-TreeView-node--topLevel:has(.is-current) > .a-TreeView-content .a-TreeView-label {
  color: #1e3a8a !important;
  font-weight: 750 !important;
}

/* ============================================================
   PURE SVG DYNAMIC ARROW TOGGLE (Left ← vs Right →)
   ============================================================ */

/* 1. Strip all font icons, text, and pseudo-elements inside the button */
#t_Button_navControl .t-Icon,
#t_Button_navControl .a-Icon,
#t_Button_navControl span {
  display: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}

#t_Button_navControl .t-Icon::before,
#t_Button_navControl .t-Icon::after,
#t_Button_navControl .a-Icon::before,
#t_Button_navControl .a-Icon::after,
#t_Button_navControl::before {
  display: none !important;
  content: "" !important;
  font-size: 0 !important;
}

/* 2. Style the toggle button container */
#t_Button_navControl {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 3. Left Arrow (←) in Expanded Mode */
html:not(.js-navCollapsed) body:not(.t-PageBody--leftNavCollapsed) #t_Button_navControl::after,
html.js-navExpanded #t_Button_navControl::after,
body.t-PageBody--leftNavExpanded #t_Button_navControl::after {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23183746' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

/* 4. Right Arrow (→) in Collapsed Mode */
html.js-navCollapsed #t_Button_navControl::after,
body.t-PageBody--leftNavCollapsed #t_Button_navControl::after,
html:has(#t_Button_navControl[aria-expanded="false"]) #t_Button_navControl::after {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23183746' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

/* ============================================================
   SUB-ITEMS 3D BLUISH STYLING (ON ALL PAGES)
   ============================================================ */

/* Decent spacing between main item and its first sub-item */
.t-TreeNav .a-TreeView-node--topLevel > ul,
.t-TreeNav .a-TreeView-node--topLevel ul.a-TreeView-nodeList {
  margin-top: 8px !important;
  padding-top: 2px !important;
}

.t-TreeNav .a-TreeView-node--topLevel > ul > .a-TreeView-node:first-child,
.t-TreeNav .a-TreeView-node--topLevel ul.a-TreeView-nodeList > .a-TreeView-node:first-child {
  margin-top: 6px !important;
}

.t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) > .a-TreeView-content {
  position: relative !important;
  background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 60%, #e0effe 100%) !important;
  border: 1.5px solid #bfdbfe !important;
  border-top-color: #dbeafe !important;
  border-bottom-color: #93c5fd !important;
  border-radius: 12px !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 4px rgba(59, 130, 246, 0.08),
    0 2px 0 #93c5fd !important;
  padding: 7px 12px 7px 34px !important;
  margin-bottom: 5px !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.12s ease !important;
}

.t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) .a-TreeView-label {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1e3a8a !important;
}

.t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) > .a-TreeView-content:hover {
  background: linear-gradient(180deg, #ffffff 0%, #dbeafe 55%, #bfdbfe 100%) !important;
  border-color: #60a5fa !important;
  border-bottom-color: #3b82f6 !important;
  color: #1e40af !important;
  box-shadow: 
    inset 0 1px 0 #ffffff,
    0 3px 6px rgba(37, 99, 235, 0.16),
    0 3px 0 #3b82f6 !important;
}

.t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel).is-current > .a-TreeView-content,
.t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) > .a-TreeView-content.is-current {
  background: linear-gradient(180deg, #ffffff 0%, #bfdbfe 50%, #93c5fd 100%) !important;
  border: 1.5px solid #3b82f6 !important;
  border-top-color: #60a5fa !important;
  border-bottom-color: #1d4ed8 !important;
  color: #1e3a8a !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 0 rgba(29, 78, 216, 0.35),
    0 3px 6px rgba(29, 78, 216, 0.2),
    0 3px 0 #1d4ed8 !important;
}

/* ============================================================
   3. Unified Modern 3D Header Buttons on ALL Pages (Page 1, 3, etc.)
   ============================================================ */

html body .t-Header button#t_Button_navControl,
html body .t-Header-controls button#t_Button_navControl,
html body .t-Header-branding button#t_Button_navControl,
html body .t-Header-nav-list button,
html body .t-Header-nav-list a,
html body .t-NavigationBar-item button,
html body .t-NavigationBar-item a,
html body .t-Header-controls .t-Button--header,
html body #apexaccountmenu,
html body .has-username {
  color: #183746 !important;
  -webkit-text-fill-color: #183746 !important;
  background: linear-gradient(180deg, #ffffff 0%, #e0f0fe 55%, #d2e9fd 100%) !important;
  background-color: #e0f0fe !important;
  border: 1px solid #9ecff2 !important;
  border-top-color: #c5e4fa !important;
  border-bottom-color: #5aa8de !important;
  border-radius: 4px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -2px 0 rgba(90, 168, 222, 0.28),
    0 1px 0 rgba(15, 23, 42, 0.05),
    0 2px 4px rgba(15, 23, 42, 0.12),
    0 3px 0 #5aa8de !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

html body .t-Header button#t_Button_navControl:hover,
html body .t-Header-controls button#t_Button_navControl:hover,
html body .t-Header-branding button#t_Button_navControl:hover,
html body .t-Header-nav-list button:hover,
html body .t-Header-nav-list a:hover,
html body .t-NavigationBar-item button:hover,
html body .t-NavigationBar-item a:hover,
html body .t-Header-controls .t-Button--header:hover,
html body #apexaccountmenu:hover,
html body .has-username:hover {
  background: linear-gradient(180deg, #ffffff 0%, #d2e9fd 55%, #c5e2fb 100%) !important;
  border-color: #7eb8e8 !important;
  border-bottom-color: #4a97d0 !important;
  color: #183746 !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -2px 0 rgba(74, 151, 208, 0.3),
    0 3px 6px rgba(15, 23, 42, 0.14),
    0 4px 0 #4a97d0 !important;
}

html body .t-Header button#t_Button_navControl:active,
html body .t-Header-nav-list button:active,
html body .t-NavigationBar-item button:active,
html body #apexaccountmenu:active {
  transform: translateY(1.5px) !important;
  box-shadow:
    inset 0 1px 2px rgba(15, 23, 42, 0.15),
    0 1px 0 #5aa8de !important;
}

/* ============================================================
   ANTI-BLINK NAVIGATION & SMOOTH MODAL DIALOG LOCK
   ============================================================ */
html {
  scrollbar-gutter: stable both-edges !important;
}

/* Prevent layout shift & scrollbar jump when APEX modal dialog opens */
html.apex-page-modal,
body.apex-page-modal,
body.ui-dialog-open {
  overflow-y: auto !important;
  scrollbar-gutter: stable !important;
}

/* Smooth Right Sidebar - locks to viewport without jumping on modal popup */
#rkRightSidebar {
  position: fixed !important;
  right: 0 !important;
  transform: translateZ(0) !important;
  will-change: transform !important;
}

/* Anti-blink pre-render stabilization for Left Navigation */
.t-TreeNav {
  contain: layout style !important;
}

.t-TreeNav .a-TreeView-nodeList {
  animation: none !important;
}

/* ============================================================
   PAGE 3 FAMILY ID 3D BUTTON (+30% WIDER & ENHANCED 3D EFFECT)
   ============================================================ */
.lms-emp-link,
a.lms-emp-link,
html body.page-3 .a-IRR-table td a.lms-emp-link,
html body.page-3 .a-IRR-table td a[data-family-id],
html body.page-3 .a-IRR-table td a[href*="P37_FID"],
html body.page-3 .a-IRR-table td a[href*=":37:"],
html body.page-3 #R72317902369289534 .a-IRR-table td[headers*="72318107475289536"] a,
html body.page-3 #R72317902369289534 .a-IRR-table td[headers="C72318107475289536"] a,
html body.page-3 #R72317902369289534 .a-IRR-table tbody tr td:first-child a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 68px !important;
  padding: 6px 16px !important;
  border-radius: 9px !important;
  background-color: #f0f9ff !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #f0f9ff 45%, #e0f2fe 100%) !important;
  color: #0369a1 !important;
  -webkit-text-fill-color: #0369a1 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border: 1px solid #7dd3fc !important;
  border-top-color: #bae6fd !important;
  border-bottom-color: #38bdf8 !important;
  cursor: pointer !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1.5px 0 rgba(14, 165, 233, 0.25),
    0 2.5px 0 #7dd3fc,
    0 4px 6px rgba(15, 23, 42, 0.08) !important;
  text-decoration: none !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translateZ(0) !important;
}

html body.page-3 .a-IRR-table td a.lms-emp-link:hover,
html body.page-3 .a-IRR-table td a[data-family-id]:hover,
html body.page-3 .a-IRR-table td a[href*="P37_FID"]:hover,
html body.page-3 .a-IRR-table td a[href*=":37:"]:hover,
html body.page-3 #R72317902369289534 .a-IRR-table td[headers*="72318107475289536"] a:hover,
html body.page-3 #R72317902369289534 .a-IRR-table td[headers="C72318107475289536"] a:hover,
html body.page-3 #R72317902369289534 .a-IRR-table tbody tr td:first-child a:hover {
  background: linear-gradient(180deg, #38bdf8 0%, #0ea5e9 100%) !important;
  background-color: #0ea5e9 !important;
  background-image: linear-gradient(180deg, #38bdf8 0%, #0ea5e9 100%) !important;
  border-color: #0284c7 !important;
  border-bottom-color: #0369a1 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 3px 0 #0284c7,
    0 6px 12px rgba(14, 165, 233, 0.40) !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}

html body.page-3 .a-IRR-table td a.lms-emp-link:active,
html body.page-3 .a-IRR-table td a[data-family-id]:active,
html body.page-3 .a-IRR-table td a[href*="P37_FID"]:active,
html body.page-3 .a-IRR-table td a[href*=":37:"]:active,
html body.page-3 #R72317902369289534 .a-IRR-table td[headers*="72318107475289536"] a:active,
html body.page-3 #R72317902369289534 .a-IRR-table td[headers="C72318107475289536"] a:active,
html body.page-3 #R72317902369289534 .a-IRR-table tbody tr td:first-child a:active {
  transform: translateY(2px) !important;
  box-shadow:
    inset 0 1.5px 3px rgba(15, 23, 42, 0.25),
    0 1px 0 #0284c7 !important;
}