/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ============================================
   PAGE LAYOUT STRUCTURE
   ============================================ */
.page[b-ab5mltoeg9] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-ab5mltoeg9] {
    flex: 1;
    max-width: 100%;
    overflow-x: hidden;
}

/* ============================================
   SIDEBAR NAVIGATION
   ============================================ */
/* Chrome surfaces are tokenised so the navigation frame actually responds to
   the theme toggle. These were hardcoded navy gradients, so switching to dark
   mode left the sidebar, top bar and footer completely unchanged. */
.sidebar[b-ab5mltoeg9] {
    background-image: var(--ss-chrome-gradient);
    display: flex;
    flex-direction: column;
}

/* ============================================
   TOP NAVIGATION BAR - Matching Sidebar Theme
   ============================================ */
.top-row[b-ab5mltoeg9] {
    background: var(--ss-chrome-gradient);
    border-bottom: 1px solid var(--ss-chrome-border);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* ============================================
   AUTH SECTION CONTAINER
   ============================================ */
.auth-section[b-ab5mltoeg9] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ============================================
   NOTIFICATION BELL
   ============================================ */
.notification-container[b-ab5mltoeg9] {
    position: relative;
}

.notification-btn[b-ab5mltoeg9] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.notification-btn:hover[b-ab5mltoeg9] {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.notification-badge[b-ab5mltoeg9] {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--ss-danger);
    color: var(--ss-text-on-primary);
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
    border: 2px solid var(--ss-accent);
}

/* ============================================
   TOP ICONS CONTAINER
   ============================================ */
.top-icons[b-ab5mltoeg9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.top-icon-btn[b-ab5mltoeg9] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.top-icon-btn:hover[b-ab5mltoeg9] {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
    color: white;
}

/* ============================================
   LOGOUT BUTTON
   ============================================ */
.logout-form[b-ab5mltoeg9] {
    margin: 0;
    display: flex;
    align-items: center;
}

.logout-btn[b-ab5mltoeg9] {
    background: rgba(255, 100, 100, 0.2);
    border: 1px solid rgba(255, 100, 100, 0.4);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logout-btn:hover[b-ab5mltoeg9] {
    background: rgba(255, 100, 100, 0.35);
    border-color: rgba(255, 100, 100, 0.6);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 100, 100, 0.2);
}

/* ============================================
   AUTH BUTTONS - Matching Sidebar Nav Style
   ============================================ */
.auth-buttons[b-ab5mltoeg9] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Nav link style for topbar - matches sidebar navigation */
.nav-link-topbar[b-ab5mltoeg9] {
    color: rgba(255, 255, 255, 0.9);
    background: transparent;
    border: none;
    border-radius: 12px;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    font-weight: 500;
    font-size: 0.9rem;
    gap: 0.5rem;
}

.nav-link-topbar i[b-ab5mltoeg9] {
    font-size: 1rem;
    opacity: 0.9;
}

.nav-link-text[b-ab5mltoeg9] {
    white-space: nowrap;
}

/* Hover effect - matches sidebar hover */
.nav-link-topbar:hover[b-ab5mltoeg9] {
    background: rgba(71, 104, 168, 0.25);
    border: 1px solid rgba(91, 141, 184, 0.3);
    box-shadow: 0 4px 20px rgba(71, 104, 168, 0.15);
    color: white;
}

/* Login button - active/highlighted style like sidebar active state */
.nav-link-topbar.active-style[b-ab5mltoeg9] {
    background: rgba(71, 104, 168, 0.35);
    color: white;
}

.nav-link-topbar.active-style[b-ab5mltoeg9]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: linear-gradient(180deg, #7BA1CC 0%, #4768A8 100%); /* theme-exempt: on the chrome gradient */
    border-radius: 0 3px 3px 0;
}

.nav-link-topbar.active-style:hover[b-ab5mltoeg9] {
    background: rgba(71, 104, 168, 0.45);
    border: none;
    box-shadow: 0 4px 20px rgba(71, 104, 168, 0.25);
}

/* ============================================
   RESPONSIVE DESIGN - TABLET
   ============================================ */
@media (max-width: 768px) {
    .top-icons[b-ab5mltoeg9] {
        gap: 0.5rem;
    }

    .auth-section[b-ab5mltoeg9] {
        gap: 0.5rem;
    }
}

/* ============================================
   RESPONSIVE DESIGN - MOBILE
   ============================================ */
@media (max-width: 640px) {
    .top-row[b-ab5mltoeg9] {
        height: 3.5rem;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .top-icons[b-ab5mltoeg9] {
        gap: 0.5rem;
    }

    /* WCAG 2.1 AA: Ensure minimum 44x44px touch target on mobile */
    .top-icon-btn[b-ab5mltoeg9],
    .notification-btn[b-ab5mltoeg9],
    .logout-btn[b-ab5mltoeg9] {
        padding: 0.5rem;
        font-size: 1.1rem;
        min-height: 44px;
        min-width: 44px;
    }

    /* WCAG 2.1 AA: Ensure minimum touch target for nav links on mobile */
    .nav-link-topbar[b-ab5mltoeg9] {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
        min-height: 44px;
    }

    /* Hide text labels on very small screens, show only icons */
    .nav-link-topbar .nav-link-text[b-ab5mltoeg9] {
        display: none;
    }

    .nav-link-topbar[b-ab5mltoeg9] {
        padding: 0.5rem;
        min-width: 44px;
        justify-content: center;
    }

    .nav-link-topbar i[b-ab5mltoeg9] {
        margin: 0;
    }
}

/* ============================================
   DESKTOP LAYOUT
   ============================================ */
@media (min-width: 641px) {
    .page[b-ab5mltoeg9] {
        flex-direction: row;
    }

    .sidebar[b-ab5mltoeg9] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Collapsed sidebar styles */
    .sidebar.collapsed[b-ab5mltoeg9] {
        width: 70px;
    }

    /* Collapsed rail: the 38px logo IS the chip, so the wrapper stops painting
       itself. Previously it kept its padding + gradient + border while the
       logo's 38px min-width overflowed the 22px content box — the logo hung
       past its own container and the chip rendered as a 38x56 pill. */
    .sidebar.collapsed[b-ab5mltoeg9]  .brand-container {
        padding: 0;
        gap: 0;
        justify-content: center;
        background: none;
        border-color: transparent;
        box-shadow: none;
    }

    .sidebar.collapsed[b-ab5mltoeg9]  .navbar-brand,
    .sidebar.collapsed[b-ab5mltoeg9]  .nav-section-label,
    .sidebar.collapsed[b-ab5mltoeg9]  .nav-text,
    .sidebar.collapsed[b-ab5mltoeg9]  .nav-badge,
    .sidebar.collapsed[b-ab5mltoeg9]  .nav-mode-indicator-text,
    .sidebar.collapsed[b-ab5mltoeg9]  .ms-2,
    .sidebar.collapsed[b-ab5mltoeg9]  .collapse-toggle-text {
        display: none !important;
    }

    .sidebar.collapsed[b-ab5mltoeg9]  .brand-logo {
        margin: 0;
    }

    .sidebar.collapsed[b-ab5mltoeg9]  .nav-item {
        padding: 0.15rem 0.5rem;
    }

    .sidebar.collapsed[b-ab5mltoeg9]  .nav-item .nav-link {
        justify-content: center;
        padding: 0.65rem;
    }

    .sidebar.collapsed[b-ab5mltoeg9]  .bi {
        margin-right: 0;
    }

    .sidebar.collapsed[b-ab5mltoeg9]  .nav-mode-indicator {
        justify-content: center;
        padding: 0.35rem 0.5rem;
    }

    .sidebar.collapsed[b-ab5mltoeg9]  .nav-section-divider {
        margin: 0.5rem 0.5rem;
    }

    .sidebar.collapsed[b-ab5mltoeg9]  .collapse-toggle {
        justify-content: center;
        padding: 0;
    }

    .top-row[b-ab5mltoeg9] {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .top-row.auth[b-ab5mltoeg9]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-ab5mltoeg9],
    article[b-ab5mltoeg9] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/* ============================================
   SITE FOOTER - Fine Print & Legal
   ============================================ */
.site-footer[b-ab5mltoeg9] {
    background: var(--ss-chrome-gradient);
    border-top: 1px solid var(--ss-chrome-border);
    padding: 1.5rem 2rem;
    margin-top: auto;
}

.footer-content[b-ab5mltoeg9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-brand[b-ab5mltoeg9] {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.footer-logo[b-ab5mltoeg9] {
    font-size: 1.1rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--ss-accent), var(--ss-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.02em;
}

.footer-llc[b-ab5mltoeg9] {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.05em;
}

.footer-links[b-ab5mltoeg9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-link[b-ab5mltoeg9] {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.8rem;
    transition: color 0.2s ease;
}

.footer-link:hover[b-ab5mltoeg9] {
    color: rgba(255, 255, 255, 0.9);
}

.footer-divider[b-ab5mltoeg9] {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
}

.footer-copyright[b-ab5mltoeg9] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
}

/* Footer responsive adjustments */
@media (min-width: 768px) {
    .footer-content[b-ab5mltoeg9] {
        flex-direction: row;
        justify-content: space-between;
    }

    .footer-copyright[b-ab5mltoeg9] {
        order: -1;
    }
}

@media (max-width: 640px) {
    .site-footer[b-ab5mltoeg9] {
        padding: 1rem;
    }

    .footer-content[b-ab5mltoeg9] {
        gap: 0.5rem;
    }

    .footer-logo[b-ab5mltoeg9] {
        font-size: 1rem;
    }
}

/* ============================================
   BLAZOR ERROR UI
   ============================================ */
#blazor-error-ui[b-ab5mltoeg9] {
    color-scheme: light only;
    background: var(--ss-warning-surface-strong);
    border-top: 3px solid var(--ss-warning);
    bottom: 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 1rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    align-items: center;
    gap: 1rem;
}

#blazor-error-ui .error-message[b-ab5mltoeg9] {
    flex: 1;
    font-weight: 500;
    color: var(--ss-warning-text);
}

#blazor-error-ui .reload[b-ab5mltoeg9] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s ease, transform 0.2s ease;
}

#blazor-error-ui .reload:hover[b-ab5mltoeg9] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#blazor-error-ui .dismiss[b-ab5mltoeg9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    transition: background-color 0.2s ease;
}

#blazor-error-ui .dismiss:hover[b-ab5mltoeg9] {
    background-color: var(--ss-bg-surface-tertiary);
}

/* ============================================
   ERROR BOUNDARY UI - User-Friendly Error Display
   ============================================ */
.error-container[b-ab5mltoeg9] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 2rem;
}

