/* ============================
   PLATFORMA OVERLAYS
   (Modals & Drawers)
   ============================ */
/* Fælles backdrop */
.platforma-overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.platforma-overlay-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ========== MODAL ========== */

.platforma-modal {
    position: fixed;
    inset: 0;
    z-index: 1110;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--platforma-space-4);
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

    .platforma-modal.is-open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

/* Selve boksen */
.platforma-modal-dialog {
    width: 100%;
    max-width: 480px;
    background: var(--platforma-white);
    border-radius: 12px;
    box-shadow: var(--platforma-shadow-xl);
    border: 1px solid var(--platforma-gray-200);
    display: flex;
    flex-direction: column;
}

/* Størrelses-varianter */
.platforma-modal-dialog--lg {
    max-width: 720px;
}

.platforma-modal-dialog--sm {
    max-width: 360px;
}

/* Modal header/body/footer */
.platforma-modal-header {
    padding: var(--platforma-space-4) var(--platforma-space-6);
    border-bottom: 1px solid var(--platforma-gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--platforma-space-3);
}

.platforma-modal-title {
    font-size: var(--platforma-text-lg);
    font-weight: 600;
    color: var(--platforma-gray-900);
}

.platforma-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid var(--platforma-gray-200);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--platforma-white);
    cursor: pointer;
}

.platforma-modal-body {
    padding: var(--platforma-space-6);
}

.platforma-modal-footer {
    padding: var(--platforma-space-4) var(--platforma-space-6);
    border-top: 1px solid var(--platforma-gray-100);
    display: flex;
    justify-content: flex-end;
    gap: var(--platforma-space-3);
}

/* ========== DRAWER ========== */

.platforma-drawer {
    position: fixed;
    inset: 0;
    z-index: 1110;
    display: flex;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* Right drawer default */
.platforma-drawer-panel {
    margin-left: auto;
    width: 100%;
    max-width: 420px;
    background: var(--platforma-white);
    border-left: 1px solid var(--platforma-gray-200);
    box-shadow: -10px 0 30px rgba(15,23,42,0.18);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.2s ease;
}

/* Size varianter */
.platforma-drawer-panel--lg {
    max-width: 640px;
}

.platforma-drawer-panel--sm {
    max-width: 320px;
}

/* Left-variant (valgfri) */
.platforma-drawer--left .platforma-drawer-panel {
    margin-left: 0;
    margin-right: auto;
    border-left: none;
    border-right: 1px solid var(--platforma-gray-200);
    box-shadow: 10px 0 30px rgba(15,23,42,0.18);
    transform: translateX(-100%);
}

/* Åben state */
.platforma-drawer.is-open {
    opacity: 1;
    pointer-events: auto;
}

    .platforma-drawer.is-open .platforma-drawer-panel {
        transform: translateX(0);
    }

/* Drawer header/body/footer */
.platforma-drawer-header {
    padding: var(--platforma-space-4) var(--platforma-space-6);
    border-bottom: 1px solid var(--platforma-gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--platforma-space-3);
}

.platforma-drawer-title {
    font-size: var(--platforma-text-lg);
    font-weight: 600;
    color: var(--platforma-gray-900);
}

.platforma-drawer-close {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid var(--platforma-gray-200);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--platforma-white);
    cursor: pointer;
}

.platforma-drawer-body {
    padding: var(--platforma-space-6);
    flex: 1;
    overflow-y: auto;
}

.platforma-drawer-footer {
    padding: var(--platforma-space-4) var(--platforma-space-6);
    border-top: 1px solid var(--platforma-gray-100);
    display: flex;
    justify-content: flex-end;
    gap: var(--platforma-space-3);
}

@media (max-width: 575.98px) {
    .platforma-modal {
        padding: var(--platforma-space-3);
    }

    .platforma-modal-dialog {
        border-radius: 10px;
    }
}