/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-u3wtvx4pk9] {
    position: relative;
    display: flex;
    flex-direction: column;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bi[b-l1v49qoth4] {
    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-l1v49qoth4] {
    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-l1v49qoth4] {
    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-l1v49qoth4] {
    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-l1v49qoth4] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

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

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

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

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

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

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

    .collapse[b-l1v49qoth4] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-l1v49qoth4] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/Deliveries.razor.rz.scp.css */

.delivery-history[b-sftr18wmj9] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 25px 20px 110px;
    font-family: 'Alexandria', sans-serif;
    color: #17243b;
}

.dh-header[b-sftr18wmj9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.dh-eyebrow[b-sftr18wmj9] {
    color: #2563eb;
    font-size: 12px;
    margin-bottom: 10px;
}

.dh-header h2[b-sftr18wmj9] {
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 8px;
}

.dh-header p[b-sftr18wmj9] {
    color: #8190a5;
    font-size: 12px;
    margin: 0;
}

.dh-header-icon[b-sftr18wmj9] {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 25px;
}

.dh-filters[b-sftr18wmj9] {
    background: white;
    border: 1px solid #edf0f5;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 5px 20px rgba(15,23,42,.035);
}

.dh-search[b-sftr18wmj9] {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0 14px;
    margin-bottom: 15px;
    color: #94a3b8;
}

    .dh-search input[b-sftr18wmj9] {
        border: 0;
        outline: 0;
        width: 100%;
        height: 46px;
        background: transparent;
        font-size: 12px;
    }

.dh-date-row[b-sftr18wmj9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

    .dh-date-row label[b-sftr18wmj9] {
        display: block;
        color: #64748b;
        font-size: 11px;
        margin-bottom: 8px;
    }

    .dh-date-row input[b-sftr18wmj9] {
        width: 100%;
        min-width: 0;
        border: 1px solid #e2e8f0;
        border-radius: 11px;
        padding: 11px;
        background: white;
        font-size: 12px;
    }

.dh-filter-actions[b-sftr18wmj9] {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.dh-btn-primary[b-sftr18wmj9],
.dh-btn-secondary[b-sftr18wmj9] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    border-radius: 11px;
    border: 0;
    padding: 12px 18px;
    font-size: 12px;
    font-weight: 600;
}

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

.dh-btn-secondary[b-sftr18wmj9] {
    background: #f1f5f9;
    color: #475569;
}

.dh-section-heading[b-sftr18wmj9] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

    .dh-section-heading h4[b-sftr18wmj9] {
        font-size: 17px;
        font-weight: 700;
        margin-bottom: 5px;
    }

    .dh-section-heading span[b-sftr18wmj9] {
        color: #94a3b8;
        font-size: 11px;
    }

.dh-list[b-sftr18wmj9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dh-card[b-sftr18wmj9] {
    display: block;
    width: 100%;
    text-align: right;
    border: 1px solid #edf0f5;
    background: white;
    border-radius: 18px;
    padding: 18px;
    color: #17243b;
    transition: .2s;
}

    .dh-card:hover[b-sftr18wmj9] {
        border-color: #bfdbfe;
        box-shadow: 0 8px 25px rgba(37,99,235,.07);
    }

.dh-card-top[b-sftr18wmj9] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dh-shop-icon[b-sftr18wmj9] {
    width: 45px;
    height: 45px;
    border-radius: 13px;
    background: #eff6ff;
    color: #2563eb;
    display: grid;
    place-items: center;
    font-size: 20px;
}

.dh-shop-info[b-sftr18wmj9] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .dh-shop-info strong[b-sftr18wmj9] {
        font-size: 13px;
    }

    .dh-shop-info small[b-sftr18wmj9] {
        color: #94a3b8;
        font-size: 11px;
    }

.dh-status[b-sftr18wmj9] {
    color: #16a34a;
    background: #f0fdf4;
    border-radius: 30px;
    padding: 7px 10px;
    font-size: 10px;
}

.dh-card-bottom[b-sftr18wmj9] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    border-top: 1px solid #f1f5f9;
    margin-top: 16px;
    padding-top: 14px;
    color: #64748b;
    font-size: 11px;
}

    .dh-card-bottom i[b-sftr18wmj9] {
        margin-left: 5px;
    }

.dh-card-number[b-sftr18wmj9] {
    margin-right: auto;
    font-weight: 700;
    color: #2563eb;
}

.dh-pagination[b-sftr18wmj9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 22px;
    gap: 10px;
    font-size: 12px;
}

    .dh-pagination button[b-sftr18wmj9] {
        border: 1px solid #e2e8f0;
        background: white;
        border-radius: 10px;
        padding: 10px 15px;
        font-size: 12px;
    }

        .dh-pagination button:disabled[b-sftr18wmj9] {
            opacity: .4;
        }

.dh-state[b-sftr18wmj9] {
    text-align: center;
    padding: 65px 15px;
    color: #94a3b8;
}

    .dh-state > i[b-sftr18wmj9] {
        display: block;
        font-size: 45px;
        margin-bottom: 15px;
    }

    .dh-state h5[b-sftr18wmj9] {
        color: #17243b;
        font-weight: 700;
    }

/* Details modal */

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

.dh-modal[b-sftr18wmj9] {
    width: 100%;
    max-width: 510px;
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    border-radius: 22px;
}

.dh-modal-header[b-sftr18wmj9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px;
    border-bottom: 1px solid #edf0f5;
}

    .dh-modal-header small[b-sftr18wmj9] {
        color: #94a3b8;
        font-size: 11px;
    }

    .dh-modal-header h4[b-sftr18wmj9] {
        font-size: 19px;
        font-weight: 700;
        margin: 8px 0 0;
    }

.dh-close[b-sftr18wmj9] {
    border: 0;
    background: #f1f5f9;
    border-radius: 10px;
    width: 38px;
    height: 38px;
}

.dh-modal-body[b-sftr18wmj9] {
    padding: 22px;
}

.dh-detail-shop[b-sftr18wmj9] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px;
    background: #eff6ff;
    border-radius: 13px;
    margin-bottom: 20px;
}

    .dh-detail-shop > i[b-sftr18wmj9] {
        color: #2563eb;
        font-size: 25px;
    }

    .dh-detail-shop div[b-sftr18wmj9] {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .dh-detail-shop small[b-sftr18wmj9] {
        color: #64748b;
    }

.dh-detail-meta[b-sftr18wmj9],
.dh-item-row[b-sftr18wmj9],
.dh-total[b-sftr18wmj9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    font-size: 12px;
}

.dh-detail-meta[b-sftr18wmj9] {
    color: #64748b;
    border-bottom: 1px solid #f1f5f9;
}

    .dh-detail-meta strong[b-sftr18wmj9] {
        color: #17243b;
    }

.dh-items-title[b-sftr18wmj9] {
    font-size: 14px;
    font-weight: 700;
    margin: 25px 0 10px;
}

.dh-item-row[b-sftr18wmj9] {
    border-bottom: 1px solid #f1f5f9;
}

.dh-total[b-sftr18wmj9] {
    background: #eff6ff;
    border-radius: 11px;
    padding: 15px;
    margin-top: 15px;
    color: #1d4ed8;
    font-weight: 700;
}

.dh-notes[b-sftr18wmj9] {
    margin-top: 20px;
    background: #f8fafc;
    border-radius: 12px;
    padding: 15px;
    font-size: 12px;
}

    .dh-notes p[b-sftr18wmj9] {
        color: #64748b;
        margin: 10px 0 0;
        line-height: 1.9;
    }

@media (max-width: 600px) {
    .delivery-history[b-sftr18wmj9] {
        padding: 18px 14px 110px;
    }

    .dh-header h2[b-sftr18wmj9] {
        font-size: 21px;
    }

    .dh-filters[b-sftr18wmj9] {
        padding: 15px;
    }

    .dh-filter-actions button[b-sftr18wmj9] {
        flex: 1;
    }

    .dh-card[b-sftr18wmj9] {
        padding: 15px;
    }

    .dh-card-bottom[b-sftr18wmj9] {
        gap: 12px;
    }

    .dh-modal[b-sftr18wmj9] {
        max-height: 85vh;
        border-radius: 18px;
    }
}
/* /Pages/Home.razor.rz.scp.css */

.dt-home[b-ftzgmlc2r0] {
    --dt-primary: #2563eb;
    --dt-text: #17243b;
    --dt-muted: #8190a5;
    max-width: 1200px;
    margin: 0 auto;
    padding: 25px 20px 110px;
    color: var(--dt-text);
    font-family: 'Alexandria', sans-serif;
}

/* Header */

.dt-header[b-ftzgmlc2r0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.dt-brand[b-ftzgmlc2r0] {
    display: flex;
    align-items: center;
    gap: 13px;
}

.dt-brand-icon[b-ftzgmlc2r0] {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: white;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    font-size: 25px;
    box-shadow: 0 8px 18px rgba(37,99,235,.18);
}

.dt-brand h1[b-ftzgmlc2r0] {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px;
}

.dt-brand p[b-ftzgmlc2r0] {
    font-size: 12px;
    color: var(--dt-muted);
    margin: 0;
}

.dt-user-avatar[b-ftzgmlc2r0] {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eaf1ff;
    color: #2563eb;
    font-size: 21px;
}

/* Hero */

.dt-hero[b-ftzgmlc2r0] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(125deg, #2563eb, #1e40af);
    border-radius: 25px;
    padding: 35px;
    min-height: 260px;
    color: #fff;
    margin-bottom: 35px;
    box-shadow: 0 15px 35px rgba(37,99,235,.15);
}

    .dt-hero[b-ftzgmlc2r0]::after {
        content: "";
        position: absolute;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: rgba(255,255,255,.05);
        left: -90px;
        top: -100px;
    }

.dt-hero-content[b-ftzgmlc2r0] {
    position: relative;
    z-index: 2;
    max-width: 560px;
}

.dt-hero-tag[b-ftzgmlc2r0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 50px;
    background: rgba(255,255,255,.14);
    color: #e0edff;
    font-size: 11px;
    margin-bottom: 18px;
}

.dt-welcome[b-ftzgmlc2r0] {
    font-size: 13px;
    color: #c7ddff;
    margin-bottom: 7px;
}

.dt-hero h2[b-ftzgmlc2r0] {
    font-size: 29px;
    font-weight: 700;
    margin-bottom: 12px;
}

.dt-hero-description[b-ftzgmlc2r0] {
    font-size: 13px;
    color: #dbeafe;
    line-height: 2;
    margin-bottom: 24px;
}

.dt-hero-button[b-ftzgmlc2r0] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: white;
    border: 0;
    border-radius: 13px;
    padding: 13px 18px;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
    transition: .2s;
}

    .dt-hero-button:hover[b-ftzgmlc2r0] {
        transform: translateY(-2px);
        background: #eff6ff;
    }

.dt-hero-decoration[b-ftzgmlc2r0] {
    position: absolute;
    left: 7%;
    bottom: -35px;
    font-size: 190px;
    color: rgba(255,255,255,.10);
    transform: scaleX(-1);
}

/* Sections */

.dt-section[b-ftzgmlc2r0] {
    margin-bottom: 34px;
}

.dt-section-heading[b-ftzgmlc2r0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

    .dt-section-heading h3[b-ftzgmlc2r0] {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 5px;
    }

    .dt-section-heading p[b-ftzgmlc2r0] {
        font-size: 12px;
        color: var(--dt-muted);
        margin: 0;
    }

.dt-section-tag[b-ftzgmlc2r0] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #64748b;
    background: #f1f5f9;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 11px;
}

/* Statistics */

.dt-stats-grid[b-ftzgmlc2r0] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 15px;
}

.dt-stat-card[b-ftzgmlc2r0] {
    background: #fff;
    border: 1px solid #edf0f5;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(15,23,42,.035);
}

.dt-stat-icon[b-ftzgmlc2r0],
.dt-action-icon[b-ftzgmlc2r0] {
    display: grid;
    place-items: center;
    border-radius: 13px;
}

.dt-stat-icon[b-ftzgmlc2r0] {
    width: 45px;
    height: 45px;
    font-size: 21px;
    margin-bottom: 18px;
}

.dt-stat-value[b-ftzgmlc2r0] {
    font-size: 29px;
    font-weight: 700;
    margin-bottom: 5px;
}

.dt-stat-label[b-ftzgmlc2r0] {
    font-size: 12px;
    color: #64748b;
}

.blue[b-ftzgmlc2r0] {
    background: #eff6ff;
    color: #2563eb;
}

.green[b-ftzgmlc2r0] {
    background: #f0fdf4;
    color: #16a34a;
}

.orange[b-ftzgmlc2r0] {
    background: #fff7ed;
    color: #ea580c;
}

.purple[b-ftzgmlc2r0] {
    background: #f5f3ff;
    color: #7c3aed;
}

.cyan[b-ftzgmlc2r0] {
    background: #ecfeff;
    color: #0891b2;
}

/* Quick Actions */

.dt-actions-grid[b-ftzgmlc2r0] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 15px;
}

