/* MLZ: APAMI - Responsive layout for the client portal. It preserves the original EAS/osTicket look. */
@media screen and (max-width: 1150px) {
    .client-portal #container { width: calc(100% - 24px); max-width: 1135px; margin: 0 auto; border-radius: 0; }
    .client-portal #header { min-height: 71px; padding: 0 20px; gap: 10px 20px; }
    .client-portal #header #logo { flex: 1 1 380px; }
    .client-portal #header #logo img { max-width: min(380px, 100%); max-height: 65px; }
    .client-portal #header .pull-right { flex: 0 1 400px; margin-left: auto; }
    .client-portal #header p { width: auto; padding-top: 6px; text-align: right; }
    .client-portal #nav { margin: 0 20px; padding: 2px 10px; gap: 0; background: url('../assets/default/images/nav_bg.png') top left repeat-x #ccc; border-top: 1px solid #aaa; box-shadow: 0 3px 2px rgba(0, 0, 0, .4); }
    .client-portal #nav > li > a { min-height: 20px; padding: 0 10px 0 32px; margin-left: 10px; line-height: 20px; color: #333; border-radius: 20px; font-weight: normal; }
    .client-portal #nav > li > a.active, .client-portal #nav > li > a:hover { background-color: #dbefff; color: #000; }
    .client-portal #content { margin: 0 20px; padding: 20px 0; min-height: 350px; }
    .client-portal .main-content { width: calc(100% - 320px); min-width: 0; }
    .client-portal .sidebar { width: 295px; margin-left: 24px; }
    .client-portal #landing_page #new_ticket, .client-portal #landing_page #check_status { width: 100%; box-sizing: border-box; }
    .client-portal .button, .client-portal .btn, .client-portal input[type="submit"], .client-portal input[type="reset"] { min-height: 0; }
    .client-portal .client-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .client-portal .client-table-scroll table { display: table; min-width: 600px; width: 100%; }
    .client-portal .logo-fallback { display: inline-block; color: #00aeef; font-size: 20px; line-height: 1.2; }
}

#client-menu-toggle { display: none; }

@media screen and (max-width: 767px) {
    .client-portal #container { width: 100%; }
    .client-portal #header { padding: 10px 12px; }
    .client-portal #header #logo, .client-portal #header .pull-right { flex: 1 1 100%; width: 100%; margin: 0; }
    .client-portal #header p { padding: 0; text-align: left; }
    .client-menu-ready #client-menu-toggle { display: flex; align-items: center; gap: 8px; width: calc(100% - 24px); min-height: 44px; margin: 0 12px 8px; padding: 8px 12px; color: #333; background: url('../assets/default/images/nav_bg.png') top left repeat-x #ccc; border: 1px solid #aaa; box-shadow: 0 2px 2px rgba(0, 0, 0, .3); font-size: 16px; text-align: left; }
    .client-menu-ready #nav { display: none; }
    .client-menu-ready.client-menu-open #nav { display: flex; }
    .client-portal #nav { margin: 0 12px; padding: 4px; }
    .client-portal #nav > li { flex: 1 1 100%; }
    .client-portal #nav > li > a { justify-content: flex-start; min-height: 44px; margin: 0; padding: 10px 12px 10px 36px; }
    .client-portal #content { margin: 0 12px; padding: 16px 0; }
    .client-portal .main-content, .client-portal .sidebar { float: none; width: 100%; margin: 0 0 20px; }
    .client-portal .button, .client-portal .btn, .client-portal input[type="submit"], .client-portal input[type="reset"] { min-height: 44px; }
    .client-portal #ticketInfo > tbody > tr > td { display: block; width: 100%; }
    .client-portal .thread-body { padding: 0; }
}