.error-card[b-ab5mltoeg9] {
    background: var(--ss-bg-surface);
    border-radius: 16px;
    padding: 3rem;
    max-width: 500px;
    text-align: center;
    box-shadow: var(--ss-shadow-xl);
    border: 1px solid var(--ss-border);
}

.error-icon[b-ab5mltoeg9] {
    font-size: 4rem;
    color: var(--ss-cta);
    margin-bottom: 1.5rem;
}

.error-card h2[b-ab5mltoeg9] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ss-text-primary);
    margin-bottom: 1rem;
}

.error-message[b-ab5mltoeg9] {
    color: var(--ss-text-muted);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.error-actions[b-ab5mltoeg9] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.error-actions .btn[b-ab5mltoeg9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 10px;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.error-actions .btn-primary[b-ab5mltoeg9] {
    background: var(--ss-brand-gradient);
    border: none;
    color: white;
}

.error-actions .btn-primary:hover[b-ab5mltoeg9] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(58, 86, 144, 0.4);
}

.error-details[b-ab5mltoeg9] {
    text-align: left;
    background: var(--ss-bg-surface-secondary);
    border-radius: 8px;
    padding: 1rem;
}

.error-details summary[b-ab5mltoeg9] {
    cursor: pointer;
    font-weight: 600;
    color: var(--ss-text-muted);
    font-size: 0.875rem;
}

.error-details pre[b-ab5mltoeg9] {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--ss-bg-surface-tertiary);
    color: var(--ss-text-primary);
    border-radius: 6px;
    font-size: 0.75rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* The error and status UI above reads tokens, so it needs no dark overrides.
   The one thing left is a hover surface the light rule never set. */
[data-bs-theme="dark"] #blazor-error-ui .dismiss:hover[b-ab5mltoeg9] {
    background-color: var(--ss-bg-surface-tertiary);
}

