/*
 * Non-production visual marker.
 *
 * Included from the layouts only when CURRENT_ENV != 2, so production never
 * loads it. The point is that a tab of the dev CRM should be unmistakable at a
 * glance — the two sites are otherwise pixel-identical and hold similar data.
 */

/* Fixed strip across the very top of every page. */
body::before {
    content: "DEV — copy of live data · email + SMS go to test inbox only";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 22px;
    line-height: 22px;
    background: #b45309;
    color: #fff;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-align: center;
    z-index: 100000;
    pointer-events: none;
}

/* Push the page down so the strip never covers the real header. */
body {
    padding-top: 22px !important;
}

/* Recolour the main nav bar. Amber reads as "caution, not production" and is
   far enough from the live slate that peripheral vision catches it. */
.page-header .page-header-menu,
.page-header-menu {
    background-color: #7c3a06 !important;
}

.page-header .page-header-menu .hor-menu .navbar-nav > li > a {
    color: #ffe9c9 !important;
}

.page-header .page-header-menu .hor-menu .navbar-nav > li:hover > a,
.page-header .page-header-menu .hor-menu .navbar-nav > li.active > a {
    background-color: #b45309 !important;
    color: #fff !important;
}

/* Login page has no nav bar — tint its box instead so the environment is
   obvious before you type a password. */
.login .content,
.login .login-form {
    border-top: 4px solid #b45309 !important;
}