/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-77reyhjs81] {
    --nab-teal: #117987;
    --nab-teal-dark: #075865;
    --nab-teal-deep: #043f49;
    --nab-gold: #dfb760;
    --nab-gold-soft: #fbf3df;
    display: flex;
    min-height: 100vh;
    background: #f4f8f8;
    color: #153238;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

.sidebar[b-77reyhjs81] {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 100;
    display: flex;
    flex-direction: column;
    width: 292px;
    overflow: hidden;
    border-left: 1px solid rgba(223, 183, 96, 0.2);
    background:
        radial-gradient(circle at 50% -10%, rgba(223, 183, 96, 0.16), transparent 17rem),
        linear-gradient(180deg, #096b78 0%, var(--nab-teal-deep) 100%);
    color: #fff;
    box-shadow: -12px 0 35px rgba(3, 48, 56, 0.12);
    transition: width 0.25s ease;
}

.sidebar.collapsed[b-77reyhjs81] {
    width: 88px;
}

.sidebar-header[b-77reyhjs81] {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    min-height: 160px;
    padding: 14px 18px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.08);
}

.brand-logo[b-77reyhjs81] {
    width: 235px;
    height: 103px;
    border-radius: 15px;
    background-color: #117987;
    background-image: url("/images/nab-logo-teal.jpg");
    background-position: center 50%;
    background-repeat: no-repeat;
    background-size: 240px;
    filter: drop-shadow(0 9px 15px rgba(0, 0, 0, 0.15));
}

.brand-text[b-77reyhjs81] {
    display: flex;
    align-items: center;
    flex-direction: column;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
}

.brand-text strong[b-77reyhjs81] {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}

.brand-text span[b-77reyhjs81] {
    margin-top: 3px;
    color: #edd18e;
    font-size: 11px;
}

.sidebar.collapsed .sidebar-header[b-77reyhjs81] {
    min-height: 92px;
    padding: 12px 8px;
}

.sidebar.collapsed .brand-logo[b-77reyhjs81] {
    width: 68px;
    height: 63px;
    border: 1px solid rgba(223, 183, 96, 0.55);
    background-size: 82px;
}

.sidebar-nav[b-77reyhjs81] {
    flex: 1;
    padding: 18px 14px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: rgba(255, 255, 255, 0.24) transparent;
    scrollbar-width: thin;
}

.nav-section-title[b-77reyhjs81] {
    margin: 0 13px 10px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.nav-item[b-77reyhjs81],
.sidebar-nav[b-77reyhjs81]  .nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 52px;
    margin-bottom: 7px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: #d9f0f1;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.nav-item:hover[b-77reyhjs81],
.sidebar-nav[b-77reyhjs81]  .nav-item:hover {
    transform: translateX(-2px);
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
}

.nav-item.active[b-77reyhjs81],
.sidebar-nav[b-77reyhjs81]  .nav-item.active {
    border-color: rgba(223, 183, 96, 0.5);
    background: linear-gradient(135deg, #fffdf8, var(--nab-gold-soft));
    color: var(--nab-teal-deep);
    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.16);
}

.nav-item.active[b-77reyhjs81]::after,
.sidebar-nav[b-77reyhjs81]  .nav-item.active::after {
    position: absolute;
    top: 12px;
    right: -14px;
    bottom: 12px;
    width: 4px;
    border-radius: 4px 0 0 4px;
    background: var(--nab-gold);
    content: "";
}

.nav-icon[b-77reyhjs81] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.09);
    color: #f5d993;
    font-size: 19px;
    line-height: 1;
}

.nav-item.active .nav-icon[b-77reyhjs81],
.sidebar-nav[b-77reyhjs81]  .nav-item.active .nav-icon {
    background: rgba(17, 121, 135, 0.1);
    color: var(--nab-teal-dark);
}

.nav-label[b-77reyhjs81] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar.collapsed .sidebar-nav[b-77reyhjs81] {
    padding: 16px 10px;
}

.sidebar.collapsed .nav-item[b-77reyhjs81],
.sidebar.collapsed .sidebar-nav[b-77reyhjs81]  .nav-item {
    justify-content: center;
    padding: 6px;
}

.sidebar.collapsed .nav-item.active[b-77reyhjs81]::after,
.sidebar.collapsed .sidebar-nav[b-77reyhjs81]  .nav-item.active::after {
    right: -10px;
}

.sidebar-footer[b-77reyhjs81] {
    padding: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.12);
}

.current-user[b-77reyhjs81] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.06);
}

.user-avatar[b-77reyhjs81] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(223, 183, 96, 0.7);
    border-radius: 12px;
    background: var(--nab-gold-soft);
    color: var(--nab-teal-deep);
    font-weight: 900;
}

.user-details[b-77reyhjs81] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.user-details strong[b-77reyhjs81] {
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-details span[b-77reyhjs81] {
    margin-top: 3px;
    color: #a9d1d5;
    font-size: 11px;
}

.sidebar-actions[b-77reyhjs81] {
    display: grid;
    gap: 8px;
}

.action-button[b-77reyhjs81] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 42px;
    padding: 0 11px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    transition: transform 0.18s ease, background 0.18s ease;
}

.action-button:hover[b-77reyhjs81] {
    transform: translateY(-1px);
}

.action-icon[b-77reyhjs81] {
    font-size: 17px;
    line-height: 1;
}

.switch-user-button[b-77reyhjs81] {
    border: 1px solid #e9cb82;
    background: linear-gradient(135deg, #f9edcd, #dfb760);
    color: #17454b;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.13);
}

.switch-user-button:hover[b-77reyhjs81] {
    background: linear-gradient(135deg, #fff7e5, #e8c777);
}

.logout-button[b-77reyhjs81] {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

.logout-button:hover[b-77reyhjs81] {
    border-color: rgba(254, 202, 202, 0.32);
    background: rgba(220, 38, 38, 0.2);
}

.sidebar.collapsed .sidebar-footer[b-77reyhjs81] {
    padding: 11px 9px;
}

.sidebar.collapsed .action-button[b-77reyhjs81] {
    min-height: 43px;
    padding: 0;
}

.main-area[b-77reyhjs81] {
    width: calc(100% - 292px);
    min-height: 100vh;
    margin-right: 292px;
    transition: width 0.25s ease, margin-right 0.25s ease;
}

.sidebar.collapsed ~ .main-area[b-77reyhjs81] {
    width: calc(100% - 88px);
    margin-right: 88px;
}

.topbar[b-77reyhjs81] {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 78px;
    padding: 0 28px;
    border-bottom: 1px solid #dfe9e9;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 24px rgba(17, 70, 79, 0.05);
    backdrop-filter: blur(10px);
}

.topbar-start[b-77reyhjs81],
.topbar-end[b-77reyhjs81],
.topbar-user[b-77reyhjs81],
.status-indicator[b-77reyhjs81] {
    display: flex;
    align-items: center;
}

.topbar-start[b-77reyhjs81] {
    gap: 15px;
}

.topbar-start h2[b-77reyhjs81] {
    margin: 0;
    color: #153238;
    font-size: 21px;
}

.topbar-start span[b-77reyhjs81] {
    display: block;
    margin-top: 3px;
    color: #75878a;
    font-size: 12px;
}

.menu-button[b-77reyhjs81] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid #d5e2e3;
    border-radius: 11px;
    background: #fff;
    color: var(--nab-teal-dark);
    cursor: pointer;
    font-size: 20px;
}

.menu-button:hover[b-77reyhjs81] {
    background: #eef7f7;
}

.topbar-end[b-77reyhjs81] {
    gap: 19px;
}

.status-indicator[b-77reyhjs81] {
    gap: 7px;
    color: #52666a;
    font-size: 12px;
}

.status-dot[b-77reyhjs81] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
}

.topbar-user[b-77reyhjs81] {
    gap: 9px;
}

.topbar-user > div:last-child[b-77reyhjs81] {
    display: flex;
    flex-direction: column;
}

.topbar-user strong[b-77reyhjs81] {
    font-size: 13px;
}

.topbar-user span[b-77reyhjs81] {
    margin-top: 2px;
    color: #75878a;
    font-size: 11px;
}

.content-area[b-77reyhjs81] {
    min-height: calc(100vh - 78px);
    padding: 28px;
    background:
        radial-gradient(circle at 4% 4%, rgba(223, 183, 96, 0.09), transparent 24rem),
        #f4f8f8;
}

@media (min-width: 701px) and (max-width: 1180px) {
    .sidebar[b-77reyhjs81] {
        width: 205px;
    }

    .sidebar.collapsed[b-77reyhjs81] {
        width: 64px;
    }

    .sidebar-header[b-77reyhjs81] {
        min-height: 122px;
        padding: 12px;
    }

    .brand-logo[b-77reyhjs81] {
        width: 168px;
        height: 68px;
        background-size: 172px;
    }

    .sidebar.collapsed .brand-logo[b-77reyhjs81] {
        width: 50px;
        height: 49px;
        background-size: 62px;
    }

    .sidebar-nav[b-77reyhjs81] {
        padding: 14px 10px;
    }

    .nav-item[b-77reyhjs81],
    .sidebar-nav[b-77reyhjs81]  .nav-item {
        gap: 9px;
        min-height: 42px;
        padding: 5px 9px;
    }

    .main-area[b-77reyhjs81] {
        width: calc(100% - 205px);
        margin-right: 205px;
    }

    .sidebar.collapsed ~ .main-area[b-77reyhjs81],
    .app-shell:has(.sidebar.collapsed) .main-area[b-77reyhjs81] {
        width: calc(100% - 64px) !important;
        margin-right: 64px !important;
    }

    .sidebar-footer[b-77reyhjs81] {
        padding: 10px;
    }

    .action-button[b-77reyhjs81] {
        min-height: 40px;
    }

    .topbar[b-77reyhjs81] {
        min-height: 62px;
        padding: 0 14px;
    }

    .content-area[b-77reyhjs81] {
        min-height: calc(100vh - 62px);
        padding: 8px;
    }
}

@media (max-width: 700px) {
    .sidebar[b-77reyhjs81] {
        z-index: 220;
        width: min(86vw, 300px);
        transform: translateX(0);
        box-shadow: -18px 0 45px rgba(3, 48, 56, 0.3);
        transition: transform 0.22s ease;
    }

    .sidebar.collapsed[b-77reyhjs81] {
        width: min(86vw, 300px);
        transform: translateX(105%);
    }

    .sidebar.collapsed .sidebar-header[b-77reyhjs81] {
        min-height: 132px;
        padding: 12px;
    }

    .sidebar.collapsed .brand-logo[b-77reyhjs81] {
        width: 205px;
        height: 83px;
        border: 0;
        background-size: 210px;
    }

    .sidebar.collapsed + .sidebar-backdrop[b-77reyhjs81] {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .sidebar-backdrop[b-77reyhjs81] {
        position: fixed;
        inset: 0;
        z-index: 210;
        border: 0;
        background: rgba(4, 35, 40, 0.46);
        opacity: 1;
        cursor: pointer;
        transition: opacity 0.2s ease;
    }

    .main-area[b-77reyhjs81],
    .sidebar.collapsed ~ .main-area[b-77reyhjs81] {
        width: 100%;
        margin-right: 0;
    }

    .topbar[b-77reyhjs81] {
        min-height: 68px;
        padding: 0 10px;
    }

    .topbar-user > div:last-child[b-77reyhjs81],
    .status-indicator[b-77reyhjs81] {
        display: none;
    }

    .topbar-start h2[b-77reyhjs81] {
        font-size: 16px;
    }

    .topbar-start > div > span[b-77reyhjs81] {
        display: none;
    }

    .content-area[b-77reyhjs81] {
        padding: 10px;
        overflow-x: hidden;
    }

    .topbar-start[b-77reyhjs81] { gap: 8px; }
    .topbar-end[b-77reyhjs81] { gap: 8px; }
    .menu-button[b-77reyhjs81] { width: 38px; height: 38px; }
    .topbar-user[b-77reyhjs81] { display: none; }

    .sidebar:not(.collapsed) .brand-text[b-77reyhjs81],
    .sidebar:not(.collapsed) .nav-section-title[b-77reyhjs81],
    .sidebar:not(.collapsed) .nav-label[b-77reyhjs81],
    .sidebar:not(.collapsed) .current-user[b-77reyhjs81],
    .sidebar:not(.collapsed) .action-label[b-77reyhjs81] {
        display: flex;
    }
}

@media (min-width: 701px) {
    .sidebar-backdrop[b-77reyhjs81] { display: none; }
}

/* NAB RESPONSIVE LAYOUT V5 START */

/*
   الشاشات المتوسطة:
   القائمة المفتوحة 205px
   القائمة المغلقة 64px
   المحتوى يستغل المساحة مباشرة
*/
@media (min-width: 701px) and (max-width: 1180px) {
    .sidebar[b-77reyhjs81] {
        width: 205px !important;
    }

    .sidebar.collapsed[b-77reyhjs81] {
        width: 64px !important;
    }

    .sidebar-header[b-77reyhjs81] {
        min-height: 108px !important;
        padding: 9px !important;
    }

    .brand-logo[b-77reyhjs81] {
        width: 168px !important;
        height: 66px !important;
        background-size: 172px !important;
    }

    .brand-text strong[b-77reyhjs81] {
        font-size: 13px !important;
    }

    .brand-text span[b-77reyhjs81] {
        font-size: 9px !important;
    }

    .sidebar.collapsed .sidebar-header[b-77reyhjs81] {
        min-height: 72px !important;
        padding: 7px 5px !important;
    }

    .sidebar.collapsed .brand-logo[b-77reyhjs81] {
        width: 50px !important;
        height: 49px !important;
        border-radius: 9px !important;
        background-size: 62px !important;
    }

    .sidebar-nav[b-77reyhjs81] {
        padding: 9px 7px !important;
    }

    .nav-section-title[b-77reyhjs81] {
        margin: 0 10px 6px !important;
        font-size: 9px !important;
    }

    .nav-item[b-77reyhjs81],
    .sidebar-nav[b-77reyhjs81]  .nav-item {
        gap: 7px !important;
        min-height: 40px !important;
        margin-bottom: 4px !important;
        padding: 4px 7px !important;
        border-radius: 10px !important;
        font-size: 11px !important;
    }

    .nav-icon[b-77reyhjs81] {
        flex: 0 0 30px !important;
        width: 30px !important;
        height: 30px !important;
        border-radius: 8px !important;
        font-size: 16px !important;
    }

    .nav-label[b-77reyhjs81] {
        font-size: 11px !important;
    }

    .sidebar.collapsed .sidebar-nav[b-77reyhjs81] {
        padding: 9px 5px !important;
    }

    .sidebar.collapsed .nav-item[b-77reyhjs81],
    .sidebar.collapsed .sidebar-nav[b-77reyhjs81]  .nav-item {
        justify-content: center !important;
        padding: 4px !important;
    }

    /*
       الحالة المفتوحة
    */
    .main-area[b-77reyhjs81] {
        width: calc(100% - 205px) !important;
        margin-right: 205px !important;
    }

    /*
       الحالة المغلقة.
       وُضع المحددان لضمان العمل سواء وُجد زر الخلفية
       بين القائمة ومنطقة المحتوى أم لم يوجد.
    */
    .sidebar.collapsed ~ .main-area[b-77reyhjs81],
    .app-shell:has(.sidebar.collapsed) .main-area[b-77reyhjs81] {
        width: calc(100% - 64px) !important;
        margin-right: 64px !important;
    }

    .topbar[b-77reyhjs81] {
        min-height: 60px !important;
        padding: 0 12px !important;
    }

    .topbar-start[b-77reyhjs81] {
        gap: 8px !important;
    }

    .topbar-start h2[b-77reyhjs81] {
        font-size: 17px !important;
    }

    .topbar-start span[b-77reyhjs81] {
        margin-top: 1px !important;
        font-size: 9px !important;
    }

    .menu-button[b-77reyhjs81] {
        width: 36px !important;
        height: 36px !important;
        border-radius: 9px !important;
        font-size: 17px !important;
    }

    .topbar-end[b-77reyhjs81] {
        gap: 8px !important;
    }

    .status-indicator[b-77reyhjs81] {
        gap: 5px !important;
        font-size: 10px !important;
    }

    .topbar-user[b-77reyhjs81] {
        gap: 6px !important;
    }

    .topbar-user .user-avatar[b-77reyhjs81] {
        flex-basis: 34px !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 9px !important;
    }

    .topbar-user strong[b-77reyhjs81] {
        font-size: 11px !important;
    }

    .topbar-user span[b-77reyhjs81] {
        font-size: 9px !important;
    }

    .content-area[b-77reyhjs81] {
        min-height: calc(100vh - 60px) !important;
        padding: 6px !important;
    }

    .sidebar-footer[b-77reyhjs81] {
        padding: 7px !important;
    }

    .current-user[b-77reyhjs81] {
        gap: 7px !important;
        margin-bottom: 7px !important;
        padding: 7px !important;
        border-radius: 10px !important;
    }

    .current-user .user-avatar[b-77reyhjs81] {
        flex-basis: 34px !important;
        width: 34px !important;
        height: 34px !important;
    }

    .user-details strong[b-77reyhjs81] {
        font-size: 11px !important;
    }

    .user-details span[b-77reyhjs81] {
        font-size: 9px !important;
    }

    .sidebar-actions[b-77reyhjs81] {
        gap: 5px !important;
    }

    .action-button[b-77reyhjs81] {
        min-height: 35px !important;
        padding: 0 8px !important;
        border-radius: 8px !important;
        font-size: 10px !important;
    }

    .action-icon[b-77reyhjs81] {
        font-size: 15px !important;
    }

    .sidebar.collapsed .sidebar-footer[b-77reyhjs81] {
        padding: 7px 5px !important;
    }

    .sidebar.collapsed .action-button[b-77reyhjs81] {
        min-height: 36px !important;
        padding: 0 !important;
    }
}

/*
   الهاتف:
   لا نحجز أي مساحة دائمة للقائمة.
   القائمة تتحول إلى درج فوق المحتوى.
*/
@media (max-width: 700px) {
    .sidebar[b-77reyhjs81] {
        z-index: 220 !important;
        width: min(86vw, 290px) !important;
        transform: translateX(0);
        box-shadow: -18px 0 45px rgba(3, 48, 56, 0.3);
        transition:
            transform 0.22s ease,
            width 0.22s ease;
    }

    .sidebar.collapsed[b-77reyhjs81] {
        width: min(86vw, 290px) !important;
        transform: translateX(105%);
    }

    .main-area[b-77reyhjs81],
    .sidebar.collapsed ~ .main-area[b-77reyhjs81],
    .app-shell:has(.sidebar.collapsed) .main-area[b-77reyhjs81] {
        width: 100% !important;
        margin-right: 0 !important;
    }

    .topbar[b-77reyhjs81] {
        min-height: 58px !important;
        padding: 0 8px !important;
    }

    .topbar-start[b-77reyhjs81] {
        gap: 7px !important;
    }

    .topbar-start h2[b-77reyhjs81] {
        font-size: 15px !important;
    }

    .topbar-start > div > span[b-77reyhjs81] {
        display: none !important;
    }

    .menu-button[b-77reyhjs81] {
        width: 35px !important;
        height: 35px !important;
        font-size: 16px !important;
    }

    .topbar-user[b-77reyhjs81],
    .status-indicator[b-77reyhjs81] {
        display: none !important;
    }

    .content-area[b-77reyhjs81] {
        min-height: calc(100vh - 58px) !important;
        padding: 5px !important;
        overflow-x: hidden !important;
    }
}

/* NAB RESPONSIVE LAYOUT V5 END */

/* NAB MOBILE DRAWER V6 START */

@media (max-width: 700px) {
    .app-shell[b-77reyhjs81] {
        min-height: 100dvh !important;
    }

    .sidebar[b-77reyhjs81] {
        width: min(88vw, 330px) !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        padding-top: env(safe-area-inset-top) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        overflow: hidden !important;
    }

    .sidebar.collapsed[b-77reyhjs81] {
        width: min(88vw, 330px) !important;
        transform: translateX(105%) !important;
    }

    .sidebar-header[b-77reyhjs81] {
        flex: 0 0 auto !important;
        gap: 4px !important;
        min-height: 108px !important;
        padding: 8px 10px !important;
    }

    .brand-logo[b-77reyhjs81] {
        width: 200px !important;
        height: 76px !important;
        border-radius: 12px !important;
        background-size: 205px !important;
        filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.13)) !important;
    }

    .brand-text strong[b-77reyhjs81] {
        font-size: 13px !important;
    }

    .brand-text span[b-77reyhjs81] {
        margin-top: 1px !important;
        font-size: 9px !important;
    }

    .sidebar-nav[b-77reyhjs81] {
        min-height: 0 !important;
        padding: 7px 9px !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .nav-section-title[b-77reyhjs81] {
        margin: 0 10px 5px !important;
        font-size: 9px !important;
    }

    .nav-item[b-77reyhjs81],
    .sidebar-nav[b-77reyhjs81]  .nav-item {
        gap: 9px !important;
        min-height: 42px !important;
        margin-bottom: 4px !important;
        padding: 4px 8px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
    }

    .nav-icon[b-77reyhjs81] {
        flex: 0 0 31px !important;
        width: 31px !important;
        height: 31px !important;
        border-radius: 9px !important;
        font-size: 16px !important;
    }

    .nav-label[b-77reyhjs81] {
        font-size: 12px !important;
    }

    .sidebar-footer[b-77reyhjs81] {
        flex: 0 0 auto !important;
        padding: 7px 9px !important;
    }

    .current-user[b-77reyhjs81] {
        gap: 8px !important;
        margin-bottom: 6px !important;
        padding: 6px 8px !important;
        border-radius: 10px !important;
    }

    .current-user .user-avatar[b-77reyhjs81] {
        flex-basis: 34px !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 9px !important;
    }

    .user-details strong[b-77reyhjs81] {
        font-size: 11px !important;
    }

    .user-details span[b-77reyhjs81] {
        margin-top: 1px !important;
        font-size: 9px !important;
    }

    .sidebar-actions[b-77reyhjs81] {
        gap: 4px !important;
    }

    .action-button[b-77reyhjs81] {
        min-height: 36px !important;
        padding: 0 8px !important;
        border-radius: 9px !important;
        font-size: 10px !important;
    }

    .action-icon[b-77reyhjs81] {
        font-size: 14px !important;
    }

    .topbar[b-77reyhjs81] {
        min-height: 56px !important;
        padding:
            env(safe-area-inset-top)
            8px
            0 !important;
    }

    .content-area[b-77reyhjs81] {
        min-height: calc(100dvh - 56px) !important;
        padding: 5px !important;
    }
}

@media (max-width: 380px) {
    .sidebar[b-77reyhjs81] {
        width: 92vw !important;
    }

    .sidebar.collapsed[b-77reyhjs81] {
        width: 92vw !important;
    }

    .brand-logo[b-77reyhjs81] {
        width: 185px !important;
        height: 70px !important;
        background-size: 190px !important;
    }

    .nav-item[b-77reyhjs81],
    .sidebar-nav[b-77reyhjs81]  .nav-item {
        min-height: 39px !important;
    }
}

/* NAB MOBILE DRAWER V6 END */

/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-3w7fehguxk] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-3w7fehguxk] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-3w7fehguxk] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-3w7fehguxk] {
    font-size: 1.1rem;
}

.bi[b-3w7fehguxk] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

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

.bi-plus-square-fill-nav-menu[b-3w7fehguxk] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-3w7fehguxk] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

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

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

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

    .nav-item[b-3w7fehguxk]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-3w7fehguxk]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-3w7fehguxk]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-3w7fehguxk] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-3w7fehguxk] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-3w7fehguxk] {
        display: none;
    }

    .nav-scrollable[b-3w7fehguxk] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-vkjgnnpu8i],
.components-reconnect-repeated-attempt-visible[b-vkjgnnpu8i],
.components-reconnect-failed-visible[b-vkjgnnpu8i],
.components-pause-visible[b-vkjgnnpu8i],
.components-resume-failed-visible[b-vkjgnnpu8i],
.components-rejoining-animation[b-vkjgnnpu8i] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/ArchivedBooks.razor.rz.scp.css */
/* CSS for Books component */
.books-page[b-suan8dorjc] {
    padding: 24px;
    font-family: Arial, sans-serif;
}

.page-header[b-suan8dorjc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

    .page-header h1[b-suan8dorjc] {
        margin: 0 0 6px;
        font-size: 28px;
    }

    .page-header p[b-suan8dorjc] {
        margin: 0;
        color: #6b7280;
    }

.filters-card[b-suan8dorjc],
.table-card[b-suan8dorjc],
.loading-card[b-suan8dorjc],
.empty-card[b-suan8dorjc] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.05);
}

.filters-card[b-suan8dorjc] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 14px;
    align-items: end;
    padding: 18px;
    margin-bottom: 18px;
}

.form-group[b-suan8dorjc] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .form-group label[b-suan8dorjc] {
        font-weight: 700;
        color: #374151;
    }