/* ============================================
   MOBILE HAMBURGER MENU - Enhanced Navigation
   ============================================ */

/* Mobile menu toggle button (hamburger icon) */
.mobile-menu-toggle[b-ab5mltoeg9] {
    display: none;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    /* WCAG 2.1 AA: Ensure minimum 44x44px touch target */
    min-height: 44px;
    min-width: 44px;
}

.mobile-menu-toggle:hover[b-ab5mltoeg9] {
    background: rgba(255, 255, 255, 0.25);
}


/* Mobile styles - only apply on smaller screens */
@media (max-width: 640px) {
    .mobile-menu-toggle[b-ab5mltoeg9] {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Sidebar slides in from left on mobile */
    .sidebar[b-ab5mltoeg9] {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        transform: translateX(-100%);
        /* visibility, not just transform: a translated-off-screen sidebar is still
           focusable, so every nav link sat in the tab order of every phone page
           ahead of the page's own content. */
        visibility: hidden;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
        z-index: 1050;
        overflow-y: auto;
    }

    /* When mobile menu is open, show the sidebar */
    .page.mobile-menu-open .sidebar[b-ab5mltoeg9] {
        transform: translateX(0);
        visibility: visible;
    }

    /* Show backdrop when menu is open */
    .mobile-menu-backdrop[b-ab5mltoeg9] {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0);
        z-index: 1040;
        pointer-events: none;
        transition: background 0.3s ease;
    }

    .mobile-menu-backdrop.active[b-ab5mltoeg9] {
        display: block;
        pointer-events: auto;
        background: rgba(0, 0, 0, 0.5);
    }

    /* Adjust main content for mobile menu toggle */
    .top-row[b-ab5mltoeg9] {
        justify-content: flex-end !important;
        padding-left: 4rem !important;
    }
}

