/*
 * TPSD osTicket client portal
 * Complete mobile layout for osTicket 1.18.x
 */

html {
    -webkit-text-size-adjust: 100%;
}

@media screen and (max-width: 760px) {
    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    body {
        font-size: 16px !important;
        line-height: 1.45 !important;
    }

    body *,
    body *::before,
    body *::after {
        box-sizing: border-box !important;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
    }

    #container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow-x: hidden !important;
    }

    /* Header */
    #header {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 18px 15px 14px !important;
        overflow: visible !important;
    }

    #header #logo {
        order: 1 !important;
        position: static !important;
        display: block !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    #header #logo .valign-helper {
        display: none !important;
    }

    #header #logo img {
        position: static !important;
        display: block !important;
        width: auto !important;
        max-width: 300px !important;
        max-height: 100px !important;
        margin: 0 auto !important;
    }

    #header > .pull-right.flush-right {
        order: 2 !important;
        position: static !important;
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        height: auto !important;
        margin: 10px 0 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    #header > .pull-right.flush-right p {
        position: static !important;
        display: block !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.4 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    #header > .pull-right.flush-right p:empty {
        display: none !important;
    }

    #header + .clear {
        display: none !important;
    }

    /* Client navigation */
    ul#nav {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        gap: 4px !important;
        list-style: none !important;
        overflow: visible !important;
        background: #d2d2d2 !important;
    }

    ul#nav > li {
        position: static !important;
        display: block !important;
        flex: 0 0 auto !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        list-style: none !important;
    }

    ul#nav > li > a,
    ul#nav > li > a.active,
    ul#nav > li > a.home,
    ul#nav > li > a.new,
    ul#nav > li > a.status {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        float: none !important;
        width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        border: 0 !important;
        border-radius: 6px !important;
        background-image: none !important;
        font-size: 16px !important;
        font-weight: normal !important;
        line-height: 20px !important;
        text-align: center !important;
        text-indent: 0 !important;
        white-space: normal !important;
    }

    ul#nav > li > a.active {
        background-color: #d8edfb !important;
    }

    /* Main content */
    #content {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 18px !important;
        overflow: visible !important;
    }

    #content h1 {
        max-width: 100% !important;
        margin: 0 0 18px !important;
        font-size: 28px !important;
        line-height: 1.2 !important;
        overflow-wrap: break-word !important;
    }

    #content h2 {
        max-width: 100% !important;
        font-size: 23px !important;
        line-height: 1.25 !important;
    }

    #content h3 {
        max-width: 100% !important;
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    #content p {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-right: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* Home page */
    #landing_page {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #landing_page .main-content {
        order: 1 !important;
        position: static !important;
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 18px !important;
        padding: 0 !important;
    }

    #landing_page .sidebar {
        order: 2 !important;
        position: static !important;
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #landing_page .main-content p {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px !important;
        font-size: 16px !important;
        line-height: 1.55 !important;
    }

    #landing_page #new_ticket,
    #landing_page #check_status,
    #landing_page .sidebar a {
        position: static !important;
        display: flex !important;
        float: none !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 56px !important;
        margin: 10px 0 !important;
        padding: 13px !important;
        font-size: 18px !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    /* Check Ticket Status / access-link page */
    #clientLogin {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 14px !important;
        overflow: visible !important;
        background: #f6f6f6 !important;
        background-image: none !important;
    }

    #clientLogin > div,
    #clientLogin > form,
    #clientLogin form > div {
        position: static !important;
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
        border-left: 0 !important;
        overflow: visible !important;
    }

    #clientLogin > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    #clientLogin .login-box,
    #clientLogin .instructions {
        display: block !important;
        position: static !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 16px !important;
        border: 0 !important;
        background-image: none !important;
        white-space: normal !important;
    }

    #clientLogin .login-box > div {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
    }

    #clientLogin label {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #clientLogin input[type="text"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 6px 0 0 !important;
    }

    #clientLogin .login-box p {
        margin: 6px 0 0 !important;
    }

    #clientLogin .login-box input[type="submit"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    #clientLogin .instructions {
        text-align: center !important;
        line-height: 1.6 !important;
        background: none !important;
    }

    #clientLogin .instructions::before,
    #clientLogin .instructions::after {
        display: none !important;
        content: none !important;
        background: none !important;
    }

    /* General forms */
    form,
    fieldset,
    .form_table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    fieldset {
        margin: 12px 0 !important;
        padding: 12px !important;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    select {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        font-size: 16px !important;
    }

    /*
     * Regular textareas may be sized, but their display property must not be
     * forced. Redactor hides the original osTicket rich-text textarea.
     */
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        font-size: 16px !important;
        resize: vertical !important;
    }

    textarea:not(.richtext):not(.redactor-source) {
        min-height: 140px !important;
    }

    /*
     * Hide the original/source textarea after Redactor creates the visible
     * rich-text editor. These selectors cover osTicket/Redactor variants.
     */
    textarea.richtext,
    textarea.redactor-source,
    .redactor-box > textarea,
    .redactor-box textarea.redactor-source {
        display: none !important;
        min-height: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }

    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    button,
    .button {
        min-height: 42px !important;
        max-width: 100% !important;
        margin: 4px 2px !important;
        padding: 9px 14px !important;
        font-size: 16px !important;
    }

    .form_table {
        table-layout: auto !important;
    }

    .form_table th,
    .form_table td {
        max-width: 100% !important;
        padding: 6px !important;
        vertical-align: top !important;
    }

    /* Ticket lists and messages */
    #ticketTable,
    .ticket-list {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .ticket_info,
    .ticket-thread,
    .ticket_thread,
    .thread,
    .thread-entry,
    .thread-body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

    pre,
    code {
        max-width: 100% !important;
        overflow-x: auto !important;
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
    }

    /* Dialogs */
    .dialog,
    .modal,
    .ui-dialog {
        width: 94% !important;
        max-width: 94% !important;
        min-width: 0 !important;
        left: 3% !important;
        margin: 0 !important;
    }

    #footer {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 20px 12px !important;
        text-align: center !important;
    }
}

@media screen and (max-width: 520px) {
    #content {
        padding: 15px !important;
    }

    #header #logo img {
        max-width: 270px !important;
    }

    .form_table,
    .form_table tbody,
    .form_table tr,
    .form_table th,
    .form_table td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .form_table tr {
        margin-bottom: 10px !important;
    }

    .form_table th,
    .form_table td {
        padding: 4px 0 !important;
        text-align: left !important;
    }
}