/*!
 * Brownfield Design & Development Ltd — brand palette
 * Loaded after AdminLTE + _all-skins so it wins the cascade.
 *
 *   #2d3d2c  primary   dark green   (brand)
 *   #f7f3e0  cream                  (brand)
 *   #f3fbf1  mint                   (brand)
 *   #b6956f  gold                   (sampled from the logo mark, accent only)
 */

:root {
    --brand-green: #2d3d2c;
    --brand-green-dark: #1f2b1e;
    --brand-green-mid: #3b4f3a;
    --brand-green-soft: #52684f;
    --brand-cream: #f7f3e0;
    --brand-mint: #f3fbf1;
    --brand-gold: #b6956f;
    --brand-gold-dark: #9a7c58;
    --brand-ink: #2a2f28;
    --brand-border: #dfe6dc;
}

/* ---------------------------------------------------------------- header */

.skin-blue-light .main-header .navbar,
.main-header .navbar {
    background-color: var(--brand-green) !important;
}

.skin-blue-light .main-header .navbar .nav > li > a,
.main-header .navbar .nav > li > a {
    color: #fff;
}

.skin-blue-light .main-header .navbar .nav > li > a:hover,
.skin-blue-light .main-header .navbar .nav > li > a:focus,
.skin-blue-light .main-header .navbar .nav .open > a,
.skin-blue-light .main-header .navbar .nav .open > a:hover,
.skin-blue-light .main-header .navbar .nav .open > a:focus,
.skin-blue-light .main-header .navbar .nav > .active > a {
    background-color: var(--brand-green-dark) !important;
    color: #fff;
}

.skin-blue-light .main-header .navbar .sidebar-toggle:hover {
    background-color: var(--brand-green-dark) !important;
}

/* Logo plate stays light so the green wordmark and gold mark read correctly. */
.skin-blue-light .main-header .logo,
.skin-blue-light .main-header .logo:hover {
    background-color: #fff !important;
    color: var(--brand-green) !important;
    border-bottom: 0;
    border-right: 1px solid var(--brand-border);
}

/* -------------------------------------------------------------- sidebar */

.skin-blue-light .wrapper,
.skin-blue-light .main-sidebar,
.skin-blue-light .left-side {
    background-color: var(--brand-green) !important;
}

.skin-blue-light .sidebar-menu > li.header {
    color: var(--brand-cream) !important;
    background: var(--brand-green-dark) !important;
    letter-spacing: .06em;
}

.sidebar-menu li a,
.skin-blue-light .sidebar-menu > li > a {
    background: var(--brand-green) !important;
    color: #eef2ec !important;
    border-left: 3px solid transparent;
}

.sidebar-menu li a:hover,
.skin-blue-light .sidebar-menu > li:hover > a,
.skin-blue-light .sidebar-menu > li.active > a,
.skin-blue-light .sidebar-menu > li.menu-open > a {
    background: var(--brand-green-dark) !important;
    color: #fff !important;
    border-left-color: var(--brand-gold);
}

.skin-blue-light .sidebar-menu > li > .treeview-menu {
    background: var(--brand-green-mid) !important;
}

.treeview-menu li a,
.skin-blue-light .treeview-menu > li > a {
    background-color: var(--brand-green-mid) !important;
    color: #dfe7dd !important;
}

.treeview-menu li a:hover,
.skin-blue-light .treeview-menu > li > a:hover,
.skin-blue-light .treeview-menu > li.active > a {
    background-color: var(--brand-green-soft) !important;
    color: var(--brand-cream) !important;
}

.skin-blue-light .sidebar a,
.skin-blue-light .treeview-menu > li > a {
    color: #dfe7dd;
}

/* ----------------------------------------------------------- page canvas */

.content-wrapper,
.right-side {
    background-color: var(--brand-mint) !important;
}

.main-footer {
    background-color: #fff;
    border-top: 1px solid var(--brand-border);
    color: var(--brand-ink);
}

.content-header > h1 {
    color: var(--brand-green);
}

/* ------------------------------------------------------------- controls */

.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green-dark) !important;
    color: #fff !important;
}

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

.btn-info {
    background-color: var(--brand-gold) !important;
    border-color: var(--brand-gold-dark) !important;
    color: #fff !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: var(--brand-gold-dark) !important;
    border-color: var(--brand-gold-dark) !important;
}