/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 768px) {
    .sidebar[b-ab5mltoeg9] {
        width: 220px;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ============================================
   SERVICESEEKER - PREMIUM SIDEBAR NAVIGATION
   Matching the design reference exactly
   ============================================ */

/* ============================================
   NAVBAR TOGGLE (Mobile Hamburger Menu)
   ============================================ */
.navbar-toggler[b-6rz3n7zmvd] {
    appearance: none;
    cursor: pointer;
    width: 3rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.5rem;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-toggler:checked[b-6rz3n7zmvd] {
    background-color: rgba(255, 255, 255, 0.15);
}

.navbar-toggler:hover[b-6rz3n7zmvd] {
    background-color: rgba(255, 255, 255, 0.12);
}

/* ============================================
   TOP ROW (Brand Header) - Pill Container
   ============================================ */
.top-row[b-6rz3n7zmvd] {
    background: transparent;
    display: flex;
    align-items: center;
    padding: 1.25rem 1rem 0.75rem 1rem;
    border-bottom: none;
    position: relative;
}

/* Logo Container - Rounded Pill Style */
.brand-container[b-6rz3n7zmvd] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(26, 37, 64, 0.8) 0%, rgba(42, 63, 102, 0.6) 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    width: 100%;
    transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.brand-container:hover[b-6rz3n7zmvd] {
    border-color: rgba(71, 104, 168, 0.3);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
}

.brand-logo[b-6rz3n7zmvd] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    background: var(--ss-brand-gradient);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 12px rgba(58, 86, 144, 0.4);
}

.brand-logo svg[b-6rz3n7zmvd] {
    width: 20px;
    height: 20px;
}

.navbar-brand[b-6rz3n7zmvd] {
    font-size: 1.25rem;
    font-weight: 600;
    color: white !important;
    text-decoration: none !important;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* ============================================
   NAVIGATION SECTIONS
   ============================================ */
.nav-section[b-6rz3n7zmvd] {
    margin-bottom: 0.25rem;
}

.nav-section-label[b-6rz3n7zmvd] {
    padding: 1.25rem 1.25rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.85);
}

.nav-section-label[b-6rz3n7zmvd]::after {
    display: none;
}

.business-identity[b-6rz3n7zmvd] {
    background: rgba(255, 255, 255, 0.07);
    border-left: 3px solid rgba(99, 179, 237, 0.6);
    margin: 0.5rem 0.75rem 0;
    border-radius: 0 6px 6px 0;
}

.business-identity-name[b-6rz3n7zmvd] {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    min-width: 0;
}

.nav-section-divider[b-6rz3n7zmvd] {
    height: 1px;
    background: linear-gradient(to right,
            transparent,
            rgba(255, 255, 255, 0.06),
            transparent);
    margin: 0.5rem 1rem;
}

/* ============================================
   NAVIGATION ITEMS
   ============================================ */
.nav-item[b-6rz3n7zmvd] {
    font-size: 0.95rem;
    padding: 0.15rem 1rem;
    position: relative;
}

.nav-item:first-of-type[b-6rz3n7zmvd] {
    padding-top: 0.5rem;
}

.nav-item:last-of-type[b-6rz3n7zmvd] {
    padding-bottom: 0.5rem;
}

/* ============================================
   NAVIGATION LINKS
   ============================================ */
.nav-item[b-6rz3n7zmvd]  .nav-link {
    color: rgba(255, 255, 255, 0.9);
    background: transparent;
    border: none;
    border-radius: 12px;
    height: auto;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    padding: 0.65rem 1rem;
    width: 100%;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    position: relative;
}

/* Active Link - Blue rounded rectangle with left accent */
.nav-item[b-6rz3n7zmvd]  a.active {
    background: linear-gradient(135deg, rgba(58, 86, 144, 0.4) 0%, rgba(71, 104, 168, 0.25) 100%);
    color: white;
    font-weight: 500;
}

.nav-item[b-6rz3n7zmvd]  a.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 65%;
    background: linear-gradient(180deg, #7BA1CC 0%, #4768A8 100%); /* theme-exempt: on the chrome drawer */
    border-radius: 0 4px 4px 0;
}

/* Hover Effects - Matches New Request Style */
.nav-item[b-6rz3n7zmvd]  .nav-link:hover {
    background: rgba(71, 104, 168, 0.25);
    border: 1px solid rgba(91, 141, 184, 0.3);
    box-shadow: 0 4px 20px rgba(71, 104, 168, 0.15);
    color: white;
}

/* ============================================
   PRIMARY CTA SPECIAL STYLING - Hover effect with accent
   ============================================ */
.nav-item:has(.bi-plus-circle-fill-nav-menu)[b-6rz3n7zmvd]  .nav-link:hover,
.nav-item.quickjob-item[b-6rz3n7zmvd]  .nav-link:hover {
    background: linear-gradient(135deg, rgba(26, 37, 64, 0.9) 0%, rgba(42, 63, 102, 0.7) 100%);
    border: 1px solid rgba(71, 104, 168, 0.3);
    box-shadow: 0 4px 20px rgba(71, 104, 168, 0.15);
}

/* ============================================
   NAVIGATION TEXT
   ============================================ */
.nav-text[b-6rz3n7zmvd] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

/* ============================================
   NAVIGATION BADGE (Unread Count)
   ============================================ */
.nav-badge[b-6rz3n7zmvd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); /* theme-exempt: unread count on the chrome drawer */
    border-radius: 9999px;
    margin-left: 0.5rem;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
    animation: badge-pulse-b-6rz3n7zmvd 2s ease-in-out infinite;
}

@keyframes badge-pulse-b-6rz3n7zmvd {

    0%,
    100% {
        box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
    }

    50% {
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.6);
    }
}

/* ============================================
   ICON STYLING
   ============================================ */
.bi[b-6rz3n7zmvd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    margin-right: 0.75rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Home Icon (Outline - Default) */
.bi-house-door-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z'/%3E%3C/svg%3E");
}

