/* =============================================================
   Global popup polish — applies a consistent modern look to:
     • Default Bootstrap modals (.modal-content, header/body/footer)
     • Default SweetAlert2 popups (.swal2-popup)
   Bespoke modals already styled in this project (sign-in, delete,
   clear-all, tag-editor, my-library, danger-modals, …) use their
   own class prefixes and override these defaults via !important
   or higher specificity, so they're untouched by this layer.
   ============================================================= */

/* ── Bootstrap modal-backdrop ────────────────────────────────
   Keep the dim color on the BASE selector so it stays constant
   through the whole open/close cycle — only opacity fades. That
   prevents the hard black snap on close.

   We deliberately DO NOT use backdrop-filter: blur() here.
   `backdrop-filter` doesn't co-animate with opacity smoothly on
   most GPUs — the blur appears to pop in instead of fading,
   which reads as a flicker / glitch on open and close.            */
.modal-backdrop {
    background-color: rgba(15, 23, 42, 0.55) !important;
    transition: opacity 0.2s ease;
}
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: 1 !important; }

/* ── Center modals vertically by default ────────────────────
   Bootstrap top-aligns modals unless you add .modal-dialog-centered.
   Apply that behavior globally so every popup sits in the middle.
   `pointer-events:auto` on the content lets clicks register even
   though the parent .modal-dialog is `pointer-events:none`.

   We do NOT override .modal-dialog's transition — Bootstrap's own
   transform fade-in is fine. Layering a custom cubic-bezier on top
   was double-animating and reading as a stutter on slide-in.       */
.modal-dialog {
    display: flex !important;
    align-items: center !important;
    min-height: calc(100% - 1rem) !important;
    /* Nudge the visual center up by ~15% of the viewport. The flex
       container stays full-height (so scroll still works for tall
       content), but adding padding-bottom shrinks the centering area
       — the modal lands closer to the top of the screen. */
    padding-bottom: 30vh !important;
    box-sizing: border-box;
}
.modal-dialog > .modal-content {
    width: 100%;
    pointer-events: auto;
}

/* No slide animation on the dialog itself — appears instantly when shown.
   The backdrop still fades for context, but the modal box snaps into place. */
.modal.fade .modal-dialog,
.modal.show .modal-dialog {
    transform: none !important;
    transition: none !important;
}
.modal-content {
    border-radius: 16px !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow:
        0 24px 60px rgba(15, 18, 35, 0.22),
        0 2px 8px rgba(15, 18, 35, 0.06) !important;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
}

/* ── Header ─────────────────────────────────────────────────── */
.modal-header {
    padding: 18px 22px !important;
    border-bottom: 1px solid #f0f2f8 !important;
    align-items: center;
}
.modal-header .modal-title,
.modal-header .modal-title h5,
.modal-header h5.modal-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    color: #090f1a !important;
    margin: 0;
    line-height: 1.3;
}
/* Bootstrap 4-style close button (× as a span inside .close) */
.modal-header .close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #e5e7eb !important;
    background: #fff;
    color: #475569 !important;
    opacity: 1 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-shadow: none !important;
    margin: 0 0 0 auto;
    padding: 0 !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.modal-header .close:hover {
    background: #f0f2f8;
    color: #090f1a !important;
    border-color: #cbd5e1 !important;
}
.modal-header .close span { line-height: 1; }

/* ── Body ───────────────────────────────────────────────────── */
.modal-body {
    padding: 20px 22px !important;
    color: #1e293b;
    font-size: 14px;
    line-height: 1.5;
}
.modal-body .label,
.modal-body label {
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 4px;
    display: block;
}
.modal-body .form-control {
    border-radius: 9px !important;
    border: 1.5px solid #e5e7eb !important;
    padding: 10px 12px !important;
    font-size: 13.5px !important;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.modal-body .form-control:focus {
    border-color: #a78bfa !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
}

/* ── Footer ─────────────────────────────────────────────────── */
.modal-footer {
    padding: 14px 22px !important;
    border-top: 1px solid #f0f2f8 !important;
    background: #fafbfc;
    gap: 8px;
}
.modal-footer .btn,
.modal-body .btn {
    border-radius: 9px !important;
    padding: 9px 18px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border: 0;
    transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.modal-footer .btn:hover,
.modal-body .btn:hover { transform: translateY(-1px); }

.modal-footer .btn-primary,
.modal-body  .btn-primary {
    background: linear-gradient(135deg, #7c5cfd, #7c5cfd) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}
.modal-footer .btn-secondary,
.modal-body  .btn-secondary {
    background: #f0f2f8 !important;
    color: #334155 !important;
}
.modal-footer .btn-secondary:hover,
.modal-body  .btn-secondary:hover { background: #e2e8f0 !important; }

/* =============================================================
   Default SweetAlert2 popups (no customClass)
   Bespoke .swal2-popup variants in this project use higher
   specificity / !important and override these defaults.
   ============================================================= */
.swal2-container { padding: 24px !important; }
.swal2-popup {
    border-radius: 16px !important;
    padding: 26px 24px !important;
    box-shadow:
        0 24px 60px rgba(15, 18, 35, 0.22),
        0 2px 8px rgba(15, 18, 35, 0.06) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif !important;
}
.swal2-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #090f1a !important;
    letter-spacing: -0.01em !important;
}
.swal2-html-container,
.swal2-content {
    color: #475569 !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
}
.swal2-actions {
    gap: 10px !important;
    margin-top: 16px !important;
}
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.swal2-styled.swal2-confirm {
    background: linear-gradient(135deg, #7c5cfd, #7c5cfd) !important;
}
.swal2-styled.swal2-cancel {
    background: #f0f2f8 !important;
    color: #334155 !important;
}
.swal2-styled.swal2-deny {
    background: #ef4444 !important;
}
.swal2-styled:focus { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important; }

.swal2-icon { margin: 6px auto 12px !important; }

.swal2-input,
.swal2-textarea,
.swal2-select {
    border-radius: 9px !important;
    border: 1.5px solid #e5e7eb !important;
    padding: 10px 12px !important;
    font-size: 13.5px !important;
    box-shadow: none !important;
}
.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    border-color: #a78bfa !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
}

/* Backdrop matching Bootstrap's */
.swal2-backdrop-show {
    background: rgba(15, 23, 42, 0.55) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}