/* =========================
   GLOBAL OVERFLOW RESET 
========================= */
/* Cleanly prevents the whole page from scrolling horizontally without breaking APEX */
body {
    max-width: 100%;
    overflow-x: hidden; 
}

/* =========================
   REMOVE LOGO CLICK OUTLINE
========================= */
.t-Header-logo-link:focus,
.t-Header-logo-link:active,
.t-Header-logo-link:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* =========================
   HEADER LOGO & STRICT OVERFLOW
========================= */
.t-Header-branding {
    width: 100%;
    max-width: 100%; 
    overflow: hidden;
}

.t-Header-logo img {
    width: 150px;
}

/* Protect the logo from getting crushed by the menu */
.t-Header-logo-link {
    flex: 0 0 auto;
    margin-right: 15px;
}

/* Force flex boundaries to respect screen size */
.t-Header-logo {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0; /* CRITICAL: Allows the menu inside to scroll instead of stretching the page */
    overflow: hidden; 
}

/* =========================
   HEADER BUTTON RESET (LEFT + RIGHT)
========================= */
.t-Button--header,
.t-Button--header:hover,
.t-Button--header:active,
.t-Button--header:focus,
.t-Button--header:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* =========================
   BREADCRUMB REGION (PERFECT ALIGNMENT)
========================= */
.t-BreadcrumbRegion {
    background-color: #FFFFFF !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px;
}

/* Center breadcrumb container */
.t-BreadcrumbRegion-body {
    display: flex;
    align-items: center;
}

/* Breadcrumb structure */
.t-BreadcrumbRegion-breadcrumb,
.t-Breadcrumb {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.t-Breadcrumb-item {
    display: flex;
    align-items: center;
}

/* Label alignment */
#c-breadcrumb {
    font-size: 1.5rem;
    display: flex !important;
    align-items: center !important;
    /* gap: 8px; */
    line-height: 1;
    font-weight: 600;
    margin: 0 !important;
    padding: 0 !important;
    color: rgb(189, 189, 189);
}

/* Icon alignment */
#c-breadcrumb .fa {
    font-size: 1.2em;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    color: rgb(189, 189, 189);
}

/* =========================
   HEADER MENU (SCROLL + LAYOUT FIX)
========================= */

/* Dynamic spacing based on side navigation */
body.js-navExpanded #header_menu_reg {
    margin-left: 240px;
    transition: margin-left 0.3s ease;
}

body.js-navCollapsed--icons #header_menu_reg {
    margin-left: 12px;
    transition: margin-left 0.3s ease;
}

/* Main container */
#header_menu_reg {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    transition: margin-left 0.3s ease;
}

/* Scroll container - Scrollbars Restored so it functions normally! */
/* Scroll container - Scrollbars Restored so it functions normally! */
#header_menu_reg .t-LinksList {
    display: flex;
    flex-wrap: nowrap;
    width: 100%; 
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: thin; /* Restores scrollbar for Firefox */
    
    /* FIX: Added 15px horizontal buffer & 12px vertical buffer. 
       When "Tools" scales up, it expands into this padding safely 
       without triggering the phantom scrollbar. */
    padding: 0px 5px; 
    /* padding: 12px 15px;  */
    margin: 0;
}
/* Chrome/Edge Scrollbar Styling */
#header_menu_reg .t-LinksList::-webkit-scrollbar {
    height: 5px; /* Restores a thin, unobtrusive scrollbar for Chrome/Edge */
}

#header_menu_reg .t-LinksList::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

#t_Button_navControl .t-Header-controlsIcon {
    color: #e97c24 !important;
}

/* Menu item - Removed transition from the wrapper so bounds stay static */
#header_menu_reg .t-LinksList-item {
    flex: 0 0 auto;
    border-bottom: none !important;
}

/* Link layout - Animation moved here */
#header_menu_reg .t-LinksList-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    transition: transform 0.2s ease; 
}

/* Apply the scale ONLY to the inner link, not the flex grid item */
#header_menu_reg .t-LinksList-item:hover .t-LinksList-link {
    transform: scale(1.08);
}

/* Icon wrapper */
#header_menu_reg .t-LinksList-icon {
    order: 1;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0;
    padding: 5px 0;
}

/* Font icon */
#header_menu_reg .t-Icon {
    display: block !important;
    margin: 0 auto !important;
    font-size: 16px !important;
    color: #000;
}

/* Label */
#header_menu_reg .t-LinksList-label {
    order: 2;
    font-weight: 600;
    font-size: 11px;
    color: #444;
    letter-spacing: 0.8px;
    text-align: center;
    padding: 0 5px;
}

/* Optimized: Find only top-level tree nodes that directly contain our custom class */
.a-TreeView-node.a-TreeView-node--topLevel:has(> .a-TreeView-content .nav-bottom-divider) {
    border-bottom: 1px solid #ebebebc4;
    margin-bottom: 4px;
    padding-bottom: 4px;
}

/* Force the custom color on left-menu icons */
.a-TreeView-node .menu-icon-color {
    color: #e97c24 !important;
}

/* ============================================================
   RESET NAV HOVER/FOCUS (REMOVE BLUE COLOR & TEXT DECORATION)
   ============================================================ */

/* 1. Header Navigation List Reset */
#header_menu_reg .t-LinksList-link:hover,
#header_menu_reg .t-LinksList-link:active,
#header_menu_reg .t-LinksList-link:focus {
    color: inherit !important;            /* Reverts to your #444 / #000 setting */
    text-decoration: inherit !important;  /* Removes the forced 'none' if desired */
    outline: revert !important;           /* Brings back accessibility outline if needed */
}

/* 2. Side Navigation (TreeView) Reset */
.t-TreeNav .a-TreeView-label:hover,
.t-TreeNav .a-TreeView-label:active,
.t-TreeNav .a-TreeView-label:focus,
.t-TreeNav .a-TreeView-content:hover .a-TreeView-label {
    color: inherit !important;            /* Keeps text color consistent on hover */
    text-decoration: inherit !important;
    background-color: transparent !important; /* Prevents background color shifts */
}

/* 3. Global Reset for specific nav containers only */
.t-Header-branding a:hover, 
.t-TreeNav a:hover {
    text-decoration: inherit !important;
    color: inherit !important;
}


/* ============================================================
   CUSTOM "REPORT A BUG" MENU ITEM STYLING
   ============================================================ */

/* 1. Add the red separator line and top margin */
li.a-TreeView-node:has(.fa-bug) {
    margin-top: 30px !important; 
    padding-top: 2px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* 2. Gray out the text */
li.a-TreeView-node:has(.fa-bug) .a-TreeView-label {
    color: #888888 !important; 
    margin-left: 12px !important;
}