/* =============================================================
   modals.css – Modal-Dialog-System
   NWI-Portal
   ============================================================= */

/* ── Overlay ───────────────────────────────────────────────── */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    padding: 0;
}

.modal--open {
    display: block;
}

.modal__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(25, 28, 29, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}

/* ── Modal-Box ─────────────────────────────────────────────── */

.modal__box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color-surface-container-low);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    width: 90%;
    max-width: 560px;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modal-in var(--transition-normal) ease;
}

.modal__box--positioned {
    transform: none;
}

.modal__box--dragging {
    user-select: none;
}

.modal__box--wide {
    max-width: 940px;
    width: 95vw;
}

.modal__box--narrow {
    max-width: 380px;
}

.modal__box--sm {
    max-width: 440px;
}

/* ── Hilfe-Modal (Standard für kontextbezogene Hilfe-Popups) ─── *
 *  Verwendung:
 *  1. <div class="modal" id="modal-help-CONTEXT">
 *  2. <div class="modal__box modal__box--help">
 *  3. Inhalt: help.css-Klassen (.help-note, .help-steps, …)
 *  4. Button: <button onclick="openModal('modal-help-CONTEXT')">Hilfe</button>
 *  5. Footer mit Hilfe-Button: class="modal__footer modal__footer--split"
 * ─────────────────────────────────────────────────────────────── */
.modal__box--help {
    max-width: 600px;
}

/* Für Footers mit Hilfe-Button links und Aktionen rechts */
.modal__footer--split {
    justify-content: space-between;
}

@keyframes modal-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ── Modal-Header ──────────────────────────────────────────── */

.modal__header {
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background-color: var(--color-surface-container-lowest);
    gap: var(--spacing-md);
    cursor: grab;
    touch-action: none;
}

.modal__box--dragging .modal__header,
.modal-drag-active .modal__header {
    cursor: grabbing;
}

.modal__header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: 28px;
    flex-shrink: 0;
    /* Material Symbols base */
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 28;
}

.modal__header-text {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.modal__title {
    font-family: var(--font-family-headline);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-on-surface);
    letter-spacing: -0.02em;
}

.modal__close {
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-on-surface-variant);
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.modal__close:hover {
    background-color: var(--color-surface-container);
    color: var(--color-on-surface);
}

/* ── Form als Flex-Kind (wenn form Header+Body+Footer umschließt) */

.modal__box > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* ── Modal-Body ────────────────────────────────────────────── */

.modal__body {
    padding: var(--spacing-xl);
    overflow-y: auto;
    flex: 1;
    /* Dünner, dezenter Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(114, 119, 132, 0.25) transparent;
}

.modal__body::-webkit-scrollbar        { width: 4px; }
.modal__body::-webkit-scrollbar-track  { background: transparent; }
.modal__body::-webkit-scrollbar-thumb  { background: rgba(114, 119, 132, 0.25); border-radius: 4px; }
.modal__body::-webkit-scrollbar-thumb:hover { background: rgba(114, 119, 132, 0.45); }

/* ── Modal-Footer ──────────────────────────────────────────── */

.modal__footer {
    padding: var(--spacing-md) var(--spacing-xl);
    border-top: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    flex-shrink: 0;
    background-color: var(--color-surface-container-lowest);
}

/* ── DeletionGuard-Modal (core/DeletionGuard.php + deletion_guard.js) ── */

/*
 * Wichtig: [hidden] ist eine Author-Regel-Klasse hier absichtlich mit [hidden]
 * kombiniert (statt sich auf die native [hidden]-UA-Regel zu verlassen) – .btn
 * (display:inline-flex) und .deletion-guard-modal__checkbox (display:flex)
 * würden das native [hidden]-Verhalten sonst überschreiben (Author- schlägt
 * UA-Stylesheet unabhängig von Reihenfolge/Spezifität innerhalb der Ebene).
 */
.deletion-guard-modal__checkbox[hidden],
.deletion-guard-modal__submit[hidden],
.deletion-guard-modal__blocking-list[hidden],
.deletion-guard-tree__toolbar[hidden] {
    display: none;
}

.deletion-guard-modal__message {
    white-space: pre-line;
}

.deletion-guard-modal__blocking-list {
    list-style: none;
    margin: var(--spacing-md) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.deletion-guard-modal__blocking-item {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-container-lowest);
    font-size: var(--font-size-sm);
}

.deletion-guard-modal__blocking-item strong {
    display: block;
}

.deletion-guard-modal__checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    cursor: pointer;
}

.deletion-guard-modal__checkbox input[type="checkbox"] {
    margin-top: 0.2em;
}

/* ── DeletionGuard-Baumauswahl (Fall B: Objekt/Haus/Ebene) ───────── */

.deletion-guard-tree__toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--spacing-sm);
}

.deletion-guard-tree {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 40vh;
    overflow-y: auto;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
}

.deletion-guard-tree .deletion-guard-tree {
    max-height: none;
    border: none;
    border-radius: 0;
}

.deletion-guard-tree__node {
    border-top: 1px solid var(--color-border-subtle);
}

.deletion-guard-tree > .deletion-guard-tree__node:first-child {
    border-top: none;
}

.deletion-guard-tree__row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    cursor: pointer;
}

.deletion-guard-tree__label {
    flex: 1;
}

.deletion-guard-tree__meta {
    color: var(--color-text-muted, #727784);
    font-size: var(--font-size-sm);
}

.deletion-guard-tree__children {
    padding-left: var(--spacing-lg);
}