/* MLZ: APAMI - Shared responsive overrides. Desktop styles above 1150px stay unchanged. */
.client-portal #landing_page .thread-body h1 {
    color: #00aeef;
    font-size: 20px;
    font-weight: normal;
    line-height: 1.25;
}

@media screen and (max-width: 1150px) {
    #container { width: calc(100% - 24px); max-width: 100%; min-width: 0; }
    #container, #header, #content, #footer { box-sizing: border-box; }
    #header { height: auto; min-height: 76px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; }
    #header #logo { order: -1; float: none; max-width: 100%; height: auto; }
    #header #logo img { max-width: 100%; height: auto; }
    #header p, #header #info { width: auto; margin: 0; line-height: 1.7; }
    #header .pull-right { float: none; }
    #content { min-width: 0; padding: 16px; overflow-wrap: anywhere; }
    .client-portal #content { margin: 0; }
    .client-portal .main-content { width: calc(100% - 245px); max-width: 100%; }
    .client-portal #landing_page #new_ticket,
    .client-portal #landing_page #check_status { width: 100%; box-sizing: border-box; }
    #footer { width: auto; max-width: 100%; }
    #nav { display: flex; flex-wrap: wrap; height: auto; padding: 0; }
    #nav > li { float: none; margin: 0; }
    #nav > li > a { min-height: 44px; height: auto; box-sizing: border-box; display: flex; align-items: center; }
    #sub_nav { height: auto; display: flex; flex-wrap: wrap; padding: 4px; }
    #sub_nav > li { float: none; }
    #sub_nav > li > a { min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; }
    input, select, textarea { box-sizing: border-box; max-width: 100%; }
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, button, .button, .btn { min-height: 44px; }
    textarea { width: 100%; }
    fieldset { min-width: 0; }
    .select2-container { max-width: 100%; }
    .select2-container .select2-selection--single { min-height: 44px; }
    .select2-container .select2-selection--single .select2-selection__rendered { line-height: 42px; }
    .select2-container .select2-selection--single .select2-selection__arrow { height: 42px; }
    .redactor-box, .redactor-editor, .redactor-toolbar { box-sizing: border-box; max-width: 100%; min-width: 0; }
    .thread-body img, .thread-body video, #landing_page img { max-width: 100%; height: auto; }
    .thread-body pre { white-space: pre-wrap; overflow-wrap: anywhere; }
    .thread-body { overflow-wrap: anywhere; }
    #msg_notice, #msg_warning, #msg_error, #notice_bar, #warning_bar, #error_bar,
    .notice_bar, .warning_bar, .error_bar { height: auto; min-height: 20px; line-height: 1.5; }
    /* MLZ: APAMI - Data tables retain every column, with scrolling confined to the table. */
    table.list, table.ticket-list { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .client-portal #ticketForm > table { width: 100%; table-layout: fixed; }
    .client-portal #ticketForm td { overflow-wrap: anywhere; }
    .staff-portal .sticky.bar, .staff-portal .sticky.bar .content { width: auto; max-width: 100%; height: auto; }
    .staff-portal .sticky.bar { position: static; }
    #dialog, .dialog, .ui-dialog { box-sizing: border-box; max-width: calc(100vw - 24px); }
}

@media screen and (max-width: 767px) {
    body { font-size: 15px; line-height: 1.5; }
    #container { width: 100%; margin: 0 auto; }
    #content { padding: 16px 12px; }
    #header { align-items: flex-start; }
    #header #logo { width: 100%; }
    #header #logo img { max-width: min(300px, 100%); max-height: 76px; object-fit: contain; }
    #header .flush-right, #header #info { text-align: left; }
    #nav > li { flex: 1 1 auto; }
    #nav > li > a { justify-content: center; padding: 10px 12px; min-width: 0; }
    #sub_nav > li > a { padding: 8px 12px; }
    input, select, textarea { font-size: 16px; }
    .client-portal #landing_page #new_ticket,
    .client-portal #landing_page #check_status,
    .client-portal #landing_page .main-content,
    .client-portal .sidebar { float: none; width: 100%; box-sizing: border-box; margin: 0 0 20px; }
    .client-portal #clientLogin > div,
    .client-portal #clientLogin > div > div { display: block !important; width: 100%; box-sizing: border-box; border: 0; padding: 12px 0 !important; }
    .client-portal .login-box input { width: 100%; }
    .client-portal .span4, .client-portal .span8 { display: block; width: 100%; margin: 0 0 16px; }
    .client-portal .main-content { width: 100%; }
    .client-portal #ticketForm > table > tbody > tr > td { display: block; width: 100% !important; box-sizing: border-box; padding: 6px 0; }
    .client-portal #ticketForm input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .client-portal #ticketForm select { width: 100%; }
    .ticket_info { width: 100% !important; float: none; }
    .staff-portal table.settings_table { width: 100%; }
    .staff-portal table.settings_table > tbody > tr > td { display: block; width: 100% !important; box-sizing: border-box; }
    .staff-portal .sticky.bar .pull-right { float: none; display: flex; flex-wrap: wrap; gap: 6px; }
    .thread-entry .header { height: auto; white-space: normal; }
    #reply, #response, #ticketThread { width: 100%; min-width: 0; box-sizing: border-box; }
    #loginBox { position: relative; top: auto; left: auto; margin: 24px auto; width: calc(100% - 24px); max-width: 400px; }
    #loginBox #logo img { max-width: 100%; height: auto; }
    #loginBox input, #loginBox button { max-width: 100%; font-size: 16px; min-height: 44px; }
    #loginBody { height: auto; min-height: 100vh; }
    #loginBox ~ #copy { position: static; }
}

@media screen and (max-height: 600px) {
    #loginBox { position: relative; top: auto; left: auto; margin: 12px auto; max-width: calc(100% - 24px); }
}