/* /Components/Layout/AuthLayout.razor.rz.scp.css */
.auth-layout[b-ke06y6odo4] {
    min-height: 100vh;
    width: 100%;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-798rikkr4c] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-798rikkr4c] {
    flex: 1;
    overflow-x: auto;
}

.sidebar[b-798rikkr4c] {
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
}

.top-row[b-798rikkr4c] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-798rikkr4c]  a, .top-row[b-798rikkr4c]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-798rikkr4c]  a:hover, .top-row[b-798rikkr4c]  .btn-link:hover {
        text-decoration: underline;
    }

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

@media (max-width: 640.98px) {
    .top-row[b-798rikkr4c] {
        justify-content: space-between;
    }

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

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

    .sidebar[b-798rikkr4c] {
    width: 320px;
    background: #ffffff;
    border-right: 1px solid #e2e8f0;

    flex-shrink: 0;
    }

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

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

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

#blazor-error-ui[b-798rikkr4c] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    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-798rikkr4c] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ============================================================
   SIDEBAR SHELL
   ============================================================ */

.app-sidebar[b-boi79yxj55] {
    width: 100%;
    height: 100vh;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border-right: 1px solid #e2e8f0;

    padding: 0;
}


/* ============================================================
   FIXED TOP AREA
   ============================================================ */

.sidebar-fixed-area[b-boi79yxj55] {
    flex: 0 0 auto;

    padding:
        22px 18px
        0;

    background: #ffffff;

    position: relative;

    z-index: 2;

    box-shadow:
        0 8px 18px
        rgba(15, 23, 42, 0.025);
}


/* ============================================================
   LOGO
   ============================================================ */

.sidebar-brand-card[b-boi79yxj55] {
    margin: 0 0 12px;

    padding: 8px 10px;

    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-brand-logo[b-boi79yxj55] {
    display: block;

    width: 100%;
    max-width: 205px;

    height: auto;

    object-fit: contain;

    margin: 0 auto;
}

.sidebar-brand-text[b-boi79yxj55] {
    display: none;
}


/* ============================================================
   USER IDENTITY
   ============================================================ */

.sidebar-user-card[b-boi79yxj55] {
    position: relative;

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 0 0 12px;

    padding: 11px 3px;

    border-top: 1px solid #eef2f7;
    border-bottom: 1px solid #eef2f7;

    background: transparent;
}

.sidebar-user-avatar[b-boi79yxj55] {
    width: 52px;
    height: 56px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 12px;

    background: #0f766e;

    color: #ffffff;

    font-size: 12px;
    font-weight: 900;
}

.sidebar-user-info[b-boi79yxj55] {
    min-width: 0;

    flex: 1;

    padding-right: 40px;
}

.sidebar-user-info > span[b-boi79yxj55] {
    display: none;
}

.sidebar-user-info strong[b-boi79yxj55] {
    display: block;

    overflow: hidden;

    color: #0f172a;

    font-size: 12px;
    font-weight: 800;

    line-height: 1.25;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.sidebar-user-info small[b-boi79yxj55] {
    display: block;

    overflow: hidden;

    margin-top: 2px;

    color: #64748b;

    font-size: 10px;
    font-weight: 700;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ============================================================
   PROFILE
   ============================================================ */

.sidebar-user-actions[b-boi79yxj55] {
    display: flex;

    align-items: center;

    margin-top: 5px;
}

[b-boi79yxj55] .profile-link,
[b-boi79yxj55] .profile-link.nav-link {
    width: auto !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 5px !important;

    padding: 3px 7px !important;

    border:
        1px solid
        transparent !important;

    border-radius: 7px !important;

    background:
        transparent !important;

    color:
        #0f8f87 !important;

    font-size: 10px !important;

    font-weight: 800 !important;

    line-height: 1.2 !important;

    text-decoration: none !important;

    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease !important;
}

[b-boi79yxj55] .profile-link:hover,
[b-boi79yxj55] .profile-link.nav-link:hover,
[b-boi79yxj55] .profile-link.active {
    border-color:
        #bbf7d0 !important;

    background:
        #ecfdf5 !important;

    color:
        #047857 !important;
}

[b-boi79yxj55] .profile-link-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    font-size: 10px;

    line-height: 1;
}


/* ============================================================
   LOGOUT
   ============================================================ */

.top-logout-button[b-boi79yxj55] {
    border: 0;

    cursor: pointer;

    font: inherit;
}

[b-boi79yxj55] .top-logout-button,
[b-boi79yxj55] .top-logout-button.nav-link {
    position: absolute !important;

    right: 3px !important;

    top: 50% !important;

    transform:
        translateY(-50%) !important;

    width: 34px !important;
    height: 34px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    border:
        1px solid
        #e2e8f0 !important;

    border-radius:
        11px !important;

    background:
        #f8fafc !important;

    color:
        #64748b !important;

    text-decoration:
        none !important;

    transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease !important;
}

[b-boi79yxj55] .top-logout-button span {
    display: none !important;
}

[b-boi79yxj55] .top-logout-button i {
    font-size:
        14px !important;

    line-height:
        1 !important;
}

[b-boi79yxj55] .top-logout-button:hover,
[b-boi79yxj55] .top-logout-button.nav-link:hover {
    border-color:
        #fecaca !important;

    background:
        #fff1f2 !important;

    color:
        #be123c !important;

    transform:
        translateY(-50%)
        translateX(1px) !important;
}


/* ============================================================
   NOTIFICATION SUMMARY
   ============================================================ */

.sidebar-alert-card[b-boi79yxj55] {
    display: flex;

    align-items: center;

    gap: 10px;

    margin: 0 0 12px;

    padding: 9px 11px;

    border:
        1px solid
        #fde68a;

    border-radius: 13px;

    background: #fffbeb;
}

.alert-icon[b-boi79yxj55] {
    width: 30px;
    height: 30px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border:
        1px solid
        #fde68a;

    border-radius: 9px;

    background: #ffffff;

    font-size: 13px;
}

.alert-content[b-boi79yxj55] {
    min-width: 0;

    flex: 1;
}

.alert-content strong[b-boi79yxj55] {
    display: block;

    color: #92400e;

    font-size: 11px;
    font-weight: 900;

    line-height: 1.2;
}

.alert-content small[b-boi79yxj55] {
    display: block;

    margin-top: 2px;

    color: #b45309;

    font-size: 9px;
    font-weight: 700;
}


/* ============================================================
   SCROLLABLE MENU BODY
   ============================================================ */

.sidebar-menu-scroll[b-boi79yxj55] {
    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    padding:
        5px 14px
        28px;

    scrollbar-width: thin;

    scrollbar-color:
        #cbd5e1
        transparent;
}

.sidebar-menu-scroll[b-boi79yxj55]::-webkit-scrollbar {
    width: 5px;
}

.sidebar-menu-scroll[b-boi79yxj55]::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-menu-scroll[b-boi79yxj55]::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background: #cbd5e1;
}

.sidebar-menu-scroll[b-boi79yxj55]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}


/* ============================================================
   GENERIC SIDEBAR CARD
   ============================================================ */

.sidebar-card[b-boi79yxj55] {
    margin: 8px 0 18px;

    padding: 14px;

    border:
        1px solid
        #bbf7d0;

    border-radius: 14px;

    background: #ecfdf5;
}

.sidebar-card div[b-boi79yxj55] {
    color: #047857;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}

.sidebar-card p[b-boi79yxj55] {
    margin: 7px 0 0;

    color: #0f172a;

    font-size: 11px;
    font-weight: 600;

    line-height: 1.45;
}


/* ============================================================
   ACCORDION SECTIONS
   ============================================================ */

.sidebar-section[b-boi79yxj55] {
    margin-top: 4px;
}

.sidebar-section + .sidebar-section[b-boi79yxj55] {
    margin-top: 6px;
}

.section-title-static[b-boi79yxj55] {
    margin:
        10px 0
        7px 4px;

    color: #94a3b8;

    font-size: 10px;
    font-weight: 850;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.section-toggle[b-boi79yxj55] {
    width: 100%;

    min-height: 38px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding:
        8px 9px
        8px 11px;

    border:
        1px solid
        transparent;

    border-radius: 10px;

    background:
        transparent;

    color: #7c899c;

    font-family: inherit;

    cursor: pointer;

    text-align: left;

    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease;
}

.section-toggle:hover[b-boi79yxj55] {
    background: #f8fafc;

    color: #475569;
}

.section-toggle.current[b-boi79yxj55] {
    border-color:
        #d5f3ed;

    background:
        #f2fcf9;

    color:
        #087f6a;
}

.section-title-text[b-boi79yxj55] {
    min-width: 0;

    overflow: hidden;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.7px;

    text-overflow: ellipsis;

    text-transform: uppercase;

    white-space: nowrap;
}

.section-toggle-right[b-boi79yxj55] {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    flex-shrink: 0;
}

.section-chevron[b-boi79yxj55] {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    color: #94a3b8;

    font-size: 19px;
    font-weight: 500;

    line-height: 1;

    transform:
        rotate(0deg);

    transition:
        transform 0.18s ease,
        color 0.18s ease;
}

.section-chevron.open[b-boi79yxj55] {
    color: #0f8f87;

    transform:
        rotate(90deg);
}

.section-badge[b-boi79yxj55] {
    min-width: 20px;
    height: 20px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding: 0 6px;

    border-radius: 999px;

    background: #ef4444;

    color: #ffffff;

    font-size: 9px;
    font-weight: 900;
}


/* ============================================================
   ACCORDION BODY
   ============================================================ */

.section-menu-items[b-boi79yxj55] {
    padding:
        4px 0
        6px;

    animation:
        menu-section-open-b-boi79yxj55
        0.16s ease-out;
}

@keyframes menu-section-open-b-boi79yxj55 {
    from {
        opacity: 0;

        transform:
            translateY(-3px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* ============================================================
   MENU LINKS
   ============================================================ */

[b-boi79yxj55] .sidebar-link,
[b-boi79yxj55] .sidebar-link.nav-link {
    width: 100% !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: flex-start !important;

    gap: 10px !important;

    box-sizing: border-box !important;

    margin-bottom: 4px !important;

    padding:
        8px 9px !important;

    border:
        1px solid
        transparent !important;

    border-radius:
        11px !important;

    color:
        #334155 !important;

    line-height:
        1 !important;

    text-decoration:
        none !important;

    transition:
        background 0.16s ease,
        color 0.16s ease,
        border-color 0.16s ease,
        transform 0.16s ease !important;
}

[b-boi79yxj55] .sidebar-link:hover,
[b-boi79yxj55] .sidebar-link.nav-link:hover {
    background:
        #f0fdf4 !important;

    color:
        #047857 !important;

    text-decoration:
        none !important;

    transform:
        translateX(1px) !important;
}

[b-boi79yxj55] .sidebar-link.active,
[b-boi79yxj55] .sidebar-link.nav-link.active {
    border-color:
        #bbf7d0 !important;

    background:
        #ecfdf5 !important;

    color:
        #047857 !important;
}


/* ============================================================
   MENU ICON
   ============================================================ */

[b-boi79yxj55] .link-icon {
    width: 29px !important;
    height: 29px !important;

    min-width: 29px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex-shrink: 0 !important;

    border-radius:
        9px !important;

    background:
        #f1f5f9 !important;

    color:
        #64748b !important;
}

[b-boi79yxj55] .link-icon i {
    font-size:
        13px !important;

    line-height:
        1 !important;
}

[b-boi79yxj55] .sidebar-link.active .link-icon {
    background:
        #059669 !important;

    color:
        #ffffff !important;
}


/* ============================================================
   MENU TEXT
   ============================================================ */

[b-boi79yxj55] .link-text {
    min-width: 0 !important;

    display: flex !important;

    flex:
        1 1 auto !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;

    justify-content:
        center !important;

    white-space:
        nowrap !important;
}

[b-boi79yxj55] .link-title-row {
    width: 100% !important;

    min-width: 0 !important;

    display: flex !important;

    align-items: center !important;

    gap: 6px !important;
}

[b-boi79yxj55] .link-title-row strong {
    min-width: 0 !important;

    flex:
        1 1 auto !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;
}

[b-boi79yxj55] .link-text strong {
    display: block !important;

    color: inherit !important;

    font-size:
        11px !important;

    font-weight:
        750 !important;

    line-height:
        1.2 !important;
}

[b-boi79yxj55] .link-text small {
    display: block !important;

    overflow:
        hidden !important;

    margin-top:
        2px !important;

    color:
        #94a3b8 !important;

    font-size:
        9px !important;

    font-weight:
        500 !important;

    line-height:
        1.2 !important;

    text-overflow:
        ellipsis !important;
}

[b-boi79yxj55] .sidebar-link.active .link-text small {
    color:
        #047857 !important;
}


/* ============================================================
   MENU BADGES
   ============================================================ */

[b-boi79yxj55] .menu-badge {
    min-width: 19px !important;
    height: 19px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    flex-shrink:
        0 !important;

    padding:
        0 6px !important;

    border-radius:
        999px !important;

    background:
        #ef4444 !important;

    color:
        #ffffff !important;

    font-size:
        9px !important;

    font-weight:
        900 !important;

    line-height:
        1 !important;

    box-shadow:
        0 6px 12px
        rgba(239, 68, 68, 0.18) !important;
}

[b-boi79yxj55] .sidebar-link.active .menu-badge {
    background:
        #dc2626 !important;
}


/* ============================================================
   LEGACY LOGOUT
   ============================================================ */

[b-boi79yxj55] .logout-link:hover,
[b-boi79yxj55] .logout-link.nav-link:hover {
    border-color:
        #fecaca !important;

    background:
        #fff1f2 !important;

    color:
        #be123c !important;
}

[b-boi79yxj55] .logout-link:hover .link-icon {
    background:
        #ffe4e6 !important;

    color:
        #be123c !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {

    .app-sidebar[b-boi79yxj55] {
        height: auto;

        min-height: auto;

        overflow: visible;
    }

    .sidebar-fixed-area[b-boi79yxj55] {
        padding:
            18px 16px
            0;
    }

    .sidebar-brand-card[b-boi79yxj55] {
        min-height: auto;

        padding: 10px;

        margin-bottom: 10px;
    }

    .sidebar-brand-logo[b-boi79yxj55] {
        width: 122px;
    }

    .sidebar-user-card[b-boi79yxj55] {
        margin-bottom: 12px;
    }

    .sidebar-user-avatar[b-boi79yxj55] {
        width: 50px;
        height: 52px;
    }

    .sidebar-menu-scroll[b-boi79yxj55] {
        overflow: visible;

        padding:
            4px 14px
            24px;
    }
}
/* /Components/Layout/ProfileLayout.razor.rz.scp.css */
.profile-layout-loading[b-ughkyz4t7r] {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f8fafc;

    color: #64748b;

    font-size: 14px;
    font-weight: 700;
}


/* ============================================================
   CONTRACTOR PROFILE LAYOUT
   ============================================================ */

.contractor-profile-layout[b-ughkyz4t7r] {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top left,
            rgba(1, 193, 180, 0.14),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #eef7f5 0%,
            #f8fafc 52%,
            #edf5f8 100%
        );

    color: #0f172a;
}


/* ============================================================
   HEADER
   ============================================================ */

.contractor-profile-header[b-ughkyz4t7r] {
    min-height: 82px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 22px;

    padding: 16px 30px;

    box-sizing: border-box;

    border-bottom:
        1px solid
        rgba(203, 213, 225, 0.8);

    background:
        rgba(255, 255, 255, 0.92);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 8px 24px
        rgba(15, 23, 42, 0.045);
}


/* ============================================================
   BRAND
   ============================================================ */

.contractor-profile-brand[b-ughkyz4t7r] {
    display: flex;

    align-items: center;

    gap: 13px;
}

.contractor-brand-mark[b-ughkyz4t7r] {
    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #01c1b4 0%,
            #008f86 100%
        );

    color: #ffffff;

    font-size: 20px;
    font-weight: 950;

    box-shadow:
        0 12px 24px
        rgba(1, 193, 180, 0.22);
}

.contractor-brand-copy[b-ughkyz4t7r] {
    display: flex;

    flex-direction: column;
}

.contractor-brand-copy > span[b-ughkyz4t7r] {
    margin-bottom: 2px;

    color: #047f78;

    font-size: 9px;
    font-weight: 950;

    letter-spacing: 1.7px;
}

.contractor-brand-copy strong[b-ughkyz4t7r] {
    color: #071426;

    font-size: 21px;
    font-weight: 950;

    line-height: 1.05;
}

.contractor-brand-copy small[b-ughkyz4t7r] {
    margin-top: 3px;

    color: #64748b;

    font-size: 11px;
    font-weight: 650;
}


/* ============================================================
   ACTIONS
   ============================================================ */

.contractor-profile-actions[b-ughkyz4t7r] {
    display: flex;

    align-items: center;

    gap: 10px;
}

.dashboard-return-btn[b-ughkyz4t7r],
.contractor-profile-logout[b-ughkyz4t7r] {
    min-height: 42px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 10px 16px;

    box-sizing: border-box;

    border-radius: 13px;

    font-size: 12px;
    font-weight: 900;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.dashboard-return-btn[b-ughkyz4t7r] {
    border:
        1px solid
        rgba(1, 193, 180, 0.32);

    background: #effdf9;

    color: #047f78 !important;
}

.dashboard-return-btn:hover[b-ughkyz4t7r] {
    background: #dcfdf7;

    border-color:
        rgba(1, 193, 180, 0.5);

    transform:
        translateY(-1px);
}

.contractor-profile-logout[b-ughkyz4t7r] {
    border:
        1px solid #073b6d;

    background: #073b6d;

    color: #ffffff !important;

    box-shadow:
        0 10px 22px
        rgba(7, 59, 109, 0.18);
}

.contractor-profile-logout:hover[b-ughkyz4t7r] {
    background: #052f57;

    border-color: #052f57;

    transform:
        translateY(-1px);
}


/* ============================================================
   PROFILE CONTENT
   ============================================================ */

.contractor-profile-content[b-ughkyz4t7r] {
    width: 100%;

    max-width: 1380px;

    margin: 0 auto;

    box-sizing: border-box;

    padding: 12px 18px 36px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 720px) {

    .contractor-profile-header[b-ughkyz4t7r] {
        align-items: flex-start;

        flex-direction: column;

        padding: 16px 18px;
    }

    .contractor-profile-brand[b-ughkyz4t7r] {
        width: 100%;
    }

    .contractor-profile-actions[b-ughkyz4t7r] {
        width: 100%;

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 10px;
    }

    .dashboard-return-btn[b-ughkyz4t7r],
    .contractor-profile-logout[b-ughkyz4t7r] {
        width: 100%;
    }

    .contractor-profile-content[b-ughkyz4t7r] {
        padding:
            4px 0 28px;
    }
}


@media (max-width: 420px) {

    .contractor-brand-mark[b-ughkyz4t7r] {
        width: 44px;
        height: 44px;

        border-radius: 14px;

        font-size: 18px;
    }

    .contractor-brand-copy strong[b-ughkyz4t7r] {
        font-size: 19px;
    }

    .contractor-brand-copy small[b-ughkyz4t7r] {
        font-size: 10px;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-f3mow1yc6b],
.components-reconnect-repeated-attempt-visible[b-f3mow1yc6b],
.components-reconnect-failed-visible[b-f3mow1yc6b],
.components-pause-visible[b-f3mow1yc6b],
.components-resume-failed-visible[b-f3mow1yc6b],
.components-rejoining-animation[b-f3mow1yc6b] {
    display: none;
}

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


#components-reconnect-modal[b-f3mow1yc6b] {
    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-f3mow1yc6b 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-f3mow1yc6b {
    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/Layout/VisitorLayout.razor.rz.scp.css */
.visitor-public-layout[b-yi2b5t7fvo] {
    min-height: 100vh;
    width: 100%;
    background: #f8fafc;
}
/* /Components/Pages/Account/MyProfile.razor.rz.scp.css */
.profile-page[b-y08zvlpwzz] {
    padding: 26px 32px 34px;
    max-width: 1480px;
    margin: 0 auto;
}

.profile-header[b-y08zvlpwzz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.profile-header > div:first-child[b-y08zvlpwzz] {
    max-width: 760px;
}

.profile-eyebrow[b-y08zvlpwzz] {
    display: inline-block;
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0f9f95;
}

.profile-header h1[b-y08zvlpwzz] {
    margin: 0;
    font-size: 32px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #101828;
}

.profile-header p[b-y08zvlpwzz] {
    margin: 9px 0 0;
    max-width: 680px;
    font-size: 14px;
    line-height: 1.55;
    color: #667085;
}

.profile-grid[b-y08zvlpwzz] {
    display: grid;
    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(340px, 0.8fr);
    gap: 18px;
    align-items: start;
}

.profile-card[b-y08zvlpwzz] {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 18px;
    padding: 22px;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.03),
        0 8px 24px rgba(16, 24, 40, 0.045);
}

.profile-card[b-y08zvlpwzz]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 84px;
    height: 3px;
    border-radius: 0 0 4px 0;
    background: #13a89e;
}

.card-heading[b-y08zvlpwzz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eef2f6;
}

.card-heading h2[b-y08zvlpwzz] {
    margin: 0;
    font-size: 18px;
    font-weight: 750;
    letter-spacing: -0.015em;
    color: #101828;
}

.card-heading p[b-y08zvlpwzz] {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #7a8699;
}

.form-grid[b-y08zvlpwzz] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 15px 16px;
}

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

.form-group[b-y08zvlpwzz] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 15px;
}

.form-group label[b-y08zvlpwzz] {
    font-size: 12px;
    font-weight: 750;
    color: #344054;
}

.form-control[b-y08zvlpwzz] {
    width: 100%;
    min-height: 40px;
    padding: 8px 11px;
    box-sizing: border-box;
    border: 1px solid #d9dee7;
    border-radius: 8px;
    background: #ffffff;
    color: #182230;
    font-size: 13px;
    line-height: 1.35;
    outline: none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.form-control:hover[b-y08zvlpwzz] {
    border-color: #b8c2d1;
}

.form-control:focus[b-y08zvlpwzz] {
    border-color: #14a79e;

    box-shadow:
        0 0 0 3px
        rgba(20, 167, 158, 0.11);
}

.readonly-control[b-y08zvlpwzz] {
    background: #f8fafc;
    border-color: #e5e9ef;
    color: #667085;
    font-weight: 550;
}

.readonly-control:hover[b-y08zvlpwzz] {
    border-color: #e5e9ef;
}

/* ============================================================
   SHOW PASSWORD
   ============================================================ */

.show-password-row[b-y08zvlpwzz] {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    width: fit-content;

    margin: -1px 0 16px;

    color: #475467;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
    user-select: none;
}

.show-password-row:hover[b-y08zvlpwzz] {
    color: #0f8f87;
}

.show-password-row input[type="checkbox"][b-y08zvlpwzz] {
    width: 15px;
    height: 15px;

    margin: 0;

    cursor: pointer;

    accent-color: #139c93;
}

.show-password-row span[b-y08zvlpwzz] {
    line-height: 1;
}

.status-display[b-y08zvlpwzz] {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 0 1px;
}

.status-badge[b-y08zvlpwzz] {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.status-badge.active[b-y08zvlpwzz] {
    background: #eafaf5;
    color: #087f6a;
    border: 1px solid #c8f1e5;
}

.status-badge.inactive[b-y08zvlpwzz] {
    background: #fff1f0;
    color: #b42318;
    border: 1px solid #ffd3cf;
}

.form-actions[b-y08zvlpwzz] {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

.primary-button[b-y08zvlpwzz] {
    min-height: 39px;
    padding: 9px 16px;

    border: 1px solid #108f87;
    border-radius: 8px;

    background: #139c93;
    color: #ffffff;

    font-size: 13px;
    font-weight: 750;

    cursor: pointer;

    box-shadow:
        0 2px 5px
        rgba(19, 156, 147, 0.16);

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.primary-button:hover[b-y08zvlpwzz] {
    background: #0f8d85;
    border-color: #0c8179;

    box-shadow:
        0 4px 10px
        rgba(19, 156, 147, 0.2);
}

.primary-button:active[b-y08zvlpwzz] {
    transform: translateY(1px);
}

.primary-button:disabled[b-y08zvlpwzz] {
    opacity: 0.58;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.alert[b-y08zvlpwzz] {
    padding: 10px 12px;
    margin-bottom: 16px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

.alert-success[b-y08zvlpwzz] {
    background: #edfdf7;
    border: 1px solid #c8f1e5;
    color: #087f6a;
}

.alert-error[b-y08zvlpwzz] {
    background: #fff3f2;
    border: 1px solid #ffd4cf;
    color: #b42318;
}

.password-note[b-y08zvlpwzz] {
    margin: 3px 0 17px;
    padding: 12px 13px;
    border: 1px solid #d8e7f8;
    border-radius: 9px;
    background: #f5f9ff;
}

.password-note strong[b-y08zvlpwzz] {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 800;
    color: #2457a6;
}

.password-note p[b-y08zvlpwzz] {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #5d6b7e;
}

[b-y08zvlpwzz] .validation-message {
    margin-top: 1px;
    font-size: 11px;
    font-weight: 600;
    color: #b42318;
}

[b-y08zvlpwzz] input.invalid {
    border-color: #f04438 !important;

    box-shadow:
        0 0 0 2px
        rgba(240, 68, 56, 0.08);
}

[b-y08zvlpwzz] input.valid.modified {
    border-color: #86d7c7;
}

@media (max-width: 1100px) {
    .profile-grid[b-y08zvlpwzz] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .profile-page[b-y08zvlpwzz] {
        padding: 20px 18px 28px;
    }

    .profile-header[b-y08zvlpwzz] {
        margin-bottom: 18px;
    }

    .profile-header h1[b-y08zvlpwzz] {
        font-size: 27px;
    }

    .profile-grid[b-y08zvlpwzz] {
        gap: 15px;
    }

    .profile-card[b-y08zvlpwzz] {
        padding: 18px;
        border-radius: 14px;
    }

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

    .full-width[b-y08zvlpwzz] {
        grid-column: auto;
    }

    .form-actions[b-y08zvlpwzz] {
        justify-content: stretch;
    }

    .primary-button[b-y08zvlpwzz] {
        width: 100%;
    }
}
/* /Components/Pages/Admin/ActivityMonitor.razor.rz.scp.css */
.activity-page[b-20ziwwapw8] {
    padding: 1.25rem;
}

.activity-hero[b-20ziwwapw8] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1rem;
    padding: 1.25rem;
    border-radius: 24px;
    background: linear-gradient(135deg, #042f2e, #0f766e);
    color: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 118, 110, 0.22);
}

.eyebrow[b-20ziwwapw8] {
    margin-bottom: 0.25rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.activity-hero h1[b-20ziwwapw8] {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 900;
}

.activity-hero p[b-20ziwwapw8] {
    margin: 0.35rem 0 0;
    max-width: 760px;
    color: rgba(255, 255, 255, 0.78);
}

.hero-time[b-20ziwwapw8] {
    min-width: 160px;
    padding: 1rem;
    border-radius: 20px;
    text-align: right;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.hero-time span[b-20ziwwapw8],
.hero-time small[b-20ziwwapw8] {
    display: block;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.78rem;
    font-weight: 700;
}

.hero-time strong[b-20ziwwapw8] {
    display: block;
    margin: 0.2rem 0;
    font-size: 1.45rem;
    line-height: 1;
    font-weight: 900;
}

.kpi-grid[b-20ziwwapw8] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.kpi-card[b-20ziwwapw8] {
    padding: 1rem;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.kpi-card span[b-20ziwwapw8] {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.kpi-card strong[b-20ziwwapw8] {
    display: block;
    margin-top: 0.35rem;
    font-size: 1.75rem;
    line-height: 1;
    font-weight: 900;
    color: #0f172a;
}

.kpi-card small[b-20ziwwapw8] {
    display: block;
    margin-top: 0.45rem;
    color: #64748b;
    font-weight: 700;
}

.monitor-grid[b-20ziwwapw8] {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.panel[b-20ziwwapw8],
.filter-card[b-20ziwwapw8],
.activity-table-card[b-20ziwwapw8] {
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.panel[b-20ziwwapw8] {
    overflow: hidden;
}

.panel-header[b-20ziwwapw8],
.table-title-row[b-20ziwwapw8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #eef2f7;
}

.panel-header h2[b-20ziwwapw8],
.table-title-row h2[b-20ziwwapw8] {
    margin: 0;
    font-size: 1rem;
    font-weight: 900;
    color: #0f172a;
}

.panel-header p[b-20ziwwapw8],
.table-title-row p[b-20ziwwapw8] {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
}

.active-list[b-20ziwwapw8] {
    padding: 0.85rem;
}

.active-user[b-20ziwwapw8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}

.active-user + .active-user[b-20ziwwapw8] {
    margin-top: 0.6rem;
}

.avatar[b-20ziwwapw8] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 16px;
    background: #ccfbf1;
    color: #0f766e;
    font-weight: 900;
}

.active-user-main[b-20ziwwapw8] {
    min-width: 0;
    flex: 1;
}

.active-user-main strong[b-20ziwwapw8],
.active-user-main span[b-20ziwwapw8],
.active-user-main small[b-20ziwwapw8] {
    display: block;
}

.active-user-main strong[b-20ziwwapw8] {
    color: #0f172a;
    font-size: 0.9rem;
    word-break: break-word;
}

.active-user-main span[b-20ziwwapw8] {
    margin-top: 0.1rem;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
}

.active-user-main small[b-20ziwwapw8] {
    margin-top: 0.2rem;
    color: #475569;
    font-size: 0.76rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.active-time[b-20ziwwapw8] {
    white-space: nowrap;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
}

.timeline-list[b-20ziwwapw8] {
    padding: 0.95rem 1rem;
}

.timeline-item[b-20ziwwapw8] {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 0.65rem;
}

.timeline-item + .timeline-item[b-20ziwwapw8] {
    margin-top: 0.85rem;
}

.timeline-dot[b-20ziwwapw8] {
    width: 10px;
    height: 10px;
    margin-top: 0.35rem;
    border-radius: 999px;
    background: #01c1b4;
    box-shadow: 0 0 0 5px rgba(1, 193, 180, 0.12);
}

.timeline-content[b-20ziwwapw8] {
    min-width: 0;
}

.timeline-top[b-20ziwwapw8] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.timeline-top strong[b-20ziwwapw8] {
    font-size: 0.85rem;
    color: #0f172a;
    word-break: break-word;
}

.timeline-top span[b-20ziwwapw8] {
    white-space: nowrap;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
}

.timeline-action[b-20ziwwapw8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.timeline-content p[b-20ziwwapw8] {
    margin: 0.35rem 0 0;
    color: #475569;
    font-size: 0.8rem;
}

.filter-card[b-20ziwwapw8] {
    padding: 1rem;
    margin-bottom: 1rem;
}

.filter-grid[b-20ziwwapw8] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 0.75fr 0.75fr auto;
    gap: 0.85rem;
    align-items: end;
}

.field label[b-20ziwwapw8] {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.form-control[b-20ziwwapw8],
.form-select[b-20ziwwapw8] {
    width: 100%;
    min-height: 40px;
    border-radius: 14px;
    border: 1px solid #dbe3ea;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    color: #0f172a;
    background: #ffffff;
}

.form-control:focus[b-20ziwwapw8],
.form-select:focus[b-20ziwwapw8] {
    outline: none;
    border-color: #01c1b4;
    box-shadow: 0 0 0 3px rgba(1, 193, 180, 0.14);
}

.filter-actions[b-20ziwwapw8] {
    display: flex;
    gap: 0.5rem;
}

.btn-primary-soft[b-20ziwwapw8],
.btn-light-soft[b-20ziwwapw8] {
    min-height: 40px;
    border: 0;
    border-radius: 14px;
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}

.btn-primary-soft[b-20ziwwapw8] {
    background: #01c1b4;
    color: #ffffff;
}

.btn-light-soft[b-20ziwwapw8] {
    background: #f1f5f9;
    color: #334155;
}

.activity-table-card[b-20ziwwapw8] {
    overflow: hidden;
}

.table-responsive[b-20ziwwapw8] {
    overflow-x: auto;
}

.activity-table[b-20ziwwapw8] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.activity-table thead[b-20ziwwapw8] {
    background: #f8fafc;
}

.activity-table th[b-20ziwwapw8] {
    padding: 0.8rem 0.9rem;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

.activity-table td[b-20ziwwapw8] {
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid #eef2f7;
    color: #0f172a;
    vertical-align: top;
}

.activity-table tbody tr:hover[b-20ziwwapw8] {
    background: #f8fafc;
}

.date-cell[b-20ziwwapw8],
.ip-cell[b-20ziwwapw8] {
    white-space: nowrap;
    color: #64748b;
    font-weight: 800;
}

.user-cell[b-20ziwwapw8] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.user-cell strong[b-20ziwwapw8] {
    font-size: 0.86rem;
    word-break: break-word;
}

.user-cell span[b-20ziwwapw8] {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 700;
}

.activity-tags[b-20ziwwapw8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.module-pill[b-20ziwwapw8],
.action-pill[b-20ziwwapw8] {
    display: inline-flex;
    align-items: center;
    max-width: 190px;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
    white-space: nowrap;
}

.module-pill[b-20ziwwapw8] {
    background: #ecfeff;
    color: #0f766e;
}

.action-pill[b-20ziwwapw8] {
    background: #f1f5f9;
    color: #334155;
}

.entity-cell[b-20ziwwapw8] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.entity-cell strong[b-20ziwwapw8] {
    font-size: 0.8rem;
}

.entity-cell span[b-20ziwwapw8] {
    font-size: 0.72rem;
    color: #64748b;
    word-break: break-word;
}

.description-cell[b-20ziwwapw8] {
    min-width: 280px;
    color: #334155;
}

.muted[b-20ziwwapw8] {
    color: #94a3b8;
}

.empty-state[b-20ziwwapw8] {
    padding: 2rem;
    text-align: center;
    color: #64748b;
    font-weight: 800;
}

@media (max-width: 1200px) {
    .kpi-grid[b-20ziwwapw8] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .monitor-grid[b-20ziwwapw8] {
        grid-template-columns: 1fr;
    }

    .filter-grid[b-20ziwwapw8] {
        grid-template-columns: 1fr 1fr;
    }

    .filter-actions[b-20ziwwapw8] {
        grid-column: span 2;
    }
}

@media (max-width: 720px) {
    .activity-page[b-20ziwwapw8] {
        padding: 0.85rem;
    }

    .activity-hero[b-20ziwwapw8] {
        flex-direction: column;
        border-radius: 20px;
    }

    .hero-time[b-20ziwwapw8] {
        text-align: left;
    }

    .kpi-grid[b-20ziwwapw8],
    .filter-grid[b-20ziwwapw8] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-20ziwwapw8] {
        grid-column: auto;
        flex-direction: column;
    }

    .btn-primary-soft[b-20ziwwapw8],
    .btn-light-soft[b-20ziwwapw8] {
        width: 100%;
    }

    .timeline-top[b-20ziwwapw8] {
        flex-direction: column;
        gap: 0.2rem;
    }

    .active-user[b-20ziwwapw8] {
        align-items: flex-start;
    }

    .active-time[b-20ziwwapw8] {
        display: none;
    }
}
/* /Components/Pages/Admin/AuditLogs.razor.rz.scp.css */
.audit-page[b-qibuvgyczb] {
    padding: 1.25rem;
}

.audit-hero[b-qibuvgyczb] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1rem;
    padding: 1.25rem;
    border-radius: 24px;
    background: linear-gradient(135deg, #042f2e, #0f766e);
    color: white;
    box-shadow: 0 18px 45px rgba(15, 118, 110, 0.22);
}

.audit-hero h1[b-qibuvgyczb] {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 800;
}

.audit-hero p[b-qibuvgyczb] {
    margin: 0.35rem 0 0;
    max-width: 760px;
    color: rgba(255, 255, 255, 0.78);
}

.eyebrow[b-qibuvgyczb] {
    margin-bottom: 0.25rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.hero-badge[b-qibuvgyczb] {
    min-width: 130px;
    padding: 1rem;
    border-radius: 20px;
    text-align: center;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.hero-badge span[b-qibuvgyczb] {
    display: block;
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 900;
}

.hero-badge small[b-qibuvgyczb] {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    opacity: 0.8;
}

.filter-card[b-qibuvgyczb],
.audit-table-card[b-qibuvgyczb] {
    border-radius: 22px;
    background: white;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.filter-card[b-qibuvgyczb] {
    padding: 1rem;
    margin-bottom: 1rem;
}

.filter-grid[b-qibuvgyczb] {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 0.8fr 0.8fr auto;
    gap: 0.85rem;
    align-items: end;
}

.field label[b-qibuvgyczb] {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.form-control[b-qibuvgyczb],
.form-select[b-qibuvgyczb] {
    width: 100%;
    min-height: 40px;
    border-radius: 14px;
    border: 1px solid #dbe3ea;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    color: #0f172a;
    background: #ffffff;
}

.form-control:focus[b-qibuvgyczb],
.form-select:focus[b-qibuvgyczb] {
    outline: none;
    border-color: #01c1b4;
    box-shadow: 0 0 0 3px rgba(1, 193, 180, 0.14);
}

.filter-actions[b-qibuvgyczb] {
    display: flex;
    gap: 0.5rem;
}

.btn-primary-soft[b-qibuvgyczb],
.btn-light-soft[b-qibuvgyczb] {
    min-height: 40px;
    border: 0;
    border-radius: 14px;
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.btn-primary-soft[b-qibuvgyczb] {
    background: #01c1b4;
    color: white;
}

.btn-light-soft[b-qibuvgyczb] {
    background: #f1f5f9;
    color: #334155;
}

.audit-table-card[b-qibuvgyczb] {
    overflow: hidden;
}

.table-responsive[b-qibuvgyczb] {
    overflow-x: auto;
}

.audit-table[b-qibuvgyczb] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.audit-table thead[b-qibuvgyczb] {
    background: #f8fafc;
}

.audit-table th[b-qibuvgyczb] {
    padding: 0.8rem 0.9rem;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

.audit-table td[b-qibuvgyczb] {
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid #eef2f7;
    color: #0f172a;
    vertical-align: top;
}

.audit-table tbody tr:hover[b-qibuvgyczb] {
    background: #f8fafc;
}

.date-cell[b-qibuvgyczb] {
    white-space: nowrap;
    color: #475569;
    font-weight: 700;
}

.user-cell[b-qibuvgyczb] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.user-cell strong[b-qibuvgyczb] {
    font-size: 0.86rem;
}

.user-cell span[b-qibuvgyczb] {
    font-size: 0.72rem;
    color: #64748b;
}

.module-pill[b-qibuvgyczb],
.action-pill[b-qibuvgyczb] {
    display: inline-flex;
    align-items: center;
    max-width: 180px;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.module-pill[b-qibuvgyczb] {
    background: #ecfeff;
    color: #0f766e;
}

.action-pill[b-qibuvgyczb] {
    background: #f1f5f9;
    color: #334155;
}

.entity-cell[b-qibuvgyczb] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.entity-cell strong[b-qibuvgyczb] {
    font-size: 0.8rem;
}

.entity-cell span[b-qibuvgyczb] {
    font-size: 0.72rem;
    color: #64748b;
}

.description-cell[b-qibuvgyczb] {
    min-width: 260px;
    color: #334155;
}

.ip-cell[b-qibuvgyczb] {
    white-space: nowrap;
    color: #64748b;
}

.muted[b-qibuvgyczb] {
    color: #94a3b8;
}

.empty-state[b-qibuvgyczb] {
    padding: 2rem;
    text-align: center;
    color: #64748b;
    font-weight: 700;
}

.table-footer[b-qibuvgyczb] {
    padding: 0.8rem 1rem;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    border-top: 1px solid #e5e7eb;
}

@media (max-width: 1100px) {
    .filter-grid[b-qibuvgyczb] {
        grid-template-columns: 1fr 1fr;
    }

    .filter-actions[b-qibuvgyczb] {
        grid-column: span 2;
    }
}

@media (max-width: 720px) {
    .audit-page[b-qibuvgyczb] {
        padding: 0.85rem;
    }

    .audit-hero[b-qibuvgyczb] {
        flex-direction: column;
        border-radius: 20px;
    }

    .filter-grid[b-qibuvgyczb] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-qibuvgyczb] {
        grid-column: auto;
        flex-direction: column;
    }

    .btn-primary-soft[b-qibuvgyczb],
    .btn-light-soft[b-qibuvgyczb] {
        width: 100%;
    }
}
/* /Components/Pages/Admin/Companies.razor.rz.scp.css */
.company-page[b-rwrjs8swoj] {
    min-height: calc(100vh - 32px);
    padding: 32px 36px;
    color: #0f172a;
    background: #f8fafc;
}

.page-header[b-rwrjs8swoj] {
    margin-bottom: 26px;
}

.eyebrow[b-rwrjs8swoj] {
    color: #047857;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    margin-bottom: 10px;
}

.page-header h1[b-rwrjs8swoj] {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.6px;
}

.page-header p[b-rwrjs8swoj] {
    margin: 10px 0 0;
    color: #475569;
    font-size: 15px;
}

.company-grid[b-rwrjs8swoj] {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 18px;
}

.panel[b-rwrjs8swoj] {
    background: #ffffff;
    border: 1px solid #dbe7e1;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .045);
}

.panel h2[b-rwrjs8swoj] {
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 700;
}

.panel-header[b-rwrjs8swoj] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
}

.panel-header h2[b-rwrjs8swoj] {
    margin: 0;
}

.panel-header p[b-rwrjs8swoj] {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 13px;
}

.form-group[b-rwrjs8swoj] {
    margin-bottom: 16px;
}

.form-group label[b-rwrjs8swoj] {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
}

.form-control[b-rwrjs8swoj] {
    width: 100%;
    min-height: 52px;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    padding: 0 16px;
    font-size: 15px;
}

.textarea[b-rwrjs8swoj] {
    min-height: 100px;
    padding-top: 14px;
}

.form-control:focus[b-rwrjs8swoj] {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 4px rgba(5, 150, 105, .12);
}

.submit-btn[b-rwrjs8swoj] {
    width: 100%;
    height: 54px;
    border: 0;
    border-radius: 17px;
    background: #059669;
    color: white;
    font-size: 15px;
    font-weight: 800;
}

.submit-btn:hover[b-rwrjs8swoj] {
    background: #047857;
}

.empty-state[b-rwrjs8swoj] {
    border: 1px dashed #b7c9c0;
    border-radius: 18px;
    padding: 40px;
    text-align: center;
    color: #64748b;
    background: #f8fffc;
}

.company-list[b-rwrjs8swoj] {
    display: grid;
    gap: 12px;
}

.company-item[b-rwrjs8swoj] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

.company-item strong[b-rwrjs8swoj] {
    display: block;
    font-size: 15px;
    font-weight: 700;
}

.company-item small[b-rwrjs8swoj] {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
}

.status-pill[b-rwrjs8swoj] {
    border-radius: 999px;
    padding: 6px 11px;
    background: #d1fae5;
    color: #047857;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .company-grid[b-rwrjs8swoj] {
        grid-template-columns: 1fr;
    }

    .company-page[b-rwrjs8swoj] {
        padding: 22px 18px;
    }

    .uppercase[b-rwrjs8swoj]{
    text-transform:uppercase;
    }
}
/* /Components/Pages/Admin/ContractorOverview.razor.rz.scp.css */
/* =========================================================
   ContractorOverview.razor.css
   Page-specific styles only.

   Shared reusable styles are now handled by:
   wwwroot/css/jru-shared.css

   This file now keeps only:
   - contractor overview page layout tweaks
   - 6-column KPI layout
   - custom KPI colour variants
   - contractor table minimum width
   - modal internal layout
   - modal email pill
   - Non-IS permission block
   - document preview list
   ========================================================= */

/* =========================================================
   Page Shell
   ========================================================= */

.ops-dashboard[b-l7lke5rjxg] {
    min-height: calc(100vh - 32px);
    padding: 32px 36px 60px;
    background: var(--jru-slate-50, #f8fafc);
    color: var(--jru-slate-900, #0f172a);
}

.ops-dashboard *[b-l7lke5rjxg],
.ops-dashboard *[b-l7lke5rjxg]::before,
.ops-dashboard *[b-l7lke5rjxg]::after {
    box-sizing: border-box;
}

/* =========================================================
   Header / Section Title
   ========================================================= */

.dashboard-hero[b-l7lke5rjxg] {
    margin-bottom: 28px;
}

.dashboard-section-title[b-l7lke5rjxg] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 28px 0 16px;
}

.dashboard-section-title span[b-l7lke5rjxg] {
    display: block;
    margin-bottom: 4px;
    color: var(--jru-slate-500, #64748b);
    font-size: 13px;
    font-weight: 800;
}

.dashboard-section-title h2[b-l7lke5rjxg] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -0.04em;
}

/* =========================================================
   KPI Cards
   ========================================================= */

.contractor-kpi-grid[b-l7lke5rjxg] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: 0;
}

.kpi-card[b-l7lke5rjxg] {
    width: 100%;
    min-height: 132px;
    font-family: inherit;
    text-align: left;
}

.kpi-card span[b-l7lke5rjxg] {
    display: block;
    margin-bottom: 14px;
    color: var(--jru-slate-900, #0f172a);
    font-size: 13px;
    font-weight: 800;
}

.kpi-card strong[b-l7lke5rjxg] {
    display: block;
    margin-bottom: 14px;
    color: #020617;
    font-size: 38px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
}

.kpi-card small[b-l7lke5rjxg] {
    display: block;
    color: var(--jru-slate-500, #64748b);
    font-size: 13px;
    line-height: 1.4;
}

.kpi-card.warning[b-l7lke5rjxg],
.kpi-card.locked[b-l7lke5rjxg] {
    background: #fffdf5;
    border-color: #fde68a;
}

.kpi-card.warning strong[b-l7lke5rjxg],
.kpi-card.locked strong[b-l7lke5rjxg] {
    color: #b45309;
}

.kpi-card.success[b-l7lke5rjxg] {
    background: #f6fffb;
    border-color: #bbf7d0;
}

.kpi-card.success strong[b-l7lke5rjxg] {
    color: #047857;
}

.kpi-card.danger[b-l7lke5rjxg] {
    background: #fff7f7;
    border-color: #fca5a5;
}

.kpi-card.danger strong[b-l7lke5rjxg] {
    color: #be123c;
}

.kpi-card.green-pass[b-l7lke5rjxg] {
    background: linear-gradient(135deg, #f0fdfa, #ecfeff);
    border-color: #99f6e4;
}

.kpi-card.green-pass strong[b-l7lke5rjxg] {
    color: #0f766e;
}

.clickable-card.active[b-l7lke5rjxg] {
    border-color: #0f766e;
    box-shadow:
        0 0 0 4px rgba(20, 184, 166, 0.16),
        0 24px 60px rgba(15, 23, 42, 0.10);
}

/* =========================================================
   Contractor Table Panel
   ========================================================= */

.contractor-table-panel[b-l7lke5rjxg] {
    margin-top: 26px;
}

.contractor-table-header span[b-l7lke5rjxg] {
    display: block;
    margin-bottom: 6px;
    color: #0f766e;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.contractor-table-header h3[b-l7lke5rjxg] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.contractor-table-header p[b-l7lke5rjxg] {
    margin: 7px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 14px;
    line-height: 1.5;
}

.clear-table-btn[b-l7lke5rjxg] {
    border: 1px solid #fecaca;
}

/* =========================================================
   Search Toolbar
   ========================================================= */

.contractor-search-toolbar[b-l7lke5rjxg] {
    margin-bottom: 18px;
}

.contractor-search-box[b-l7lke5rjxg] {
    width: min(620px, 100%);
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #d6e5df;
    background: #ffffff;
    border-radius: 18px;
    padding: 0 12px 0 16px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.contractor-search-box:focus-within[b-l7lke5rjxg] {
    border-color: #14b8a6;
    box-shadow:
        0 0 0 4px rgba(20, 184, 166, 0.14),
        0 12px 30px rgba(15, 23, 42, 0.06);
}

.search-icon[b-l7lke5rjxg] {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: #ecfdf5;
    color: #0f766e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    flex: 0 0 auto;
}

.contractor-search-box input[b-l7lke5rjxg] {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--jru-slate-900, #0f172a);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 14px 0;
}

.contractor-search-box input[b-l7lke5rjxg]::placeholder {
    color: var(--jru-slate-400, #94a3b8);
    font-weight: 600;
}

.search-result-pill[b-l7lke5rjxg] {
    flex: 0 0 auto;
}

/* =========================================================
   Contractor Table
   ========================================================= */

.contractor-table[b-l7lke5rjxg] {
    min-width: 1220px;
}

.contractor-table tbody tr:hover[b-l7lke5rjxg] {
    background: #f8fffd;
}

.contractor-table th:first-child[b-l7lke5rjxg],
.contractor-table td:first-child[b-l7lke5rjxg] {
    width: 70px;
    text-align: center;
}

.contractor-name-btn[b-l7lke5rjxg] {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    outline: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-family: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    text-align: left;
    line-height: 1.35;
}

.contractor-name-btn:hover[b-l7lke5rjxg] {
    color: #0f766e;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contractor-name-btn:focus[b-l7lke5rjxg],
.contractor-name-btn:focus-visible[b-l7lke5rjxg] {
    outline: none;
    box-shadow: none;
}

.contractor-name-btn:active[b-l7lke5rjxg] {
    transform: translateY(1px);
}

/* =========================================================
   Compact Pills
   ========================================================= */

.status-badge[b-l7lke5rjxg],
.doc-status[b-l7lke5rjxg] {
    font-size: 10px;
    font-weight: 900;
}

.status-badge[b-l7lke5rjxg] {
    padding: 5px 10px;
}

.doc-status[b-l7lke5rjxg] {
    min-height: 24px;
    padding: 4px 9px;
}

/* =========================================================
   Modal Shell
   ========================================================= */

.modal-backdrop[b-l7lke5rjxg] {
    z-index: 9999;
    padding: 10px;
}

.contractor-modal[b-l7lke5rjxg] {
    width: min(920px, 100%);
    max-height: calc(100vh - 20px);
    border-color: #d6e5df;
}

.compact-modal[b-l7lke5rjxg] {
    width: min(900px, 100%);
}

.modal-header span[b-l7lke5rjxg] {
    display: block;
    margin-bottom: 3px;
    color: #0f766e;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.modal-header h3[b-l7lke5rjxg] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 21px;
    font-weight: 950;
    letter-spacing: -0.05em;
    line-height: 1.1;
}

.modal-close-btn[b-l7lke5rjxg] {
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #be123c;
}

.modal-close-btn:hover[b-l7lke5rjxg] {
    background: #ffe4e6;
}

/* =========================================================
   Modal Title Email
   ========================================================= */

.modal-title-row[b-l7lke5rjxg] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.modal-title-row h3[b-l7lke5rjxg] {
    margin: 0;
}

.modal-email-pill[b-l7lke5rjxg] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    max-width: 360px;
    margin: 0 !important;
    padding: 5px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    border: 1px solid #99f6e4;
    color: #0f766e;
    font-size: 12px !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-email-pill:hover[b-l7lke5rjxg] {
    background: #ccfbf1;
    color: #0f766e;
    text-decoration: none;
}

.modal-email-pill.muted[b-l7lke5rjxg] {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #64748b;
}

/* =========================================================
   Modal Body
   ========================================================= */

.modal-body[b-l7lke5rjxg] {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 18px;
    padding: 14px 18px 16px;
    overflow-y: auto;
    min-height: 0;
}

.modal-body[b-l7lke5rjxg]::-webkit-scrollbar {
    width: 8px;
}

.modal-body[b-l7lke5rjxg]::-webkit-scrollbar-track {
    background: var(--jru-slate-100, #f1f5f9);
    border-radius: 999px;
}

.modal-body[b-l7lke5rjxg]::-webkit-scrollbar-thumb {
    background: var(--jru-slate-300, #cbd5e1);
    border-radius: 999px;
}

.modal-body[b-l7lke5rjxg]::-webkit-scrollbar-thumb:hover {
    background: var(--jru-slate-400, #94a3b8);
}

/* =========================================================
   Modal Profile Panel
   ========================================================= */

.contractor-profile-panel[b-l7lke5rjxg] {
    border-right: 1px solid var(--jru-slate-200, #e2e8f0);
    padding-right: 16px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.contractor-photo-shell[b-l7lke5rjxg] {
    width: 126px;
    height: 150px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #d6e5df;
    background: var(--jru-slate-50, #f8fafc);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.contractor-photo[b-l7lke5rjxg],
.contractor-photo-placeholder[b-l7lke5rjxg] {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}

.contractor-photo[b-l7lke5rjxg] {
    object-fit: cover;
    background: var(--jru-slate-50, #f8fafc);
}

.contractor-photo-placeholder[b-l7lke5rjxg] {
    background: linear-gradient(135deg, #ccfbf1, #ecfeff);
    color: #0f766e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 950;
}

.contractor-status-stack[b-l7lke5rjxg] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.profile-compact-meta[b-l7lke5rjxg] {
    display: grid;
    gap: 9px;
    margin-top: 2px;
}

.profile-compact-meta div[b-l7lke5rjxg] {
    display: grid;
    gap: 2px;
}

.profile-compact-meta span[b-l7lke5rjxg] {
    color: var(--jru-slate-500, #64748b);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profile-compact-meta strong[b-l7lke5rjxg] {
    color: var(--jru-slate-900, #0f172a);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
}

/* =========================================================
   Modal Details
   ========================================================= */

.contractor-main-panel[b-l7lke5rjxg] {
    min-width: 0;
}

.compact-detail-grid[b-l7lke5rjxg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 0;
}

.detail-item[b-l7lke5rjxg] {
    min-width: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--jru-slate-200, #e2e8f0);
    border-radius: 0;
    padding: 8px 0 9px;
}

.detail-item.full[b-l7lke5rjxg] {
    grid-column: 1 / -1;
}

.detail-item span[b-l7lke5rjxg] {
    display: block;
    margin-bottom: 3px;
    color: var(--jru-slate-500, #64748b);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.detail-item strong[b-l7lke5rjxg] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.3;
    word-break: break-word;
}

/* =========================================================
   Modal Section Headers
   ========================================================= */

.document-preview-section[b-l7lke5rjxg] {
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid var(--jru-slate-200, #e2e8f0);
}

.modal-section-header[b-l7lke5rjxg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.modal-section-header span[b-l7lke5rjxg] {
    display: block;
    margin-bottom: 3px;
    color: #0f766e;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.modal-section-header h4[b-l7lke5rjxg] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 14px;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.modal-section-header > strong[b-l7lke5rjxg] {
    color: #0f766e;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap;
}

/* =========================================================
   Non-IS Permission Section
   ========================================================= */

.non-is-permission-box[b-l7lke5rjxg] {
    border: 1px solid #d6e5df;
    background: linear-gradient(135deg, #f8fffd, #ffffff);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
}

.permission-toggle-row[b-l7lke5rjxg] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 13px;
    border: 1px solid #ccfbf1;
    background: #ffffff;
    border-radius: 16px;
    cursor: pointer;
    margin: 0;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.permission-toggle-row:hover[b-l7lke5rjxg] {
    border-color: #99f6e4;
    background: #f8fffd;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}

.permission-toggle-row input[type="checkbox"][b-l7lke5rjxg] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin: 2px 0 0;
    border: 2px solid #99f6e4;
    border-radius: 7px;
    background: #ffffff;
    cursor: pointer;
    position: relative;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.permission-toggle-row input[type="checkbox"]:checked[b-l7lke5rjxg] {
    background: #0f766e;
    border-color: #0f766e;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.14);
}

.permission-toggle-row input[type="checkbox"]:checked[b-l7lke5rjxg]::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 13px;
    font-weight: 950;
    line-height: 1;
}

.permission-toggle-row input[type="checkbox"]:focus-visible[b-l7lke5rjxg] {
    outline: none;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.18);
}

.permission-toggle-row > span[b-l7lke5rjxg] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 13px;
    font-weight: 950;
    line-height: 1.35;
}

.permission-toggle-row small[b-l7lke5rjxg] {
    display: block;
    margin-top: 3px;
    color: var(--jru-slate-500, #64748b);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.45;
}

.permission-meta[b-l7lke5rjxg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.permission-meta .full[b-l7lke5rjxg] {
    grid-column: 1 / -1;
}

.permission-meta div[b-l7lke5rjxg] {
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    background: #ffffff;
    border-radius: 14px;
    padding: 9px 11px;
}

.permission-meta span[b-l7lke5rjxg] {
    display: block;
    margin-bottom: 4px;
    color: var(--jru-slate-500, #64748b);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.permission-meta strong[b-l7lke5rjxg] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.35;
    word-break: break-word;
}

.permission-meta strong.status-badge[b-l7lke5rjxg] {
    display: inline-flex;
    width: fit-content;
    padding: 7px 11px;
    font-size: 10.5px;
}

.permission-save-btn[b-l7lke5rjxg] {
    width: 100%;
    min-height: 42px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 950;
}

/* =========================================================
   Document Preview
   ========================================================= */

.document-preview-list[b-l7lke5rjxg] {
    display: grid;
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    border-radius: 14px;
    overflow: hidden;
}

.document-preview-row[b-l7lke5rjxg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #ffffff;
    padding: 8px 10px;
    border-bottom: 1px solid var(--jru-slate-200, #e2e8f0);
}

.document-preview-row:last-child[b-l7lke5rjxg] {
    border-bottom: none;
}

.document-preview-row.missing[b-l7lke5rjxg] {
    background: #fff7f7;
}

.document-preview-left[b-l7lke5rjxg] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.document-preview-icon[b-l7lke5rjxg] {
    width: 31px;
    height: 31px;
    border-radius: 10px;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #0f766e;
    display: grid;
    place-items: center;
    font-size: 9px;
    font-weight: 950;
    flex-shrink: 0;
}

.document-preview-left strong[b-l7lke5rjxg] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 12.5px;
    font-weight: 900;
    line-height: 1.2;
}

.document-preview-left small[b-l7lke5rjxg] {
    display: block;
    margin-top: 2px;
    color: var(--jru-slate-500, #64748b);
    font-size: 10.5px;
    font-weight: 650;
}

.document-preview-actions[b-l7lke5rjxg] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-shrink: 0;
}

.doc-preview-btn[b-l7lke5rjxg] {
    min-height: 27px;
    padding: 5px 10px;
    border-color: #99f6e4;
    color: #0f766e;
    font-size: 10.5px;
    font-weight: 950;
    white-space: nowrap;
}

.doc-preview-btn:hover[b-l7lke5rjxg] {
    background: #ccfbf1;
    border-color: #5eead4;
    color: #0f766e;
}

/* =========================================================
   Document Issues
   ========================================================= */

.document-issue-panel[b-l7lke5rjxg] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #fcd34d;
}

.document-issue-panel .modal-section-header span[b-l7lke5rjxg],
.document-issue-panel .modal-section-header h4[b-l7lke5rjxg] {
    color: #92400e;
}

.issue-list[b-l7lke5rjxg] {
    display: grid;
    gap: 6px;
}

.issue-list div[b-l7lke5rjxg] {
    border-radius: 11px;
    padding: 8px 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1500px) {
    .contractor-kpi-grid[b-l7lke5rjxg] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1200px) {
    .contractor-kpi-grid[b-l7lke5rjxg] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .modal-body[b-l7lke5rjxg] {
        grid-template-columns: 1fr;
    }

    .contractor-profile-panel[b-l7lke5rjxg] {
        border-right: 0;
        border-bottom: 1px solid var(--jru-slate-200, #e2e8f0);
        padding-right: 0;
        padding-bottom: 12px;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
    }

    .contractor-status-stack[b-l7lke5rjxg] {
        align-content: center;
    }

    .profile-compact-meta[b-l7lke5rjxg] {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contractor-photo-shell[b-l7lke5rjxg] {
        width: 112px;
        height: 132px;
    }
}

@media (max-width: 860px) {
    .compact-detail-grid[b-l7lke5rjxg] {
        grid-template-columns: 1fr;
    }

    .document-preview-row[b-l7lke5rjxg] {
        align-items: flex-start;
        flex-direction: column;
    }

    .document-preview-actions[b-l7lke5rjxg] {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .ops-dashboard[b-l7lke5rjxg] {
        padding: 24px 18px 44px;
    }

    .dashboard-hero[b-l7lke5rjxg] {
        flex-direction: column;
    }

    .dashboard-section-title[b-l7lke5rjxg] {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-section-title h2[b-l7lke5rjxg] {
        font-size: 25px;
    }

    .contractor-kpi-grid[b-l7lke5rjxg] {
        grid-template-columns: 1fr;
    }

    .contractor-table-header[b-l7lke5rjxg] {
        flex-direction: column;
    }

    .clear-table-btn[b-l7lke5rjxg] {
        width: 100%;
    }

    .contractor-search-toolbar[b-l7lke5rjxg] {
        flex-direction: column;
        align-items: stretch;
    }

    .contractor-search-box[b-l7lke5rjxg] {
        width: 100%;
    }

    .search-result-pill[b-l7lke5rjxg] {
        width: fit-content;
    }

    .modal-backdrop[b-l7lke5rjxg] {
        padding: 8px;
        align-items: flex-start;
    }

    .contractor-modal[b-l7lke5rjxg] {
        max-height: calc(100vh - 16px);
    }

    .modal-header[b-l7lke5rjxg] {
        padding: 13px 16px 12px;
    }

    .modal-body[b-l7lke5rjxg] {
        padding: 13px 14px 15px;
    }

    .modal-header h3[b-l7lke5rjxg] {
        font-size: 19px;
    }

    .modal-email-pill[b-l7lke5rjxg] {
        max-width: 100%;
    }

    .permission-meta[b-l7lke5rjxg] {
        grid-template-columns: 1fr;
    }

    .permission-meta .full[b-l7lke5rjxg] {
        grid-column: auto;
    }
}
/* /Components/Pages/Admin/ContractorReviews.razor.rz.scp.css */
/* =========================================================
   ContractorReviews.razor.css
   Page-specific styles only.

   Shared reusable styles are handled by:
   wwwroot/css/jru-shared.css

   This file now keeps only:
   - contractor review queue layout
   - compact review card layout
   - document review rows
   - document preview modal sizing
   ========================================================= */

/* =========================================================
   Page Shell
   ========================================================= */

.review-page[b-meprg5duwq] {
    min-height: calc(100vh - 32px);
    padding: 26px 32px 48px;
    color: var(--jru-slate-900, #0f172a);
    background: var(--jru-slate-50, #f8fafc);
}

/* =========================================================
   Header
   ========================================================= */

.page-header[b-meprg5duwq] {
    margin-bottom: 20px;
}

.page-header h1[b-meprg5duwq] {
    font-size: 30px;
    font-weight: 950;
}

.page-header p[b-meprg5duwq] {
    margin-top: 8px;
    color: var(--jru-slate-500, #64748b);
    font-size: 14px;
}

.queue-count[b-meprg5duwq] {
    min-width: 120px;
    padding: 12px 16px;
    border-radius: 18px;
    text-align: center;
}

.queue-count span[b-meprg5duwq] {
    display: block;
    margin-bottom: 5px;
    color: var(--jru-slate-500, #64748b);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}

.queue-count strong[b-meprg5duwq] {
    display: block;
    color: #0f766e;
    font-size: 26px;
    font-weight: 950;
    line-height: 1;
}

/* =========================================================
   Panel / Alerts / Empty State
   ========================================================= */

.panel[b-meprg5duwq] {
    padding: 16px;
    border-color: #dbe7df;
}

.alert[b-meprg5duwq] {
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 800;
}

.empty-state[b-meprg5duwq] {
    border: 1px dashed var(--jru-slate-300, #cbd5e1);
    border-radius: 18px;
    background: var(--jru-slate-50, #f8fafc);
    font-weight: 800;
}

/* =========================================================
   Review Cards
   ========================================================= */

.compact-review-list[b-meprg5duwq] {
    display: grid;
    gap: 12px;
}

.compact-review-card[b-meprg5duwq] {
    border-radius: 20px;
    overflow: hidden;
}

.compact-review-main[b-meprg5duwq] {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 14px;
    padding: 14px;
}

.compact-photo-btn[b-meprg5duwq] {
    width: 72px;
    height: 84px;
    border: 1px solid #dbe7df;
    border-radius: 16px;
    background: var(--jru-slate-50, #f8fafc);
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.compact-photo-btn:disabled[b-meprg5duwq] {
    cursor: default;
    box-shadow: none;
}

.compact-photo-btn img[b-meprg5duwq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.compact-photo-btn span[b-meprg5duwq] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ccfbf1, #ecfeff);
    color: #0f766e;
    font-size: 20px;
    font-weight: 950;
}

.compact-review-content[b-meprg5duwq] {
    min-width: 0;
}

.compact-review-head[b-meprg5duwq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.compact-review-head h2[b-meprg5duwq] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 17px;
    font-weight: 950;
    letter-spacing: -0.025em;
    line-height: 1.25;
}

.compact-review-head p[b-meprg5duwq] {
    margin: 4px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.compact-review-head p span[b-meprg5duwq] {
    color: var(--jru-slate-300, #cbd5e1);
    margin: 0 5px;
}

.badge-stack[b-meprg5duwq] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}

/* =========================================================
   Status Badges / Meta / Issues
   ========================================================= */

.status-badge[b-meprg5duwq] {
    padding: 6px 9px;
    font-size: 11px;
    font-weight: 950;
    border: 1px solid transparent;
}

.status-badge.approved[b-meprg5duwq] {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.status-badge.underreview[b-meprg5duwq],
.status-badge.under-review[b-meprg5duwq] {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

.status-badge.rejected[b-meprg5duwq] {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.status-badge.document-review[b-meprg5duwq] {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.compact-meta[b-meprg5duwq] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.compact-meta span[b-meprg5duwq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 9px;
    border-radius: 999px;
    background: var(--jru-slate-50, #f8fafc);
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 700;
}

.compact-meta strong[b-meprg5duwq] {
    color: var(--jru-slate-700, #334155);
    font-weight: 900;
}

.compact-issues[b-meprg5duwq] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.compact-issues span[b-meprg5duwq] {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    background: #ffffff;
    color: #92400e;
    border: 1px solid #fcd34d;
    font-size: 11px;
    font-weight: 900;
}

/* =========================================================
   Document Mini Section
   ========================================================= */

.document-mini-section[b-meprg5duwq] {
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    border-radius: 16px;
    overflow: hidden;
    background: var(--jru-slate-50, #f8fafc);
}

.mini-section-title[b-meprg5duwq] {
    padding: 9px 12px;
    background: var(--jru-slate-50, #f8fafc);
    border-bottom: 1px solid var(--jru-slate-200, #e2e8f0);
    color: var(--jru-slate-600, #475569);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.document-mini-list[b-meprg5duwq] {
    display: grid;
}

.document-mini-row[b-meprg5duwq] {
    display: grid;
    grid-template-columns: minmax(300px, 0.95fr) minmax(460px, 1.05fr);
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--jru-slate-200, #e2e8f0);
    background: #ffffff;
}

.document-mini-row:last-child[b-meprg5duwq] {
    border-bottom: none;
}

.document-mini-row.missing-row[b-meprg5duwq] {
    background: #fff7ed;
}

.document-open-btn[b-meprg5duwq] {
    width: 100%;
    border: 0;
    border-right: 1px solid var(--jru-slate-200, #e2e8f0);
    background: #ffffff;
    display: grid;
    grid-template-columns: minmax(110px, 1fr) minmax(130px, 1fr) auto;
    align-items: center;
    gap: 8px;
    text-align: left;
    padding: 10px 12px;
    cursor: pointer;
    font-family: inherit;
}

.document-missing-block[b-meprg5duwq] {
    cursor: default;
    background: #fff7ed;
}

.document-open-btn:hover[b-meprg5duwq] {
    background: #f0fdfa;
}

.document-missing-block:hover[b-meprg5duwq] {
    background: #fff7ed;
}

.document-open-btn strong[b-meprg5duwq] {
    color: var(--jru-slate-900, #0f172a);
    font-size: 13px;
    font-weight: 950;
    line-height: 1.2;
}

.document-open-btn span[b-meprg5duwq] {
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 700;
}

.document-status[b-meprg5duwq] {
    justify-content: center;
    padding: 5px 8px;
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    border: 1px solid transparent;
}

.document-status.verified[b-meprg5duwq] {
    background: #dcfce7;
    color: #15803d;
    border-color: #bbf7d0;
}

.document-status.pending[b-meprg5duwq],
.document-status.pending-verification[b-meprg5duwq] {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

.document-status.rejected[b-meprg5duwq],
.document-status.expired[b-meprg5duwq],
.document-status.missing-expiry[b-meprg5duwq],
.document-status.missing[b-meprg5duwq] {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}

.document-mini-actions[b-meprg5duwq] {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 82px 82px;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    background: #fbfdff;
}

.document-mini-actions input[b-meprg5duwq] {
    height: 36px;
    border-radius: 999px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 700;
}

.document-mini-actions input[b-meprg5duwq]::placeholder {
    color: var(--jru-slate-400, #94a3b8);
    font-weight: 600;
}

.missing-actions[b-meprg5duwq] {
    display: flex;
    align-items: center;
    background: #fff7ed;
}

.missing-actions span[b-meprg5duwq] {
    color: #92400e;
    font-size: 12px;
    font-weight: 900;
}

/* =========================================================
   Buttons
   ========================================================= */

.verify-doc-btn[b-meprg5duwq],
.reject-doc-btn[b-meprg5duwq],
.approve-btn[b-meprg5duwq],
.reject-btn[b-meprg5duwq] {
    min-height: 36px;
    border-radius: 999px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 950;
}

.verify-doc-btn:disabled[b-meprg5duwq],
.approve-btn:disabled[b-meprg5duwq] {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
}

.application-actions .approve-btn[b-meprg5duwq],
.application-actions .reject-btn[b-meprg5duwq] {
    min-height: 42px;
    padding: 0 16px;
}

/* =========================================================
   Application Review
   ========================================================= */

.application-review-box[b-meprg5duwq] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-top: 12px;
    padding: 10px;
    border-radius: 16px;
    background: var(--jru-slate-50, #f8fafc);
    border: 1px solid var(--jru-slate-200, #e2e8f0);
}

.application-review-box textarea[b-meprg5duwq] {
    min-height: 42px;
    max-height: 90px;
    resize: vertical;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
}

.application-actions[b-meprg5duwq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.approval-warning[b-meprg5duwq] {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 900;
}

/* =========================================================
   Document Preview Modal
   ========================================================= */

.modal-backdrop-custom[b-meprg5duwq] {
    z-index: 9999;
    padding: 24px;
    background: rgba(15, 23, 42, 0.72);
}

.document-modal[b-meprg5duwq] {
    width: min(100%, 980px);
    max-height: 90vh;
    border-radius: 24px;
}

.modal-header-custom[b-meprg5duwq] {
    height: 58px;
    padding: 0 18px;
}

.modal-header-custom h3[b-meprg5duwq] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 17px;
    font-weight: 950;
}

.close-btn[b-meprg5duwq] {
    border-radius: 12px;
}

.document-frame[b-meprg5duwq] {
    display: block;
    width: 100%;
    height: calc(90vh - 58px);
    border: 0;
}

.document-image[b-meprg5duwq] {
    display: block;
    width: 100%;
    max-height: calc(90vh - 58px);
    object-fit: contain;
    background: var(--jru-slate-900, #0f172a);
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1200px) {
    .document-mini-row[b-meprg5duwq] {
        grid-template-columns: 1fr;
    }

    .document-open-btn[b-meprg5duwq] {
        border-right: 0;
        border-bottom: 1px solid var(--jru-slate-200, #e2e8f0);
    }
}

@media (max-width: 900px) {
    .review-page[b-meprg5duwq] {
        padding: 22px 16px 40px;
    }

    .page-header[b-meprg5duwq] {
        flex-direction: column;
    }

    .queue-count[b-meprg5duwq] {
        width: 100%;
        text-align: left;
    }

    .compact-review-main[b-meprg5duwq] {
        grid-template-columns: 1fr;
    }

    .compact-photo-btn[b-meprg5duwq] {
        width: 74px;
        height: 74px;
    }

    .compact-review-head[b-meprg5duwq] {
        flex-direction: column;
    }

    .badge-stack[b-meprg5duwq] {
        justify-content: flex-start;
    }

    .document-mini-actions[b-meprg5duwq] {
        grid-template-columns: 1fr;
    }

    .verify-doc-btn[b-meprg5duwq],
    .reject-doc-btn[b-meprg5duwq] {
        width: 100%;
    }

    .application-review-box[b-meprg5duwq] {
        grid-template-columns: 1fr;
    }

    .application-actions[b-meprg5duwq] {
        justify-content: flex-end;
    }
}

@media (max-width: 640px) {
    .page-header h1[b-meprg5duwq] {
        font-size: 25px;
    }

    .panel[b-meprg5duwq] {
        padding: 12px;
        border-radius: 20px;
    }

    .compact-review-card[b-meprg5duwq] {
        border-radius: 18px;
    }

    .document-open-btn[b-meprg5duwq] {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .application-actions[b-meprg5duwq] {
        flex-direction: column;
        align-items: stretch;
    }

    .application-actions .approve-btn[b-meprg5duwq],
    .application-actions .reject-btn[b-meprg5duwq] {
        width: 100%;
    }
}
/* /Components/Pages/Admin/Dashboard.razor.rz.scp.css */
/* =========================================================
   Dashboard.razor.css
   Page-specific styles only.

   Shared reusable styles are handled by:
   wwwroot/css/jru-shared.css
   ========================================================= */

.ops-dashboard[b-kzx9minwbw] {
    min-height: calc(100vh - 32px);
    padding: 32px 36px 60px;
    background: var(--jru-slate-50, #f8fafc);
    color: var(--jru-slate-900, #0f172a);
}

/* Header */

.dashboard-hero[b-kzx9minwbw] {
    margin-bottom: 28px;
}

.dashboard-hero h1[b-kzx9minwbw] {
    font-size: 32px;
}

.dashboard-hero p[b-kzx9minwbw] {
    margin-top: 10px;
    color: var(--jru-slate-500, #64748b);
    font-size: 15px;
}

/* Section Title / Date Filter */

.dashboard-section-title[b-kzx9minwbw] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 28px 0 16px;
}

.dashboard-section-title span[b-kzx9minwbw] {
    display: block;
    margin-bottom: 4px;
    color: var(--jru-slate-500, #64748b);
    font-size: 13px;
    font-weight: 800;
}

.dashboard-section-title h2[b-kzx9minwbw] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.operation-date-filter[b-kzx9minwbw] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.operation-date-filter label[b-kzx9minwbw] {
    margin: 0;
    color: var(--jru-slate-700, #334155);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.operation-date-filter input[type="date"][b-kzx9minwbw] {
    height: 42px;
    min-width: 170px;
    border-radius: 14px;
    background: var(--jru-slate-50, #f8fafc);
    font-weight: 800;
}

.operation-date-filter input[type="date"]:hover[b-kzx9minwbw],
.operation-date-filter input[type="date"]:focus[b-kzx9minwbw] {
    background: #ffffff;
}

/* KPI Cards */

.kpi-grid[b-kzx9minwbw] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 26px;
}

.kpi-card[b-kzx9minwbw] {
    min-height: 132px;
    font-family: inherit;
}

.kpi-card span[b-kzx9minwbw] {
    display: block;
    margin-bottom: 14px;
    color: var(--jru-slate-900, #0f172a);
    font-size: 13px;
    font-weight: 800;
}

.kpi-card strong[b-kzx9minwbw] {
    display: block;
    margin-bottom: 14px;
    color: #020617;
    font-size: 38px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
}

.kpi-card small[b-kzx9minwbw] {
    display: block;
    color: var(--jru-slate-500, #64748b);
    font-size: 13px;
}

.kpi-card.success[b-kzx9minwbw] {
    background: #f6fffb;
    border-color: #bbf7d0;
}

.kpi-card.success strong[b-kzx9minwbw] {
    color: #047857;
}

.kpi-card.danger[b-kzx9minwbw] {
    background: #fff7f7;
    border-color: #fca5a5;
}

.kpi-card.danger strong[b-kzx9minwbw] {
    color: #be123c;
}

.kpi-card.fsu-one[b-kzx9minwbw] {
    background: #f7fbff;
    border-color: #bfdbfe;
}

.kpi-card.fsu-one strong[b-kzx9minwbw] {
    color: #1d4ed8;
}

.kpi-card.fsu-two[b-kzx9minwbw] {
    background: #faf7ff;
    border-color: #ddd6fe;
}

.kpi-card.fsu-two strong[b-kzx9minwbw] {
    color: #7c3aed;
}

.kpi-card-clickable[b-kzx9minwbw] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    text-align: left;
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    cursor: pointer;
}

.kpi-card-clickable:hover[b-kzx9minwbw] {
    transform: translateY(-2px);
    border-color: #99f6e4;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10);
}

.kpi-card-clickable.active[b-kzx9minwbw] {
    border-color: #01C1B4;
    background: linear-gradient(135deg, #f8fffd, #ffffff);
    box-shadow:
        0 0 0 4px rgba(1, 193, 180, 0.14),
        0 22px 55px rgba(1, 193, 180, 0.14);
}

.kpi-card.success.kpi-card-clickable.active[b-kzx9minwbw] {
    border-color: #10b981;
    background: linear-gradient(135deg, #ecfdf5, #ffffff);
    box-shadow:
        0 0 0 4px rgba(16, 185, 129, 0.14),
        0 22px 55px rgba(16, 185, 129, 0.12);
}

.kpi-card.danger.kpi-card-clickable.active[b-kzx9minwbw] {
    border-color: #fb7185;
    background: linear-gradient(135deg, #fff1f2, #ffffff);
    box-shadow:
        0 0 0 4px rgba(251, 113, 133, 0.14),
        0 22px 55px rgba(251, 113, 133, 0.12);
}

.kpi-card.fsu-one.kpi-card-clickable.active[b-kzx9minwbw] {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff, #ffffff);
    box-shadow:
        0 0 0 4px rgba(59, 130, 246, 0.14),
        0 22px 55px rgba(59, 130, 246, 0.12);
}

.kpi-card.fsu-two.kpi-card-clickable.active[b-kzx9minwbw] {
    border-color: #8b5cf6;
    background: linear-gradient(135deg, #f5f3ff, #ffffff);
    box-shadow:
        0 0 0 4px rgba(139, 92, 246, 0.14),
        0 22px 55px rgba(139, 92, 246, 0.12);
}

/* Split KPI */

.split-kpi-card[b-kzx9minwbw] {
    min-height: 168px;
}

.split-kpi-card > span[b-kzx9minwbw] {
    margin-bottom: 6px;
}

.split-kpi-row[b-kzx9minwbw] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 4px 0 12px;
}

.split-kpi-row div[b-kzx9minwbw] {
    min-width: 0;
}

.split-kpi-row small[b-kzx9minwbw] {
    display: block;
    margin-bottom: 4px;
    color: #020617;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.15;
}

.split-kpi-row strong[b-kzx9minwbw] {
    display: block;
    color: #020617;
    font-size: 40px;
    font-weight: 950;
    line-height: 0.95;
    letter-spacing: -0.06em;
}

/* Panels */

.contractor-table-panel[b-kzx9minwbw],
.operation-list-panel[b-kzx9minwbw] {
    margin-top: 26px;
}

.boarding-request-panel[b-kzx9minwbw],
.en-route-panel[b-kzx9minwbw],
.currently-jru-panel[b-kzx9minwbw],
.currently-fsu1-panel[b-kzx9minwbw],
.currently-fsu2-panel[b-kzx9minwbw],
.pending-disembark-panel[b-kzx9minwbw] {
    margin-top: 18px;
}

.boarding-request-panel[b-kzx9minwbw] {
    border-color: #bdeee8;
    box-shadow: 0 22px 60px rgba(1, 193, 180, 0.08);
}

.en-route-panel[b-kzx9minwbw] {
    border-color: #bae6fd;
    box-shadow: 0 22px 60px rgba(8, 145, 178, 0.08);
}

.currently-jru-panel[b-kzx9minwbw] {
    border-color: #bbf7d0;
    box-shadow: 0 22px 60px rgba(16, 185, 129, 0.08);
}

.currently-fsu1-panel[b-kzx9minwbw] {
    border-color: #bfdbfe;
    box-shadow: 0 22px 60px rgba(59, 130, 246, 0.08);
}

.currently-fsu2-panel[b-kzx9minwbw] {
    border-color: #ddd6fe;
    box-shadow: 0 22px 60px rgba(139, 92, 246, 0.08);
}

.pending-disembark-panel[b-kzx9minwbw] {
    border-color: #fecaca;
    box-shadow: 0 22px 60px rgba(244, 63, 94, 0.08);
}

.contractor-table-header span[b-kzx9minwbw] {
    display: block;
    margin-bottom: 6px;
    color: #0f766e;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.contractor-table-header h3[b-kzx9minwbw] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.contractor-table-header p[b-kzx9minwbw] {
    margin: 7px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 14px;
}

/* Vessel Group Panels */

.vessel-group-list[b-kzx9minwbw] {
    display: grid;
    gap: 16px;
}

.vessel-group-card[b-kzx9minwbw] {
    border: 1px solid #dbeafe;
    background: linear-gradient(135deg, #ffffff, #f8fbff);
    border-radius: 22px;
    padding: 16px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.vessel-group-card.danger[b-kzx9minwbw] {
    border-color: #fecaca;
    background: linear-gradient(135deg, #ffffff, #fff7f7);
}

.vessel-group-header[b-kzx9minwbw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.vessel-group-header span[b-kzx9minwbw] {
    display: block;
    margin-bottom: 5px;
    color: #0891b2;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.vessel-group-header h4[b-kzx9minwbw] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 20px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.vessel-group-header p[b-kzx9minwbw] {
    margin: 5px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 13px;
    font-weight: 800;
}

.vessel-route-pill[b-kzx9minwbw] {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border-radius: 999px;
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    color: #0e7490;
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

.vessel-route-pill.danger[b-kzx9minwbw] {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #be123c;
}

.vessel-summary-grid[b-kzx9minwbw] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.vessel-summary-grid div[b-kzx9minwbw] {
    min-width: 0;
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    background: #ffffff;
    border-radius: 16px;
    padding: 11px 12px;
}

.vessel-summary-grid span[b-kzx9minwbw] {
    display: block;
    margin-bottom: 5px;
    color: var(--jru-slate-500, #64748b);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.vessel-summary-grid strong[b-kzx9minwbw] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 20px;
    font-weight: 950;
    line-height: 1;
}

.vessel-summary-grid small[b-kzx9minwbw] {
    display: block;
    margin-top: 5px;
    color: var(--jru-slate-500, #64748b);
    font-size: 11px;
    font-weight: 800;
}

/* Tables */

.table-wrapper[b-kzx9minwbw] {
    overflow-x: auto;
}

.dashboard-table[b-kzx9minwbw] {
    min-width: 1220px;
}

.currently-jru-table[b-kzx9minwbw],
.currently-location-table[b-kzx9minwbw] {
    min-width: 1040px;
}

.operation-passenger-table[b-kzx9minwbw] {
    min-width: 860px;
}

.dashboard-table tbody tr:hover[b-kzx9minwbw],
.operation-passenger-table tbody tr:hover[b-kzx9minwbw] {
    background: #f8fffd;
}

.dashboard-table th:first-child[b-kzx9minwbw],
.dashboard-table td:first-child[b-kzx9minwbw],
.operation-passenger-table th:first-child[b-kzx9minwbw],
.operation-passenger-table td:first-child[b-kzx9minwbw] {
    width: 70px;
    text-align: center;
}

.dashboard-table td strong[b-kzx9minwbw],
.operation-passenger-table td strong[b-kzx9minwbw] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-weight: 850;
}

.dashboard-table td small[b-kzx9minwbw],
.operation-passenger-table td small[b-kzx9minwbw] {
    display: block;
    margin-top: 3px;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 700;
}

/* Passenger Type Pills */

.passenger-type-pill[b-kzx9minwbw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap;
}

.passenger-type-pill.contractor[b-kzx9minwbw] {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.passenger-type-pill.visitor[b-kzx9minwbw] {
    color: #075985;
    background: #e0f2fe;
    border: 1px solid #bae6fd;
}

.passenger-type-pill.staff[b-kzx9minwbw] {
    color: #0f766e;
    background: #f0fdfa;
    border: 1px solid #5eead4;
}

/* Status Badges */

.status-badge[b-kzx9minwbw] {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 900;
    border: 1px solid transparent;
}

.status-badge.approved[b-kzx9minwbw],
.status-badge.green-active[b-kzx9minwbw] {
    color: #047857;
    background: #d1fae5;
    border-color: #a7f3d0;
}

.status-badge.rejected[b-kzx9minwbw],
.status-badge.green-expired[b-kzx9minwbw] {
    color: #be123c;
    background: #ffe4e6;
    border-color: #fecdd3;
}

.status-badge.pending[b-kzx9minwbw],
.status-badge.green-locked[b-kzx9minwbw] {
    color: #b45309;
    background: #fef3c7;
    border-color: #fde68a;
}

.status-badge.incomplete[b-kzx9minwbw],
.status-badge.green-inactive[b-kzx9minwbw],
.status-badge.green-not-issued[b-kzx9minwbw] {
    color: var(--jru-slate-600, #475569);
    background: var(--jru-slate-100, #f1f5f9);
    border-color: var(--jru-slate-300, #cbd5e1);
}

/* Empty State / Print */

.empty-table-state[b-kzx9minwbw] {
    border: 1px dashed var(--jru-slate-300, #cbd5e1);
    background: var(--jru-slate-50, #f8fafc);
    color: var(--jru-slate-500, #64748b);
    border-radius: 18px;
    padding: 30px;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
}

.manifest-print-btn[b-kzx9minwbw] {
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.18);
}

.manifest-print-btn:hover[b-kzx9minwbw] {
    background: #0b5f59;
    color: #ffffff;
    text-decoration: none;
}

/* Manifest Compact Summary */

.manifest-summary-panel[b-kzx9minwbw] {
    border-color: #dbeafe;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.06);
}

.manifest-legend[b-kzx9minwbw] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    flex-wrap: wrap;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 850;
}

.manifest-legend span[b-kzx9minwbw] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: none;
}

.legend-dot[b-kzx9minwbw] {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
}

.legend-dot.en-route[b-kzx9minwbw] {
    background: #facc15;
}

.legend-dot.scanning[b-kzx9minwbw] {
    background: #3b82f6;
}

.legend-dot.arrived[b-kzx9minwbw] {
    background: #10b981;
}

.manifest-compact-list[b-kzx9minwbw] {
    display: grid;
    gap: 12px;
}

.manifest-compact-card[b-kzx9minwbw] {
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    background: #ffffff;
    border-radius: 20px;
    padding: 14px 16px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045);
}

.manifest-compact-card.en-route[b-kzx9minwbw] {
    border-color: #fde68a;
    background:
        radial-gradient(circle at top right, rgba(250, 204, 21, 0.10), transparent 26%),
        #ffffff;
}

.manifest-compact-card.scanning[b-kzx9minwbw] {
    border-color: #bfdbfe;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 26%),
        #ffffff;
}

.manifest-compact-card.arrived[b-kzx9minwbw] {
    border-color: #bbf7d0;
    background:
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.08), transparent 26%),
        #ffffff;
}

.manifest-card-top[b-kzx9minwbw] {
    display: grid;
    grid-template-columns: minmax(190px, 1.05fr) minmax(250px, 1.35fr) minmax(420px, 2fr) auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 12px;
}

.manifest-vessel-block[b-kzx9minwbw] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.manifest-boat-icon[b-kzx9minwbw] {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--jru-slate-100, #f1f5f9);
    color: #334155;
    display: grid;
    place-items: center;
    font-size: 20px;
    flex: 0 0 auto;
}

.manifest-trip-label[b-kzx9minwbw] {
    margin-bottom: 4px;
    color: #0f766e;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.manifest-vessel-block h4[b-kzx9minwbw] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 18px;
    font-weight: 950;
    letter-spacing: -0.035em;
    line-height: 1.1;
}

.manifest-vessel-block p[b-kzx9minwbw] {
    margin: 4px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 850;
}

.manifest-meta-strip[b-kzx9minwbw] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 16px;
    align-items: center;
}

.manifest-meta-strip span[b-kzx9minwbw],
.manifest-count-strip span[b-kzx9minwbw] {
    display: block;
    margin-bottom: 4px;
    color: var(--jru-slate-500, #64748b);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.manifest-meta-strip strong[b-kzx9minwbw] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 13px;
    font-weight: 950;
    line-height: 1.25;
}

.manifest-meta-strip small[b-kzx9minwbw] {
    display: block;
    margin-top: 3px;
    color: var(--jru-slate-500, #64748b);
    font-size: 11px;
    font-weight: 800;
}

.manifest-status-cell[b-kzx9minwbw] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.manifest-status-cell > span[b-kzx9minwbw] {
    margin: 0;
}

.manifest-count-strip[b-kzx9minwbw] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: center;
}

.manifest-count-strip div[b-kzx9minwbw] {
    min-width: 0;
}

.manifest-count-strip strong[b-kzx9minwbw] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 20px;
    font-weight: 950;
    line-height: 1;
}

.manifest-count-strip .success span[b-kzx9minwbw],
.manifest-count-strip .success strong[b-kzx9minwbw] {
    color: #0f766e;
}

.manifest-count-strip .danger span[b-kzx9minwbw],
.manifest-count-strip .danger strong[b-kzx9minwbw] {
    color: #c2410c;
}

.manifest-action-cell[b-kzx9minwbw] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    white-space: nowrap;
}

.manifest-trip-id[b-kzx9minwbw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--jru-slate-100, #f1f5f9);
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    color: var(--jru-slate-600, #475569);
    font-size: 10px;
    font-weight: 900;
}

.manifest-card-print-btn[b-kzx9minwbw] {
    min-height: 34px;
    padding-inline: 14px;
    white-space: nowrap;
}

/* Passenger list inside manifest */

.manifest-passenger-table-wrap[b-kzx9minwbw] {
    overflow-x: auto;
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    border-radius: 14px;
    background: #ffffff;
}

.manifest-passenger-table[b-kzx9minwbw] {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

.manifest-passenger-table th[b-kzx9minwbw] {
    padding: 9px 12px;
    background: var(--jru-slate-50, #f8fafc);
    border-bottom: 1px solid var(--jru-slate-200, #e2e8f0);
    color: var(--jru-slate-500, #64748b);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
}

.manifest-passenger-table td[b-kzx9minwbw] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--jru-slate-100, #f1f5f9);
    color: var(--jru-slate-800, #1e293b);
    font-size: 13px;
    font-weight: 700;
    vertical-align: middle;
}

.manifest-passenger-table tbody tr:last-child td[b-kzx9minwbw] {
    border-bottom: none;
}

.manifest-passenger-table tbody tr:hover[b-kzx9minwbw] {
    background: #f8fffd;
}

.manifest-passenger-table th:first-child[b-kzx9minwbw],
.manifest-passenger-table td:first-child[b-kzx9minwbw] {
    width: 64px;
    text-align: center;
}

.manifest-passenger-table td strong[b-kzx9minwbw] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
}

.manifest-passenger-table td small[b-kzx9minwbw] {
    display: block;
    margin-top: 2px;
    color: var(--jru-slate-500, #64748b);
    font-size: 11px;
    font-weight: 750;
}

.manifest-empty-passenger[b-kzx9minwbw] {
    border: 1px dashed var(--jru-slate-300, #cbd5e1);
    background: var(--jru-slate-50, #f8fafc);
    color: var(--jru-slate-500, #64748b);
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
}

/* Responsive */

@media (max-width: 1500px) {
    .manifest-card-top[b-kzx9minwbw] {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .manifest-action-cell[b-kzx9minwbw] {
        justify-content: flex-start;
    }
}

@media (max-width: 1300px) {
    .vessel-summary-grid[b-kzx9minwbw] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .manifest-count-strip[b-kzx9minwbw] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1200px) {
    .kpi-grid[b-kzx9minwbw] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .ops-dashboard[b-kzx9minwbw] {
        padding: 24px 18px 44px;
    }

    .dashboard-hero[b-kzx9minwbw] {
        flex-direction: column;
    }

    .dashboard-hero h1[b-kzx9minwbw] {
        font-size: 26px;
    }

    .dashboard-section-title[b-kzx9minwbw] {
        align-items: stretch;
        flex-direction: column;
    }

    .operation-date-filter[b-kzx9minwbw] {
        width: 100%;
        justify-content: space-between;
    }

    .operation-date-filter input[type="date"][b-kzx9minwbw] {
        width: 100%;
        min-width: 0;
    }

    .kpi-grid[b-kzx9minwbw] {
        grid-template-columns: 1fr;
    }

    .contractor-table-panel[b-kzx9minwbw],
    .operation-list-panel[b-kzx9minwbw] {
        padding: 18px;
        border-radius: 22px;
    }

    .contractor-table-header[b-kzx9minwbw] {
        flex-direction: column;
    }

    .manifest-legend[b-kzx9minwbw] {
        justify-content: flex-start;
    }

    .vessel-group-header[b-kzx9minwbw] {
        flex-direction: column;
    }

    .vessel-route-pill[b-kzx9minwbw] {
        width: fit-content;
    }

    .vessel-summary-grid[b-kzx9minwbw],
    .manifest-count-strip[b-kzx9minwbw],
    .manifest-meta-strip[b-kzx9minwbw] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .manifest-status-cell[b-kzx9minwbw] {
        justify-content: flex-start;
    }

    .manifest-action-cell[b-kzx9minwbw] {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .manifest-trip-id[b-kzx9minwbw],
    .manifest-card-print-btn[b-kzx9minwbw] {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .split-kpi-row[b-kzx9minwbw] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .split-kpi-row strong[b-kzx9minwbw] {
        font-size: 36px;
    }

    .vessel-summary-grid[b-kzx9minwbw],
    .manifest-count-strip[b-kzx9minwbw],
    .manifest-meta-strip[b-kzx9minwbw] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Admin/MenuPermissions.razor.rz.scp.css */
.menu-permission-page[b-08jbo7nhzn] {
    padding: 28px;
    color: #0f172a;
}

.page-header[b-08jbo7nhzn] {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 22px;
}

.eyebrow[b-08jbo7nhzn] {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0891b2;
    margin-bottom: 6px;
}

.page-header h1[b-08jbo7nhzn] {
    margin: 0;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.page-header p[b-08jbo7nhzn] {
    margin-top: 8px;
    color: #64748b;
    font-size: 15px;
}

.header-stat[b-08jbo7nhzn] {
    min-width: 150px;
    background: linear-gradient(135deg, #01c1b4, #0f766e);
    color: #ffffff;
    border-radius: 22px;
    padding: 18px 20px;
    box-shadow: 0 18px 40px rgba(1, 193, 180, 0.22);
    text-align: right;
}

.header-stat span[b-08jbo7nhzn] {
    display: block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

.header-stat strong[b-08jbo7nhzn] {
    display: block;
    margin-top: 4px;
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
}

.alert[b-08jbo7nhzn] {
    border-radius: 18px;
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 700;
}

.alert-success[b-08jbo7nhzn] {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.alert-error[b-08jbo7nhzn] {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
}

.permission-tabs[b-08jbo7nhzn] {
    display: flex;
    gap: 10px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 8px;
    border-radius: 22px;
    margin-bottom: 18px;
    width: fit-content;
}

.tab-btn[b-08jbo7nhzn] {
    border: 0;
    background: transparent;
    color: #64748b;
    padding: 12px 18px;
    border-radius: 16px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.2s ease;
}

.tab-btn:hover[b-08jbo7nhzn] {
    background: #ffffff;
    color: #0f172a;
}

.tab-btn.active[b-08jbo7nhzn] {
    background: #ffffff;
    color: #0f766e;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
}

.panel[b-08jbo7nhzn] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
}

.panel-toolbar[b-08jbo7nhzn] {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-end;
    margin-bottom: 18px;
}

.panel-toolbar h2[b-08jbo7nhzn] {
    margin: 0;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.panel-toolbar p[b-08jbo7nhzn] {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
}

.select-wrap[b-08jbo7nhzn] {
    min-width: 260px;
}

.select-wrap label[b-08jbo7nhzn] {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b;
}

.form-control[b-08jbo7nhzn],
.search-input[b-08jbo7nhzn] {
    width: 100%;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    border-radius: 16px;
    padding: 12px 14px;
    color: #0f172a;
    font-size: 14px;
    outline: none;
    transition: 0.2s ease;
}

.form-control:focus[b-08jbo7nhzn],
.search-input:focus[b-08jbo7nhzn] {
    border-color: #01c1b4;
    box-shadow: 0 0 0 4px rgba(1, 193, 180, 0.14);
}

.search-wrap[b-08jbo7nhzn] {
    min-width: 320px;
}

.info-box[b-08jbo7nhzn] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 16px 18px;
    margin-bottom: 18px;
}

.info-box strong[b-08jbo7nhzn] {
    display: block;
    font-size: 15px;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 4px;
}

.info-box p[b-08jbo7nhzn] {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

.table-wrap[b-08jbo7nhzn] {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
}

.permission-table[b-08jbo7nhzn] {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
}

.permission-table thead th[b-08jbo7nhzn] {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
    white-space: nowrap;
}

.permission-table tbody td[b-08jbo7nhzn] {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    font-size: 14px;
}

.permission-table tbody tr:last-child td[b-08jbo7nhzn] {
    border-bottom: 0;
}

.permission-table tbody tr:hover[b-08jbo7nhzn] {
    background: #f8fafc;
}

.text-center[b-08jbo7nhzn] {
    text-align: center !important;
}

.menu-cell[b-08jbo7nhzn] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 260px;
}

.menu-icon[b-08jbo7nhzn] {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 14px;
    background: #ecfeff;
    border: 1px solid #cffafe;
    color: #0f766e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.menu-cell strong[b-08jbo7nhzn] {
    display: block;
    font-size: 14px;
    font-weight: 900;
    color: #0f172a;
}

.menu-cell small[b-08jbo7nhzn] {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
}

.section-pill[b-08jbo7nhzn],
.department-pill[b-08jbo7nhzn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.section-pill[b-08jbo7nhzn] {
    background: #eef2ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
}

.department-pill[b-08jbo7nhzn] {
    background: #ecfeff;
    color: #0f766e;
    border: 1px solid #a5f3fc;
}

.url-text[b-08jbo7nhzn] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    color: #475569;
    font-size: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 6px 10px;
    white-space: nowrap;
}

.switch[b-08jbo7nhzn] {
    position: relative;
    display: inline-block;
    width: 54px;
    height: 30px;
}

.switch input[b-08jbo7nhzn] {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch span[b-08jbo7nhzn] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #cbd5e1;
    border-radius: 999px;
    transition: 0.22s ease;
}

.switch span[b-08jbo7nhzn]::before {
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    left: 4px;
    top: 4px;
    background: #ffffff;
    border-radius: 50%;
    transition: 0.22s ease;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.25);
}

.switch input:checked + span[b-08jbo7nhzn] {
    background: #01c1b4;
}

.switch input:checked + span[b-08jbo7nhzn]::before {
    transform: translateX(24px);
}

.form-actions[b-08jbo7nhzn] {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.save-btn[b-08jbo7nhzn] {
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #01c1b4, #0f766e);
    color: #ffffff;
    padding: 13px 20px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(1, 193, 180, 0.22);
    transition: 0.2s ease;
}

.save-btn:hover:not(:disabled)[b-08jbo7nhzn] {
    transform: translateY(-1px);
    box-shadow: 0 18px 36px rgba(1, 193, 180, 0.28);
}

.save-btn:disabled[b-08jbo7nhzn] {
    opacity: 0.6;
    cursor: not-allowed;
}

.empty-state[b-08jbo7nhzn] {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 20px;
    padding: 32px;
    text-align: center;
    color: #64748b;
    font-weight: 800;
}

.empty-state.compact[b-08jbo7nhzn] {
    padding: 18px;
    font-size: 13px;
}

.user-layout[b-08jbo7nhzn] {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.user-list[b-08jbo7nhzn] {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    padding: 12px;
    background: #f8fafc;
    max-height: 720px;
    overflow-y: auto;
}

.user-item[b-08jbo7nhzn] {
    width: 100%;
    border: 1px solid transparent;
    background: #ffffff;
    border-radius: 18px;
    padding: 12px;
    display: flex;
    gap: 12px;
    align-items: center;
    text-align: left;
    cursor: pointer;
    margin-bottom: 10px;
    transition: 0.2s ease;
}

.user-item:last-child[b-08jbo7nhzn] {
    margin-bottom: 0;
}

.user-item:hover[b-08jbo7nhzn] {
    border-color: #99f6e4;
    transform: translateY(-1px);
}

.user-item.active[b-08jbo7nhzn] {
    border-color: #01c1b4;
    background: #ecfeff;
    box-shadow: 0 10px 26px rgba(1, 193, 180, 0.14);
}

.user-avatar[b-08jbo7nhzn] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 16px;
    background: linear-gradient(135deg, #01c1b4, #0f766e);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(15, 118, 110, 0.20);
}

.user-avatar.large[b-08jbo7nhzn] {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
    border-radius: 20px;
    font-size: 18px;
}

.user-item strong[b-08jbo7nhzn] {
    display: block;
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
}

.user-item small[b-08jbo7nhzn] {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
    word-break: break-word;
}

.user-item span[b-08jbo7nhzn] {
    display: inline-flex;
    margin-top: 7px;
    font-size: 11px;
    font-weight: 900;
    color: #0f766e;
    background: #ccfbf1;
    border-radius: 999px;
    padding: 4px 8px;
}

.user-permission-panel[b-08jbo7nhzn] {
    min-width: 0;
}

.selected-user-card[b-08jbo7nhzn] {
    background: linear-gradient(135deg, #f8fafc, #ecfeff);
    border: 1px solid #ccfbf1;
    border-radius: 22px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.selected-user-card h3[b-08jbo7nhzn] {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.selected-user-card p[b-08jbo7nhzn] {
    margin: 4px 0 8px;
    color: #64748b;
    font-size: 14px;
}

.access-pill[b-08jbo7nhzn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 900;
    min-width: 76px;
}

.access-pill.allow[b-08jbo7nhzn] {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.access-pill.deny[b-08jbo7nhzn] {
    background: #ffe4e6;
    color: #be123c;
    border: 1px solid #fda4af;
}

.override-actions[b-08jbo7nhzn] {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.mini-btn[b-08jbo7nhzn] {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.2s ease;
}

.mini-btn:hover:not(:disabled)[b-08jbo7nhzn] {
    background: #f8fafc;
    transform: translateY(-1px);
}

.mini-btn.allow.active[b-08jbo7nhzn] {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.mini-btn.deny.active[b-08jbo7nhzn] {
    background: #ffe4e6;
    border-color: #fda4af;
    color: #be123c;
}

.mini-btn.clear[b-08jbo7nhzn] {
    background: #f8fafc;
}

.mini-btn.clear:not(:disabled)[b-08jbo7nhzn] {
    color: #0f766e;
    border-color: #99f6e4;
}

.mini-btn:disabled[b-08jbo7nhzn] {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 1100px) {
    .user-layout[b-08jbo7nhzn] {
        grid-template-columns: 1fr;
    }

    .user-list[b-08jbo7nhzn] {
        max-height: 360px;
    }
}

@media (max-width: 800px) {
    .menu-permission-page[b-08jbo7nhzn] {
        padding: 18px;
    }

    .page-header[b-08jbo7nhzn] {
        flex-direction: column;
    }

    .header-stat[b-08jbo7nhzn] {
        width: 100%;
        text-align: left;
    }

    .permission-tabs[b-08jbo7nhzn] {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .panel[b-08jbo7nhzn] {
        padding: 18px;
        border-radius: 20px;
    }

    .panel-toolbar[b-08jbo7nhzn] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-wrap[b-08jbo7nhzn],
    .select-wrap[b-08jbo7nhzn] {
        min-width: 0;
        width: 100%;
    }

    .page-header h1[b-08jbo7nhzn] {
        font-size: 28px;
    }

    .permission-table[b-08jbo7nhzn] {
        min-width: 760px;
    }
}
/* /Components/Pages/Admin/NonIsEquipmentRequests.razor.rz.scp.css */
.non-is-approval-page[b-wf2nn75ya4] {
    padding: 28px;
    color: #0f172a;
}

.page-header[b-wf2nn75ya4] {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 22px;
}

.eyebrow[b-wf2nn75ya4] {
    margin-bottom: 6px;
    color: #c2410c;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.page-header h1[b-wf2nn75ya4] {
    margin: 0;
    color: #0f172a;
    font-size: 34px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.page-header p[b-wf2nn75ya4] {
    max-width: 720px;
    margin: 8px 0 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.6;
}

.header-kpis[b-wf2nn75ya4] {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 12px;
    min-width: 430px;
}

.kpi-card[b-wf2nn75ya4] {
    background: #ffffff;
    border: 1px solid #fed7aa;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.kpi-card span[b-wf2nn75ya4] {
    display: block;
    margin-bottom: 8px;
    color: #9a3412;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.kpi-card strong[b-wf2nn75ya4] {
    display: block;
    color: #0f172a;
    font-size: 30px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.filter-bar[b-wf2nn75ya4] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.filter-pill[b-wf2nn75ya4] {
    border: 1px solid #fed7aa;
    background: #ffffff;
    color: #9a3412;
    border-radius: 999px;
    padding: 10px 15px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.18s ease;
}

.filter-pill:hover[b-wf2nn75ya4] {
    background: #fff7ed;
    transform: translateY(-1px);
}

.filter-pill.active[b-wf2nn75ya4] {
    background: #ea580c;
    color: #ffffff;
    border-color: #ea580c;
    box-shadow: 0 12px 24px rgba(234, 88, 12, 0.18);
}

.panel[b-wf2nn75ya4] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.loading-state[b-wf2nn75ya4],
.empty-state[b-wf2nn75ya4],
.empty-detail[b-wf2nn75ya4],
.no-device-panel[b-wf2nn75ya4],
.final-state[b-wf2nn75ya4] {
    padding: 28px;
    color: #64748b;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
}

.empty-state strong[b-wf2nn75ya4],
.empty-detail h2[b-wf2nn75ya4] {
    display: block;
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 18px;
    font-weight: 950;
}

.empty-state span[b-wf2nn75ya4],
.empty-detail p[b-wf2nn75ya4] {
    display: block;
    margin: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 750;
}

.empty-icon[b-wf2nn75ya4] {
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    border-radius: 18px;
    background: #fff7ed;
    color: #c2410c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 950;
}

.approval-layout[b-wf2nn75ya4] {
    display: grid;
    grid-template-columns: 390px minmax(0, 1fr);
    gap: 20px;
    align-items: flex-start;
}

.request-list[b-wf2nn75ya4] {
    padding: 18px;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.details-panel[b-wf2nn75ya4] {
    padding: 22px;
    min-height: 520px;
}

.panel-header[b-wf2nn75ya4] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.panel-header h2[b-wf2nn75ya4] {
    margin: 0;
    color: #0f172a;
    font-size: 21px;
    font-weight: 950;
}

.panel-header p[b-wf2nn75ya4] {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.refresh-btn[b-wf2nn75ya4] {
    border: 1px solid #fed7aa;
    background: #fff7ed;
    color: #c2410c;
    border-radius: 999px;
    padding: 9px 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 950;
    cursor: pointer;
}

.refresh-btn:hover[b-wf2nn75ya4] {
    background: #ffedd5;
}

.request-cards[b-wf2nn75ya4] {
    display: grid;
    gap: 12px;
}

.request-card[b-wf2nn75ya4] {
    width: 100%;
    text-align: left;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    border-radius: 18px;
    padding: 14px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.18s ease;
}

.request-card:hover[b-wf2nn75ya4] {
    border-color: #fed7aa;
    background: #fffaf5;
    transform: translateY(-1px);
}

.request-card.active[b-wf2nn75ya4] {
    border-color: #ea580c;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.12);
    background: #fff7ed;
}

.request-card-top[b-wf2nn75ya4] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.request-card-top strong[b-wf2nn75ya4] {
    display: block;
    color: #0f172a;
    font-size: 14px;
    font-weight: 950;
    line-height: 1.3;
}

.request-card-top span[b-wf2nn75ya4] {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
}

.request-meta[b-wf2nn75ya4] {
    display: grid;
    gap: 5px;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.request-pass-hint[b-wf2nn75ya4] {
    margin-top: 10px;
    border-radius: 12px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 900;
}

.status-badge[b-wf2nn75ya4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap;
}

.status-badge.large[b-wf2nn75ya4] {
    padding: 8px 13px;
    font-size: 12px;
}

.status-badge.warning[b-wf2nn75ya4] {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.success[b-wf2nn75ya4] {
    background: #d1fae5;
    color: #047857;
}

.status-badge.danger[b-wf2nn75ya4] {
    background: #ffe4e6;
    color: #be123c;
}

.status-badge.neutral[b-wf2nn75ya4] {
    background: #e2e8f0;
    color: #475569;
}

.detail-header[b-wf2nn75ya4] {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.contractor-identity[b-wf2nn75ya4] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.avatar-box[b-wf2nn75ya4] {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    background: linear-gradient(135deg, #ea580c, #f97316);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 950;
    box-shadow: 0 14px 28px rgba(249, 115, 22, 0.22);
}

.contractor-identity span[b-wf2nn75ya4] {
    display: block;
    margin-bottom: 4px;
    color: #9a3412;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.contractor-identity strong[b-wf2nn75ya4] {
    display: block;
    color: #0f172a;
    font-size: 20px;
    font-weight: 950;
    line-height: 1.2;
}

.contractor-identity small[b-wf2nn75ya4] {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 13px;
    font-weight: 750;
}

.alert[b-wf2nn75ya4] {
    margin-top: 18px;
    padding: 13px 15px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.5;
}

.alert-success[b-wf2nn75ya4] {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #047857;
}

.alert-error[b-wf2nn75ya4] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.section-divider[b-wf2nn75ya4] {
    height: 1px;
    background: #e2e8f0;
    margin: 22px 0;
}

.detail-grid[b-wf2nn75ya4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.detail-item[b-wf2nn75ya4] {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 16px;
    padding: 13px 14px;
}

.detail-item.full[b-wf2nn75ya4] {
    grid-column: 1 / -1;
}

.detail-item span[b-wf2nn75ya4],
.meta-label[b-wf2nn75ya4] {
    display: block;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.detail-item strong[b-wf2nn75ya4] {
    display: block;
    color: #0f172a;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.45;
    word-break: break-word;
}

.section-heading h3[b-wf2nn75ya4] {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 950;
}

.section-heading p[b-wf2nn75ya4] {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 750;
}

.device-list[b-wf2nn75ya4] {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.device-card[b-wf2nn75ya4] {
    border: 1px solid #fed7aa;
    background: #fffaf5;
    border-radius: 20px;
    padding: 15px;
}

.device-card-header[b-wf2nn75ya4] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 13px;
}

.device-icon[b-wf2nn75ya4] {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    background: #ffedd5;
    color: #c2410c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
}

.device-type[b-wf2nn75ya4] {
    display: block;
    margin-bottom: 3px;
    color: #9a3412;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.device-name[b-wf2nn75ya4] {
    display: block;
    color: #0f172a;
    font-size: 15px;
    font-weight: 950;
}

.device-meta-grid[b-wf2nn75ya4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.device-meta-item[b-wf2nn75ya4],
.device-purpose-box[b-wf2nn75ya4] {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    border-radius: 14px;
    padding: 11px 12px;
}

.meta-value[b-wf2nn75ya4] {
    color: #0f172a;
    font-size: 13px;
    font-weight: 850;
    word-break: break-word;
}

.device-purpose-box[b-wf2nn75ya4] {
    margin-top: 10px;
}

.device-purpose-box p[b-wf2nn75ya4] {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 750;
}

.approval-box[b-wf2nn75ya4] {
    border: 1px solid #fed7aa;
    background: #fff7ed;
    border-radius: 20px;
    padding: 18px;
}

.approval-box h3[b-wf2nn75ya4] {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 950;
}

.approval-box p[b-wf2nn75ya4] {
    margin: 7px 0 14px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 750;
}

.remarks-input[b-wf2nn75ya4] {
    width: 100%;
    min-height: 100px;
    resize: vertical;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    border-radius: 16px;
    padding: 13px 14px;
    color: #0f172a;
    font-family: inherit;
    font-size: 13px;
    font-weight: 750;
    outline: none;
}

.remarks-input:focus[b-wf2nn75ya4] {
    border-color: #f97316;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.12);
}

.action-buttons[b-wf2nn75ya4] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 14px;
}

.btn[b-wf2nn75ya4] {
    border: none;
    border-radius: 15px;
    padding: 12px 18px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
    transition: all 0.18s ease;
}

.btn-primary[b-wf2nn75ya4] {
    background: #ea580c;
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(249, 115, 22, 0.22);
}

.btn-primary:hover:not(:disabled)[b-wf2nn75ya4] {
    background: #c2410c;
    transform: translateY(-1px);
}

.btn-secondary-danger[b-wf2nn75ya4] {
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #be123c;
}

.btn-secondary-danger:hover:not(:disabled)[b-wf2nn75ya4] {
    background: #ffe4e6;
    transform: translateY(-1px);
}

.btn:disabled[b-wf2nn75ya4] {
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
    box-shadow: none;
}

.final-state[b-wf2nn75ya4] {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 18px;
}

.final-state.approved[b-wf2nn75ya4] {
    display: flex;
    text-align: left;
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #047857;
}

.final-state.approved strong[b-wf2nn75ya4] {
    display: block;
    margin-bottom: 4px;
    color: #047857;
    font-size: 15px;
    font-weight: 950;
}

.final-state.approved span[b-wf2nn75ya4] {
    display: block;
    color: #047857;
    font-size: 13px;
    font-weight: 800;
}

.final-state.rejected[b-wf2nn75ya4] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

@media (max-width: 1180px) {
    .page-header[b-wf2nn75ya4] {
        flex-direction: column;
    }

    .header-kpis[b-wf2nn75ya4] {
        width: 100%;
        min-width: 0;
    }

    .approval-layout[b-wf2nn75ya4] {
        grid-template-columns: 1fr;
    }

    .request-list[b-wf2nn75ya4] {
        position: relative;
        top: auto;
        max-height: none;
    }
}

@media (max-width: 720px) {
    .non-is-approval-page[b-wf2nn75ya4] {
        padding: 18px;
    }

    .header-kpis[b-wf2nn75ya4],
    .detail-grid[b-wf2nn75ya4],
    .device-meta-grid[b-wf2nn75ya4] {
        grid-template-columns: 1fr;
    }

    .page-header h1[b-wf2nn75ya4] {
        font-size: 28px;
    }

    .details-panel[b-wf2nn75ya4],
    .request-list[b-wf2nn75ya4] {
        padding: 16px;
        border-radius: 20px;
    }

    .detail-header[b-wf2nn75ya4] {
        flex-direction: column;
    }

    .action-buttons[b-wf2nn75ya4] {
        flex-direction: column;
    }

    .btn[b-wf2nn75ya4] {
        width: 100%;
    }
}
/* /Components/Pages/Admin/SafetyQuestions.razor.rz.scp.css */
.questions-page[b-w6gig959yy] {
    min-height: calc(100vh - 32px);
    padding: 32px 36px;
    background: #f8fafc;
    color: #0f172a;
}

.page-header[b-w6gig959yy] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.eyebrow[b-w6gig959yy] {
    color: #059669;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.page-header h1[b-w6gig959yy] {
    margin: 0;
    font-size: 32px;
    font-weight: 900;
}

.page-header p[b-w6gig959yy] {
    margin: 10px 0 0;
    color: #64748b;
    font-size: 15px;
}

.header-actions[b-w6gig959yy] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.add-btn[b-w6gig959yy],
.save-btn[b-w6gig959yy],
.template-btn[b-w6gig959yy],
.upload-btn[b-w6gig959yy] {
    border: 0;
    border-radius: 14px;
    padding: 13px 18px;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.add-btn[b-w6gig959yy],
.save-btn[b-w6gig959yy] {
    background: #059669;
    color: #ffffff;
}

.add-btn:hover[b-w6gig959yy],
.save-btn:hover[b-w6gig959yy] {
    background: #047857;
}

.template-btn[b-w6gig959yy] {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.template-btn:hover[b-w6gig959yy] {
    background: #d1fae5;
    color: #065f46;
    transform: translateY(-1px);
}

.upload-btn[b-w6gig959yy] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

.upload-btn:hover[b-w6gig959yy] {
    background: #bae6fd;
    color: #075985;
    transform: translateY(-1px);
}

.upload-btn.disabled[b-w6gig959yy] {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}

[b-w6gig959yy] .file-input-hidden {
    position: fixed !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.panel[b-w6gig959yy] {
    background: #ffffff;
    border: 1px solid #dbe7df;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.08);
    margin-bottom: 22px;
}

.form-panel[b-w6gig959yy] {
    border-color: #99f6e4;
    background: #f0fdfa;
}

.form-header[b-w6gig959yy],
.table-header[b-w6gig959yy] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.form-header h2[b-w6gig959yy],
.table-header h2[b-w6gig959yy] {
    margin: 0;
    font-size: 22px;
    font-weight: 900;
}

.table-header p[b-w6gig959yy] {
    margin: 6px 0 0;
    color: #64748b;
}

.close-btn[b-w6gig959yy] {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: #e2e8f0;
    color: #0f172a;
    font-size: 24px;
    cursor: pointer;
}

.close-btn:hover[b-w6gig959yy] {
    background: #cbd5e1;
}

.form-group[b-w6gig959yy] {
    margin-bottom: 18px;
}

.form-group label[b-w6gig959yy] {
    display: block;
    margin-bottom: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 900;
}

.form-control[b-w6gig959yy] {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: #ffffff;
    padding: 13px 14px;
    color: #0f172a;
    font-size: 14px;
    outline: none;
}

.form-control:focus[b-w6gig959yy] {
    border-color: #14b8a6;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.12);
}

.textarea[b-w6gig959yy] {
    min-height: 110px;
    resize: vertical;
}

.options-grid[b-w6gig959yy] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.option-box[b-w6gig959yy] {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    border-radius: 18px;
    padding: 16px;
}

.option-box.correct[b-w6gig959yy] {
    border-color: #10b981;
    background: #ecfdf5;
}

.option-top[b-w6gig959yy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.option-top span[b-w6gig959yy] {
    font-size: 12px;
    font-weight: 900;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.correct-radio[b-w6gig959yy] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #047857;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.form-actions[b-w6gig959yy] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.cancel-btn[b-w6gig959yy] {
    border: 0;
    border-radius: 14px;
    background: #e2e8f0;
    color: #0f172a;
    padding: 13px 20px;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

.cancel-btn:hover[b-w6gig959yy] {
    background: #cbd5e1;
}

.alert[b-w6gig959yy] {
    padding: 14px 16px;
    border-radius: 14px;
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 800;
}

.alert.success[b-w6gig959yy] {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.alert.error[b-w6gig959yy] {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.upload-issues[b-w6gig959yy] {
    margin-bottom: 18px;
    padding: 16px 18px;
    border-radius: 16px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
}

.upload-issues strong[b-w6gig959yy] {
    display: block;
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 8px;
}

.upload-issues ul[b-w6gig959yy] {
    margin: 0;
    padding-left: 20px;
}

.upload-issues li[b-w6gig959yy] {
    margin: 4px 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

/* Import review / staging area */
.review-panel[b-w6gig959yy] {
    border-color: #fbbf24;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    box-shadow: 0 18px 42px rgba(217, 119, 6, 0.12);
}

.review-header[b-w6gig959yy] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(245, 158, 11, 0.28);
}

.review-eyebrow[b-w6gig959yy] {
    color: #b45309;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.review-header h2[b-w6gig959yy] {
    margin: 0;
    color: #78350f;
    font-size: 22px;
    font-weight: 900;
}

.review-header p[b-w6gig959yy] {
    margin: 8px 0 0;
    color: #92400e;
    font-size: 14px;
    font-weight: 700;
}

.review-actions[b-w6gig959yy] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.review-list[b-w6gig959yy] {
    display: grid;
    gap: 14px;
}

.review-question-card[b-w6gig959yy] {
    border: 1px solid rgba(245, 158, 11, 0.42);
    border-radius: 20px;
    padding: 18px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(146, 64, 14, 0.08);
}

.review-question-top[b-w6gig959yy] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.review-number[b-w6gig959yy] {
    display: inline-block;
    margin-bottom: 6px;
    color: #b45309;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.review-question-top h3[b-w6gig959yy] {
    margin: 0;
    color: #0f172a;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.45;
}

.option-letter[b-w6gig959yy] {
    display: inline-block;
    min-width: 24px;
    color: #475569;
    font-size: 12px;
    font-weight: 900;
}

.answer-item.correct .option-letter[b-w6gig959yy] {
    color: #047857;
}

.empty-state[b-w6gig959yy] {
    padding: 40px;
    text-align: center;
    color: #64748b;
    font-weight: 800;
    border: 1px dashed #cbd5e1;
    border-radius: 20px;
    background: #f8fafc;
}

.question-list[b-w6gig959yy] {
    display: grid;
    gap: 18px;
}

.question-card[b-w6gig959yy] {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    padding: 20px;
    background: #ffffff;
}

.question-card.inactive[b-w6gig959yy] {
    background: #f8fafc;
    opacity: 0.78;
}

.question-title-row[b-w6gig959yy] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.question-title-row h3[b-w6gig959yy] {
    margin: 0;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.45;
}

.status-badge[b-w6gig959yy] {
    height: fit-content;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.status-badge.active[b-w6gig959yy] {
    background: #dcfce7;
    color: #15803d;
}

.status-badge.inactive[b-w6gig959yy] {
    background: #e2e8f0;
    color: #475569;
}

.answer-list[b-w6gig959yy] {
    display: grid;
    gap: 8px;
}

.answer-item[b-w6gig959yy] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 14px;
}

.answer-item.correct[b-w6gig959yy] {
    background: #ecfdf5;
    border-color: #bbf7d0;
}

.answer-item strong[b-w6gig959yy] {
    color: #047857;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.question-actions[b-w6gig959yy] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.toggle-btn[b-w6gig959yy],
.delete-btn[b-w6gig959yy] {
    border: 0;
    border-radius: 13px;
    padding: 11px 15px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.toggle-btn[b-w6gig959yy] {
    background: #e0f2fe;
    color: #0369a1;
}

.toggle-btn:hover[b-w6gig959yy] {
    background: #bae6fd;
}

.delete-btn[b-w6gig959yy] {
    background: #fee2e2;
    color: #b91c1c;
}

.delete-btn:hover[b-w6gig959yy] {
    background: #fecaca;
}

@media (max-width: 760px) {
    .questions-page[b-w6gig959yy] {
        padding: 24px 18px;
    }

    .page-header[b-w6gig959yy],
    .question-title-row[b-w6gig959yy],
    .form-header[b-w6gig959yy],
    .table-header[b-w6gig959yy],
    .review-header[b-w6gig959yy],
    .review-question-top[b-w6gig959yy] {
        flex-direction: column;
    }

    .header-actions[b-w6gig959yy] {
        width: 100%;
        justify-content: stretch;
    }

    .add-btn[b-w6gig959yy],
    .template-btn[b-w6gig959yy],
    .upload-btn[b-w6gig959yy] {
        width: 100%;
        text-align: center;
    }

    .review-actions[b-w6gig959yy] {
        width: 100%;
        flex-direction: column;
    }

    .review-actions .cancel-btn[b-w6gig959yy],
    .review-actions .save-btn[b-w6gig959yy] {
        width: 100%;
    }

    .options-grid[b-w6gig959yy] {
        grid-template-columns: 1fr;
    }

    .form-actions[b-w6gig959yy],
    .question-actions[b-w6gig959yy] {
        flex-direction: column;
    }
}
/* /Components/Pages/Admin/SafetyVideos.razor.rz.scp.css */
.video-admin-page[b-a6jkwrj0vb] {
    padding: 28px;
    max-width: 1500px;
    margin: 0 auto;
}

.page-header[b-a6jkwrj0vb] {
    margin-bottom: 24px;
}

.eyebrow[b-a6jkwrj0vb] {
    display: block;
    color: #0284c7;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}

.page-header h1[b-a6jkwrj0vb] {
    margin: 0;
    color: #0f172a;
    font-size: 28px;
    font-weight: 900;
}

.page-header p[b-a6jkwrj0vb] {
    margin: 8px 0 0;
    color: #64748b;
}

.alert[b-a6jkwrj0vb] {
    padding: 14px 16px;
    margin-bottom: 18px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 750;
}

.alert.success[b-a6jkwrj0vb] {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #047857;
}

.alert.error[b-a6jkwrj0vb] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.loading-card[b-a6jkwrj0vb] {
    padding: 30px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    color: #64748b;
    text-align: center;
}

.video-grid[b-a6jkwrj0vb] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.video-card[b-a6jkwrj0vb] {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
}

.video-card-header[b-a6jkwrj0vb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
}

.video-card-header h2[b-a6jkwrj0vb] {
    margin: 7px 0 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
}

.audience-badge[b-a6jkwrj0vb],
.active-badge[b-a6jkwrj0vb] {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.audience-badge[b-a6jkwrj0vb] {
    background: #eff6ff;
    color: #1d4ed8;
}

.active-badge[b-a6jkwrj0vb] {
    background: #ecfdf5;
    color: #047857;
}

.preview-wrapper[b-a6jkwrj0vb] {
    background: #0f172a;
}

.video-preview[b-a6jkwrj0vb] {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000000;
}

.video-missing[b-a6jkwrj0vb] {
    min-height: 190px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
    background: #f8fafc;
    color: #64748b;
}

.video-missing strong[b-a6jkwrj0vb] {
    color: #334155;
}

.video-missing span[b-a6jkwrj0vb] {
    font-size: 12px;
}

.current-info[b-a6jkwrj0vb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #e2e8f0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.current-info > div[b-a6jkwrj0vb] {
    min-width: 0;
    padding: 12px 14px;
    background: #f8fafc;
}

.current-info span[b-a6jkwrj0vb] {
    display: block;
    margin-bottom: 3px;
    color: #64748b;
    font-size: 9px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.current-info strong[b-a6jkwrj0vb] {
    display: block;
    overflow: hidden;
    color: #334155;
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-panel[b-a6jkwrj0vb] {
    padding: 18px 20px;
}

.upload-panel-title[b-a6jkwrj0vb] {
    margin-bottom: 14px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
}

.upload-panel label[b-a6jkwrj0vb] {
    display: block;
    margin: 12px 0 6px;
    color: #475569;
    font-size: 11px;
    font-weight: 850;
}

.text-input[b-a6jkwrj0vb],
.file-input[b-a6jkwrj0vb] {
    box-sizing: border-box;
    width: 100%;
}

.text-input[b-a6jkwrj0vb] {
    height: 42px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    outline: none;
    background: #ffffff;
    color: #0f172a;
}

.text-input:focus[b-a6jkwrj0vb] {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, .08);
}

.file-input[b-a6jkwrj0vb] {
    padding: 9px;
    border: 1px dashed #94a3b8;
    border-radius: 10px;
    background: #f8fafc;
}

.selected-file[b-a6jkwrj0vb] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 9px;
    padding: 9px 10px;
    border-radius: 9px;
    background: #eff6ff;
    color: #1e40af;
    font-size: 10px;
}

.selected-file strong[b-a6jkwrj0vb] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-btn[b-a6jkwrj0vb] {
    width: 100%;
    min-height: 43px;
    margin-top: 14px;
    border: 0;
    border-radius: 11px;
    background: #0284c7;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.upload-btn:hover:not(:disabled)[b-a6jkwrj0vb] {
    background: #0369a1;
}

.upload-btn:disabled[b-a6jkwrj0vb] {
    opacity: .5;
    cursor: not-allowed;
}

.history-section[b-a6jkwrj0vb] {
    border-top: 1px solid #e2e8f0;
}

.history-toggle[b-a6jkwrj0vb] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 20px;
    border: 0;
    background: #f8fafc;
    color: #475569;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
}

.history-toggle strong[b-a6jkwrj0vb] {
    min-width: 25px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
}

.history-list[b-a6jkwrj0vb] {
    padding: 8px 14px 14px;
}

.history-item[b-a6jkwrj0vb] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 6px;
    border-bottom: 1px solid #edf2f7;
}

.history-item:last-child[b-a6jkwrj0vb] {
    border-bottom: 0;
}

.history-item strong[b-a6jkwrj0vb],
.history-item span[b-a6jkwrj0vb] {
    display: block;
}

.history-item strong[b-a6jkwrj0vb] {
    color: #334155;
    font-size: 11px;
}

.history-item span[b-a6jkwrj0vb] {
    margin-top: 2px;
    color: #64748b;
    font-size: 10px;
}

.history-meta[b-a6jkwrj0vb] {
    flex: 0 0 auto;
}

.mini-active[b-a6jkwrj0vb] {
    padding: 4px 7px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857 !important;
}

.history-empty[b-a6jkwrj0vb] {
    padding: 12px;
    color: #94a3b8;
    text-align: center;
    font-size: 11px;
}

@media (max-width: 1100px) {
    .video-grid[b-a6jkwrj0vb] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .video-admin-page[b-a6jkwrj0vb] {
        padding: 16px 12px;
    }

    .current-info[b-a6jkwrj0vb] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Admin/Security/TwoFactorSettings.razor.rz.scp.css */
.security-page[b-nf22dcmgpq] {
    max-width: 1480px;
    margin: 0 auto;
    padding: 26px 32px 36px;
}

.security-header[b-nf22dcmgpq] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.security-header > div:first-child[b-nf22dcmgpq] {
    max-width: 760px;
}

.security-eyebrow[b-nf22dcmgpq] {
    display: inline-block;
    margin-bottom: 7px;
    color: #0f9f95;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.security-header h1[b-nf22dcmgpq] {
    margin: 0;
    color: #101828;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.security-header p[b-nf22dcmgpq] {
    max-width: 700px;
    margin: 9px 0 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.55;
}


/* ============================================================
   SUMMARY
   ============================================================ */

.security-summary[b-nf22dcmgpq] {
    min-width: 215px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 15px;
    border: 1px solid #cdeee9;
    border-radius: 14px;
    background: #f0fdf9;
}

.summary-value[b-nf22dcmgpq] {
    min-width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #139c93;
    color: #ffffff;
    font-size: 20px;
    font-weight: 850;
}

.summary-copy[b-nf22dcmgpq] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.summary-copy strong[b-nf22dcmgpq] {
    color: #115e59;
    font-size: 13px;
    font-weight: 800;
}

.summary-copy span[b-nf22dcmgpq] {
    color: #5b7472;
    font-size: 11px;
}


/* ============================================================
   CARD
   ============================================================ */

.security-card[b-nf22dcmgpq] {
    position: relative;
    overflow: hidden;
    border: 1px solid #e4e7ec;
    border-radius: 18px;
    background: #ffffff;
    padding: 22px;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.03),
        0 8px 24px rgba(16, 24, 40, 0.045);
}

.security-card[b-nf22dcmgpq]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 84px;
    height: 3px;
    background: #13a89e;
}

.card-heading[b-nf22dcmgpq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eef2f6;
}

.card-heading h2[b-nf22dcmgpq] {
    margin: 0;
    color: #101828;
    font-size: 18px;
    font-weight: 750;
}

.card-heading p[b-nf22dcmgpq] {
    margin: 5px 0 0;
    color: #7a8699;
    font-size: 13px;
}

.saving-indicator[b-nf22dcmgpq] {
    color: #0f8f87;
    font-size: 12px;
    font-weight: 750;
}


/* ============================================================
   ROLE TABLE
   ============================================================ */

.role-table[b-nf22dcmgpq] {
    overflow: hidden;
    border: 1px solid #edf0f4;
    border-radius: 12px;
}

.role-table-header[b-nf22dcmgpq],
.role-row[b-nf22dcmgpq] {
    display: grid;
    grid-template-columns:
        minmax(240px, 1.5fr)
        minmax(150px, 0.7fr)
        minmax(220px, 1fr)
        160px;
    gap: 18px;
    align-items: center;
}

.role-table-header[b-nf22dcmgpq] {
    padding: 11px 15px;
    background: #f8fafc;
    color: #667085;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.role-row[b-nf22dcmgpq] {
    min-height: 72px;
    padding: 12px 15px;
    border-top: 1px solid #edf0f4;
    background: #ffffff;
}

.role-row:hover[b-nf22dcmgpq] {
    background: #fbfefd;
}

.role-identity[b-nf22dcmgpq] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.role-icon[b-nf22dcmgpq] {
    width: 40px;
    height: 40px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 11px;
    background: #eef9f7;
    color: #0f8f87;
    font-size: 12px;
    font-weight: 850;
}

.role-identity strong[b-nf22dcmgpq] {
    display: block;
    color: #182230;
    font-size: 13px;
    font-weight: 800;
}

.role-identity span[b-nf22dcmgpq] {
    display: block;
    margin-top: 3px;
    color: #8490a3;
    font-size: 11px;
}

.updated-info strong[b-nf22dcmgpq] {
    display: block;
    color: #475467;
    font-size: 12px;
    font-weight: 700;
}

.updated-info span[b-nf22dcmgpq] {
    display: block;
    margin-top: 3px;
    color: #98a2b3;
    font-size: 11px;
}

.action-heading[b-nf22dcmgpq],
.toggle-cell[b-nf22dcmgpq] {
    text-align: center;
}


/* ============================================================
   STATUS
   ============================================================ */

.status-badge[b-nf22dcmgpq] {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.status-badge.enabled[b-nf22dcmgpq] {
    border: 1px solid #c8f1e5;
    background: #eafaf5;
    color: #087f6a;
}

.status-badge.disabled[b-nf22dcmgpq] {
    border: 1px solid #e4e7ec;
    background: #f8fafc;
    color: #667085;
}


/* ============================================================
   TOGGLE
   ============================================================ */

.toggle-switch[b-nf22dcmgpq] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.toggle-switch input[b-nf22dcmgpq] {
    width: 0;
    height: 0;
    opacity: 0;
}

.toggle-slider[b-nf22dcmgpq] {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #d0d5dd;
    transition: 0.2s ease;
}

.toggle-slider[b-nf22dcmgpq]::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.25);
    transition: 0.2s ease;
}

.toggle-switch input:checked + .toggle-slider[b-nf22dcmgpq] {
    background: #139c93;
}

.toggle-switch input:checked + .toggle-slider[b-nf22dcmgpq]::before {
    transform: translateX(20px);
}

.toggle-switch input:disabled + .toggle-slider[b-nf22dcmgpq] {
    opacity: 0.55;
    cursor: not-allowed;
}


/* ============================================================
   INFO
   ============================================================ */

.security-info-card[b-nf22dcmgpq] {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid #d7e7fa;
    border-radius: 14px;
    background: #f6f9fe;
}

.info-icon[b-nf22dcmgpq] {
    width: 38px;
    height: 38px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 10px;
    background: #e8f1ff;
    color: #2457a6;
    font-size: 17px;
}

.security-info-card strong[b-nf22dcmgpq] {
    color: #2457a6;
    font-size: 13px;
    font-weight: 800;
}

.security-info-card p[b-nf22dcmgpq] {
    max-width: 900px;
    margin: 5px 0 0;
    color: #5d6b7e;
    font-size: 12px;
    line-height: 1.55;
}


/* ============================================================
   POLICY
   ============================================================ */

.policy-grid[b-nf22dcmgpq] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 14px;
}

.policy-card[b-nf22dcmgpq] {
    padding: 13px 15px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #ffffff;
}

.policy-card span[b-nf22dcmgpq] {
    display: block;
    color: #98a2b3;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
}

.policy-card strong[b-nf22dcmgpq] {
    display: block;
    margin-top: 5px;
    color: #344054;
    font-size: 13px;
    font-weight: 750;
}


/* ============================================================
   ALERTS
   ============================================================ */

.alert[b-nf22dcmgpq] {
    margin-bottom: 16px;
    padding: 10px 13px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 650;
}

.alert-success[b-nf22dcmgpq] {
    border: 1px solid #c8f1e5;
    background: #edfdf7;
    color: #087f6a;
}

.alert-error[b-nf22dcmgpq] {
    border: 1px solid #ffd4cf;
    background: #fff3f2;
    color: #b42318;
}

.empty-state[b-nf22dcmgpq] {
    padding: 34px;
    text-align: center;
    color: #667085;
    font-size: 13px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1050px) {
    .security-header[b-nf22dcmgpq] {
        align-items: flex-start;
        flex-direction: column;
    }

    .role-table-header[b-nf22dcmgpq] {
        display: none;
    }

    .role-row[b-nf22dcmgpq] {
        grid-template-columns: 1fr auto;
        gap: 12px;
    }

    .role-row > :nth-child(2)[b-nf22dcmgpq],
    .role-row > :nth-child(3)[b-nf22dcmgpq] {
        grid-column: 1;
    }

    .toggle-cell[b-nf22dcmgpq] {
        grid-column: 2;
        grid-row: 1;
    }

    .policy-grid[b-nf22dcmgpq] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .security-page[b-nf22dcmgpq] {
        padding: 20px 18px 28px;
    }

    .security-header h1[b-nf22dcmgpq] {
        font-size: 27px;
    }

    .security-summary[b-nf22dcmgpq] {
        width: 100%;
        box-sizing: border-box;
    }

    .security-card[b-nf22dcmgpq] {
        padding: 17px;
        border-radius: 14px;
    }

    .role-row[b-nf22dcmgpq] {
        padding: 14px 12px;
    }

    .policy-grid[b-nf22dcmgpq] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Components/Pages/Admin/StaffApprovals.razor.rz.scp.css */
/* =========================================================
   StaffApprovals.razor.css
   Page-specific styles only.

   Shared reusable styles are handled by:
   wwwroot/css/jru-shared.css

   This file now keeps only:
   - staff approval page tweaks
   - staff KPI variants
   - staff table identity/photo styling
   - modal profile layout
   - status-specific colors
   ========================================================= */

/* =========================================================
   Page Shell
   ========================================================= */

.staff-approvals-page[b-099449ihqz] {
    padding: 28px;
    color: var(--jru-slate-900, #0f172a);
}

/* =========================================================
   Header
   ========================================================= */

.page-header[b-099449ihqz] {
    margin-bottom: 22px;
}

.header-stat[b-099449ihqz] {
    min-width: 140px;
    background: linear-gradient(135deg, #01C1B4, #0f766e);
    color: #ffffff;
    border-radius: 22px;
    padding: 16px 18px;
    box-shadow: 0 18px 40px rgba(1, 193, 180, 0.24);
    text-align: right;
}

.header-stat span[b-099449ihqz] {
    display: block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.9;
}

.header-stat strong[b-099449ihqz] {
    display: block;
    margin-top: 4px;
    font-size: 32px;
    font-weight: 950;
    line-height: 1;
}

/* =========================================================
   KPI Cards
   ========================================================= */

.kpi-grid[b-099449ihqz] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.kpi-card[b-099449ihqz] {
    min-height: 112px;
    font-family: inherit;
    text-align: left;
}

.kpi-card span[b-099449ihqz] {
    display: block;
    margin-bottom: 8px;
    color: var(--jru-slate-500, #64748b);
    font-size: 13px;
    font-weight: 850;
}

.kpi-card strong[b-099449ihqz] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 32px;
    font-weight: 950;
    line-height: 1;
}

.kpi-card.active[b-099449ihqz] {
    border-color: #01C1B4;
    box-shadow:
        0 0 0 4px rgba(1, 193, 180, 0.14),
        0 18px 44px rgba(1, 193, 180, 0.16);
}

.kpi-card.warning.active[b-099449ihqz],
.kpi-card.warning:hover[b-099449ihqz] {
    border-color: #f59e0b;
}

.kpi-card.success.active[b-099449ihqz],
.kpi-card.success:hover[b-099449ihqz] {
    border-color: #10b981;
}

.kpi-card.danger.active[b-099449ihqz],
.kpi-card.danger:hover[b-099449ihqz] {
    border-color: #ef4444;
}

/* =========================================================
   Panel / Toolbar
   ========================================================= */

.panel-toolbar h2[b-099449ihqz] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 20px;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.panel-toolbar p[b-099449ihqz] {
    margin: 5px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 13px;
}

.search-wrap[b-099449ihqz] {
    width: min(320px, 100%);
}

.search-input[b-099449ihqz] {
    background: var(--jru-slate-50, #f8fafc);
    font-weight: 650;
}

.search-input:focus[b-099449ihqz] {
    background: #ffffff;
}

/* =========================================================
   Empty State
   ========================================================= */

.empty-state[b-099449ihqz] {
    border: 1px dashed var(--jru-slate-300, #cbd5e1);
    border-radius: 18px;
    background: var(--jru-slate-50, #f8fafc);
    font-weight: 750;
}

/* =========================================================
   Table
   ========================================================= */

.table-wrap[b-099449ihqz] {
    overflow-x: auto;
}

.staff-table[b-099449ihqz] {
    min-width: 1080px;
}

.staff-table tbody tr:hover[b-099449ihqz] {
    background: var(--jru-slate-50, #f8fafc);
}

.text-right[b-099449ihqz] {
    text-align: right !important;
}

.row-no[b-099449ihqz] {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #ecfeff;
    color: #0f766e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 950;
}

/* =========================================================
   Staff Cell / Photo
   ========================================================= */

.staff-cell[b-099449ihqz] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 240px;
}

.staff-photo[b-099449ihqz] {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, #01C1B4, #0f766e);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 950;
}

.staff-photo img[b-099449ihqz] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.staff-cell strong[b-099449ihqz] {
    display: block;
    margin-bottom: 3px;
    color: var(--jru-slate-900, #0f172a);
    font-size: 14px;
    font-weight: 900;
}

.staff-cell small[b-099449ihqz] {
    display: block;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 650;
}

.mono[b-099449ihqz] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    font-weight: 800;
    color: var(--jru-slate-700, #334155);
}

/* =========================================================
   Pills / Status
   ========================================================= */

.department-pill[b-099449ihqz] {
    font-size: 11px;
    font-weight: 900;
}

.status-pill[b-099449ihqz] {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}

.status-pending[b-099449ihqz] {
    color: #b45309;
    background: #fffbeb;
    border-color: #fcd34d;
}

.status-approved[b-099449ihqz] {
    color: #047857;
    background: #ecfdf5;
    border-color: #86efac;
}

.status-rejected[b-099449ihqz] {
    color: #be123c;
    background: #fff1f2;
    border-color: #fda4af;
}

.status-video[b-099449ihqz] {
    color: #0369a1;
    background: #f0f9ff;
    border-color: #7dd3fc;
}

.status-pass[b-099449ihqz] {
    color: #0f766e;
    background: #f0fdfa;
    border-color: #5eead4;
}

.status-default[b-099449ihqz] {
    color: var(--jru-slate-600, #475569);
    background: var(--jru-slate-50, #f8fafc);
    border-color: var(--jru-slate-300, #cbd5e1);
}

/* =========================================================
   Action Buttons
   ========================================================= */

.view-btn[b-099449ihqz] {
    border-color: #99f6e4;
    background: #f0fdfa;
    color: #0f766e;
    border-radius: 999px;
}

.view-btn:hover[b-099449ihqz] {
    background: #ccfbf1;
    color: #0f766e;
}

.approve-btn[b-099449ihqz] {
    box-shadow: 0 14px 30px rgba(1, 193, 180, 0.24);
}

.reject-btn[b-099449ihqz] {
    border: 1px solid #fda4af;
}

.approve-btn:disabled[b-099449ihqz],
.reject-btn:disabled[b-099449ihqz] {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

/* =========================================================
   Review Modal
   ========================================================= */

.modal-backdrop[b-099449ihqz] {
    z-index: 90;
    padding: 22px;
}

.review-modal[b-099449ihqz] {
    width: min(760px, 100%);
    max-height: 92vh;
    border-radius: 28px;
}

.modal-header h2[b-099449ihqz] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 25px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.modal-header p[b-099449ihqz] {
    margin: 6px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 14px;
}

.close-btn[b-099449ihqz] {
    border-radius: 999px;
}

/* =========================================================
   Profile Section
   ========================================================= */

.profile-section[b-099449ihqz] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, #f0fdfa, #f8fafc);
    border: 1px solid #ccfbf1;
    margin-bottom: 18px;
}

.profile-photo[b-099449ihqz] {
    width: 110px;
    height: 110px;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(135deg, #01C1B4, #0f766e);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 950;
    flex-shrink: 0;
}

.profile-photo img[b-099449ihqz] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info h3[b-099449ihqz] {
    margin: 10px 0 4px;
    color: var(--jru-slate-900, #0f172a);
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.profile-info p[b-099449ihqz] {
    margin: 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 14px;
}

/* =========================================================
   Details / Remarks
   ========================================================= */

.details-grid[b-099449ihqz] {
    gap: 14px;
    margin-bottom: 18px;
}

.detail-card span[b-099449ihqz] {
    font-size: 12px;
    font-weight: 850;
}

.detail-card strong[b-099449ihqz] {
    overflow-wrap: anywhere;
}

.previous-remark[b-099449ihqz] {
    margin-bottom: 18px;
}

.previous-remark strong[b-099449ihqz] {
    display: block;
    margin-bottom: 5px;
    color: #92400e;
    font-size: 13px;
    font-weight: 950;
}

.previous-remark p[b-099449ihqz] {
    margin: 0;
    color: #78350f;
    font-size: 13px;
    line-height: 1.5;
}

.remarks-group[b-099449ihqz] {
    margin-top: 2px;
}

.remarks-input[b-099449ihqz] {
    border-radius: 18px;
    font-family: inherit;
}

/* =========================================================
   Modal Actions
   ========================================================= */

.modal-actions[b-099449ihqz] {
    padding: 18px 24px 24px;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 920px) {
    .kpi-grid[b-099449ihqz] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .panel-toolbar[b-099449ihqz] {
        flex-direction: column;
    }

    .search-wrap[b-099449ihqz] {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .staff-approvals-page[b-099449ihqz] {
        padding: 18px 12px;
    }

    .page-header[b-099449ihqz] {
        flex-direction: column;
    }

    .header-stat[b-099449ihqz] {
        width: 100%;
        text-align: left;
    }

    .kpi-grid[b-099449ihqz] {
        grid-template-columns: 1fr;
    }

    .details-grid[b-099449ihqz] {
        grid-template-columns: 1fr;
    }

    .profile-section[b-099449ihqz] {
        flex-direction: column;
        align-items: flex-start;
    }

    .modal-actions[b-099449ihqz] {
        flex-direction: column-reverse;
    }

    .approve-btn[b-099449ihqz],
    .reject-btn[b-099449ihqz],
    .secondary-btn[b-099449ihqz] {
        width: 100%;
    }
}
/* /Components/Pages/Admin/SystemBackup.razor.rz.scp.css */
.backup-page[b-8384utty43] {
    max-width: 1500px;
    margin: 0 auto;
    padding: 28px;
}

.page-header[b-8384utty43] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 22px;
}

.eyebrow[b-8384utty43] {
    display: block;
    margin-bottom: 6px;
    color: #0284c7;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.page-header h1[b-8384utty43] {
    margin: 0;
    color: #0f172a;
    font-size: 28px;
    font-weight: 900;
}

.page-header p[b-8384utty43] {
    margin: 7px 0 0;
    color: #64748b;
}

.header-actions[b-8384utty43] {
    flex: 0 0 auto;
}

.primary-btn[b-8384utty43],
.secondary-btn[b-8384utty43] {
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.primary-btn[b-8384utty43] {
    background: #0284c7;
    color: #ffffff;
}

.primary-btn:hover:not(:disabled)[b-8384utty43] {
    background: #0369a1;
}

.secondary-btn[b-8384utty43] {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
}

.secondary-btn:hover:not(:disabled)[b-8384utty43] {
    background: #f8fafc;
}

.primary-btn:disabled[b-8384utty43],
.secondary-btn:disabled[b-8384utty43] {
    opacity: .55;
    cursor: not-allowed;
}

.alert[b-8384utty43] {
    padding: 14px 16px;
    margin-bottom: 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
}

.alert.success[b-8384utty43] {
    border: 1px solid #bbf7d0;
    background: #ecfdf5;
    color: #047857;
}

.alert.error[b-8384utty43] {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.summary-grid[b-8384utty43] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.summary-card[b-8384utty43] {
    min-width: 0;
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .04);
}

.summary-card span[b-8384utty43] {
    display: block;
    margin-bottom: 7px;
    color: #64748b;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.summary-card strong[b-8384utty43] {
    display: block;
    overflow: hidden;
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-card strong.path-value[b-8384utty43] {
    font-size: 13px;
}

.summary-card small[b-8384utty43] {
    display: block;
    margin-top: 7px;
    color: #94a3b8;
    font-size: 10px;
    line-height: 1.4;
}

.backup-panel[b-8384utty43] {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 5px 20px rgba(15, 23, 42, .04);
}

.panel-header[b-8384utty43] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 18px 20px;
    border-bottom: 1px solid #e2e8f0;
}

.panel-header span[b-8384utty43] {
    color: #0284c7;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.panel-header h2[b-8384utty43] {
    margin: 3px 0 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
}

.panel-header p[b-8384utty43] {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 11px;
}

.table-wrap[b-8384utty43] {
    overflow-x: auto;
}

.backup-table[b-8384utty43] {
    width: 100%;
    border-collapse: collapse;
}

.backup-table th[b-8384utty43],
.backup-table td[b-8384utty43] {
    padding: 12px 14px;
    border-bottom: 1px solid #edf2f7;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.backup-table th[b-8384utty43] {
    background: #f8fafc;
    color: #64748b;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .45px;
    text-transform: uppercase;
}

.backup-table td[b-8384utty43] {
    color: #334155;
    font-size: 11px;
}

.backup-table tbody tr:last-child td[b-8384utty43] {
    border-bottom: 0;
}

.file-cell[b-8384utty43] {
    min-width: 280px;
    max-width: 480px;
}

.file-cell strong[b-8384utty43] {
    display: block;
    overflow: hidden;
    color: #0f172a;
    font-size: 11px;
    text-overflow: ellipsis;
}

.file-cell span[b-8384utty43] {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    color: #94a3b8;
    font-size: 9px;
    text-overflow: ellipsis;
}

.status-pill[b-8384utty43] {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
}

.status-pill.valid[b-8384utty43] {
    background: #ecfdf5;
    color: #047857;
}

.status-pill.expired[b-8384utty43] {
    background: #fef2f2;
    color: #b91c1c;
}

.empty-state[b-8384utty43] {
    padding: 40px 20px;
    color: #64748b;
    text-align: center;
}

.empty-state strong[b-8384utty43] {
    display: block;
    margin-bottom: 6px;
    color: #334155;
}

.empty-state p[b-8384utty43] {
    margin: 0;
    font-size: 12px;
}

.info-panel[b-8384utty43] {
    display: flex;
    gap: 14px;
    margin-top: 18px;
    padding: 18px;
    border: 1px solid #bfdbfe;
    border-radius: 15px;
    background: #eff6ff;
}

.info-icon[b-8384utty43] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0284c7;
    color: #ffffff;
    font-weight: 900;
}

.info-panel strong[b-8384utty43] {
    color: #1e3a8a;
}

.info-panel p[b-8384utty43] {
    margin: 5px 0 0;
    color: #475569;
    font-size: 11px;
    line-height: 1.55;
}

.info-panel code[b-8384utty43] {
    font-size: 10px;
}

.download-btn[b-8384utty43] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-width: 108px;
    padding: 8px 14px;

    border: 1px solid #d7e2ec;
    border-radius: 10px;

    background: #ffffff;
    color: #0f172a;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.download-btn:hover[b-8384utty43] {
    background: #eef8ff;
    border-color: #0ea5e9;
    color: #0284c7;

    text-decoration: none;

    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.08);

    transform: translateY(-1px);
}

.download-btn:active[b-8384utty43] {
    transform: translateY(0);
    box-shadow: none;
}

.download-icon[b-8384utty43] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    border-radius: 6px;

    background: #e0f2fe;
    color: #0284c7;

    font-size: 15px;
    font-weight: 900;
}

@media (max-width: 1100px) {
    .summary-grid[b-8384utty43] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .backup-page[b-8384utty43] {
        padding: 16px 12px;
    }

    .page-header[b-8384utty43],
    .panel-header[b-8384utty43] {
        flex-direction: column;
        align-items: stretch;
    }

    .summary-grid[b-8384utty43] {
        grid-template-columns: 1fr;
    }

    .primary-btn[b-8384utty43],
    .secondary-btn[b-8384utty43] {
        width: 100%;
    }
}
/* /Components/Pages/Admin/Vessels.razor.rz.scp.css */
.vessel-page[b-fpsqycrp6l] {
    padding: 28px;
    color: #0f172a;
}

.page-header[b-fpsqycrp6l] {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 22px;
}

.eyebrow[b-fpsqycrp6l] {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0891b2;
    margin-bottom: 6px;
}

.page-header h1[b-fpsqycrp6l] {
    margin: 0;
    font-size: 30px;
    font-weight: 850;
}

.page-header p[b-fpsqycrp6l] {
    margin: 8px 0 0;
    color: #64748b;
}

.panel[b-fpsqycrp6l] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
    margin-bottom: 20px;
}

.form-panel h2[b-fpsqycrp6l],
.panel-header h2[b-fpsqycrp6l] {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

.panel-header[b-fpsqycrp6l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.panel-header span[b-fpsqycrp6l] {
    font-size: 13px;
    color: #64748b;
    font-weight: 700;
}

.form-grid[b-fpsqycrp6l] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

label[b-fpsqycrp6l] {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: #475569;
    margin-bottom: 7px;
}

input[b-fpsqycrp6l],
select[b-fpsqycrp6l] {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    padding: 11px 13px;
    font-size: 14px;
    outline: none;
    background: #ffffff;
}

input:focus[b-fpsqycrp6l],
select:focus[b-fpsqycrp6l] {
    border-color: #0891b2;
    box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.12);
}

.form-actions[b-fpsqycrp6l] {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn-primary[b-fpsqycrp6l],
.btn-secondary[b-fpsqycrp6l] {
    border: none;
    border-radius: 14px;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.btn-primary[b-fpsqycrp6l] {
    background: #0891b2;
    color: #ffffff;
}

.btn-secondary[b-fpsqycrp6l] {
    background: #e2e8f0;
    color: #334155;
}

.btn-mini[b-fpsqycrp6l] {
    border: none;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    background: #e0f2fe;
    color: #0369a1;
    margin-left: 6px;
}

.btn-mini.danger[b-fpsqycrp6l] {
    background: #fee2e2;
    color: #b91c1c;
}

.alert-success[b-fpsqycrp6l],
.alert-error[b-fpsqycrp6l] {
    padding: 12px 14px;
    border-radius: 16px;
    margin-bottom: 18px;
    font-weight: 700;
}

.alert-success[b-fpsqycrp6l] {
    background: #ecfeff;
    color: #155e75;
    border: 1px solid #a5f3fc;
}

.alert-error[b-fpsqycrp6l] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.empty-state[b-fpsqycrp6l] {
    padding: 34px;
    text-align: center;
    color: #64748b;
    font-weight: 700;
    background: #f8fafc;
    border-radius: 18px;
}

table[b-fpsqycrp6l] {
    width: 100%;
    border-collapse: collapse;
}

th[b-fpsqycrp6l] {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b;
    padding: 12px;
    border-bottom: 1px solid #e2e8f0;
}

td[b-fpsqycrp6l] {
    padding: 14px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.action-col[b-fpsqycrp6l] {
    text-align: right;
    white-space: nowrap;
}

.status-pill[b-fpsqycrp6l] {
    display: inline-flex;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.status-active[b-fpsqycrp6l] {
    background: #f0fdf4;
    color: #15803d;
}

.status-inactive[b-fpsqycrp6l] {
    background: #f1f5f9;
    color: #475569;
}

@media (max-width: 760px) {
    .page-header[b-fpsqycrp6l] {
        flex-direction: column;
    }

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

    table[b-fpsqycrp6l] {
        font-size: 13px;
    }

    .action-col[b-fpsqycrp6l] {
        text-align: left;
    }

    .btn-mini[b-fpsqycrp6l] {
        margin-left: 0;
        margin-right: 6px;
        margin-top: 6px;
    }
}
/* /Components/Pages/Admin/VisitorApprovals.razor.rz.scp.css */
/* =========================================================
   VisitorApprovals.razor.css
   Page-specific styles only.

   Shared reusable styles are handled by:
   wwwroot/css/jru-shared.css

   This file now keeps only:
   - visitor approval page background/layout
   - header KPI sizing
   - filter pills
   - request card layout
   - detail panel-specific layouts
   - device cards
   - approval timeline
   - final state boxes
   ========================================================= */

/* =========================================================
   Page Shell
   ========================================================= */

.visitor-approval-page[b-6m72dcjs6g] {
    min-height: calc(100vh - 32px);
    padding: 28px;
    color: var(--jru-slate-900, #0f172a);
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.10), transparent 30%),
        linear-gradient(135deg, #f8fafc 0%, #eef6f5 100%);
}

.page-header[b-6m72dcjs6g] {
    margin-bottom: 24px;
}

.page-header p[b-6m72dcjs6g] {
    max-width: 720px;
    line-height: 1.7;
}

/* =========================================================
   Header KPIs
   ========================================================= */

.header-kpis[b-6m72dcjs6g] {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 12px;
    min-width: 430px;
}

.header-kpis .kpi-card[b-6m72dcjs6g] {
    min-height: auto;
    padding: 16px;
    background: rgba(255, 255, 255, 0.92);
}

.header-kpis .kpi-card[b-6m72dcjs6g]::before {
    display: none;
}

.header-kpis .kpi-card span[b-6m72dcjs6g] {
    display: block;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 900;
}

.header-kpis .kpi-card strong[b-6m72dcjs6g] {
    display: block;
    margin-top: 6px;
    color: #0f766e;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}

/* =========================================================
   Filter Bar
   ========================================================= */

.filter-bar[b-6m72dcjs6g] {
    gap: 10px;
    margin-bottom: 18px;
}

.filter-pill[b-6m72dcjs6g] {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--jru-slate-300, #cbd5e1);
    background: #ffffff;
    color: var(--jru-slate-600, #475569);
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        background 0.16s ease,
        color 0.16s ease;
}

.filter-pill:hover[b-6m72dcjs6g] {
    transform: translateY(-1px);
    border-color: #14b8a6;
    box-shadow: 0 12px 24px rgba(20, 184, 166, 0.12);
}

.filter-pill.active[b-6m72dcjs6g] {
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    border-color: #0f766e;
    box-shadow: 0 14px 28px rgba(20, 184, 166, 0.22);
}

/* =========================================================
   Panels / Main Layout
   ========================================================= */

.panel[b-6m72dcjs6g] {
    background: rgba(255, 255, 255, 0.94);
    border-radius: 26px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10);
}

.approval-layout[b-6m72dcjs6g] {
    display: grid;
    grid-template-columns: 390px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.request-list[b-6m72dcjs6g],
.details-panel[b-6m72dcjs6g] {
    padding: 20px;
}

.panel-header h2[b-6m72dcjs6g] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 19px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.panel-header p[b-6m72dcjs6g] {
    margin: 4px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 13px;
    font-weight: 700;
}

.loading-state[b-6m72dcjs6g] {
    color: var(--jru-slate-500, #64748b);
    font-weight: 900;
}

/* =========================================================
   Empty States
   ========================================================= */

.empty-state[b-6m72dcjs6g],
.empty-detail[b-6m72dcjs6g] {
    border-radius: 22px;
    background: var(--jru-slate-50, #f8fafc);
    border: 1px dashed var(--jru-slate-300, #cbd5e1);
}

.empty-state strong[b-6m72dcjs6g],
.empty-detail h2[b-6m72dcjs6g] {
    display: block;
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 18px;
    font-weight: 900;
}

.empty-state span[b-6m72dcjs6g],
.empty-detail p[b-6m72dcjs6g] {
    display: block;
    margin-top: 8px;
    color: var(--jru-slate-500, #64748b);
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
}

.empty-icon[b-6m72dcjs6g] {
    width: 54px;
    height: 54px;
    margin: 0 auto 12px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: #ccfbf1;
    color: #0f766e;
    font-size: 26px;
    font-weight: 900;
}

/* =========================================================
   Request Cards
   ========================================================= */

.request-cards[b-6m72dcjs6g] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.request-card[b-6m72dcjs6g] {
    width: 100%;
    padding: 14px;
    border-radius: 20px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        background 0.16s ease;
}

.request-card:hover[b-6m72dcjs6g] {
    transform: translateY(-1px);
    border-color: #99f6e4;
    box-shadow: 0 14px 30px rgba(20, 184, 166, 0.10);
}

.request-card.active[b-6m72dcjs6g] {
    border-color: #14b8a6;
    background: #f0fdfa;
    box-shadow: 0 16px 34px rgba(20, 184, 166, 0.14);
}

.request-card-top[b-6m72dcjs6g] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.request-card-top strong[b-6m72dcjs6g] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 14px;
    font-weight: 900;
}

.request-card-top span[b-6m72dcjs6g] {
    display: block;
    margin-top: 3px;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 800;
}

.request-meta[b-6m72dcjs6g] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 12px;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 800;
}

.request-pass-hint[b-6m72dcjs6g] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #0f766e;
    background: #ccfbf1;
    border: 1px solid #99f6e4;
    font-size: 11px;
    font-weight: 900;
}

/* =========================================================
   Status Badges
   ========================================================= */

.status-badge[b-6m72dcjs6g] {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 900;
    border: 1px solid transparent;
}

.status-badge.large[b-6m72dcjs6g] {
    min-height: 34px;
    padding: 0 13px;
    font-size: 12px;
}

.status-badge.warning[b-6m72dcjs6g] {
    color: #92400e;
    background: #fef3c7;
    border-color: #fde68a;
}

.status-badge.info[b-6m72dcjs6g] {
    color: #075985;
    background: #e0f2fe;
    border-color: #bae6fd;
}

.status-badge.success[b-6m72dcjs6g] {
    color: #0f766e;
    background: #ccfbf1;
    border-color: #99f6e4;
}

.status-badge.danger[b-6m72dcjs6g] {
    color: #991b1b;
    background: #fee2e2;
    border-color: #fecaca;
}

.status-badge.neutral[b-6m72dcjs6g] {
    color: var(--jru-slate-600, #475569);
    background: var(--jru-slate-100, #f1f5f9);
    border-color: var(--jru-slate-300, #cbd5e1);
}

/* =========================================================
   Detail Header
   ========================================================= */

.detail-header[b-6m72dcjs6g] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.detail-header-actions[b-6m72dcjs6g] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.visitor-identity[b-6m72dcjs6g] {
    display: flex;
    gap: 14px;
    align-items: center;
}

.avatar-box[b-6m72dcjs6g] {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    box-shadow: 0 14px 28px rgba(20, 184, 166, 0.20);
    flex: 0 0 auto;
}

.avatar-box img[b-6m72dcjs6g] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visitor-identity span[b-6m72dcjs6g] {
    display: block;
    color: #0f766e;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.visitor-identity strong[b-6m72dcjs6g] {
    display: block;
    margin-top: 3px;
    color: var(--jru-slate-900, #0f172a);
    font-size: 20px;
    font-weight: 900;
}

.visitor-identity small[b-6m72dcjs6g] {
    display: block;
    margin-top: 3px;
    color: var(--jru-slate-500, #64748b);
    font-size: 13px;
    font-weight: 800;
}

/* =========================================================
   Details
   ========================================================= */

.section-divider[b-6m72dcjs6g] {
    margin: 22px 0;
}

.detail-grid[b-6m72dcjs6g] {
    gap: 14px;
}

.detail-item span[b-6m72dcjs6g] {
    font-size: 12px;
    font-weight: 900;
}

.detail-item strong[b-6m72dcjs6g] {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 900;
}

.section-heading[b-6m72dcjs6g] {
    margin-bottom: 14px;
}

.section-heading h3[b-6m72dcjs6g] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.section-heading p[b-6m72dcjs6g] {
    margin: 5px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
}

/* =========================================================
   Devices
   ========================================================= */

.no-device-panel[b-6m72dcjs6g] {
    border-radius: 20px;
    border: 1px dashed var(--jru-slate-300, #cbd5e1);
    font-weight: 800;
}

.device-list[b-6m72dcjs6g] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.device-card[b-6m72dcjs6g] {
    padding: 18px;
    border-radius: 22px;
    border-color: #dbe4ee;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.device-card-header[b-6m72dcjs6g] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.device-icon[b-6m72dcjs6g] {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    color: #0f766e;
    font-size: 18px;
    font-weight: 900;
    flex: 0 0 auto;
}

.device-title-block[b-6m72dcjs6g] {
    min-width: 0;
}

.device-type[b-6m72dcjs6g] {
    display: block;
    margin-bottom: 3px;
    color: #0f766e;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.device-name[b-6m72dcjs6g] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.35;
    word-break: break-word;
}

.device-meta-grid[b-6m72dcjs6g] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.device-meta-item[b-6m72dcjs6g] {
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--jru-slate-50, #f8fafc);
    border: 1px solid var(--jru-slate-200, #e2e8f0);
}

.meta-label[b-6m72dcjs6g] {
    display: block;
    margin-bottom: 5px;
    color: var(--jru-slate-500, #64748b);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.meta-value[b-6m72dcjs6g] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 14px;
    font-weight: 800;
    word-break: break-word;
}

.device-purpose-box[b-6m72dcjs6g] {
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--jru-slate-50, #f8fafc);
    border: 1px dashed var(--jru-slate-300, #cbd5e1);
}

.device-purpose-box p[b-6m72dcjs6g] {
    margin: 6px 0 0;
    color: var(--jru-slate-700, #334155);
    font-size: 14px;
    line-height: 1.6;
    font-weight: 700;
    word-break: break-word;
}

/* =========================================================
   Approval Timeline
   ========================================================= */

.approval-timeline[b-6m72dcjs6g] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.timeline-item[b-6m72dcjs6g] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 15px;
    border-radius: 20px;
    background: var(--jru-slate-50, #f8fafc);
    border: 1px solid var(--jru-slate-200, #e2e8f0);
}

.timeline-dot[b-6m72dcjs6g] {
    width: 14px;
    height: 14px;
    margin-top: 4px;
    border-radius: 999px;
    background: var(--jru-slate-400, #94a3b8);
    flex: 0 0 auto;
}

.timeline-item.approved .timeline-dot[b-6m72dcjs6g] {
    background: #0f766e;
}

.timeline-item.rejected .timeline-dot[b-6m72dcjs6g] {
    background: #dc2626;
}

.timeline-item.pending .timeline-dot[b-6m72dcjs6g] {
    background: #f59e0b;
}

.timeline-item.neutral .timeline-dot[b-6m72dcjs6g] {
    background: var(--jru-slate-400, #94a3b8);
}

.timeline-item strong[b-6m72dcjs6g] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 14px;
    font-weight: 900;
}

.timeline-item span[b-6m72dcjs6g] {
    display: block;
    margin-top: 4px;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 900;
}

.timeline-item p[b-6m72dcjs6g] {
    margin: 8px 0 0;
    color: var(--jru-slate-600, #475569);
    font-size: 12px;
    line-height: 1.6;
    font-weight: 700;
}

/* =========================================================
   Approval Box / Remarks
   ========================================================= */

.approval-box[b-6m72dcjs6g] {
    padding: 18px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.10), transparent 35%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid var(--jru-slate-200, #e2e8f0);
}

.approval-box h3[b-6m72dcjs6g] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 18px;
    font-weight: 900;
}

.approval-box p[b-6m72dcjs6g] {
    margin: 6px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
}

.remarks-input[b-6m72dcjs6g] {
    min-height: 104px;
    margin-top: 14px;
    font-weight: 700;
}

.action-buttons[b-6m72dcjs6g] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 14px;
}

/* =========================================================
   Final States
   ========================================================= */

.final-state[b-6m72dcjs6g] {
    padding: 16px;
    border-radius: 20px;
    background: var(--jru-slate-50, #f8fafc);
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    color: var(--jru-slate-600, #475569);
    font-size: 13px;
    font-weight: 900;
}

.final-state.approved[b-6m72dcjs6g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #0f766e;
    background: #ecfdf5;
    border-color: #99f6e4;
}

.final-state.approved strong[b-6m72dcjs6g] {
    display: block;
    color: #0f766e;
    font-size: 14px;
    font-weight: 900;
}

.final-state.approved span[b-6m72dcjs6g] {
    display: block;
    margin-top: 4px;
    color: #115e59;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}

.final-state.rejected[b-6m72dcjs6g] {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca;
}

/* =========================================================
   Buttons
   ========================================================= */

.btn[b-6m72dcjs6g],
.btn-pass[b-6m72dcjs6g],
.btn-pass-large[b-6m72dcjs6g] {
    font-weight: 900;
}

.btn-secondary-danger[b-6m72dcjs6g] {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.btn-pass[b-6m72dcjs6g],
.btn-pass-large[b-6m72dcjs6g] {
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    box-shadow: 0 14px 28px rgba(20, 184, 166, 0.22);
}

.btn-pass[b-6m72dcjs6g] {
    min-height: 36px;
    padding: 0 13px;
    border-radius: 13px;
    font-size: 12px;
}

.btn-pass-large[b-6m72dcjs6g] {
    min-height: 44px;
    padding: 0 16px;
    border-radius: 15px;
    font-size: 13px;
    white-space: nowrap;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1100px) {
    .page-header[b-6m72dcjs6g] {
        flex-direction: column;
    }

    .header-kpis[b-6m72dcjs6g] {
        width: 100%;
        min-width: 0;
    }

    .approval-layout[b-6m72dcjs6g] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .visitor-approval-page[b-6m72dcjs6g] {
        padding: 18px 14px;
    }

    .page-header h1[b-6m72dcjs6g] {
        font-size: 28px;
    }

    .header-kpis[b-6m72dcjs6g] {
        grid-template-columns: 1fr;
    }

    .filter-bar[b-6m72dcjs6g] {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 6px;
    }

    .filter-pill[b-6m72dcjs6g] {
        flex: 0 0 auto;
    }

    .request-list[b-6m72dcjs6g],
    .details-panel[b-6m72dcjs6g] {
        padding: 16px;
    }

    .detail-header[b-6m72dcjs6g],
    .panel-header[b-6m72dcjs6g] {
        flex-direction: column;
        align-items: stretch;
    }

    .detail-header-actions[b-6m72dcjs6g] {
        justify-content: flex-start;
    }

    .visitor-identity[b-6m72dcjs6g] {
        align-items: flex-start;
    }

    .detail-grid[b-6m72dcjs6g],
    .approval-timeline[b-6m72dcjs6g],
    .device-meta-grid[b-6m72dcjs6g] {
        grid-template-columns: 1fr;
    }

    .device-card-header[b-6m72dcjs6g] {
        align-items: flex-start;
    }

    .device-name[b-6m72dcjs6g] {
        font-size: 15px;
    }

    .final-state.approved[b-6m72dcjs6g] {
        flex-direction: column;
        align-items: stretch;
    }

    .action-buttons[b-6m72dcjs6g] {
        flex-direction: column-reverse;
    }

    .btn[b-6m72dcjs6g],
    .btn-pass[b-6m72dcjs6g],
    .btn-pass-large[b-6m72dcjs6g] {
        width: 100%;
    }
}
/* /Components/Pages/Admin/VisitorFsuAccessAuthorityReview.razor.rz.scp.css */
/* =========================================================
   VisitorFsuAccessRequests.razor.css
   Page-specific styles only.
   Shared reusable styles are handled by wwwroot/css/jru-shared.css
   ========================================================= */

.fsu-access-page[b-47khy119ja] {
    min-height: calc(100vh - 32px);
    padding: 28px 34px 56px;
    background: var(--jru-slate-50, #f8fafc);
    color: var(--jru-slate-900, #0f172a);
}

.page-header[b-47khy119ja] {
    margin-bottom: 18px;
}

.page-header h1[b-47khy119ja] {
    font-size: 31px;
    letter-spacing: -0.055em;
}

.page-header p[b-47khy119ja] {
    margin-top: 8px;
    color: var(--jru-slate-500, #64748b);
    font-size: 14px;
    line-height: 1.45;
}

/* =========================================================
   Filters
   ========================================================= */

.filter-card[b-47khy119ja] {
    margin-bottom: 18px;
    padding: 18px 22px;
}

.filter-grid[b-47khy119ja] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.filter-grid label[b-47khy119ja],
.request-action-panel label[b-47khy119ja] {
    display: block;
    margin-bottom: 7px;
    color: var(--jru-slate-700, #334155);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* =========================================================
   KPI
   ========================================================= */

.kpi-grid[b-47khy119ja] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.kpi-card[b-47khy119ja] {
    position: relative;
    min-height: 118px;
    overflow: hidden;
}

.kpi-card span[b-47khy119ja] {
    display: block;
    margin-bottom: 12px;
    color: var(--jru-slate-700, #334155);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.kpi-card strong[b-47khy119ja] {
    display: block;
    margin-bottom: 9px;
    color: #020617;
    font-size: 36px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.065em;
}

.kpi-card small[b-47khy119ja] {
    display: block;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
}

.kpi-card.warning[b-47khy119ja] {
    background: #fffaf0;
    border-color: #fed7aa;
}

.kpi-card.warning strong[b-47khy119ja] {
    color: #b45309;
}

.kpi-card.approved[b-47khy119ja] {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.kpi-card.approved strong[b-47khy119ja] {
    color: #047857;
}

.kpi-card.on-fsu[b-47khy119ja] {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.kpi-card.on-fsu strong[b-47khy119ja] {
    color: #1d4ed8;
}

.kpi-card.completed[b-47khy119ja] {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.kpi-card.completed strong[b-47khy119ja] {
    color: #475569;
}

.kpi-card.denied[b-47khy119ja] {
    background: #fff1f2;
    border-color: #fecdd3;
}

.kpi-card.denied strong[b-47khy119ja] {
    color: #be123c;
}

/* =========================================================
   Panels
   ========================================================= */

.request-builder[b-47khy119ja],
.request-list-panel[b-47khy119ja] {
    margin-top: 20px;
}

.request-builder[b-47khy119ja] {
    padding: 24px;
}

.request-list-panel[b-47khy119ja] {
    padding: 24px;
}

.builder-header[b-47khy119ja] {
    align-items: flex-start;
    gap: 18px;
}

.builder-header span[b-47khy119ja],
.request-list-panel .jru-panel-header span[b-47khy119ja] {
    display: block;
    margin-bottom: 6px;
    color: #0f766e;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.builder-header h2[b-47khy119ja],
.request-list-panel .jru-panel-header h2[b-47khy119ja] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 24px;
    font-weight: 950;
    letter-spacing: -0.045em;
}

.builder-header p[b-47khy119ja],
.request-list-panel .jru-panel-header p[b-47khy119ja] {
    margin: 7px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 14px;
    line-height: 1.45;
}

.builder-create-btn[b-47khy119ja] {
    min-height: 40px;
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(1, 193, 180, 0.22);
}

/* =========================================================
   Compact empty state
   ========================================================= */

.compact-empty-state[b-47khy119ja] {
    max-width: 620px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    background:
        linear-gradient(135deg, rgba(1, 193, 180, 0.045), rgba(255, 255, 255, 0.95)),
        #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
}

.compact-empty-state.loading[b-47khy119ja] {
    background:
        linear-gradient(135deg, rgba(14, 165, 233, 0.045), rgba(255, 255, 255, 0.95)),
        #ffffff;
}

.compact-empty-icon[b-47khy119ja] {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    color: #0f766e;
    font-size: 17px;
    font-weight: 950;
}

.compact-empty-state.loading .compact-empty-icon[b-47khy119ja] {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.compact-empty-state strong[b-47khy119ja] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 14px;
    font-weight: 950;
    line-height: 1.25;
}

.compact-empty-state p[b-47khy119ja] {
    margin: 3px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

/* =========================================================
   Candidate visitor groups
   ========================================================= */

.candidate-grid[b-47khy119ja] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.candidate-card[b-47khy119ja] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    display: block;
    text-align: left;
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    background: #ffffff;
    border-radius: 22px;
    padding: 14px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045);
    cursor: pointer;
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        background 0.16s ease;
}

.candidate-card:hover[b-47khy119ja] {
    transform: translateY(-2px);
    border-color: #99f6e4;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10);
}

.candidate-card.selected[b-47khy119ja] {
    border-color: #01C1B4;
    background: linear-gradient(135deg, #f8fffd, #ffffff);
    box-shadow:
        0 0 0 4px rgba(1, 193, 180, 0.13),
        0 22px 55px rgba(1, 193, 180, 0.13);
}

.candidate-card-compact[b-47khy119ja] {
    min-height: auto;
}

.candidate-compact-header[b-47khy119ja] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.candidate-label[b-47khy119ja],
.candidate-compact-info-grid span[b-47khy119ja],
.candidate-visitor-title[b-47khy119ja] {
    display: block;
    margin-bottom: 4px;
    color: var(--jru-slate-500, #64748b);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.candidate-card h3[b-47khy119ja] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 19px;
    font-weight: 950;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.candidate-card p[b-47khy119ja] {
    margin: 4px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 800;
}

.candidate-header-badges[b-47khy119ja] {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 7px;
    flex: 0 0 auto;
}

.candidate-count-pill[b-47khy119ja],
.candidate-destination-pill[b-47khy119ja],
.candidate-selected-pill[b-47khy119ja] {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap;
}

.candidate-count-pill[b-47khy119ja] {
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    color: #0e7490;
}

.candidate-destination-pill[b-47khy119ja] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #047857;
}

.candidate-selected-pill[b-47khy119ja] {
    background: #ccfbf1;
    border: 1px solid #5eead4;
    color: #0f766e;
}

.candidate-compact-info-grid[b-47khy119ja] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    margin-bottom: 12px;
}

.candidate-compact-info-grid div[b-47khy119ja] {
    min-width: 0;
    padding: 10px 12px;
    border-right: 1px solid var(--jru-slate-200, #e2e8f0);
}

.candidate-compact-info-grid div:last-child[b-47khy119ja] {
    border-right: none;
}

.candidate-compact-info-grid strong[b-47khy119ja] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.candidate-compact-visitors[b-47khy119ja] {
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
}

.candidate-visitor-title[b-47khy119ja] {
    padding: 8px 12px;
    margin: 0;
    background: var(--jru-slate-50, #f8fafc);
    border-bottom: 1px solid var(--jru-slate-200, #e2e8f0);
}

.candidate-visitor-mini-list[b-47khy119ja] {
    display: grid;
}

.candidate-visitor-mini-row[b-47khy119ja] {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(130px, 0.55fr);
    gap: 14px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--jru-slate-100, #f1f5f9);
}

.candidate-visitor-mini-row:last-child[b-47khy119ja] {
    border-bottom: none;
}

.candidate-visitor-mini-row strong[b-47khy119ja] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 13px;
    font-weight: 950;
    line-height: 1.15;
}

.candidate-visitor-mini-row small[b-47khy119ja] {
    display: block;
    margin-top: 2px;
    color: var(--jru-slate-500, #64748b);
    font-size: 11px;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.candidate-visitor-mini-row span[b-47khy119ja] {
    color: var(--jru-slate-700, #334155);
    font-size: 12px;
    font-weight: 850;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.candidate-more-row[b-47khy119ja] {
    padding: 8px 12px;
    background: var(--jru-slate-50, #f8fafc);
    border-top: 1px solid var(--jru-slate-100, #f1f5f9);
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 850;
}

/* =========================================================
   Request list compact cards
   ========================================================= */

.request-card-list[b-47khy119ja] {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.request-card[b-47khy119ja] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 276px;
    gap: 0;
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    background: #ffffff;
    border-radius: 24px;
    padding: 14px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.055);
}

.request-card[b-47khy119ja]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--request-accent, #cbd5e1);
}

.request-card.pending[b-47khy119ja] {
    --request-accent: #f59e0b;
    border-color: #fed7aa;
    background: linear-gradient(135deg, #ffffff 0%, #fffaf0 100%);
}

.request-card.approved[b-47khy119ja] {
    --request-accent: #10b981;
    border-color: #bbf7d0;
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
}

.request-card.on-fsu[b-47khy119ja] {
    --request-accent: #2563eb;
    border-color: #bfdbfe;
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
}

.request-card.completed[b-47khy119ja] {
    --request-accent: #64748b;
    border-color: #cbd5e1;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.request-card.denied[b-47khy119ja] {
    --request-accent: #e11d48;
    border-color: #fecaca;
    background: linear-gradient(135deg, #ffffff 0%, #fff1f2 100%);
}

.request-card-compact[b-47khy119ja] {
    min-height: auto;
}

.compact-main[b-47khy119ja] {
    min-width: 0;
    padding: 0 16px 0 2px;
}

.compact-request-header[b-47khy119ja] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
    margin-bottom: 11px;
}

.compact-host-block[b-47khy119ja] {
    min-width: 0;
}

.request-code[b-47khy119ja] {
    display: block;
    margin-bottom: 4px;
    color: #0f766e;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.compact-host-block h3[b-47khy119ja] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 21px;
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.compact-host-block p[b-47khy119ja] {
    margin: 5px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 13px;
    font-weight: 800;
}

.compact-status-block[b-47khy119ja] {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 8px;
    white-space: nowrap;
}

.compact-status-block strong[b-47khy119ja] {
    color: var(--jru-slate-900, #0f172a);
    font-size: 14px;
    font-weight: 950;
}

/* =========================================================
   Status badges
   ========================================================= */

.status-badge[b-47khy119ja] {
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: -0.01em;
    border: 1px solid transparent;
}

.status-badge.pending[b-47khy119ja] {
    color: #b45309;
    background: #fffbeb;
    border-color: #fbbf24;
}

.status-badge.approved[b-47khy119ja] {
    color: #047857;
    background: #ecfdf5;
    border-color: #6ee7b7;
}

.status-badge.on-fsu[b-47khy119ja] {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #93c5fd;
}

.status-badge.completed[b-47khy119ja] {
    color: var(--jru-slate-600, #475569);
    background: var(--jru-slate-100, #f1f5f9);
    border-color: var(--jru-slate-300, #cbd5e1);
}

.status-badge.denied[b-47khy119ja] {
    color: #be123c;
    background: #fff1f2;
    border-color: #fda4af;
}

/* =========================================================
   Compact request information grid
   ========================================================= */

.compact-info-grid[b-47khy119ja] {
    display: grid;
    grid-template-columns: 1.25fr 0.9fr 0.9fr 0.72fr 0.9fr;
    border-top: 1px solid var(--jru-slate-200, #e2e8f0);
    border-bottom: 1px solid var(--jru-slate-200, #e2e8f0);
    margin-bottom: 11px;
    background: rgba(255, 255, 255, 0.72);
}

.compact-info-item[b-47khy119ja] {
    min-width: 0;
    padding: 9px 12px;
    border-right: 1px solid var(--jru-slate-200, #e2e8f0);
}

.compact-info-item:nth-child(5n)[b-47khy119ja] {
    border-right: none;
}

.compact-info-item:nth-child(n + 6)[b-47khy119ja] {
    border-top: 1px solid var(--jru-slate-200, #e2e8f0);
}

.compact-info-item span[b-47khy119ja] {
    display: block;
    margin-bottom: 4px;
    color: var(--jru-slate-500, #64748b);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.105em;
    text-transform: uppercase;
}

.compact-info-item strong[b-47khy119ja] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.compact-info-item.done[b-47khy119ja] {
    background: #f0fdfa;
}

.compact-info-item.done span[b-47khy119ja],
.compact-info-item.done strong[b-47khy119ja] {
    color: #0f766e;
}

.authority-warning-note[b-47khy119ja] {
    margin: 0 0 11px;
    padding: 10px 12px;
    color: #92400e;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.4;
}

.denial-note[b-47khy119ja] {
    margin-bottom: 11px;
    padding: 10px 12px;
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #991b1b;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;
}

.compact-denial-note[b-47khy119ja] {
    margin-bottom: 11px;
}

.compact-table-title[b-47khy119ja] {
    margin: 0 0 7px;
}

.compact-table-title strong[b-47khy119ja] {
    color: var(--jru-slate-900, #0f172a);
    font-size: 14px;
    font-weight: 950;
}

/* =========================================================
   Visitor table
   ========================================================= */

.visitor-table-wrap[b-47khy119ja] {
    overflow-x: auto;
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    border-radius: 15px;
    background: #ffffff;
}

.visitor-table[b-47khy119ja] {
    min-width: 780px;
    border-collapse: separate;
    border-spacing: 0;
}

.visitor-table th:first-child[b-47khy119ja],
.visitor-table td:first-child[b-47khy119ja] {
    width: 62px;
    text-align: center;
}

.compact-visitor-table[b-47khy119ja] {
    min-width: 760px;
}

.compact-visitor-table th[b-47khy119ja] {
    padding: 8px 12px;
    background: #f8fafc;
    color: var(--jru-slate-500, #64748b);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--jru-slate-200, #e2e8f0);
}

.compact-visitor-table td[b-47khy119ja] {
    padding: 8px 12px;
    color: var(--jru-slate-800, #1e293b);
    font-size: 13px;
    font-weight: 700;
    border-bottom: 1px solid var(--jru-slate-100, #f1f5f9);
    vertical-align: middle;
}

.compact-visitor-table tbody tr:last-child td[b-47khy119ja] {
    border-bottom: none;
}

.compact-visitor-table tbody tr:hover td[b-47khy119ja] {
    background: #f8fafc;
}

.compact-visitor-table td strong[b-47khy119ja] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 13px;
    font-weight: 950;
    line-height: 1.2;
}

.compact-visitor-table td small[b-47khy119ja] {
    display: block;
    margin-top: 1px;
    color: var(--jru-slate-500, #64748b);
    font-size: 11px;
    font-weight: 750;
}

/* =========================================================
   Right action panel
   ========================================================= */

.request-action-panel[b-47khy119ja] {
    border-left: 1px solid var(--jru-slate-200, #e2e8f0);
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.compact-action-panel[b-47khy119ja] {
    min-width: 0;
    border-left: 1px solid var(--jru-slate-200, #e2e8f0);
    padding: 0 0 0 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}

.compact-action-top[b-47khy119ja] {
    display: grid;
    gap: 9px;
}

.compact-action-panel .full[b-47khy119ja] {
    width: 100%;
}

.compact-action-panel .jru-btn.full[b-47khy119ja] {
    min-height: 37px;
    border-radius: 13px;
}

.compact-action-panel label[b-47khy119ja] {
    margin: 2px 0 -3px;
    font-size: 10px;
}

.deny-box[b-47khy119ja] {
    min-height: 100px;
    resize: vertical;
}

.compact-deny-box[b-47khy119ja] {
    min-height: 76px;
    border-radius: 13px;
    resize: vertical;
}

.action-note[b-47khy119ja] {
    border-radius: 15px;
    padding: 11px 13px;
    font-size: 12px;
    line-height: 1.35;
}

.action-note strong[b-47khy119ja] {
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
    font-weight: 950;
}

.action-note span[b-47khy119ja] {
    display: block;
    font-size: 12px;
    font-weight: 750;
}

.action-note.pending[b-47khy119ja] {
    color: #92400e;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.action-note.approved[b-47khy119ja] {
    color: #047857;
    background: #d1fae5;
    border: 1px solid #a7f3d0;
}

.action-note.on-fsu[b-47khy119ja] {
    color: #1d4ed8;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
}

.action-note.completed[b-47khy119ja] {
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
}

.action-note.denied[b-47khy119ja] {
    color: #be123c;
    background: #ffe4e6;
    border: 1px solid #fecdd3;
}

.compact-undo-btn[b-47khy119ja] {
    background: #ffffff;
    border-color: var(--jru-slate-300, #cbd5e1);
    color: var(--jru-slate-700, #334155);
    box-shadow: none;
}

.compact-undo-btn:hover:not(:disabled)[b-47khy119ja] {
    background: var(--jru-slate-50, #f8fafc);
    border-color: var(--jru-slate-400, #94a3b8);
    color: var(--jru-slate-900, #0f172a);
}

.undo-help[b-47khy119ja] {
    margin-top: -4px;
    color: var(--jru-slate-500, #64748b);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
}

.undo-help.locked[b-47khy119ja] {
    margin-top: 0;
    padding: 10px 11px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 13px;
}

/* =========================================================
   Small timeline
   ========================================================= */

.compact-side-timeline[b-47khy119ja] {
    display: grid;
    gap: 0;
    margin-top: 4px;
    border-top: 1px solid var(--jru-slate-200, #e2e8f0);
    padding-top: 12px;
}

.compact-side-timeline-item[b-47khy119ja] {
    position: relative;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 9px;
    padding: 0 0 15px;
}

.compact-side-timeline-item:last-child[b-47khy119ja] {
    padding-bottom: 0;
}

.compact-side-timeline-item[b-47khy119ja]::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 27px;
    bottom: 0;
    width: 1px;
    background: #cbd5e1;
}

.compact-side-timeline-item.done[b-47khy119ja]::before {
    background: #99f6e4;
}

.compact-side-timeline-item:last-child[b-47khy119ja]::before {
    display: none;
}

.timeline-dot[b-47khy119ja] {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 950;
}

.compact-side-timeline-item.done .timeline-dot[b-47khy119ja] {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}

.compact-side-timeline-item strong[b-47khy119ja] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 12px;
    font-weight: 950;
    line-height: 1.2;
}

.compact-side-timeline-item small[b-47khy119ja] {
    display: block;
    margin-top: 2px;
    color: var(--jru-slate-500, #64748b);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.25;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1400px) {
    .candidate-grid[b-47khy119ja] {
        grid-template-columns: 1fr;
    }

    .kpi-grid[b-47khy119ja] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1300px) {
    .request-card[b-47khy119ja] {
        grid-template-columns: 1fr;
    }

    .compact-main[b-47khy119ja] {
        padding-right: 0;
    }

    .compact-action-panel[b-47khy119ja] {
        border-left: none;
        border-top: 1px solid var(--jru-slate-200, #e2e8f0);
        margin-top: 14px;
        padding: 14px 0 0;
    }

    .compact-action-top[b-47khy119ja] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .compact-side-timeline[b-47khy119ja] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .compact-side-timeline-item[b-47khy119ja] {
        padding-bottom: 0;
    }

    .compact-side-timeline-item[b-47khy119ja]::before {
        display: none;
    }
}

@media (max-width: 1100px) {
    .filter-grid[b-47khy119ja] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .candidate-compact-info-grid[b-47khy119ja] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .candidate-compact-info-grid div:nth-child(2)[b-47khy119ja] {
        border-right: none;
    }

    .candidate-compact-info-grid div:nth-child(1)[b-47khy119ja],
    .candidate-compact-info-grid div:nth-child(2)[b-47khy119ja] {
        border-bottom: 1px solid var(--jru-slate-200, #e2e8f0);
    }
}

@media (max-width: 900px) {
    .compact-info-grid[b-47khy119ja] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .compact-info-item:nth-child(5n)[b-47khy119ja] {
        border-right: 1px solid var(--jru-slate-200, #e2e8f0);
    }

    .compact-info-item:nth-child(2n)[b-47khy119ja] {
        border-right: none;
    }

    .compact-info-item:nth-child(n + 3)[b-47khy119ja] {
        border-top: 1px solid var(--jru-slate-200, #e2e8f0);
    }

    .compact-action-top[b-47khy119ja],
    .compact-side-timeline[b-47khy119ja] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .fsu-access-page[b-47khy119ja] {
        padding: 22px 16px 42px;
    }

    .page-header[b-47khy119ja],
    .builder-header[b-47khy119ja] {
        flex-direction: column;
    }

    .filter-grid[b-47khy119ja],
    .candidate-grid[b-47khy119ja],
    .kpi-grid[b-47khy119ja] {
        grid-template-columns: 1fr;
    }

    .candidate-compact-header[b-47khy119ja] {
        flex-direction: column;
    }

    .candidate-header-badges[b-47khy119ja] {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .candidate-visitor-mini-row[b-47khy119ja] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .candidate-visitor-mini-row span[b-47khy119ja] {
        text-align: left;
    }

    .compact-empty-state[b-47khy119ja] {
        max-width: none;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .compact-request-header[b-47khy119ja] {
        grid-template-columns: 1fr;
    }

    .compact-status-block[b-47khy119ja] {
        align-items: flex-start;
    }

    .compact-info-grid[b-47khy119ja] {
        grid-template-columns: 1fr;
    }

    .compact-info-item[b-47khy119ja],
    .compact-info-item:nth-child(5n)[b-47khy119ja],
    .compact-info-item:nth-child(2n)[b-47khy119ja] {
        border-right: none;
    }

    .compact-info-item:nth-child(n + 2)[b-47khy119ja] {
        border-top: 1px solid var(--jru-slate-200, #e2e8f0);
    }
}
/* /Components/Pages/Admin/VisitorFsuAccessRequests.razor.rz.scp.css */
/* =========================================================
   VisitorFsuAccessRequests.razor.css
   Page-specific styles only.
   Shared reusable styles are handled by wwwroot/css/jru-shared.css
   ========================================================= */

.fsu-access-page[b-lowa3i5xab] {
    min-height: calc(100vh - 32px);
    padding: 28px 34px 56px;
    background: var(--jru-slate-50, #f8fafc);
    color: var(--jru-slate-900, #0f172a);
}

.page-header[b-lowa3i5xab] {
    margin-bottom: 18px;
}

.page-header h1[b-lowa3i5xab] {
    font-size: 31px;
    letter-spacing: -0.055em;
}

.page-header p[b-lowa3i5xab] {
    margin-top: 8px;
    color: var(--jru-slate-500, #64748b);
    font-size: 14px;
    line-height: 1.45;
}

/* =========================================================
   Filters
   ========================================================= */

.filter-card[b-lowa3i5xab] {
    margin-bottom: 18px;
    padding: 18px 22px;
}

.filter-grid[b-lowa3i5xab] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.filter-grid label[b-lowa3i5xab],
.request-action-panel label[b-lowa3i5xab] {
    display: block;
    margin-bottom: 7px;
    color: var(--jru-slate-700, #334155);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* =========================================================
   KPI
   ========================================================= */

.kpi-grid[b-lowa3i5xab] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.kpi-card[b-lowa3i5xab] {
    position: relative;
    min-height: 118px;
    overflow: hidden;
}

.kpi-card span[b-lowa3i5xab] {
    display: block;
    margin-bottom: 12px;
    color: var(--jru-slate-700, #334155);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.kpi-card strong[b-lowa3i5xab] {
    display: block;
    margin-bottom: 9px;
    color: #020617;
    font-size: 36px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.065em;
}

.kpi-card small[b-lowa3i5xab] {
    display: block;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
}

.kpi-card.warning[b-lowa3i5xab] {
    background: #fffaf0;
    border-color: #fed7aa;
}

.kpi-card.warning strong[b-lowa3i5xab] {
    color: #b45309;
}

.kpi-card.approved[b-lowa3i5xab] {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.kpi-card.approved strong[b-lowa3i5xab] {
    color: #047857;
}

.kpi-card.on-fsu[b-lowa3i5xab] {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.kpi-card.on-fsu strong[b-lowa3i5xab] {
    color: #1d4ed8;
}

.kpi-card.completed[b-lowa3i5xab] {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.kpi-card.completed strong[b-lowa3i5xab] {
    color: #475569;
}

.kpi-card.denied[b-lowa3i5xab] {
    background: #fff1f2;
    border-color: #fecdd3;
}

.kpi-card.denied strong[b-lowa3i5xab] {
    color: #be123c;
}

/* =========================================================
   Panels
   ========================================================= */

.request-builder[b-lowa3i5xab],
.request-list-panel[b-lowa3i5xab] {
    margin-top: 20px;
}

.request-builder[b-lowa3i5xab] {
    padding: 24px;
}

.request-list-panel[b-lowa3i5xab] {
    padding: 24px;
}

.builder-header[b-lowa3i5xab] {
    align-items: flex-start;
    gap: 18px;
}

.builder-header span[b-lowa3i5xab],
.request-list-panel .jru-panel-header span[b-lowa3i5xab] {
    display: block;
    margin-bottom: 6px;
    color: #0f766e;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.builder-header h2[b-lowa3i5xab],
.request-list-panel .jru-panel-header h2[b-lowa3i5xab] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 24px;
    font-weight: 950;
    letter-spacing: -0.045em;
}

.builder-header p[b-lowa3i5xab],
.request-list-panel .jru-panel-header p[b-lowa3i5xab] {
    margin: 7px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 14px;
    line-height: 1.45;
}

.builder-create-btn[b-lowa3i5xab] {
    min-height: 40px;
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(1, 193, 180, 0.22);
}

/* =========================================================
   Compact empty state
   ========================================================= */

.compact-empty-state[b-lowa3i5xab] {
    max-width: 620px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    background:
        linear-gradient(135deg, rgba(1, 193, 180, 0.045), rgba(255, 255, 255, 0.95)),
        #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
}

.compact-empty-state.loading[b-lowa3i5xab] {
    background:
        linear-gradient(135deg, rgba(14, 165, 233, 0.045), rgba(255, 255, 255, 0.95)),
        #ffffff;
}

.compact-empty-icon[b-lowa3i5xab] {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    color: #0f766e;
    font-size: 17px;
    font-weight: 950;
}

.compact-empty-state.loading .compact-empty-icon[b-lowa3i5xab] {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.compact-empty-state strong[b-lowa3i5xab] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 14px;
    font-weight: 950;
    line-height: 1.25;
}

.compact-empty-state p[b-lowa3i5xab] {
    margin: 3px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

/* =========================================================
   Candidate visitor groups
   ========================================================= */

.candidate-grid[b-lowa3i5xab] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.candidate-card[b-lowa3i5xab] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    display: block;
    text-align: left;
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    background: #ffffff;
    border-radius: 22px;
    padding: 14px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045);
    cursor: pointer;
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        background 0.16s ease;
}

.candidate-card:hover[b-lowa3i5xab] {
    transform: translateY(-2px);
    border-color: #99f6e4;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10);
}

.candidate-card.selected[b-lowa3i5xab] {
    border-color: #01C1B4;
    background: linear-gradient(135deg, #f8fffd, #ffffff);
    box-shadow:
        0 0 0 4px rgba(1, 193, 180, 0.13),
        0 22px 55px rgba(1, 193, 180, 0.13);
}

.candidate-card-compact[b-lowa3i5xab] {
    min-height: auto;
}

.candidate-compact-header[b-lowa3i5xab] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.candidate-label[b-lowa3i5xab],
.candidate-compact-info-grid span[b-lowa3i5xab],
.candidate-visitor-title[b-lowa3i5xab] {
    display: block;
    margin-bottom: 4px;
    color: var(--jru-slate-500, #64748b);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.candidate-card h3[b-lowa3i5xab] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 19px;
    font-weight: 950;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.candidate-card p[b-lowa3i5xab] {
    margin: 4px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 800;
}

.candidate-header-badges[b-lowa3i5xab] {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 7px;
    flex: 0 0 auto;
}

.candidate-count-pill[b-lowa3i5xab],
.candidate-destination-pill[b-lowa3i5xab],
.candidate-selected-pill[b-lowa3i5xab] {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap;
}

.candidate-count-pill[b-lowa3i5xab] {
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    color: #0e7490;
}

.candidate-destination-pill[b-lowa3i5xab] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #047857;
}

.candidate-selected-pill[b-lowa3i5xab] {
    background: #ccfbf1;
    border: 1px solid #5eead4;
    color: #0f766e;
}

.candidate-compact-info-grid[b-lowa3i5xab] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    margin-bottom: 12px;
}

.candidate-compact-info-grid div[b-lowa3i5xab] {
    min-width: 0;
    padding: 10px 12px;
    border-right: 1px solid var(--jru-slate-200, #e2e8f0);
}

.candidate-compact-info-grid div:last-child[b-lowa3i5xab] {
    border-right: none;
}

.candidate-compact-info-grid strong[b-lowa3i5xab] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.candidate-compact-visitors[b-lowa3i5xab] {
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
}

.candidate-visitor-title[b-lowa3i5xab] {
    padding: 8px 12px;
    margin: 0;
    background: var(--jru-slate-50, #f8fafc);
    border-bottom: 1px solid var(--jru-slate-200, #e2e8f0);
}

.candidate-visitor-mini-list[b-lowa3i5xab] {
    display: grid;
}

.candidate-visitor-mini-row[b-lowa3i5xab] {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(130px, 0.55fr);
    gap: 14px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--jru-slate-100, #f1f5f9);
}

.candidate-visitor-mini-row:last-child[b-lowa3i5xab] {
    border-bottom: none;
}

.candidate-visitor-mini-row strong[b-lowa3i5xab] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 13px;
    font-weight: 950;
    line-height: 1.15;
}

.candidate-visitor-mini-row small[b-lowa3i5xab] {
    display: block;
    margin-top: 2px;
    color: var(--jru-slate-500, #64748b);
    font-size: 11px;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.candidate-visitor-mini-row span[b-lowa3i5xab] {
    color: var(--jru-slate-700, #334155);
    font-size: 12px;
    font-weight: 850;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.candidate-more-row[b-lowa3i5xab] {
    padding: 8px 12px;
    background: var(--jru-slate-50, #f8fafc);
    border-top: 1px solid var(--jru-slate-100, #f1f5f9);
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 850;
}

/* =========================================================
   Request list compact cards
   ========================================================= */

.request-card-list[b-lowa3i5xab] {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.request-card[b-lowa3i5xab] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 276px;
    gap: 0;
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    background: #ffffff;
    border-radius: 24px;
    padding: 14px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.055);
}

.request-card[b-lowa3i5xab]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--request-accent, #cbd5e1);
}

.request-card.pending[b-lowa3i5xab] {
    --request-accent: #f59e0b;
    border-color: #fed7aa;
    background: linear-gradient(135deg, #ffffff 0%, #fffaf0 100%);
}

.request-card.approved[b-lowa3i5xab] {
    --request-accent: #10b981;
    border-color: #bbf7d0;
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
}

.request-card.on-fsu[b-lowa3i5xab] {
    --request-accent: #2563eb;
    border-color: #bfdbfe;
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
}

.request-card.completed[b-lowa3i5xab] {
    --request-accent: #64748b;
    border-color: #cbd5e1;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.request-card.denied[b-lowa3i5xab] {
    --request-accent: #e11d48;
    border-color: #fecaca;
    background: linear-gradient(135deg, #ffffff 0%, #fff1f2 100%);
}

.request-card-compact[b-lowa3i5xab] {
    min-height: auto;
}

.compact-main[b-lowa3i5xab] {
    min-width: 0;
    padding: 0 16px 0 2px;
}

.compact-request-header[b-lowa3i5xab] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
    margin-bottom: 11px;
}

.compact-host-block[b-lowa3i5xab] {
    min-width: 0;
}

.request-code[b-lowa3i5xab] {
    display: block;
    margin-bottom: 4px;
    color: #0f766e;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.compact-host-block h3[b-lowa3i5xab] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 21px;
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.compact-host-block p[b-lowa3i5xab] {
    margin: 5px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 13px;
    font-weight: 800;
}

.compact-status-block[b-lowa3i5xab] {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 8px;
    white-space: nowrap;
}

.compact-status-block strong[b-lowa3i5xab] {
    color: var(--jru-slate-900, #0f172a);
    font-size: 14px;
    font-weight: 950;
}

/* =========================================================
   Status badges
   ========================================================= */

.status-badge[b-lowa3i5xab] {
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: -0.01em;
    border: 1px solid transparent;
}

.status-badge.pending[b-lowa3i5xab] {
    color: #b45309;
    background: #fffbeb;
    border-color: #fbbf24;
}

.status-badge.approved[b-lowa3i5xab] {
    color: #047857;
    background: #ecfdf5;
    border-color: #6ee7b7;
}

.status-badge.on-fsu[b-lowa3i5xab] {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #93c5fd;
}

.status-badge.completed[b-lowa3i5xab] {
    color: var(--jru-slate-600, #475569);
    background: var(--jru-slate-100, #f1f5f9);
    border-color: var(--jru-slate-300, #cbd5e1);
}

.status-badge.denied[b-lowa3i5xab] {
    color: #be123c;
    background: #fff1f2;
    border-color: #fda4af;
}

/* =========================================================
   Compact request information grid
   ========================================================= */

.compact-info-grid[b-lowa3i5xab] {
    display: grid;
    grid-template-columns: 1.25fr 0.9fr 0.9fr 0.72fr 0.9fr;
    border-top: 1px solid var(--jru-slate-200, #e2e8f0);
    border-bottom: 1px solid var(--jru-slate-200, #e2e8f0);
    margin-bottom: 11px;
    background: rgba(255, 255, 255, 0.72);
}

.compact-info-item[b-lowa3i5xab] {
    min-width: 0;
    padding: 9px 12px;
    border-right: 1px solid var(--jru-slate-200, #e2e8f0);
}

.compact-info-item:nth-child(5n)[b-lowa3i5xab] {
    border-right: none;
}

.compact-info-item:nth-child(n + 6)[b-lowa3i5xab] {
    border-top: 1px solid var(--jru-slate-200, #e2e8f0);
}

.compact-info-item span[b-lowa3i5xab] {
    display: block;
    margin-bottom: 4px;
    color: var(--jru-slate-500, #64748b);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.105em;
    text-transform: uppercase;
}

.compact-info-item strong[b-lowa3i5xab] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.compact-info-item.done[b-lowa3i5xab] {
    background: #f0fdfa;
}

.compact-info-item.done span[b-lowa3i5xab],
.compact-info-item.done strong[b-lowa3i5xab] {
    color: #0f766e;
}

.authority-warning-note[b-lowa3i5xab] {
    margin: 0 0 11px;
    padding: 10px 12px;
    color: #92400e;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.4;
}

.denial-note[b-lowa3i5xab] {
    margin-bottom: 11px;
    padding: 10px 12px;
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #991b1b;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;
}

.compact-denial-note[b-lowa3i5xab] {
    margin-bottom: 11px;
}

.compact-table-title[b-lowa3i5xab] {
    margin: 0 0 7px;
}

.compact-table-title strong[b-lowa3i5xab] {
    color: var(--jru-slate-900, #0f172a);
    font-size: 14px;
    font-weight: 950;
}

/* =========================================================
   Visitor table
   ========================================================= */

.visitor-table-wrap[b-lowa3i5xab] {
    overflow-x: auto;
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    border-radius: 15px;
    background: #ffffff;
}

.visitor-table[b-lowa3i5xab] {
    min-width: 780px;
    border-collapse: separate;
    border-spacing: 0;
}

.visitor-table th:first-child[b-lowa3i5xab],
.visitor-table td:first-child[b-lowa3i5xab] {
    width: 62px;
    text-align: center;
}

.compact-visitor-table[b-lowa3i5xab] {
    min-width: 760px;
}

.compact-visitor-table th[b-lowa3i5xab] {
    padding: 8px 12px;
    background: #f8fafc;
    color: var(--jru-slate-500, #64748b);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--jru-slate-200, #e2e8f0);
}

.compact-visitor-table td[b-lowa3i5xab] {
    padding: 8px 12px;
    color: var(--jru-slate-800, #1e293b);
    font-size: 13px;
    font-weight: 700;
    border-bottom: 1px solid var(--jru-slate-100, #f1f5f9);
    vertical-align: middle;
}

.compact-visitor-table tbody tr:last-child td[b-lowa3i5xab] {
    border-bottom: none;
}

.compact-visitor-table tbody tr:hover td[b-lowa3i5xab] {
    background: #f8fafc;
}

.compact-visitor-table td strong[b-lowa3i5xab] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 13px;
    font-weight: 950;
    line-height: 1.2;
}

.compact-visitor-table td small[b-lowa3i5xab] {
    display: block;
    margin-top: 1px;
    color: var(--jru-slate-500, #64748b);
    font-size: 11px;
    font-weight: 750;
}

/* =========================================================
   Right action panel
   ========================================================= */

.request-action-panel[b-lowa3i5xab] {
    border-left: 1px solid var(--jru-slate-200, #e2e8f0);
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.compact-action-panel[b-lowa3i5xab] {
    min-width: 0;
    border-left: 1px solid var(--jru-slate-200, #e2e8f0);
    padding: 0 0 0 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}

.compact-action-top[b-lowa3i5xab] {
    display: grid;
    gap: 9px;
}

.compact-action-panel .full[b-lowa3i5xab] {
    width: 100%;
}

.compact-action-panel .jru-btn.full[b-lowa3i5xab] {
    min-height: 37px;
    border-radius: 13px;
}

.compact-action-panel label[b-lowa3i5xab] {
    margin: 2px 0 -3px;
    font-size: 10px;
}

.deny-box[b-lowa3i5xab] {
    min-height: 100px;
    resize: vertical;
}

.compact-deny-box[b-lowa3i5xab] {
    min-height: 76px;
    border-radius: 13px;
    resize: vertical;
}

.action-note[b-lowa3i5xab] {
    border-radius: 15px;
    padding: 11px 13px;
    font-size: 12px;
    line-height: 1.35;
}

.action-note strong[b-lowa3i5xab] {
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
    font-weight: 950;
}

.action-note span[b-lowa3i5xab] {
    display: block;
    font-size: 12px;
    font-weight: 750;
}

.action-note.pending[b-lowa3i5xab] {
    color: #92400e;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.action-note.approved[b-lowa3i5xab] {
    color: #047857;
    background: #d1fae5;
    border: 1px solid #a7f3d0;
}

.action-note.on-fsu[b-lowa3i5xab] {
    color: #1d4ed8;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
}

.action-note.completed[b-lowa3i5xab] {
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
}

.action-note.denied[b-lowa3i5xab] {
    color: #be123c;
    background: #ffe4e6;
    border: 1px solid #fecdd3;
}

.compact-undo-btn[b-lowa3i5xab] {
    background: #ffffff;
    border-color: var(--jru-slate-300, #cbd5e1);
    color: var(--jru-slate-700, #334155);
    box-shadow: none;
}

.compact-undo-btn:hover:not(:disabled)[b-lowa3i5xab] {
    background: var(--jru-slate-50, #f8fafc);
    border-color: var(--jru-slate-400, #94a3b8);
    color: var(--jru-slate-900, #0f172a);
}

.undo-help[b-lowa3i5xab] {
    margin-top: -4px;
    color: var(--jru-slate-500, #64748b);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
}

.undo-help.locked[b-lowa3i5xab] {
    margin-top: 0;
    padding: 10px 11px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 13px;
}

/* =========================================================
   Small timeline
   ========================================================= */

.compact-side-timeline[b-lowa3i5xab] {
    display: grid;
    gap: 0;
    margin-top: 4px;
    border-top: 1px solid var(--jru-slate-200, #e2e8f0);
    padding-top: 12px;
}

.compact-side-timeline-item[b-lowa3i5xab] {
    position: relative;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 9px;
    padding: 0 0 15px;
}

.compact-side-timeline-item:last-child[b-lowa3i5xab] {
    padding-bottom: 0;
}

.compact-side-timeline-item[b-lowa3i5xab]::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 27px;
    bottom: 0;
    width: 1px;
    background: #cbd5e1;
}

.compact-side-timeline-item.done[b-lowa3i5xab]::before {
    background: #99f6e4;
}

.compact-side-timeline-item:last-child[b-lowa3i5xab]::before {
    display: none;
}

.timeline-dot[b-lowa3i5xab] {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 950;
}

.compact-side-timeline-item.done .timeline-dot[b-lowa3i5xab] {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}

.compact-side-timeline-item strong[b-lowa3i5xab] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 12px;
    font-weight: 950;
    line-height: 1.2;
}

.compact-side-timeline-item small[b-lowa3i5xab] {
    display: block;
    margin-top: 2px;
    color: var(--jru-slate-500, #64748b);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.25;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1400px) {
    .candidate-grid[b-lowa3i5xab] {
        grid-template-columns: 1fr;
    }

    .kpi-grid[b-lowa3i5xab] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1300px) {
    .request-card[b-lowa3i5xab] {
        grid-template-columns: 1fr;
    }

    .compact-main[b-lowa3i5xab] {
        padding-right: 0;
    }

    .compact-action-panel[b-lowa3i5xab] {
        border-left: none;
        border-top: 1px solid var(--jru-slate-200, #e2e8f0);
        margin-top: 14px;
        padding: 14px 0 0;
    }

    .compact-action-top[b-lowa3i5xab] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .compact-side-timeline[b-lowa3i5xab] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .compact-side-timeline-item[b-lowa3i5xab] {
        padding-bottom: 0;
    }

    .compact-side-timeline-item[b-lowa3i5xab]::before {
        display: none;
    }
}

@media (max-width: 1100px) {
    .filter-grid[b-lowa3i5xab] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .candidate-compact-info-grid[b-lowa3i5xab] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .candidate-compact-info-grid div:nth-child(2)[b-lowa3i5xab] {
        border-right: none;
    }

    .candidate-compact-info-grid div:nth-child(1)[b-lowa3i5xab],
    .candidate-compact-info-grid div:nth-child(2)[b-lowa3i5xab] {
        border-bottom: 1px solid var(--jru-slate-200, #e2e8f0);
    }
}

@media (max-width: 900px) {
    .compact-info-grid[b-lowa3i5xab] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .compact-info-item:nth-child(5n)[b-lowa3i5xab] {
        border-right: 1px solid var(--jru-slate-200, #e2e8f0);
    }

    .compact-info-item:nth-child(2n)[b-lowa3i5xab] {
        border-right: none;
    }

    .compact-info-item:nth-child(n + 3)[b-lowa3i5xab] {
        border-top: 1px solid var(--jru-slate-200, #e2e8f0);
    }

    .compact-action-top[b-lowa3i5xab],
    .compact-side-timeline[b-lowa3i5xab] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .fsu-access-page[b-lowa3i5xab] {
        padding: 22px 16px 42px;
    }

    .page-header[b-lowa3i5xab],
    .builder-header[b-lowa3i5xab] {
        flex-direction: column;
    }

    .filter-grid[b-lowa3i5xab],
    .candidate-grid[b-lowa3i5xab],
    .kpi-grid[b-lowa3i5xab] {
        grid-template-columns: 1fr;
    }

    .candidate-compact-header[b-lowa3i5xab] {
        flex-direction: column;
    }

    .candidate-header-badges[b-lowa3i5xab] {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .candidate-visitor-mini-row[b-lowa3i5xab] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .candidate-visitor-mini-row span[b-lowa3i5xab] {
        text-align: left;
    }

    .compact-empty-state[b-lowa3i5xab] {
        max-width: none;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .compact-request-header[b-lowa3i5xab] {
        grid-template-columns: 1fr;
    }

    .compact-status-block[b-lowa3i5xab] {
        align-items: flex-start;
    }

    .compact-info-grid[b-lowa3i5xab] {
        grid-template-columns: 1fr;
    }

    .compact-info-item[b-lowa3i5xab],
    .compact-info-item:nth-child(5n)[b-lowa3i5xab],
    .compact-info-item:nth-child(2n)[b-lowa3i5xab] {
        border-right: none;
    }

    .compact-info-item:nth-child(n + 2)[b-lowa3i5xab] {
        border-top: 1px solid var(--jru-slate-200, #e2e8f0);
    }
}
/* /Components/Pages/Admin/VisitorPass.razor.rz.scp.css */
.visitor-pass-page[b-x6885eyqyt] {
    min-height: calc(100vh - 32px);
    padding: 28px;
    color: #0f172a;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.12), transparent 30%),
        radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.10), transparent 34%),
        linear-gradient(135deg, #f8fafc 0%, #eef6f5 100%);
}

.page-header[b-x6885eyqyt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.eyebrow[b-x6885eyqyt] {
    margin-bottom: 8px;
    color: #0f766e;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.page-header h1[b-x6885eyqyt] {
    margin: 0;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.page-header p[b-x6885eyqyt] {
    max-width: 680px;
    margin: 8px 0 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}

.btn-secondary[b-x6885eyqyt] {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 15px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
    transition: transform 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.btn-secondary:hover[b-x6885eyqyt] {
    transform: translateY(-1px);
    border-color: #14b8a6;
    color: #0f766e;
    box-shadow: 0 16px 32px rgba(20, 184, 166, 0.14);
}

.state-card[b-x6885eyqyt] {
    min-height: 260px;
    padding: 34px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #e2e8f0;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 14px;
    font-weight: 900;
    text-align: center;
}

.state-card p[b-x6885eyqyt] {
    margin: 12px 0 0;
}

.state-card.danger[b-x6885eyqyt] {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    color: #991b1b;
    background: #fff1f2;
    border-color: #fecdd3;
}

.state-card.danger strong[b-x6885eyqyt] {
    color: #991b1b;
    font-size: 18px;
    font-weight: 900;
}

.spinner[b-x6885eyqyt] {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 4px solid #ccfbf1;
    border-top-color: #0f766e;
    animation: spin-b-x6885eyqyt 0.8s linear infinite;
}

@keyframes spin-b-x6885eyqyt {
    to {
        transform: rotate(360deg);
    }
}

.pass-layout[b-x6885eyqyt] {
    display: grid;
    grid-template-columns: minmax(340px, 460px) minmax(0, 1fr);
    gap: 22px;
    align-items: flex-start;
}

.pass-card[b-x6885eyqyt] {
    position: sticky;
    top: 20px;
    padding: 24px;
    border-radius: 32px;
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.22), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #dbeafe;
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}

.pass-card[b-x6885eyqyt]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 32px;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(15, 118, 110, 0.10), transparent 26%, transparent 74%, rgba(20, 184, 166, 0.10));
}

.pass-top[b-x6885eyqyt] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.pass-label[b-x6885eyqyt] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    box-shadow: 0 12px 24px rgba(20, 184, 166, 0.20);
}

.pass-top h2[b-x6885eyqyt] {
    margin: 0;
    color: #0f172a;
    font-size: 28px;
    font-weight: 950;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.pass-top p[b-x6885eyqyt] {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
}

.status-badge[b-x6885eyqyt] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    border: 1px solid transparent;
}

.status-badge.approved[b-x6885eyqyt] {
    color: #0f766e;
    background: #ccfbf1;
    border-color: #99f6e4;
}

.status-badge.rejected[b-x6885eyqyt] {
    color: #991b1b;
    background: #fee2e2;
    border-color: #fecaca;
}

.status-badge.pending[b-x6885eyqyt] {
    color: #92400e;
    background: #fef3c7;
    border-color: #fde68a;
}

.status-badge.neutral[b-x6885eyqyt] {
    color: #475569;
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.qr-wrap[b-x6885eyqyt] {
    position: relative;
    z-index: 1;
    padding: 22px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow:
        inset 0 0 0 8px #f8fafc,
        0 18px 40px rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-wrap img[b-x6885eyqyt] {
    width: 270px;
    height: 270px;
    object-fit: contain;
}

.qr-code-text[b-x6885eyqyt] {
    position: relative;
    z-index: 1;
    width: fit-content;
    max-width: 100%;
    margin: 14px auto 20px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 12px;
    font-weight: 900;
    word-break: break-all;
    text-align: center;
}

.pass-info-grid[b-x6885eyqyt] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pass-info-grid div[b-x6885eyqyt] {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid #e2e8f0;
}

.pass-info-grid span[b-x6885eyqyt] {
    display: block;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pass-info-grid strong[b-x6885eyqyt] {
    display: block;
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
    word-break: break-word;
}

.pass-warning[b-x6885eyqyt] {
    position: relative;
    z-index: 1;
    margin-top: 16px;
    padding: 13px 14px;
    border-radius: 18px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.5;
}

.details-panel[b-x6885eyqyt] {
    display: grid;
    gap: 18px;
}

.panel-card[b-x6885eyqyt] {
    padding: 22px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #e2e8f0;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.section-title[b-x6885eyqyt] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-title span[b-x6885eyqyt] {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    color: #0f766e;
    background: #ccfbf1;
    border: 1px solid #99f6e4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 950;
}

.section-title h3[b-x6885eyqyt] {
    margin: 0;
    color: #0f172a;
    font-size: 19px;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.detail-list[b-x6885eyqyt] {
    display: grid;
    gap: 0;
}

.detail-list > div[b-x6885eyqyt] {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
}

.detail-list > div:first-child[b-x6885eyqyt] {
    padding-top: 0;
}

.detail-list > div:last-child[b-x6885eyqyt] {
    padding-bottom: 0;
    border-bottom: none;
}

.detail-list span[b-x6885eyqyt] {
    color: #64748b;
    font-size: 13px;
    font-weight: 900;
}

.detail-list strong[b-x6885eyqyt] {
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.5;
    word-break: break-word;
}

.host-box[b-x6885eyqyt] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.host-avatar[b-x6885eyqyt] {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    border-radius: 20px;
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 950;
    box-shadow: 0 14px 28px rgba(20, 184, 166, 0.18);
}

.host-box strong[b-x6885eyqyt] {
    display: block;
    color: #0f172a;
    font-size: 16px;
    font-weight: 950;
    word-break: break-word;
}

.host-box p[b-x6885eyqyt] {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
    word-break: break-word;
}

.empty-box[b-x6885eyqyt] {
    padding: 18px;
    border-radius: 20px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

.device-list[b-x6885eyqyt] {
    display: grid;
    gap: 14px;
}

.device-card[b-x6885eyqyt] {
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #dbe4ee;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.device-main[b-x6885eyqyt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.device-main strong[b-x6885eyqyt] {
    color: #0f172a;
    font-size: 15px;
    font-weight: 950;
    word-break: break-word;
}

.device-main span[b-x6885eyqyt] {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    color: #075985;
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    font-size: 12px;
    font-weight: 900;
}

.device-meta[b-x6885eyqyt] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.device-meta span[b-x6885eyqyt] {
    padding: 7px 10px;
    border-radius: 999px;
    color: #475569;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    font-size: 12px;
    font-weight: 800;
    word-break: break-word;
}

.device-card p[b-x6885eyqyt] {
    margin: 12px 0 0;
    padding: 12px 13px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #334155;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 800;
    word-break: break-word;
}

@media print {
    .visitor-pass-page[b-x6885eyqyt] {
        min-height: auto;
        padding: 0;
        background: #ffffff;
    }

    .page-header[b-x6885eyqyt],
    .details-panel[b-x6885eyqyt] {
        display: none;
    }

    .pass-layout[b-x6885eyqyt] {
        display: block;
    }

    .pass-card[b-x6885eyqyt] {
        position: static;
        max-width: 520px;
        margin: 0 auto;
        box-shadow: none;
        border: 1px solid #cbd5e1;
    }
}

@media (max-width: 1100px) {
    .page-header[b-x6885eyqyt] {
        flex-direction: column;
    }

    .pass-layout[b-x6885eyqyt] {
        grid-template-columns: 1fr;
    }

    .pass-card[b-x6885eyqyt] {
        position: relative;
        top: auto;
    }
}

@media (max-width: 720px) {
    .visitor-pass-page[b-x6885eyqyt] {
        padding: 18px 14px;
    }

    .page-header h1[b-x6885eyqyt] {
        font-size: 28px;
    }

    .btn-secondary[b-x6885eyqyt] {
        width: 100%;
    }

    .pass-card[b-x6885eyqyt],
    .panel-card[b-x6885eyqyt] {
        border-radius: 24px;
        padding: 18px;
    }

    .pass-top[b-x6885eyqyt] {
        flex-direction: column;
    }

    .qr-wrap img[b-x6885eyqyt] {
        width: 220px;
        height: 220px;
    }

    .pass-info-grid[b-x6885eyqyt] {
        grid-template-columns: 1fr;
    }

    .detail-list > div[b-x6885eyqyt] {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .host-box[b-x6885eyqyt] {
        align-items: flex-start;
    }

    .device-main[b-x6885eyqyt] {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* /Components/Pages/Admin/VisitorWaiverReviews.razor.rz.scp.css */
.waiver-review-page[b-sv34pjaho1] {
    min-height: calc(100vh - 32px);
    padding: 28px;
    color: #0f172a;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.10), transparent 30%),
        linear-gradient(135deg, #f8fafc 0%, #eef6f5 100%);
}

.page-header[b-sv34pjaho1] {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 24px;
}

.eyebrow[b-sv34pjaho1] {
    margin-bottom: 8px;
    color: #0f766e;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.page-header h1[b-sv34pjaho1] {
    margin: 0;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.page-header p[b-sv34pjaho1] {
    max-width: 720px;
    margin: 8px 0 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}

.header-kpis[b-sv34pjaho1] {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 12px;
    min-width: 430px;
}

.kpi-card[b-sv34pjaho1] {
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #e2e8f0;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.kpi-card span[b-sv34pjaho1] {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
}

.kpi-card strong[b-sv34pjaho1] {
    display: block;
    margin-top: 6px;
    font-size: 28px;
    font-weight: 900;
    color: #0f766e;
}

.filter-bar[b-sv34pjaho1] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.filter-pill[b-sv34pjaho1] {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.filter-pill:hover[b-sv34pjaho1] {
    transform: translateY(-1px);
    border-color: #14b8a6;
    box-shadow: 0 12px 24px rgba(20, 184, 166, 0.12);
}

.filter-pill.active[b-sv34pjaho1] {
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    border-color: #0f766e;
    box-shadow: 0 14px 28px rgba(20, 184, 166, 0.22);
}

.panel[b-sv34pjaho1] {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #e2e8f0;
    border-radius: 26px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10);
}

.loading-state[b-sv34pjaho1] {
    padding: 24px;
    color: #64748b;
    font-size: 14px;
    font-weight: 900;
}

.review-layout[b-sv34pjaho1] {
    display: grid;
    grid-template-columns: 390px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.request-list[b-sv34pjaho1],
.details-panel[b-sv34pjaho1] {
    padding: 20px;
}

.panel-header[b-sv34pjaho1] {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 16px;
}

.panel-header h2[b-sv34pjaho1] {
    margin: 0;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.panel-header p[b-sv34pjaho1] {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.refresh-btn[b-sv34pjaho1] {
    min-height: 38px;
    padding: 0 13px;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
}

.empty-state[b-sv34pjaho1],
.empty-detail[b-sv34pjaho1] {
    padding: 26px;
    border-radius: 22px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    text-align: center;
}

.empty-state strong[b-sv34pjaho1],
.empty-detail h2[b-sv34pjaho1] {
    display: block;
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
}

.empty-state span[b-sv34pjaho1],
.empty-detail p[b-sv34pjaho1] {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
}

.empty-icon[b-sv34pjaho1] {
    width: 54px;
    height: 54px;
    margin: 0 auto 12px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: #ccfbf1;
    color: #0f766e;
    font-size: 26px;
    font-weight: 900;
}

.request-cards[b-sv34pjaho1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.request-card[b-sv34pjaho1] {
    width: 100%;
    padding: 14px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    text-align: left;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.request-card:hover[b-sv34pjaho1] {
    transform: translateY(-1px);
    border-color: #99f6e4;
    box-shadow: 0 14px 30px rgba(20, 184, 166, 0.10);
}

.request-card.active[b-sv34pjaho1] {
    border-color: #14b8a6;
    background: #f0fdfa;
    box-shadow: 0 16px 34px rgba(20, 184, 166, 0.14);
}

.request-card-top[b-sv34pjaho1] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.request-card-top strong[b-sv34pjaho1] {
    display: block;
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
}

.request-card-top span[b-sv34pjaho1] {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.request-meta[b-sv34pjaho1] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 12px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.status-badge[b-sv34pjaho1] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.status-badge.large[b-sv34pjaho1] {
    min-height: 34px;
    padding: 0 13px;
    font-size: 12px;
}

.status-badge.warning[b-sv34pjaho1] {
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
}

.status-badge.info[b-sv34pjaho1] {
    color: #075985;
    background: #e0f2fe;
    border: 1px solid #bae6fd;
}

.status-badge.success[b-sv34pjaho1] {
    color: #0f766e;
    background: #ccfbf1;
    border: 1px solid #99f6e4;
}

.status-badge.danger[b-sv34pjaho1] {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
}

.status-badge.neutral[b-sv34pjaho1] {
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
}

.detail-header[b-sv34pjaho1] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.visitor-identity[b-sv34pjaho1] {
    display: flex;
    gap: 14px;
    align-items: center;
}

.avatar-box[b-sv34pjaho1] {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    box-shadow: 0 14px 28px rgba(20, 184, 166, 0.20);
}

.avatar-box img[b-sv34pjaho1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visitor-identity span[b-sv34pjaho1] {
    display: block;
    color: #0f766e;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.visitor-identity strong[b-sv34pjaho1] {
    display: block;
    margin-top: 3px;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
}

.visitor-identity small[b-sv34pjaho1] {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.alert[b-sv34pjaho1] {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 900;
}

.alert-success[b-sv34pjaho1] {
    color: #0f766e;
    background: #ecfdf5;
    border: 1px solid #99f6e4;
}

.alert-error[b-sv34pjaho1] {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.section-divider[b-sv34pjaho1] {
    height: 1px;
    margin: 22px 0;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

.detail-grid[b-sv34pjaho1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.detail-item[b-sv34pjaho1] {
    padding: 14px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.detail-item span[b-sv34pjaho1] {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
}

.detail-item strong[b-sv34pjaho1],
.detail-item a[b-sv34pjaho1] {
    display: block;
    margin-top: 6px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
}

.detail-item a[b-sv34pjaho1] {
    color: #0f766e;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.detail-section[b-sv34pjaho1] {
    margin-top: 16px;
    padding: 16px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.detail-section h3[b-sv34pjaho1] {
    margin: 0;
    color: #0f172a;
    font-size: 15px;
    font-weight: 900;
}

.detail-section p[b-sv34pjaho1] {
    margin: 8px 0 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.7;
    font-weight: 700;
}

.approval-timeline[b-sv34pjaho1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.timeline-item[b-sv34pjaho1] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 15px;
    border-radius: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.timeline-dot[b-sv34pjaho1] {
    width: 14px;
    height: 14px;
    margin-top: 4px;
    border-radius: 999px;
    background: #94a3b8;
    flex: 0 0 auto;
}

.timeline-item.approved .timeline-dot[b-sv34pjaho1] {
    background: #0f766e;
}

.timeline-item.rejected .timeline-dot[b-sv34pjaho1] {
    background: #dc2626;
}

.timeline-item.pending .timeline-dot[b-sv34pjaho1] {
    background: #f59e0b;
}

.timeline-item strong[b-sv34pjaho1] {
    display: block;
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
}

.timeline-item span[b-sv34pjaho1] {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
}

.timeline-item p[b-sv34pjaho1] {
    margin: 8px 0 0;
    color: #475569;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 700;
}

.approval-box[b-sv34pjaho1] {
    padding: 18px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.10), transparent 35%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
}

.approval-box h3[b-sv34pjaho1] {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
}

.approval-box p[b-sv34pjaho1] {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
}

.remarks-input[b-sv34pjaho1] {
    width: 100%;
    min-height: 104px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    resize: vertical;
    outline: none;
}

.remarks-input:focus[b-sv34pjaho1] {
    border-color: #14b8a6;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.16);
}

.action-buttons[b-sv34pjaho1] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 14px;
}

.final-state[b-sv34pjaho1] {
    padding: 16px;
    border-radius: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 13px;
    font-weight: 900;
}

.final-state.approved[b-sv34pjaho1] {
    color: #0f766e;
    background: #ecfdf5;
    border-color: #99f6e4;
}

.final-state.rejected[b-sv34pjaho1] {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca;
}

.btn[b-sv34pjaho1] {
    min-height: 44px;
    padding: 0 16px;
    border-radius: 15px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.btn:hover[b-sv34pjaho1] {
    transform: translateY(-1px);
}

.btn:disabled[b-sv34pjaho1] {
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
}

.btn-primary[b-sv34pjaho1] {
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    box-shadow: 0 16px 32px rgba(20, 184, 166, 0.24);
}

.btn-secondary-danger[b-sv34pjaho1] {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

@media (max-width: 1100px) {
    .page-header[b-sv34pjaho1] {
        flex-direction: column;
    }

    .header-kpis[b-sv34pjaho1] {
        width: 100%;
        min-width: 0;
    }

    .review-layout[b-sv34pjaho1] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .waiver-review-page[b-sv34pjaho1] {
        padding: 18px 14px;
    }

    .page-header h1[b-sv34pjaho1] {
        font-size: 28px;
    }

    .header-kpis[b-sv34pjaho1] {
        grid-template-columns: 1fr;
    }

    .filter-bar[b-sv34pjaho1] {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 6px;
    }

    .filter-pill[b-sv34pjaho1] {
        flex: 0 0 auto;
    }

    .request-list[b-sv34pjaho1],
    .details-panel[b-sv34pjaho1] {
        padding: 16px;
    }

    .detail-header[b-sv34pjaho1],
    .panel-header[b-sv34pjaho1] {
        flex-direction: column;
        align-items: stretch;
    }

    .visitor-identity[b-sv34pjaho1] {
        align-items: flex-start;
    }

    .detail-grid[b-sv34pjaho1],
    .approval-timeline[b-sv34pjaho1] {
        grid-template-columns: 1fr;
    }

    .action-buttons[b-sv34pjaho1] {
        flex-direction: column-reverse;
    }

    .btn[b-sv34pjaho1] {
        width: 100%;
    }
}
/* /Components/Pages/Auth/Login.razor.rz.scp.css */
.login-page[b-pd9gp0fl1u] {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(420px, 0.9fr) minmax(520px, 1.1fr);
    background: #ffffff;
    color: #0f172a;
    overflow: hidden;
}

.login-left[b-pd9gp0fl1u] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px 28px;
    background:
        radial-gradient(circle at top left, rgba(1, 193, 180, 0.10), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.login-left[b-pd9gp0fl1u]::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 999px;
    background: rgba(1, 193, 180, 0.08);
    bottom: -140px;
    left: -120px;
}

.login-box[b-pd9gp0fl1u] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 500px;
}

.brand-row[b-pd9gp0fl1u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 42px;
}

.brand-identity[b-pd9gp0fl1u] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-copy[b-pd9gp0fl1u] {
    min-width: 0;
}

.brand-mark[b-pd9gp0fl1u] {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 18px;
    background:
        linear-gradient(135deg, #01C1B4 0%, #0f766e 100%);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 24px;
    box-shadow: 0 16px 34px rgba(1, 193, 180, 0.30);
}

.brand-row h1[b-pd9gp0fl1u] {
    margin: 0;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.brand-row p[b-pd9gp0fl1u] {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
}

.visitor-register-button[b-pd9gp0fl1u] {
    min-height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: 1px solid rgba(217, 119, 6, 0.32);
    color: #ffffff;
    font-size: 13px;
    font-weight: 1000;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 14px 28px rgba(245, 158, 11, 0.28);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.visitor-register-button:hover[b-pd9gp0fl1u] {
    transform: translateY(-1px);
    filter: brightness(0.98);
    box-shadow: 0 18px 36px rgba(245, 158, 11, 0.34);
}

.visitor-register-button:active[b-pd9gp0fl1u] {
    transform: translateY(0);
    box-shadow: 0 10px 22px rgba(245, 158, 11, 0.24);
}

.visitor-register-icon[b-pd9gp0fl1u] {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-size: 16px;
    font-weight: 1000;
    line-height: 1;
}

.welcome[b-pd9gp0fl1u] {
    margin-bottom: 28px;
}

.welcome span[b-pd9gp0fl1u] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f766e;
    background: rgba(1, 193, 180, 0.10);
    border: 1px solid rgba(1, 193, 180, 0.22);
    border-radius: 999px;
    padding: 7px 12px;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.welcome span[b-pd9gp0fl1u]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #01C1B4;
    box-shadow: 0 0 0 4px rgba(1, 193, 180, 0.16);
}

.welcome h2[b-pd9gp0fl1u] {
    margin: 18px 0 12px;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 1.05;
}

.welcome p[b-pd9gp0fl1u] {
    margin: 0;
    color: #475569;
    line-height: 1.7;
    font-size: 15px;
    max-width: 440px;
}

.form-group[b-pd9gp0fl1u] {
    margin-bottom: 18px;
}

.form-group label[b-pd9gp0fl1u] {
    display: block;
    margin-bottom: 9px;
    font-size: 13px;
    font-weight: 900;
    color: #334155;
}

.form-control[b-pd9gp0fl1u] {
    width: 100%;
    height: 58px;
    border: 1px solid #cbd5e1;
    border-radius: 18px;
    padding: 0 18px;
    font-size: 15px;
    color: #0f172a;
    background: #ffffff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.form-control:hover[b-pd9gp0fl1u] {
    border-color: #94a3b8;
}

.form-control:focus[b-pd9gp0fl1u] {
    outline: none;
    border-color: #01C1B4;
    box-shadow: 0 0 0 4px rgba(1, 193, 180, 0.14);
}

.form-control[b-pd9gp0fl1u]::placeholder {
    color: #94a3b8;
}

.remember-row[b-pd9gp0fl1u] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    margin: 4px 0 22px;
    user-select: none;
}

.remember-row input[b-pd9gp0fl1u] {
    width: 20px;
    height: 20px;
    accent-color: #01C1B4;
    cursor: pointer;
}

.login-button[b-pd9gp0fl1u] {
    width: 100%;
    height: 58px;
    border: 0;
    border-radius: 18px;
    background:
        linear-gradient(135deg, #01C1B4 0%, #0f766e 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    box-shadow: 0 18px 34px rgba(1, 193, 180, 0.28);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.login-button:hover[b-pd9gp0fl1u] {
    transform: translateY(-1px);
    filter: brightness(0.98);
    box-shadow: 0 22px 42px rgba(1, 193, 180, 0.34);
}

.login-button:active[b-pd9gp0fl1u] {
    transform: translateY(0);
    box-shadow: 0 12px 24px rgba(1, 193, 180, 0.24);
}

.alert-error[b-pd9gp0fl1u] {
    margin-bottom: 18px;
    border-radius: 16px;
    padding: 13px 15px;
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 14px;
    font-weight: 800;
}

.validation-message[b-pd9gp0fl1u] {
    color: #dc2626;
    font-size: 12px;
    margin-top: 6px;
    font-weight: 700;
}

.register-panel[b-pd9gp0fl1u] {
    margin-top: 26px;
    padding: 18px;
    border-radius: 22px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.register-panel p[b-pd9gp0fl1u] {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 900;
    color: #0f172a;
}

.register-actions[b-pd9gp0fl1u] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.register-link[b-pd9gp0fl1u] {
    min-height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.register-link.contractor[b-pd9gp0fl1u] {
    color: #0f766e;
    background: #ecfeff;
    border: 1px solid rgba(1, 193, 180, 0.35);
}

.register-link.staff[b-pd9gp0fl1u] {
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.register-link:hover[b-pd9gp0fl1u] {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.register-panel small[b-pd9gp0fl1u] {
    display: block;
    margin-top: 12px;
    color: #64748b;
    line-height: 1.5;
    font-size: 12px;
    font-weight: 600;
}

.help-text[b-pd9gp0fl1u] {
    margin-top: 36px;
    color: #64748b;
    font-size: 14px;
}

.help-text a[b-pd9gp0fl1u] {
    color: #0f766e;
    font-weight: 900;
    text-decoration: none;
}

.login-right[b-pd9gp0fl1u] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 70px;
    background:
        radial-gradient(circle at 84% 14%, rgba(255, 255, 255, 0.55), transparent 25%),
        radial-gradient(circle at 18% 18%, rgba(1, 193, 180, 0.32), transparent 30%),
        linear-gradient(135deg, #ecfeff 0%, #ccfbf1 42%, #01C1B4 100%);
}

.login-right[b-pd9gp0fl1u]::before {
    content: "";
    position: absolute;
    width: 680px;
    height: 680px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.22);
    transform: rotate(-14deg);
    top: -160px;
    right: -110px;
}

.login-right[b-pd9gp0fl1u]::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(15, 23, 42, 0.10) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: 0.34;
}

.visual-card[b-pd9gp0fl1u] {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 520px;
    border-radius: 30px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.66);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.76);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.16);
}

.visual-card > span[b-pd9gp0fl1u] {
    display: inline-flex;
    color: #0f766e;
    font-size: 12px;
    letter-spacing: 0.28em;
    font-weight: 1000;
}

.visual-card h3[b-pd9gp0fl1u] {
    margin: 22px 0 18px;
    font-size: 36px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -0.06em;
    color: #0f172a;
}

.visual-card p[b-pd9gp0fl1u] {
    margin: 0;
    color: #475569;
    line-height: 1.8;
    font-size: 15px;
    max-width: 440px;
}

.visual-points[b-pd9gp0fl1u] {
    display: grid;
    gap: 12px;
    margin-top: 28px;
}

.visual-points div[b-pd9gp0fl1u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-radius: 18px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.76);
}

.visual-points div[b-pd9gp0fl1u]::before {
    content: "";
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #01C1B4;
    box-shadow: 0 0 0 5px rgba(1, 193, 180, 0.14);
}

.visual-points strong[b-pd9gp0fl1u] {
    margin-right: auto;
    color: #0f172a;
    font-size: 14px;
    font-weight: 1000;
}

.visual-points small[b-pd9gp0fl1u] {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
}

@media (max-width: 1100px) {
    .login-page[b-pd9gp0fl1u] {
        grid-template-columns: 1fr;
        overflow: auto;
    }

    .login-right[b-pd9gp0fl1u] {
        display: none;
    }

    .login-left[b-pd9gp0fl1u] {
        min-height: 100vh;
        padding: 34px 22px;
        background:
            radial-gradient(circle at top right, rgba(1, 193, 180, 0.15), transparent 36%),
            linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }

    .login-box[b-pd9gp0fl1u] {
        max-width: 520px;
    }

    .brand-row[b-pd9gp0fl1u] {
        margin-bottom: 36px;
    }

    .welcome h2[b-pd9gp0fl1u] {
        font-size: 34px;
    }
}

@media (max-width: 520px) {
    .login-left[b-pd9gp0fl1u] {
        padding: 28px 16px;
    }

    .brand-row[b-pd9gp0fl1u] {
        align-items: flex-start;
        flex-wrap: wrap;
        margin-bottom: 32px;
    }

    .brand-identity[b-pd9gp0fl1u] {
        width: 100%;
    }

    .visitor-register-button[b-pd9gp0fl1u] {
        width: 100%;
        min-height: 46px;
    }

    .brand-mark[b-pd9gp0fl1u] {
        width: 48px;
        height: 48px;
        border-radius: 16px;
    }

    .brand-row h1[b-pd9gp0fl1u] {
        font-size: 27px;
    }

    .welcome h2[b-pd9gp0fl1u] {
        font-size: 31px;
    }

    .welcome p[b-pd9gp0fl1u] {
        font-size: 14px;
    }

    .form-control[b-pd9gp0fl1u],
    .login-button[b-pd9gp0fl1u] {
        height: 56px;
        border-radius: 16px;
    }

    .register-actions[b-pd9gp0fl1u] {
        grid-template-columns: 1fr;
    }

    .register-panel[b-pd9gp0fl1u] {
        padding: 16px;
    }
}
/* /Components/Pages/Auth/LoginVerify.razor.rz.scp.css */
.verify-page[b-eaygjzdj31] {
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, 0.8fr);

    background: #f5f8fb;
}


/* ============================================================
   LEFT PANEL
   ============================================================ */

.verify-left[b-eaygjzdj31] {
    display: flex;

    align-items: center;
    justify-content: center;

    padding: 42px;

    background: #ffffff;
}

.verify-box[b-eaygjzdj31] {
    width: 100%;

    max-width: 540px;
}


/* ============================================================
   BRAND
   ============================================================ */

.brand-row[b-eaygjzdj31] {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 38px;
}

.brand-mark[b-eaygjzdj31] {
    width: 46px;
    height: 46px;

    border-radius: 12px;

    display: grid;

    place-items: center;

    background: #0f766e;

    color: #ffffff;

    font-size: 20px;
    font-weight: 900;
}

.brand-row h1[b-eaygjzdj31] {
    margin: 0;

    color: #101828;

    font-size: 25px;
    font-weight: 850;

    letter-spacing: -0.03em;
}

.brand-row p[b-eaygjzdj31] {
    margin: 3px 0 0;

    color: #667085;

    font-size: 12px;
}


/* ============================================================
   HEADING
   ============================================================ */

.verify-heading[b-eaygjzdj31] {
    margin-bottom: 25px;
}

.verify-heading > span[b-eaygjzdj31] {
    display: block;

    margin-bottom: 8px;

    color: #0f9f95;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.15em;
}

.verify-heading h2[b-eaygjzdj31] {
    margin: 0;

    color: #101828;

    font-size: 30px;
    font-weight: 850;

    letter-spacing: -0.03em;
}

.verify-heading p[b-eaygjzdj31] {
    margin: 10px 0 0;

    color: #667085;

    font-size: 14px;
    line-height: 1.6;
}

.verify-heading strong[b-eaygjzdj31] {
    color: #344054;

    font-weight: 800;
}


/* ============================================================
   FORM
   ============================================================ */

.form-group[b-eaygjzdj31] {
    display: flex;

    flex-direction: column;

    gap: 8px;
}

.otp-form-group[b-eaygjzdj31] {
    margin-top: 3px;
}

.form-group label[b-eaygjzdj31],
.otp-label[b-eaygjzdj31] {
    color: #344054;

    font-size: 13px;
    font-weight: 800;

    line-height: 1.3;
}


/* ============================================================
   OTP INPUT
   ============================================================ */

.otp-input[b-eaygjzdj31] {
    width: 100%;

    min-height: 70px;

    box-sizing: border-box;

    padding: 12px 18px;

    border: 2px solid #d0d5dd;

    border-radius: 12px;

    background: #ffffff;

    color: #101828;

    outline: none;

    text-align: center;

    font-size: 36px;

    font-weight: 900;

    line-height: 1;

    letter-spacing: 0.34em;

    font-variant-numeric: tabular-nums;

    caret-color: #139c93;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.otp-input:hover[b-eaygjzdj31] {
    border-color: #98a2b3;
}

.otp-input:focus[b-eaygjzdj31] {
    border-color: #139c93;

    background: #fcfffe;

    box-shadow:
        0 0 0 4px
        rgba(19, 156, 147, 0.12);
}

.otp-input[b-eaygjzdj31]::placeholder {
    color: #aab2bd;

    font-size: 34px;

    font-weight: 800;

    letter-spacing: 0.34em;

    opacity: 0.75;
}


/* ============================================================
   OTP META
   ============================================================ */

.otp-meta[b-eaygjzdj31] {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin: 12px 0 20px;

    color: #7a8699;

    font-size: 11px;
    font-weight: 550;
}


/* ============================================================
   VERIFY BUTTON
   ============================================================ */

.verify-button[b-eaygjzdj31] {
    width: 100%;

    min-height: 46px;

    border: 1px solid #108f87;

    border-radius: 9px;

    background: #139c93;

    color: #ffffff;

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 3px 8px
        rgba(19, 156, 147, 0.18);

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.verify-button:hover[b-eaygjzdj31] {
    background: #0f8d85;

    border-color: #0c8179;

    box-shadow:
        0 5px 12px
        rgba(19, 156, 147, 0.22);
}

.verify-button:active[b-eaygjzdj31] {
    transform: translateY(1px);
}

.verify-button:disabled[b-eaygjzdj31] {
    opacity: 0.6;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


/* ============================================================
   FOOTER
   ============================================================ */

.verify-footer[b-eaygjzdj31] {
    display: flex;

    justify-content: center;

    gap: 5px;

    margin-top: 18px;

    color: #7a8699;

    font-size: 12px;
}

.verify-footer a[b-eaygjzdj31] {
    color: #0f8f87;

    font-weight: 750;

    text-decoration: none;
}

.verify-footer a:hover[b-eaygjzdj31] {
    text-decoration: underline;
}


/* ============================================================
   ALERTS
   ============================================================ */

.alert-error[b-eaygjzdj31],
.alert-success[b-eaygjzdj31] {
    margin-bottom: 18px;

    padding: 11px 13px;

    border-radius: 9px;

    font-size: 12px;
    font-weight: 650;
}

.alert-error[b-eaygjzdj31] {
    border: 1px solid #ffd4cf;

    background: #fff3f2;

    color: #b42318;
}

.alert-success[b-eaygjzdj31] {
    border: 1px solid #c8f1e5;

    background: #edfdf7;

    color: #087f6a;
}


/* ============================================================
   LOADING / EXPIRED
   ============================================================ */

.loading-panel[b-eaygjzdj31],
.expired-panel[b-eaygjzdj31] {
    padding: 20px;

    border: 1px solid #e4e7ec;

    border-radius: 12px;

    background: #ffffff;

    color: #667085;

    font-size: 13px;
}

.expired-panel strong[b-eaygjzdj31] {
    display: block;

    margin-bottom: 6px;

    color: #344054;

    font-size: 14px;
}

.expired-panel p[b-eaygjzdj31] {
    margin: 0 0 14px;

    line-height: 1.5;
}

.back-login-button[b-eaygjzdj31] {
    display: inline-flex;

    padding: 9px 13px;

    border-radius: 8px;

    background: #139c93;

    color: #ffffff;

    font-size: 12px;
    font-weight: 750;

    text-decoration: none;
}

.back-login-button:hover[b-eaygjzdj31] {
    background: #0f8d85;
}


/* ============================================================
   RIGHT SECURITY PANEL
   ============================================================ */

.verify-right[b-eaygjzdj31] {
    display: flex;

    align-items: center;
    justify-content: center;

    padding: 42px;

    background:
        linear-gradient(
            145deg,
            #0b4f4b 0%,
            #0f766e 48%,
            #139c93 100%
        );
}

.visual-card[b-eaygjzdj31] {
    max-width: 460px;

    color: #ffffff;
}

.visual-card > span[b-eaygjzdj31] {
    display: block;

    margin-bottom: 10px;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.16em;

    opacity: 0.75;
}

.visual-card h3[b-eaygjzdj31] {
    margin: 0;

    font-size: 34px;

    line-height: 1.12;

    font-weight: 850;

    letter-spacing: -0.03em;
}

.visual-card > p[b-eaygjzdj31] {
    margin: 16px 0 26px;

    font-size: 14px;

    line-height: 1.7;

    opacity: 0.84;
}

.visual-points[b-eaygjzdj31] {
    display: grid;

    gap: 12px;
}

.visual-points > div[b-eaygjzdj31] {
    padding: 14px 16px;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.07);
}

.visual-points strong[b-eaygjzdj31] {
    display: block;

    font-size: 13px;
}

.visual-points small[b-eaygjzdj31] {
    display: block;

    margin-top: 4px;

    font-size: 11px;

    opacity: 0.75;
}


/* ============================================================
   VALIDATION
   ============================================================ */

[b-eaygjzdj31] .validation-message {
    color: #b42318;

    font-size: 11px;
    font-weight: 650;
}

[b-eaygjzdj31] input.invalid {
    border-color: #f04438 !important;

    box-shadow:
        0 0 0 3px
        rgba(240, 68, 56, 0.08);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .verify-page[b-eaygjzdj31] {
        grid-template-columns: 1fr;
    }

    .verify-right[b-eaygjzdj31] {
        display: none;
    }

    .verify-left[b-eaygjzdj31] {
        min-height: 100vh;

        padding: 28px 20px;
    }

    .verify-box[b-eaygjzdj31] {
        max-width: 560px;
    }
}


@media (max-width: 520px) {

    .verify-heading h2[b-eaygjzdj31] {
        font-size: 26px;
    }

    .otp-input[b-eaygjzdj31] {
        min-height: 62px;

        padding: 10px 12px;

        font-size: 29px;

        letter-spacing: 0.25em;
    }

    .otp-input[b-eaygjzdj31]::placeholder {
        font-size: 28px;

        letter-spacing: 0.25em;
    }

    .otp-meta[b-eaygjzdj31] {
        align-items: flex-start;

        flex-direction: column;

        gap: 4px;
    }
}
/* /Components/Pages/BoatTrips/BoatTripsIndex.razor.rz.scp.css */
.boat-page[b-ywpps9gp2p] {
    padding: 28px;
    color: #0f172a;
}

.page-header[b-ywpps9gp2p] {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 22px;
}

.eyebrow[b-ywpps9gp2p] {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0891b2;
    margin-bottom: 6px;
}

.page-header h1[b-ywpps9gp2p] {
    margin: 0;
    font-size: 30px;
    font-weight: 850;
}

.page-header p[b-ywpps9gp2p] {
    margin: 8px 0 0;
    color: #64748b;
}

.panel[b-ywpps9gp2p] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
    margin-bottom: 20px;
}

.form-panel h2[b-ywpps9gp2p],
.panel-header h2[b-ywpps9gp2p] {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

.panel-header[b-ywpps9gp2p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.panel-header span[b-ywpps9gp2p] {
    font-size: 13px;
    color: #64748b;
    font-weight: 700;
}

.form-grid[b-ywpps9gp2p] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

label[b-ywpps9gp2p] {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: #475569;
    margin-bottom: 7px;
}

input[b-ywpps9gp2p],
select[b-ywpps9gp2p] {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    padding: 11px 13px;
    font-size: 14px;
    outline: none;
    background: #ffffff;
}

input:focus[b-ywpps9gp2p],
select:focus[b-ywpps9gp2p] {
    border-color: #0891b2;
    box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.12);
}

.form-actions[b-ywpps9gp2p] {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn-primary[b-ywpps9gp2p],
.btn-secondary[b-ywpps9gp2p] {
    border: none;
    border-radius: 14px;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.btn-primary[b-ywpps9gp2p] {
    background: #0891b2;
    color: #ffffff;
}

.btn-secondary[b-ywpps9gp2p] {
    background: #e2e8f0;
    color: #334155;
}

.alert-success[b-ywpps9gp2p] {
    background: #ecfeff;
    color: #155e75;
    border: 1px solid #a5f3fc;
    padding: 12px 14px;
    border-radius: 16px;
    margin-bottom: 18px;
    font-weight: 700;
}

.empty-state[b-ywpps9gp2p] {
    padding: 34px;
    text-align: center;
    color: #64748b;
    font-weight: 700;
    background: #f8fafc;
    border-radius: 18px;
}

table[b-ywpps9gp2p] {
    width: 100%;
    border-collapse: collapse;
}

th[b-ywpps9gp2p] {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b;
    padding: 12px;
    border-bottom: 1px solid #e2e8f0;
}

td[b-ywpps9gp2p] {
    padding: 14px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

td small[b-ywpps9gp2p] {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
}

.status-pill[b-ywpps9gp2p] {
    display: inline-flex;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.status-open[b-ywpps9gp2p] {
    background: #ecfeff;
    color: #155e75;
}

.status-departed[b-ywpps9gp2p] {
    background: #fff7ed;
    color: #c2410c;
}

.status-arrived[b-ywpps9gp2p] {
    background: #f0fdf4;
    color: #15803d;
}

.status-closed[b-ywpps9gp2p] {
    background: #f1f5f9;
    color: #475569;
}

@media (max-width: 760px) {
    .page-header[b-ywpps9gp2p] {
        flex-direction: column;
    }

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

    table[b-ywpps9gp2p] {
        font-size: 13px;
    }

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

.direction-buttons[b-ywpps9gp2p] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.direction-button[b-ywpps9gp2p] {
    border: 2px solid #cbd5e1;
    background: #ffffff;
    border-radius: 20px;
    padding: 24px;
    cursor: pointer;
    font-size: 22px;
    font-weight: 900;
    color: #0f172a;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.direction-button span[b-ywpps9gp2p] {
    color: #0891b2;
    font-size: 30px;
}

.direction-button.selected[b-ywpps9gp2p] {
    border-color: #0891b2;
    background: #ecfeff;
    box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.12);
}

}
/* /Components/Pages/Contractor/Assessment.razor.rz.scp.css */
/* ============================================================
   ASSESSMENT PAGE
   ============================================================ */

.assessment-page[b-fu6zgzbgws] {
    min-height: 100vh;
    padding: 32px 18px 48px;
    background:
        linear-gradient(
            180deg,
            #eef7f6 0%,
            #f5f8fb 42%,
            #eef2f7 100%
        );
    display: flex;
    justify-content: center;
}

.assessment-card[b-fu6zgzbgws] {
    width: 100%;
    max-width: 1040px;
}


/* ============================================================
   ALERTS
   ============================================================ */

.alert[b-fu6zgzbgws] {
    padding: 16px 18px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.5;
}

.alert.info[b-fu6zgzbgws] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}

.alert.error[b-fu6zgzbgws] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.assessment-alert[b-fu6zgzbgws] {
    margin-bottom: 18px;
}


/* ============================================================
   HEADER
   ============================================================ */

.assessment-header[b-fu6zgzbgws] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;

    padding: 24px 26px;
    margin-bottom: 16px;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.055);
}

.assessment-heading[b-fu6zgzbgws] {
    min-width: 0;
}

.assessment-eyebrow[b-fu6zgzbgws] {
    color: #009f94;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    margin-bottom: 6px;
}

.assessment-heading h1[b-fu6zgzbgws] {
    margin: 0;
    color: #0f172a;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 900;
}

.assessment-heading h1 span[b-fu6zgzbgws] {
    color: #64748b;
    font-size: 21px;
    font-weight: 750;
}

.assessment-heading p[b-fu6zgzbgws] {
    max-width: 650px;
    margin: 9px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.55;
}


/* ============================================================
   TIMER
   ============================================================ */

.timer-box[b-fu6zgzbgws] {
    min-width: 164px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    padding: 14px 18px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #073b6d,
            #09548e
        );

    color: #ffffff;

    box-shadow:
        0 10px 24px rgba(7, 59, 109, 0.2);
}

.timer-icon[b-fu6zgzbgws] {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.12);

    font-size: 18px;
}

.timer-box span[b-fu6zgzbgws] {
    display: block;
    margin-bottom: 2px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.timer-box strong[b-fu6zgzbgws] {
    display: block;

    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.5px;
}


/* ============================================================
   ASSESSMENT PROGRESS
   ============================================================ */

.assessment-progress-section[b-fu6zgzbgws] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;

    padding: 20px 22px;
    margin-bottom: 18px;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.045);
}

.progress-heading[b-fu6zgzbgws] {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 10px;

    color: #475569;

    font-size: 12px;
    font-weight: 850;
}

.progress-heading strong[b-fu6zgzbgws] {
    color: #009f94;
    font-size: 14px;
}

.progress-bar[b-fu6zgzbgws] {
    width: 100%;
    height: 10px;

    background: #e9eef4;
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar > div[b-fu6zgzbgws] {
    height: 100%;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #01c1b4,
            #00a99e
        );

    transition: width 0.25s ease;
}

.progress-stats[b-fu6zgzbgws] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 12px;
    margin-top: 16px;
}

.progress-stat[b-fu6zgzbgws] {
    display: flex;
    align-items: center;

    gap: 10px;

    min-width: 0;

    padding: 11px 13px;

    border: 1px solid #e2e8f0;
    border-radius: 14px;

    background: #f8fafc;
}

.progress-stat .stat-icon[b-fu6zgzbgws] {
    flex: 0 0 auto;

    width: 31px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    font-size: 13px;
    font-weight: 900;
}

.progress-stat small[b-fu6zgzbgws] {
    display: block;

    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.progress-stat strong[b-fu6zgzbgws] {
    display: block;

    margin-top: 1px;

    color: #0f172a;
    font-size: 16px;
    font-weight: 900;
}

.progress-stat.answered .stat-icon[b-fu6zgzbgws] {
    background: #dcfce7;
    color: #15803d;
}

.progress-stat.remaining .stat-icon[b-fu6zgzbgws] {
    background: #fff7ed;
    color: #c2410c;
}

.progress-stat.passing .stat-icon[b-fu6zgzbgws] {
    background: #eff6ff;
    color: #1d4ed8;
}


/* ============================================================
   QUESTION CARD
   ============================================================ */

.question-box[b-fu6zgzbgws] {
    background: #ffffff;

    border: 1px solid #dfe7ef;
    border-radius: 24px;

    padding: 26px;

    margin-bottom: 18px;

    box-shadow:
        0 12px 34px rgba(15, 23, 42, 0.06);
}

.question-number-row[b-fu6zgzbgws] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 16px;
}

.question-number-badge[b-fu6zgzbgws] {
    display: inline-flex;
    align-items: center;

    padding: 7px 11px;

    border-radius: 10px;

    background: #e6faf8;

    color: #007f77;

    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.question-status[b-fu6zgzbgws] {
    display: inline-flex;
    align-items: center;

    padding: 6px 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 850;
}

.question-status.answered[b-fu6zgzbgws] {
    background: #ecfdf5;
    color: #047857;
}

.question-status.unanswered[b-fu6zgzbgws] {
    background: #fff7ed;
    color: #c2410c;
}

.question-box h2[b-fu6zgzbgws] {
    margin: 0 0 24px;

    color: #0f172a;

    font-size: 22px;
    font-weight: 850;
    line-height: 1.45;
}


/* ============================================================
   OPTIONS
   ============================================================ */

.option-list[b-fu6zgzbgws] {
    display: grid;
    gap: 11px;
}

.option-item[b-fu6zgzbgws] {
    position: relative;

    display: flex;
    align-items: center;

    gap: 13px;

    min-height: 58px;

    padding: 13px 16px;

    border: 1.5px solid #dfe7ef;
    border-radius: 15px;

    background: #f9fbfd;

    color: #334155;

    cursor: pointer;

    transition:
        border-color 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.12s ease;
}

.option-item:hover[b-fu6zgzbgws] {
    border-color: #5acbc4;
    background: #f2fcfb;

    box-shadow:
        0 4px 15px rgba(1, 193, 180, 0.08);
}

.option-item:active[b-fu6zgzbgws] {
    transform: scale(0.995);
}

.option-item.selected[b-fu6zgzbgws] {
    border-color: #00a99e;
    background: #eafbf8;

    box-shadow:
        0 0 0 2px rgba(1, 193, 180, 0.08);
}

.option-item input[b-fu6zgzbgws] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.option-letter[b-fu6zgzbgws] {
    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #cbd5e1;
    border-radius: 50%;

    background: #ffffff;

    color: #475569;

    font-size: 13px;
    font-weight: 900;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.option-item.selected .option-letter[b-fu6zgzbgws] {
    border-color: #00a99e;
    background: #00a99e;
    color: #ffffff;
}

.option-text[b-fu6zgzbgws] {
    flex: 1;

    color: inherit;

    font-size: 14px;
    font-weight: 750;
    line-height: 1.5;
}

.selected-check[b-fu6zgzbgws] {
    flex: 0 0 auto;

    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #10b981;
    color: #ffffff;

    font-size: 12px;
    font-weight: 900;
}


/* ============================================================
   PREVIOUS / NEXT
   ============================================================ */

.question-actions[b-fu6zgzbgws] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-top: 24px;
    padding-top: 20px;

    border-top: 1px solid #edf1f5;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.primary-btn[b-fu6zgzbgws],
.secondary-btn[b-fu6zgzbgws],
.submit-btn[b-fu6zgzbgws] {
    min-height: 44px;

    border: 0;
    border-radius: 13px;

    padding: 11px 18px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 900;

    cursor: pointer;

    text-decoration: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.12s ease,
        opacity 0.15s ease;
}

.primary-btn[b-fu6zgzbgws] {
    background: #01c1b4;
    color: #ffffff !important;

    box-shadow:
        0 7px 17px rgba(1, 193, 180, 0.18);
}

.primary-btn:hover[b-fu6zgzbgws] {
    background: #00a99e;
}

.secondary-btn[b-fu6zgzbgws] {
    border: 1px solid #d8e0e8;

    background: #f1f5f9;
    color: #334155;
}

.secondary-btn:hover:not(:disabled)[b-fu6zgzbgws] {
    background: #e2e8f0;
}

.primary-btn:active[b-fu6zgzbgws],
.secondary-btn:active[b-fu6zgzbgws],
.submit-btn:active[b-fu6zgzbgws] {
    transform: translateY(1px);
}

.primary-btn:disabled[b-fu6zgzbgws],
.secondary-btn:disabled[b-fu6zgzbgws],
.submit-btn:disabled[b-fu6zgzbgws] {
    opacity: 0.48;
    cursor: not-allowed;
    box-shadow: none;
}


/* ============================================================
   QUESTION NAVIGATOR
   ============================================================ */

.navigator-card[b-fu6zgzbgws] {
    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 22px;

    padding: 21px 22px;

    margin-bottom: 18px;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.045);
}

.navigator-header[b-fu6zgzbgws] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 17px;
}

.navigator-eyebrow[b-fu6zgzbgws] {
    display: block;

    margin-bottom: 3px;

    color: #009f94;

    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.navigator-header h3[b-fu6zgzbgws] {
    margin: 0;

    color: #0f172a;

    font-size: 16px;
    font-weight: 900;
}

.navigator-count[b-fu6zgzbgws] {
    padding: 6px 10px;

    border-radius: 999px;

    background: #f1f5f9;

    color: #475569;

    white-space: nowrap;

    font-size: 10px;
    font-weight: 850;
}

.navigator[b-fu6zgzbgws] {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(42px, 1fr));

    gap: 8px;
}

.nav-dot[b-fu6zgzbgws] {
    position: relative;

    width: 100%;
    min-width: 38px;
    max-width: 54px;
    height: 42px;

    justify-self: start;

    border: 1px solid #cbd5e1;
    border-radius: 11px;

    background: #ffffff;
    color: #475569;

    font-size: 12px;
    font-weight: 900;

    cursor: pointer;

    transition:
        background 0.14s ease,
        border-color 0.14s ease,
        color 0.14s ease,
        transform 0.12s ease,
        box-shadow 0.14s ease;
}

.nav-dot:hover[b-fu6zgzbgws] {
    border-color: #65cfc7;

    box-shadow:
        0 3px 9px rgba(1, 193, 180, 0.1);
}

.nav-dot.current[b-fu6zgzbgws] {
    border-color: #073b6d;

    background: #073b6d;
    color: #ffffff;

    box-shadow:
        0 4px 12px rgba(7, 59, 109, 0.18);
}

.nav-dot.answered:not(.current)[b-fu6zgzbgws] {
    border-color: #68d7a6;

    background: #ecfdf5;
    color: #047857;
}

.nav-check[b-fu6zgzbgws] {
    position: absolute;

    top: -6px;
    right: -5px;

    width: 16px;
    height: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid #ffffff;
    border-radius: 50%;

    background: #10b981;
    color: #ffffff;

    font-size: 8px;
    font-weight: 900;
}

.navigator-legend[b-fu6zgzbgws] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 17px;
    padding-top: 14px;

    border-top: 1px solid #edf1f5;
}

.navigator-legend > span[b-fu6zgzbgws] {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #64748b;

    font-size: 10px;
    font-weight: 800;
}

.legend-dot[b-fu6zgzbgws] {
    width: 9px;
    height: 9px;

    display: inline-block;

    border-radius: 3px;
}

.legend-dot.current[b-fu6zgzbgws] {
    background: #073b6d;
}

.legend-dot.answered[b-fu6zgzbgws] {
    background: #10b981;
}

.legend-dot.unanswered[b-fu6zgzbgws] {
    border: 1px solid #cbd5e1;
    background: #ffffff;
}


/* ============================================================
   SUBMISSION
   ============================================================ */

.submit-section[b-fu6zgzbgws] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 20px 22px;

    border: 1px solid #dfe7ef;
    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.045);
}

.submit-info[b-fu6zgzbgws] {
    min-width: 0;
}

.submit-info p[b-fu6zgzbgws] {
    margin: 6px 0 0;

    color: #64748b;

    font-size: 12px;
    line-height: 1.45;
}

.submit-status[b-fu6zgzbgws] {
    display: inline-flex;
    align-items: center;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 900;
}

.submit-status.ready[b-fu6zgzbgws] {
    background: #ecfdf5;
    color: #047857;
}

.submit-status.pending[b-fu6zgzbgws] {
    background: #fff7ed;
    color: #c2410c;
}

.submit-btn[b-fu6zgzbgws] {
    flex: 0 0 auto;

    min-width: 188px;

    background: #073b6d;
    color: #ffffff;

    box-shadow:
        0 8px 18px rgba(7, 59, 109, 0.18);
}

.submit-btn:hover:not(:disabled)[b-fu6zgzbgws] {
    background: #052e57;
}


/* ============================================================
   RESULT
   ============================================================ */

.result-card[b-fu6zgzbgws] {
    max-width: 720px;

    margin: 40px auto;

    text-align: center;

    padding: 46px 32px;

    border-radius: 26px;

    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.08);
}

.result-card.passed[b-fu6zgzbgws] {
    background: #f4fdf8;
    border: 1px solid #bbf7d0;
}

.result-card.failed[b-fu6zgzbgws] {
    background: #fff7f7;
    border: 1px solid #fecaca;
}

.result-icon[b-fu6zgzbgws] {
    width: 84px;
    height: 84px;

    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    font-size: 42px;
    font-weight: 900;
}

.result-card.passed .result-icon[b-fu6zgzbgws] {
    background: #10b981;

    box-shadow:
        0 12px 30px rgba(16, 185, 129, 0.22);
}

.result-card.failed .result-icon[b-fu6zgzbgws] {
    background: #ef4444;

    box-shadow:
        0 12px 30px rgba(239, 68, 68, 0.2);
}

.result-eyebrow[b-fu6zgzbgws] {
    margin-bottom: 7px;

    color: #64748b;

    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.3px;
}

.result-card h1[b-fu6zgzbgws] {
    margin: 0 0 12px;

    color: #0f172a;

    font-size: 30px;
    font-weight: 900;
}

.result-summary[b-fu6zgzbgws] {
    max-width: 540px;

    margin: 0 auto !important;

    color: #475569 !important;

    line-height: 1.6;
}

.result-stats[b-fu6zgzbgws] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    margin-top: 24px;
}

.result-stat[b-fu6zgzbgws] {
    padding: 15px 10px;

    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.65);
}

.result-stat span[b-fu6zgzbgws] {
    display: block;

    color: #64748b;

    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.result-stat strong[b-fu6zgzbgws] {
    display: block;

    margin-top: 4px;

    color: #0f172a;

    font-size: 18px;
    font-weight: 900;
}

.result-action[b-fu6zgzbgws] {
    margin-top: 24px;
    min-width: 180px;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 820px) {

    .assessment-page[b-fu6zgzbgws] {
        padding:
            20px 14px
            36px;
    }

    .assessment-header[b-fu6zgzbgws] {
        align-items: stretch;
    }

    .timer-box[b-fu6zgzbgws] {
        min-width: 150px;
    }

    .progress-stats[b-fu6zgzbgws] {
        gap: 8px;
    }

    .progress-stat[b-fu6zgzbgws] {
        padding: 10px;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {

    .assessment-page[b-fu6zgzbgws] {
        padding: 0;
        background: #f5f8fb;
    }

    .assessment-card[b-fu6zgzbgws] {
        max-width: none;
    }


    /* Header */

    .assessment-header[b-fu6zgzbgws] {
        flex-direction: column;

        gap: 17px;

        padding: 20px 18px;

        border-left: 0;
        border-right: 0;
        border-top: 0;

        border-radius: 0 0 20px 20px;

        margin-bottom: 12px;
    }

    .assessment-heading h1[b-fu6zgzbgws] {
        font-size: 24px;
    }

    .assessment-heading h1 span[b-fu6zgzbgws] {
        font-size: 17px;
    }

    .assessment-heading p[b-fu6zgzbgws] {
        font-size: 13px;
    }

    .timer-box[b-fu6zgzbgws] {
        width: 100%;

        justify-content: flex-start;

        min-width: 0;
    }


    /* Progress */

    .assessment-progress-section[b-fu6zgzbgws] {
        margin:
            0 10px
            12px;

        padding: 17px;

        border-radius: 18px;
    }

    .progress-stats[b-fu6zgzbgws] {
        grid-template-columns: repeat(3, 1fr);

        gap: 6px;
    }

    .progress-stat[b-fu6zgzbgws] {
        flex-direction: column;
        align-items: flex-start;

        gap: 6px;

        padding: 9px;
    }

    .progress-stat .stat-icon[b-fu6zgzbgws] {
        width: 27px;
        height: 27px;
    }

    .progress-stat small[b-fu6zgzbgws] {
        font-size: 8px;
    }

    .progress-stat strong[b-fu6zgzbgws] {
        font-size: 14px;
    }


    /* Question */

    .question-box[b-fu6zgzbgws] {
        margin:
            0 10px
            12px;

        padding: 19px 16px;

        border-radius: 18px;
    }

    .question-box h2[b-fu6zgzbgws] {
        margin-bottom: 18px;

        font-size: 18px;
    }

    .option-item[b-fu6zgzbgws] {
        min-height: 56px;

        padding: 12px;
    }

    .option-letter[b-fu6zgzbgws] {
        width: 31px;
        height: 31px;
    }

    .option-text[b-fu6zgzbgws] {
        font-size: 13px;
    }


    /* Previous / next */

    .question-actions[b-fu6zgzbgws] {
        gap: 8px;
    }

    .question-actions .primary-btn[b-fu6zgzbgws],
    .question-actions .secondary-btn[b-fu6zgzbgws] {
        flex: 1;
    }


    /* Navigator */

    .navigator-card[b-fu6zgzbgws] {
        margin:
            0 10px
            12px;

        padding: 17px 16px;

        border-radius: 18px;
    }

    .navigator-header[b-fu6zgzbgws] {
        flex-direction: column;

        gap: 8px;
    }

    .navigator-count[b-fu6zgzbgws] {
        align-self: flex-start;
    }

    .navigator[b-fu6zgzbgws] {
        grid-template-columns:
            repeat(5, 1fr);

        gap: 8px;
    }

    .nav-dot[b-fu6zgzbgws] {
        max-width: none;
        justify-self: stretch;
    }


    /* Submit */

    .submit-section[b-fu6zgzbgws] {
        flex-direction: column;
        align-items: stretch;

        gap: 14px;

        margin:
            0 10px
            24px;

        padding: 17px 16px;

        border-radius: 18px;
    }

    .submit-btn[b-fu6zgzbgws] {
        width: 100%;
        min-width: 0;
    }


    /* Result */

    .result-card[b-fu6zgzbgws] {
        margin:
            18px 10px;

        padding:
            34px 18px;

        border-radius: 20px;
    }

    .result-stats[b-fu6zgzbgws] {
        grid-template-columns: 1fr;
    }

    .result-action[b-fu6zgzbgws] {
        width: 100%;
    }
}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 390px) {

    .progress-stats[b-fu6zgzbgws] {
        grid-template-columns: 1fr;
    }

    .progress-stat[b-fu6zgzbgws] {
        flex-direction: row;
        align-items: center;
    }

    .navigator[b-fu6zgzbgws] {
        grid-template-columns:
            repeat(4, 1fr);
    }

    .question-number-row[b-fu6zgzbgws] {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* /Components/Pages/Contractor/Dashboard.razor.rz.scp.css */
.contractor-dashboard-page[b-yo4vqy3np5] {
    min-height: 100vh;
    padding: 34px 18px;
    background:
        radial-gradient(circle at top left, rgba(1, 193, 180, 0.18), transparent 34%),
        linear-gradient(135deg, #eef7f5 0%, #f8fafc 48%, #edf5f8 100%);
    display: flex;
    justify-content: center;
    color: #0f172a;
}

.dashboard-shell[b-yo4vqy3np5] {
    width: 100%;
    max-width: 820px;
    background: rgba(248, 250, 252, 0.92);
    border-radius: 32px;
    padding: 30px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.14);
    border: 1px solid rgba(226, 232, 240, 0.95);
    backdrop-filter: blur(12px);
}

.dashboard-hero[b-yo4vqy3np5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    padding: 22px;
    border-radius: 26px;
    background: linear-gradient(135deg, #ffffff 0%, #f1fffd 100%);
    border: 1px solid rgba(1, 193, 180, 0.16);
}

.hero-content[b-yo4vqy3np5] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.brand-mark[b-yo4vqy3np5] {
    width: 58px;
    height: 58px;
    border-radius: 19px;
    background: linear-gradient(135deg, #01C1B4 0%, #008f86 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
    font-size: 25px;
    flex-shrink: 0;
    box-shadow: 0 16px 30px rgba(1, 193, 180, 0.28);
}

.hero-text[b-yo4vqy3np5] {
    min-width: 0;
}

.eyebrow[b-yo4vqy3np5] {
    margin-bottom: 6px;
    color: #047f78;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.dashboard-hero h1[b-yo4vqy3np5] {
    margin: 0;
    font-size: 25px;
    line-height: 1.15;
    font-weight: 950;
    color: #08111f;
    text-transform: uppercase;
}

.dashboard-hero p[b-yo4vqy3np5] {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
}

.hero-badges[b-yo4vqy3np5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.status-pill[b-yo4vqy3np5],
.company-pill[b-yo4vqy3np5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.status-pill.approved[b-yo4vqy3np5] {
    color: #047857;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.status-pill.under-review[b-yo4vqy3np5] {
    color: #0369a1;
    background: #e0f2fe;
    border: 1px solid #bae6fd;
}

.status-pill.rejected[b-yo4vqy3np5] {
    color: #b91c1c;
    background: #fee2e2;
    border: 1px solid #fecaca;
}

.status-pill.pending[b-yo4vqy3np5] {
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
}

.company-pill[b-yo4vqy3np5] {
    color: #334155;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.green-pass-pill[b-yo4vqy3np5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 7px 11px;
    border-radius: 999px;
    color: #047857;
    background: #dcfce7;
    border: 1px solid #86efac;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* ============================================================
   HERO ACCOUNT ACTIONS
   ============================================================ */

.hero-actions[b-yo4vqy3np5] {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    flex-shrink: 0;
}


/* My Profile */
.profile-btn[b-yo4vqy3np5] {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 44px;

    padding: 11px 17px;

    border-radius: 15px;

    border:
        1px solid
        rgba(1, 193, 180, 0.34);

    background: #effdf9;

    color: #047f78 !important;

    text-decoration: none;

    font-size: 13px;
    font-weight: 950;

    white-space: nowrap;

    box-shadow:
        0 12px 24px
        rgba(1, 193, 180, 0.12);

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.profile-btn:hover[b-yo4vqy3np5] {
    background: #dcfdf7;

    border-color:
        rgba(1, 193, 180, 0.52);

    color: #006f69 !important;

    transform: translateY(-1px);

    box-shadow:
        0 14px 28px
        rgba(1, 193, 180, 0.17);
}


.profile-btn:focus-visible[b-yo4vqy3np5] {
    outline:
        3px solid
        rgba(1, 193, 180, 0.25);

    outline-offset: 3px;
}


.profile-btn-icon[b-yo4vqy3np5] {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    font-size: 13px;

    line-height: 1;
}

.logout-btn[b-yo4vqy3np5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #073b6d;
    color: #ffffff !important;
    text-decoration: none;
    padding: 12px 22px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 950;
    box-shadow: 0 14px 26px rgba(7, 59, 109, 0.24);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.logout-btn:hover[b-yo4vqy3np5] {
    background: #052f57;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.status-box[b-yo4vqy3np5] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px;
    border-radius: 24px;
    margin-bottom: 22px;
    border: 1px solid #dbe4ee;
}

.status-icon[b-yo4vqy3np5] {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 950;
    flex-shrink: 0;
}

.status-content span[b-yo4vqy3np5] {
    display: block;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: #64748b;
    margin-bottom: 8px;
}

.status-content strong[b-yo4vqy3np5] {
    display: block;
    font-size: 27px;
    line-height: 1.1;
    font-weight: 950;
}

.status-content p[b-yo4vqy3np5] {
    margin: 12px 0 0;
    color: #475569;
    line-height: 1.55;
}

.status-box.under-review[b-yo4vqy3np5] {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.status-box.under-review .status-icon[b-yo4vqy3np5] {
    background: #dbeafe;
    color: #0369a1;
}

.status-box.approved[b-yo4vqy3np5] {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
    border-color: #bbf7d0;
}

.status-box.approved .status-icon[b-yo4vqy3np5] {
    background: #dcfce7;
    color: #047857;
}

.status-box.rejected[b-yo4vqy3np5] {
    background: #fef2f2;
    border-color: #fecaca;
}

.status-box.rejected .status-icon[b-yo4vqy3np5] {
    background: #fee2e2;
    color: #b91c1c;
}

.status-box.pending[b-yo4vqy3np5] {
    background: #fffbeb;
    border-color: #fde68a;
}

.status-box.pending .status-icon[b-yo4vqy3np5] {
    background: #fef3c7;
    color: #92400e;
}

.boarding-notice[b-yo4vqy3np5] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border-radius: 24px;
    margin-bottom: 22px;
    border: 1px solid #dbe4ee;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.boarding-notice.approved[b-yo4vqy3np5] {
    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
    border-color: #bbf7d0;
}

.boarding-notice.denied[b-yo4vqy3np5] {
    background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
    border-color: #fecaca;
}

.boarding-notice-icon[b-yo4vqy3np5] {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 950;
    flex-shrink: 0;
}

.boarding-notice.approved .boarding-notice-icon[b-yo4vqy3np5] {
    background: #dcfce7;
    color: #047857;
}

.boarding-notice.denied .boarding-notice-icon[b-yo4vqy3np5] {
    background: #fee2e2;
    color: #b91c1c;
}

.boarding-notice-content span[b-yo4vqy3np5] {
    display: block;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: #64748b;
    margin-bottom: 7px;
}

.boarding-notice-content h2[b-yo4vqy3np5] {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 19px;
    line-height: 1.2;
    font-weight: 950;
}

.boarding-notice-content p[b-yo4vqy3np5] {
    margin: 0;
    color: #475569;
    line-height: 1.55;
}

.boarding-notice-content small[b-yo4vqy3np5] {
    display: block;
    margin-top: 10px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.journey-card[b-yo4vqy3np5] {
    margin-bottom: 26px;
    background: #ffffff;
    border: 1px solid #dbe7ef;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
}

.journey-header[b-yo4vqy3np5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 28px;
    border-bottom: 1px solid #e2e8f0;
}

.journey-eyebrow[b-yo4vqy3np5] {
    margin-bottom: 8px;
    color: #0f172a;
    font-size: 15px;
    font-weight: 950;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.journey-header p[b-yo4vqy3np5] {
    margin: 0;
    color: #55708d;
    font-size: 15px;
}

.journey-header strong[b-yo4vqy3np5] {
    color: #435873;
    font-size: 15px;
    font-weight: 950;
    white-space: nowrap;
}

.journey-grid[b-yo4vqy3np5] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 26px 28px;
    background: #f8fafc;
}

.journey-step[b-yo4vqy3np5] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-height: 112px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    transition: all 0.2s ease;
}

.journey-step.clickable[b-yo4vqy3np5] {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.journey-step.completed[b-yo4vqy3np5] {
    background: #effdf9;
    border-color: rgba(1, 193, 180, 0.34);
}

.journey-step.active[b-yo4vqy3np5] {
    background: #f0fbff;
    border-color: rgba(7, 59, 109, 0.22);
}

.journey-step.locked[b-yo4vqy3np5] {
    background: #f8fafc;
    border-color: #e2e8f0;
    opacity: 0.58;
    cursor: not-allowed;
    filter: grayscale(0.55);
}

.journey-step.rejected[b-yo4vqy3np5] {
    background: #fef2f2;
    border-color: #fecaca;
}

.journey-step.clickable:hover[b-yo4vqy3np5] {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.journey-step.clickable.active:hover[b-yo4vqy3np5] {
    border-color: rgba(7, 59, 109, 0.34);
    box-shadow: 0 14px 30px rgba(7, 59, 109, 0.1);
}

.journey-step.clickable.completed:hover[b-yo4vqy3np5] {
    border-color: rgba(1, 193, 180, 0.48);
    box-shadow: 0 14px 30px rgba(1, 193, 180, 0.1);
}

.journey-step.clickable:focus-visible[b-yo4vqy3np5] {
    outline: 3px solid rgba(1, 193, 180, 0.28);
    outline-offset: 3px;
}

.journey-icon[b-yo4vqy3np5] {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 950;
}

.journey-step.completed .journey-icon[b-yo4vqy3np5] {
    background: #009b73;
    color: #ffffff;
}

.journey-step.active .journey-icon[b-yo4vqy3np5] {
    background: #073b6d;
    color: #ffffff;
}

.journey-step.locked .journey-icon[b-yo4vqy3np5] {
    background: #e2e8f0;
    color: #64748b;
}

.journey-step.rejected .journey-icon[b-yo4vqy3np5] {
    background: #dc2626;
    color: #ffffff;
}

.journey-step h3[b-yo4vqy3np5] {
    margin: 2px 0 8px;
    color: #071426;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 950;
}

.journey-step p[b-yo4vqy3np5] {
    margin: 0;
    color: #047f78;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 850;
}

.journey-step.locked p[b-yo4vqy3np5] {
    color: #64748b;
}

.journey-step.locked h3[b-yo4vqy3np5] {
    color: #64748b;
}

.journey-step.rejected p[b-yo4vqy3np5] {
    color: #b91c1c;
}

.next-step-card[b-yo4vqy3np5] {
    display: flex;
    gap: 18px;
    padding: 24px;
    border-radius: 26px;
    margin-bottom: 26px;
    background:
        radial-gradient(circle at top right, rgba(1, 193, 180, 0.28), transparent 34%),
        linear-gradient(135deg, #073b6d 0%, #052f57 100%);
    color: #ffffff;
    box-shadow: 0 22px 42px rgba(7, 59, 109, 0.26);
    overflow: hidden;
    position: relative;
}

.next-step-card[b-yo4vqy3np5]::after {
    content: "";
    position: absolute;
    right: -42px;
    bottom: -42px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.next-step-icon[b-yo4vqy3np5] {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    font-weight: 950;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.next-step-content[b-yo4vqy3np5] {
    position: relative;
    z-index: 1;
}

.next-step-content span[b-yo4vqy3np5] {
    display: block;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 7px;
}

.next-step-content h2[b-yo4vqy3np5] {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 23px;
    line-height: 1.15;
    font-weight: 950;
}

.next-step-content p[b-yo4vqy3np5] {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.6;
}

.next-step-btn[b-yo4vqy3np5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #01C1B4;
    color: #ffffff !important;
    text-decoration: none;
    padding: 12px 18px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 950;
    box-shadow: 0 14px 26px rgba(1, 193, 180, 0.24);
    transition: all 0.2s ease;
}

.next-step-btn:hover[b-yo4vqy3np5] {
    background: #00a99e;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.green-pass-card[b-yo4vqy3np5],
.boarding-request-card[b-yo4vqy3np5],
.non-is-card[b-yo4vqy3np5] {
    display: flex;
    gap: 18px;
    padding: 24px;
    border-radius: 26px;
    margin-bottom: 26px;
    color: #0f172a;
    overflow: hidden;
    position: relative;
}

.green-pass-card[b-yo4vqy3np5] {
    background:
        radial-gradient(circle at top right, rgba(1, 193, 180, 0.24), transparent 34%),
        linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
    border: 1px solid rgba(1, 193, 180, 0.28);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
}

.boarding-request-card[b-yo4vqy3np5] {
    background:
        radial-gradient(circle at top right, rgba(7, 59, 109, 0.12), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #f0fbff 100%);
    border: 1px solid rgba(7, 59, 109, 0.14);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
}

.non-is-card[b-yo4vqy3np5] {
    background:
        radial-gradient(circle at top right, rgba(249, 115, 22, 0.14), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);
    border: 1px solid #fed7aa;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
}

.green-pass-card-icon[b-yo4vqy3np5],
.boarding-request-icon[b-yo4vqy3np5],
.non-is-icon[b-yo4vqy3np5] {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 950;
    flex-shrink: 0;
}

.green-pass-card-icon[b-yo4vqy3np5] {
    background: #009b73;
    box-shadow: 0 16px 30px rgba(0, 155, 115, 0.24);
}

.boarding-request-icon[b-yo4vqy3np5] {
    background: #073b6d;
    box-shadow: 0 16px 30px rgba(7, 59, 109, 0.22);
}

.non-is-icon[b-yo4vqy3np5] {
    background: #ea580c;
    box-shadow: 0 16px 30px rgba(249, 115, 22, 0.24);
}

.green-pass-card-content[b-yo4vqy3np5],
.boarding-request-content[b-yo4vqy3np5],
.non-is-content[b-yo4vqy3np5] {
    width: 100%;
    min-width: 0;
}

.green-pass-card-content span[b-yo4vqy3np5],
.boarding-request-content span[b-yo4vqy3np5],
.non-is-content > span[b-yo4vqy3np5] {
    display: block;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: #047f78;
    margin-bottom: 7px;
}

.boarding-request-content span[b-yo4vqy3np5] {
    color: #0369a1;
}

.non-is-content > span[b-yo4vqy3np5] {
    color: #c2410c;
}

.green-pass-card-content h2[b-yo4vqy3np5],
.boarding-request-content h2[b-yo4vqy3np5],
.non-is-content h2[b-yo4vqy3np5] {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 23px;
    line-height: 1.15;
    font-weight: 950;
}

.green-pass-card-content p[b-yo4vqy3np5],
.boarding-request-content p[b-yo4vqy3np5],
.non-is-content p[b-yo4vqy3np5] {
    margin: 0 0 16px;
    color: #475569;
    line-height: 1.6;
}

.green-pass-meta[b-yo4vqy3np5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.green-pass-meta div[b-yo4vqy3np5] {
    padding: 13px 14px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #dbeafe;
}

.green-pass-meta small[b-yo4vqy3np5] {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.green-pass-meta strong[b-yo4vqy3np5] {
    display: block;
    color: #0f172a;
    font-size: 13px;
    font-weight: 950;
}

.green-pass-actions[b-yo4vqy3np5] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.green-pass-btn[b-yo4vqy3np5],
.print-pass-btn[b-yo4vqy3np5],
.boarding-submit-btn[b-yo4vqy3np5],
.non-is-submit-btn[b-yo4vqy3np5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    padding: 12px 18px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 950;
    transition: all 0.2s ease;
}

.green-pass-btn[b-yo4vqy3np5] {
    background: #073b6d;
    color: #ffffff !important;
    box-shadow: 0 14px 26px rgba(7, 59, 109, 0.22);
}

.green-pass-btn:hover[b-yo4vqy3np5] {
    background: #052f57;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.print-pass-btn[b-yo4vqy3np5] {
    background: #0f766e;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(15, 118, 110, 0.20);
}

.print-pass-btn:hover[b-yo4vqy3np5] {
    background: #115e59;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.boarding-form[b-yo4vqy3np5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin-top: 18px;
}

.boarding-field label[b-yo4vqy3np5] {
    display: block;
    margin-bottom: 7px;
    color: #334155;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.boarding-date-input[b-yo4vqy3np5] {
    width: 100%;
    min-height: 48px;
    border: 1px solid #cbd5e1;
    border-radius: 15px;
    padding: 11px 14px;
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    font-weight: 850;
    outline: none;
    transition: all 0.2s ease;
}

.boarding-date-input:focus[b-yo4vqy3np5] {
    border-color: #01C1B4;
    box-shadow: 0 0 0 4px rgba(1, 193, 180, 0.14);
}

.boarding-submit-btn[b-yo4vqy3np5] {
    min-height: 48px;
    background: #073b6d;
    color: #ffffff;
    box-shadow: 0 14px 26px rgba(7, 59, 109, 0.2);
    white-space: nowrap;
}

.boarding-submit-btn:hover:not(:disabled)[b-yo4vqy3np5] {
    background: #052f57;
    transform: translateY(-1px);
}

.boarding-submit-btn:disabled[b-yo4vqy3np5],
.non-is-submit-btn:disabled[b-yo4vqy3np5] {
    cursor: not-allowed;
    opacity: 0.68;
    transform: none;
    box-shadow: none;
}

.boarding-warning[b-yo4vqy3np5] {
    margin-top: 16px;
    padding: 13px 15px;
    border-radius: 16px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.5;
}

.boarding-form-message[b-yo4vqy3np5] {
    margin-top: 14px;
    padding: 13px 15px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.5;
}

.boarding-form-message.success[b-yo4vqy3np5] {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #047857;
}

.boarding-form-message.error[b-yo4vqy3np5] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

/* Non-IS Equipment Request */
.non-is-permission-note[b-yo4vqy3np5] {
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid #bbf7d0;
    background: #ecfdf5;
    color: #047857;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.5;
    margin-bottom: 14px;
}

.non-is-permission-note strong[b-yo4vqy3np5] {
    font-weight: 950;
}

.non-is-note[b-yo4vqy3np5] {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.non-is-form-grid[b-yo4vqy3np5],
.non-is-item-grid[b-yo4vqy3np5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.non-is-form-grid .full[b-yo4vqy3np5],
.non-is-item-grid .full[b-yo4vqy3np5] {
    grid-column: 1 / -1;
}

.non-is-form-grid label[b-yo4vqy3np5],
.non-is-item-grid label[b-yo4vqy3np5] {
    display: block;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.non-is-form-grid input[b-yo4vqy3np5],
.non-is-form-grid textarea[b-yo4vqy3np5],
.non-is-item-grid input[b-yo4vqy3np5] {
    width: 100%;
    min-height: 46px;
    border: 1px solid #cbd5e1;
    border-radius: 15px;
    background: #ffffff;
    color: #0f172a;
    padding: 12px 13px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 750;
    outline: none;
    transition: all 0.2s ease;
}

.non-is-form-grid textarea[b-yo4vqy3np5] {
    resize: vertical;
    min-height: 92px;
    line-height: 1.5;
}

.non-is-form-grid input:focus[b-yo4vqy3np5],
.non-is-form-grid textarea:focus[b-yo4vqy3np5],
.non-is-item-grid input:focus[b-yo4vqy3np5] {
    border-color: #f97316;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.12);
}

.non-is-equipment-section[b-yo4vqy3np5] {
    margin-top: 16px;
}

.non-is-equipment-header[b-yo4vqy3np5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.non-is-equipment-header span[b-yo4vqy3np5] {
    display: block;
    color: #c2410c;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.non-is-equipment-header strong[b-yo4vqy3np5] {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
}

.non-is-add-btn[b-yo4vqy3np5],
.non-is-remove-btn[b-yo4vqy3np5] {
    border: 1px solid #fed7aa;
    background: #fff7ed;
    color: #c2410c;
    border-radius: 999px;
    padding: 9px 13px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 950;
    cursor: pointer;
    transition: all 0.2s ease;
}

.non-is-add-btn:hover[b-yo4vqy3np5],
.non-is-remove-btn:hover[b-yo4vqy3np5] {
    background: #ffedd5;
    transform: translateY(-1px);
}

.non-is-equipment-item[b-yo4vqy3np5] {
    border: 1px solid #fed7aa;
    border-radius: 20px;
    background: #fffaf5;
    padding: 15px;
    margin-bottom: 12px;
}

.non-is-item-title[b-yo4vqy3np5] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.non-is-item-title strong[b-yo4vqy3np5] {
    color: #0f172a;
    font-size: 14px;
    font-weight: 950;
}

.non-is-submit-btn[b-yo4vqy3np5] {
    width: 100%;
    min-height: 48px;
    margin-top: 14px;
    background: linear-gradient(135deg, #ea580c, #f97316);
    color: #ffffff;
    box-shadow: 0 16px 32px rgba(249, 115, 22, 0.22);
}

.non-is-submit-btn:hover:not(:disabled)[b-yo4vqy3np5] {
    transform: translateY(-1px);
    box-shadow: 0 20px 40px rgba(249, 115, 22, 0.28);
}

.recent-non-is-list[b-yo4vqy3np5] {
    margin-top: 18px;
    border-top: 1px solid #fed7aa;
    padding-top: 14px;
}

.recent-non-is-title[b-yo4vqy3np5] {
    margin-bottom: 10px;
    color: #c2410c;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.recent-non-is-item[b-yo4vqy3np5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #ffedd5;
}

.recent-non-is-item:last-child[b-yo4vqy3np5] {
    border-bottom: none;
}

.recent-non-is-item strong[b-yo4vqy3np5] {
    display: block;
    color: #0f172a;
    font-size: 13px;
    font-weight: 950;
}

.recent-non-is-item small[b-yo4vqy3np5] {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
}

.non-is-status[b-yo4vqy3np5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap;
}

.non-is-status.approved[b-yo4vqy3np5] {
    color: #047857;
    background: #d1fae5;
}

.non-is-status.rejected[b-yo4vqy3np5] {
    color: #be123c;
    background: #ffe4e6;
}

.non-is-status.pending[b-yo4vqy3np5] {
    color: #b45309;
    background: #fef3c7;
}

.section-header[b-yo4vqy3np5] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin: 6px 0 14px;
}

.section-header span[b-yo4vqy3np5] {
    display: block;
    margin-bottom: 4px;
    color: #047f78;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.section-header h2[b-yo4vqy3np5] {
    margin: 0;
    font-size: 19px;
    line-height: 1.2;
    font-weight: 950;
    color: #0f172a;
}

.info-grid[b-yo4vqy3np5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 26px;
}

.info-card[b-yo4vqy3np5] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 17px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.info-card span[b-yo4vqy3np5],
.remarks-box span[b-yo4vqy3np5] {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 950;
    margin-bottom: 7px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.info-card strong[b-yo4vqy3np5] {
    color: #0f172a;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 950;
    text-transform: uppercase;
    word-break: break-word;
}

.document-header[b-yo4vqy3np5] {
    margin-top: 2px;
}

.document-count[b-yo4vqy3np5] {
    padding: 7px 11px;
    border-radius: 999px;
    background: #eef2f7;
    color: #475569;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.document-list[b-yo4vqy3np5] {
    display: grid;
    gap: 12px;
}

.document-item[b-yo4vqy3np5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 15px 16px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
    transition: all 0.2s ease;
}

.document-item:hover[b-yo4vqy3np5] {
    border-color: rgba(1, 193, 180, 0.42);
    transform: translateY(-1px);
}

.document-left[b-yo4vqy3np5] {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.document-icon[b-yo4vqy3np5] {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    background: #f1fffd;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(1, 193, 180, 0.18);
}

.document-item strong[b-yo4vqy3np5] {
    display: block;
    color: #0f172a;
    font-size: 14px;
    font-weight: 950;
}

.document-item small[b-yo4vqy3np5] {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 12px;
}

.uploaded-badge[b-yo4vqy3np5] {
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    white-space: nowrap;
}

.uploaded-badge.approved[b-yo4vqy3np5] {
    background: rgba(1, 193, 180, 0.13);
    color: #047f78;
    border: 1px solid rgba(1, 193, 180, 0.22);
}

.uploaded-badge.pending[b-yo4vqy3np5] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.uploaded-badge.expired[b-yo4vqy3np5] {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.remarks-box[b-yo4vqy3np5] {
    margin-top: 22px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 17px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.remarks-box p[b-yo4vqy3np5] {
    margin: 0;
    color: #0f172a;
    line-height: 1.55;
}

.alert.error[b-yo4vqy3np5] {
    padding: 16px;
    border-radius: 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-weight: 900;
}


/* Non-IS accordion */
.non-is-card[b-yo4vqy3np5] {
    display: block;
    padding: 0;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.non-is-card.collapsed[b-yo4vqy3np5] {
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.non-is-card.expanded[b-yo4vqy3np5] {
    box-shadow: 0 22px 48px rgba(249, 115, 22, 0.14);
}

.non-is-card-header[b-yo4vqy3np5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
}

.non-is-header-main[b-yo4vqy3np5] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}

.non-is-header-copy[b-yo4vqy3np5] {
    min-width: 0;
}

.non-is-header-copy > span[b-yo4vqy3np5] {
    display: block;
    margin-bottom: 6px;
    color: #c2410c;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.non-is-header-copy h2[b-yo4vqy3np5] {
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 950;
}

.non-is-header-copy p[b-yo4vqy3np5] {
    max-width: 510px;
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

.non-is-header-actions[b-yo4vqy3np5] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
    flex-shrink: 0;
}

.non-is-access-pill[b-yo4vqy3np5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #047857;
    background: #dcfce7;
    border: 1px solid #86efac;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.non-is-accordion-toggle[b-yo4vqy3np5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 40px;
    padding: 10px 14px;
    border: 1px solid #fdba74;
    border-radius: 13px;
    background: #ffffff;
    color: #c2410c;
    font-family: inherit;
    font-size: 12px;
    font-weight: 950;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.non-is-accordion-toggle:hover[b-yo4vqy3np5] {
    background: #fff7ed;
    border-color: #f97316;
    transform: translateY(-1px);
}

.non-is-toggle-chevron[b-yo4vqy3np5] {
    font-size: 10px;
    line-height: 1;
}

.non-is-compact-warning[b-yo4vqy3np5] {
    margin: 0 22px 20px;
}

.non-is-latest-summary[b-yo4vqy3np5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 22px 18px;
    padding: 13px 15px;
    border: 1px solid #fed7aa;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.76);
}

.non-is-latest-summary > div[b-yo4vqy3np5] {
    min-width: 0;
}

.non-is-latest-summary > div > span[b-yo4vqy3np5] {
    display: block;
    margin-bottom: 4px;
    color: #c2410c;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.non-is-latest-summary strong[b-yo4vqy3np5] {
    display: block;
    overflow: hidden;
    color: #0f172a;
    font-size: 13px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.non-is-latest-summary small[b-yo4vqy3np5] {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
}

.non-is-accordion-message[b-yo4vqy3np5] {
    margin: 0 22px 18px;
}

.non-is-accordion-body[b-yo4vqy3np5] {
    padding: 20px 22px 22px;
    border-top: 1px solid #fed7aa;
    background: rgba(255, 255, 255, 0.38);
    animation: non-is-expand-b-yo4vqy3np5 0.18s ease-out;
}

@keyframes non-is-expand-b-yo4vqy3np5 {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

@media (max-width: 720px) {
    .non-is-card[b-yo4vqy3np5] {
        padding: 0;
    }

    .non-is-card-header[b-yo4vqy3np5] {
        flex-direction: column;
        padding: 18px;
    }

    .non-is-header-main[b-yo4vqy3np5] {
        width: 100%;
    }

    .non-is-header-actions[b-yo4vqy3np5] {
        width: 100%;
        align-items: stretch;
    }

    .non-is-access-pill[b-yo4vqy3np5] {
        align-self: flex-start;
    }

    .non-is-accordion-toggle[b-yo4vqy3np5] {
        width: 100%;
    }

    .non-is-compact-warning[b-yo4vqy3np5],
    .non-is-latest-summary[b-yo4vqy3np5],
    .non-is-accordion-message[b-yo4vqy3np5] {
        margin-left: 18px;
        margin-right: 18px;
    }

    .non-is-latest-summary[b-yo4vqy3np5] {
        align-items: flex-start;
        flex-direction: column;
    }

    .non-is-accordion-body[b-yo4vqy3np5] {
        padding: 18px;
    }

    .contractor-dashboard-page[b-yo4vqy3np5] {
        padding: 0;
        background: #f8fafc;
    }

    .dashboard-shell[b-yo4vqy3np5] {
        min-height: 100vh;
        border-radius: 0;
        border: none;
        box-shadow: none;
        padding: 22px;
    }

    .dashboard-hero[b-yo4vqy3np5] {
        flex-direction: column;
        padding: 20px;
    }

    .hero-content[b-yo4vqy3np5] {
        width: 100%;
    }

    .dashboard-hero h1[b-yo4vqy3np5] {
        font-size: 21px;
    }

    .hero-actions[b-yo4vqy3np5] {
    width: 100%;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;
}


.profile-btn[b-yo4vqy3np5],
.logout-btn[b-yo4vqy3np5] {
    width: 100%;

    min-height: 48px;

    padding: 14px 16px;

    box-sizing: border-box;
}

    .status-box[b-yo4vqy3np5],
    .boarding-notice[b-yo4vqy3np5] {
        flex-direction: column;
        padding: 20px;
    }

    .status-content strong[b-yo4vqy3np5] {
        font-size: 24px;
    }

    .journey-header[b-yo4vqy3np5] {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px;
    }

    .journey-grid[b-yo4vqy3np5] {
        grid-template-columns: 1fr;
        padding: 22px;
    }

    .journey-step[b-yo4vqy3np5] {
        min-height: unset;
    }

    .next-step-card[b-yo4vqy3np5],
    .green-pass-card[b-yo4vqy3np5],
    .boarding-request-card[b-yo4vqy3np5] {
        flex-direction: column;
        padding: 22px;
    }

    .next-step-content h2[b-yo4vqy3np5],
    .green-pass-card-content h2[b-yo4vqy3np5],
    .boarding-request-content h2[b-yo4vqy3np5],
    .non-is-content h2[b-yo4vqy3np5] {
        font-size: 21px;
    }

    .next-step-btn[b-yo4vqy3np5] {
        width: 100%;
        padding: 14px 18px;
    }

    .green-pass-meta[b-yo4vqy3np5] {
        grid-template-columns: 1fr;
    }

    .green-pass-actions[b-yo4vqy3np5] {
        flex-direction: column;
    }

    .green-pass-actions .green-pass-btn[b-yo4vqy3np5],
    .green-pass-actions .print-pass-btn[b-yo4vqy3np5] {
        width: 100%;
        padding: 14px 18px;
    }

    .boarding-form[b-yo4vqy3np5] {
        grid-template-columns: 1fr;
    }

    .boarding-submit-btn[b-yo4vqy3np5] {
        width: 100%;
        padding: 14px 18px;
    }

    .non-is-form-grid[b-yo4vqy3np5],
    .non-is-item-grid[b-yo4vqy3np5] {
        grid-template-columns: 1fr;
    }

    .non-is-form-grid .full[b-yo4vqy3np5],
    .non-is-item-grid .full[b-yo4vqy3np5] {
        grid-column: auto;
    }

    .non-is-equipment-header[b-yo4vqy3np5],
    .recent-non-is-item[b-yo4vqy3np5] {
        align-items: flex-start;
        flex-direction: column;
    }

    .non-is-add-btn[b-yo4vqy3np5],
    .non-is-remove-btn[b-yo4vqy3np5],
    .non-is-submit-btn[b-yo4vqy3np5] {
        width: 100%;
    }

    .section-header[b-yo4vqy3np5] {
        align-items: flex-start;
        flex-direction: column;
    }

    .info-grid[b-yo4vqy3np5] {
        grid-template-columns: 1fr;
    }

    .document-item[b-yo4vqy3np5] {
        align-items: flex-start;
        flex-direction: column;
    }

    .document-left[b-yo4vqy3np5] {
        align-items: flex-start;
    }

    .uploaded-badge[b-yo4vqy3np5] {
        align-self: flex-start;
    }
}

@media (max-width: 420px) {
    .dashboard-shell[b-yo4vqy3np5] {
        padding: 18px;
    }

    .brand-mark[b-yo4vqy3np5] {
        width: 50px;
        height: 50px;
        border-radius: 17px;
        font-size: 22px;
    }

    .dashboard-hero h1[b-yo4vqy3np5] {
        font-size: 19px;
    }
}
/* /Components/Pages/Contractor/Documents.razor.rz.scp.css */
/* =========================================================
   Documents.razor.css
   Page-specific styles for Contractor Document Upload

   Shared/global CSS variables are used from:
   wwwroot/css/jru-shared.css

   This file keeps:
   - public contractor upload page layout
   - document upload card styling
   - expiry/date upload controls
   - submit button
   - thank-you submission modal
   ========================================================= */

/* =========================================================
   Page Shell
   ========================================================= */

.documents-page[b-7m9qmxw3x9] {
    min-height: 100vh;
    padding: 32px 18px;
    background:
        radial-gradient(circle at top left, rgba(1, 193, 180, 0.12), transparent 30%),
        linear-gradient(135deg, #eef6f5 0%, #f8fafc 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    color: var(--jru-slate-900, #0f172a);
}

.documents-page *[b-7m9qmxw3x9],
.documents-page *[b-7m9qmxw3x9]::before,
.documents-page *[b-7m9qmxw3x9]::after {
    box-sizing: border-box;
}

.documents-card[b-7m9qmxw3x9] {
    width: 100%;
    max-width: 760px;
    background: var(--jru-slate-50, #f8fafc);
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.12);
    border: 1px solid var(--jru-slate-200, #e2e8f0);
}

/* =========================================================
   Brand Header
   ========================================================= */

.brand[b-7m9qmxw3x9] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.brand-mark[b-7m9qmxw3x9] {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--jru-primary, #01C1B4);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
    font-size: 24px;
    box-shadow: 0 8px 20px rgba(1, 193, 180, 0.25);
    flex: 0 0 auto;
}

.brand-mark[b-7m9qmxw3x9]::before {
    content: "J";
}

.brand h1[b-7m9qmxw3x9] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 28px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.brand p[b-7m9qmxw3x9] {
    margin: 4px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 14px;
    line-height: 1.5;
}

/* =========================================================
   Contractor Info / Notes
   ========================================================= */

.contractor-box[b-7m9qmxw3x9],
.document-note[b-7m9qmxw3x9] {
    margin-bottom: 18px;
    padding: 18px;
    border-radius: 16px;
    background: rgba(1, 193, 180, 0.08);
    border: 1px solid rgba(1, 193, 180, 0.25);
    color: var(--jru-slate-900, #0f172a);
}

.contractor-box span[b-7m9qmxw3x9] {
    display: block;
    margin-bottom: 6px;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}

.contractor-box strong[b-7m9qmxw3x9] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 18px;
    font-weight: 950;
    line-height: 1.3;
}

.contractor-box small[b-7m9qmxw3x9] {
    display: block;
    margin-top: 4px;
    color: var(--jru-slate-600, #475569);
    font-size: 13px;
    font-weight: 700;
}

.document-note[b-7m9qmxw3x9] {
    color: var(--jru-slate-700, #334155);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.65;
}

.bottom-note[b-7m9qmxw3x9] {
    margin-top: 22px;
    margin-bottom: 0;
}

/* =========================================================
   Upload List / Cards
   ========================================================= */

.upload-list[b-7m9qmxw3x9] {
    display: grid;
    gap: 14px;
}

.upload-card[b-7m9qmxw3x9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #dbe4ee;
    border-radius: 18px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.upload-card:hover[b-7m9qmxw3x9] {
    border-color: rgba(1, 193, 180, 0.35);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.upload-card.uploaded[b-7m9qmxw3x9] {
    border-color: rgba(1, 193, 180, 0.45);
    background: rgba(1, 193, 180, 0.06);
}

.upload-info[b-7m9qmxw3x9] {
    min-width: 0;
}

.upload-info strong[b-7m9qmxw3x9] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 15px;
    font-weight: 950;
    line-height: 1.3;
}

.upload-info small[b-7m9qmxw3x9] {
    display: block;
    margin-top: 4px;
    color: var(--jru-slate-500, #64748b);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 650;
}

.uploaded-status[b-7m9qmxw3x9],
.pending-status[b-7m9qmxw3x9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    min-height: 24px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}

.uploaded-status[b-7m9qmxw3x9] {
    background: rgba(1, 193, 180, 0.14);
    color: #047f78;
    border: 1px solid rgba(1, 193, 180, 0.24);
}

.pending-status[b-7m9qmxw3x9] {
    background: var(--jru-slate-100, #f1f5f9);
    color: var(--jru-slate-500, #64748b);
    border: 1px solid var(--jru-slate-200, #e2e8f0);
}

.expiry-display[b-7m9qmxw3x9] {
    margin-top: 8px;
    color: var(--jru-slate-600, #475569);
    font-size: 12px;
    font-weight: 800;
}

/* =========================================================
   Upload Actions / Expiry
   ========================================================= */

.upload-action[b-7m9qmxw3x9] {
    width: 220px;
    display: grid;
    gap: 10px;
    flex: 0 0 auto;
}

.expiry-field label[b-7m9qmxw3x9] {
    display: block;
    margin-bottom: 6px;
    color: var(--jru-slate-700, #334155);
    font-size: 12px;
    font-weight: 900;
}

.expiry-input[b-7m9qmxw3x9] {
    width: 100%;
    height: 42px;
    border: 1px solid #dbe4ee;
    border-radius: 12px;
    background: #ffffff;
    color: var(--jru-slate-900, #0f172a);
    padding: 0 12px;
    font-size: 14px;
    font-weight: 700;
    outline: none;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.expiry-input:focus[b-7m9qmxw3x9] {
    border-color: var(--jru-primary, #01C1B4);
    box-shadow: 0 0 0 4px rgba(1, 193, 180, 0.15);
    background: #ffffff;
}

.upload-button[b-7m9qmxw3x9] {
    position: relative;
    width: 100%;
    height: 48px;
    border-radius: 14px;
    background: #073b6d;
    color: #ffffff;
    font-size: 13px;
    font-weight: 950;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(7, 59, 109, 0.2);
    overflow: hidden;
    transition:
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.upload-button:hover[b-7m9qmxw3x9] {
    background: #052f57;
    box-shadow: 0 14px 26px rgba(7, 59, 109, 0.24);
    transform: translateY(-1px);
}

.upload-button:active[b-7m9qmxw3x9] {
    transform: translateY(0);
}

.upload-button.replace-button[b-7m9qmxw3x9] {
    background: linear-gradient(135deg, var(--jru-primary, #01C1B4), #0f766e);
    box-shadow: 0 10px 20px rgba(1, 193, 180, 0.22);
}

.upload-button.replace-button:hover[b-7m9qmxw3x9] {
    background: linear-gradient(135deg, #0f766e, var(--jru-primary, #01C1B4));
    box-shadow: 0 14px 26px rgba(1, 193, 180, 0.28);
}

/* =========================================================
   Submit Button
   ========================================================= */

.submit-btn[b-7m9qmxw3x9] {
    width: 100%;
    min-height: 62px;
    margin-top: 22px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #073b6d, #0f766e);
    color: #ffffff;
    font-size: 16px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 16px 34px rgba(7, 59, 109, 0.22);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        opacity 0.18s ease;
}

.submit-btn:hover[b-7m9qmxw3x9] {
    transform: translateY(-1px);
    box-shadow: 0 20px 42px rgba(7, 59, 109, 0.28);
}

.submit-btn:active[b-7m9qmxw3x9] {
    transform: translateY(0);
}

.submit-btn:disabled[b-7m9qmxw3x9] {
    cursor: not-allowed;
    opacity: 0.68;
    transform: none;
    box-shadow: none;
}

/* =========================================================
   Alerts
   ========================================================= */

.alert[b-7m9qmxw3x9] {
    margin-top: 20px;
    padding: 16px 18px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.5;
}

.alert.success[b-7m9qmxw3x9] {
    background: rgba(1, 193, 180, 0.10);
    border: 1px solid rgba(1, 193, 180, 0.30);
    color: #047f78;
}

.alert.error[b-7m9qmxw3x9] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

/* =========================================================
   Submission Thank You Modal
   ========================================================= */

.submission-modal-backdrop[b-7m9qmxw3x9] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 24px;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.submission-modal[b-7m9qmxw3x9] {
    width: min(460px, 100%);
    background: #ffffff;
    border-radius: 28px;
    padding: 30px;
    text-align: center;
    border: 1px solid #d6e5df;
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28);
    animation: submission-modal-in-b-7m9qmxw3x9 0.18s ease-out;
}

@keyframes submission-modal-in-b-7m9qmxw3x9 {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

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

.submission-icon[b-7m9qmxw3x9] {
    width: 66px;
    height: 66px;
    margin: 0 auto 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--jru-primary, #01C1B4), #0f766e);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 950;
    box-shadow: 0 16px 34px rgba(1, 193, 180, 0.25);
}

.submission-modal h2[b-7m9qmxw3x9] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 24px;
    font-weight: 950;
    letter-spacing: -0.04em;
    line-height: 1.18;
}

.submission-modal p[b-7m9qmxw3x9] {
    margin: 12px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 14px;
    line-height: 1.65;
    font-weight: 650;
}

.submission-summary[b-7m9qmxw3x9] {
    margin: 18px 0;
    padding: 14px 16px;
    border-radius: 18px;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
}

.submission-summary span[b-7m9qmxw3x9] {
    display: block;
    margin-bottom: 5px;
    color: #0f766e;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.submission-summary strong[b-7m9qmxw3x9] {
    display: block;
    color: #0f766e;
    font-size: 18px;
    font-weight: 950;
}

.submission-note[b-7m9qmxw3x9] {
    background: var(--jru-slate-50, #f8fafc);
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    border-radius: 16px;
    padding: 12px 14px;
}

.submission-ok-btn[b-7m9qmxw3x9] {
    width: 100%;
    min-height: 46px;
    margin-top: 20px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #0f766e, var(--jru-primary, #01C1B4));
    color: #ffffff;
    font-size: 14px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(1, 193, 180, 0.22);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.submission-ok-btn:hover[b-7m9qmxw3x9] {
    transform: translateY(-1px);
    box-shadow: 0 18px 38px rgba(1, 193, 180, 0.28);
}

.submission-ok-btn:active[b-7m9qmxw3x9] {
    transform: translateY(0);
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 720px) {
    .documents-page[b-7m9qmxw3x9] {
        padding: 0;
        background: var(--jru-slate-50, #f8fafc);
    }

    .documents-card[b-7m9qmxw3x9] {
        max-width: none;
        min-height: 100vh;
        border-radius: 0;
        border: none;
        box-shadow: none;
        padding: 24px;
    }

    .brand[b-7m9qmxw3x9] {
        align-items: flex-start;
    }

    .brand h1[b-7m9qmxw3x9] {
        font-size: 24px;
    }

    .upload-card[b-7m9qmxw3x9] {
        flex-direction: column;
        align-items: stretch;
    }

    .upload-action[b-7m9qmxw3x9] {
        width: 100%;
    }

    .upload-button[b-7m9qmxw3x9] {
        height: 52px;
    }

    .submit-btn[b-7m9qmxw3x9] {
        min-height: 64px;
    }

    .submission-modal-backdrop[b-7m9qmxw3x9] {
        padding: 18px;
        align-items: flex-start;
    }

    .submission-modal[b-7m9qmxw3x9] {
        margin-top: 48px;
        padding: 26px 22px;
        border-radius: 24px;
    }

    .submission-modal h2[b-7m9qmxw3x9] {
        font-size: 22px;
    }
}

@media (max-width: 420px) {
    .documents-card[b-7m9qmxw3x9] {
        padding: 20px;
    }

    .brand-mark[b-7m9qmxw3x9] {
        width: 48px;
        height: 48px;
        border-radius: 15px;
    }

    .contractor-box[b-7m9qmxw3x9],
    .document-note[b-7m9qmxw3x9],
    .upload-card[b-7m9qmxw3x9] {
        padding: 16px;
    }

    .submission-icon[b-7m9qmxw3x9] {
        width: 60px;
        height: 60px;
        font-size: 30px;
    }
}
/* /Components/Pages/Contractor/GreenPass.razor.rz.scp.css */
.green-pass-page[b-ukciupr2z6] {
    min-height: 100vh;
    padding: 32px 18px;
    background: #eef6f5;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    color: #0f172a;
}

.pass-card[b-ukciupr2z6] {
    width: 100%;
    max-width: 430px;
    background: #ffffff;
    border-radius: 30px;
    padding: 26px;
    border: 1px solid #dbe7df;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.16);
}

.pass-header[b-ukciupr2z6] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
}

.pass-header span[b-ukciupr2z6] {
    display: block;
    color: #059669;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 6px;
}

.pass-header h1[b-ukciupr2z6] {
    margin: 0;
    font-size: 30px;
    font-weight: 950;
    color: #0f172a;
}

.valid-badge[b-ukciupr2z6] {
    height: fit-content;
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 950;
    border: 1px solid transparent;
    white-space: nowrap;
}

.valid-badge.valid[b-ukciupr2z6] {
    background: #dcfce7;
    color: #15803d;
    border-color: #bbf7d0;
}

.valid-badge.expired[b-ukciupr2z6] {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}

.valid-badge.inactive[b-ukciupr2z6] {
    background: #fef3c7;
    color: #92400e;
    border-color: #fcd34d;
}

.valid-badge.not-found[b-ukciupr2z6] {
    background: #e2e8f0;
    color: #475569;
    border-color: #cbd5e1;
}

.pass-alert[b-ukciupr2z6] {
    margin: 0 0 22px;
    padding: 14px 16px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
}

.pass-alert.success[b-ukciupr2z6] {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #86efac;
}

.pass-alert.warning[b-ukciupr2z6] {
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fcd34d;
}

.pass-alert.error[b-ukciupr2z6] {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
}

.pass-alert.info[b-ukciupr2z6] {
    color: #1e40af;
    background: #dbeafe;
    border: 1px solid #93c5fd;
}

.photo-wrap[b-ukciupr2z6] {
    width: 128px;
    height: 128px;
    margin: 0 auto 18px;
    border-radius: 28px;
    overflow: hidden;
    background: #e2e8f0;
    border: 4px solid #f8fafc;
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.18);
}

.photo-wrap img[b-ukciupr2z6],
.photo-placeholder[b-ukciupr2z6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-placeholder[b-ukciupr2z6] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #01C1B4;
    color: #ffffff;
    font-size: 42px;
    font-weight: 950;
}

.contractor-name[b-ukciupr2z6] {
    text-align: center;
    font-size: 22px;
    font-weight: 950;
    color: #0f172a;
    line-height: 1.3;
}

.contractor-company[b-ukciupr2z6] {
    margin-top: 6px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
    font-weight: 800;
}

.pass-info[b-ukciupr2z6] {
    display: grid;
    gap: 10px;
    margin: 24px 0;
}

.pass-info div[b-ukciupr2z6] {
    padding: 14px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.pass-info span[b-ukciupr2z6] {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 5px;
}

.pass-info strong[b-ukciupr2z6] {
    color: #0f172a;
    font-size: 15px;
    font-weight: 950;
    word-break: break-word;
}

.expiry-source-box[b-ukciupr2z6] {
    padding: 14px 16px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    margin-bottom: 18px;
}

.expiry-source-box span[b-ukciupr2z6] {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 5px;
}

.expiry-source-box strong[b-ukciupr2z6] {
    display: block;
    color: #0f172a;
    font-size: 14px;
    font-weight: 950;
    line-height: 1.4;
}

.expiry-source-box small[b-ukciupr2z6] {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.qr-box[b-ukciupr2z6] {
    padding: 18px;
    border-radius: 22px;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    text-align: center;
    margin-bottom: 18px;
}

.qr-image[b-ukciupr2z6] {
    width: 150px;
    height: 150px;
    display: block;
    margin: 0 auto 10px;
    border-radius: 18px;
    background: #ffffff;
    padding: 10px;
    border: 1px solid #bbf7d0;
}

.qr-placeholder[b-ukciupr2z6] {
    width: 150px;
    height: 150px;
    margin: 0 auto 10px;
    border-radius: 18px;
    background: #ffffff;
    border: 2px dashed #10b981;
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 950;
    text-align: center;
}

.qr-box small[b-ukciupr2z6] {
    display: block;
    color: #047857;
    font-weight: 900;
}

.back-btn[b-ukciupr2z6] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: #073b6d;
    color: #ffffff !important;
    padding: 14px 18px;
    border-radius: 16px;
    font-weight: 950;
}

.page-back-btn[b-ukciupr2z6] {
    max-width: 520px;
    width: 100%;
    margin-top: 12px;
}

.page-alert[b-ukciupr2z6] {
    width: 100%;
    max-width: 520px;
    padding: 16px;
    border-radius: 16px;
    font-weight: 800;
    line-height: 1.45;
}

.page-alert.info[b-ukciupr2z6] {
    background: #dbeafe;
    border: 1px solid #93c5fd;
    color: #1e40af;
}

.page-alert.error[b-ukciupr2z6] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.page-alert.warning[b-ukciupr2z6] {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
}

@media (max-width: 520px) {
    .green-pass-page[b-ukciupr2z6] {
        padding: 18px 12px;
    }

    .pass-card[b-ukciupr2z6] {
        border-radius: 24px;
        padding: 22px;
    }

    .pass-header h1[b-ukciupr2z6] {
        font-size: 26px;
    }

    .photo-wrap[b-ukciupr2z6] {
        width: 112px;
        height: 112px;
        border-radius: 24px;
    }

    .contractor-name[b-ukciupr2z6] {
        font-size: 20px;
    }
}
/* /Components/Pages/Contractor/Login.razor.rz.scp.css */
.contractor-login-page[b-tq7j3f7owk] {
    min-height: 100vh;
    background: #eef6f5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.phone-card[b-tq7j3f7owk] {
    width: 100%;
    max-width: 390px;
    min-height: 760px;
    background: #01C1B4;
    border-radius: 28px;
    padding: 24px;
    color: #ffffff;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22);
    display: flex;
    flex-direction: column;
}

.status-bar[b-tq7j3f7owk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 92px;
}

.login-icon[b-tq7j3f7owk] {
    width: 118px;
    height: 118px;
    border-radius: 999px;
    background: #ffffff;
    color: #01C1B4;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 34px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

.login-icon span[b-tq7j3f7owk] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #01C1B4;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 900;
}

.phone-card h1[b-tq7j3f7owk] {
    margin: 0;
    text-align: center;
    font-size: 58px;
    line-height: 1;
    font-weight: 300;
    letter-spacing: -2px;
}

.subtitle[b-tq7j3f7owk] {
    margin: 16px 0 82px;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
}

.login-form[b-tq7j3f7owk] {
    display: grid;
    gap: 16px;
}

.input-wrap[b-tq7j3f7owk] {
    position: relative;
}

.input-wrap input[b-tq7j3f7owk] {
    width: 100%;
    height: 58px;
    border: none;
    border-radius: 6px;
    background: #ffffff;
    color: #0f172a;
    font-size: 18px;
    padding: 0 54px 0 22px;
    outline: none;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.input-wrap input[b-tq7j3f7owk]::placeholder {
    color: #7c7c86;
}

.input-wrap input:focus[b-tq7j3f7owk] {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35);
}

.info-icon[b-tq7j3f7owk] {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border: 2px solid #8b8b94;
    color: #8b8b94;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 16px;
}

.remember-me[b-tq7j3f7owk] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #ffffff;
    margin-top: -4px;
}

.login-button[b-tq7j3f7owk] {
    height: 62px;
    border: none;
    border-radius: 8px;
    background: #073b6d;
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.5px;
    cursor: pointer;
    margin-top: 28px;
    box-shadow: 0 14px 28px rgba(7, 59, 109, 0.35);
}

.login-button:hover[b-tq7j3f7owk] {
    background: #052f57;
}

.register-link[b-tq7j3f7owk] {
    margin-top: auto;
    padding-top: 34px;
    text-align: center;
    font-size: 17px;
    color: #ffffff;
}

.register-link a[b-tq7j3f7owk] {
    color: #ffffff;
    font-weight: 900;
    text-decoration: none;
}

.login-error[b-tq7j3f7owk] {
    background: rgba(239, 68, 68, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #ffffff;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 460px) {
    .contractor-login-page[b-tq7j3f7owk] {
        padding: 0;
        background: #01C1B4;
    }

    .phone-card[b-tq7j3f7owk] {
        max-width: none;
        min-height: 100vh;
        border-radius: 0;
        box-shadow: none;
    }

    .status-bar[b-tq7j3f7owk] {
        margin-bottom: 74px;
    }

    .phone-card h1[b-tq7j3f7owk] {
        font-size: 52px;
    }

    .subtitle[b-tq7j3f7owk] {
        margin-bottom: 64px;
    }
}
/* /Components/Pages/Contractor/Register.razor.rz.scp.css */
.register-page[b-m6ykotno9s] {
    min-height: 100vh;
    padding: 32px 18px;
    background: #eef6f5;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.register-card[b-m6ykotno9s] {
    width: 100%;
    max-width: 760px;
    background: #f8fafc;
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.12);
    border: 1px solid #e2e8f0;
}

.brand[b-m6ykotno9s] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.brand-mark[b-m6ykotno9s] {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #01C1B4;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 24px;
    box-shadow: 0 8px 20px rgba(1, 193, 180, 0.25);
}

.brand-mark[b-m6ykotno9s]::before {
    content: "J";
}

.brand h1[b-m6ykotno9s] {
    margin: 0;
    font-size: 28px;
    font-weight: 900;
    color: #0f172a;
}

.brand p[b-m6ykotno9s] {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 14px;
}

.form-alert[b-m6ykotno9s] {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 800;
}

.form-alert.error[b-m6ykotno9s] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.photo-upload-box[b-m6ykotno9s] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
    padding: 20px;
    border-radius: 20px;
    background: rgba(1, 193, 180, 0.08);
    border: 1px solid rgba(1, 193, 180, 0.20);
}

.photo-preview[b-m6ykotno9s] {
    width: 110px;
    height: 110px;
    border-radius: 24px;
    overflow: hidden;
    background: #01C1B4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 40px;
    font-weight: 900;
    flex-shrink: 0;
    box-shadow: 0 10px 24px rgba(1, 193, 180, 0.25);
}

.photo-preview img[b-m6ykotno9s] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-upload-content[b-m6ykotno9s] {
    flex: 1;
}

.photo-upload-content strong[b-m6ykotno9s] {
    display: block;
    font-size: 18px;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 6px;
}

.photo-upload-content p[b-m6ykotno9s] {
    margin: 0 0 14px;
    color: #64748b;
    line-height: 1.5;
    font-size: 14px;
}

.photo-upload-content small[b-m6ykotno9s] {
    display: block;
    margin-top: 10px;
    color: #047f78;
    font-weight: 800;
    font-size: 12px;
}

.photo-upload-btn[b-m6ykotno9s] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    height: 48px;
    padding: 0 22px;
    border-radius: 12px;
    background: #073b6d;
    color: #ffffff;
    font-weight: 900;
    font-size: 13px;
    cursor: pointer;
    overflow: hidden;
    transition: all .2s ease;
    box-shadow: 0 10px 24px rgba(7, 59, 109, 0.20);
}

.photo-upload-btn:hover[b-m6ykotno9s] {
    background: #052f57;
    transform: translateY(-1px);
}

.form-grid[b-m6ykotno9s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

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

.form-group.full[b-m6ykotno9s] {
    grid-column: 1 / -1;
}

.form-group label[b-m6ykotno9s] {
    margin-bottom: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.form-control[b-m6ykotno9s] {
    width: 100%;
    border: 1px solid #dbe4ee;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font-size: 15px;
    padding: 14px 16px;
    outline: none;
    transition: all 0.2s ease;
}

.form-control:focus[b-m6ykotno9s] {
    border-color: #01C1B4;
    box-shadow: 0 0 0 4px rgba(1, 193, 180, 0.15);
}

.password-field[b-m6ykotno9s] {
    position: relative;
    width: 100%;
}

.password-field .password-control[b-m6ykotno9s] {
    padding-right: 52px;
}

.password-toggle[b-m6ykotno9s] {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);

    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: #f1f5f9;
    color: #64748b;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.password-toggle:hover[b-m6ykotno9s] {
    background: rgba(1, 193, 180, 0.12);
    color: #0f766e;
}

.password-toggle:active[b-m6ykotno9s] {
    transform: translateY(-50%) scale(0.96);
}

.password-toggle:focus-visible[b-m6ykotno9s] {
    outline: none;
    box-shadow: 0 0 0 4px rgba(1, 193, 180, 0.18);
}

.password-toggle svg[b-m6ykotno9s] {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.textarea[b-m6ykotno9s] {
    min-height: 90px;
    resize: vertical;
}

.uppercase[b-m6ykotno9s] {
    text-transform: uppercase;
}

.document-note[b-m6ykotno9s] {
    margin: 24px 0;
    padding: 18px;
    border-radius: 16px;
    background: rgba(1, 193, 180, 0.08);
    border: 1px solid rgba(1, 193, 180, 0.25);
    color: #0f172a;
    font-size: 14px;
    line-height: 1.5;
}

.document-note strong[b-m6ykotno9s] {
    color: #0f172a;
}

.submit-btn[b-m6ykotno9s] {
    width: 100%;
    height: 62px;
    border: none;
    border-radius: 12px;
    background: #073b6d;
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 14px 28px rgba(7, 59, 109, 0.25);
}

.submit-btn:hover[b-m6ykotno9s] {
    background: #052f57;
    transform: translateY(-1px);
}

.submit-btn:active[b-m6ykotno9s] {
    transform: translateY(0);
}

.submit-btn:disabled[b-m6ykotno9s] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.validation-message[b-m6ykotno9s] {
    margin-top: 6px;
    color: #dc2626;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 720px) {
    .register-page[b-m6ykotno9s] {
        padding: 0;
        background: #f8fafc;
    }

    .register-card[b-m6ykotno9s] {
        max-width: none;
        min-height: 100vh;
        border-radius: 0;
        border: none;
        box-shadow: none;
        padding: 24px;
    }

    .brand h1[b-m6ykotno9s] {
        font-size: 24px;
    }

    .photo-upload-box[b-m6ykotno9s] {
        align-items: stretch;
        flex-direction: column;
        text-align: center;
    }

    .photo-preview[b-m6ykotno9s] {
        width: 120px;
        height: 120px;
        margin: 0 auto;
    }

    .photo-upload-btn[b-m6ykotno9s] {
        width: 100%;
    }

    .form-grid[b-m6ykotno9s] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .submit-btn[b-m6ykotno9s] {
        height: 64px;
    }
}
/* /Components/Pages/Contractor/SafetyBriefing.razor.rz.scp.css */
.briefing-page[b-av8uevl36x] {
    min-height: 100vh;
    padding: 32px 18px;
    background: #eef6f5;
    display: flex;
    justify-content: center;
}

.briefing-card[b-av8uevl36x] {
    width: 100%;
    max-width: 900px;
    background: #f8fafc;
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.12);
    border: 1px solid #e2e8f0;
}

.briefing-header[b-av8uevl36x] {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.briefing-header span[b-av8uevl36x] {
    display: block;
    color: #059669;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.briefing-header h1[b-av8uevl36x] {
    margin: 0;
    font-size: 30px;
    font-weight: 900;
    color: #0f172a;
}

.briefing-header p[b-av8uevl36x] {
    margin: 8px 0 0;
    color: #64748b;
}

.back-btn[b-av8uevl36x] {
    height: fit-content;
    background: #e2e8f0;
    color: #0f172a;
    text-decoration: none;
    padding: 11px 16px;
    border-radius: 14px;
    font-weight: 900;
}

.video-box[b-av8uevl36x] {
    background: #020617;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 20px;
}

.briefing-video[b-av8uevl36x] {
    display: block;
    width: 100%;
    max-height: 520px;
    background: #020617;
}

.instruction-box[b-av8uevl36x],
.completed-box[b-av8uevl36x] {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

.instruction-box strong[b-av8uevl36x],
.completed-box strong[b-av8uevl36x] {
    display: block;
    color: #0f172a;
    margin-bottom: 6px;
    font-size: 16px;
}

.instruction-box p[b-av8uevl36x],
.completed-box p[b-av8uevl36x] {
    margin: 0;
    color: #64748b;
}

.completed-box[b-av8uevl36x] {
    background: #ecfdf5;
    border-color: #bbf7d0;
}

.assessment-btn[b-av8uevl36x] {
    display: inline-flex;
    margin-top: 16px;
    background: #01C1B4;
    color: #ffffff !important;
    text-decoration: none;
    padding: 13px 20px;
    border-radius: 14px;
    font-weight: 900;
}

.assessment-btn:hover[b-av8uevl36x] {
    background: #00a99e;
}

.alert.error[b-av8uevl36x] {
    padding: 16px;
    border-radius: 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-weight: 800;
}

.acknowledgement-check[b-av8uevl36x] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0;
    padding: 14px 16px;
    border: 1px solid #bbf7d0;
    border-radius: 16px;
    background: #f0fdf4;
    color: #14532d;
    font-size: 14px;
    font-weight: 700;
}

.acknowledgement-check input[b-av8uevl36x] {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: #16a34a;
}

.assessment-btn:disabled[b-av8uevl36x] {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    .briefing-page[b-av8uevl36x] {
        padding: 0;
        background: #f8fafc;
    }

    .briefing-card[b-av8uevl36x] {
        min-height: 100vh;
        border-radius: 0;
        border: 0;
        box-shadow: none;
        padding: 24px;
    }

    .briefing-header[b-av8uevl36x] {
        flex-direction: column;
    }

    .briefing-header h1[b-av8uevl36x] {
        font-size: 24px;
    }
}
/* /Components/Pages/Contractor/Submitted.razor.rz.scp.css */
.submitted-page[b-wnuq1q5hol] {
    min-height: 100vh;
    padding: 40px 20px;
    background: #eef6f5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.submitted-card[b-wnuq1q5hol] {
    width: 100%;
    max-width: 650px;
    background: #f8fafc;
    border-radius: 28px;
    padding: 40px;
    text-align: center;
    border: 1px solid #dbe7df;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.10);
}

.success-icon[b-wnuq1q5hol] {
    width: 90px;
    height: 90px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: #10b981;
    color: white;
    font-size: 42px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.submitted-card h1[b-wnuq1q5hol] {
    margin-bottom: 12px;
    color: #0f172a;
}

.submitted-card p[b-wnuq1q5hol] {
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 30px;
}

.back-btn[b-wnuq1q5hol] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 12px;
    background: #0f4c81;
    color: white;
    text-decoration: none;
    font-weight: 600;
}

.back-btn:hover[b-wnuq1q5hol] {
    background: #0c3c66;
}
/* /Components/Pages/Operations/BoatMovementConsole.razor.rz.scp.css */
.movement-page[b-q88xxsjgq0] {
    padding: 28px;
    color: #0f172a;
}

.page-header[b-q88xxsjgq0] {
    margin-bottom: 24px;
}

.eyebrow[b-q88xxsjgq0] {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0f766e;
    margin-bottom: 6px;
}

.page-header h1[b-q88xxsjgq0] {
    margin: 0;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.page-header p[b-q88xxsjgq0] {
    margin-top: 8px;
    color: #64748b;
    font-size: 15px;
}

.panel[b-q88xxsjgq0] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
}

.panel h2[b-q88xxsjgq0] {
    margin: 0 0 18px;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.panel-header[b-q88xxsjgq0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.panel-header span[b-q88xxsjgq0] {
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.panel-header p[b-q88xxsjgq0] {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
}

.big-button-grid[b-q88xxsjgq0] {
    display: grid;
    gap: 18px;
}

.big-button-grid.two[b-q88xxsjgq0] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.big-button[b-q88xxsjgq0] {
    min-height: 170px;
    border: 2px solid transparent;
    outline: none;
    border-radius: 20px;
    background: #111a5c;
    color: #ffffff;
    padding: 26px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
    --selected-accent: #facc15;
    --selected-accent-soft: rgba(250, 204, 21, 0.24);
    --selected-arrow-bg: #facc15;
    --selected-arrow-color: #111a5c;
}

.big-button:hover[b-q88xxsjgq0] {
    transform: translateY(-3px);
    box-shadow: 0 22px 48px rgba(17, 24, 92, 0.22);
}

.big-button-content[b-q88xxsjgq0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.big-button .button-code[b-q88xxsjgq0] {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 16px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #111a5c;
    background: #ffffff;
    transition: background 0.18s ease, color 0.18s ease;
}

.big-button strong[b-q88xxsjgq0] {
    display: block;
    color: #ffffff;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.big-button small[b-q88xxsjgq0] {
    display: block;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    font-weight: 600;
}

.button-footer[b-q88xxsjgq0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.button-footer > span:first-child[b-q88xxsjgq0] {
    color: rgba(255, 255, 255, 0.62);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.button-indicator[b-q88xxsjgq0] {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: #ffffff;
    color: #111a5c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.checkpoint-kmb[b-q88xxsjgq0] {
    background: #111a5c;
}

.checkpoint-kmb:hover[b-q88xxsjgq0],
.checkpoint-kmb.selected[b-q88xxsjgq0] {
    background: #0b1450;
}

.checkpoint-jru[b-q88xxsjgq0] {
    background: #0f766e;
}

.checkpoint-jru .button-code[b-q88xxsjgq0],
.checkpoint-jru .button-indicator[b-q88xxsjgq0] {
    color: #0f766e;
}

.checkpoint-jru:hover[b-q88xxsjgq0],
.checkpoint-jru.selected[b-q88xxsjgq0] {
    background: #0b5f59;
}

.departure[b-q88xxsjgq0] {
    background: #9a3412;
}

.departure .button-code[b-q88xxsjgq0],
.departure .button-indicator[b-q88xxsjgq0] {
    color: #9a3412;
}

.departure:hover[b-q88xxsjgq0],
.departure.selected[b-q88xxsjgq0] {
    background: #7c2d12;
}

.arrival[b-q88xxsjgq0] {
    background: #312e81;
}

.arrival .button-code[b-q88xxsjgq0],
.arrival .button-indicator[b-q88xxsjgq0] {
    color: #312e81;
}

.arrival:hover[b-q88xxsjgq0],
.arrival.selected[b-q88xxsjgq0] {
    background: #27236f;
}

.big-button.selected[b-q88xxsjgq0] {
    border-color: var(--selected-accent);
    box-shadow:
        0 0 0 4px var(--selected-accent-soft),
        0 20px 46px rgba(15, 23, 42, 0.18);
    transform: translateY(-2px);
}

.big-button.selected .button-indicator[b-q88xxsjgq0] {
    background: var(--selected-arrow-bg);
    color: var(--selected-arrow-color);
    transform: scale(1.03);
}

.big-button.selected .button-code[b-q88xxsjgq0] {
    background: #fef3c7;
    color: #92400e;
}

.big-button:focus-visible[b-q88xxsjgq0] {
    border-color: var(--selected-accent);
    box-shadow:
        0 0 0 4px var(--selected-accent-soft),
        0 20px 46px rgba(15, 23, 42, 0.18);
}

.vessel-grid[b-q88xxsjgq0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 18px;
}

.vessel-button[b-q88xxsjgq0] {
    border: 2px solid transparent;
    outline: none;
    border-radius: 16px;
    background: #111a5c;
    color: #ffffff;
    padding: 20px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    min-height: 118px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.vessel-button:hover[b-q88xxsjgq0] {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(17, 24, 92, 0.22);
}

.vessel-button.selected[b-q88xxsjgq0] {
    background: #0f766e;
    border-color: #facc15;
    box-shadow:
        0 0 0 4px rgba(250, 204, 21, 0.22),
        0 20px 44px rgba(15, 118, 110, 0.22);
}

.vessel-info[b-q88xxsjgq0] {
    min-width: 0;
}

.vessel-info strong[b-q88xxsjgq0] {
    display: block;
    color: #ffffff;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.vessel-info small[b-q88xxsjgq0] {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.vessel-label[b-q88xxsjgq0] {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.capacity-pill[b-q88xxsjgq0] {
    display: inline-block;
    margin-top: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.88);
    font-size: 11px;
    font-weight: 900;
}

.vessel-arrow[b-q88xxsjgq0] {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: #ffffff;
    color: #111a5c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.16em;
    flex: 0 0 auto;
    padding-right: 5px;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.vessel-button.selected .vessel-arrow[b-q88xxsjgq0] {
    background: #facc15;
    color: #111a5c;
    transform: scale(1.03);
}

.vessel-button:focus-visible[b-q88xxsjgq0] {
    border-color: #facc15;
    box-shadow:
        0 0 0 4px rgba(250, 204, 21, 0.22),
        0 20px 44px rgba(15, 118, 110, 0.22);
}

.summary-panel[b-q88xxsjgq0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    border-color: #e2e8f0;
    background: #ffffff;
}

.summary-label[b-q88xxsjgq0] {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #0f766e;
}

.summary-panel h2[b-q88xxsjgq0] {
    margin-top: 8px;
    margin-bottom: 6px;
}

.summary-panel p[b-q88xxsjgq0] {
    margin: 0;
    color: #64748b;
}

.btn-primary[b-q88xxsjgq0] {
    border: none;
    border-radius: 999px;
    background: #111a5c;
    color: #ffffff;
    padding: 16px 24px;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 16px 34px rgba(17, 24, 92, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
    white-space: nowrap;
}

.btn-primary:hover:not(:disabled)[b-q88xxsjgq0] {
    transform: translateY(-2px);
    box-shadow: 0 20px 42px rgba(17, 24, 92, 0.28);
}

.btn-primary:disabled[b-q88xxsjgq0] {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.alert-success[b-q88xxsjgq0],
.alert-error[b-q88xxsjgq0] {
    padding: 14px 16px;
    border-radius: 16px;
    margin-bottom: 18px;
    font-weight: 800;
}

.alert-success[b-q88xxsjgq0] {
    background: #ecfeff;
    color: #155e75;
    border: 1px solid #a5f3fc;
}

.alert-error[b-q88xxsjgq0] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.empty-state[b-q88xxsjgq0] {
    padding: 30px;
    text-align: center;
    color: #64748b;
    background: #f8fafc;
    border-radius: 18px;
    font-weight: 800;
}

/* Active Movement Panel */
.active-movement-panel[b-q88xxsjgq0] {
    border-color: #bae6fd;
    background:
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.10), transparent 32%),
        #ffffff;
}

.active-movement-header[b-q88xxsjgq0] {
    align-items: flex-start;
}

.active-movement-header h2[b-q88xxsjgq0] {
    margin-bottom: 4px;
}

.refresh-link-btn[b-q88xxsjgq0] {
    border: none;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.refresh-link-btn:hover[b-q88xxsjgq0] {
    background: #bae6fd;
}

.active-movement-card.boarding-draft[b-q88xxsjgq0] {
    border-color: #fde68a;
    background:
        linear-gradient(135deg, rgba(255, 251, 235, 0.95), rgba(255, 255, 255, 1));
}

.movement-status-pill.boarding-draft[b-q88xxsjgq0] {
    background: #fef3c7;
    color: #92400e;
}

.active-movement-grid[b-q88xxsjgq0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.active-movement-card[b-q88xxsjgq0] {
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 20px;
    background: #ffffff;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.active-movement-card.en-route[b-q88xxsjgq0] {
    border-color: #bfdbfe;
    background:
        linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(255, 255, 255, 1));
}

.active-movement-card.arrival-scan[b-q88xxsjgq0] {
    border-color: #bbf7d0;
    background:
        linear-gradient(135deg, rgba(240, 253, 244, 0.95), rgba(255, 255, 255, 1));
}

.active-movement-main h3[b-q88xxsjgq0] {
    margin: 10px 0 4px;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.active-movement-main p[b-q88xxsjgq0] {
    margin: 0;
    color: #475569;
    font-weight: 800;
}

.active-movement-main small[b-q88xxsjgq0] {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.movement-status-pill[b-q88xxsjgq0] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.movement-status-pill.en-route[b-q88xxsjgq0] {
    background: #dbeafe;
    color: #1d4ed8;
}

.movement-status-pill.arrival-scan[b-q88xxsjgq0] {
    background: #dcfce7;
    color: #15803d;
}

.active-action-group[b-q88xxsjgq0] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.active-cancel-btn[b-q88xxsjgq0] {
    border: 1px solid #fecaca;
    border-radius: 999px;
    background: #fef2f2;
    color: #991b1b;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.active-cancel-btn:hover[b-q88xxsjgq0] {
    background: #fee2e2;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(153, 27, 27, 0.12);
}


.active-resume-btn[b-q88xxsjgq0] {
    border: none;
    border-radius: 999px;
    background: #0f766e;
    color: #ffffff;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 14px 28px rgba(15, 118, 110, 0.22);
}

.active-resume-btn:hover[b-q88xxsjgq0] {
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(15, 118, 110, 0.28);
}


@media (max-width: 900px) {
    .big-button-grid.two[b-q88xxsjgq0] {
        grid-template-columns: 1fr;
    }

    .summary-panel[b-q88xxsjgq0] {
        flex-direction: column;
        gap: 18px;
        align-items: stretch;
    }

    .btn-primary[b-q88xxsjgq0] {
        width: 100%;
    }

    .active-movement-card[b-q88xxsjgq0] {
        flex-direction: column;
        align-items: stretch;
    }

    .active-resume-btn[b-q88xxsjgq0] {
        width: 100%;
    }

    .active-action-group[b-q88xxsjgq0] {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    }

    .active-cancel-btn[b-q88xxsjgq0] {
        width: 100%;
    }

}

@media (max-width: 640px) {
    .movement-page[b-q88xxsjgq0] {
        padding: 22px 16px;
    }

    .page-header h1[b-q88xxsjgq0] {
        font-size: 28px;
    }

    .panel[b-q88xxsjgq0] {
        padding: 20px;
    }

    .big-button[b-q88xxsjgq0] {
        min-height: 150px;
        padding: 22px;
    }

    .vessel-grid[b-q88xxsjgq0] {
        grid-template-columns: 1fr;
    }

    .vessel-button[b-q88xxsjgq0] {
        border-radius: 16px;
        align-items: flex-start;
    }

    .vessel-arrow[b-q88xxsjgq0] {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .active-movement-grid[b-q88xxsjgq0] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Operations/BoatMovementScan.razor.rz.scp.css */
/* =========================================================
   BoatMovementScan.razor.css
   Page-specific styles only.

   Shared reusable styles are handled by:
   wwwroot/css/jru-shared.css

   This file now keeps only:
   - scan page layout
   - scanner input sizing
   - tablet camera scanner
   - movement stat cards
   - complete panels
   - passenger table tweaks
   - device / Non-IS verification modals
   ========================================================= */

/* =========================================================
   Page Shell
   ========================================================= */

.scan-page[b-0ntkwxc07r] {
    padding: 28px;
    color: var(--jru-slate-900, #0f172a);
}

/* =========================================================
   Header
   ========================================================= */

.page-header[b-0ntkwxc07r] {
    margin-bottom: 22px;
}

.page-header h1[b-0ntkwxc07r] {
    font-size: 32px;
}

.page-header p[b-0ntkwxc07r] {
    margin-top: 8px;
    color: var(--jru-slate-500, #64748b);
}

/* =========================================================
   Panels
   ========================================================= */

.panel[b-0ntkwxc07r],
.complete-panel[b-0ntkwxc07r] {
    margin-bottom: 20px;
}

.panel h2[b-0ntkwxc07r] {
    margin: 0 0 10px;
    color: var(--jru-slate-900, #0f172a);
    font-size: 20px;
    font-weight: 850;
}

.panel p[b-0ntkwxc07r] {
    margin: 0 0 18px;
    color: var(--jru-slate-500, #64748b);
}

.scan-panel[b-0ntkwxc07r] {
    border-color: #a5f3fc;
    background: #f8feff;
}

/* =========================================================
   Stats
   ========================================================= */

.stats-grid[b-0ntkwxc07r] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.stat-card[b-0ntkwxc07r] {
    border-radius: 22px;
}

.stat-card span[b-0ntkwxc07r] {
    display: block;
    margin-bottom: 10px;
    color: var(--jru-slate-500, #64748b);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.6px;
}

.stat-card strong[b-0ntkwxc07r] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 22px;
    font-weight: 900;
}

.stat-card small[b-0ntkwxc07r] {
    display: block;
    margin-top: 6px;
    color: var(--jru-slate-500, #64748b);
    font-weight: 700;
}

/* =========================================================
   Scanner
   ========================================================= */

.scan-row[b-0ntkwxc07r] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
}

.scan-input[b-0ntkwxc07r] {
    border-width: 2px;
    border-radius: 18px;
    padding: 16px 18px;
    font-size: 18px;
    font-weight: 700;
}

/* =========================================================
   Hybrid Tablet Camera Scanner
   ========================================================= */

.scanner-mode-card[b-0ntkwxc07r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #bae6fd;
    border-radius: 20px;
    background: linear-gradient(135deg, #f0fdfa, #ffffff);
}

.scanner-mode-card span[b-0ntkwxc07r] {
    display: block;
    margin-bottom: 4px;
    color: #0891b2;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.scanner-mode-card strong[b-0ntkwxc07r] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 15px;
    font-weight: 950;
}

.scanner-mode-card small[b-0ntkwxc07r] {
    display: block;
    margin-top: 4px;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.45;
}

.scanner-mode-actions[b-0ntkwxc07r] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.camera-toggle-btn[b-0ntkwxc07r] {
    border: 0;
    border-radius: 999px;
    min-height: 42px;
    padding: 11px 15px;
    font-size: 12px;
    font-weight: 950;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    white-space: nowrap;
}

.camera-toggle-btn-primary[b-0ntkwxc07r] {
    background: #01C1B4;
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(1, 193, 180, 0.22);
}

.camera-toggle-btn-primary:hover:not(:disabled)[b-0ntkwxc07r] {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(1, 193, 180, 0.28);
}

.camera-toggle-btn-secondary[b-0ntkwxc07r] {
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    background: #ffffff;
    color: var(--jru-slate-700, #334155);
}

.camera-toggle-btn-secondary:hover:not(:disabled)[b-0ntkwxc07r] {
    background: var(--jru-slate-50, #f8fafc);
}

.camera-toggle-btn:disabled[b-0ntkwxc07r] {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
    box-shadow: none;
}

.camera-scanner-panel[b-0ntkwxc07r] {
    display: none;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #bae6fd;
    border-radius: 22px;
    background: #ffffff;
}

.camera-scanner-panel.active[b-0ntkwxc07r] {
    display: block;
}

.camera-reader[b-0ntkwxc07r] {
    position: relative;
    width: 100%;
    max-width: 540px;
    height: 280px;
    min-height: 280px;
    max-height: 320px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--jru-slate-300, #cbd5e1);
    border-radius: 20px;
    background: #020617;
}

.camera-reader video[b-0ntkwxc07r] {
    display: block;
    border-radius: 20px;
}

.camera-reader img[b-0ntkwxc07r] {
    display: none;
}

.camera-reader__dashboard_section[b-0ntkwxc07r] {
    padding: 10px !important;
}

/* =========================================================
   Html5Qrcode Video Preview Fix
   Important:
   html5-qrcode creates video/canvas elements dynamically.
   Because this is Blazor CSS isolation, use ::deep so the
   generated camera preview elements are styled correctly.
   ========================================================= */

.camera-reader[b-0ntkwxc07r]  #jruops-camera-reader__scan_region,
.camera-reader[b-0ntkwxc07r]  #jruops-camera-reader__camera_selection,
.camera-reader[b-0ntkwxc07r]  video,
.camera-reader[b-0ntkwxc07r]  canvas {
    width: 100% !important;
    max-width: 100% !important;
}

.camera-reader[b-0ntkwxc07r]  #jruops-camera-reader__scan_region {
    height: 100% !important;
    min-height: 280px !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    background: #020617 !important;
}

.camera-reader[b-0ntkwxc07r]  video {
    display: block !important;
    width: 100% !important;
    height: 280px !important;
    min-height: 280px !important;
    object-fit: cover !important;
    opacity: 1 !important;
    visibility: visible !important;
    border-radius: 20px !important;
    background: transparent !important;
}

.camera-reader[b-0ntkwxc07r]  canvas {
    max-width: 100% !important;
    border-radius: 20px !important;
}

.camera-reader[b-0ntkwxc07r]  img {
    display: none !important;
}

.camera-reader[b-0ntkwxc07r]  #jruops-camera-reader__dashboard_section,
.camera-reader[b-0ntkwxc07r]  #jruops-camera-reader__dashboard {
    display: none !important;
}

.camera-status[b-0ntkwxc07r] {
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 850;
}

.camera-status.muted[b-0ntkwxc07r] {
    color: var(--jru-slate-500, #64748b);
}

.camera-status.success[b-0ntkwxc07r] {
    color: #047857;
}

.camera-status.error[b-0ntkwxc07r] {
    color: #b91c1c;
}

.btn-primary[b-0ntkwxc07r],
.btn-secondary[b-0ntkwxc07r],
.btn-complete[b-0ntkwxc07r],
.btn-secondary-danger[b-0ntkwxc07r] {
    font-weight: 900;
}

.btn-primary[b-0ntkwxc07r],
.btn-secondary[b-0ntkwxc07r],
.btn-complete[b-0ntkwxc07r] {
    min-height: 48px;
}

.btn-complete[b-0ntkwxc07r] {
    padding: 16px 22px;
}

.btn-secondary-danger[b-0ntkwxc07r] {
    min-width: 132px;
    border: 1px solid #fecaca;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(190, 18, 60, 0.08);
}

.btn-secondary-danger:hover[b-0ntkwxc07r] {
    border-color: #fb7185;
    color: #9f1239;
    box-shadow: 0 12px 24px rgba(190, 18, 60, 0.14);
}

.btn-complete:disabled[b-0ntkwxc07r] {
    background: #bbf7d0;
    color: #166534;
    cursor: not-allowed;
    opacity: 0.75;
    box-shadow: none;
    transform: none;
}

/* =========================================================
   Alerts
   ========================================================= */

.alert-success[b-0ntkwxc07r],
.alert-error[b-0ntkwxc07r] {
    margin-bottom: 18px;
    font-weight: 800;
}

.alert-success[b-0ntkwxc07r] {
    background: #ecfeff;
    color: #155e75;
    border-color: #a5f3fc;
}

.alert-error[b-0ntkwxc07r] {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

/* =========================================================
   Passenger Panel / Table
   ========================================================= */

.passenger-panel[b-0ntkwxc07r] {
    overflow: hidden;
}

.panel-header[b-0ntkwxc07r] {
    margin-bottom: 18px;
}

.panel-header h2[b-0ntkwxc07r] {
    margin: 0;
}

.passenger-counter[b-0ntkwxc07r] {
    font-size: 12px;
    font-weight: 900;
}

.empty-state[b-0ntkwxc07r] {
    border-radius: 18px;
    background: var(--jru-slate-50, #f8fafc);
    font-weight: 800;
}

.table-wrap[b-0ntkwxc07r] {
    overflow-x: auto;
}

.passenger-table[b-0ntkwxc07r] {
    min-width: 980px;
}

.passenger-table td small[b-0ntkwxc07r] {
    display: block;
    margin-top: 4px;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
}

.passenger-table td:last-child[b-0ntkwxc07r],
.passenger-table th:last-child[b-0ntkwxc07r] {
    text-align: right;
}

.passenger-table tbody tr:hover[b-0ntkwxc07r] {
    background: var(--jru-slate-50, #f8fafc);
}

/* =========================================================
   Movement Status Badge
   ========================================================= */

.status-badge[b-0ntkwxc07r] {
    font-size: 11px;
    font-weight: 900;
    border: 1px solid transparent;
}

.status-badge.approved[b-0ntkwxc07r] {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

.status-badge.rejected[b-0ntkwxc07r] {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

.status-badge.pending[b-0ntkwxc07r] {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}

.status-badge.incomplete[b-0ntkwxc07r] {
    background: var(--jru-slate-100, #f1f5f9);
    color: var(--jru-slate-600, #475569);
    border-color: var(--jru-slate-300, #cbd5e1);
}

/* =========================================================
   Complete Panel
   ========================================================= */

.complete-panel[b-0ntkwxc07r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-color: #bbf7d0;
    background: #f7fff9;
    gap: 18px;
}

.complete-panel strong[b-0ntkwxc07r] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 18px;
    font-weight: 900;
}

.complete-panel p[b-0ntkwxc07r] {
    margin: 6px 0 0;
    color: var(--jru-slate-500, #64748b);
}

/* =========================================================
   Device Verification Modal
   ========================================================= */

.device-modal-backdrop[b-0ntkwxc07r] {
    z-index: 9999;
    padding: 24px;
    background: rgba(15, 23, 42, 0.58);
}

.device-modal[b-0ntkwxc07r] {
    width: min(780px, 100%);
    max-height: 92vh;
    border-color: #dbeafe;
    border-radius: 28px;
}

.device-modal-header[b-0ntkwxc07r] {
    background: linear-gradient(135deg, #ecfeff, #ffffff);
}

.device-modal-header span[b-0ntkwxc07r] {
    display: block;
    margin-bottom: 5px;
    color: #0891b2;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.device-modal-header h2[b-0ntkwxc07r] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 24px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.device-modal-close[b-0ntkwxc07r] {
    border: 1px solid #fecaca;
    border-radius: 999px;
    background: #fff1f2;
    color: #be123c;
}

.device-modal-close:hover[b-0ntkwxc07r] {
    background: #ffe4e6;
}

.device-modal-body[b-0ntkwxc07r] {
    overflow-y: auto;
}

.device-person-card[b-0ntkwxc07r] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.device-avatar[b-0ntkwxc07r] {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, #0891b2, #14b8a6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 950;
    box-shadow: 0 12px 26px rgba(8, 145, 178, 0.18);
}

.device-person-card strong[b-0ntkwxc07r] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 16px;
    font-weight: 950;
    line-height: 1.25;
}

.device-person-card span[b-0ntkwxc07r] {
    display: block;
    margin-top: 3px;
    color: var(--jru-slate-600, #475569);
    font-size: 13px;
    font-weight: 850;
}

.device-person-card small[b-0ntkwxc07r] {
    display: block;
    margin-top: 2px;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 800;
}

.device-warning-note[b-0ntkwxc07r] {
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.5;
}

.device-approval-row[b-0ntkwxc07r] {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--jru-slate-200, #e2e8f0);
}

.device-approval-row span[b-0ntkwxc07r] {
    color: var(--jru-slate-500, #64748b);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.device-approval-row strong[b-0ntkwxc07r] {
    color: var(--jru-slate-900, #0f172a);
    font-size: 13px;
    font-weight: 900;
}

.device-list-title[b-0ntkwxc07r] {
    margin: 16px 0 10px;
    color: #0891b2;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.device-list[b-0ntkwxc07r] {
    display: grid;
    gap: 10px;
}

.device-item[b-0ntkwxc07r] {
    border-color: #dbeafe;
    border-radius: 18px;
    background: #f8fbff;
    padding: 14px;
}

.device-item-top[b-0ntkwxc07r] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.device-item-top span[b-0ntkwxc07r] {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #cffafe;
    color: #0e7490;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 950;
}

.device-item-top strong[b-0ntkwxc07r] {
    flex: 1;
    color: var(--jru-slate-900, #0f172a);
    font-size: 15px;
    font-weight: 950;
}

.device-item-top small[b-0ntkwxc07r] {
    color: #0f766e;
    background: #ccfbf1;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 950;
}

.device-item-grid[b-0ntkwxc07r] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.device-item-grid div[b-0ntkwxc07r] {
    padding: 10px;
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    border-radius: 14px;
    background: #ffffff;
}

.device-item-grid span[b-0ntkwxc07r] {
    display: block;
    margin-bottom: 4px;
    color: var(--jru-slate-500, #64748b);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.device-item-grid strong[b-0ntkwxc07r] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.35;
    word-break: break-word;
}

.device-modal-footer[b-0ntkwxc07r] {
    background: var(--jru-slate-50, #f8fafc);
}

.device-cancel-btn[b-0ntkwxc07r],
.device-confirm-btn[b-0ntkwxc07r] {
    min-height: 44px;
}

.device-confirm-btn[b-0ntkwxc07r] {
    min-width: 210px;
}

/* =========================================================
   Contractor Non-IS Verification Modal
   ========================================================= */

.non-is-verification-modal[b-0ntkwxc07r] {
    border-color: #fed7aa;
}

.non-is-modal-header[b-0ntkwxc07r] {
    background: linear-gradient(135deg, #fff7ed, #ffffff);
}

.non-is-modal-header span[b-0ntkwxc07r] {
    color: #c2410c;
}

.non-is-avatar[b-0ntkwxc07r] {
    background: linear-gradient(135deg, #ea580c, #f97316);
    box-shadow: 0 12px 26px rgba(249, 115, 22, 0.22);
}

.non-is-person-card[b-0ntkwxc07r] {
    border-color: #fed7aa;
    background: #fffaf5;
}

.non-is-warning-note[b-0ntkwxc07r] {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #9a3412;
}

.non-is-request-block[b-0ntkwxc07r] {
    border: 1px solid #fed7aa;
    border-radius: 20px;
    background: #fffaf5;
    padding: 15px;
    margin-bottom: 14px;
}

.non-is-request-block:last-child[b-0ntkwxc07r] {
    margin-bottom: 0;
}

.non-is-request-header[b-0ntkwxc07r] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.non-is-request-header span[b-0ntkwxc07r] {
    display: block;
    margin-bottom: 4px;
    color: #9a3412;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.non-is-request-header strong[b-0ntkwxc07r] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 15px;
    font-weight: 950;
    word-break: break-word;
}

.non-is-request-header small[b-0ntkwxc07r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #047857;
    background: #d1fae5;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap;
}

.non-is-request-grid[b-0ntkwxc07r] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.non-is-request-grid .full[b-0ntkwxc07r] {
    grid-column: 1 / -1;
}

.non-is-request-grid div[b-0ntkwxc07r] {
    padding: 10px;
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    border-radius: 14px;
    background: #ffffff;
}

.non-is-request-grid span[b-0ntkwxc07r] {
    display: block;
    margin-bottom: 4px;
    color: var(--jru-slate-500, #64748b);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.non-is-request-grid strong[b-0ntkwxc07r] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.35;
    word-break: break-word;
}

.non-is-device-list-title[b-0ntkwxc07r] {
    color: #c2410c;
}

.non-is-device-item[b-0ntkwxc07r] {
    border-color: #fed7aa;
    background: #ffffff;
}

.non-is-device-item-top span[b-0ntkwxc07r] {
    background: #ffedd5;
    color: #c2410c;
}

.non-is-device-item-top small[b-0ntkwxc07r] {
    color: #9a3412;
    background: #fed7aa;
}

.non-is-confirm-btn[b-0ntkwxc07r] {
    background: #ea580c;
    box-shadow: 0 12px 24px rgba(249, 115, 22, 0.2);
}

.non-is-confirm-btn:hover[b-0ntkwxc07r] {
    background: #c2410c;
    box-shadow: 0 16px 30px rgba(249, 115, 22, 0.25);
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 900px) {
    .page-header[b-0ntkwxc07r],
    .complete-panel[b-0ntkwxc07r] {
        flex-direction: column;
        align-items: stretch;
    }

    .stats-grid[b-0ntkwxc07r] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .scan-row[b-0ntkwxc07r] {
        grid-template-columns: 1fr;
    }

    .scanner-mode-card[b-0ntkwxc07r] {
        flex-direction: column;
        align-items: stretch;
    }

    .scanner-mode-actions[b-0ntkwxc07r] {
        width: 100%;
        justify-content: stretch;
    }

    .camera-toggle-btn[b-0ntkwxc07r] {
        flex: 1;
    }

    .btn-primary[b-0ntkwxc07r],
    .btn-secondary[b-0ntkwxc07r],
    .btn-complete[b-0ntkwxc07r],
    .btn-secondary-danger[b-0ntkwxc07r] {
        width: 100%;
    }

    .passenger-table td:last-child[b-0ntkwxc07r],
    .passenger-table th:last-child[b-0ntkwxc07r] {
        text-align: left;
    }

    .device-modal-footer[b-0ntkwxc07r] {
        flex-direction: column;
    }

    .device-confirm-btn[b-0ntkwxc07r],
    .device-cancel-btn[b-0ntkwxc07r] {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .scan-page[b-0ntkwxc07r] {
        padding: 18px;
    }

    .stats-grid[b-0ntkwxc07r] {
        grid-template-columns: 1fr;
    }

    .panel[b-0ntkwxc07r],
    .complete-panel[b-0ntkwxc07r] {
        padding: 18px;
        border-radius: 20px;
    }

    .page-header h1[b-0ntkwxc07r] {
        font-size: 26px;
    }

    .scan-input[b-0ntkwxc07r] {
        font-size: 16px;
        padding: 14px 16px;
    }

    .scanner-mode-card[b-0ntkwxc07r] {
        padding: 12px;
    }

    .scanner-mode-actions[b-0ntkwxc07r] {
        flex-direction: column;
    }

    .camera-toggle-btn[b-0ntkwxc07r] {
        width: 100%;
    }

    .camera-reader[b-0ntkwxc07r] {
        height: 240px;
        min-height: 240px;
        max-height: 260px;
    }

    .camera-reader[b-0ntkwxc07r]  #jruops-camera-reader__scan_region,
    .camera-reader[b-0ntkwxc07r]  video {
        height: 240px !important;
        min-height: 240px !important;
    }

    .device-modal-backdrop[b-0ntkwxc07r] {
        padding: 14px;
        align-items: flex-start;
    }

    .device-modal[b-0ntkwxc07r] {
        border-radius: 22px;
        max-height: calc(100vh - 28px);
    }

    .device-modal-header[b-0ntkwxc07r],
    .device-modal-body[b-0ntkwxc07r],
    .device-modal-footer[b-0ntkwxc07r] {
        padding-left: 18px;
        padding-right: 18px;
    }

    .device-approval-row[b-0ntkwxc07r],
    .non-is-request-grid[b-0ntkwxc07r] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .non-is-request-grid .full[b-0ntkwxc07r] {
        grid-column: auto;
    }

    .device-item-grid[b-0ntkwxc07r] {
        grid-template-columns: 1fr;
    }

    .device-person-card[b-0ntkwxc07r] {
        align-items: flex-start;
    }

    .non-is-request-header[b-0ntkwxc07r] {
        flex-direction: column;
    }
}
/* /Components/Pages/Operations/PassengerMovementHistory.razor.rz.scp.css */
/* =========================================================
   PassengerMovementHistory.razor.css
   Page-specific styles only.

   Shared reusable styles are handled by:
   wwwroot/css/jru-shared.css

   This file now keeps only:
   - history page spacing
   - filter layout
   - movement table sizing
   - passenger/movement pill variants
   ========================================================= */

/* =========================================================
   Page Shell
   ========================================================= */

.history-page[b-lzlz01zjh7] {
    padding: 28px;
    color: var(--jru-slate-900, #0f172a);
}

/* =========================================================
   Header
   ========================================================= */

.page-header[b-lzlz01zjh7] {
    margin-bottom: 22px;
}

.page-header p[b-lzlz01zjh7] {
    margin-top: 8px;
    color: var(--jru-slate-500, #64748b);
}

/* =========================================================
   Panels
   ========================================================= */

.panel[b-lzlz01zjh7] {
    margin-bottom: 20px;
}

.filter-panel[b-lzlz01zjh7] {
    border-color: #dbeafe;
    padding: 20px 24px;
}

/* =========================================================
   Filter Form
   ========================================================= */

.form-grid[b-lzlz01zjh7] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 16px;
    align-items: end;
}

.history-form-field[b-lzlz01zjh7] {
    min-width: 0;
}

.history-page label[b-lzlz01zjh7] {
    display: block;
    margin-bottom: 7px;
    color: var(--jru-slate-700, #334155);
    font-size: 12px;
    font-weight: 900;
}

.history-page input[b-lzlz01zjh7],
.history-page select[b-lzlz01zjh7] {
    height: 44px;
}

.form-actions[b-lzlz01zjh7] {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn-primary[b-lzlz01zjh7],
.btn-secondary[b-lzlz01zjh7] {
    min-height: 42px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 900;
}

/* =========================================================
   Records Panel
   ========================================================= */

.records-panel[b-lzlz01zjh7] {
    overflow: hidden;
}

.panel-header[b-lzlz01zjh7] {
    margin-bottom: 18px;
}

.panel-header h2[b-lzlz01zjh7] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 20px;
    font-weight: 850;
}

.record-count[b-lzlz01zjh7] {
    font-size: 12px;
    font-weight: 900;
}

.empty-state[b-lzlz01zjh7] {
    border-radius: 18px;
    background: var(--jru-slate-50, #f8fafc);
    font-weight: 800;
}

/* =========================================================
   Movement Table
   ========================================================= */

.table-wrap[b-lzlz01zjh7] {
    overflow-x: auto;
}

.movement-table[b-lzlz01zjh7] {
    width: 100%;
    min-width: 920px;
    table-layout: fixed;
}

.movement-table th[b-lzlz01zjh7],
.movement-table td[b-lzlz01zjh7] {
    vertical-align: middle;
}

.movement-table th:nth-child(1)[b-lzlz01zjh7],
.movement-table td:nth-child(1)[b-lzlz01zjh7] {
    width: 140px;
}

.movement-table th:nth-child(2)[b-lzlz01zjh7],
.movement-table td:nth-child(2)[b-lzlz01zjh7] {
    width: 130px;
}

.movement-table th:nth-child(3)[b-lzlz01zjh7],
.movement-table td:nth-child(3)[b-lzlz01zjh7] {
    width: 28%;
    min-width: 280px;
}

.movement-table th:nth-child(4)[b-lzlz01zjh7],
.movement-table td:nth-child(4)[b-lzlz01zjh7] {
    width: 18%;
    min-width: 210px;
}

.movement-table th:nth-child(5)[b-lzlz01zjh7],
.movement-table td:nth-child(5)[b-lzlz01zjh7] {
    width: 150px;
}

.movement-table th:nth-child(6)[b-lzlz01zjh7],
.movement-table td:nth-child(6)[b-lzlz01zjh7] {
    width: 180px;
}

.movement-table tbody tr:hover[b-lzlz01zjh7] {
    background: #f8fffd;
}

.movement-table td strong[b-lzlz01zjh7] {
    display: block;
    color: #020617;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.4;
}

.movement-table td small[b-lzlz01zjh7] {
    display: block;
    margin-top: 4px;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.movement-table td:nth-child(3) strong[b-lzlz01zjh7] {
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

/* =========================================================
   Passenger Type Pills
   ========================================================= */

.passenger-type-pill[b-lzlz01zjh7] {
    min-height: 30px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 900;
}

.passenger-type-pill.visitor[b-lzlz01zjh7] {
    color: #075985;
    background: #e0f2fe;
    border: 1px solid #bae6fd;
}

.passenger-type-pill.contractor[b-lzlz01zjh7] {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.passenger-type-pill.staff[b-lzlz01zjh7] {
    color: #0f766e;
    background: #f0fdfa;
    border: 1px solid #5eead4;
}

/* =========================================================
   Movement Pills
   ========================================================= */

.movement-pill[b-lzlz01zjh7] {
    min-height: 30px;
    padding: 0 12px;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 900;
}

.movement-departure[b-lzlz01zjh7] {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}

.movement-arrival[b-lzlz01zjh7] {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.movement-unknown[b-lzlz01zjh7] {
    background: var(--jru-slate-100, #f1f5f9);
    color: var(--jru-slate-600, #475569);
    border: 1px solid var(--jru-slate-300, #cbd5e1);
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1250px) {
    .form-grid[b-lzlz01zjh7] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .movement-table[b-lzlz01zjh7] {
        min-width: 980px;
    }
}

@media (max-width: 900px) {
    .form-grid[b-lzlz01zjh7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .panel[b-lzlz01zjh7] {
        overflow-x: auto;
    }
}

@media (max-width: 700px) {
    .history-page[b-lzlz01zjh7] {
        padding: 18px 14px;
    }

    .page-header h1[b-lzlz01zjh7] {
        font-size: 28px;
    }

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

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

    .btn-primary[b-lzlz01zjh7],
    .btn-secondary[b-lzlz01zjh7] {
        width: 100%;
    }

    .movement-table th[b-lzlz01zjh7],
    .movement-table td[b-lzlz01zjh7] {
        padding: 14px 12px;
    }
}
/* /Components/Pages/Security/ContractorQrScan.razor.rz.scp.css */
.scan-page[b-ctxcvghtz9] {
    min-height: calc(100vh - 32px);
    padding: 32px;
    background: #f8fafc;
    color: #0f172a;
}

.scan-card[b-ctxcvghtz9] {
    max-width: 960px;
    margin: 0 auto;
}

.scan-header[b-ctxcvghtz9] {
    margin-bottom: 24px;
}

.eyebrow[b-ctxcvghtz9] {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #059669;
}

.scan-header h1[b-ctxcvghtz9] {
    margin: 0;
    font-size: 34px;
    font-weight: 900;
}

.scan-header p[b-ctxcvghtz9] {
    margin: 8px 0 0;
    color: #64748b;
}

.scan-panel[b-ctxcvghtz9],
.result-card[b-ctxcvghtz9] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

.scan-panel label[b-ctxcvghtz9] {
    display: block;
    margin-bottom: 10px;
    font-weight: 800;
    color: #334155;
}

.scan-row[b-ctxcvghtz9] {
    display: flex;
    gap: 12px;
}

.scan-input[b-ctxcvghtz9] {
    flex: 1;
    height: 52px;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    padding: 0 16px;
    font-size: 16px;
    outline: none;
}

.scan-input:focus[b-ctxcvghtz9] {
    border-color: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

.scan-button[b-ctxcvghtz9] {
    height: 52px;
    border: none;
    border-radius: 16px;
    padding: 0 24px;
    background: #059669;
    color: #ffffff;
    font-weight: 900;
    cursor: pointer;
}

.checkpoint-grid[b-ctxcvghtz9],
.scan-type-grid[b-ctxcvghtz9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.choice[b-ctxcvghtz9] {
    height: 46px;
    border-radius: 16px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-weight: 800;
    cursor: pointer;
}

.choice.active[b-ctxcvghtz9] {
    border-color: #059669;
    background: #ecfdf5;
    color: #047857;
}

.message[b-ctxcvghtz9] {
    margin-top: 18px;
    border-radius: 16px;
    padding: 14px 16px;
    font-weight: 800;
}

.message.success[b-ctxcvghtz9] {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.message.error[b-ctxcvghtz9] {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.result-card[b-ctxcvghtz9] {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.avatar[b-ctxcvghtz9] {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: #0f172a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 900;
}

.result-info h2[b-ctxcvghtz9] {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 900;
}

.result-info p[b-ctxcvghtz9] {
    margin: 3px 0;
    color: #64748b;
    font-weight: 700;
}

@media (max-width: 720px) {
    .scan-page[b-ctxcvghtz9] {
        padding: 18px;
    }

    .scan-row[b-ctxcvghtz9] {
        flex-direction: column;
    }

    .checkpoint-grid[b-ctxcvghtz9],
    .scan-type-grid[b-ctxcvghtz9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .scan-button[b-ctxcvghtz9] {
        width: 100%;
    }
}
/* /Components/Pages/Staff/Dashboard.razor.rz.scp.css */
.staff-dashboard-page[b-ky800rhg0f] {
    padding: 28px;
    color: #0f172a;
}

.loading-card[b-ky800rhg0f] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
    color: #64748b;
    font-weight: 800;
}

.loading-card.error[b-ky800rhg0f] {
    color: #be123c;
    background: #fff1f2;
    border-color: #fecdd3;
}

.hero-card[b-ky800rhg0f] {
    background:
        radial-gradient(circle at top left, rgba(1, 193, 180, 0.26), transparent 34%),
        linear-gradient(135deg, #ffffff, #f8fafc);
    border: 1px solid #e2e8f0;
    border-radius: 28px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.09);
    margin-bottom: 20px;
}

.hero-left[b-ky800rhg0f] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.staff-avatar[b-ky800rhg0f] {
    width: 92px;
    height: 92px;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(135deg, #01C1B4, #0f766e);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 950;
    flex-shrink: 0;
    box-shadow: 0 18px 34px rgba(1, 193, 180, 0.24);
}

.staff-avatar img[b-ky800rhg0f] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eyebrow[b-ky800rhg0f] {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0891b2;
    margin-bottom: 6px;
}

.hero-card h1[b-ky800rhg0f] {
    margin: 0;
    font-size: 32px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.hero-card p[b-ky800rhg0f] {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 15px;
}

.hero-meta[b-ky800rhg0f] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.hero-meta span[b-ky800rhg0f] {
    border-radius: 999px;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    color: #0f766e;
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 900;
}

.hero-status[b-ky800rhg0f] {
    flex-shrink: 0;
}

.status-pill[b-ky800rhg0f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
    white-space: nowrap;
}

.status-pending[b-ky800rhg0f] {
    color: #b45309;
    background: #fffbeb;
    border-color: #fcd34d;
}

.status-approved[b-ky800rhg0f] {
    color: #047857;
    background: #ecfdf5;
    border-color: #86efac;
}

.status-rejected[b-ky800rhg0f] {
    color: #be123c;
    background: #fff1f2;
    border-color: #fda4af;
}

.status-video[b-ky800rhg0f] {
    color: #0369a1;
    background: #f0f9ff;
    border-color: #7dd3fc;
}

.status-pass[b-ky800rhg0f] {
    color: #0f766e;
    background: #f0fdfa;
    border-color: #5eead4;
}

.status-default[b-ky800rhg0f] {
    color: #475569;
    background: #f8fafc;
    border-color: #cbd5e1;
}

.steps-card[b-ky800rhg0f] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.07);
    margin-bottom: 20px;
    overflow-x: auto;
}

.step-item[b-ky800rhg0f] {
    min-width: 170px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.step-icon[b-ky800rhg0f] {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 950;
    flex-shrink: 0;
}

.step-item.done .step-icon[b-ky800rhg0f] {
    background: linear-gradient(135deg, #01C1B4, #0f766e);
    color: #ffffff;
}

.step-item strong[b-ky800rhg0f] {
    display: block;
    font-size: 13px;
    font-weight: 950;
    color: #0f172a;
}

.step-item span[b-ky800rhg0f] {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 750;
    color: #64748b;
}

.step-line[b-ky800rhg0f] {
    height: 2px;
    min-width: 38px;
    background: #e2e8f0;
    flex: 1;
}

.step-line.active[b-ky800rhg0f] {
    background: #01C1B4;
}

.dashboard-grid[b-ky800rhg0f] {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 20px;
}

.panel[b-ky800rhg0f] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
}

.next-panel[b-ky800rhg0f] {
    grid-column: span 1;
}

.profile-panel[b-ky800rhg0f] {
    grid-column: span 1;
}

.pass-panel[b-ky800rhg0f] {
    grid-column: 1 / -1;
}

.panel-header[b-ky800rhg0f] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.panel-header h2[b-ky800rhg0f] {
    margin: 0;
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.panel p[b-ky800rhg0f] {
    margin: 0 0 18px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}

.notice[b-ky800rhg0f] {
    border-radius: 18px;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
}

.notice.warning[b-ky800rhg0f] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.notice.danger[b-ky800rhg0f] {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
}

.primary-btn[b-ky800rhg0f],
.secondary-btn[b-ky800rhg0f] {
    border: none;
    border-radius: 16px;
    padding: 13px 17px;
    font-size: 14px;
    font-weight: 950;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.primary-btn[b-ky800rhg0f] {
    background: linear-gradient(135deg, #01C1B4, #0f766e);
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(1, 193, 180, 0.24);
}

.secondary-btn[b-ky800rhg0f] {
    margin-top: 16px;
    background: #f0fdfa;
    color: #0f766e;
    border: 1px solid #99f6e4;
}

.primary-btn:hover[b-ky800rhg0f],
.secondary-btn:hover[b-ky800rhg0f] {
    transform: translateY(-1px);
}

.info-list[b-ky800rhg0f] {
    display: grid;
    gap: 12px;
}

.info-list div[b-ky800rhg0f],
.pass-summary div[b-ky800rhg0f] {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 13px 15px;
    background: #f8fafc;
}

.info-list span[b-ky800rhg0f],
.pass-summary span[b-ky800rhg0f] {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
    margin-bottom: 5px;
}

.info-list strong[b-ky800rhg0f],
.pass-summary strong[b-ky800rhg0f] {
    display: block;
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.qr-empty[b-ky800rhg0f] {
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 20px;
    padding: 18px;
    background: #f8fafc;
}

.qr-placeholder[b-ky800rhg0f] {
    width: 76px;
    height: 76px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 18px;
    font-weight: 950;
}

.qr-empty p[b-ky800rhg0f] {
    margin: 0;
    color: #64748b;
    font-weight: 750;
}

.pass-summary[b-ky800rhg0f] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 980px) {
    .dashboard-grid[b-ky800rhg0f] {
        grid-template-columns: 1fr;
    }

    .pass-summary[b-ky800rhg0f] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .staff-dashboard-page[b-ky800rhg0f] {
        padding: 18px 12px;
    }

    .hero-card[b-ky800rhg0f] {
        flex-direction: column;
    }

    .hero-left[b-ky800rhg0f] {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-card h1[b-ky800rhg0f] {
        font-size: 26px;
    }

    .staff-avatar[b-ky800rhg0f] {
        width: 82px;
        height: 82px;
        border-radius: 24px;
    }

    .pass-summary[b-ky800rhg0f] {
        grid-template-columns: 1fr;
    }

    .qr-empty[b-ky800rhg0f] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Pages/Staff/QrPass.razor.rz.scp.css */
.staff-pass-page[b-dy4pase0em] {
    padding: 28px;
    color: #0f172a;
}

.state-card[b-dy4pase0em] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
    color: #64748b;
    font-weight: 850;
}

.state-card.warning[b-dy4pase0em] {
    color: #92400e;
    background: #fffbeb;
    border-color: #fde68a;
}

.state-card.error[b-dy4pase0em] {
    color: #be123c;
    background: #fff1f2;
    border-color: #fecdd3;
}

.state-card button[b-dy4pase0em] {
    display: block;
    margin-top: 16px;
    border: none;
    border-radius: 14px;
    padding: 11px 15px;
    background: #0f766e;
    color: #ffffff;
    font-weight: 900;
    cursor: pointer;
}

.pass-hero[b-dy4pase0em] {
    background:
        radial-gradient(circle at top left, rgba(1, 193, 180, 0.22), transparent 34%),
        linear-gradient(135deg, #ffffff, #f8fafc);
    border: 1px solid #e2e8f0;
    border-radius: 28px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 20px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.09);
}

.eyebrow[b-dy4pase0em] {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0891b2;
    margin-bottom: 6px;
}

.pass-hero h1[b-dy4pase0em] {
    margin: 0;
    font-size: 32px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.pass-hero p[b-dy4pase0em] {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 15px;
}

.back-btn[b-dy4pase0em] {
    border: 1px solid #99f6e4;
    background: #f0fdfa;
    color: #0f766e;
    border-radius: 16px;
    padding: 11px 15px;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
}

.pass-shell[b-dy4pase0em] {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.pass-card[b-dy4pase0em],
.info-panel[b-dy4pase0em] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.10);
}

.pass-card[b-dy4pase0em] {
    position: relative;
    overflow: hidden;
}

.pass-card[b-dy4pase0em]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 140px;
    background: linear-gradient(135deg, #01C1B4, #0f766e);
    z-index: 0;
}

.pass-card > *[b-dy4pase0em] {
    position: relative;
    z-index: 1;
}

.pass-top[b-dy4pase0em] {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #ffffff;
    margin-bottom: 26px;
}

.brand-mark[b-dy4pase0em] {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 950;
}

.pass-top span[b-dy4pase0em] {
    display: block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.14em;
    opacity: 0.92;
}

.pass-top h2[b-dy4pase0em] {
    margin: 3px 0 0;
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.staff-profile[b-dy4pase0em] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.staff-photo[b-dy4pase0em] {
    width: 82px;
    height: 82px;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg, #01C1B4, #0f766e);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 950;
    flex-shrink: 0;
}

.staff-photo img[b-dy4pase0em] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.staff-profile h3[b-dy4pase0em] {
    margin: 0;
    font-size: 20px;
    font-weight: 950;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.staff-profile p[b-dy4pase0em] {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.mini-tags[b-dy4pase0em] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.mini-tags span[b-dy4pase0em] {
    border-radius: 999px;
    padding: 6px 9px;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    color: #0f766e;
    font-size: 11px;
    font-weight: 900;
}

.qr-box[b-dy4pase0em] {
    width: 250px;
    height: 250px;
    margin: 0 auto 14px;
    border-radius: 26px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.qr-box img[b-dy4pase0em] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qr-placeholder[b-dy4pase0em] {
    color: #94a3b8;
    font-size: 36px;
    font-weight: 950;
}

.pass-number[b-dy4pase0em] {
    text-align: center;
    color: #0f172a;
    font-size: 14px;
    font-weight: 950;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    word-break: break-word;
}

.validity-grid[b-dy4pase0em] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.validity-grid div[b-dy4pase0em] {
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 13px;
}

.validity-grid span[b-dy4pase0em],
.detail-list span[b-dy4pase0em] {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
    margin-bottom: 5px;
}

.validity-grid strong[b-dy4pase0em],
.detail-list strong[b-dy4pase0em] {
    display: block;
    color: #0f172a;
    font-size: 14px;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.pass-status[b-dy4pase0em] {
    border-radius: 999px;
    padding: 12px 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.12em;
}

.pass-status.active[b-dy4pase0em] {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #86efac;
}

.pass-status.expired[b-dy4pase0em] {
    background: #fff1f2;
    color: #be123c;
    border: 1px solid #fda4af;
}

.panel-header[b-dy4pase0em] {
    margin-bottom: 16px;
}

.panel-header h2[b-dy4pase0em] {
    margin: 0;
    font-size: 23px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.detail-list[b-dy4pase0em] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.detail-list div[b-dy4pase0em] {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 14px;
    background: #f8fafc;
}

.notice-box[b-dy4pase0em] {
    margin-top: 16px;
    border-radius: 18px;
    padding: 14px 16px;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    color: #0f766e;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.5;
}

.alert[b-dy4pase0em] {
    border-radius: 16px;
    padding: 12px 14px;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 850;
}

.alert-error[b-dy4pase0em] {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
}

@media (max-width: 980px) {
    .pass-shell[b-dy4pase0em] {
        grid-template-columns: 1fr;
    }

    .pass-card[b-dy4pase0em] {
        max-width: 460px;
    }
}

@media (max-width: 720px) {
    .staff-pass-page[b-dy4pase0em] {
        padding: 18px 12px;
    }

    .pass-hero[b-dy4pase0em] {
        flex-direction: column;
    }

    .pass-hero h1[b-dy4pase0em] {
        font-size: 26px;
    }

    .back-btn[b-dy4pase0em] {
        width: 100%;
    }

    .pass-card[b-dy4pase0em],
    .info-panel[b-dy4pase0em] {
        padding: 20px;
        border-radius: 24px;
    }

    .staff-profile[b-dy4pase0em] {
        flex-direction: column;
        align-items: flex-start;
    }

    .qr-box[b-dy4pase0em] {
        width: 220px;
        height: 220px;
    }

    .validity-grid[b-dy4pase0em],
    .detail-list[b-dy4pase0em] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Staff/Register.razor.rz.scp.css */
.staff-register-page[b-6owytf0nop] {
    min-height: 100vh;
    padding: 32px 18px;
    background:
        radial-gradient(circle at top left, rgba(1, 193, 180, 0.20), transparent 34%),
        linear-gradient(135deg, #eef6f5 0%, #f8fafc 48%, #ecfeff 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    color: #0f172a;
}

.register-card[b-6owytf0nop] {
    width: 100%;
    max-width: 820px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 28px;
    padding: 30px;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.14);
    border: 1px solid rgba(226, 232, 240, 0.95);
    backdrop-filter: blur(14px);
}

.brand[b-6owytf0nop] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.brand-mark[b-6owytf0nop] {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: linear-gradient(135deg, #01C1B4, #0f766e);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
    font-size: 28px;
    box-shadow: 0 18px 36px rgba(1, 193, 180, 0.28);
}

.brand h1[b-6owytf0nop] {
    margin: 0;
    font-size: 30px;
    font-weight: 950;
    letter-spacing: -0.04em;
    color: #0f172a;
}

.brand p[b-6owytf0nop] {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

.alert[b-6owytf0nop] {
    border-radius: 18px;
    padding: 14px 16px;
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 700;
}

.alert-error[b-6owytf0nop] {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
}

.alert-success[b-6owytf0nop] {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #047857;
}

.uppercase-input[b-6owytf0nop] {
    text-transform: uppercase;
}

.form-grid[b-6owytf0nop] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-group[b-6owytf0nop] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group.full[b-6owytf0nop] {
    grid-column: 1 / -1;
}

.form-group label[b-6owytf0nop] {
    font-size: 13px;
    font-weight: 850;
    color: #334155;
}

.form-control[b-6owytf0nop] {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    padding: 13px 15px;
    font-size: 14px;
    font-weight: 650;
    color: #0f172a;
    background: #ffffff;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.form-control[b-6owytf0nop]::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

.form-control:focus[b-6owytf0nop] {
    border-color: #01C1B4;
    box-shadow: 0 0 0 4px rgba(1, 193, 180, 0.14);
    background: #ffffff;
}

.validation-message[b-6owytf0nop],
.field-error[b-6owytf0nop] {
    display: block;
    color: #e11d48;
    font-size: 12px;
    font-weight: 750;
    margin-top: 8px;
}

.photo-upload-card[b-6owytf0nop] {
    border: 1px dashed rgba(15, 118, 110, 0.35);
    background:
        radial-gradient(circle at top left, rgba(1, 193, 180, 0.08), transparent 34%),
        linear-gradient(135deg, #f8fafc, #ffffff);
    border-radius: 24px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.photo-preview[b-6owytf0nop] {
    width: 110px;
    height: 110px;
    border-radius: 26px;
    background: #ecfeff;
    border: 1px solid #ccfbf1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.55);
}

.photo-preview-img[b-6owytf0nop] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #ffffff;
}

.photo-placeholder[b-6owytf0nop] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #0f766e;
}

.photo-placeholder span[b-6owytf0nop] {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #01C1B4;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 10px 22px rgba(1, 193, 180, 0.24);
}

.photo-placeholder small[b-6owytf0nop] {
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.photo-initial[b-6owytf0nop] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #01C1B4, #0f766e);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.photo-upload-info[b-6owytf0nop] {
    flex: 1;
    min-width: 0;
}

.photo-upload-info > strong[b-6owytf0nop] {
    display: block;
    font-size: 15px;
    font-weight: 950;
    color: #0f172a;
    margin-bottom: 4px;
}

.photo-upload-info p[b-6owytf0nop] {
    margin: 0 0 12px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

/* Modern upload button */
.modern-file-upload[b-6owytf0nop] {
    position: relative;
    width: 100%;
    min-height: 64px;
    border-radius: 18px;
    border: 1px solid rgba(1, 193, 180, 0.42);
    background:
        linear-gradient(135deg, rgba(236, 254, 255, 0.96), rgba(240, 253, 250, 0.96));
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.modern-file-upload:hover[b-6owytf0nop] {
    transform: translateY(-1px);
    border-color: #01C1B4;
    box-shadow: 0 16px 30px rgba(1, 193, 180, 0.14);
    background:
        linear-gradient(135deg, rgba(236, 254, 255, 1), rgba(204, 251, 241, 0.78));
}

.modern-file-upload[b-6owytf0nop]::after {
    content: "Browse";
    margin-left: auto;
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 8px 13px;
    background: #ffffff;
    border: 1px solid rgba(1, 193, 180, 0.26);
    color: #0f766e;
    font-size: 12px;
    font-weight: 950;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

/* Hide the browser default Choose File button */
.native-file-input[b-6owytf0nop],
.modern-file-upload input[type="file"][b-6owytf0nop],
.modern-file-upload[b-6owytf0nop]  input[type="file"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 5 !important;
    font-size: 0 !important;
}

.file-upload-icon[b-6owytf0nop],
.file-upload-text[b-6owytf0nop],
.modern-file-upload[b-6owytf0nop]::after {
    position: relative;
    z-index: 6;
    pointer-events: none;
}

.file-upload-icon[b-6owytf0nop] {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    background: linear-gradient(135deg, #01C1B4, #0f766e);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 28px;
    font-weight: 950;
    line-height: 1;
    flex: 0 0 auto;
    box-shadow: 0 12px 22px rgba(1, 193, 180, 0.22);
}

.file-upload-text[b-6owytf0nop] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.file-upload-text strong[b-6owytf0nop] {
    color: #0f172a;
    font-size: 14px;
    font-weight: 950;
}

.file-upload-text small[b-6owytf0nop] {
    color: #64748b;
    font-size: 12px;
    font-weight: 650;
}

.selected-file[b-6owytf0nop] {
    margin-top: 10px;
    border-radius: 14px;
    padding: 10px 12px;
    background: #f0fdfa;
    border: 1px solid #ccfbf1;
    color: #0f766e;
    overflow-wrap: anywhere;
}

.selected-file span[b-6owytf0nop] {
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0f766e;
}

.selected-file strong[b-6owytf0nop] {
    display: block;
    font-size: 12px;
    font-weight: 850;
    color: #134e4a;
}

.notice-box[b-6owytf0nop] {
    margin-top: 22px;
    border-radius: 20px;
    padding: 16px 18px;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
}

.notice-box strong[b-6owytf0nop] {
    display: block;
    font-size: 14px;
    font-weight: 950;
    color: #0f766e;
    margin-bottom: 4px;
}

.notice-box p[b-6owytf0nop] {
    margin: 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.55;
}

.submit-btn[b-6owytf0nop] {
    margin-top: 22px;
    width: 100%;
    border: none;
    border-radius: 18px;
    padding: 15px 18px;
    background: linear-gradient(135deg, #01C1B4, #0f766e);
    color: #ffffff;
    font-size: 15px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 18px 34px rgba(1, 193, 180, 0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.submit-btn:hover:not(:disabled)[b-6owytf0nop] {
    transform: translateY(-1px);
    box-shadow: 0 22px 42px rgba(1, 193, 180, 0.30);
}

.submit-btn:disabled[b-6owytf0nop] {
    opacity: 0.65;
    cursor: not-allowed;
}

.footer-note[b-6owytf0nop] {
    margin-top: 18px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
    font-weight: 650;
}

.footer-note a[b-6owytf0nop] {
    color: #0f766e;
    font-weight: 950;
    text-decoration: none;
}

.footer-note a:hover[b-6owytf0nop] {
    text-decoration: underline;
}

@media (max-width: 720px) {
    .staff-register-page[b-6owytf0nop] {
        padding: 20px 12px;
    }

    .register-card[b-6owytf0nop] {
        padding: 22px;
        border-radius: 24px;
    }

    .brand[b-6owytf0nop] {
        align-items: flex-start;
    }

    .brand-mark[b-6owytf0nop] {
        width: 50px;
        height: 50px;
        border-radius: 16px;
        font-size: 24px;
    }

    .brand h1[b-6owytf0nop] {
        font-size: 24px;
    }

    .form-grid[b-6owytf0nop] {
        grid-template-columns: 1fr;
    }

    .photo-upload-card[b-6owytf0nop] {
        flex-direction: column;
        align-items: flex-start;
    }

    .photo-preview[b-6owytf0nop] {
        width: 96px;
        height: 96px;
    }

    .photo-upload-info[b-6owytf0nop] {
        width: 100%;
    }

    .modern-file-upload[b-6owytf0nop] {
        min-height: 62px;
    }

    .modern-file-upload[b-6owytf0nop]::after {
        display: none;
    }
}
/* /Components/Pages/Staff/SafetyBriefing.razor.rz.scp.css */
.staff-video-page[b-zzw2gmma3t] {
    padding: 28px;
    color: #0f172a;
}

.state-card[b-zzw2gmma3t] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
    color: #64748b;
    font-weight: 850;
}

.state-card.warning[b-zzw2gmma3t] {
    color: #92400e;
    background: #fffbeb;
    border-color: #fde68a;
}

.state-card.error[b-zzw2gmma3t] {
    color: #be123c;
    background: #fff1f2;
    border-color: #fecdd3;
}

.state-card button[b-zzw2gmma3t] {
    display: block;
    margin-top: 16px;
    border: none;
    border-radius: 14px;
    padding: 11px 15px;
    background: #0f766e;
    color: #ffffff;
    font-weight: 900;
    cursor: pointer;
}

.video-hero[b-zzw2gmma3t] {
    background:
        radial-gradient(circle at top left, rgba(1, 193, 180, 0.22), transparent 34%),
        linear-gradient(135deg, #ffffff, #f8fafc);
    border: 1px solid #e2e8f0;
    border-radius: 28px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 20px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.09);
}

.eyebrow[b-zzw2gmma3t] {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0891b2;
    margin-bottom: 6px;
}

.video-hero h1[b-zzw2gmma3t] {
    margin: 0;
    font-size: 32px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.video-hero p[b-zzw2gmma3t] {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 15px;
}

.back-btn[b-zzw2gmma3t] {
    border: 1px solid #99f6e4;
    background: #f0fdfa;
    color: #0f766e;
    border-radius: 16px;
    padding: 11px 15px;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
}

.content-grid[b-zzw2gmma3t] {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr;
    gap: 20px;
}

.video-panel[b-zzw2gmma3t],
.ack-panel[b-zzw2gmma3t] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
}

.video-frame[b-zzw2gmma3t] {
    background: #020617;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.video-frame video[b-zzw2gmma3t] {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    background: #020617;
}

.video-info[b-zzw2gmma3t] {
    margin-top: 16px;
}

.video-info h2[b-zzw2gmma3t],
.panel-header h2[b-zzw2gmma3t] {
    margin: 0;
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.video-info p[b-zzw2gmma3t] {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}

.panel-header[b-zzw2gmma3t] {
    margin-bottom: 14px;
}

.notice[b-zzw2gmma3t] {
    border-radius: 18px;
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.5;
    margin-bottom: 16px;
}

.notice.warning[b-zzw2gmma3t] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.notice.success[b-zzw2gmma3t] {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #047857;
}

.check-row[b-zzw2gmma3t] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 18px;
    padding: 14px;
    cursor: pointer;
}

.check-row.disabled[b-zzw2gmma3t] {
    opacity: 0.6;
    cursor: not-allowed;
}

.check-row input[b-zzw2gmma3t] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: #01C1B4;
}

.check-row span[b-zzw2gmma3t] {
    color: #334155;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.5;
}

.alert[b-zzw2gmma3t] {
    border-radius: 16px;
    padding: 12px 14px;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 850;
}

.alert-error[b-zzw2gmma3t] {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
}

.alert-success[b-zzw2gmma3t] {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #047857;
}

.submit-btn[b-zzw2gmma3t] {
    width: 100%;
    margin-top: 16px;
    border: none;
    border-radius: 16px;
    padding: 14px 17px;
    background: linear-gradient(135deg, #01C1B4, #0f766e);
    color: #ffffff;
    font-size: 14px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 16px 34px rgba(1, 193, 180, 0.24);
}

.submit-btn:disabled[b-zzw2gmma3t] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

@media (max-width: 980px) {
    .content-grid[b-zzw2gmma3t] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .staff-video-page[b-zzw2gmma3t] {
        padding: 18px 12px;
    }

    .video-hero[b-zzw2gmma3t] {
        flex-direction: column;
    }

    .video-hero h1[b-zzw2gmma3t] {
        font-size: 26px;
    }

    .back-btn[b-zzw2gmma3t] {
        width: 100%;
    }
}
/* /Components/Pages/Staff/StaffFsuAccessRequest.razor.rz.scp.css */
/* =========================================================
   FsuAccessRequests.razor.css
   Page-specific styles only.
   Shared reusable styles are handled by wwwroot/css/jru-shared.css
   ========================================================= */

.fsu-access-page[b-w7wnd9l486] {
    min-height: calc(100vh - 32px);
    padding: 32px 36px 60px;
    background: var(--jru-slate-50, #f8fafc);
    color: var(--jru-slate-900, #0f172a);
}

.page-header[b-w7wnd9l486] {
    margin-bottom: 20px;
}

.page-header h1[b-w7wnd9l486] {
    font-size: 32px;
}

.page-header p[b-w7wnd9l486] {
    margin-top: 10px;
    color: var(--jru-slate-500, #64748b);
    font-size: 15px;
}

.filter-card[b-w7wnd9l486] {
    margin-bottom: 20px;
}

.filter-grid[b-w7wnd9l486] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.filter-grid label[b-w7wnd9l486],
.request-action-panel label[b-w7wnd9l486] {
    display: block;
    margin-bottom: 7px;
    color: var(--jru-slate-700, #334155);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.kpi-grid[b-w7wnd9l486] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.kpi-card[b-w7wnd9l486] {
    min-height: 124px;
}

.kpi-card span[b-w7wnd9l486] {
    display: block;
    margin-bottom: 12px;
    color: var(--jru-slate-700, #334155);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.kpi-card strong[b-w7wnd9l486] {
    display: block;
    margin-bottom: 10px;
    color: #020617;
    font-size: 36px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.06em;
}

.kpi-card small[b-w7wnd9l486] {
    display: block;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 750;
}

.kpi-card.warning[b-w7wnd9l486] {
    background: #fffbeb;
    border-color: #fde68a;
}

.kpi-card.warning strong[b-w7wnd9l486] {
    color: #b45309;
}

.kpi-card.approved[b-w7wnd9l486] {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.kpi-card.approved strong[b-w7wnd9l486] {
    color: #047857;
}

.kpi-card.on-fsu[b-w7wnd9l486] {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.kpi-card.on-fsu strong[b-w7wnd9l486] {
    color: #1d4ed8;
}

.kpi-card.completed[b-w7wnd9l486] {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.kpi-card.completed strong[b-w7wnd9l486] {
    color: #475569;
}

.request-builder[b-w7wnd9l486],
.request-list-panel[b-w7wnd9l486] {
    margin-top: 20px;
}

.builder-header[b-w7wnd9l486] {
    align-items: flex-start;
    gap: 18px;
}

.builder-header span[b-w7wnd9l486],
.request-list-panel .jru-panel-header span[b-w7wnd9l486] {
    display: block;
    margin-bottom: 6px;
    color: #0f766e;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.builder-header h2[b-w7wnd9l486],
.request-list-panel .jru-panel-header h2[b-w7wnd9l486] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 24px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.builder-header p[b-w7wnd9l486],
.request-list-panel .jru-panel-header p[b-w7wnd9l486] {
    margin: 7px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 14px;
}

/* Compact candidate groups */

.candidate-grid[b-w7wnd9l486] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.candidate-card[b-w7wnd9l486] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    display: block;
    text-align: left;
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    background: #ffffff;
    border-radius: 22px;
    padding: 14px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045);
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.candidate-card:hover[b-w7wnd9l486] {
    transform: translateY(-2px);
    border-color: #99f6e4;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10);
}

.candidate-card.selected[b-w7wnd9l486] {
    border-color: #01C1B4;
    background: linear-gradient(135deg, #f8fffd, #ffffff);
    box-shadow:
        0 0 0 4px rgba(1, 193, 180, 0.14),
        0 22px 55px rgba(1, 193, 180, 0.14);
}

.candidate-card-compact[b-w7wnd9l486] {
    min-height: auto;
}

.candidate-compact-header[b-w7wnd9l486] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.candidate-label[b-w7wnd9l486],
.candidate-compact-info-grid span[b-w7wnd9l486],
.candidate-visitor-title[b-w7wnd9l486],
.request-info-grid span[b-w7wnd9l486],
.timeline-item span[b-w7wnd9l486] {
    display: block;
    margin-bottom: 4px;
    color: var(--jru-slate-500, #64748b);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.candidate-card h3[b-w7wnd9l486] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 19px;
    font-weight: 950;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.candidate-card p[b-w7wnd9l486] {
    margin: 4px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 800;
}

.candidate-header-badges[b-w7wnd9l486] {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 7px;
    flex: 0 0 auto;
}

.candidate-count-pill[b-w7wnd9l486],
.candidate-destination-pill[b-w7wnd9l486] {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap;
}

.candidate-count-pill[b-w7wnd9l486] {
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    color: #0e7490;
}

.candidate-destination-pill[b-w7wnd9l486] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #047857;
}

.candidate-compact-info-grid[b-w7wnd9l486] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    margin-bottom: 12px;
}

.candidate-compact-info-grid div[b-w7wnd9l486] {
    min-width: 0;
    padding: 10px 12px;
    border-right: 1px solid var(--jru-slate-200, #e2e8f0);
}

.candidate-compact-info-grid div:last-child[b-w7wnd9l486] {
    border-right: none;
}

.candidate-compact-info-grid strong[b-w7wnd9l486] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.candidate-compact-visitors[b-w7wnd9l486] {
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
}

.candidate-visitor-title[b-w7wnd9l486] {
    padding: 9px 12px;
    margin: 0;
    background: var(--jru-slate-50, #f8fafc);
    border-bottom: 1px solid var(--jru-slate-200, #e2e8f0);
}

.candidate-visitor-mini-list[b-w7wnd9l486] {
    display: grid;
}

.candidate-visitor-mini-row[b-w7wnd9l486] {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(130px, 0.55fr);
    gap: 14px;
    align-items: center;
    padding: 9px 12px;
    border-bottom: 1px solid var(--jru-slate-100, #f1f5f9);
}

.candidate-visitor-mini-row:last-child[b-w7wnd9l486] {
    border-bottom: none;
}

.candidate-visitor-mini-row strong[b-w7wnd9l486] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 13px;
    font-weight: 950;
    line-height: 1.15;
}

.candidate-visitor-mini-row small[b-w7wnd9l486] {
    display: block;
    margin-top: 2px;
    color: var(--jru-slate-500, #64748b);
    font-size: 11px;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.candidate-visitor-mini-row span[b-w7wnd9l486] {
    color: var(--jru-slate-700, #334155);
    font-size: 12px;
    font-weight: 850;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.candidate-more-row[b-w7wnd9l486] {
    padding: 8px 12px;
    background: var(--jru-slate-50, #f8fafc);
    border-top: 1px solid var(--jru-slate-100, #f1f5f9);
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 850;
}

.request-card-list[b-w7wnd9l486] {
    display: grid;
    gap: 16px;
}

.request-card[b-w7wnd9l486] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 16px;
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    background: #ffffff;
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}

.request-card.pending[b-w7wnd9l486] {
    border-color: #fde68a;
    background: linear-gradient(135deg, #ffffff, #fffbeb);
}

.request-card.approved[b-w7wnd9l486] {
    border-color: #bbf7d0;
    background: linear-gradient(135deg, #ffffff, #f0fdf4);
}

.request-card.on-fsu[b-w7wnd9l486] {
    border-color: #bfdbfe;
    background: linear-gradient(135deg, #ffffff, #eff6ff);
}

.request-card.completed[b-w7wnd9l486] {
    border-color: #cbd5e1;
}

.request-card.denied[b-w7wnd9l486] {
    border-color: #fecaca;
    background: linear-gradient(135deg, #ffffff, #fff1f2);
}

.request-card-header[b-w7wnd9l486] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.request-code[b-w7wnd9l486] {
    display: block;
    margin-bottom: 5px;
    color: #0f766e;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.request-card-header h3[b-w7wnd9l486] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.request-card-header p[b-w7wnd9l486] {
    margin: 5px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 13px;
    font-weight: 800;
}

.request-status-stack[b-w7wnd9l486] {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 8px;
}

.request-status-stack strong[b-w7wnd9l486] {
    color: var(--jru-slate-900, #0f172a);
    font-size: 14px;
    font-weight: 950;
}

.request-info-grid[b-w7wnd9l486] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.request-info-grid div[b-w7wnd9l486] {
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    background: #ffffff;
    border-radius: 16px;
    padding: 11px 12px;
}

.request-info-grid strong[b-w7wnd9l486] {
    color: var(--jru-slate-900, #0f172a);
    font-size: 13px;
    font-weight: 900;
}

.timeline-grid[b-w7wnd9l486] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.timeline-item[b-w7wnd9l486] {
    border: 1px dashed var(--jru-slate-300, #cbd5e1);
    background: var(--jru-slate-50, #f8fafc);
    border-radius: 16px;
    padding: 11px 12px;
}

.timeline-item.done[b-w7wnd9l486] {
    border-style: solid;
    border-color: #99f6e4;
    background: #f0fdfa;
}

.timeline-item strong[b-w7wnd9l486] {
    color: var(--jru-slate-800, #1e293b);
    font-size: 12px;
    font-weight: 900;
}

.denial-note[b-w7wnd9l486] {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #991b1b;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 750;
}

.visitor-table-wrap[b-w7wnd9l486] {
    overflow-x: auto;
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    border-radius: 16px;
    background: #ffffff;
}

.visitor-table[b-w7wnd9l486] {
    min-width: 820px;
}

.visitor-table th:first-child[b-w7wnd9l486],
.visitor-table td:first-child[b-w7wnd9l486] {
    width: 64px;
    text-align: center;
}

.visitor-table td strong[b-w7wnd9l486] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-weight: 900;
}

.visitor-table td small[b-w7wnd9l486] {
    display: block;
    margin-top: 2px;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 750;
}

.request-action-panel[b-w7wnd9l486] {
    border-left: 1px solid var(--jru-slate-200, #e2e8f0);
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.request-action-panel .full[b-w7wnd9l486] {
    width: 100%;
}

.deny-box[b-w7wnd9l486] {
    min-height: 110px;
    resize: vertical;
}

.action-note[b-w7wnd9l486] {
    border-radius: 16px;
    padding: 13px 14px;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.45;
}

.action-note.approved[b-w7wnd9l486] {
    color: #047857;
    background: #d1fae5;
    border: 1px solid #a7f3d0;
}

.action-note.on-fsu[b-w7wnd9l486] {
    color: #1d4ed8;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
}

.action-note.completed[b-w7wnd9l486] {
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
}

.action-note.denied[b-w7wnd9l486] {
    color: #be123c;
    background: #ffe4e6;
    border: 1px solid #fecdd3;
}

.status-badge[b-w7wnd9l486] {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 950;
    border: 1px solid transparent;
}

.status-badge.pending[b-w7wnd9l486] {
    color: #b45309;
    background: #fef3c7;
    border-color: #fde68a;
}

.status-badge.approved[b-w7wnd9l486] {
    color: #047857;
    background: #d1fae5;
    border-color: #a7f3d0;
}

.status-badge.on-fsu[b-w7wnd9l486] {
    color: #1d4ed8;
    background: #dbeafe;
    border-color: #bfdbfe;
}

.status-badge.completed[b-w7wnd9l486] {
    color: var(--jru-slate-600, #475569);
    background: var(--jru-slate-100, #f1f5f9);
    border-color: var(--jru-slate-300, #cbd5e1);
}

.status-badge.denied[b-w7wnd9l486] {
    color: #be123c;
    background: #ffe4e6;
    border-color: #fecdd3;
}

@media (max-width: 1400px) {
    .candidate-grid[b-w7wnd9l486] {
        grid-template-columns: 1fr;
    }

    .kpi-grid[b-w7wnd9l486] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .filter-grid[b-w7wnd9l486],
    .request-info-grid[b-w7wnd9l486],
    .timeline-grid[b-w7wnd9l486] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .candidate-compact-info-grid[b-w7wnd9l486] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .candidate-compact-info-grid div:nth-child(2)[b-w7wnd9l486] {
        border-right: none;
    }

    .candidate-compact-info-grid div:nth-child(1)[b-w7wnd9l486],
    .candidate-compact-info-grid div:nth-child(2)[b-w7wnd9l486] {
        border-bottom: 1px solid var(--jru-slate-200, #e2e8f0);
    }

    .request-card[b-w7wnd9l486] {
        grid-template-columns: 1fr;
    }

    .request-action-panel[b-w7wnd9l486] {
        border-left: none;
        border-top: 1px solid var(--jru-slate-200, #e2e8f0);
        padding-left: 0;
        padding-top: 16px;
    }
}

@media (max-width: 768px) {
    .fsu-access-page[b-w7wnd9l486] {
        padding: 24px 18px 44px;
    }

    .page-header[b-w7wnd9l486],
    .builder-header[b-w7wnd9l486],
    .request-card-header[b-w7wnd9l486] {
        flex-direction: column;
    }

    .filter-grid[b-w7wnd9l486],
    .candidate-grid[b-w7wnd9l486],
    .request-info-grid[b-w7wnd9l486],
    .timeline-grid[b-w7wnd9l486],
    .kpi-grid[b-w7wnd9l486] {
        grid-template-columns: 1fr;
    }

    .request-status-stack[b-w7wnd9l486] {
        align-items: flex-start;
    }

    .candidate-compact-header[b-w7wnd9l486] {
        flex-direction: column;
    }

    .candidate-header-badges[b-w7wnd9l486] {
        align-items: flex-start;
        flex-direction: row;
    }

    .candidate-visitor-mini-row[b-w7wnd9l486] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .candidate-visitor-mini-row span[b-w7wnd9l486] {
        text-align: left;
    }
}

/* =========================================================
   Compact FSU request card layout
   ========================================================= */

.request-card-list[b-w7wnd9l486] {
    gap: 14px;
}

.request-card-compact[b-w7wnd9l486] {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 0;
    padding: 14px;
    overflow: hidden;
}

.request-card-compact.pending[b-w7wnd9l486] {
    border-color: #fde68a;
    background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
}

.request-card-compact.approved[b-w7wnd9l486] {
    border-color: #bbf7d0;
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
}

.request-card-compact.on-fsu[b-w7wnd9l486] {
    border-color: #bfdbfe;
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
}

.request-card-compact.completed[b-w7wnd9l486] {
    border-color: #cbd5e1;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.request-card-compact.denied[b-w7wnd9l486] {
    border-color: #fecaca;
    background: linear-gradient(135deg, #ffffff 0%, #fff1f2 100%);
}

.compact-main[b-w7wnd9l486] {
    min-width: 0;
    padding-right: 16px;
}

.compact-request-header[b-w7wnd9l486] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
    margin-bottom: 12px;
}

.compact-host-block[b-w7wnd9l486] {
    min-width: 0;
}

.compact-host-block h3[b-w7wnd9l486] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 22px;
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.compact-host-block p[b-w7wnd9l486] {
    margin: 5px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 13px;
    font-weight: 800;
}

.compact-status-block[b-w7wnd9l486] {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 8px;
    white-space: nowrap;
}

.compact-status-block strong[b-w7wnd9l486] {
    color: var(--jru-slate-900, #0f172a);
    font-size: 14px;
    font-weight: 950;
}

.compact-info-grid[b-w7wnd9l486] {
    display: grid;
    grid-template-columns: 1.25fr 0.9fr 0.9fr 0.75fr 0.9fr;
    border-top: 1px solid var(--jru-slate-200, #e2e8f0);
    border-bottom: 1px solid var(--jru-slate-200, #e2e8f0);
    margin-bottom: 12px;
}

.compact-info-item[b-w7wnd9l486] {
    min-width: 0;
    padding: 11px 14px;
    border-right: 1px solid var(--jru-slate-200, #e2e8f0);
}

.compact-info-item:nth-child(5n)[b-w7wnd9l486] {
    border-right: none;
}

.compact-info-item:nth-child(n + 6)[b-w7wnd9l486] {
    border-top: 1px solid var(--jru-slate-200, #e2e8f0);
}

.compact-info-item span[b-w7wnd9l486] {
    display: block;
    margin-bottom: 5px;
    color: var(--jru-slate-500, #64748b);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.compact-info-item strong[b-w7wnd9l486] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.compact-info-item.done[b-w7wnd9l486] {
    background: #f0fdfa;
}

.compact-info-item.done span[b-w7wnd9l486],
.compact-info-item.done strong[b-w7wnd9l486] {
    color: #0f766e;
}

.compact-denial-note[b-w7wnd9l486] {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 12px;
}

.compact-table-title[b-w7wnd9l486] {
    margin: 0 0 8px;
}

.compact-table-title strong[b-w7wnd9l486] {
    color: var(--jru-slate-900, #0f172a);
    font-size: 14px;
    font-weight: 950;
}

.compact-table-wrap[b-w7wnd9l486] {
    border-radius: 14px;
}

.compact-visitor-table[b-w7wnd9l486] {
    min-width: 760px;
}

.compact-visitor-table th[b-w7wnd9l486] {
    padding: 9px 12px;
    font-size: 10px;
}

.compact-visitor-table td[b-w7wnd9l486] {
    padding: 8px 12px;
    font-size: 13px;
}

.compact-visitor-table td strong[b-w7wnd9l486] {
    font-size: 13px;
    line-height: 1.2;
}

.compact-visitor-table td small[b-w7wnd9l486] {
    margin-top: 1px;
    font-size: 11px;
}

.compact-action-panel[b-w7wnd9l486] {
    min-width: 0;
    border-left: 1px solid var(--jru-slate-200, #e2e8f0);
    padding: 0 0 0 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}

.compact-action-top[b-w7wnd9l486] {
    display: grid;
    gap: 10px;
}

.compact-action-panel .jru-btn.full[b-w7wnd9l486] {
    min-height: 38px;
    border-radius: 13px;
}

.compact-action-panel label[b-w7wnd9l486] {
    margin: 2px 0 -4px;
    font-size: 10px;
}

.compact-deny-box[b-w7wnd9l486] {
    min-height: 78px;
    border-radius: 13px;
    resize: vertical;
}

.action-note.pending[b-w7wnd9l486] {
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fde68a;
}

.compact-side-timeline[b-w7wnd9l486] {
    display: grid;
    gap: 0;
    margin-top: 4px;
    border-top: 1px solid var(--jru-slate-200, #e2e8f0);
    padding-top: 12px;
}

.compact-side-timeline-item[b-w7wnd9l486] {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    padding: 0 0 18px;
}

.compact-side-timeline-item:last-child[b-w7wnd9l486] {
    padding-bottom: 0;
}

.compact-side-timeline-item[b-w7wnd9l486]::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 28px;
    bottom: 0;
    width: 1px;
    background: #99f6e4;
}

.compact-side-timeline-item:last-child[b-w7wnd9l486]::before {
    display: none;
}

.timeline-dot[b-w7wnd9l486] {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #2dd4bf;
    color: #0f766e;
    font-size: 13px;
    font-weight: 950;
}

.compact-side-timeline-item.done .timeline-dot[b-w7wnd9l486] {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}

.compact-side-timeline-item strong[b-w7wnd9l486] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
}

.compact-side-timeline-item small[b-w7wnd9l486] {
    display: block;
    margin-top: 3px;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.25;
}

@media (max-width: 1300px) {
    .request-card-compact[b-w7wnd9l486] {
        grid-template-columns: 1fr;
    }

    .compact-main[b-w7wnd9l486] {
        padding-right: 0;
    }

    .compact-action-panel[b-w7wnd9l486] {
        border-left: none;
        border-top: 1px solid var(--jru-slate-200, #e2e8f0);
        margin-top: 14px;
        padding: 14px 0 0;
    }

    .compact-action-top[b-w7wnd9l486] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .compact-side-timeline[b-w7wnd9l486] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .compact-side-timeline-item[b-w7wnd9l486] {
        padding-bottom: 0;
    }

    .compact-side-timeline-item[b-w7wnd9l486]::before {
        display: none;
    }
}

@media (max-width: 900px) {
    .compact-info-grid[b-w7wnd9l486] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .compact-info-item:nth-child(5n)[b-w7wnd9l486] {
        border-right: 1px solid var(--jru-slate-200, #e2e8f0);
    }

    .compact-info-item:nth-child(2n)[b-w7wnd9l486] {
        border-right: none;
    }

    .compact-info-item:nth-child(n + 3)[b-w7wnd9l486] {
        border-top: 1px solid var(--jru-slate-200, #e2e8f0);
    }

    .compact-action-top[b-w7wnd9l486],
    .compact-side-timeline[b-w7wnd9l486] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .compact-request-header[b-w7wnd9l486] {
        grid-template-columns: 1fr;
    }

    .compact-status-block[b-w7wnd9l486] {
        align-items: flex-start;
    }

    .compact-info-grid[b-w7wnd9l486] {
        grid-template-columns: 1fr;
    }

    .compact-info-item[b-w7wnd9l486],
    .compact-info-item:nth-child(5n)[b-w7wnd9l486],
    .compact-info-item:nth-child(2n)[b-w7wnd9l486] {
        border-right: none;
    }

    .compact-info-item:nth-child(n + 2)[b-w7wnd9l486] {
        border-top: 1px solid var(--jru-slate-200, #e2e8f0);
    }
}

/* =========================================================
   Staff FSU Access self-service / admin management additions
   ========================================================= */

.staff-fsu-page[b-w7wnd9l486] {
    min-height: calc(100vh - 32px);
    padding: 32px 36px 60px;
    background: var(--jru-slate-50, #f8fafc);
    color: var(--jru-slate-900, #0f172a);
}

.staff-state-panel[b-w7wnd9l486] {
    margin-top: 20px;
}

.staff-self-grid[b-w7wnd9l486] {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 18px;
    margin-bottom: 20px;
}

.staff-profile-panel[b-w7wnd9l486],
.staff-request-form-panel[b-w7wnd9l486] {
    min-width: 0;
}

.compact-header[b-w7wnd9l486] {
    align-items: flex-start;
    gap: 14px;
}

.staff-info-grid[b-w7wnd9l486] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
}

.staff-info-grid div[b-w7wnd9l486] {
    min-width: 0;
    padding: 12px 14px;
    border-right: 1px solid var(--jru-slate-200, #e2e8f0);
    border-bottom: 1px solid var(--jru-slate-200, #e2e8f0);
}

.staff-info-grid div:nth-child(2n)[b-w7wnd9l486] {
    border-right: none;
}

.staff-info-grid div:nth-child(n + 3)[b-w7wnd9l486] {
    border-bottom: none;
}

.staff-info-grid span[b-w7wnd9l486],
.self-form-grid label[b-w7wnd9l486] {
    display: block;
    margin-bottom: 6px;
    color: var(--jru-slate-500, #64748b);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.staff-info-grid strong[b-w7wnd9l486] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.staff-warning-note[b-w7wnd9l486] {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}

.self-form-grid[b-w7wnd9l486] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.self-form-grid .purpose-field[b-w7wnd9l486] {
    grid-column: 1 / -1;
}

.purpose-box[b-w7wnd9l486] {
    min-height: 104px;
    resize: vertical;
}

.staff-submit-btn[b-w7wnd9l486] {
    width: 100%;
    margin-top: 14px;
    min-height: 44px;
}

.staff-kpi-grid[b-w7wnd9l486] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1200px) {
    .staff-self-grid[b-w7wnd9l486],
    .staff-kpi-grid[b-w7wnd9l486] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .staff-fsu-page[b-w7wnd9l486] {
        padding: 24px 18px 44px;
    }

    .staff-self-grid[b-w7wnd9l486],
    .staff-kpi-grid[b-w7wnd9l486],
    .staff-info-grid[b-w7wnd9l486],
    .self-form-grid[b-w7wnd9l486] {
        grid-template-columns: 1fr;
    }

    .staff-info-grid div[b-w7wnd9l486],
    .staff-info-grid div:nth-child(2n)[b-w7wnd9l486],
    .staff-info-grid div:nth-child(n + 3)[b-w7wnd9l486] {
        border-right: none;
        border-bottom: 1px solid var(--jru-slate-200, #e2e8f0);
    }

    .staff-info-grid div:last-child[b-w7wnd9l486] {
        border-bottom: none;
    }
}

/* =========================================================
   My FSU Access Request - compact self-service layout
   ========================================================= */

.staff-fsu-page.self-mode[b-w7wnd9l486] {
    padding-top: 24px;
}

.staff-fsu-page.self-mode .page-header[b-w7wnd9l486] {
    margin-bottom: 16px;
}

.staff-fsu-page.self-mode .page-header h1[b-w7wnd9l486] {
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -0.055em;
}

.staff-fsu-page.self-mode .page-header p[b-w7wnd9l486] {
    margin-top: 7px;
    font-size: 14px;
}

.compact-self-grid[b-w7wnd9l486] {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 16px;
    margin-bottom: 16px;
}

.self-profile-card[b-w7wnd9l486],
.self-request-card[b-w7wnd9l486],
.self-history-panel[b-w7wnd9l486] {
    border-radius: 22px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.055);
}

.self-card-heading[b-w7wnd9l486] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.self-heading-title[b-w7wnd9l486] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.self-heading-icon[b-w7wnd9l486] {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    background: #f0fdfa;
    border: 1px solid #ccfbf1;
    color: #0f766e;
    font-size: 17px;
}

.self-heading-title span:not(.self-heading-icon)[b-w7wnd9l486] {
    display: block;
    margin-bottom: 4px;
    color: #0f766e;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.self-heading-title h2[b-w7wnd9l486] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 18px;
    font-weight: 950;
    letter-spacing: -0.035em;
}

.staff-profile-identity[b-w7wnd9l486] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.staff-avatar[b-w7wnd9l486] {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 999px;
    background: linear-gradient(135deg, #01C1B4, #0f766e);
    color: #ffffff;
    font-size: 18px;
    font-weight: 950;
    letter-spacing: -0.03em;
    box-shadow: 0 14px 30px rgba(1, 193, 180, 0.22);
}

.staff-profile-identity h3[b-w7wnd9l486] {
    margin: 0;
    color: var(--jru-slate-900, #0f172a);
    font-size: 28px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.06em;
}

.staff-profile-identity p[b-w7wnd9l486],
.self-card-subtitle[b-w7wnd9l486] {
    margin: 6px 0 0;
    color: var(--jru-slate-500, #64748b);
    font-size: 13px;
    font-weight: 750;
}

.compact-staff-info-grid[b-w7wnd9l486] {
    border-radius: 16px;
}

.compact-staff-info-grid div[b-w7wnd9l486] {
    padding: 11px 13px;
}

.compact-warning-note[b-w7wnd9l486] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 14px;
}

.compact-warning-note span[b-w7wnd9l486] {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #fbbf24;
    color: #ffffff;
    font-size: 12px;
    font-weight: 950;
}

.compact-warning-note strong[b-w7wnd9l486] {
    color: #92400e;
    font-size: 13px;
    line-height: 1.4;
}

.compact-self-form-grid[b-w7wnd9l486] {
    gap: 12px;
    margin-top: 18px;
}

.compact-self-form-grid .jru-input[b-w7wnd9l486] {
    min-height: 42px;
}

.compact-purpose-box[b-w7wnd9l486] {
    min-height: 82px;
}

.compact-submit-btn[b-w7wnd9l486] {
    min-height: 42px;
    margin-top: 12px;
    border-radius: 14px;
    box-shadow: 0 18px 35px rgba(1, 193, 180, 0.22);
}

.submit-helper-note[b-w7wnd9l486] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 11px;
    color: var(--jru-slate-500, #64748b);
    font-size: 12px;
    font-weight: 750;
}

.submit-helper-note p[b-w7wnd9l486] {
    margin: 0;
}

.self-history-panel[b-w7wnd9l486] {
    margin-top: 16px;
}

.self-history-header[b-w7wnd9l486] {
    margin-bottom: 12px;
}

.self-history-header h2[b-w7wnd9l486] {
    font-size: 20px;
}

.self-history-table-wrap[b-w7wnd9l486] {
    overflow-x: auto;
    border: 1px solid var(--jru-slate-200, #e2e8f0);
    border-radius: 16px;
    background: #ffffff;
}

.self-history-table[b-w7wnd9l486] {
    min-width: 860px;
}

.self-history-table th[b-w7wnd9l486] {
    padding: 10px 13px;
    font-size: 10px;
}

.self-history-table td[b-w7wnd9l486] {
    padding: 10px 13px;
    font-size: 13px;
    vertical-align: middle;
}

.self-history-table td strong[b-w7wnd9l486] {
    display: block;
    color: var(--jru-slate-900, #0f172a);
    font-weight: 900;
}

.self-history-table .jru-btn-sm[b-w7wnd9l486] {
    min-height: 30px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 12px;
}

@media (max-width: 1200px) {
    .compact-self-grid[b-w7wnd9l486] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .staff-fsu-page.self-mode .page-header h1[b-w7wnd9l486] {
        font-size: 26px;
    }

    .self-card-heading[b-w7wnd9l486],
    .staff-profile-identity[b-w7wnd9l486] {
        align-items: flex-start;
    }

    .staff-profile-identity h3[b-w7wnd9l486] {
        font-size: 23px;
    }
}
/* /Components/Pages/Visitor/HealthQuestion.razor.rz.scp.css */
.health-question[b-5yzyoemj0y] {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.health-question:hover[b-5yzyoemj0y] {
    transform: translateY(-1px);
    border-color: #99f6e4;
    box-shadow: 0 18px 38px rgba(20, 184, 166, 0.08);
}

.question-text[b-5yzyoemj0y] {
    font-size: 14px;
    font-weight: 900;
    color: #334155;
    line-height: 1.4;
}

.yes-no-group[b-5yzyoemj0y] {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    padding: 4px;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.radio-pill[b-5yzyoemj0y] {
    position: relative;
    cursor: pointer;
}

.radio-pill input[b-5yzyoemj0y] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.radio-pill span[b-5yzyoemj0y] {
    min-width: 72px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 900;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.radio-pill.active span[b-5yzyoemj0y] {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(20, 184, 166, 0.22);
}

@media (max-width: 700px) {
    .health-question[b-5yzyoemj0y] {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        padding: 14px;
    }

    .yes-no-group[b-5yzyoemj0y] {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .radio-pill[b-5yzyoemj0y] {
        width: 100%;
    }

    .radio-pill span[b-5yzyoemj0y] {
        width: 100%;
        min-width: 0;
    }
}
/* /Components/Pages/Visitor/SafetyBriefing.razor.rz.scp.css */
.visitor-briefing-page[b-h4vwz97nat] {
    min-height: 100vh;
    padding: 28px;
    color: #0f172a;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.14), transparent 30%),
        radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.10), transparent 34%),
        linear-gradient(135deg, #f8fafc 0%, #eef6f5 100%);
}

.briefing-shell[b-h4vwz97nat] {
    max-width: 1180px;
    margin: 0 auto;
}

.briefing-header[b-h4vwz97nat] {
    margin-bottom: 24px;
}

.eyebrow[b-h4vwz97nat] {
    margin-bottom: 8px;
    color: #0f766e;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.briefing-header h1[b-h4vwz97nat] {
    margin: 0;
    color: #0f172a;
    font-size: 36px;
    font-weight: 950;
    letter-spacing: -0.05em;
}

.briefing-header p[b-h4vwz97nat] {
    max-width: 760px;
    margin: 8px 0 0;
    color: #64748b;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.7;
}

.state-card[b-h4vwz97nat] {
    min-height: 260px;
    padding: 34px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #e2e8f0;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 14px;
    font-weight: 900;
    text-align: center;
}

.state-card p[b-h4vwz97nat] {
    margin: 12px 0 0;
    line-height: 1.6;
}

.state-card strong[b-h4vwz97nat] {
    color: #0f172a;
    font-size: 18px;
    font-weight: 950;
}

.state-card.danger[b-h4vwz97nat] {
    color: #991b1b;
    background: #fff1f2;
    border-color: #fecdd3;
}

.state-card.danger strong[b-h4vwz97nat] {
    color: #991b1b;
}

.state-card.warning[b-h4vwz97nat] {
    color: #92400e;
    background: #fffbeb;
    border-color: #fde68a;
}

.state-card.warning strong[b-h4vwz97nat] {
    color: #92400e;
}

.state-card.success[b-h4vwz97nat] {
    color: #0f766e;
    background: #ecfdf5;
    border-color: #99f6e4;
}

.state-card.success strong[b-h4vwz97nat] {
    color: #0f766e;
}

.spinner[b-h4vwz97nat] {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 4px solid #ccfbf1;
    border-top-color: #0f766e;
    animation: spin-b-h4vwz97nat 0.8s linear infinite;
}

@keyframes spin-b-h4vwz97nat {
    to {
        transform: rotate(360deg);
    }
}

.briefing-grid[b-h4vwz97nat] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 22px;
    align-items: flex-start;
}

.briefing-card[b-h4vwz97nat] {
    padding: 22px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #e2e8f0;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.video-card[b-h4vwz97nat] {
    overflow: hidden;
}

.visitor-card[b-h4vwz97nat] {
    position: sticky;
    top: 20px;
}

.compact-visitor-card[b-h4vwz97nat] {
    padding: 18px;
    border-radius: 24px;
}

.section-title[b-h4vwz97nat] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-title span[b-h4vwz97nat] {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    color: #0f766e;
    background: #ccfbf1;
    border: 1px solid #99f6e4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 950;
}

.section-title h2[b-h4vwz97nat] {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.compact-section-title[b-h4vwz97nat] {
    margin-bottom: 14px;
}

.compact-section-title span[b-h4vwz97nat] {
    width: 34px;
    height: 34px;
    border-radius: 13px;
}

.video-wrap[b-h4vwz97nat] {
    border-radius: 24px;
    background: #020617;
    overflow: hidden;
    border: 1px solid #0f172a;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

.video-wrap video[b-h4vwz97nat] {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #020617;
}

.video-status[b-h4vwz97nat] {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.video-status strong[b-h4vwz97nat] {
    display: block;
    font-size: 14px;
    font-weight: 950;
}

.video-status span[b-h4vwz97nat] {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}

.video-status.pending[b-h4vwz97nat] {
    color: #92400e;
    background: #fffbeb;
    border-color: #fde68a;
}

.video-status.completed[b-h4vwz97nat] {
    color: #0f766e;
    background: #ecfdf5;
    border-color: #99f6e4;
}

.alert[b-h4vwz97nat] {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.5;
}

.alert-success[b-h4vwz97nat] {
    color: #0f766e;
    background: #ecfdf5;
    border: 1px solid #99f6e4;
}

.alert-error[b-h4vwz97nat] {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.complete-btn[b-h4vwz97nat] {
    width: 100%;
    min-height: 48px;
    margin-top: 16px;
    padding: 0 18px;
    border: none;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    box-shadow: 0 18px 34px rgba(20, 184, 166, 0.24);
    cursor: pointer;
    font-size: 14px;
    font-weight: 950;
    transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.complete-btn:hover[b-h4vwz97nat] {
    transform: translateY(-1px);
    box-shadow: 0 22px 42px rgba(20, 184, 166, 0.30);
}

.complete-btn:disabled[b-h4vwz97nat] {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
    box-shadow: none;
}

.visitor-identity[b-h4vwz97nat] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    margin-bottom: 16px;
}

.compact-identity[b-h4vwz97nat] {
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    margin-bottom: 12px;
    background: #f8fafc;
}

.avatar[b-h4vwz97nat] {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    border-radius: 20px;
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 950;
    box-shadow: 0 14px 28px rgba(20, 184, 166, 0.18);
}

.compact-identity .avatar[b-h4vwz97nat] {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    font-size: 15px;
}

.visitor-identity strong[b-h4vwz97nat] {
    display: block;
    color: #0f172a;
    font-size: 17px;
    font-weight: 950;
    line-height: 1.3;
    word-break: break-word;
}

.compact-identity strong[b-h4vwz97nat] {
    font-size: 15px;
    line-height: 1.25;
}

.visitor-identity span[b-h4vwz97nat] {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
    word-break: break-word;
}

.compact-identity span[b-h4vwz97nat] {
    margin-top: 2px;
    font-size: 12px;
}

.detail-list[b-h4vwz97nat] {
    display: grid;
    gap: 10px;
}

.detail-list > div[b-h4vwz97nat] {
    padding: 13px 14px;
    border-radius: 17px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.detail-list span[b-h4vwz97nat] {
    display: block;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.detail-list strong[b-h4vwz97nat] {
    display: block;
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;
    word-break: break-word;
}

.compact-detail-list[b-h4vwz97nat] {
    display: grid;
    gap: 0;
    border-top: 1px solid #e2e8f0;
}

.compact-detail-list > div[b-h4vwz97nat] {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 9px 0;
    border: 0;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
    background: transparent;
}

.compact-detail-list span[b-h4vwz97nat] {
    margin-bottom: 0;
    color: #64748b;
    font-size: 10px;
    line-height: 1.35;
}

.compact-detail-list strong[b-h4vwz97nat] {
    font-size: 13px;
    font-weight: 850;
    line-height: 1.35;
}

.declared-devices[b-h4vwz97nat] {
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.declared-devices-title[b-h4vwz97nat] {
    margin-bottom: 8px;
    color: #0f766e;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.declared-device-item[b-h4vwz97nat] {
    padding: 10px 11px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #f8fbff;
    margin-bottom: 8px;
}

.declared-device-item:last-child[b-h4vwz97nat] {
    margin-bottom: 0;
}

.declared-device-main[b-h4vwz97nat] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.declared-device-main strong[b-h4vwz97nat] {
    color: #0f172a;
    font-size: 13px;
    font-weight: 950;
    line-height: 1.3;
}

.declared-device-main span[b-h4vwz97nat] {
    color: #475569;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
    text-align: right;
}

.declared-device-item small[b-h4vwz97nat] {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.4;
    word-break: break-word;
}

.notice-box[b-h4vwz97nat] {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 18px;
    color: #075985;
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.6;
}

.compact-notice-box[b-h4vwz97nat] {
    margin-top: 13px;
    padding: 11px 12px;
    border-radius: 15px;
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 1000px) {
    .briefing-grid[b-h4vwz97nat] {
        grid-template-columns: 1fr;
    }

    .visitor-card[b-h4vwz97nat] {
        position: relative;
        top: auto;
    }
}

@media (max-width: 700px) {
    .visitor-briefing-page[b-h4vwz97nat] {
        padding: 18px 14px;
    }

    .briefing-header h1[b-h4vwz97nat] {
        font-size: 28px;
    }

    .briefing-card[b-h4vwz97nat] {
        padding: 18px;
        border-radius: 24px;
    }

    .video-wrap[b-h4vwz97nat] {
        border-radius: 18px;
    }

    .visitor-identity[b-h4vwz97nat] {
        align-items: flex-start;
    }

    .compact-detail-list > div[b-h4vwz97nat] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .declared-device-main[b-h4vwz97nat] {
        display: block;
    }

    .declared-device-main span[b-h4vwz97nat] {
        display: block;
        margin-top: 3px;
        text-align: left;
    }
}
/* /Components/Pages/Visitor/VisitorDeviceDeclarationPage.razor.rz.scp.css */
.device-page[b-qmjve5wa47] {
    min-height: 100vh;
    padding: 32px;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.14), transparent 32%),
        linear-gradient(135deg, #f8fafc 0%, #eef6f5 100%);
    color: #0f172a;
}

.device-shell[b-qmjve5wa47] {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.device-hero-card[b-qmjve5wa47] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 24px;
}

.eyebrow[b-qmjve5wa47] {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0f766e;
}

.device-hero-card h1[b-qmjve5wa47] {
    margin: 0;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: -0.045em;
    color: #0f172a;
}

.device-hero-card p[b-qmjve5wa47] {
    max-width: 680px;
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: #64748b;
}

.step-card[b-qmjve5wa47] {
    padding: 18px;
    border-radius: 24px;
    border: 1px solid #dbeafe;
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.08);
}

.step-card.horizontal[b-qmjve5wa47] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.step-item[b-qmjve5wa47] {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
    flex: 0 0 auto;
}

.step-item span[b-qmjve5wa47] {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 900;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.step-item strong[b-qmjve5wa47] {
    display: block;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 900;
    color: #334155;
}

.step-item small[b-qmjve5wa47] {
    display: block;
    margin-top: 2px;
    white-space: nowrap;
    font-size: 12px;
    color: #94a3b8;
}

.step-item.active span[b-qmjve5wa47],
.step-item.completed span[b-qmjve5wa47] {
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    border-color: #0f766e;
    box-shadow: 0 12px 24px rgba(20, 184, 166, 0.28);
}

.step-item.active strong[b-qmjve5wa47],
.step-item.completed strong[b-qmjve5wa47] {
    color: #0f766e;
}

.step-line[b-qmjve5wa47] {
    height: 2px;
    min-width: 34px;
    flex: 1 1 auto;
    background: linear-gradient(90deg, #cbd5e1, #e2e8f0);
    border-radius: 999px;
}

.step-line.active[b-qmjve5wa47] {
    background: linear-gradient(90deg, #0f766e, #14b8a6);
}

.form-card[b-qmjve5wa47] {
    padding: 28px;
    border-radius: 28px;
    border: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.10);
}

.loading-state[b-qmjve5wa47] {
    font-size: 14px;
    font-weight: 800;
    color: #64748b;
}

.alert[b-qmjve5wa47] {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 800;
}

.alert-error[b-qmjve5wa47] {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.visitor-summary[b-qmjve5wa47] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
}

.avatar-box[b-qmjve5wa47] {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 20px;
    box-shadow: 0 14px 28px rgba(20, 184, 166, 0.20);
}

.avatar-box img[b-qmjve5wa47] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visitor-summary span[b-qmjve5wa47] {
    display: block;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0f766e;
}

.visitor-summary strong[b-qmjve5wa47] {
    display: block;
    margin-top: 3px;
    font-size: 18px;
    font-weight: 900;
    color: #0f172a;
}

.visitor-summary small[b-qmjve5wa47] {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
}

.section-header[b-qmjve5wa47] {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.section-header h2[b-qmjve5wa47] {
    margin: 0;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.section-header p[b-qmjve5wa47] {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: #64748b;
}

.section-badge[b-qmjve5wa47] {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    color: #0f766e;
    background: #ccfbf1;
    border: 1px solid #99f6e4;
}

.section-divider[b-qmjve5wa47] {
    height: 1px;
    margin: 26px 0;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

.no-device-card[b-qmjve5wa47] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid #e2e8f0;
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.10), transparent 35%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.no-device-card:hover[b-qmjve5wa47] {
    transform: translateY(-1px);
    border-color: #99f6e4;
    box-shadow: 0 18px 38px rgba(20, 184, 166, 0.08);
}

.no-device-card input[b-qmjve5wa47] {
    width: 19px;
    height: 19px;
    margin-top: 3px;
    accent-color: #0f766e;
    flex: 0 0 auto;
}

.no-device-card strong[b-qmjve5wa47] {
    display: block;
    font-size: 14px;
    font-weight: 900;
    color: #0f172a;
}

.no-device-card small[b-qmjve5wa47] {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 700;
    color: #64748b;
}

.device-toolbar[b-qmjve5wa47] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-top: 18px;
    margin-bottom: 14px;
    padding: 14px 16px;
    border-radius: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.device-toolbar strong[b-qmjve5wa47] {
    display: block;
    font-size: 14px;
    font-weight: 900;
    color: #0f172a;
}

.device-toolbar small[b-qmjve5wa47] {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

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

.device-card[b-qmjve5wa47] {
    padding: 18px;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
}

.device-card-header[b-qmjve5wa47] {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.device-card-header span[b-qmjve5wa47] {
    display: block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f766e;
}

.device-card-header strong[b-qmjve5wa47] {
    display: block;
    margin-top: 4px;
    font-size: 15px;
    font-weight: 900;
    color: #0f172a;
}

.icon-btn[b-qmjve5wa47] {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    font-weight: 800;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.icon-btn:hover[b-qmjve5wa47] {
    transform: translateY(-1px);
}

.icon-btn.danger[b-qmjve5wa47] {
    color: #dc2626;
    background: #fff7f7;
    border-color: #fecaca;
}

.icon-btn.danger:hover[b-qmjve5wa47] {
    box-shadow: 0 12px 24px rgba(220, 38, 38, 0.12);
}

.form-grid[b-qmjve5wa47] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-group[b-qmjve5wa47] {
    min-width: 0;
}

.form-group label[b-qmjve5wa47] {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 900;
    color: #334155;
}

.form-group label span[b-qmjve5wa47] {
    color: #dc2626;
}

.form-control[b-qmjve5wa47] {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.form-control[b-qmjve5wa47]::placeholder {
    color: #94a3b8;
    font-weight: 600;
}

.form-control:focus[b-qmjve5wa47] {
    border-color: #14b8a6;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.16);
    background: #fbfffe;
}

.uppercase-input[b-qmjve5wa47] {
    text-transform: uppercase;
}

.declaration-note[b-qmjve5wa47] {
    padding: 16px;
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.10), transparent 35%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
}

.declaration-note strong[b-qmjve5wa47] {
    display: block;
    font-size: 15px;
    font-weight: 900;
    color: #0f172a;
}

.declaration-note p[b-qmjve5wa47] {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.7;
    font-weight: 700;
    color: #475569;
}

.check-row[b-qmjve5wa47] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    margin-top: 14px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.check-row:hover[b-qmjve5wa47] {
    transform: translateY(-1px);
    border-color: #99f6e4;
    box-shadow: 0 14px 30px rgba(20, 184, 166, 0.08);
}

.check-row input[b-qmjve5wa47] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #0f766e;
    flex: 0 0 auto;
}

.check-row span[b-qmjve5wa47] {
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
    color: #475569;
}

.form-actions[b-qmjve5wa47] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
}

.btn[b-qmjve5wa47] {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 15px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 900;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.btn:hover[b-qmjve5wa47] {
    transform: translateY(-1px);
}

.btn:disabled[b-qmjve5wa47] {
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
}

.btn-primary[b-qmjve5wa47] {
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    box-shadow: 0 16px 32px rgba(20, 184, 166, 0.26);
}

.btn-secondary[b-qmjve5wa47] {
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
}

@media (max-width: 900px) {
    .device-page[b-qmjve5wa47] {
        padding: 20px 14px;
    }

    .device-hero-card[b-qmjve5wa47] {
        grid-template-columns: 1fr;
    }

    .device-hero-card h1[b-qmjve5wa47] {
        font-size: 30px;
    }

    .form-card[b-qmjve5wa47] {
        padding: 20px;
        border-radius: 24px;
    }

    .step-card.horizontal[b-qmjve5wa47] {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 14px;
    }

    .step-line[b-qmjve5wa47] {
        min-width: 28px;
        flex: 0 0 28px;
    }

    .visitor-summary[b-qmjve5wa47] {
        align-items: flex-start;
    }

    .section-header[b-qmjve5wa47] {
        flex-direction: column;
    }

    .device-toolbar[b-qmjve5wa47] {
        align-items: stretch;
        flex-direction: column;
    }

    .device-toolbar .btn[b-qmjve5wa47] {
        width: 100%;
    }

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

    .device-card[b-qmjve5wa47] {
        padding: 16px;
    }

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

    .btn[b-qmjve5wa47] {
        width: 100%;
    }
}
/* /Components/Pages/Visitor/VisitorHealthDeclarationPage.razor.rz.scp.css */
.health-page[b-db79ccs62u] {
    min-height: 100vh;
    padding: 32px;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.14), transparent 32%),
        linear-gradient(135deg, #f8fafc 0%, #eef6f5 100%);
    color: #0f172a;
}

.health-shell[b-db79ccs62u] {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.health-hero-card[b-db79ccs62u] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 24px;
}

.eyebrow[b-db79ccs62u] {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0f766e;
}

.health-hero-card h1[b-db79ccs62u] {
    margin: 0;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: -0.045em;
    color: #0f172a;
}

.health-hero-card p[b-db79ccs62u] {
    max-width: 680px;
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: #64748b;
}

.step-card[b-db79ccs62u] {
    padding: 18px;
    border-radius: 24px;
    border: 1px solid #dbeafe;
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.08);
}

.step-card.horizontal[b-db79ccs62u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.step-item[b-db79ccs62u] {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
    flex: 0 0 auto;
}

.step-item span[b-db79ccs62u] {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 900;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.step-item strong[b-db79ccs62u] {
    display: block;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 900;
    color: #334155;
}

.step-item small[b-db79ccs62u] {
    display: block;
    margin-top: 2px;
    white-space: nowrap;
    font-size: 12px;
    color: #94a3b8;
}

.step-item.active span[b-db79ccs62u],
.step-item.completed span[b-db79ccs62u] {
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    border-color: #0f766e;
    box-shadow: 0 12px 24px rgba(20, 184, 166, 0.28);
}

.step-item.active strong[b-db79ccs62u],
.step-item.completed strong[b-db79ccs62u] {
    color: #0f766e;
}

.step-line[b-db79ccs62u] {
    height: 2px;
    min-width: 34px;
    flex: 1 1 auto;
    background: linear-gradient(90deg, #cbd5e1, #e2e8f0);
    border-radius: 999px;
}

.step-line.active[b-db79ccs62u] {
    background: linear-gradient(90deg, #0f766e, #14b8a6);
}

.form-card[b-db79ccs62u] {
    padding: 28px;
    border-radius: 28px;
    border: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.10);
}

.loading-state[b-db79ccs62u] {
    font-size: 14px;
    font-weight: 800;
    color: #64748b;
}

.alert[b-db79ccs62u] {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 800;
}

.alert-error[b-db79ccs62u] {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.visitor-summary[b-db79ccs62u] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
}

.avatar-box[b-db79ccs62u] {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 20px;
    box-shadow: 0 14px 28px rgba(20, 184, 166, 0.20);
}

.avatar-box img[b-db79ccs62u] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visitor-summary span[b-db79ccs62u] {
    display: block;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0f766e;
}

.visitor-summary strong[b-db79ccs62u] {
    display: block;
    margin-top: 3px;
    font-size: 18px;
    font-weight: 900;
    color: #0f172a;
}

.visitor-summary small[b-db79ccs62u] {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
}

.section-header[b-db79ccs62u] {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.section-header.compact[b-db79ccs62u] {
    margin-bottom: 18px;
}

.section-header h2[b-db79ccs62u] {
    margin: 0;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.section-header p[b-db79ccs62u] {
    margin: 5px 0 0;
    font-size: 13px;
    color: #64748b;
}

.section-badge[b-db79ccs62u] {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    color: #0f766e;
    background: #ccfbf1;
    border: 1px solid #99f6e4;
}

.section-divider[b-db79ccs62u] {
    height: 1px;
    margin: 26px 0;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

.question-list[b-db79ccs62u] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* These ::deep selectors style the reusable HealthQuestion child component */
.question-list[b-db79ccs62u]  .health-question {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.question-list[b-db79ccs62u]  .health-question:hover {
    transform: translateY(-1px);
    border-color: #99f6e4;
    box-shadow: 0 18px 38px rgba(20, 184, 166, 0.08);
}

.question-list[b-db79ccs62u]  .question-text {
    font-size: 14px;
    font-weight: 900;
    color: #334155;
    line-height: 1.4;
}

.question-list[b-db79ccs62u]  .yes-no-group {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    padding: 4px;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.question-list[b-db79ccs62u]  .radio-pill {
    position: relative;
    cursor: pointer;
}

.question-list[b-db79ccs62u]  .radio-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.question-list[b-db79ccs62u]  .radio-pill span {
    min-width: 72px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 900;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.question-list[b-db79ccs62u]  .radio-pill.active span {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(20, 184, 166, 0.22);
}

.form-grid[b-db79ccs62u] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-group[b-db79ccs62u] {
    min-width: 0;
}

.form-group.full[b-db79ccs62u] {
    grid-column: 1 / -1;
}

.form-group.indented[b-db79ccs62u] {
    padding: 16px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.form-group label[b-db79ccs62u] {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 900;
    color: #334155;
}

.form-group label span[b-db79ccs62u] {
    color: #dc2626;
}

.form-control[b-db79ccs62u] {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.form-control[b-db79ccs62u]::placeholder {
    color: #94a3b8;
    font-weight: 600;
}

.form-control:focus[b-db79ccs62u] {
    border-color: #14b8a6;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.16);
    background: #fbfffe;
}

.textarea[b-db79ccs62u] {
    min-height: 96px;
    resize: vertical;
}

.medication-panel[b-db79ccs62u] {
    padding: 16px;
    border-radius: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.privacy-notice-card[b-db79ccs62u] {
    padding: 18px;
    margin-bottom: 16px;
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.10), transparent 35%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
}

.privacy-notice-card h3[b-db79ccs62u] {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 900;
    color: #0f172a;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.privacy-notice-card p[b-db79ccs62u] {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.7;
    font-weight: 700;
    color: #475569;
}

.privacy-notice-card a[b-db79ccs62u] {
    color: #0f766e;
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.privacy-notice-card a:hover[b-db79ccs62u] {
    color: #14b8a6;
}

.consent-box[b-db79ccs62u] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.check-row[b-db79ccs62u] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.check-row:hover[b-db79ccs62u] {
    transform: translateY(-1px);
    border-color: #99f6e4;
    box-shadow: 0 14px 30px rgba(20, 184, 166, 0.08);
}

.check-row input[b-db79ccs62u] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #0f766e;
    flex: 0 0 auto;
}

.check-row span[b-db79ccs62u] {
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
    color: #475569;
}

.form-actions[b-db79ccs62u] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
}

.btn[b-db79ccs62u] {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 15px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 900;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.btn:hover[b-db79ccs62u] {
    transform: translateY(-1px);
}

.btn:disabled[b-db79ccs62u] {
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
}

.btn-primary[b-db79ccs62u] {
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    box-shadow: 0 16px 32px rgba(20, 184, 166, 0.26);
}

.btn-secondary[b-db79ccs62u] {
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
}

@media (max-width: 900px) {
    .health-page[b-db79ccs62u] {
        padding: 20px 14px;
    }

    .health-hero-card[b-db79ccs62u] {
        grid-template-columns: 1fr;
    }

    .health-hero-card h1[b-db79ccs62u] {
        font-size: 30px;
    }

    .form-card[b-db79ccs62u] {
        padding: 20px;
        border-radius: 24px;
    }

    .step-card.horizontal[b-db79ccs62u] {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 14px;
    }

    .step-line[b-db79ccs62u] {
        min-width: 28px;
        flex: 0 0 28px;
    }

    .question-list[b-db79ccs62u]  .health-question {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        padding: 14px;
    }

    .question-list[b-db79ccs62u]  .yes-no-group {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .question-list[b-db79ccs62u]  .radio-pill {
        width: 100%;
    }

    .question-list[b-db79ccs62u]  .radio-pill span {
        width: 100%;
        min-width: 0;
    }

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

    .visitor-summary[b-db79ccs62u] {
        align-items: flex-start;
    }

    .privacy-notice-card[b-db79ccs62u] {
        padding: 16px;
    }

    .check-row[b-db79ccs62u] {
        padding: 14px;
    }

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

    .btn[b-db79ccs62u] {
        width: 100%;
    }
}
/* /Components/Pages/Visitor/VisitorRegistration.razor.rz.scp.css */
.visitor-register-page[b-zvm355z0uj] {
    min-height: 100vh;
    padding: 32px;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.14), transparent 32%),
        linear-gradient(135deg, #f8fafc 0%, #eef6f5 100%);
    color: #0f172a;
}

.visitor-register-shell[b-zvm355z0uj] {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.visitor-hero-card[b-zvm355z0uj] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 24px;
}

.eyebrow[b-zvm355z0uj] {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0f766e;
}

.visitor-hero-card h1[b-zvm355z0uj] {
    margin: 0;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: -0.045em;
    color: #0f172a;
}

.visitor-hero-card p[b-zvm355z0uj] {
    max-width: 680px;
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: #64748b;
}

/* =========================
   Step Tracker
   ========================= */

.step-card[b-zvm355z0uj] {
    padding: 18px;
    border-radius: 24px;
    border: 1px solid #dbeafe;
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.08);
}

.step-card.horizontal[b-zvm355z0uj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.step-item[b-zvm355z0uj] {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
    flex: 0 0 auto;
}

.step-item span[b-zvm355z0uj] {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 900;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.step-item strong[b-zvm355z0uj] {
    display: block;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 900;
    color: #334155;
}

.step-item small[b-zvm355z0uj] {
    display: block;
    margin-top: 2px;
    white-space: nowrap;
    font-size: 12px;
    color: #94a3b8;
}

.step-item.active span[b-zvm355z0uj] {
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    border-color: #0f766e;
    box-shadow: 0 12px 24px rgba(20, 184, 166, 0.28);
}

.step-item.active strong[b-zvm355z0uj] {
    color: #0f766e;
}

.step-line[b-zvm355z0uj] {
    height: 2px;
    min-width: 34px;
    flex: 1 1 auto;
    background: linear-gradient(90deg, #cbd5e1, #e2e8f0);
    border-radius: 999px;
}

/* =========================
   Main Form Card
   ========================= */

.form-card[b-zvm355z0uj] {
    padding: 28px;
    border-radius: 28px;
    border: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.10);
}

.alert[b-zvm355z0uj] {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 800;
}

.alert-error[b-zvm355z0uj] {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.section-header[b-zvm355z0uj] {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.section-header.compact[b-zvm355z0uj] {
    margin-bottom: 18px;
}

.section-header h2[b-zvm355z0uj] {
    margin: 0;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.section-header p[b-zvm355z0uj] {
    margin: 5px 0 0;
    font-size: 13px;
    color: #64748b;
}

.section-badge[b-zvm355z0uj] {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    color: #0f766e;
    background: #ccfbf1;
    border: 1px solid #99f6e4;
}

.form-grid[b-zvm355z0uj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-group[b-zvm355z0uj] {
    min-width: 0;
}

.form-group.full[b-zvm355z0uj] {
    grid-column: 1 / -1;
}

.form-group label[b-zvm355z0uj] {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 900;
    color: #334155;
}

.form-group label span[b-zvm355z0uj],
.photo-upload-control label span[b-zvm355z0uj],
.upload-label span[b-zvm355z0uj] {
    color: #dc2626;
}

.uppercase-input[b-zvm355z0uj] {
    text-transform: uppercase;
}

.form-control[b-zvm355z0uj] {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.form-control[b-zvm355z0uj]::placeholder {
    color: #94a3b8;
    font-weight: 600;
}

.form-control:focus[b-zvm355z0uj] {
    border-color: #14b8a6;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.16);
    background: #fbfffe;
}

.textarea[b-zvm355z0uj] {
    min-height: 96px;
    resize: vertical;
}

.validation-message[b-zvm355z0uj] {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 800;
    color: #dc2626;
}

.section-divider[b-zvm355z0uj] {
    height: 1px;
    margin: 26px 0;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

/* =========================
   Modern Photo Upload
   ========================= */

.photo-upload-area[b-zvm355z0uj] {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 20px;
    align-items: center;
    padding: 20px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.10), transparent 34%),
        linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
}

.photo-preview[b-zvm355z0uj] {
    width: 160px;
    height: 160px;
    overflow: hidden;
    border-radius: 26px;
    background: #ffffff;
    border: 1px solid #dbe2ea;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
}

.photo-preview img[b-zvm355z0uj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-placeholder[b-zvm355z0uj] {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    text-align: center;
    padding: 14px;
    background:
        radial-gradient(circle at center, rgba(148, 163, 184, 0.08), transparent 60%),
        #ffffff;
}

.photo-placeholder span[b-zvm355z0uj] {
    font-size: 17px;
    font-weight: 900;
}

.photo-placeholder small[b-zvm355z0uj] {
    font-size: 12px;
    font-weight: 700;
}

.photo-upload-control[b-zvm355z0uj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.upload-label[b-zvm355z0uj] {
    display: block;
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 900;
    color: #334155;
}

.file-input-hidden[b-zvm355z0uj] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.upload-trigger[b-zvm355z0uj] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px dashed #94a3b8;
    background: rgba(255, 255, 255, 0.96);
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.upload-trigger:hover[b-zvm355z0uj] {
    transform: translateY(-1px);
    border-color: #14b8a6;
    background: #f8fffe;
    box-shadow: 0 18px 40px rgba(20, 184, 166, 0.14);
}

.upload-trigger:active[b-zvm355z0uj] {
    transform: translateY(0);
}

.upload-trigger-icon[b-zvm355z0uj] {
    width: 50px;
    height: 50px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
    box-shadow: 0 14px 26px rgba(20, 184, 166, 0.24);
}

.upload-trigger-text[b-zvm355z0uj] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.upload-trigger-text strong[b-zvm355z0uj] {
    font-size: 15px;
    font-weight: 900;
    color: #0f172a;
}

.upload-trigger-text small[b-zvm355z0uj] {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
    font-weight: 700;
}

.upload-helper-text[b-zvm355z0uj] {
    padding-left: 2px;
    font-size: 12px;
    color: #64748b;
    font-weight: 700;
}

.selected-file[b-zvm355z0uj] {
    margin-top: 0;
}

.selected-file.modern[b-zvm355z0uj] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ecfeff 0%, #f0fdfa 100%);
    border: 1px solid #99f6e4;
    color: #0f766e;
    box-shadow: 0 10px 24px rgba(20, 184, 166, 0.08);
}

.file-badge[b-zvm355z0uj] {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    background: #ccfbf1;
    color: #0f766e;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: 1px solid #99f6e4;
}

.file-meta[b-zvm355z0uj] {
    min-width: 0;
}

.file-meta strong[b-zvm355z0uj] {
    display: block;
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
    word-break: break-word;
}

.file-meta small[b-zvm355z0uj] {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: #0f766e;
    font-weight: 700;
}

/* =========================
   Actions
   ========================= */

.form-actions[b-zvm355z0uj] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
}

.btn[b-zvm355z0uj] {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 15px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 900;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.btn:hover[b-zvm355z0uj] {
    transform: translateY(-1px);
}

.btn:disabled[b-zvm355z0uj] {
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
}

.btn-primary[b-zvm355z0uj] {
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    box-shadow: 0 16px 32px rgba(20, 184, 166, 0.26);
}

.btn-secondary[b-zvm355z0uj] {
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 900px) {
    .visitor-register-page[b-zvm355z0uj] {
        padding: 20px 14px;
    }

    .visitor-hero-card[b-zvm355z0uj] {
        grid-template-columns: 1fr;
    }

    .visitor-hero-card h1[b-zvm355z0uj] {
        font-size: 30px;
    }

    .form-card[b-zvm355z0uj] {
        padding: 20px;
        border-radius: 24px;
    }

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

    .photo-upload-area[b-zvm355z0uj] {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .photo-preview[b-zvm355z0uj] {
        width: 140px;
        height: 140px;
    }

    .upload-trigger[b-zvm355z0uj] {
        align-items: flex-start;
    }

    .upload-trigger-text strong[b-zvm355z0uj],
    .upload-trigger-text small[b-zvm355z0uj] {
        white-space: normal;
    }

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

    .btn[b-zvm355z0uj] {
        width: 100%;
    }

    .step-card.horizontal[b-zvm355z0uj] {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 14px;
    }

    .step-line[b-zvm355z0uj] {
        min-width: 28px;
        flex: 0 0 28px;
    }
}
/* /Components/Pages/Visitor/VisitorSafetyVideoPage.razor.rz.scp.css */
.video-page[b-y4w8ri93yo] {
    min-height: 100vh;
    padding: 32px;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.14), transparent 32%),
        linear-gradient(135deg, #f8fafc 0%, #eef6f5 100%);
    color: #0f172a;
}

.video-shell[b-y4w8ri93yo] {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.video-hero-card[b-y4w8ri93yo] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 24px;
}

.eyebrow[b-y4w8ri93yo] {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0f766e;
}

.video-hero-card h1[b-y4w8ri93yo] {
    margin: 0;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: -0.045em;
    color: #0f172a;
}

.video-hero-card p[b-y4w8ri93yo] {
    max-width: 680px;
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: #64748b;
}

.step-card[b-y4w8ri93yo] {
    padding: 18px;
    border-radius: 24px;
    border: 1px solid #dbeafe;
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.08);
}

.step-card.horizontal[b-y4w8ri93yo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.step-item[b-y4w8ri93yo] {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
    flex: 0 0 auto;
}

.step-item span[b-y4w8ri93yo] {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 900;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.step-item strong[b-y4w8ri93yo] {
    display: block;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 900;
    color: #334155;
}

.step-item small[b-y4w8ri93yo] {
    display: block;
    margin-top: 2px;
    white-space: nowrap;
    font-size: 12px;
    color: #94a3b8;
}

.step-item.active span[b-y4w8ri93yo],
.step-item.completed span[b-y4w8ri93yo] {
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    border-color: #0f766e;
    box-shadow: 0 12px 24px rgba(20, 184, 166, 0.28);
}

.step-item.active strong[b-y4w8ri93yo],
.step-item.completed strong[b-y4w8ri93yo] {
    color: #0f766e;
}

.step-line[b-y4w8ri93yo] {
    height: 2px;
    min-width: 34px;
    flex: 1 1 auto;
    background: linear-gradient(90deg, #cbd5e1, #e2e8f0);
    border-radius: 999px;
}

.step-line.active[b-y4w8ri93yo] {
    background: linear-gradient(90deg, #0f766e, #14b8a6);
}

.form-card[b-y4w8ri93yo] {
    padding: 28px;
    border-radius: 28px;
    border: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.10);
}

.loading-state[b-y4w8ri93yo] {
    font-size: 14px;
    font-weight: 800;
    color: #64748b;
}

.alert[b-y4w8ri93yo] {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 800;
}

.alert-error[b-y4w8ri93yo] {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.visitor-summary[b-y4w8ri93yo] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
}

.avatar-box[b-y4w8ri93yo] {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 20px;
    box-shadow: 0 14px 28px rgba(20, 184, 166, 0.20);
}

.avatar-box img[b-y4w8ri93yo] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visitor-summary span[b-y4w8ri93yo] {
    display: block;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0f766e;
}

.visitor-summary strong[b-y4w8ri93yo] {
    display: block;
    margin-top: 3px;
    font-size: 18px;
    font-weight: 900;
    color: #0f172a;
}

.visitor-summary small[b-y4w8ri93yo] {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
}

.section-divider[b-y4w8ri93yo] {
    height: 1px;
    margin: 26px 0;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

.section-header[b-y4w8ri93yo] {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.section-header h2[b-y4w8ri93yo] {
    margin: 0;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.section-header p[b-y4w8ri93yo] {
    margin: 5px 0 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
}

.section-badge[b-y4w8ri93yo] {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    color: #0f766e;
    background: #ccfbf1;
    border: 1px solid #99f6e4;
}

.video-card[b-y4w8ri93yo] {
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid #dbeafe;
    background: #020617;
    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.16);
}

.safety-video[b-y4w8ri93yo] {
    display: block;
    width: 100%;
    height: auto;
    background: #020617;
    outline: none;
}

.video-note[b-y4w8ri93yo] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 18px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.video-note.completed[b-y4w8ri93yo] {
    color: #0f766e;
    background: #ecfdf5;
    border-color: #99f6e4;
}

.video-note strong[b-y4w8ri93yo] {
    font-size: 14px;
    font-weight: 900;
}

.video-note span[b-y4w8ri93yo] {
    font-size: 13px;
    font-weight: 700;
}

.check-row[b-y4w8ri93yo] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    cursor: pointer;
}

.check-row input[b-y4w8ri93yo] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #0f766e;
    flex: 0 0 auto;
}

.check-row input:disabled[b-y4w8ri93yo] {
    cursor: not-allowed;
}

.check-row span[b-y4w8ri93yo] {
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
    color: #475569;
}

.blocked-card[b-y4w8ri93yo],
.success-card[b-y4w8ri93yo] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
}

.blocked-card[b-y4w8ri93yo] {
    background: linear-gradient(180deg, #fffbeb 0%, #fff7ed 100%);
    border-color: #fde68a;
}

.success-card[b-y4w8ri93yo] {
    background: linear-gradient(180deg, #ecfdf5 0%, #f0fdfa 100%);
    border-color: #99f6e4;
}

.blocked-icon[b-y4w8ri93yo],
.success-icon[b-y4w8ri93yo] {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
}

.blocked-icon[b-y4w8ri93yo] {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    box-shadow: 0 14px 26px rgba(245, 158, 11, 0.22);
}

.success-icon[b-y4w8ri93yo] {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    box-shadow: 0 14px 26px rgba(20, 184, 166, 0.24);
}

.blocked-card h2[b-y4w8ri93yo],
.success-card h2[b-y4w8ri93yo] {
    margin: 0;
    font-size: 21px;
    font-weight: 900;
    color: #0f172a;
}

.blocked-card p[b-y4w8ri93yo],
.success-card p[b-y4w8ri93yo] {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.7;
    font-weight: 700;
    color: #475569;
}

.status-note[b-y4w8ri93yo] {
    display: inline-flex;
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #fed7aa;
    color: #92400e;
    font-size: 12px;
    font-weight: 800;
}

.form-actions[b-y4w8ri93yo] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
}

.btn[b-y4w8ri93yo] {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 15px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 900;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.btn:hover[b-y4w8ri93yo] {
    transform: translateY(-1px);
}

.btn:disabled[b-y4w8ri93yo] {
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
}

.btn-primary[b-y4w8ri93yo] {
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    box-shadow: 0 16px 32px rgba(20, 184, 166, 0.26);
}

.btn-secondary[b-y4w8ri93yo] {
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
}

@media (max-width: 900px) {
    .video-page[b-y4w8ri93yo] {
        padding: 20px 14px;
    }

    .video-hero-card[b-y4w8ri93yo] {
        grid-template-columns: 1fr;
    }

    .video-hero-card h1[b-y4w8ri93yo] {
        font-size: 30px;
    }

    .form-card[b-y4w8ri93yo] {
        padding: 20px;
        border-radius: 24px;
    }

    .step-card.horizontal[b-y4w8ri93yo] {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 14px;
    }

    .step-line[b-y4w8ri93yo] {
        min-width: 28px;
        flex: 0 0 28px;
    }

    .section-header[b-y4w8ri93yo] {
        flex-direction: column;
    }

    .visitor-summary[b-y4w8ri93yo] {
        align-items: flex-start;
    }

    .blocked-card[b-y4w8ri93yo],
    .success-card[b-y4w8ri93yo] {
        flex-direction: column;
    }

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

    .btn[b-y4w8ri93yo] {
        width: 100%;
    }
}
/* /Components/Pages/Visitor/VisitorSubmittedPage.razor.rz.scp.css */
.submitted-page[b-neqf2t8cii] {
    min-height: 100vh;
    padding: 32px;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.14), transparent 32%),
        linear-gradient(135deg, #f8fafc 0%, #eef6f5 100%);
    color: #0f172a;
}

.submitted-shell[b-neqf2t8cii] {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.submitted-hero-card[b-neqf2t8cii] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 24px;
}

.eyebrow[b-neqf2t8cii] {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0f766e;
}

.submitted-hero-card h1[b-neqf2t8cii] {
    margin: 0;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: -0.045em;
}

.submitted-hero-card p[b-neqf2t8cii] {
    max-width: 680px;
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: #64748b;
}

.step-card[b-neqf2t8cii] {
    padding: 18px;
    border-radius: 24px;
    border: 1px solid #dbeafe;
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.08);
}

.step-card.horizontal[b-neqf2t8cii] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.step-item[b-neqf2t8cii] {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
    flex: 0 0 auto;
}

.step-item span[b-neqf2t8cii] {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 900;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.step-item strong[b-neqf2t8cii] {
    display: block;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 900;
    color: #334155;
}

.step-item small[b-neqf2t8cii] {
    display: block;
    margin-top: 2px;
    white-space: nowrap;
    font-size: 12px;
    color: #94a3b8;
}

.step-item.active span[b-neqf2t8cii],
.step-item.completed span[b-neqf2t8cii] {
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    border-color: #0f766e;
    box-shadow: 0 12px 24px rgba(20, 184, 166, 0.28);
}

.step-item.active strong[b-neqf2t8cii],
.step-item.completed strong[b-neqf2t8cii] {
    color: #0f766e;
}

.step-line[b-neqf2t8cii] {
    height: 2px;
    min-width: 34px;
    flex: 1 1 auto;
    background: linear-gradient(90deg, #cbd5e1, #e2e8f0);
    border-radius: 999px;
}

.step-line.active[b-neqf2t8cii] {
    background: linear-gradient(90deg, #0f766e, #14b8a6);
}

.status-card[b-neqf2t8cii] {
    padding: 28px;
    border-radius: 28px;
    border: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.10);
}

.loading-state[b-neqf2t8cii] {
    font-size: 14px;
    font-weight: 800;
    color: #64748b;
}

.alert[b-neqf2t8cii] {
    padding: 14px 16px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 800;
}

.alert-error[b-neqf2t8cii] {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.visitor-summary[b-neqf2t8cii] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
}

.avatar-box[b-neqf2t8cii] {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 20px;
    box-shadow: 0 14px 28px rgba(20, 184, 166, 0.20);
}

.avatar-box img[b-neqf2t8cii] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visitor-summary span[b-neqf2t8cii] {
    display: block;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0f766e;
}

.visitor-summary strong[b-neqf2t8cii] {
    display: block;
    margin-top: 3px;
    font-size: 18px;
    font-weight: 900;
}

.visitor-summary small[b-neqf2t8cii] {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
}

.section-divider[b-neqf2t8cii] {
    height: 1px;
    margin: 26px 0;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

.pending-panel[b-neqf2t8cii],
.approved-panel[b-neqf2t8cii],
.rejected-panel[b-neqf2t8cii] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
}

.pending-panel[b-neqf2t8cii] {
    background: linear-gradient(180deg, #fffbeb 0%, #fff7ed 100%);
    border-color: #fde68a;
}

.approved-panel[b-neqf2t8cii] {
    background: linear-gradient(180deg, #ecfdf5 0%, #f0fdfa 100%);
    border-color: #99f6e4;
}

.rejected-panel[b-neqf2t8cii] {
    background: linear-gradient(180deg, #fef2f2 0%, #fff7f7 100%);
    border-color: #fecaca;
}

.status-icon[b-neqf2t8cii] {
    width: 50px;
    height: 50px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    box-shadow: 0 14px 26px rgba(20, 184, 166, 0.24);
}

.pending-panel .status-icon[b-neqf2t8cii] {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}

.rejected-panel .status-icon[b-neqf2t8cii] {
    background: linear-gradient(135deg, #b91c1c, #ef4444);
}

.pending-panel h2[b-neqf2t8cii],
.approved-panel h2[b-neqf2t8cii],
.rejected-panel h2[b-neqf2t8cii] {
    margin: 0;
    font-size: 21px;
    font-weight: 900;
}

.pending-panel p[b-neqf2t8cii],
.approved-panel p[b-neqf2t8cii],
.rejected-panel p[b-neqf2t8cii] {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.7;
    font-weight: 700;
    color: #475569;
}

.current-status[b-neqf2t8cii] {
    display: inline-flex;
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #fed7aa;
    color: #92400e;
    font-size: 12px;
    font-weight: 800;
}

.approval-list[b-neqf2t8cii] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.approval-item[b-neqf2t8cii] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 15px;
    border-radius: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.approval-dot[b-neqf2t8cii] {
    width: 14px;
    height: 14px;
    margin-top: 4px;
    border-radius: 999px;
    flex: 0 0 auto;
    background: #f59e0b;
}

.approval-item.approved .approval-dot[b-neqf2t8cii] {
    background: #0f766e;
}

.approval-item.rejected .approval-dot[b-neqf2t8cii] {
    background: #dc2626;
}

.approval-item.neutral .approval-dot[b-neqf2t8cii] {
    background: #94a3b8;
}

.approval-item strong[b-neqf2t8cii] {
    display: block;
    font-size: 14px;
    font-weight: 900;
}

.approval-item span[b-neqf2t8cii] {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 800;
    color: #64748b;
}

.hint-box[b-neqf2t8cii] {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
}

.form-actions[b-neqf2t8cii] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
}

.btn[b-neqf2t8cii] {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 15px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 900;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.btn:hover[b-neqf2t8cii] {
    transform: translateY(-1px);
}

.btn-primary[b-neqf2t8cii] {
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    box-shadow: 0 16px 32px rgba(20, 184, 166, 0.26);
}

.btn-secondary[b-neqf2t8cii] {
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
}

@media (max-width: 900px) {
    .submitted-page[b-neqf2t8cii] {
        padding: 20px 14px;
    }

    .submitted-hero-card[b-neqf2t8cii] {
        grid-template-columns: 1fr;
    }

    .submitted-hero-card h1[b-neqf2t8cii] {
        font-size: 30px;
    }

    .status-card[b-neqf2t8cii] {
        padding: 20px;
        border-radius: 24px;
    }

    .step-card.horizontal[b-neqf2t8cii] {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 14px;
    }

    .step-line[b-neqf2t8cii] {
        min-width: 28px;
        flex: 0 0 28px;
    }

    .pending-panel[b-neqf2t8cii],
    .approved-panel[b-neqf2t8cii],
    .rejected-panel[b-neqf2t8cii] {
        flex-direction: column;
    }

    .approval-list[b-neqf2t8cii] {
        grid-template-columns: 1fr;
    }

    .visitor-summary[b-neqf2t8cii] {
        align-items: flex-start;
    }

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

    .btn[b-neqf2t8cii] {
        width: 100%;
    }
}
/* /Components/Pages/Visitor/VisitorWaiverPage.razor.rz.scp.css */
.waiver-page[b-vw9ue3s6av] {
    min-height: 100vh;
    padding: 32px;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.14), transparent 32%),
        linear-gradient(135deg, #f8fafc 0%, #eef6f5 100%);
    color: #0f172a;
}

.waiver-shell[b-vw9ue3s6av] {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.waiver-hero-card[b-vw9ue3s6av] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 24px;
}

.eyebrow[b-vw9ue3s6av] {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0f766e;
}

.waiver-hero-card h1[b-vw9ue3s6av] {
    margin: 0;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: -0.045em;
    color: #0f172a;
}

.waiver-hero-card p[b-vw9ue3s6av] {
    max-width: 680px;
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: #64748b;
}

.step-card[b-vw9ue3s6av] {
    padding: 18px;
    border-radius: 24px;
    border: 1px solid #dbeafe;
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.08);
}

.step-card.horizontal[b-vw9ue3s6av] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.step-item[b-vw9ue3s6av] {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
    flex: 0 0 auto;
}

.step-item span[b-vw9ue3s6av] {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 900;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.step-item strong[b-vw9ue3s6av] {
    display: block;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 900;
    color: #334155;
}

.step-item small[b-vw9ue3s6av] {
    display: block;
    margin-top: 2px;
    white-space: nowrap;
    font-size: 12px;
    color: #94a3b8;
}

.step-item.active span[b-vw9ue3s6av],
.step-item.completed span[b-vw9ue3s6av] {
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    border-color: #0f766e;
    box-shadow: 0 12px 24px rgba(20, 184, 166, 0.28);
}

.step-item.active strong[b-vw9ue3s6av],
.step-item.completed strong[b-vw9ue3s6av] {
    color: #0f766e;
}

.step-line[b-vw9ue3s6av] {
    height: 2px;
    min-width: 34px;
    flex: 1 1 auto;
    background: linear-gradient(90deg, #cbd5e1, #e2e8f0);
    border-radius: 999px;
}

.step-line.active[b-vw9ue3s6av] {
    background: linear-gradient(90deg, #0f766e, #14b8a6);
}

.form-card[b-vw9ue3s6av] {
    padding: 28px;
    border-radius: 28px;
    border: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.10);
}

.loading-state[b-vw9ue3s6av] {
    font-size: 14px;
    font-weight: 800;
    color: #64748b;
}

.alert[b-vw9ue3s6av] {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 800;
}

.alert-error[b-vw9ue3s6av] {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.alert-info[b-vw9ue3s6av] {
    color: #075985;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
}

.success-card[b-vw9ue3s6av] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 24px;
    background: linear-gradient(180deg, #ecfdf5 0%, #f0fdfa 100%);
    border: 1px solid #99f6e4;
}

.success-icon[b-vw9ue3s6av] {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
    box-shadow: 0 14px 26px rgba(20, 184, 166, 0.24);
}

.success-card h2[b-vw9ue3s6av] {
    margin: 0;
    font-size: 21px;
    font-weight: 900;
    color: #0f172a;
}

.success-card p[b-vw9ue3s6av] {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.7;
    font-weight: 700;
    color: #475569;
}

.visitor-summary[b-vw9ue3s6av] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
}

.avatar-box[b-vw9ue3s6av] {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 20px;
    box-shadow: 0 14px 28px rgba(20, 184, 166, 0.20);
}

.avatar-box img[b-vw9ue3s6av] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visitor-summary span[b-vw9ue3s6av] {
    display: block;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0f766e;
}

.visitor-summary strong[b-vw9ue3s6av] {
    display: block;
    margin-top: 3px;
    font-size: 18px;
    font-weight: 900;
    color: #0f172a;
}

.visitor-summary small[b-vw9ue3s6av] {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
}

.section-header[b-vw9ue3s6av] {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.section-header.compact[b-vw9ue3s6av] {
    margin-bottom: 18px;
}

.section-header h2[b-vw9ue3s6av] {
    margin: 0;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.section-header p[b-vw9ue3s6av] {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: #64748b;
}

.section-badge[b-vw9ue3s6av] {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    color: #0f766e;
    background: #ccfbf1;
    border: 1px solid #99f6e4;
}

.section-divider[b-vw9ue3s6av] {
    height: 1px;
    margin: 26px 0;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

.form-grid[b-vw9ue3s6av] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-group[b-vw9ue3s6av] {
    min-width: 0;
}

.form-group.full[b-vw9ue3s6av] {
    grid-column: 1 / -1;
}

.form-group label[b-vw9ue3s6av],
.upload-label[b-vw9ue3s6av] {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 900;
    color: #334155;
}

.form-group label span[b-vw9ue3s6av] {
    color: #dc2626;
}

.form-control[b-vw9ue3s6av] {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.form-control[b-vw9ue3s6av]::placeholder {
    color: #94a3b8;
    font-weight: 600;
}

.form-control:focus[b-vw9ue3s6av] {
    border-color: #14b8a6;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.16);
    background: #fbfffe;
}

.textarea[b-vw9ue3s6av] {
    min-height: 96px;
    resize: vertical;
}

.checkbox-grid[b-vw9ue3s6av] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.option-card[b-vw9ue3s6av] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.option-card:hover[b-vw9ue3s6av] {
    transform: translateY(-1px);
    border-color: #99f6e4;
    box-shadow: 0 14px 30px rgba(20, 184, 166, 0.08);
}

.option-card input[b-vw9ue3s6av],
.check-row input[b-vw9ue3s6av] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #0f766e;
    flex: 0 0 auto;
}

.option-card strong[b-vw9ue3s6av] {
    display: block;
    font-size: 14px;
    font-weight: 900;
    color: #0f172a;
}

.option-card small[b-vw9ue3s6av] {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 700;
    color: #64748b;
}

.yes-no-card[b-vw9ue3s6av] {
    display: inline-flex;
    gap: 8px;
    padding: 4px;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.radio-pill[b-vw9ue3s6av] {
    position: relative;
    cursor: pointer;
}

.radio-pill input[b-vw9ue3s6av] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.radio-pill span[b-vw9ue3s6av] {
    min-width: 88px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 900;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.radio-pill.active span[b-vw9ue3s6av] {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(20, 184, 166, 0.22);
}

.training-card[b-vw9ue3s6av] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border-radius: 24px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
}

.upload-panel[b-vw9ue3s6av] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.file-input-hidden[b-vw9ue3s6av] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

.upload-trigger[b-vw9ue3s6av] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px dashed #94a3b8;
    background: rgba(255, 255, 255, 0.96);
    cursor: pointer;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.upload-trigger:hover[b-vw9ue3s6av] {
    transform: translateY(-1px);
    border-color: #14b8a6;
    background: #f8fffe;
    box-shadow: 0 18px 40px rgba(20, 184, 166, 0.14);
}

.upload-trigger-icon[b-vw9ue3s6av] {
    width: 50px;
    height: 50px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
    box-shadow: 0 14px 26px rgba(20, 184, 166, 0.24);
}

.upload-trigger-text strong[b-vw9ue3s6av] {
    display: block;
    font-size: 15px;
    font-weight: 900;
    color: #0f172a;
}

.upload-trigger-text small[b-vw9ue3s6av],
.upload-helper-text[b-vw9ue3s6av] {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
    font-weight: 700;
}

.selected-file.modern[b-vw9ue3s6av] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ecfeff 0%, #f0fdfa 100%);
    border: 1px solid #99f6e4;
    color: #0f766e;
    box-shadow: 0 10px 24px rgba(20, 184, 166, 0.08);
}

.file-badge[b-vw9ue3s6av] {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    background: #ccfbf1;
    color: #0f766e;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    border: 1px solid #99f6e4;
}

.file-meta[b-vw9ue3s6av] {
    min-width: 0;
}

.file-meta strong[b-vw9ue3s6av] {
    display: block;
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
    word-break: break-word;
}

.file-meta small[b-vw9ue3s6av] {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: #0f766e;
    font-weight: 700;
}

.declaration-card[b-vw9ue3s6av],
.privacy-notice-card[b-vw9ue3s6av] {
    padding: 18px;
    margin-bottom: 16px;
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.10), transparent 35%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
}

.declaration-card p[b-vw9ue3s6av],
.privacy-notice-card p[b-vw9ue3s6av] {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    font-weight: 700;
    color: #475569;
}

.privacy-notice-card h3[b-vw9ue3s6av] {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 900;
    color: #0f172a;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.privacy-notice-card p + p[b-vw9ue3s6av] {
    margin-top: 8px;
}

.privacy-notice-card a[b-vw9ue3s6av] {
    color: #0f766e;
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.check-row[b-vw9ue3s6av] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    margin-bottom: 16px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.check-row:hover[b-vw9ue3s6av] {
    transform: translateY(-1px);
    border-color: #99f6e4;
    box-shadow: 0 14px 30px rgba(20, 184, 166, 0.08);
}

.check-row span[b-vw9ue3s6av] {
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
    color: #475569;
}

.form-actions[b-vw9ue3s6av] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
}

.btn[b-vw9ue3s6av] {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 15px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 900;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.btn:hover[b-vw9ue3s6av] {
    transform: translateY(-1px);
}

.btn:disabled[b-vw9ue3s6av] {
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
}

.btn-primary[b-vw9ue3s6av] {
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    box-shadow: 0 16px 32px rgba(20, 184, 166, 0.26);
}

.btn-secondary[b-vw9ue3s6av] {
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
}

@media (max-width: 900px) {
    .waiver-page[b-vw9ue3s6av] {
        padding: 20px 14px;
    }

    .waiver-hero-card[b-vw9ue3s6av] {
        grid-template-columns: 1fr;
    }

    .waiver-hero-card h1[b-vw9ue3s6av] {
        font-size: 30px;
    }

    .form-card[b-vw9ue3s6av] {
        padding: 20px;
        border-radius: 24px;
    }

    .step-card.horizontal[b-vw9ue3s6av] {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 14px;
    }

    .step-line[b-vw9ue3s6av] {
        min-width: 28px;
        flex: 0 0 28px;
    }

    .section-header[b-vw9ue3s6av] {
        flex-direction: column;
    }

    .form-grid[b-vw9ue3s6av],
    .checkbox-grid[b-vw9ue3s6av] {
        grid-template-columns: 1fr;
    }

    .yes-no-card[b-vw9ue3s6av] {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .radio-pill span[b-vw9ue3s6av] {
        width: 100%;
        min-width: 0;
    }

    .visitor-summary[b-vw9ue3s6av] {
        align-items: flex-start;
    }

    .upload-trigger[b-vw9ue3s6av] {
        align-items: flex-start;
    }

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

    .btn[b-vw9ue3s6av] {
        width: 100%;
    }
}