/* ================================================================
   ROOT / THEME TOKENS
   ================================================================ */

:root {
    /* Theme primary + hover */
    --bs-link-color: #337ab7; /* your theme primary */
    --bs-link-hover-color: #245681;
    /* Brand gradient stops (new lighter blue that matches the logo) */
    --qq-blue-1: #337ab7;
    --qq-blue-2: #245681;
    --qq-blue-3: #1b2838;
    /* Sidebar stays VERTICAL (top->bottom) */
    --qq-sidebar-gradient: linear-gradient(180deg, var(--qq-blue-1) 0%, var(--qq-blue-2) 55%, var(--qq-blue-3) 100%);
    /* Collapsed top navbar uses same colors but HORIZONTAL (left->right) */
    --qq-navbar-gradient: linear-gradient(90deg, var(--qq-blue-1) 0%, var(--qq-blue-2) 55%, var(--qq-blue-3) 100%);
}

/* Global themed link color (excludes .btn anchors) */
a:not(.btn) {
    color: var(--bs-link-color);
}

    a:not(.btn):hover,
    a:not(.btn):focus {
        color: var(--bs-link-hover-color);
    }

/* ================================================================
   SIDEBAR (keep vertical like it was)
   ================================================================ */

#sidebar { /* New Oshkosh blue ribbon behind logo */
    background: var(--qq-sidebar-gradient);
    color: #e5e7eb;
}

    /* Ensure sidebar text + links stay readable on the darker blue */
    #sidebar, #sidebar p, #sidebar span, #sidebar a {
        color: #e5e7eb;
    }

        #sidebar a:hover, #sidebar a:focus {
            color: #ffffff;
        }

#sidebar-logo {
    margin: 115px auto 30px;
    width: 225px;
    padding: 0 12px;
    box-sizing: border-box;
    text-align: center;
}

    #sidebar-logo > img {
        width: 100%;
        height: 100%;
    }

/* ================================================================
   BUTTONS (BS5-ready)
   ================================================================ */

.btn-theme-primary {
    background-color: #337ab7;
    border-color: #2e6da4;
    color: #fff;
    --bs-btn-color: #fff;
    --bs-btn-bg: #337ab7;
    --bs-btn-border-color: #2e6da4;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2e6da4;
    --bs-btn-hover-border-color: #245681;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #245681;
    --bs-btn-active-border-color: #245681;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #337ab7;
    --bs-btn-disabled-border-color: #2e6da4;
    --bs-btn-focus-shadow-rgb: 51,122,183;
}

.btn-theme-success {
    background-color: #5cb85c;
    border-color: #4cae4c;
    color: #fff;
    --bs-btn-color: #fff;
    --bs-btn-bg: #5cb85c;
    --bs-btn-border-color: #4cae4c;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4cae4c;
    --bs-btn-hover-border-color: #3f9440;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3f9440;
    --bs-btn-active-border-color: #3f9440;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #5cb85c;
    --bs-btn-disabled-border-color: #4cae4c;
    --bs-btn-focus-shadow-rgb: 92,184,92;
}

.btn-theme-danger {
    background-color: #d9534f;
    border-color: #d43f3a;
    color: #fff;
    --bs-btn-color: #fff;
    --bs-btn-bg: #d9534f;
    --bs-btn-border-color: #d43f3a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #c94a46;
    --bs-btn-hover-border-color: #b93f3b;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b93f3b;
    --bs-btn-active-border-color: #b93f3b;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #d9534f;
    --bs-btn-disabled-border-color: #d43f3a;
    --bs-btn-focus-shadow-rgb: 217,83,79;
}

.btn-theme-secondary {
    background-color: #4F535C;
    border-color: #4F535C;
    color: #fff;
    --bs-btn-color: #fff;
    --bs-btn-bg: #4F535C;
    --bs-btn-border-color: #4F535C;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #434750;
    --bs-btn-hover-border-color: #3b3f47;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3b3f47;
    --bs-btn-active-border-color: #3b3f47;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #4F535C;
    --bs-btn-disabled-border-color: #4F535C;
    --bs-btn-focus-shadow-rgb: 79,83,92;
}

    .btn-theme-primary:hover, .btn-theme-primary:focus, .btn-theme-primary:active,
    .btn-theme-success:hover, .btn-theme-success:focus, .btn-theme-success:active,
    .btn-theme-danger:hover, .btn-theme-danger:focus, .btn-theme-danger:active,
    .btn-theme-secondary:hover, .btn-theme-secondary:focus, .btn-theme-secondary:active {
        box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
        color: #fff;
    }

