/* ---- App-style modals on phones (.lv-app-modal) ----
   Desktop keeps Bootstrap's dialogs. Below 768px a modal with
   .lv-app-modal fills the screen and slides up: a coloured title bar with
   a round close button, a scrolling body with 44px fields, and the footer
   buttons side by side at the bottom. Used by the lead view's modals and
   the package view's booking, receipt and email modals; each page keeps
   its forms' own touches (lead-view.css, packages/view). */

@media (max-width: 767.98px) {
    /* Shell: full screen, sliding up; the header and footer stay put
       while the body scrolls */
    .modal.lv-app-modal .modal-dialog { height: 100%; margin: 0; max-width: none; width: 100%; }
    .modal.lv-app-modal.fade .modal-dialog { transform: translateY(100%); transition: transform .25s ease-out; }
    .modal.lv-app-modal.show .modal-dialog { transform: none; }
    .modal.lv-app-modal .modal-content { border: 0; border-radius: 0; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
    .modal.lv-app-modal .modal-content > form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
    .modal.lv-app-modal .modal-header { border-radius: 0; flex-shrink: 0; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; }
    .modal.lv-app-modal .modal-title { font-size: 18px; }
    /* close: a 40px round white × on a translucent chip over the green header */
    .modal.lv-app-modal .modal-header .btn-close {
        --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
        background: rgba(255, 255, 255, .2) var(--bs-btn-close-bg) center / 14px auto no-repeat;
        border-radius: 50%;
        box-sizing: border-box;
        flex: 0 0 40px;
        height: 40px;
        margin: -4px -6px -4px auto;
        opacity: 1;
        padding: 0;
        position: static;
        touch-action: manipulation;
        width: 40px;
    }
    .modal.lv-app-modal .modal-header .btn-close:active { background-color: rgba(255, 255, 255, .35); }
    .modal.lv-app-modal .modal-header .btn-close:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, .5); }
    .modal.lv-app-modal .modal-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
    .modal.lv-app-modal .modal-body .mb-3 { margin-bottom: 14px !important; }
    /* bodies written with py-0 for desktop still get their phone padding */
    .modal.lv-app-modal .modal-body.py-0 { padding-bottom: 16px !important; padding-top: 16px !important; }
    .modal.lv-app-modal .form-label { font-size: 13px; margin-bottom: 6px; }
    /* 44px touch targets; 16px text so iOS doesn't zoom on focus */
    .modal.lv-app-modal .form-control { border-radius: 12px; font-size: 16px; min-height: 44px; }
    .modal.lv-app-modal .form-select { border-radius: 12px; font-size: 16px; min-height: 44px; }
    .modal.lv-app-modal .input-group > .form-control { border-radius: 0 12px 12px 0; }
    .modal.lv-app-modal .alert { border-radius: 12px; }
    /* email PDF preview (partials/pdf-attachment): 440px is most of a phone */
    .modal.lv-app-modal .position-relative:has(> iframe[id$="PdfPreview"]) { height: 280px !important; }
    /* Description editor (summernote-lite): one flat row of icon buttons,
       like a phone editor. Kept: paragraph style · bold italic underline ·
       text colour · lists · alignment · link · table. Hidden: strikethrough,
       clear formatting, font name / size, line height, undo / redo, rule
       and code view (desktop keeps the full toolbar). */
    /* The editor fills the rest of the modal body instead of its fixed
       200px: the body and every wrapper around the editor become growing
       columns (hidden ones excluded), and the editing area stretches. A
       body taller than the screen still scrolls. */
    .modal.lv-app-modal .modal-body:has(.note-editor),
    .modal.lv-app-modal .modal-body :has(.note-editor):not(.d-none) { display: flex !important; flex-direction: column; }
    .modal.lv-app-modal .modal-body :has(.note-editor):not(.d-none) { flex: 1 0 auto; margin-bottom: 0 !important; min-height: 0; }
    .modal.lv-app-modal .modal-body:has(.note-editor) > *,
    .modal.lv-app-modal .modal-body :has(.note-editor) > * { flex-shrink: 0; }
    .modal.lv-app-modal .note-editor.note-frame { border: 1px solid #e2e8f0; border-radius: 12px; display: flex; flex: 1 0 auto; flex-direction: column; max-width: 100%; min-height: 260px; }
    .modal.lv-app-modal .note-editor .note-editing-area { display: flex; flex: 1 1 auto; flex-direction: column; }
    .modal.lv-app-modal .note-editor .note-editing-area .note-editable { flex: 1 1 auto; height: auto !important; min-height: 180px; }
    .modal.lv-app-modal .note-toolbar {
        align-items: center;
        background: #f8fafc;
        border-bottom: 1px solid #edf1f6;
        border-radius: 12px 12px 0 0;
        display: flex;
        flex-wrap: wrap;
        padding: 4px;
        /* Follow the modal body's scroll, stopping at this editor's end.
           Sticky stops at the body's 16px padding; pull it up flush with
           the header. */
        position: sticky;
        top: -16px;
        z-index: 10;
    }
    .modal.lv-app-modal .note-toolbar > .note-btn-group { align-items: center; display: flex; margin: 0; padding: 0 1px; }
    .modal.lv-app-modal .note-toolbar > .note-btn-group + .note-btn-group { border-left: 1px solid #e2e8f0; }
    .modal.lv-app-modal .note-toolbar :is(.note-font, .note-misc, .note-view, .note-btn-strikethrough, .note-style > .note-btn:last-child, .note-insert > .note-btn:last-child),
    .modal.lv-app-modal .note-toolbar .note-btn-group:has(> .dropdown-line-height) { display: none !important; }
    .modal.lv-app-modal .note-toolbar .note-btn-group .note-btn-group { display: flex; margin: 0; }
    .modal.lv-app-modal .note-toolbar .note-btn {
        background: transparent;
        border: 0;
        border-radius: 8px;
        color: #334155;
        font-size: 14px;
        height: 34px;
        line-height: 1;
        min-width: 28px;
        padding: 0 5px;
    }
    .modal.lv-app-modal .note-toolbar .note-btn.dropdown-toggle { min-width: 0; padding: 0 4px; }
    .modal.lv-app-modal .note-toolbar .note-btn:is(:hover, :active, .active) { background: #e0e7ff; color: #3730a3; }
    .modal.lv-app-modal .note-toolbar .note-dropdown-menu { max-width: calc(100vw - 16px); }
    /* table popover (add / delete rows and columns): one wrapping row of
       finger-sized buttons that stays inside the editor */
    .modal.lv-app-modal .note-table-popover { box-shadow: 0 4px 16px rgba(15, 23, 42, .18); border-radius: 10px; max-width: 100%; z-index: 11; }
    .modal.lv-app-modal .note-table-popover .note-popover-arrow { display: none; }
    .modal.lv-app-modal .note-table-popover .popover-content,
    .modal.lv-app-modal .note-table-popover .note-popover-content { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; }
    .modal.lv-app-modal .note-table-popover .note-btn-group { display: flex; margin: 0; }
    .modal.lv-app-modal .note-table-popover .note-btn { height: 36px; min-width: 36px; }
    .modal.lv-app-modal .note-editable { font-size: 15px; }
    .modal.lv-app-modal .note-statusbar { border-radius: 0 0 12px 12px; }
    .modal.lv-app-modal .modal-footer { border-top: 1px solid #edf1f6; flex-shrink: 0; flex-wrap: nowrap; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
    .modal.lv-app-modal .modal-footer .btn { border-radius: 12px; flex: 1 1 0; height: 44px; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .modal.lv-app-modal.fade .modal-dialog { transition: none; }
}