.form-control[b-suan8dorjc] {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    background: white;
    font-size: 14px;
}

    .form-control:focus[b-suan8dorjc] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

.btn[b-suan8dorjc] {
    border: 0;
    border-radius: 9px;
    padding: 10px 16px;
    cursor: pointer;
    font-weight: 700;
}

    .btn:disabled[b-suan8dorjc] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.btn-primary[b-suan8dorjc] {
    background: #2563eb;
    color: white;
}

.btn-secondary[b-suan8dorjc] {
    background: #e5e7eb;
    color: #111827;
}

.btn-warning[b-suan8dorjc] {
    background: #f59e0b;
    color: white;
}

.btn-outline[b-suan8dorjc] {
    background: white;
    color: #1f2937;
    border: 1px solid #d1d5db;
}

.btn-small[b-suan8dorjc] {
    padding: 7px 11px;
    font-size: 13px;
}

.refresh-button[b-suan8dorjc] {
    height: 42px;
}

.alert[b-suan8dorjc] {
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 9px;
}

.alert-success[b-suan8dorjc] {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.alert-danger[b-suan8dorjc] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-warning[b-suan8dorjc] {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.loading-card[b-suan8dorjc],
.empty-card[b-suan8dorjc] {
    padding: 40px;
    text-align: center;
    color: #6b7280;
}

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

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

table[b-suan8dorjc] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1000px;
}

th[b-suan8dorjc],
td[b-suan8dorjc] {
    padding: 14px 12px;
    text-align: right;
    border-bottom: 1px solid #eef2f7;
    white-space: nowrap;
}

th[b-suan8dorjc] {
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
}

tbody tr:hover[b-suan8dorjc] {
    background: #f8fafc;
}

.book-number[b-suan8dorjc] {
    font-weight: 800;
}

.actions[b-suan8dorjc] {
    display: flex;
    gap: 8px;
}

.status-badge[b-suan8dorjc] {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.status-available[b-suan8dorjc] {
    background: #ecfdf5;
    color: #047857;
}

.status-assigned[b-suan8dorjc] {
    background: #eff6ff;
    color: #1d4ed8;
}

.status-submitted[b-suan8dorjc] {
    background: #fff7ed;
    color: #c2410c;
}

.status-completed[b-suan8dorjc] {
    background: #f0fdf4;
    color: #166534;
}

.status-archived[b-suan8dorjc] {
    background: #f3f4f6;
    color: #4b5563;
}

.status-rejected[b-suan8dorjc] {
    background: #fef2f2;
    color: #b91c1c;
}

.status-default[b-suan8dorjc] {
    background: #f3f4f6;
    color: #374151;
}

.progress-wrapper[b-suan8dorjc] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.progress-bar[b-suan8dorjc] {
    width: 100px;
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.progress-value[b-suan8dorjc] {
    height: 100%;
    background: #2563eb;
}

.pagination[b-suan8dorjc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px;
}

.modal-backdrop[b-suan8dorjc] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
}

.modal-card[b-suan8dorjc] {
    width: min(560px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    border-radius: 16px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.25);
}

.modal-header[b-suan8dorjc],
.modal-footer[b-suan8dorjc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
}

.modal-header[b-suan8dorjc] {
    border-bottom: 1px solid #e5e7eb;
}

    .modal-header h2[b-suan8dorjc] {
        margin: 0;
        font-size: 21px;
    }

.modal-body[b-suan8dorjc] {
    display: flex;
    flex-direction: column;
    gap: 17px;
    padding: 20px;
}

.modal-footer[b-suan8dorjc] {
    justify-content: flex-start;
    gap: 10px;
    border-top: 1px solid #e5e7eb;
}

.close-button[b-suan8dorjc] {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 28px;
    color: #6b7280;
}

.summary-box[b-suan8dorjc] {
    display: grid;
    gap: 8px;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.validation-message[b-suan8dorjc] {
    color: #b91c1c;
    font-size: 13px;
}

@media (max-width: 900px) {
    .books-page[b-suan8dorjc] {
        padding: 14px;
    }

    .page-header[b-suan8dorjc] {
        align-items: stretch;
        flex-direction: column;
    }

    .filters-card[b-suan8dorjc] {
        grid-template-columns: 1fr;
    }

    .refresh-button[b-suan8dorjc] {
        width: 100%;
    }
}

.book-link[b-suan8dorjc] {
    color: #2563eb;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
}

    .book-link:hover[b-suan8dorjc] {
        color: #1d4ed8;
        text-decoration: underline;
    }

.status-damaged[b-suan8dorjc] {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.damaged-book-row[b-suan8dorjc] {
    background: #fff7f7;
}

    .damaged-book-row:hover[b-suan8dorjc] {
        background: #fef2f2;
    }

.damage-reason-cell[b-suan8dorjc] {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #991b1b;
    font-weight: 700;
}

.filters-card[b-suan8dorjc] {
    grid-template-columns: 2fr 1fr 1fr auto;
}
/* /Components/Pages/AuditLogs.razor.rz.scp.css */
.audit-page[b-rtnq4iodcz] {
    padding: 8px 0 32px;
    color: #172033;
}

.audit-page-header[b-rtnq4iodcz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.audit-page-title-row[b-rtnq4iodcz] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.audit-page-icon[b-rtnq4iodcz] {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: #eaf2ff;
    font-size: 25px;
}

.audit-page-header h1[b-rtnq4iodcz] {
    margin: 0 0 5px;
    font-size: 27px;
    font-weight: 800;
}

.audit-page-header p[b-rtnq4iodcz],
.audit-filter-header p[b-rtnq4iodcz],
.audit-table-header p[b-rtnq4iodcz] {
    margin: 0;
    color: #78849a;
    font-size: 13px;
}

.audit-refresh-button[b-rtnq4iodcz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: white;
    background: #12243a;
    border-radius: 10px;
}

.audit-summary-grid[b-rtnq4iodcz] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.audit-summary-card[b-rtnq4iodcz] {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 96px;
    padding: 17px;
    background: white;
    border: 1px solid #e1e7f0;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(20, 43, 74, 0.04);
}

    .audit-summary-card span[b-rtnq4iodcz] {
        display: block;
        margin-bottom: 6px;
        color: #7d889b;
        font-size: 12px;
    }

    .audit-summary-card strong[b-rtnq4iodcz] {
        display: block;
        color: #152238;
        font-size: 24px;
    }

.summary-icon[b-rtnq4iodcz] {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 20px;
}

.summary-icon-blue[b-rtnq4iodcz] {
    background: #e8f1ff;
}

.summary-icon-green[b-rtnq4iodcz] {
    background: #e5f8ef;
}

.summary-icon-purple[b-rtnq4iodcz] {
    background: #f0eaff;
}

.summary-icon-orange[b-rtnq4iodcz] {
    background: #fff1dc;
}

.audit-filter-card[b-rtnq4iodcz],
.audit-table-card[b-rtnq4iodcz] {
    background: white;
    border: 1px solid #e1e7f0;
    border-radius: 15px;
    box-shadow: 0 5px 18px rgba(20, 43, 74, 0.04);
}

.audit-filter-card[b-rtnq4iodcz] {
    padding: 19px;
    margin-bottom: 18px;
}

.audit-filter-header[b-rtnq4iodcz],
.audit-table-header[b-rtnq4iodcz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.audit-filter-header[b-rtnq4iodcz] {
    margin-bottom: 17px;
}

    .audit-filter-header h2[b-rtnq4iodcz],
    .audit-table-header h2[b-rtnq4iodcz] {
        margin: 0 0 4px;
        font-size: 17px;
        font-weight: 800;
    }

.audit-filter-grid[b-rtnq4iodcz] {
    display: grid;
    grid-template-columns: minmax(280px, 2fr) minmax(190px, 1fr) auto;
    gap: 13px;
    align-items: end;
}

.audit-field label[b-rtnq4iodcz] {
    display: block;
    margin-bottom: 7px;
    color: #4d596d;
    font-size: 12px;
    font-weight: 700;
}

.audit-field .form-control[b-rtnq4iodcz],
.audit-field .form-select[b-rtnq4iodcz] {
    min-height: 43px;
    border-color: #dfe5ee;
    border-radius: 10px;
}

.audit-input-container[b-rtnq4iodcz] {
    position: relative;
}

    .audit-input-container .form-control[b-rtnq4iodcz] {
        padding-right: 39px;
    }

.audit-input-icon[b-rtnq4iodcz] {
    position: absolute;
    top: 50%;
    right: 14px;
    z-index: 2;
    color: #8290a4;
    transform: translateY(-50%);
}

.audit-search-button[b-rtnq4iodcz] {
    min-height: 43px;
    padding: 8px 22px;
    color: white;
    background: #163451;
    border-radius: 10px;
}

.audit-clear-button[b-rtnq4iodcz] {
    color: #536176;
    background: #f5f7fa;
    border: 1px solid #e1e6ee;
    border-radius: 9px;
}

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

.audit-table-header[b-rtnq4iodcz] {
    padding: 19px 20px;
    border-bottom: 1px solid #edf0f5;
}

.audit-result-count[b-rtnq4iodcz] {
    padding: 6px 11px;
    color: #34516e;
    background: #edf3f8;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.audit-table[b-rtnq4iodcz] {
    margin: 0;
    vertical-align: middle;
}

    .audit-table th[b-rtnq4iodcz] {
        padding: 13px 18px;
        color: #6e7a8d;
        background: #f8fafc;
        border-bottom: 1px solid #e7ecf2;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }

    .audit-table td[b-rtnq4iodcz] {
        padding: 14px 18px;
        border-bottom: 1px solid #edf1f5;
    }

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

.audit-date-cell strong[b-rtnq4iodcz],
.audit-date-cell span[b-rtnq4iodcz] {
    display: block;
    white-space: nowrap;
}

.audit-date-cell strong[b-rtnq4iodcz] {
    margin-bottom: 4px;
    font-size: 13px;
}

.audit-date-cell span[b-rtnq4iodcz] {
    color: #8994a5;
    font-size: 11px;
}

.audit-user-cell[b-rtnq4iodcz] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.audit-user-avatar[b-rtnq4iodcz] {
    width: 37px;
    height: 37px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    color: #245079;
    background: #eaf2f9;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 800;
}

.audit-user-cell strong[b-rtnq4iodcz],
.audit-user-cell span[b-rtnq4iodcz] {
    display: block;
}

.audit-user-cell strong[b-rtnq4iodcz] {
    margin-bottom: 3px;
    font-size: 13px;
}

.audit-user-cell span[b-rtnq4iodcz] {
    color: #8994a5;
    font-size: 11px;
}

.audit-action-badge[b-rtnq4iodcz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.action-create[b-rtnq4iodcz] {
    color: #087247;
    background: #e4f7ee;
}

.action-assign[b-rtnq4iodcz] {
    color: #205eb7;
    background: #e8f1ff;
}

.action-transfer[b-rtnq4iodcz] {
    color: #6941c6;
    background: #f0eaff;
}

.action-submit[b-rtnq4iodcz] {
    color: #946200;
    background: #fff4d6;
}

.action-complete[b-rtnq4iodcz] {
    color: #087247;
    background: #e4f7ee;
}

.action-archive[b-rtnq4iodcz] {
    color: #344054;
    background: #e9edf2;
}

.action-reject[b-rtnq4iodcz] {
    color: #b42318;
    background: #fee9e7;
}

.action-default[b-rtnq4iodcz] {
    color: #475467;
    background: #f0f2f5;
}

.audit-entity-cell[b-rtnq4iodcz] {
    display: flex;
    align-items: center;
    gap: 9px;
}

    .audit-entity-cell strong[b-rtnq4iodcz],
    .audit-entity-cell small[b-rtnq4iodcz] {
        display: block;
    }

    .audit-entity-cell strong[b-rtnq4iodcz] {
        font-size: 12px;
    }

    .audit-entity-cell small[b-rtnq4iodcz] {
        margin-top: 3px;
        color: #7c8798;
        direction: ltr;
        text-align: right;
    }

.audit-description[b-rtnq4iodcz] {
    min-width: 220px;
    max-width: 480px;
    color: #4c586b;
    font-size: 12px;
    line-height: 1.7;
}

.audit-state[b-rtnq4iodcz] {
    padding: 65px 20px;
    text-align: center;
}

.audit-state-icon[b-rtnq4iodcz] {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin: 0 auto 13px;
    background: #f0f4f8;
    border-radius: 50%;
    font-size: 23px;
}

.audit-state h3[b-rtnq4iodcz] {
    margin-bottom: 6px;
    font-size: 17px;
}

.audit-state p[b-rtnq4iodcz] {
    color: #8590a1;
    font-size: 13px;
}

.audit-spinner[b-rtnq4iodcz] {
    width: 38px;
    height: 38px;
    margin: 0 auto 15px;
    border: 4px solid #e4eaf1;
    border-top-color: #173b5d;
    border-radius: 50%;
    animation: audit-spin-b-rtnq4iodcz 0.8s linear infinite;
}

@keyframes audit-spin-b-rtnq4iodcz {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1100px) {
    .audit-summary-grid[b-rtnq4iodcz] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .audit-page-header[b-rtnq4iodcz],
    .audit-filter-header[b-rtnq4iodcz],
    .audit-table-header[b-rtnq4iodcz] {
        align-items: stretch;
        flex-direction: column;
    }

    .audit-summary-grid[b-rtnq4iodcz],
    .audit-filter-grid[b-rtnq4iodcz] {
        grid-template-columns: 1fr;
    }

    .audit-refresh-button[b-rtnq4iodcz],
    .audit-search-button[b-rtnq4iodcz] {
        justify-content: center;
        width: 100%;
    }
}
/* /Components/Pages/BookDetails.razor.rz.scp.css */
.book-details-page[b-lg26u75ch3] {
    width: 100%;
    box-sizing: border-box;
    padding: 24px;
    color: #0f172a;
}

.details-header[b-lg26u75ch3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

    .details-header h1[b-lg26u75ch3] {
        margin: 0 0 6px;
        font-size: 28px;
    }

    .details-header p[b-lg26u75ch3] {
        margin: 0;
        color: #64748b;
    }

.btn-back[b-lg26u75ch3] {
    min-height: 42px;
    padding: 9px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    color: #334155;
    cursor: pointer;
    font-weight: 700;
}

    .btn-back:hover[b-lg26u75ch3] {
        background: #f8fafc;
    }

.alert[b-lg26u75ch3] {
    margin-bottom: 18px;
    padding: 12px 15px;
    border-radius: 10px;
    font-weight: 700;
}

.alert-danger[b-lg26u75ch3] {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.alert-success[b-lg26u75ch3] {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.state-card[b-lg26u75ch3] {
    padding: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    color: #64748b;
    text-align: center;
}

.book-summary-card[b-lg26u75ch3] {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 1px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #e2e8f0;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.05);
}

.book-code-card[b-lg26u75ch3] {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 170px minmax(260px, 1.35fr);
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
    padding: 18px;
    border: 1px solid #cfe0e2;
    border-radius: 16px;
    background: linear-gradient(135deg, #fff, #f1f8f8);
}

.book-code-visual[b-lg26u75ch3] {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.book-code-visual > span[b-lg26u75ch3] {
    display: block;
    margin-bottom: 6px;
    color: #47717a;
    font-size: 11px;
    font-weight: 900;
    text-align: center;
}

.book-code-visual > div[b-lg26u75ch3] {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.code-card-copy h2[b-lg26u75ch3] { margin: 4px 0 7px; font-size: 20px; }
.code-card-copy p[b-lg26u75ch3] { margin: 0 0 10px; color: #64748b; line-height: 1.7; }
.code-card-copy > strong[b-lg26u75ch3] { color: #075865; font-size: 18px; }
.code-eyebrow[b-lg26u75ch3] { color: #117987; font-size: 11px; font-weight: 900; }
.book-qr[b-lg26u75ch3] { padding: 9px; border: 1px solid #d8e5e7; border-radius: 12px; background: #fff; }
.book-qr[b-lg26u75ch3]  svg,
.page-qr-code[b-lg26u75ch3]  svg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}
.book-barcode[b-lg26u75ch3] { min-width: 0; padding: 8px; border: 1px solid #d8e5e7; border-radius: 12px; background: #fff; }
.book-barcode[b-lg26u75ch3]  svg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow: hidden;
}
.requested-note-row[b-lg26u75ch3] { background: #fff7d6 !important; box-shadow: inset -4px 0 #d69e13; }
.requested-note-row td:first-child strong[b-lg26u75ch3] { color: #8a5a00; }

.note-focus-mode > section:not(.focused-note-card)[b-lg26u75ch3] { display: none !important; }

.focused-note-card[b-lg26u75ch3] {
    overflow: hidden;
    border: 1px solid #cfe0e2;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
}

.focused-book-heading[b-lg26u75ch3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    border-bottom: 1px solid #dce9eb;
    background: linear-gradient(135deg, #eefafa, #fff8e8);
}
.focused-book-heading span[b-lg26u75ch3] { color: #64748b; font-size: 12px; font-weight: 800; }
.focused-book-heading h2[b-lg26u75ch3] { margin: 4px 0; color: #063e49; font-size: 26px; }
.focused-book-heading p[b-lg26u75ch3] { margin: 0; color: #47717a; font-weight: 800; }

.focused-note-grid[b-lg26u75ch3] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: #e3ecee;
}
.focused-note-grid > div[b-lg26u75ch3] { min-width: 0; padding: 16px; background: #fff; }
.focused-note-grid span[b-lg26u75ch3],
.focused-note-text > span[b-lg26u75ch3],
.focused-note-image > span[b-lg26u75ch3] { display: block; margin-bottom: 7px; color: #64748b; font-size: 12px; font-weight: 800; }
.focused-note-grid strong[b-lg26u75ch3] { color: #0f3440; overflow-wrap: anywhere; }

.focused-note-text[b-lg26u75ch3] { padding: 17px 20px; border-top: 1px solid #e3ecee; }
.focused-note-text p[b-lg26u75ch3] { margin: 0; color: #203f48; line-height: 1.8; white-space: pre-wrap; }
.focused-note-text.review-text[b-lg26u75ch3] { background: #fffdf6; }

.focused-note-image[b-lg26u75ch3] { padding: 20px; border-top: 1px solid #e3ecee; background: #f8fbfb; }
.focused-note-image a[b-lg26u75ch3] { display: block; width: fit-content; max-width: 100%; margin: auto; }
.focused-note-image img[b-lg26u75ch3] {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 72vh;
    object-fit: contain;
    border: 1px solid #d7e5e7;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}
.focused-image-empty[b-lg26u75ch3] { padding: 36px 18px; border: 1px dashed #b9d2d5; border-radius: 13px; color: #64748b; text-align: center; background: #fff; }
.focused-note-actions[b-lg26u75ch3] { display: flex; flex-wrap: wrap; gap: 9px; padding: 16px 20px; border-top: 1px solid #e3ecee; }

@media (max-width: 720px) {
    .focused-note-grid[b-lg26u75ch3] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .focused-book-heading[b-lg26u75ch3] { align-items: flex-start; }
    .focused-note-grid[b-lg26u75ch3] { grid-template-columns: 1fr; }
    .focused-note-image[b-lg26u75ch3] { padding: 12px; }
}
.qr-button[b-lg26u75ch3] { border-color: #9dcbd0 !important; color: #075865 !important; font-weight: 900; }
.qr-modal[b-lg26u75ch3] { max-width: 420px; }
.page-qr-code[b-lg26u75ch3] { width: min(280px, 90%); margin: 12px auto; padding: 12px; border: 1px solid #d8e5e7; border-radius: 14px; background: #fff; }
.page-barcode-code[b-lg26u75ch3] {
    width: 100%;
    margin: 12px auto;
    padding: 10px;
    overflow: hidden;
    border: 1px solid #d8e5e7;
    border-radius: 14px;
    background: #fff;
    box-sizing: border-box;
}
.page-barcode-code[b-lg26u75ch3]  svg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}
.qr-help[b-lg26u75ch3] { color: #64748b; font-size: 13px; line-height: 1.7; text-align: center; }

@media (max-width: 900px) {
    .book-code-card[b-lg26u75ch3] {
        grid-template-columns: minmax(150px, 180px) minmax(0, 1fr);
    }
    .code-card-copy[b-lg26u75ch3] { grid-column: 1 / -1; }
    .book-qr[b-lg26u75ch3] { grid-column: 1; }
    .book-barcode[b-lg26u75ch3] { grid-column: 2; }
}

@media (max-width: 560px) {
    .book-code-card[b-lg26u75ch3] { grid-template-columns: 1fr; }
    .code-card-copy[b-lg26u75ch3],
    .book-qr[b-lg26u75ch3],
    .book-barcode[b-lg26u75ch3] { grid-column: 1; }
    .book-qr[b-lg26u75ch3] { width: min(180px, 100%); margin-inline: auto; }
    .book-barcode[b-lg26u75ch3] { width: 100%; max-width: 100%; }
}

.summary-item[b-lg26u75ch3] {
    min-height: 78px;
    padding: 15px 17px;
    background: #fff;
}

    .summary-item span[b-lg26u75ch3] {
        display: block;
        margin-bottom: 7px;
        color: #64748b;
        font-size: 13px;
    }

    .summary-item strong[b-lg26u75ch3] {
        display: block;
        color: #0f172a;
        font-size: 15px;
    }

.book-status[b-lg26u75ch3] {
    display: inline-flex !important;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px !important;
    font-weight: 800;
}

.book-status-available[b-lg26u75ch3] {
    background: #ecfdf5;
    color: #047857;
}

.book-status-assigned[b-lg26u75ch3] {
    background: #eff6ff;
    color: #1d4ed8;
}

.book-status-progress[b-lg26u75ch3] {
    background: #f5f3ff;
    color: #6d28d9;
}

.book-status-submitted[b-lg26u75ch3] {
    background: #fef9c3;
    color: #854d0e;
}

.book-status-completed[b-lg26u75ch3] {
    background: #dcfce7;
    color: #166534;
}

.book-status-archived[b-lg26u75ch3] {
    background: #f1f5f9;
    color: #475569;
}

.book-status-rejected[b-lg26u75ch3] {
    background: #fef2f2;
    color: #b91c1c;
}

.book-status-default[b-lg26u75ch3] {
    background: #f3f4f6;
    color: #374151;
}

.statistics-grid[b-lg26u75ch3] {
    display: grid;
    grid-template-columns: repeat(7, minmax(110px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}

.stat-card[b-lg26u75ch3] {
    padding: 13px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}

    .stat-card span[b-lg26u75ch3] {
        display: block;
        margin-bottom: 7px;
        color: #64748b;
        font-size: 12px;
    }

    .stat-card strong[b-lg26u75ch3] {
        font-size: 22px;
    }

.stat-total[b-lg26u75ch3] {
    border-top: 3px solid #334155;
}

.stat-empty[b-lg26u75ch3] {
    border-top: 3px solid #94a3b8;
}

.stat-used[b-lg26u75ch3] {
    border-top: 3px solid #2563eb;
}

.stat-without-invoice[b-lg26u75ch3] {
    border-top: 3px solid #f97316;
}

.stat-pending[b-lg26u75ch3] {
    border-top: 3px solid #eab308;
}

.stat-approved[b-lg26u75ch3] {
    border-top: 3px solid #16a34a;
}

.stat-rejected[b-lg26u75ch3] {
    border-top: 3px solid #dc2626;
}

.pages-section[b-lg26u75ch3] {
    margin-top: 24px;
}

.pages-header[b-lg26u75ch3] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

    .pages-header h2[b-lg26u75ch3] {
        margin: 0 0 5px;
        font-size: 22px;
    }

    .pages-header p[b-lg26u75ch3] {
        margin: 0;
        color: #64748b;
    }

.pages-filters[b-lg26u75ch3] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 180px;
    gap: 12px;
}

.form-control[b-lg26u75ch3] {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: white;
    color: #0f172a;
}

    .form-control:focus[b-lg26u75ch3] {
        border-color: #2563eb;
        outline: none;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .form-control:disabled[b-lg26u75ch3] {
        background: #f8fafc;
        color: #64748b;
    }

.pages-table-card[b-lg26u75ch3] {
    overflow: hidden;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.05);
}

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

table[b-lg26u75ch3] {
    width: 100%;
    min-width: 1050px;
    border-collapse: collapse;
}

th[b-lg26u75ch3],
td[b-lg26u75ch3] {
    padding: 13px 12px;
    text-align: right;
    border-bottom: 1px solid #edf2f7;
    white-space: nowrap;
    vertical-align: middle;
}

th[b-lg26u75ch3] {
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
}

    th:last-child[b-lg26u75ch3],
    td:last-child[b-lg26u75ch3] {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #fff;
        box-shadow: 4px 0 8px rgba(15, 23, 42, 0.06);
    }

    th:last-child[b-lg26u75ch3] {
        z-index: 3;
        background: #f8fafc;
    }

tbody tr:hover td:last-child[b-lg26u75ch3] {
    background: #f8fafc;
}

tbody tr:hover[b-lg26u75ch3] {
    background: #f8fafc;
}

tbody tr:last-child td[b-lg26u75ch3] {
    border-bottom: 0;
}

.text-cell[b-lg26u75ch3] {
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-badge[b-lg26u75ch3] {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.status-empty[b-lg26u75ch3] {
    background: #f1f5f9;
    color: #475569;
}

.status-used[b-lg26u75ch3] {
    background: #eff6ff;
    color: #1d4ed8;
}

.status-pending[b-lg26u75ch3] {
    background: #fef9c3;
    color: #854d0e;
}

.status-approved[b-lg26u75ch3] {
    background: #ecfdf5;
    color: #047857;
}

.status-rejected[b-lg26u75ch3] {
    background: #fef2f2;
    color: #b91c1c;
}

.status-without-invoice[b-lg26u75ch3] {
    background: #fff7ed;
    color: #c2410c;
}

.status-default[b-lg26u75ch3] {
    background: #f3f4f6;
    color: #374151;
}

.image-link[b-lg26u75ch3] {
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
}

    .image-link:hover[b-lg26u75ch3] {
        text-decoration: underline;
    }

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

.row-actions[b-lg26u75ch3] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.page-action-button[b-lg26u75ch3] {
    padding: 6px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

    .page-action-button:hover[b-lg26u75ch3] {
        background: #f1f5f9;
    }

    .page-action-button:disabled[b-lg26u75ch3] {
        cursor: not-allowed;
        opacity: 0.6;
    }

.edit-button[b-lg26u75ch3] {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.approve-button[b-lg26u75ch3] {
    border-color: #86efac;
    background: #f0fdf4;
    color: #166534;
}

.reject-button[b-lg26u75ch3] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.book-actions-card[b-lg26u75ch3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
    padding: 18px;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    background: #eff6ff;
}

    .book-actions-card h3[b-lg26u75ch3] {
        margin: 0 0 6px;
        font-size: 18px;
    }

    .book-actions-card p[b-lg26u75ch3] {
        margin: 0;
        color: #475569;
    }

.complete-card[b-lg26u75ch3] {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.submit-book-button[b-lg26u75ch3],
.complete-book-button[b-lg26u75ch3] {
    min-width: 180px;
    min-height: 43px;
    padding: 9px 16px;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 800;
}

.submit-book-button[b-lg26u75ch3] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #fff;
}

.complete-book-button[b-lg26u75ch3] {
    border: 1px solid #15803d;
    background: #15803d;
    color: #fff;
}

    .submit-book-button:disabled[b-lg26u75ch3],
    .complete-book-button:disabled[b-lg26u75ch3] {
        cursor: not-allowed;
        opacity: 0.6;
    }

.modal-overlay[b-lg26u75ch3] {
    position: fixed;
    z-index: 2000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.58);
}

.page-modal[b-lg26u75ch3] {
    width: min(540px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 24px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.3);
}

.reject-modal[b-lg26u75ch3] {
    width: min(480px, 100%);
}

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

    .modal-header h3[b-lg26u75ch3] {
        margin: 0 0 6px;
        font-size: 22px;
    }

    .modal-header p[b-lg26u75ch3] {
        margin: 0;
        color: #64748b;
    }

.modal-close-button[b-lg26u75ch3] {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
}

    .modal-close-button:hover[b-lg26u75ch3] {
        background: #e2e8f0;
    }

.form-group[b-lg26u75ch3] {
    margin-bottom: 17px;
}

    .form-group label[b-lg26u75ch3] {
        display: block;
        margin-bottom: 7px;
        font-weight: 700;
    }

.notes-textarea[b-lg26u75ch3] {
    min-height: 110px;
    resize: vertical;
}

.checkbox-row[b-lg26u75ch3] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    cursor: pointer;
}

    .checkbox-row input[b-lg26u75ch3] {
        width: 17px;
        height: 17px;
    }

.file-input[b-lg26u75ch3] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 11px;
    border: 1px dashed #94a3b8;
    border-radius: 9px;
    background: #f8fafc;
}

.current-image-box[b-lg26u75ch3] {
    margin-bottom: 10px;
}

    .current-image-box a[b-lg26u75ch3] {
        color: #2563eb;
        font-weight: 700;
    }

.selected-file[b-lg26u75ch3] {
    margin-top: 9px;
    padding: 9px 11px;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e40af;
    font-size: 13px;
}

.form-hint[b-lg26u75ch3] {
    display: block;
    margin-top: 8px;
    color: #64748b;
}

.modal-message[b-lg26u75ch3] {
    margin-bottom: 16px;
    padding: 11px 13px;
    border-radius: 9px;
    font-weight: 700;
}

.modal-error[b-lg26u75ch3] {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.modal-success[b-lg26u75ch3] {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.modal-actions[b-lg26u75ch3] {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.save-button[b-lg26u75ch3],
.cancel-button[b-lg26u75ch3],
.reject-confirm-button[b-lg26u75ch3] {
    min-height: 42px;
    padding: 9px 18px;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 800;
}

.save-button[b-lg26u75ch3] {
    border: 1px solid #0f766e;
    background: #0f766e;
    color: #fff;
}

.reject-confirm-button[b-lg26u75ch3] {
    border: 1px solid #dc2626;
    background: #dc2626;
    color: #fff;
}

.cancel-button[b-lg26u75ch3] {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
}

    .save-button:disabled[b-lg26u75ch3],
    .cancel-button:disabled[b-lg26u75ch3],
    .reject-confirm-button:disabled[b-lg26u75ch3] {
        cursor: not-allowed;
        opacity: 0.6;
    }

@media (max-width: 1200px) {
    .statistics-grid[b-lg26u75ch3] {
        grid-template-columns: repeat(4, minmax(120px, 1fr));
    }
}

@media (max-width: 900px) {
    .book-details-page[b-lg26u75ch3] {
        padding: 16px;
    }

    .details-header[b-lg26u75ch3] {
        align-items: stretch;
        flex-direction: column;
    }

    .btn-back[b-lg26u75ch3] {
        width: fit-content;
    }

    .book-summary-card[b-lg26u75ch3] {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .statistics-grid[b-lg26u75ch3] {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    .pages-header[b-lg26u75ch3] {
        align-items: stretch;
        flex-direction: column;
    }

    .pages-filters[b-lg26u75ch3] {
        grid-template-columns: 1fr;
    }

    .book-actions-card[b-lg26u75ch3] {
        align-items: stretch;
        flex-direction: column;
    }

    .submit-book-button[b-lg26u75ch3],
    .complete-book-button[b-lg26u75ch3] {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .book-summary-card[b-lg26u75ch3],
    .statistics-grid[b-lg26u75ch3] {
        grid-template-columns: 1fr;
    }

    .modal-actions[b-lg26u75ch3] {
        flex-direction: column;
    }

    .save-button[b-lg26u75ch3],
    .cancel-button[b-lg26u75ch3],
    .reject-confirm-button[b-lg26u75ch3] {
        width: 100%;
    }
}

.action-warning[b-lg26u75ch3] {
    display: block;
    margin-top: 7px;
    color: #b45309;
    font-weight: 700;
}

/* زر رفع صورة السند */
.upload-image-button[b-lg26u75ch3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 11px 16px;
    margin-top: 10px;
    border: 1px solid #5fa9a7;
    border-radius: 8px;
    background: #eef8f7;
    color: #287b79;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

    .upload-image-button:hover[b-lg26u75ch3] {
        background: #e1f3f2;
        border-color: #3e9290;
    }

.upload-image-input[b-lg26u75ch3] {
    display: none;
}

.selected-file[b-lg26u75ch3] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 9px;
    padding: 9px 12px;
    border-radius: 7px;
    background: #f4f7fa;
    font-size: .86rem;
}

.current-image-box[b-lg26u75ch3] {
    margin-top: 7px;
}


.damaged-book-alert[b-lg26u75ch3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 17px 19px;
    border: 1px solid #fecaca;
    border-right: 5px solid #dc2626;
    border-radius: 12px;
    background: #fef2f2;
    color: #991b1b;
}

    .damaged-book-alert strong[b-lg26u75ch3] {
        display: block;
        margin-bottom: 5px;
        font-size: 17px;
    }

    .damaged-book-alert p[b-lg26u75ch3] {
        margin: 0;
        line-height: 1.7;
    }

.damaged-book-badge[b-lg26u75ch3] {
    flex: 0 0 auto;
    padding: 7px 13px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-weight: 800;
}

.damage-summary-item[b-lg26u75ch3] {
    background: #fff7f7;
}

.damage-reason-summary[b-lg26u75ch3] {
    grid-column: span 3;
    background: #fff7f7;
}

    .damage-reason-summary strong[b-lg26u75ch3] {
        white-space: normal;
        line-height: 1.7;
        color: #991b1b;
    }

.stat-damaged-unused[b-lg26u75ch3] {
    border-top: 3px solid #dc2626;
}

.read-only-label[b-lg26u75ch3] {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 7px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .damage-reason-summary[b-lg26u75ch3] {
        grid-column: span 2;
    }
}

@media (max-width: 520px) {
    .damaged-book-alert[b-lg26u75ch3] {
        align-items: flex-start;
        flex-direction: column;
    }

    .damage-reason-summary[b-lg26u75ch3] {
        grid-column: span 1;
    }
}
/* /Components/Pages/Books.razor.rz.scp.css */
/* CSS for Books component */
.books-page[b-ct1l1fisie] {
    padding: 24px;
    font-family: Arial, sans-serif;
}

.page-header[b-ct1l1fisie] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

    .page-header h1[b-ct1l1fisie] {
        margin: 0 0 6px;
        font-size: 28px;
    }

    .page-header p[b-ct1l1fisie] {
        margin: 0;
        color: #6b7280;
    }

.filters-card[b-ct1l1fisie],
.table-card[b-ct1l1fisie],
.loading-card[b-ct1l1fisie],
.empty-card[b-ct1l1fisie] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.05);
}

.filters-card[b-ct1l1fisie] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 14px;
    align-items: end;
    padding: 18px;
    margin-bottom: 18px;
}

.form-group[b-ct1l1fisie] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .form-group label[b-ct1l1fisie] {
        font-weight: 700;
        color: #374151;
    }

.form-control[b-ct1l1fisie] {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    background: white;
    font-size: 14px;
}

    .form-control:focus[b-ct1l1fisie] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

.btn[b-ct1l1fisie] {
    border: 0;
    border-radius: 9px;
    padding: 10px 16px;
    cursor: pointer;
    font-weight: 700;
}

    .btn:disabled[b-ct1l1fisie] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.btn-primary[b-ct1l1fisie] {
    background: #2563eb;
    color: white;
}

.btn-secondary[b-ct1l1fisie] {
    background: #e5e7eb;
    color: #111827;
}

.btn-warning[b-ct1l1fisie] {
    background: #f59e0b;
    color: white;
}

.btn-outline[b-ct1l1fisie] {
    background: white;
    color: #1f2937;
    border: 1px solid #d1d5db;
}

.btn-small[b-ct1l1fisie] {
    padding: 7px 11px;
    font-size: 13px;
}

.refresh-button[b-ct1l1fisie] {
    height: 42px;
}

.alert[b-ct1l1fisie] {
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 9px;
}

.alert-success[b-ct1l1fisie] {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.alert-danger[b-ct1l1fisie] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-warning[b-ct1l1fisie] {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.loading-card[b-ct1l1fisie],
.empty-card[b-ct1l1fisie] {
    padding: 40px;
    text-align: center;
    color: #6b7280;
}

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

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

table[b-ct1l1fisie] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1000px;
}

th[b-ct1l1fisie],
td[b-ct1l1fisie] {
    padding: 14px 12px;
    text-align: right;
    border-bottom: 1px solid #eef2f7;
    white-space: nowrap;
}

th[b-ct1l1fisie] {
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
}

tbody tr:hover[b-ct1l1fisie] {
    background: #f8fafc;
}

.book-number[b-ct1l1fisie] {
    font-weight: 800;
}

.actions[b-ct1l1fisie] {
    display: flex;
    gap: 8px;
}

.status-badge[b-ct1l1fisie] {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.status-available[b-ct1l1fisie] {
    background: #ecfdf5;
    color: #047857;
}

.status-assigned[b-ct1l1fisie] {
    background: #eff6ff;
    color: #1d4ed8;
}

.status-submitted[b-ct1l1fisie] {
    background: #fff7ed;
    color: #c2410c;
}

.status-completed[b-ct1l1fisie] {
    background: #f0fdf4;
    color: #166534;
}

.status-archived[b-ct1l1fisie] {
    background: #f3f4f6;
    color: #4b5563;
}

.status-rejected[b-ct1l1fisie] {
    background: #fef2f2;
    color: #b91c1c;
}

.status-default[b-ct1l1fisie] {
    background: #f3f4f6;
    color: #374151;
}

.progress-wrapper[b-ct1l1fisie] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.progress-bar[b-ct1l1fisie] {
    width: 100px;
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.progress-value[b-ct1l1fisie] {
    height: 100%;
    background: #2563eb;
}

.pagination[b-ct1l1fisie] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px;
}

.modal-backdrop[b-ct1l1fisie] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
}

.modal-card[b-ct1l1fisie] {
    width: min(560px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    border-radius: 16px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.25);
}

.modal-header[b-ct1l1fisie],
.modal-footer[b-ct1l1fisie] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
}

.modal-header[b-ct1l1fisie] {
    border-bottom: 1px solid #e5e7eb;
}

    .modal-header h2[b-ct1l1fisie] {
        margin: 0;
        font-size: 21px;
    }

.modal-body[b-ct1l1fisie] {
    display: flex;
    flex-direction: column;
    gap: 17px;
    padding: 20px;
}

.modal-footer[b-ct1l1fisie] {
    justify-content: flex-start;
    gap: 10px;
    border-top: 1px solid #e5e7eb;
}

.close-button[b-ct1l1fisie] {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 28px;
    color: #6b7280;
}

.summary-box[b-ct1l1fisie] {
    display: grid;
    gap: 8px;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.validation-message[b-ct1l1fisie] {
    color: #b91c1c;
    font-size: 13px;
}

@media (max-width: 900px) {
    .books-page[b-ct1l1fisie] {
        padding: 14px;
    }

    .page-header[b-ct1l1fisie] {
        align-items: stretch;
        flex-direction: column;
    }

    .filters-card[b-ct1l1fisie] {
        grid-template-columns: 1fr;
    }

    .refresh-button[b-ct1l1fisie] {
        width: 100%;
    }
}

.book-link[b-ct1l1fisie] {
    color: #2563eb;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
}

    .book-link:hover[b-ct1l1fisie] {
        color: #1d4ed8;
        text-decoration: underline;
    }

.btn-danger[b-ct1l1fisie] {
    background: #dc2626;
    color: white;
}

    .btn-danger:hover:not(:disabled)[b-ct1l1fisie] {
        background: #b91c1c;
    }

.damage-badge[b-ct1l1fisie] {
    display: inline-flex;
    align-items: center;
    margin-inline-start: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    font-size: 12px;
    font-weight: 800;
}

.damage-modal[b-ct1l1fisie] {
    border-top: 5px solid #dc2626;
}

.damage-reason[b-ct1l1fisie] {
    min-height: 120px;
    resize: vertical;
}


.book-number-preview[b-ct1l1fisie] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 13px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
}

    .book-number-preview div[b-ct1l1fisie] {
        min-width: 0;
    }

    .book-number-preview span[b-ct1l1fisie] {
        display: block;
        margin-bottom: 5px;
        color: #64748b;
        font-size: 12px;
    }

    .book-number-preview strong[b-ct1l1fisie] {
        color: #1e3a8a;
        font-size: 16px;
    }

@media (max-width: 520px) {
    .book-number-preview[b-ct1l1fisie] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Branches.razor.rz.scp.css */
.branches-page[b-8a0u5jdov8] {
    max-width: 1500px;
    margin: 0 auto;
}

.page-header[b-8a0u5jdov8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

    .page-header h1[b-8a0u5jdov8] {
        margin: 0;
        color: #102a43;
        font-size: 25px;
    }

    .page-header p[b-8a0u5jdov8] {
        margin: 7px 0 0;
        color: #667085;
    }

.primary-button[b-8a0u5jdov8],
.secondary-button[b-8a0u5jdov8],
.danger-button[b-8a0u5jdov8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 700;
}

.primary-button[b-8a0u5jdov8] {
    border: 1px solid #174d7c;
    background: #174d7c;
    color: #fff;
}

    .primary-button:hover[b-8a0u5jdov8] {
        background: #103b62;
    }

.secondary-button[b-8a0u5jdov8] {
    border: 1px solid #d0d7e2;
    background: #fff;
    color: #344054;
}

.danger-button[b-8a0u5jdov8] {
    border: 1px solid #b42318;
    background: #b42318;
    color: #fff;
}

button:disabled[b-8a0u5jdov8] {
    cursor: not-allowed;
    opacity: 0.65;
}

.filters-card[b-8a0u5jdov8] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid #e1e7ee;
    border-radius: 12px;
    background: #fff;
}

.search-box[b-8a0u5jdov8] {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 8px;
    min-height: 43px;
    padding: 0 13px;
    border: 1px solid #d8dee8;
    border-radius: 9px;
}

    .search-box input[b-8a0u5jdov8] {
        width: 100%;
        border: 0;
        outline: 0;
        background: transparent;
    }

.filters-card select[b-8a0u5jdov8] {
    min-width: 175px;
    min-height: 43px;
    padding: 0 12px;
    border: 1px solid #d8dee8;
    border-radius: 9px;
    background: #fff;
}

.result-count[b-8a0u5jdov8] {
    color: #667085;
    font-size: 13px;
}

.table-card[b-8a0u5jdov8] {
    min-height: 350px;
    overflow: hidden;
    border: 1px solid #e1e7ee;
    border-radius: 13px;
    background: #fff;
}

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

table[b-8a0u5jdov8] {
    width: 100%;
    border-collapse: collapse;
}

th[b-8a0u5jdov8] {
    padding: 15px 18px;
    background: #f7f9fc;
    color: #475467;
    text-align: right;
    font-size: 13px;
}

td[b-8a0u5jdov8] {
    padding: 15px 18px;
    border-top: 1px solid #edf0f4;
    color: #344054;
    font-size: 14px;
}

tbody tr:hover[b-8a0u5jdov8] {
    background: #fafcff;
}

.branch-code[b-8a0u5jdov8] {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 6px;
    background: #eef4fa;
    color: #174d7c;
    font-family: Consolas, monospace;
    font-weight: 700;
}

.status-badge[b-8a0u5jdov8] {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

    .status-badge.active[b-8a0u5jdov8] {
        background: #dcfce7;
        color: #166534;
    }

    .status-badge.inactive[b-8a0u5jdov8] {
        background: #f2f4f7;
        color: #667085;
    }

.actions[b-8a0u5jdov8] {
    display: flex;
    gap: 7px;
}

.icon-button[b-8a0u5jdov8] {
    width: 35px;
    height: 35px;
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
}

    .icon-button.edit[b-8a0u5jdov8] {
        border: 1px solid #b9cde0;
        color: #174d7c;
    }

    .icon-button.delete[b-8a0u5jdov8] {
        border: 1px solid #fecaca;
        color: #b42318;
    }

.loading-state[b-8a0u5jdov8],
.empty-state[b-8a0u5jdov8] {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 350px;
    text-align: center;
}

.spinner[b-8a0u5jdov8] {
    width: 38px;
    height: 38px;
    border: 4px solid #dbe5ef;
    border-top-color: #174d7c;
    border-radius: 50%;
    animation: spin-b-8a0u5jdov8 0.8s linear infinite;
}

@keyframes spin-b-8a0u5jdov8 {
    to {
        transform: rotate(360deg);
    }
}

.empty-icon[b-8a0u5jdov8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: #edf3f8;
    color: #174d7c;
    font-size: 29px;
}

.alert[b-8a0u5jdov8] {
    margin-bottom: 16px;
    padding: 13px 16px;
    border-radius: 9px;
    font-size: 14px;
}

.success-alert[b-8a0u5jdov8] {
    border: 1px solid #a7f3d0;
    background: #ecfdf3;
    color: #166534;
}

.error-alert[b-8a0u5jdov8] {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b42318;
}

.modal-backdrop[b-8a0u5jdov8] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.58);
}

.modal-card[b-8a0u5jdov8] {
    width: min(520px, 100%);
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 25px 70px rgba(15, 23, 42, 0.25);
}

.modal-header[b-8a0u5jdov8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 21px 23px;
    border-bottom: 1px solid #e8ecf1;
}

    .modal-header h2[b-8a0u5jdov8] {
        margin: 0;
        color: #1d2939;
        font-size: 20px;
    }

    .modal-header p[b-8a0u5jdov8] {
        margin: 5px 0 0;
        color: #667085;
        font-size: 13px;
    }

.close-button[b-8a0u5jdov8] {
    width: 35px;
    height: 35px;
    border: 0;
    border-radius: 7px;
    background: #f2f4f7;
    color: #475467;
    cursor: pointer;
    font-size: 22px;
}

.modal-body[b-8a0u5jdov8] {
    padding: 22px 23px;
}

.form-group[b-8a0u5jdov8] {
    margin-bottom: 18px;
}

    .form-group label[b-8a0u5jdov8] {
        display: block;
        margin-bottom: 7px;
        color: #344054;
        font-size: 14px;
        font-weight: 700;
    }

    .form-group input[b-8a0u5jdov8] {
        box-sizing: border-box;
        width: 100%;
        min-height: 43px;
        padding: 0 12px;
        border: 1px solid #d0d7e2;
        border-radius: 8px;
        outline: none;
    }

        .form-group input:focus[b-8a0u5jdov8] {
            border-color: #174d7c;
            box-shadow: 0 0 0 3px rgba(23, 77, 124, 0.1);
        }

.validation-message[b-8a0u5jdov8] {
    display: block;
    margin-top: 5px;
    color: #b42318;
    font-size: 12px;
}

.checkbox-group[b-8a0u5jdov8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-footer[b-8a0u5jdov8] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 17px 23px;
    border-top: 1px solid #e8ecf1;
    background: #fafbfc;
}

.confirm-modal[b-8a0u5jdov8] {
    padding-top: 28px;
    text-align: center;
}

    .confirm-modal h2[b-8a0u5jdov8] {
        margin: 12px 0 8px;
    }

    .confirm-modal p[b-8a0u5jdov8] {
        padding: 0 25px;
        color: #667085;
    }

.confirm-icon[b-8a0u5jdov8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto;
    border-radius: 50%;
    background: #fee2e2;
    color: #b42318;
    font-size: 28px;
    font-weight: 800;
}

@media (max-width: 750px) {
    .page-header[b-8a0u5jdov8] {
        align-items: stretch;
        flex-direction: column;
        gap: 15px;
    }

    .filters-card[b-8a0u5jdov8] {
        align-items: stretch;
        flex-direction: column;
    }

        .filters-card select[b-8a0u5jdov8] {
            width: 100%;
        }
}
/* /Components/Pages/ChangePassword.razor.rz.scp.css */
.security-page[b-24yet5yoze]{min-height:70vh;display:grid;place-items:center;padding:2rem}.security-card[b-24yet5yoze]{width:min(100%,620px);background:#fff;border:1px solid #d8e5e6;border-radius:20px;padding:2rem;box-shadow:0 18px 50px rgba(10,93,99,.1)}.security-card header[b-24yet5yoze]{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.5rem}.security-icon[b-24yet5yoze]{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#e9f7f5;font-size:1.4rem}.security-card h1[b-24yet5yoze]{margin:0;color:#073e46}.security-card p[b-24yet5yoze]{color:#647b80;margin:.35rem 0}.security-card form[b-24yet5yoze]{display:grid;gap:.65rem}.security-card label[b-24yet5yoze]{font-weight:700;color:#234e54;margin-top:.45rem}.security-input[b-24yet5yoze]{width:100%;border:1px solid #bfd5d8;border-radius:12px;padding:.85rem 1rem;outline:0}.security-input:focus[b-24yet5yoze]{border-color:#087d85;box-shadow:0 0 0 3px rgba(8,125,133,.12)}.security-primary[b-24yet5yoze]{margin-top:1rem;border:0;border-radius:12px;padding:.9rem 1.2rem;background:#087d85;color:#fff;font-weight:800}.security-error[b-24yet5yoze]{background:#fff0f0;color:#a82323;padding:.8rem;border-radius:10px}
/* /Components/Pages/Home.razor.rz.scp.css */
.pro-dashboard[b-56nbi6fcrf] {
    --teal: #087b83;
    --teal-dark: #075b63;
    --gold: #d9ad59;
    --ink: #163238;
    --muted: #6c8185;
    --line: #dce8e8;
    --surface: #ffffff;
    min-height: 100%;
    padding: 28px;
    background:
        radial-gradient(circle at 95% 0%, rgba(8, 123, 131, .07), transparent 28%),
        radial-gradient(circle at 5% 10%, rgba(217, 173, 89, .08), transparent 25%),
        #f4f8f8;
    color: var(--ink);
}

button[b-56nbi6fcrf] {
    font-family: inherit;
}

.dashboard-hero[b-56nbi6fcrf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.eyebrow[b-56nbi6fcrf],
.card-eyebrow[b-56nbi6fcrf] {
    display: block;
    margin-bottom: 6px;
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.dashboard-hero h1[b-56nbi6fcrf] {
    margin: 0;
    font-size: clamp(25px, 2.2vw, 36px);
    font-weight: 900;
    letter-spacing: -.4px;
}

.dashboard-hero p[b-56nbi6fcrf] {
    margin: 7px 0 0;
    color: var(--muted);
}

.dashboard-hero p strong[b-56nbi6fcrf] {
    color: var(--ink);
}

.hero-actions[b-56nbi6fcrf] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.updated-at[b-56nbi6fcrf] {
    display: flex;
    flex-direction: column;
    min-width: 75px;
    color: var(--muted);
    font-size: 11px;
}

.updated-at b[b-56nbi6fcrf] {
    color: var(--ink);
    font-size: 14px;
}

.refresh-button[b-56nbi6fcrf],
.reports-button[b-56nbi6fcrf] {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 11px;
    font-weight: 800;
    cursor: pointer;
}

.refresh-button[b-56nbi6fcrf] {
    border: 0;
    background: linear-gradient(135deg, var(--teal), var(--teal-dark));
    color: white;
    box-shadow: 0 8px 20px rgba(8, 123, 131, .18);
}

.refresh-button span[b-56nbi6fcrf] {
    margin-left: 5px;
    font-size: 18px;
}

.refresh-button:disabled[b-56nbi6fcrf] {
    cursor: wait;
    opacity: .65;
}

.reports-button[b-56nbi6fcrf] {
    border: 1px solid rgba(217, 173, 89, .65);
    background: #fffaf0;
    color: #8a6420;
}

.dashboard-alert[b-56nbi6fcrf] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 17px;
    margin-bottom: 18px;
    border: 1px solid #efb8b8;
    border-radius: 13px;
    background: #fff1f1;
    color: #a63838;
}

.dashboard-loading[b-56nbi6fcrf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 320px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: white;
    color: var(--muted);
}

.dashboard-loading span[b-56nbi6fcrf] {
    width: 22px;
    height: 22px;
    border: 3px solid #d8e8e8;
    border-top-color: var(--teal);
    border-radius: 50%;
    animation: spin-b-56nbi6fcrf .75s linear infinite;
}

@keyframes spin-b-56nbi6fcrf {
    to { transform: rotate(360deg); }
}

.primary-kpis[b-56nbi6fcrf] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.primary-kpi[b-56nbi6fcrf] {
    position: relative;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    min-height: 128px;
    padding: 19px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    color: var(--ink);
    text-align: right;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.primary-kpi[b-56nbi6fcrf]::before {
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: currentColor;
    content: "";
}

.primary-kpi:hover[b-56nbi6fcrf] {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(23, 66, 71, .09);
}

.primary-kpi.teal[b-56nbi6fcrf] { color: #087b83; }
.primary-kpi.blue[b-56nbi6fcrf] { color: #2f73c8; }
.primary-kpi.green[b-56nbi6fcrf] { color: #16865e; }
.primary-kpi.red[b-56nbi6fcrf] { color: #c94c53; }

.kpi-icon[b-56nbi6fcrf] {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: color-mix(in srgb, currentColor 11%, white);
    font-size: 23px;
    font-weight: 900;
}

.primary-kpi small[b-56nbi6fcrf],
.primary-kpi p[b-56nbi6fcrf] {
    color: var(--muted);
}

.primary-kpi small[b-56nbi6fcrf] {
    font-weight: 800;
}

.primary-kpi strong[b-56nbi6fcrf] {
    display: block;
    margin: 4px 0 2px;
    color: var(--ink);
    font-size: 31px;
    line-height: 1;
}

.primary-kpi p[b-56nbi6fcrf] {
    margin: 5px 0 0;
    font-size: 11px;
}

.primary-kpi > i[b-56nbi6fcrf] {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 4px 7px;
    border-radius: 99px;
    background: color-mix(in srgb, currentColor 9%, white);
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
}

.secondary-kpis[b-56nbi6fcrf] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.secondary-kpis article[b-56nbi6fcrf],
.review-kpi[b-56nbi6fcrf] {
    min-height: 116px;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: white;
}

.secondary-kpis article > span[b-56nbi6fcrf],
.review-kpi > span[b-56nbi6fcrf] {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.secondary-kpis article > strong[b-56nbi6fcrf],
.review-kpi > strong[b-56nbi6fcrf] {
    display: block;
    margin: 7px 0;
    color: var(--ink);
    font-size: 22px;
}

.secondary-kpis small[b-56nbi6fcrf],
.review-kpi small[b-56nbi6fcrf] {
    color: #7a9094;
    font-size: 10px;
}

.kpi-meter[b-56nbi6fcrf] {
    height: 6px;
    margin: 9px 0 7px;
    overflow: hidden;
    border-radius: 99px;
    background: #e6eeee;
}

.kpi-meter i[b-56nbi6fcrf] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gold), var(--teal));
}

.target-line[b-56nbi6fcrf] {
    width: max-content;
    max-width: 100%;
    padding: 4px 8px;
    margin: 8px 0 5px;
    border-radius: 99px;
    background: #e8f7f2;
    color: #167658;
    font-size: 10px;
    font-weight: 800;
}

.target-line.neutral[b-56nbi6fcrf] {
    background: #edf3f7;
    color: #496877;
}

.target-line.warning[b-56nbi6fcrf] {
    background: #fff3d8;
    color: #946300;
}

.review-kpi[b-56nbi6fcrf] {
    text-align: right;
    cursor: pointer;
}

.review-kpi:hover[b-56nbi6fcrf] {
    border-color: #e8c36d;
}

.dashboard-grid[b-56nbi6fcrf] {
    display: grid;
    gap: 14px;
    margin-bottom: 14px;
}

.dashboard-sections[b-56nbi6fcrf] {
    display: flex;
    flex-direction: column;
}

.dashboard-sections > .primary-kpis[b-56nbi6fcrf] {
    order: 1;
}

.dashboard-sections > .secondary-kpis[b-56nbi6fcrf] {
    order: 2;
}

.dashboard-sections > .bottom-grid[b-56nbi6fcrf] {
    order: 3;
}

.dashboard-sections > .top-grid[b-56nbi6fcrf] {
    order: 4;
}

.dashboard-sections > .middle-grid[b-56nbi6fcrf] {
    order: 5;
}

.top-grid[b-56nbi6fcrf] {
    grid-template-columns: minmax(0, 1.8fr) minmax(300px, .8fr);
}

.middle-grid[b-56nbi6fcrf] {
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(250px, .8fr));
}

.bottom-grid[b-56nbi6fcrf] {
    grid-template-columns: minmax(0, 1.65fr) minmax(310px, .75fr);
}

.dashboard-card[b-56nbi6fcrf] {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: white;
    box-shadow: 0 7px 22px rgba(35, 71, 74, .035);
}

.card-heading[b-56nbi6fcrf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
}

.card-heading h2[b-56nbi6fcrf] {
    margin: 0;
    font-size: 17px;
    font-weight: 900;
}

.card-heading p[b-56nbi6fcrf] {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.chart-legend[b-56nbi6fcrf] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chart-legend span[b-56nbi6fcrf] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

.chart-legend span[b-56nbi6fcrf]::before {
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: currentColor;
    content: "";
}

.chart-legend .submitted[b-56nbi6fcrf] { color: #2b9fa8; }
.chart-legend .approved[b-56nbi6fcrf] { color: #22a06b; }
.chart-legend .rejected[b-56nbi6fcrf] { color: #d55359; }

.bar-chart[b-56nbi6fcrf] {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 9px;
    height: 230px;
    padding: 15px 6px 2px;
    border-bottom: 1px solid #dfe9e9;
    background:
        repeating-linear-gradient(
            to top,
            transparent 0,
            transparent 49px,
            #edf3f3 50px);
}

.bar-column[b-56nbi6fcrf] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-width: 24px;
}

.bar-values[b-56nbi6fcrf] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    height: calc(100% - 25px);
}

.bar-values i[b-56nbi6fcrf] {
    width: min(7px, 28%);
    min-height: 0;
    border-radius: 4px 4px 1px 1px;
    transition: height .3s ease;
}

.bar-values i.submitted[b-56nbi6fcrf] { background: #2b9fa8; }
.bar-values i.approved[b-56nbi6fcrf] { background: #22a06b; }
.bar-values i.rejected[b-56nbi6fcrf] { background: #d55359; }

.bar-column small[b-56nbi6fcrf],
.month-column small[b-56nbi6fcrf] {
    margin-top: 8px;
    color: #829497;
    text-align: center;
    font-size: 9px;
    white-space: nowrap;
}

.empty-chart[b-56nbi6fcrf],
.mini-empty[b-56nbi6fcrf] {
    display: grid;
    place-items: center;
    color: #819397;
    text-align: center;
}

.empty-chart[b-56nbi6fcrf] {
    min-height: 220px;
}

.status-list[b-56nbi6fcrf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.status-list button[b-56nbi6fcrf] {
    display: grid;
    grid-template-columns: 11px minmax(90px, .8fr) minmax(90px, 1fr) 28px;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #edf2f2;
    border-radius: 11px;
    background: #fbfdfd;
    color: var(--ink);
    text-align: right;
    cursor: pointer;
}

.status-list button:hover[b-56nbi6fcrf] {
    border-color: #bcd5d6;
    background: white;
}

.status-dot[b-56nbi6fcrf] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.status-list button div strong[b-56nbi6fcrf],
.status-list button div small[b-56nbi6fcrf] {
    display: block;
}

.status-list button div strong[b-56nbi6fcrf] {
    font-size: 11px;
}

.status-list button div small[b-56nbi6fcrf] {
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px;
}

.status-list button > b[b-56nbi6fcrf] {
    font-size: 13px;
}

.status-progress[b-56nbi6fcrf] {
    height: 5px;
    overflow: hidden;
    border-radius: 99px;
    background: #e8efef;
}

.status-progress i[b-56nbi6fcrf] {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.available[b-56nbi6fcrf] { background: #24a86c; }
.assigned[b-56nbi6fcrf] { background: #3980d5; }
.progress[b-56nbi6fcrf] { background: #087b83; }
.submitted[b-56nbi6fcrf] { background: #e3a52a; }
.completed[b-56nbi6fcrf] { background: #7759c8; }
.archived[b-56nbi6fcrf] { background: #76888c; }
.damaged[b-56nbi6fcrf], .rejected[b-56nbi6fcrf] { background: #d55359; }
.default[b-56nbi6fcrf] { background: #8c9da0; }

.chart-total[b-56nbi6fcrf] {
    padding: 6px 10px;
    border-radius: 10px;
    background: #edf7f7;
    color: var(--teal);
    font-size: 12px;
}

.monthly-chart[b-56nbi6fcrf] {
    gap: 8px;
}

.month-column[b-56nbi6fcrf] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-width: 20px;
}

.month-column > strong[b-56nbi6fcrf] {
    margin-bottom: 5px;
    color: #5e7478;
    text-align: center;
    font-size: 9px;
}

.month-column > i[b-56nbi6fcrf] {
    display: block;
    width: min(24px, 75%);
    min-height: 0;
    margin: 0 auto;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, #22a3ab, #087b83);
}

.text-link[b-56nbi6fcrf] {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--teal);
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.ranking-list[b-56nbi6fcrf] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ranking-row[b-56nbi6fcrf] {
    display: grid;
    grid-template-columns: 26px minmax(100px, .9fr) minmax(65px, 1fr) 26px;
    align-items: center;
    gap: 8px;
}

.rank-number[b-56nbi6fcrf] {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 8px;
    background: #fff3d9;
    color: #946600;
    font-size: 10px;
    font-weight: 900;
}

.rank-person strong[b-56nbi6fcrf],
.rank-person small[b-56nbi6fcrf] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-person strong[b-56nbi6fcrf] {
    font-size: 11px;
}

.rank-person small[b-56nbi6fcrf] {
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px;
}

.rank-progress[b-56nbi6fcrf] {
    height: 5px;
    overflow: hidden;
    border-radius: 99px;
    background: #e8efef;
}

.rank-progress i[b-56nbi6fcrf] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gold), var(--teal));
}

.branches-card .rank-progress i[b-56nbi6fcrf] {
    background: linear-gradient(90deg, #6aa4d7, var(--teal));
}

.ranking-row > b[b-56nbi6fcrf] {
    font-size: 11px;
    text-align: left;
}

.recent-books[b-56nbi6fcrf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.recent-book[b-56nbi6fcrf] {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(130px, .8fr) auto;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px;
    border: 1px solid #edf2f2;
    border-radius: 12px;
    background: #fbfdfd;
    color: var(--ink);
    text-align: right;
    cursor: pointer;
}

.recent-book:hover[b-56nbi6fcrf] {
    border-color: #b9d1d2;
    background: white;
}

.recent-book > div > strong[b-56nbi6fcrf],
.recent-book > div > small[b-56nbi6fcrf] {
    display: block;
}

.recent-book > div > small[b-56nbi6fcrf] {
    margin-top: 4px;
    color: var(--muted);
    font-size: 10px;
}

.book-completion > span[b-56nbi6fcrf] {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 9px;
}

.book-completion > i[b-56nbi6fcrf] {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 99px;
    background: #e6eeee;
}

.book-completion > i > b[b-56nbi6fcrf] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--teal);
}

.book-status[b-56nbi6fcrf] {
    min-width: 72px;
    padding: 5px 8px;
    border-radius: 99px;
    color: white;
    text-align: center;
    font-size: 9px;
    font-weight: 900;
}

.quick-actions[b-56nbi6fcrf] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.quick-actions button[b-56nbi6fcrf] {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px;
    border: 1px solid #e7eeee;
    border-radius: 12px;
    background: #fbfdfd;
    color: var(--ink);
    text-align: right;
    cursor: pointer;
}

.quick-actions button:hover[b-56nbi6fcrf] {
    border-color: #b9d3d4;
    transform: translateX(-2px);
}

.action-icon[b-56nbi6fcrf] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 900;
}

.action-icon.teal[b-56nbi6fcrf] { background: #e4f5f5; color: var(--teal); }
.action-icon.gold[b-56nbi6fcrf] { background: #fff3d9; color: #9a6900; }
.action-icon.blue[b-56nbi6fcrf] { background: #e8f1fc; color: #3072bd; }
.action-icon.purple[b-56nbi6fcrf] { background: #eee9fb; color: #6b4db8; }

.quick-actions div strong[b-56nbi6fcrf],
.quick-actions div small[b-56nbi6fcrf] {
    display: block;
}

.quick-actions div strong[b-56nbi6fcrf] {
    font-size: 11px;
}

.quick-actions div small[b-56nbi6fcrf] {
    margin-top: 3px;
    color: var(--muted);
    font-size: 9px;
}

.quick-actions button > b[b-56nbi6fcrf] {
    color: var(--teal);
}

.mini-empty[b-56nbi6fcrf] {
    min-height: 145px;
}

@media (max-width: 1250px) {
    .primary-kpis[b-56nbi6fcrf],
    .secondary-kpis[b-56nbi6fcrf] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .middle-grid[b-56nbi6fcrf] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .monthly-card[b-56nbi6fcrf] {
        grid-column: 1 / -1;
    }
}

@media (min-width: 681px) and (max-width: 1180px) {
    .pro-dashboard[b-56nbi6fcrf] {
        padding: 4px;
    }

    .dashboard-hero[b-56nbi6fcrf] {
        gap: 10px;
        margin-bottom: 10px;
    }

    .dashboard-hero h1[b-56nbi6fcrf] {
        font-size: 22px;
    }

    .dashboard-card[b-56nbi6fcrf] {
        padding: 10px;
    }

    .primary-kpi[b-56nbi6fcrf] {
        padding: 11px;
    }

    .secondary-kpi[b-56nbi6fcrf] {
        padding: 10px;
    }

    .dashboard-grid[b-56nbi6fcrf] {
        gap: 10px;
        margin-bottom: 10px;
    }

    .card-heading[b-56nbi6fcrf] {
        margin-bottom: 11px;
    }

    .recent-books[b-56nbi6fcrf],
    .quick-actions[b-56nbi6fcrf] {
        gap: 6px;
    }

    .recent-book[b-56nbi6fcrf] {
        gap: 9px;
        padding: 8px 10px;
    }

    .quick-actions button[b-56nbi6fcrf] {
        grid-template-columns: 36px minmax(0, 1fr) 16px;
        gap: 8px;
        padding: 7px 9px;
    }

    .action-icon[b-56nbi6fcrf] {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: 16px;
    }
}

@media (max-width: 760px) {
    .top-grid[b-56nbi6fcrf],
    .bottom-grid[b-56nbi6fcrf] {
        grid-template-columns: 1fr;
    }

    .dashboard-hero[b-56nbi6fcrf] {
        align-items: flex-start;
        flex-direction: column;
    }

    .hero-actions[b-56nbi6fcrf] {
        width: 100%;
        flex-wrap: wrap;
    }
}

@media (max-width: 680px) {
    .pro-dashboard[b-56nbi6fcrf] {
        padding: 15px;
    }

    .primary-kpis[b-56nbi6fcrf],
    .secondary-kpis[b-56nbi6fcrf],
    .middle-grid[b-56nbi6fcrf] {
        grid-template-columns: 1fr;
    }

    .monthly-card[b-56nbi6fcrf] {
        grid-column: auto;
    }

    .dashboard-hero h1[b-56nbi6fcrf] {
        font-size: 25px;
    }

    .hero-actions .refresh-button[b-56nbi6fcrf],
    .hero-actions .reports-button[b-56nbi6fcrf] {
        flex: 1;
    }

    .updated-at[b-56nbi6fcrf] {
        width: 100%;
    }

    .trend-card[b-56nbi6fcrf] {
        overflow: hidden;
    }

    .daily-chart[b-56nbi6fcrf],
    .monthly-chart[b-56nbi6fcrf] {
        overflow-x: auto;
    }

    .daily-chart .bar-column[b-56nbi6fcrf],
    .monthly-chart .month-column[b-56nbi6fcrf] {
        min-width: 36px;
    }

    .recent-book[b-56nbi6fcrf] {
        grid-template-columns: 1fr;
    }

    .book-status[b-56nbi6fcrf] {
        width: max-content;
    }
}

/* NAB COMPACT DASHBOARD V5 START */

/*
   تصغير وتكثيف لوحة التحكم على الشاشات المتوسطة.
*/
@media (min-width: 701px) and (max-width: 1180px) {
    .pro-dashboard[b-56nbi6fcrf] {
        padding: 3px !important;
    }

    .dashboard-hero[b-56nbi6fcrf] {
        align-items: center !important;
        flex-direction: row !important;
        gap: 9px !important;
        margin-bottom: 8px !important;
    }

    .dashboard-hero h1[b-56nbi6fcrf] {
        font-size: 21px !important;
    }

    .dashboard-hero p[b-56nbi6fcrf] {
        margin-top: 3px !important;
        font-size: 10px !important;
    }

    .eyebrow[b-56nbi6fcrf],
    .card-eyebrow[b-56nbi6fcrf] {
        margin-bottom: 3px !important;
        font-size: 9px !important;
    }

    .hero-actions[b-56nbi6fcrf] {
        width: auto !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    .updated-at[b-56nbi6fcrf] {
        min-width: 62px !important;
        font-size: 9px !important;
    }

    .updated-at b[b-56nbi6fcrf] {
        font-size: 11px !important;
    }

    .refresh-button[b-56nbi6fcrf],
    .reports-button[b-56nbi6fcrf] {
        min-height: 34px !important;
        padding: 0 9px !important;
        border-radius: 8px !important;
        font-size: 10px !important;
    }

    .dashboard-alert[b-56nbi6fcrf] {
        padding: 9px 11px !important;
        margin-bottom: 9px !important;
        border-radius: 10px !important;
        font-size: 10px !important;
    }

    .dashboard-grid[b-56nbi6fcrf] {
        gap: 8px !important;
        margin-bottom: 8px !important;
    }

    .primary-kpis[b-56nbi6fcrf],
    .secondary-kpis[b-56nbi6fcrf] {
        gap: 8px !important;
    }

    .primary-kpi[b-56nbi6fcrf] {
        padding: 9px !important;
        border-radius: 12px !important;
    }

    .secondary-kpi[b-56nbi6fcrf] {
        padding: 8px !important;
        border-radius: 11px !important;
    }

    .dashboard-card[b-56nbi6fcrf] {
        padding: 9px !important;
        border-radius: 12px !important;
    }

    .card-heading[b-56nbi6fcrf] {
        gap: 8px !important;
        margin-bottom: 9px !important;
    }

    .card-heading h2[b-56nbi6fcrf] {
        font-size: 14px !important;
    }

    .card-heading p[b-56nbi6fcrf] {
        font-size: 9px !important;
    }

    .recent-books[b-56nbi6fcrf] {
        gap: 5px !important;
    }

    .recent-book[b-56nbi6fcrf] {
        grid-template-columns:
            minmax(145px, 1fr)
            minmax(105px, 0.8fr)
            auto !important;

        gap: 8px !important;
        padding: 7px 9px !important;
        border-radius: 9px !important;
    }

    .recent-book > div > strong[b-56nbi6fcrf] {
        font-size: 10px !important;
    }

    .recent-book > div > small[b-56nbi6fcrf] {
        margin-top: 2px !important;
        font-size: 8px !important;
    }

    .book-completion > span[b-56nbi6fcrf] {
        margin-bottom: 3px !important;
        font-size: 8px !important;
    }

    .book-completion > i[b-56nbi6fcrf] {
        height: 5px !important;
    }

    .book-status[b-56nbi6fcrf] {
        min-width: 64px !important;
        padding: 4px 6px !important;
        font-size: 8px !important;
    }

    .quick-actions[b-56nbi6fcrf] {
        gap: 5px !important;
    }

    .quick-actions button[b-56nbi6fcrf] {
        grid-template-columns:
            33px
            minmax(0, 1fr)
            14px !important;

        gap: 7px !important;
        padding: 6px 8px !important;
        border-radius: 9px !important;
    }

    .action-icon[b-56nbi6fcrf] {
        width: 32px !important;
        height: 32px !important;
        border-radius: 9px !important;
        font-size: 15px !important;
    }

    .quick-actions div strong[b-56nbi6fcrf] {
        font-size: 9px !important;
    }

    .quick-actions div small[b-56nbi6fcrf] {
        margin-top: 1px !important;
        font-size: 8px !important;
    }

    .quick-actions button > b[b-56nbi6fcrf] {
        font-size: 10px !important;
    }

    /*
       إبقاء آخر الدفاتر والإجراءات الرئيسية
       بجانب بعضهما حتى عرض 761 بكسل.
    */
    .top-grid[b-56nbi6fcrf],
    .bottom-grid[b-56nbi6fcrf] {
        grid-template-columns:
            minmax(0, 1.55fr)
            minmax(235px, 0.75fr) !important;
    }
}

/*
   عند الشاشات الأصغر فقط تصبح الأقسام عمودًا واحدًا.
*/
@media (max-width: 760px) {
    .top-grid[b-56nbi6fcrf],
    .bottom-grid[b-56nbi6fcrf] {
        grid-template-columns: 1fr !important;
    }

    .dashboard-hero[b-56nbi6fcrf] {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .hero-actions[b-56nbi6fcrf] {
        width: 100% !important;
        flex-wrap: wrap !important;
    }
}

@media (max-width: 680px) {
    .pro-dashboard[b-56nbi6fcrf] {
        padding: 5px !important;
    }

    .dashboard-card[b-56nbi6fcrf] {
        padding: 8px !important;
    }

    .primary-kpis[b-56nbi6fcrf],
    .secondary-kpis[b-56nbi6fcrf],
    .middle-grid[b-56nbi6fcrf] {
        grid-template-columns: 1fr !important;
    }

    .recent-book[b-56nbi6fcrf] {
        grid-template-columns: 1fr !important;
    }
}

/* NAB COMPACT DASHBOARD V5 END */

/* /Components/Pages/LoginAttempts.razor.rz.scp.css */
.login-audit[b-oad9m795wa]{display:grid;gap:1rem}.login-audit header span[b-oad9m795wa]{color:#087d85;font-weight:800}.login-audit h1[b-oad9m795wa]{margin:.2rem 0;color:#073e46}.login-audit p[b-oad9m795wa]{color:#6c8084}.filters[b-oad9m795wa]{display:grid;grid-template-columns:1fr 220px auto;gap:.7rem;background:#fff;border:1px solid #d9e5e6;border-radius:16px;padding:1rem}.filters input[b-oad9m795wa],.filters select[b-oad9m795wa]{border:1px solid #c6dadd;border-radius:10px;padding:.75rem}.filters button[b-oad9m795wa]{border:0;border-radius:10px;background:#087d85;color:#fff;padding:0 1.3rem;font-weight:800}.table-card[b-oad9m795wa]{background:#fff;border:1px solid #d9e5e6;border-radius:16px;overflow:hidden}.table-scroll[b-oad9m795wa]{overflow:auto}table[b-oad9m795wa]{width:100%;border-collapse:collapse}th[b-oad9m795wa],td[b-oad9m795wa]{padding:.8rem 1rem;border-bottom:1px solid #edf2f2;text-align:right}th[b-oad9m795wa]{background:#f4f8f8;color:#486268}.agent[b-oad9m795wa]{max-width:420px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.result[b-oad9m795wa]{display:inline-block;padding:.35rem .65rem;border-radius:999px;font-weight:800}.result.ok[b-oad9m795wa]{background:#e4f7ed;color:#147342}.result.bad[b-oad9m795wa]{background:#ffeded;color:#a72c2c}.table-card footer[b-oad9m795wa]{display:flex;justify-content:center;align-items:center;gap:1rem;padding:1rem}.table-card footer button[b-oad9m795wa]{padding:.55rem .9rem;border:1px solid #c8d9db;background:#fff;border-radius:9px}.empty[b-oad9m795wa]{text-align:center;padding:2rem;color:#789094}@media(max-width:700px){.filters[b-oad9m795wa]{grid-template-columns:1fr}}
/* /Components/Pages/Notifications.razor.rz.scp.css */
.notifications-page[b-62ch278sy1] {
    padding: 24px;
    color: #0f172a;
}

.page-header[b-62ch278sy1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

    .page-header h1[b-62ch278sy1] {
        margin: 0 0 6px;
        font-size: 28px;
    }

    .page-header p[b-62ch278sy1] {
        margin: 0;
        color: #64748b;
    }

.mark-all-button[b-62ch278sy1] {
    min-height: 42px;
    padding: 9px 15px;
    border: 1px solid #bfdbfe;
    border-radius: 9px;
    background: #eff6ff;
    color: #1d4ed8;
    cursor: pointer;
    font-weight: 800;
}

.notifications-card[b-62ch278sy1],
.state-card[b-62ch278sy1] {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(15, 23, 42, .05);
}

.state-card[b-62ch278sy1] {
    padding: 35px;
    color: #64748b;
    text-align: center;
}

.notification-row[b-62ch278sy1] {
    position: relative;
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 14px;
    padding: 17px 19px;
    border: 0;
    border-bottom: 1px solid #edf2f7;
    background: #fff;
    text-align: right;
    cursor: pointer;
}

    .notification-row:last-child[b-62ch278sy1] {
        border-bottom: 0;
    }

    .notification-row:hover[b-62ch278sy1] {
        background: #f8fafc;
    }

    .notification-row.unread[b-62ch278sy1] {
        background: #eff6ff;
    }

.notification-icon[b-62ch278sy1] {
    flex: 0 0 38px;
    font-size: 23px;
}

.notification-content[b-62ch278sy1] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

    .notification-content strong[b-62ch278sy1] {
        font-size: 15px;
    }

    .notification-content > span[b-62ch278sy1] {
        margin-top: 5px;
        color: #475569;
        line-height: 1.7;
    }

    .notification-content small[b-62ch278sy1] {
        margin-top: 7px;
        color: #94a3b8;
    }

.unread-dot[b-62ch278sy1] {
    position: absolute;
    top: 20px;
    left: 18px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2563eb;
}

.alert[b-62ch278sy1] {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 9px;
}

.alert-danger[b-62ch278sy1] {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

@media (max-width: 700px) {
    .notifications-page[b-62ch278sy1] {
        padding: 15px;
    }

    .page-header[b-62ch278sy1] {
        align-items: stretch;
        flex-direction: column;
    }
}
/* /Components/Pages/Reports.razor.rz.scp.css */
.reports-page[b-40zble5iex] {
    --report-teal: #117987;
    --report-teal-dark: #075865;
    --report-gold: #dfb760;
    max-width: 1680px;
    margin: 0 auto;
    color: #153238;
}

.reports-header[b-40zble5iex] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.eyebrow[b-40zble5iex] {
    display: inline-block;
    margin-bottom: 5px;
    color: #117987;
    font-size: 12px;
    font-weight: 800;
}

.reports-header h1[b-40zble5iex] {
    margin: 0;
    font-size: 28px;
}

.reports-header p[b-40zble5iex] {
    margin: 7px 0 0;
    color: #718286;
    font-size: 14px;
}

.export-actions[b-40zble5iex] {
    display: flex;
    gap: 9px;
}

.export-button[b-40zble5iex] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 15px;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-weight: 800;
}

.export-button:disabled[b-40zble5iex] {
    cursor: not-allowed;
    opacity: 0.55;
}

.export-button.excel[b-40zble5iex] {
    border: 1px solid #8fc9a7;
    color: #167043;
}

.export-button.pdf[b-40zble5iex] {
    border: 1px solid #efaaaa;
    color: #b42318;
}

.export-button.pdf span[b-40zble5iex] {
    font-size: 10px;
    font-weight: 900;
}

.export-button.print[b-40zble5iex] {
    border: 1px solid #b9cdd0;
    color: #075865;
}

.filters-panel[b-40zble5iex],
.analytics-card[b-40zble5iex],
.details-card[b-40zble5iex] {
    border: 1px solid #dce7e8;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 9px 24px rgba(17, 70, 79, 0.05);
}

.filters-panel[b-40zble5iex] {
    margin-bottom: 18px;
    padding: 19px;
    overflow: hidden;
    border-top: 3px solid #117987;
    background:
        radial-gradient(circle at 100% 0, rgba(223, 183, 96, 0.12), transparent 230px),
        #fff;
}

.reports-page[b-40zble5iex] {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.filter-heading[b-40zble5iex] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.filter-heading > div[b-40zble5iex] {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 10px;
}

.filter-heading > div > span:not(.filter-title-icon)[b-40zble5iex] {
    display: flex;
    flex-direction: column;
}

.filter-heading strong[b-40zble5iex] {
    font-size: 15px;
}

.filter-heading small[b-40zble5iex] {
    margin-top: 3px;
    color: #7b8c90;
    font-size: 11px;
}

.filter-title-icon[b-40zble5iex] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, #e7f4f5, #f7eed8);
    color: #075865;
    font-size: 19px;
    font-weight: 900;
}

.reset-button[b-40zble5iex] {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #d5e1e2;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.8);
    color: #117987;
    cursor: pointer;
    font-weight: 700;
}

.quick-periods[b-40zble5iex] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    overflow-x: auto;
    border-bottom: 1px solid #edf2f2;
}

.quick-periods > span[b-40zble5iex] {
    margin-left: 4px;
    color: #718286;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.quick-periods button[b-40zble5iex] {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid #d6e2e3;
    border-radius: 99px;
    background: #f8fbfb;
    color: #536b70;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    transition: 0.18s ease;
}

.quick-periods button:hover[b-40zble5iex],
.quick-periods button.active[b-40zble5iex] {
    border-color: #117987;
    background: #117987;
    color: #fff;
    box-shadow: 0 5px 13px rgba(17, 121, 135, 0.18);
}

.filters-grid[b-40zble5iex] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(145px, 0.85fr))
        repeat(2, minmax(190px, 1.2fr))
        125px auto;
    align-items: end;
    gap: 11px;
}

.filter-field[b-40zble5iex] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-field label[b-40zble5iex] {
    position: absolute;
    z-index: 1;
    top: 7px;
    right: 42px;
    color: #496166;
    font-size: 9px;
    font-weight: 800;
    pointer-events: none;
}

.field-icon[b-40zble5iex] {
    position: absolute;
    z-index: 1;
    top: 17px;
    right: 13px;
    color: #117987;
    font-size: 15px;
    font-weight: 900;
    pointer-events: none;
}

/* InputDate وInputSelect مكونات Blazor؛ يلزم ::deep لوصول CSS المعزول
   إلى عنصر input/select الفعلي الذي تولده هذه المكونات. */
.filter-field[b-40zble5iex]  .filter-control {
    position: relative;
    z-index: 0;
    box-sizing: border-box;
    width: 100%;
    min-height: 58px;
    padding: 23px 42px 7px 14px;
    border: 1px solid #c8d9dc;
    border-radius: 14px;
    background-color: #f8fbfb;
    color: #17353b;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.filter-field[b-40zble5iex]  select.filter-control {
    padding-left: 35px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #117987 50%),
        linear-gradient(135deg, #117987 50%, transparent 50%);
    background-position:
        16px calc(50% + 2px),
        11px calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.filter-field[b-40zble5iex]  input[type="date"].filter-control {
    color-scheme: light;
}

.filter-field[b-40zble5iex]  input[type="date"].filter-control::-webkit-calendar-picker-indicator {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    opacity: 0.65;
}

.filter-field[b-40zble5iex]  .filter-control:hover {
    border-color: #8fb8be;
    background-color: #fff;
}

.filter-field[b-40zble5iex]  .filter-control:focus {
    border-color: #117987;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(17, 121, 135, 0.11);
}

.filter-field:focus-within label[b-40zble5iex] {
    color: #0a6b78;
}

.filter-field:focus-within .field-icon[b-40zble5iex] {
    transform: scale(1.08);
}

.field-icon[b-40zble5iex] {
    transition: 0.18s ease;
}

.apply-button[b-40zble5iex] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 58px;
    padding: 0 20px;
    border: 1px solid #075865;
    border-radius: 12px;
    background: linear-gradient(135deg, #117987, #075865);
    color: #fff;
    cursor: pointer;
    font-weight: 800;
    white-space: nowrap;
}

.apply-button:disabled[b-40zble5iex] {
    cursor: wait;
    opacity: 0.65;
}

.active-filter-summary[b-40zble5iex] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 13px;
    padding: 9px 12px;
    border-radius: 9px;
    background: #f5f9f9;
    color: #7b8c90;
    font-size: 9px;
}

.active-filter-summary strong[b-40zble5iex] {
    color: #35565c;
    font-size: 10px;
}

.active-filter-summary i[b-40zble5iex] {
    width: 1px;
    height: 18px;
    margin: 0 5px;
    background: #d7e3e4;
}

.report-alert[b-40zble5iex] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    padding: 13px 15px;
    border-radius: 10px;
    font-size: 13px;
}

.report-alert.error[b-40zble5iex] {
    flex-direction: column;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #9f251b;
}

.report-alert.notice[b-40zble5iex] {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e5a9b;
}

.report-loading[b-40zble5iex] {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 360px;
    color: #496166;
}

.loading-spinner[b-40zble5iex] {
    width: 42px;
    height: 42px;
    margin-bottom: 15px;
    border: 4px solid #d9e8e9;
    border-top-color: #117987;
    border-radius: 50%;
    animation: report-spin-b-40zble5iex 0.8s linear infinite;
}

@keyframes report-spin-b-40zble5iex {
    to { transform: rotate(360deg); }
}

.kpi-grid[b-40zble5iex] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 18px;
}

.kpi-card[b-40zble5iex] {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 116px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid #dce7e8;
    border-right: 4px solid var(--accent);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(17, 70, 79, 0.045);
}

.kpi-card.teal[b-40zble5iex] { --accent: #117987; --soft: #e6f3f4; }
.kpi-card.blue[b-40zble5iex] { --accent: #3375d6; --soft: #eaf2ff; }
.kpi-card.green[b-40zble5iex] { --accent: #15945c; --soft: #e7f8ef; }
.kpi-card.red[b-40zble5iex] { --accent: #d14343; --soft: #fdecec; }
.kpi-card.gold[b-40zble5iex] { --accent: #d29a19; --soft: #fff5d9; }
.kpi-card.violet[b-40zble5iex] { --accent: #7656d6; --soft: #f0ebff; }
.kpi-card.navy[b-40zble5iex] { --accent: #285475; --soft: #eaf1f6; }
.kpi-card.slate[b-40zble5iex] { --accent: #667085; --soft: #f0f2f4; }

.kpi-icon[b-40zble5iex] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--soft);
    color: var(--accent);
    font-size: 22px;
    font-weight: 900;
}

.kpi-card > div[b-40zble5iex] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kpi-card > div > span[b-40zble5iex] {
    color: #687c80;
    font-size: 12px;
    font-weight: 700;
}

.kpi-card strong[b-40zble5iex] {
    margin-top: 3px;
    color: #153238;
    font-size: 24px;
}

.kpi-card small[b-40zble5iex] {
    margin-top: 3px;
    overflow: hidden;
    color: #8a999c;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpi-card small.change-positive[b-40zble5iex] {
    color: #168253;
}

.kpi-card small.change-negative[b-40zble5iex] {
    color: #c43d3d;
}

.kpi-card small.change-neutral[b-40zble5iex] {
    color: #87979a;
}

.insights-grid[b-40zble5iex] {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(310px, 0.85fr);
    gap: 15px;
    margin-bottom: 15px;
}

.trend-card[b-40zble5iex] {
    min-width: 0;
}

.chart-legend[b-40zble5iex] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 5px;
    border: 1px solid #e0eaeb;
    border-radius: 12px;
    background: #f8fbfb;
}

.chart-legend span[b-40zble5iex] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 27px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #fff;
    color: #536b70;
    font-size: 9px;
    white-space: nowrap;
}

.chart-legend span i[b-40zble5iex] {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    box-shadow: 0 0 0 3px rgba(17, 121, 135, 0.07);
}

.chart-legend span b[b-40zble5iex] {
    font-weight: 800;
}

.chart-legend span strong[b-40zble5iex] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 6px;
    background: #eef4f5;
    color: #17353b;
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

.chart-legend .submitted i[b-40zble5iex],
.trend-bars .submitted[b-40zble5iex] {
    background: #3ba1ae;
}

.chart-legend .approved i[b-40zble5iex],
.trend-bars .approved[b-40zble5iex] {
    background: #24a66a;
}

.chart-legend .rejected i[b-40zble5iex],
.trend-bars .rejected[b-40zble5iex] {
    background: #dc5656;
}

.trend-scroll[b-40zble5iex] {
    width: 100%;
    padding-bottom: 5px;
    overflow-x: auto;
}

.trend-chart[b-40zble5iex] {
    display: grid;
    grid-template-columns:
        repeat(var(--trend-columns), minmax(64px, 1fr));
    align-items: end;
    min-width: max(100%, calc(var(--trend-columns) * 68px));
    height: 230px;
    padding: 27px 10px 0;
    border-bottom: 1px solid #dbe6e7;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 48px,
            #edf3f3 49px,
            transparent 50px);
}

.trend-column[b-40zble5iex] {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-width: 0;
}

.trend-bars[b-40zble5iex] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    flex: 1;
}

.trend-bars span[b-40zble5iex] {
    position: relative;
    width: min(15px, 25%);
    min-height: 0;
    border-radius: 6px 6px 2px 2px;
    box-shadow: 0 1px 2px rgba(23, 53, 59, 0.12);
    transition:
        filter 0.2s ease,
        transform 0.2s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.trend-bars span[data-value="0"][b-40zble5iex] {
    height: 2px !important;
    opacity: 0.2;
}

.trend-bars span:not([data-value="0"])[b-40zble5iex]::before {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    color: #536b70;
    content: attr(data-value);
    font-size: 8px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    transform: translateX(-50%);
}

.trend-column:hover .trend-bars span[b-40zble5iex] {
    filter: brightness(0.9);
    transform: translateY(-2px) translateZ(0);
}

.trend-column small[b-40zble5iex] {
    height: 29px;
    padding-top: 9px;
    overflow: hidden;
    color: #6f8387;
    font-size: 8px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
}

.status-distribution[b-40zble5iex] {
    display: grid;
    gap: 12px;
}

.status-distribution-row[b-40zble5iex] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 5px 10px;
}

.status-distribution-row > div:first-child[b-40zble5iex] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-distribution-row strong[b-40zble5iex] {
    font-size: 11px;
}

.status-distribution-row small[b-40zble5iex] {
    color: #8b999c;
    font-size: 8px;
}

.status-distribution-row > b[b-40zble5iex] {
    color: #17353b;
    font-size: 12px;
}

.status-dot[b-40zble5iex] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-track[b-40zble5iex] {
    grid-column: 1 / -1;
    height: 5px;
    overflow: hidden;
    border-radius: 99px;
    background: #edf2f2;
}

.status-track span[b-40zble5iex] {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.available[b-40zble5iex] { background: #37a773; }
.assigned[b-40zble5iex] { background: #3e82d7; }
.in-progress[b-40zble5iex] { background: #6a64d9; }
.submitted[b-40zble5iex] { background: #d99b27; }
.completed[b-40zble5iex] { background: #17a888; }
.archived[b-40zble5iex] { background: #7c8b91; }
.rejected[b-40zble5iex] { background: #dc5656; }
.damaged[b-40zble5iex] { background: #9d4444; }
.unknown[b-40zble5iex] { background: #a0a8aa; }

.review-performance[b-40zble5iex] {
    display: grid;
    grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
    gap: 18px;
    margin-bottom: 15px;
    padding: 16px 18px;
    border: 1px solid #d9e6e7;
    border-radius: 15px;
    background:
        linear-gradient(135deg, rgba(17, 121, 135, 0.07), rgba(223, 183, 96, 0.08)),
        #fff;
}

.performance-heading[b-40zble5iex] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.performance-heading > div[b-40zble5iex] {
    display: flex;
    flex-direction: column;
}

.performance-heading span[b-40zble5iex] {
    color: #63787c;
    font-size: 10px;
}

.performance-heading strong[b-40zble5iex] {
    margin-top: 5px;
    font-size: 13px;
}

.target-rate[b-40zble5iex] {
    display: flex;
    align-items: center;
    flex-direction: column;
    min-width: 70px;
    padding: 8px;
    border-radius: 11px;
    background: #fff;
    color: #117987 !important;
    font-size: 18px !important;
    font-weight: 900;
}

.target-rate small[b-40zble5iex] {
    color: #809195;
    font-size: 7px;
}

.performance-metrics[b-40zble5iex] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.performance-metrics > div[b-40zble5iex] {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 65px;
    border: 1px solid rgba(204, 219, 221, 0.9);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
}

.performance-metrics span[b-40zble5iex] {
    color: #7e9094;
    font-size: 8px;
}

.performance-metrics strong[b-40zble5iex] {
    margin-top: 5px;
    font-size: 12px;
}

.analytics-grid[b-40zble5iex] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 18px;
}

.analytics-card[b-40zble5iex] {
    padding: 18px;
}

.rejection-card[b-40zble5iex] {
    grid-column: 1 / -1;
}

.rejection-card.is-empty[b-40zble5iex] {
    padding-block: 14px;
}

.rejection-card.is-empty .card-heading[b-40zble5iex] {
    margin-bottom: 5px;
}

.rejection-card.is-empty .mini-empty[b-40zble5iex] {
    min-height: 38px;
}

.card-heading[b-40zble5iex],
.details-heading[b-40zble5iex] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.card-heading[b-40zble5iex] {
    margin-bottom: 16px;
}

.card-heading h2[b-40zble5iex],
.details-heading h2[b-40zble5iex] {
    margin: 0;
    font-size: 17px;
}

.card-heading p[b-40zble5iex],
.details-heading p[b-40zble5iex] {
    margin: 4px 0 0;
    color: #7a8c90;
    font-size: 11px;
}

.heading-icon[b-40zble5iex] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    border-radius: 11px;
    background: #e8f3f4;
    color: #117987;
    font-size: 20px;
}

.heading-icon.warning[b-40zble5iex] {
    background: #fff0e7;
    color: #d45c24;
    font-weight: 900;
}

.ranking-list[b-40zble5iex] {
    display: grid;
    gap: 12px;
}

.ranking-row[b-40zble5iex] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rank-number[b-40zble5iex] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 29px;
    width: 29px;
    height: 29px;
    border-radius: 9px;
    background: #f7eed8;
    color: #8c6a20;
    font-size: 12px;
    font-weight: 900;
}

.ranking-content[b-40zble5iex] {
    flex: 1;
    min-width: 0;
}

.ranking-label[b-40zble5iex] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.ranking-label > div[b-40zble5iex] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ranking-label strong[b-40zble5iex] {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-label small[b-40zble5iex] {
    margin-top: 2px;
    color: #8a999c;
    font-size: 9px;
}

.ranking-label b[b-40zble5iex] {
    color: #075865;
    font-size: 13px;
}

.bar-track[b-40zble5iex] {
    height: 7px;
    overflow: hidden;
    border-radius: 99px;
    background: #edf2f2;
}

.bar-track span[b-40zble5iex] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #dfb760, #117987);
}

.branches .bar-track span[b-40zble5iex] {
    background: linear-gradient(90deg, #61aeba, #075865);
}

.reason-list[b-40zble5iex] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.reason-row[b-40zble5iex] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 43px;
    padding: 8px 12px;
    border: 1px solid #f0dfd8;
    border-radius: 10px;
    background: #fffaf8;
}

.reason-row span[b-40zble5iex] {
    overflow: hidden;
    color: #67463a;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reason-row strong[b-40zble5iex] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 29px;
    height: 25px;
    border-radius: 8px;
    background: #f9ded3;
    color: #b74724;
    font-size: 11px;
}

.mini-empty[b-40zble5iex] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    color: #8a999c;
    font-size: 12px;
}

.details-card[b-40zble5iex] {
    overflow: hidden;
}

.details-heading[b-40zble5iex] {
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid #e3ebec;
}

.period-badge[b-40zble5iex] {
    padding: 7px 10px;
    border-radius: 8px;
    background: #edf6f6;
    color: #0a6672;
    font-size: 11px;
    font-weight: 800;
}

.details-empty[b-40zble5iex] {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 260px;
    color: #849498;
}

.details-empty > span[b-40zble5iex] {
    font-size: 35px;
}

.details-empty strong[b-40zble5iex] {
    margin-top: 10px;
    color: #496166;
}

.details-empty p[b-40zble5iex] {
    margin: 5px 0 0;
    font-size: 12px;
}

.report-table-wrapper[b-40zble5iex] {
    max-height: 610px;
    overflow: auto;
}

.report-table[b-40zble5iex] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.report-table th[b-40zble5iex] {
    position: sticky;
    z-index: 2;
    top: 0;
    padding: 13px 12px;
    border-bottom: 1px solid #dfe8e9;
    background: #f4f8f8;
    color: #587075;
    text-align: right;
    font-size: 10px;
    white-space: nowrap;
}

.report-table td[b-40zble5iex] {
    padding: 12px;
    border-bottom: 1px solid #edf2f2;
    color: #385359;
    white-space: nowrap;
}

.report-table tbody tr:hover[b-40zble5iex] {
    background: #f9fcfc;
}

.report-table tbody tr.report-row-pending[b-40zble5iex] {
    background: rgba(255, 243, 213, 0.32);
}

.report-table tbody tr.report-row-rejected[b-40zble5iex] {
    background: rgba(253, 232, 232, 0.35);
}

.note-link[b-40zble5iex] {
    color: #075865;
    font-weight: 900;
}

.branch-code[b-40zble5iex] {
    display: inline-flex;
    margin-left: 5px;
    padding: 3px 6px;
    border-radius: 6px;
    background: #edf3f4;
    color: #526a6f;
    font-size: 9px;
    font-weight: 900;
}

.report-status[b-40zble5iex] {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 800;
}

.report-status.approved[b-40zble5iex] { background: #e2f7eb; color: #137044; }
.report-status.rejected[b-40zble5iex] { background: #fde8e8; color: #b52c2c; }
.report-status.pending[b-40zble5iex] { background: #fff3d5; color: #986c08; }
.report-status.without-invoice[b-40zble5iex] { background: #e8effb; color: #345d9d; }
.report-status.empty[b-40zble5iex] { background: #f0f2f4; color: #667085; }

.review-note[b-40zble5iex] {
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pagination-bar[b-40zble5iex] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    background: #fafcfc;
    color: #718286;
    font-size: 11px;
}

.pagination-bar > div[b-40zble5iex] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pagination-bar button[b-40zble5iex],
.current-page[b-40zble5iex] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid #d2dfe1;
    border-radius: 8px;
    background: #fff;
    color: #496166;
    font-size: 10px;
    font-weight: 700;
}

.pagination-bar button[b-40zble5iex] {
    cursor: pointer;
}

.pagination-bar button:disabled[b-40zble5iex] {
    cursor: not-allowed;
    opacity: 0.45;
}

.current-page[b-40zble5iex] {
    min-width: 34px;
    border-color: #117987;
    background: #117987;
    color: #fff;
}

@media (max-width: 1250px) {
    .filters-grid[b-40zble5iex] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .kpi-grid[b-40zble5iex] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .insights-grid[b-40zble5iex] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .reports-header[b-40zble5iex] {
        align-items: stretch;
        flex-direction: column;
    }

    .export-actions[b-40zble5iex] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .filters-grid[b-40zble5iex],
    .analytics-grid[b-40zble5iex] {
        grid-template-columns: 1fr;
    }

    .active-filter-summary[b-40zble5iex] {
        align-items: flex-start;
        flex-direction: column;
    }

    .active-filter-summary i[b-40zble5iex] {
        display: none;
    }

    .review-performance[b-40zble5iex] {
        grid-template-columns: 1fr;
    }

    .performance-metrics[b-40zble5iex] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rejection-card[b-40zble5iex] {
        grid-column: auto;
    }

    .reason-list[b-40zble5iex] {
        grid-template-columns: 1fr;
    }

    .pagination-bar[b-40zble5iex] {
        align-items: stretch;
        flex-direction: column;
    }

    .pagination-bar > div[b-40zble5iex] {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 520px) {
    .kpi-grid[b-40zble5iex] {
        grid-template-columns: 1fr;
    }

    .export-button[b-40zble5iex] {
        padding: 0 8px;
        font-size: 11px;
    }

    .filter-heading[b-40zble5iex] {
        align-items: flex-start;
    }

    .quick-periods[b-40zble5iex] {
        margin-inline: -5px;
    }

    .chart-legend[b-40zble5iex] {
        width: 100%;
        justify-content: space-between;
    }

    .chart-legend span[b-40zble5iex] {
        flex: 1;
        justify-content: center;
        padding-inline: 5px;
    }
}
/* /Components/Pages/Reviews.razor.rz.scp.css */
.reviews-page[b-lquz56l7nr] {
    --review-teal: #117987;
    --review-dark: #075865;
    --review-gold: #dfb760;
    --review-border: #dce7e8;
    padding: 24px;
    color: #153238;
}

.reviews-header[b-lquz56l7nr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.page-eyebrow[b-lquz56l7nr] {
    color: var(--review-teal);
    font-size: 11px;
    font-weight: 900;
}

.reviews-header h1[b-lquz56l7nr] {
    margin: 3px 0 5px;
    font-size: 28px;
}

.reviews-header p[b-lquz56l7nr] {
    margin: 0;
    color: #718488;
    font-size: 12px;
}

.refresh-button[b-lquz56l7nr] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 9px 16px;
    border: 1px solid var(--review-teal);
    border-radius: 10px;
    background: var(--review-teal);
    color: #fff;
    cursor: pointer;
    font-weight: 900;
}

.review-summary[b-lquz56l7nr] {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.summary-card[b-lquz56l7nr] {
    --summary-accent: #117987;
    padding: 16px 18px;
    border: 1px solid var(--review-border);
    border-right: 4px solid var(--summary-accent);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 6px 17px rgba(17, 70, 79, 0.045);
}

.summary-card.pending[b-lquz56l7nr] { --summary-accent: #d59a17; }
.summary-card.books[b-lquz56l7nr] { --summary-accent: #117987; }
.summary-card.old[b-lquz56l7nr] { --summary-accent: #d65353; }
.summary-card.selected[b-lquz56l7nr] { --summary-accent: #2d73cf; }

.summary-card span[b-lquz56l7nr],
.summary-card small[b-lquz56l7nr] {
    display: block;
    color: #74878b;
    font-size: 10px;
}

.summary-card strong[b-lquz56l7nr] {
    display: block;
    margin: 7px 0 4px;
    font-size: 22px;
    font-weight: 900;
}

.filters-card[b-lquz56l7nr] {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 220px;
    gap: 11px;
    margin-bottom: 16px;
}

.search-field[b-lquz56l7nr] {
    position: relative;
}

.search-field > span[b-lquz56l7nr] {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 14px;
    color: var(--review-teal);
    transform: translateY(-50%);
}

.form-control[b-lquz56l7nr] {
    box-sizing: border-box;
    width: 100%;
    min-height: 45px;
    padding: 10px 13px;
    border: 1px solid #cbdadd;
    border-radius: 10px;
    background: #fff;
    color: #17353b;
    font-family: inherit;
    outline: none;
}

.search-field .form-control[b-lquz56l7nr] {
    padding-right: 40px;
}

.form-control:focus[b-lquz56l7nr] {
    border-color: var(--review-teal);
    box-shadow: 0 0 0 3px rgba(17, 121, 135, 0.11);
}

.review-workspace[b-lquz56l7nr] {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    min-height: 610px;
    overflow: hidden;
    border: 1px solid var(--review-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 27px rgba(17, 70, 79, 0.06);
}

.books-panel[b-lquz56l7nr] {
    min-width: 0;
    border-left: 1px solid var(--review-border);
    background: #f6f9fa;
}

.panel-heading[b-lquz56l7nr],
.selected-book-header[b-lquz56l7nr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 17px;
    border-bottom: 1px solid var(--review-border);
    background: #fff;
}

.panel-heading h2[b-lquz56l7nr],
.selected-book-header h2[b-lquz56l7nr] {
    margin: 0;
    font-size: 18px;
}

.panel-heading p[b-lquz56l7nr],
.selected-book-header p[b-lquz56l7nr] {
    margin: 4px 0 0;
    color: #72858a;
    font-size: 10px;
}

.panel-count[b-lquz56l7nr],
.pending-total[b-lquz56l7nr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 28px;
    padding: 0 8px;
    border-radius: 8px;
    background: #e7f3f4;
    color: var(--review-dark);
    font-size: 10px;
    font-weight: 900;
}

.book-list[b-lquz56l7nr] {
    display: grid;
    gap: 9px;
    max-height: 690px;
    padding: 11px;
    overflow-y: auto;
}

.book-list-item[b-lquz56l7nr] {
    width: 100%;
    padding: 13px;
    border: 1px solid #dce7e8;
    border-radius: 12px;
    background: #fff;
    color: #17353b;
    cursor: pointer;
    font-family: inherit;
    text-align: right;
    transition: 0.18s ease;
}

.book-list-item:hover[b-lquz56l7nr] {
    border-color: #8ebac0;
    transform: translateY(-1px);
}

.book-list-item.active[b-lquz56l7nr] {
    border-color: var(--review-teal);
    background: linear-gradient(135deg, #eaf6f7, #fff);
    box-shadow: 0 6px 16px rgba(17, 121, 135, 0.12);
}

.book-row-heading[b-lquz56l7nr],
.book-person[b-lquz56l7nr],
.book-age[b-lquz56l7nr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.book-row-heading strong[b-lquz56l7nr] {
    font-size: 14px;
}

.book-row-heading > span[b-lquz56l7nr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    border-radius: 7px;
    background: #fff2cf;
    color: #926516;
    font-size: 10px;
    font-weight: 900;
}

.book-person[b-lquz56l7nr] {
    margin-top: 8px;
    font-size: 10px;
}

.book-person small[b-lquz56l7nr],
.book-age span[b-lquz56l7nr] {
    color: #7b8d91;
}

.book-progress[b-lquz56l7nr] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 11px;
}

.book-progress > span[b-lquz56l7nr] {
    flex: 1;
    height: 5px;
    overflow: hidden;
    border-radius: 99px;
    background: #e6edef;
}

.book-progress i[b-lquz56l7nr] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--review-teal), #4cabb6);
}

.book-progress small[b-lquz56l7nr] {
    color: #687d81;
    font-size: 8px;
    white-space: nowrap;
}

.book-age[b-lquz56l7nr] {
    margin-top: 9px;
    font-size: 9px;
}

.book-age strong[b-lquz56l7nr] {
    color: #b24a3f;
}

.book-review-panel[b-lquz56l7nr] {
    min-width: 0;
    background: #fff;
}

.selected-label[b-lquz56l7nr] {
    color: var(--review-teal);
    font-size: 9px;
    font-weight: 900;
}

.selected-book-header p[b-lquz56l7nr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.selected-book-header p i[b-lquz56l7nr] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #b8c7ca;
}

.selected-book-actions[b-lquz56l7nr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bulk-toolbar[b-lquz56l7nr] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--review-border);
    background: #f8fbfb;
}

.select-all[b-lquz56l7nr] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 900;
}

.select-all input[b-lquz56l7nr],
.page-selector input[b-lquz56l7nr] {
    width: 17px;
    height: 17px;
    accent-color: var(--review-teal);
}

.selected-counter[b-lquz56l7nr] {
    color: #72858a;
    font-size: 9px;
}

.bulk-toolbar > div[b-lquz56l7nr] {
    display: flex;
    gap: 7px;
    margin-right: auto;
}

.bulk-approve-button[b-lquz56l7nr],
.bulk-reject-button[b-lquz56l7nr],
.approve-button[b-lquz56l7nr],
.reject-button[b-lquz56l7nr],
.book-button[b-lquz56l7nr],
.confirm-reject-button[b-lquz56l7nr],
.cancel-button[b-lquz56l7nr] {
    min-height: 36px;
    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 9px;
    font-weight: 900;
}

.bulk-approve-button[b-lquz56l7nr],
.approve-button[b-lquz56l7nr] {
    border: 1px solid #169456;
    background: #169456;
    color: #fff;
}

.bulk-reject-button[b-lquz56l7nr],
.reject-button[b-lquz56l7nr],
.confirm-reject-button[b-lquz56l7nr] {
    border: 1px solid #d94c4c;
    background: #d94c4c;
    color: #fff;
}

.book-button[b-lquz56l7nr],
.cancel-button[b-lquz56l7nr] {
    border: 1px solid #cbdadd;
    background: #fff;
    color: #35565c;
}

button:disabled[b-lquz56l7nr] {
    cursor: not-allowed;
    opacity: 0.5;
}

.pending-pages-list[b-lquz56l7nr] {
    display: grid;
    gap: 9px;
    max-height: 620px;
    padding: 13px;
    overflow-y: auto;
}

.pending-page-row[b-lquz56l7nr] {
    display: grid;
    grid-template-columns: 28px 104px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid #e0e9ea;
    border-radius: 12px;
    background: #fff;
    transition: 0.16s ease;
}

.pending-page-row:hover[b-lquz56l7nr] {
    border-color: #a9c8cc;
    box-shadow: 0 5px 14px rgba(17, 70, 79, 0.055);
}

.pending-page-row.selected[b-lquz56l7nr] {
    border-color: var(--review-teal);
    background: #f1f9fa;
}

.page-selector[b-lquz56l7nr] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-thumbnail[b-lquz56l7nr] {
    position: relative;
    width: 104px;
    height: 76px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #dbe5e6;
    border-radius: 9px;
    background: #f3f6f7;
    cursor: zoom-in;
}

.page-thumbnail img[b-lquz56l7nr] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.page-thumbnail > span:not(.no-image)[b-lquz56l7nr] {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 3px 6px;
    border-radius: 5px;
    background: rgba(7, 88, 101, 0.85);
    color: #fff;
    font-size: 7px;
}

.no-image[b-lquz56l7nr] {
    color: #8b9b9e;
    font-size: 8px;
}

.page-main[b-lquz56l7nr] {
    min-width: 0;
}

.page-title[b-lquz56l7nr] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.page-title > strong[b-lquz56l7nr] {
    font-size: 13px;
}

.pending-badge[b-lquz56l7nr] {
    padding: 4px 7px;
    border-radius: 999px;
    background: #fff3cd;
    color: #986b13;
    font-size: 7px;
    font-weight: 900;
}

.page-meta[b-lquz56l7nr] {
    display: grid;
    grid-template-columns: repeat(4, minmax(80px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.page-meta span[b-lquz56l7nr] {
    color: #7d8e92;
    font-size: 8px;
}

.page-meta b[b-lquz56l7nr] {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #36555b;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-notes[b-lquz56l7nr] {
    margin: 8px 0 0;
    padding: 7px 9px;
    border-radius: 7px;
    background: #f6f8f8;
    color: #5d7277;
    font-size: 8px;
}

.row-actions[b-lquz56l7nr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.alert[b-lquz56l7nr] {
    margin-bottom: 15px;
    padding: 11px 14px;
    border-radius: 9px;
    font-weight: 800;
}

.alert-success[b-lquz56l7nr] {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.alert-danger[b-lquz56l7nr] {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.state-card[b-lquz56l7nr] {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 180px;
    padding: 30px;
    border: 1px solid var(--review-border);
    border-radius: 14px;
    background: #fff;
    color: #718488;
    text-align: center;
}

.modal-overlay[b-lquz56l7nr] {
    position: fixed;
    z-index: 2000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(3px);
}

.reject-modal[b-lquz56l7nr] {
    width: min(490px, 100%);
    padding: 22px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.2);
}

.modal-header[b-lquz56l7nr],
.preview-header[b-lquz56l7nr],
.preview-footer[b-lquz56l7nr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.modal-header[b-lquz56l7nr] {
    align-items: flex-start;
    margin-bottom: 18px;
}

.modal-header h2[b-lquz56l7nr],
.preview-header h2[b-lquz56l7nr] {
    margin: 0 0 5px;
}

.modal-header p[b-lquz56l7nr],
.preview-header p[b-lquz56l7nr] {
    margin: 0;
    color: #718488;
    font-size: 10px;
}

.close-button[b-lquz56l7nr] {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 9px;
    background: #edf3f4;
    color: #35565c;
    cursor: pointer;
    font-size: 21px;
}

.form-group label[b-lquz56l7nr] {
    display: block;
    margin-bottom: 7px;
    font-weight: 900;
}

.form-group small[b-lquz56l7nr] {
    display: block;
    margin-top: 6px;
    color: #7e9094;
    font-size: 9px;
}

.rejection-note[b-lquz56l7nr] {
    min-height: 120px;
    resize: vertical;
}

.modal-actions[b-lquz56l7nr] {
    display: flex;
    gap: 9px;
    margin-top: 18px;
}

.image-preview-modal[b-lquz56l7nr] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(980px, 96vw);
    height: min(820px, 92vh);
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
}

.preview-header[b-lquz56l7nr],
.preview-footer[b-lquz56l7nr] {
    padding: 14px 17px;
    border-bottom: 1px solid var(--review-border);
}

.preview-footer[b-lquz56l7nr] {
    border-top: 1px solid var(--review-border);
    border-bottom: 0;
}

.preview-footer > div[b-lquz56l7nr] {
    display: flex;
    gap: 8px;
}

.preview-image[b-lquz56l7nr] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 14px;
    overflow: auto;
    background: #eef3f4;
}

.preview-image img[b-lquz56l7nr] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #fff;
    box-shadow: 0 8px 25px rgba(17, 70, 79, 0.12);
}

@media (max-width: 1050px) {
    .review-workspace[b-lquz56l7nr] {
        grid-template-columns: 285px minmax(0, 1fr);
    }

    .pending-page-row[b-lquz56l7nr] {
        grid-template-columns: 28px 88px minmax(0, 1fr);
    }

    .page-thumbnail[b-lquz56l7nr] {
        width: 88px;
        height: 70px;
    }

    .row-actions[b-lquz56l7nr] {
        grid-column: 2 / -1;
        flex-direction: row;
        justify-content: flex-end;
    }

    .page-meta[b-lquz56l7nr] {
        grid-template-columns: repeat(2, minmax(80px, 1fr));
    }
}

@media (max-width: 760px) {
    .reviews-page[b-lquz56l7nr] {
        padding: 14px;
    }

    .reviews-header[b-lquz56l7nr] {
        align-items: stretch;
        flex-direction: column;
    }

    .review-summary[b-lquz56l7nr] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filters-card[b-lquz56l7nr],
    .review-workspace[b-lquz56l7nr] {
        grid-template-columns: 1fr;
    }

    .books-panel[b-lquz56l7nr] {
        border-bottom: 1px solid var(--review-border);
        border-left: 0;
    }

    .book-list[b-lquz56l7nr] {
        display: flex;
        max-height: none;
        overflow-x: auto;
    }

    .book-list-item[b-lquz56l7nr] {
        flex: 0 0 260px;
    }

    .selected-book-header[b-lquz56l7nr],
    .bulk-toolbar[b-lquz56l7nr] {
        align-items: stretch;
        flex-direction: column;
    }

    .bulk-toolbar > div[b-lquz56l7nr] {
        margin-right: 0;
    }

    .pending-pages-list[b-lquz56l7nr] {
        max-height: none;
    }

    .pending-page-row[b-lquz56l7nr] {
        grid-template-columns: 26px 82px minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .review-summary[b-lquz56l7nr] {
        grid-template-columns: 1fr;
    }

    .pending-page-row[b-lquz56l7nr] {
        grid-template-columns: 25px minmax(0, 1fr);
    }

    .page-thumbnail[b-lquz56l7nr] {
        grid-column: 2;
        width: 100%;
        height: 155px;
    }

    .page-main[b-lquz56l7nr],
    .row-actions[b-lquz56l7nr] {
        grid-column: 1 / -1;
    }

    .page-meta[b-lquz56l7nr] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/ScanCodes.razor.rz.scp.css */
.scanner-page[b-zte2v5iqrx] { max-width: 820px; margin: 0 auto; padding: 28px; color: #153238; }
.scanner-page header[b-zte2v5iqrx] { margin-bottom: 18px; }
.scanner-page h1[b-zte2v5iqrx] { margin: 5px 0 7px; font-size: clamp(25px, 4vw, 36px); }
.scanner-page header p[b-zte2v5iqrx] { margin: 0; color: #6b7f83; }
.eyebrow[b-zte2v5iqrx] { color: #117987; font-size: 12px; font-weight: 900; }
.scanner-card[b-zte2v5iqrx] { padding: 18px; border: 1px solid #cfe0e2; border-radius: 18px; background: #fff; box-shadow: 0 15px 35px rgba(4,63,73,.08); }
.camera-frame[b-zte2v5iqrx] { position: relative; overflow: hidden; aspect-ratio: 4/3; max-height: 480px; border: 2px solid #117987; border-radius: 16px; background: #092f35; }
.camera-frame video[b-zte2v5iqrx] { width: 100%; height: 100%; object-fit: cover; }
.scan-line[b-zte2v5iqrx] { position: absolute; right: 8%; left: 8%; top: 50%; height: 2px; background: #dfb760; box-shadow: 0 0 12px #dfb760; }
.scanner-actions[b-zte2v5iqrx] { display: flex; gap: 10px; margin-top: 14px; }
.scanner-actions button[b-zte2v5iqrx], .manual-entry button[b-zte2v5iqrx] { min-height: 44px; padding: 0 18px; border-radius: 10px; font-weight: 800; cursor: pointer; }
.primary[b-zte2v5iqrx], .manual-entry button[b-zte2v5iqrx] { border: 0; background: #117987; color: #fff; }
.secondary[b-zte2v5iqrx] { border: 1px solid #bfd3d6; background: #fff; color: #075865; }
.manual-entry[b-zte2v5iqrx] { margin-top: 20px; padding-top: 18px; border-top: 1px solid #e3ecee; }
.manual-entry label[b-zte2v5iqrx] { display: block; margin-bottom: 8px; font-weight: 800; }
.manual-entry > div[b-zte2v5iqrx] { display: flex; gap: 8px; }
.manual-entry input[b-zte2v5iqrx] { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid #bfd3d6; border-radius: 10px; direction: ltr; }
.scanner-message[b-zte2v5iqrx] { margin-bottom: 14px; padding: 12px 14px; border-radius: 10px; font-weight: 700; }
.scanner-message.info[b-zte2v5iqrx] { background: #e8f6f4; color: #075865; }
.scanner-message.error[b-zte2v5iqrx] { background: #fff0f0; color: #b42318; }
.security-note[b-zte2v5iqrx] { color: #6b7f83; font-size: 12px; text-align: center; }
@media (max-width: 600px) { .scanner-page[b-zte2v5iqrx] { padding: 16px; } .manual-entry > div[b-zte2v5iqrx] { flex-direction: column; } }
/* /Components/Pages/Settings.razor.rz.scp.css */
.settings-page[b-ejqisaoaq1] {
    --teal: #087b83;
    --teal-dark: #075c63;
    --gold: #d9ad59;
    --ink: #173338;
    --muted: #6c8286;
    --line: #d9e7e7;
    min-height: 100%;
    padding: 28px;
    color: var(--ink);
    background: radial-gradient(circle at 95% 0, rgba(8, 123, 131, .08), transparent 28%), radial-gradient(circle at 5% 8%, rgba(217, 173, 89, .09), transparent 24%), #f4f8f8;
}

/* Background migration */
.migration-launch[b-ejqisaoaq1] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    grid-column: 2;
    grid-row: 1 / span 2;
}

    .migration-launch label[b-ejqisaoaq1] {
        display: flex;
        flex-direction: column;
        gap: 5px;
        color: var(--muted);
        font-size: 10px;
        font-weight: 800;
    }

    .migration-launch select[b-ejqisaoaq1] {
        min-width: 105px;
        height: 42px;
        padding: 0 11px;
        border: 1px solid #cbdede;
        border-radius: 11px;
        outline: 0;
        background: #fff;
        color: var(--ink);
        font-family: inherit;
        font-weight: 800;
    }

.migration-progress-card[b-ejqisaoaq1] {
    margin-top: 16px;
    padding: 18px;
    border: 1px solid #cfe2e2;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(8, 123, 131, .05), transparent 58%), #fbfdfd;
}

.migration-progress-head[b-ejqisaoaq1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

    .migration-progress-head h3[b-ejqisaoaq1] {
        margin: 8px 0 3px;
        font-size: 16px;
    }

    .migration-progress-head p[b-ejqisaoaq1] {
        margin: 0;
        color: var(--muted);
        font-size: 11px;
    }

.job-badge[b-ejqisaoaq1] {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: #e9f0f0;
    color: #587074;
    font-size: 10px;
    font-weight: 900;
}

    .job-badge.running[b-ejqisaoaq1] {
        background: #e3f5f5;
        color: #087b83;
    }

    .job-badge.queued[b-ejqisaoaq1] {
        background: #edf2ff;
        color: #4868ad;
    }

    .job-badge.paused[b-ejqisaoaq1] {
        background: #fff1d7;
        color: #9b680c;
    }

    .job-badge.completed[b-ejqisaoaq1] {
        background: #e5f7ed;
        color: #17794d;
    }

    .job-badge.completedwitherrors[b-ejqisaoaq1] {
        background: #fff0e7;
        color: #b65a22;
    }

.migration-timing[b-ejqisaoaq1] {
    display: flex;
    min-width: 190px;
    flex-direction: column;
    align-items: flex-end;
    padding: 10px 13px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(31, 70, 72, .06);
}

    .migration-timing span[b-ejqisaoaq1],
    .migration-timing small[b-ejqisaoaq1] {
        color: var(--muted);
        font-size: 9px;
    }

    .migration-timing strong[b-ejqisaoaq1] {
        margin: 3px 0;
        color: var(--teal-dark);
        font-size: 17px;
    }

.migration-progress-track[b-ejqisaoaq1] {
    height: 12px;
    margin: 16px 0 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5eeee;
}

    .migration-progress-track span[b-ejqisaoaq1] {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--gold), #19a0a7, var(--teal));
        box-shadow: 0 0 12px rgba(8, 123, 131, .22);
        transition: width .45s ease;
    }

.migration-progress-meta[b-ejqisaoaq1] {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--muted);
    font-size: 11px;
}

    .migration-progress-meta > strong[b-ejqisaoaq1] {
        color: var(--teal-dark);
        font-size: 15px;
    }

    .migration-progress-meta .success[b-ejqisaoaq1] {
        color: #188257;
    }

    .migration-progress-meta .failed[b-ejqisaoaq1] {
        color: #c34444;
    }

.job-controls[b-ejqisaoaq1] {
    display: flex;
    gap: 8px;
    margin-right: auto;
}

.pause-button[b-ejqisaoaq1] {
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid #dfb661;
    border-radius: 10px;
    background: #fff8e9;
    color: #865b09;
    font-family: inherit;
    font-weight: 900;
    cursor: pointer;
}

.migration-log[b-ejqisaoaq1] {
    margin-top: 15px;
    border-top: 1px solid #dbe8e8;
}

    .migration-log summary[b-ejqisaoaq1] {
        padding: 13px 2px 8px;
        color: var(--teal-dark);
        font-size: 11px;
        font-weight: 900;
        cursor: pointer;
    }

.migration-log-list[b-ejqisaoaq1] {
    display: grid;
    max-height: 290px;
    gap: 6px;
    overflow: auto;
}

.migration-log-row[b-ejqisaoaq1] {
    display: grid;
    grid-template-columns: 30px 120px 1fr 70px;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid #e0eaea;
    border-radius: 10px;
    background: #fff;
    font-size: 10px;
}

    .migration-log-row .log-state[b-ejqisaoaq1] {
        display: grid;
        width: 25px;
        height: 25px;
        place-items: center;
        border-radius: 8px;
        background: #edf2f2;
        font-weight: 900;
    }

    .migration-log-row.succeeded .log-state[b-ejqisaoaq1] {
        background: #e1f6ea;
        color: #15804f;
    }

    .migration-log-row.failed .log-state[b-ejqisaoaq1] {
        background: #ffe8e8;
        color: #c33c3c;
    }

    .migration-log-row p[b-ejqisaoaq1] {
        grid-column: 2 / -1;
        margin: 0;
        color: #b03b3b;
    }

@media (max-width: 760px) {
    .migration-progress-head[b-ejqisaoaq1],
    .migration-progress-meta[b-ejqisaoaq1] {
        align-items: stretch;
        flex-direction: column;
    }

    .migration-timing[b-ejqisaoaq1] {
        align-items: flex-start;
    }

    .job-controls[b-ejqisaoaq1] {
        margin: 0;
    }

    .migration-log-row[b-ejqisaoaq1] {
        grid-template-columns: 30px 1fr auto;
    }
}

.settings-header[b-ejqisaoaq1] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

    .settings-header > div > span[b-ejqisaoaq1] {
        color: var(--teal);
        font-size: 12px;
        font-weight: 900;
    }

    .settings-header h1[b-ejqisaoaq1] {
        margin: 5px 0;
        font-size: clamp(25px, 2.2vw, 34px);
    }

    .settings-header p[b-ejqisaoaq1],
    .card-title p[b-ejqisaoaq1] {
        margin: 0;
        color: var(--muted);
    }

.storage-path[b-ejqisaoaq1] {
    min-width: min(100%, 480px);
    padding: 12px 15px;
    border: 1px solid #cce1e1;
    border-radius: 13px;
    background: rgba(255, 255, 255, .85);
}

    .storage-path small[b-ejqisaoaq1] {
        display: block;
        margin-bottom: 5px;
        color: var(--muted);
    }

    .storage-path code[b-ejqisaoaq1] {
        direction: ltr;
        display: block;
        color: var(--teal-dark);
        font-weight: 800;
        overflow-wrap: anywhere;
    }

.settings-grid[b-ejqisaoaq1] {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.settings-card[b-ejqisaoaq1],
.loading-card[b-ejqisaoaq1] {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 9px 25px rgba(30, 67, 70, .045);
}

.card-title[b-ejqisaoaq1] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

    .card-title h2[b-ejqisaoaq1] {
        margin: 0 0 3px;
        font-size: 18px;
    }

    .card-title p[b-ejqisaoaq1] {
        font-size: 12px;
    }

.icon[b-ejqisaoaq1] {
    display: grid;
    flex: 0 0 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    font-size: 18px;
}

    .icon.teal[b-ejqisaoaq1] {
        color: #05717a;
        background: #e5f5f5;
    }

    .icon.gold[b-ejqisaoaq1] {
        color: #9a6811;
        background: #fff2d8;
    }

    .icon.blue[b-ejqisaoaq1] {
        color: #2565a5;
        background: #e9f2ff;
    }

.logo-panel[b-ejqisaoaq1] {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 10px 15px;
    margin-bottom: 20px;
    padding: 14px;
    border: 1px dashed #bfd8d9;
    border-radius: 15px;
    background: #f8fbfb;
}

.logo-preview[b-ejqisaoaq1] {
    grid-row: span 2;
    display: grid;
    width: 120px;
    height: 82px;
    place-items: center;
    overflow: hidden;
    border-radius: 11px;
    background: #087780;
    color: #fff;
}

    .logo-preview img[b-ejqisaoaq1] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.upload-button[b-ejqisaoaq1] {
    position: relative;
    display: inline-flex;
    width: fit-content;
    padding: 10px 15px;
    border-radius: 10px;
    background: var(--teal);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

    .upload-button input[b-ejqisaoaq1] {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

.logo-panel > small[b-ejqisaoaq1] {
    color: var(--muted);
}

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

    .form-grid label[b-ejqisaoaq1] {
        display: flex;
        flex-direction: column;
        gap: 7px;
    }

        .form-grid label > span[b-ejqisaoaq1] {
            font-size: 12px;
            font-weight: 900;
        }

        .form-grid label > small[b-ejqisaoaq1] {
            color: var(--muted);
            font-size: 10px;
        }

    .form-grid input:not([type="range"])[b-ejqisaoaq1] {
        width: 100%;
        min-height: 46px;
        padding: 0 13px;
        border: 1px solid #cbdede;
        border-radius: 11px;
        outline: none;
        background: #fbfdfd;
        color: var(--ink);
        font-family: inherit;
        transition: .18s ease;
    }

    .form-grid input:focus[b-ejqisaoaq1] {
        border-color: var(--teal);
        box-shadow: 0 0 0 3px rgba(8, 123, 131, .11);
        background: #fff;
    }

    .form-grid .wide[b-ejqisaoaq1] {
        grid-column: 1 / -1;
    }

.input-suffix[b-ejqisaoaq1] {
    position: relative;
}

    .input-suffix b[b-ejqisaoaq1] {
        position: absolute;
        top: 50%;
        left: 12px;
        color: var(--muted);
        transform: translateY(-50%);
    }

.quality-control[b-ejqisaoaq1] {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid #cbdede;
    border-radius: 11px;
    background: #fbfdfd;
}

    .quality-control input[b-ejqisaoaq1] {
        flex: 1;
        accent-color: var(--teal);
    }

    .quality-control strong[b-ejqisaoaq1] {
        min-width: 48px;
        color: var(--teal);
        text-align: left;
    }

.conversion-note[b-ejqisaoaq1] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
    padding: 12px;
    border-radius: 12px;
    background: #eaf8f3;
    color: #176b52;
}

    .conversion-note > span[b-ejqisaoaq1] {
        font-size: 22px;
    }

    .conversion-note small[b-ejqisaoaq1] {
        display: block;
        margin-top: 2px;
    }

.primary-button[b-ejqisaoaq1],
.outline-button[b-ejqisaoaq1],
.danger-outline[b-ejqisaoaq1] {
    min-height: 42px;
    padding: 0 17px;
    border-radius: 11px;
    font-family: inherit;
    font-weight: 900;
    cursor: pointer;
}

.primary-button[b-ejqisaoaq1] {
    border: 0;
    background: var(--teal);
    color: #fff;
}

.outline-button[b-ejqisaoaq1] {
    margin-right: auto;
    border: 1px solid #b9d2d3;
    background: #fff;
    color: var(--teal-dark);
}

.danger-outline[b-ejqisaoaq1] {
    border: 1px solid #efb8b8;
    background: #fff8f8;
    color: #b83a3a;
}

button:disabled[b-ejqisaoaq1] {
    opacity: .5;
    cursor: not-allowed;
}

.maintenance-title[b-ejqisaoaq1] {
    margin-bottom: 16px;
}

.maintenance-stats[b-ejqisaoaq1] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

    .maintenance-stats > div[b-ejqisaoaq1] {
        padding: 15px;
        border-top: 3px solid var(--teal);
        border-radius: 12px;
        background: #f7fbfb;
    }

    .maintenance-stats span[b-ejqisaoaq1] {
        display: block;
        color: var(--muted);
        font-size: 11px;
    }

    .maintenance-stats strong[b-ejqisaoaq1] {
        display: block;
        margin-top: 5px;
        font-size: 24px;
    }

    .maintenance-stats .green[b-ejqisaoaq1] {
        border-color: #29a66f;
    }

    .maintenance-stats .gold[b-ejqisaoaq1] {
        border-color: #d8a532;
    }

    .maintenance-stats .red[b-ejqisaoaq1] {
        border-color: #dd5454;
    }

    .maintenance-stats .purple[b-ejqisaoaq1] {
        border-color: #8061c9;
    }

.maintenance-empty[b-ejqisaoaq1] {
    padding: 35px;
    border: 1px dashed #cbdede;
    border-radius: 13px;
    color: var(--muted);
    text-align: center;
}

.maintenance-actions[b-ejqisaoaq1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 15px;
}

    .maintenance-actions > div[b-ejqisaoaq1] {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 5px 15px;
        align-items: center;
        padding: 15px;
        border: 1px solid var(--line);
        border-radius: 13px;
    }

    .maintenance-actions small[b-ejqisaoaq1] {
        color: var(--muted);
    }

    .maintenance-actions button[b-ejqisaoaq1] {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

.scan-details[b-ejqisaoaq1] {
    margin-top: 13px;
    padding: 12px 15px;
    border-radius: 12px;
    background: #f7fafa;
}

    .scan-details summary[b-ejqisaoaq1] {
        color: var(--teal-dark);
        font-weight: 800;
        cursor: pointer;
    }

    .scan-details ul[b-ejqisaoaq1] {
        max-height: 180px;
        overflow: auto;
        margin-bottom: 0;
    }

.notice[b-ejqisaoaq1] {
    margin-bottom: 15px;
    padding: 13px 16px;
    border-radius: 12px;
    font-weight: 800;
}

    .notice.success[b-ejqisaoaq1] {
        background: #e9f8f1;
        color: #176b4e;
    }

    .notice.error[b-ejqisaoaq1] {
        background: #fff0f0;
        color: #b23b3b;
    }

@media (max-width: 1050px) {
    .settings-grid[b-ejqisaoaq1] {
        grid-template-columns: 1fr;
    }

    .maintenance-stats[b-ejqisaoaq1] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .settings-page[b-ejqisaoaq1] {
        padding: 16px;
    }

    .settings-header[b-ejqisaoaq1] {
        align-items: stretch;
        flex-direction: column;
    }

    .form-grid[b-ejqisaoaq1],
    .maintenance-actions[b-ejqisaoaq1],
    .maintenance-stats[b-ejqisaoaq1] {
        grid-template-columns: 1fr;
    }

    .logo-panel[b-ejqisaoaq1] {
        grid-template-columns: 1fr;
    }

    .logo-preview[b-ejqisaoaq1] {
        grid-row: auto;
        width: 100%;
    }

    .maintenance-actions > div[b-ejqisaoaq1] {
        grid-template-columns: 1fr;
    }

    .maintenance-actions button[b-ejqisaoaq1] {
        grid-column: auto;
        grid-row: auto;
        margin-top: 8px;
    }
}

/* ========================================
   Company identity editor
   ======================================== */

.company-card[b-ejqisaoaq1] {
    padding: 24px;
    container-type: inline-size;
    overflow: hidden;
}

.identity-editor[b-ejqisaoaq1] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.logo-showcase[b-ejqisaoaq1] {
    display: grid;
    grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
    padding: 18px;
    border: 1px solid #d6e6e6;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(8, 123, 131, .055), transparent 55%), #fbfdfd;
}

.logo-preview-card[b-ejqisaoaq1] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
}

.preview-label[b-ejqisaoaq1] {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.logo-showcase .logo-preview[b-ejqisaoaq1] {
    display: grid;
    width: 100%;
    height: 128px;
    padding: 12px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 15px;
    background: linear-gradient(145deg, #087b83, #075c63);
    box-shadow: 0 10px 25px rgba(7, 92, 99, .17);
}

    .logo-showcase .logo-preview img[b-ejqisaoaq1] {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.logo-placeholder[b-ejqisaoaq1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

    .logo-placeholder strong[b-ejqisaoaq1] {
        font-size: 23px;
    }

    .logo-placeholder span[b-ejqisaoaq1] {
        margin-top: 5px;
        font-size: 11px;
        opacity: .75;
    }

.logo-upload-area[b-ejqisaoaq1] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 13px;
}

.upload-copy[b-ejqisaoaq1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .upload-copy strong[b-ejqisaoaq1] {
        color: var(--ink);
        font-size: 14px;
    }

    .upload-copy span[b-ejqisaoaq1] {
        color: var(--muted);
        font-size: 11px;
        line-height: 1.7;
    }

.modern-upload-button[b-ejqisaoaq1] {
    display: inline-flex;
    min-height: 42px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 0;
    border-radius: 11px;
    background: var(--teal);
    color: white;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 7px 16px rgba(8, 123, 131, .16);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

    .modern-upload-button:hover[b-ejqisaoaq1] {
        background: var(--teal-dark);
        box-shadow: 0 10px 22px rgba(8, 123, 131, .22);
        transform: translateY(-1px);
    }

    .modern-upload-button:focus-visible[b-ejqisaoaq1] {
        outline: 0;
        box-shadow: 0 0 0 4px rgba(8, 123, 131, .12);
    }

.logo-picker[b-ejqisaoaq1] {
    display: flex;
    min-height: 78px;
    min-width: 0;
    align-items: center;
    gap: 13px;
    padding: 12px;
    border: 1px dashed #8bbfc2;
    border-radius: 15px;
    background: #f3fafa;
}

.selected-file[b-ejqisaoaq1] {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
}

    .selected-file strong[b-ejqisaoaq1] {
        overflow: hidden;
        color: var(--ink);
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .selected-file small[b-ejqisaoaq1] {
        color: var(--muted);
        font-size: 10px;
    }

/* InputFile renders an inner input; ::deep is required with isolated CSS. */
[b-ejqisaoaq1] input.logo-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
}

.upload-icon[b-ejqisaoaq1] {
    display: grid;
    flex: 0 0 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: var(--teal);
    color: white;
    font-size: 22px;
    font-weight: 900;
}

.logo-requirements[b-ejqisaoaq1] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

    .logo-requirements span[b-ejqisaoaq1] {
        padding: 5px 9px;
        border: 1px solid #d5e6e6;
        border-radius: 999px;
        background: white;
        color: #5c7477;
        font-size: 9px;
        font-weight: 800;
    }

.upload-text[b-ejqisaoaq1] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

    .upload-text strong[b-ejqisaoaq1] {
        font-size: 13px;
    }

    .upload-text small[b-ejqisaoaq1] {
        color: var(--muted);
        font-size: 10px;
    }

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

.modern-field[b-ejqisaoaq1] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
}

.company-code-field[b-ejqisaoaq1] {
    grid-column: 1 / -1;
    max-width: 55%;
}

.field-label[b-ejqisaoaq1] {
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
}

.field-control[b-ejqisaoaq1] {
    display: flex;
    min-height: 50px;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    border: 1px solid #cadae0;
    border-radius: 13px;
    background: #fbfdfd;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

    .field-control:focus-within[b-ejqisaoaq1] {
        border-color: var(--teal);
        background: white;
        box-shadow: 0 0 0 4px rgba(8, 123, 131, .11);
    }

    .field-control input[b-ejqisaoaq1] {
        width: 100%;
        min-width: 0;
        height: 46px;
        padding: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--ink);
        font-family: inherit;
        font-size: 13px;
        font-weight: 700;
    }

        .field-control input[b-ejqisaoaq1]::placeholder {
            color: #9badaf;
            font-weight: 500;
        }

.field-icon[b-ejqisaoaq1] {
    display: grid;
    flex: 0 0 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    background: #e6f4f4;
    color: var(--teal-dark);
    font-size: 10px;
    font-weight: 900;
}

.field-help[b-ejqisaoaq1] {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.6;
}

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

        .logo-showcase .logo-preview[b-ejqisaoaq1] {
            max-width: 280px;
            margin-inline: auto;
        }

    .logo-picker[b-ejqisaoaq1] {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .selected-file[b-ejqisaoaq1] {
        min-width: 180px;
    }

    .modern-upload-button[b-ejqisaoaq1] {
        width: 100%;
    }

    .company-fields[b-ejqisaoaq1] {
        grid-template-columns: 1fr;
    }

    .company-code-field[b-ejqisaoaq1] {
        grid-column: auto;
        max-width: none;
    }
}

/* The sidebar can leave a narrow content column even on a wide monitor.
   A container query makes the identity editor react to its real width. */
@container (max-width: 650px) {
    .logo-showcase[b-ejqisaoaq1] {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 14px;
    }

    .logo-preview-card[b-ejqisaoaq1] {
        width: 100%;
    }

    .logo-showcase .logo-preview[b-ejqisaoaq1] {
        width: 100%;
        max-width: 360px;
        height: 120px;
        margin-inline: auto;
    }

    .logo-upload-area[b-ejqisaoaq1],
    .logo-picker[b-ejqisaoaq1],
    .selected-file[b-ejqisaoaq1] {
        width: 100%;
        min-width: 0;
    }

    .logo-picker[b-ejqisaoaq1] {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        align-items: center;
    }

    .modern-upload-button[b-ejqisaoaq1] {
        grid-column: 1 / -1;
        width: 100%;
    }

    .logo-requirements[b-ejqisaoaq1] {
        justify-content: center;
    }

    .company-fields[b-ejqisaoaq1] {
        grid-template-columns: 1fr;
    }

    .company-code-field[b-ejqisaoaq1] {
        grid-column: auto;
        max-width: none;
    }
}

@media (max-width: 560px) {
    .settings-page[b-ejqisaoaq1] {
        padding: 14px;
    }

    .settings-card[b-ejqisaoaq1],
    .company-card[b-ejqisaoaq1] {
        padding: 16px;
        border-radius: 14px;
    }

    .settings-header[b-ejqisaoaq1] {
        align-items: stretch;
        flex-direction: column;
    }

    .storage-path[b-ejqisaoaq1] {
        min-width: 0;
        width: 100%;
    }
}

.backup-card[b-ejqisaoaq1] {
    margin-top: 16px;
    border-top: 3px solid #0f7c86;
}

.backup-title[b-ejqisaoaq1] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

    .backup-title .green[b-ejqisaoaq1] {
        color: #087f5b;
        background: #e8f8f1;
    }

.backup-empty[b-ejqisaoaq1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding: 16px 18px;
    color: #52636d;
    background: linear-gradient(135deg, #f7fbfb, #fffdf7);
    border: 1px dashed #b8d4d6;
    border-radius: 14px;
}

.backup-policy[b-ejqisaoaq1] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

    .backup-policy > div[b-ejqisaoaq1] {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 3px 9px;
        align-items: center;
        padding: 12px 14px;
        border: 1px solid #d7e8e8;
        border-radius: 13px;
        background: linear-gradient(135deg, #f7fbfb, #fffdf7);
    }

    .backup-policy .policy-icon[b-ejqisaoaq1] {
        grid-row: 1 / span 2;
        display: grid;
        width: 34px;
        height: 34px;
        place-items: center;
        border-radius: 10px;
        color: #08717a;
        background: #e3f4f4;
        font-weight: 900;
    }

    .backup-policy strong[b-ejqisaoaq1] {
        color: #153b41;
        font-size: 13px;
    }

    .backup-policy small[b-ejqisaoaq1] {
        color: #6c7f87;
        font-size: 11px;
    }

.backup-summary[b-ejqisaoaq1] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

    .backup-summary > div[b-ejqisaoaq1] {
        display: grid;
        gap: 4px;
        min-height: 72px;
        padding: 12px 14px;
        background: #f8fbfb;
        border: 1px solid #d8e7e8;
        border-radius: 13px;
    }

    .backup-summary span[b-ejqisaoaq1] {
        color: #6d7d86;
        font-size: 12px;
    }

    .backup-summary strong[b-ejqisaoaq1] {
        color: #12363c;
        font-size: 15px;
    }

    .backup-summary .encrypted-state[b-ejqisaoaq1] {
        color: #087f5b;
    }

.backup-progress-track[b-ejqisaoaq1] {
    height: 13px;
    margin-top: 16px;
    overflow: hidden;
    background: #e7eff0;
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(15, 64, 70, .12);
}

    .backup-progress-track span[b-ejqisaoaq1] {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, #d8b45e, #139ca5, #086c75);
        border-radius: inherit;
        transition: width .4s ease;
    }

.backup-progress-caption[b-ejqisaoaq1] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 9px;
    color: #61747c;
    font-size: 13px;
}

    .backup-progress-caption strong[b-ejqisaoaq1] {
        min-width: 48px;
        color: #087581;
        font-size: 16px;
    }

    .backup-progress-caption small[b-ejqisaoaq1] {
        margin-inline-start: auto;
    }

.backup-success[b-ejqisaoaq1],
.backup-error[b-ejqisaoaq1] {
    margin-top: 13px;
    padding: 13px 16px;
    border-radius: 12px;
}

.backup-success[b-ejqisaoaq1] {
    color: #11633f;
    background: #eaf8f1;
    border: 1px solid #bde7d1;
}

.backup-success[b-ejqisaoaq1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

    .backup-success div[b-ejqisaoaq1] {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

.download-backup-button[b-ejqisaoaq1],
.activate-restore-button[b-ejqisaoaq1] {
    min-height: 42px;
    padding: 0 17px;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, #0c8c94, #08646c);
    box-shadow: 0 8px 18px rgba(8, 100, 108, .18);
    font-family: inherit;
    font-weight: 900;
    cursor: pointer;
}

.restore-card[b-ejqisaoaq1] {
    margin-top: 16px;
}

.restore-manual-notice[b-ejqisaoaq1] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 14px;
    padding: 13px 15px;
    border: 1px solid #e7c875;
    border-radius: 12px;
    color: #684d05;
    background: #fff9e7;
}

.restore-manual-notice strong[b-ejqisaoaq1] {
    font-size: 14px;
}

.restore-manual-notice span[b-ejqisaoaq1] {
    line-height: 1.7;
    font-size: 12px;
}

.restore-title[b-ejqisaoaq1] {
    margin-bottom: 16px;
}

.restore-picker[b-ejqisaoaq1] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 17px;
    border: 1px dashed #9bc9cc;
    border-radius: 14px;
    background: linear-gradient(135deg, #f8fdfd, #f2f8f8);
}

    .restore-picker > div[b-ejqisaoaq1] {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 4px;
    }

    .restore-picker span[b-ejqisaoaq1] {
        color: var(--muted);
        font-size: 11px;
    }

.restore-progress-head[b-ejqisaoaq1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
}

    .restore-progress-head > div[b-ejqisaoaq1] {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 7px 10px;
    }

    .restore-progress-head small[b-ejqisaoaq1] {
        grid-column: 1 / -1;
        color: var(--muted);
    }

    .restore-progress-head > b[b-ejqisaoaq1] {
        color: var(--teal);
        font-size: 21px;
    }

.restore-comparison[b-ejqisaoaq1] {
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid #d9e7e7;
    border-radius: 14px;
    background: #ffffff;
}

.comparison-title[b-ejqisaoaq1] {
    padding: 13px 15px;
    color: var(--teal-dark);
    background: #eef7f7;
    font-size: 13px;
    font-weight: 900;
}

.comparison-head[b-ejqisaoaq1],
.restore-comparison[b-ejqisaoaq1]  .comparison-row {
    display: grid;
    grid-template-columns: minmax(110px, 1.4fr) minmax(90px, 1fr) minmax(90px, 1fr);
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #e5eeee;
}

.comparison-head[b-ejqisaoaq1] {
    color: var(--muted);
    background: #fbfdfd;
    font-size: 11px;
    font-weight: 800;
}

    .comparison-head span[b-ejqisaoaq1] {
        padding-inline: 8px;
        text-align: center;
    }

        .comparison-head span:first-child[b-ejqisaoaq1] {
            text-align: start;
        }

.restore-comparison[b-ejqisaoaq1]  .comparison-row > span {
    align-self: center;
    color: #34555a;
    font-size: 12px;
    font-weight: 800;
}

.restore-comparison[b-ejqisaoaq1]  .comparison-row strong {
    display: block;
    min-width: 0;
    padding: 8px;
    border: 1px solid #dceaea;
    border-radius: 9px;
    color: #183b40;
    background: #f7fbfb;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

    .restore-comparison[b-ejqisaoaq1]  .comparison-row strong:last-child {
        color: #087984;
        border-color: #b9dddd;
        background: #edf8f8;
    }

@media (max-width: 560px) {
    .comparison-head[b-ejqisaoaq1],
    .restore-comparison[b-ejqisaoaq1]  .comparison-row {
        grid-template-columns: minmax(75px, 1.2fr) minmax(65px, 1fr) minmax(65px, 1fr);
        gap: 5px;
        padding: 8px;
    }

    .comparison-head[b-ejqisaoaq1] {
        font-size: 9px;
    }

    .restore-comparison[b-ejqisaoaq1]  .comparison-row > span,
    .restore-comparison[b-ejqisaoaq1]  .comparison-row strong {
        font-size: 10px;
    }
}

.restore-checks[b-ejqisaoaq1],
.restore-actions[b-ejqisaoaq1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
}

    .restore-checks span[b-ejqisaoaq1] {
        padding: 7px 10px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 900;
    }

    .restore-checks .ok[b-ejqisaoaq1] {
        color: #12724a;
        background: #e4f7ed;
    }

    .restore-checks .warning[b-ejqisaoaq1] {
        color: #8a5a00;
        background: #fff2cc;
    }

    .restore-checks .bad[b-ejqisaoaq1] {
        color: #a83238;
        background: #ffe8e9;
    }

.restore-actions[b-ejqisaoaq1] {
    justify-content: flex-end;
}

@media (max-width: 700px) {
    .backup-success[b-ejqisaoaq1],
    .restore-picker[b-ejqisaoaq1],
    .restore-progress-head[b-ejqisaoaq1] {
        align-items: stretch;
        flex-direction: column;
    }

    .restore-upload-button[b-ejqisaoaq1],
    .download-backup-button[b-ejqisaoaq1],
    .activate-restore-button[b-ejqisaoaq1] {
        width: 100%;
    }
}

.backup-error[b-ejqisaoaq1] {
    color: #a72d32;
    background: #fff0f0;
    border: 1px solid #f2c1c3;
}

@media (max-width: 1000px) {
    .backup-policy[b-ejqisaoaq1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .backup-summary[b-ejqisaoaq1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .backup-policy[b-ejqisaoaq1] {
        grid-template-columns: 1fr;
    }

    .backup-title[b-ejqisaoaq1] {
        grid-template-columns: auto minmax(0, 1fr);
    }

        .backup-title .primary-button[b-ejqisaoaq1] {
            grid-column: 1 / -1;
            width: 100%;
        }

    .backup-summary[b-ejqisaoaq1] {
        grid-template-columns: 1fr;
    }

    .backup-empty[b-ejqisaoaq1],
    .backup-progress-caption[b-ejqisaoaq1] {
        align-items: stretch;
        flex-direction: column;
    }

        .backup-progress-caption small[b-ejqisaoaq1] {
            margin-inline-start: 0;
        }
}
/* /Components/Pages/UserPermissions.razor.rz.scp.css */
.permissions-page[b-e8az363xe7]{display:grid;gap:1rem}.page-head[b-e8az363xe7]{display:flex;justify-content:space-between;align-items:center}.page-head h1[b-e8az363xe7]{margin:.2rem 0;color:#073e46}.page-head span[b-e8az363xe7]{color:#087d85;font-weight:800}.page-head p[b-e8az363xe7]{color:#6b7f83}.outline[b-e8az363xe7],.save[b-e8az363xe7]{border-radius:11px;padding:.75rem 1rem;font-weight:800}.outline[b-e8az363xe7]{background:#fff;border:1px solid #bfd5d8}.save[b-e8az363xe7]{justify-self:start;background:#087d85;color:#fff;border:0}.permission-group[b-e8az363xe7]{background:#fff;border:1px solid #d9e5e6;border-radius:16px;overflow:hidden}.permission-group h2[b-e8az363xe7]{margin:0;padding:1rem 1.2rem;background:#f3f8f8;color:#184c52}.permission-row[b-e8az363xe7]{display:grid;grid-template-columns:minmax(220px,1fr) 260px 90px;gap:1rem;align-items:center;padding:.8rem 1.2rem;border-top:1px solid #edf2f2}.permission-row small[b-e8az363xe7]{display:block;color:#829396;direction:ltr;text-align:right}.permission-row select[b-e8az363xe7]{border:1px solid #c7dadd;border-radius:10px;padding:.65rem}.effective[b-e8az363xe7]{padding:.4rem;border-radius:999px;text-align:center;font-weight:800}.effective.yes[b-e8az363xe7]{background:#e4f7ed;color:#137342}.effective.no[b-e8az363xe7]{background:#ffeded;color:#a52b2b}.notice[b-e8az363xe7],.empty[b-e8az363xe7]{background:#eef8f7;border-radius:12px;padding:1rem}@media(max-width:700px){.permission-row[b-e8az363xe7]{grid-template-columns:1fr}.page-head[b-e8az363xe7]{align-items:flex-start;gap:1rem;flex-direction:column}}
/* /Components/Pages/Users.razor.rz.scp.css */
.users-page[b-13rjvts0yf] {
    max-width: 1500px;
    margin: 0 auto;
}

.page-header[b-13rjvts0yf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

    .page-header h1[b-13rjvts0yf] {
        margin: 0;
        color: #102a43;
        font-size: 25px;
    }

    .page-header p[b-13rjvts0yf] {
        margin: 7px 0 0;
        color: #667085;
    }

.primary-button[b-13rjvts0yf],
.secondary-button[b-13rjvts0yf],
.danger-button[b-13rjvts0yf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 700;
}

.primary-button[b-13rjvts0yf] {
    border: 1px solid #174d7c;
    background: #174d7c;
    color: #fff;
}

.secondary-button[b-13rjvts0yf] {
    border: 1px solid #d0d7e2;
    background: #fff;
    color: #344054;
}

.danger-button[b-13rjvts0yf] {
    border: 1px solid #b42318;
    background: #b42318;
    color: #fff;
}

button:disabled[b-13rjvts0yf] {
    cursor: not-allowed;
    opacity: 0.65;
}

.filters-card[b-13rjvts0yf] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid #e1e7ee;
    border-radius: 12px;
    background: #fff;
}

.search-box[b-13rjvts0yf] {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 8px;
    min-height: 43px;
    padding: 0 13px;
    border: 1px solid #d8dee8;
    border-radius: 9px;
}

    .search-box input[b-13rjvts0yf] {
        width: 100%;
        border: 0;
        outline: 0;
        background: transparent;
    }

.filters-card select[b-13rjvts0yf] {
    min-width: 170px;
    min-height: 43px;
    padding: 0 12px;
    border: 1px solid #d8dee8;
    border-radius: 9px;
    background: #fff;
}

.result-count[b-13rjvts0yf] {
    color: #667085;
    font-size: 13px;
}

.table-card[b-13rjvts0yf] {
    min-height: 350px;
    overflow: hidden;
    border: 1px solid #e1e7ee;
    border-radius: 13px;
    background: #fff;
}

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

table[b-13rjvts0yf] {
    width: 100%;
    border-collapse: collapse;
}

th[b-13rjvts0yf] {
    padding: 15px 16px;
    background: #f7f9fc;
    color: #475467;
    text-align: right;
    font-size: 13px;
    white-space: nowrap;
}

td[b-13rjvts0yf] {
    padding: 14px 16px;
    border-top: 1px solid #edf0f4;
    color: #344054;
    font-size: 14px;
    white-space: nowrap;
}

tbody tr:hover[b-13rjvts0yf] {
    background: #fafcff;
}

.user-name-cell[b-13rjvts0yf] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar[b-13rjvts0yf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    background: #eaf2fa;
    color: #174d7c;
    font-weight: 800;
}

.username[b-13rjvts0yf] {
    font-family: Consolas, monospace;
    color: #475467;
}

.role-badge[b-13rjvts0yf] {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 20px;
    background: #eef4fa;
    color: #174d7c;
    font-size: 12px;
    font-weight: 700;
}

.status-badge[b-13rjvts0yf] {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

    .status-badge.active[b-13rjvts0yf] {
        background: #dcfce7;
        color: #166534;
    }

    .status-badge.inactive[b-13rjvts0yf] {
        background: #f2f4f7;
        color: #667085;
    }

.actions[b-13rjvts0yf] {
    display: flex;
    gap: 7px;
}

.icon-button[b-13rjvts0yf] {
    width: 35px;
    height: 35px;
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
}

    .icon-button.edit[b-13rjvts0yf] {
        border: 1px solid #b9cde0;
        color: #174d7c;
    }

    .icon-button.delete[b-13rjvts0yf] {
        border: 1px solid #fecaca;
        color: #b42318;
    }

.loading-state[b-13rjvts0yf],
.empty-state[b-13rjvts0yf] {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 350px;
    text-align: center;
}

.spinner[b-13rjvts0yf] {
    width: 38px;
    height: 38px;
    border: 4px solid #dbe5ef;
    border-top-color: #174d7c;
    border-radius: 50%;
    animation: spin-b-13rjvts0yf 0.8s linear infinite;
}

@keyframes spin-b-13rjvts0yf {
    to {
        transform: rotate(360deg);
    }
}

.empty-icon[b-13rjvts0yf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: #edf3f8;
    color: #174d7c;
    font-size: 29px;
}

.alert[b-13rjvts0yf] {
    margin-bottom: 16px;
    padding: 13px 16px;
    border-radius: 9px;
    font-size: 14px;
}

.success-alert[b-13rjvts0yf] {
    border: 1px solid #a7f3d0;
    background: #ecfdf3;
    color: #166534;
}

.error-alert[b-13rjvts0yf] {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b42318;
}

.modal-backdrop[b-13rjvts0yf] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.58);
}

.modal-card[b-13rjvts0yf] {
    width: min(680px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 25px 70px rgba(15, 23, 42, 0.25);
}

.modal-header[b-13rjvts0yf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 21px 23px;
    border-bottom: 1px solid #e8ecf1;
}

    .modal-header h2[b-13rjvts0yf] {
        margin: 0;
        color: #1d2939;
        font-size: 20px;
    }

    .modal-header p[b-13rjvts0yf] {
        margin: 5px 0 0;
        color: #667085;
        font-size: 13px;
    }

.close-button[b-13rjvts0yf] {
    width: 35px;
    height: 35px;
    border: 0;
    border-radius: 7px;
    background: #f2f4f7;
    cursor: pointer;
    font-size: 22px;
}

.modal-body[b-13rjvts0yf] {
    padding: 22px 23px;
}

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

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

.form-group label[b-13rjvts0yf] {
    display: block;
    margin-bottom: 7px;
    color: #344054;
    font-size: 14px;
    font-weight: 700;
}

    .form-group label small[b-13rjvts0yf] {
        margin-right: 6px;
        color: #98a2b3;
        font-weight: 400;
    }

.form-group input[b-13rjvts0yf],
.form-group select[b-13rjvts0yf] {
    box-sizing: border-box;
    width: 100%;
    min-height: 43px;
    padding: 0 12px;
    border: 1px solid #d0d7e2;
    border-radius: 8px;
    background: #fff;
    outline: none;
}

    .form-group input:focus[b-13rjvts0yf],
    .form-group select:focus[b-13rjvts0yf] {
        border-color: #174d7c;
        box-shadow: 0 0 0 3px rgba(23, 77, 124, 0.1);
    }

.validation-message[b-13rjvts0yf] {
    display: block;
    margin-top: 5px;
    color: #b42318;
    font-size: 12px;
}

.checkbox-group[b-13rjvts0yf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-footer[b-13rjvts0yf] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 17px 23px;
    border-top: 1px solid #e8ecf1;
    background: #fafbfc;
}

.confirm-modal[b-13rjvts0yf] {
    width: min(480px, 100%);
    padding-top: 28px;
    text-align: center;
}

    .confirm-modal h2[b-13rjvts0yf] {
        margin: 12px 0 8px;
    }

    .confirm-modal p[b-13rjvts0yf] {
        padding: 0 25px;
        color: #667085;
    }

.confirm-icon[b-13rjvts0yf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto;
    border-radius: 50%;
    background: #fee2e2;
    color: #b42318;
    font-size: 28px;
    font-weight: 800;
}

@media (max-width: 850px) {
    .page-header[b-13rjvts0yf],
    .filters-card[b-13rjvts0yf] {
        align-items: stretch;
        flex-direction: column;
    }

        .filters-card select[b-13rjvts0yf] {
            width: 100%;
        }

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

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

.field-note[b-13rjvts0yf] {
    display: block;
    margin-top: 6px;
    color: #667085;
    font-size: 12px;
}

.form-group input:disabled[b-13rjvts0yf] {
    background: #f2f4f7;
    color: #667085;
    cursor: not-allowed;
}

/* NAB LED polished user dialog */
.user-form-modal[b-13rjvts0yf] {
    width: min(580px, 100%);
    overflow: hidden;
    border: 1px solid rgba(17, 121, 135, 0.16);
    border-top: 4px solid #117987;
    border-radius: 17px;
    box-shadow: 0 28px 80px rgba(4, 63, 73, 0.28);
}

.user-form-modal .modal-header[b-13rjvts0yf] {
    padding: 20px 24px 18px;
    background:
        linear-gradient(135deg, rgba(17, 121, 135, 0.06), rgba(223, 183, 96, 0.07)),
        #fff;
}

.user-form-modal .modal-header h2[b-13rjvts0yf] {
    color: #0b5965;
    font-size: 21px;
    font-weight: 800;
}

.user-form-modal .close-button[b-13rjvts0yf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe6e7;
    background: #fff;
    color: #527076;
    transition: background 0.18s ease, color 0.18s ease;
}

.user-form-modal .close-button:hover[b-13rjvts0yf] {
    background: #eef7f7;
    color: #075865;
}

.user-form-modal .modal-body[b-13rjvts0yf] {
    padding: 21px 24px 24px;
}

.form-intro[b-13rjvts0yf] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 19px;
    padding: 13px 14px;
    border: 1px solid #e7d19c;
    border-radius: 12px;
    background: linear-gradient(135deg, #fffaf0, #f8fbfb);
}

.form-intro-icon[b-13rjvts0yf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #e5f2f3;
    color: #0b6875;
    font-size: 22px;
}

.form-intro strong[b-13rjvts0yf] {
    color: #153238;
    font-size: 14px;
}

.form-intro p[b-13rjvts0yf] {
    margin: 3px 0 0;
    color: #718286;
    font-size: 12px;
}

.user-form-modal .form-grid[b-13rjvts0yf] {
    grid-template-columns: 1fr;
    gap: 16px;
}

.user-form-modal .full-width[b-13rjvts0yf] {
    grid-column: auto;
}

.user-form-modal .form-group[b-13rjvts0yf] {
    margin: 0;
}

.user-form-modal .form-group label[b-13rjvts0yf] {
    margin-bottom: 7px;
    color: #27484e;
    font-size: 13px;
    font-weight: 800;
}

.required[b-13rjvts0yf] {
    color: #d14343;
}

.user-form-modal .form-control[b-13rjvts0yf] {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #cbdadd;
    border-radius: 10px;
    background: #fbfdfd;
    color: #16343a;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.user-form-modal select.form-control[b-13rjvts0yf] {
    cursor: pointer;
}

.user-form-modal .form-control:hover[b-13rjvts0yf] {
    border-color: #9dbfc3;
    background: #fff;
}

.user-form-modal .form-control:focus[b-13rjvts0yf] {
    border-color: #117987;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(17, 121, 135, 0.12);
}

.user-form-modal .form-control:disabled[b-13rjvts0yf] {
    border-color: #e0e6e7;
    background: #f1f4f4;
    color: #718286;
}

.user-form-modal .checkbox-group[b-13rjvts0yf] {
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid #dbe6e7;
    border-radius: 10px;
    background: #f8fbfb;
}

.user-form-modal .checkbox-group input[b-13rjvts0yf] {
    width: 17px;
    height: 17px;
    accent-color: #117987;
}

.user-form-modal .checkbox-group label[b-13rjvts0yf] {
    color: #27484e;
    font-size: 13px;
    font-weight: 700;
}

.user-form-modal .modal-footer[b-13rjvts0yf] {
    padding: 16px 24px;
    background: #f7faf9;
}

.user-form-modal .primary-button[b-13rjvts0yf] {
    min-width: 145px;
    border-color: #0c6d79;
    background: linear-gradient(135deg, #117987, #075865);
    box-shadow: 0 7px 16px rgba(7, 88, 101, 0.18);
}

.user-form-modal .primary-button:hover[b-13rjvts0yf] {
    background: linear-gradient(135deg, #168997, #075865);
}

.user-form-modal .secondary-button[b-13rjvts0yf] {
    min-width: 88px;
}

.users-page > .page-header .primary-button[b-13rjvts0yf] {
    border-color: #0c6d79;
    background: linear-gradient(135deg, #117987, #075865);
}

@media (max-width: 600px) {
    .modal-backdrop[b-13rjvts0yf] {
        align-items: flex-end;
        padding: 10px;
    }

    .user-form-modal[b-13rjvts0yf] {
        max-height: 94vh;
        border-radius: 16px 16px 10px 10px;
    }

    .user-form-modal .modal-header[b-13rjvts0yf],
    .user-form-modal .modal-body[b-13rjvts0yf],
    .user-form-modal .modal-footer[b-13rjvts0yf] {
        padding-right: 17px;
        padding-left: 17px;
    }
}
/* /Components/Shared/LatestAuditLogs.razor.rz.scp.css */
.latest-audit-card[b-jc2ktl677z] {
    height: 100%;
    padding: 20px;
    background: white;
    border: 1px solid #dfe6ef;
    border-radius: 15px;
    box-shadow: 0 5px 18px rgba(20, 43, 74, 0.04);
}

.latest-audit-header[b-jc2ktl677z] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid #edf1f5;
}

    .latest-audit-header h3[b-jc2ktl677z] {
        margin: 0 0 5px;
        color: #172238;
        font-size: 17px;
        font-weight: 800;
    }

    .latest-audit-header p[b-jc2ktl677z] {
        margin: 0;
        color: #8993a4;
        font-size: 12px;
    }

.latest-audit-link[b-jc2ktl677z] {
    color: #285d91;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.latest-audit-list[b-jc2ktl677z] {
    padding-top: 5px;
}

.latest-audit-item[b-jc2ktl677z] {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #f0f2f5;
}

    .latest-audit-item:last-child[b-jc2ktl677z] {
        border-bottom: 0;
    }

.latest-audit-icon[b-jc2ktl677z] {
    width: 36px;
    height: 36px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 800;
}

.latest-icon-green[b-jc2ktl677z] {
    color: #087247;
    background: #e5f8ef;
}

.latest-icon-blue[b-jc2ktl677z] {
    color: #205eb7;
    background: #e8f1ff;
}

.latest-icon-purple[b-jc2ktl677z] {
    color: #6941c6;
    background: #f0eaff;
}

.latest-icon-orange[b-jc2ktl677z] {
    color: #966300;
    background: #fff2d6;
}

.latest-icon-dark[b-jc2ktl677z] {
    color: #344054;
    background: #e9edf2;
}

.latest-icon-red[b-jc2ktl677z] {
    color: #b42318;
    background: #fee9e7;
}

.latest-icon-gray[b-jc2ktl677z] {
    color: #596579;
    background: #eef1f4;
}

.latest-audit-content[b-jc2ktl677z] {
    min-width: 0;
    flex: 1;
}

.latest-audit-top-row[b-jc2ktl677z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

    .latest-audit-top-row strong[b-jc2ktl677z] {
        color: #263247;
        font-size: 13px;
    }

    .latest-audit-top-row > span[b-jc2ktl677z] {
        color: #96a0af;
        font-size: 10px;
        white-space: nowrap;
    }

.latest-audit-content p[b-jc2ktl677z] {
    margin: 5px 0 8px;
    overflow: hidden;
    color: #5e697b;
    font-size: 12px;
    line-height: 1.6;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.latest-audit-meta[b-jc2ktl677z] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .latest-audit-meta small[b-jc2ktl677z] {
        color: #8a95a6;
        font-size: 10px;
    }

.latest-audit-badge[b-jc2ktl677z] {
    padding: 4px 8px;
    color: #596579;
    background: #eef1f4;
    border-radius: 15px;
    font-size: 9px;
    font-weight: 700;
}

.latest-badge-green[b-jc2ktl677z] {
    color: #087247;
    background: #e5f8ef;
}

.latest-badge-blue[b-jc2ktl677z] {
    color: #205eb7;
    background: #e8f1ff;
}

.latest-badge-purple[b-jc2ktl677z] {
    color: #6941c6;
    background: #f0eaff;
}

.latest-badge-orange[b-jc2ktl677z] {
    color: #966300;
    background: #fff2d6;
}

.latest-badge-dark[b-jc2ktl677z] {
    color: #344054;
    background: #e9edf2;
}

.latest-badge-red[b-jc2ktl677z] {
    color: #b42318;
    background: #fee9e7;
}

.latest-audit-loading[b-jc2ktl677z],
.latest-audit-empty[b-jc2ktl677z] {
    padding: 55px 15px;
    color: #8993a4;
    text-align: center;
    font-size: 12px;
}

    .latest-audit-empty span[b-jc2ktl677z] {
        display: block;
        margin-bottom: 8px;
        font-size: 28px;
    }

    .latest-audit-empty p[b-jc2ktl677z] {
        margin: 0;
    }

@media (max-width: 650px) {
    .latest-audit-header[b-jc2ktl677z] {
        flex-direction: column;
    }

    .latest-audit-link[b-jc2ktl677z] {
        align-self: flex-end;
    }
}
/* /Components/Shared/NotificationBell.razor.rz.scp.css */
.notification-bell-wrapper[b-wrsuzh9kfg] {
    position: relative;
}

.notification-bell-button[b-wrsuzh9kfg] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border: 1px solid #dce3eb;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: 20px;
}

    .notification-bell-button:hover[b-wrsuzh9kfg] {
        background: #f8fafc;
    }

.notification-count[b-wrsuzh9kfg] {
    position: absolute;
    top: -6px;
    left: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}

.notification-dropdown[b-wrsuzh9kfg] {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    z-index: 500;
    width: min(390px, calc(100vw - 35px));
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 22px 55px rgba(15, 23, 42, .2);
}

.notification-dropdown-header[b-wrsuzh9kfg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 16px;
    border-bottom: 1px solid #e2e8f0;
}

    .notification-dropdown-header div[b-wrsuzh9kfg] {
        display: flex;
        flex-direction: column;
    }

    .notification-dropdown-header span[b-wrsuzh9kfg] {
        margin-top: 3px;
        color: #64748b;
        font-size: 12px;
    }

    .notification-dropdown-header button[b-wrsuzh9kfg] {
        border: 0;
        background: transparent;
        color: #2563eb;
        cursor: pointer;
        font-size: 12px;
        font-weight: 700;
    }

.notification-list[b-wrsuzh9kfg] {
    max-height: 430px;
    overflow-y: auto;
}

.notification-item[b-wrsuzh9kfg] {
    display: flex;
    width: 100%;
    gap: 11px;
    padding: 13px 15px;
    border: 0;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
    text-align: right;
    cursor: pointer;
}

    .notification-item:hover[b-wrsuzh9kfg] {
        background: #f8fafc;
    }

    .notification-item.unread[b-wrsuzh9kfg] {
        background: #eff6ff;
    }

.notification-type-icon[b-wrsuzh9kfg] {
    flex: 0 0 34px;
    font-size: 20px;
}

.notification-item-content[b-wrsuzh9kfg] {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
}

    .notification-item-content strong[b-wrsuzh9kfg] {
        color: #0f172a;
        font-size: 13px;
    }

    .notification-item-content > span[b-wrsuzh9kfg] {
        margin-top: 4px;
        overflow: hidden;
        color: #475569;
        font-size: 12px;
        line-height: 1.6;
        text-overflow: ellipsis;
    }

    .notification-item-content small[b-wrsuzh9kfg] {
        margin-top: 5px;
        color: #94a3b8;
    }

.notification-state[b-wrsuzh9kfg] {
    padding: 28px 16px;
    color: #64748b;
    text-align: center;
}

.notification-error[b-wrsuzh9kfg] {
    color: #b91c1c;
}

.view-all-notifications[b-wrsuzh9kfg] {
    width: 100%;
    padding: 12px;
    border: 0;
    border-top: 1px solid #e2e8f0;
    background: #fff;
    color: #2563eb;
    cursor: pointer;
    font-weight: 800;
}

@media (max-width: 600px) {
    .notification-dropdown[b-wrsuzh9kfg] {
        position: fixed;
        top: 72px;
        right: 12px;
        left: 12px;
        width: auto;
    }
}
/* /Components/Shared/PwaInstallPrompt.razor.rz.scp.css */
.pwa-install-button[b-4kx2vnydwd] {
    position: fixed;
    z-index: 1200;
    left: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #dfb760;
    border-radius: 12px;
    background: #075865;
    color: #fff;
    box-shadow: 0 12px 28px rgba(4, 63, 73, .25);
    font-weight: 800;
}

.pwa-install-help[b-4kx2vnydwd] {
    position: fixed;
    z-index: 1201;
    left: 18px;
    bottom: 72px;
    width: min(330px, calc(100vw - 36px));
    padding: 16px 18px;
    border: 1px solid #bed7da;
    border-radius: 14px;
    background: #fff;
    color: #173d45;
    box-shadow: 0 16px 38px rgba(4, 63, 73, .22);
}
.pwa-install-help > button[b-4kx2vnydwd] {
    position: absolute;
    top: 8px;
    left: 10px;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 22px;
    cursor: pointer;
}
.pwa-install-help strong[b-4kx2vnydwd] { display: block; padding-left: 20px; color: #075865; }
.pwa-install-help p[b-4kx2vnydwd] { margin: 8px 0 0; color: #526d74; line-height: 1.7; font-size: 13px; }

/* NAB MOBILE PWA V2 START */

@media (max-width: 700px) {
    .pwa-install-button[b-4kx2vnydwd] {
        left: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        min-height: 38px !important;
        padding: 0 12px !important;
        border-radius: 10px !important;
        font-size: 11px !important;
    }

    .pwa-install-help[b-4kx2vnydwd] {
        left: 10px !important;
        bottom: calc(58px + env(safe-area-inset-bottom)) !important;
        width: calc(100vw - 20px) !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
    }

    .pwa-install-help strong[b-4kx2vnydwd] {
        padding-left: 22px !important;
        font-size: 13px !important;
    }

    .pwa-install-help p[b-4kx2vnydwd] {
        margin-top: 5px !important;
        line-height: 1.55 !important;
        font-size: 11px !important;
    }
}

/* NAB MOBILE PWA V2 END */