/* /Layout/MainLayout.razor.rz.scp.css */
/* /Layout/NavMenu.razor.rz.scp.css */
/* /Pages/CPanel/Dashboard/Index.razor.rz.scp.css */



/* ── Page Header ── */
.app-page-header[b-kwg1b2ve5y] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.app-page-title[b-kwg1b2ve5y] {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--app-text);
}

.app-page-sub[b-kwg1b2ve5y] {
    font-size: 13px;
    color: var(--app-muted);
    margin: 0;
}

.app-header-actions[b-kwg1b2ve5y] {
    display: flex;
    gap: 8px;
}

.app-btn-add.e-btn[b-kwg1b2ve5y] {
    background: var(--app-accent) !important;
    border-color: var(--app-accent) !important;
    color: #fff !important;
    border-radius: 6px !important;
}

    .app-btn-add.e-btn:hover[b-kwg1b2ve5y] {
        background: var(--app-accent-hover) !important;
        border-color: var(--app-accent-hover) !important;
    }

.app-btn-role.e-btn[b-kwg1b2ve5y] {
    color: var(--app-accent) !important;
    border-color: var(--app-accent) !important;
    border-radius: 6px !important;
}

/* ── KPI Row ── */
.app-kpi-row[b-kwg1b2ve5y] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--app-gap);
}

.app-kpi-card[b-kwg1b2ve5y] {
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-kpi-icon[b-kwg1b2ve5y] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.app-kpi-value[b-kwg1b2ve5y] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: var(--app-text);
}

.app-kpi-label[b-kwg1b2ve5y] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--app-muted);
    margin-top: 3px;
}

.app-kpi-trend[b-kwg1b2ve5y] {
    font-size: 11px;
    margin-top: 4px;
}

    .app-kpi-trend.up[b-kwg1b2ve5y] {
        color: var(--app-success);
    }

    .app-kpi-trend.down[b-kwg1b2ve5y] {
        color: var(--app-danger);
    }

/* ── Charts Row ── */
.app-charts-row[b-kwg1b2ve5y] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--app-gap);
}

/* ── Cards ── */
.app-card[b-kwg1b2ve5y] {
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
    padding: 16px 18px;
    min-width: 0;
}

.app-card--full[b-kwg1b2ve5y] {
    margin-top: 0;
}

.app-card-header[b-kwg1b2ve5y] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.app-card-title[b-kwg1b2ve5y] {
    font-size: 14px;
    font-weight: 700;
    color: var(--app-text);
}

.app-card-sub[b-kwg1b2ve5y] {
    font-size: 12px;
    color: var(--app-muted);
}

/* ── Tabs ── */
.app-tabs.e-tab > .e-tab-header[b-kwg1b2ve5y] {
    background: transparent !important;
    border-bottom: 1px solid var(--app-border) !important;
}

.app-tabs .e-tab-header .e-indicator[b-kwg1b2ve5y] {
    background: var(--app-accent) !important;
    height: 2px;
}

.app-tabs .e-tab-header .e-active .e-tab-text[b-kwg1b2ve5y],
.app-tabs .e-tab-header .e-active .e-tab-icon[b-kwg1b2ve5y] {
    color: var(--app-accent) !important;
}

.app-tabs .e-content[b-kwg1b2ve5y] {
    background: transparent !important;
}

/* ── Toolbar ── */
.app-toolbar[b-kwg1b2ve5y] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
}

.app-search[b-kwg1b2ve5y] {
    flex: 1;
}

.app-filter-drop[b-kwg1b2ve5y] {
    width: 150px !important;
}

/* ── Grid ── */
.app-grid.e-grid[b-kwg1b2ve5y] {
    border: none !important;
    box-shadow: none !important;
}

.app-grid .e-gridheader[b-kwg1b2ve5y] {
    background: var(--app-muted-bg) !important;
    border-bottom: 1px solid var(--app-border) !important;
}

.app-grid .e-headercell .e-headercelldiv[b-kwg1b2ve5y] {
    font-weight: 600;
    font-size: 12px;
    color: var(--app-sub);
}

.app-grid .e-rowcell[b-kwg1b2ve5y] {
    padding: 10px 16px !important;
    font-size: 13px;
    border: none !important;
    color: var(--app-sub);
}

.app-grid .e-row[b-kwg1b2ve5y] {
    border-bottom: 1px solid var(--app-border-light) !important;
}

    .app-grid .e-row:hover .e-rowcell[b-kwg1b2ve5y] {
        background: #f5f3fc !important;
    }

/* ── User cell ── */
.app-user-cell[b-kwg1b2ve5y] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-avatar[b-kwg1b2ve5y] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.app-user-name[b-kwg1b2ve5y] {
    font-weight: 600;
    color: var(--app-text);
    font-size: 13px;
}

.app-user-email[b-kwg1b2ve5y] {
    font-size: 11px;
    color: var(--app-muted);
}

/* ── Status badges ── */
.app-status[b-kwg1b2ve5y] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.app-status--active[b-kwg1b2ve5y] {
    background: #dcfce7;
    color: #16a34a;
}

.app-status--inactive[b-kwg1b2ve5y] {
    background: #fee2e2;
    color: #dc2626;
}

.app-status--pending[b-kwg1b2ve5y] {
    background: #fef9c3;
    color: #b45309;
}

/* ── Role badges ── */
.app-role-badge[b-kwg1b2ve5y] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: #ede9f8;
    color: var(--app-accent);
}

.app-role-badge--admin[b-kwg1b2ve5y] {
    background: #fee2e2;
    color: #dc2626;
}

.app-role-badge--manager[b-kwg1b2ve5y] {
    background: #dbeafe;
    color: #2563eb;
}

.app-role-badge--developer[b-kwg1b2ve5y] {
    background: #ede9f8;
    color: #7c5cbf;
}

.app-role-badge--viewer[b-kwg1b2ve5y] {
    background: #f0fdf4;
    color: #16a34a;
}

.app-role-badge--support[b-kwg1b2ve5y] {
    background: #fef9c3;
    color: #b45309;
}

