/* ============================
   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);
    /* MODAL-HIDDEN-1 (2026-09-27, SA-14a a11y review) — a CLOSED modal was only transparent: its buttons (the
       shared confirm's Cancel/OK on every page, the CRM/Translations edit forms) stayed in the tab order and the
       accessibility tree — invisible focus stops a keyboard user tabbed onto. visibility:hidden takes it out of
       both; the delayed visibility transition keeps the 0.15s fade-out, and opening switches it on at once so
       the script's focus() lands. */
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

    .platforma-modal.is-open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        visibility: visible;
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
    }

/* 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);
}

/* AUDIT-DESTRUCT-1 — typed confirmation inside the shared confirm modal. Deliberately plain: this
   appears only on actions that cannot be undone, and the friction IS the feature. */
/* AUDIT-DESTRUCT-1 fix (2026-09-20) — the typed-confirmation wrapper is toggled via the `hidden`
   attribute by platforma-confirm.js (shown ONLY when data-pf-confirm-phrase is set). An author
   `display:block` beats the UA `[hidden]{display:none}`, so without this guard the empty, label-less
   phrase input leaked onto EVERY confirm dialog (e.g. the feature-flag toggle). Restore the hidden. */
.platforma-confirm-phrase[hidden] {
    display: none;
}
.platforma-confirm-phrase {
    display: block;
    margin-top: var(--pf-space-3, .75rem);
    font-size: var(--pf-text-2sm);
    color: var(--pf-color-text-secondary);
}

.platforma-confirm-phrase input {
    display: block;
    width: 100%;
    margin-top: .35rem;
    padding: .45rem .6rem;
    font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    font-size: var(--pf-text-2sm);
    color: var(--pf-color-text-primary);
    background: var(--pf-color-surface-base);
    border: 1px solid var(--pf-color-border-default, var(--pf-color-border-subtle));
    border-radius: 6px;
}

.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;
    }
}