/* Home Icon (Fill - Active state) */
.bi-house-door-fill-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

/* Person Icon (Outline - Default) */
.bi-person-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z'/%3E%3C/svg%3E");
}

/* Person Circle Icon */
.bi-person-circle-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-circle' viewBox='0 0 16 16'%3E%3Cpath d='M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath fill-rule='evenodd' d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z'/%3E%3C/svg%3E");
}

/* Chat Dots Icon (Outline - Default) */
.bi-chat-dots-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3Cpath d='M2.165 15.803l.02-.004c1.83-.363 2.948-.842 3.468-1.105A9.06 9.06 0 0 0 8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.437 10.437 0 0 1-.524 2.318l-.003.011a10.722 10.722 0 0 1-.244.637c-.079.186.074.394.273.362a21.673 21.673 0 0 0 .693-.125zm.8-3.108a1 1 0 0 0-.287-.801C1.618 10.83 1 9.468 1 8c0-3.192 3.004-6 7-6s7 2.808 7 6c0 3.193-3.004 6-7 6a8.06 8.06 0 0 1-2.088-.272 1 1 0 0 0-.711.074c-.387.196-1.24.57-2.634.893a10.97 10.97 0 0 0 .398-2z'/%3E%3C/svg%3E");
}

/* Chat Dots Fill Icon */
.bi-chat-dots-fill-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM5 8a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm4 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E");
}

/* Heart Icon (Outline - Default) */
.bi-heart-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z'/%3E%3C/svg%3E");
}

/* Heart Fill Icon */
.bi-heart-fill-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z'/%3E%3C/svg%3E");
}

/* Star Icon (Outline - Default) */
.bi-star-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z'/%3E%3C/svg%3E");
}

/* Building Icon */
.bi-building-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-building' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1ZM4 5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM7.5 5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM4.5 8a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Z'/%3E%3Cpath d='M2 1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V1Zm11 0H3v14h3v-2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V15h3V1Z'/%3E%3C/svg%3E");
}

/* Building Add Icon */
.bi-building-add-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-building-add' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm.5-5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0Z'/%3E%3Cpath d='M2 1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6.5a.5.5 0 0 1-1 0V1H3v14h3v-2.5a.5.5 0 0 1 .5-.5H8v4H3a1 1 0 0 1-1-1V1Z'/%3E%3Cpath d='M4.5 2a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm-6 3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm-6 3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Z'/%3E%3C/svg%3E");
}

/* Search Icon */
.bi-search-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
}

/* List Check Icon */
.bi-list-check-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

/* Plus Circle Fill Icon - Primary CTA */
.bi-plus-circle-fill-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23667eea' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z'/%3E%3C/svg%3E");
}

/* Lightning Icon - Yellow for QuickJob */
.bi-lightning-charge-fill-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fbbf24' viewBox='0 0 16 16'%3E%3Cpath d='M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z'/%3E%3C/svg%3E");
}

/* Plus Square Icon */
.bi-plus-square-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square' viewBox='0 0 16 16'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
}

/* Box Arrow Left (Logout) Icon */
.bi-box-arrow-left-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-box-arrow-left' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6 12.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v2a.5.5 0 0 1-1 0v-2A1.5 1.5 0 0 1 6.5 2h8A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 5 12.5v-2a.5.5 0 0 1 1 0v2z'/%3E%3Cpath fill-rule='evenodd' d='M.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L1.707 7.5H10.5a.5.5 0 0 1 0 1H1.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3z'/%3E%3C/svg%3E");
}

/* Person Plus (Register) Icon */
.bi-person-plus-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-plus' viewBox='0 0 16 16'%3E%3Cpath d='M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z'/%3E%3Cpath fill-rule='evenodd' d='M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z'/%3E%3C/svg%3E");
}

/* Box Arrow In Right (Login) Icon */
.bi-box-arrow-in-right-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-box-arrow-in-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0v-2z'/%3E%3Cpath fill-rule='evenodd' d='M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z'/%3E%3C/svg%3E");
}

/* Receipt (Invoice) Icon */
.bi-receipt-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-receipt' viewBox='0 0 16 16'%3E%3Cpath d='M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zm.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51z'/%3E%3Cpath d='M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

/* File Earmark Check (Contract) Icon */
.bi-file-earmark-check-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-file-earmark-check' viewBox='0 0 16 16'%3E%3Cpath d='M10.854 7.854a.5.5 0 0 0-.708-.708L7.5 9.793 6.354 8.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z'/%3E%3Cpath d='M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z'/%3E%3C/svg%3E");
}

/* File Earmark Text (Quotes) Icon */
.bi-file-earmark-text-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z'/%3E%3Cpath d='M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z'/%3E%3C/svg%3E");
}

/* Speedometer2 (Dashboard) Icon */
.bi-speedometer2-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z'/%3E%3Cpath fill-rule='evenodd' d='M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z'/%3E%3C/svg%3E");
}