.app-role-badge--super-admin[b-kwg1b2ve5y] {
    background: #fce7f3;
    color: #db2777;
}

/* ── Action buttons ── */
.app-actions[b-kwg1b2ve5y] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.app-act-btn.e-btn[b-kwg1b2ve5y] {
    min-width: 28px !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border-radius: 5px !important;
    color: var(--app-muted) !important;
    border-color: var(--app-border) !important;
}

    .app-act-btn.e-btn:hover[b-kwg1b2ve5y] {
        background: #ede9f8 !important;
        color: var(--app-accent) !important;
        border-color: #c9b8f0 !important;
    }

.app-act-btn--danger.e-btn:hover[b-kwg1b2ve5y] {
    background: #fee2e2 !important;
    color: var(--app-danger) !important;
    border-color: #fca5a5 !important;
}

/* ── Form ── */
.app-form[b-kwg1b2ve5y] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

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

.app-form-group[b-kwg1b2ve5y] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .app-form-group label[b-kwg1b2ve5y] {
        font-size: 12px;
        font-weight: 600;
        color: var(--app-sub);
    }

/* ── Dialog ── */
.e-dialog .e-dlg-header-content[b-kwg1b2ve5y] {
    background: var(--app-muted-bg);
    border-bottom: 1px solid var(--app-border);
    font-weight: 600;
    font-size: 14px;
}

.e-dialog .e-footer-content[b-kwg1b2ve5y] {
    background: var(--app-muted-bg);
    border-top: 1px solid var(--app-border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
}

.app-dialog-body[b-kwg1b2ve5y] {
    font-size: 13px;
    color: var(--app-sub);
    margin: 0;
    line-height: 1.6;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .app-kpi-row[b-kwg1b2ve5y] {
        grid-template-columns: repeat(3, 1fr);
    }

    .app-charts-row[b-kwg1b2ve5y] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .app-kpi-row[b-kwg1b2ve5y] {
        grid-template-columns: repeat(2, 1fr);
    }

    .app-charts-row[b-kwg1b2ve5y] {
        grid-template-columns: 1fr;
    }

    .app-form-row[b-kwg1b2ve5y] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/CPanel/Roles/Create.razor.rz.scp.css */

/* ── Permissions Grid ── */
.permissions-grid[b-yjxcvheqtm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1px;
    background: var(--app-border);
}

.permission-group[b-yjxcvheqtm] {
    background: var(--app-card);
    overflow: hidden;
}

.permission-group-header[b-yjxcvheqtm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--app-muted-bg);
    border-bottom: 1px solid var(--app-border-light);
}

.group-icon[b-yjxcvheqtm] {
    font-size: 14px;
    color: var(--app-accent);
    flex-shrink: 0;
}

.group-name[b-yjxcvheqtm] {
    flex: 1;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--app-text-sub);
}

.group-toggle.e-switch-wrapper[b-yjxcvheqtm] {
    margin-left: auto;
}

    .group-toggle.e-switch-wrapper .e-switch-on[b-yjxcvheqtm] {
        background: var(--app-accent) !important;
    }

/* Permission Items */
.permission-items[b-yjxcvheqtm] {
    display: flex;
    flex-direction: column;
}

.permission-item[b-yjxcvheqtm] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    transition: background var(--app-transition);
}

    .permission-item:hover[b-yjxcvheqtm] {
        background: var(--app-banner-bg);
    }

.permission-item--active[b-yjxcvheqtm] {
    background: var(--app-banner-bg);
}

.perm-info[b-yjxcvheqtm] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.perm-name[b-yjxcvheqtm] {
    font-size: 13px;
    font-weight: 500;
    color: var(--app-text);
    line-height: 1.3;
}

.perm-desc[b-yjxcvheqtm] {
    font-size: 11.5px;
    color: var(--app-text-muted);
    line-height: 1.3;
}

.permission-item .e-checkbox-wrapper .e-frame[b-yjxcvheqtm] {
    border-color: var(--app-border);
    border-radius: 4px;
}

.permission-item .e-checkbox-wrapper .e-check[b-yjxcvheqtm] {
    background: var(--app-accent);
    border-color: var(--app-accent);
}

/* ── Permission Summary ── */
.permission-summary[b-yjxcvheqtm] {
    display: flex;
    align-items: center;
    gap: var(--app-gap);
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--app-radius);
    font-size: 13px;
    color: #166534;
    margin-top: 4px;
}

.summary-icon[b-yjxcvheqtm] {
    font-size: 15px;
    color: var(--app-success);
}
/* /Pages/CPanel/Roles/Edit.razor.rz.scp.css */

/* ── Permissions Grid ── */
.permissions-grid[b-1csfepmvl4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1px;
    background: var(--app-border);
}

.permission-group[b-1csfepmvl4] {
    background: var(--app-card);
    overflow: hidden;
}

.permission-group-header[b-1csfepmvl4] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--app-muted-bg);
    border-bottom: 1px solid var(--app-border-light);
}

.group-icon[b-1csfepmvl4] {
    font-size: 14px;
    color: var(--app-accent);
    flex-shrink: 0;
}

.group-name[b-1csfepmvl4] {
    flex: 1;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--app-text-sub);
}

.group-toggle.e-switch-wrapper[b-1csfepmvl4] {
    margin-left: auto;
}

    .group-toggle.e-switch-wrapper .e-switch-on[b-1csfepmvl4] {
        background: var(--app-accent) !important;
    }

/* Permission Items */
.permission-items[b-1csfepmvl4] {
    display: flex;
    flex-direction: column;
}

.permission-item[b-1csfepmvl4] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    transition: background var(--app-transition);
}

    .permission-item:hover[b-1csfepmvl4] {
        background: var(--app-banner-bg);
    }

.permission-item--active[b-1csfepmvl4] {
    background: var(--app-banner-bg);
}

.perm-info[b-1csfepmvl4] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.perm-name[b-1csfepmvl4] {
    font-size: 13px;
    font-weight: 500;
    color: var(--app-text);
    line-height: 1.3;
}

.perm-desc[b-1csfepmvl4] {
    font-size: 11.5px;
    color: var(--app-text-muted);
    line-height: 1.3;
}

