/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-frytwz43mg] {
    position: relative;
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    background: #f8f9fa;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Create full-height sidebar background that extends with page content */
.page.authenticated[b-frytwz43mg] {
    position: relative;
    height: auto;
    min-height: 100vh;
}

/* Extend sidebar background using absolute positioning that matches page height */
.page.authenticated[b-frytwz43mg]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    height: 100%;
    min-height: 100vh;
    background: #1a2744;
    z-index: 0;
    pointer-events: none;
    transition: width 0.3s ease, opacity 0.3s ease;
}

/* Hide background when sidebar is collapsed */
.sidebar-toggle-input:not(:checked) ~ .page.authenticated[b-frytwz43mg]::after {
    width: 0;
    opacity: 0;
}

.page.authenticated .sidebar[b-frytwz43mg] {
    position: relative;
    z-index: 1;
    background: #1a2744;
}

main[b-frytwz43mg] {
    flex: 1;
    background: #f5f5f5;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.sidebar-toggle-input[b-frytwz43mg],
input.sidebar-toggle-input[b-frytwz43mg],
input#sidebar-toggle[b-frytwz43mg],
input[type="checkbox"].sidebar-toggle-input[b-frytwz43mg],
input[type="checkbox"]#sidebar-toggle[b-frytwz43mg] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: fixed !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    transform: scale(0) translateX(-9999px) translateY(-9999px) !important;
    pointer-events: none !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    z-index: -9999 !important;
    transition: none !important;
}

.sidebar-backdrop[b-frytwz43mg] {
    display: none;
}

.sidebar[b-frytwz43mg] {
    background: #1a2744;
    border-right: 1px solid #dee2e6;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
    width: 250px;
    transition: all 0.3s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Extend sidebar background to full page height */
.page.authenticated .sidebar[b-frytwz43mg]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1a2744;
    z-index: -1;
    min-height: 100vh;
}

.menu-toggle-btn[b-frytwz43mg] {
    background: transparent;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    margin: 0 16px 0 0;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.5rem;
    width: 3.5rem;
    flex-shrink: 0;
}

.menu-toggle-btn:hover[b-frytwz43mg] {
    background: rgba(255, 255, 255, 0.1);
}

.menu-icon[b-frytwz43mg] {
    display: block;
    line-height: 1;
    font-size: 24px;
    margin: 0;
    padding: 0;
}

.top-row[b-frytwz43mg] {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5364 100%);
    color: white;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    justify-content: flex-end;
    height: 3.5rem;
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

    .top-row[b-frytwz43mg]  a, .top-row[b-frytwz43mg]  .btn-link, .top-row a[b-frytwz43mg] {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.9);
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .top-row[b-frytwz43mg]  a:hover, .top-row[b-frytwz43mg]  .btn-link:hover, .top-row a:hover[b-frytwz43mg] {
        color: #ffffff;
    }

    .welcome-text[b-frytwz43mg] {
        color: rgba(255, 255, 255, 0.95);
        font-weight: 500;
        margin-right: auto;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .welcome-icon[b-frytwz43mg] {
        font-size: 18px;
        color: rgba(255, 255, 255, 0.9);
    }

    .user-role[b-frytwz43mg] {
        color: rgba(255, 255, 255, 0.7);
        font-size: 13px;
        font-weight: 400;
    }

    .logout-btn[b-frytwz43mg] {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 6px;
        transition: all 0.2s ease;
        color: rgba(255, 255, 255, 0.9);
    }

    .logout-btn:hover[b-frytwz43mg] {
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.5);
        transform: translateY(-1px);
        text-decoration: none;
    }

    .logout-icon[b-frytwz43mg] {
        font-size: 16px;
    }

.page.login-only[b-frytwz43mg] {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}

