css
/* Force menu structure into horizontal row */
ul.custom-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 6px;
    padding-left: 0;
    list-style: none;
    border-bottom: 2px solid #dee2e6;
    width: 100%;
}

/* Format each item link into a structured tab box with dark text */
ul.custom-tabs .nav-item .nav-link,
ul.custom-tabs li a {
    display: block;
    padding: 10px 20px;
    background-color: #f8f9fa !important;
    color: #212529 !important; /* Forces visible text color instead of template white */
    border: 1px solid #dee2e6;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

/* Style for the hovered tab state */
ul.custom-tabs .nav-item .nav-link:hover,
ul.custom-tabs li a:hover {
    background-color: #e9ecef !important;
    color: #0b5ed7 !important;
}

/* Style for the active/currently viewed tab page */
ul.custom-tabs .nav-item.active .nav-link,
ul.custom-tabs li.active a,
ul.custom-tabs .active > a {
    background-color: #ffffff !important;
    color: #0d6efd !important; /* Highlights active page tab text blue */
    border-color: #dee2e6 #dee2e6 #ffffff !important;
    margin-bottom: -2px;
    font-weight: bold;
    position: relative;
    z-index: 2;
}