.permission-item .e-checkbox-wrapper .e-frame[b-1csfepmvl4] {
    border-color: var(--app-border);
    border-radius: 4px;
}

.permission-item .e-checkbox-wrapper .e-check[b-1csfepmvl4] {
    background: var(--app-accent);
    border-color: var(--app-accent);
}

/* ── Permission Summary ── */
.permission-summary[b-1csfepmvl4] {
    display: flex;
    align-items: center;
    gap: var(--app-gap);
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--app-radius);
    font-size: 13px;
    color: #166534;
    margin-top: 4px;
}

.summary-icon[b-1csfepmvl4] {
    font-size: 15px;
    color: var(--app-success);
}
/* /Pages/CPanel/Roles/Index.razor.rz.scp.css */
.filter-wrapper[b-fw5pzlv6cr] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: end;
    margin-bottom:.5rem;
}

.filter-container[b-fw5pzlv6cr] {
    display: flex;
    align-items: center;
    gap: 4px;
}


    /* ── Page Header ── */
    .app-page-header[b-fw5pzlv6cr] {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 5px;
    }

    .app-page-title[b-fw5pzlv6cr] {
        font-size: 22px;
        font-weight: 700;
        margin: 0;
        color: var(--app-text);
        display: flex;
        gap: 5px;
        align-items: center;
    }
    .app-icon[b-fw5pzlv6cr] {
        width: 35px;
        height: 35px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 4px;
    }
    .app-page-sub[b-fw5pzlv6cr] {
        font-size: 13px;
        color: var(--app-muted);
        margin: 0;
    }

    .app-header-actions[b-fw5pzlv6cr] { display: flex; gap: 5px; }

/* ── Toolbar ── */
.app-toolbar[b-fw5pzlv6cr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
}

.app-search[b-fw5pzlv6cr] {
    flex: 1;
}

.app-filter-drop[b-fw5pzlv6cr] {
    width: 150px !important;
}

/* ── Grid ── */
.app-grid.e-grid[b-fw5pzlv6cr] {
    border: none !important;
    box-shadow: none !important;
}

.app-grid .e-gridheader[b-fw5pzlv6cr] {
    background: var(--app-muted-bg) !important;
    border-bottom: 1px solid var(--app-border) !important;
}

.app-grid .e-headercell .e-headercelldiv[b-fw5pzlv6cr] {
    font-weight: 600;
    font-size: 12px;
    color: var(--app-sub);
}

.app-grid .e-rowcell[b-fw5pzlv6cr] {
    padding: 10px 16px !important;
    font-size: 13px;
    border: none !important;
    color: var(--app-sub);
}

.app-grid .e-row[b-fw5pzlv6cr] {
    border-bottom: 1px solid var(--app-border-light) !important;
}

.app-grid .e-row:hover .e-rowcell[b-fw5pzlv6cr] {
    background: #f5f3fc !important;
}

/* ── Action buttons ── */
.app-actions[b-fw5pzlv6cr] {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

/* /Pages/CPanel/Users/Create.razor.rz.scp.css */
.roles-grid[b-zc2fnhreqw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}

.role-item[b-zc2fnhreqw] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-card);
    cursor: pointer;
    transition: background var(--app-transition), border-color var(--app-transition);
}

.role-item:hover[b-zc2fnhreqw] {
    background: var(--app-banner-bg);
}

.role-item--active[b-zc2fnhreqw] {
    border-color: var(--app-accent);
    background: var(--app-banner-bg);
}

.role-info[b-zc2fnhreqw] {
    display: flex;
    flex-direction: column;
}

.role-name[b-zc2fnhreqw] {
    font-size: 13px;
    font-weight: 600;
    color: var(--app-text);
}

.role-meta[b-zc2fnhreqw] {
    font-size: 11.5px;
    color: var(--app-text-muted);
}

.role-summary[b-zc2fnhreqw] {
    display: flex;
    align-items: center;
    gap: var(--app-gap);
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--app-radius);
    font-size: 13px;
    color: #166534;
    margin-top: 12px;
}

.summary-icon[b-zc2fnhreqw] {
    font-size: 15px;
    color: var(--app-success);
}

.no-roles[b-zc2fnhreqw] {
    font-size: 13px;
    color: var(--app-text-muted);
    padding: 8px 0;
}
/* /Pages/CPanel/Users/Edit.razor.rz.scp.css */
.roles-grid[b-zrfpy911wp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}

.role-item[b-zrfpy911wp] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-card);
    cursor: pointer;
    transition: background var(--app-transition), border-color var(--app-transition);
}

.role-item:hover[b-zrfpy911wp] {
    background: var(--app-banner-bg);
}

.role-item--active[b-zrfpy911wp] {
    border-color: var(--app-accent);
    background: var(--app-banner-bg);
}

.role-info[b-zrfpy911wp] {
    display: flex;
    flex-direction: column;
}

.role-name[b-zrfpy911wp] {
    font-size: 13px;
    font-weight: 600;
    color: var(--app-text);
}

.role-meta[b-zrfpy911wp] {
    font-size: 11.5px;
    color: var(--app-text-muted);
}

.role-summary[b-zrfpy911wp] {
    display: flex;
    align-items: center;
    gap: var(--app-gap);
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--app-radius);
    font-size: 13px;
    color: #166534;
    margin-top: 12px;
}

.summary-icon[b-zrfpy911wp] {
    font-size: 15px;
    color: var(--app-success);
}

.no-roles[b-zrfpy911wp] {
    font-size: 13px;
    color: var(--app-text-muted);
    padding: 8px 0;
}
/* /Pages/CPanel/Users/Index.razor.rz.scp.css */
.filter-wrapper[b-xakrhdf9yh] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: end;
    margin-bottom: .5rem;
}

.filter-container[b-xakrhdf9yh] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.app-page-header[b-xakrhdf9yh] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px;
}

.app-page-title[b-xakrhdf9yh] {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: var(--app-text);
    display: flex;
    gap: 5px;
    align-items: center;
}

