/*
  Safeway Transport brand theme (loaded after quality.css, so it overrides the QDA blue).
  Brand colors (from the Safeway Transport logo):
    Safeway Teal  #006666   (wordmark)
    Safeway Blue  #119ABC   ("TRANSPORT")
    Deep Navy     #0B3044
    Light Teal    #38B2B5
  html:root beats the plain :root blocks in quality.css and pages/orders.css, which load later on some pages.
*/
html:root {
    --safeway-teal: #006666;
    --safeway-teal-dark: #004D4D;
    --safeway-blue: #119ABC;
    --safeway-navy: #0B3044;
    --safeway-light-teal: #38B2B5;
    --safeway-teal-soft: #E0F2F2;

    /* quality.css tokens */
    --primary: #006666;
    --primary-hover: #004D4D;
    --primary-soft: #E0F2F2;

    /* pages/orders.css tokens */
    --primary-color: #006666;
    --primary-dark: #004D4D;
    --primary-light: #E0F2F2;
}

/* ===== Navigation: teal bar with a blue strip, blue active underline ===== */
.bg-primary,
.navbar.bg-primary {
    background: #006666 !important;
}

.navbar.bg-primary {
    border-bottom: 4px solid #119ABC;
}

.navbar-brand {
    font-weight: 800;
    letter-spacing: 0.02em;
}

.navbar-dark .navbar-nav .nav-link {
    border-radius: 0;
    border-bottom: 3px solid transparent;
}

    .navbar-dark .navbar-nav .nav-link:hover {
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.10);
        border-bottom-color: #119ABC;
    }

.navbar-dark .navbar-nav .nav-item.active .nav-link {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.14);
    border-bottom-color: #119ABC;
}

.nav-user-badge {
    background-color: #119ABC;
    border-color: #119ABC;
    color: #ffffff;
}

.profile-subnav .nav-item:hover {
    background-color: #E0F2F2;
}

/* ===== Links ===== */
.icon, a {
    color: #006666;
}

    a:hover {
        color: #004D4D;
    }

/* ===== Buttons ===== */
.btn-primary {
    background-color: #006666;
    border: 1px solid #006666;
    color: #ffffff;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:not(:disabled):not(.disabled):active {
        background-color: #004D4D;
        border-color: #004D4D;
        color: #ffffff;
    }

    .btn-primary:focus {
        box-shadow: 0 0 0 0.2rem rgba(17, 154, 188, 0.35);
    }

.btn-primary.disabled, .btn-primary:disabled {
    background-color: #ababab;
    border: 1px solid #999;
}

.btn-outline-primary {
    color: #006666;
    border-color: #006666;
}

    .btn-outline-primary:hover {
        background-color: #006666;
        border-color: #006666;
        color: #ffffff;
    }

.btn-info {
    background-color: #119ABC;
    border-color: #119ABC;
}

.border-info,
.border-primary {
    border-color: #006666 !important;
}

.text-primary {
    color: #006666 !important;
}

.badge-primary {
    background-color: #119ABC;
    color: #ffffff;
}

.form-control:focus {
    border-color: #119ABC;
    box-shadow: 0 0 0 0.2rem rgba(17, 154, 188, 0.25);
}

.card-header {
    border-bottom: 3px solid #119ABC;
}

/* Kendo grid selection/pager */
.k-grid .k-state-selected,
.k-grid tr.k-state-selected > td {
    background-color: #E0F2F2;
    color: #0B3044;
}

.k-pager-numbers .k-state-selected {
    background-color: #006666;
    border-color: #006666;
    color: #ffffff;
}

/* ===== Login / logout ===== */
.login-logo {
    margin-top: 30px;
    width: 260px;
    max-width: 90%;
    height: auto;
}

.logout-logo {
    margin-top: 30px;
    width: 300px;
    max-width: 90%;
    height: auto;
}