/* Kanban (Projects) Icon */
.bi-kanban-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h11zm-11-1a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2h-11z'/%3E%3Cpath d='M6.5 3a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V3zm-4 0a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V3zm8 0a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V3z'/%3E%3C/svg%3E");
}

/* Lightning Charge (Browse Jobs - Outline) Icon */
.bi-lightning-charge-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09zM4.157 8.5H7a.5.5 0 0 1 .478.647L6.11 13.59l5.732-6.09H9a.5.5 0 0 1-.478-.647L9.89 2.41 4.157 8.5z'/%3E%3C/svg%3E");
}

/* Graph Up (Analytics) Icon */
.bi-graph-up-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z'/%3E%3C/svg%3E");
}

/* Sliders (Preferences) Icon */
.bi-sliders-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3h9.05zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8h2.05zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1h9.05z'/%3E%3C/svg%3E");
}

/* Chevron Left (Collapse) Icon */
.bi-chevron-left-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

/* Chevron Right (Expand) Icon */
.bi-chevron-right-nav-menu[b-6rz3n7zmvd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

/* ============================================
   NAV MODE INDICATOR - Shows current mode
   ============================================ */
.nav-mode-indicator[b-6rz3n7zmvd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
    font-weight: 500;
}

.nav-mode-indicator.business[b-6rz3n7zmvd] {
    color: rgba(255, 255, 255, 0.85);
}

.nav-mode-indicator-text[b-6rz3n7zmvd] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   COLLAPSE TOGGLE BUTTON - Pinned to bottom
   ============================================ */
.collapse-toggle[b-6rz3n7zmvd] {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 44px;
    padding: 0 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: background 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.collapse-toggle:hover[b-6rz3n7zmvd] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.collapse-toggle .bi[b-6rz3n7zmvd] {
    margin: 0;
    width: 14px;
    height: 14px;
    min-width: 14px;
    flex-shrink: 0;
}

.collapse-toggle-text[b-6rz3n7zmvd] {
    white-space: nowrap;
    overflow: hidden;
}

/* ============================================
   SCROLLABLE NAVIGATION
   ============================================ */
/* The nav links used to be gated behind a .navbar-toggler checkbox that was
   removed in c1970bb9 when the hamburger moved to MainLayout. The gate stayed,
   so the drawer opened empty on every phone. The links are always displayed;
   the drawer itself is what slides in and out. */
.nav-scrollable[b-6rz3n7zmvd] {
    display: block;
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
}


/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (min-width: 641px) {
    .navbar-toggler[b-6rz3n7zmvd] {
        display: none;
    }

    .collapse-toggle[b-6rz3n7zmvd] {
        display: flex;
    }

    .nav-scrollable[b-6rz3n7zmvd] {
        display: block;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Minimal Scrollbar */
    .nav-scrollable[b-6rz3n7zmvd]::-webkit-scrollbar {
        width: 4px;
    }

    .nav-scrollable[b-6rz3n7zmvd]::-webkit-scrollbar-track {
        background: transparent;
    }

    .nav-scrollable[b-6rz3n7zmvd]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 4px;
    }

    .nav-scrollable[b-6rz3n7zmvd]::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.25);
    }
}

/* Mobile optimizations */
@media (max-width: 640px) {
    .top-row[b-6rz3n7zmvd] {
        padding: 1rem 0.75rem 0.5rem;
    }

    .brand-container[b-6rz3n7zmvd] {
        padding: 0.5rem 0.75rem;
        border-radius: 12px;
        /* WCAG 2.1 AA: Ensure minimum touch target */
        min-height: 44px;
    }

    .brand-logo[b-6rz3n7zmvd] {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .brand-logo svg[b-6rz3n7zmvd] {
        width: 16px;
        height: 16px;
    }

    .navbar-brand[b-6rz3n7zmvd] {
        font-size: 1.1rem;
    }

    .nav-section-label[b-6rz3n7zmvd] {
        font-size: 0.65rem;
        padding: 1rem 1rem 0.375rem;
    }

    .nav-item[b-6rz3n7zmvd] {
        padding: 0.1rem 0.75rem;
    }

    /* WCAG 2.1 AA: Ensure minimum 44x44px touch target for nav links */
    .nav-item[b-6rz3n7zmvd]  .nav-link {
        padding: 0.65rem 0.875rem;
        min-height: 44px;
        border-radius: 10px;
    }

    .bi[b-6rz3n7zmvd] {
        width: 1.1rem;
        height: 1.1rem;
        margin-right: 0.65rem;
    }

    /* WCAG 2.1 AA: Ensure navbar toggler meets touch target */
    .navbar-toggler[b-6rz3n7zmvd] {
        min-height: 44px;
        min-width: 44px;
    }
}
/* /Components/Shared/Breadcrumb.razor.rz.scp.css */
/* Breadcrumb Component Styles */
.breadcrumb-wrapper[b-k5s644hgvv] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 249, 250, 0.95));
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.breadcrumb-wrapper .breadcrumb[b-k5s644hgvv] {
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: 0.9rem;
}

.breadcrumb-wrapper .breadcrumb-item+.breadcrumb-item[b-k5s644hgvv]::before {
    content: "›";
    font-weight: 600;
    color: var(--ss-primary);
    padding: 0 0.75rem;
}

