/* Client portal — mobile supplements (login-branding / frontend) */

body.lb-client-modern #footer #poweredBy {
    display: none;
}

@media (max-width: 768px) {
    body.lb-client-modern #container {
        padding: 0 10px 12px;
    }

    body.lb-client-modern #footer {
        width: calc(100% - 20px);
    }

    body.lb-client-modern #ticketInfo > tbody > tr {
        display: block;
    }

    body.lb-client-modern #ticketInfo .infoTable th,
    body.lb-client-modern #ticketInfo .custom-data th {
        display: block;
        width: auto !important;
    }

    body.lb-client-modern #ticketInfo .infoTable td,
    body.lb-client-modern #ticketInfo .custom-data td {
        display: block;
    }

    body.lb-client-modern .thread-body iframe,
    body.lb-client-modern .thread-body video,
    body.lb-client-modern .thread-body table {
        max-width: 100% !important;
        height: auto !important;
    }

    body.lb-client-modern .thread-body pre {
        overflow-x: auto;
        white-space: pre-wrap;
    }

    body.lb-client-modern h1 form,
    body.lb-client-modern h1 .pull-right.states {
        float: none !important;
        display: block;
        width: 100%;
    }

    body.lb-client-modern h1 input[type="text"],
    body.lb-client-modern h1 select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin-bottom: 6px;
        padding: 10px 12px;
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }

    body.lb-client-modern .uploads,
    body.lb-client-modern .filedrop,
    body.lb-client-modern .dropzone {
        max-width: 100%;
    }

    html body.lb-client-modern .filedrop .files .file {
        display: flex !important;
        height: auto !important;
        min-height: 44px;
        overflow: hidden;
    }

    html body.lb-client-modern .filedrop .files .file .preview {
        float: none !important;
        max-height: 40px;
    }

    html body.lb-client-modern .filedrop .files .file .filename a,
    html body.lb-client-modern .filedrop .files .file .filename > span:not(.filesize) {
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
    }

    body.lb-client-modern #ticketForm .captchaRow input {
        width: auto;
        max-width: 8em;
        display: inline-block;
    }

    /* Login form — stack side-by-side columns */
    body.lb-client-modern form#clientLogin > div[style*="table-row"] {
        display: block !important;
    }

    body.lb-client-modern form#clientLogin div[style*="table-cell"] {
        display: block !important;
        padding: 0 !important;
    }

    /* Ticket list — stack search toolbar */
    body.lb-client-modern .search.well {
        padding: 14px;
    }

    body.lb-client-modern #ticketSearchForm {
        flex-direction: column;
        align-items: stretch;
    }

    body.lb-client-modern #ticketSearchForm input[type="text"],
    body.lb-client-modern #ticketSearchForm input[type="submit"],
    body.lb-client-modern #ticketSearchForm select[name="topic_id"] {
        width: 100%;
        flex: 1 1 auto;
    }

    body.lb-client-modern #ticketSearchForm .pull-right {
        flex-direction: column;
        align-items: stretch;
        margin-top: 0;
    }

    body.lb-client-modern #content > h1[style*="margin"] {
        flex-direction: column;
        align-items: flex-start;
    }

    body.lb-client-modern #ticketTable tbody tr:only-child td[colspan="5"] {
        display: block;
        padding: 2rem 1rem;
    }

    body.lb-client-modern #ticketTable tbody tr:only-child td[colspan="5"]::before {
        display: none;
    }
}

/* Profile/account: last-wins so theme.css height:20px cannot collapse rows on iPhone */
@media (max-width: 768px) {
    html body.lb-client-modern form[action*="profile.php"] table.padded,
    html body.lb-client-modern form[action*="account.php"] table.padded {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    html body.lb-client-modern form[action*="profile.php"] table.padded > tbody,
    html body.lb-client-modern form[action*="account.php"] table.padded > tbody {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    html body.lb-client-modern form[action*="profile.php"] table.padded tr,
    html body.lb-client-modern form[action*="account.php"] table.padded tr {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        float: none !important;
        position: static !important;
        overflow: visible !important;
        padding: 14px 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        box-sizing: border-box !important;
    }

    html body.lb-client-modern form[action*="profile.php"] table.padded tr:has(h3),
    html body.lb-client-modern form[action*="profile.php"] table.padded tr:has(.form-header),
    html body.lb-client-modern form[action*="account.php"] table.padded tr:has(h3),
    html body.lb-client-modern form[action*="account.php"] table.padded tr:has(.form-header) {
        border-bottom: none !important;
        padding-bottom: 4px !important;
        padding-top: 18px !important;
    }

    html body.lb-client-modern form[action*="profile.php"] table.padded hr,
    html body.lb-client-modern form[action*="account.php"] table.padded hr {
        display: none !important;
    }

    html body.lb-client-modern form[action*="profile.php"] table.padded td,
    html body.lb-client-modern form[action*="profile.php"] table.padded th,
    html body.lb-client-modern form[action*="account.php"] table.padded td,
    html body.lb-client-modern form[action*="account.php"] table.padded th {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        float: none !important;
        position: static !important;
        overflow: visible !important;
        padding: 4px 0 !important;
        box-sizing: border-box !important;
    }

    html body.lb-client-modern form[action*="profile.php"] table.padded label,
    html body.lb-client-modern form[action*="account.php"] table.padded label {
        display: block !important;
        float: none !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
    }

    html body.lb-client-modern form[action*="profile.php"] table.padded label > br,
    html body.lb-client-modern form[action*="account.php"] table.padded label > br {
        display: none !important;
    }

    html body.lb-client-modern form[action*="profile.php"] table.padded input,
    html body.lb-client-modern form[action*="profile.php"] table.padded select,
    html body.lb-client-modern form[action*="profile.php"] table.padded textarea,
    html body.lb-client-modern form[action*="account.php"] table.padded input,
    html body.lb-client-modern form[action*="account.php"] table.padded select,
    html body.lb-client-modern form[action*="account.php"] table.padded textarea {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        height: auto !important;
        min-height: 44px;
        box-sizing: border-box !important;
    }

    html body.lb-client-modern form[action*="profile.php"] .select2-container,
    html body.lb-client-modern form[action*="account.php"] .select2-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    html body.lb-client-modern form[action*="profile.php"] .action-button,
    html body.lb-client-modern form[action*="account.php"] .action-button {
        width: 100% !important;
        justify-content: center;
        box-sizing: border-box;
        margin-top: 8px;
    }
}

@media (max-width: 480px) {
    body.lb-client-modern h1 {
        font-size: 1.2em;
    }
}