.dt-action-card[b-ftzgmlc2r0] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
    min-height: 160px;
    padding: 22px;
    background: #fff;
    border: 1px solid #edf0f5;
    border-radius: 20px;
    transition: .2s;
    color: var(--dt-text);
}

    .dt-action-card:hover[b-ftzgmlc2r0] {
        border-color: #bfdbfe;
        box-shadow: 0 12px 28px rgba(37,99,235,.08);
        transform: translateY(-3px);
    }

.dt-action-icon[b-ftzgmlc2r0] {
    width: 46px;
    height: 46px;
    font-size: 22px;
    margin-bottom: 17px;
}

.dt-action-card strong[b-ftzgmlc2r0] {
    font-size: 14px;
    margin-bottom: 7px;
}

.dt-action-card small[b-ftzgmlc2r0] {
    font-size: 11px;
    color: #8190a5;
}

.dt-action-arrow[b-ftzgmlc2r0] {
    position: absolute;
    left: 20px;
    bottom: 20px;
    font-size: 13px;
    color: #94a3b8;
}

/* Footer */

.dt-home-footer[b-ftzgmlc2r0] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    color: #94a3b8;
    padding: 20px 0;
}

/* Loading and Guest */

.dt-loading[b-ftzgmlc2r0],
.dt-guest[b-ftzgmlc2r0] {
    min-height: 55vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 15px;
}

.dt-guest-icon[b-ftzgmlc2r0] {
    width: 80px;
    height: 80px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 35px;
}

.dt-guest h3[b-ftzgmlc2r0] {
    font-size: 20px;
    font-weight: 700;
}

.dt-guest p[b-ftzgmlc2r0] {
    font-size: 13px;
    color: #64748b;
}

.dt-btn[b-ftzgmlc2r0] {
    border: 0;
    padding: 13px 20px;
    border-radius: 12px;
    font-weight: 600;
}

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

/* Mobile */

@media (max-width: 768px) {
    .dt-home[b-ftzgmlc2r0] {
        padding: 18px 14px 100px;
    }

    .dt-header[b-ftzgmlc2r0] {
        margin-bottom: 18px;
    }

    .dt-brand-icon[b-ftzgmlc2r0] {
        width: 44px;
        height: 44px;
        font-size: 22px;
        border-radius: 13px;
    }

    .dt-brand h1[b-ftzgmlc2r0] {
        font-size: 16px;
    }

    .dt-hero[b-ftzgmlc2r0] {
        min-height: auto;
        padding: 26px 22px;
        border-radius: 20px;
        margin-bottom: 28px;
    }

        .dt-hero h2[b-ftzgmlc2r0] {
            font-size: 22px;
        }

    .dt-hero-decoration[b-ftzgmlc2r0] {
        font-size: 115px;
        left: -10px;
        bottom: -12px;
    }

    .dt-stats-grid[b-ftzgmlc2r0] {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 10px;
    }

    .dt-stat-card[b-ftzgmlc2r0] {
        padding: 16px;
        border-radius: 16px;
    }

    .dt-stat-value[b-ftzgmlc2r0] {
        font-size: 25px;
    }

    .dt-actions-grid[b-ftzgmlc2r0] {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 10px;
    }

    .dt-action-card[b-ftzgmlc2r0] {
        padding: 16px;
        min-height: 145px;
        border-radius: 16px;
    }

        .dt-action-card strong[b-ftzgmlc2r0] {
            font-size: 12px;
        }

        .dt-action-card small[b-ftzgmlc2r0] {
            font-size: 10px;
            line-height: 1.7;
        }

    .dt-action-arrow[b-ftzgmlc2r0] {
        left: 12px;
        bottom: 12px;
    }

    .dt-section-heading h3[b-ftzgmlc2r0] {
        font-size: 16px;
    }
}
/* /Pages/Items.razor.rz.scp.css */

