/* Shared responsive support layout; desktop styling stays with each page. */
.support-mobile-layout,
.support-mobile-layout *,
.support-mobile-dialog * { box-sizing: border-box; }
.support-mobile-layout :is(.panel, .panel-body, .support-ticket-layout > *, .msg-bubble) { min-width: 0; }
.support-mobile-layout :is(.msg-body, .att-item, .info-row, .ticket-subj, .code-block) { overflow-wrap: anywhere; }
.support-mobile-layout :is(img, video) { max-width: 100%; }
.support-mobile-layout pre { max-width: 100%; overflow-x: auto; }
.page-wrap.support-mobile-layout { width: auto; }
.support-mobile-layout :is(.panel-body, .stat-card, .notify-check-item) { overflow-wrap: anywhere; min-width: 0; }

@media (max-width: 1024px) {
    .support-mobile-layout .admin-nav { display: flex; flex-wrap: wrap; gap: 8px; }
    .support-mobile-layout .admin-nav-title { flex-basis: 100%; }
    .support-mobile-layout .support-ticket-layout,
    .support-mobile-layout .layout-2col { grid-template-columns: minmax(0, 1fr) !important; }
    .support-mobile-layout .filter-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .support-mobile-layout .filter-bar :is(input, select) { width: 100% !important; min-width: 0; }
    .support-mobile-layout .filter-bar input[name="q"] { grid-column: 1 / -1; }
    .support-mobile-layout .results-count { grid-column: 1 / -1; margin-left: 0; white-space: normal; }
    .support-mobile-layout .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .page-wrap.support-mobile-layout,
    .sidebar:hover ~ .page-wrap.support-mobile-layout {
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
        padding: 18px 12px calc(32px + env(safe-area-inset-bottom)) !important;
    }
    .support-mobile-layout :is(.panel-head, .panel-body) { padding: 16px !important; }
    .support-mobile-layout .panel-head { flex-wrap: wrap; gap: 12px; }
    .support-mobile-layout :is(h1, h2, h3, a, .key-row, .cat-row, .art-row) { overflow-wrap: anywhere; }
    .support-mobile-layout :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
        font-size: 16px !important;
        min-width: 0;
        max-width: 100%;
    }
    .support-mobile-layout :is(.btn, .btn-submit, .btn-ghost, .nav-link-admin, .tab-pill, .page-btn, .msg-edit-btn, .msg-delete-btn) {
        min-height: 44px;
        white-space: normal;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .support-mobile-layout :is(.form-control, .form-select) { min-height: 44px; }
    .support-mobile-layout .admin-nav a[style] { margin-left: 0 !important; }
    .support-mobile-layout .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .support-mobile-layout .tab-pills { flex-wrap: wrap; gap: 8px; }
    .support-mobile-layout .pagination { flex-wrap: wrap; gap: 8px; }
    .support-mobile-layout :is(.cat-row, .key-row, .art-row, .notify-check-item) { flex-wrap: wrap; gap: 10px; }
    .support-mobile-layout :is(.cat-row, .key-row, .art-row) > div { min-width: 0; }
    .support-mobile-layout .panel-body > form[style*="display:flex"] { flex-wrap: wrap; }
    .support-mobile-layout .panel-body > form[style*="display:flex"] > div { flex-basis: 100% !important; }
    .support-mobile-layout form > div[style*="grid-template-columns"],
    .support-mobile-layout .portal-link-tools { grid-template-columns: minmax(0, 1fr) !important; }
    .support-mobile-layout .msg-wrap { gap: 8px; }
    .support-mobile-layout .msg-avatar { width: 28px !important; height: 28px !important; font-size: 11px; }
    .support-mobile-layout .msg-bubble { max-width: calc(100% - 36px) !important; padding: 12px !important; }
    .support-mobile-layout .msg-bubble.system-msg { max-width: 100% !important; }
    .support-mobile-layout .msg-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    .support-mobile-layout .att-item { flex-wrap: wrap; }
    .support-mobile-layout .ticket-viewed-chip { max-width: 100%; white-space: normal; flex-wrap: wrap; }
    .support-mobile-layout .notify-checklist-inline .notify-check-item { flex: 1 1 100%; max-width: 100%; }
    .support-mobile-layout #replyForm > button { width: 100%; }
    .support-mobile-layout .info-row { flex-wrap: wrap; gap: 8px; }
    .support-mobile-layout #newTicketPanel {
        width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }
    .support-mobile-dialog { padding: 12px; }
    .support-mobile-dialog .modal-box { width: 100%; max-height: calc(100dvh - 24px); overflow-y: auto; padding: 18px; }
    .support-mobile-dialog :is(input, select) { font-size: 16px; }
    .support-mobile-dialog .btn { min-height: 44px; }

    /* Keep every queue field and action visible without sideways scrolling. */
    .support-mobile-layout .support-queue-table { display: block; }
    .support-mobile-layout .support-queue-table thead {
        position: absolute; width: 1px; height: 1px; padding: 0;
        overflow: hidden; clip-path: inset(50%);
    }
    .support-mobile-layout .support-queue-table tbody { display: grid; gap: 12px; padding: 12px; }
    .support-mobile-layout .support-queue-table tr {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        border: 1px solid rgba(148,163,184,.24); border-radius: 12px; padding: 8px;
    }
    .support-mobile-layout .support-queue-table td {
        display: block; padding: 8px; white-space: normal !important;
        text-align: left !important; overflow-wrap: anywhere;
    }
    .support-mobile-layout .support-queue-table td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: 4px;
        font-size: 11px; font-weight: 700; color: #aab8cc;
    }
    .support-mobile-layout .support-queue-table td:is([data-label="Ref"], [data-label="Subject"], [data-label="Actions"], [colspan]) { grid-column: 1 / -1; }
    .support-mobile-layout .support-queue-table td[data-label="Actions"] .btn { width: 100%; }
    .support-mobile-layout .support-queue-table .ticket-link { white-space: normal; }
}