/* ============================================================================
   brand.css - the Bamburi primary colour, applied across the whole admin UI.

   File: _public/css/brand.css

   ----------------------------------------------------------------------------
   WHY THIS FILE EXISTS
   ----------------------------------------------------------------------------
   The theme is stock Bootstrap 3 with an AdminLTE-style skin, and both ship a
   blue primary:

       #337ab7   Bootstrap's .btn-primary / links / pagination
       #3c8dbc   AdminLTE's primary (boxes, labels, focus rings)
       #367fa9   AdminLTE's primary, dark (button hover)
       #2185d0   Semantic UI's blue, used by the DataTables theme

   Editing those vendor files would work, but it buries the brand in 160 KB of
   third-party CSS and makes the next colour change another hunt. So every rule
   that paints the PRIMARY is restated here instead, and this sheet is loaded
   LAST (see _app/views/shared/header.php) so the cascade does the rest.

   ----------------------------------------------------------------------------
   WHAT IS DELIBERATELY NOT CHANGED
   ----------------------------------------------------------------------------
   Semantic colours are left alone: success stays green, warning amber, danger
   red, info cyan. A green primary next to a green "success" is fine - a green
   delete button is not.

   One exception, and it is deliberate: `.btn-info` is repainted. In this app it
   is not an informational style - the views use it for their primary actions
   (Save, Add, Edit, Sync) in 33 places, more than they use `.btn-primary`
   itself. Leaving it cyan would have left the loudest buttons in the system
   off-brand. New buttons should use `.btn-primary`; the `.btn-info` call sites
   can be normalised at leisure.

   ----------------------------------------------------------------------------
   CHANGING THE BRAND
   ----------------------------------------------------------------------------
   The three variables below are the whole palette. Everything else derives.
   ========================================================================= */

:root {
    --brand:        #087f5b;                  /* primary */
    --brand-dark:   #06684a;                  /* hover, active, borders */
    --brand-darker: #05543c;                  /* pressed, gradient end */
    --brand-bright: #34d399;                  /* gradient start, glow */
    --brand-tint:   #e6f4ef;                  /* pale fill */
    --brand-line:   #a7e8d3;                  /* pale border */
    --brand-ring:   rgba(8, 127, 91, .25);    /* focus ring */
}


/* ------------------------------------------------------------------ links -- */

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

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

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

.btn-link { color: var(--brand); }

.btn-link:hover,
.btn-link:focus { color: var(--brand-dark); }


/* ------------------------------------------------- text, fills and labels -- */

.text-primary          { color: var(--brand); }
.text-light-blue       { color: var(--brand) !important; }

.bg-primary            { background-color: var(--brand) !important; }
.bg-light-blue,
.label-primary,
.modal-primary .modal-body { background-color: var(--brand) !important; }

.bg-light-blue-gradient {
    background: var(--brand) !important;
    background: linear-gradient(to bottom, var(--brand-bright) 0%, var(--brand-darker) 100%) !important;
}

.bg-blue-gradient {
    background: var(--brand) !important;
    background: linear-gradient(to bottom, var(--brand) 0%, var(--brand-darker) 100%) !important;
}


/* ---------------------------------------------------------------- buttons -- */

.btn-primary,
.btn-primary:focus,
.btn-primary.focus {
    color: #fff;
    background-color: var(--brand);
    border-color: var(--brand-dark);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

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

.btn-primary:active,
.btn-primary.active { background-image: none; box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); }

.btn-primary:active:hover,
.btn-primary.active:hover,
.btn-primary:active:focus,
.btn-primary.active:focus {
    background-color: var(--brand-darker);
    border-color: var(--brand-darker);
}

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

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

/* Used as the primary action by the existing views - see the note at the top. */
.btn-info,
.btn-info:focus,
.btn-info.focus {
    color: #fff;
    background-color: var(--brand);
    border-color: var(--brand-dark);
}

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

.btn-info:active,
.btn-info.active { box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); }

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

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


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

.form-control:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px var(--brand-ring);
}

.input-group-addon { border-color: var(--brand-line); }


/* ------------------------------------------------------------------ navs -- */

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus { background-color: var(--brand); }

.nav-stacked > li.active > a,
.nav-stacked > li.active > a:hover { border-left-color: var(--brand); border-top-color: var(--brand); }

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus { border-top-color: var(--brand); border-bottom-color: var(--brand); }

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

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

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus { border-color: var(--brand); }

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus { background-color: var(--brand); }


/* ----------------------------------------- boxes, panels, lists, progress -- */

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

.box.box-solid.box-primary { border: 1px solid var(--brand); }

.box.box-solid.box-primary > .box-header {
    color: #fff;
    background: var(--brand);
    background-color: var(--brand);
}

.box.box-solid.box-primary > .box-header a,
.box.box-solid.box-primary > .box-header .btn { color: #fff; }

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

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

.panel-primary > .panel-heading + .panel-collapse > .panel-body { border-top-color: var(--brand); }
.panel-primary > .panel-heading .badge { color: var(--brand); background-color: #fff; }
.panel-primary > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: var(--brand); }

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: var(--brand);
    border-color: var(--brand);
}

.list-group-item.active > .badge,
.nav-pills > .active > a > .badge { color: var(--brand); }

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

a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active { border-color: var(--brand); }

.todo-list > li.primary { border-left-color: var(--brand); }

.direct-chat-primary .right > .direct-chat-text {
    background: var(--brand);
    border-color: var(--brand);
}

.direct-chat-primary .right > .direct-chat-text:after,
.direct-chat-primary .right > .direct-chat-text:before { border-left-color: var(--brand); }


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

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

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


/* ------------------------------------ DataTables, which uses Semantic UI -- */

.ui.primary.button,
.ui.primary.buttons .button,
.ui.blue.button,
.ui.blue.buttons .button { background-color: var(--brand); }

.ui.primary.button:hover,
.ui.blue.button:hover { background-color: var(--brand-dark); }

.ui.menu .active.item { color: var(--brand); }

.ui.pagination.menu .active.item { color: var(--brand); border-color: var(--brand); }

.ui.selection.active.dropdown { border-color: var(--brand); }
.ui.selection.active.dropdown .menu { border-color: var(--brand); }

.ui.checkbox input:checked ~ .box:before,
.ui.checkbox input:checked ~ label:before,
.ui.checkbox input:indeterminate ~ .box:before,
.ui.checkbox input:indeterminate ~ label:before {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
}

.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--brand); }


/* --------------------------------------------- sidebar and header accents -- */

/* The sidebar never had an active-row colour, so the page you were on was not
   marked. The primary is a better cue than the near-black the skin uses. */
.sidebar-menu > li.active > a,
.sidebar-menu .treeview-menu > li.active > a {
    color: #fff !important;
    background: var(--brand) !important;
}

.sidebar-menu > li.active > a > .fa,
.sidebar-menu .treeview-menu > li.active > a > .fa { color: #fff; }

/* The user dropdown header was rgb(163,141,122) - a brown that matched nothing. */
.promotions-dark .main-header li.user-header {
    background-color: var(--brand);
    color: #fff !important;
}