.breadcrumb-wrapper .breadcrumb-link[b-k5s644hgvv] {
    color: var(--ss-text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

.breadcrumb-wrapper .breadcrumb-link:hover[b-k5s644hgvv] {
    color: var(--ss-primary);
    background: rgba(71, 104, 168, 0.08);
    transform: translateY(-1px);
}

.breadcrumb-wrapper .breadcrumb-link i[b-k5s644hgvv] {
    font-size: 0.95rem;
}

.breadcrumb-wrapper .breadcrumb-item.active[b-k5s644hgvv] {
    color: var(--ss-text-primary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

/* Dark mode support — uses data-bs-theme to match the app toggle */
[data-bs-theme="dark"] .breadcrumb-wrapper[b-k5s644hgvv] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .breadcrumb-wrapper .breadcrumb-link[b-k5s644hgvv] {
    color: rgba(255, 255, 255, 0.7);
}

[data-bs-theme="dark"] .breadcrumb-wrapper .breadcrumb-link:hover[b-k5s644hgvv] {
    color: var(--ss-primary);
    background: rgba(123, 161, 204, 0.15);
}

[data-bs-theme="dark"] .breadcrumb-wrapper .breadcrumb-item.active[b-k5s644hgvv] {
    color: rgba(255, 255, 255, 0.95);
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .breadcrumb-wrapper[b-k5s644hgvv] {
        padding: 0.5rem 1rem;
        margin-bottom: 1rem;
    }

    .breadcrumb-wrapper .breadcrumb[b-k5s644hgvv] {
        font-size: 0.85rem;
    }

    .breadcrumb-wrapper .breadcrumb-item+.breadcrumb-item[b-k5s644hgvv]::before {
        padding: 0 0.5rem;
    }
}
/* /Components/Shared/LoadingSpinner.razor.rz.scp.css */
/* LoadingSpinner Component Styles */
.loading-spinner-container[b-1xu35bosx1] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.loading-spinner-container.full-page[b-1xu35bosx1] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    z-index: 9999;
}

.loading-spinner-content[b-1xu35bosx1] {
    text-align: center;
}

/* Three-ring spinner animation */
.spinner-wrapper[b-1xu35bosx1] {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto;
}

.spinner-ring[b-1xu35bosx1] {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-radius: 50%;
    animation: spin-b-1xu35bosx1 1.5s ease-in-out infinite;
}

.spinner-ring:nth-child(1)[b-1xu35bosx1] {
    border-top-color: var(--ss-primary);
    animation-delay: 0s;
}

.spinner-ring:nth-child(2)[b-1xu35bosx1] {
    border-right-color: var(--ss-accent);
    animation-delay: 0.15s;
}

.spinner-ring:nth-child(3)[b-1xu35bosx1] {
    border-bottom-color: var(--ss-text-muted);
    animation-delay: 0.3s;
}

.spinner-dot[b-1xu35bosx1] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--ss-brand-gradient);
    border-radius: 50%;
    animation: pulse-b-1xu35bosx1 1s ease-in-out infinite;
}

@keyframes spin-b-1xu35bosx1 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse-b-1xu35bosx1 {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.7;
    }
}

/* Size variations */
.loading-sm .spinner-wrapper[b-1xu35bosx1] {
    width: 32px;
    height: 32px;
}

.loading-sm .spinner-ring[b-1xu35bosx1] {
    border-width: 2px;
}

.loading-sm .spinner-dot[b-1xu35bosx1] {
    width: 6px;
    height: 6px;
}

.loading-lg .spinner-wrapper[b-1xu35bosx1] {
    width: 80px;
    height: 80px;
}

.loading-lg .spinner-ring[b-1xu35bosx1] {
    border-width: 4px;
}

.loading-lg .spinner-dot[b-1xu35bosx1] {
    width: 14px;
    height: 14px;
}

/* Message styling */
.loading-message[b-1xu35bosx1] {
    margin-top: 1.25rem;
    color: var(--ss-text-muted);
    font-size: 0.95rem;
    font-weight: 500;
    animation: fadeInUp-b-1xu35bosx1 0.3s ease-out;
}

@keyframes fadeInUp-b-1xu35bosx1 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Progress bar */
.loading-progress[b-1xu35bosx1] {
    margin-top: 1rem;
    width: 200px;
}

.progress-bar[b-1xu35bosx1] {
    height: 6px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill[b-1xu35bosx1] {
    height: 100%;
    background: var(--ss-brand-gradient);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-text[b-1xu35bosx1] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--ss-text-muted);
}

/* Dark mode — uses data-bs-theme to match the app toggle */
[data-bs-theme="dark"] .loading-spinner-container.full-page[b-1xu35bosx1] {
    background: rgba(15, 23, 42, 0.95);
}

[data-bs-theme="dark"] .loading-message[b-1xu35bosx1] {
    color: rgba(255, 255, 255, 0.7);
}

