/* Responsive adjustments for osTicket */

/* Global Navigation - Bootstrap style (Desktop & Mobile Base) */
#nav {
    margin: 10px 20px;
    height: auto;
    padding: 5px 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    background: #f8f9fa !important;
    border: 1px solid #e7e7e7 !important;
    border-radius: 4px;
    box-shadow: none !important;
}

#nav li {
    margin: 0;
    padding: 0;
    display: block;
}

#nav li a {
    display: block;
    float: none;
    width: auto;
    height: auto;
    line-height: normal;
    padding: 10px 15px 10px 40px !important;
    margin: 0 !important;
    color: #555 !important;
    background-color: transparent !important;
    border-radius: 4px !important;
    background-position: 12px center !important;
    background-repeat: no-repeat !important;
    text-decoration: none;
    font-weight: 500;
    box-sizing: border-box !important;
    border: none !important;
}

#nav li a:hover {
    background-color: #e9ecef !important;
    color: #000 !important;
}

#nav li a.active {
    background-color: #006FB8 !important;
    color: #fff !important;
}

/* Hide Sidebar Globally */
.sidebar {
    display: none !important;
}

/* Make main content responsive */
.main-content {
    width: 100% !important;
    box-sizing: border-box;
}

/* Global Ticket Info and Form Table Fixes (overrides width="800") */
#ticketInfo, #ticketForm > table {
    width: 100% !important;
    max-width: 100%;
}

/* Mobile Overrides */
@media screen and (max-width: 860px) {
    /* Main container and resets */
    #container {
        width: 100% !important;
        max-width: 100%;
        box-shadow: none;
        padding: 0 10px;
        box-sizing: border-box;
    }
    
    /* Ticket Info & Form Stacking */
    #ticketInfo, #ticketInfo tbody, #ticketInfo tr, #ticketInfo td[width],
    #ticketForm > table, #ticketForm > table tbody, #ticketForm > table tr, #ticketForm > table td, #ticketForm > table th {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }
    #ticketInfo > tbody > tr > td, #ticketForm > table > tbody > tr > td, #ticketForm > table > tbody > tr > th {
        margin-bottom: 10px;
        padding: 0;
    }

    #header {
        height: auto;
        padding: 10px 0;
        text-align: center;
    }

    #header #logo {
        float: none;
        width: 100%;
        height: auto;
        display: block;
        margin-bottom: 15px;
    }

    #header p {
        float: none;
        width: 100%;
        text-align: center;
        padding: 5px 0;
    }
    
    #header .pull-right {
        float: none !important;
    }

    /* Mobile Navigation */
    #nav {
        margin: 10px 0;
        flex-direction: column;
        padding: 0;
        gap: 0;
    }
    
    #nav li {
        width: 100%;
        border-bottom: 1px solid #e7e7e7;
    }
    
    #nav li:last-child {
        border-bottom: none;
    }

    #nav li a {
        margin: 0;
        border-radius: 0 !important;
    }

    /* Sidebar */
    .sidebar {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 20px !important;
        clear: both;
        display: block;
    }

    /* Landing page blocks */
    #landing_page #new_ticket,
    #landing_page #check_status {
        width: 100% !important;
        float: none;
        margin-top: 20px;
        box-sizing: border-box;
    }

    /* Content area */
    #content {
        margin: 0;
        padding: 15px 5px;
        height: auto !important;
    }

    /* Tables */
    #ticketTable, #ticketThread table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Inputs */
    input[type=text], input[type=password], input[type=email], select, textarea {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Forms */
    #ticketForm div label, #clientLogin div label {
        float: none;
        width: 100%;
        margin-bottom: 5px;
    }

    #ticketForm div input, #clientLogin div input, 
    #ticketForm div textarea, #clientLogin div textarea {
        float: none;
        width: 100%;
        max-width: 100% !important;
        margin-bottom: 10px;
    }
    
    #clientLogin {
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        background-image: none !important;
        display: block !important;
    }
    
    #clientLogin .login-box,
    #clientLogin .instructions {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        padding: 5px 0 !important;
        box-shadow: none !important;
        border-right: none !important;
        text-align: left;
    }
    
    #clientLogin .instructions {
        margin-top: 15px;
        border-top: 1px solid #ddd;
        padding-top: 15px !important;
    }
    
    #clientLogin strong {
        padding-left: 0;
        margin-top: 5px;
    }
    
    #clientLogin #email, #clientLogin #ticketno {
        width: 100%;
    }
    
    /* Buttons */
    .button, input[type=submit], input[type=button] {
        width: 100% !important;
        box-sizing: border-box;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    /* KB Search */
    #kb-search #query, #kb-search #cid, #kb-search #topic-id, #kb-search #searchSubmit {
        width: 100%;
        float: none;
        margin-bottom: 10px;
        box-sizing: border-box;
    }

    /* Reply block */
    #reply table {
        width: 100%;
        display: block;
    }
    #reply textarea {
        width: 100% !important;
    }
}