/* ==========================================================================
   TASK POPUP (#cardModal) - MOBILE & TABLET LAYOUT
   --------------------------------------------------------------------------
   Loaded after the theme and custom.css. Every rule sits inside a max-width
   media query, so desktop (992px and wider) is completely unaffected.

   Fixes:
     - popup fills the phone screen (no grey margins, more room for content)
     - close button stays reachable while scrolling
     - long titles, file names, URLs and descriptions wrap instead of
       running off the right-hand edge
     - meta boxes (Task ID / Created by / Dates / Status) stack one per row
     - comments scroll with the page instead of in a small inner box
     - inputs are 16px so iPhone doesn't zoom in when you tap into them
   ========================================================================== */

/* ---------- tablets and phones: panels are stacked (below 992px) ---------- */
@media (max-width: 991.98px) {

    /* one scroll area: the popup itself, not a box inside it */
    .card-modal #card-comments-container {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
    .card-modal .tm186-right { height: auto; }
    .card-modal .tm186-tab-pane { overflow: visible; }

    /* the right panel's extra right padding only exists to clear the close
       button in the desktop side-by-side layout */
    .card-modal .tm186-right { padding-right: 4px; }

    /* stacked panels: square off the corners where they meet */
    .card-modal .card-left-panel { border-radius: 5px 5px 0 0; }
    .card-modal .card-right-panel { border-radius: 0 0 5px 5px; padding-bottom: 20px; }

    /* long unbroken text (titles, file names, pasted links) wraps */
    .card-modal .tm186-title,
    .card-modal .tm186-breadcrumb,
    .card-modal .tm186-meta-value,
    .card-modal .card-description .x-content,
    .card-modal .comment-text,
    .card-modal .comment-text .x-text,
    .card-modal .file-attachment .x-name,
    .card-modal .tm186-activity-text,
    .card-modal .tm186-activity-detail {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* flex/grid children may shrink below their content width */
    .card-modal .tm186-meta-box,
    .card-modal .tm186-meta-value,
    .card-modal .comment-text,
    .card-modal .file-attachment .x-details,
    .card-modal .tm186-activity-row > div:last-child {
        min-width: 0;
    }

    /* file rows: the desktop rule (min-width: fit-content) forces long file
       names past the edge */
    .card-modal .tm186-files-embed .file-attachment .x-details {
        min-width: 0 !important;
        flex: 1 1 auto;
    }

    /* rich-text description: images, tables and code stay inside the popup */
    .card-modal .card-description .x-content img,
    .card-modal .comment-text img {
        max-width: 100% !important;
        height: auto !important;
    }
    .card-modal .card-description .x-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* the table scrolls sideways instead, so keep words whole inside cells */
    .card-modal .card-description .x-content table td,
    .card-modal .card-description .x-content table th {
        overflow-wrap: normal;
        word-break: normal;
    }
    .card-modal .card-description .x-content pre {
        white-space: pre-wrap;
    }
    .card-modal .card-description .x-content iframe,
    .card-modal .card-description .x-content video {
        max-width: 100%;
    }

    /* deliverable / revisions popups: columns go full width */
    .card-modal .tm186-popup-col {
        min-width: 0;
        flex: 1 1 100%;
    }
}

/* ---------- phones (below 576px) ---------- */
@media (max-width: 575.98px) {

    /* popup fills the screen */
    .card-modal #cardModalContainer.modal-dialog {
        max-width: 100% !important;
        width: 100%;
        margin: 0;
    }
    .card-modal .modal-content {
        border: 0;
        border-radius: 0;
        min-height: 100vh;
    }
    .card-modal .card-left-panel,
    .card-modal .card-right-panel {
        border-radius: 0;
    }

    /* Bootstrap leaves a transform on the open dialog, which would pin the
       close button to the dialog instead of the screen. Dropping it on phones
       only loses the small slide-in animation. */
    .card-modal.show .modal-dialog { transform: none !important; }

    /* close button: always visible while scrolling, easy to tap */
    .card-modal #card-modal-close {
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 8px);
        right: 8px;
        z-index: 1060;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .95);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        padding: 0;
    }

    /* tighter padding = more room for content */
    .card-modal .card-left-panel { padding: 16px 14px; padding-top: calc(env(safe-area-inset-top, 0px) + 16px); }
    .card-modal .card-right-panel { padding: 16px 14px 24px; }
    .card-modal .tm186-left { padding: 0; }
    .card-modal .tm186-right { padding: 0; }

    /* top bar: leave room for the close button on the first row */
    .card-modal .tm186-topbar { padding-right: 44px; gap: 10px; margin-bottom: 16px; }
    .card-modal .tm186-assigned { margin-left: 0; }

    /* title */
    .card-modal .tm186-title { font-size: 21px; }

    /* meta boxes: one per row */
    .card-modal .tm186-meta-grid {
        grid-template-columns: 1fr;
        max-width: none;
        gap: 8px;
        margin: 14px 0 18px;
    }
    .card-modal .tm186-meta-box { padding: 9px 12px; flex-wrap: wrap; }
    .card-modal .tm186-popup-panel { padding: 12px; gap: 12px; margin-top: 0; }

    .card-modal .tm186-section { margin-top: 18px; padding-top: 14px; }

    /* right panel tabs */
    .card-modal .tm186-toprow { gap: 8px; }
    .card-modal .tm186-tab { font-size: 13px; padding: 6px 0 10px; }
    .card-modal .tm186-chatlink { padding: 4px 10px; font-size: 12px; }

    /* comments: smaller avatar, tighter cards */
    .card-modal .tm186-comments .comment-row { padding: 10px; margin-bottom: 10px; }
    .card-modal .tm186-comments .comment-avatar { padding: 0 8px 0 0 !important; }
    .card-modal .tm186-comments .comment-avatar img { width: 32px; height: 32px; }

    /* files: smaller preview so the details have room */
    .card-modal .tm186-files-embed .x-content { padding-left: 0; }
    .card-modal .tm186-files-embed .file-attachment .x-details { margin-left: 8px; }
    .card-modal .file-attachment iframe { width: 80px !important; height: 56px !important; }

    /* activity */
    .card-modal .tm186-activity-title { font-size: 18px; }

    /* iPhone zooms the page when a field under 16px is focused, and stays
       zoomed afterwards - which is what makes the layout look "broken" */
    .card-modal input.form-control,
    .card-modal textarea,
    .card-modal textarea.form-control,
    .card-modal select,
    .card-modal select.form-control,
    .card-popover input,
    .card-popover textarea,
    .card-popover select {
        font-size: 16px !important;
    }
}