.app-icon[b-xakrhdf9yh] {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.app-page-sub[b-xakrhdf9yh] {
    font-size: 13px;
    color: var(--app-muted);
    margin: 0;
}

.app-header-actions[b-xakrhdf9yh] {
    display: flex;
    gap: 5px;
}

.app-toolbar[b-xakrhdf9yh] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
}

.app-search[b-xakrhdf9yh] {
    flex: 1;
}

.app-filter-drop[b-xakrhdf9yh] {
    width: 150px !important;
}

.app-grid.e-grid[b-xakrhdf9yh] {
    border: none !important;
    box-shadow: none !important;
}

.app-grid .e-gridheader[b-xakrhdf9yh] {
    background: var(--app-muted-bg) !important;
    border-bottom: 1px solid var(--app-border) !important;
}

.app-grid .e-headercell .e-headercelldiv[b-xakrhdf9yh] {
    font-weight: 600;
    font-size: 12px;
    color: var(--app-sub);
}

.app-grid .e-rowcell[b-xakrhdf9yh] {
    padding: 10px 16px !important;
    font-size: 13px;
    border: none !important;
    color: var(--app-sub);
}

.app-grid .e-row[b-xakrhdf9yh] {
    border-bottom: 1px solid var(--app-border-light) !important;
}

.app-grid .e-row:hover .e-rowcell[b-xakrhdf9yh] {
    background: #f5f3fc !important;
}

.app-actions[b-xakrhdf9yh] {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}
/* /Pages/Home.razor.rz.scp.css */
.e-toggle-icon[b-zr8p312cm2] {
    top: 4px !important;
}

.page-title[b-zr8p312cm2] {
    font-size: 22px;
    font-weight: 600;
    color: #1a1d23;
    margin:0;
}


/* ── Accordion header template ── */
.accordion-header[b-zr8p312cm2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.accordion-section-label[b-zr8p312cm2] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: #666;
    text-transform: uppercase;
}

.accordion-count[b-zr8p312cm2] {
    font-size: 11px;
    color: #aaa;
    background: #f0f1f5;
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 500;
    margin-right: 1.25rem;
}

/* ── Accordion body ── */
.accordion-body[b-zr8p312cm2] {
    padding: .75rem .75rem .75rem;
}

/* ── App grid ── */
.app-grid[b-zr8p312cm2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
    gap: 12px;
}

/* ── App Cards ── */
.app-card[b-zr8p312cm2] {
    background: #ffffff;
    border: 1px solid #e4e6ed;
    border-radius: 14px;
    padding: 1rem;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .app-card:hover[b-zr8p312cm2] {
        border-color: #c5cad8;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

.app-icon[b-zr8p312cm2] {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.app-name[b-zr8p312cm2] {
    font-size: 14px;
    font-weight: 600;
    color: #1a1d23;
}

.app-desc[b-zr8p312cm2] {
    font-size: 12px;
    color: #888;
    line-height: 1.5;
}

/* ── Card More Button ── */
.card-menu-wrap[b-zr8p312cm2] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

.card-more-btn.e-btn[b-zr8p312cm2] {
    border: none !important;
    background: transparent !important;
    min-width: unset !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    padding: 0 !important;
    color: #bbb !important;
}

    .card-more-btn.e-btn:hover[b-zr8p312cm2] {
        background: #f5f6fa !important;
        color: #555 !important;
    }

.card-more-btn .e-btn-icon[b-zr8p312cm2] {
    font-size: 14px;
}

.card-more-btn .e-caret[b-zr8p312cm2] {
    display: none !important;
}

.gap-2[b-zr8p312cm2] {
    gap: 12px !important;
}

.e-skeleton-rectangle[b-zr8p312cm2] {
    border-radius: 12px;
}


/***/

.app-item[b-zr8p312cm2] .e-accordion {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.app-item[b-zr8p312cm2]  .e-accordion .e-acrdn-item {
    border: 1px solid #e4e6ed !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

    .app-item[b-zr8p312cm2]  .e-accordion .e-acrdn-item.e-select.e-active {
        border-color: #c5cad8 !important;
    }

.app-item[b-zr8p312cm2]  .e-accordion .e-acrdn-header {
    background: #ffffff !important;
    border-bottom: none !important;
    padding: 0 !important;
    min-height: 48px !important;
}

.app-item[b-zr8p312cm2]  .e-accordion .e-acrdn-item.e-active > .e-acrdn-header {
    border-bottom: 1px solid #f0f1f5 !important;
    background: #fafbfc !important;
}

.app-item[b-zr8p312cm2]  .e-accordion .e-acrdn-header-content {
    width: 100% !important;
    padding: 12px 16px !important;
}

.app-item[b-zr8p312cm2]  .e-accordion .e-acrdn-panel .e-acrdn-content {
    padding: 0 !important;
    background: #ffffff !important;
}

.app-item[b-zr8p312cm2]  .e-accordion .e-acrdn-header .e-toggle-icon {
    color: #888 !important;
    right: 14px !important;
}
/* /Pages/SalesDistributions/Columbia/Accounts/Create.razor.rz.scp.css */
.form-page[b-k9mguruh4r]  .custom-field-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
}

.form-page[b-k9mguruh4r]  .custom-field-row--inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-top: 1px solid var(--app-border-light);
    margin-top: 5px;
}

.form-page[b-k9mguruh4r]  .custom-field-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--app-text-sub);
    margin-bottom: 3px;
}

.form-page[b-k9mguruh4r]  .custom-field-label-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.form-page[b-k9mguruh4r]  .custom-field-hint {
    font-size: 11.5px;
    color: var(--app-text-muted);
    line-height: 1.4;
}

.form-page[b-k9mguruh4r]  .e-label-position-top {
    margin-top: 5px;
}

.form-page[b-k9mguruh4r]  .e-data-form .e-button-right {
    margin-top: 0;
    display: none;
}
/* /Pages/SalesDistributions/Columbia/Accounts/Edit.razor.rz.scp.css */
.form-page[b-mybae5hrm0]  .custom-field-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
}

.form-page[b-mybae5hrm0]  .custom-field-row--inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-top: 1px solid var(--app-border-light);
    margin-top: 5px;
}

