/* ═══════════════════════════════════════════════════════════
   PatrolWizzard V6 — Modal & Toast
   ═══════════════════════════════════════════════════════════ */

/* ── Modal ─────────────────────────────────────────────── */
.modal-overlay {
    position: fixed; inset: 0; background: var(--bg-overlay);
    z-index: var(--z-modal); display: flex; align-items: center;
    justify-content: center; padding: var(--sp-4);
    opacity: 0; visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}
.modal-overlay.active { opacity: 1; visibility: visible; }

.modal {
    background: var(--bg-card); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl); width: 100%;
    max-height: 90vh; display: flex; flex-direction: column;
    transform: scale(0.95) translateY(10px);
    transition: transform var(--transition-base);
}
.modal-overlay.active .modal { transform: scale(1) translateY(0); }
.modal-sm { max-width: 420px; }
.modal-md { max-width: 560px; }
.modal-lg { max-width: 720px; }
.modal-xl { max-width: 960px; }
.modal-full { max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); }

.modal-header {
    padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--border-light);
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
}
.modal-header h3 {
    font-size: var(--text-lg); font-weight: 600; color: var(--text-primary);
}
.modal-close {
    width: 32px; height: 32px; border: none; background: transparent;
    border-radius: var(--radius-md); cursor: pointer;
    color: var(--text-muted); display: flex; align-items: center;
    justify-content: center; transition: all var(--transition-fast);
}
.modal-close:hover { background: var(--bg-body); color: var(--text-primary); }

.modal-body {
    padding: var(--sp-6); overflow-y: auto; flex: 1;
}
.modal-footer {
    padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--border-light);
    display: flex; align-items: center; justify-content: flex-end;
    gap: var(--sp-2); flex-shrink: 0;
}

/* Confirmation variant */
.modal-confirm .modal-body { text-align: center; padding: var(--sp-8) var(--sp-6); }
.modal-confirm .confirm-icon {
    width: 56px; height: 56px; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--sp-4); font-size: 24px;
}
.modal-confirm .confirm-icon.danger { background: var(--color-danger-bg); color: var(--color-danger); }
.modal-confirm .confirm-icon.warning { background: var(--color-warning-bg); color: var(--color-warning); }
.modal-confirm .confirm-icon.info { background: var(--color-info-bg); color: var(--color-info); }
.modal-confirm .confirm-title {
    font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--sp-2);
}
.modal-confirm .confirm-text { color: var(--text-secondary); font-size: var(--text-sm); }

/* ── Toast ─────────────────────────────────────────────── */
.toast-container {
    position: fixed; top: var(--sp-4); right: var(--sp-4);
    z-index: var(--z-toast); display: flex; flex-direction: column;
    gap: var(--sp-2); pointer-events: none;
}
.toast {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-lg);
    background: var(--bg-card); border: 1px solid var(--border-light);
    box-shadow: var(--shadow-lg); min-width: 300px; max-width: 420px;
    pointer-events: auto; animation: pw-slide-down 300ms ease;
    transition: opacity var(--transition-base), transform var(--transition-base);
}
.toast.removing { opacity: 0; transform: translateX(100%); }
.toast-icon { flex-shrink: 0; margin-top: 1px; }
.toast-content { flex: 1; }
.toast-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.toast-message { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 2px; }
.toast-close {
    flex-shrink: 0; width: 20px; height: 20px; border: none;
    background: transparent; cursor: pointer; color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); font-size: 16px;
}
.toast-close:hover { background: var(--bg-body); }

.toast-success .toast-icon { color: var(--color-success); }
.toast-error .toast-icon { color: var(--color-danger); }
.toast-warning .toast-icon { color: var(--color-warning); }
.toast-info .toast-icon { color: var(--color-info); }

/* ── Progress indicator on toast ────────────────────────── */
.toast-progress {
    position: absolute; bottom: 0; left: 0; height: 3px;
    background: var(--pw-primary); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    transition: width linear;
}

@media (max-width: 480px) {
    .toast-container { left: var(--sp-4); right: var(--sp-4); }
    .toast { min-width: auto; }
}