/* Responsive Client Portal for osTicket */
@media (max-width: 768px) {
    body { padding: 0; margin: 0; }
    #container { width: 100% !important; margin: 0 auto !important; box-sizing: border-box !important; padding: 0 10px !important; }
    #header { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; height: auto !important; padding: 10px 0 !important; }
    #logo { float: none !important; margin: 0 auto !important; }
    #logo img { max-width: 100% !important; height: auto !important; }
    p { margin-top: 10px !important; float: none !important; text-align: left !important; line-height: 1.5 !important; }
    #header p { text-align: center !important; }
    ul#nav { width: 100% !important; height: auto !important; background: none !important; text-align: center !important; padding: 0 !important; margin-bottom: 15px !important; display: flex !important; flex-direction: column !important; align-items: center !important;}
    ul#nav li { display: block !important; float: none !important; margin: 5px 0 !important; background: #005A9C !important; border-radius: 5px !important; width: 70% !important; max-width: 300px !important; }
    ul#nav li a { display: block !important; padding: 10px !important; line-height: normal !important; color: #333 !important; font-size: 16px !important; text-align: center !important; font-weight: bold !important;}
    ul#nav li a.new, ul#nav li a.status, ul#nav li a.tickets { color: white !important; }
    ul#nav li a:hover { background: #003F6D !important; border-radius: 5px !important; }
    ul#nav li.active a { background: #003F6D !important; border-radius: 5px !important; }
    #content { width: 100% !important; padding: 15px 10px !important; box-sizing: border-box !important; min-height: auto !important; }
    table { width: 100% !important; display: block !important; }
    tbody, thead, tr, th, td { display: block !important; width: 100% !important; box-sizing: border-box !important; }
    th { text-align: left !important; padding-bottom: 5px !important; margin-top: 10px !important; }
    td { margin-bottom: 10px !important; }
    td[colspan] { display: block !important; width: 100% !important; }
    .thread-entry { padding: 15px !important; }
    .thread-body { overflow-x: auto !important; }
    .sidebar, .main-content { width: 100% !important; float: none !important; box-sizing: border-box !important; display: block !important; margin: 0 !important; padding: 0 !important; }
    .sidebar { margin-bottom: 20px !important; }
    input[type="text"], input[type="password"], textarea, select { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; height: auto !important; padding: 10px !important; font-size: 16px !important; border: 1px solid #ccc !important; border-radius: 4px !important; }
    input[type="submit"], input[type="button"], button, .btn, .button { width: auto !important; max-width: 100% !important; padding: 12px 24px !important; font-size: 16px !important; margin-bottom: 10px !important; display: inline-block !important; }
    .searchbar { display: flex !important; flex-direction: column !important; }
    .searchbar input[type="text"] { width: 100% !important; margin-bottom: 10px !important; }
    .searchbar input[type="submit"] { width: 100% !important; }
    .dialog { width: 90% !important; left: 5% !important; top: 10% !important; margin: 0 !important; box-sizing: border-box !important; }
    #footer { width: 100% !important; padding: 20px 10px !important; box-sizing: border-box !important; text-align: center !important; }
    #footer p, #footer div { text-align: center !important; float: none !important; margin: 0 auto !important; }
    
    /* Specific overrides for tables that should scroll horizontally instead of stacking (like ticket list) */
    table.custom-grid { display: block !important; overflow-x: auto !important; white-space: nowrap !important; }
    table.custom-grid tbody, table.custom-grid thead, table.custom-grid tr { display: table-row !important; width: auto !important; }
    table.custom-grid th, table.custom-grid td { display: table-cell !important; width: auto !important; }
}