.page.login-only main[b-frytwz43mg] {
    width: 100%;
    max-width: 100%;
    padding: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

.page.login-only .content[b-frytwz43mg] {
    padding: 0 !important;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

    .top-row[b-frytwz43mg]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ============================================
   AUTHENTICATED PAGES ONLY - All styles below
   ============================================ */

/* White text on dark backgrounds - authenticated pages only */
.page.authenticated .form-header[b-frytwz43mg],
.page.authenticated .form-header h1[b-frytwz43mg],
.page.authenticated .form-header h2[b-frytwz43mg],
.page.authenticated .form-header h3[b-frytwz43mg],
.page.authenticated .form-header p[b-frytwz43mg],
.page.authenticated .form-header span[b-frytwz43mg],
.page.authenticated .card-header-navy[b-frytwz43mg],
.page.authenticated .card-header-navy h1[b-frytwz43mg],
.page.authenticated .card-header-navy h2[b-frytwz43mg],
.page.authenticated .card-header-navy h3[b-frytwz43mg],
.page.authenticated .card-header-navy p[b-frytwz43mg],
.page.authenticated .card-header-navy span[b-frytwz43mg],
.page.authenticated .top-row[b-frytwz43mg],
.page.authenticated .top-row h1[b-frytwz43mg],
.page.authenticated .top-row h2[b-frytwz43mg],
.page.authenticated .top-row h3[b-frytwz43mg],
.page.authenticated .top-row p[b-frytwz43mg],
.page.authenticated .top-row span[b-frytwz43mg],
.page.authenticated .sidebar[b-frytwz43mg],
.page.authenticated .sidebar h1[b-frytwz43mg],
.page.authenticated .sidebar h2[b-frytwz43mg],
.page.authenticated .sidebar h3[b-frytwz43mg],
.page.authenticated .sidebar p[b-frytwz43mg],
.page.authenticated .sidebar span[b-frytwz43mg] {
    color: #ffffff !important;
}

/* Dark text on light backgrounds - authenticated pages only */
.page.authenticated[b-frytwz43mg],
.page.authenticated p:not(.form-header p):not(.card-header-navy p):not(.top-row p):not(.sidebar p):not(button p):not(.btn p)[b-frytwz43mg],
.page.authenticated span:not(.form-header span):not(.card-header-navy span):not(.top-row span):not(.sidebar span):not(button span):not(.btn span)[b-frytwz43mg],
.page.authenticated div:not(.form-header):not(.card-header-navy):not(.top-row):not(.sidebar):not(button):not(.btn)[b-frytwz43mg],
.page.authenticated label:not(.form-header label):not(.card-header-navy label):not(button label):not(.btn label)[b-frytwz43mg],
.page.authenticated .card-content[b-frytwz43mg],
.page.authenticated .card-content p[b-frytwz43mg],
.page.authenticated .card-content span[b-frytwz43mg],
.page.authenticated .card-content div:not(button):not(.btn)[b-frytwz43mg],
.page.authenticated .card-content td[b-frytwz43mg],
.page.authenticated .card-content td *:not(button):not(.btn)[b-frytwz43mg],
.page.authenticated .card-body[b-frytwz43mg],
.page.authenticated .card-body p[b-frytwz43mg],
.page.authenticated .card-body span[b-frytwz43mg],
.page.authenticated .card-body div:not(button):not(.btn)[b-frytwz43mg],
.page.authenticated .card-body td[b-frytwz43mg],
.page.authenticated .card-body td *:not(button):not(.btn)[b-frytwz43mg],
.page.authenticated .form-section[b-frytwz43mg],
.page.authenticated .form-section p[b-frytwz43mg],
.page.authenticated .form-section span[b-frytwz43mg],
.page.authenticated .form-section label:not(button):not(.btn)[b-frytwz43mg],
.page.authenticated .form-section div:not(button):not(.btn)[b-frytwz43mg],
.page.authenticated .user-form[b-frytwz43mg],
.page.authenticated .user-form p[b-frytwz43mg],
.page.authenticated .user-form span[b-frytwz43mg],
.page.authenticated .user-form label:not(button):not(.btn)[b-frytwz43mg],
.page.authenticated .user-form div:not(button):not(.btn)[b-frytwz43mg],
.page.authenticated .form-group label[b-frytwz43mg],
.page.authenticated .form-text[b-frytwz43mg],
.page.authenticated .section-title[b-frytwz43mg],
.page.authenticated .content:not(.form-header):not(.top-row):not(.sidebar)[b-frytwz43mg],
.page.authenticated .content:not(.form-header):not(.top-row):not(.sidebar) p[b-frytwz43mg],
.page.authenticated .content:not(.form-header):not(.top-row):not(.sidebar) span[b-frytwz43mg],
.page.authenticated .content:not(.form-header):not(.top-row):not(.sidebar) div:not(button):not(.btn)[b-frytwz43mg],
.page.authenticated .table td[b-frytwz43mg],
.page.authenticated .table tbody td[b-frytwz43mg],
.page.authenticated .table td *:not(button):not(.btn)[b-frytwz43mg],
.page.authenticated .table td p[b-frytwz43mg],
.page.authenticated .table td span[b-frytwz43mg],
.page.authenticated .table td strong[b-frytwz43mg],
.page.authenticated .table td div:not(button):not(.btn)[b-frytwz43mg] {
    color: #212529 !important;
}

/* Table headers and headings - authenticated pages only */
.page.authenticated .table th[b-frytwz43mg],
.page.authenticated .table thead th[b-frytwz43mg],
.page.authenticated .table thead[b-frytwz43mg],
.page.authenticated h1:not(.form-header h1):not(.card-header-navy h1):not(.top-row h1):not(.sidebar h1):not(button h1)[b-frytwz43mg],
.page.authenticated h2:not(.form-header h2):not(.card-header-navy h2):not(.top-row h2):not(.sidebar h2):not(button h2)[b-frytwz43mg],
.page.authenticated h3:not(.form-header h3):not(.card-header-navy h3):not(.top-row h3):not(.sidebar h3):not(button h3)[b-frytwz43mg],
.page.authenticated h4:not(.form-header h4):not(.card-header-navy h4):not(button h4)[b-frytwz43mg],
.page.authenticated h5:not(.form-header h5):not(.card-header-navy h5):not(button h5)[b-frytwz43mg],
.page.authenticated h6:not(.form-header h6):not(.card-header-navy h6):not(button h6)[b-frytwz43mg] {
    color: #212529 !important;
}

/* Button styles - authenticated pages only */
.page.authenticated .btn-primary[b-frytwz43mg] {
    background-color: #1b6ec2 !important;
    border-color: #1861ac !important;
    color: #ffffff !important;
}

.page.authenticated .btn-primary:hover[b-frytwz43mg] {
    background-color: #1861ac !important;
    border-color: #145a9e !important;
    color: #ffffff !important;
}

.page.authenticated .btn-submit[b-frytwz43mg] {
    background-color: #1e3a5f !important;
    border-color: #1e3a5f !important;
    color: #ffffff !important;
}

.page.authenticated .btn-submit:hover[b-frytwz43mg] {
    background-color: #2c5364 !important;
    border-color: #2c5364 !important;
    color: #ffffff !important;
}

.page.authenticated .btn-cancel[b-frytwz43mg],
.page.authenticated .btn-secondary[b-frytwz43mg] {
    background-color: #ffffff !important;
    border-color: #dee2e6 !important;
    color: #333 !important;
}

.page.authenticated .btn-cancel:hover[b-frytwz43mg],
.page.authenticated .btn-secondary:hover[b-frytwz43mg] {
    background-color: #f8f9fa !important;
    border-color: #adb5bd !important;
    color: #333 !important;
}

.page.authenticated button[b-frytwz43mg],
.page.authenticated input[type="submit"][b-frytwz43mg],
.page.authenticated input[type="reset"][b-frytwz43mg],
.page.authenticated input[type="button"][b-frytwz43mg],
.page.authenticated .button:not(.page-wrapper .button)[b-frytwz43mg] {
    color: inherit !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Edit and Delete buttons - authenticated pages only */
.page.authenticated button.btn-edit[b-frytwz43mg],
.page.authenticated .btn-edit[b-frytwz43mg],
.page.authenticated .btn-edit-mobile[b-frytwz43mg],
.page.authenticated input[type="button"].btn-edit[b-frytwz43mg],
.page.authenticated input[type="submit"].btn-edit[b-frytwz43mg],
.page.authenticated input[type="reset"].btn-edit[b-frytwz43mg],
.page.authenticated button[class*="btn-edit"][b-frytwz43mg],
.page.authenticated [class*="btn-edit"][b-frytwz43mg],
.page.authenticated table .btn-edit[b-frytwz43mg],
.page.authenticated .table .btn-edit[b-frytwz43mg],
.page.authenticated td .btn-edit[b-frytwz43mg],
.page.authenticated tbody .btn-edit[b-frytwz43mg] {
    background: #1e3a5f !important;
    background-color: #1e3a5f !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.page.authenticated button.btn-edit *[b-frytwz43mg],
.page.authenticated .btn-edit *[b-frytwz43mg],
.page.authenticated .btn-edit-mobile *[b-frytwz43mg],
.page.authenticated [class*="btn-edit"] *[b-frytwz43mg] {
    color: #ffffff !important;
}

.page.authenticated button.btn-delete[b-frytwz43mg],
.page.authenticated .btn-delete[b-frytwz43mg],
.page.authenticated .btn-delete-mobile[b-frytwz43mg],
.page.authenticated input[type="button"].btn-delete[b-frytwz43mg],
.page.authenticated input[type="submit"].btn-delete[b-frytwz43mg],
.page.authenticated input[type="reset"].btn-delete[b-frytwz43mg],
.page.authenticated button[class*="btn-delete"][b-frytwz43mg],
.page.authenticated [class*="btn-delete"][b-frytwz43mg],
.page.authenticated table .btn-delete[b-frytwz43mg],
.page.authenticated .table .btn-delete[b-frytwz43mg],
.page.authenticated td .btn-delete[b-frytwz43mg],
.page.authenticated tbody .btn-delete[b-frytwz43mg] {
    background: #dc3545 !important;
    background-color: #dc3545 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.page.authenticated button.btn-delete *[b-frytwz43mg],
.page.authenticated .btn-delete *[b-frytwz43mg],
.page.authenticated .btn-delete-mobile *[b-frytwz43mg],
.page.authenticated [class*="btn-delete"] *[b-frytwz43mg] {
    color: #ffffff !important;
}

/* Primary and Submit buttons - authenticated pages only */
.page.authenticated button.btn-primary[b-frytwz43mg],
.page.authenticated .btn-primary[b-frytwz43mg],
.page.authenticated button.btn-submit[b-frytwz43mg],
.page.authenticated .btn-submit[b-frytwz43mg],
.page.authenticated button[class*="btn-primary"][b-frytwz43mg],
.page.authenticated button[class*="btn-submit"][b-frytwz43mg] {
    background-color: #1e3a5f !important;
    background: #1e3a5f !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.page.authenticated button.btn-submit[b-frytwz43mg],
.page.authenticated .btn-submit[b-frytwz43mg],
.page.authenticated button.btn-submit *[b-frytwz43mg],
.page.authenticated .btn-submit *[b-frytwz43mg],
.page.authenticated button.btn-submit span[b-frytwz43mg],
.page.authenticated .btn-submit span[b-frytwz43mg] {
    color: #ffffff !important;
}

.page.authenticated button.btn-cancel[b-frytwz43mg],
.page.authenticated .btn-cancel[b-frytwz43mg] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #333 !important;
    border: 1px solid #dee2e6 !important;
}

.page.authenticated button.btn-cancel *[b-frytwz43mg],
.page.authenticated .btn-cancel *[b-frytwz43mg],
.page.authenticated button.btn-cancel span[b-frytwz43mg],
.page.authenticated .btn-cancel span[b-frytwz43mg] {
    color: #333 !important;
}

/* Add buttons - authenticated pages only */
.page.authenticated button.btn-add[b-frytwz43mg],
.page.authenticated .btn-add[b-frytwz43mg],
.page.authenticated button[class*="btn-add"][b-frytwz43mg],
.page.authenticated [class*="btn-add"][b-frytwz43mg],
.page.authenticated button.btn[class*="add"][b-frytwz43mg],
.page.authenticated .btn[class*="add"][b-frytwz43mg],
.page.authenticated .card-header-navy .btn-add[b-frytwz43mg],
.page.authenticated .card-header-navy button.btn-add[b-frytwz43mg] {
    background-color: #28a745 !important;
    background: #28a745 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.page.authenticated .btn-add[b-frytwz43mg],
.page.authenticated button.btn-add[b-frytwz43mg],
.page.authenticated .btn-add *[b-frytwz43mg],
.page.authenticated button.btn-add *[b-frytwz43mg],
.page.authenticated .btn-add span[b-frytwz43mg],
.page.authenticated button.btn-add span[b-frytwz43mg],
.page.authenticated .btn-add .btn-icon[b-frytwz43mg],
.page.authenticated button.btn-add .btn-icon[b-frytwz43mg] {
    color: #ffffff !important;
}

/* All colored buttons - authenticated pages only */
.page.authenticated button[class*="add"][b-frytwz43mg],
.page.authenticated .btn[class*="add"][b-frytwz43mg],
.page.authenticated button.btn-add-course[b-frytwz43mg],
.page.authenticated .btn-add-course[b-frytwz43mg],
.page.authenticated button.btn-add-selected[b-frytwz43mg],
.page.authenticated .btn-add-selected[b-frytwz43mg],
.page.authenticated button.btn-add-question[b-frytwz43mg],
.page.authenticated .btn-add-question[b-frytwz43mg],
.page.authenticated button.btn-add-exam[b-frytwz43mg],
.page.authenticated .btn-add-exam[b-frytwz43mg],
.page.authenticated button[style*="background"][style*="#28a745"][b-frytwz43mg],
.page.authenticated button[style*="background"][style*="#1e3a5f"][b-frytwz43mg],
.page.authenticated button[style*="background"][style*="#dc3545"][b-frytwz43mg],
.page.authenticated button[style*="background"][style*="green"][b-frytwz43mg],
.page.authenticated button[style*="background"][style*="blue"][b-frytwz43mg],
.page.authenticated button[style*="background"][style*="red"][b-frytwz43mg] {
    color: #ffffff !important;
}

.page.authenticated button[class*="add"] *[b-frytwz43mg],
.page.authenticated .btn[class*="add"] *[b-frytwz43mg],
.page.authenticated button.btn-add-course *[b-frytwz43mg],
.page.authenticated .btn-add-course *[b-frytwz43mg],
.page.authenticated button.btn-add-selected *[b-frytwz43mg],
.page.authenticated .btn-add-selected *[b-frytwz43mg],
.page.authenticated button.btn-add-question *[b-frytwz43mg],
.page.authenticated .btn-add-question *[b-frytwz43mg],
.page.authenticated button.btn-add-exam *[b-frytwz43mg],
.page.authenticated .btn-add-exam *[b-frytwz43mg] {
    color: #ffffff !important;
}

.page.authenticated .card-header-navy .btn[b-frytwz43mg],
.page.authenticated .card-header-navy button[b-frytwz43mg] {
    color: #ffffff !important;
}

/* Tab buttons - authenticated pages only */
.page.authenticated .tab-button[b-frytwz43mg] {
    color: #333 !important;
}

.page.authenticated .tab-button.active[b-frytwz43mg] {
    color: #1e3a5f !important;
}

@media (max-width: 640.98px) {
    html[b-frytwz43mg], body[b-frytwz43mg] {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box;
    }

    .page[b-frytwz43mg] {
        flex-direction: column;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
        position: relative;
    }

    .page.authenticated[b-frytwz43mg] {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
        flex-direction: column;
        position: relative;
    }

    .page.login-only[b-frytwz43mg] {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
    }
    
    /* Completely hide checkbox on mobile - move it off-screen with ALL selectors */
    .sidebar-toggle-input[b-frytwz43mg],
    input.sidebar-toggle-input[b-frytwz43mg],
    input#sidebar-toggle[b-frytwz43mg],
    input[type="checkbox"].sidebar-toggle-input[b-frytwz43mg],
    input[type="checkbox"]#sidebar-toggle[b-frytwz43mg],
    input[type="checkbox"][id="sidebar-toggle"][b-frytwz43mg],
    #sidebar-toggle[b-frytwz43mg],
    [id="sidebar-toggle"][b-frytwz43mg] {
        position: fixed !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        outline: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        transform: scale(0) translateX(-9999px) translateY(-9999px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        clip: rect(0, 0, 0, 0) !important;
        clip-path: inset(50%) !important;
        overflow: hidden !important;
        z-index: -9999 !important;
        display: none !important;
        transition: none !important;
    }
    
    /* Ensure checkbox stays hidden in all states */
    .sidebar-toggle-input:checked[b-frytwz43mg],
    .sidebar-toggle-input:not(:checked)[b-frytwz43mg],
    .sidebar-toggle-input:focus[b-frytwz43mg],
    .sidebar-toggle-input:active[b-frytwz43mg],
    .sidebar-toggle-input:hover[b-frytwz43mg] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        transform: scale(0) translateX(-9999px) translateY(-9999px) !important;
    }

    /* Sidebar on mobile - fixed position, doesn't affect layout */
    .sidebar[b-frytwz43mg] {
        position: fixed !important;
        top: 3.5rem !important;
        left: 0 !important;
        right: 0 !important;
        height: auto;
        max-height: 0;
        z-index: 1000 !important;
        width: 100% !important;
        overflow: hidden;
        border-right: none;
        border-bottom: 1px solid #dee2e6;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 0;
        visibility: hidden;
        margin: 0;
        padding: 0;
        display: block;
        background: #1a2744 !important;
        transform: translateY(-10px);
    }

    .sidebar-toggle-input:checked ~ .page .sidebar[b-frytwz43mg] {
        max-height: 80vh !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        overflow-y: auto;
        z-index: 1000 !important;
        transform: translateY(0);
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Ensure sidebar content is visible when expanded */
    .sidebar-toggle-input:checked ~ .page .sidebar .nav-scrollable[b-frytwz43mg] {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    
    /* Ensure all sidebar children are visible */
    .sidebar-toggle-input:checked ~ .page .sidebar *[b-frytwz43mg] {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Ensure nav items are visible */
    .sidebar-toggle-input:checked ~ .page .sidebar nav[b-frytwz43mg] {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Ensure main content takes full width on mobile */
    main[b-frytwz43mg] {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure content area fits mobile */
    .content[b-frytwz43mg] {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Hide background pseudo-element on mobile */
    .page.authenticated[b-frytwz43mg]::after {
        display: none !important;
    }
    
    /* Ensure page background doesn't show white above sidebar on mobile */
    .page.authenticated[b-frytwz43mg] {
        background: #f8f9fa;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Ensure all page content fits mobile */
    .page.authenticated article[b-frytwz43mg],
    .page.authenticated .content[b-frytwz43mg],
    .page.authenticated main[b-frytwz43mg] {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .sidebar-backdrop[b-frytwz43mg] {
        display: block;
        position: fixed;
        top: 3.5rem;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 999;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }
    
    .sidebar-toggle-input:checked ~ .sidebar-backdrop[b-frytwz43mg] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .top-row[b-frytwz43mg] {
        justify-content: flex-start;
        padding: 0 4px !important;
        height: auto;
        min-height: 3.5rem;
        flex-wrap: nowrap;
        overflow: hidden;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    .top-row[b-frytwz43mg]  a, .top-row[b-frytwz43mg]  .btn-link {
        margin-left: 0;
    }

    .welcome-text[b-frytwz43mg] {
        font-size: 11px;
        gap: 3px;
        margin-right: auto;
        margin-left: 4px;
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .welcome-text strong[b-frytwz43mg] {
        display: inline;
        font-weight: 600;
    }

    .welcome-icon[b-frytwz43mg] {
        display: none;
    }

    .welcome-mobile-hidden[b-frytwz43mg] {
        display: none;
    }

    .user-role[b-frytwz43mg] {
        display: none;
    }

    .logout-btn[b-frytwz43mg] {
        padding: 5px 10px;
        font-size: 11px;
        gap: 3px;
        margin-left: 4px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .logout-btn .logout-icon[b-frytwz43mg] {
        display: none;
    }

    .logout-icon[b-frytwz43mg] {
        font-size: 12px;
    }

    .content[b-frytwz43mg] {
        padding-left: 8px !important;
        padding-right: 8px !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    .page.authenticated .content[b-frytwz43mg],
    .page.login-only .content[b-frytwz43mg] {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
    }

    .menu-toggle-btn[b-frytwz43mg] {
        padding: 6px 10px;
        margin-right: 0;
        font-size: 20px;
    }

    /* Ensure all content containers fit on mobile - authenticated pages only */
    .page.authenticated .content[b-frytwz43mg],
    .page.authenticated article[b-frytwz43mg],
    .page.authenticated .card[b-frytwz43mg],
    .page.authenticated .card-content[b-frytwz43mg],
    .page.authenticated .card-body[b-frytwz43mg],
    .page.authenticated .user-form-container[b-frytwz43mg],
    .page.authenticated .user-form[b-frytwz43mg],
    .page.authenticated .form-section[b-frytwz43mg],
    .page.authenticated .table-container[b-frytwz43mg],
    .page.authenticated .dashboard-grid[b-frytwz43mg],
    .page.authenticated .admin-grid[b-frytwz43mg] {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Prevent horizontal scrolling - authenticated and login pages */
    .page.authenticated *[b-frytwz43mg],
    .page.login-only *[b-frytwz43mg] {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* Ensure no element causes overflow */
    .page.authenticated[b-frytwz43mg],
    .page.authenticated *:not(.table-container):not(.table)[b-frytwz43mg] {
        overflow-x: hidden !important;
    }

    /* Allow specific elements to scroll horizontally if needed */
    .page.authenticated .table-container[b-frytwz43mg],
    .page.authenticated .table[b-frytwz43mg],
    .page.login-only .table-container[b-frytwz43mg],
    .page.login-only .table[b-frytwz43mg] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (min-width: 641px) {
    .page[b-frytwz43mg] {
        flex-direction: row;
    }

    .sidebar[b-frytwz43mg] {
        width: 250px;
        position: sticky;
        top: 0;
        align-self: flex-start;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 100vh;
    }
    
    /* Extend sidebar background to full page height using pseudo-element */
    .page.authenticated .sidebar[b-frytwz43mg]::before {
        height: 100%;
        min-height: 100vh;
    }
    
    /* Make page container grow with content */
    .page.authenticated[b-frytwz43mg] {
        align-items: flex-start;
    }
    
    /* Ensure main content determines page height */
    .page.authenticated main[b-frytwz43mg] {
        min-height: 100vh;
    }

    .sidebar-toggle-input:not(:checked) ~ .page .sidebar[b-frytwz43mg] {
        width: 0;
        min-width: 0;
        overflow: hidden;
        border-right: none;
        opacity: 0;
        transition: width 0.3s ease, opacity 0.3s ease, min-width 0.3s ease;
    }

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

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

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

#blazor-error-ui[b-frytwz43mg] {
    background: #f8d7da;
    border-top: 2px solid #dc3545;
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    color: #842029;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-frytwz43mg] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
        color: #842029;
        font-weight: bold;
        font-size: 1.2rem;
        transition: all 0.2s;
    }

    #blazor-error-ui .dismiss:hover[b-frytwz43mg] {
        color: #58151c;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.top-row[b-sa7wb0fymn] {
    min-height: 3.5rem;
    background: #1a2744;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar-brand[b-sa7wb0fymn] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
}

.navbar-logo[b-sa7wb0fymn] {
    max-width: 100%;
    max-height: 50px;
    height: auto;
    width: auto;
    object-fit: contain;
}

.nav-icon[b-sa7wb0fymn] {
    display: inline-block;
    font-size: 1.2rem;
    margin-right: 0.75rem;
    width: 1.5rem;
    text-align: center;
    line-height: 1;
}

.nav-item[b-sa7wb0fymn] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-sa7wb0fymn] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-sa7wb0fymn] {
        padding-bottom: 1rem;
    }

    .nav-item[b-sa7wb0fymn]  .nav-link {
        color: rgba(255, 255, 255, 0.8);
        background: none;
        border: none;
        border-radius: 6px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
        transition: all 0.2s ease;
        font-weight: 500;
        letter-spacing: 0.3px;
    }

.nav-item[b-sa7wb0fymn]  a.active {
    background: #0066cc;
    color: #ffffff;
}

.nav-item[b-sa7wb0fymn]  .nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.nav-scrollable[b-sa7wb0fymn] {
    display: block;
    height: calc(100vh - 3.5rem);
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-2el2bmxp03],
.components-reconnect-repeated-attempt-visible[b-2el2bmxp03],
.components-reconnect-failed-visible[b-2el2bmxp03],
.components-pause-visible[b-2el2bmxp03],
.components-resume-failed-visible[b-2el2bmxp03],
.components-rejoining-animation[b-2el2bmxp03] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-2el2bmxp03],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-2el2bmxp03],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-2el2bmxp03],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-2el2bmxp03],
#components-reconnect-modal.components-reconnect-retrying[b-2el2bmxp03],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-2el2bmxp03],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-2el2bmxp03],
#components-reconnect-modal.components-reconnect-failed[b-2el2bmxp03],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-2el2bmxp03] {
    display: block;
}


#components-reconnect-modal[b-2el2bmxp03] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-2el2bmxp03 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-2el2bmxp03 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-2el2bmxp03 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-2el2bmxp03]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-2el2bmxp03 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-2el2bmxp03 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-2el2bmxp03 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-2el2bmxp03 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-2el2bmxp03] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-2el2bmxp03] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-2el2bmxp03] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-2el2bmxp03] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-2el2bmxp03] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-2el2bmxp03] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-2el2bmxp03] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-2el2bmxp03 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-2el2bmxp03] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-2el2bmxp03 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/AboutUs.razor.rz.scp.css */
/* About page - uses same spotlight styling as home page */
/* All styling is inherited from PublicHome.razor.css spotlight sections */

/* Banner - same styling as home page but smaller height */
#banner[b-yd5j3v92ko] {
    background-color: #2e3141;
    background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("/images/banner.jpg");
    background-size: auto, cover;
    background-position: center, center;
    background-attachment: fixed, fixed;
    min-height: 22vh;
    padding: 2.5em 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo positioned on the left side like the original template */
#banner .inner[b-yd5j3v92ko] {
    display: flex;
    align-items: center;
    gap: 3em;
    flex-wrap: wrap;
}

#banner .logo[b-yd5j3v92ko] {
    flex-shrink: 0;
    margin: 0;
    text-align: center;
}

#banner .logo img[b-yd5j3v92ko] {
    display: block;
    margin: 0 auto;
    max-width: 150px;
    width: auto;
    height: auto;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent;
}

/* Content area (title, subtitle, button) on the right/centered */
#banner .inner .content[b-yd5j3v92ko] {
    flex: 1;
    text-align: left;
    min-width: 300px;
}

#banner .inner .content h2[b-yd5j3v92ko] {
    margin: 0 0 0.5em 0;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.2;
}

#banner .inner .content p[b-yd5j3v92ko] {
    margin: 0 0 1.5em 0;
    word-wrap: break-word;
}

/* Make white backgrounds transparent on logo */
#banner .logo img[src*="iNurseLogo"][b-yd5j3v92ko] {
    background: transparent !important;
    /* Use screen blend mode to make white areas transparent */
    mix-blend-mode: screen;
}

/* Remove divider lines from spotlight sections on About page */
.wrapper.spotlight .centered-content .content-divider[b-yd5j3v92ko] {
    display: none;
}

/* Ensure all text content is centered on About page */
.wrapper.spotlight .centered-content[b-yd5j3v92ko] {
    text-align: center !important;
}

.wrapper.spotlight .centered-content p[b-yd5j3v92ko] {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}

.wrapper.spotlight .centered-content strong[b-yd5j3v92ko] {
    text-align: center;
}

/* Watermark for About page sections */
.wrapper.spotlight.style1 .inner[b-yd5j3v92ko]::after {
    content: "About Us";
    position: absolute;
    right: 2%;
    bottom: 5%;
    font-size: 2.5em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    line-height: 1;
}

.wrapper.spotlight.style2 .inner[b-yd5j3v92ko]::after {
    content: "Core Values";
    position: absolute;
    right: 2%;
    bottom: 5%;
    font-size: 2.5em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    line-height: 1;
}

.wrapper.spotlight.style3 .inner[b-yd5j3v92ko]::after {
    content: "Mission";
    position: absolute;
    right: 2%;
    bottom: 5%;
    font-size: 2.5em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    line-height: 1;
}

/* Vision section watermark */
.wrapper.alt.spotlight.style1 .inner[b-yd5j3v92ko]::after {
    content: "Vision";
    position: absolute;
    right: 2%;
    bottom: 5%;
    font-size: 2.5em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    line-height: 1;
}

/* Mobile styles - center both logo and content */
@media screen and (max-width: 768px) {
    #banner .inner[b-yd5j3v92ko] {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 1.5em;
    }

    #banner .inner .content[b-yd5j3v92ko] {
        text-align: center;
        flex: none;
        width: 100%;
        min-width: auto;
    }

    #banner .logo[b-yd5j3v92ko] {
        width: 100%;
        display: flex;
        justify-content: center;
    }
}
/* /Components/Pages/AccessLogsComponent.razor.rz.scp.css */
.access-logs[b-o0mxaklngs] {
    padding: 8px 0 16px 0;
}

.access-logs-title[b-o0mxaklngs] {
    margin-bottom: 12px;
    color: #1e3a5f;
    font-weight: 700;
}

.access-logs-filters[b-o0mxaklngs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.filter-item label[b-o0mxaklngs] {
    display: block;
    font-size: 12px;
    color: #1e3a5f;
    font-weight: 600;
    margin-bottom: 4px;
}

.filter-item-checkbox[b-o0mxaklngs] {
    display: flex;
    align-items: flex-end;
}

.access-logs-checkbox-label[b-o0mxaklngs] {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin-bottom: 0 !important;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
}

.access-logs-actions[b-o0mxaklngs] {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.logs-btn[b-o0mxaklngs] {
    min-height: 36px;
    min-width: 110px;
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    text-transform: none;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
}

.logs-btn-primary[b-o0mxaklngs] {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5364 100%);
    color: #fff !important;
}

.logs-btn-primary:hover:not(:disabled)[b-o0mxaklngs] {
    filter: brightness(1.05);
}

.logs-btn-secondary[b-o0mxaklngs] {
    background: #ffffff !important;
    color: #1e3a5f !important;
    border-color: #1e3a5f;
}

.logs-btn-secondary:hover:not(:disabled)[b-o0mxaklngs] {
    background: #f1f6ff;
}

.logs-btn:disabled[b-o0mxaklngs] {
    opacity: 0.6;
    cursor: not-allowed;
}

.access-logs-table-wrap[b-o0mxaklngs] {
    overflow-x: auto;
}

.access-logs-table-wrap table[b-o0mxaklngs] {
    width: 100%;
    table-layout: fixed;
}

.access-logs-page-cell[b-o0mxaklngs] {
    max-width: 36rem;
    white-space: normal;
    word-break: break-word;
    font-size: 13px;
    vertical-align: top;
}

@media (max-width: 768px) {
    .access-logs-filters[b-o0mxaklngs] {
        grid-template-columns: 1fr;
    }

    .access-logs-actions[b-o0mxaklngs] {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .logs-btn[b-o0mxaklngs] {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        font-size: 14px;
    }

    .access-logs-table-wrap table[b-o0mxaklngs] {
        font-size: 11px;
    }

    .access-logs-table-wrap th[b-o0mxaklngs],
    .access-logs-table-wrap td[b-o0mxaklngs] {
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        vertical-align: top;
    }
}
/* /Components/Pages/AddEditCAPE.razor.rz.scp.css */
.user-form-container[b-oaq0d71m0h] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.form-header[b-oaq0d71m0h] {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5364 100%);
    color: white !important;
    padding: 20px;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
}

.form-header *[b-oaq0d71m0h] {
    color: white !important;
}

.form-header h2[b-oaq0d71m0h] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: white !important;
}

.user-form[b-oaq0d71m0h] {
    background: white;
    padding: 24px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.form-section[b-oaq0d71m0h] {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e9ecef;
}

.form-section:last-of-type[b-oaq0d71m0h] {
    border-bottom: none;
}

.section-title[b-oaq0d71m0h] {
    color: #1e3a5f !important;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #1e3a5f;
}

.section-title *[b-oaq0d71m0h] {
    color: #1e3a5f !important;
}

.form-row[b-oaq0d71m0h] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.form-group[b-oaq0d71m0h] {
    display: flex;
    flex-direction: column;
}

.form-group label[b-oaq0d71m0h] {
    font-size: 13px;
    font-weight: 600;
    color: #333 !important;
    margin-bottom: 6px;
}

.form-group label *[b-oaq0d71m0h] {
    color: #333 !important;
}

.form-control[b-oaq0d71m0h] {
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 13px;
    transition: border-color 0.2s ease;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.form-control:focus[b-oaq0d71m0h] {
    outline: none;
    border-color: #1e3a5f;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1);
}

.form-text[b-oaq0d71m0h] {
    font-size: 11px;
    color: #666 !important;
    margin-top: 4px;
    display: block;
}

.form-text *[b-oaq0d71m0h] {
    color: #666 !important;
}

.form-actions[b-oaq0d71m0h] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e9ecef;
}

.btn[b-oaq0d71m0h] {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary[b-oaq0d71m0h] {
    background: #1e3a5f !important;
    color: white !important;
}

.btn-primary *[b-oaq0d71m0h] {
    color: white !important;
}

.btn-primary:hover:not(:disabled)[b-oaq0d71m0h] {
    background: #2c5364 !important;
    color: white !important;
}

.btn-primary:hover:not(:disabled) *[b-oaq0d71m0h] {
    color: white !important;
}

.btn-primary:disabled[b-oaq0d71m0h] {
    background: #ccc !important;
    cursor: not-allowed;
}

.btn-secondary[b-oaq0d71m0h] {
    background: #6c757d !important;
    color: white !important;
}

.btn-secondary *[b-oaq0d71m0h] {
    color: white !important;
}

.btn-secondary:hover[b-oaq0d71m0h] {
    background: #5a6268 !important;
    color: white !important;
}

.btn-secondary:hover *[b-oaq0d71m0h] {
    color: white !important;
}

.not-authenticated[b-oaq0d71m0h] {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.exam-selection-container[b-oaq0d71m0h] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f9f9f9;
}

.exam-checkbox-item[b-oaq0d71m0h] {
    padding: 8px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    transition: all 0.2s;
}

.exam-checkbox-item:hover[b-oaq0d71m0h] {
    border-color: #1e3a5f;
    background: #f0f7ff;
}

.exam-checkbox-label[b-oaq0d71m0h] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin: 0;
}

.exam-checkbox-label input[type="checkbox"][b-oaq0d71m0h] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

.exam-checkbox-content[b-oaq0d71m0h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.exam-checkbox-content strong[b-oaq0d71m0h] {
    color: #1e3a5f;
    font-size: 14px;
}

.exam-checkbox-content span[b-oaq0d71m0h] {
    color: #666;
    font-size: 13px;
}

.exam-checkbox-content small[b-oaq0d71m0h] {
    color: #999;
    font-size: 12px;
}

.no-exams-message[b-oaq0d71m0h] {
    padding: 20px;
    text-align: center;
    color: #666;
    background: #f9f9f9;
    border: 1px dashed #ddd;
    border-radius: 4px;
}

.section-description[b-oaq0d71m0h] {
    color: #666;
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 1.5;
}

.cape-questions-list[b-oaq0d71m0h] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 500px;
    overflow-y: auto;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f9f9f9;
}

.cape-question-item[b-oaq0d71m0h] {
    background: white;
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cape-question-header[b-oaq0d71m0h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}

.cape-question-header strong[b-oaq0d71m0h] {
    color: #1e3a5f;
    font-size: 14px;
}

.cape-question-type[b-oaq0d71m0h] {
    background: #1e3a5f;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.cape-question-text[b-oaq0d71m0h] {
    color: #333;
    font-size: 14px;
    margin-bottom: 12px;
    line-height: 1.5;
}

.cape-choices[b-oaq0d71m0h] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.cape-choice[b-oaq0d71m0h] {
    padding: 8px 12px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    color: #666;
}

.cape-choice.correct[b-oaq0d71m0h] {
    background: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.correct-indicator[b-oaq0d71m0h] {
    color: #28a745;
    font-weight: bold;
    margin-right: 8px;
}

.no-questions-message[b-oaq0d71m0h] {
    padding: 20px;
    text-align: center;
    color: #666;
    background: #fff3cd;
    border: 1px dashed #ffc107;
    border-radius: 4px;
}

/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
    .user-form-container[b-oaq0d71m0h] {
        padding: 12px;
        max-width: 100%;
    }

    .form-header[b-oaq0d71m0h] {
        padding: 16px;
    }

    .form-header h2[b-oaq0d71m0h] {
        font-size: 18px;
    }

    .user-form[b-oaq0d71m0h] {
        padding: 16px;
    }

    .form-row[b-oaq0d71m0h] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .form-actions[b-oaq0d71m0h] {
        flex-direction: column;
        gap: 10px;
    }

    .btn[b-oaq0d71m0h] {
        width: 100%;
        padding: 12px;
    }

    .exam-selection-container[b-oaq0d71m0h] {
        max-height: 300px;
        padding: 8px;
    }

    .exam-checkbox-item[b-oaq0d71m0h] {
        padding: 10px;
    }

    .exam-checkbox-content strong[b-oaq0d71m0h] {
        font-size: 13px;
    }

    .exam-checkbox-content span[b-oaq0d71m0h] {
        font-size: 12px;
    }

    .exam-checkbox-content small[b-oaq0d71m0h] {
        font-size: 11px;
    }

    .cape-questions-list[b-oaq0d71m0h] {
        max-height: 400px;
        padding: 8px;
    }

    .cape-question-item[b-oaq0d71m0h] {
        padding: 12px;
    }

    .cape-question-header[b-oaq0d71m0h] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .cape-question-text[b-oaq0d71m0h] {
        font-size: 13px;
    }

    .cape-choice[b-oaq0d71m0h] {
        font-size: 12px;
        padding: 6px 10px;
    }
}

@media screen and (max-width: 480px) {
    .user-form-container[b-oaq0d71m0h] {
        padding: 8px;
    }

    .form-header[b-oaq0d71m0h] {
        padding: 12px;
    }

    .form-header h2[b-oaq0d71m0h] {
        font-size: 16px;
    }

    .user-form[b-oaq0d71m0h] {
        padding: 12px;
    }

    .section-title[b-oaq0d71m0h] {
        font-size: 14px;
    }

    .form-group label[b-oaq0d71m0h] {
        font-size: 12px;
    }

    .form-control[b-oaq0d71m0h] {
        font-size: 14px;
        padding: 10px;
    }

    .exam-selection-container[b-oaq0d71m0h] {
        max-height: 250px;
    }

    .cape-questions-list[b-oaq0d71m0h] {
        max-height: 300px;
    }
}

/* /Components/Pages/AddEditCourse.razor.rz.scp.css */
.user-form-container[b-gy13bodmft] {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.form-header[b-gy13bodmft] {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5364 100%);
    color: white !important;
    padding: 20px;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
}

.form-header *[b-gy13bodmft] {
    color: white !important;
}

.form-header h2[b-gy13bodmft] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: white !important;
}

.user-form[b-gy13bodmft] {
    background: white;
    padding: 24px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.form-section[b-gy13bodmft] {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e9ecef;
}

.form-section:last-of-type[b-gy13bodmft] {
    border-bottom: none;
}

.section-title[b-gy13bodmft] {
    color: #1e3a5f !important;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #1e3a5f;
}

.section-title *[b-gy13bodmft] {
    color: #1e3a5f !important;
}

.form-row[b-gy13bodmft] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.form-group[b-gy13bodmft] {
    display: flex;
    flex-direction: column;
}

.form-group label[b-gy13bodmft] {
    font-size: 13px;
    font-weight: 600;
    color: #333 !important;
    margin-bottom: 6px;
}

.form-group label *[b-gy13bodmft] {
    color: #333 !important;
}

.form-control[b-gy13bodmft] {
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 13px;
    transition: border-color 0.2s ease;
}

.form-control:focus[b-gy13bodmft] {
    outline: none;
    border-color: #1e3a5f;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1);
}

.form-text[b-gy13bodmft] {
    font-size: 11px;
    color: #666 !important;
    margin-top: 4px;
    display: block;
}

.form-text *[b-gy13bodmft] {
    color: #666 !important;
}

.checkbox-group[b-gy13bodmft] {
    display: flex;
    align-items: center;
    padding-top: 24px;
}

.checkbox-label[b-gy13bodmft] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #333 !important;
}

.checkbox-label *[b-gy13bodmft] {
    color: #333 !important;
}

.checkbox-label input[type="checkbox"][b-gy13bodmft] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.form-actions[b-gy13bodmft] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e9ecef;
}

.btn-cancel[b-gy13bodmft] {
    padding: 10px 20px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: white;
    color: #333 !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel *[b-gy13bodmft] {
    color: #333 !important;
}

.btn-cancel:hover[b-gy13bodmft] {
    background: #f8f9fa;
    border-color: #adb5bd;
}

.btn-submit[b-gy13bodmft] {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background: #1e3a5f;
    color: white !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-submit *[b-gy13bodmft] {
    color: white !important;
}

.btn-submit:hover:not(:disabled)[b-gy13bodmft] {
    background: #2c5364;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(30, 58, 95, 0.2);
}

.btn-submit:disabled[b-gy13bodmft] {
    opacity: 0.6;
    cursor: not-allowed;
}

.not-authenticated[b-gy13bodmft] {
    text-align: center;
    padding: 50px 20px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    max-width: 600px;
    margin: 50px auto;
}

.not-authenticated h3[b-gy13bodmft] {
    color: #1a2744;
    margin-bottom: 15px;
    font-weight: 600;
}

.not-authenticated p[b-gy13bodmft] {
    color: #6c757d;
}

.not-authenticated a[b-gy13bodmft] {
    color: #0066cc;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
}

.not-authenticated a:hover[b-gy13bodmft] {
    color: #0052a3;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .user-form-container[b-gy13bodmft] {
        padding: 12px;
    }

    .form-row[b-gy13bodmft] {
        grid-template-columns: 1fr;
    }

    .form-actions[b-gy13bodmft] {
        flex-direction: column;
    }

    .btn-cancel[b-gy13bodmft],
    .btn-submit[b-gy13bodmft] {
        width: 100%;
    }
}

/* Exam Assignment Styles */
.btn-add-exam[b-gy13bodmft] {
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    background: #1e3a5f;
    color: white !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-add-exam *[b-gy13bodmft] {
    color: white !important;
}

.btn-add-exam:hover:not(:disabled)[b-gy13bodmft] {
    background: #2c5364;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(30, 58, 95, 0.2);
}

.btn-add-exam:disabled[b-gy13bodmft] {
    opacity: 0.5;
    cursor: not-allowed;
}

.assigned-exams-list[b-gy13bodmft] {
    margin-top: 16px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

.assigned-exam-item[b-gy13bodmft] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.assigned-exam-item:last-child[b-gy13bodmft] {
    margin-bottom: 0;
}

.assigned-exam-item:hover[b-gy13bodmft] {
    border-color: #1e3a5f;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.exam-info[b-gy13bodmft] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.exam-info strong[b-gy13bodmft] {
    color: #1e3a5f !important;
    font-size: 14px;
    min-width: 120px;
}

.exam-info strong *[b-gy13bodmft] {
    color: #1e3a5f !important;
}

.exam-info span[b-gy13bodmft] {
    color: #666 !important;
    font-size: 13px;
}

.exam-info span *[b-gy13bodmft] {
    color: #666 !important;
}

.exam-type-badge[b-gy13bodmft] {
    padding: 4px 8px;
    background: #e3f2fd;
    color: #1976d2;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.btn-remove-exam[b-gy13bodmft] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    background: #dc3545;
    color: white !important;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-remove-exam *[b-gy13bodmft] {
    color: white !important;
}

.btn-remove-exam:hover[b-gy13bodmft] {
    background: #c82333;
    transform: translateY(-1px);
}

/* File Management Button Styles */
.btn-browse-files[b-gy13bodmft] {
    padding: 8px 16px;
    border: 1px solid #1e3a5f !important;
    border-radius: 4px;
    background: white !important;
    color: #1e3a5f !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-browse-files *[b-gy13bodmft] {
    color: #1e3a5f !important;
}

.btn-browse-files:hover[b-gy13bodmft] {
    background: #1e3a5f !important;
    color: white !important;
}

.btn-browse-files:hover *[b-gy13bodmft] {
    color: white !important;
}

.btn-add-selected[b-gy13bodmft] {
    padding: 6px 14px;
    border: none;
    border-radius: 4px;
    background: #28a745 !important;
    color: white !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-selected *[b-gy13bodmft] {
    color: white !important;
}

.btn-add-selected:hover:not(:disabled)[b-gy13bodmft] {
    background: #218838 !important;
    color: white !important;
    transform: translateY(-1px);
}

.btn-add-selected:hover:not(:disabled) *[b-gy13bodmft] {
    color: white !important;
}

.btn-add-selected:disabled[b-gy13bodmft] {
    background: #6c757d !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* File Text Colors */
.user-form strong[b-gy13bodmft] {
    color: #333 !important;
}

.user-form strong *[b-gy13bodmft] {
    color: #333 !important;
}

.user-form span[b-gy13bodmft] {
    color: #333 !important;
}

.user-form span *[b-gy13bodmft] {
    color: #333 !important;
}

/* File list items - ensure text is visible */
.user-form div[style*="background: #ffffff"] strong[b-gy13bodmft],
.user-form div[style*="background: #f8f9fa"] strong[b-gy13bodmft] {
    color: #333 !important;
}

.user-form div[style*="background: #ffffff"] span[b-gy13bodmft],
.user-form div[style*="background: #f8f9fa"] span[b-gy13bodmft] {
    color: #333 !important;
}

/* File type badges - ensure they have proper colors */
.file-type-badge[b-gy13bodmft] {
    color: inherit !important;
}

/* Downloadable label text */
.user-form label span[b-gy13bodmft] {
    color: #333 !important;
}

.user-form label[style*="cursor: pointer"] span[b-gy13bodmft] {
    color: #333 !important;
}

/* Sequence control buttons (up/down arrows) - override inline styles */
.user-form .btn-sequence[b-gy13bodmft],
button.btn-sequence[b-gy13bodmft] {
    width: 24px !important;
    height: 20px !important;
    padding: 0 !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 3px !important;
    background: #f8f9fa !important;
    color: #1e3a5f !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.user-form .btn-sequence *[b-gy13bodmft],
button.btn-sequence *[b-gy13bodmft] {
    color: #1e3a5f !important;
}

.user-form .btn-sequence:hover:not(:disabled)[b-gy13bodmft],
button.btn-sequence:hover:not(:disabled)[b-gy13bodmft] {
    background: #1e3a5f !important;
    color: white !important;
    border-color: #1e3a5f !important;
}

.user-form .btn-sequence:hover:not(:disabled) *[b-gy13bodmft],
button.btn-sequence:hover:not(:disabled) *[b-gy13bodmft] {
    color: white !important;
}

.user-form .btn-sequence:disabled[b-gy13bodmft],
button.btn-sequence:disabled[b-gy13bodmft] {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

/* Delete file button - override inline styles */
.user-form .btn-delete-file[b-gy13bodmft],
button.btn-delete-file[b-gy13bodmft] {
    padding: 4px 12px !important;
    border: none !important;
    border-radius: 4px !important;
    background: #dc3545 !important;
    color: white !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.user-form .btn-delete-file *[b-gy13bodmft],
button.btn-delete-file *[b-gy13bodmft] {
    color: white !important;
}

.user-form .btn-delete-file:hover[b-gy13bodmft],
button.btn-delete-file:hover[b-gy13bodmft] {
    background: #c82333 !important;
    color: white !important;
    transform: translateY(-1px);
}

.user-form .btn-delete-file:hover *[b-gy13bodmft],
button.btn-delete-file:hover *[b-gy13bodmft] {
    color: white !important;
}

/* Ensure all buttons in the form have visible text */
.user-form button[b-gy13bodmft] {
    color: inherit !important;
}

.user-form button.btn-submit[b-gy13bodmft],
.user-form button.btn-add-exam[b-gy13bodmft],
.user-form button.btn-remove-exam[b-gy13bodmft],
.user-form button.btn-delete-file[b-gy13bodmft],
.user-form button.btn-add-selected[b-gy13bodmft] {
    color: white !important;
}

.user-form button.btn-submit *[b-gy13bodmft],
.user-form button.btn-add-exam *[b-gy13bodmft],
.user-form button.btn-remove-exam *[b-gy13bodmft],
.user-form button.btn-delete-file *[b-gy13bodmft],
.user-form button.btn-add-selected *[b-gy13bodmft] {
    color: white !important;
}

.user-form button.btn-cancel[b-gy13bodmft],
.user-form button.btn-browse-files[b-gy13bodmft] {
    color: #1e3a5f !important;
}

.user-form button.btn-cancel *[b-gy13bodmft],
.user-form button.btn-browse-files *[b-gy13bodmft] {
    color: #1e3a5f !important;
}

.user-form button.btn-browse-files:hover[b-gy13bodmft] {
    color: white !important;
}

.user-form button.btn-browse-files:hover *[b-gy13bodmft] {
    color: white !important;
}

/* Upload Progress Animations */
.upload-spinner[b-gy13bodmft] {
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #1e3a5f;
    border-radius: 50%;
    animation: spin-b-gy13bodmft 1s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

@keyframes spin-b-gy13bodmft {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.upload-progress-bar-container[b-gy13bodmft] {
    width: 100%;
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.upload-progress-bar-fill[b-gy13bodmft] {
    height: 100%;
    background: linear-gradient(90deg, #1e3a5f 0%, #2c5364 50%, #1e3a5f 100%);
    background-size: 200% 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
    animation: progress-shimmer-b-gy13bodmft 2s linear infinite;
    position: relative;
}

.upload-progress-bar-fill[b-gy13bodmft]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: progress-glow-b-gy13bodmft 1.5s ease-in-out infinite;
}

@keyframes progress-shimmer-b-gy13bodmft {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@keyframes progress-glow-b-gy13bodmft {
    0%, 100% {
        opacity: 0;
        transform: translateX(-100%);
    }
    50% {
        opacity: 1;
        transform: translateX(100%);
    }
}

/* /Components/Pages/AddEditExam.razor.rz.scp.css */
.user-form-container[b-d8bek6nstc] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.form-header[b-d8bek6nstc] {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5364 100%);
    color: white;
    padding: 20px;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
}

.form-header h2[b-d8bek6nstc] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

.user-form[b-d8bek6nstc] {
    background: white;
    padding: 24px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.form-section[b-d8bek6nstc] {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e9ecef;
}

.form-section:last-of-type[b-d8bek6nstc] {
    border-bottom: none;
}

.section-title[b-d8bek6nstc] {
    color: #1e3a5f !important;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #1e3a5f;
}

.section-title *[b-d8bek6nstc] {
    color: #1e3a5f !important;
}

.form-row[b-d8bek6nstc] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.form-group[b-d8bek6nstc] {
    display: flex;
    flex-direction: column;
}

.form-group label[b-d8bek6nstc] {
    font-size: 13px;
    font-weight: 600;
    color: #333 !important;
    margin-bottom: 6px;
}

.form-group label *[b-d8bek6nstc] {
    color: #333 !important;
}

.form-control[b-d8bek6nstc] {
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 13px;
    transition: border-color 0.2s ease;
}

.form-control:focus[b-d8bek6nstc] {
    outline: none;
    border-color: #1e3a5f;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1);
}

.form-text[b-d8bek6nstc] {
    font-size: 11px;
    color: #666 !important;
    margin-top: 4px;
    display: block;
}

.form-text *[b-d8bek6nstc] {
    color: #666 !important;
}

.form-actions[b-d8bek6nstc] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e9ecef;
}

.btn-cancel[b-d8bek6nstc] {
    padding: 10px 20px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: white;
    color: #333 !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel *[b-d8bek6nstc] {
    color: #333 !important;
}

.btn-cancel:hover[b-d8bek6nstc] {
    background: #f8f9fa;
    border-color: #adb5bd;
}

.btn-submit[b-d8bek6nstc] {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background: #1e3a5f !important;
    color: white !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-submit *[b-d8bek6nstc] {
    color: white !important;
}

.btn-submit:hover:not(:disabled)[b-d8bek6nstc] {
    background: #2c5364 !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(30, 58, 95, 0.2);
}

.btn-submit:hover:not(:disabled) *[b-d8bek6nstc] {
    color: white !important;
}

.btn-submit:disabled[b-d8bek6nstc] {
    opacity: 0.6;
    cursor: not-allowed;
}

.not-authenticated[b-d8bek6nstc] {
    text-align: center;
    padding: 50px 20px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    max-width: 600px;
    margin: 50px auto;
}

.not-authenticated h3[b-d8bek6nstc] {
    color: #1a2744;
    margin-bottom: 15px;
    font-weight: 600;
}

.not-authenticated p[b-d8bek6nstc] {
    color: #6c757d;
}

.not-authenticated a[b-d8bek6nstc] {
    color: #0066cc;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
}

.not-authenticated a:hover[b-d8bek6nstc] {
    color: #0052a3;
    text-decoration: underline;
}

/* Question Card Styles */
.question-card[b-d8bek6nstc] {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    transition: all 0.2s ease;
}

.question-card:hover[b-d8bek6nstc] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: #1e3a5f;
}

.question-header[b-d8bek6nstc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #1e3a5f;
}

.question-header h4[b-d8bek6nstc] {
    margin: 0;
    color: #1e3a5f;
    font-size: 16px;
    font-weight: 600;
}

.btn-add-question[b-d8bek6nstc] {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background: #28a745 !important;
    color: white !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-question *[b-d8bek6nstc] {
    color: white !important;
}

.btn-add-question:hover[b-d8bek6nstc] {
    background: #218838;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
}

.btn-delete-question[b-d8bek6nstc] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    background: #dc3545 !important;
    color: white !important;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-delete-question *[b-d8bek6nstc] {
    color: white !important;
}

.btn-delete-question:hover[b-d8bek6nstc] {
    background: #c82333;
    transform: translateY(-1px);
}

.btn-icon[b-d8bek6nstc] {
    margin-right: 4px;
}

/* Choices Section */
.choices-section[b-d8bek6nstc] {
    margin-top: 16px;
    padding: 16px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.choice-item[b-d8bek6nstc] {
    margin-bottom: 12px;
}

.choice-item:last-child[b-d8bek6nstc] {
    margin-bottom: 0;
}

.choice-input-group[b-d8bek6nstc] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.choice-input[b-d8bek6nstc] {
    flex: 1;
}

.choice-checkbox-label[b-d8bek6nstc] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    transition: all 0.2s ease;
}

.choice-checkbox-label:hover[b-d8bek6nstc] {
    background: #e9ecef;
    border-color: #1e3a5f;
}

.choice-checkbox-label input[type="checkbox"][b-d8bek6nstc],
.choice-checkbox-label input[type="radio"][b-d8bek6nstc] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #1e3a5f;
}

.no-questions-message[b-d8bek6nstc] {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
    font-size: 14px;
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    margin-top: 16px;
}

/* Sequencing Question Styles */
.sequencing-item[b-d8bek6nstc] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border: 2px solid #1e3a5f;
    border-radius: 6px;
    margin-bottom: 12px;
}

.sequencing-controls[b-d8bek6nstc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 50px;
}

.btn-sequence-up[b-d8bek6nstc],
.btn-sequence-down[b-d8bek6nstc] {
    width: 32px;
    height: 24px;
    padding: 0;
    border: 1px solid #1e3a5f;
    border-radius: 4px;
    background: #f8f9fa;
    color: #000000 !important;
    font-size: 20px;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-shadow: none;
}

.btn-sequence-up:hover:not(:disabled)[b-d8bek6nstc],
.btn-sequence-down:hover:not(:disabled)[b-d8bek6nstc] {
    background: #1e3a5f;
    color: white;
}

.btn-sequence-up:disabled[b-d8bek6nstc],
.btn-sequence-down:disabled[b-d8bek6nstc] {
    opacity: 0.5;
    cursor: not-allowed;
    color: #666666 !important;
}

.sequence-number[b-d8bek6nstc] {
    font-size: 16px;
    font-weight: 700;
    color: #1e3a5f;
    min-width: 30px;
    text-align: center;
    padding: 4px 0;
}

.sequencing-input[b-d8bek6nstc] {
    flex: 1;
}

.sequence-hint[b-d8bek6nstc] {
    font-size: 11px;
    color: #666;
    font-style: italic;
    margin-top: 4px;
    display: block;
}

/* Drag and Drop Question Styles */
.dragdrop-item[b-d8bek6nstc] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    margin-bottom: 12px;
}

.dragdrop-item .choice-input[b-d8bek6nstc] {
    flex: 1;
}

@media (max-width: 768px) {
    .user-form-container[b-d8bek6nstc] {
        padding: 12px;
    }

    .form-row[b-d8bek6nstc] {
        grid-template-columns: 1fr;
    }

    .form-actions[b-d8bek6nstc] {
        flex-direction: column;
    }

    .btn-cancel[b-d8bek6nstc],
    .btn-submit[b-d8bek6nstc] {
        width: 100%;
    }

    .choice-input-group[b-d8bek6nstc] {
        flex-direction: column;
        align-items: stretch;
    }

    .choice-checkbox-label[b-d8bek6nstc] {
        width: 100%;
        justify-content: center;
    }
}

/* /Components/Pages/AddEditUser.razor.rz.scp.css */
.user-form-container[b-rcjqa3efyv] {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.form-header[b-rcjqa3efyv] {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5364 100%);
    color: white !important;
    padding: 20px;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
}

.form-header *[b-rcjqa3efyv] {
    color: white !important;
}

.form-header h2[b-rcjqa3efyv] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: white !important;
}

.user-form[b-rcjqa3efyv] {
    background: white;
    padding: 24px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.form-section[b-rcjqa3efyv] {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e9ecef;
}

.form-section:last-of-type[b-rcjqa3efyv] {
    border-bottom: none;
}

.section-title[b-rcjqa3efyv] {
    color: #1e3a5f !important;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #1e3a5f;
}

.section-title *[b-rcjqa3efyv] {
    color: #1e3a5f !important;
}

.form-row[b-rcjqa3efyv] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.form-group[b-rcjqa3efyv] {
    display: flex;
    flex-direction: column;
}

.form-group label[b-rcjqa3efyv] {
    font-size: 13px;
    font-weight: 600;
    color: #333 !important;
    margin-bottom: 6px;
}

.form-group label *[b-rcjqa3efyv] {
    color: #333 !important;
}

.form-control[b-rcjqa3efyv] {
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 13px;
    transition: border-color 0.2s ease;
}

.form-control:focus[b-rcjqa3efyv] {
    outline: none;
    border-color: #1e3a5f;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1);
}

.checkbox-group[b-rcjqa3efyv] {
    display: flex;
    align-items: center;
    padding-top: 24px;
}

.checkbox-label[b-rcjqa3efyv] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #333 !important;
}

.checkbox-label *[b-rcjqa3efyv] {
    color: #333 !important;
}

.checkbox-label input[type="checkbox"][b-rcjqa3efyv] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.form-actions[b-rcjqa3efyv] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e9ecef;
}

.btn-cancel[b-rcjqa3efyv] {
    padding: 10px 20px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: white;
    color: #333 !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel *[b-rcjqa3efyv] {
    color: #333 !important;
}

.btn-cancel:hover[b-rcjqa3efyv] {
    background: #f8f9fa;
    border-color: #adb5bd;
}

.btn-submit[b-rcjqa3efyv] {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background: #1e3a5f;
    color: white !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-submit *[b-rcjqa3efyv] {
    color: white !important;
}

.btn-submit:hover:not(:disabled)[b-rcjqa3efyv] {
    background: #2c5364;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(30, 58, 95, 0.2);
}

.btn-submit:disabled[b-rcjqa3efyv] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-send-credentials[b-rcjqa3efyv] {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background: #17a2b8;
    color: white !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-send-credentials *[b-rcjqa3efyv] {
    color: white !important;
}

.btn-send-credentials:hover:not(:disabled)[b-rcjqa3efyv] {
    background: #138496;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(23, 162, 184, 0.2);
}

.btn-send-credentials:disabled[b-rcjqa3efyv] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-add-section[b-rcjqa3efyv] {
    padding: 8px 16px;
    border: 2px solid #1e3a5f;
    border-radius: 4px;
    background: #1e3a5f;
    color: white !important;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 45px;
    height: 38px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    visibility: visible !important;
    opacity: 1 !important;
}

.btn-add-section:hover[b-rcjqa3efyv] {
    background: #2c5364;
    border-color: #2c5364;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(30, 58, 95, 0.2);
}

/* Modal Styles - Beautiful styling applied to ALL modals */
.modal-overlay[b-rcjqa3efyv] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-content[b-rcjqa3efyv] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: modalSlideIn-b-rcjqa3efyv 0.3s ease-out;
}

@keyframes modalSlideIn-b-rcjqa3efyv {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header[b-rcjqa3efyv] {
    padding: 20px 24px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5364 100%);
    border-radius: 12px 12px 0 0;
}

.modal-header h3[b-rcjqa3efyv] {
    margin: 0;
    color: white !important;
    font-size: 20px;
    font-weight: 600;
}

.modal-close[b-rcjqa3efyv] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
    line-height: 1;
}

.modal-close:hover:not(:disabled)[b-rcjqa3efyv] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.modal-close:disabled[b-rcjqa3efyv] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.modal-body[b-rcjqa3efyv] {
    padding: 24px;
}

.modal-body p[b-rcjqa3efyv] {
    margin: 0 0 16px 0;
    color: #555;
    font-size: 15px;
    line-height: 1.5;
}

/* Modal form styling */
.modal-body .form-group[b-rcjqa3efyv] {
    margin-bottom: 20px;
}

.modal-body .form-group label[b-rcjqa3efyv] {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modal-body .form-control[b-rcjqa3efyv] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: white;
}

.modal-body .form-control:focus[b-rcjqa3efyv] {
    outline: none;
    border-color: #1e3a5f;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

.modal-footer[b-rcjqa3efyv] {
    padding: 16px 24px;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.modal-footer .btn-cancel[b-rcjqa3efyv],
.modal-footer .btn-save[b-rcjqa3efyv] {
    min-width: 100px;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease;
}

.btn-save[b-rcjqa3efyv] {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5364 100%) !important;
    color: white !important;
    border: none !important;
}

.btn-save *[b-rcjqa3efyv] {
    color: white !important;
}

.btn-save:hover:not(:disabled)[b-rcjqa3efyv] {
    background: linear-gradient(135deg, #2c5364 0%, #1e3a5f 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.35);
}

.btn-save:disabled[b-rcjqa3efyv] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.modal-footer .btn-cancel[b-rcjqa3efyv] {
    background: white !important;
    border: 1px solid #ced4da !important;
    color: #495057 !important;
}

.modal-footer .btn-cancel:hover:not(:disabled)[b-rcjqa3efyv] {
    background: #f8f9fa !important;
    border-color: #adb5bd !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.modal-footer .btn-cancel:disabled[b-rcjqa3efyv] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.not-authenticated[b-rcjqa3efyv] {
    text-align: center;
    padding: 50px 20px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    max-width: 600px;
    margin: 50px auto;
}

.not-authenticated h3[b-rcjqa3efyv] {
    color: #1a2744;
    margin-bottom: 15px;
    font-weight: 600;
}

.not-authenticated p[b-rcjqa3efyv] {
    color: #6c757d;
}

.not-authenticated a[b-rcjqa3efyv] {
    color: #0066cc;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
}

.not-authenticated a:hover[b-rcjqa3efyv] {
    color: #0052a3;
    text-decoration: underline;
}

/* Course Selection Styles */
.courses-selection-container[b-rcjqa3efyv] {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 16px;
    background: #f8f9fa;
}

.course-add-dropdown-container[b-rcjqa3efyv] {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    align-items: flex-end;
}

.course-add-dropdown[b-rcjqa3efyv] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 13px;
    background: white;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.course-add-dropdown:focus[b-rcjqa3efyv] {
    outline: none;
    border-color: #1e3a5f;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1);
}

.btn-add-course[b-rcjqa3efyv] {
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    background: #1e3a5f;
    color: white !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-add-course *[b-rcjqa3efyv] {
    color: white !important;
}

.btn-add-course:hover:not(:disabled)[b-rcjqa3efyv] {
    background: #2c5364;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(30, 58, 95, 0.2);
}

.btn-add-course:disabled[b-rcjqa3efyv] {
    opacity: 0.5;
    cursor: not-allowed;
}

.selected-courses-list[b-rcjqa3efyv] {
    margin-top: 16px;
}

.selected-courses-header[b-rcjqa3efyv] {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #dee2e6;
    color: #1e3a5f !important;
    font-size: 14px;
}

.selected-courses-header *[b-rcjqa3efyv] {
    color: #1e3a5f !important;
}

.course-checkbox-item.selected[b-rcjqa3efyv] {
    background: #e8f4f8;
    border-color: #1e3a5f;
}

.courses-checkbox-grid[b-rcjqa3efyv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.course-checkbox-item[b-rcjqa3efyv] {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 12px;
    transition: all 0.2s ease;
}

.course-checkbox-item:hover[b-rcjqa3efyv] {
    border-color: #1e3a5f;
    box-shadow: 0 2px 4px rgba(30, 58, 95, 0.1);
    transform: translateY(-1px);
}

.course-checkbox-label[b-rcjqa3efyv] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
    width: 100%;
}

.course-checkbox-input[b-rcjqa3efyv] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #1e3a5f;
    flex-shrink: 0;
}

.course-checkbox-text[b-rcjqa3efyv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.course-title[b-rcjqa3efyv] {
    font-size: 14px;
    font-weight: 600;
    color: #333 !important;
    line-height: 1.4;
}

.course-title *[b-rcjqa3efyv] {
    color: #333 !important;
}

.course-category[b-rcjqa3efyv] {
    font-size: 12px;
    color: #6c757d !important;
    font-style: italic;
}

.course-category *[b-rcjqa3efyv] {
    color: #6c757d !important;
}

.course-checkbox-item:has(input:checked)[b-rcjqa3efyv] {
    background: #e8f4f8;
    border-color: #1e3a5f;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1);
}

.course-checkbox-item:has(input:checked) .course-title[b-rcjqa3efyv] {
    color: #1e3a5f;
}

.selected-courses-summary[b-rcjqa3efyv] {
    padding: 12px;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-radius: 6px;
    text-align: center;
    color: #2e7d32;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #a5d6a7;
}

.selected-courses-summary.no-selection[b-rcjqa3efyv] {
    background: #f5f5f5;
    color: #9e9e9e;
    border-color: #e0e0e0;
    font-weight: normal;
}

.no-courses-message[b-rcjqa3efyv] {
    padding: 24px;
    text-align: center;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    color: #856404;
}

.no-courses-message p[b-rcjqa3efyv] {
    margin: 0;
    font-size: 14px;
}

@media (max-width: 768px) {
    .user-form-container[b-rcjqa3efyv] {
        padding: 12px;
    }

    .form-row[b-rcjqa3efyv] {
        grid-template-columns: 1fr;
    }

    .form-actions[b-rcjqa3efyv] {
        flex-direction: column;
    }

    .btn-cancel[b-rcjqa3efyv],
    .btn-submit[b-rcjqa3efyv],
    .btn-send-credentials[b-rcjqa3efyv] {
        width: 100%;
    }

    .courses-checkbox-grid[b-rcjqa3efyv] {
        grid-template-columns: 1fr;
    }
}

/* Course Item with Expiry Date */
.courses-list-with-expiry[b-rcjqa3efyv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.course-item-with-expiry[b-rcjqa3efyv] {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 12px;
    transition: all 0.2s ease;
}

.course-item-with-expiry:hover[b-rcjqa3efyv] {
    border-color: #1e3a5f;
    box-shadow: 0 2px 4px rgba(30, 58, 95, 0.1);
}

.course-item-main[b-rcjqa3efyv] {
    margin-bottom: 12px;
}

.course-expiry-input[b-rcjqa3efyv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid #e9ecef;
}

.expiry-label[b-rcjqa3efyv] {
    font-size: 12px;
    font-weight: 600;
    color: #666 !important;
    white-space: nowrap;
}

.expiry-label *[b-rcjqa3efyv] {
    color: #666 !important;
}

.expiry-date-input[b-rcjqa3efyv] {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 12px;
}

.btn-clear-expiry[b-rcjqa3efyv] {
    padding: 6px 12px;
    border: 1px solid #dee2e6 !important;
    border-radius: 4px;
    background: #f8f9fa !important;
    background-color: #f8f9fa !important;
    color: #666 !important;
    cursor: pointer;
    font-size: 16px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
    min-width: 32px;
    text-align: center;
    line-height: 1.2;
}

.btn-clear-expiry *[b-rcjqa3efyv] {
    color: #666 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.btn-clear-expiry:hover[b-rcjqa3efyv] {
    background: #dc3545 !important;
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
}

.btn-clear-expiry:hover *[b-rcjqa3efyv] {
    color: white !important;
}

/* /Components/Pages/AdminManagement.razor.rz.scp.css */
.admin-grid[b-daq37l0jkb] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.grid-full[b-daq37l0jkb] {
    grid-column: 1 / -1;
}

.page-title[b-daq37l0jkb] {
    color: #333 !important;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 6px 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.page-title *[b-daq37l0jkb] {
    color: #333 !important;
}

.page-subtitle[b-daq37l0jkb] {
    color: #666 !important;
    font-size: 12px;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.page-subtitle *[b-daq37l0jkb] {
    color: #666 !important;
}

.subtitle-full[b-daq37l0jkb],
.subtitle-mobile[b-daq37l0jkb] {
    color: #666 !important;
}

.subtitle-full *[b-daq37l0jkb],
.subtitle-mobile *[b-daq37l0jkb] {
    color: #666 !important;
}

.subtitle-mobile[b-daq37l0jkb] {
    display: none;
}

.card[b-daq37l0jkb] {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.card-content[b-daq37l0jkb] {
    padding: 16px;
}

.tabs-container[b-daq37l0jkb] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tabs-header[b-daq37l0jkb] {
    display: flex;
    border-bottom: 2px solid #e9ecef;
    background: #f8f9fa;
}

.tabs-mobile-select[b-daq37l0jkb] {
    display: none;
    padding: 8px;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
}

.tabs-mobile-select select[b-daq37l0jkb] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    background: #fff;
    color: #1e3a5f;
    font-size: 13px;
    font-weight: 600;
}

.tab-button[b-daq37l0jkb] {
    padding: 12px 24px;
    border: none;
    background: transparent;
    color: #666 !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}

.tab-button *[b-daq37l0jkb] {
    color: #666 !important;
}

.tab-button:hover[b-daq37l0jkb] {
    color: #1e3a5f !important;
    background: rgba(30, 58, 95, 0.05);
}

.tab-button:hover *[b-daq37l0jkb] {
    color: #1e3a5f !important;
}

.tab-button.active[b-daq37l0jkb] {
    color: #1e3a5f !important;
    border-bottom-color: #1e3a5f;
    background: white;
}

.tab-button.active *[b-daq37l0jkb] {
    color: #1e3a5f !important;
}

.tabs-content[b-daq37l0jkb] {
    padding: 0;
}

.not-authenticated[b-daq37l0jkb] {
    text-align: center;
    padding: 50px 20px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    max-width: 600px;
    margin: 50px auto;
}

.not-authenticated h3[b-daq37l0jkb] {
    color: #1a2744;
    margin-bottom: 15px;
    font-weight: 600;
}

.not-authenticated p[b-daq37l0jkb] {
    color: #6c757d;
}

.not-authenticated a[b-daq37l0jkb] {
    color: #0066cc;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
}

.not-authenticated a:hover[b-daq37l0jkb] {
    color: #0052a3;
    text-decoration: underline;
}

/* Mobile Responsiveness */
/* Landscape orientation on mobile devices */
@media (orientation: landscape) and (max-height: 600px) {
    .admin-grid[b-daq37l0jkb] {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 0 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .card[b-daq37l0jkb] {
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .card-content[b-daq37l0jkb] {
        padding: 8px;
        min-width: 0;
    }
    
    .page-title[b-daq37l0jkb] {
        font-size: 14px;
        margin-bottom: 2px;
        color: #333 !important;
    }

    .page-title *[b-daq37l0jkb] {
        color: #333 !important;
    }
    
    .page-subtitle[b-daq37l0jkb] {
        font-size: 10px;
        color: #666 !important;
    }

    .page-subtitle *[b-daq37l0jkb] {
        color: #666 !important;
    }

    .subtitle-full[b-daq37l0jkb] {
        display: none;
    }

    .subtitle-mobile[b-daq37l0jkb] {
        display: inline;
    }
    
    .tabs-header[b-daq37l0jkb] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        min-width: fit-content;
    }
    
    .tab-button[b-daq37l0jkb] {
        flex: 0 0 auto;
        min-width: fit-content;
        padding: 8px 12px;
        font-size: 11px;
        text-align: center;
        white-space: nowrap;
        color: #666 !important;
    }

    .tab-button *[b-daq37l0jkb] {
        color: #666 !important;
    }

    .tab-button.active[b-daq37l0jkb] {
        color: #1e3a5f !important;
    }

    .tab-button.active *[b-daq37l0jkb] {
        color: #1e3a5f !important;
    }
    
    .tabs-container[b-daq37l0jkb] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    
    .tabs-content[b-daq37l0jkb] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
}

@media (max-width: 968px) {
    .admin-grid[b-daq37l0jkb] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .card-content[b-daq37l0jkb] {
        padding: 12px;
    }
    
    .page-title[b-daq37l0jkb] {
        font-size: 16px;
        color: #333 !important;
    }

    .page-title *[b-daq37l0jkb] {
        color: #333 !important;
    }
    
    .page-subtitle[b-daq37l0jkb] {
        font-size: 11px;
        color: #666 !important;
    }

    .page-subtitle *[b-daq37l0jkb] {
        color: #666 !important;
    }
    
    .tab-button[b-daq37l0jkb] {
        padding: 10px 16px;
        font-size: 13px;
        color: #666 !important;
    }

    .tab-button *[b-daq37l0jkb] {
        color: #666 !important;
    }

    .tab-button.active[b-daq37l0jkb] {
        color: #1e3a5f !important;
    }

    .tab-button.active *[b-daq37l0jkb] {
        color: #1e3a5f !important;
    }
}

@media (max-width: 768px) {
    .admin-grid[b-daq37l0jkb] {
        gap: 10px;
        padding: 0 4px;
    }
    
    .card[b-daq37l0jkb] {
        border-radius: 8px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        margin: 0;
    }
    
    .card-content[b-daq37l0jkb] {
        padding: 10px;
    }
    
    .page-title[b-daq37l0jkb] {
        font-size: 15px;
        margin-bottom: 4px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        line-height: 1.3;
        color: #333 !important;
    }

    .page-title *[b-daq37l0jkb] {
        color: #333 !important;
    }
    
    .page-subtitle[b-daq37l0jkb] {
        font-size: 10px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        line-height: 1.3;
        color: #666 !important;
    }

    .page-subtitle *[b-daq37l0jkb] {
        color: #666 !important;
    }

    .subtitle-full[b-daq37l0jkb] {
        display: none;
    }

    .subtitle-mobile[b-daq37l0jkb] {
        display: inline;
    }
    
    .tabs-mobile-select[b-daq37l0jkb] {
        display: block;
    }

    .tabs-header[b-daq37l0jkb] {
        display: none;
    }
    
    .tab-button[b-daq37l0jkb] {
        padding: 10px 8px;
        font-size: 11px;
        text-align: center;
        color: #666 !important;
    }

    .tab-button *[b-daq37l0jkb] {
        color: #666 !important;
    }

    .tab-button:hover[b-daq37l0jkb] {
        color: #1e3a5f !important;
    }

    .tab-button:hover *[b-daq37l0jkb] {
        color: #1e3a5f !important;
    }

    .tab-button.active[b-daq37l0jkb] {
        color: #1e3a5f !important;
    }

    .tab-button.active *[b-daq37l0jkb] {
        color: #1e3a5f !important;
    }
    
    .not-authenticated[b-daq37l0jkb] {
        margin: 20px auto;
        padding: 30px 15px;
    }
    
    .not-authenticated h3[b-daq37l0jkb] {
        font-size: 18px;
        margin-bottom: 10px;
    }
    
    .not-authenticated p[b-daq37l0jkb] {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .admin-grid[b-daq37l0jkb] {
        gap: 8px;
        padding: 0 2px;
    }
    
    .card-content[b-daq37l0jkb] {
        padding: 8px;
    }
    
    .page-title[b-daq37l0jkb] {
        font-size: 13px;
        line-height: 1.2;
        word-wrap: break-word;
        overflow-wrap: break-word;
        color: #333 !important;
    }

    .page-title *[b-daq37l0jkb] {
        color: #333 !important;
    }
    
    .page-subtitle[b-daq37l0jkb] {
        font-size: 9px;
        line-height: 1.2;
        word-wrap: break-word;
        overflow-wrap: break-word;
        color: #666 !important;
    }

    .page-subtitle *[b-daq37l0jkb] {
        color: #666 !important;
    }
    
    .tab-button[b-daq37l0jkb] {
        padding: 8px 6px;
        font-size: 10px;
        color: #666 !important;
    }

    .tab-button *[b-daq37l0jkb] {
        color: #666 !important;
    }

    .tab-button.active[b-daq37l0jkb] {
        color: #1e3a5f !important;
    }

    .tab-button.active *[b-daq37l0jkb] {
        color: #1e3a5f !important;
    }
    
    .not-authenticated[b-daq37l0jkb] {
        margin: 15px auto;
        padding: 20px 12px;
        border-radius: 8px;
    }
    
    .not-authenticated h3[b-daq37l0jkb] {
        font-size: 16px;
    }
    
    .not-authenticated p[b-daq37l0jkb] {
        font-size: 12px;
        line-height: 1.5;
    }
}

@media (max-width: 360px) {
    .admin-grid[b-daq37l0jkb] {
        gap: 6px;
        padding: 0;
    }
    
    .page-title[b-daq37l0jkb] {
        font-size: 12px;
    }
    
    .page-subtitle[b-daq37l0jkb] {
        font-size: 8px;
    }
    
    .tab-button[b-daq37l0jkb] {
        padding: 8px 4px;
        font-size: 9px;
        color: #666 !important;
    }

    .tab-button *[b-daq37l0jkb] {
        color: #666 !important;
    }

    .tab-button.active[b-daq37l0jkb] {
        color: #1e3a5f !important;
    }

    .tab-button.active *[b-daq37l0jkb] {
        color: #1e3a5f !important;
    }
}

/* /Components/Pages/ContactUs.razor.rz.scp.css */
/* Contact Us page - patterned same as About Us */
/* Banner - same styling as home page but smaller height */
#banner[b-g30jt1a9yt] {
    background-color: #2e3141;
    background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("/images/banner.jpg");
    background-size: auto, cover;
    background-position: center, center;
    background-attachment: fixed, fixed;
    min-height: 22vh;
    padding: 2.5em 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo positioned on the left side like the original template */
#banner .inner[b-g30jt1a9yt] {
    display: flex;
    align-items: center;
    gap: 3em;
    flex-wrap: wrap;
}

#banner .logo[b-g30jt1a9yt] {
    flex-shrink: 0;
    margin: 0;
    text-align: center;
}

#banner .logo img[b-g30jt1a9yt] {
    display: block;
    margin: 0 auto;
    max-width: 150px;
    width: auto;
    height: auto;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent;
}

/* Content area (title, subtitle, button) on the right/centered */
#banner .inner .content[b-g30jt1a9yt] {
    flex: 1;
    text-align: left;
    min-width: 300px;
}

#banner .inner .content h2[b-g30jt1a9yt] {
    margin: 0 0 0.5em 0;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.2;
}

#banner .inner .content p[b-g30jt1a9yt] {
    margin: 0 0 1.5em 0;
    word-wrap: break-word;
}

/* Make white backgrounds transparent on logo */
#banner .logo img[src*="iNurseLogo"][b-g30jt1a9yt] {
    background: transparent !important;
    /* Use screen blend mode to make white areas transparent */
    mix-blend-mode: screen;
}

/* Remove divider lines from spotlight sections */
.wrapper.spotlight .centered-content .content-divider[b-g30jt1a9yt] {
    display: none;
}

/* Ensure all text content is centered */
.wrapper.spotlight .centered-content[b-g30jt1a9yt] {
    text-align: center !important;
}

.wrapper.spotlight .centered-content p[b-g30jt1a9yt] {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}

/* Section header - titles at the top of right column */
.section-header[b-g30jt1a9yt] {
    margin-bottom: 1.5em;
    text-align: left;
}

.map-column .section-header[b-g30jt1a9yt] {
    margin-bottom: 1.5em;
    margin-top: 0;
}

.section-title[b-g30jt1a9yt] {
    color: #ffffff;
    font-size: 1.8em;
    font-weight: 700;
    text-align: right;
    margin-bottom: 0.5em;
    text-transform: uppercase;
    line-height: 1.3;
}

.section-subtitle[b-g30jt1a9yt] {
    color: #ffffff;
    font-size: 1em;
    text-align: right;
    opacity: 0.9;
    line-height: 1.5;
    margin: 0;
}

/* Two-column layout for contact page */
.contact-layout[b-g30jt1a9yt] {
    display: flex;
    gap: 2.5em;
    align-items: flex-start;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
}

.contact-info-column[b-g30jt1a9yt] {
    flex: 1;
    min-width: 250px;
}

.contact-info-column .major[b-g30jt1a9yt] {
    color: #ffffff;
    font-size: 1.8em;
    margin-bottom: 1.5em;
    text-align: left;
}

.map-column[b-g30jt1a9yt] {
    flex: 1.5;
    min-width: 350px;
}

.map-container[b-g30jt1a9yt] {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 1em;
}

.map-container iframe[b-g30jt1a9yt] {
    width: 100%;
    height: 400px;
    border: 0;
    border-radius: 8px;
}

.address-text[b-g30jt1a9yt] {
    color: #ffffff;
    font-size: 0.95em;
    line-height: 1.6;
    text-align: left;
}

.address-text strong[b-g30jt1a9yt] {
    color: #ffffff;
    font-weight: 600;
}

.contact[b-g30jt1a9yt] {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.contact li[b-g30jt1a9yt] {
    margin-bottom: 1.5em;
    padding-left: 40px;
    position: relative;
    color: #ffffff;
    font-size: 1em;
    line-height: 1.6;
}

.contact li .icon[b-g30jt1a9yt] {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 20px;
    color: #ffffff;
}

.contact li a[b-g30jt1a9yt] {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact li a:hover[b-g30jt1a9yt] {
    color: #4a9eff;
}

/* Watermark for Contact Us sections - positioned on lower left */
.wrapper.spotlight.style1 .inner[b-g30jt1a9yt]::after {
    content: "Metro Manila";
    position: absolute;
    left: 2%;
    bottom: 5%;
    font-size: 2.5em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    line-height: 1;
}

.wrapper.spotlight.style2 .inner[b-g30jt1a9yt]::after {
    content: "Cebu City";
    position: absolute;
    left: 2%;
    bottom: 5%;
    font-size: 2.5em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    line-height: 1;
}

.wrapper.spotlight.style3 .inner[b-g30jt1a9yt]::after {
    content: "Contact Us";
    position: absolute;
    left: 2%;
    bottom: 5%;
    font-size: 2.5em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    line-height: 1;
}

/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
    /* Center both logo and content on mobile */
    #banner .inner[b-g30jt1a9yt] {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 1.5em;
    }

    #banner .inner .content[b-g30jt1a9yt] {
        text-align: center;
        flex: none;
        width: 100%;
        min-width: auto;
    }

    #banner .logo[b-g30jt1a9yt] {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .section-header[b-g30jt1a9yt] {
        margin-bottom: 1.5em;
        text-align: center;
    }
    
    .section-title[b-g30jt1a9yt] {
        font-size: 1.5em;
        text-align: center;
    }
    
    .section-subtitle[b-g30jt1a9yt] {
        font-size: 0.95em;
        text-align: center;
    }
    
    .contact-layout[b-g30jt1a9yt] {
        flex-direction: column;
        gap: 2em;
        padding: 0;
    }
    
    .contact-info-column[b-g30jt1a9yt],
    .map-column[b-g30jt1a9yt] {
        width: 100%;
        min-width: unset;
    }
    
    .contact-info-column .major[b-g30jt1a9yt] {
        text-align: center;
    }
    
    .map-container iframe[b-g30jt1a9yt] {
        height: 300px;
    }
    
    .address-text[b-g30jt1a9yt] {
        text-align: center;
    }
}

@media screen and (max-width: 480px) {
    .contact-layout[b-g30jt1a9yt] {
        padding: 1em;
    }
    
    .map-container iframe[b-g30jt1a9yt] {
        height: 250px;
    }
    
    .contact li[b-g30jt1a9yt] {
        padding-left: 35px;
        font-size: 0.9em;
        margin-bottom: 1em;
    }
    
    .contact li .icon[b-g30jt1a9yt] {
        font-size: 18px;
    }
    
    .contact-info-column .major[b-g30jt1a9yt] {
        font-size: 1.5em;
    }
}


/* /Components/Pages/CourseManagementComponent.razor.rz.scp.css */
.card-header-navy[b-6c55w57z6w] {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5364 100%);
    padding: 12px 16px;
    color: white !important;
}

.card-header-navy *[b-6c55w57z6w] {
    color: white !important;
}

.header-flex[b-6c55w57z6w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.card-header-navy h3[b-6c55w57z6w] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: white !important;
}

.btn-icon[b-6c55w57z6w] {
    margin-right: 4px;
}

.card-content[b-6c55w57z6w] {
    padding: 16px;
}

.search-container[b-6c55w57z6w] {
    margin-bottom: 12px;
}

.search-input[b-6c55w57z6w] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 12px;
    transition: border-color 0.2s ease;
}

.search-input:focus[b-6c55w57z6w] {
    outline: none;
    border-color: #1e3a5f;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1);
}

.no-results[b-6c55w57z6w] {
    text-align: center;
    color: #666;
    padding: 20px;
    font-size: 12px;
    margin: 0;
}

.btn-add[b-6c55w57z6w] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    background: #28a745;
    color: white !important;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add *[b-6c55w57z6w] {
    color: white !important;
}

.btn-add:hover[b-6c55w57z6w] {
    background: #218838;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.table-container[b-6c55w57z6w] {
    overflow: auto;
    width: 100%;
    max-height: 60vh;
    -webkit-overflow-scrolling: touch;
}

.table[b-6c55w57z6w] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
    font-size: 12px;
}

.table thead[b-6c55w57z6w] {
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 10;
}

.table th[b-6c55w57z6w] {
    padding: 8px 6px;
    text-align: left;
    font-weight: 600;
    color: #333 !important;
    font-size: 11px;
    white-space: nowrap;
}

.table th *[b-6c55w57z6w] {
    color: #333 !important;
}

.table td[b-6c55w57z6w] {
    padding: 8px 6px;
    border-bottom: 1px solid #dee2e6;
    color: #555 !important;
    font-size: 11px;
}

.table td *[b-6c55w57z6w] {
    color: #555 !important;
}

/* Ensure enrollments column has dark text */
.col-enroll[b-6c55w57z6w],
.table td.col-enroll[b-6c55w57z6w],
.table td[class*="enroll"][b-6c55w57z6w] {
    color: #212529 !important;
}

.col-enroll *[b-6c55w57z6w],
.table td.col-enroll *[b-6c55w57z6w],
.table td[class*="enroll"] *[b-6c55w57z6w] {
    color: #212529 !important;
}

.col-id[b-6c55w57z6w] {
    width: 50px;
    min-width: 50px;
}

.col-title[b-6c55w57z6w] {
    min-width: 200px;
}

.col-category[b-6c55w57z6w] {
    min-width: 120px;
}

.col-filecount[b-6c55w57z6w] {
    width: 120px;
    min-width: 120px;
}

.col-creator[b-6c55w57z6w] {
    min-width: 150px;
}

.col-date[b-6c55w57z6w] {
    width: 100px;
    min-width: 100px;
}

.col-enroll[b-6c55w57z6w] {
    width: 90px;
    min-width: 90px;
    text-align: center;
}

.col-rating[b-6c55w57z6w] {
    width: 120px;
    min-width: 120px;
    text-align: center;
}

.col-actions[b-6c55w57z6w] {
    width: 80px;
    min-width: 80px;
    text-align: center;
}

.file-type-badge[b-6c55w57z6w] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-video[b-6c55w57z6w] {
    background-color: #e3f2fd;
    color: #1976d2;
}

.badge-pdf[b-6c55w57z6w] {
    background-color: #fff3e0;
    color: #f57c00;
}

.btn-edit[b-6c55w57z6w] {
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    background: #1e3a5f !important;
    color: white !important;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit[b-6c55w57z6w],
.btn-edit *[b-6c55w57z6w],
.btn-edit span[b-6c55w57z6w],
.btn-edit[b-6c55w57z6w]::before,
.btn-edit[b-6c55w57z6w]::after {
    color: white !important;
}

.btn-edit:hover:not(:disabled)[b-6c55w57z6w] {
    background: #2c5364 !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(30, 58, 95, 0.2);
}

.btn-edit:hover:not(:disabled)[b-6c55w57z6w],
.btn-edit:hover:not(:disabled) *[b-6c55w57z6w],
.btn-edit:hover:not(:disabled) span[b-6c55w57z6w] {
    color: white !important;
}

.btn-delete[b-6c55w57z6w] {
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    background: #dc3545 !important;
    color: white !important;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-delete[b-6c55w57z6w],
.btn-delete *[b-6c55w57z6w],
.btn-delete span[b-6c55w57z6w],
.btn-delete[b-6c55w57z6w]::before,
.btn-delete[b-6c55w57z6w]::after {
    color: white !important;
}

.btn-delete:hover:not(:disabled)[b-6c55w57z6w] {
    background: #c82333 !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
}

.btn-delete:hover:not(:disabled)[b-6c55w57z6w],
.btn-delete:hover:not(:disabled) *[b-6c55w57z6w],
.btn-delete:hover:not(:disabled) span[b-6c55w57z6w] {
    color: white !important;
}

.table tbody tr:hover[b-6c55w57z6w] {
    background-color: #f8f9fa;
}

/* Ensure Edit and Delete buttons in table have white text */
.table .btn-edit[b-6c55w57z6w],
.table td .btn-edit[b-6c55w57z6w],
.table .col-actions .btn-edit[b-6c55w57z6w] {
    background: #1e3a5f !important;
    color: white !important;
}

.table .btn-edit *[b-6c55w57z6w],
.table td .btn-edit *[b-6c55w57z6w],
.table .col-actions .btn-edit *[b-6c55w57z6w] {
    color: white !important;
}

.table .btn-delete[b-6c55w57z6w],
.table td .btn-delete[b-6c55w57z6w],
.table .col-actions .btn-delete[b-6c55w57z6w] {
    background: #dc3545 !important;
    color: white !important;
}

.table .btn-delete *[b-6c55w57z6w],
.table td .btn-delete *[b-6c55w57z6w],
.table .col-actions .btn-delete *[b-6c55w57z6w] {
    color: white !important;
}

.table-striped tbody tr:nth-of-type(odd)[b-6c55w57z6w] {
    background-color: rgba(0, 0, 0, 0.02);
}

.table-hover tbody tr:hover[b-6c55w57z6w] {
    background-color: rgba(0, 0, 0, 0.075);
}

/* Mobile Card View */
.mobile-view[b-6c55w57z6w] {
    display: none;
}

.mobile-card[b-6c55w57z6w] {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.mobile-card-header[b-6c55w57z6w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e9ecef;
}

.mobile-card-id[b-6c55w57z6w] {
    font-weight: 600;
    font-size: 14px;
    color: #333 !important;
}

.mobile-card-id *[b-6c55w57z6w] {
    color: #333 !important;
}

.mobile-card-body[b-6c55w57z6w] {
    margin-bottom: 12px;
}

.mobile-card-row[b-6c55w57z6w] {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
}

.mobile-label[b-6c55w57z6w] {
    font-weight: 600;
    color: #666 !important;
    min-width: 80px;
}

.mobile-label *[b-6c55w57z6w] {
    color: #666 !important;
}

.mobile-value[b-6c55w57z6w] {
    color: #333 !important;
    text-align: right;
    flex: 1;
    word-break: break-word;
}

.mobile-value *[b-6c55w57z6w] {
    color: #333 !important;
}

.btn-edit-mobile[b-6c55w57z6w] {
    flex: 1;
    min-width: calc(50% - 6px);
    padding: 8px 6px;
    font-size: 11px;
    border: none;
    border-radius: 4px;
    background: #1e3a5f;
    color: white !important;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-edit-mobile *[b-6c55w57z6w] {
    color: white !important;
}

.btn-edit-mobile:hover:not(:disabled)[b-6c55w57z6w] {
    background: #2c5364;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(30, 58, 95, 0.2);
}

.btn-delete-mobile[b-6c55w57z6w] {
    flex: 1;
    min-width: calc(50% - 6px);
    padding: 8px 6px;
    font-size: 11px;
    border: none;
    border-radius: 4px;
    background: #dc3545;
    color: white !important;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-delete-mobile *[b-6c55w57z6w] {
    color: white !important;
}

.btn-delete-mobile:hover:not(:disabled)[b-6c55w57z6w] {
    background: #c82333;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
}

.mobile-card-footer[b-6c55w57z6w] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px;
    border-top: 1px solid #e9ecef;
}

.mobile-card-footer button[b-6c55w57z6w] {
    flex: 1;
    min-width: calc(50% - 6px);
    max-width: calc(50% - 6px);
}

@media (max-width: 768px) {
    .desktop-view[b-6c55w57z6w] {
        display: none;
    }
    
    .mobile-view[b-6c55w57z6w] {
        display: block;
    }
    
    .table-container[b-6c55w57z6w] {
        display: none;
    }
}

@media (max-width: 480px) {
    .card-content[b-6c55w57z6w] {
        padding: 12px;
    }
    
    .card-header-navy[b-6c55w57z6w] {
        padding: 10px 12px;
    }
    
    .card-header-navy h3[b-6c55w57z6w] {
        font-size: 14px;
    }
    
    .header-flex[b-6c55w57z6w] {
        gap: 8px;
    }
    
    .btn-add[b-6c55w57z6w] {
        padding: 5px 10px;
        font-size: 11px;
    }
    
    .btn-icon[b-6c55w57z6w] {
        margin-right: 3px;
    }
}

/* /Components/Pages/CoursePowerPointViewer.razor.rz.scp.css */
/* Scoped to this component — overrides wwwroot/assets/css/main.css (body/strong/links white). */
.ppt-viewer[b-hd9s0383sd] {
    padding: 40px;
    text-align: center;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 16px;
    color: #212529;
}

.ppt-viewer-online[b-hd9s0383sd] {
    text-align: left;
    padding: 16px;
}

/* Embedded in course file row: prioritize slide area; slim padding and toolbar */
.ppt-viewer-online.ppt-viewer-embedded-chrome[b-hd9s0383sd] {
    padding: 6px 4px 10px;
    margin-bottom: 8px;
    background: #fff;
    border: 1px solid #e9ecef;
}

.ppt-viewer-embedded-chrome .ppt-office-embed-fill[b-hd9s0383sd] {
    min-height: min(72vh, 640px);
    width: 100%;
    border: 0;
    border-radius: 6px;
    display: block;
    vertical-align: top;
}

.ppt-viewer-embedded-chrome .ppt-embed-note-minimal[b-hd9s0383sd] {
    margin: 6px 0 0;
    font-size: 12px;
    color: #6c757d;
}

.ppt-viewer-embedded-chrome[b-hd9s0383sd]  .ppt-local-root {
    margin-top: 4px;
}

.ppt-viewer-embedded-chrome[b-hd9s0383sd]  .ppt-local-canvas-wrap {
    min-height: min(52vh, 520px);
    padding: 10px 12px;
    border-radius: 6px;
}

.ppt-viewer-embedded-chrome[b-hd9s0383sd]  .ppt-local-toolbar {
    margin-top: 8px;
    padding-top: 8px;
    gap: 8px;
    border-top: none;
}

.ppt-viewer-embedded-chrome[b-hd9s0383sd]  .ppt-local-nav {
    padding: 8px 14px !important;
    font-size: 13px !important;
}

/* /course-pptx/… local viewer: maximize slide area to fill the viewport */
.ppt-viewer-standalone-immersive.ppt-viewer-online[b-hd9s0383sd] {
    padding: 6px 8px 12px !important;
    margin-bottom: 0 !important;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #eef1f4;
    border-radius: 0;
    max-width: none;
}

.ppt-viewer-standalone-immersive .ppt-preview-hint[b-hd9s0383sd] {
    margin: 0 0 8px;
    font-size: 13px;
}

.ppt-viewer-standalone-immersive .ppt-mobile-tip[b-hd9s0383sd] {
    margin-bottom: 8px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.4;
}

.ppt-viewer-standalone-immersive .ppt-local-fidelity-hint[b-hd9s0383sd] {
    margin: 0 0 6px;
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.35;
}

.ppt-preview-hint[b-hd9s0383sd] {
    margin: 0 0 10px;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}

.ppt-preview-hint strong[b-hd9s0383sd] {
    color: #1e3a5f;
}

.ppt-mobile-tip[b-hd9s0383sd] {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #c5e1ff;
    background: #e8f4fc;
    color: #0d3d62 !important;
    font-size: 13px;
    line-height: 1.45;
}

/* main.css sets global strong,b { color: #fff } — wins over inherited tip color; force readable contrast */
.ppt-mobile-tip strong[b-hd9s0383sd],
.ppt-mobile-tip b[b-hd9s0383sd] {
    color: #1e3a5f !important;
    font-weight: 700;
}

.ppt-mobile-tip-title[b-hd9s0383sd] {
    display: block;
    font-weight: 700;
    color: #1e3a5f !important;
    margin-bottom: 6px;
}

.ppt-mobile-tip-list[b-hd9s0383sd] {
    margin: 8px 0 0;
    padding-left: 1.2em;
    color: #0d3d62 !important;
}

.ppt-mobile-tip-list li[b-hd9s0383sd] {
    margin-bottom: 6px;
}

.ppt-mobile-tip-list li:last-child[b-hd9s0383sd] {
    margin-bottom: 0;
}

.ppt-mobile-tip-list strong[b-hd9s0383sd] {
    color: #1e3a5f !important;
}

.ppt-mobile-tip-compact-inline[b-hd9s0383sd] {
    margin: 0 0 10px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.4;
}

.ppt-message-compact[b-hd9s0383sd] {
    padding: 24px 20px;
}

.ppt-title[b-hd9s0383sd] {
    margin-bottom: 12px !important;
    color: #333 !important;
}

.ppt-title strong[b-hd9s0383sd] {
    color: #1e3a5f !important;
    font-size: 18px;
}

.ppt-open-hint[b-hd9s0383sd] {
    margin: 0 0 16px !important;
    font-size: 15px !important;
    color: #444 !important;
}

.btn-ppt-open[b-hd9s0383sd] {
    display: inline-block;
    margin-bottom: 8px;
}

.btn-ppt-download[b-hd9s0383sd] {
    margin-top: 8px;
}

.ppt-office-embed[b-hd9s0383sd] {
    min-height: 480px;
    background: #fff;
}

.ppt-viewer-standalone-immersive .ppt-office-embed[b-hd9s0383sd] {
    flex: 1 1 auto;
    min-height: calc(100dvh - 15rem);
    min-height: calc(100vh - 15rem);
    width: 100%;
    border: 0;
}

.ppt-embed-note[b-hd9s0383sd] {
    margin: 10px 0 0;
    font-size: 13px;
    color: #444;
}

.ppt-embed-note a[b-hd9s0383sd] {
    font-weight: 600;
    color: #1e3a5f !important;
    border-bottom-color: rgba(30, 58, 95, 0.4);
}

.ppt-embed-note a:hover[b-hd9s0383sd] {
    color: #0d47a1 !important;
    border-bottom-color: transparent;
}

.ppt-message[b-hd9s0383sd] {
    margin-bottom: 24px;
}

.ppt-message p[b-hd9s0383sd] {
    margin: 8px 0;
    color: #555 !important;
    font-size: 15px;
}

.ppt-message p *[b-hd9s0383sd] {
    color: inherit;
}

.ppt-message strong[b-hd9s0383sd] {
    color: #1e3a5f !important;
    font-size: 18px;
}

.btn-download-large[b-hd9s0383sd] {
    display: inline-block;
    padding: 14px 28px;
    border: 2px solid #1e3a5f;
    border-radius: 6px;
    background: white;
    color: #1e3a5f !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-download-large:hover[b-hd9s0383sd] {
    background: #1e3a5f;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3);
}

/* Local PptxViewJS viewer — ::deep targets nodes created by JS (no Blazor scoped attribute). */
[b-hd9s0383sd] .ppt-local-root {
    margin-top: 12px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 100%;
}

[b-hd9s0383sd] .ppt-local-root:fullscreen {
    background: #eef1f4;
    padding: 16px;
    box-sizing: border-box;
    justify-content: flex-start;
}

[b-hd9s0383sd] .ppt-local-root:-webkit-full-screen {
    background: #eef1f4;
    padding: 16px;
    box-sizing: border-box;
}

/*
 * iPhone/iPad: “full screen” is this fixed overlay — Apple does not expose true Fullscreen API for slide DIVs.
 * Viewer node is moved under document.body in JS so fixed positioning is not trapped by layout transforms.
 */
[b-hd9s0383sd] .ppt-local-root.ppt-local-pseudo-fs {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: -webkit-fill-available !important;
    max-height: 100vh !important;
    max-height: -webkit-fill-available !important;
    z-index: 2147483646 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #eef1f4 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y pinch-zoom;
    padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

[b-hd9s0383sd] .ppt-local-root.ppt-local-pseudo-fs .ppt-local-canvas-wrap {
    flex: 1 1 auto;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom;
    align-items: center;
    justify-content: flex-start;
}

[b-hd9s0383sd] .ppt-local-root.ppt-local-pseudo-fs .ppt-local-toolbar {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 10px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    border-top: 1px solid #cfd6de;
    background: #eef1f4;
    position: sticky;
    bottom: 0;
    z-index: 4;
    -webkit-transform: translateZ(0);
}

[b-hd9s0383sd] .ppt-local-canvas-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0; /* flex column parent: allows correct width for fit-to-canvas sizing */
    overflow: auto;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
    min-height: clamp(380px, 62vh, 920px);
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    /* stretch + canvas height:auto can yield wrong display height vs bitmap aspect → squashed / overlapping text */
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    line-height: 0; /* removes stray baseline gap under replaced canvas */
}

.ppt-viewer-standalone-immersive[b-hd9s0383sd]  .ppt-local-canvas-wrap {
    min-height: calc(100dvh - 15rem) !important;
    min-height: calc(100vh - 15rem) !important;
    flex: 1 1 auto !important;
}

[b-hd9s0383sd] .ppt-local-root:fullscreen .ppt-local-canvas-wrap {
    min-height: calc(100vh - 120px);
    max-height: none;
}

/* Initial width before JS pins pixels; course-pptx-local.js sets width with !important from wrap measure */
[b-hd9s0383sd] .ppt-local-canvas {
    width: 100%;
    max-width: 100%;
    height: auto !important;
    display: block;
    margin: 0 auto;
    flex: 0 0 auto;
    vertical-align: top;
}

[b-hd9s0383sd] .ppt-local-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e9ecef;
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Mobile: stable grid — avoids flex-wrap stacking Prev / Next on separate rows */
@media (max-width: 640px) {
    [b-hd9s0383sd] .ppt-local-toolbar {
        display: grid;
        grid-template-columns: minmax(3rem, 1fr) minmax(0, 2fr) minmax(3rem, 1fr);
        grid-template-areas:
            "pptprev pptlabel pptnext"
            "pptfs pptfs pptfs";
        gap: 10px 8px;
        align-items: center;
        justify-items: stretch;
        overflow-x: visible;
        padding-left: 2px;
        padding-right: 2px;
    }

    [b-hd9s0383sd] .ppt-local-toolbar > .ppt-local-prev {
        grid-area: pptprev;
    }

    [b-hd9s0383sd] .ppt-local-toolbar > .ppt-local-slide-label {
        grid-area: pptlabel;
        min-width: 0 !important;
        max-width: 100%;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #1e3a5f !important;
        text-align: center;
        line-height: 1.25;
        padding: 0 4px;
    }

    [b-hd9s0383sd] .ppt-local-toolbar > .ppt-local-next {
        grid-area: pptnext;
    }

    [b-hd9s0383sd] .ppt-local-toolbar > .ppt-local-fs {
        grid-area: pptfs;
        width: 100%;
        min-height: 48px;
    }

    [b-hd9s0383sd] .ppt-local-nav {
        min-height: 48px;
        padding: 10px 12px !important;
        font-size: 16px !important;
        -webkit-tap-highlight-color: rgba(30, 58, 95, 0.15);
        touch-action: manipulation;
    }
}

[b-hd9s0383sd] .ppt-local-slide-label {
    font-size: 15px;
    font-weight: 600;
    color: #212529 !important;
    min-width: 8rem;
    text-align: center;
    flex: 0 1 auto;
}

/* Beat main.css `button { color: #fff !important }` — must tie to .ppt-viewer for ::deep chain */
[b-hd9s0383sd] .ppt-local-nav {
    padding: 10px 18px !important;
    border: 2px solid #1e3a5f !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    color: #1e3a5f !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    height: auto !important;
    line-height: 1.35 !important;
}

[b-hd9s0383sd] .ppt-local-nav:hover:not(:disabled) {
    background-color: #1e3a5f !important;
    color: #ffffff !important;
}

[b-hd9s0383sd] .ppt-local-nav:disabled {
    cursor: not-allowed !important;
    opacity: 0.55 !important;
    color: #6c757d !important;
}

.ppt-local-loading[b-hd9s0383sd] {
    margin: 12px 0;
    text-align: center;
    font-size: 15px;
    color: #444 !important;
}

.ppt-local-error[b-hd9s0383sd] {
    margin: 10px 0;
    padding: 10px 12px;
    border-radius: 6px;
    background: #f8d7da;
    color: #721c24 !important;
    font-size: 14px;
    font-weight: 500;
}

.ppt-local-fidelity-hint[b-hd9s0383sd] {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    background: #fff;
    color: #495057 !important;
    font-size: 13px;
    line-height: 1.45;
}

.ppt-local-fidelity-hint strong[b-hd9s0383sd] {
    color: #1e3a5f !important;
}
/* /Components/Pages/CoursePptxLocalView.razor.rz.scp.css */
.course-pptx-page[b-lb06siz01k] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 20px 32px;
    box-sizing: border-box;
}

/* Full-height column so the embedded slide viewer can grow to (nearly) the whole screen */
.course-pptx-page-immersive[b-lb06siz01k] {
    max-width: none;
    width: 100%;
    margin: 0;
    min-height: 100dvh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 12px 12px 16px;
    box-sizing: border-box;
}

.course-pptx-page-immersive .course-pptx-nav[b-lb06siz01k],
.course-pptx-page-immersive .course-pptx-title[b-lb06siz01k],
.course-pptx-page-immersive .course-pptx-subtitle[b-lb06siz01k] {
    flex-shrink: 0;
}

.course-pptx-page-immersive[b-lb06siz01k]  .ppt-viewer {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.course-pptx-nav[b-lb06siz01k] {
    margin-bottom: 12px;
}

.course-pptx-back[b-lb06siz01k] {
    font-weight: 600;
    color: #1e3a5f !important;
    text-decoration: none;
}

.course-pptx-back:hover[b-lb06siz01k] {
    text-decoration: underline;
}

.course-pptx-title[b-lb06siz01k] {
    font-size: 1.25rem;
    color: #212529 !important;
    margin: 0 0 6px;
    line-height: 1.3;
}

.course-pptx-subtitle[b-lb06siz01k] {
    margin: 0 0 16px;
    color: #495057 !important;
    font-size: 0.95rem;
}

.course-pptx-error[b-lb06siz01k] {
    color: #721c24;
    font-weight: 600;
}

.course-pptx-loading[b-lb06siz01k] {
    color: #495057;
}

.not-authenticated[b-lb06siz01k] {
    padding: 24px;
    max-width: 560px;
    margin: 0 auto;
}

.not-authenticated a[b-lb06siz01k] {
    font-weight: 600;
}
/* /Components/Pages/CourseView.razor.rz.scp.css */
.course-view-container[b-lryxzovozb] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.btn-back[b-lryxzovozb] {
    padding: 8px 16px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: white;
    color: #1e3a5f !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 20px;
    transition: all 0.2s ease;
}

.btn-back *[b-lryxzovozb] {
    color: #1e3a5f !important;
}

.btn-back:hover[b-lryxzovozb] {
    background: #f8f9fa;
    border-color: #1e3a5f;
}

.course-header[b-lryxzovozb] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 24px;
    margin-bottom: 24px;
}

.course-thumbnail-large[b-lryxzovozb] {
    width: 100%;
    max-width: 600px;
    height: 300px;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 20px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-thumbnail-large img[b-lryxzovozb] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.course-header-info h1[b-lryxzovozb] {
    color: #1e3a5f !important;
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 12px 0;
}

.course-header-info h1 *[b-lryxzovozb] {
    color: #1e3a5f !important;
}

.course-category-badge[b-lryxzovozb] {
    display: inline-block;
    padding: 6px 14px;
    background: #e8f4f8;
    color: #1e3a5f;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
}

.course-rating-display[b-lryxzovozb] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}

.rating-stars[b-lryxzovozb] {
    font-size: 20px;
}

.rating-value[b-lryxzovozb] {
    font-weight: 600;
    color: #333 !important;
    font-size: 16px;
}

.rating-value *[b-lryxzovozb] {
    color: #333 !important;
}

.rating-count[b-lryxzovozb] {
    color: #666 !important;
    font-size: 14px;
}

.rating-count *[b-lryxzovozb] {
    color: #666 !important;
}

.course-description-full[b-lryxzovozb] {
    color: #666 !important;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 16px 0;
}

.course-description-full *[b-lryxzovozb] {
    color: #666 !important;
}

.course-status-display[b-lryxzovozb] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.status-label[b-lryxzovozb] {
    font-weight: 600;
    color: #333 !important;
    font-size: 14px;
}

.status-label *[b-lryxzovozb] {
    color: #333 !important;
}

.status-badge[b-lryxzovozb] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-not-started[b-lryxzovozb] {
    background: #f8f9fa;
    color: #6c757d;
}

.status-in-progress[b-lryxzovozb] {
    background: #fff3cd;
    color: #856404;
}

.status-completed[b-lryxzovozb] {
    background: #d4edda;
    color: #155724;
}

.completed-date[b-lryxzovozb] {
    color: #666 !important;
    font-size: 13px;
}

.completed-date *[b-lryxzovozb] {
    color: #666 !important;
}

.course-expiry-display[b-lryxzovozb] {
    padding: 8px 12px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    color: #856404 !important;
    font-size: 13px;
}

.course-expiry-display *[b-lryxzovozb] {
    color: #856404 !important;
}

.course-expiry-display strong[b-lryxzovozb] {
    color: #856404 !important;
    font-weight: 600;
}

.course-content[b-lryxzovozb] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 24px;
}

.course-content h2[b-lryxzovozb] {
    color: #1e3a5f !important;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 20px 0;
}

.course-content h2 *[b-lryxzovozb] {
    color: #1e3a5f !important;
}

.course-progress-overall[b-lryxzovozb] {
    margin-bottom: 24px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
}

.progress-label[b-lryxzovozb] {
    font-size: 14px;
    font-weight: 600;
    color: #333 !important;
    margin-bottom: 8px;
}

.progress-label *[b-lryxzovozb] {
    color: #333 !important;
}

.progress-bar[b-lryxzovozb] {
    width: 100%;
    height: 12px;
    background: #e9ecef;
    border-radius: 6px;
    overflow: hidden;
}

.progress-fill[b-lryxzovozb] {
    height: 100%;
    background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
    transition: width 0.3s ease;
}

.files-list[b-lryxzovozb] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.file-item[b-lryxzovozb] {
    border: 2px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.file-item.file-current[b-lryxzovozb] {
    border-color: #1e3a5f;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.15);
}

.file-item.file-completed[b-lryxzovozb] {
    border-color: #28a745;
    background: #f8fff9;
}

.file-item.file-locked[b-lryxzovozb] {
    opacity: 0.6;
    cursor: not-allowed;
}

.file-item.file-locked .btn-expand-toggle[b-lryxzovozb] {
    cursor: pointer !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.file-header[b-lryxzovozb] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f8f9fa;
    cursor: pointer;
    transition: background 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    z-index: 1;
}

.file-header > *[b-lryxzovozb] {
    pointer-events: none;
}

.file-header .btn-expand-toggle[b-lryxzovozb] {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.file-header .btn-expand-toggle *[b-lryxzovozb] {
    pointer-events: none;
}

.file-item.file-locked .file-header[b-lryxzovozb] {
    cursor: default;
}

.file-item.file-locked .file-header .btn-expand-toggle[b-lryxzovozb] {
    cursor: pointer !important;
}

.file-header:hover:not(.file-locked .file-header)[b-lryxzovozb] {
    background: #e9ecef;
}

.file-number[b-lryxzovozb] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1e3a5f;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
}

.file-item.file-completed .file-number[b-lryxzovozb] {
    background: #28a745;
}

.file-info[b-lryxzovozb] {
    flex: 1;
}

.file-title-row[b-lryxzovozb] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.file-name[b-lryxzovozb] {
    font-size: 16px;
    font-weight: 600;
    color: #333 !important;
}

.file-name *[b-lryxzovozb] {
    color: #333 !important;
}

.file-type-badge[b-lryxzovozb] {
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.file-type-video[b-lryxzovozb] {
    background: #ffebee;
    color: #c62828;
}

.file-type-pdf[b-lryxzovozb] {
    background: #fff3e0;
    color: #e65100;
}

.file-type-powerpoint[b-lryxzovozb] {
    background: #f3e5f5;
    color: #6a1b9a;
}

.file-type-word[b-lryxzovozb] {
    background: #e3f2fd;
    color: #1565c0;
}

.file-type-excel[b-lryxzovozb] {
    background: #e8f5e9;
    color: #2e7d32;
}

.file-type-document[b-lryxzovozb] {
    background: #f5f5f5;
    color: #424242;
}

.file-progress-mini[b-lryxzovozb] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-bar-mini[b-lryxzovozb] {
    flex: 1;
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill-mini[b-lryxzovozb] {
    height: 100%;
    background: #28a745;
    transition: width 0.3s ease;
}

.progress-text[b-lryxzovozb] {
    font-size: 11px;
    color: #666 !important;
    font-weight: 600;
    white-space: nowrap;
}

.progress-text *[b-lryxzovozb] {
    color: #666 !important;
}

.file-status-icon[b-lryxzovozb] {
    flex-shrink: 0;
}

.file-expand-icon[b-lryxzovozb] {
    flex-shrink: 0;
    margin-left: 8px;
}

.btn-expand-toggle[b-lryxzovozb] {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #dee2e6;
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
    min-width: 32px;
    min-height: 32px;
    z-index: 10;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-expand-toggle:hover[b-lryxzovozb] {
    background: rgba(30, 58, 95, 0.1);
    border-color: #1e3a5f;
    transform: scale(1.05);
}

.btn-expand-toggle:active[b-lryxzovozb] {
    background: rgba(30, 58, 95, 0.2);
    transform: scale(0.95);
}

.expand-icon[b-lryxzovozb] {
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 14px;
    color: #1e3a5f;
    font-weight: 600;
}

.expand-icon.expanded[b-lryxzovozb] {
    transform: rotate(180deg);
}

.status-icon[b-lryxzovozb] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
}

.status-icon.completed[b-lryxzovozb] {
    background: #d4edda;
    color: #155724;
}

.status-icon.locked[b-lryxzovozb] {
    background: #f8d7da;
    color: #721c24;
}

.status-icon.pending[b-lryxzovozb] {
    background: #fff3cd;
    color: #856404;
}

.file-viewer[b-lryxzovozb] {
    padding: 24px;
    background: white;
}

.video-container[b-lryxzovozb] {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    background: #000;
    border-radius: 8px;
    margin-bottom: 16px;
    position: relative;
    padding-bottom: 45%; /* Smaller 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

/* Fullscreen uses the whole container so exit controls can sit above the video (not hidden behind video-only top layer). */
.video-container:fullscreen[b-lryxzovozb],
.video-container:-webkit-full-screen[b-lryxzovozb] {
    width: 100vw;
    height: 100vh;
    max-width: none;
    margin: 0;
    padding-bottom: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.video-container:fullscreen .video-player[b-lryxzovozb],
.video-container:-webkit-full-screen .video-player[b-lryxzovozb] {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    object-fit: contain;
    border-radius: 0;
}

.video-player[b-lryxzovozb] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.video-protection-notice[b-lryxzovozb] {
    max-width: 800px;
    margin: 8px auto 14px auto;
    padding: 8px 10px;
    border: 1px solid #ffd18a;
    border-radius: 6px;
    background: #fff7ea;
    color: #8a5a12;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.video-saving-overlay[b-lryxzovozb] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    font-weight: 600;
    border-radius: 8px;
}

.document-viewer[b-lryxzovozb] {
    width: 100%;
    height: 600px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 16px;
}

.pdf-viewer[b-lryxzovozb] {
    /* PDF specific styles if needed */
}

.scroll-message[b-lryxzovozb] {
    padding: 12px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    margin-bottom: 16px;
    text-align: center;
    color: #856404 !important;
    font-size: 13px;
}

.scroll-message *[b-lryxzovozb] {
    color: #856404 !important;
}

.file-actions[b-lryxzovozb] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-download[b-lryxzovozb] {
    padding: 10px 20px;
    border: 1px solid #1e3a5f;
    border-radius: 4px;
    background: white;
    color: #1e3a5f;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-download:hover[b-lryxzovozb] {
    background: #1e3a5f;
    color: white;
}

.btn-custom-fullscreen[b-lryxzovozb] {
    padding: 10px 20px;
    border: 1px solid #1e3a5f;
    border-radius: 4px;
    background: #1e3a5f !important;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-custom-fullscreen:hover:not(:disabled)[b-lryxzovozb] {
    background: #2c5364 !important;
    border-color: #2c5364;
    color: #ffffff !important;
}

.btn-custom-fullscreen:disabled[b-lryxzovozb] {
    opacity: 0.55;
    cursor: not-allowed;
    background: #6c757d !important;
    border-color: #6c757d;
}

.btn-mark-complete[b-lryxzovozb] {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background: #28a745;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-mark-complete:hover:not(:disabled)[b-lryxzovozb] {
    background: #218838;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.btn-mark-complete:disabled[b-lryxzovozb] {
    background: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

.loading-message[b-lryxzovozb] {
    text-align: center;
    padding: 40px;
    color: #666 !important;
    font-size: 16px;
}

.loading-message *[b-lryxzovozb] {
    color: #666 !important;
}

.not-authenticated[b-lryxzovozb],
.course-expired-message[b-lryxzovozb] {
    text-align: center;
    padding: 50px 20px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    max-width: 600px;
    margin: 50px auto;
}

.not-authenticated h3[b-lryxzovozb],
.course-expired-message h3[b-lryxzovozb] {
    color: #1a2744 !important;
    margin-bottom: 15px;
    font-weight: 600;
}

.not-authenticated h3 *[b-lryxzovozb],
.course-expired-message h3 *[b-lryxzovozb] {
    color: #1a2744 !important;
}

.not-authenticated p[b-lryxzovozb],
.course-expired-message p[b-lryxzovozb] {
    color: #6c757d !important;
    margin-bottom: 20px;
}

.not-authenticated p *[b-lryxzovozb],
.course-expired-message p *[b-lryxzovozb] {
    color: #6c757d !important;
}

.not-authenticated a[b-lryxzovozb] {
    color: #0066cc;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
}

.not-authenticated a:hover[b-lryxzovozb] {
    color: #0052a3;
    text-decoration: underline;
}

.no-files-message[b-lryxzovozb] {
    text-align: center;
    padding: 40px;
    color: #666 !important;
    font-size: 16px;
}

.no-files-message *[b-lryxzovozb] {
    color: #666 !important;
}

/* Modal Styles */
.modal-overlay[b-lryxzovozb] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-content[b-lryxzovozb] {
    background: white;
    border-radius: 12px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.modal-header[b-lryxzovozb] {
    padding: 24px 24px 16px 24px;
    border-bottom: 1px solid #e9ecef;
}

.modal-header h2[b-lryxzovozb] {
    margin: 0;
    color: #1e3a5f !important;
    font-size: 24px;
    font-weight: 600;
}

.modal-header h2 *[b-lryxzovozb] {
    color: #1e3a5f !important;
}

.modal-body[b-lryxzovozb] {
    padding: 24px;
}

.modal-body p[b-lryxzovozb] {
    margin: 0 0 16px 0;
    color: #666 !important;
    font-size: 15px;
    line-height: 1.6;
}

.modal-body p *[b-lryxzovozb] {
    color: #666 !important;
}

.rating-container[b-lryxzovozb] {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 24px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.rating-star[b-lryxzovozb] {
    background: none;
    border: none;
    font-size: 40px;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
    filter: grayscale(100%);
    opacity: 0.4;
}

.rating-star:hover[b-lryxzovozb] {
    transform: scale(1.1);
    filter: grayscale(0%);
    opacity: 1;
}

.rating-star.filled[b-lryxzovozb] {
    filter: grayscale(0%);
    opacity: 1;
    color: #ffc107;
}

.rating-text[b-lryxzovozb] {
    text-align: center;
    font-size: 16px;
    color: #333 !important;
    margin-top: 16px !important;
}

.rating-text *[b-lryxzovozb] {
    color: #333 !important;
}

.modal-footer[b-lryxzovozb] {
    padding: 16px 24px 24px 24px;
    border-top: 1px solid #e9ecef;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-submit-rating[b-lryxzovozb] {
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    background: #28a745 !important;
    color: white !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-submit-rating *[b-lryxzovozb] {
    color: white !important;
}

.btn-submit-rating:hover:not(:disabled)[b-lryxzovozb] {
    background: #218838 !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.btn-submit-rating:hover:not(:disabled) *[b-lryxzovozb] {
    color: white !important;
}

.btn-submit-rating:disabled[b-lryxzovozb] {
    background: #28a745 !important;
    opacity: 0.6;
    cursor: not-allowed;
    color: white !important;
}

.btn-submit-rating:disabled *[b-lryxzovozb] {
    color: white !important;
}

.btn-skip-rating[b-lryxzovozb] {
    padding: 10px 24px;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px;
    background: white !important;
    color: #666 !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-skip-rating *[b-lryxzovozb] {
    color: #666 !important;
}

.btn-skip-rating:hover[b-lryxzovozb] {
    background: #f8f9fa !important;
    border-color: #adb5bd !important;
    color: #666 !important;
}

.btn-skip-rating:hover *[b-lryxzovozb] {
    color: #666 !important;
}

/* PPT viewer styles live in CoursePowerPointViewer.razor.css (scoped — CourseView styles do not apply inside child components). */

@media screen and (max-width: 768px) {
    .course-view-container[b-lryxzovozb] {
        padding: 12px;
        max-width: 100%;
    }

    .btn-back[b-lryxzovozb] {
        width: 100%;
        padding: 10px;
        font-size: 13px;
    }

    .course-header[b-lryxzovozb] {
        padding: 16px;
        border-radius: 8px;
    }

    .course-thumbnail-large[b-lryxzovozb] {
        height: 200px;
        margin-bottom: 16px;
    }

    .course-header-info h1[b-lryxzovozb] {
        font-size: 20px;
    }

    .course-category-badge[b-lryxzovozb] {
        font-size: 11px;
        padding: 4px 10px;
    }

    .course-rating-display[b-lryxzovozb] {
        flex-wrap: wrap;
    }

    .rating-stars[b-lryxzovozb] {
        font-size: 18px;
    }

    .rating-value[b-lryxzovozb] {
        font-size: 14px;
    }

    .rating-count[b-lryxzovozb] {
        font-size: 12px;
    }

    .course-description-full[b-lryxzovozb] {
        font-size: 13px;
    }

    .course-status-display[b-lryxzovozb] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .course-content[b-lryxzovozb] {
        padding: 16px;
        border-radius: 8px;
    }

    .course-content h2[b-lryxzovozb] {
        font-size: 20px;
    }

    .course-progress-overall[b-lryxzovozb] {
        padding: 12px;
    }

    .progress-label[b-lryxzovozb] {
        font-size: 13px;
    }

    .file-item[b-lryxzovozb] {
        border-radius: 6px;
    }

    .file-header[b-lryxzovozb] {
        flex-wrap: wrap;
        padding: 12px;
        gap: 12px;
    }

    .file-number[b-lryxzovozb] {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .file-name[b-lryxzovozb] {
        font-size: 14px;
        word-break: break-word;
    }

    .file-type-badge[b-lryxzovozb] {
        font-size: 10px;
        padding: 2px 8px;
    }

    .file-viewer[b-lryxzovozb] {
        padding: 16px;
    }

    .video-container[b-lryxzovozb] {
        padding-bottom: 56.25%;
        margin-bottom: 12px;
    }

    .document-viewer[b-lryxzovozb] {
        height: 400px;
    }

    .file-actions[b-lryxzovozb] {
        flex-direction: column;
        gap: 10px;
    }

    .btn-download[b-lryxzovozb],
    .btn-mark-complete[b-lryxzovozb] {
        width: 100%;
        padding: 10px;
        justify-content: center;
    }

    .course-exams-section[b-lryxzovozb] {
        padding: 16px;
        border-radius: 8px;
    }

    .course-exams-section h2[b-lryxzovozb] {
        font-size: 20px;
    }

    .exam-card[b-lryxzovozb] {
        padding: 16px;
    }

    .exam-card-header[b-lryxzovozb] {
        flex-direction: column;
        gap: 12px;
    }

    .exam-info h3[b-lryxzovozb] {
        font-size: 16px;
    }

    .exam-stats[b-lryxzovozb] {
        justify-content: space-around;
        width: 100%;
    }

    .btn-take-exam[b-lryxzovozb] {
        width: 100%;
        padding: 12px;
    }

    .tabs-header[b-lryxzovozb] {
        flex-direction: column;
    }

    .tab-button[b-lryxzovozb] {
        padding: 12px 16px;
        font-size: 14px;
        border-bottom: 1px solid #dee2e6;
        border-right: none;
        margin-bottom: 0;
    }

    .tab-button.active[b-lryxzovozb] {
        border-bottom-color: #1e3a5f;
        border-right: 3px solid #1e3a5f;
    }

    .tab-content[b-lryxzovozb] {
        padding: 16px;
    }

    .exam-history-card[b-lryxzovozb] {
        padding: 16px;
    }

    .exam-history-header h3[b-lryxzovozb] {
        font-size: 18px;
    }

    .attempt-item[b-lryxzovozb] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 12px;
    }

    .attempt-details[b-lryxzovozb] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
    }

    .attempt-actions[b-lryxzovozb] {
        width: 100%;
    }

    .btn-download-pdf[b-lryxzovozb] {
        width: 100%;
        justify-content: center;
        padding: 10px;
    }

    .modal-overlay[b-lryxzovozb] {
        padding: 10px;
    }

    .modal-content[b-lryxzovozb] {
        max-width: 100%;
        max-height: 95vh;
    }

    .modal-header[b-lryxzovozb] {
        padding: 16px;
    }

    .modal-header h2[b-lryxzovozb] {
        font-size: 20px;
    }

    .modal-body[b-lryxzovozb] {
        padding: 16px;
    }

    .rating-container[b-lryxzovozb] {
        padding: 16px;
        gap: 6px;
    }

    .rating-star[b-lryxzovozb] {
        font-size: 32px;
    }

    .modal-footer[b-lryxzovozb] {
        padding: 12px 16px 16px 16px;
        flex-direction: column;
    }

    .btn-submit-rating[b-lryxzovozb],
    .btn-skip-rating[b-lryxzovozb] {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .course-view-container[b-lryxzovozb] {
        padding: 8px;
    }

    .btn-back[b-lryxzovozb] {
        padding: 8px;
        font-size: 12px;
    }

    .course-header[b-lryxzovozb] {
        padding: 12px;
    }

    .course-thumbnail-large[b-lryxzovozb] {
        height: 160px;
        margin-bottom: 12px;
    }

    .course-header-info h1[b-lryxzovozb] {
        font-size: 18px;
    }

    .course-category-badge[b-lryxzovozb] {
        font-size: 10px;
        padding: 3px 8px;
    }

    .rating-stars[b-lryxzovozb] {
        font-size: 16px;
    }

    .rating-value[b-lryxzovozb] {
        font-size: 13px;
    }

    .rating-count[b-lryxzovozb] {
        font-size: 11px;
    }

    .course-description-full[b-lryxzovozb] {
        font-size: 12px;
    }

    .course-content[b-lryxzovozb] {
        padding: 12px;
    }

    .course-content h2[b-lryxzovozb] {
        font-size: 18px;
    }

    .course-progress-overall[b-lryxzovozb] {
        padding: 10px;
    }

    .progress-label[b-lryxzovozb] {
        font-size: 12px;
    }

    .file-header[b-lryxzovozb] {
        padding: 10px;
        gap: 10px;
    }

    .file-number[b-lryxzovozb] {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .file-name[b-lryxzovozb] {
        font-size: 13px;
    }

    .file-type-badge[b-lryxzovozb] {
        font-size: 9px;
        padding: 1px 6px;
    }

    .file-viewer[b-lryxzovozb] {
        padding: 12px;
    }

    .video-container[b-lryxzovozb] {
        padding-bottom: 56.25%;
    }

    .document-viewer[b-lryxzovozb] {
        height: 300px;
    }

    .btn-download[b-lryxzovozb],
    .btn-mark-complete[b-lryxzovozb] {
        padding: 8px;
        font-size: 13px;
    }

    .course-exams-section[b-lryxzovozb] {
        padding: 12px;
    }

    .course-exams-section h2[b-lryxzovozb] {
        font-size: 18px;
    }

    .exam-card[b-lryxzovozb] {
        padding: 12px;
    }

    .exam-info h3[b-lryxzovozb] {
        font-size: 15px;
    }

    .stat-label[b-lryxzovozb] {
        font-size: 10px;
    }

    .stat-value[b-lryxzovozb] {
        font-size: 14px;
    }

    .btn-take-exam[b-lryxzovozb] {
        padding: 10px;
        font-size: 13px;
    }

    .tab-button[b-lryxzovozb] {
        padding: 10px 12px;
        font-size: 13px;
    }

    .tab-content[b-lryxzovozb] {
        padding: 12px;
    }

    .exam-history-card[b-lryxzovozb] {
        padding: 12px;
    }

    .exam-history-header h3[b-lryxzovozb] {
        font-size: 16px;
    }

    .attempt-item[b-lryxzovozb] {
        padding: 10px;
    }

    .attempt-number[b-lryxzovozb] {
        font-size: 13px;
    }

    .attempt-date[b-lryxzovozb],
    .attempt-status[b-lryxzovozb] {
        font-size: 12px;
    }

    .attempt-score[b-lryxzovozb] {
        font-size: 13px;
        padding: 3px 10px;
    }

    .btn-download-pdf[b-lryxzovozb] {
        padding: 8px;
        font-size: 12px;
    }

    .modal-header[b-lryxzovozb] {
        padding: 12px;
    }

    .modal-header h2[b-lryxzovozb] {
        font-size: 18px;
    }

    .modal-body[b-lryxzovozb] {
        padding: 12px;
    }

    .modal-body p[b-lryxzovozb] {
        font-size: 13px;
    }

    .rating-container[b-lryxzovozb] {
        padding: 12px;
    }

    .rating-star[b-lryxzovozb] {
        font-size: 28px;
    }

    .rating-text[b-lryxzovozb] {
        font-size: 14px;
    }

    .modal-footer[b-lryxzovozb] {
        padding: 10px 12px 12px 12px;
    }

    .btn-submit-rating[b-lryxzovozb],
    .btn-skip-rating[b-lryxzovozb] {
        padding: 10px;
        font-size: 13px;
    }
}

/* Exam Section Styles */
.course-exams-section[b-lryxzovozb] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 24px;
    margin-bottom: 24px;
}

.course-exams-section h2[b-lryxzovozb] {
    color: #1e3a5f !important;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 20px 0;
}

.course-exams-section h2 *[b-lryxzovozb] {
    color: #1e3a5f !important;
}

.exams-list[b-lryxzovozb] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.exam-card[b-lryxzovozb] {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    background: #f8f9fa;
    transition: all 0.2s ease;
}

.exam-card:hover[b-lryxzovozb] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #1e3a5f;
}

.exam-card-header[b-lryxzovozb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 16px;
}

.exam-info h3[b-lryxzovozb] {
    margin: 0 0 5px 0;
    color: #1e3a5f !important;
    font-size: 18px;
}

.exam-info h3 *[b-lryxzovozb] {
    color: #1e3a5f !important;
}

.exam-info .exam-number[b-lryxzovozb] {
    color: #666 !important;
    font-size: 13px;
    margin: 0 0 8px 0;
}

.exam-info .exam-number *[b-lryxzovozb] {
    color: #666 !important;
}

.exam-type-badge[b-lryxzovozb] {
    display: inline-block;
    padding: 4px 10px;
    background: #e3f2fd;
    color: #1976d2;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.exam-stats[b-lryxzovozb] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.stat-item[b-lryxzovozb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.stat-label[b-lryxzovozb] {
    font-size: 11px;
    color: #666 !important;
    text-transform: uppercase;
}

.stat-label *[b-lryxzovozb] {
    color: #666 !important;
}

.stat-value[b-lryxzovozb] {
    font-size: 16px;
    font-weight: 600;
    color: #1e3a5f !important;
}

.stat-value *[b-lryxzovozb] {
    color: #1e3a5f !important;
}

.exam-card-actions[b-lryxzovozb] {
    text-align: center;
    padding-top: 16px;
    border-top: 1px solid #dee2e6;
}

.btn-take-exam[b-lryxzovozb] {
    padding: 10px 30px;
    border: none;
    border-radius: 6px;
    background: #1e3a5f;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-take-exam:hover:not(:disabled)[b-lryxzovozb] {
    background: #2c5364;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(30, 58, 95, 0.2);
}

.btn-take-exam:disabled[b-lryxzovozb] {
    opacity: 0.5;
    cursor: not-allowed;
    background: #6c757d;
}


/* Course Tabs */
.course-tabs[b-lryxzovozb] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    overflow: hidden;
}

.tabs-header[b-lryxzovozb] {
    display: flex;
    border-bottom: 2px solid #dee2e6;
    background: #f8f9fa;
}

.tab-button[b-lryxzovozb] {
    flex: 1;
    padding: 16px 24px;
    border: none;
    background: transparent;
    color: #666 !important;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.tab-button *[b-lryxzovozb] {
    color: #666 !important;
}

.tab-button:hover[b-lryxzovozb] {
    background: #e9ecef;
    color: #1e3a5f;
}

.tab-button.active[b-lryxzovozb] {
    color: #1e3a5f !important;
    border-bottom-color: #1e3a5f;
    background: white;
}

.tab-button.active *[b-lryxzovozb] {
    color: #1e3a5f !important;
}

.tab-content[b-lryxzovozb] {
    padding: 24px;
}

.no-exams-message[b-lryxzovozb] {
    text-align: center;
    padding: 60px 20px;
    color: #666 !important;
}

.no-exams-message *[b-lryxzovozb] {
    color: #666 !important;
}

.no-exams-message p[b-lryxzovozb] {
    font-size: 16px;
    margin: 0;
    color: #666 !important;
}

.no-exams-message p *[b-lryxzovozb] {
    color: #666 !important;
}

/* Exam History Styles */
.exam-history-section[b-lryxzovozb] {
    padding: 0;
}

.exam-history-section h2[b-lryxzovozb] {
    color: #1e3a5f !important;
    margin-bottom: 24px;
    font-size: 24px;
}

.exam-history-section h2 *[b-lryxzovozb] {
    color: #1e3a5f !important;
}

.exam-attempts-list[b-lryxzovozb] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.exam-history-card[b-lryxzovozb] {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.exam-history-header[b-lryxzovozb] {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 2px solid #dee2e6;
}

.exam-history-header h3[b-lryxzovozb] {
    margin: 0 0 8px 0;
    color: #1e3a5f !important;
    font-size: 20px;
}

.exam-history-header h3 *[b-lryxzovozb] {
    color: #1e3a5f !important;
}

.exam-history-header .exam-number[b-lryxzovozb] {
    color: #666 !important;
    font-size: 14px;
    margin: 0 0 8px 0;
}

.exam-history-header .exam-number *[b-lryxzovozb] {
    color: #666 !important;
}

.attempts-list[b-lryxzovozb] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.attempt-item[b-lryxzovozb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.attempt-item:hover[b-lryxzovozb] {
    background: #e9ecef;
    border-color: #1e3a5f;
}

.attempt-info[b-lryxzovozb] {
    flex: 1;
}

.attempt-number[b-lryxzovozb] {
    font-weight: 600;
    color: #1e3a5f !important;
    margin-bottom: 8px;
    font-size: 14px;
}

.attempt-number *[b-lryxzovozb] {
    color: #1e3a5f !important;
}

.attempt-details[b-lryxzovozb] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.attempt-date[b-lryxzovozb] {
    color: #666 !important;
    font-size: 13px;
}

.attempt-date *[b-lryxzovozb] {
    color: #666 !important;
}

.attempt-score[b-lryxzovozb] {
    font-weight: 600;
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 4px;
    background: #e9ecef;
    color: #333 !important;
}

.attempt-score *[b-lryxzovozb] {
    color: #333 !important;
}

.attempt-score.passed[b-lryxzovozb] {
    background: #d4edda;
    color: #155724 !important;
}

.attempt-score.passed *[b-lryxzovozb] {
    color: #155724 !important;
}

.attempt-score.failed[b-lryxzovozb] {
    background: #f8d7da;
    color: #721c24 !important;
}

.attempt-score.failed *[b-lryxzovozb] {
    color: #721c24 !important;
}

.attempt-status[b-lryxzovozb] {
    color: #666 !important;
    font-size: 13px;
    text-transform: capitalize;
}

.attempt-status *[b-lryxzovozb] {
    color: #666 !important;
}

.attempt-actions[b-lryxzovozb] {
    display: flex;
    gap: 8px;
}

.btn-download-pdf[b-lryxzovozb] {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: #1e3a5f;
    color: white;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-download-pdf:hover[b-lryxzovozb] {
    background: #2c5364;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(30, 58, 95, 0.2);
}


/* /Components/Pages/Dashboard.razor.rz.scp.css */
.dashboard-grid[b-j1loy2g0jn] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.grid-item-large[b-j1loy2g0jn],
.grid-item-small[b-j1loy2g0jn] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.card[b-j1loy2g0jn] {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.card-content[b-j1loy2g0jn] {
    padding: 24px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.card-title[b-j1loy2g0jn] {
    color: #333;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 16px 0;
}

.welcome-title[b-j1loy2g0jn] {
    color: #333;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px 0;
    text-transform: none !important;
}

.card-title[b-j1loy2g0jn],
.card-title h3[b-j1loy2g0jn],
h3.card-title[b-j1loy2g0jn] {
    color: #333;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 16px 0;
    text-transform: none !important;
}

.welcome-subtitle[b-j1loy2g0jn] {
    color: #666;
    font-size: 14px;
    margin: 0 0 24px 0;
}

.stats-grid[b-j1loy2g0jn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.stat-box[b-j1loy2g0jn] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.stat-box:hover[b-j1loy2g0jn] {
    border-color: #1e3a5f;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.1);
}

.stat-number[b-j1loy2g0jn] {
    font-size: 32px;
    font-weight: 700;
    color: #1e3a5f !important;
    margin-bottom: 8px;
}

.stat-number *[b-j1loy2g0jn] {
    color: #1e3a5f !important;
}

.stat-label[b-j1loy2g0jn] {
    font-size: 13px;
    color: #666 !important;
    font-weight: 500;
}

.stat-label *[b-j1loy2g0jn] {
    color: #666 !important;
}

/* Courses Display in Stat Box */
.stat-box-courses[b-j1loy2g0jn] {
    text-align: left;
    position: relative;
}

.courses-list-container[b-j1loy2g0jn] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #dee2e6;
    max-height: 300px;
    overflow-y: auto;
}

.course-title-item[b-j1loy2g0jn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    margin-bottom: 8px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.course-title-item:hover[b-j1loy2g0jn] {
    border-color: #1e3a5f;
    box-shadow: 0 2px 4px rgba(30, 58, 95, 0.1);
    transform: translateX(4px);
}

.course-icon[b-j1loy2g0jn] {
    font-size: 18px;
    flex-shrink: 0;
}

.course-title-text[b-j1loy2g0jn] {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #333 !important;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}

.course-title-text *[b-j1loy2g0jn] {
    color: #333 !important;
}

.course-category-badge[b-j1loy2g0jn] {
    font-size: 10px;
    padding: 2px 8px;
    background: linear-gradient(135deg, #e8f4f8 0%, #d1e7f0 100%);
    color: #1e3a5f !important;
    border-radius: 10px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.course-category-badge *[b-j1loy2g0jn] {
    color: #1e3a5f !important;
}

.no-courses-message[b-j1loy2g0jn] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #dee2e6;
    text-align: center;
    color: #999;
    font-size: 12px;
    font-style: italic;
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: 100%;
    box-sizing: border-box;
}

.access-list[b-j1loy2g0jn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.access-item[b-j1loy2g0jn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 14px;
}

.access-label[b-j1loy2g0jn] {
    color: #666 !important;
    font-size: 12px;
    font-weight: 500;
}

.access-label *[b-j1loy2g0jn] {
    color: #666 !important;
}

.access-item strong[b-j1loy2g0jn] {
    color: #333 !important;
}

.access-item strong *[b-j1loy2g0jn] {
    color: #333 !important;
}

/* Assigned Courses in My Access Section */
.access-item-courses[b-j1loy2g0jn] {
    min-height: auto;
}

.assigned-courses-list[b-j1loy2g0jn] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.assigned-course-item[b-j1loy2g0jn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.assigned-course-item:hover[b-j1loy2g0jn] {
    border-color: #1e3a5f;
    background: #f8f9fa;
}

.course-icon-small[b-j1loy2g0jn] {
    font-size: 14px;
    flex-shrink: 0;
}

.course-title-small[b-j1loy2g0jn] {
    font-size: 12px;
    font-weight: 600;
    color: #333 !important;
    flex: 1;
    line-height: 1.4;
}

.course-title-small *[b-j1loy2g0jn] {
    color: #333 !important;
}

.btn-admin[b-j1loy2g0jn] {
    width: 100%;
    padding: 12px;
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    background: transparent;
    color: #1e3a5f !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 12px;
}

.btn-admin *[b-j1loy2g0jn] {
    color: #1e3a5f !important;
}

.btn-admin:hover[b-j1loy2g0jn] {
    background: #1e3a5f;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(30, 58, 95, 0.2);
}

.btn-admin:hover *[b-j1loy2g0jn] {
    color: white !important;
}

.mt-3[b-j1loy2g0jn] {
    margin-top: 16px;
}

.not-authenticated[b-j1loy2g0jn] {
    text-align: center;
    padding: 50px 20px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    max-width: 600px;
    margin: 50px auto;
}

.not-authenticated h3[b-j1loy2g0jn] {
    color: #1a2744;
    margin-bottom: 15px;
    font-weight: 600;
}

.not-authenticated p[b-j1loy2g0jn] {
    color: #6c757d;
}

.not-authenticated a[b-j1loy2g0jn] {
    color: #0066cc;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
}

.not-authenticated a:hover[b-j1loy2g0jn] {
    color: #0052a3;
    text-decoration: underline;
}

/* Mobile Responsiveness */
@media (max-width: 968px) {
    .dashboard-grid[b-j1loy2g0jn] {
        grid-template-columns: 1fr;
        gap: 16px;
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .stats-grid[b-j1loy2g0jn] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .card-content[b-j1loy2g0jn] {
        padding: 20px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .welcome-title[b-j1loy2g0jn] {
        font-size: 18px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .welcome-subtitle[b-j1loy2g0jn] {
        font-size: 13px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

@media (max-width: 640px) {
    .dashboard-grid[b-j1loy2g0jn] {
        gap: 12px;
        padding: 0 8px;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .grid-item-large[b-j1loy2g0jn],
    .grid-item-small[b-j1loy2g0jn] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .stats-grid[b-j1loy2g0jn] {
        grid-template-columns: 1fr;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .card[b-j1loy2g0jn] {
        border-radius: 8px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .card-content[b-j1loy2g0jn] {
        padding: 16px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .welcome-title[b-j1loy2g0jn] {
        font-size: 16px;
        margin-bottom: 6px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        width: 100%;
    }

    .welcome-subtitle[b-j1loy2g0jn] {
        font-size: 12px;
        margin-bottom: 16px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        width: 100%;
    }

    .stat-box[b-j1loy2g0jn] {
        padding: 16px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .stat-number[b-j1loy2g0jn] {
        font-size: 28px;
        word-wrap: break-word;
    }

    .stat-label[b-j1loy2g0jn] {
        font-size: 12px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .course-title-item[b-j1loy2g0jn] {
        padding: 8px;
        margin-bottom: 6px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .course-title-text[b-j1loy2g0jn] {
        font-size: 12px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        min-width: 0;
    }

    .course-category-badge[b-j1loy2g0jn] {
        font-size: 9px;
        padding: 2px 6px;
        flex-shrink: 0;
    }

    .no-courses-message[b-j1loy2g0jn] {
        font-size: 11px;
        margin-top: 12px;
        padding-top: 12px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        width: 100%;
        box-sizing: border-box;
    }

    .courses-list-container[b-j1loy2g0jn] {
        max-height: 200px;
        margin-top: 12px;
        padding-top: 12px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .access-item[b-j1loy2g0jn] {
        padding: 10px;
        font-size: 13px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .access-label[b-j1loy2g0jn] {
        font-size: 11px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .course-title-small[b-j1loy2g0jn] {
        font-size: 11px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        min-width: 0;
    }

    .btn-admin[b-j1loy2g0jn] {
        padding: 10px;
        font-size: 13px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    .dashboard-grid[b-j1loy2g0jn] {
        gap: 10px;
        padding: 0 4px;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .grid-item-large[b-j1loy2g0jn],
    .grid-item-small[b-j1loy2g0jn] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .card-content[b-j1loy2g0jn] {
        padding: 12px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .welcome-title[b-j1loy2g0jn] {
        font-size: 15px;
        line-height: 1.3;
        word-wrap: break-word;
        overflow-wrap: break-word;
        width: 100%;
    }

    .welcome-subtitle[b-j1loy2g0jn] {
        font-size: 11px;
        margin-bottom: 12px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        width: 100%;
    }

    .stat-box[b-j1loy2g0jn] {
        padding: 12px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .stat-number[b-j1loy2g0jn] {
        font-size: 24px;
        margin-bottom: 6px;
        word-wrap: break-word;
    }

    .stat-label[b-j1loy2g0jn] {
        font-size: 11px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .course-title-item[b-j1loy2g0jn] {
        padding: 6px;
        margin-bottom: 4px;
        gap: 6px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .course-icon[b-j1loy2g0jn] {
        font-size: 16px;
        flex-shrink: 0;
    }

    .course-title-text[b-j1loy2g0jn] {
        font-size: 11px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        min-width: 0;
    }

    .course-category-badge[b-j1loy2g0jn] {
        font-size: 8px;
        padding: 1px 4px;
        flex-shrink: 0;
    }

    .courses-list-container[b-j1loy2g0jn] {
        max-height: 150px;
        margin-top: 10px;
        padding-top: 10px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .no-courses-message[b-j1loy2g0jn] {
        font-size: 10px;
        margin-top: 10px;
        padding-top: 10px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        width: 100%;
        box-sizing: border-box;
    }

    .access-item[b-j1loy2g0jn] {
        padding: 8px;
        font-size: 12px;
        gap: 3px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .access-label[b-j1loy2g0jn] {
        font-size: 10px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .assigned-course-item[b-j1loy2g0jn] {
        padding: 6px;
        gap: 6px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .course-icon-small[b-j1loy2g0jn] {
        font-size: 12px;
        flex-shrink: 0;
    }

    .course-title-small[b-j1loy2g0jn] {
        font-size: 10px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        min-width: 0;
    }

    .btn-admin[b-j1loy2g0jn] {
        padding: 8px;
        font-size: 12px;
        margin-top: 10px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 360px) {
    .dashboard-grid[b-j1loy2g0jn] {
        gap: 8px;
        padding: 0 2px;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .grid-item-large[b-j1loy2g0jn],
    .grid-item-small[b-j1loy2g0jn] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .card-content[b-j1loy2g0jn] {
        padding: 10px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .welcome-title[b-j1loy2g0jn] {
        font-size: 14px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        width: 100%;
    }

    .welcome-subtitle[b-j1loy2g0jn] {
        font-size: 10px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        width: 100%;
    }

    .stat-box[b-j1loy2g0jn] {
        padding: 10px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .stat-number[b-j1loy2g0jn] {
        font-size: 20px;
        word-wrap: break-word;
    }

    .stat-label[b-j1loy2g0jn] {
        font-size: 10px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .course-title-text[b-j1loy2g0jn] {
        font-size: 10px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        min-width: 0;
    }

    .course-title-small[b-j1loy2g0jn] {
        font-size: 9px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        min-width: 0;
    }

    .no-courses-message[b-j1loy2g0jn] {
        font-size: 9px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        width: 100%;
        box-sizing: border-box;
    }
}

/* /Components/Pages/ExamManagementComponent.razor.rz.scp.css */
.card-header-navy[b-1qxt0j2mha] {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5364 100%);
    padding: 12px 16px;
    color: white;
}

.header-flex[b-1qxt0j2mha] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.card-header-navy h3[b-1qxt0j2mha] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.btn-icon[b-1qxt0j2mha] {
    margin-right: 4px;
}

.card-content[b-1qxt0j2mha] {
    padding: 16px;
}

.search-container[b-1qxt0j2mha] {
    margin-bottom: 12px;
}

.search-input[b-1qxt0j2mha] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 12px;
    transition: border-color 0.2s ease;
}

.search-input:focus[b-1qxt0j2mha] {
    outline: none;
    border-color: #1e3a5f;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1);
}

.no-results[b-1qxt0j2mha] {
    text-align: center;
    color: #666;
    padding: 20px;
    font-size: 12px;
    margin: 0;
}

.btn-add[b-1qxt0j2mha] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    background: #28a745;
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add:hover[b-1qxt0j2mha] {
    background: #218838;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.table-container[b-1qxt0j2mha] {
    overflow: auto;
    width: 100%;
    max-height: 60vh;
    -webkit-overflow-scrolling: touch;
}

.table[b-1qxt0j2mha] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
    font-size: 12px;
}

.table thead[b-1qxt0j2mha] {
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 10;
}

.table th[b-1qxt0j2mha] {
    padding: 8px 6px;
    text-align: left;
    font-weight: 600;
    color: #333;
    font-size: 11px;
    white-space: nowrap;
}

.table td[b-1qxt0j2mha] {
    padding: 8px 6px;
    border-bottom: 1px solid #dee2e6;
    color: #555;
    font-size: 11px;
}

.col-id[b-1qxt0j2mha] {
    width: 50px;
    min-width: 50px;
}

.col-title[b-1qxt0j2mha] {
    min-width: 150px;
}

.col-category[b-1qxt0j2mha] {
    min-width: 120px;
}

.col-filecount[b-1qxt0j2mha] {
    width: 80px;
    min-width: 80px;
    text-align: center;
}

.col-creator[b-1qxt0j2mha] {
    min-width: 150px;
}

.col-date[b-1qxt0j2mha] {
    width: 100px;
    min-width: 100px;
}

.col-actions[b-1qxt0j2mha] {
    width: 80px;
    min-width: 80px;
    text-align: center;
}

.btn-edit[b-1qxt0j2mha] {
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    background: #1e3a5f;
    color: white;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit:hover[b-1qxt0j2mha] {
    background: #2c5364;
    transform: translateY(-1px);
}

.btn-delete[b-1qxt0j2mha] {
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    background: #dc3545;
    color: white;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-delete:hover[b-1qxt0j2mha] {
    background: #c82333;
    transform: translateY(-1px);
}

/* Mobile View */
.mobile-view[b-1qxt0j2mha] {
    display: none;
}

.mobile-card[b-1qxt0j2mha] {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.mobile-card:hover[b-1qxt0j2mha] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: #1e3a5f;
}

.mobile-card-header[b-1qxt0j2mha] {
    background: #f8f9fa;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dee2e6;
}

.mobile-card-id[b-1qxt0j2mha] {
    font-weight: 600;
    color: #1e3a5f;
    font-size: 13px;
}

.mobile-card-body[b-1qxt0j2mha] {
    padding: 12px;
}

.mobile-card-row[b-1qxt0j2mha] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.mobile-card-row:last-child[b-1qxt0j2mha] {
    border-bottom: none;
}

.mobile-label[b-1qxt0j2mha] {
    font-weight: 600;
    color: #666;
    font-size: 12px;
}

.mobile-value[b-1qxt0j2mha] {
    color: #333;
    font-size: 12px;
    text-align: right;
}

.mobile-card-footer[b-1qxt0j2mha] {
    padding: 12px;
    background: #f8f9fa;
    display: flex;
    gap: 8px;
    border-top: 1px solid #dee2e6;
}

.btn-edit-mobile[b-1qxt0j2mha],
.btn-delete-mobile[b-1qxt0j2mha] {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit-mobile[b-1qxt0j2mha] {
    background: #1e3a5f;
    color: white;
}

.btn-edit-mobile:hover[b-1qxt0j2mha] {
    background: #2c5364;
}

.btn-delete-mobile[b-1qxt0j2mha] {
    background: #dc3545;
    color: white;
}

.btn-delete-mobile:hover[b-1qxt0j2mha] {
    background: #c82333;
}

@media (max-width: 768px) {
    .desktop-view[b-1qxt0j2mha] {
        display: none;
    }

    .mobile-view[b-1qxt0j2mha] {
        display: block;
    }
}

/* /Components/Pages/ExamResults.razor.rz.scp.css */
.results-container[b-mf83qpslcb] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    background: #f8f9fa;
    min-height: 100vh;
}

.results-header[b-mf83qpslcb] {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    text-align: center;
}

.results-header h1[b-mf83qpslcb] {
    margin: 0 0 10px 0;
    color: #1e3a5f;
    font-size: 32px;
}

.results-header h2[b-mf83qpslcb] {
    margin: 0 0 5px 0;
    color: #333;
    font-size: 24px;
}

.exam-number[b-mf83qpslcb] {
    color: #666;
    font-size: 14px;
}

.results-summary[b-mf83qpslcb] {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.score-card[b-mf83qpslcb] {
    text-align: center;
    padding: 40px;
    border-radius: 8px;
    margin-bottom: 30px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.score-card.passed[b-mf83qpslcb] {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border: 2px solid #28a745;
}

.score-card.failed[b-mf83qpslcb] {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    border: 2px solid #dc3545;
}

.score-display[b-mf83qpslcb] {
    margin-bottom: 20px;
}

.score-value[b-mf83qpslcb] {
    font-size: 72px;
    font-weight: 700;
    color: #1e3a5f;
    line-height: 1;
}

.score-card.passed .score-value[b-mf83qpslcb] {
    color: #28a745;
}

.score-card.failed .score-value[b-mf83qpslcb] {
    color: #dc3545;
}

.score-label[b-mf83qpslcb] {
    font-size: 16px;
    color: #666;
    margin-top: 10px;
}

.pass-status[b-mf83qpslcb] {
    margin-top: 20px;
}

.status-badge[b-mf83qpslcb] {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.status-badge.passed[b-mf83qpslcb] {
    background: #28a745;
    color: white;
}

.status-badge.failed[b-mf83qpslcb] {
    background: #dc3545;
    color: white;
}

.status-badge.pending[b-mf83qpslcb] {
    background: #ffc107;
    color: #333;
}

.status-message[b-mf83qpslcb] {
    margin: 10px 0 0 0;
    font-size: 16px;
    color: #666;
}

.results-details[b-mf83qpslcb] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid #dee2e6;
}

.detail-item[b-mf83qpslcb] {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
}

.detail-label[b-mf83qpslcb] {
    font-weight: 600;
    color: #666;
}

.detail-value[b-mf83qpslcb] {
    color: #333;
    font-weight: 500;
}

.answers-review[b-mf83qpslcb] {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.answers-review h3[b-mf83qpslcb] {
    margin: 0 0 20px 0;
    color: #1e3a5f;
    font-size: 20px;
}

.answer-item[b-mf83qpslcb] {
    padding: 20px;
    margin-bottom: 16px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    background: #f8f9fa;
}

.answer-item.correct[b-mf83qpslcb] {
    border-color: #28a745;
    background: #d4edda;
}

.answer-item.incorrect[b-mf83qpslcb] {
    border-color: #dc3545;
    background: #f8d7da;
}

.answer-item.partial[b-mf83qpslcb] {
    border-color: #ffc107;
    background: #fff3cd;
}

.answer-header[b-mf83qpslcb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.question-number[b-mf83qpslcb] {
    font-weight: 600;
    color: #1e3a5f;
    font-size: 14px;
}

.answer-status[b-mf83qpslcb] {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.answer-status.correct[b-mf83qpslcb] {
    background: #28a745;
    color: white;
}

.answer-status.incorrect[b-mf83qpslcb] {
    background: #dc3545;
    color: white;
}

.answer-status.partial[b-mf83qpslcb] {
    background: #ffc107;
    color: #333;
}

.answer-content[b-mf83qpslcb] {
    margin-top: 12px;
}

.question-text[b-mf83qpslcb] {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.your-answer[b-mf83qpslcb] {
    color: #666;
    font-size: 14px;
    margin-bottom: 8px;
}

.your-answer strong[b-mf83qpslcb] {
    color: #000000 !important;
    font-weight: 700 !important;
}

.your-answer span[b-mf83qpslcb] {
    color: #000000 !important;
    font-weight: 600;
}

.answer-item.incorrect .your-answer strong[b-mf83qpslcb] {
    color: #000000 !important;
    font-weight: 700 !important;
}

.answer-item.incorrect .your-answer span[b-mf83qpslcb] {
    color: #dc3545 !important;
    font-weight: 700 !important;
}

.correct-answer[b-mf83qpslcb] {
    color: #28a745;
    font-size: 14px;
    font-weight: 500;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #dee2e6;
}

.correct-answer strong[b-mf83qpslcb] {
    color: #28a745 !important;
    font-weight: 700 !important;
}

.correct-answer span[b-mf83qpslcb] {
    color: #28a745 !important;
    font-weight: 600;
}

.results-actions[b-mf83qpslcb] {
    text-align: center;
    padding: 20px;
}

.btn-back[b-mf83qpslcb] {
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    background: #1e3a5f;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-back:hover[b-mf83qpslcb] {
    background: #2c5364;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(30, 58, 95, 0.2);
}

.loading[b-mf83qpslcb] {
    text-align: center;
    padding: 50px;
    font-size: 16px;
    color: #666;
}

.not-authenticated[b-mf83qpslcb] {
    text-align: center;
    padding: 50px 20px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    max-width: 600px;
    margin: 50px auto;
}

@media (max-width: 768px) {
    .results-details[b-mf83qpslcb] {
        grid-template-columns: 1fr;
    }

    .score-value[b-mf83qpslcb] {
        font-size: 48px;
    }
}

/* /Components/Pages/FileBank.razor.rz.scp.css */
/* Base styles from CourseManagementComponent */
.card-header-navy[b-r4kx9b5q7w] {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5364 100%);
    padding: 12px 16px;
    color: white !important;
}

.card-header-navy *[b-r4kx9b5q7w] {
    color: white !important;
}

.header-flex[b-r4kx9b5q7w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.card-header-navy h3[b-r4kx9b5q7w] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: white !important;
}

.btn-icon[b-r4kx9b5q7w] {
    margin-right: 4px;
}

.card-content[b-r4kx9b5q7w] {
    padding: 16px;
}

.search-container[b-r4kx9b5q7w] {
    margin-bottom: 12px;
}

.search-input[b-r4kx9b5q7w] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 12px;
    transition: border-color 0.2s ease;
}

.search-input:focus[b-r4kx9b5q7w] {
    outline: none;
    border-color: #1e3a5f;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1);
}

.no-results[b-r4kx9b5q7w] {
    text-align: center;
    color: #666;
    padding: 20px;
    font-size: 12px;
    margin: 0;
}

.btn-add[b-r4kx9b5q7w] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    background: #28a745;
    color: white !important;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add *[b-r4kx9b5q7w] {
    color: white !important;
}

.btn-add:hover[b-r4kx9b5q7w] {
    background: #218838;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.table-container[b-r4kx9b5q7w] {
    overflow: auto;
    width: 100%;
    max-height: 60vh;
    -webkit-overflow-scrolling: touch;
}

.table[b-r4kx9b5q7w] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
    font-size: 12px;
}

.table thead[b-r4kx9b5q7w] {
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 10;
}

.table th[b-r4kx9b5q7w] {
    padding: 8px 6px;
    text-align: left;
    font-weight: 600;
    color: #333 !important;
    font-size: 11px;
    white-space: nowrap;
}

.table th *[b-r4kx9b5q7w] {
    color: #333 !important;
}

.table td[b-r4kx9b5q7w] {
    padding: 8px 6px;
    border-bottom: 1px solid #dee2e6;
    color: #555 !important;
    font-size: 11px;
}

.table td *[b-r4kx9b5q7w] {
    color: #555 !important;
}

.col-id[b-r4kx9b5q7w] {
    width: 50px;
    min-width: 50px;
}

.col-name[b-r4kx9b5q7w] {
    min-width: 200px;
}

.col-type[b-r4kx9b5q7w] {
    min-width: 100px;
}

.col-size[b-r4kx9b5q7w] {
    min-width: 100px;
}

.col-description[b-r4kx9b5q7w] {
    min-width: 200px;
}

.col-date[b-r4kx9b5q7w] {
    width: 100px;
    min-width: 100px;
}

.col-actions[b-r4kx9b5q7w] {
    width: 80px;
    min-width: 80px;
    text-align: center;
}

.btn-edit[b-r4kx9b5q7w] {
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    background: #1e3a5f !important;
    color: white !important;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit[b-r4kx9b5q7w],
.btn-edit *[b-r4kx9b5q7w],
.btn-edit span[b-r4kx9b5q7w],
.btn-edit[b-r4kx9b5q7w]::before,
.btn-edit[b-r4kx9b5q7w]::after {
    color: white !important;
}

.btn-edit:hover:not(:disabled)[b-r4kx9b5q7w] {
    background: #2c5364 !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(30, 58, 95, 0.2);
}

.btn-edit:hover:not(:disabled)[b-r4kx9b5q7w],
.btn-edit:hover:not(:disabled) *[b-r4kx9b5q7w],
.btn-edit:hover:not(:disabled) span[b-r4kx9b5q7w] {
    color: white !important;
}

.btn-delete[b-r4kx9b5q7w] {
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    background: #dc3545 !important;
    color: white !important;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-delete[b-r4kx9b5q7w],
.btn-delete *[b-r4kx9b5q7w],
.btn-delete span[b-r4kx9b5q7w],
.btn-delete[b-r4kx9b5q7w]::before,
.btn-delete[b-r4kx9b5q7w]::after {
    color: white !important;
}

.btn-delete:hover:not(:disabled)[b-r4kx9b5q7w] {
    background: #c82333 !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
}

.btn-delete:hover:not(:disabled)[b-r4kx9b5q7w],
.btn-delete:hover:not(:disabled) *[b-r4kx9b5q7w],
.btn-delete:hover:not(:disabled) span[b-r4kx9b5q7w] {
    color: white !important;
}

.table tbody tr:hover[b-r4kx9b5q7w] {
    background-color: #f8f9fa;
}

.table .btn-edit[b-r4kx9b5q7w],
.table td .btn-edit[b-r4kx9b5q7w],
.table .col-actions .btn-edit[b-r4kx9b5q7w] {
    background: #1e3a5f !important;
    color: white !important;
}

.table .btn-edit *[b-r4kx9b5q7w],
.table td .btn-edit *[b-r4kx9b5q7w],
.table .col-actions .btn-edit *[b-r4kx9b5q7w] {
    color: white !important;
}

.table .btn-delete[b-r4kx9b5q7w],
.table td .btn-delete[b-r4kx9b5q7w],
.table .col-actions .btn-delete[b-r4kx9b5q7w] {
    background: #dc3545 !important;
    color: white !important;
}

.table .btn-delete *[b-r4kx9b5q7w],
.table td .btn-delete *[b-r4kx9b5q7w],
.table .col-actions .btn-delete *[b-r4kx9b5q7w] {
    color: white !important;
}

.table-striped tbody tr:nth-of-type(odd)[b-r4kx9b5q7w] {
    background-color: rgba(0, 0, 0, 0.02);
}

.table-hover tbody tr:hover[b-r4kx9b5q7w] {
    background-color: rgba(0, 0, 0, 0.075);
}

/* Mobile Card View */
.mobile-view[b-r4kx9b5q7w] {
    display: none;
}

.mobile-card[b-r4kx9b5q7w] {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.mobile-card-header[b-r4kx9b5q7w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e9ecef;
}

.mobile-card-id[b-r4kx9b5q7w] {
    font-weight: 600;
    font-size: 14px;
    color: #333 !important;
}

.mobile-card-id *[b-r4kx9b5q7w] {
    color: #333 !important;
}

.mobile-card-body[b-r4kx9b5q7w] {
    margin-bottom: 12px;
}

.mobile-card-row[b-r4kx9b5q7w] {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
}

.mobile-label[b-r4kx9b5q7w] {
    font-weight: 600;
    color: #666 !important;
    min-width: 80px;
}

.mobile-label *[b-r4kx9b5q7w] {
    color: #666 !important;
}

.mobile-value[b-r4kx9b5q7w] {
    color: #333 !important;
    text-align: right;
    flex: 1;
    word-break: break-word;
}

.mobile-value *[b-r4kx9b5q7w] {
    color: #333 !important;
}

.btn-edit-mobile[b-r4kx9b5q7w] {
    flex: 1;
    min-width: calc(50% - 6px);
    padding: 8px 6px;
    font-size: 11px;
    border: none;
    border-radius: 4px;
    background: #1e3a5f;
    color: white !important;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-edit-mobile *[b-r4kx9b5q7w] {
    color: white !important;
}

.btn-edit-mobile:hover:not(:disabled)[b-r4kx9b5q7w] {
    background: #2c5364;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(30, 58, 95, 0.2);
}

.btn-delete-mobile[b-r4kx9b5q7w] {
    flex: 1;
    min-width: calc(50% - 6px);
    padding: 8px 6px;
    font-size: 11px;
    border: none;
    border-radius: 4px;
    background: #dc3545;
    color: white !important;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-delete-mobile *[b-r4kx9b5q7w] {
    color: white !important;
}

.btn-delete-mobile:hover:not(:disabled)[b-r4kx9b5q7w] {
    background: #c82333;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
}

.mobile-card-footer[b-r4kx9b5q7w] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px;
    border-top: 1px solid #e9ecef;
}

.mobile-card-footer button[b-r4kx9b5q7w] {
    flex: 1;
    min-width: calc(50% - 6px);
    max-width: calc(50% - 6px);
}

@media (max-width: 768px) {
    .desktop-view[b-r4kx9b5q7w] {
        display: none;
    }
    
    .mobile-view[b-r4kx9b5q7w] {
        display: block;
    }
    
    .table-container[b-r4kx9b5q7w] {
        display: none;
    }
}

@media (max-width: 480px) {
    .card-content[b-r4kx9b5q7w] {
        padding: 12px;
    }
    
    .card-header-navy[b-r4kx9b5q7w] {
        padding: 10px 12px;
    }
    
    .card-header-navy h3[b-r4kx9b5q7w] {
        font-size: 14px;
    }
    
    .header-flex[b-r4kx9b5q7w] {
        gap: 8px;
    }
    
    .btn-add[b-r4kx9b5q7w] {
        padding: 5px 10px;
        font-size: 11px;
    }
    
    .btn-icon[b-r4kx9b5q7w] {
        margin-right: 3px;
    }
}

/* File Bank specific styles */
.file-type-badge[b-r4kx9b5q7w] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.file-type-video[b-r4kx9b5q7w] {
    background-color: #e3f2fd;
    color: #1976d2;
}

.file-type-pdf[b-r4kx9b5q7w] {
    background-color: #fff3e0;
    color: #f57c00;
}

.file-type-ppt[b-r4kx9b5q7w],
.file-type-doc[b-r4kx9b5q7w],
.file-type-xls[b-r4kx9b5q7w],
.file-type-document[b-r4kx9b5q7w] {
    background-color: #f3e5f5;
    color: #7b1fa2;
}

/* Modal Styles - Beautiful styling applied to ALL modals */
.modal-overlay[b-r4kx9b5q7w] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-content[b-r4kx9b5q7w] {
    background: white;
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
    position: relative;
    animation: modalSlideIn-b-r4kx9b5q7w 0.3s ease-out;
}

@keyframes modalSlideIn-b-r4kx9b5q7w {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header[b-r4kx9b5q7w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #dee2e6;
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5364 100%);
    border-radius: 12px 12px 0 0;
}

.modal-header h3[b-r4kx9b5q7w] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: white;
}

.modal-close[b-r4kx9b5q7w] {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: white;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.modal-close:hover:not(:disabled)[b-r4kx9b5q7w] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.modal-close:disabled[b-r4kx9b5q7w] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.modal-body[b-r4kx9b5q7w] {
    padding: 24px;
}

.modal-body p[b-r4kx9b5q7w] {
    margin: 0 0 16px 0;
    color: #555;
    font-size: 15px;
    line-height: 1.5;
}

.modal-footer[b-r4kx9b5q7w] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e9ecef;
}

.form-group[b-r4kx9b5q7w] {
    margin-bottom: 20px;
}

.form-group label[b-r4kx9b5q7w] {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-control[b-r4kx9b5q7w] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: white;
}

.form-control:focus[b-r4kx9b5q7w] {
    outline: none;
    border-color: #1e3a5f;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

.form-control:read-only[b-r4kx9b5q7w] {
    background-color: #f8f9fa;
    cursor: not-allowed;
}

.form-text[b-r4kx9b5q7w] {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #666;
    font-style: italic;
}

.btn[b-r4kx9b5q7w] {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

/* Modal footer buttons - make them the same size */
.modal-footer .btn[b-r4kx9b5q7w] {
    min-width: 100px;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}

.btn-primary[b-r4kx9b5q7w] {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5364 100%) !important;
    color: white !important;
    border: none !important;
}

.btn-primary:hover:not(:disabled)[b-r4kx9b5q7w] {
    background: linear-gradient(135deg, #2c5364 0%, #1e3a5f 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.35);
}

.btn-primary:disabled[b-r4kx9b5q7w] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-r4kx9b5q7w] {
    background: white !important;
    border: 1px solid #ced4da !important;
    color: #495057 !important;
}

.btn-secondary:hover:not(:disabled)[b-r4kx9b5q7w] {
    background: #f8f9fa !important;
    border-color: #adb5bd !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.btn-secondary:disabled[b-r4kx9b5q7w] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Upload Progress Styles */
.upload-progress-container[b-r4kx9b5q7w] {
    margin: 20px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.upload-progress-header[b-r4kx9b5q7w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.upload-status-text[b-r4kx9b5q7w] {
    font-size: 14px;
    font-weight: 600;
    color: #1e3a5f;
}

.upload-percentage[b-r4kx9b5q7w] {
    font-size: 16px;
    font-weight: 700;
    color: #1e3a5f;
}

.upload-progress-bar[b-r4kx9b5q7w] {
    width: 100%;
    height: 24px;
    background: #e9ecef;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.upload-progress-fill[b-r4kx9b5q7w] {
    height: 100%;
    background: linear-gradient(90deg, #1e3a5f 0%, #2c5364 50%, #1e3a5f 100%);
    background-size: 200% 100%;
    border-radius: 12px;
    transition: width 0.3s ease;
    animation: progressAnimation-b-r4kx9b5q7w 2s ease-in-out infinite;
    position: relative;
}

.upload-progress-fill[b-r4kx9b5q7w]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shimmer-b-r4kx9b5q7w 1.5s infinite;
}

@keyframes progressAnimation-b-r4kx9b5q7w {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@keyframes shimmer-b-r4kx9b5q7w {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}
/* /Components/Pages/GenericExamPage.razor.rz.scp.css */
.exam-container[b-upinv9m2k1] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background: #f8f9fa;
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.exam-header[b-upinv9m2k1] {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.exam-info h2[b-upinv9m2k1] {
    margin: 0 0 5px 0;
    color: #1e3a5f;
    font-size: 24px;
}

.exam-info p[b-upinv9m2k1] {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.exam-timer[b-upinv9m2k1] {
    text-align: center;
    padding: 15px 25px;
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5364 100%);
    border-radius: 8px;
    color: white;
}

.timer-display[b-upinv9m2k1] {
    font-size: 32px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    margin-bottom: 5px;
}

.timer-label[b-upinv9m2k1] {
    font-size: 12px;
    opacity: 0.9;
}

.exam-content[b-upinv9m2k1] {
    background: white;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.question-card[b-upinv9m2k1] {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #f8f9fa;
}

.question-header[b-upinv9m2k1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #1e3a5f;
}

.question-header h3[b-upinv9m2k1] {
    margin: 0;
    color: #1e3a5f;
    font-size: 18px;
}

.question-points[b-upinv9m2k1] {
    background: #1e3a5f;
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.question-text[b-upinv9m2k1] {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.question-choices[b-upinv9m2k1] {
    margin-top: 16px;
}

.choice-option[b-upinv9m2k1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 10px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.choice-option:hover[b-upinv9m2k1] {
    border-color: #1e3a5f;
    background: #f0f4f8;
}

.choice-option input[type="radio"][b-upinv9m2k1],
.choice-option input[type="checkbox"][b-upinv9m2k1] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #1e3a5f;
}

.choice-option span[b-upinv9m2k1] {
    flex: 1;
    font-size: 14px;
    color: #333;
}

.sequencing-container[b-upinv9m2k1] {
    margin-top: 16px;
}

.sequencing-instruction[b-upinv9m2k1] {
    font-weight: 600;
    color: #1e3a5f;
    margin-bottom: 12px;
}

.sequencing-list[b-upinv9m2k1] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sequencing-item[b-upinv9m2k1] {
    padding: 12px;
    background: white;
    border: 2px solid #1e3a5f;
    border-radius: 6px;
    cursor: move;
    transition: all 0.2s ease;
}

.sequencing-item:hover[b-upinv9m2k1] {
    background: #f0f4f8;
    transform: translateX(5px);
}

.dragdrop-container[b-upinv9m2k1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 16px;
}

.dragdrop-source[b-upinv9m2k1] {
    padding: 16px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

.dragdrop-target[b-upinv9m2k1] {
    padding: 16px;
    background: #e8f5e9;
    border: 2px dashed #4caf50;
    border-radius: 6px;
    min-height: 200px;
}

.dragdrop-target.drag-over[b-upinv9m2k1] {
    background: #c8e6c9;
    border-color: #2e7d32;
}

.dropped-item[b-upinv9m2k1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 8px;
    background: white;
    border: 1px solid #4caf50;
    border-radius: 4px;
}

.btn-remove-dropped[b-upinv9m2k1] {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.btn-remove-dropped:hover[b-upinv9m2k1] {
    background: #c82333;
}

.sequencing-item.dragging[b-upinv9m2k1] {
    opacity: 0.5;
}

.dragdrop-item[b-upinv9m2k1] {
    padding: 10px;
    margin-bottom: 8px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: move;
    transition: all 0.2s ease;
}

.dragdrop-item:hover[b-upinv9m2k1] {
    background: #f0f4f8;
    border-color: #1e3a5f;
}

.exam-actions[b-upinv9m2k1] {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #dee2e6;
    text-align: center;
}

.btn-submit-exam[b-upinv9m2k1] {
    padding: 12px 40px;
    border: none;
    border-radius: 6px;
    background: #28a745;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-submit-exam:hover:not(:disabled)[b-upinv9m2k1] {
    background: #218838;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.btn-submit-exam:disabled[b-upinv9m2k1] {
    opacity: 0.6;
    cursor: not-allowed;
}

.loading[b-upinv9m2k1] {
    text-align: center;
    padding: 50px;
    font-size: 16px;
    color: #666;
}

@media screen and (max-width: 768px) {
    .exam-container[b-upinv9m2k1] {
        padding: 12px;
        max-width: 100%;
    }

    .exam-header[b-upinv9m2k1] {
        flex-direction: column;
        text-align: center;
        padding: 16px;
        gap: 16px;
    }

    .exam-info h2[b-upinv9m2k1] {
        font-size: 20px;
    }

    .exam-info p[b-upinv9m2k1] {
        font-size: 13px;
    }

    .exam-timer[b-upinv9m2k1] {
        width: 100%;
        padding: 12px 20px;
    }

    .timer-display[b-upinv9m2k1] {
        font-size: 28px;
    }

    .exam-content[b-upinv9m2k1] {
        padding: 16px;
    }

    .question-card[b-upinv9m2k1] {
        padding: 16px;
        margin-bottom: 20px;
    }

    .question-header[b-upinv9m2k1] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .question-header h3[b-upinv9m2k1] {
        font-size: 16px;
    }

    .question-text[b-upinv9m2k1] {
        font-size: 14px;
        margin-bottom: 16px;
    }

    .choice-option[b-upinv9m2k1] {
        padding: 10px;
        margin-bottom: 8px;
    }

    .choice-option span[b-upinv9m2k1] {
        font-size: 13px;
    }

    .sequencing-item[b-upinv9m2k1] {
        padding: 10px;
    }

    .dragdrop-container[b-upinv9m2k1] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dragdrop-source[b-upinv9m2k1],
    .dragdrop-target[b-upinv9m2k1] {
        padding: 12px;
    }

    .exam-actions[b-upinv9m2k1] {
        margin-top: 20px;
        padding-top: 16px;
    }

    .btn-submit-exam[b-upinv9m2k1] {
        width: 100%;
        padding: 12px;
        font-size: 14px;
    }
}

@media screen and (max-width: 480px) {
    .exam-container[b-upinv9m2k1] {
        padding: 8px;
    }

    .exam-header[b-upinv9m2k1] {
        padding: 12px;
    }

    .exam-info h2[b-upinv9m2k1] {
        font-size: 18px;
    }

    .exam-info p[b-upinv9m2k1] {
        font-size: 12px;
    }

    .exam-timer[b-upinv9m2k1] {
        padding: 10px 16px;
    }

    .timer-display[b-upinv9m2k1] {
        font-size: 24px;
    }

    .timer-label[b-upinv9m2k1] {
        font-size: 11px;
    }

    .exam-content[b-upinv9m2k1] {
        padding: 12px;
    }

    .question-card[b-upinv9m2k1] {
        padding: 12px;
        margin-bottom: 16px;
    }

    .question-header h3[b-upinv9m2k1] {
        font-size: 15px;
    }

    .question-points[b-upinv9m2k1] {
        font-size: 11px;
        padding: 3px 10px;
    }

    .question-text[b-upinv9m2k1] {
        font-size: 13px;
        margin-bottom: 12px;
    }

    .choice-option[b-upinv9m2k1] {
        padding: 8px;
        margin-bottom: 6px;
    }

    .choice-option input[type="radio"][b-upinv9m2k1],
    .choice-option input[type="checkbox"][b-upinv9m2k1] {
        width: 18px;
        height: 18px;
    }

    .choice-option span[b-upinv9m2k1] {
        font-size: 12px;
    }

    .sequencing-instruction[b-upinv9m2k1] {
        font-size: 13px;
    }

    .sequencing-item[b-upinv9m2k1] {
        padding: 8px;
    }

    .dragdrop-source[b-upinv9m2k1],
    .dragdrop-target[b-upinv9m2k1] {
        padding: 10px;
    }

    .dragdrop-target[b-upinv9m2k1] {
        min-height: 150px;
    }

    .btn-submit-exam[b-upinv9m2k1] {
        padding: 10px;
        font-size: 13px;
    }
}

/* /Components/Pages/Login.razor.rz.scp.css */
.login-container[b-10yqas1jz0] {
    min-height: 100vh;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2027 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}

.login-container[b-10yqas1jz0]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><rect width="100%" height="100%" fill="%23ffffff" opacity="0.05"/><circle cx="200" cy="200" r="100" fill="%23ffffff" opacity="0.05"/><circle cx="800" cy="300" r="150" fill="%23ffffff" opacity="0.03"/><circle cx="400" cy="700" r="120" fill="%23ffffff" opacity="0.04"/></svg>');
    pointer-events: none;
}

.login-card[b-10yqas1jz0] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    padding: 40px;
    width: 100%;
    max-width: 420px;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.login-branding[b-10yqas1jz0] {
    text-align: center;
    margin-bottom: 32px;
}

.login-logo[b-10yqas1jz0] {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 180px;
    object-fit: contain;
    display: block;
    margin: 0 auto 16px;
}

.brand-container[b-10yqas1jz0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.brand-logo[b-10yqas1jz0] {
    flex-shrink: 0;
}

.logo-icon[b-10yqas1jz0] {
    width: 55px;
    height: 55px;
    background: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 0;
}

.logo-icon img[b-10yqas1jz0] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.brand-text[b-10yqas1jz0] {
    text-align: left;
    flex: 1;
}

.brand-text h1[b-10yqas1jz0] {
    color: #1e3a5f;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px 0;
    letter-spacing: -0.3px;
    line-height: 1.2;
    text-transform: none !important;
}

.brand-text p[b-10yqas1jz0] {
    color: #666;
    font-size: 11px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.form-group[b-10yqas1jz0] {
    margin-bottom: 24px;
    width: 100%;
}

.form-group label[b-10yqas1jz0] {
    display: block;
    margin-bottom: 4px;
    color: #333;
    font-weight: 500;
    font-size: 13px;
    text-transform: none !important;
    letter-spacing: 0.5px;
}

.form-control[b-10yqas1jz0] {
    width: 100%;
    padding: 12px 14px;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 2px solid #adb5bd !important;
    border-radius: 8px;
    font-size: 15px;
    color: #212529 !important;
    transition: all 0.2s ease;
    font-family: 'Segoe UI', system-ui, sans-serif;
    text-transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.form-control[b-10yqas1jz0]::placeholder {
    color: #adb5bd;
    text-transform: none !important;
}

.form-control:focus[b-10yqas1jz0] {
    outline: none;
    border-color: #1e3a5f !important;
    background: #ffffff !important;
    color: #212529 !important;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1);
}

/* Override main.css global rules for login page inputs */
.login-container input[type="text"][b-10yqas1jz0],
.login-container input[type="password"][b-10yqas1jz0],
.login-container input[type="email"][b-10yqas1jz0],
.login-container .form-control[b-10yqas1jz0] {
    text-transform: none !important;
    background: #f8f9fa !important;
    border: 1px solid #ced4da !important;
    color: #212529 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.login-container input[type="password"][b-10yqas1jz0],
.login-container input[type="password"].form-control[b-10yqas1jz0],
.login-container .form-control[type="password"][b-10yqas1jz0],
.login-container input.form-control[type="password"][b-10yqas1jz0],
.login-container form input[type="password"][b-10yqas1jz0],
.login-container form .form-control[type="password"][b-10yqas1jz0] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 2px solid #adb5bd !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: #adb5bd !important;
    color: #212529 !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    width: 100% !important;
    padding: 12px 14px !important;
    height: auto !important;
    min-height: 48px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.login-container input[type="text"]:focus[b-10yqas1jz0],
.login-container input[type="password"]:focus[b-10yqas1jz0],
.login-container input[type="email"]:focus[b-10yqas1jz0],
.login-container .form-control:focus[b-10yqas1jz0],
.login-container input[type="password"].form-control:focus[b-10yqas1jz0] {
    background: #ffffff !important;
    border-color: #1e3a5f !important;
    border-width: 1px !important;
    border-style: solid !important;
    color: #212529 !important;
    outline: none !important;
}

.validation-message[b-10yqas1jz0] {
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500;
}

.btn-login[b-10yqas1jz0] {
    width: 100%;
    height: 48px;
    padding: 0 20px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5364 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3);
    margin-top: 8px;
}

.btn-login:hover:not(:disabled)[b-10yqas1jz0] {
    background: linear-gradient(135deg, #2c5282 0%, #355a6e 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(30, 58, 95, 0.4);
}

.btn-login:active:not(:disabled)[b-10yqas1jz0] {
    transform: translateY(0);
}

.btn-login:disabled[b-10yqas1jz0] {
    background: #1e3a5f;
    opacity: 0.6;
    transform: none;
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.2);
    cursor: not-allowed;
}

.change-password-toggle[b-10yqas1jz0] {
    margin-top: 8px;
    margin-bottom: 16px;
    text-align: center;
    width: 100%;
}

.change-password-details[b-10yqas1jz0] {
    margin-bottom: 16px;
    width: 100%;
}

.change-password-details > summary[b-10yqas1jz0] {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    outline: none;
}

.change-password-details > summary[b-10yqas1jz0]::-webkit-details-marker {
    display: none;
}

.btn-change-password-toggle[b-10yqas1jz0] {
    width: 100%;
    min-height: 46px;
    border-radius: 8px;
    border: 1px solid rgba(30, 58, 95, 0.22);
    background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
    color: #1e3a5f !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: all 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    z-index: 2;
    pointer-events: auto !important;
    opacity: 1 !important;
    box-shadow: 0 3px 10px rgba(30, 58, 95, 0.12);
    padding: 10px 14px;
}

.btn-change-password-toggle:hover:not(:disabled)[b-10yqas1jz0] {
    background: linear-gradient(135deg, #f3f8ff 0%, #e8f0ff 100%);
    border-color: rgba(44, 82, 130, 0.45);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(30, 58, 95, 0.18);
}

.change-password-details[open] .btn-change-password-toggle[b-10yqas1jz0] {
    background: linear-gradient(135deg, #eef5ff 0%, #e2ecff 100%);
    border-color: rgba(44, 82, 130, 0.55);
    box-shadow: 0 4px 14px rgba(30, 58, 95, 0.16);
}

.change-password-details > summary:focus-visible[b-10yqas1jz0] {
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.18);
    border-radius: 10px;
}

.btn-change-password-toggle:disabled[b-10yqas1jz0] {
    opacity: 0.7 !important;
    cursor: not-allowed;
}

.change-password-panel[b-10yqas1jz0] {
    border: 1px solid #dfe5ee;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
    background: #f8fbff;
}

.change-password-panel h4[b-10yqas1jz0] {
    margin: 0 0 12px 0;
    color: #1e3a5f;
    font-size: 15px;
    font-weight: 700;
}

.alert[b-10yqas1jz0] {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid;
    animation: slideIn-b-10yqas1jz0 0.3s ease-out;
}

@keyframes slideIn-b-10yqas1jz0 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success[b-10yqas1jz0] {
    background: #d1e7dd;
    border-color: #badbcc;
    color: #0f5132;
}

.alert-danger[b-10yqas1jz0] {
    background: #f8d7da;
    border-color: #f5c2c7;
    color: #842029;
}

.loading-section[b-10yqas1jz0] {
    margin: 15px 0;
    width: 100%;
}

.spinner-border[b-10yqas1jz0] {
    width: 1.5rem;
    height: 1.5rem;
    border-color: #1e3a5f;
    border-right-color: transparent;
}

.loading-text[b-10yqas1jz0] {
    margin-top: 10px;
    color: #666;
    font-size: 14px;
    font-weight: 500;
}

.login-footer[b-10yqas1jz0] {
    border-top: 1px solid #e0e0e0;
    padding-top: 20px;
    margin-top: 32px;
}

.footer-top-row[b-10yqas1jz0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    gap: 16px;
}

.company-info[b-10yqas1jz0] {
    display: flex;
    flex-direction: column;
}

.qa-logo[b-10yqas1jz0] {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 35px;
    object-fit: contain;
}

.footer-logo[b-10yqas1jz0] {
    font-size: 12px;
    font-weight: 600;
    color: #1e3a5f;
    margin-bottom: 2px;
}

.footer-brand p[b-10yqas1jz0] {
    font-size: 11px;
    color: #666;
    margin: 0;
}

.copyright[b-10yqas1jz0] {
    font-size: 11px;
    color: #666;
    text-align: right;
}


.return-home-link[b-10yqas1jz0] {
    color: #1e3a5f;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
}

.return-home-link:hover[b-10yqas1jz0] {
    color: #2c5282;
    background-color: rgba(30, 58, 95, 0.05);
    text-decoration: none;
}

.return-icon[b-10yqas1jz0] {
    font-size: 14px;
    display: inline-block;
}

.return-text[b-10yqas1jz0] {
    font-size: 12px;
}

.nav-links[b-10yqas1jz0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.footer-links[b-10yqas1jz0] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.footer-link[b-10yqas1jz0] {
    font-size: 12px;
    color: #1e3a5f;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.footer-link:hover[b-10yqas1jz0] {
    color: #2c5364;
    text-decoration: none;
}

.link-icon[b-10yqas1jz0] {
    font-size: 14px;
}

.separator[b-10yqas1jz0] {
    font-size: 10px;
    color: #ccc;
    margin: 0 2px;
}

/* Prevent horizontal scrolling on mobile */
@media (max-width: 640.98px) {
    .login-container[b-10yqas1jz0],
    .login-container *[b-10yqas1jz0],
    .login-branding[b-10yqas1jz0],
    .login-branding *[b-10yqas1jz0],
    .login-form[b-10yqas1jz0],
    .login-form *[b-10yqas1jz0] {
        max-width: 100%;
        box-sizing: border-box;
    }

    .login-container[b-10yqas1jz0] {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .login-branding[b-10yqas1jz0] {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .login-form[b-10yqas1jz0] {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .login-form .form-group[b-10yqas1jz0],
    .login-form .form-control[b-10yqas1jz0],
    .login-form input[b-10yqas1jz0],
    .login-form button[b-10yqas1jz0] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

/* Mobile Responsiveness */
/* Prevent horizontal scrolling on mobile */
@media (max-width: 640.98px) {
    .login-container[b-10yqas1jz0] {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box;
    }

    .login-container *[b-10yqas1jz0] {
        max-width: 100%;
        box-sizing: border-box;
    }

    .login-card[b-10yqas1jz0] {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
    }

    .login-branding[b-10yqas1jz0] {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
    }

    .login-form[b-10yqas1jz0] {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
    }

    .login-form .form-group[b-10yqas1jz0],
    .login-form .form-control[b-10yqas1jz0],
    .login-form input[b-10yqas1jz0],
    .login-form button[b-10yqas1jz0] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

@media (max-width: 768px) {
    .footer-top-row[b-10yqas1jz0] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
    }

    .copyright[b-10yqas1jz0] {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .login-container[b-10yqas1jz0] {
        padding: 16px;
    }

    .login-card[b-10yqas1jz0] {
        padding: 24px;
        border-radius: 12px;
    }

    .brand-text h1[b-10yqas1jz0] {
        font-size: 18px;
    }

    .brand-text p[b-10yqas1jz0] {
        font-size: 10px;
    }

    .logo-icon[b-10yqas1jz0] {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .btn-login[b-10yqas1jz0] {
        font-size: 14px;
        height: 44px;
    }

    .footer-link[b-10yqas1jz0] {
        font-size: 9px;
    }

    .separator[b-10yqas1jz0] {
        margin: 0 2px;
    }
}

/* /Components/Pages/Logout.razor.rz.scp.css */
.logout-container[b-i4g3cx7i7u] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2027 100%);
}

.logout-card[b-i4g3cx7i7u] {
    background: #ffffff;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.logout-card p[b-i4g3cx7i7u] {
    margin-top: 20px;
    color: #666;
    font-size: 16px;
}

.spinner-border[b-i4g3cx7i7u] {
    width: 3rem;
    height: 3rem;
    border-color: #1e3a5f;
    border-right-color: transparent;
}

/* /Components/Pages/MyCourses.razor.rz.scp.css */
.my-courses-container[b-t0e8fqngsw] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.page-header[b-t0e8fqngsw] {
    margin-bottom: 30px;
}

.page-header h2[b-t0e8fqngsw] {
    color: #1e3a5f;
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.page-subtitle[b-t0e8fqngsw] {
    color: #666;
    font-size: 14px;
    margin: 0;
}

.loading-message[b-t0e8fqngsw] {
    text-align: center;
    padding: 40px;
    color: #666;
    font-size: 16px;
}

.courses-grid[b-t0e8fqngsw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.course-card[b-t0e8fqngsw] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.course-card:hover[b-t0e8fqngsw] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.course-card.course-expired[b-t0e8fqngsw] {
    opacity: 0.7;
    border: 2px solid #dc3545;
}

.course-thumbnail[b-t0e8fqngsw] {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-thumbnail img[b-t0e8fqngsw] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.course-card-content[b-t0e8fqngsw] {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.course-card-header[b-t0e8fqngsw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 12px;
}

.course-title[b-t0e8fqngsw] {
    color: #1e3a5f;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    flex: 1;
    line-height: 1.3;
}

.course-rating[b-t0e8fqngsw] {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.rating-stars[b-t0e8fqngsw] {
    font-size: 16px;
}

.rating-value[b-t0e8fqngsw] {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.rating-count[b-t0e8fqngsw] {
    color: #666;
    font-size: 12px;
}

.course-category[b-t0e8fqngsw] {
    display: inline-block;
    padding: 4px 10px;
    background: #e8f4f8;
    color: #1e3a5f;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 12px;
    width: fit-content;
}

.course-description[b-t0e8fqngsw] {
    color: #666;
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 16px 0;
    flex: 1;
}

.course-meta[b-t0e8fqngsw] {
    margin-bottom: 12px;
}

.course-progress[b-t0e8fqngsw] {
    margin-bottom: 12px;
}

.progress-label[b-t0e8fqngsw] {
    font-size: 12px;
    color: #666;
    margin-bottom: 6px;
    font-weight: 500;
}

.progress-bar[b-t0e8fqngsw] {
    width: 100%;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-t0e8fqngsw] {
    height: 100%;
    background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
    transition: width 0.3s ease;
}

.course-status-badge[b-t0e8fqngsw] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-not-started[b-t0e8fqngsw] {
    background: #f8f9fa;
    color: #6c757d;
}

.status-in-progress[b-t0e8fqngsw] {
    background: #fff3cd;
    color: #856404;
}

.status-completed[b-t0e8fqngsw] {
    background: #d4edda;
    color: #155724;
}

.course-expiry[b-t0e8fqngsw],
.course-completed[b-t0e8fqngsw] {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 6px;
}

.course-expiry strong[b-t0e8fqngsw],
.course-completed strong[b-t0e8fqngsw] {
    color: #333;
}

.expired-badge[b-t0e8fqngsw] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background: #dc3545;
    color: white;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
}

.course-actions[b-t0e8fqngsw] {
    margin-top: auto;
    padding-top: 16px;
}

.btn-view-course[b-t0e8fqngsw] {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5364 100%);
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-view-course:hover:not(:disabled)[b-t0e8fqngsw] {
    background: linear-gradient(135deg, #2c5364 0%, #1e3a5f 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(30, 58, 95, 0.3);
}

.btn-view-course:disabled[b-t0e8fqngsw] {
    background: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

.no-courses-message[b-t0e8fqngsw] {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.no-courses-message p[b-t0e8fqngsw] {
    color: #666;
    font-size: 16px;
    margin: 0;
}

.not-authenticated[b-t0e8fqngsw] {
    text-align: center;
    padding: 50px 20px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    max-width: 600px;
    margin: 50px auto;
}

.not-authenticated h3[b-t0e8fqngsw] {
    color: #1a2744;
    margin-bottom: 15px;
    font-weight: 600;
}

.not-authenticated p[b-t0e8fqngsw] {
    color: #6c757d;
}

.not-authenticated a[b-t0e8fqngsw] {
    color: #0066cc;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
}

.not-authenticated a:hover[b-t0e8fqngsw] {
    color: #0052a3;
    text-decoration: underline;
}

@media screen and (max-width: 768px) {
    .my-courses-container[b-t0e8fqngsw] {
        padding: 12px;
        max-width: 100%;
    }

    .page-header h2[b-t0e8fqngsw] {
        font-size: 24px;
    }

    .page-subtitle[b-t0e8fqngsw] {
        font-size: 13px;
    }

    .courses-grid[b-t0e8fqngsw] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .course-card[b-t0e8fqngsw] {
        border-radius: 8px;
    }

    .course-thumbnail[b-t0e8fqngsw] {
        height: 180px;
    }

    .course-card-content[b-t0e8fqngsw] {
        padding: 16px;
    }

    .course-title[b-t0e8fqngsw] {
        font-size: 18px;
    }

    .course-description[b-t0e8fqngsw] {
        font-size: 12px;
    }

    .btn-view-course[b-t0e8fqngsw] {
        padding: 10px;
        font-size: 13px;
    }
}

@media screen and (max-width: 480px) {
    .my-courses-container[b-t0e8fqngsw] {
        padding: 8px;
    }

    .page-header[b-t0e8fqngsw] {
        margin-bottom: 20px;
    }

    .page-header h2[b-t0e8fqngsw] {
        font-size: 20px;
    }

    .page-subtitle[b-t0e8fqngsw] {
        font-size: 12px;
    }

    .courses-grid[b-t0e8fqngsw] {
        gap: 12px;
    }

    .course-thumbnail[b-t0e8fqngsw] {
        height: 160px;
    }

    .course-card-content[b-t0e8fqngsw] {
        padding: 12px;
    }

    .course-title[b-t0e8fqngsw] {
        font-size: 16px;
    }

    .course-rating[b-t0e8fqngsw] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .rating-stars[b-t0e8fqngsw] {
        font-size: 14px;
    }

    .rating-value[b-t0e8fqngsw],
    .rating-count[b-t0e8fqngsw] {
        font-size: 11px;
    }

    .course-description[b-t0e8fqngsw] {
        font-size: 11px;
        margin-bottom: 12px;
    }

    .course-meta[b-t0e8fqngsw],
    .course-progress[b-t0e8fqngsw] {
        margin-bottom: 10px;
    }

    .progress-label[b-t0e8fqngsw] {
        font-size: 11px;
    }

    .course-expiry[b-t0e8fqngsw],
    .course-completed[b-t0e8fqngsw] {
        font-size: 11px;
        padding: 6px;
    }

    .btn-view-course[b-t0e8fqngsw] {
        padding: 10px;
        font-size: 12px;
    }
}

/* /Components/Pages/NCLEXExamPage.razor.rz.scp.css */
.exam-container.nclex-container[b-ikw9uray6o] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    background: #f8f9fa;
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.exam-header[b-ikw9uray6o] {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.exam-info h2[b-ikw9uray6o] {
    margin: 0 0 5px 0;
    color: #1e3a5f;
    font-size: 22px;
}

.exam-info p[b-ikw9uray6o] {
    margin: 0;
    color: #666;
    font-size: 13px;
}

.question-progress[b-ikw9uray6o] {
    flex: 1;
    min-width: 200px;
}

.progress-bar[b-ikw9uray6o] {
    width: 100%;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill[b-ikw9uray6o] {
    height: 100%;
    background: linear-gradient(90deg, #1e3a5f 0%, #2c5364 100%);
    transition: width 0.3s ease;
}

.progress-text[b-ikw9uray6o] {
    font-size: 12px;
    color: #666;
    text-align: center;
}

.question-timer[b-ikw9uray6o] {
    text-align: center;
    padding: 15px 25px;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border-radius: 8px;
    color: white;
}

#question-timer[b-ikw9uray6o] {
    font-size: 28px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    margin-bottom: 5px;
}

.timer-label[b-ikw9uray6o] {
    font-size: 11px;
    opacity: 0.9;
}

.exam-content[b-ikw9uray6o] {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nclex-question[b-ikw9uray6o] {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

.question-card.nclex-question .question-header[b-ikw9uray6o] {
    margin-bottom: 24px;
}

.question-card.nclex-question .question-text[b-ikw9uray6o] {
    font-size: 18px;
    margin-bottom: 30px;
    line-height: 1.8;
}

.question-choices[b-ikw9uray6o] {
    margin: 24px 0;
}

.choice-option[b-ikw9uray6o] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin-bottom: 12px;
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.choice-option:hover[b-ikw9uray6o] {
    border-color: #1e3a5f;
    background: #f0f4f8;
    transform: translateX(5px);
}

.choice-option input[type="radio"]:checked + span[b-ikw9uray6o],
.choice-option input[type="checkbox"]:checked + span[b-ikw9uray6o] {
    font-weight: 600;
    color: #1e3a5f;
}

.choice-option input[type="radio"][b-ikw9uray6o],
.choice-option input[type="checkbox"][b-ikw9uray6o] {
    width: 22px;
    height: 22px;
    cursor: pointer;
    accent-color: #1e3a5f;
}

.choice-option span[b-ikw9uray6o] {
    flex: 1;
    font-size: 15px;
    color: #333;
}

.question-actions[b-ikw9uray6o] {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 2px solid #dee2e6;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-previous[b-ikw9uray6o] {
    padding: 12px 24px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: white;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-previous:hover[b-ikw9uray6o] {
    background: #f8f9fa;
    border-color: #1e3a5f;
    color: #1e3a5f;
}

.btn-next[b-ikw9uray6o] {
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    background: #1e3a5f;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-next:hover:not(:disabled)[b-ikw9uray6o] {
    background: #2c5364;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(30, 58, 95, 0.2);
}

.btn-next:disabled[b-ikw9uray6o] {
    background: #a0aec0;
    color: #e2e8f0;
    cursor: not-allowed;
    transform: none;
}

.btn-submit-exam[b-ikw9uray6o] {
    padding: 12px 40px;
    border: none;
    border-radius: 6px;
    background: #28a745;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-submit-exam:hover:not(:disabled)[b-ikw9uray6o] {
    background: #218838;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.btn-submit-exam:disabled[b-ikw9uray6o] {
    opacity: 0.6;
    cursor: not-allowed;
}

.exam-complete[b-ikw9uray6o] {
    text-align: center;
    padding: 100px 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.exam-complete h2[b-ikw9uray6o] {
    color: #1e3a5f;
    margin-bottom: 20px;
}

.loading[b-ikw9uray6o] {
    text-align: center;
    padding: 50px;
    font-size: 16px;
    color: #666;
}

/* Sequencing Styles */
.sequencing-container[b-ikw9uray6o] {
    margin-top: 20px;
}

.sequencing-header[b-ikw9uray6o] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px;
    background: #e3f2fd;
    border-radius: 8px;
    border-left: 4px solid #1e3a5f;
}

.sequencing-icon[b-ikw9uray6o] {
    font-size: 24px;
}

.sequencing-instruction[b-ikw9uray6o] {
    font-weight: 600;
    color: #1e3a5f;
    margin: 0;
    font-size: 15px;
}

.sequencing-list[b-ikw9uray6o] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.sequencing-item[b-ikw9uray6o] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: white;
    border: 2px solid #1e3a5f;
    border-radius: 8px;
    cursor: move;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sequencing-item:hover[b-ikw9uray6o] {
    background: #f0f4f8;
    transform: translateX(5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.sequencing-item.dragging[b-ikw9uray6o] {
    opacity: 0.5;
    transform: scale(0.95);
}

.sequence-handle[b-ikw9uray6o] {
    font-size: 18px;
    color: #666;
    cursor: grab;
}

.sequence-handle:active[b-ikw9uray6o] {
    cursor: grabbing;
}

.sequence-number[b-ikw9uray6o] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #1e3a5f;
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.sequence-text[b-ikw9uray6o] {
    flex: 1;
    font-size: 15px;
    color: #333;
    line-height: 1.5;
}

.sequencing-hint[b-ikw9uray6o] {
    margin-top: 12px;
    padding: 10px;
    background: #fff3cd;
    border-radius: 6px;
    font-size: 13px;
    color: #856404;
    text-align: center;
}

/* Drag and Drop Styles */
.dragdrop-container[b-ikw9uray6o] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 20px;
}

.dragdrop-source[b-ikw9uray6o] {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px solid #dee2e6;
}

.dragdrop-source-header[b-ikw9uray6o] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 2px solid #dee2e6;
}

.dragdrop-icon[b-ikw9uray6o] {
    font-size: 24px;
}

.dragdrop-source-title[b-ikw9uray6o],
.dragdrop-target-title[b-ikw9uray6o] {
    margin: 0;
    font-weight: 700;
    color: #1e3a5f;
    font-size: 16px;
}

.dragdrop-instruction[b-ikw9uray6o] {
    margin: 0 0 16px 0;
    color: #666;
    font-size: 14px;
}

.dragdrop-items-list[b-ikw9uray6o] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dragdrop-item[b-ikw9uray6o] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    cursor: move;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.dragdrop-item:hover[b-ikw9uray6o] {
    background: #f0f4f8;
    border-color: #1e3a5f;
    transform: translateX(5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.dragdrop-item.dragging[b-ikw9uray6o] {
    opacity: 0.5;
    transform: scale(0.95);
}

.drag-handle[b-ikw9uray6o] {
    font-size: 16px;
    color: #666;
    cursor: grab;
    user-select: none;
}

.drag-handle:active[b-ikw9uray6o] {
    cursor: grabbing;
}

.dragdrop-text[b-ikw9uray6o] {
    flex: 1;
    font-size: 15px;
    color: #333;
    line-height: 1.5;
}

.dragdrop-empty[b-ikw9uray6o] {
    text-align: center;
    color: #999;
    font-style: italic;
    padding: 20px;
    font-size: 14px;
}

.dragdrop-target[b-ikw9uray6o] {
    padding: 20px;
    background: #e8f5e9;
    border: 3px dashed #4caf50;
    border-radius: 8px;
    min-height: 300px;
    transition: all 0.2s ease;
}

.dragdrop-target.drag-over[b-ikw9uray6o] {
    background: #c8e6c9;
    border-color: #2e7d32;
    border-style: solid;
}

.dragdrop-target-header[b-ikw9uray6o] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #4caf50;
}

.dragdrop-placeholder[b-ikw9uray6o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #66bb6a;
    text-align: center;
}

.placeholder-icon[b-ikw9uray6o] {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.6;
}

.dragdrop-placeholder p[b-ikw9uray6o] {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

.dropped-items-list[b-ikw9uray6o] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dropped-item[b-ikw9uray6o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: white;
    border: 2px solid #4caf50;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
}

.dropped-text[b-ikw9uray6o] {
    flex: 1;
    font-size: 15px;
    color: #333;
    font-weight: 500;
}

.btn-remove-dropped[b-ikw9uray6o] {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-remove-dropped:hover[b-ikw9uray6o] {
    background: #c82333;
    transform: scale(1.1);
}

@media screen and (max-width: 768px) {
    .exam-container.nclex-container[b-ikw9uray6o] {
        padding: 12px;
        max-width: 100%;
    }

    .exam-header[b-ikw9uray6o] {
        flex-direction: column;
        padding: 16px;
        gap: 16px;
    }

    .exam-info h2[b-ikw9uray6o] {
        font-size: 20px;
    }

    .exam-info p[b-ikw9uray6o] {
        font-size: 12px;
    }

    .question-progress[b-ikw9uray6o] {
        min-width: 100%;
    }

    .question-timer[b-ikw9uray6o] {
        width: 100%;
        padding: 12px 20px;
    }

    #question-timer[b-ikw9uray6o] {
        font-size: 24px;
    }

    .exam-content[b-ikw9uray6o] {
        padding: 20px;
    }

    .question-card.nclex-question .question-text[b-ikw9uray6o] {
        font-size: 16px;
        margin-bottom: 24px;
    }

    .choice-option[b-ikw9uray6o] {
        padding: 12px;
        margin-bottom: 10px;
    }

    .choice-option span[b-ikw9uray6o] {
        font-size: 14px;
    }

    .question-actions[b-ikw9uray6o] {
        flex-direction: column;
        gap: 10px;
        margin-top: 30px;
    }

    .btn-previous[b-ikw9uray6o],
    .btn-next[b-ikw9uray6o],
    .btn-submit-exam[b-ikw9uray6o] {
        width: 100%;
    }

    .sequencing-item[b-ikw9uray6o] {
        padding: 12px;
    }

    .sequence-number[b-ikw9uray6o] {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .sequence-text[b-ikw9uray6o] {
        font-size: 14px;
    }

    .dragdrop-container[b-ikw9uray6o] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dragdrop-source[b-ikw9uray6o],
    .dragdrop-target[b-ikw9uray6o] {
        padding: 16px;
    }

    .dragdrop-target[b-ikw9uray6o] {
        min-height: 250px;
    }

    .dragdrop-item[b-ikw9uray6o] {
        padding: 12px;
    }

    .dragdrop-text[b-ikw9uray6o] {
        font-size: 14px;
    }
}

@media screen and (max-width: 480px) {
    .exam-container.nclex-container[b-ikw9uray6o] {
        padding: 8px;
    }

    .exam-header[b-ikw9uray6o] {
        padding: 12px;
    }

    .exam-info h2[b-ikw9uray6o] {
        font-size: 18px;
    }

    .exam-info p[b-ikw9uray6o] {
        font-size: 11px;
    }

    .question-timer[b-ikw9uray6o] {
        padding: 10px 16px;
    }

    #question-timer[b-ikw9uray6o] {
        font-size: 20px;
    }

    .timer-label[b-ikw9uray6o] {
        font-size: 10px;
    }

    .exam-content[b-ikw9uray6o] {
        padding: 16px;
    }

    .question-card.nclex-question .question-header[b-ikw9uray6o] {
        margin-bottom: 16px;
    }

    .question-card.nclex-question .question-text[b-ikw9uray6o] {
        font-size: 14px;
        margin-bottom: 20px;
        line-height: 1.6;
    }

    .choice-option[b-ikw9uray6o] {
        padding: 10px;
        margin-bottom: 8px;
    }

    .choice-option input[type="radio"][b-ikw9uray6o],
    .choice-option input[type="checkbox"][b-ikw9uray6o] {
        width: 20px;
        height: 20px;
    }

    .choice-option span[b-ikw9uray6o] {
        font-size: 13px;
    }

    .question-actions[b-ikw9uray6o] {
        margin-top: 24px;
        padding-top: 16px;
    }

    .btn-previous[b-ikw9uray6o],
    .btn-next[b-ikw9uray6o] {
        padding: 10px;
        font-size: 13px;
    }

    .btn-submit-exam[b-ikw9uray6o] {
        padding: 12px;
        font-size: 14px;
    }

    .sequencing-header[b-ikw9uray6o] {
        padding: 10px;
    }

    .sequencing-instruction[b-ikw9uray6o] {
        font-size: 14px;
    }

    .sequencing-item[b-ikw9uray6o] {
        padding: 10px;
    }

    .sequence-number[b-ikw9uray6o] {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .sequence-text[b-ikw9uray6o] {
        font-size: 13px;
    }

    .sequencing-hint[b-ikw9uray6o] {
        font-size: 12px;
        padding: 8px;
    }

    .dragdrop-source[b-ikw9uray6o],
    .dragdrop-target[b-ikw9uray6o] {
        padding: 12px;
    }

    .dragdrop-source-title[b-ikw9uray6o],
    .dragdrop-target-title[b-ikw9uray6o] {
        font-size: 14px;
    }

    .dragdrop-instruction[b-ikw9uray6o] {
        font-size: 13px;
    }

    .dragdrop-target[b-ikw9uray6o] {
        min-height: 200px;
    }

    .dragdrop-item[b-ikw9uray6o] {
        padding: 10px;
    }

    .dragdrop-text[b-ikw9uray6o] {
        font-size: 13px;
    }

    .dropped-item[b-ikw9uray6o] {
        padding: 10px;
    }

    .dropped-text[b-ikw9uray6o] {
        font-size: 13px;
    }

    .btn-remove-dropped[b-ikw9uray6o] {
        width: 24px;
        height: 24px;
        font-size: 16px;
    }
}

/* /Components/Pages/PublicHome.razor.rz.scp.css */
/* Banner background image - bigger to occupy whole page */
#banner[b-31q57gliu5] {
    background-color: #2e3141;
    background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("/images/banner.jpg");
    background-size: auto, cover;
    background-position: center, center;
    background-attachment: fixed, fixed;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo positioned on the left side like the original template */
#banner .inner[b-31q57gliu5] {
    display: flex;
    align-items: center;
    gap: 3em;
    flex-wrap: wrap;
}

#banner .logo[b-31q57gliu5] {
    flex-shrink: 0;
    margin: 0;
    text-align: center;
}

#banner .logo img[b-31q57gliu5] {
    display: block;
    margin: 0 auto;
    max-width: 150px;
    width: auto;
    height: auto;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent;
}

/* Content area (title, subtitle, button) on the right/centered */
#banner .inner .content[b-31q57gliu5] {
    flex: 1;
    text-align: left;
    min-width: 300px;
}

#banner .inner .content h2[b-31q57gliu5] {
    margin: 0 0 0.5em 0;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.2;
}

#banner .inner .content p[b-31q57gliu5] {
    margin: 0 0 1.5em 0;
    word-wrap: break-word;
}

/* Make white backgrounds transparent on logo */
#banner .logo img[src*="iNurseLogo"][b-31q57gliu5] {
    background: transparent !important;
    /* Use screen blend mode to make white areas transparent */
    mix-blend-mode: screen;
}

/* Spotlight sections - centered content without images */
.wrapper.spotlight .inner[b-31q57gliu5] {
    position: relative;
}

.wrapper.spotlight .centered-content[b-31q57gliu5] {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 3em 2em;
    position: relative;
    z-index: 2;
}

.wrapper.spotlight .centered-content h2.major[b-31q57gliu5] {
    color: #ffffff;
    font-size: 2.2em;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1em;
    line-height: 1.2;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 3;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.wrapper.spotlight .centered-content .content-divider[b-31q57gliu5] {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    width: 100%;
    max-width: 600px;
    margin: 1.5em auto 2em auto;
    position: relative;
    z-index: 3;
}

.wrapper.spotlight .centered-content p[b-31q57gliu5] {
    color: #ffffff;
    font-size: 1.1em;
    line-height: 1.8;
    margin-bottom: 2.5em;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 3;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.wrapper.spotlight .centered-content .special[b-31q57gliu5] {
    color: #ffffff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.75em;
    padding: 0;
    background: transparent;
    border: none;
    font-size: 0.95em;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 3;
}

.wrapper.spotlight .centered-content .special[b-31q57gliu5]::before {
    content: ">";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    font-size: 0.9em;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.wrapper.spotlight .centered-content .special:hover[b-31q57gliu5] {
    transform: translateX(5px);
}

.wrapper.spotlight .centered-content .special:hover[b-31q57gliu5]::before {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.7);
}

/* Background watermark text - positioned at bottom right, small */
.wrapper.spotlight.style1 .inner[b-31q57gliu5]::after {
    content: "Experienced Instructors";
    position: absolute;
    right: 2%;
    bottom: 5%;
    font-size: 2.5em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    line-height: 1;
}

.wrapper.spotlight.style2 .inner[b-31q57gliu5]::after {
    content: "Learn Anywhere";
    position: absolute;
    right: 2%;
    bottom: 5%;
    font-size: 2.5em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    line-height: 1;
}

.wrapper.spotlight.style3 .inner[b-31q57gliu5]::after {
    content: "Virtual Classes";
    position: absolute;
    right: 2%;
    bottom: 5%;
    font-size: 2.5em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    line-height: 1;
}

/* Services section - single row layout at 100% width with equal sizes and spacing */
#four .features.services-row[b-31q57gliu5] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
    width: 100%;
    align-items: stretch;
    margin: 0 !important;
    padding: 0;
    flex-wrap: nowrap !important;
}

#four .features.services-row article[b-31q57gliu5] {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0 !important;
    padding: 1.75em !important;
    width: 100% !important;
    min-height: 100%;
    box-sizing: border-box;
}

#four .features.services-row article .image[b-31q57gliu5] {
    margin-left: -1.75em !important;
    margin-right: -1.75em !important;
    margin-top: -1.75em !important;
    margin-bottom: 1.75em !important;
    width: calc(100% + 3.5em) !important;
    height: 250px;
    overflow: hidden;
    display: block;
}

#four .features.services-row article .image img[b-31q57gliu5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

#four .features.services-row article h3.major[b-31q57gliu5] {
    margin-bottom: 1em;
}

#four .features.services-row article p[b-31q57gliu5] {
    flex: 1;
    margin-bottom: 1.5em;
}

/* Service items with icons */
#four .features.services-row article .service-items[b-31q57gliu5] {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-bottom: 1.5em;
    flex: 1;
}

#four .features.services-row article .service-item[b-31q57gliu5] {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.5em 0;
    color: #ffffff;
    font-size: 0.95em;
    transition: all 0.2s ease;
}

#four .features.services-row article .service-item:hover[b-31q57gliu5] {
    color: #ffffff;
    transform: translateX(5px);
}

#four .features.services-row article .service-item .icon[b-31q57gliu5] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    background: rgba(74, 158, 255, 0.15);
    border: 2px solid #4a9eff;
    border-radius: 50%;
    color: #4a9eff;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

#four .features.services-row article .service-item:hover .icon[b-31q57gliu5] {
    background: rgba(74, 158, 255, 0.25);
    border-color: #6bb0ff;
    transform: scale(1.1);
}

#four .features.services-row article .service-item span:not(.icon)[b-31q57gliu5] {
    flex: 1;
    line-height: 1.4;
}

#four .features.services-row article .special[b-31q57gliu5] {
    margin-top: auto;
}

/* Mobile responsiveness - horizontal scroll for services */
@media screen and (max-width: 768px) {
    /* Banner - ensure it displays fully on mobile */
    #banner[b-31q57gliu5] {
        min-height: 100vh;
        min-height: 100dvh; /* Use dynamic viewport height for mobile */
        padding: 2em 1em;
        background-attachment: scroll; /* Change from fixed to scroll for better mobile performance */
    }

    /* Center both logo and content on mobile */
    #banner .inner[b-31q57gliu5] {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 1.5em;
        width: 100%;
    }

    #banner .inner .content[b-31q57gliu5] {
        text-align: center;
        flex: none;
        width: 100%;
        min-width: auto;
    }

    #banner .logo[b-31q57gliu5] {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    #four .features.services-row[b-31q57gliu5] {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        gap: 1.5em;
        padding-bottom: 1em;
    }
    
    #four .features.services-row[b-31q57gliu5]::-webkit-scrollbar {
        height: 8px;
    }
    
    #four .features.services-row[b-31q57gliu5]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
    }
    
    #four .features.services-row[b-31q57gliu5]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 4px;
    }
    
    #four .features.services-row[b-31q57gliu5]::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.5);
    }
    
    #four .features.services-row article[b-31q57gliu5] {
        flex: 0 0 85%;
        min-width: 85%;
        max-width: 85%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    
    #four .features.services-row article .image[b-31q57gliu5] {
        height: 200px;
    }
}

@media screen and (max-width: 480px) {
    /* Banner - ensure full display on small mobile */
    #banner[b-31q57gliu5] {
        min-height: 100vh;
        min-height: 100dvh;
        padding: 1.5em 1em;
    }

    #banner .inner[b-31q57gliu5] {
        gap: 1em;
    }

    #banner .logo img[b-31q57gliu5] {
        max-width: 120px;
    }

    #banner .inner .content h2[b-31q57gliu5] {
        font-size: 1.5em;
    }

    #banner .inner .content p[b-31q57gliu5] {
        font-size: 0.95em;
    }

    #four .features.services-row article[b-31q57gliu5] {
        flex: 0 0 90%;
        min-width: 90%;
        max-width: 90%;
    }
    
    #four .features.services-row article .image[b-31q57gliu5] {
        height: 180px;
    }
}
/* /Components/Pages/ServiceRequest_CMMS.razor.rz.scp.css */
.card[b-zwxv815omg] {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

.card-body[b-zwxv815omg] {
    background-color: #fff;
}

.form-floating > .form-control[b-zwxv815omg],
.form-floating > .form-select[b-zwxv815omg] {
    border: 1px solid #ced4da;
}

.form-floating > .form-control:focus[b-zwxv815omg],
.form-floating > .form-select:focus[b-zwxv815omg] {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.btn-primary[b-zwxv815omg] {
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn-primary:hover[b-zwxv815omg] {
    background-color: #1861ac;
    border-color: #145a9e;
}

/* /Components/Pages/Services.razor.rz.scp.css */
/* Services page - patterned same as About Us */
/* Banner - same styling as home page but smaller height */
#banner[b-lq1ddgb6ed] {
    background-color: #2e3141;
    background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("/images/banner.jpg");
    background-size: auto, cover;
    background-position: center, center;
    background-attachment: fixed, fixed;
    min-height: 22vh;
    padding: 2.5em 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo positioned on the left side like the original template */
#banner .inner[b-lq1ddgb6ed] {
    display: flex;
    align-items: center;
    gap: 3em;
    flex-wrap: wrap;
}

#banner .logo[b-lq1ddgb6ed] {
    flex-shrink: 0;
    margin: 0;
    text-align: center;
}

#banner .logo img[b-lq1ddgb6ed] {
    display: block;
    margin: 0 auto;
    max-width: 150px;
    width: auto;
    height: auto;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent;
}

/* Content area (title, subtitle, button) on the right/centered */
#banner .inner .content[b-lq1ddgb6ed] {
    flex: 1;
    text-align: left;
    min-width: 300px;
}

#banner .inner .content h2[b-lq1ddgb6ed] {
    margin: 0 0 0.5em 0;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.2;
}

#banner .inner .content p[b-lq1ddgb6ed] {
    margin: 0 0 1.5em 0;
    word-wrap: break-word;
}

/* Make white backgrounds transparent on logo */
#banner .logo img[src*="iNurseLogo"][b-lq1ddgb6ed] {
    background: transparent !important;
    /* Use screen blend mode to make white areas transparent */
    mix-blend-mode: screen;
}

/* Remove divider lines from spotlight sections */
.wrapper.spotlight .centered-content .content-divider[b-lq1ddgb6ed] {
    display: none;
}

/* Ensure all text content is centered */
.wrapper.spotlight .centered-content[b-lq1ddgb6ed] {
    text-align: center !important;
}

.wrapper.spotlight .centered-content p[b-lq1ddgb6ed] {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}

.centered-content[b-lq1ddgb6ed] {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.service-list[b-lq1ddgb6ed] {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    text-align: left;
    display: inline-block;
}

.service-list li[b-lq1ddgb6ed] {
    padding: 12px 0;
    padding-left: 30px;
    position: relative;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.6;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.service-list li:last-child[b-lq1ddgb6ed] {
    border-bottom: none;
}

.service-list li[b-lq1ddgb6ed]:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
}

/* Watermark for Services sections */
.wrapper.spotlight.style1 .inner[b-lq1ddgb6ed]::after {
    content: "Nursing Review";
    position: absolute;
    right: 2%;
    bottom: 5%;
    font-size: 2.5em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    line-height: 1;
}

.wrapper.spotlight.style2 .inner[b-lq1ddgb6ed]::after {
    content: "License Services";
    position: absolute;
    right: 2%;
    bottom: 5%;
    font-size: 2.5em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    line-height: 1;
}

.wrapper.spotlight.style3 .inner[b-lq1ddgb6ed]::after {
    content: "PRC Assistance";
    position: absolute;
    right: 2%;
    bottom: 5%;
    font-size: 2.5em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    line-height: 1;
}

.wrapper.alt.spotlight.style1 .inner[b-lq1ddgb6ed]::after {
    content: "AHA Courses";
    position: absolute;
    right: 2%;
    bottom: 5%;
    font-size: 2.5em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    line-height: 1;
}

/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
    /* Center both logo and content on mobile */
    #banner .inner[b-lq1ddgb6ed] {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 1.5em;
    }

    #banner .inner .content[b-lq1ddgb6ed] {
        text-align: center;
        flex: none;
        width: 100%;
        min-width: auto;
    }

    #banner .logo[b-lq1ddgb6ed] {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .centered-content[b-lq1ddgb6ed] {
        padding: 0 20px;
    }
    
    .service-list li[b-lq1ddgb6ed] {
        font-size: 14px;
        padding: 10px 0;
        padding-left: 28px;
    }
}

@media screen and (max-width: 480px) {
    .service-list li[b-lq1ddgb6ed] {
        font-size: 13px;
        padding: 8px 0;
        padding-left: 25px;
    }
    
    .service-list li[b-lq1ddgb6ed]:before {
        font-size: 16px;
    }
}

/* /Components/Pages/UserManagementComponent.razor.rz.scp.css */
.card-header-navy[b-3bxtnnyxzf] {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5364 100%);
    padding: 12px 16px;
    color: white;
}

.header-flex[b-3bxtnnyxzf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.card-header-navy h3[b-3bxtnnyxzf] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.btn-icon[b-3bxtnnyxzf] {
    margin-right: 4px;
}

.card-content[b-3bxtnnyxzf] {
    padding: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.search-container[b-3bxtnnyxzf] {
    margin-bottom: 12px;
}

.search-input[b-3bxtnnyxzf] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 12px;
    transition: border-color 0.2s ease;
}

.search-input:focus[b-3bxtnnyxzf] {
    outline: none;
    border-color: #1e3a5f;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1);
}

.no-results[b-3bxtnnyxzf] {
    text-align: center;
    color: #666;
    padding: 20px;
    font-size: 12px;
    margin: 0;
}

.btn-add[b-3bxtnnyxzf] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    background: #28a745;
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add:hover[b-3bxtnnyxzf] {
    background: #218838;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.table-container[b-3bxtnnyxzf] {
    overflow: auto;
    width: 100%;
    max-height: 60vh;
    -webkit-overflow-scrolling: touch;
}

.table[b-3bxtnnyxzf] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
    font-size: 12px;
}

.table thead[b-3bxtnnyxzf] {
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 10;
}

.table th[b-3bxtnnyxzf] {
    padding: 8px 6px;
    text-align: left;
    font-weight: 600;
    color: #333;
    font-size: 11px;
    white-space: nowrap;
}

.table td[b-3bxtnnyxzf] {
    padding: 8px 6px;
    border-bottom: 1px solid #dee2e6;
    color: #555;
    font-size: 11px;
}

.col-id[b-3bxtnnyxzf] {
    width: 50px;
    min-width: 50px;
}

.col-name[b-3bxtnnyxzf] {
    min-width: 150px;
}

.col-email[b-3bxtnnyxzf] {
    min-width: 200px;
}

.col-role[b-3bxtnnyxzf] {
    width: 100px;
    min-width: 100px;
}

.col-mobile[b-3bxtnnyxzf] {
    width: 120px;
    min-width: 120px;
}

.col-expiry[b-3bxtnnyxzf] {
    width: 100px;
    min-width: 100px;
}

.col-courses[b-3bxtnnyxzf] {
    width: 250px;
    min-width: 200px;
    max-width: 300px;
}

.col-status[b-3bxtnnyxzf] {
    width: 90px;
    min-width: 90px;
    text-align: center;
}

.col-actions[b-3bxtnnyxzf] {
    width: 80px;
    min-width: 80px;
    text-align: center;
}

.role-badge[b-3bxtnnyxzf] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    background-color: #007bff;
    color: white;
}

.btn-edit[b-3bxtnnyxzf] {
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    background: #1e3a5f;
    color: white;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit:hover:not(:disabled)[b-3bxtnnyxzf] {
    background: #2c5364;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(30, 58, 95, 0.2);
}

.btn-delete[b-3bxtnnyxzf] {
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    background: #dc3545;
    color: white;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-delete:hover:not(:disabled)[b-3bxtnnyxzf] {
    background: #c82333;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
}

.btn-send-credentials[b-3bxtnnyxzf] {
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    background: #17a2b8;
    color: white;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-send-credentials:hover:not(:disabled)[b-3bxtnnyxzf] {
    background: #138496;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(23, 162, 184, 0.2);
}

.btn-send-credentials:disabled[b-3bxtnnyxzf] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-send-credentials-mobile[b-3bxtnnyxzf] {
    flex: 1;
    min-width: calc(50% - 6px);
    padding: 8px 6px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table tbody tr:hover[b-3bxtnnyxzf] {
    background-color: #f8f9fa;
}

.table-striped tbody tr:nth-of-type(odd)[b-3bxtnnyxzf] {
    background-color: rgba(0, 0, 0, 0.02);
}

.table-hover tbody tr:hover[b-3bxtnnyxzf] {
    background-color: rgba(0, 0, 0, 0.075);
}

.status-badge[b-3bxtnnyxzf] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-active[b-3bxtnnyxzf] {
    background-color: #28a745;
    color: white;
}

.status-expired[b-3bxtnnyxzf] {
    background-color: #dc3545;
    color: white;
}

.status-no-expiry[b-3bxtnnyxzf] {
    background-color: #6c757d;
    color: white;
}

/* Course Names Display */
.course-names-container[b-3bxtnnyxzf] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.course-name-badge[b-3bxtnnyxzf] {
    display: inline-block;
    padding: 4px 10px;
    background: linear-gradient(135deg, #e8f4f8 0%, #d1e7f0 100%);
    color: #1e3a5f;
    border: 1px solid #b3d9e8;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-names-container.mobile-courses[b-3bxtnnyxzf] {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.course-names-container.mobile-courses .course-name-badge[b-3bxtnnyxzf] {
    max-width: 100%;
}

/* Mobile Card View */
.mobile-view[b-3bxtnnyxzf] {
    display: none;
}

.mobile-card[b-3bxtnnyxzf] {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.mobile-card-header[b-3bxtnnyxzf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e9ecef;
}

.mobile-card-id[b-3bxtnnyxzf] {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.mobile-card-body[b-3bxtnnyxzf] {
    margin-bottom: 12px;
}

.mobile-card-row[b-3bxtnnyxzf] {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
}

.mobile-label[b-3bxtnnyxzf] {
    font-weight: 600;
    color: #666;
    min-width: 80px;
}

.mobile-value[b-3bxtnnyxzf] {
    color: #333;
    text-align: right;
    flex: 1;
    word-break: break-word;
}

.btn-edit-mobile[b-3bxtnnyxzf] {
    flex: 1;
    min-width: calc(50% - 6px);
    padding: 8px 6px;
    font-size: 11px;
    border: none;
    border-radius: 4px;
    background: #1e3a5f;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-edit-mobile:hover:not(:disabled)[b-3bxtnnyxzf] {
    background: #2c5364;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(30, 58, 95, 0.2);
}

.btn-delete-mobile[b-3bxtnnyxzf] {
    flex: 1;
    min-width: calc(50% - 6px);
    padding: 8px 6px;
    font-size: 11px;
    border: none;
    border-radius: 4px;
    background: #dc3545;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-delete-mobile:hover:not(:disabled)[b-3bxtnnyxzf] {
    background: #c82333;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
}

.mobile-card-footer[b-3bxtnnyxzf] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px;
    border-top: 1px solid #e9ecef;
}

.mobile-card-footer button[b-3bxtnnyxzf] {
    flex: 1;
    min-width: calc(50% - 6px);
    max-width: calc(50% - 6px);
}

@media (max-width: 768px) {
    .desktop-view[b-3bxtnnyxzf] {
        display: none;
    }
    
    .mobile-view[b-3bxtnnyxzf] {
        display: block;
    }
    
    .table-container[b-3bxtnnyxzf] {
        display: none;
    }
}

@media (max-width: 480px) {
    .card-content[b-3bxtnnyxzf] {
        padding: 12px;
    }
    
    .card-header-navy[b-3bxtnnyxzf] {
        padding: 10px 12px;
    }
    
    .card-header-navy h3[b-3bxtnnyxzf] {
        font-size: 14px;
    }
    
    .header-flex[b-3bxtnnyxzf] {
        gap: 8px;
    }
    
    .btn-add[b-3bxtnnyxzf] {
        padding: 5px 10px;
        font-size: 11px;
    }
    
    .btn-icon[b-3bxtnnyxzf] {
        margin-right: 3px;
    }
}

/* Landscape orientation on mobile devices */
@media (orientation: landscape) and (max-height: 600px) {
    .card-header-navy[b-3bxtnnyxzf] {
        padding: 6px 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .card-header-navy h3[b-3bxtnnyxzf] {
        font-size: 12px;
        margin: 0;
        white-space: nowrap;
    }
    
    .header-flex[b-3bxtnnyxzf] {
        flex-wrap: nowrap;
        gap: 4px;
        align-items: center;
        min-width: fit-content;
    }
    
    .header-flex h3[b-3bxtnnyxzf] {
        flex: 0 0 auto;
        margin: 0;
        white-space: nowrap;
    }
    
    .header-flex > div[b-3bxtnnyxzf] {
        display: flex;
        gap: 4px;
        flex: 0 0 auto;
        justify-content: flex-start;
    }
    
    .btn-add[b-3bxtnnyxzf] {
        padding: 5px 8px;
        font-size: 10px;
        flex: 0 0 auto;
        min-width: fit-content;
        white-space: nowrap;
    }
    
    .card-content[b-3bxtnnyxzf] {
        padding: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table-container[b-3bxtnnyxzf] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    
    .table[b-3bxtnnyxzf] {
        min-width: 800px;
    }
    
    .search-input[b-3bxtnnyxzf] {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    .mobile-card[b-3bxtnnyxzf] {
        padding: 10px;
        margin-bottom: 8px;
    }
    
    .mobile-card-header[b-3bxtnnyxzf] {
        margin-bottom: 8px;
        padding-bottom: 6px;
    }
    
    .mobile-card-id[b-3bxtnnyxzf] {
        font-size: 12px;
    }
    
    .mobile-card-row[b-3bxtnnyxzf] {
        padding: 4px 0;
        font-size: 12px;
    }
    
    .mobile-label[b-3bxtnnyxzf] {
        min-width: 70px;
        font-size: 11px;
    }
    
    .mobile-value[b-3bxtnnyxzf] {
        font-size: 11px;
    }
    
    .mobile-card-footer[b-3bxtnnyxzf] {
        padding: 8px;
        gap: 6px;
    }
    
    .btn-edit-mobile[b-3bxtnnyxzf],
    .btn-delete-mobile[b-3bxtnnyxzf] {
        padding: 6px 8px;
        font-size: 10px;
    }
    
    .course-name-badge[b-3bxtnnyxzf] {
        font-size: 10px;
        padding: 3px 8px;
    }
    
    .status-badge[b-3bxtnnyxzf] {
        font-size: 9px;
        padding: 3px 6px;
    }
}

/* Modal Styles - Applied to ALL modals */
.modal-overlay[b-3bxtnnyxzf] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
}

.modal-content[b-3bxtnnyxzf] {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
    position: relative;
    animation: modalSlideIn-b-3bxtnnyxzf 0.3s ease-out;
}

@keyframes modalSlideIn-b-3bxtnnyxzf {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header[b-3bxtnnyxzf] {
    padding: 20px 24px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5364 100%);
    border-radius: 12px 12px 0 0;
}

.modal-header h3[b-3bxtnnyxzf] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: white;
}

.modal-close[b-3bxtnnyxzf] {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.modal-close:hover:not(:disabled)[b-3bxtnnyxzf] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.modal-close:disabled[b-3bxtnnyxzf] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.modal-body[b-3bxtnnyxzf] {
    padding: 24px;
}

.modal-body p[b-3bxtnnyxzf] {
    margin: 0 0 16px 0;
    color: #555;
    font-size: 15px;
    line-height: 1.5;
}

.delete-user-info[b-3bxtnnyxzf] {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 12px;
    margin: 16px 0;
}

.delete-user-info p[b-3bxtnnyxzf] {
    margin: 8px 0;
    font-size: 13px;
}

.delete-user-info strong[b-3bxtnnyxzf] {
    color: #1e3a5f;
    font-weight: 600;
}

.delete-warning[b-3bxtnnyxzf] {
    color: #dc3545 !important;
    font-weight: 600;
    margin-top: 16px !important;
    padding: 12px;
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-radius: 6px;
}

.modal-footer[b-3bxtnnyxzf] {
    padding: 16px 24px;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-cancel[b-3bxtnnyxzf] {
    min-width: 100px;
    padding: 10px 24px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: white;
    color: #495057;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover:not(:disabled)[b-3bxtnnyxzf] {
    background: #f8f9fa;
    border-color: #adb5bd;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.btn-cancel:disabled[b-3bxtnnyxzf] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-delete-confirm[b-3bxtnnyxzf] {
    min-width: 100px;
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-delete-confirm:hover:not(:disabled)[b-3bxtnnyxzf] {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.35);
}

.btn-delete-confirm:disabled[b-3bxtnnyxzf] {
    opacity: 0.5;
    cursor: not-allowed;
    background: #6c757d;
    transform: none;
}

/* Sending Overlay Animation */
.sending-overlay[b-3bxtnnyxzf] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 8px;
}

.sending-spinner[b-3bxtnnyxzf] {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #dc3545;
    border-radius: 50%;
    animation: spin-b-3bxtnnyxzf 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin-b-3bxtnnyxzf {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.sending-text[b-3bxtnnyxzf] {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.sending-note[b-3bxtnnyxzf] {
    font-size: 14px;
    color: #666;
    font-style: italic;
}

.btn-primary[b-3bxtnnyxzf] {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background: #1e3a5f;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.btn-primary:hover:not(:disabled)[b-3bxtnnyxzf] {
    background: #2c5364;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(30, 58, 95, 0.2);
}

.btn-primary:disabled[b-3bxtnnyxzf] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Export Modal Specific Styles - Additional styling only for export modal */

/* Export type selection buttons container */
.export-type-buttons[b-3bxtnnyxzf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.export-type-btn[b-3bxtnnyxzf] {
    padding: 14px 20px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    text-align: left !important;
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5364 100%) !important;
    transition: all 0.3s ease;
}

.export-type-btn:hover:not(:disabled)[b-3bxtnnyxzf] {
    box-shadow: 0 4px 16px rgba(30, 58, 95, 0.3) !important;
    transform: translateY(-2px);
}

.export-type-btn:disabled[b-3bxtnnyxzf] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Section selection container */
.section-selection-container[b-3bxtnnyxzf] {
    margin-top: 16px;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    background: #f8f9fa;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.section-selection-header[b-3bxtnnyxzf] {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #dee2e6;
}

.section-item[b-3bxtnnyxzf] {
    margin-bottom: 10px;
}

.section-checkbox-label[b-3bxtnnyxzf] {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #333;
    font-size: 14px;
    transition: color 0.2s ease;
}

.section-selection-header .section-checkbox-label[b-3bxtnnyxzf] {
    font-weight: 600;
}

.section-checkbox-label:hover[b-3bxtnnyxzf] {
    color: #1e3a5f;
}

.section-checkbox[b-3bxtnnyxzf] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #1e3a5f;
}

/* Modal footer buttons - make them the same size */
.modal-footer-buttons[b-3bxtnnyxzf] {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
    justify-content: flex-end;
}

.modal-footer-btn[b-3bxtnnyxzf] {
    min-width: 100px;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    width: auto !important;
    flex: 0 0 auto;
    transition: all 0.2s ease;
}

.modal-footer-buttons .btn-secondary[b-3bxtnnyxzf] {
    background: white !important;
    border: 1px solid #dee2e6 !important;
    color: #495057 !important;
}

.modal-footer-buttons .btn-secondary:hover:not(:disabled)[b-3bxtnnyxzf] {
    background: #f8f9fa !important;
    border-color: #adb5bd !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.modal-footer-buttons .btn-primary[b-3bxtnnyxzf] {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5364 100%) !important;
    color: white !important;
}

.modal-footer-buttons .btn-primary:hover:not(:disabled)[b-3bxtnnyxzf] {
    background: linear-gradient(135deg, #2c5364 0%, #1e3a5f 100%) !important;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.35);
    transform: translateY(-1px);
}

.modal-footer-buttons .btn-primary:disabled[b-3bxtnnyxzf],
.modal-footer-buttons .btn-secondary:disabled[b-3bxtnnyxzf] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}