/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* MudBlazor Layout Styles */

/* Error UI - Keep existing error handling styles */
#blazor-error-ui[b-k9cf5r64l3] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-k9cf5r64l3] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* Additional layout customizations */
.mud-main-content[b-k9cf5r64l3] {
    background-color: var(--mud-palette-background);
}

/* Ensure proper spacing for main content */
.mud-container[b-k9cf5r64l3] {
    padding: 24px;
}

@media (max-width: 960px) {
    .mud-container[b-k9cf5r64l3] {
        padding: 16px;
    }
}

/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* MudBlazor NavMenu Customizations */

/* Custom spacing for section headers */
.mud-nav-link[b-n6wfqnlw7v] {
    margin-bottom: 4px;
}

/* Hover effect enhancement */
.mud-nav-link:hover[b-n6wfqnlw7v] {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Active link styling - MudBlazor handles this but we can enhance */
.mud-nav-link-active[b-n6wfqnlw7v] {
    font-weight: 500;
}

/* Ensure proper scrolling for long menus */
.mud-drawer-content[b-n6wfqnlw7v] {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom branding area padding */
.drawer-branding[b-n6wfqnlw7v] {
    padding: 24px 16px;
}

/* Drawer brand logo */
.brand-logo-drawer[b-n6wfqnlw7v] {
    height: 36px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin-bottom: 4px;
}
/* /Components/Pages/AssignPolicy.razor.rz.scp.css */
/* AssignPolicy.razor.css — Policy Master */
/* EverestTheme: Primary #1976D2 · Tertiary #FF6F00 · Background #F5F5F5 */

/* ── Page ─────────────────────────────────────────────────────── */
.ap-page[b-dkjmc9dsqi] {
    padding: 1.5rem 2rem;
    background: #F5F5F5;
    min-height: 100%;
    font-family: 'Roboto', 'Segoe UI', sans-serif;
}

/* ── Header ──────────────────────────────────────────────────── */
.ap-header[b-dkjmc9dsqi] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.ap-title[b-dkjmc9dsqi] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212121;
    margin: 0 0 0.15rem;
}

.ap-subtitle[b-dkjmc9dsqi] {
    font-size: 0.8rem;
    color: rgba(0,0,0,0.54);
    margin: 0;
}

/* ── Add button ──────────────────────────────────────────────── */
.ap-add-user-btn[b-dkjmc9dsqi] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #1976D2;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

    .ap-add-user-btn:hover[b-dkjmc9dsqi] {
        background: #1565C0;
    }

.ap-btn-icon[b-dkjmc9dsqi] {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

/* ── Cards ───────────────────────────────────────────────────── */
.ap-card[b-dkjmc9dsqi] {
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

/* ── Toolbar card ────────────────────────────────────────────── */
.ap-toolbar-card[b-dkjmc9dsqi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ── Search ──────────────────────────────────────────────────── */
.ap-search-wrapper[b-dkjmc9dsqi] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
    max-width: 400px;
}

.ap-search-icon[b-dkjmc9dsqi] {
    position: absolute;
    left: 0.65rem;
    color: rgba(0,0,0,0.38);
    pointer-events: none;
}

.ap-search-input[b-dkjmc9dsqi] {
    width: 100%;
    border: 1px solid rgba(0,0,0,0.20);
    border-radius: 4px;
    padding: 0.45rem 2rem 0.45rem 2.2rem;
    font-size: 0.875rem;
    color: #212121;
    background: #FAFAFA;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .ap-search-input:focus[b-dkjmc9dsqi] {
        border-color: #1976D2;
        box-shadow: 0 0 0 2px rgba(25,118,210,0.12);
        background: #fff;
    }

.ap-search-clear[b-dkjmc9dsqi] {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    color: rgba(0,0,0,0.38);
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.12s;
}

    .ap-search-clear:hover[b-dkjmc9dsqi] {
        color: #212121;
    }

/* ── Stat chips ──────────────────────────────────────────────── */
.ap-stats[b-dkjmc9dsqi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ap-stat-chip[b-dkjmc9dsqi] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.ap-stat-chip--total[b-dkjmc9dsqi] {
    background: rgba(0,0,0,0.06);
    color: rgba(0,0,0,0.6);
    border-color: rgba(0,0,0,0.12);
}

.ap-stat-chip--active[b-dkjmc9dsqi] {
    background: rgba(46,125,50,.08);
    color: #2E7D32;
    border-color: rgba(46,125,50,.2);
}

.ap-stat-chip--inactive[b-dkjmc9dsqi] {
    background: rgba(0,0,0,0.04);
    color: rgba(0,0,0,0.45);
    border-color: rgba(0,0,0,0.10);
}

/* ── Table card ──────────────────────────────────────────────── */
.ap-table-card[b-dkjmc9dsqi] {
    padding: 0;
}

.ap-table[b-dkjmc9dsqi] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ap-th[b-dkjmc9dsqi] {
    background: #1976D2;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    text-align: left;
    white-space: nowrap;
}

.ap-th--num[b-dkjmc9dsqi] {
    width: 48px;
    text-align: center;
}

.ap-th--desc[b-dkjmc9dsqi] {
    width: 30%;
}

.ap-th--center[b-dkjmc9dsqi] {
    text-align: center;
}

.ap-tr[b-dkjmc9dsqi] {
    border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: background 0.12s;
}

    .ap-tr:last-child[b-dkjmc9dsqi] {
        border-bottom: none;
    }

    .ap-tr:hover[b-dkjmc9dsqi] {
        background: rgba(25,118,210,0.03);
    }

.ap-td[b-dkjmc9dsqi] {
    padding: 0.75rem 1rem;
    color: #212121;
    vertical-align: middle;
}

.ap-td--num[b-dkjmc9dsqi] {
    text-align: center;
    color: rgba(0,0,0,0.38);
    font-size: 0.8rem;
}

.ap-td--center[b-dkjmc9dsqi] {
    text-align: center;
}

.ap-td--muted[b-dkjmc9dsqi] {
    color: rgba(0,0,0,0.54);
    font-size: 0.8rem;
}

/* ── Policy name / code ──────────────────────────────────────── */
.ap-policy-name[b-dkjmc9dsqi] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212121;
}

.ap-code-tag[b-dkjmc9dsqi] {
    display: inline-block;
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: 0.75rem;
    background: rgba(255,111,0,0.08);
    color: #E65100;
    border: 1px solid rgba(255,111,0,0.18);
    border-radius: 3px;
    padding: 0.15rem 0.5rem;
}

/* ── Badges ──────────────────────────────────────────────────── */
.ap-badge[b-dkjmc9dsqi] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

.ap-badge--active[b-dkjmc9dsqi] {
    background: rgba(46,125,50,.10);
    color: #2E7D32;
}

.ap-badge--inactive[b-dkjmc9dsqi] {
    background: rgba(0,0,0,0.07);
    color: rgba(0,0,0,0.45);
}

/* ── Action buttons ──────────────────────────────────────────── */
.ap-action-btns[b-dkjmc9dsqi] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.ap-icon-btn[b-dkjmc9dsqi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.ap-icon-btn--edit[b-dkjmc9dsqi] {
    color: #1976D2;
    border-color: rgba(25,118,210,0.3);
}

    .ap-icon-btn--edit:hover[b-dkjmc9dsqi] {
        background: rgba(25,118,210,0.08);
        border-color: #1976D2;
    }

.ap-icon-btn--delete[b-dkjmc9dsqi] {
    color: #C62828;
    border-color: rgba(198,40,40,0.25);
}

    .ap-icon-btn--delete:hover[b-dkjmc9dsqi] {
        background: rgba(198,40,40,0.07);
        border-color: #C62828;
    }

/* ── Empty state ─────────────────────────────────────────────── */
.ap-empty-state[b-dkjmc9dsqi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 1rem;
    text-align: center;
}

.ap-empty-icon[b-dkjmc9dsqi] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0,0,0,0.26);
    margin-bottom: 1rem;
}

.ap-empty-title[b-dkjmc9dsqi] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #212121;
    margin: 0 0 0.3rem;
}

.ap-empty-sub[b-dkjmc9dsqi] {
    font-size: 0.8rem;
    color: rgba(0,0,0,0.54);
    margin: 0;
    max-width: 300px;
}

/* ── General buttons ─────────────────────────────────────────── */
.ap-primary-btn[b-dkjmc9dsqi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    background: #1976D2;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: .5rem 1rem;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

    .ap-primary-btn:hover[b-dkjmc9dsqi] {
        background: #1565C0;
    }

    .ap-primary-btn:disabled[b-dkjmc9dsqi] {
        background: rgba(0,0,0,0.12);
        color: rgba(0,0,0,0.26);
        cursor: default;
    }

.ap-outline-btn[b-dkjmc9dsqi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    background: transparent;
    color: #1976D2;
    border: 1px solid #1976D2;
    border-radius: 4px;
    padding: .5rem 1rem;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}   transition: background 0.15s;[b-dkjmc9dsqi]
}

    .ap-outline-btn:hover[b-dkjmc9dsqi] {
        background: rgba(25,118,210,0.06);
    }

.ap-ghost-btn[b-dkjmc9dsqi] {
    background: transparent;
    border: none;
    color: rgba(0,0,0,0.54);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.45rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

    .ap-ghost-btn:hover[b-dkjmc9dsqi] {
        background: rgba(0,0,0,0.05);
        color: #212121;
    }

    .ap-ghost-btn:disabled[b-dkjmc9dsqi] {
        opacity: 0.5;
        cursor: default;
    }

.ap-danger-btn[b-dkjmc9dsqi] {
    display: inline-flex;
    align-items: center;
    background: #C62828;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.45rem 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

    .ap-danger-btn:hover[b-dkjmc9dsqi] {
        background: #B71C1C;
    }

    .ap-danger-btn:disabled[b-dkjmc9dsqi] {
        background: rgba(0,0,0,0.12);
        color: rgba(0,0,0,0.26);
        cursor: default;
    }

/* ── Dialog ──────────────────────────────────────────────────── */
.ap-overlay[b-dkjmc9dsqi] {
    position: fixed;
    inset: 0;
    background: rgba(33,33,33,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1300;
}

.ap-dialog[b-dkjmc9dsqi] {
    background: #fff;
    border-radius: 8px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    overflow: hidden;
}

.ap-dialog--sm[b-dkjmc9dsqi] {
    max-width: 360px;
}

.ap-dialog-header[b-dkjmc9dsqi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: #1976D2;
    color: #fff;
}

.ap-dialog-header--danger[b-dkjmc9dsqi] {
    background: #C62828;
}

.ap-dialog-title[b-dkjmc9dsqi] {
    font-size: 1rem;
    font-weight: 600;
}

.ap-dialog-close[b-dkjmc9dsqi] {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    opacity: 0.8;
    transition: opacity 0.15s;
}

    .ap-dialog-close:hover[b-dkjmc9dsqi] {
        opacity: 1;
    }

.ap-dialog-body[b-dkjmc9dsqi] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ap-dialog-error[b-dkjmc9dsqi] {
    background: rgba(198,40,40,0.08);
    border: 1px solid rgba(198,40,40,0.25);
    border-radius: 4px;
    color: #C62828;
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
}

.ap-dialog-footer[b-dkjmc9dsqi] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.9rem 1.25rem;
    border-top: 1px solid rgba(0,0,0,0.08);
    background: #FAFAFA;
}

/* ── Form fields ─────────────────────────────────────────────── */
.ap-field[b-dkjmc9dsqi] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ap-field--row[b-dkjmc9dsqi] {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.ap-label[b-dkjmc9dsqi] {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(0,0,0,0.6);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ap-label--inline[b-dkjmc9dsqi] {
    text-transform: none;
    font-size: 0.875rem;
    color: #212121;
    letter-spacing: 0;
}

.ap-required[b-dkjmc9dsqi] {
    color: #C62828;
}

.ap-input[b-dkjmc9dsqi] {
    border: 1px solid rgba(0,0,0,0.23);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #212121;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}

    .ap-input:focus[b-dkjmc9dsqi] {
        border-color: #1976D2;
        box-shadow: 0 0 0 2px rgba(25,118,210,0.15);
    }

.ap-input--mono[b-dkjmc9dsqi] {
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: 0.8rem;
}

.ap-textarea[b-dkjmc9dsqi] {
    resize: vertical;
    min-height: 56px;
}

.ap-hint[b-dkjmc9dsqi] {
    font-size: 0.73rem;
    color: rgba(0,0,0,0.45);
    margin-top: 0.1rem;
}

.ap-checkbox-native[b-dkjmc9dsqi] {
    width: 16px;
    height: 16px;
    accent-color: #1976D2;
    cursor: pointer;
}

/* ── Delete confirm ──────────────────────────────────────────── */
.ap-confirm-text[b-dkjmc9dsqi] {
    font-size: 0.9rem;
    color: #212121;
    margin: 0 0 0.4rem;
}

.ap-confirm-code[b-dkjmc9dsqi] {
    font-size: 0.8rem;
    color: rgba(0,0,0,0.54);
    margin: 0 0 0.75rem;
}

.ap-confirm-warn[b-dkjmc9dsqi] {
    font-size: 0.78rem;
    color: #C62828;
    margin: 0;
    font-weight: 500;
}

.ap-code-inline[b-dkjmc9dsqi] {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.78rem;
    background: rgba(255,111,0,0.08);
    color: #E65100;
    border: 1px solid rgba(255,111,0,0.18);
    border-radius: 3px;
    padding: 0.1rem 0.4rem;
}

/* ── Role selector bar ───────────────────────────────────────── */
.ap-role-bar[b-dkjmc9dsqi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.25rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.ap-role-bar-left[b-dkjmc9dsqi] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
    .ap-role-bar-left .ap-label[b-dkjmc9dsqi] {
        margin: 0;
        white-space: nowrap;
    }

.ap-select-wrapper[b-dkjmc9dsqi] {
    position: relative;
    display: inline-block;
    min-width: 240px;
    max-width: 100%;
    flex: 1;
}
.ap-select[b-dkjmc9dsqi] {
    width: 100%;
    appearance: none;
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.23);
    border-radius: 4px;
    padding: 0.45rem 2.2rem 0.45rem 0.75rem;
    font-size: 0.875rem;
    color: #212121;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .ap-select:focus[b-dkjmc9dsqi] {
        border-color: #1976D2;
        box-shadow: 0 0 0 2px rgba(25,118,210,0.15);
    }

.ap-select-arrow[b-dkjmc9dsqi] {
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: rgba(0,0,0,0.54);
    font-size: 1.1rem;
}

.ap-assign-count[b-dkjmc9dsqi] {
    font-size: 0.8rem;
    color: rgba(0,0,0,0.54);
    padding: 0 0.5rem;
    white-space: nowrap;
}

    .ap-assign-count strong[b-dkjmc9dsqi] {
        color: #1976D2;
        font-weight: 700;
    }

/* ── Policy Tree ─────────────────────────────────────────────── */
.ap-tree-card[b-dkjmc9dsqi] {
    padding: 0;
}
.ap-tree-header[b-dkjmc9dsqi] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    background: #FAFAFA;
    flex-wrap: wrap;
}

.ap-tree-title[b-dkjmc9dsqi] {
    font-size: .925rem;
    font-weight: 600;
    color: #212121;
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.ap-tree-actions[b-dkjmc9dsqi] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
}
.ap-tree-body[b-dkjmc9dsqi] {
    padding: 0.5rem 0 0.75rem;
}

/* ── Tree rows ───────────────────────────────────────────────── */
.ap-tree-row[b-dkjmc9dsqi] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem 1.25rem .45rem 0;
    min-width: 0;
}

    .ap-tree-row:hover[b-dkjmc9dsqi] {
        background: rgba(0,0,0,0.02);
    }

/* Root rows get a subtle blue tint + separator */
.ap-tree-row--root[b-dkjmc9dsqi] {
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: 0.25rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    background: rgba(25,118,210,0.03); /* ← blue, not orange */
}

    .ap-tree-row--root:first-child[b-dkjmc9dsqi] {
        border-top: none;
        margin-top: 0;
    }

.ap-tree-row--sub[b-dkjmc9dsqi] {
    background: transparent;
}

.ap-tree-row--policy[b-dkjmc9dsqi] {
    background: transparent;
}

/* ── Tree names ──────────────────────────────────────────────── */
.ap-tree-name--root[b-dkjmc9dsqi] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #212121;
    flex: 1;
}

.ap-tree-name--sub[b-dkjmc9dsqi] {
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(0,0,0,0.65);
    flex: 1;
}
.ap-tree-name--root[b-dkjmc9dsqi],
.ap-tree-name--sub[b-dkjmc9dsqi],
.ap-tree-name--policy[b-dkjmc9dsqi] {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}
.ap-tree-name--policy[b-dkjmc9dsqi] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212121;
    flex: 1;
}

/* ── Assigned count ──────────────────────────────────────────── */
.ap-tree-count[b-dkjmc9dsqi] {
    font-size: 0.73rem;
    color: rgba(0,0,0,0.38);
    font-variant-numeric: tabular-nums;
    min-width: 2.5rem;
    text-align: right;
}

/* ── Expand button ───────────────────────────────────────────── */
.ap-expand-btn[b-dkjmc9dsqi] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: rgba(0,0,0,0.38);
    display: flex;
    align-items: center;
    line-height: 1;
    flex-shrink: 0;
    width: 22px;
    transition: color 0.12s;
}

    .ap-expand-btn:hover[b-dkjmc9dsqi] {
        color: rgba(0,0,0,0.7);
    }

.ap-expand-spacer[b-dkjmc9dsqi] {
    width: 22px;
    flex-shrink: 0;
}

/* ── Tree checkbox — PRIMARY BLUE THEME ─────────────────────── */
.ap-chk-label[b-dkjmc9dsqi] {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.ap-chk-label--readonly[b-dkjmc9dsqi] {
    cursor: default;
}

.ap-chk-native[b-dkjmc9dsqi] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ap-chk-box[b-dkjmc9dsqi] {
    width: 17px;
    height: 17px;
    border: 2px solid rgba(0,0,0,0.26);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: all 0.15s;
    flex-shrink: 0;
}

/* ✅ Checked — blue */
.ap-chk-box--checked[b-dkjmc9dsqi] {
    background: #1976D2;
    border-color: #1976D2;
}

/* ▬ Partial / indeterminate — blue (lighter) */
.ap-chk-box--partial[b-dkjmc9dsqi] {
    background: #64B5F6;
    border-color: #64B5F6;
}

/* Hover on unchecked boxes when editing */
.ap-chk-label:not(.ap-chk-label--readonly):hover
.ap-chk-box:not(.ap-chk-box--checked):not(.ap-chk-box--partial)[b-dkjmc9dsqi] {
    border-color: #1976D2;
    box-shadow: 0 0 0 2px rgba(25,118,210,0.18);
}



.ap-tree-actions-edit[b-dkjmc9dsqi] {
    justify-content: flex-end;
}

    .ap-tree-actions-edit .ap-assign-count[b-dkjmc9dsqi] {
        margin-right: auto;
    }
/* ==============================
   Mobile & Tablet Responsiveness
   ============================== */

@media (min-width:541px) and (max-width:768px) {

    .ap-tree-header[b-dkjmc9dsqi] {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .ap-tree-title[b-dkjmc9dsqi] {
        flex: 1;
        min-width: 0;
    }

    .ap-tree-actions[b-dkjmc9dsqi] {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: .5rem;
        flex-wrap: nowrap;
        width: auto;
        margin-left: auto;
    }

    .ap-assign-count[b-dkjmc9dsqi] {
        white-space: nowrap;
    }
}



@media (min-width:361px) and (max-width:540px) {

    .ap-tree-header[b-dkjmc9dsqi] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .6rem;
    }

    .ap-tree-title[b-dkjmc9dsqi] {
        width: 100%;
    }

    .ap-tree-actions[b-dkjmc9dsqi] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: .5rem;
        flex-wrap: nowrap;
    }

    .ap-assign-count[b-dkjmc9dsqi] {
        white-space: nowrap;
        margin: 0;
    }

    .ap-primary-btn[b-dkjmc9dsqi],
    .ap-outline-btn[b-dkjmc9dsqi],
    .ap-ghost-btn[b-dkjmc9dsqi] {
        min-width: 80px;
        width: auto;
        flex: none;
    }
}
@media (max-width:360px) {

    .ap-tree-actions[b-dkjmc9dsqi] {
        flex-wrap: wrap;
    }

    .ap-assign-count[b-dkjmc9dsqi] {
        width: 100%;
        text-align: center;
        margin-bottom: .5rem;
    }

    .ap-primary-btn[b-dkjmc9dsqi],
    .ap-outline-btn[b-dkjmc9dsqi],
    .ap-ghost-btn[b-dkjmc9dsqi] {
        width: 100%;
    }
}

@media (max-width:480px) {

    .ap-tree-header[b-dkjmc9dsqi] {
        flex-direction: column;
        align-items: stretch;
    }

    .ap-tree-actions[b-dkjmc9dsqi] {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .ap-primary-btn[b-dkjmc9dsqi],
    .ap-outline-btn[b-dkjmc9dsqi],
    .ap-ghost-btn[b-dkjmc9dsqi] {
        width: 100%;
        min-width: 0;
    }

    .ap-assign-count[b-dkjmc9dsqi] {
        width: 100%;
        text-align: center;
        margin-bottom: .5rem;
    }
}




<!-- =====================================================
Changed by : Kashish
Changed on : 2026-07-15
Bug : fix the bug ofassign policy module page input this  edit button is not show in
       responsive approch source i have fix the issue by correcting the css. 
=====================================================[b-dkjmc9dsqi] -->
/* /Components/Pages/AssignPolicyDialog.razor.rz.scp.css */
.apd-policy-row[b-uvgs0b4ake] {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
    transition: background 0.15s, border-color 0.15s;
    cursor: pointer;
}

.apd-policy-row--selected[b-uvgs0b4ake] {
    background: rgba(25, 118, 210, 0.06);
    border-color: var(--mud-palette-primary);
}

.apd-policy-row:hover[b-uvgs0b4ake] {
    background: var(--mud-palette-background-grey);
}
/* /Components/Pages/AssignUserPolicy.razor.rz.scp.css */
/* ── Assign User Policy Page ───────────────────────────────────────────────── */

/* Modal backdrop */
.aup-modal-backdrop[b-2wyilg6oq5] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Modal card */
.aup-modal[b-2wyilg6oq5] {
    background: var(--mud-palette-surface);
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 520px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.aup-modal-header[b-2wyilg6oq5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
}

.aup-modal-body[b-2wyilg6oq5] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}

.aup-modal-footer[b-2wyilg6oq5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
}

/* Policy row in modal */
.aup-policy-row[b-2wyilg6oq5] {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
    transition: background 0.15s, border-color 0.15s;
}

.aup-policy-row--selected[b-2wyilg6oq5] {
    background: rgba(25, 118, 210, 0.06);
    border-color: var(--mud-palette-primary);
}

.aup-policy-row:hover[b-2wyilg6oq5] {
    background: var(--mud-palette-background-grey);
}

/* ── Table scroll container ──────────────────────────────────────────────── */
/* This is the element that actually scrolls. @onscroll on it (native Blazor
   DOM event, no JS interop) closes any open policy popover the moment the
   list scrolls, so a popover never ends up floating away from its "+N" chip. */
.aup-scroll-wrapper[b-2wyilg6oq5] {
    width: 100%;
    overflow: auto;
}

/* ── Assigned Policies column — cell alignment fix ───────────────────────────
   Root cause of the "top-aligned on big screens" bug: <td> defaults to
   vertical-align: top, and the table's own theme centers cell text once a
   row has spare height (only visible once the table is wide enough that rows
   aren't already tight, i.e. laptop/desktop vs. smaller screens). The old
   `display:inline-block` on .aup-policy-cell never established its own
   alignment context, so it just inherited whatever the <td> decided.
   Fix: force the parent <td> to vertically center via .aup-policy-td, and
   make .aup-policy-cell a flex container that owns its own left alignment
   and vertical centering regardless of viewport width. */

.aup-policy-td[b-2wyilg6oq5] {
    vertical-align: middle !important;
    text-align: left !important;
}

.aup-policy-cell[b-2wyilg6oq5] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 100%;
    text-align: left;
}

    /* The wrapping row of chips inside the cell — explicit flex alignment so it
   never falls back to the table's inherited centering on wide screens. */
    .aup-policy-cell > .d-flex[b-2wyilg6oq5] {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 0.4rem;
        width: 100%;
    }

.aup-more-chip[b-2wyilg6oq5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    padding: 0 10px;
    height: 24px;
    line-height: 1;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

    .aup-more-chip:hover[b-2wyilg6oq5] {
        background: var(--mud-palette-background-grey);
        border-color: var(--mud-palette-primary);
    }

/* MudChip renders its own root with align-items already centered, but pin its
   vertical alignment explicitly so it never drifts relative to .aup-more-chip
   when the row grows taller on wide screens. */
.aup-policy-cell .mud-chip[b-2wyilg6oq5] {
    align-self: center;
    vertical-align: middle;
}

/* Full-screen invisible layer so clicking anywhere else closes the popover */
.aup-policy-popover-overlay[b-2wyilg6oq5] {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: transparent;
}

/* The popover itself — anchored to .aup-policy-cell (its nearest
   position:relative ancestor), NOT to the viewport. It opens just below
   the chip and tracks the row naturally as the table scrolls, since it
   moves with the row it belongs to instead of staying pinned in place. */
.aup-policy-popover[b-2wyilg6oq5] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1401;
    min-width: 220px;
    max-width: 300px;
    max-height: 280px;
    overflow-y: auto;
    padding: 0.75rem 1rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

.aup-policy-popover-title[b-2wyilg6oq5] {
    font-weight: 600;
}

.aup-policy-popover-item[b-2wyilg6oq5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
}

/* ── Responsive: keep alignment stable from mobile through large desktop ──── */
@media (min-width: 960px) {
    .aup-policy-td[b-2wyilg6oq5] {
        vertical-align: middle !important;
    }

    .aup-policy-cell[b-2wyilg6oq5] {
        justify-content: flex-start;
    }
}

@media (min-width: 1440px) {
    /* Extra-wide monitors give rows more spare height than any other
       breakpoint — this is where the old top-alignment bug was most visible.
       Re-assert centering here so it can never regress as columns grow. */
    .aup-policy-td[b-2wyilg6oq5] {
        vertical-align: middle !important;
    }

    .aup-policy-cell[b-2wyilg6oq5],
    .aup-policy-cell > .d-flex[b-2wyilg6oq5] {
        align-items: center;
    }
}