.erp-modal { display: none; position: fixed; inset: 0; z-index: 2000; overflow-y: auto; }
.erp-modal.open { display: block; }
.erp-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 38, 0.48); }
.erp-modal-dialog {
    position: relative;
    max-width: 560px;
    margin: 10vh auto;
    background: #fff;
    border-radius: var(--erp-radius-lg);
    box-shadow: var(--erp-shadow-lg);
    border: 1px solid var(--erp-border);
}
.erp-modal-header, .erp-modal-body, .erp-modal-footer { padding: var(--erp-space-4); }
.erp-modal-header { border-bottom: 1px solid var(--erp-border); }
.erp-modal-footer { border-top: 1px solid var(--erp-border); display: flex; justify-content: flex-end; gap: var(--erp-space-2); }

@media (max-width: 640px) {
    .erp-modal-dialog {
        max-width: calc(100vw - 24px);
        width: calc(100vw - 24px);
        margin: 5vh auto;
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* Nav customize dialog — drag-and-drop pin/overflow list.
   The generic .erp-modal-dialog has no height cap at desktop widths (only
   mobile gets max-height+overflow), so a list long enough — up to ~21
   modules — could push the footer (Reset/Cancel/Save) below the viewport
   with no way to reach it: nothing about the dialog itself was scrollable,
   only the list was, and the list not being tall enough to need its own
   scroll doesn't help if the DIALOG as a whole is taller than the screen.
   Fix: make this specific dialog a capped flex column so the header and
   footer are always pinned in view and only the middle (the list) scrolls. */
.erp-nav-customize-dialog {
    max-width: 420px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.erp-nav-customize-dialog .erp-modal-header,
.erp-nav-customize-dialog .erp-modal-footer { flex-shrink: 0; }
.erp-nav-customize-dialog .erp-modal-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.erp-nav-customize-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--erp-border);
    border-radius: 8px;
    /* A plain scrollbar wasn't an obvious enough cue that the list (up to
       ~21 modules) continues below the fold — fade the bottom edge like the
       nav bar itself does, so it's visually clear there's more to scroll to. */
    -webkit-mask-image: linear-gradient(to bottom, #000 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 92%, transparent 100%);
}
.erp-nav-customize-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: #fff;
    border-bottom: 1px solid #eef2f7;
    cursor: grab;
    user-select: none;
    font-size: 13px;
    font-weight: 600;
    color: #314760;
}
.erp-nav-customize-item:last-child { border-bottom: none; }
.erp-nav-customize-item.is-dragging { opacity: 0.4; }
.erp-nav-customize-item .erp-nav-customize-handle { color: #94a3b8; }
.erp-nav-customize-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #f4f8fc;
    border-bottom: 1px solid #eef2f7;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7a8ba0;
}
.erp-nav-customize-divider::before,
.erp-nav-customize-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #d7e0ea;
}