.form-page[b-mybae5hrm0]  .custom-field-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--app-text-sub);
    margin-bottom: 3px;
}

.form-page[b-mybae5hrm0]  .custom-field-label-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.form-page[b-mybae5hrm0]  .custom-field-hint {
    font-size: 11.5px;
    color: var(--app-text-muted);
    line-height: 1.4;
}

.form-page[b-mybae5hrm0]  .e-label-position-top {
    margin-top: 5px;
}

.form-page[b-mybae5hrm0]  .e-data-form .e-button-right {
    margin-top: 0;
    display: none;
}
/* /Pages/SalesDistributions/Columbia/Accounts/Index.razor.rz.scp.css */
.filter-wrapper[b-s41xdwhm8w] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: end;
    margin-bottom: .5rem;
}

.filter-container[b-s41xdwhm8w] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.app-page-header[b-s41xdwhm8w] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px;
}

.app-page-title[b-s41xdwhm8w] {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: var(--app-text);
    display: flex;
    gap: 5px;
    align-items: center;
}

.app-icon[b-s41xdwhm8w] {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.app-page-sub[b-s41xdwhm8w] {
    font-size: 13px;
    color: var(--app-muted);
    margin: 0;
}

.app-header-actions[b-s41xdwhm8w] {
    display: flex;
    gap: 5px;
}

.app-actions[b-s41xdwhm8w] {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}
/* /Pages/SalesDistributions/Columbia/Agents/Create.razor.rz.scp.css */
.form-page[b-nhehdav0va]  .custom-field-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
}

.form-page[b-nhehdav0va]  .custom-field-row--inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-top: 1px solid var(--app-border-light);
    margin-top: 5px;
}

.form-page[b-nhehdav0va]  .custom-field-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--app-text-sub);
    margin-bottom: 3px;
}

.form-page[b-nhehdav0va]  .custom-field-label-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.form-page[b-nhehdav0va]  .custom-field-hint {
    font-size: 11.5px;
    color: var(--app-text-muted);
    line-height: 1.4;
}

.form-page[b-nhehdav0va]  .e-label-position-top {
    margin-top: 5px;
}

.form-page[b-nhehdav0va]  .e-data-form .e-button-right {
    margin-top: 0;
    display: none;
}
/* /Pages/SalesDistributions/Columbia/Agents/Edit.razor.rz.scp.css */
.form-page[b-vkze60vqxl]  .custom-field-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
}

.form-page[b-vkze60vqxl]  .custom-field-row--inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-top: 1px solid var(--app-border-light);
    margin-top: 5px;
}

.form-page[b-vkze60vqxl]  .custom-field-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--app-text-sub);
    margin-bottom: 3px;
}

.form-page[b-vkze60vqxl]  .custom-field-label-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.form-page[b-vkze60vqxl]  .custom-field-hint {
    font-size: 11.5px;
    color: var(--app-text-muted);
    line-height: 1.4;
}

.form-page[b-vkze60vqxl]  .e-label-position-top {
    margin-top: 5px;
}

.form-page[b-vkze60vqxl]  .e-data-form .e-button-right {
    margin-top: 0;
    display: none;
}
/* /Pages/SalesDistributions/Columbia/Agents/Index.razor.rz.scp.css */
.filter-wrapper[b-ijld4b5by0] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: end;
    margin-bottom: .5rem;
}

.filter-container[b-ijld4b5by0] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.app-page-header[b-ijld4b5by0] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px;
}

.app-page-title[b-ijld4b5by0] {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: var(--app-text);
    display: flex;
    gap: 5px;
    align-items: center;
}

.app-icon[b-ijld4b5by0] {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.app-page-sub[b-ijld4b5by0] {
    font-size: 13px;
    color: var(--app-muted);
    margin: 0;
}

.app-header-actions[b-ijld4b5by0] {
    display: flex;
    gap: 5px;
}

.app-actions[b-ijld4b5by0] {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}
/* /Pages/SalesDistributions/Columbia/Contacts/Create.razor.rz.scp.css */
.form-page[b-xfj7s724bu]  .custom-field-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
}

.form-page[b-xfj7s724bu]  .custom-field-row--inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-top: 1px solid var(--app-border-light);
    margin-top: 5px;
}

.form-page[b-xfj7s724bu]  .custom-field-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--app-text-sub);
    margin-bottom: 3px;
}

.form-page[b-xfj7s724bu]  .custom-field-label-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.form-page[b-xfj7s724bu]  .custom-field-hint {
    font-size: 11.5px;
    color: var(--app-text-muted);
    line-height: 1.4;
}

.form-page[b-xfj7s724bu]  .e-label-position-top {
    margin-top: 5px;
}

.form-page[b-xfj7s724bu]  .e-data-form .e-button-right {
    margin-top: 0;
    display: none;
}
/* /Pages/SalesDistributions/Columbia/Contacts/Edit.razor.rz.scp.css */
.form-page[b-903omdr5tu]  .custom-field-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
}

.form-page[b-903omdr5tu]  .custom-field-row--inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-top: 1px solid var(--app-border-light);
    margin-top: 5px;
}

.form-page[b-903omdr5tu]  .custom-field-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--app-text-sub);
    margin-bottom: 3px;
}

.form-page[b-903omdr5tu]  .custom-field-label-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.form-page[b-903omdr5tu]  .custom-field-hint {
    font-size: 11.5px;
    color: var(--app-text-muted);
    line-height: 1.4;
}

.form-page[b-903omdr5tu]  .e-label-position-top {
    margin-top: 5px;
}

.form-page[b-903omdr5tu]  .e-data-form .e-button-right {
    margin-top: 0;
    display: none;
}
/* /Pages/SalesDistributions/Columbia/Contacts/Index.razor.rz.scp.css */
.filter-wrapper[b-326gmainse] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: end;
    margin-bottom: .5rem;
}

.filter-container[b-326gmainse] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.app-page-header[b-326gmainse] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px;
}

.app-page-title[b-326gmainse] {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: var(--app-text);
    display: flex;
    gap: 5px;
    align-items: center;
}

