/*
 * Custom styles to match web-app branding
 */

:root {
    --primary-color: #1976D2;
    --secondary-color: #fda331;
    --positive-color: #21BA45;
    --negative-color: #C10015;
    --dark-color: #333333;
}

/* Header & Logo Area */
#header {
    background-color: var(--dark-color) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    border: none !important;
}

#header p#info {
    background: transparent !important;
    border: none !important;
    color: #eee !important;
}

#header p#info a {
    color: var(--secondary-color) !important;
}

#header p#info strong {
    color: #fff !important;
}

/* Primary Navigation */
#nav {
    background: #f5f5f5 !important;
    border-bottom: 3px solid var(--primary-color) !important;
}

#nav .active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

#nav .active a {
    color: #fff !important;
}

#nav .inactive a:hover {
    color: var(--primary-color) !important;
}

/* Sub Navigation */
#sub_nav {
    background: #fff !important;
    border-bottom: 1px solid #ddd !important;
}

#sub_nav a.active,
#sub_nav li.active > a {
    color: var(--primary-color) !important;
}

#sub_nav a:hover {
    color: var(--secondary-color) !important;
}

/* Buttons */
input[type="submit"],
input[type="reset"],
input[type="button"],
.action-button,
.button {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
    text-transform: uppercase;
    font-weight: 500 !important;
    transition: background-color 0.2s !important;
}

input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover {
    background-color: #1565C0 !important; /* Slightly darker primary */
    color: #fff !important;
}

.green.button {
    background-color: var(--positive-color) !important;
}

.red.button {
    background-color: var(--negative-color) !important;
}

/* Tables */
table {
    width: 100%;
}

/* Links */
a {
    color: var(--primary-color);
}

a:hover {
    color: #1565C0;
}

/* Breadcrumbs */
#breadcrumbs {
    background-color: #f9f9f9 !important;
    border-left: 3px solid var(--secondary-color) !important;
}

/* Mobile Friendly - Minimal Changes */
#container {
    width: 98% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.jb-overflowmenu {
    width: 100% !important;
}

#content {
    overflow-x: hidden !important;
}

@media screen and (max-width: 768px) {
    #header {
        height: auto !important;
        min-height: 76px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 10px !important;
    }

    #header #logo {
        float: none !important;
        margin: 0 auto 10px auto !important;
        height: auto !important;
        max-width: 80% !important;
        display: block !important;
        padding: 0 !important;
    }

    #header p#info {
        float: none !important;
        position: static !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        display: block !important;
    }

    #nav, #sub_nav {
        height: auto !important;
        white-space: normal !important;
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 5px !important;
        justify-content: center !important;
    }

    #nav > li, #sub_nav > li {
        display: inline-block !important;
        margin: 2px !important;
        float: none !important;
    }

    #nav .active, #nav .inactive {
        min-width: 0 !important;
    }

    /* Handle general ID column or large elements that might overflow */
    #content table {
        width: 100% !important;
        display: table !important;
    }

    /* Since user specifically mentioned #content scrollbar, we keep it hidden there.
       If specific tables still need to scroll, they should be wrapped or handled individually,
       but standard osTicket tables should fit better now with 100% width. */

    /* Fix custom queue navigation overflow */
    .jb-overflowmenu {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .jb-overflowmenu .jb-overflowmenu-helper-postion {
        position: relative !important;
        display: block !important;
        width: 100% !important;
    }

    .jb-overflowmenu .jb-overflowmenu-menu-primary {
        height: auto !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding: 5px 0 !important;
    }

    .jb-overflowmenu .jb-overflowmenu-menu-primary li.item {
        display: inline-block !important;
        margin: 2px !important;
        padding: 0 !important;
    }

    .jb-overflowmenu .jb-overflowmenu-menu-primary li.item > a {
        padding: 5px 10px !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        background: #f9f9f9 !important;
    }

    /* Hide the overflow ellipsis container if we are wrapping items */
    .jb-overflowmenu .jb-overflowmenu-container {
        display: none !important;
    }
}

/* Login Page Overrides */
#loginBody {
    background-color: #eee !important;
}

#brickwall, #background, #blur {
    display: none !important;
}

#loginBox {
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    position: relative !important;
    top: 50px !important;
    left: auto !important;
    margin: 20px auto !important;
    width: 90% !important;
    max-width: 400px !important;
}

#loginBox:after {
    display: none !important;
}

#loginBox h1#logo {
    height: auto !important;
    padding: 20px 0 !important;
}

#loginBox h1#logo img {
    max-height: 80px !important;
}

#loginBox input[type="text"],
#loginBox input[type="password"] {
    padding: 10px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 14px !important;
}

#loginBox button.submit {
    width: 100% !important;
    height: 40px !important;
    line-height: 40px !important;
    margin: 10px 0 !important;
    float: none !important;
}

#loginBox #reset-link {
    display: block !important;
    margin-bottom: 15px !important;
    text-align: center !important;
}

#poweredBy {
    position: static !important;
    margin: 40px auto 20px auto !important;
    width: fit-content !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #888 !important;
}

#poweredBy img {
    filter: grayscale(1) !important;
    opacity: 0.5 !important;
}

#loginBox form {
    width: 100% !important;
    padding: 0 20px !important;
}

#loginBox fieldset input {
    background: #fff !important;
}

#loginBox #company {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    margin: 20px auto 0 auto !important;
    width: 100% !important;
    color: #888 !important;
}

#loginBox #company .content {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #888 !important;
    padding: 0 !important;
}