/* ============================================================================
   RK LAYOUT SYSTEM - MASTER CONTROL (CLEAN + DETERMINISTIC)
   - Layout/positioning/spacing + universal "frame" for forms
   - INCLUDES COMPLETE V0 LEFT NAVIGATION (icons + selection effects)
   - ALL original colors, sizes, effects preserved
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1) GLOBAL VARIABLES
---------------------------------------------------------------------------- */
:root {
  /* TOP BAR */
  --rk-top-bar-height: 47px;

  /* RIGHT SIDEBAR (layout) */
  --rk-sidebar-width: 281px;
  --rk-sidebar-gap: -1px;
  --rk-right-sidebar-top: 47px;

  /* RESERVED SPACE FOR SIDEBAR (computed) */
  --rk-content-margin-right: 104px;

  /* LEFT MENU FORMS sizing */
  --rk-form-width: 97%;
  --rk-form-max-width: 1520px;
  --rk-form-margin-top: 25px;
  --rk-form-margin-bottom: 15px;
  --rk-form-margin-left: 35px;
  --rk-form-margin-right: 220px;
  --rk-form-padding: 0px;

  /* CONTENT WRAPPER */
  --rk-main-content-top-margin: -65px;
  --rk-main-content-side-margin: 14px;
  --rk-main-content-bottom-margin: 7px;
  --rk-main-content-padding: 56px;

  /* STAGE (background behind forms) */
  --rk-stage-bg: #FAF9FF;

  /* Z-INDEX */
  --rk-z-content: 2;
  --rk-z-sidebar: 1000;
  --rk-z-sidebar-layer: 500;
  --rk-z-overlay: 20000;
  --rk-z-modal: 20010;
  --rk-z-toolbar: 30000;

  /* =========================================================
     V0 LEFT NAVIGATION VARIABLES (PRESERVED)
     ========================================================= */
  --v0-nav-ico-size: 35px;
  --v0-nav-ico-text-gap: 18px;
  
  --v0-main-pill-bg: linear-gradient(180deg, #ffffff 0%, #e0f0fe 50%, #c5e2fb 100%);
  --v0-main-pill-border: #9ecff2;
  --v0-main-pill-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 0 rgba(90, 168, 222, 0.3), 0 2px 4px rgba(15, 23, 42, 0.08), 0 3px 0 #5aa8de;
  --v0-main-text-active: #183746;

  --v0-sub-pill-bg: linear-gradient(180deg, #ffffff 0%, #e0f0fe 55%, #d2e9fd 100%);
  --v0-sub-pill-border: #9ecff2;
  --v0-sub-text: #183746;
  --v0-sub-pill-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1.5px 0 rgba(90, 168, 222, 0.22), 0 1px 2px rgba(15, 23, 42, 0.08), 0 2px 0 #5aa8de;
  
  --v0-dot-idle: #94a3b8;
  --v0-dot-active: #2563eb;
  --v0-dot-size: 6px;
  --v0-dot-size-active: 8px;
  --v0-dot-left: 30px;
  --v0-sub-pad-left: 20px;

  /* Tree hierarchy lines */
  --v0-tree-line: #cbd5e1;
  --v0-tree-line-active: #94a3b8;
  --v0-tree-indent: 22px;

  /* =========================================================
     UNIVERSAL FORM FRAME
     ========================================================= */
  --rk-form-frame-bg: #fafbfc;
  --rk-form-frame-radius: 16px;

  --rk-form-frame-shadow:
    0 80px 200px rgba(0, 0, 0, 0.18),
    0 50px 120px rgba(0, 0, 0, 0.12),
    0 25px 60px rgba(0, 0, 0, 0.08),
    inset -20px -20px 50px rgba(0, 0, 0, 0.02),
    inset 20px 20px 50px rgba(255, 255, 255, 0.95),
    inset -1px -1px 3px rgba(0, 0, 0, 0.05),
    inset 1px 1px 3px rgba(255, 255, 255, 1);
}

/* ----------------------------------------------------------------------------
   1.1) IFRAME RULES
---------------------------------------------------------------------------- */
html.rk-in-iframe body.rk-sidebar-loading #rkRightSidebar,
html.rk-in-iframe #rkRightSidebar,
body.rk-in-iframe #rkRightSidebar {
  display: none !important;
}

/* ----------------------------------------------------------------------------
   2) STAGE BACKGROUND
---------------------------------------------------------------------------- */
html,
body,
.t-PageBody,
.t-Body,
.t-Body-main {
  background: var(--rk-stage-bg) !important;
}

/* ----------------------------------------------------------------------------
   2.2) FOOTER REMOVAL
---------------------------------------------------------------------------- */
.t-Footer { display: none !important; }
.t-Body-content { padding-bottom: 0 !important; }

/* ----------------------------------------------------------------------------
   2.3) HIDE APEX REGION CHROME for Page 0 right sidebar region
---------------------------------------------------------------------------- */
#rightSidebar .t-Region-header,
#rightSidebar .t-Region-title,
#rightSidebar .t-Region-buttons {
  display: none !important;
}
#rightSidebar.t-Region {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ----------------------------------------------------------------------------
   3) MAIN APEX CONTENT WRAPPER - APPLIED TO ALL PAGES
