/* popup_manager.css — Generic stacking pop-up infrastructure.
   Each popup is an absolutely-positioned overlay; stacking is controlled
   by adding/removing the .p2-open class via popup_manager.js.
   Colors come from the theme variables in assets_ui/css/fa.css. */

/* ── Overlay ────────────────────────────────────────────────────── */
.p2-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 24, 32, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2.5vh 2vw;
    z-index: 2000;          /* base; popup_manager.js overrides per stack depth */
    overflow: auto;
}
.p2-overlay.p2-open {
    display: flex;
}

/* ── Card ───────────────────────────────────────────────────────── */
.p2-card {
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.18);
    width: 100%;
    max-width: 1100px;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    animation: p2-card-in 140ms ease-out;
}
@keyframes p2-card-in {
    from { transform: translateY(8px) scale(0.985); opacity: 0; }
    to   { transform: translateY(0) scale(1);       opacity: 1; }
}

/* Size variants */
.p2-card--sm   { max-width: 560px; }
.p2-card--md   { max-width: 820px; }
.p2-card--lg   { max-width: 1100px; }
.p2-card--xl   { max-width: 1320px; }
.p2-card--full { max-width: 100%; }

/* ── Header ─────────────────────────────────────────────────────── */
.p2-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.2rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--table-header-bg);
}
.p2-header-title {
    margin: 0;
    font-weight: 600;
    flex: 1;
    color: var(--text-main);
}
/* .p2-header-back, .p2-close → controls.css */

/* ── Body ───────────────────────────────────────────────────────── */
.p2-body {
    flex: 1;
    overflow: auto;
    padding: 1rem 1.2rem;
    background: var(--bg-card);
}
.p2-body--flush { padding: 0; }

/* ── Footer ─────────────────────────────────────────────────────── */
.p2-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.75rem 1.2rem;
    border-top: 1px solid var(--border-color);
    background: var(--table-header-bg);
}
.p2-footer-left {
    margin-right: auto;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ── Buttons → controls.css (.p2-btn and all variants) ─────────── */