/* =====================================
   NAVIGATION COMPONENT STYLES
   ===================================== */

@layer components {
    /* ============= TOP NAV BASE ============= */
    #top-nav{
        background: var(--surface-primary);
        height: 60px;
    }

    #top-nav > #bottomWrap{
        padding-right: 32px;
    }

    #top-nav #devWrap{
        padding-left: 32px;
    }

    /* ============= TOP NAV ACTIONS ============= */
    .nav.navbar-nav{
        display: flex;
        align-items: center;
        transform: translateX(8px);
    }

    /* Top Nav Profile Link */
    .nav>li.profile-top a{
        padding: 0px 8px !important;
    }

    /* Top Nav User Avatar */
    .nav .user-img{
        position: relative;
        height: 40px;
        width: 40px;
        border-radius: 50%;
        overflow: hidden;
        left: 0px;
        border: none;
    }

    /* Top Nav Link Base */
    .top-nav-link{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
    }

    /* Top Nav Link Icons */
    .top-nav-link img{
        height: 16px;
        width: 16px;
        padding: 0;
        margin: 0;
    }

    /* ============= TOP NAV DROPDOWNS ============= */
    /* Dropdown Active State */
    .nav li.dropdown.open a.top-nav-link{
        background: var(--surface-third);
        box-shadow: none;
        z-index: auto;
    }

    /* Dropdown Menu Base */
    .nav .dropdown-menu{
        background: var(--surface-primary);
        box-shadow: var(--shadow-xl);
        border: 1px solid var(--border) !important;
        border-radius: var(--widget-radius) !important;
    }

    /* Dropdown Menu Header */
    .dropdown-menu > li:first-of-type{
        text-align: left !important;
        font-size: var(--font-size-xl) !important;
        line-height: var(--line-height-tight) !important;
        color: var(--foreground-primary) !important;
        padding: 16px 20px;
    }

    /* Dropdown Refresh Button */
    .dropdown-menu #my-reports-refresh-button{
        position: absolute;
        right: 16px !important;
        top: 10px !important;
        left: auto !important;
        margin-right: 0px !important;
    }

    /* Settings Dropdown Items */
    #settings.dropdown-menu > li:not(:first-of-type){
        border-top: 1px solid var(--border);
        padding: 16px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Settings Dropdown Title */
    #settings.dropdown-menu .menu-title{
        font-size: var(--font-size-base);
        font-weight: 500;
        line-height: var(--line-height-normal);
        color: var(--foreground-primary);
    }

    /* Settings Dropdown Right Content */
    #settings.dropdown-menu li .right{
        height: auto;
        display: flex;
        align-items: center;
        justify-content: end;
    }

    /* ============= PAGE HEADING ============= */
    .page-heading{
        background: var(--surface-primary);
        border-bottom: 1px solid var(--border);
        border-top: 1px solid var(--border);
        padding-right: 32px;
        padding-left: 282px;
    }

    body.slim.show-nav-text .page-heading{
        padding-left: 112px;
    }

    .page-heading h3{
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--foreground-primary);
        margin: 0;
    }

    .range-in [data-role="time-btn"]{
        opacity: 0;
        pointer-events: none;
    }

    .time-selection-parent{
        position: relative;
    }

    body .absolute-range input:first-of-type{
        margin-left: 0px;
    }

    .range-in .absolute-range{
        top: 0;
        left: 0;
    }

    .page-heading h3 a{
        font-size: var(--font-size-lg);
        font-weight: 600;
    }

    .page-heading a{
        color: var(--foreground-second);
        text-decoration: none;
    }

    .page-heading a:hover{
        text-decoration: underline;
    }

    .amount-display-heading{
        background-color: var(--surface-third);
    }

    .amount-display-wrapper span{
        font-size: var(--font-size-base) !important;
        font-weight: 500 !important;
        color: var(--foreground-primary) !important;
    }

    .amount-display-wrapper span.currency{
        color: var(--success) !important;
        font-weight: 600 !important;
    }

    /* ============= SIDEBAR THEME ============= */
    /* Sidebar Auth Image */
    #auth-img{
        border-right: 1px solid var(--border) !important;
    }

    /* Sidebar Base */
    #top{
        background: var(--dark-surface-primary) !important;
        border-right: 1px solid var(--border) !important;
    }

    /* Sidebar Tab Navigation Base */
    #top .ui-tabs-nav li{
        background-color: var(--dark-surface-primary) !important;
    }

    /* Sidebar Tab Selected State */
    #top .ui-tabs-nav li.ui-tabs-selected{
        background-color: var(--dark-surface-second) !important;
    }

    /* Sidebar Tab Hover State */
    #top .ui-tabs-nav li.ui-state-hover, #top .ui-tabs-nav li:hover{
        background-color: var(--dark-surface-third) !important;
    }

    /* Sidebar Tab Link Hover State */
    #top .ui-tabs-nav li.ui-state-hover>a, #top .ui-tabs-nav li:hover>a{
        background-color: var(--dark-surface-third) !important;
    }

    /* Sidebar Tab Active Link */
    #top .ui-tabs-nav li >a.dark-active{
        background-color: var(--dark-surface-third) !important;
    }

    #top:not(.show-nav-text).slim .ui-tabs-nav li .nav-title{
        display: none !important;
    }

    /* Sidebar Tab Title */
    #top .ui-tabs-nav li .nav-title{
        color: var(--dark-foreground-primary) !important;
        font-size: var(--font-size-sm) !important;
        font-family: var(--font-family-sans) !important;
    }

    /* Sidebar Panel Base */
    .ui-tabs-panel{
        border-radius: var(--widget-radius) !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        background: transparent !important;
    }

    /* Sidebar Navigation Item Base */
    .ui-tabs-panel .navigation{
        background-color: var(--dark-surface-second) !important;
        color: var(--dark-foreground-primary) !important;
        font-family: var(--font-family-sans) !important;
        font-size: var(--font-size-sm) !important;
    }

    /* Sidebar Navigation Item Hover */
    .ui-tabs-panel .navigation:hover{
        background-color: var(--dark-surface-third) !important;
    }

    /* Sidebar Navigation Item Selected */
    .ui-tabs-panel .navigation.nav-selected{
        background-color: var(--primary) !important;
        color: var(--color-white) !important;
    }

    /* Sidebar Toggle Button Base */
    [data-role="trigger-nav-size"]{
        color: var(--dark-foreground-second) !important;
    }

    /* Sidebar Toggle Button Hover */
    [data-role="trigger-nav-size"]:hover{
        color: var(--dark-foreground-primary) !important;
    }

    /* ============= SIDEBAR LIGHT THEME ============= */
    /* Light Theme Sidebar Base */
    body.light #top{
        background: var(--surface-primary) !important;
        border-right: 1px solid var(--border) !important;
    }

    /* Light Theme Tab Navigation Base */
    body.light #top .ui-tabs-nav li{
        background-color: var(--surface-primary) !important;
    }

    /* Light Theme Tab Selected State */
    body.light #top .ui-tabs-nav li.ui-tabs-selected{
        background-color: var(--surface-second) !important;
    }

    /* Light Theme Tab Hover State */
    body.light #top .ui-tabs-nav li.ui-state-hover, body.light #top .ui-tabs-nav li:hover{
        background-color: var(--surface-third) !important;
    }

    /* Light Theme Tab Link Hover State */
    body.light #top .ui-tabs-nav li.ui-state-hover>a, body.light #top .ui-tabs-nav li:hover>a{
        background-color: var(--surface-third) !important;
    }

    /* Light Theme Tab Active Link */
    body.light #top .ui-tabs-nav li >a.dark-active{
        background-color: var(--surface-third) !important;
    }

    /* Light Theme Tab Title */
    body.light #top .ui-tabs-nav li .nav-title{
        color: var(--foreground-second) !important;
        font-size: var(--font-size-sm) !important;
        font-family: var(--font-family-sans) !important;
    }

    /* Light Theme Panel Base */
    #top body.light .ui-tabs-panel{
        border-radius: var(--widget-radius) !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border: 1px solid var(--border) !important;
        border-left: none !important;
        background: transparent !important;
        box-shadow: var(--shadow-xl);
    }

    /* Light Theme Navigation Item Base */
    body.light .ui-tabs-panel .navigation{
        background-color: var(--surface-second) !important;
        color: var(--foreground-primary) !important;
        font-family: var(--font-family-sans) !important;
        font-size: var(--font-size-sm) !important;
    }

    /* Light Theme Navigation Item Hover */
    body.light .ui-tabs-panel .navigation:hover{
        background-color: var(--surface-primary) !important;
    }

    /* Light Theme Navigation Item Selected */
    body.light .ui-tabs-panel .navigation.nav-selected{
        background-color: var(--primary) !important;
        color: var(--color-white) !important;
    }

    /* Light Theme Toggle Button Base */
    body.light [data-role="trigger-nav-size"]{
        color: var(--foreground-second) !important;
    }

    /* Light Theme Toggle Button Hover */
    body.light [data-role="trigger-nav-size"]:hover{
        color: var(--foreground-primary) !important;
    }
}