.app-icon[b-326gmainse] {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.app-page-sub[b-326gmainse] {
    font-size: 13px;
    color: var(--app-muted);
    margin: 0;
}

.app-header-actions[b-326gmainse] {
    display: flex;
    gap: 5px;
}

.app-actions[b-326gmainse] {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}
/* /Pages/SalesDistributions/Columbia/Distributors/Components/Accounts.razor.rz.scp.css */
.form-content[b-0xrdyk9bsb] {
    padding: 14px;
}
/* /Pages/SalesDistributions/Columbia/Distributors/Create.razor.rz.scp.css */
/* ── Custom fields (Distributor Type dropdown, Active toggle) ── */
.form-page[b-9spiij4zp0]  .custom-field-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
}

.form-page[b-9spiij4zp0]  .custom-field-row--inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-top: 1px solid var(--app-border-light);
    margin-top: 5px;
}

.form-page[b-9spiij4zp0]  .custom-field-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--app-text-sub);
    margin-bottom: 3px;
}

.form-page[b-9spiij4zp0]  .custom-field-label-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.form-page[b-9spiij4zp0]  .custom-field-hint {
    font-size: 11.5px;
    color: var(--app-text-muted);
    line-height: 1.4;
}
.form-page[b-9spiij4zp0]  .e-label-position-top {
    margin-top: 5px;
}

.form-page[b-9spiij4zp0]  .e-data-form .e-button-right {
    margin-top: 0;
    display: none;
}
/* /Pages/SalesDistributions/Columbia/Distributors/Edit.razor.rz.scp.css */
/* ── Custom fields (Distributor Type dropdown, Active toggle) ── */
.form-page[b-ngb0w89tp0]  .custom-field-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
}

.form-page[b-ngb0w89tp0]  .custom-field-row--inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-top: 1px solid var(--app-border-light);
    margin-top: 5px;
}

.form-page[b-ngb0w89tp0]  .custom-field-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--app-text-sub);
    margin-bottom: 3px;
}

.form-page[b-ngb0w89tp0]  .custom-field-label-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.form-page[b-ngb0w89tp0]  .custom-field-hint {
    font-size: 11.5px;
    color: var(--app-text-muted);
    line-height: 1.4;
}

.form-page[b-ngb0w89tp0]  .e-label-position-top {
    margin-top: 5px;
}

.form-page[b-ngb0w89tp0]  .e-data-form .e-button-right {
    margin-top: 0;
    display:none;
}

.form-page-tab[b-ngb0w89tp0]  {
    padding: 0 14px 5px;
}
/* /Pages/SalesDistributions/Columbia/Distributors/Index.razor.rz.scp.css */
.filter-wrapper[b-58l5uk5uqz] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: end;
    margin-bottom: .5rem;
}

.filter-container[b-58l5uk5uqz] {
    display: flex;
    align-items: center;
    gap: 4px;
}


/* ── Page Header ── */
.app-page-header[b-58l5uk5uqz] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px;
}

.app-page-title[b-58l5uk5uqz] {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: var(--app-text);
    display: flex;
    gap: 5px;
    align-items: center;
}

.app-icon[b-58l5uk5uqz] {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.app-page-sub[b-58l5uk5uqz] {
    font-size: 13px;
    color: var(--app-muted);
    margin: 0;
}

.app-header-actions[b-58l5uk5uqz] {
    display: flex;
    gap: 5px;
}

/* ── Toolbar ── */
.app-toolbar[b-58l5uk5uqz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
}

.app-search[b-58l5uk5uqz] {
    flex: 1;
}

.app-filter-drop[b-58l5uk5uqz] {
    width: 150px !important;
}

/* ── Grid ── */
.app-grid.e-grid[b-58l5uk5uqz] {
    border: none !important;
    box-shadow: none !important;
}

.app-grid .e-gridheader[b-58l5uk5uqz] {
    background: var(--app-muted-bg) !important;
    border-bottom: 1px solid var(--app-border) !important;
}

.app-grid .e-headercell .e-headercelldiv[b-58l5uk5uqz] {
    font-weight: 600;
    font-size: 12px;
    color: var(--app-sub);
}

.app-grid .e-rowcell[b-58l5uk5uqz] {
    padding: 10px 16px !important;
    font-size: 13px;
    border: none !important;
    color: var(--app-sub);
}

.app-grid .e-row[b-58l5uk5uqz] {
    border-bottom: 1px solid var(--app-border-light) !important;
}

    .app-grid .e-row:hover .e-rowcell[b-58l5uk5uqz] {
        background: #f5f3fc !important;
    }

/* ── Action buttons ── */
.app-actions[b-58l5uk5uqz] {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}
/* /Pages/SalesDistributions/Columbia/Items/Create.razor.rz.scp.css */
.form-page[b-z8o82gxe7c]  .custom-field-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
}

.form-page[b-z8o82gxe7c]  .custom-field-row--inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-top: 1px solid var(--app-border-light);
    margin-top: 5px;
}

.form-page[b-z8o82gxe7c]  .custom-field-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--app-text-sub);
    margin-bottom: 3px;
}

.form-page[b-z8o82gxe7c]  .custom-field-label-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.form-page[b-z8o82gxe7c]  .custom-field-hint {
    font-size: 11.5px;
    color: var(--app-text-muted);
    line-height: 1.4;
}

.form-page[b-z8o82gxe7c]  .e-label-position-top {
    margin-top: 5px;
}

.form-page[b-z8o82gxe7c]  .e-data-form .e-button-right {
    margin-top: 0;
    display: none;
}
/* /Pages/SalesDistributions/Columbia/Items/Edit.razor.rz.scp.css */
.form-page[b-6u2t2gxbas]  .custom-field-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
}

.form-page[b-6u2t2gxbas]  .custom-field-row--inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-top: 1px solid var(--app-border-light);
    margin-top: 5px;
}

.form-page[b-6u2t2gxbas]  .custom-field-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--app-text-sub);
    margin-bottom: 3px;
}

.form-page[b-6u2t2gxbas]  .custom-field-label-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.form-page[b-6u2t2gxbas]  .custom-field-hint {
    font-size: 11.5px;
    color: var(--app-text-muted);
    line-height: 1.4;
}

