/* * apps/static/assets/css/components/dialogs.css * * Cross-cutting fixes for app-wide modals, SweetAlert2 confirmations, * and the unified page-help affordance. * * - `.swal-stack-top` keeps a SweetAlert2 confirmation visible above * any open Bootstrap modal (Bootstrap modal z-index is 1055; we * bump SweetAlert2 above it). * - `.modal-stack-top` is the parallel class used by Bootstrap * confirmations spawned from inside another modal (Map Areas * editor, Detection & AI label-delete confirmation). * * See dialogs.js (appConfirm/appAlert) and globals.js (scroll-lock * cleanup hook). */ /* SweetAlert2 must always sit above Bootstrap modals. Bootstrap 5 modals default to z-index 1055 (and 1050 for the backdrop); without this rule a Swal.fire() opened from a button inside a modal renders *underneath* the parent modal, making the confirmation unreachable. Fixes Analysis_22_05_2026.pdf #26 + #39 across every nested confirmation flow (Detection & AI label delete, Map Areas drawer save, Projects management, etc.). */ .swal2-container { z-index: 2080; } .swal-stack-top.swal2-container { z-index: 2090; } .modal.modal-stack-top, .modal-backdrop.modal-stack-top { z-index: 2070; } /* Base Bootstrap modals must paint above the Working Map floating chrome. The map toolbar (`#working-layers-toolbar.map-topbar`, z-index 1060), its sub-panels (1066) and other map overlays climb the upper rungs of the DS z-index ladder (up to --z-tweaks:1100) — all higher than Bootstrap's stock `.modal` (1055) / `.modal-backdrop` (1050). Without this the toolbar (and other map overlays) render on top of an open modal and clip its header (user report: "modals appear behind the topbars"). We lift both above the map chrome while staying below the nested-modal (2070) and SweetAlert2 (2080) tiers defined above, so stacking order is preserved. Paired with the portal-to-body logic in lib/modal-portal.js, which guarantees modals also escape transformed ancestors. */ .modal { z-index: 1500; } .modal-backdrop { z-index: 1490; } /* When SweetAlert2 is opened on top of a Bootstrap modal we need to suppress the parent modal's focus trap so the cancel button can be reached. SweetAlert2 already does this for itself; this rule is a safety net that also fixes pointer events in nested overlays. */ .swal2-shown .modal { pointer-events: none; } .swal2-shown .swal2-container, .swal2-shown .swal2-container * { pointer-events: auto; } /* ---------- Draggable modals (see lib/modal-portal.js) ---------- The same module portals every Bootstrap modal to on show so it escapes transformed ancestors (e.g. Working Map control panels) and always paints above the topbar. The header doubles as a drag handle. */ .modal-header.aero-modal-drag-handle { cursor: grab; -webkit-user-select: none; user-select: none; touch-action: none; } .modal-header.aero-modal-drag-handle:active { cursor: grabbing; } /* Interactive controls inside the drag handle keep the normal pointer. */ .modal-header.aero-modal-drag-handle button, .modal-header.aero-modal-drag-handle a, .modal-header.aero-modal-drag-handle input, .modal-header.aero-modal-drag-handle select, .modal-header.aero-modal-drag-handle .btn-close, .modal-header.aero-modal-drag-handle .close { cursor: pointer; } /* Suppress the fade transition while actively dragging for a 1:1 feel. */ .modal-dialog.aero-modal-dragging { transition: none !important; } /* ---------- Page-help button (replaces the grey-arrow tooltip) ---------- See includes/_page_help.html. Renders a small info-circle button that opens a Bootstrap popover with the help text. */ .page-help-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; margin-left: 0; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--neutral-500, #64748b); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; vertical-align: middle; } .page-help-btn:hover, .page-help-btn:focus { background-color: var(--neutral-100, #f1f5f9); color: var(--brand-500, #0369a1); border-color: var(--neutral-200, #e2e8f0); outline: none; text-decoration: none; } .page-help-btn .feather { width: 16px; height: 16px; } /* Popover styling overrides — slightly more padding and a readable max width so the help text doesn't sit edge-to-edge. */ .popover { max-width: 360px; } .popover-body { padding: 0.75rem 1rem; line-height: 1.5; }