/* /Layout/AuthLayout.razor.rz.scp.css */
.auth-wrapper[b-zznp1gen3i] {
    min-height: 100vh;
    background: linear-gradient(145deg, rgb(3, 28, 78) 0%, rgb(5, 39, 103) 35%, #3a0647 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

/* Decorative background circles */
.auth-deco[b-zznp1gen3i] {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.auth-deco--top[b-zznp1gen3i] {
    width: 500px;
    height: 500px;
    border: 80px solid rgba(255, 255, 255, 0.04);
    top: -180px;
    right: -120px;
}

.auth-deco--bottom[b-zznp1gen3i] {
    width: 350px;
    height: 350px;
    border: 60px solid rgba(255, 255, 255, 0.04);
    bottom: -120px;
    left: -80px;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-pns156trqd] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-pns156trqd] {
    flex: 1;
}

.sidebar[b-pns156trqd] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

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

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

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

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

/* ── User Info ── */
.user-info[b-pns156trqd] {
    display: flex;
    align-items: center;
}

.user-badge[b-pns156trqd] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.75rem;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 100%);
    border-radius: 2rem;
    border: 1px solid #dce3ff;
}

.user-avatar[b-pns156trqd] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.user-details[b-pns156trqd] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.user-name[b-pns156trqd] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
}

.user-role[b-pns156trqd] {
    font-size: 0.7rem;
    color: #6366f1;
    font-weight: 500;
}

/* ── Logout Button ── */
.btn-logout[b-pns156trqd] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 1rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: #dc2626;
    background: #fff;
    border: 1px solid #fca5a5;
    border-radius: 2rem;
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
}

    .btn-logout:hover[b-pns156trqd] {
        background: #fef2f2;
        border-color: #f87171;
        color: #b91c1c;
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
    }

    .btn-logout:disabled[b-pns156trqd] {
        opacity: 0.7;
        cursor: not-allowed;
    }

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

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

    .user-badge[b-pns156trqd] {
        padding: 0.25rem 0.5rem;
    }

    .user-avatar[b-pns156trqd] {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .user-name[b-pns156trqd] {
        font-size: 0.8rem;
    }

    .user-role[b-pns156trqd] {
        font-size: 0.65rem;
    }
}

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

    .sidebar[b-pns156trqd] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

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

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

    .top-row[b-pns156trqd], article[b-pns156trqd] {
        padding-right: 2rem !important;
        padding-left: 1.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-hixclbj1cv] {
    background-color: rgba(255, 255, 255, 0.1);
}

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

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

.bi[b-hixclbj1cv] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.75rem;
    top: -1px;
    background-size: cover;
    flex-shrink: 0;
}

.bi-house-door-fill-nav-menu[b-hixclbj1cv] {
    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-hixclbj1cv] {
    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-hixclbj1cv] {
    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");
}

.bi-bar-chart-fill-nav-menu[b-hixclbj1cv] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Crect width='4' height='5' x='1' y='10' rx='1'/%3E%3Crect width='4' height='9' x='6' y='6' rx='1'/%3E%3Crect width='4' height='14' x='11' y='1' rx='1'/%3E%3C/svg%3E");
}

.bi-box-seam-fill-nav-menu[b-hixclbj1cv] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-box-seam-fill' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M15.528 2.973a.75.75 0 0 1 .472.696v8.662a.75.75 0 0 1-.472.696l-7.25 4.575a.75.75 0 0 1-.758 0L.472 13.027A.75.75 0 0 1 0 12.331V3.669a.75.75 0 0 1 .472-.696L7.724.128a1.25 1.25 0 0 1 1.052 0l6.25 3.845Zm-1.375.725L8 2.215 1.347 3.698 8 5.181l6.653-1.483ZM.472 4.398v7.838L7.25 15.86V6.272L.472 4.398Zm7.778 1.082 6.653 1.483v7.838l-6.653-3.575V5.48Z'/%3E%3C/svg%3E");
}

.bi-people-fill-nav-menu[b-hixclbj1cv] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-people-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7Zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-5.784 6A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216ZM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z'/%3E%3C/svg%3E");
}

.bi-shield-lock-fill-nav-menu[b-hixclbj1cv] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-shield-lock-fill' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.8 11.8 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7 7 0 0 0 1.048-.625 11.8 11.8 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.54 1.54 0 0 0-1.044-1.263 63 63 0 0 0-2.887-.87C9.843.266 8.69 0 8 0m0 5a1.5 1.5 0 0 1 .5 2.915l.385 1.99a.5.5 0 0 1-.491.595h-.788a.5.5 0 0 1-.49-.595l.384-1.99A1.5 1.5 0 0 1 8 5'/%3E%3C/svg%3E");
}

/* ── Nav items ── */
.nav-item[b-hixclbj1cv] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

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

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

    .nav-item[b-hixclbj1cv]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

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

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

/* ── Collapsible group toggle button ── */
.nav-group-toggle[b-hixclbj1cv] {
    width: 100%;
    background: none;
    border: none;
    padding: 0 0.75rem;
    color: #d7d7d7;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .nav-group-toggle:hover[b-hixclbj1cv] {
        background-color: rgba(255,255,255,0.1);
        color: white;
    }

    .nav-group-toggle.expanded[b-hixclbj1cv] {
        color: white;
        background-color: rgba(255,255,255,0.08);
    }

.nav-group-label[b-hixclbj1cv] {
    flex: 1;
    text-align: right;
}

/* Chevron icon — rotates on expand */
.nav-chevron[b-hixclbj1cv] {
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    flex-shrink: 0;
    opacity: 0.7;
    transition: transform 0.28s ease;
}

.nav-group-toggle.expanded .nav-chevron[b-hixclbj1cv] {
    transform: rotate(180deg);
}

/* ── Submenu: grid-based smooth animation ── */
.nav-submenu[b-hixclbj1cv] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
}

    .nav-submenu.open[b-hixclbj1cv] {
        grid-template-rows: 1fr;
    }

.nav-submenu-inner[b-hixclbj1cv] {
    overflow: hidden;
}

/* Sub-links indented from the right (RTL) */
.nav-item[b-hixclbj1cv]  a.nav-sub-link {
    height: 2.6rem;
    line-height: 2.6rem;
    padding-inline-start: 2.75rem;
    font-size: 0.85rem;
    color: rgba(215, 215, 215, 0.75);
    border-radius: 4px;
    position: relative;
}

    .nav-item[b-hixclbj1cv]  a.nav-sub-link::before {
        content: '';
        position: absolute;
        inset-inline-end: 1.1rem;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: rgba(255,255,255,0.4);
    }

    .nav-item[b-hixclbj1cv]  a.nav-sub-link.active::before {
        background-color: white;
    }

/* ── Backdrop overlay (mobile only) ── */
.nav-backdrop[b-hixclbj1cv] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1050;
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .nav-backdrop.show[b-hixclbj1cv] {
        display: block;
        opacity: 1;
    }

