@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
/*Main one*/
html, body {
    height:100%;
    font-family: 'Segoe UI', sans-serif;
}

/* Sidebar navigation link styles */
.nav-link:hover {
    background-color: var(--theme-bg-hover);
    border-radius: 4px;
}
.nav-link:hover, .nav-link:focus {
    background-color: var(--theme-primary-dark);
    color: var(--theme-text-inverse) !important;
}
.nav-link {
    width: 100%;
    overflow: hidden;
}

    .nav-link .nav-label {
        display: block;
        font-size: 0.60rem;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }

/* Bootstrap tabs specific styling (Organizations, Agencies, etc.) */
.nav-tabs .nav-link {
    background-color: transparent;
    border: none;
    color: var(--theme-text-secondary);
    padding: 0.75rem 1.5rem;
    border-radius: 0;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}

.nav-tabs .nav-link:hover {
    background: var(--theme-primary-gradient-hover);
    color: #ffffff !important;
    border-bottom-color: transparent;
    border-radius: 8px 8px 0 0;
}

.nav-tabs .nav-link.active {
    background: var(--theme-sidebar-active);
    color: #ffffff !important;
    border-bottom-color: transparent;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    box-shadow: 0 4px 10px var(--theme-sidebar-active-shadow);
}

.nav-tabs .nav-link.active i {
    color: #ffffff !important;
}

.collapse {
    transition: height 0.35s ease !important;
}

/*Ribbon Style*/

.dashboard-ribbon {
    background-color: var(--theme-bg-secondary);
    border-bottom: 1px solid var(--theme-border-color);
    overflow-x: auto;
    white-space: nowrap;
}

.ribbon-item {
    width: 90px;
    height: 80px;
    background: var(--theme-bg-card);
    border-radius: 20px;
    text-align: center;
    box-shadow: var(--theme-shadow-sm);
    padding: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.2s ease;
}

.ribbon-item:hover {
    transform: scale(1.05);
}

.ribbon-label {
    font-size: 0.75rem;
    margin-top: 6px;
    white-space: normal;
}



@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

.raleway-normal {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.bg-root {

}

/* ========================================
   Z-Index Management for SweetAlert2
   ======================================== */

/* SweetAlert within offcanvas - needs higher z-index than offcanvas backdrop
   Bootstrap z-index hierarchy:
   - Offcanvas: 1045
   - Modal backdrop: 1050
   - Modal: 1055
   - Offcanvas backdrop (custom): 1056
   - Offcanvas (custom): 1060
   - SweetAlert with this class: 2100
*/
.swal-above-offcanvas {
    z-index: 2100 !important;
}

/* ========================================
   DARK MODE - Global Bootstrap Utility Overrides
   Exclude DevExtreme elements to prevent conflicts
   ======================================== */

/* Override bg-white in dark mode */
[data-bs-theme="dark"] .bg-white:not([class*="dx-"]):not(.swal2-popup):not(.swal2-container *) {
    background-color: var(--theme-bg-card) !important;
}

/* Override bg-light in dark mode */
[data-bs-theme="dark"] .bg-light:not([class*="dx-"]):not(.swal2-popup):not(.swal2-container *) {
    background-color: var(--theme-bg-tertiary) !important;
}

/* Tab navigation container in dark mode */
[data-bs-theme="dark"] .border-bottom:not([class*="dx-"]) {
    border-bottom-color: var(--theme-border-color) !important;
}

/* Card headers with bg-white in dark mode */
[data-bs-theme="dark"] .card-header.bg-white:not([class*="dx-"]) {
    background-color: var(--theme-bg-tertiary) !important;
    color: var(--theme-text-primary);
}

/* Account Manager / Organization Details tab styling */
[data-bs-theme="dark"] #accountTabs .nav-link:not(.active) {
    color: var(--theme-text-secondary);
}

[data-bs-theme="dark"] #accountTabs .nav-link:hover:not(.active) {
    color: var(--theme-text-primary);
    background-color: var(--theme-bg-hover);
}

/* Organization details tabs */
[data-bs-theme="dark"] .org-detail-tabs .nav-link {
    color: var(--theme-text-secondary);
}

[data-bs-theme="dark"] .org-detail-tabs .nav-link:hover {
    color: var(--theme-primary-light);
    background-color: rgba(129, 140, 248, 0.1);
}

[data-bs-theme="dark"] .org-detail-tabs .nav-link.active {
    color: var(--theme-primary-light);
    border-bottom-color: var(--theme-primary-light);
}