.items-backdrop[b-xzdpri4iuj] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(15, 23, 42, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.items-dialog[b-xzdpri4iuj] {
    background: #fff;
    border-radius: 20px;
    padding: 24px;
    width: 100%;
    max-width: 500px;
    max-height: 90dvh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .15);
}

    .items-dialog .validation-message[b-xzdpri4iuj] {
        color: #dc3545;
        font-size: 12px;
        display: block;
        margin-top: 5px;
    }

@media (max-width: 600px) {
    .items-backdrop[b-xzdpri4iuj] {
        align-items: flex-end;
        padding: 0;
    }

    .items-dialog[b-xzdpri4iuj] {
        border-radius: 22px 22px 0 0;
        max-height: 92dvh;
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
}
/* /Pages/Login.razor.rz.scp.css */

.login-truck-icon[b-6i2o8se4yt] {
    width: 82px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    border-radius: 24px;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.22);
}

    .login-truck-icon i[b-6i2o8se4yt] {
        font-size: 39px;
        line-height: 1;
    }
/* /Pages/Reports.razor.rz.scp.css */

.reports-page[b-4802v0zavi] {
    max-width: 1200px;
    margin: auto;
    padding: 25px 20px 110px;
    font-family: 'Alexandria', sans-serif;
    color: #17243b;
}

.reports-heading[b-4802v0zavi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.reports-eyebrow[b-4802v0zavi] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2563eb;
    font-size: 12px;
    margin-bottom: 12px;
}

.reports-heading h2[b-4802v0zavi] {
    font-size: 25px;
    font-weight: 700;
}

.reports-heading p[b-4802v0zavi],
.reports-panel-heading p[b-4802v0zavi] {
    color: #94a3b8;
    font-size: 12px;
    margin: 7px 0 0;
}

.reports-heading-icon[b-4802v0zavi] {
    width: 55px;
    height: 55px;
    border-radius: 17px;
    background: #eff6ff;
    color: #2563eb;
    display: grid;
    place-items: center;
    font-size: 25px;
}

.reports-filter-card[b-4802v0zavi],
.reports-panel[b-4802v0zavi],
.reports-stat[b-4802v0zavi] {
    background: white;
    border: 1px solid #edf0f5;
    border-radius: 20px;
    box-shadow: 0 5px 18px rgba(15,23,42,.035);
}

.reports-filter-card[b-4802v0zavi] {
    padding: 22px;
    margin-bottom: 22px;
}

.reports-filter-title[b-4802v0zavi] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 18px;
}

