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

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

/* ---------- 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: 8px;
    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;
}