.form-page[b-6u2t2gxbas]  .e-label-position-top {
    margin-top: 5px;
}

.form-page[b-6u2t2gxbas]  .e-data-form .e-button-right {
    margin-top: 0;
    display: none;
}
/* /Pages/SalesDistributions/Columbia/Items/Index.razor.rz.scp.css */
.filter-wrapper[b-ev6j2grcba] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: end;
    margin-bottom: .5rem;
}

.filter-container[b-ev6j2grcba] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.app-page-header[b-ev6j2grcba] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px;
}

.app-page-title[b-ev6j2grcba] {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: var(--app-text);
    display: flex;
    gap: 5px;
    align-items: center;
}

.app-icon[b-ev6j2grcba] {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.app-page-sub[b-ev6j2grcba] {
    font-size: 13px;
    color: var(--app-muted);
    margin: 0;
}

.app-header-actions[b-ev6j2grcba] {
    display: flex;
    gap: 5px;
}

.app-actions[b-ev6j2grcba] {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}
/* /Pages/SignIn.razor.rz.scp.css */
.login-container[b-c7mplox7xo] {
    display: flex;
    min-height: 100vh;
    font-family: 'DM Sans', 'Segoe UI', sans-serif;
    background: #f5f7fa;
}
 
    /* ── Left branding panel ── */
    .login-side[b-c7mplox7xo] {
        width: 420px;
        background: #0c2340;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 3rem 2.5rem;
        position: relative;
        overflow: hidden;
    }
 
        .login-side[b-c7mplox7xo]::before {
            content: '';
            position: absolute;
            top: -80px;
            right: -80px;
            width: 240px;
            height: 240px;
            border-radius: 50%;
            background: rgba(55, 138, 221, 0.12);
        }
 
        .login-side[b-c7mplox7xo]::after {
            content: '';
            position: absolute;
            bottom: -60px;
            left: -60px;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            background: rgba(55, 138, 221, 0.08);
        }
 
    .brand-icon[b-c7mplox7xo] {
        width: 50px;
        height: 50px;
        background: #378add;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 2rem;
    }
 
    .side-title[b-c7mplox7xo] {
        font-size: 20px;
        font-weight: 600;
        color: #f0f6ff;
        margin: 0 0 1rem;
        line-height: 1.35;
    }
 
    .side-sub[b-c7mplox7xo] {
        font-size: 14px;
        color: #7eaacf;
        line-height: 1.75;
        margin: 0 0 2rem;
    }
 
    .feature-list[b-c7mplox7xo] {
        list-style: none;
        padding: 0;
        margin: 0;
    }
 
        .feature-list li[b-c7mplox7xo] {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 14px;
            color: #9fc7e8;
            margin-bottom: 16px;
        }
 
    .feat-dot[b-c7mplox7xo] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #378add;
        flex-shrink: 0;
    }
 
    /* ── Right form panel ── */
    .login-form[b-c7mplox7xo] {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 3rem 4rem;
        max-width: 480px;
        margin: 0 auto;
    }
 
    .sf-badge[b-c7mplox7xo] {
        display: inline-block;
        font-size: 10px;
        font-family: 'DM Mono', monospace;
        background: rgba(55, 138, 221, 0.12);
        color: #378add;
        border-radius: 4px;
        padding: 3px 8px;
        margin-bottom: 1.25rem;
        letter-spacing: 0.07em;
    }
 
    .form-title[b-c7mplox7xo] {
        font-size: 26px;
        font-weight: 600;
        color: #1a1a2e;
        margin: 0 0 0.5rem;
    }
 
    .form-sub[b-c7mplox7xo] {
        font-size: 14px;
        color: #6b7280;
        margin: 0 0 2rem;
    }
 
    .error-banner[b-c7mplox7xo] {
        background: #fef2f2;
        border: 1px solid #fca5a5;
        border-radius: 8px;
        color: #b91c1c;
        font-size: 13px;
        padding: 10px 14px;
        margin-bottom: 1.25rem;
    }
 
    .field-group[b-c7mplox7xo] {
        margin-bottom: 1.25rem;
        position: relative;
    }
 
    .field-label[b-c7mplox7xo] {
        display: block;
        font-size: 12px;
        font-weight: 500;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 6px;
    }
 
    /* Syncfusion input override */
    .sf-login-input.e-input-group[b-c7mplox7xo],
    .sf-login-input .e-input[b-c7mplox7xo] {
        border-radius: 8px !important;
        border: 1.5px solid #e5e7eb !important;
        background: #fff !important;
        font-size: 14px !important;
        height: 42px !important;
        padding: 0 12px !important;
    }
 
        .sf-login-input.e-input-group:focus-within[b-c7mplox7xo] {
            border-color: #378add !important;
            box-shadow: 0 0 0 3px rgba(55, 138, 221, 0.15) !important;
        }
 
    .eye-toggle[b-c7mplox7xo] {
        position: absolute;
        right: 10px;
        bottom: 9px;
        background: none;
        border: none;
        cursor: pointer;
        color: #9ca3af;
        padding: 4px;
        display: flex;
        align-items: center;
        z-index: 1;
    }
 
        .eye-toggle:hover[b-c7mplox7xo] {
            color: #378add;
        }
 
    .row-options[b-c7mplox7xo] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
    }
 
    .forgot-link[b-c7mplox7xo] {
        font-size: 13px;
        color: #378add;
        text-decoration: none;
        font-weight: 500;
    }
 
        .forgot-link:hover[b-c7mplox7xo] {
            text-decoration: underline;
        }
 
    /* Syncfusion button overrides */
    .sf-btn-login.e-btn[b-c7mplox7xo] {
        width: 100%;
        height: 44px;
        /* background: #0c2340 !important; */
        border: none !important;
        border-radius: 8px !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        letter-spacing: 0.01em;
        /* color: #fff !important; */
        justify-content: center;
    }
 
    .sf-btn-login.e-btn:hover[b-c7mplox7xo] {
        /* background: #185fa5 !important; */
    }

    .spinner[b-c7mplox7xo]{
        position:relative !important;
        width:18px;

    }
 
    .divider[b-c7mplox7xo] {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 1.5rem 0;
    }
 
    .divider-line[b-c7mplox7xo] {
        flex: 1;
        height: 1px;
        background: #e5e7eb;
    }
 
    .divider-text[b-c7mplox7xo] {
        font-size: 12px;
        color: #9ca3af;
        white-space: nowrap;
    }
 
    .sf-btn-sso.e-btn[b-c7mplox7xo] {
        width: 100%;
        height: 42px;
        background: #fff !important;
        border: 1.5px solid #e5e7eb !important;
        border-radius: 8px !important;
        color: #374151 !important;
        font-size: 14px !important;
        justify-content: center;
    }
 
        .sf-btn-sso.e-btn:hover[b-c7mplox7xo] {
            background: #f9fafb !important;
            border-color: #d1d5db !important;
        }
 
    .signup-row[b-c7mplox7xo] {
        text-align: center;
        margin-top: 1.75rem;
        font-size: 13px;
        color: #6b7280;
    }
 
        .signup-row a[b-c7mplox7xo] {
            color: #378add;
            text-decoration: none;
            font-weight: 500;
        }
 
            .signup-row a:hover[b-c7mplox7xo] {
                text-decoration: underline;
            }
 
    /* Responsive */
    @@media(max-width: 768px) {
        .login-side[b-c7mplox7xo] {
            display: none;
        }
 
        .login-form[b-c7mplox7xo] {
            padding: 2rem 1.5rem;
        }
    }