.add-button-success {
    background: #5cb85c;
    color: #fff;
}

.navbar-toggle {
    background-color: #303131 !important;
}

.btn-input {
    height: 2.375rem; /* same as BS5 form-control */
    padding: .375rem .75rem;
    line-height: 1.5;
}

/* harmless legacy */
/* ===== LOGIN / SPLASH ===== */

#image-container {
    width: 50%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    background-image: url("/App_Themes/Oshkosh/img/login-splash.jpg");
    background-size: cover;
    background-position: center top;
}

#login-logo {
    padding: 0 15px 25px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

    #login-logo > img {
        width: 100%;
        height: 100%;
    }

#colorband {
    height: 15px;
    width: 100%;
    overflow: hidden;
    z-index: -1000;
}

    #colorband > img {
        width: 100%;
        height: 100%;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }

.colorbar-wrapper {
    position: relative;
    width: 100%;
    height: 12px;
    overflow: hidden; /* New brand gradient bar, replaces old PNG stripe */
    background-image: linear-gradient( 90deg, #337ab7 0%, #4a9adf 40%, #56b1e5 70%, #337ab7 100% );
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

    .colorbar-wrapper > img { /* Hide legacy colorbar image; keep it in markup for now */
        display: none;
    }

#form {
    display: block;
    padding: 5px 20px 22px;
    border: 1px solid #d8dde6;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background-color: #fff;
}

.m-box {
    top: 45%;
    position: relative;
}

.m-box-wrapper {
    width: 400px;
    height: 200px;
    margin: 0 auto;
    padding: 20px 20px 0;
    background: #fff;
    box-shadow: 10px 10px 10px 0 rgba(0,0,0,.25);
}

.m-box-heading {
    display: block;
    color: #3F434C;
    font-size: 35px;
    font-weight: bold;
    padding-bottom: 10px;
}

.m-box-text {
    display: block;
    color: #887C78;
    font-size: 20px;
    line-height: 26px;
}

.m-box-button {
    display: block;
    width: 250px;
    height: 60px;
    background: #3F434C !important;
    position: relative;
    text-align: center;
    vertical-align: middle;
    margin: 0 auto;
    top: 12px;
    color: #83D0CA !important;
    font-size: 1.2em;
    font-weight: 800;
    line-height: 60px;
}

.slogan-container {
    display: none;
}

/* ===== GRID / TABLE PAGER (QuickQuote history & others) ===== */

.qq-pager {
    padding: .75rem 0 1.25rem;
    text-align: center; /* center pager content in the cell */
    font-size: .875rem;
}
    /* WebForms renders an inner <table> inside the pager cell */
    .qq-pager table {
        margin: 0 auto; /* center that inner table */
    }

    .qq-pager a, .qq-pager span {
        display: inline-block;
        min-width: 2.25rem;
        padding: .35rem .65rem;
        margin: 0 .125rem;
        border-radius: .25rem;
        line-height: 1.4;
        text-decoration: none;
    }
    /* Normal page links */
    .qq-pager a {
        color: var(--bs-link-color); /* uses your themed link color */
        background-color: #fff;
        border: 1px solid #dee2e6;
    }

        .qq-pager a:hover, .qq-pager a:focus {
            color: var(--bs-link-hover-color);
            background-color: #f8f9fa;
            text-decoration: none;
        }
    /* Current page (DataGrid renders this as a <span>) */
    .qq-pager span {
        background-color: #337ab7; /* matches .btn-theme-primary */
        border: 1px solid #2e6da4;
        color: #fff;
        font-weight: 600;
    }

/* ===== GRID BACKGROUND TWEAK ===== */
/* Soften the table/grid area so it's not harsh pure white */

.table, .qq-grid, .grid-view, .datagrid {
    background-color: #f8fafc; /* light grey-blue instead of #fff */
}
    /* Header row a touch darker for contrast */
    .table > thead > tr > th, .qq-grid thead th, .grid-view thead th, .datagrid thead th {
        background-color: #eef2f7;
    }
    /* Stripe rows with a very subtle grey so it's easy on the eyes */
    .table-striped > tbody > tr:nth-of-type(odd),
    .qq-grid tbody tr:nth-of-type(odd),
    .grid-view tbody tr:nth-of-type(odd),
    .datagrid tbody tr:nth-of-type(odd) {
        background-color: #f2f5fa;
    }
    /* Hover state slightly darker but still soft */
    .table-hover > tbody > tr:hover,
    .qq-grid tbody tr:hover,
    .grid-view tbody tr:hover,
    .datagrid tbody tr:hover {
        background-color: #e4ecf7;
    }

/* ===== NAVBAR — Light offwhite for desktop ===== */

.navbar {
    background-color: #f9fafb !important; /* offwhite, not blue-grey */
    border-bottom: 1px solid #e1e4ea !important; /* slightly cooler border */
    --bs-navbar-color: rgba(0,0,0,.55);
    --bs-navbar-hover-color: rgba(0,0,0,.7);
    --bs-navbar-active-color: rgba(0,0,0,.9);
    --bs-navbar-brand-color: #212529;
    --bs-navbar-brand-hover-color: #0a58ca;
}

    .navbar .nav-link {
        color: var(--bs-navbar-color) !important;
    }

        .navbar .nav-link:hover, .navbar .nav-link:focus {
            color: var(--bs-navbar-hover-color) !important;
        }

.navbar-toggler {
    background-color: transparent !important;
    border-color: rgba(0,0,0,.1);
}

.navbar .dropdown-menu .dropdown-item {
    color: #212529;
}

/* Reusable themed inline link */
a.qq-inline-link {
    color: var(--qq-action-link, #337ab7) !important; /* fallback color included */
    font-weight: 600;
    text-decoration: underline;
}

    a.qq-inline-link:hover, a.qq-inline-link:focus {
        color: var(--qq-action-link-hover, #245681) !important;
        text-decoration-thickness: from-font;
    }

/* ================================================================
   BREAKPOINTS: Collapsed/compact header (≤1400px)
   - Use HORIZONTAL gradient (left->right) like the sidebar colors
   - Remove the "inner blue bar" by making navbar/collapse transparent
   ================================================================ */

@media screen and (max-width:1400px) {

    /* Put the gradient on the wrapper so it spans logo + nav */
    #top-navbar-wrapper {
        background: var(--qq-navbar-gradient) !important;
    }

    /* IMPORTANT: remove inner "bar" layer backgrounds */
    #top-navbar-header,
    #top-navbar,
    .navbar,
    .navbar-default,
    .navbar .navbar-header,
    .navbar .container,
    .navbar .container-fluid,
    .navbar .navbar-collapse {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
    }

    /* BS3 collapse has a top border + inset shadow that can look like a bar */
    .navbar-collapse {
        border-top: 0 !important;
        box-shadow: none !important;
    }

    /* Remove any border/shadow that could create a “panel” look */
    .navbar,
    .navbar-default {
        border: 0 !important;
        box-shadow: none !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
    }

    /* Keep text/links WHITE on the gradient (BS5 + BS3 selectors) */
    .navbar {
        --bs-navbar-color: rgba(255,255,255,.88);
        --bs-navbar-hover-color: #fff;
        --bs-navbar-active-color: #fff;
        --bs-navbar-brand-color: #fff;
        --bs-navbar-brand-hover-color: #fff;
    }

        .navbar .nav-link {
            color: var(--bs-navbar-color) !important;
        }

            .navbar .nav-link:hover, .navbar .nav-link:focus {
                color: #fff !important;
                opacity: .9;
            }

    /* BS3 navbar link styling (WebForms legacy markup) */
    .navbar-default .navbar-nav > li > a,
    .navbar-default .navbar-text,
    .navbar-default .navbar-brand {
        color: rgba(255,255,255,.88) !important;
        background: transparent !important;
    }

        .navbar-default .navbar-nav > li > a:hover,
        .navbar-default .navbar-nav > li > a:focus {
            color: #fff !important;
            background: transparent !important;
            opacity: .9;
        }

    #top-navbar-logo {
        width: 180px;
        padding: 5px !important;
    }

    .navbar-toggler {
        background-color: transparent !important;
        border-color: transparent;
    }
}

/* Collapsed menu (≤768px): keep dropdown items legible on dark background */
@media screen and (max-width:768px) {
    .navbar .dropdown-menu {
        background: rgba(0,0,0,.25);
        border: none;
    }

        .navbar .dropdown-menu .dropdown-item {
            color: #fff !important;
        }

            .navbar .dropdown-menu .dropdown-item:hover {
                background: rgba(255,255,255,.1);
            }
}

/* Tiny logo tweak */
@media screen and (max-width:350px) {
    #top-navbar-logo {
        width: 180px;
        padding: 5px !important;
    }
}