/* TGM Support — Client / Customer-portal mobile overrides (v2)
   Fixes from v1:
   - Removed overflow-x:hidden (was clipping options off-screen)
   - Nav tabs scroll horizontally instead of wrapping/clipping — keeps every option
   - Content respects viewport (word-wrap on headings, fluid images)
   - 2-column KB grid stacks to full width on phones
   - Form tables stack label-above-input on phones
*/

/* Universal safeguards — safe on desktop */
*, *::before, *::after { box-sizing: border-box; }
img, iframe, video, embed, object { max-width: 100%; height: auto; }

/* ─── Tablet + Phone (<=1024px) ─────────────────────────────── */
@media (max-width: 1024px) {
    /* Fluid outer containers */
    #container, #content, #header, #nav, #main, #footer, .container {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    /* KB listings use left/right <td> columns at fixed widths — stack them */
    #main > table, #content > table.list, .featured, .kb-featured {
        display: block !important;
        width: 100% !important;
    }
    #main > table > tbody, #content > table.list > tbody {
        display: block !important;
    }
    #main > table > tbody > tr, #content > table.list > tbody > tr {
        display: block !important;
    }
    #main > table > tbody > tr > td, #content > table.list > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        padding: 6px 0 !important;
    }
}

/* ─── Phone (<=768px) ───────────────────────────────────────── */
@media (max-width: 768px) {
    body { min-width: 0 !important; }

    #container, #content, #header, #nav, #main, #footer, .container {
        margin: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Headings must wrap, never overflow */
    h1, h2, h3, h4, h5 {
        word-wrap: break-word !important;
        overflow-wrap: anywhere !important;
        line-height: 1.25 !important;
    }
    h1 { font-size: 22px !important; }
    h2 { font-size: 19px !important; }
    h3 { font-size: 17px !important; }

    /* Top brand bar — stack */
    #header { height: auto !important; padding: 10px !important; }
    #header h1 { font-size: 18px !important; }
    #header #welcome, #header .pull-right, #header > div {
        float: none !important;
        display: block !important;
        margin-top: 6px !important;
        text-align: left !important;
    }
    #header img { max-height: 40px !important; width: auto !important; }

    /* Nav tabs: #nav IS the <ul>. Grid into exactly 2 per row so EVERY
       option is visible without the user having to swipe. */
    #nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        padding: 8px 10px !important;
        margin: 0 !important;
        height: auto !important;
        overflow: visible !important;
        list-style: none !important;
        white-space: normal !important;
        background: transparent !important;
        border: 0 !important;
    }
    #nav li {
        display: block !important;
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        list-style: none !important;
    }
    #nav li a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 12px 8px !important;
        font-size: 13px !important;
        white-space: normal !important;
        text-align: center !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 10px !important;
        background: #f9fafb !important;
        color: #0b4f6c !important;
        text-decoration: none !important;
        line-height: 1.2 !important;
        min-height: 48px !important;
    }
    #nav li a.active { background: #0b4f6c !important; color: #fff !important; border-color: #0b4f6c !important; }
    #nav li a:active { background: #e0f2f7 !important; }

    /* Landing page layout:
       Desktop: sidebar floats right.
       Mobile: stack as a flex column with ACTION BUTTONS pinned on top. */
    #landing_page {
        display: flex !important;
        flex-direction: column !important;
    }
    #landing_page .sidebar,
    #landing_page .sidebar.pull-right {
        order: 1 !important;                 /* buttons go FIRST */
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px 0 !important;
    }
    #landing_page .main-content {
        order: 2 !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    .front-page-button, .flush-right {
        float: none !important;
        width: 100% !important;
        text-align: left !important;
    }
    .front-page-button p { margin: 6px 0 !important; }
    .front-page-button a.button,
    a.blue.button, a.green.button,
    a.action-button, .big_button, input[type="submit"].big {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 6px 0 !important;
        padding: 14px !important;
        font-size: 15px !important;
        text-align: center !important;
        border-radius: 8px !important;
    }

    /* KB search form row */
    .search-form form { display: flex !important; gap: 6px !important; }
    .search-form input.search {
        flex: 1 1 auto !important;
        width: auto !important;
    }
    .search-form button { flex: 0 0 auto !important; }

    /* Form tables: stack label and input */
    form table, table.form, .form-table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    form table > tbody, table.form > tbody { display: block !important; }
    form table > tbody > tr, table.form > tbody > tr {
        display: block !important;
        margin-bottom: 8px !important;
    }
    form table > tbody > tr > td, table.form > tbody > tr > td,
    form table > tbody > tr > th, table.form > tbody > tr > th {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 4px 0 !important;
        text-align: left !important;
    }

    /* Kill osTicket's hardcoded widths on 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;  /* prevents iOS auto-zoom */
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    textarea { min-height: 120px !important; }
    /* Allow phone ext / country-code shorts to stay small */
    input[name*="ext"], input[name*="Ext"] { width: 80px !important; }

    /* Buttons — finger-friendly */
    .buttons, .form-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .buttons .button, input[type="submit"], input[type="button"],
    button, button.button, a.button {
        min-height: 44px !important;
        padding: 10px 14px !important;
        font-size: 15px !important;
    }

    /* Images and thread content stay inside their containers */
    .thread-body { word-break: break-word; overflow-wrap: anywhere; }
    .thread-body table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Login card */
    #login-box, #content > form, .login-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
        margin: 0 !important;
    }

    /* Hide pure-decorative hero banner on narrow screens if present */
    #header-photo { display: none !important; }

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

/* ─── Small phone (<=420px) ─────────────────────────────────── */
@media (max-width: 420px) {
    #nav a { padding: 9px 12px !important; font-size: 13px !important; }
    #header h1 { font-size: 17px !important; }
}