/* /Shared/Components/LoadingButton.razor.rz.scp.css */
.wrapper[b-j898lhixby]  .loading-btn {
    display: flex;
    gap: 5px;
    align-content: center;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-height: 32px;
}
/* /Shared/Components/LoadingOverlay.razor.rz.scp.css */

/* ── Overlay wrapper ── */
.app-loading-overlay[b-wo9y7hgpk4] {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: loading-fade-in-b-wo9y7hgpk4 180ms ease-out forwards;
}

.app-loading-overlay.fullscreen[b-wo9y7hgpk4] {
    position: fixed;
    inset: 0;
}

.app-loading-overlay.contained[b-wo9y7hgpk4] {
    position: absolute;
    inset: 0;
    border-radius: var(--app-radius);
    overflow: hidden;
}

/* ── Frosted-glass backdrop ── */
.app-loading-backdrop[b-wo9y7hgpk4] {
    position: absolute;
    inset: 0;
    background: rgba(30, 30, 45, 0.52); /* --app-sidebar-bg at ~52% */
    backdrop-filter: blur(4px) saturate(1.2);
    -webkit-backdrop-filter: blur(4px) saturate(1.2);
    transition: opacity var(--app-transition);
}

/* ── Card ── */
.app-loading-card[b-wo9y7hgpk4] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 32px 40px;
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow), 0 8px 32px rgba(124, 92, 191, 0.12);
    min-width: 190px;
    animation: loading-card-in-b-wo9y7hgpk4 220ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Syncfusion spinner overrides → accent color ── */
.app-sf-spinner .e-spinner-pane[b-wo9y7hgpk4] {
    position: static !important;
    width: 48px !important;
    height: 48px !important;
    background: transparent !important;
}

    .app-sf-spinner .e-spinner-pane .e-spinner-inner svg circle[b-wo9y7hgpk4],
    .app-sf-spinner .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4[b-wo9y7hgpk4],
    .app-sf-spinner .e-spinner-pane .e-spinner-inner .e-spin-bootstrap[b-wo9y7hgpk4] {
        stroke: var(--app-accent) !important;
    }

/* Soft glow ring around spinner */
.app-sf-spinner[b-wo9y7hgpk4] {
    position: relative;
}

    .app-sf-spinner[b-wo9y7hgpk4]::after {
        content: '';
        position: absolute;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: rgba(124, 92, 191, 0.15);
        filter: blur(10px);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        animation: loading-glow-pulse-b-wo9y7hgpk4 1.8s ease-in-out infinite;
    }

/* ── Message text ── */
.app-loading-message[b-wo9y7hgpk4] {
    margin: 4px 0 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--app-text);
    letter-spacing: 0.01em;
    text-align: center;
    line-height: 1.4;
}

/* ── Animated dots ── */
.app-loading-dots[b-wo9y7hgpk4] {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-top: 2px;
}

    .app-loading-dots span[b-wo9y7hgpk4] {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--app-accent);
        opacity: 0.35;
        animation: loading-dot-bounce-b-wo9y7hgpk4 1.2s ease-in-out infinite;
    }

        .app-loading-dots span:nth-child(2)[b-wo9y7hgpk4] {
            animation-delay: 0.18s;
        }

        .app-loading-dots span:nth-child(3)[b-wo9y7hgpk4] {
            animation-delay: 0.36s;
        }

/* ── Keyframes ── */
@keyframes loading-fade-in-b-wo9y7hgpk4 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes loading-card-in-b-wo9y7hgpk4 {
    from {
        opacity: 0;
        transform: scale(0.93) translateY(8px);
    }

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

@keyframes loading-glow-pulse-b-wo9y7hgpk4 {
    0%, 100% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(0.9);
    }

    50% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.12);
    }
}

@keyframes loading-dot-bounce-b-wo9y7hgpk4 {
    0%, 80%, 100% {
        opacity: 0.35;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-4px);
    }
}

/* ── State variants (optional CssClass on the overlay) ── */
.app-loading-overlay.state-danger .app-loading-card[b-wo9y7hgpk4] {
    border-color: var(--app-danger);
    box-shadow: var(--app-shadow), 0 4px 20px rgba(239, 68, 68, 0.12);
}

.app-loading-overlay.state-warn .app-loading-card[b-wo9y7hgpk4] {
    border-color: var(--app-warn);
    box-shadow: var(--app-shadow), 0 4px 20px rgba(245, 158, 11, 0.12);
}

.app-loading-overlay.state-success .app-loading-card[b-wo9y7hgpk4] {
    border-color: var(--app-success);
    box-shadow: var(--app-shadow), 0 4px 20px rgba(34, 197, 94, 0.12);
}