/* =========================================================================
   Contact Submissions page — mobile makeover.
   Same pattern as Bookings / Email Logs:
     - Title hidden
     - Fixed top search + funnel bar; filters + Reset/Refresh moved into
       a right-slide drawer on demand
     - Compact 42px stat cards (2×2)
     - .submission-card rows tightened
     - View Submission modal full-viewport with icon-only sticky action bar
   ========================================================================= */

/* Mobile-only chrome hidden by default */
#csMobileHeader { display: none; }

/* Right-side filter drawer */
.cs-drawer-wrap { position: fixed; inset: 0; z-index: 10000; }
.cs-drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background 0.2s; }
.cs-drawer-wrap.is-open .cs-drawer-backdrop { background: rgba(0,0,0,0.35); }
.cs-drawer {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: 88%; max-width: 380px;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
    transform: translateX(100%);
    transition: transform 0.22s ease-out;
    display: flex; flex-direction: column;
}
.cs-drawer-wrap.is-open .cs-drawer { transform: translateX(0); }
.cs-drawer-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 700; font-size: 1.05rem;
    color: #111827;
}
.cs-drawer-close {
    border: none; background: transparent; font-size: 1.5rem;
    color: #6b7280; cursor: pointer; line-height: 1;
}
.cs-drawer-body {
    padding: 1rem 1.15rem;
    overflow-y: auto; flex: 1;
    display: flex; flex-direction: column;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.cs-drawer-body > .form-group {
    display: block !important;
    width: 100% !important;
    margin: 0 0 14px 0 !important;
}
.cs-drawer-body > .form-group > label {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-bottom: 6px !important;
    display: block !important;
}
.cs-drawer-body select,
.cs-drawer-body input {
    width: 100% !important;
    min-height: 42px !important;
    padding: 8px 12px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
}
/* Buttons row (Reset + Refresh) — sticky at bottom, full-width */
.cs-drawer-body > .form-group:last-child {
    margin-top: auto !important;
    padding-top: 12px !important;
    border-top: 1px solid #f3f4f6;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
}
.cs-drawer-body > .form-group:last-child button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 42px !important;
    border-radius: 10px !important;
    background: #f3f4f6 !important;
    color: #374151 !important;
    border: 1px solid #e5e7eb !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

@media (max-width: 767px) {

    /* -----------------------------------------------------------------
       Page shell — leave room for fixed top search bar
       ----------------------------------------------------------------- */
    #contact-submissions {
        padding-top: 56px !important;
        padding-bottom: 90px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    /* Hide whole desktop filter card */
    #contact-submissions > .modern-content-card.u-mb-4 {
        display: none !important;
    }

    /* -----------------------------------------------------------------
       Fixed mobile search + funnel bar
       ----------------------------------------------------------------- */
    #csMobileHeader {
        display: flex !important;
        gap: 8px;
        position: fixed !important;
        top: 56px; left: 0; right: 0;
        z-index: 990;
        padding: 8px 12px;
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
    }
    #csMobileHeader #csMobileSearch {
        flex: 1;
        height: 40px;
        padding: 8px 12px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 0.9rem;
        background: #fff;
        color: #111827;
        outline: none;
    }
    #csMobileHeader #csMobileSearch:focus { border-color: #6366f1; }
    #csMobileHeader .cs-filter-btn {
        flex-shrink: 0;
        width: 40px; height: 40px;
        border-radius: 8px;
        border: 1px solid #d1d5db;
        background: #fff;
        color: #4b5563;
        display: inline-flex;
        align-items: center; justify-content: center;
        cursor: pointer;
        position: relative;
    }
    #csMobileHeader .cs-filter-btn[data-has-filters="1"]::after {
        content: "";
        position: absolute; top: 6px; right: 6px;
        width: 8px; height: 8px;
        border-radius: 50%;
        background: #6366f1;
    }

    /* -----------------------------------------------------------------
       Stats grid — 2×2 compact
       ----------------------------------------------------------------- */
    #contact-submissions .stats-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin: 0 0 10px 0 !important;
    }
    /* Stat-card interior sizing/layout lives in shared css/stat-cards-mobile.css */

    /* -----------------------------------------------------------------
       Messages section — kill wrapper card, submission cards float free
       ----------------------------------------------------------------- */
    #contact-submissions > .modern-content-card:last-of-type {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
    }
    #contact-submissions .modern-section-header {
        padding: 4px 4px 8px !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
    }
    #contact-submissions .modern-section-header h3 {
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: #111827 !important;
        margin: 0 !important;
    }
    #contact-submissions .submissions-list {
        gap: 8px !important;
        padding: 0 !important;
    }
    #contact-submissions .submission-card {
        padding: 12px !important;
        border-radius: 10px !important;
        margin: 0 !important;
    }
    #contact-submissions .submission-card.unread {
        border-left-width: 3px !important;
    }
    #contact-submissions .submission-card:hover {
        box-shadow: none !important;
        border-color: #e5e7eb !important;
    }
    #contact-submissions .submission-header {
        margin-bottom: 6px !important;
        flex-direction: column !important;
        gap: 4px !important;
    }
    #contact-submissions .submission-name {
        font-size: 0.95rem !important;
    }
    #contact-submissions .submission-email,
    #contact-submissions .submission-date {
        font-size: 0.75rem !important;
    }
    #contact-submissions .submission-subject {
        font-size: 0.9rem !important;
        margin-bottom: 4px !important;
    }
    #contact-submissions .submission-message {
        font-size: 0.85rem !important;
    }
    #contact-submissions .submission-badges {
        margin-top: 8px !important;
    }
    #contact-submissions .submission-badge {
        font-size: 0.65rem !important;
        padding: 2px 8px !important;
    }

    /* -----------------------------------------------------------------
       View Submission modal — full-viewport frame, icon-only action bar
       ----------------------------------------------------------------- */
    #viewSubmissionModal.modal {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }
    #viewSubmissionModal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background: #fff !important;
    }
    #viewSubmissionModal .modal-header {
        padding: 14px 20px !important;
        background: #fff !important;
        color: #111827 !important;
        border-bottom: 1px solid #f3f4f6 !important;
        flex-shrink: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    #viewSubmissionModal .modal-header h2 {
        color: #111827 !important;
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
    }
    #viewSubmissionModal .modal-close {
        background: #f3f4f6 !important;
        color: #6b7280 !important;
        border: none !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.15rem !important;
    }
    #viewSubmissionModal .modal-body {
        padding: 14px !important;
        background: #f9fafb !important;
        overflow-y: auto !important;
        flex: 1 !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        display: flex !important;
        flex-direction: column !important;
    }
    /* Contact info block — force to a single column so name/email/phone/
       date stack cleanly on narrow screens */
    #viewSubmissionModal .modal-body > div[style*="background: #f9fafb"] > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    /* Bigger tap targets on textareas */
    #viewSubmissionModal #adminNotes {
        min-height: 80px !important;
        padding: 10px !important;
        border-radius: 8px !important;
    }
    /* Reply/Mark/Archive/Delete row → icon-only sticky bar */
    #viewSubmissionModal .modal-body > div[style*="display: flex"][style*="gap: 0.5rem"]:not([style*="justify-content"]) {
        margin: auto -14px 0 !important;
        padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
        position: sticky !important;
        bottom: 0 !important;
        background: #fff !important;
        border-top: 1px solid #f3f4f6 !important;
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
        z-index: 5 !important;
    }
    #viewSubmissionModal .modal-body > div[style*="display: flex"][style*="gap: 0.5rem"]:not([style*="justify-content"]) > .btn,
    #viewSubmissionModal .modal-body > div[style*="display: flex"][style*="gap: 0.5rem"]:not([style*="justify-content"]) > a {
        margin: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        height: 42px !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;
        overflow: hidden !important;
        text-decoration: none !important;
    }
    #viewSubmissionModal .modal-body > div[style*="display: flex"][style*="gap: 0.5rem"]:not([style*="justify-content"]) span {
        display: none !important;
    }
    #viewSubmissionModal .modal-body > div[style*="display: flex"][style*="gap: 0.5rem"]:not([style*="justify-content"]) svg {
        width: 20px !important;
        height: 20px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    /* Colour variants */
    #viewSubmissionModal .modal-body > div[style*="display: flex"][style*="gap: 0.5rem"]:not([style*="justify-content"]) > .btn.btn-primary,
    #viewSubmissionModal .modal-body > div[style*="display: flex"][style*="gap: 0.5rem"]:not([style*="justify-content"]) > a.btn-primary {
        background: linear-gradient(135deg, #667eea, #764ba2) !important;
        color: #fff !important;
        border: none !important;
    }
    #viewSubmissionModal .modal-body > div[style*="display: flex"][style*="gap: 0.5rem"]:not([style*="justify-content"]) > .btn.btn-secondary {
        background: #f3f4f6 !important;
        color: #374151 !important;
        border: 1px solid #e5e7eb !important;
    }
    #viewSubmissionModal .modal-body > div[style*="display: flex"][style*="gap: 0.5rem"]:not([style*="justify-content"]) > .btn.btn-danger {
        background: #fee2e2 !important;
        color: #dc2626 !important;
        border: 1px solid #fecaca !important;
        margin-left: 0 !important;
    }
    /* Inject icons for the text-only buttons (Mark as Read + Archive
       + Delete + Close/Save in footer) using CSS mask so they inherit
       currentColor. */
    #viewSubmissionModal #markReadBtn::before,
    #viewSubmissionModal #archiveBtn::before,
    #viewSubmissionModal .modal-body button.btn-danger[onclick*="deleteSubmissionFromModal"]::before {
        content: "";
        display: block;
        width: 20px; height: 20px;
        background-color: currentColor;
    }
    /* Mark Read → envelope-open */
    #viewSubmissionModal #markReadBtn::before {
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'><path fill-rule='evenodd' d='M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z' clip-rule='evenodd'/></svg>") center/contain no-repeat;
                mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'><path fill-rule='evenodd' d='M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z' clip-rule='evenodd'/></svg>") center/contain no-repeat;
    }
    /* Archive → box */
    #viewSubmissionModal #archiveBtn::before {
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'><path fill-rule='evenodd' d='M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5z' clip-rule='evenodd'/></svg>") center/contain no-repeat;
                mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'><path fill-rule='evenodd' d='M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5z' clip-rule='evenodd'/></svg>") center/contain no-repeat;
    }
    /* Delete → trash */
    #viewSubmissionModal .modal-body button.btn-danger[onclick*="deleteSubmissionFromModal"]::before {
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'><path fill-rule='evenodd' d='M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z' clip-rule='evenodd'/></svg>") center/contain no-repeat;
                mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'><path fill-rule='evenodd' d='M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z' clip-rule='evenodd'/></svg>") center/contain no-repeat;
    }

    /* Modal footer (Close + Save Notes) — sticky, 2-button row */
    #viewSubmissionModal .modal-footer {
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
        background: #fff !important;
        border-top: 1px solid #f3f4f6 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }
    #viewSubmissionModal .modal-footer .btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: 50% !important;
        margin: 0 !important;
        height: 44px !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
        padding: 0 8px !important;
    }
    #viewSubmissionModal .modal-footer .btn-secondary {
        background: #f3f4f6 !important;
        color: #374151 !important;
        border: 1px solid #e5e7eb !important;
    }
    #viewSubmissionModal .modal-footer .btn-primary {
        background: linear-gradient(135deg, #667eea, #764ba2) !important;
        color: #fff !important;
        border: none !important;
    }
}