/*
    Brand colors of the Customer Portal: the only place where they are defined.
    This file is linked directly from the layouts (not through the ~/Content/css bundle,
    whose minifier does not understand CSS custom properties).

    Why the brand rules live here and not in site.css: with bundling optimizations on (QA, prod)
    the ~/Content/css bundle serves site.css and then the stock bootstrap.min.css, so bootstrap wins
    every rule site.css sets on the same selector and the buttons came out bootstrap blue.
    This file is linked AFTER the bundle and after the theme sheets, so these rules win.

    Semantic colors (danger, error, delete, success, warning, info buttons) are NOT brand:
    they keep the stock bootstrap/sb-admin colors and must not be set here.
*/
:root {
    /* Warren Valve green (from the Warren logo). White on it = 6.75:1 (WCAG AA). */
    --brand-primary: #166938;        /* buttons, panel headings, links, active/focus accents */
    --brand-primary-dark: #135930;   /* hover/focus state of --brand-primary */
    --brand-primary-darker: #12542d; /* pressed (active) state of --brand-primary */
    --brand-primary-light: #e8f0eb;  /* light background of info headings and bg-info */
    --brand-primary-border: #8ab49c; /* focused input border */
    --brand-footer-accent: #166938;  /* first letter of the company name in the sign-in footer */
    --brand-footer-text: rgb(0, 0, 185); /* company name, copyright and notice in the sign-in footer */
}

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

    a:hover,
    a:focus {
        color: var(--brand-primary-dark);
    }

/* Primary button: same selectors as bootstrap 3 .btn-primary, so every state is covered */
.btn-primary {
    color: #fff;
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

    .btn-primary:focus,
    .btn-primary.focus,
    .btn-primary:hover {
        color: #fff;
        background-color: var(--brand-primary-dark);
        border-color: var(--brand-primary-dark);
    }

    .btn-primary:active,
    .btn-primary.active,
    .open > .dropdown-toggle.btn-primary {
        color: #fff;
        background-color: var(--brand-primary-dark);
        border-color: var(--brand-primary-dark);
        background-image: none;
    }

        .btn-primary:active:hover,
        .btn-primary.active:hover,
        .open > .dropdown-toggle.btn-primary:hover,
        .btn-primary:active:focus,
        .btn-primary.active:focus,
        .open > .dropdown-toggle.btn-primary:focus,
        .btn-primary:active.focus,
        .btn-primary.active.focus,
        .open > .dropdown-toggle.btn-primary.focus {
            color: #fff;
            background-color: var(--brand-primary-darker);
            border-color: var(--brand-primary-darker);
        }

    .btn-primary.disabled:hover,
    .btn-primary[disabled]:hover,
    fieldset[disabled] .btn-primary:hover,
    .btn-primary.disabled:focus,
    .btn-primary[disabled]:focus,
    fieldset[disabled] .btn-primary:focus,
    .btn-primary.disabled.focus,
    .btn-primary[disabled].focus,
    fieldset[disabled] .btn-primary.focus {
        background-color: var(--brand-primary);
        border-color: var(--brand-primary);
    }

    .btn-primary .badge {
        color: var(--brand-primary);
        background-color: #fff;
    }

/* Panels: info (sign-in box, search boxes) and primary (detail sections) */
.panel-info {
    border-color: var(--brand-primary);
}

    .panel-info > .panel-heading {
        color: var(--brand-primary);
        background-color: var(--brand-primary-light);
        border-color: var(--brand-primary);
    }

        .panel-info > .panel-heading + .panel-collapse > .panel-body {
            border-top-color: var(--brand-primary);
        }

        .panel-info > .panel-heading .badge {
            color: var(--brand-primary-light);
            background-color: var(--brand-primary);
        }

    .panel-info > .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: var(--brand-primary);
    }

.panel-primary {
    border-color: var(--brand-primary);
}

    .panel-primary > .panel-heading {
        color: #fff;
        background-color: var(--brand-primary);
        border-color: var(--brand-primary);
    }

        .panel-primary > .panel-heading + .panel-collapse > .panel-body {
            border-top-color: var(--brand-primary);
        }

        .panel-primary > .panel-heading .badge {
            color: var(--brand-primary);
            background-color: #fff;
        }

    .panel-primary > .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: var(--brand-primary);
    }

.bg-info {
    color: var(--brand-primary);
    background-color: var(--brand-primary-light);
}

.page-header {
    color: var(--brand-primary);
}

/* Paging (bootstrap pagination, twbsPagination and DataTables) and pills */
.pagination > li > a,
.pagination > li > span {
    color: var(--brand-primary);
}

    .pagination > li > a:hover,
    .pagination > li > span:hover,
    .pagination > li > a:focus,
    .pagination > li > span:focus {
        color: var(--brand-primary-dark);
    }

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus,
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    color: #fff;
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* Keyboard focus of inputs */
.form-control:focus {
    border-color: var(--brand-primary-border);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(22, 105, 56, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(22, 105, 56, .6);
}

/* Selected day of the date picker */
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active {
    background-color: var(--brand-primary);
}

.bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: var(--brand-primary);
}

/* Sign-in footer */
.brand-footer-name {
    display: inline-block;
    color: var(--brand-footer-text);
}

    .brand-footer-name::first-letter {
        color: var(--brand-footer-accent);
    }

.brand-footer-text {
    color: var(--brand-footer-text);
}