[data-bs-theme="dark"] .progress-bar[b-1xu35bosx1] {
    background: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .progress-text[b-1xu35bosx1] {
    color: rgba(255, 255, 255, 0.6);
}
/* /Components/Shared/NotificationBell.razor.rz.scp.css */
/* ============================================
   NOTIFICATION BELL COMPONENT STYLES
   Scoped styles for the notification bell in the top bar
   ============================================ */

.notification-container[b-yoy1bw2p24] {
    position: relative;
    display: flex;
    align-items: center;
}

/* Match the top-icon-btn style from MainLayout */
button.top-icon-btn[b-yoy1bw2p24] {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    padding: 0.5rem 0.75rem !important;
    color: white !important;
    font-size: 1.25rem !important;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Reset button defaults */
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button.top-icon-btn:hover[b-yoy1bw2p24] {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: scale(1.05);
}

button.top-icon-btn:focus[b-yoy1bw2p24] {
    outline: none !important;
    box-shadow: none !important;
}

.notification-badge[b-yoy1bw2p24] {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--ss-danger);
    color: var(--ss-text-on-primary);
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
    border: 2px solid var(--ss-accent);
}

/* ============================================
   RESPONSIVE DESIGN - MOBILE
   ============================================ */
@media (max-width: 640px) {
    .top-icon-btn[b-yoy1bw2p24] {
        padding: 0.4rem 0.6rem;
        font-size: 1.1rem;
    }
}
/* /Components/Shared/SuccessConfirmation.razor.rz.scp.css */
/* SuccessConfirmation Component Styles */
.success-confirmation[b-vj0exstwru] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.success-confirmation.show[b-vj0exstwru] {
    opacity: 1;
    visibility: visible;
}

.success-content[b-vj0exstwru] {
    text-align: center;
    padding: 3rem;
    max-width: 400px;
    animation: scaleIn-b-vj0exstwru 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes scaleIn-b-vj0exstwru {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Success icon with animated ring */
.success-icon-wrapper[b-vj0exstwru] {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
}

.success-icon[b-vj0exstwru] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: var(--ss-success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px rgba(16, 185, 129, 0.4);
    animation: popIn-b-vj0exstwru 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s both;
}

.success-icon i[b-vj0exstwru] {
    color: white;
    font-size: 2.5rem;
    animation: checkmark-b-vj0exstwru 0.4s ease 0.3s both;
}

@keyframes popIn-b-vj0exstwru {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes checkmark-b-vj0exstwru {
    from {
        opacity: 0;
        transform: scale(0) rotate(-45deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

.success-ring[b-vj0exstwru] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border: 3px solid rgba(16, 185, 129, 0.3);
    border-radius: 50%;
    animation: ringExpand-b-vj0exstwru 0.6s ease 0.2s both;
}

@keyframes ringExpand-b-vj0exstwru {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Text styling */
.success-title[b-vj0exstwru] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ss-text-primary);
    margin-bottom: 0.75rem;
    animation: fadeInUp-b-vj0exstwru 0.4s ease 0.3s both;
}

.success-message[b-vj0exstwru] {
    font-size: 1rem;
    color: var(--ss-text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.6;
    animation: fadeInUp-b-vj0exstwru 0.4s ease 0.4s both;
}

@keyframes fadeInUp-b-vj0exstwru {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.success-extra[b-vj0exstwru] {
    margin-bottom: 1.5rem;
    animation: fadeInUp-b-vj0exstwru 0.4s ease 0.5s both;
}

/* Action buttons */
.success-actions[b-vj0exstwru] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    animation: fadeInUp-b-vj0exstwru 0.4s ease 0.5s both;
}

.success-actions .btn[b-vj0exstwru] {
    min-width: 120px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.success-actions .btn-primary[b-vj0exstwru] {
    background: var(--ss-brand-gradient);
    border: none;
    box-shadow: 0 4px 15px rgba(71, 104, 168, 0.3);
}

.success-actions .btn-primary:hover[b-vj0exstwru] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(71, 104, 168, 0.4);
}

.success-actions .btn-outline-secondary[b-vj0exstwru] {
    border-color: var(--ss-border);
    color: var(--ss-text-muted);
}

.success-actions .btn-outline-secondary:hover[b-vj0exstwru] {
    background: var(--ss-bg-surface-secondary);
}

/* Dark mode — uses data-bs-theme to match the app toggle */
[data-bs-theme="dark"] .success-confirmation[b-vj0exstwru] {
    background: rgba(15, 23, 42, 0.97);
}

[data-bs-theme="dark"] .success-title[b-vj0exstwru] {
    color: rgba(255, 255, 255, 0.95);
}

[data-bs-theme="dark"] .success-message[b-vj0exstwru] {
    color: rgba(255, 255, 255, 0.7);
}

[data-bs-theme="dark"] .success-ring[b-vj0exstwru] {
    border-color: rgba(16, 185, 129, 0.4);
}

[data-bs-theme="dark"] .success-actions .btn-outline-secondary[b-vj0exstwru] {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
}

[data-bs-theme="dark"] .success-actions .btn-outline-secondary:hover[b-vj0exstwru] {
    background: rgba(255, 255, 255, 0.1);
}