.reports-date-grid[b-4802v0zavi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

    .reports-date-grid label[b-4802v0zavi] {
        display: block;
        font-size: 11px;
        color: #64748b;
        margin-bottom: 8px;
    }

    .reports-date-grid input[b-4802v0zavi] {
        width: 100%;
        min-width: 0;
        padding: 12px;
        border: 1px solid #e2e8f0;
        border-radius: 11px;
        font-size: 12px;
        background: white;
    }

.reports-filter-actions[b-4802v0zavi] {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.reports-primary-btn[b-4802v0zavi],
.reports-secondary-btn[b-4802v0zavi] {
    border: 0;
    border-radius: 11px;
    padding: 12px 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

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

.reports-secondary-btn[b-4802v0zavi] {
    background: #f1f5f9;
    color: #475569;
}

.reports-stats[b-4802v0zavi] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
    margin-bottom: 25px;
}

.reports-stat[b-4802v0zavi] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.reports-stat-icon[b-4802v0zavi] {
    width: 45px;
    height: 45px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 21px;
    margin-bottom: 17px;
}

    .reports-stat-icon.blue[b-4802v0zavi] {
        background: #eff6ff;
        color: #2563eb;
    }

    .reports-stat-icon.green[b-4802v0zavi] {
        background: #f0fdf4;
        color: #16a34a;
    }

    .reports-stat-icon.orange[b-4802v0zavi] {
        background: #fff7ed;
        color: #ea580c;
    }

    .reports-stat-icon.purple[b-4802v0zavi] {
        background: #f5f3ff;
        color: #7c3aed;
    }

.reports-stat > strong[b-4802v0zavi] {
    font-size: 28px;
    margin-bottom: 7px;
}

.reports-stat > span[b-4802v0zavi] {
    color: #64748b;
    font-size: 11px;
}

.reports-panel[b-4802v0zavi] {
    padding: 22px;
    margin-bottom: 20px;
    min-width: 0;
}

.reports-panel-heading[b-4802v0zavi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

    .reports-panel-heading h3[b-4802v0zavi] {
        font-size: 16px;
        font-weight: 700;
        margin: 0;
    }

    .reports-panel-heading > i[b-4802v0zavi] {
        font-size: 21px;
        color: #2563eb;
    }

.reports-chart-scroll[b-4802v0zavi] {
    overflow-x: auto;
    padding-bottom: 10px;
}

.reports-chart[b-4802v0zavi] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 240px;
    min-width: max-content;
    border-bottom: 1px solid #e2e8f0;
}

.reports-chart-column[b-4802v0zavi] {
    width: 46px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reports-chart-value[b-4802v0zavi] {
    height: 24px;
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
}

.reports-chart-bar-wrap[b-4802v0zavi] {
    flex: 1;
    width: 30px;
    display: flex;
    align-items: flex-end;
}

.reports-chart-bar[b-4802v0zavi] {
    width: 100%;
    border-radius: 7px 7px 0 0;
    background: linear-gradient(180deg,#60a5fa,#2563eb);
    min-height: 3px;
}

.reports-chart-column small[b-4802v0zavi] {
    font-size: 10px;
    color: #94a3b8;
    padding: 9px 0;
    white-space: nowrap;
}

.reports-bottom-grid[b-4802v0zavi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.reports-ranking-row[b-4802v0zavi] {
    padding: 13px 0;
    border-bottom: 1px solid #f1f5f9;
}

.reports-ranking-info[b-4802v0zavi] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    margin-bottom: 10px;
}

    .reports-ranking-info span[b-4802v0zavi] {
        color: #64748b;
    }

.reports-progress[b-4802v0zavi] {
    height: 7px;
    background: #eff6ff;
    border-radius: 20px;
    overflow: hidden;
}

    .reports-progress > div[b-4802v0zavi] {
        height: 100%;
        background: #2563eb;
        border-radius: 20px;
    }

.reports-shop-row[b-4802v0zavi] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid #f1f5f9;
}

.reports-shop-icon[b-4802v0zavi] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 12px;
}

.reports-shop-name[b-4802v0zavi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

    .reports-shop-name strong[b-4802v0zavi] {
        font-size: 12px;
    }

    .reports-shop-name small[b-4802v0zavi] {
        color: #94a3b8;
        font-size: 10px;
    }

.reports-shop-quantity[b-4802v0zavi] {
    font-size: 15px;
    color: #2563eb;
}

.reports-empty[b-4802v0zavi],
.reports-state[b-4802v0zavi] {
    text-align: center;
    padding: 45px 10px;
    color: #94a3b8;
    font-size: 12px;
}

@media (max-width: 768px) {
    .reports-page[b-4802v0zavi] {
        padding: 18px 14px 110px;
    }

    .reports-heading h2[b-4802v0zavi] {
        font-size: 21px;
    }

    .reports-stats[b-4802v0zavi] {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 10px;
    }

    .reports-stat[b-4802v0zavi] {
        padding: 16px;
    }

        .reports-stat > strong[b-4802v0zavi] {
            font-size: 24px;
        }

    .reports-bottom-grid[b-4802v0zavi] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .reports-filter-card[b-4802v0zavi],
    .reports-panel[b-4802v0zavi] {
        padding: 16px;
    }

    .reports-filter-actions button[b-4802v0zavi] {
        flex: 1;
    }
}
/* /Pages/Scan.razor.rz.scp.css */
.scan-page[b-ec7giap8qo] {
    --ink: #18243a;
    --muted: #718096;
    --blue: #2563eb;
    --line: #e8edf5;
    min-height: 100%;
    padding: 28px 18px 70px;
    background: linear-gradient(180deg,#f5f8ff 0%,#f8fafc 340px,#f8fafc 100%);
    color: var(--ink);
    font-family: inherit
}

.scan-shell[b-ec7giap8qo] {
    max-width: 880px;
    margin: auto
}

.scan-hero[b-ec7giap8qo] {
    padding: 29px 32px;
    border-radius: 24px;
    background: linear-gradient(115deg,#172d68,#2355b9 70%,#337be2);
    color: white;
    box-shadow: 0 16px 36px #194a9b24;
    position: relative;
    overflow: hidden
}

    .scan-hero[b-ec7giap8qo]:after {
        content: "";
        position: absolute;
        inset: auto -70px -130px auto;
        width: 290px;
        height: 290px;
        border: 45px solid #ffffff0b;
        border-radius: 50%;
        pointer-events: none
    }

.scan-eyebrow[b-ec7giap8qo] {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #c8dafa;
    font-size: 13px;
    font-weight: 600
}

.scan-eyebrow-dot[b-ec7giap8qo] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #9dbdff
}

.scan-hero-main[b-ec7giap8qo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px
}

.scan-hero h1[b-ec7giap8qo] {
    font-size: clamp(25px,4vw,36px);
    font-weight: 800;
    margin: 15px 0 8px;
    letter-spacing: -.6px
}

    .scan-hero h1 span[b-ec7giap8qo] {
        color: #a8d4ff
    }

.scan-hero p[b-ec7giap8qo] {
    margin: 0;
    color: #d4e3ff;
    font-size: 14px
}

.scan-hero-icon[b-ec7giap8qo] {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    background: #ffffff20;
    border: 1px solid #ffffff3a;
    border-radius: 20px;
    font-size: 37px;
    flex-shrink: 0
}

.scan-steps[b-ec7giap8qo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 25px 0 23px;
    color: #a1adbd;
    font-size: 13px;
    font-weight: 700
}

    .scan-steps > i[b-ec7giap8qo] {
        font-size: 12px;
        color: #c7d0df
    }

.scan-step[b-ec7giap8qo] {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap
}

    .scan-step span[b-ec7giap8qo] {
        display: grid;
        place-items: center;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #e7ebf3;
        color: #8996ab
    }

    .scan-step.current[b-ec7giap8qo] {
        color: #2563eb
    }

        .scan-step.current span[b-ec7giap8qo] {
            background: #dbeafe;
            color: #2563eb
        }

    .scan-step.done[b-ec7giap8qo] {
        color: #059669
    }

        .scan-step.done span[b-ec7giap8qo] {
            background: #d1fae5;
            color: #059669
        }

.scan-panel[b-ec7giap8qo] {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 5px 25px #172c5210
}

.scan-centered[b-ec7giap8qo] {
    text-align: center;
    padding: 54px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px
}

    .scan-centered h2[b-ec7giap8qo], .scan-centered h3[b-ec7giap8qo] {
        font-size: 23px;
        font-weight: 800;
        margin: 4px 0 0
    }

    .scan-centered p[b-ec7giap8qo] {
        font-size: 14px;
        color: var(--muted);
        max-width: 380px;
        margin: 0 0 8px;
        line-height: 1.9
    }

.scan-illustration[b-ec7giap8qo] {
    width: 115px;
    height: 115px;
    display: grid;
    place-items: center;
    position: relative;
    background: #edf4ff;
    border: 1px solid #dceaff;
    border-radius: 31px;
    color: var(--blue);
    font-size: 57px;
    margin-bottom: 10px
}

    .scan-illustration span[b-ec7giap8qo] {
        position: absolute;
        left: -10px;
        bottom: -9px;
        background: #2563eb;
        color: white;
        font-size: 18px;
        width: 43px;
        height: 43px;
        display: grid;
        place-items: center;
        border-radius: 14px;
        border: 4px solid white
    }

.scan-btn[b-ec7giap8qo] {
    border: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 13px;
    padding: 12px 19px;
    font-weight: 800;
    font-size: 14px;
    transition: transform .15s,background .15s;
    cursor: pointer
}

    .scan-btn:not(:disabled):hover[b-ec7giap8qo] {
        transform: translateY(-1px)
    }

    .scan-btn:disabled[b-ec7giap8qo] {
        opacity: .55;
        cursor: not-allowed
    }

.scan-btn-primary[b-ec7giap8qo] {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 8px 18px #2563eb27
}

    .scan-btn-primary:not(:disabled):hover[b-ec7giap8qo] {
        background: #1d4ed8
    }

.scan-btn-big[b-ec7giap8qo] {
    min-width: min(100%,300px);
    padding: 16px 22px;
    margin-top: 9px
}

.scan-btn-soft[b-ec7giap8qo] {
    background: #edf3ff;
    color: #2457b8
}

.scan-hint[b-ec7giap8qo] {
    font-size: 12px;
    color: #8995a8;
    display: flex;
    gap: 7px;
    align-items: center;
    margin-top: 6px
}

.scan-alert[b-ec7giap8qo] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.7;
    width: 100%
}

.scan-alert-danger[b-ec7giap8qo] {
    background: #fff0f0;
    color: #b42318;
    border: 1px solid #ffd8d8
}

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

.scan-shop[b-ec7giap8qo] {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 23px 25px;
    margin-bottom: 28px
}

.scan-shop-icon[b-ec7giap8qo] {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    border-radius: 17px;
    background: #e9f1ff;
    color: #2563eb;
    display: grid;
    place-items: center;
    font-size: 29px
}

.scan-shop-info[b-ec7giap8qo] {
    flex: 1;
    min-width: 0
}

.scan-kicker[b-ec7giap8qo] {
    font-size: 12px;
    font-weight: 750;
    color: #6b87ac;
    display: inline-flex;
    align-items: center;
    gap: 5px
}

    .scan-kicker i[b-ec7giap8qo] {
        color: #16a34a
    }

.scan-shop h2[b-ec7giap8qo] {
    font-size: 21px;
    font-weight: 800;
    margin: 6px 0 8px
}

.scan-shop-meta[b-ec7giap8qo] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    color: #7c889b;
    font-size: 13px
}

    .scan-shop-meta span[b-ec7giap8qo] {
        display: flex;
        gap: 5px;
        align-items: center
    }

.scan-icon-btn[b-ec7giap8qo] {
    background: #f2f6fc;
    border: 1px solid #e5ecf6;
    border-radius: 12px;
    width: 39px;
    height: 39px;
    color: #4772b4;
    cursor: pointer
}

.scan-section[b-ec7giap8qo] {
    margin-bottom: 22px
}

.scan-section-heading[b-ec7giap8qo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 15px
}

    .scan-section-heading h2[b-ec7giap8qo] {
        font-size: 20px;
        font-weight: 800;
        margin: 5px 0 0
    }

.scan-counter[b-ec7giap8qo] {
    background: #e8f0ff;
    color: #2459bb;
    border-radius: 40px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 800
}

.scan-items[b-ec7giap8qo] {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.scan-item[b-ec7giap8qo] {
    background: white;
    border: 1px solid #e7edf6;
    border-radius: 17px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 17px;
    transition: border-color .15s,box-shadow .15s
}

.scan-item-active[b-ec7giap8qo] {
    border-color: #abc9ff;
    box-shadow: 0 3px 14px #2563eb0c
}

.scan-item-icon[b-ec7giap8qo] {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: #f0f4fb;
    color: #6686b5;
    font-size: 20px
}

.scan-item-active .scan-item-icon[b-ec7giap8qo] {
    background: #e7f0ff;
    color: #2563eb
}

.scan-item-text[b-ec7giap8qo] {
    flex: 1;
    min-width: 0
}

    .scan-item-text strong[b-ec7giap8qo] {
        display: block;
        font-size: 14px;
        font-weight: 800
    }

    .scan-item-text small[b-ec7giap8qo] {
        display: block;
        font-size: 12px;
        color: #8a96a7;
        line-height: 1.6;
        margin-top: 4px
    }

.scan-qty[b-ec7giap8qo] {
    flex-shrink: 0
}

    .scan-qty label[b-ec7giap8qo] {
        display: block;
        text-align: center;
        font-size: 11px;
        color: #9aa5b5;
        margin-bottom: 5px
    }

.scan-qty-controls[b-ec7giap8qo] {
    display: flex;
    align-items: center;
    gap: 3px;
    background: #f5f8fc;
    border: 1px solid #e6edf6;
    padding: 4px;
    border-radius: 11px;
    direction: ltr
}

    .scan-qty-controls button[b-ec7giap8qo] {
        border: 0;
        background: white;
        border-radius: 7px;
        width: 29px;
        height: 31px;
        display: grid;
        place-items: center;
        color: #2862c5;
        cursor: pointer;
        font-size: 17px
    }

        .scan-qty-controls button:disabled[b-ec7giap8qo] {
            opacity: .35;
            cursor: not-allowed
        }

    .scan-qty-controls input[b-ec7giap8qo] {
        width: 48px;
        max-width: 48px;
        border: 0;
        outline: 0;
        text-align: center;
        background: transparent;
        color: #18243a;
        font-weight: 800;
        font-size: 15px;
        appearance: textfield;
        -moz-appearance: textfield
    }

        .scan-qty-controls input[b-ec7giap8qo]::-webkit-inner-spin-button, .scan-qty-controls input[b-ec7giap8qo]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0
        }

.scan-notes[b-ec7giap8qo] {
    padding: 23px;
    margin-bottom: 16px
}

    .scan-notes label[b-ec7giap8qo] {
        display: block;
        font-weight: 800;
        font-size: 14px;
        margin-bottom: 12px
    }

        .scan-notes label i[b-ec7giap8qo] {
            color: #2563eb;
            margin-left: 6px
        }

        .scan-notes label span[b-ec7giap8qo] {
            color: #9aa5b5;
            font-weight: 400;
            font-size: 12px
        }

    .scan-notes textarea[b-ec7giap8qo] {
        width: 100%;
        resize: vertical;
        min-height: 95px;
        border: 1px solid #e2e9f3;
        border-radius: 12px;
        background: #fbfcff;
        padding: 13px 15px;
        font-size: 13px;
        outline: 0;
        color: #18243a
    }

        .scan-notes textarea:focus[b-ec7giap8qo] {
            border-color: #7aa9fa;
            box-shadow: 0 0 0 3px #2563eb12
        }

.scan-summary[b-ec7giap8qo] {
    padding: 24px
}

    .scan-summary .scan-section-heading[b-ec7giap8qo] {
        margin-bottom: 16px
    }

        .scan-summary .scan-section-heading > i[b-ec7giap8qo] {
            font-size: 27px;
            color: #b4c7e4
        }

.scan-summary-row[b-ec7giap8qo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px dashed #e8edf5;
    font-size: 14px;
    color: #77859a
}

    .scan-summary-row strong[b-ec7giap8qo] {
        font-size: 17px;
        color: #253b5a
    }

.scan-summary-total[b-ec7giap8qo] {
    border-bottom: 0;
    padding-bottom: 18px
}

    .scan-summary-total strong[b-ec7giap8qo] {
        font-size: 26px;
        color: #2563eb
    }

.scan-submit[b-ec7giap8qo] {
    width: 100%;
    padding: 16px;
    font-size: 15px;
    position: relative
}

.scan-submit-arrow[b-ec7giap8qo] {
    position: absolute;
    left: 18px
}

.scan-summary .scan-alert[b-ec7giap8qo] {
    margin-bottom: 15px
}

.scan-success-icon[b-ec7giap8qo] {
    width: 90px;
    height: 90px;
    background: #dcfce7;
    color: #16a34a;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 46px
}

.scan-receipt[b-ec7giap8qo] {
    background: #f4f8ff;
    border: 1px dashed #bfd5f9;
    border-radius: 16px;
    padding: 20px;
    min-width: min(100%,290px);
    display: flex;
    flex-direction: column;
    gap: 7px
}

    .scan-receipt span[b-ec7giap8qo] {
        color: #7b8ca6;
        font-size: 12px
    }

    .scan-receipt strong[b-ec7giap8qo] {
        font-size: 32px;
        color: #2259c1
    }

.scan-actions-center[b-ec7giap8qo] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px
}

.scan-modal-backdrop[b-ec7giap8qo] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: #0b1630b8;
    display: grid;
    place-items: center;
    padding: 15px;
    backdrop-filter: blur(5px)
}