/* ── Mobile: right-side drawer ── */
@media (max-width: 640.98px) {
    .nav-scrollable[b-hixclbj1cv] {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 280px;
        background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
        z-index: 1055;
        transform: translateX(110%);
        transition: transform 0.3s ease-in-out;
        overflow-y: auto;
        padding-top: 0.5rem;
        box-shadow: -4px 0 16px rgba(0, 0, 0, 0.35);
    }

        .nav-scrollable.nav-open[b-hixclbj1cv] {
            transform: translateX(0);
        }
}

/* ── Desktop: normal sidebar ── */
@media (min-width: 641px) {
    .navbar-toggler[b-hixclbj1cv] {
        display: none;
    }

    .nav-backdrop[b-hixclbj1cv] {
        display: none !important;
    }

    .nav-scrollable[b-hixclbj1cv] {
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/Home.razor.rz.scp.css */
/* ===================================================
   Home/Dashboard - Styles
   =================================================== */

/* ── Welcome Card ── */
.welcome-card[b-sf6rx04oxw] {
    background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 100%);
    border-radius: 1rem;
}

.welcome-avatar[b-sf6rx04oxw] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* ── Dashboard Cards ── */
.dashboard-card[b-sf6rx04oxw] {
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.25s ease;
    background: #ffffff;
}

    .dashboard-card:hover[b-sf6rx04oxw] {
        transform: translateY(-4px);
        box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.1) !important;
    }