.btn-default {
    background-color: var(--brand-cream);
    border-color: var(--brand-border);
    color: var(--brand-ink);
}

.btn-default:hover,
.btn-default:focus {
    background-color: #efe9d2;
    border-color: var(--brand-gold);
    color: var(--brand-ink);
}

.form-control:focus,
.input-filed:focus {
    border-color: var(--brand-green-soft) !important;
    box-shadow: 0 0 0 2px rgba(45, 61, 44, .12) !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--brand-green-soft) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green-dark) !important;
    color: #fff !important;
}

a {
    color: var(--brand-green);
}

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

/* --------------------------------------------------------------- panels */

.box.box-primary {
    border-top-color: var(--brand-green);
}

.box.box-info {
    border-top-color: var(--brand-gold);
}

.box-header {
    color: var(--brand-green);
}

.bg-primary,
.label-primary,
.modal-header {
    background-color: var(--brand-green) !important;
    color: #fff !important;
}

.modal-header .close {
    color: #fff;
    opacity: .8;
    text-shadow: none;
}

.bg-info {
    background-color: var(--brand-mint) !important;
    color: var(--brand-ink) !important;
}

.label-success,
.bg-green {
    background-color: var(--brand-green-soft) !important;
}

.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: var(--brand-green);
}

.nav-tabs-custom > .nav-tabs > li.active > a {
    color: var(--brand-green);
    font-weight: 600;
}

/* --------------------------------------------------------------- tables */

table thead,
.table > thead > tr > th,
.table-bordered > thead > tr > th {
    background: var(--brand-green) !important;
    color: #fff !important;
    border-color: var(--brand-green-dark) !important;
}

/* Some report/print views deliberately reset the head to white — respect that. */
.table-condensed thead tr th {
    background-color: #fff !important;
    color: var(--brand-ink) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--brand-mint);
}

.table-hover > tbody > tr:hover {
    background-color: var(--brand-cream);
}

/* ----------------------------------------------------------- pagination */

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: #fff !important;
}

.pagination > li > a,
.pagination > li > span {
    color: var(--brand-green);
}

.pagination > li > a:hover {
    background-color: var(--brand-cream);
    border-color: var(--brand-border);
}

/* -------------------------------------------------------- notifications */

.notification-icon {
    color: #fff !important;
}

.notification-dropdown h6 {
    border-bottom: 2px solid var(--brand-green) !important;
    color: var(--brand-green);
}

.notification-btn {
    background: var(--brand-green) !important;
    border-top: 2px solid var(--brand-green-dark) !important;
}

.notification-content::-webkit-scrollbar-thumb:vertical {
    background: var(--brand-green) !important;
}

/* --------------------------------------------------------- misc widgets */

.small-box.bg-aqua,
.small-box.bg-blue {
    background-color: var(--brand-green) !important;
}

.progress-bar-primary,
.progress-bar-aqua {
    background-color: var(--brand-green);
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td span.active {
    background-color: var(--brand-green) !important;
    background-image: none !important;
    color: #fff !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--brand-green) !important;
}

/* ------------------------------------------------- AdminLTE bg-* buttons
 *
 * bg-purple / bg-blue / bg-navy do double duty in this app: action buttons
 * AND categorical status swatches on the dashboard (.info-box-icon). Scope
 * the rebrand to the button and modal-header cases only, so the status
 * tiles keep the distinct hues that make them readable as a set.
 */

.btn.bg-purple,
.btn.bg-blue,
.btn.bg-navy,
.modal-header.bg-purple,
.modal-header.bg-blue {
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green-dark) !important;
    color: #fff !important;
}

.btn.bg-purple:hover,
.btn.bg-blue:hover,
.btn.bg-navy:hover,
.btn.bg-purple:focus,
.btn.bg-blue:focus,
.btn.bg-navy:focus {
    background-color: var(--brand-green-dark) !important;
    color: #fff !important;
}

/* --------------------------------------------------- custom.css leftovers */

.nav-tabs-custom > .nav-tabs {
    border-bottom-color: var(--brand-green) !important;
    border-bottom: 3px solid var(--brand-green) !important;
    background-color: var(--brand-mint) !important;
}

.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active:hover > a {
    background-color: var(--brand-green) !important;
    color: #fff !important;
}

.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: var(--brand-green) !important;
}

.user_name {
    color: var(--brand-green) !important;
}

.from_date,
.to_date {
    border-color: var(--brand-border) !important;
}