.scan-modal[b-ec7giap8qo] {
    width: min(100%,450px);
    background: #fff;
    border-radius: 23px;
    overflow: hidden;
    box-shadow: 0 30px 70px #0005
}

.scan-modal-header[b-ec7giap8qo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 22px
}

    .scan-modal-header strong[b-ec7giap8qo], .scan-modal-header small[b-ec7giap8qo] {
        display: block
    }

    .scan-modal-header strong[b-ec7giap8qo] {
        font-size: 17px
    }

    .scan-modal-header small[b-ec7giap8qo] {
        font-size: 12px;
        color: #8794a7;
        margin-top: 4px
    }

    .scan-modal-header button[b-ec7giap8qo] {
        border: 0;
        background: #f1f4f9;
        border-radius: 10px;
        width: 36px;
        height: 36px
    }

.scan-reader[b-ec7giap8qo] {
    margin: 0 16px;
    min-height: 240px;
    overflow: hidden;
    border-radius: 14px;
    background: #101b30
}

.scan-modal .scan-alert[b-ec7giap8qo] {
    margin: 12px auto;
    width: calc(100% - 32px)
}

.scan-modal-footer[b-ec7giap8qo] {
    padding: 17px 20px;
    color: #7b8799;
    font-size: 12px;
    text-align: center
}

    .scan-modal-footer i[b-ec7giap8qo] {
        color: #e9a11c;
        margin-left: 5px
    }

@media(max-width:600px) {
    .scan-page[b-ec7giap8qo] {
        padding: 12px 12px 45px
    }

    .scan-hero[b-ec7giap8qo] {
        padding: 23px 20px;
        border-radius: 19px
    }

    .scan-hero-icon[b-ec7giap8qo] {
        width: 55px;
        height: 55px;
        font-size: 26px;
        border-radius: 15px
    }

    .scan-hero p[b-ec7giap8qo] {
        font-size: 12px
    }

    .scan-steps[b-ec7giap8qo] {
        gap: 6px;
        font-size: 11px;
        margin: 21px 0
    }

    .scan-step[b-ec7giap8qo] {
        gap: 4px
    }

        .scan-step span[b-ec7giap8qo] {
            width: 21px;
            height: 21px;
            font-size: 10px
        }

    .scan-steps > i[b-ec7giap8qo] {
        font-size: 9px
    }

    .scan-centered[b-ec7giap8qo] {
        padding: 38px 18px
    }

    .scan-shop[b-ec7giap8qo] {
        padding: 17px;
        gap: 11px
    }

    .scan-shop-icon[b-ec7giap8qo] {
        width: 48px;
        height: 48px;
        font-size: 22px
    }

    .scan-shop h2[b-ec7giap8qo] {
        font-size: 17px
    }

    .scan-item[b-ec7giap8qo] {
        gap: 9px;
        padding: 12px
    }

    .scan-item-icon[b-ec7giap8qo] {
        width: 35px;
        height: 35px;
        font-size: 16px
    }

    .scan-item-text strong[b-ec7giap8qo] {
        font-size: 13px
    }

    .scan-qty-controls input[b-ec7giap8qo] {
        width: 35px;
        max-width: 35px
    }

    .scan-qty-controls button[b-ec7giap8qo] {
        width: 25px;
        height: 29px
    }

    .scan-summary[b-ec7giap8qo], .scan-notes[b-ec7giap8qo] {
        padding: 18px
    }
}
/* /Pages/Shops.razor.rz.scp.css */