---------------------------------------------------------------------------- */
.t-Body-content {
  border-radius: 24px;
  margin: var(--rk-main-content-top-margin)
          var(--rk-main-content-side-margin)
          var(--rk-main-content-bottom-margin)
          var(--rk-main-content-side-margin);
  padding: var(--rk-main-content-padding);
  position: relative;
  z-index: var(--rk-z-content);
}

/* ----------------------------------------------------------------------------
   4) RIGHT SIDEBAR (fixed)
---------------------------------------------------------------------------- */
#rkRightSidebar.rk-fixed {
  position: fixed !important;
  top: var(--rk-right-sidebar-top) !important;
  right: var(--rk-sidebar-gap) !important;
  width: var(--rk-sidebar-width) !important;
  height: calc(100vh - var(--rk-right-sidebar-top)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  transition: none !important;
  z-index: var(--rk-z-sidebar) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  border-radius: 0 !important;
  box-shadow: 0 10px 30px rgba(2,6,23,.08) !important;
}

/* Fallback selector */
#rkRightSidebar {
  position: fixed !important;
  top: var(--rk-right-sidebar-top) !important;
  right: var(--rk-sidebar-gap) !important;
  width: var(--rk-sidebar-width) !important;
  height: calc(100vh - var(--rk-right-sidebar-top)) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: var(--rk-z-sidebar) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  border-radius: 0 !important;
  box-shadow: 0 10px 30px rgba(2,6,23,.08) !important;
}

/* Hide sidebar on login pages */
body.u-page-login #rkRightSidebar,
body.t-PageBody--login #rkRightSidebar,
body.signin-page #rkRightSidebar {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  right: -9999px !important;
}

/* ----------------------------------------------------------------------------
   4.1) RIGHT SIDEBAR INNER STRUCTURE
---------------------------------------------------------------------------- */
.rk-rs-toolbar {
  margin: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(2,6,23,.04);
  min-height: 44px !important;
  height: 44px !important;
  box-sizing: border-box !important;
}
.rk-rs-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 12px 12px 12px;
}

/* Icon slots */
.rk-icon-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

/* Auto label */
#rkAutoLabel {
  white-space: nowrap;
  font-size: 13.2px;
  font-weight: 600;
  letter-spacing: .11px;
  line-height: 1;
  color: #94a3b8;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Icon button */
#rkIconBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(2,6,23,.04);
  padding: 0;
  margin: 0;
}
#rkIconBtn:hover { background: #f8fafc; }

/* Refresh icon */
#rkRefreshIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: #282a2c;
}

