/* ============================================================
   WAK LIFE — UNIFIED MODAL SYSTEM
   One premium, consistent look for EVERY modal across the whole
   app (personal + business + Bootstrap auth modals).
   This harmonizes the FRAME only — backdrop, surface card,
   radius, shadow, navbar-safe clearance, scroll and entrance.
   Per-modal widths, internal header/body/footer layout and all
   show/hide (display) logic are intentionally left untouched.
   Loaded LAST in _Layout so it wins over per-view inline styles.
   ============================================================ */

@keyframes wakModalIn {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* ---- Backdrops / overlays — appearance only, NEVER 'display' ----
   (display:none <-> flex toggles are owned by each page's JS/classes;
   touching display here would make modals permanently visible.) */
.modal-overlay,
.modal-ov,
.debts-modal-overlay,
.income-modal-overlay,
.sg-modal,
.sf-modal,
.settings-modal,
.wlm-overlay,
#rt-modal-container.rt-modal-open {
    background: rgba(2, 6, 23, .55) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 40px 18px 34px !important;
    overflow-y: auto !important;
    z-index: 4000 !important;
}

/* ---- Cards (custom modals) ---- */
.modal-overlay .modal,
.modal-ov .modal-card,
.debts-modal,
.expense-modal,
.income-modal,
.sg-modal-content,
.sf-modal-content,
#rt-modal-container .rt-modal,
.wlm-card,
.modal-content-glass {
    background: var(--surface, #fff) !important;
    border: 1px solid var(--border, rgba(15, 23, 42, .08)) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .24), 0 6px 18px rgba(15, 23, 42, .10) !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
    margin: 0 auto !important;
    animation: wakModalIn .24s cubic-bezier(.16, .84, .44, 1) both !important;
}

/* ---- Card (Bootstrap auth/income modals) — same frame, let
        Bootstrap keep its own dialog fade so motion isn't doubled ---- */
.modal .modal-content {
    background: var(--surface, #fff) !important;
    border: 1px solid var(--border, rgba(15, 23, 42, .08)) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .24), 0 6px 18px rgba(15, 23, 42, .10) !important;
}

/* A card nested inside another modal (e.g. settings backup-codes box)
   stays a flat inner panel, not a second floating modal. */
.modal-content-glass .modal-content-glass {
    box-shadow: none !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 14px !important;
    animation: none !important;
}

/* ---- Dark theme: deeper, softer shadow ---- */
[data-theme="dark"] .modal-overlay .modal,
[data-theme="dark"] .modal-ov .modal-card,
[data-theme="dark"] .debts-modal,
[data-theme="dark"] .expense-modal,
[data-theme="dark"] .income-modal,
[data-theme="dark"] .sg-modal-content,
[data-theme="dark"] .sf-modal-content,
[data-theme="dark"] #rt-modal-container .rt-modal,
[data-theme="dark"] .wlm-card,
[data-theme="dark"] .modal-content-glass,
[data-theme="dark"] .modal .modal-content {
    box-shadow: 0 28px 72px rgba(0, 0, 0, .62), 0 8px 22px rgba(0, 0, 0, .42) !important;
}

/* ---- Bootstrap plumbing: match backdrop + sit ABOVE the fixed
        navbar (header is z-index:3000), so auth/income modals are
        never hidden behind it. ---- */
.modal-backdrop {
    background: rgba(2, 6, 23, .55) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    opacity: 1 !important;
    z-index: 3990 !important;
}
.modal { z-index: 4000 !important; }
.modal .modal-dialog { margin-top: 40px; }