/* Stat cards */
.ap-stat {
    padding: 1.2rem 1.35rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ap-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--ap-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.ap-stat-label {
    font-size: .78rem;
    color: var(--ap-secondary);
    font-weight: 600;
}

.ap-stat-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ap-text-strong);
    letter-spacing: -.02em;
}

/* Role cards */
.ap-role-card {
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    padding: 1rem;
    height: 100%;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.ap-role-card:hover {
    border-color: var(--ap-primary);
}

.ap-role-card.active {
    border-color: var(--ap-primary);
    background: var(--ap-primary-100);
}

.ap-role-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--ap-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin-bottom: .6rem;
}

.ap-role-name {
    font-weight: 700;
    color: var(--ap-text-strong);
    font-size: .87rem;
}

.ap-role-count {
    font-size: .75rem;
    color: var(--ap-secondary);
}

/* Filters */
.ap-filter-input,
.ap-filter-select {
    background: var(--ap-bg);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    font-size: .83rem;
    color: var(--ap-text-strong);
    padding: .5rem .75rem;
}

.ap-filter-input:focus,
.ap-filter-select:focus {
    outline: none;
    border-color: var(--ap-primary);
    background: var(--ap-surface);
}

/* Table */
.ap-table thead th {
    font-size: .72rem;
    color: var(--ap-secondary);
    font-weight: 700;
    border-bottom: 1px solid var(--ap-border);
    padding: .75rem .6rem;
    white-space: nowrap;
}

.ap-table tbody td {
    padding: .85rem .6rem;
    border-bottom: 1px solid var(--ap-border);
    vertical-align: middle;
    font-size: .85rem;
    color: var(--ap-text);
}

.ap-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.ap-cell-sub {
    font-size: .76rem;
    color: var(--ap-secondary);
}

.ap-role-badge {
    font-size: .72rem;
    font-weight: 700;
    padding: .28rem .6rem;
    border-radius: 6px;
}

.role-Administrator {
    background: var(--ap-primary-100);
    color: var(--ap-primary);
}

.role-Manager {
    background: var(--ap-info-100);
    color: var(--ap-info);
}

.role-Editor {
    background: var(--ap-success-100);
    color: var(--ap-success);
}

.role-Sales {
    background: var(--ap-warning-100);
    color: var(--ap-warning);
}

.role-Support {
    background: #F1F5F9;
    color: #475569;
}

[data-theme="dark"] .role-Support {
    background: #232C42;
    color: #93A0B8;
}

.ap-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: .4rem;
}

.ap-row-check {
    cursor: pointer;
}

.ap-action-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--ap-radius-sm);
    border: 1px solid var(--ap-border);
    background: var(--ap-surface);
    color: var(--ap-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ap-action-btn:hover {
    background: var(--ap-bg);
    color: var(--ap-text-strong);
}

/* Permission matrix */
.ap-perm-table {
    width: 100%;
    border-collapse: collapse;
}

.ap-perm-table th,
.ap-perm-table td {
    padding: .6rem .7rem;
    border-bottom: 1px solid var(--ap-border);
    font-size: .83rem;
}

.ap-perm-table th {
    color: var(--ap-secondary);
    font-weight: 700;
    font-size: .72rem;
    text-align: center;
}

.ap-perm-table th:first-child,
.ap-perm-table td:first-child {
    text-align: left;
    color: var(--ap-text-strong);
    font-weight: 600;
}

.ap-perm-table td {
    text-align: center;
}

.form-check-input {
    cursor: pointer;
}

.modal-content {
    border-radius: var(--ap-radius);
    border: 1px solid var(--ap-border);
    background: var(--ap-surface);
}

.modal-header,
.modal-footer {
    border-color: var(--ap-border);
}

.form-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ap-text-strong);
}

.form-control,
.form-select {
    background: var(--ap-bg);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    font-size: .85rem;
    color: var(--ap-text-strong);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ap-primary);
    box-shadow: 0 0 0 3px var(--ap-primary-100);
}

/* ============ Utility classes (moved from inline styles) ============ */

/* Font sizes */
.ap-fs-13 {
    font-size: 1.3rem;
}

.ap-fs-07 {
    font-size: .7rem;
}

.ap-fs-06 {
    font-size: .6rem;
}

.ap-fs-085 {
    font-size: .85rem;
}

/* Colors */
.ap-color-strong {
    color: var(--ap-text-strong);
}

.ap-color-secondary {
    color: var(--ap-secondary);
}

/* Transparent button */
.ap-btn-transparent {
    background: transparent;
}

/* Dropdown menu small */
.ap-menu-sm {
    font-size: .85rem;
}

/* Stat / role icon color variants */
.ap-ic-primary {
    background: var(--ap-primary-100);
    color: var(--ap-primary);
}

.ap-ic-success {
    background: var(--ap-success-100);
    color: var(--ap-success);
}

.ap-ic-warning {
    background: var(--ap-warning-100);
    color: var(--ap-warning);
}

.ap-ic-info {
    background: var(--ap-info-100);
    color: var(--ap-info);
}

.ap-ic-support {
    background: #F1F5F9;
    color: #475569;
}

[data-theme="dark"] .ap-ic-support {
    background: #232C42;
    color: #93A0B8;
}

/* Search field with inset icon */
.ap-search-inset-icon {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ap-secondary);
    font-size: .85rem;
}

.ap-search-inset-input {
    padding-left: 2rem;
    width: 220px;
}

/* Table column widths */
.ap-col-checkbox {
    width: 36px;
}

.ap-col-actions {
    width: 70px;
}

/* Pill tabs gap */
.ap-pill-tabs {
    gap: .4rem;
}

.ap-dot-danger {
    background: var(--ap-danger);
}