/* Switch toggle */
.rk-switch {
  margin-left: auto;
  position: relative;
  width: 44px;
  height: 22px;
}
.rk-switch input { display: none; }
.rk-slider {
  position: absolute;
  inset: 0;
  background: #e5e7eb;
  border-radius: 999px;
  transition: .2s;
}
.rk-slider:before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  top: 2px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  transition: .2s;
}
.rk-switch input:checked + .rk-slider { background: #10b981; }
.rk-switch input:checked + .rk-slider:before { transform: translateX(22px); }

/* ----------------------------------------------------------------------------
   4.2) CARD GROUPS LAYOUT
---------------------------------------------------------------------------- */
.rk-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 0;
}
.rk-group {
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  overflow: hidden;
}
.rk-group-hd {
  padding: 14px 14px 10px 14px;
  font-size: 14.3px;
  font-weight: 600;
  letter-spacing: .165px;
  color: #0f172a;
  line-height: 1.25;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.rk-group-bd {
  padding: 10px 12px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Group color variants */
.rk-group--danger { border-color: rgba(239,68,68,.35); box-shadow: 0 10px 24px rgba(239,68,68,.10); }
.rk-group--accent { border-color: rgba(59,130,246,.30); box-shadow: 0 10px 24px rgba(59,130,246,.10); }
.rk-group--lead { border-color: rgba(16,185,129,.30); box-shadow: 0 10px 24px rgba(16,185,129,.10); }
.rk-group--quick { border-color: rgba(245,158,11,.30); box-shadow: 0 10px 24px rgba(245,158,11,.10); }
.rk-group--comm { border-color: rgba(168,85,247,.28); box-shadow: 0 10px 24px rgba(168,85,247,.10); }

/* ----------------------------------------------------------------------------
   4.3) CHIP BUTTONS LAYOUT
---------------------------------------------------------------------------- */
.rk-chip {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.12);
  cursor: pointer;
  text-align: left;
  background: #fff;
  transition: transform .12s ease, box-shadow .12s ease;
}
.rk-chip:hover {
  transform: translate3d(0,-1px,0);
  box-shadow: 0 10px 18px rgba(2,6,23,.06);
  background: #fbfdff;
}

.rk-chip-ico {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.rk-chip-ico i {
  font-size: 18px;
  line-height: 1;
}

.rk-chip-label {
  flex: 1 1 auto;
  font-size: 13.2px;
  font-weight: 600;
  letter-spacing: .11px;
  color: #0f172a;
  line-height: 1.15;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.rk-chip-badge {
  flex: 0 0 auto;
  min-width: 28px;
  height: 20px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13.2px;
  font-weight: 700;
  letter-spacing: .3px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #0f172a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.rk-chip-badge.is-zero {
  background: #ef4444 !important;
  color: #ffffff !important;
}

/* Badge color variants */
.rk-badge-red { background: rgba(239,68,68,.14); color: #b91c1c; }
.rk-badge-amber { background: rgba(245,158,11,.16); color: #92400e; }
.rk-badge-blue { background: rgba(59,130,246,.14); color: #1d4ed8; }
.rk-badge-green { background: rgba(16,185,129,.16); color: #065f46; }
.rk-badge-purple { background: rgba(168,85,247,.14); color: #6d28d9; }

/* Icon colors */
.rs-danger { color: #ef4444 !important; }
.rs-warn { color: #f59e0b !important; }
.rs-ok { color: #22c55e !important; }
.rs-muted { color: #64748b !important; }

/* ----------------------------------------------------------------------------
   5) RESERVE SPACE FOR SIDEBAR - APPLIED TO ALL PAGES
---------------------------------------------------------------------------- */
body.rk-has-right-sidebar .t-Body-main,
body.rk-has-right-sidebar .t-Body-content {
  margin-right: var(--rk-content-margin-right) !important;
  width: calc(100% - var(--rk-content-margin-right)) !important;
  max-width: calc(100% - var(--rk-content-margin-right)) !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  position: relative;
  z-index: var(--rk-z-content);
}

body.rk-has-right-sidebar .t-Body-main {
  padding-right: var(--rk-content-margin-right) !important;
}

/* ----------------------------------------------------------------------------
   6) LEFT MENU FORMS (ALL PAGES - UNIFIED LAYOUT)
---------------------------------------------------------------------------- */
.t-Body-content {
  width: var(--rk-form-width) !important;
  max-width: var(--rk-form-max-width) !important;
  margin: var(--rk-form-margin-top)
          var(--rk-form-margin-right)
          var(--rk-form-margin-bottom)
          var(--rk-form-margin-left) !important;
  padding: var(--rk-form-padding) !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.t-Body-main {
  display: flex !important;
  justify-content: center !important;
  background: var(--rk-stage-bg) !important;
}

.t-Body-content .t-Region {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ----------------------------------------------------------------------------
   7) BREADCRUMB HIDE
---------------------------------------------------------------------------- */
.t-BreadcrumbRegion .t-Breadcrumb,
.t-BreadcrumbRegion .t-BreadcrumbList,
.t-BreadcrumbRegion nav[aria-label="Breadcrumb"] {
  display: none !important;
}

/* ----------------------------------------------------------------------------
   8) DIALOG STACKING + SIDEBAR UNDER DIALOGS - CRITICAL FIX
   - Overlay must block clicks (pointer-events: auto)
   - Sidebar stays below overlay (z-index: 1000)
---------------------------------------------------------------------------- */
#rkRightSidebar,
.rk-right-sidebar,
.t-Body-side,
.t-Body-actions {
  z-index: var(--rk-z-sidebar-layer) !important;
}
/* ============================================================================
   APEX SUCCESS/ERROR ALERTS — always above right sidebar + top bar
   ============================================================================ */

/* UT alert containers (covers most APEX versions) */
#t_Alert_Success,
#t_Alert_Error,
#t_Alert_Notification,
.t-Body-alert,
.t-Alert {
  position: fixed !important;
  top: 10px !important;
  right: 12px !important;

  /* IMPORTANT: must be above sidebar (1000) and also above typical headers */
  z-index: 35050 !important;

  /* keep it readable */
  max-width: min(520px, calc(100vw - 24px)) !important;
}

/* If you want it NOT to sit under your browser top edge on small screens */
@media (max-width: 768px) {
  #t_Alert_Success,
  #t_Alert_Error,
  #t_Alert_Notification,
  .t-Body-alert,
  .t-Alert {
    right: 10px !important;
    left: 10px !important;
    max-width: none !important;
  }
}

/* CRITICAL FIX: Overlay must capture clicks to block background interaction */
.ui-widget-overlay,
.t-Dialog-overlay,
.t-Overlay,
.a-Overlay,
.a-DrawerOverlay {
  z-index: var(--rk-z-overlay) !important;
  pointer-events: auto !important;  /* Changed from 'none' to 'auto' - allows overlay to block clicks */
}

/* Dialog/drawer content sits above overlay */
.ui-dialog,
.t-Dialog,
.a-Dialog,
.a-Drawer,
.a-DrawerDialog {
  z-index: var(--rk-z-modal) !important;
}
#t_Alert_Success,
#t_Alert_Error,
#t_Alert_Notification,
.t-Body-alert,
.t-Alert {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 35050 !important;
  max-width: min(640px, calc(100vw - 24px)) !important;
}
/* Dev toolbar stays on top */
#apexDevToolbar,
.a-DevToolbar,
.a-DevToolbar--top,
.a-DevToolbar--bottom {
  position: fixed !important;
  z-index: var(--rk-z-toolbar) !important;
  pointer-events: auto !important;
}

/* ----------------------------------------------------------------------------
   9) RESPONSIVE
---------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body.rk-has-right-sidebar .t-Body-main,
  body.rk-has-right-sidebar .t-Body-content {
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.rk-has-right-sidebar .t-Body-main {
    padding-right: 0 !important;
  }

  #rkRightSidebar,
  #rkRightSidebar.rk-fixed {
    display: none !important;
  }
}

/* ----------------------------------------------------------------------------
   10) ULTIMATE PADDING GUARD
---------------------------------------------------------------------------- */
.t-Body-main,
.t-Body-content {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* ----------------------------------------------------------------------------
   11) TOP BAR SPACING GUARD
---------------------------------------------------------------------------- */
.t-Body-header,
.t-Body-title,
.t-Body-info {
  margin-bottom: 0 !important;
  margin-right: 96px;
  padding-bottom: 0 !important;
}

/* ----------------------------------------------------------------------------
   12) UNIVERSAL FORM FRAME
---------------------------------------------------------------------------- */
.t-Body-content {
  background: var(--rk-form-frame-bg) !important;
  border: none !important;
  border-radius: var(--rk-form-frame-radius) !important;
  box-shadow: var(--rk-form-frame-shadow) !important;
}

/* ============================================================================
   ==================== V0 LEFT NAVIGATION STYLES ============================
   ============================================================================ */

/* ----------------------------------------------------------------------------
   V0 SVG ICONS — APEX Side Navigation (COMPLETE)
   - Main menu: SVG icons with exact sizes and gaps
   - Sub menu: no icons
   - ALL original icon mappings preserved
---------------------------------------------------------------------------- */

/* Icon box (main menu) */
.t-TreeNav span.v0-ico,
.t-TreeNav .t-Icon.v0-ico {
  display: inline-block !important;
  width: var(--v0-nav-ico-size) !important;
  height: var(--v0-nav-ico-size) !important;
  margin-right: 0 !important;
  vertical-align: middle !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* Remove FontAwesome pseudo glyph */
.t-TreeNav span.v0-ico::before,
.t-TreeNav .t-Icon.v0-ico::before {
  content: "" !important;
}

/* GAP BETWEEN ICON AND TEXT (TOP LEVEL ONLY) */
.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content .a-TreeView-label {
  padding-left: var(--v0-nav-ico-text-gap) !important;
}

.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content [style*="grid-column-start: node-content"] {
  padding-left: var(--v0-nav-ico-text-gap) !important;
}

/* MAIN MENU — clear label look (larger, unbold, section-label style) */
.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content .a-TreeView-label {
  font-size: 15.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
  color: #334155 !important;
  line-height: 1.25 !important;
}

.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content {
  min-height: 42px !important;
  align-items: center !important;
}

/* Sub menu: no icons */
.t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) span.v0-ico,
.t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) .t-Icon.v0-ico {
  display: none !important;
}

/* =========================================================
   ICON MAPPINGS (ALL PRESERVED EXACTLY)
   ========================================================= */

/* Dashboard */
.t-TreeNav span.v0-ico.ico-dashboard,
.t-TreeNav .t-Icon.v0-ico.ico-dashboard {
  background-image: url("v0-icons/ico-dashboard.svg") !important;
}

/* Families */
.t-TreeNav span.v0-ico.ico-families,
.t-TreeNav .t-Icon.v0-ico.ico-families {
  background-image: url("v0-icons/ico-families.svg") !important;
}

/* Employees */
.t-TreeNav span.v0-ico.ico-employees,
.t-TreeNav .t-Icon.v0-ico.ico-employees {
  background-image: url("v0-icons/ico-employees.svg") !important;
}

/* Accounts */
.t-TreeNav span.v0-ico.ico-accounts,
.t-TreeNav .t-Icon.v0-ico.ico-accounts {
  background-image: url("v0-icons/ico-accounts.svg") !important;
}

/* Classes */
.t-TreeNav span.v0-ico.ico-classes,
.t-TreeNav .t-Icon.v0-ico.ico-classes {
  background-image: url("v0-icons/ico-classes.svg") !important;
}

/* Scheduling */
.t-TreeNav span.v0-ico.ico-scheduling,
.t-TreeNav .t-Icon.v0-ico.ico-scheduling {
  background-image: url("v0-icons/ico-scheduling.svg") !important;
}

/* Request Desk */
.t-TreeNav span.v0-ico.ico-request-desk,
.t-TreeNav .t-Icon.v0-ico.ico-request-desk {
  background-image: url("v0-icons/ico-request-desk.svg") !important;
}

/* Syllabus */
.t-TreeNav span.v0-ico.ico-syllabus,
.t-TreeNav .t-Icon.v0-ico.ico-syllabus {
  background-image: url("v0-icons/ico-syllabus.svg") !important;
}

/* Email */
.t-TreeNav span.v0-ico.ico-email,
.t-TreeNav .t-Icon.v0-ico.ico-email {
  background-image: url("v0-icons/ico-email.svg") !important;
}

/* Reports */
.t-TreeNav span.v0-ico.ico-reports,
.t-TreeNav .t-Icon.v0-ico.ico-reports {
  background-image: url("v0-icons/ico-reports.svg") !important;
}

/* Settings */
.t-TreeNav span.v0-ico.ico-settings,
.t-TreeNav .t-Icon.v0-ico.ico-settings {
  background-image: url("v0-icons/ico-settings.svg") !important;
}

/* Setup Forms */
.t-TreeNav span.v0-ico.ico-setup,
.t-TreeNav .t-Icon.v0-ico.ico-setup {
  background-image: url("v0-icons/ico-setup.svg") !important;
}

/* User Management */
.t-TreeNav span.v0-ico.ico-user-mgmt,
.t-TreeNav .t-Icon.v0-ico.ico-user-mgmt {
  background-image: url("v0-icons/ico-user-mgmt.svg") !important;
}

/* Task Management */
.t-TreeNav span.v0-ico.ico-task-mgmt,
.t-TreeNav .t-Icon.v0-ico.ico-task-mgmt {
  background-image: url("v0-icons/ico-task-mgmt.svg") !important;
}

/* ============================================================================
   V0 NAV SELECTION EFFECTS v6 — Boxed Pill Style
   - ALL items: bordered box (idle grey)
   - Hide toggle arrow
   - Sub items: indented right (hierarchy) - no tree connector lines
   - Active parent: subtle permanent shade
   - Selected sub item: 3D glossy pill + white dot on right
   - Main items: hover shows blue accent (no permanent active 3D on main)
============================================================================ */

/* Remove UT left bar */
.t-TreeNav a[aria-current="page"]::before,
.t-TreeNav .a-TreeView-content.is-current::before,
.t-TreeNav .a-TreeView-content.is-focused::before {
  content: none !important;
  display: none !important;
}

/* Hide expand/collapse toggle arrow */
.t-TreeNav .a-TreeView-toggle {
  display: none !important;
}

/* ---- Sub item list: right indent for hierarchy, NO tree connector lines ---- */
.t-TreeNav .a-TreeView-node--topLevel > ul.a-TreeView-nodeList,
.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-nodeList {
  position: relative !important;
  margin: 3px 0 6px 0 !important;
  padding: 0 !important;
  border-left: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: opacity 0.1s ease !important;
}

.t-TreeNav .a-TreeView-node--topLevel.v0-parent-active > ul.a-TreeView-nodeList,
.t-TreeNav .a-TreeView-node--topLevel.v0-parent-active > .a-TreeView-nodeList {
  border-left: none !important;
}

/* Remove L-branch pseudo-elements */
.t-TreeNav .a-TreeView-node--topLevel > ul.a-TreeView-nodeList > .a-TreeView-node > .a-TreeView-content::before,
.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-nodeList > .a-TreeView-node > .a-TreeView-content::before,
.t-TreeNav .a-TreeView-node--topLevel.v0-parent-active > ul.a-TreeView-nodeList > .a-TreeView-node > .a-TreeView-content::before,
.t-TreeNav .a-TreeView-node--topLevel.v0-parent-active > .a-TreeView-nodeList > .a-TreeView-node > .a-TreeView-content::before {
  display: none !important;
  content: none !important;
}

/* ================================================================
   MAIN (top level) items — Grey Box Idle
   Anti-blink: will-change pre-allocated, no transition on initial load
   ================================================================ */
.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  will-change: background, border-color !important;
  transition: none !important;
  margin-bottom: 4px !important;
}

/* Active parent — Medium soft downward shade effect (subtle parent indicator) */
.t-TreeNav .a-TreeView-node--topLevel.v0-parent-active > .a-TreeView-content,
.t-TreeNav .a-TreeView-node--topLevel:has(.is-current) > .a-TreeView-content,
.t-TreeNav .a-TreeView-node--topLevel:has(a[aria-current="page"]) > .a-TreeView-content {
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 60%, #dbeafe 100%) !important;
  border: 1.5px solid #93c5fd !important;
  border-bottom-color: #60a5fa !important;
  border-radius: 14px !important;
  color: #1e40af !important;
  box-shadow: 0 3px 6px rgba(59, 130, 246, 0.10), 0 1.5px 0 #93c5fd !important;
  transition: none !important;
}

/* Active parent label */
.t-TreeNav .a-TreeView-node--topLevel.v0-parent-active .a-TreeView-label,
.t-TreeNav .a-TreeView-node--topLevel:has(.is-current) .a-TreeView-label,
.t-TreeNav .a-TreeView-node--topLevel:has(a[aria-current="page"]) .a-TreeView-label {
  color: #1e40af !important;
  font-weight: 650 !important;
}

/* Active parent — hover state */
.t-TreeNav .a-TreeView-node--topLevel.v0-parent-active > .a-TreeView-content:hover,
.t-TreeNav .a-TreeView-node--topLevel:has(.is-current) > .a-TreeView-content:hover,
.t-TreeNav .a-TreeView-node--topLevel:has(a[aria-current="page"]) > .a-TreeView-content:hover {
  background: linear-gradient(180deg, #ffffff 0%, #e0eeff 60%, #bfdbfe 100%) !important;
  border-color: #60a5fa !important;
  box-shadow: 0 3px 8px rgba(59, 130, 246, 0.15), 0 1.5px 0 #3b82f6 !important;
}

/* Main item HOVER (idle only) */
.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content:hover {
  background: #f0f7ff !important;
  border-color: #93c5fd !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.10) !important;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease !important;
}

.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content:hover .a-TreeView-label {
  color: #1e40af !important;
}

/* ================================================================
   SUB items — Prominent size, 20px right indent
   ================================================================ */

/* Sub item LI: indented 20px from left edge */
.t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) {
  width: calc(100% - 20px) !important;
  margin-left: 20px !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

/* Sub item content: prominent height, crisp borders */
.t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) > .a-TreeView-content {
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
  padding: 7px 12px 7px 34px !important;
  margin-bottom: 5px !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  transition: background 0.12s ease, border-color 0.12s ease !important;
}

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

/* Dot on LEFT side for idle sub items */
.t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) > .a-TreeView-content::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #94a3b8 !important;
  opacity: 0.85 !important;
  transition: all 0.12s ease !important;
}

/* ================================================================
   SELECTED SUB ITEM — Full 3D Glossy Shade Pill
   ================================================================ */
.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%, #dbeafe 50%, #bfdbfe 100%) !important;
  border: 1.5px solid #60a5fa !important;
  border-top-color: #93c5fd !important;
  border-bottom-color: #3b82f6 !important;
  border-radius: 12px !important;
  color: #1e3a8a !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 0 rgba(59, 130, 246, 0.35),
    0 3px 6px rgba(37, 99, 235, 0.15),
    0 3px 0 #3b82f6 !important;
  padding-left: 36px !important;
  padding-right: 12px !important;
  transition: all 0.12s ease !important;
}

.t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel).is-current .a-TreeView-label,
.t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) > .a-TreeView-content.is-current .a-TreeView-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1e3a8a !important;
}

/* Dot on LEFT side of selected sub item (white 3D active dot) */
.t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel).is-current > .a-TreeView-content::after,
.t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) > .a-TreeView-content.is-current::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 2.5px rgba(59, 130, 246, 0.6), 0 1px 3px rgba(15, 23, 42, 0.25) !important;
  opacity: 1 !important;
}

/* Selected sub hover */
.t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel).is-current > .a-TreeView-content:hover,
.t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) > .a-TreeView-content.is-current:hover {
  background: linear-gradient(180deg, #ffffff 0%, #c7d2fe 50%, #93c5fd 100%) !important;
  border-color: #3b82f6 !important;
  border-bottom-color: #2563eb !important;
  box-shadow: 
    inset 0 1px 0 #ffffff,
    inset 0 -2px 0 rgba(37, 99, 235, 0.4),
    0 4px 8px rgba(37, 99, 235, 0.2),
    0 3px 0 #2563eb !important;
  transform: translateY(-1px) !important;
}

/* Idle sub hover */
.t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel):not(.is-current) > .a-TreeView-content:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06) !important;
  transform: none !important;
}

/* =========================================================
   LEFT NAV COLLAPSED STATE
   ========================================================= */
.t-PageBody--leftNavCollapsed .t-TreeNav .a-TreeView-label,
.t-PageBody--leftNavCollapsed .t-TreeNav .a-TreeView-content .a-TreeView-label {
  display: none !important;
}

.t-PageBody--leftNavCollapsed .t-TreeNav .a-TreeView-content {
  justify-content: center !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.t-PageBody--leftNavCollapsed .t-TreeNav .a-TreeView-node--topLevel > ul.a-TreeView-nodeList,
.t-PageBody--leftNavCollapsed .t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-nodeList {
  border-left: 0 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.t-PageBody--leftNavCollapsed .t-TreeNav .a-TreeView-node--topLevel > ul.a-TreeView-nodeList > .a-TreeView-node > .a-TreeView-content::before,
.t-PageBody--leftNavCollapsed .t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-nodeList > .a-TreeView-node > .a-TreeView-content::before {
  display: none !important;
}

.t-PageBody--leftNavCollapsed .t-TreeNav .a-TreeView-toggle {
  display: none !important;
}