.dashboard-icon[b-sf6rx04oxw] {
    width: 52px;
    height: 52px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.bg-primary-subtle[b-sf6rx04oxw] {
    background-color: #e0e7ff !important;
}

.bg-success-subtle[b-sf6rx04oxw] {
    background-color: #d1fae5 !important;
}

.bg-warning-subtle[b-sf6rx04oxw] {
    background-color: #fef3c7 !important;
}

.text-primary-emphasis[b-sf6rx04oxw] {
    color: #4338ca !important;
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
    .welcome-avatar[b-sf6rx04oxw] {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .dashboard-icon[b-sf6rx04oxw] {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }
}
/* /Pages/Login.razor.rz.scp.css */
/* ── Card shell ── */
.login-card[b-cfc0xu4o1r] {
    width: 100%;
    max-width: 420px;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.06);
    position: relative;
    z-index: 1;
}

/* ── Gradient header ── */
.login-card__header[b-cfc0xu4o1r] {
    background: linear-gradient(145deg, rgb(5, 39, 103) 0%, #3a0647 100%);
    padding: 2.5rem 2rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.login-card__header[b-cfc0xu4o1r]::before {
    content: '';
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    border: 36px solid rgba(255,255,255,0.06);
    top: -80px;
    left: -60px;
}

.login-card__logo-wrap[b-cfc0xu4o1r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 1rem;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    margin-bottom: 1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.login-card__app-name[b-cfc0xu4o1r] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.4rem;
    letter-spacing: -0.3px;
}

.login-card__tagline[b-cfc0xu4o1r] {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.65);
    margin-bottom: 0;
}

/* ── White form body ── */
.login-card__body[b-cfc0xu4o1r] {
    background: #ffffff;
    padding: 2rem 2rem 2.25rem;
}

/* ── Input groups ── */
.login-input-group[b-cfc0xu4o1r] {
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s ease;
}

.login-input-group:focus-within[b-cfc0xu4o1r] {
    box-shadow: 0 0 0 3px rgba(5, 39, 103, 0.12);
}

.login-input-icon[b-cfc0xu4o1r] {
    background: #f8f9fc;
    border-color: #e5e9f0;
    color: #6b7ba4;
    padding: 0 1rem;
}

.login-input[b-cfc0xu4o1r] {
    border-color: #e5e9f0;
    background: #f8f9fc;
    font-size: 0.925rem;
}

.login-input:focus[b-cfc0xu4o1r] {
    background: #fff;
    border-color: #e5e9f0;
    box-shadow: none;
}

/* Remove double border between input-group items */
.login-input-group .input-group-text + .form-floating .login-input[b-cfc0xu4o1r] {
    border-inline-start: 0;
}

.login-input-group .form-floating .login-input:not(:last-child)[b-cfc0xu4o1r] {
    border-inline-end: 0;
}

/* Floating label color */
.login-card__body .form-floating > label[b-cfc0xu4o1r] {
    color: #8a96b0;
    font-size: 0.9rem;
}

/* ── Eye toggle button ── */
.login-eye-btn[b-cfc0xu4o1r] {
    background: #f8f9fc;
    border-color: #e5e9f0;
    border-inline-start: 0;
    color: #8a96b0;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    padding: 0 1rem;
}

.login-eye-btn:hover[b-cfc0xu4o1r] {
    background: #eef0f6;
    color: #3a4a6b;
}

/* ── Validation message ── */
.login-validation-msg[b-cfc0xu4o1r] {
    display: block;
    font-size: 0.8rem;
    color: #dc3545;
    margin-top: 0.35rem;
    padding-inline-start: 0.25rem;
}

/* ── Submit button ── */
.login-submit-btn[b-cfc0xu4o1r] {
    background: linear-gradient(135deg, rgb(5, 39, 103) 0%, #3a0647 100%);
    color: #fff;
    border: none;
    border-radius: 0.75rem;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
    box-shadow: 0 6px 20px rgba(58, 6, 71, 0.35);
    margin-top: 0.25rem;
}

.login-submit-btn:hover:not(:disabled)[b-cfc0xu4o1r] {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(58, 6, 71, 0.45);
}

.login-submit-btn:active:not(:disabled)[b-cfc0xu4o1r] {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(58, 6, 71, 0.35);
}

.login-submit-btn:disabled[b-cfc0xu4o1r] {
    opacity: 0.72;
    cursor: not-allowed;
    color: #fff;
}

/* ── Mobile ── */
@media (max-width: 480px) {
    .login-card[b-cfc0xu4o1r] {
        border-radius: 1.25rem;
    }

    .login-card__header[b-cfc0xu4o1r] {
        padding: 2rem 1.5rem 1.75rem;
    }

    .login-card__body[b-cfc0xu4o1r] {
        padding: 1.5rem 1.5rem 2rem;
    }
}
/* /Pages/ProductChangeLogs.razor.rz.scp.css */
/* ===================================================
   ProductChangeLogs - Responsive modal table styles
   Bootstrap 5 + Flexbox + RTL
   =================================================== */

/* ---------- Product name header ---------- */
[b-zon6dtp8kw] .fw-bold.text-dark {
    color: #2c3e50;
    font-size: 1rem;
}

[b-zon6dtp8kw] .fw-bold.text-dark .bi-box-seam {
    font-size: 1.2rem;
    vertical-align: -2px;
}

/* ---------- Table Wrapper (Custom Responsive) ---------- */
[b-zon6dtp8kw] .table-responsive-custom {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c5cad1 transparent;
}

    [b-zon6dtp8kw] .table-responsive-custom::-webkit-scrollbar {
        height: 6px;
    }

    [b-zon6dtp8kw] .table-responsive-custom::-webkit-scrollbar-thumb {
        background: #c5cad1;
        border-radius: 3px;
    }

/* ---------- Table ---------- */
[b-zon6dtp8kw] .table {
    margin-bottom: 0;
    font-size: 0.92rem;
}

    [b-zon6dtp8kw] .table > thead {
        background: linear-gradient(180deg, #f8f9fb 0%, #eef1f5 100%);
    }

        [b-zon6dtp8kw] .table > thead th {
            border-bottom: 2px solid #e3e6ea;
            color: #4a5568;
            font-weight: 600;
            font-size: 0.85rem;
            text-transform: none;
            letter-spacing: 0.3px;
            padding: 0.9rem 1rem;
            white-space: nowrap;
        }

    [b-zon6dtp8kw] .table > tbody > tr {
        transition: background-color 0.2s ease, transform 0.15s ease;
    }

        [b-zon6dtp8kw] .table > tbody > tr:hover {
            background-color: #f5f9ff !important;
        }

        [b-zon6dtp8kw] .table > tbody > tr > td {
            padding: 0.85rem 1rem;
            vertical-align: middle;
            border-color: #f0f2f5;
        }

/* ---------- Change type badges ---------- */
[b-zon6dtp8kw] .badge {
    font-weight: 500;
    letter-spacing: 0.3px;
    padding: 0.45em 0.75em;
}

[b-zon6dtp8kw] .bg-success-subtle {
    background-color: #d1f2e1 !important;
}

[b-zon6dtp8kw] .text-success-emphasis {
    color: #0f5132 !important;
}

[b-zon6dtp8kw] .bg-warning-subtle {
    background-color: #fff3cd !important;
}

[b-zon6dtp8kw] .text-warning-emphasis {
    color: #664d03 !important;
}

[b-zon6dtp8kw] .bg-danger-subtle {
    background-color: #f8d7da !important;
}

[b-zon6dtp8kw] .text-danger-emphasis {
    color: #58151c !important;
}

/* ---------- Text formatting ---------- */
[b-zon6dtp8kw] .text-success {
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
}

/* ---------- Empty State ---------- */
[b-zon6dtp8kw] tbody tr td.text-muted .bi-inbox {
    color: #cbd3da;
    opacity: 0.7;
}

/* ---------- Pagination ---------- */
[b-zon6dtp8kw] .pagination .page-link {
    border-radius: 0.5rem !important;
    margin: 0 2px;
    border: 1px solid #e3e6ea;
    color: #495057;
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    transition: all 0.2s ease;
}

    [b-zon6dtp8kw] .pagination .page-link:hover {
        background: #e9f1ff;
        border-color: #b6d4fe;
        color: #0d6efd;
        transform: translateY(-1px);
    }

[b-zon6dtp8kw] .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    border-color: #0a58ca;
    color: #fff;
    box-shadow: 0 3px 8px rgba(13, 110, 253, 0.3);
}

[b-zon6dtp8kw] .pagination .page-item.disabled .page-link {
    background: #f8f9fa;
    color: #adb5bd;
    border-color: #e9ecef;
}

/* ===================================================
   RESPONSIVE - Mobile (<768px)
   تبدیل جدول به کارت با Flexbox
   =================================================== */
@media (max-width: 767.98px) {

    [b-zon6dtp8kw] .fw-bold.text-dark {
        font-size: 0.95rem;
    }

    /* مخفی کردن header جدول در موبایل */
    [b-zon6dtp8kw] .table > thead {
        display: none;
    }

    [b-zon6dtp8kw] .table,
    [b-zon6dtp8kw] .table > tbody,
    [b-zon6dtp8kw] .table > tbody > tr,
    [b-zon6dtp8kw] .table > tbody > tr > td {
        display: block;
        width: 100%;
    }

        /* هر row یک کارت جدا */
        [b-zon6dtp8kw] .table > tbody > tr {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin: 0.5rem 0;
            padding: 1rem;
            background: #ffffff;
            border: 1px solid #eef0f3;
            border-radius: 0.85rem;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
            transition: all 0.25s ease;
        }

            [b-zon6dtp8kw] .table > tbody > tr:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
                border-color: #b6d4fe;
            }

            /* هر سلول به Flexbox افقی تبدیل می‌شود */
            [b-zon6dtp8kw] .table > tbody > tr > td {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0.55rem 0.25rem;
                border: none;
                border-bottom: 1px dashed #eef0f3;
                font-size: 0.9rem;
            }

                [b-zon6dtp8kw] .table > tbody > tr > td:last-child {
                    border-bottom: none;
                }

                /* نمایش label از طریق data-label */
                [b-zon6dtp8kw] .table > tbody > tr > td::before {
                    content: attr(data-label);
                    font-weight: 600;
                    color: #6c757d;
                    font-size: 0.8rem;
                    margin-left: 1rem;
                }

    /* خالی بودن داده‌ها */
    [b-zon6dtp8kw] tbody tr td[colspan] {
        display: block !important;
        text-align: center;
    }

        [b-zon6dtp8kw] tbody tr td[colspan]::before {
            content: none;
        }

    /* Pagination در موبایل */
    [b-zon6dtp8kw] .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ===================================================
   Small Mobile (<480px)
   =================================================== */
@media (max-width: 479.98px) {
    [b-zon6dtp8kw] .pagination .page-link {
        min-width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }

    [b-zon6dtp8kw] .fw-bold.text-dark {
        font-size: 0.9rem;
    }
}

/* ===================================================
   Animations
   =================================================== */
[b-zon6dtp8kw] .table > tbody > tr {
    animation: fadeInRow-b-zon6dtp8kw 0.35s ease both;
}

@keyframes fadeInRow-b-zon6dtp8kw {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

/* ===================================================
   SVG Icons via CSS Mask
   =================================================== */

[b-zon6dtp8kw] .bi-box-seam,
[b-zon6dtp8kw] .bi-plus-circle,
[b-zon6dtp8kw] .bi-pencil-square,
[b-zon6dtp8kw] .bi-trash,
[b-zon6dtp8kw] .bi-inbox,
[b-zon6dtp8kw] .bi-chevron-right,
[b-zon6dtp8kw] .bi-chevron-left {
    font-family: inherit !important;
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

    [b-zon6dtp8kw] .bi-box-seam::before,
    [b-zon6dtp8kw] .bi-plus-circle::before,
    [b-zon6dtp8kw] .bi-pencil-square::before,
    [b-zon6dtp8kw] .bi-trash::before,
    [b-zon6dtp8kw] .bi-inbox::before,
    [b-zon6dtp8kw] .bi-chevron-right::before,
    [b-zon6dtp8kw] .bi-chevron-left::before {
        content: none !important;
    }

/* Box Seam Icon */
[b-zon6dtp8kw] .bi-box-seam {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2zm3.564 1.426L5.596 5 8 5.961 14.154 3.5zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2zm3.564 1.426L5.596 5 8 5.961 14.154 3.5zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464z'/></svg>");
}

/* Plus Circle Icon */
[b-zon6dtp8kw] .bi-plus-circle {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/><path d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/><path d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4'/></svg>");
}

/* Pencil Square Icon */
[b-zon6dtp8kw] .bi-pencil-square {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z'/><path fill-rule='evenodd' d='M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z'/><path fill-rule='evenodd' d='M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z'/></svg>");
}

/* Trash Icon */
[b-zon6dtp8kw] .bi-trash {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/><path d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3h11V2h-11v1z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/><path d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3h11V2h-11v1z'/></svg>");
}

/* Inbox Icon */
[b-zon6dtp8kw] .bi-inbox {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M4.98 4a.5.5 0 0 0-.39.188L1.54 8H6a.5.5 0 0 1 .5.5 1.5 1.5 0 1 0 3 0A.5.5 0 0 1 10 8h4.46l-3.05-3.812A.5.5 0 0 0 11.02 4zm9.954 5H10.45a2.5 2.5 0 0 1-4.9 0H1.066l.32 2.562a.5.5 0 0 0 .497.438h12.234a.5.5 0 0 0 .496-.438zM3.809 3.563A1.5 1.5 0 0 1 4.981 3h6.038a1.5 1.5 0 0 1 1.172.563l3.7 4.625a.5.5 0 0 1 .105.374l-.39 3.124A1.5 1.5 0 0 1 14.117 13H1.883a1.5 1.5 0 0 1-1.489-1.314l-.39-3.124a.5.5 0 0 1 .106-.374z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M4.98 4a.5.5 0 0 0-.39.188L1.54 8H6a.5.5 0 0 1 .5.5 1.5 1.5 0 1 0 3 0A.5.5 0 0 1 10 8h4.46l-3.05-3.812A.5.5 0 0 0 11.02 4zm9.954 5H10.45a2.5 2.5 0 0 1-4.9 0H1.066l.32 2.562a.5.5 0 0 0 .497.438h12.234a.5.5 0 0 0 .496-.438zM3.809 3.563A1.5 1.5 0 0 1 4.981 3h6.038a1.5 1.5 0 0 1 1.172.563l3.7 4.625a.5.5 0 0 1 .105.374l-.39 3.124A1.5 1.5 0 0 1 14.117 13H1.883a1.5 1.5 0 0 1-1.489-1.314l-.39-3.124a.5.5 0 0 1 .106-.374z'/></svg>");
}

/* Chevron Right (صفحه قبلی در RTL) */
[b-zon6dtp8kw] .bi-chevron-right {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
}

/* Chevron Left (صفحه بعدی در RTL) */
[b-zon6dtp8kw] .bi-chevron-left {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
}
/* /Pages/ProductTable.razor.rz.scp.css */
/* ===================================================
   🎨 ProductTable - Modern & Responsive Styles
   Bootstrap 5 + Flexbox + RTL
   =================================================== */

/* ---------- Card Container ---------- */
[b-xe0e480d9y] .card {
    border-radius: 1rem;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

    [b-xe0e480d9y] .card:hover {
        box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.08) !important;
    }

/* ---------- Card Header ---------- */
[b-xe0e480d9y] .card-header {
    border-bottom: 1px solid #eef0f3;
    padding: 1.1rem 1.25rem;
    background: #ffffff !important;
}

    [b-xe0e480d9y] .card-header h5 {
        font-size: 1.05rem;
        color: #2c3e50;
        letter-spacing: 0.2px;
    }

    [b-xe0e480d9y] .card-header .bi-box-seam {
        font-size: 1.25rem;
        vertical-align: -2px;
    }

/* ---------- Search Input ---------- */
[b-xe0e480d9y] .input-group {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    border-radius: 0.6rem;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.2s ease;
    min-width: 280px;
}

    [b-xe0e480d9y] .input-group:focus-within {
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
        transform: translateY(-1px);
    }

    [b-xe0e480d9y] .input-group .form-control,
    [b-xe0e480d9y] .input-group .input-group-text,
    [b-xe0e480d9y] .input-group .btn {
        border-color: #e3e6ea;
    }

        [b-xe0e480d9y] .input-group .form-control:focus {
            box-shadow: none;
            border-color: #e3e6ea;
        }

[b-xe0e480d9y] .input-group-text .bi-search {
    color: #6c757d;
}

/* ---------- Table Wrapper (Custom Responsive) ---------- */
[b-xe0e480d9y] .table-responsive-custom {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c5cad1 transparent;
}

    [b-xe0e480d9y] .table-responsive-custom::-webkit-scrollbar {
        height: 6px;
    }

    [b-xe0e480d9y] .table-responsive-custom::-webkit-scrollbar-thumb {
        background: #c5cad1;
        border-radius: 3px;
    }

/* ---------- Table ---------- */
[b-xe0e480d9y] .table {
    margin-bottom: 0;
    font-size: 0.92rem;
}

    [b-xe0e480d9y] .table > thead {
        background: linear-gradient(180deg, #f8f9fb 0%, #eef1f5 100%);
    }

        [b-xe0e480d9y] .table > thead th {
            border-bottom: 2px solid #e3e6ea;
            color: #4a5568;
            font-weight: 600;
            font-size: 0.85rem;
            text-transform: none;
            letter-spacing: 0.3px;
            padding: 0.9rem 1rem;
            white-space: nowrap;
        }

    [b-xe0e480d9y] .table > tbody > tr {
        transition: background-color 0.2s ease, transform 0.15s ease;
    }

        [b-xe0e480d9y] .table > tbody > tr:hover {
            background-color: #f5f9ff !important;
        }

        [b-xe0e480d9y] .table > tbody > tr > td {
            padding: 0.85rem 1rem;
            vertical-align: middle;
            border-color: #f0f2f5;
        }

    [b-xe0e480d9y] .table .fw-semibold {
        color: #1f2937;
    }

    [b-xe0e480d9y] .table .text-success {
        font-variant-numeric: tabular-nums;
        font-size: 0.95rem;
    }

/* ---------- Action Buttons ---------- */
[b-xe0e480d9y] .btn-group-sm > .btn {
    border-radius: 0.5rem !important;
    margin: 0 2px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
    border-width: 1.5px;
}

    [b-xe0e480d9y] .btn-group-sm > .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

[b-xe0e480d9y] .btn-outline-primary:hover {
    background: #0d6efd;
    color: #fff;
}

[b-xe0e480d9y] .btn-outline-warning:hover {
    background: #ffc107;
    color: #fff;
}

[b-xe0e480d9y] .btn-outline-info:hover {
    background: #0dcaf0;
    color: #fff;
}

[b-xe0e480d9y] .btn-outline-danger:hover {
    background: #dc3545;
    color: #fff;
}

/* ---------- Empty State ---------- */
[b-xe0e480d9y] tbody tr td.text-muted .bi-inbox {
    color: #cbd3da;
    opacity: 0.7;
}

/* ---------- Loading Overlay ---------- */
[b-xe0e480d9y] .loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 0.5rem;
}

    [b-xe0e480d9y] .loading-overlay .spinner-border {
        width: 3rem;
        height: 3rem;
        border-width: 0.3em;
    }

/* ---------- Alert ---------- */
[b-xe0e480d9y] .alert-danger {
    border: none;
    border-right: 4px solid #dc3545;
    background: #fff5f5;
    color: #842029;
    border-radius: 0.6rem;
}

/* ---------- Card Footer & Pagination ---------- */
[b-xe0e480d9y] .card-footer {
    border-top: 1px solid #eef0f3;
    padding: 0.9rem 1.25rem;
    background: #ffffff !important;
}

[b-xe0e480d9y] .pagination .page-link {
    border-radius: 0.5rem !important;
    margin: 0 2px;
    border: 1px solid #e3e6ea;
    color: #495057;
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    transition: all 0.2s ease;
}

    [b-xe0e480d9y] .pagination .page-link:hover {
        background: #e9f1ff;
        border-color: #b6d4fe;
        color: #0d6efd;
        transform: translateY(-1px);
    }

[b-xe0e480d9y] .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    border-color: #0a58ca;
    color: #fff;
    box-shadow: 0 3px 8px rgba(13, 110, 253, 0.3);
}

[b-xe0e480d9y] .pagination .page-item.disabled .page-link {
    background: #f8f9fa;
    color: #adb5bd;
    border-color: #e9ecef;
}

[b-xe0e480d9y] .form-select-sm {
    border-radius: 0.5rem;
    border-color: #e3e6ea;
    cursor: pointer;
}

/* ===================================================
   📱 RESPONSIVE - Mobile (<768px)
   تبدیل جدول به کارت با Flexbox
   =================================================== */
@media (max-width: 767.98px) {

    [b-xe0e480d9y] .card-header .input-group {
        min-width: 100%;
        margin-top: 0.5rem;
    }

    /* مخفی کردن header جدول در موبایل */
    [b-xe0e480d9y] .table > thead {
        display: none;
    }

    [b-xe0e480d9y] .table,
    [b-xe0e480d9y] .table > tbody,
    [b-xe0e480d9y] .table > tbody > tr,
    [b-xe0e480d9y] .table > tbody > tr > td {
        display: block;
        width: 100%;
    }

        /* هر row یک کارت جدا */
        [b-xe0e480d9y] .table > tbody > tr {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin: 0.75rem;
            padding: 1rem;
            background: #ffffff;
            border: 1px solid #eef0f3;
            border-radius: 0.85rem;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
            transition: all 0.25s ease;
        }

            [b-xe0e480d9y] .table > tbody > tr:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
                border-color: #b6d4fe;
            }

            /* هر سلول به Flexbox افقی تبدیل می‌شود */
            [b-xe0e480d9y] .table > tbody > tr > td {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0.55rem 0.25rem;
                border: none;
                border-bottom: 1px dashed #eef0f3;
                font-size: 0.9rem;
            }

                [b-xe0e480d9y] .table > tbody > tr > td:last-child {
                    border-bottom: none;
                    justify-content: center;
                    padding-top: 0.85rem;
                }

                /* نمایش label از طریق data-label */
                [b-xe0e480d9y] .table > tbody > tr > td::before {
                    content: attr(data-label);
                    font-weight: 600;
                    color: #6c757d;
                    font-size: 0.8rem;
                    margin-left: 1rem;
                }

    /* خالی بودن داده‌ها */
    [b-xe0e480d9y] tbody tr td[colspan] {
        display: block !important;
        text-align: center;
    }

        [b-xe0e480d9y] tbody tr td[colspan]::before {
            content: none;
        }

    /* Pagination در موبایل */
    [b-xe0e480d9y] .card-footer .row {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }

    [b-xe0e480d9y] .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ===================================================
   📲 Small Mobile (<480px)
   =================================================== */
@media (max-width: 479.98px) {
    [b-xe0e480d9y] .pagination .page-link {
        min-width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }

    [b-xe0e480d9y] .card-header h5 {
        font-size: 0.95rem;
    }
}

/* ===================================================
   🎬 Animations
   =================================================== */
[b-xe0e480d9y] .table > tbody > tr {
    animation: fadeInRow-b-xe0e480d9y 0.35s ease both;
}

@keyframes fadeInRow-b-xe0e480d9y {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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



/* ===================================================
   🎯 SVG Icons via CSS Mask
   جایگزین bi-eye / bi-pencil / bi-trash
   =================================================== */

/* پایه مشترک برای آیکون‌های SVG */
[b-xe0e480d9y] .bi-eye,
[b-xe0e480d9y] .bi-pencil,
[b-xe0e480d9y] .bi-clock-history,
[b-xe0e480d9y] .bi-trash {
    /* غیرفعال کردن فونت Bootstrap Icons */
    font-family: inherit !important;
    /* تنظیمات نمایش */
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    /* رنگ از currentColor گرفته می‌شود (مثل فونت آیکون) */
    background-color: currentColor;
    /* Mask تنظیمات */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

    /* جلوگیری از نمایش کاراکتر فونت (در صورت فعال بودن Bootstrap Icons) */
    [b-xe0e480d9y] .bi-eye::before,
    [b-xe0e480d9y] .bi-pencil::before,
    [b-xe0e480d9y] .bi-clock-history::before,
    [b-xe0e480d9y] .bi-trash::before {
        content: none !important;
    }

/* 👁️ Eye Icon */
[b-xe0e480d9y] .bi-eye {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z'/><path d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z'/><path d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/></svg>");
}

/* ✏️ Pencil Icon */
[b-xe0e480d9y] .bi-pencil {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z'/></svg>");
}

/* 🗑️ Trash Icon */
[b-xe0e480d9y] .bi-trash {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/><path d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3h11V2h-11v1z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/><path d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3h11V2h-11v1z'/></svg>");
}

/* 🕐 Clock History Icon */
[b-xe0e480d9y] .bi-clock-history {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022zm2.004.45a7 7 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342zm-1.298.557a7 7 0 0 0-.484-.275l.414-.862c.275.134.54.286.793.455zM9.93 1.28a7 7 0 0 0-.396-.297l.584-.817q.266.193.51.41zM8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0'/><path d='M8 4.5a.5.5 0 0 0-1 0v4a.5.5 0 0 0 .276.447l2.5 1.5a.5.5 0 0 0 .448-.894L8 8.71z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022zm2.004.45a7 7 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342zm-1.298.557a7 7 0 0 0-.484-.275l.414-.862c.275.134.54.286.793.455zM9.93 1.28a7 7 0 0 0-.396-.297l.584-.817q.266.193.51.41zM8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0'/><path d='M8 4.5a.5.5 0 0 0-1 0v4a.5.5 0 0 0 .276.447l2.5 1.5a.5.5 0 0 0 .448-.894L8 8.71z'/></svg>");
}


/* ===================================================
   ◀ ▶ Chevron Icons (Pagination) - SVG via CSS Mask
   جایگزین:
   - bi-chevron-right
   - bi-chevron-double-right
   - bi-chevron-left
   - bi-chevron-double-left
   =================================================== */

[b-xe0e480d9y] .bi-chevron-right,
[b-xe0e480d9y] .bi-chevron-double-right,
[b-xe0e480d9y] .bi-chevron-left,
[b-xe0e480d9y] .bi-chevron-double-left {
    font-family: inherit !important;
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

    /* غیرفعال‌سازی فونت Bootstrap Icons */
    [b-xe0e480d9y] .bi-chevron-right::before,
    [b-xe0e480d9y] .bi-chevron-double-right::before,
    [b-xe0e480d9y] .bi-chevron-left::before,
    [b-xe0e480d9y] .bi-chevron-double-left::before {
        content: none !important;
    }

/* ▶ Chevron Right (صفحه قبلی در RTL) */
[b-xe0e480d9y] .bi-chevron-right {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
}

/* ▶▶ Chevron Double Right (صفحه اول در RTL) */
[b-xe0e480d9y] .bi-chevron-double-right {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z'/><path fill-rule='evenodd' d='M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z'/><path fill-rule='evenodd' d='M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
}

/* ◀ Chevron Left (صفحه بعدی در RTL) */
[b-xe0e480d9y] .bi-chevron-left {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
}

/* ◀◀ Chevron Double Left (آخرین صفحه در RTL) */
[b-xe0e480d9y] .bi-chevron-double-left {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
}

/* ===================================================
   🔍 ✖️ Search & Close Icons - SVG via CSS Mask
   جایگزین:
   - bi-search
   - bi-x-lg
   =================================================== */

/* پایه مشترک */
[b-xe0e480d9y] .bi-search,
[b-xe0e480d9y] .bi-x-lg {
    font-family: inherit !important;
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

    /* غیرفعال‌سازی فونت Bootstrap Icons */
    [b-xe0e480d9y] .bi-search::before,
    [b-xe0e480d9y] .bi-x-lg::before {
        content: none !important;
    }

/* 🔍 Search Icon */
[b-xe0e480d9y] .bi-search {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/></svg>");
}

/* ✖️ X Large (Close) Icon */
[b-xe0e480d9y] .bi-x-lg {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z'/></svg>");
}

/* /Pages/RolesTable.razor.rz.scp.css */
/* ===================================================
   RolesTable - Modern & Responsive Styles
   Bootstrap 5 + Flexbox + RTL
   =================================================== */

/* ---------- Card Container ---------- */
[b-435vfcw9o2] .card {
    border-radius: 1rem;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

    [b-435vfcw9o2] .card:hover {
        box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.08) !important;
    }

/* ---------- Card Header ---------- */
[b-435vfcw9o2] .card-header {
    border-bottom: 1px solid #eef0f3;
    padding: 1.1rem 1.25rem;
    background: #ffffff !important;
}

    [b-435vfcw9o2] .card-header h5 {
        font-size: 1.05rem;
        color: #2c3e50;
        letter-spacing: 0.2px;
    }

/* ---------- Table Wrapper (Custom Responsive) ---------- */
[b-435vfcw9o2] .table-responsive-custom {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c5cad1 transparent;
}

    [b-435vfcw9o2] .table-responsive-custom::-webkit-scrollbar {
        height: 6px;
    }

    [b-435vfcw9o2] .table-responsive-custom::-webkit-scrollbar-thumb {
        background: #c5cad1;
        border-radius: 3px;
    }

/* ---------- Table ---------- */
[b-435vfcw9o2] .table {
    margin-bottom: 0;
    font-size: 0.92rem;
}

    [b-435vfcw9o2] .table > thead {
        background: linear-gradient(180deg, #f8f9fb 0%, #eef1f5 100%);
    }

        [b-435vfcw9o2] .table > thead th {
            border-bottom: 2px solid #e3e6ea;
            color: #4a5568;
            font-weight: 600;
            font-size: 0.85rem;
            text-transform: none;
            letter-spacing: 0.3px;
            padding: 0.9rem 1rem;
            white-space: nowrap;
        }

    [b-435vfcw9o2] .table > tbody > tr {
        transition: background-color 0.2s ease, transform 0.15s ease;
    }

        [b-435vfcw9o2] .table > tbody > tr:hover {
            background-color: #f5f9ff !important;
        }

        [b-435vfcw9o2] .table > tbody > tr > td {
            padding: 0.85rem 1rem;
            vertical-align: middle;
            border-color: #f0f2f5;
        }

    [b-435vfcw9o2] .table .fw-semibold {
        color: #1f2937;
    }

/* ---------- Badge Styles ---------- */
[b-435vfcw9o2] .badge {
    font-weight: 500;
    letter-spacing: 0.3px;
}

[b-435vfcw9o2] .bg-info-subtle {
    background-color: #e0f2fe !important;
}

[b-435vfcw9o2] .text-info-emphasis {
    color: #0c5776 !important;
}

/* ---------- Action Buttons ---------- */
[b-435vfcw9o2] .btn-group-sm > .btn {
    border-radius: 0.5rem !important;
    margin: 0 2px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
    border-width: 1.5px;
}

    [b-435vfcw9o2] .btn-group-sm > .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

[b-435vfcw9o2] .btn-outline-primary:hover {
    background: #0d6efd;
    color: #fff;
}

[b-435vfcw9o2] .btn-outline-warning:hover {
    background: #ffc107;
    color: #fff;
}

[b-435vfcw9o2] .btn-outline-danger:hover {
    background: #dc3545;
    color: #fff;
}

/* ---------- Empty State ---------- */
[b-435vfcw9o2] tbody tr td.text-muted .bi-inbox {
    color: #cbd3da;
    opacity: 0.7;
}

/* ---------- Loading Overlay ---------- */
[b-435vfcw9o2] .loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 0.5rem;
}

    [b-435vfcw9o2] .loading-overlay .spinner-border {
        width: 3rem;
        height: 3rem;
        border-width: 0.3em;
    }

/* ---------- Alert ---------- */
[b-435vfcw9o2] .alert-danger {
    border: none;
    border-right: 4px solid #dc3545;
    background: #fff5f5;
    color: #842029;
    border-radius: 0.6rem;
}

/* ===================================================
   RESPONSIVE - Mobile (<768px)
   =================================================== */
@media (max-width: 767.98px) {

    [b-435vfcw9o2] .table > thead {
        display: none;
    }

    [b-435vfcw9o2] .table,
    [b-435vfcw9o2] .table > tbody,
    [b-435vfcw9o2] .table > tbody > tr,
    [b-435vfcw9o2] .table > tbody > tr > td {
        display: block;
        width: 100%;
    }

        [b-435vfcw9o2] .table > tbody > tr {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin: 0.75rem;
            padding: 1rem;
            background: #ffffff;
            border: 1px solid #eef0f3;
            border-radius: 0.85rem;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
            transition: all 0.25s ease;
        }

            [b-435vfcw9o2] .table > tbody > tr:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
                border-color: #b6d4fe;
            }

            [b-435vfcw9o2] .table > tbody > tr > td {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0.55rem 0.25rem;
                border: none;
                border-bottom: 1px dashed #eef0f3;
                font-size: 0.9rem;
            }

                [b-435vfcw9o2] .table > tbody > tr > td:last-child {
                    border-bottom: none;
                    justify-content: center;
                    padding-top: 0.85rem;
                }

                [b-435vfcw9o2] .table > tbody > tr > td::before {
                    content: attr(data-label);
                    font-weight: 600;
                    color: #6c757d;
                    font-size: 0.8rem;
                    margin-left: 1rem;
                }

    [b-435vfcw9o2] tbody tr td[colspan] {
        display: block !important;
        text-align: center;
    }

        [b-435vfcw9o2] tbody tr td[colspan]::before {
            content: none;
        }
}

/* ===================================================
   Small Mobile (<480px)
   =================================================== */
@media (max-width: 479.98px) {
    [b-435vfcw9o2] .card-header h5 {
        font-size: 0.95rem;
    }
}

/* ===================================================
   Animations
   =================================================== */
[b-435vfcw9o2] .table > tbody > tr {
    animation: fadeInRow-b-435vfcw9o2 0.35s ease both;
}

@keyframes fadeInRow-b-435vfcw9o2 {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

/* ===================================================
   SVG Icons via CSS Mask
   =================================================== */

[b-435vfcw9o2] .bi-eye,
[b-435vfcw9o2] .bi-pencil,
[b-435vfcw9o2] .bi-trash {
    font-family: inherit !important;
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

    [b-435vfcw9o2] .bi-eye::before,
    [b-435vfcw9o2] .bi-pencil::before,
    [b-435vfcw9o2] .bi-trash::before {
        content: none !important;
    }

[b-435vfcw9o2] .bi-eye {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z'/><path d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z'/><path d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/></svg>");
}

[b-435vfcw9o2] .bi-pencil {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z'/></svg>");
}

[b-435vfcw9o2] .bi-trash {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/><path d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3h11V2h-11v1z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/><path d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3h11V2h-11v1z'/></svg>");
}

/* ===================================================
   Search & Close Icons (for potential future use)
   =================================================== */

[b-435vfcw9o2] .bi-search,
[b-435vfcw9o2] .bi-x-lg {
    font-family: inherit !important;
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

    [b-435vfcw9o2] .bi-search::before,
    [b-435vfcw9o2] .bi-x-lg::before {
        content: none !important;
    }

[b-435vfcw9o2] .bi-search {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/></svg>");
}

[b-435vfcw9o2] .bi-x-lg {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z'/></svg>");
}
/* /Pages/UsersTable.razor.rz.scp.css */
/* ===================================================
   UsersTable - Modern & Responsive Styles
   Bootstrap 5 + Flexbox + RTL
   =================================================== */

/* ---------- Card Container ---------- */
[b-qhefc5eqj0] .card {
    border-radius: 1rem;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

    [b-qhefc5eqj0] .card:hover {
        box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.08) !important;
    }

/* ---------- Card Header ---------- */
[b-qhefc5eqj0] .card-header {
    border-bottom: 1px solid #eef0f3;
    padding: 1.1rem 1.25rem;
    background: #ffffff !important;
}

    [b-qhefc5eqj0] .card-header h5 {
        font-size: 1.05rem;
        color: #2c3e50;
        letter-spacing: 0.2px;
    }

/* ---------- Search Input ---------- */
[b-qhefc5eqj0] .input-group {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    border-radius: 0.6rem;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.2s ease;
    min-width: 280px;
}

    [b-qhefc5eqj0] .input-group:focus-within {
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
        transform: translateY(-1px);
    }

    [b-qhefc5eqj0] .input-group .form-control,
    [b-qhefc5eqj0] .input-group .input-group-text,
    [b-qhefc5eqj0] .input-group .btn {
        border-color: #e3e6ea;
    }

        [b-qhefc5eqj0] .input-group .form-control:focus {
            box-shadow: none;
            border-color: #e3e6ea;
        }

[b-qhefc5eqj0] .input-group-text .bi-search {
    color: #6c757d;
}

/* ---------- Table Wrapper (Custom Responsive) ---------- */
[b-qhefc5eqj0] .table-responsive-custom {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c5cad1 transparent;
}

    [b-qhefc5eqj0] .table-responsive-custom::-webkit-scrollbar {
        height: 6px;
    }

    [b-qhefc5eqj0] .table-responsive-custom::-webkit-scrollbar-thumb {
        background: #c5cad1;
        border-radius: 3px;
    }

/* ---------- Table ---------- */
[b-qhefc5eqj0] .table {
    margin-bottom: 0;
    font-size: 0.92rem;
}

    [b-qhefc5eqj0] .table > thead {
        background: linear-gradient(180deg, #f8f9fb 0%, #eef1f5 100%);
    }

        [b-qhefc5eqj0] .table > thead th {
            border-bottom: 2px solid #e3e6ea;
            color: #4a5568;
            font-weight: 600;
            font-size: 0.85rem;
            text-transform: none;
            letter-spacing: 0.3px;
            padding: 0.9rem 1rem;
            white-space: nowrap;
        }

    [b-qhefc5eqj0] .table > tbody > tr {
        transition: background-color 0.2s ease, transform 0.15s ease;
    }

        [b-qhefc5eqj0] .table > tbody > tr:hover {
            background-color: #f5f9ff !important;
        }

        [b-qhefc5eqj0] .table > tbody > tr > td {
            padding: 0.85rem 1rem;
            vertical-align: middle;
            border-color: #f0f2f5;
        }

    [b-qhefc5eqj0] .table .fw-semibold {
        color: #1f2937;
    }

/* ---------- Action Buttons ---------- */
[b-qhefc5eqj0] .btn-group-sm > .btn {
    border-radius: 0.5rem !important;
    margin: 0 2px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
    border-width: 1.5px;
}

    [b-qhefc5eqj0] .btn-group-sm > .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

[b-qhefc5eqj0] .btn-outline-primary:hover {
    background: #0d6efd;
    color: #fff;
}

[b-qhefc5eqj0] .btn-outline-warning:hover {
    background: #ffc107;
    color: #fff;
}

[b-qhefc5eqj0] .btn-outline-info:hover {
    background: #0dcaf0;
    color: #fff;
}

[b-qhefc5eqj0] .btn-outline-secondary:hover {
    background: #6c757d;
    color: #fff;
}

[b-qhefc5eqj0] .btn-outline-danger:hover {
    background: #dc3545;
    color: #fff;
}

/* ---------- Empty State ---------- */
[b-qhefc5eqj0] tbody tr td.text-muted .bi-inbox {
    color: #cbd3da;
    opacity: 0.7;
}

/* ---------- Loading Overlay ---------- */
[b-qhefc5eqj0] .loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 0.5rem;
}

    [b-qhefc5eqj0] .loading-overlay .spinner-border {
        width: 3rem;
        height: 3rem;
        border-width: 0.3em;
    }

/* ---------- Alert ---------- */
[b-qhefc5eqj0] .alert-danger {
    border: none;
    border-right: 4px solid #dc3545;
    background: #fff5f5;
    color: #842029;
    border-radius: 0.6rem;
}

/* ---------- Card Footer & Pagination ---------- */
[b-qhefc5eqj0] .card-footer {
    border-top: 1px solid #eef0f3;
    padding: 0.9rem 1.25rem;
    background: #ffffff !important;
}

[b-qhefc5eqj0] .pagination .page-link {
    border-radius: 0.5rem !important;
    margin: 0 2px;
    border: 1px solid #e3e6ea;
    color: #495057;
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    transition: all 0.2s ease;
}

    [b-qhefc5eqj0] .pagination .page-link:hover {
        background: #e9f1ff;
        border-color: #b6d4fe;
        color: #0d6efd;
        transform: translateY(-1px);
    }

[b-qhefc5eqj0] .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    border-color: #0a58ca;
    color: #fff;
    box-shadow: 0 3px 8px rgba(13, 110, 253, 0.3);
}

[b-qhefc5eqj0] .pagination .page-item.disabled .page-link {
    background: #f8f9fa;
    color: #adb5bd;
    border-color: #e9ecef;
}

[b-qhefc5eqj0] .form-select-sm {
    border-radius: 0.5rem;
    border-color: #e3e6ea;
    cursor: pointer;
}

/* ===================================================
   RESPONSIVE - Mobile (<768px)
   =================================================== */
@media (max-width: 767.98px) {

    [b-qhefc5eqj0] .card-header .input-group {
        min-width: 100%;
        margin-top: 0.5rem;
    }

    [b-qhefc5eqj0] .table > thead {
        display: none;
    }

    [b-qhefc5eqj0] .table,
    [b-qhefc5eqj0] .table > tbody,
    [b-qhefc5eqj0] .table > tbody > tr,
    [b-qhefc5eqj0] .table > tbody > tr > td {
        display: block;
        width: 100%;
    }

        [b-qhefc5eqj0] .table > tbody > tr {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin: 0.75rem;
            padding: 1rem;
            background: #ffffff;
            border: 1px solid #eef0f3;
            border-radius: 0.85rem;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
            transition: all 0.25s ease;
        }

            [b-qhefc5eqj0] .table > tbody > tr:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
                border-color: #b6d4fe;
            }

            [b-qhefc5eqj0] .table > tbody > tr > td {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0.55rem 0.25rem;
                border: none;
                border-bottom: 1px dashed #eef0f3;
                font-size: 0.9rem;
            }

                [b-qhefc5eqj0] .table > tbody > tr > td:last-child {
                    border-bottom: none;
                    justify-content: center;
                    padding-top: 0.85rem;
                }

                [b-qhefc5eqj0] .table > tbody > tr > td::before {
                    content: attr(data-label);
                    font-weight: 600;
                    color: #6c757d;
                    font-size: 0.8rem;
                    margin-left: 1rem;
                }

    [b-qhefc5eqj0] tbody tr td[colspan] {
        display: block !important;
        text-align: center;
    }

        [b-qhefc5eqj0] tbody tr td[colspan]::before {
            content: none;
        }

    [b-qhefc5eqj0] .card-footer .row {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }

    [b-qhefc5eqj0] .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ===================================================
   Small Mobile (<480px)
   =================================================== */
@media (max-width: 479.98px) {
    [b-qhefc5eqj0] .pagination .page-link {
        min-width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }

    [b-qhefc5eqj0] .card-header h5 {
        font-size: 0.95rem;
    }
}

/* ===================================================
   Animations
   =================================================== */
[b-qhefc5eqj0] .table > tbody > tr {
    animation: fadeInRow-b-qhefc5eqj0 0.35s ease both;
}

@keyframes fadeInRow-b-qhefc5eqj0 {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

/* ===================================================
   SVG Icons via CSS Mask
   =================================================== */

[b-qhefc5eqj0] .bi-eye,
[b-qhefc5eqj0] .bi-pencil,
[b-qhefc5eqj0] .bi-key,
[b-qhefc5eqj0] .bi-shield-lock,
[b-qhefc5eqj0] .bi-trash,
[b-qhefc5eqj0] .bi-check-lg {
    font-family: inherit !important;
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

    [b-qhefc5eqj0] .bi-eye::before,
    [b-qhefc5eqj0] .bi-pencil::before,
    [b-qhefc5eqj0] .bi-key::before,
    [b-qhefc5eqj0] .bi-shield-lock::before,
    [b-qhefc5eqj0] .bi-trash::before,
    [b-qhefc5eqj0] .bi-check-lg::before {
        content: none !important;
    }

[b-qhefc5eqj0] .bi-eye {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z'/><path d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z'/><path d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/></svg>");
}

[b-qhefc5eqj0] .bi-pencil {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z'/></svg>");
}

[b-qhefc5eqj0] .bi-key {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8m4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5'/><path d='M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8m4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5'/><path d='M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0'/></svg>");
}

[b-qhefc5eqj0] .bi-shield-lock {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.8 11.8 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7 7 0 0 0 1.048-.625 11.8 11.8 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.54 1.54 0 0 0-1.044-1.263 63 63 0 0 0-2.887-.87C9.843.266 8.69 0 8 0m0 5a1.5 1.5 0 0 1 .5 2.915l.385 1.99a.5.5 0 0 1-.491.595h-.788a.5.5 0 0 1-.49-.595l.384-1.99A1.5 1.5 0 0 1 8 5'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.8 11.8 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7 7 0 0 0 1.048-.625 11.8 11.8 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.54 1.54 0 0 0-1.044-1.263 63 63 0 0 0-2.887-.87C9.843.266 8.69 0 8 0m0 5a1.5 1.5 0 0 1 .5 2.915l.385 1.99a.5.5 0 0 1-.491.595h-.788a.5.5 0 0 1-.49-.595l.384-1.99A1.5 1.5 0 0 1 8 5'/></svg>");
}

[b-qhefc5eqj0] .bi-trash {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/><path d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3h11V2h-11v1z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/><path d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3h11V2h-11v1z'/></svg>");
}

[b-qhefc5eqj0] .bi-check-lg {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z'/></svg>");
}

/* ===================================================
   Chevron Icons (Pagination)
   =================================================== */

[b-qhefc5eqj0] .bi-chevron-right,
[b-qhefc5eqj0] .bi-chevron-double-right,
[b-qhefc5eqj0] .bi-chevron-left,
[b-qhefc5eqj0] .bi-chevron-double-left {
    font-family: inherit !important;
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

    [b-qhefc5eqj0] .bi-chevron-right::before,
    [b-qhefc5eqj0] .bi-chevron-double-right::before,
    [b-qhefc5eqj0] .bi-chevron-left::before,
    [b-qhefc5eqj0] .bi-chevron-double-left::before {
        content: none !important;
    }

[b-qhefc5eqj0] .bi-chevron-right {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
}

[b-qhefc5eqj0] .bi-chevron-double-right {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z'/><path fill-rule='evenodd' d='M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z'/><path fill-rule='evenodd' d='M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
}

[b-qhefc5eqj0] .bi-chevron-left {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
}

[b-qhefc5eqj0] .bi-chevron-double-left {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
}

/* ===================================================
   Search & Close Icons
   =================================================== */

[b-qhefc5eqj0] .bi-search,
[b-qhefc5eqj0] .bi-x-lg {
    font-family: inherit !important;
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

    [b-qhefc5eqj0] .bi-search::before,
    [b-qhefc5eqj0] .bi-x-lg::before {
        content: none !important;
    }

[b-qhefc5eqj0] .bi-search {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/></svg>");
}

[b-qhefc5eqj0] .bi-x-lg {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z'/></svg>");
}