/* TGM Support — Staff / Agent (SCP) mobile overrides (v2)
   Fixes from v1:
   - Removed overflow-x:hidden (was clipping options off-screen)
   - Nav/sub-nav tabs scroll horizontally so NO option is lost
   - Toolbar action icons wrap gracefully, never cropped
   - Ticket list rows: labels show on the LEFT (left-aligned), content on the right
   - Headings wrap, images fluid, form tables stack
*/

*, *::before, *::after { box-sizing: border-box; }
img, iframe, video, embed, object { max-width: 100%; height: auto; }

/* ─── Tablet + Phone (<=1024px) ─────────────────────────────── */
@media (max-width: 1024px) {
    body { min-width: 0 !important; }
    #container, #content, #main, #main-content,
    #header, #nav, #footer, .container {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #content { padding: 10px !important; }

    /* Left sidebar / filter stacks above content on tablet */
    #filter-nav, #sidebar {
        float: none !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    #main-content { margin-left: 0 !important; }
}

/* ─── Phone (<=768px) ──────────────────────────────────────── */
@media (max-width: 768px) {

    /* Headings must wrap */
    h1, h2, h3, h4, h5 {
        word-wrap: break-word !important;
        overflow-wrap: anywhere !important;
        line-height: 1.25 !important;
    }
    h2.ticket-number { font-size: 20px !important; }

    /* Top welcome/profile bar — stack and center */
    #header, #userNav, .staff-top {
        padding: 8px !important;
        text-align: center !important;
        height: auto !important;
    }
    #header .pull-right, #header .pull-left,
    #header #user-info, #header > div {
        float: none !important;
        display: block !important;
        text-align: center !important;
        margin: 4px 0 !important;
    }
    #header img.brand, #header .brand img { max-height: 36px !important; width: auto !important; }

    /* ── MAIN NAV (Dashboard / Users / Tasks / Tickets) ──────
       Both #nav and #sub_nav ARE <ul>s. Grid into 2 per row. */
    #nav, #sub_nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 4px 6px !important;
        margin: 0 !important;
        height: auto !important;
        overflow: visible !important;
        list-style: none !important;
        white-space: normal !important;
        border: 0 !important;
    }
    #nav > li, #sub_nav > li {
        display: block !important;
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #nav > li > a, #sub_nav > li > a {
        padding: 10px 8px !important;
        font-size: 13px !important;
        white-space: normal !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        line-height: 1.2 !important;
        min-height: 44px !important;
    }

    /* ── Ticket action-icons toolbar (reply, print, assign, gear, flag) ── */
    .ticket-actions, .thread-actions, .pull-right.flush-right,
    #tactions, .tip_shadow, .action-btn-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        float: none !important;
        width: 100% !important;
        margin-bottom: 8px !important;
    }
    .ticket-actions > *, #tactions > * {
        flex: 0 0 auto !important;
    }
    .ticket-actions .action-button, #tactions a.action-button,
    .action-button {
        min-height: 40px !important;
        padding: 8px 10px !important;
        font-size: 14px !important;
    }

    /* ── Ticket detail info table (Status / Priority / Due Date …) ── */
    .ticket-details, .ticket-info, .infoTable, table.custom-info {
        width: 100% !important;
        display: block !important;
    }
    .ticket-details tbody, .infoTable tbody { display: block !important; }
    .ticket-details tr, .infoTable tr {
        display: grid !important;
        grid-template-columns: 110px 1fr !important;
        gap: 8px !important;
        padding: 4px 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    .ticket-details th, .infoTable th {
        text-align: left !important;
        background: transparent !important;
        padding: 6px 4px !important;
        font-weight: 600 !important;
    }
    .ticket-details td, .infoTable td {
        padding: 6px 4px !important;
        text-align: left !important;
        border: 0 !important;
        word-break: break-word !important;
    }

    /* ── Ticket LIST (queue) — each row becomes a card, labels left ── */
    #ticket_table, table.list {
        display: block !important;
        width: 100% !important;
        border: 0 !important;
    }
    #ticket_table thead, table.list thead { display: none !important; }
    #ticket_table tbody, table.list tbody { display: block !important; }
    #ticket_table tbody tr, table.list tbody tr {
        display: block !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 8px !important;
        background: #fff !important;
        margin: 0 0 10px 0 !important;
        padding: 10px !important;
    }
    #ticket_table tbody td, table.list tbody td {
        display: block !important;
        text-align: left !important;        /* ← was right-aligned */
        padding: 4px 0 !important;
        border: 0 !important;
        font-size: 14px !important;
        word-break: break-word !important;
    }
    /* Give the ticket number + subject a bit more presence */
    #ticket_table tbody td a {
        font-weight: 600 !important;
        font-size: 15px !important;
    }
    /* Checkbox cell sits top-right of the card */
    #ticket_table tbody td:first-child {
        display: inline-block !important;
        width: auto !important;
        float: right !important;
        padding: 0 !important;
    }

    /* ── Form inputs ────────────────────────────────────────── */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="search"], input[type="number"], input[type="url"],
    input[type="tel"], select, textarea {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    /* ── Form layout tables stack ───────────────────────────── */
    form table.form, form table.table, form .infoTable,
    .dialog form table, #overlay form table {
        display: block !important;
        width: 100% !important;
    }
    form table.form > tbody, form table.table > tbody { display: block !important; }
    form table.form > tbody > tr, form table.table > tbody > tr {
        display: block !important;
        margin-bottom: 8px !important;
    }
    form table.form > tbody > tr > td,
    form table.form > tbody > tr > th,
    form table.table > tbody > tr > td,
    form table.table > tbody > tr > th {
        display: block !important;
        width: 100% !important;
        padding: 4px 0 !important;
        text-align: left !important;
    }

    /* ── Redactor (reply / internal note editor) ────────────── */
    .redactor-box, .redactor-editor, .redactor-toolbar {
        width: 100% !important;
        max-width: 100% !important;
    }
    .redactor-editor { min-height: 160px !important; font-size: 15px !important; }
    .redactor-toolbar {
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Thread entries ─────────────────────────────────────── */
    .thread-entry { padding: 10px !important; margin: 8px 0 !important; }
    .thread-entry .header, .thread-entry .thread-body {
        font-size: 14px !important; line-height: 1.45 !important;
    }
    .thread-entry .thread-body {
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
    .thread-entry .thread-body table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .thread-entry .avatar { display: none !important; }

    /* ── Buttons ────────────────────────────────────────────── */
    .buttons, .ticket-actions, .thread-actions, .reply-actions,
    .form-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .buttons .button, .ticket-actions .button,
    input[type="submit"].button, button.button, .form-actions .button {
        min-height: 44px !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
    }

    /* ── Modals / dialogs ───────────────────────────────────── */
    #overlay > *, .dialog, .popup-dialog {
        width: 96vw !important;
        max-width: 96vw !important;
        left: 2vw !important;
        margin-left: 0 !important;
    }

    /* ── Footer ─────────────────────────────────────────────── */
    #footer { padding: 10px !important; text-align: center !important; }
    #footer > * { float: none !important; display: block !important; }

    /* ── Welcome bar / user profile strip at top ────────────── */
    #userNav, .userNav, .st-topnav {
        text-align: center !important;
        padding: 6px 10px !important;
        font-size: 13px !important;
    }
}

/* ─── Small phone (<=420px) ──────────────────────────────── */
@media (max-width: 420px) {
    #nav a, #sub_nav a { padding: 9px 11px !important; font-size: 13px !important; }
    .ticket-details tr, .infoTable tr {
        grid-template-columns: 95px 1fr !important;
    }
}