.shops-page[b-mp2s4mc2re] {
    color: #17243b;
}

.shops-heading[b-mp2s4mc2re] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 24px;
}

.shops-eyebrow[b-mp2s4mc2re] {
    font-size: 12px;
    font-weight: 700;
    color: #2563eb;
    margin-bottom: 6px;
}

.shops-heading h1[b-mp2s4mc2re] {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 8px;
}

.shops-heading p[b-mp2s4mc2re] {
    color: #8490a3;
    font-size: 13px;
    margin: 0;
}

.shops-primary-btn[b-mp2s4mc2re] {
    border: 0;
    border-radius: 12px;
    background: #2563eb;
    color: white;
    padding: 12px 17px;
    font-weight: 700;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

    .shops-primary-btn:hover[b-mp2s4mc2re] {
        background: #1d4ed8;
    }

.shops-summary[b-mp2s4mc2re] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.shops-stat[b-mp2s4mc2re] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: white;
    border: 1px solid #e9edf4;
    border-radius: 16px;
    padding: 18px;
}

.shops-stat-icon[b-mp2s4mc2re] {
    width: 47px;
    height: 47px;
    display: grid;
    place-items: center;
    background: #eaf1ff;
    color: #2563eb;
    border-radius: 13px;
    font-size: 22px;
}

    .shops-stat-icon.green[b-mp2s4mc2re] {
        background: #e8f8ef;
        color: #16a34a;
    }

.shops-stat span[b-mp2s4mc2re],
.shops-stat strong[b-mp2s4mc2re] {
    display: block;
}

.shops-stat span[b-mp2s4mc2re] {
    font-size: 12px;
    color: #8490a3;
}

.shops-stat strong[b-mp2s4mc2re] {
    font-size: 24px;
    margin-top: 3px;
}

.shops-toolbar[b-mp2s4mc2re] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.shops-search[b-mp2s4mc2re] {
    flex: 1;
    position: relative;
}

    .shops-search i[b-mp2s4mc2re] {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #98a4b5;
    }

    .shops-search input[b-mp2s4mc2re],
    .shops-filter[b-mp2s4mc2re] {
        width: 100%;
        min-height: 48px;
        border: 1px solid #e5eaf2;
        border-radius: 12px;
        background: white;
        outline: none;
    }

    .shops-search input[b-mp2s4mc2re] {
        padding: 12px 44px 12px 14px;
    }

.shops-filter[b-mp2s4mc2re] {
    width: 175px;
    padding: 0 12px;
}

.shops-grid[b-mp2s4mc2re] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.shops-card[b-mp2s4mc2re] {
    background: white;
    border: 1px solid #e9edf4;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 5px 18px rgba(20,40,80,.025);
}

.shops-card-top[b-mp2s4mc2re] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.shops-shop-icon[b-mp2s4mc2re] {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #edf3ff;
    color: #2563eb;
    font-size: 22px;
}

.shops-status[b-mp2s4mc2re] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

    .shops-status i[b-mp2s4mc2re] {
        font-size: 7px;
    }

    .shops-status.active[b-mp2s4mc2re] {
        color: #168348;
        background: #e9f8ef;
    }

    .shops-status.inactive[b-mp2s4mc2re] {
        color: #8c6470;
        background: #f5edf0;
    }

.shops-card h3[b-mp2s4mc2re] {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 6px;
}

.shops-code[b-mp2s4mc2re] {
    font-size: 12px;
    color: #8490a3;
}

.shops-details[b-mp2s4mc2re] {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 19px;
    margin-bottom: 20px;
    min-height: 38px;
}

    .shops-details > div[b-mp2s4mc2re] {
        display: flex;
        align-items: start;
        gap: 10px;
        font-size: 13px;
        color: #637188;
        overflow-wrap: anywhere;
    }

    .shops-details i[b-mp2s4mc2re] {
        color: #9ca9bc;
    }

.shops-card-actions[b-mp2s4mc2re] {
    display: flex;
    gap: 9px;
    border-top: 1px solid #f0f2f6;
    padding-top: 16px;
}

.shops-secondary-btn[b-mp2s4mc2re] {
    border: 1px solid #e5eaf2;
    background: white;
    color: #40516b;
    border-radius: 11px;
    padding: 10px 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .shops-secondary-btn:hover[b-mp2s4mc2re] {
        background: #f5f8ff;
    }

.shops-empty[b-mp2s4mc2re] {
    padding: 65px 20px;
    text-align: center;
    background: white;
    border-radius: 18px;
    border: 1px dashed #dce3ef;
}

    .shops-empty > i[b-mp2s4mc2re] {
        font-size: 46px;
        color: #b5c0d1;
    }

    .shops-empty h4[b-mp2s4mc2re] {
        margin-top: 12px;
        font-weight: 700;
    }

    .shops-empty p[b-mp2s4mc2re] {
        color: #8490a3;
        margin: 12px 0 0;
    }

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

.shops-modal[b-mp2s4mc2re] {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 510px;
    max-height: 90dvh;
    overflow-y: auto;
    box-shadow: 0 20px 70px rgba(0,0,0,.15);
}

.shops-modal-header[b-mp2s4mc2re] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding: 24px 24px 16px;
}

    .shops-modal-header h3[b-mp2s4mc2re] {
        font-size: 19px;
        font-weight: 800;
        margin: 0 0 6px;
    }

    .shops-modal-header p[b-mp2s4mc2re] {
        font-size: 12px;
        color: #8b97a9;
        margin: 0;
    }

.shops-close[b-mp2s4mc2re] {
    width: 36px;
    height: 36px;
    border: 0;
    background: #f3f5f9;
    border-radius: 10px;
}

.shops-form-body[b-mp2s4mc2re] {
    padding: 0 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

    .shops-form-body > label:not(.shops-checkbox)[b-mp2s4mc2re] {
        font-size: 12px;
        font-weight: 700;
        margin-top: 8px;
    }

    .shops-form-body .form-control[b-mp2s4mc2re] {
        min-height: 45px;
        border-radius: 11px;
    }

    .shops-form-body .validation-message[b-mp2s4mc2re] {
        color: #dc3545;
        font-size: 11px;
    }

.shops-checkbox[b-mp2s4mc2re] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 13px;
    font-size: 13px;
    font-weight: 600;
}

    .shops-checkbox input[b-mp2s4mc2re] {
        width: 18px;
        height: 18px;
    }

.shops-modal-footer[b-mp2s4mc2re] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 24px;
    border-top: 1px solid #f0f2f6;
}

.shops-qr-placeholder[b-mp2s4mc2re] {
    text-align: center;
    padding: 30px 24px 42px;
}

    .shops-qr-placeholder > i[b-mp2s4mc2re] {
        font-size: 95px;
        color: #2563eb;
    }

    .shops-qr-placeholder h4[b-mp2s4mc2re] {
        font-size: 18px;
        margin-top: 12px;
    }

    .shops-qr-placeholder p[b-mp2s4mc2re] {
        color: #8490a3;
        font-size: 13px;
    }

    .shops-qr-placeholder small[b-mp2s4mc2re] {
        color: #52627b;
    }

@media (max-width: 600px) {
    .shops-heading[b-mp2s4mc2re] {
        align-items: flex-start;
    }

        .shops-heading h1[b-mp2s4mc2re] {
            font-size: 23px;
        }

        .shops-heading p[b-mp2s4mc2re] {
            font-size: 12px;
        }

    .shops-primary-btn[b-mp2s4mc2re] {
        padding: 11px 13px;
        font-size: 12px;
    }

    .shops-summary[b-mp2s4mc2re] {
        gap: 10px;
    }

    .shops-stat[b-mp2s4mc2re] {
        padding: 13px;
        gap: 9px;
    }

    .shops-stat-icon[b-mp2s4mc2re] {
        width: 39px;
        height: 39px;
        font-size: 18px;
    }

    .shops-stat strong[b-mp2s4mc2re] {
        font-size: 20px;
    }

    .shops-toolbar[b-mp2s4mc2re] {
        flex-direction: column;
    }

    .shops-filter[b-mp2s4mc2re] {
        width: 100%;
    }

    .shops-grid[b-mp2s4mc2re] {
        grid-template-columns: minmax(0, 1fr);
    }

    .shops-modal-backdrop[b-mp2s4mc2re] {
        align-items: flex-end;
        padding: 0;
    }

    .shops-modal[b-mp2s4mc2re] {
        border-radius: 22px 22px 0 0;
        max-height: 92dvh;
        padding-bottom: env(safe-area-inset-bottom);
    }
}


