/************************************
    GLOBAL RESET FOR DETAILS/SUMMARY
************************************/

/* Hide default marker */
.view-more-details-reorder > summary {
    list-style: none;
}

.view-more-details-reorder > summary::-webkit-details-marker {
    display: none;
}

/* Swap View More / View Less text */
.view-more-details-reorder .view-less-text { display: none; }
.view-more-details-reorder[open] .view-less-text { display: inline; }
.view-more-details-reorder[open] .view-more-text { display: none; }

/* Reordering logic */
.view-more-details-reorder {
    display: flex;
    flex-direction: column;
}

.view-more-details-reorder > summary {
    align-self: flex-start;
}

.view-more-details-reorder[open] > .expandable-content { order: 1; }
.view-more-details-reorder[open] > summary { order: 2; }


/************************************
        SUMMARY WIDGETS (ACCORDION)
************************************/

.summary-widget,
.summary-widget-nested {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    cursor: pointer;
    list-style: none;
}

.summary-widget::-webkit-details-marker,
.summary-widget-nested::-webkit-details-marker {
    display: none;
}

/* Default text color for nested headers */
.summary-widget-nested {
    font-weight: 600;
    color: #e5e7eb;
}

.dark .summary-widget-nested {
    color: #f9fafb;
}

/* Chevron rotate */
.details-widget[open] > summary > .fa-chevron-down {
    transform: rotate(180deg);
}


/************************************
        NEW TAB BUTTON STYLING
************************************/

/* BASE BUTTON */
.tab-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;

    padding: 0.5rem 1.25rem;
    font-weight: 600;
    font-size: 0.875rem;

    transition: all 180ms ease-in-out;
}

/*********** INACTIVE STATE ***********/
.tab-btn:not(.active) {
    background-color: #002536;        /* deep navy */
    border: 2px solid #033551;        /* lighter navy border */
    color: #e0f2fe;                   /* soft ice blue */
}

.tab-btn:not(.active):hover {
    background-color: #044061;        /* teal hover */
    border-color: #ff6b35;            /* orange highlight */
    transform: translateY(-2px);
    box-shadow: 0px 4px 10px rgba(255, 107, 53, 0.25);
}

/*********** ACTIVE STATE ***********/
.tab-btn.active {
    background-color: #ff6b35;        /* orange active */
    border-color: #ff6b35;
    color: #ffffff;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
    transform: translateY(0);
}


/************************************
           DARK MODE
************************************/

.dark .tab-btn:not(.active) {
    background-color: #001a27; 
    border-color: #02283C; 
    color: #9bd8ff;
}

.dark .tab-btn:not(.active):hover {
    background-color: #044061;
    border-color: #ff6b35;
}

.dark .tab-btn.active {
    background-color: #ff6b35;
    color: #ffffff;
    border-color: #ff6b35;
}


/************************************
       CUSTOM SCROLLBAR STYLING
************************************/

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #044061 #001a27;
}


/************************************
           TYPOGRAPHY FIXES
************************************/

.font-extrabold {
    font-weight: 700 !important;
}

/************************************
       GLOBAL LINK COLOR FIX 
************************************/

a {
    color: inherit !important;
    text-decoration: none !important;
}


/* THIN CUSTOM SCROLLBAR */
.thin-scrollbar {
    scrollbar-width: thin;                /* Firefox */
    scrollbar-color: #1670a0 transparent; /* Firefox */
}

.thin-scrollbar::-webkit-scrollbar {
    width: 4px;     /* thin width */
}

.thin-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.thin-scrollbar::-webkit-scrollbar-thumb {
    background-color: #044061;   /* blue */
    border-radius: 10px;
}