.shops-qr-modal[b-mp2s4mc2re] {
    max-width: 430px;
}

.shops-qr-content[b-mp2s4mc2re] {
    padding: 0 24px 24px;
}

.shops-qr-print-card[b-mp2s4mc2re] {
    text-align: center;
    background: #fff;
    border: 1px solid #e9edf4;
    border-radius: 18px;
    padding: 24px 16px;
}

.shops-qr-brand[b-mp2s4mc2re] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
}

    .shops-qr-brand i[b-mp2s4mc2re] {
        font-size: 20px;
    }

.shops-qr-print-card h2[b-mp2s4mc2re] {
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 7px;
}

.shops-qr-shopcode[b-mp2s4mc2re] {
    color: #64748b;
    font-size: 13px;
    direction: ltr;
    margin-bottom: 18px;
}

.shops-qr-image[b-mp2s4mc2re] {
    background: white;
    display: flex;
    justify-content: center;
    padding: 12px;
}

    .shops-qr-image img[b-mp2s4mc2re] {
        width: 230px;
        height: 230px;
        object-fit: contain;
        image-rendering: crisp-edges;
    }

.shops-qr-instruction[b-mp2s4mc2re] {
    color: #475569;
    font-size: 12px;
    margin-top: 12px;
}

.shops-qr-buttons[b-mp2s4mc2re] {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

@media (max-width: 600px) {
    .shops-qr-content[b-mp2s4mc2re] {
        padding: 0 18px 25px;
    }

    .shops-qr-image img[b-mp2s4mc2re] {
        width: 210px;
        height: 210px;
    }

    .shops-qr-buttons button[b-mp2s4mc2re] {
        flex: 1;
    }
}
/* /Pages/Users.razor.rz.scp.css */
/* DeliveryTracker — Users management (RTL / mobile-first) */
.users-page[b-1mqt1sdcxp] {
    --u-ink: #16233b;
    --u-muted: #8290a5;
    --u-line: #e8edf5;
    --u-blue: #3768ef;
    --u-surface: #fff;
    font-family: 'Alexandria',sans-serif;
    color: var(--u-ink);
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px 22px 110px;
    min-width: 0
}

    .users-page *[b-1mqt1sdcxp] {
        box-sizing: border-box
    }

.users-header[b-1mqt1sdcxp] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: linear-gradient(112deg,#12244b 0%,#193a7b 63%,#315bba 100%);
    border-radius: 24px;
    padding: 33px 36px;
    margin-bottom: 22px;
    color: #fff;
    box-shadow: 0 16px 36px rgba(25,55,117,.14)
}

    .users-header[b-1mqt1sdcxp]::after {
        content: "";
        position: absolute;
        z-index: -1;
        width: 260px;
        height: 260px;
        border: 45px solid rgba(255,255,255,.045);
        border-radius: 50%;
        left: -65px;
        top: -140px
    }

.users-eyebrow[b-1mqt1sdcxp] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: #bed1ff;
    margin-bottom: 15px
}

    .users-eyebrow span[b-1mqt1sdcxp] {
        height: 4px;
        width: 4px;
        border-radius: 50%;
        background: #bed1ff
    }

.users-header h1[b-1mqt1sdcxp] {
    font-size: clamp(20px,2.4vw,29px);
    font-weight: 750;
    line-height: 1.5;
    margin: 0 0 8px
}

.users-header p[b-1mqt1sdcxp] {
    font-size: 12px;
    color: #c6d6f7;
    line-height: 1.9;
    margin: 0
}

.users-add-btn[b-1mqt1sdcxp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    background: #fff;
    color: #21489d;
    border-radius: 13px;
    padding: 14px 20px;
    white-space: nowrap;
    font-weight: 700;
    font-size: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    transition: transform .2s,background .2s
}

    .users-add-btn:hover[b-1mqt1sdcxp] {
        background: #f0f5ff;
        transform: translateY(-2px)
    }

.users-stats[b-1mqt1sdcxp] {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px;
    margin-bottom: 26px
}

.users-stat-card[b-1mqt1sdcxp] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: 18px;
    padding: 19px 18px;
    min-width: 0;
    box-shadow: 0 5px 18px rgba(25,43,75,.025)
}

.users-stat-icon[b-1mqt1sdcxp] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 47px;
    height: 47px;
    border-radius: 14px;
    font-size: 20px
}

    .users-stat-icon.total[b-1mqt1sdcxp] {
        background: #edf3ff;
        color: #3b69e9
    }

    .users-stat-icon.enabled[b-1mqt1sdcxp] {
        background: #e8f8f1;
        color: #169b69
    }

    .users-stat-icon.admin[b-1mqt1sdcxp] {
        background: #f1ecff;
        color: #8054c9
    }

    .users-stat-icon.disabled[b-1mqt1sdcxp] {
        background: #fff0f0;
        color: #e06b6b
    }

.users-stat-card > div[b-1mqt1sdcxp] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0
}

.users-stat-card small[b-1mqt1sdcxp] {
    color: var(--u-muted);
    font-size: 10px;
    white-space: nowrap
}

.users-stat-card strong[b-1mqt1sdcxp] {
    font-size: 24px;
    font-weight: 750;
    line-height: 1.2;
    font-variant-numeric: tabular-nums
}

.users-toolbar[b-1mqt1sdcxp] {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 24px
}

.users-search[b-1mqt1sdcxp], .users-filter-wrap[b-1mqt1sdcxp] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--u-line);
    border-radius: 14px;
    padding: 0 15px;
    min-height: 51px;
    color: #8493a8;
    transition: border-color .2s,box-shadow .2s
}

    .users-search:focus-within[b-1mqt1sdcxp], .users-filter-wrap:focus-within[b-1mqt1sdcxp] {
        border-color: #91b2fa;
        box-shadow: 0 0 0 3px rgba(55,104,239,.08)
    }

.users-search[b-1mqt1sdcxp] {
    flex: 1
}

    .users-search input[b-1mqt1sdcxp], .users-filter-wrap select[b-1mqt1sdcxp] {
        border: 0;
        outline: 0;
        background: transparent;
        min-width: 0;
        font-family: inherit;
        color: var(--u-ink);
        font-size: 12px;
        width: 100%
    }

        .users-search input[b-1mqt1sdcxp]::placeholder {
            color: #a3adbd
        }

.users-filter-wrap[b-1mqt1sdcxp] {
    width: 190px
}

    .users-filter-wrap select[b-1mqt1sdcxp] {
        cursor: pointer
    }

.users-section-heading[b-1mqt1sdcxp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 2px 16px
}

    .users-section-heading h2[b-1mqt1sdcxp] {
        font-size: 17px;
        font-weight: 750;
        margin: 0 0 6px
    }

    .users-section-heading p[b-1mqt1sdcxp] {
        font-size: 11px;
        color: var(--u-muted);
        margin: 0
    }

    .users-section-heading > span[b-1mqt1sdcxp] {
        font-size: 11px;
        color: #58709a;
        background: #eaf0f9;
        border-radius: 999px;
        padding: 8px 12px;
        white-space: nowrap
    }

.users-grid[b-1mqt1sdcxp] {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px
}

.user-card[b-1mqt1sdcxp] {
    background: #fff;
    border: 1px solid var(--u-line);
    border-radius: 19px;
    padding: 21px;
    min-width: 0;
    box-shadow: 0 5px 22px rgba(24,42,73,.035);
    transition: transform .2s,box-shadow .2s,border-color .2s
}

    .user-card:hover[b-1mqt1sdcxp] {
        transform: translateY(-3px);
        box-shadow: 0 14px 30px rgba(24,42,73,.075);
        border-color: #d6e2f7
    }

.user-card-top[b-1mqt1sdcxp] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px
}

.user-avatar[b-1mqt1sdcxp] {
    display: grid;
    place-items: center;
    width: 57px;
    height: 57px;
    border-radius: 17px;
    background: linear-gradient(140deg,#e6efff,#d6e4ff);
    color: #3d65ca;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1px
}

    .user-avatar.is-admin[b-1mqt1sdcxp] {
        background: linear-gradient(140deg,#f1e9ff,#e7dbff);
        color: #8051bb
    }

.user-status[b-1mqt1sdcxp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 650;
    padding: 7px 10px;
    border-radius: 999px
}

    .user-status[b-1mqt1sdcxp]::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor
    }

    .user-status.active[b-1mqt1sdcxp] {
        color: #16875f;
        background: #e7f8f0
    }

    .user-status.inactive[b-1mqt1sdcxp] {
        color: #c45050;
        background: #fff0f0
    }

.user-card h3[b-1mqt1sdcxp] {
    font-size: 14px;
    font-weight: 750;
    line-height: 1.6;
    margin: 0 0 5px;
    overflow-wrap: anywhere
}

.user-username[b-1mqt1sdcxp] {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #94a1b2;
    font-size: 11px;
    direction: ltr;
    justify-content: flex-end;
    margin: 0 0 18px;
    overflow-wrap: anywhere
}

.user-meta[b-1mqt1sdcxp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 0;
    border-top: 1px solid #f0f3f8;
    border-bottom: 1px solid #f0f3f8;
    margin-bottom: 15px
}

.user-role[b-1mqt1sdcxp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eef3ff;
    color: #4e6fbd;
    border-radius: 9px;
    padding: 7px 9px;
    font-size: 10px;
    white-space: nowrap
}

    .user-role.is-admin[b-1mqt1sdcxp] {
        background: #f4edff;
        color: #8459c5
    }

.user-meta small[b-1mqt1sdcxp] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #98a4b5;
    font-size: 10px;
    white-space: nowrap
}

.user-actions[b-1mqt1sdcxp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px
}

    .user-actions button[b-1mqt1sdcxp] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1px solid #e6ecf6;
        background: #f8faff;
        color: #435977;
        border-radius: 10px;
        padding: 11px 6px;
        font-size: 11px;
        font-weight: 650;
        transition: background .2s,border-color .2s
    }

        .user-actions button:hover[b-1mqt1sdcxp] {
            background: #edf3ff;
            border-color: #cbdaf6
        }

        .user-actions button:first-child[b-1mqt1sdcxp] {
            background: #edf3ff;
            color: #3461cb;
            border-color: #e0e9ff
        }

.users-empty[b-1mqt1sdcxp] {
    text-align: center;
    padding: 65px 20px;
    background: #fff;
    border: 1px dashed #dbe4f1;
    border-radius: 20px
}

    .users-empty > i[b-1mqt1sdcxp] {
        display: block;
        font-size: 38px;
        color: #a8badb;
        margin-bottom: 14px
    }

    .users-empty h3[b-1mqt1sdcxp] {
        font-size: 16px;
        font-weight: 700
    }

    .users-empty p[b-1mqt1sdcxp] {
        font-size: 12px;
        color: var(--u-muted)
    }

.users-modal-backdrop[b-1mqt1sdcxp] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15,28,53,.6);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px
}

.users-modal[b-1mqt1sdcxp] {
    width: 100%;
    max-width: 470px;
    max-height: min(90vh,800px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border-radius: 22px;
    padding: 25px;
    box-shadow: 0 30px 80px rgba(4,15,35,.22)
}

.users-modal-header[b-1mqt1sdcxp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--u-line);
    margin-bottom: 18px
}

.users-modal-title[b-1mqt1sdcxp] {
    display: flex;
    align-items: center;
    gap: 12px
}

.users-modal-symbol[b-1mqt1sdcxp] {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    border-radius: 13px;
    background: #edf3ff;
    color: #3b69e9;
    font-size: 20px;
    flex-shrink: 0
}

.users-modal-title h3[b-1mqt1sdcxp] {
    font-size: 15px;
    font-weight: 750;
    margin: 0 0 5px
}

.users-modal-title p[b-1mqt1sdcxp] {
    font-size: 10px;
    color: var(--u-muted);
    margin: 0
}

.users-modal-header > button[b-1mqt1sdcxp] {
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: #f2f5fa;
    color: #708098;
    width: 35px;
    height: 35px;
    flex-shrink: 0
}

.users-modal form > label[b-1mqt1sdcxp] {
    display: block;
    font-size: 11px;
    font-weight: 650;
    color: #53627b;
    margin: 17px 0 8px
}

.users-modal .form-control[b-1mqt1sdcxp], .users-modal .form-select[b-1mqt1sdcxp] {
    font-family: inherit;
    border-radius: 11px;
    border: 1px solid #dfe6f1;
    background: #fbfcff;
    padding: 12px 13px;
    font-size: 12px;
    min-height: 46px;
    box-shadow: none
}

    .users-modal .form-control:focus[b-1mqt1sdcxp], .users-modal .form-select:focus[b-1mqt1sdcxp] {
        border-color: #7196ed;
        box-shadow: 0 0 0 3px rgba(55,104,239,.09)
    }

.users-modal .users-check[b-1mqt1sdcxp] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f7f9fd;
    padding: 13px;
    border-radius: 11px;
    margin-top: 18px;
    cursor: pointer
}

.users-check input[b-1mqt1sdcxp] {
    accent-color: #3768ef;
    width: 17px;
    height: 17px
}

.users-modal .btn-primary[b-1mqt1sdcxp] {
    border: 0;
    background: #3768ef;
    border-radius: 11px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 13px;
    min-height: 47px
}

    .users-modal .btn-primary:hover[b-1mqt1sdcxp] {
        background: #2858d9
    }

.users-page .alert[b-1mqt1sdcxp] {
    border-radius: 13px;
    font-size: 12px;
    padding: 13px 16px
}

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

    .users-stats[b-1mqt1sdcxp] {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:640px) {
    .users-page[b-1mqt1sdcxp] {
        padding: 14px 13px 112px
    }

    .users-header[b-1mqt1sdcxp] {
        border-radius: 18px;
        padding: 24px 19px;
        align-items: flex-start;
        flex-direction: column;
        gap: 20px
    }

        .users-header h1[b-1mqt1sdcxp] {
            font-size: 21px
        }

        .users-header p[b-1mqt1sdcxp] {
            font-size: 11px
        }

    .users-add-btn[b-1mqt1sdcxp] {
        width: 100%;
        padding: 13px
    }

    .users-stats[b-1mqt1sdcxp] {
        gap: 9px;
        margin-bottom: 19px
    }

    .users-stat-card[b-1mqt1sdcxp] {
        padding: 14px 11px;
        gap: 10px;
        border-radius: 14px
    }

    .users-stat-icon[b-1mqt1sdcxp] {
        width: 39px;
        height: 39px;
        border-radius: 11px;
        font-size: 17px
    }

    .users-stat-card small[b-1mqt1sdcxp] {
        font-size: 9px;
        white-space: normal
    }

    .users-stat-card strong[b-1mqt1sdcxp] {
        font-size: 21px
    }

    .users-toolbar[b-1mqt1sdcxp] {
        flex-direction: column;
        gap: 9px;
        margin-bottom: 19px
    }

    .users-filter-wrap[b-1mqt1sdcxp] {
        width: 100%
    }

    .users-section-heading h2[b-1mqt1sdcxp] {
        font-size: 15px
    }

    .users-section-heading p[b-1mqt1sdcxp] {
        font-size: 10px
    }

    .users-grid[b-1mqt1sdcxp] {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .user-card[b-1mqt1sdcxp] {
        padding: 19px
    }

    .users-modal-backdrop[b-1mqt1sdcxp] {
        align-items: flex-end;
        padding: 0
    }

    .users-modal[b-1mqt1sdcxp] {
        max-width: none;
        max-height: 92dvh;
        border-radius: 22px 22px 0 0;
        padding: 23px 19px 30px
    }

    .users-modal-header[b-1mqt1sdcxp] {
        margin-bottom: 12px
    }
}

@media(prefers-reduced-motion:reduce) {
    .users-page *[b-1mqt1sdcxp] {
        transition: none !important
    }
}