/*
 * Fancy Fox branding.
 *
 * AdminLTE ships fixed skins (skin-blue, skin-purple...), none of which are the
 * fox orange. Rather than editing the vendor stylesheet, this overrides the few
 * pieces that carry the brand colour, so _all-skins.min.css stays untouched and
 * upgradable.
 *
 * Loaded after AdminLTE and admin.css, so these rules win without !important
 * except where the vendor rule is itself more specific.
 */

:root {
    --ff-orange: #e8721c;        /* fox coat - primary brand */
    --ff-orange-dark: #c25c12;   /* hover / active */
    --ff-orange-light: #f59e4a;  /* highlights */
    --ff-charcoal: #2f3640;      /* sidebar, for contrast against the orange */
}

/* ---------------------------------------------------------------- navbar -- */
.skin-fancyfox .main-header .navbar {
    background-color: #e8721c;
}

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

.skin-fancyfox .main-header .navbar .nav > li > a:hover,
.skin-fancyfox .main-header .navbar .nav > li > a:active,
.skin-fancyfox .main-header .navbar .nav > li > a:focus,
.skin-fancyfox .main-header .navbar .nav .open > a,
.skin-fancyfox .main-header .navbar .nav .open > a:hover,
.skin-fancyfox .main-header .navbar .nav .open > a:focus,
.skin-fancyfox .main-header .navbar .nav > .active > a {
    background: rgba(0, 0, 0, .1);
    color: #fff;
}

.skin-fancyfox .main-header .navbar .sidebar-toggle {
    color: #fff;
}

.skin-fancyfox .main-header .navbar .sidebar-toggle:hover {
    background-color: rgba(0, 0, 0, .1);
}

/* --------------------------------------------------------------- the logo -- */
.skin-fancyfox .main-header .logo {
    background-color: #c25c12;
    color: #fff;
    border-bottom: 0 solid transparent;
    font-weight: 600;
}

.skin-fancyfox .main-header .logo:hover {
    background-color: #b3540f;
}

.skin-fancyfox .main-header li.user-header {
    background-color: #e8721c;
}

/* ------------------------------------------------------------- the sidebar --
   Kept dark rather than orange: a full-height block of saturated orange is
   tiring to read against, and the contrast makes the navbar the brand accent. */
.skin-fancyfox .wrapper,
.skin-fancyfox .main-sidebar,
.skin-fancyfox .left-side {
    background-color: #2f3640;
}

.skin-fancyfox .user-panel > .info,
.skin-fancyfox .user-panel > .info > a {
    color: #fff;
}

.skin-fancyfox .sidebar-menu > li.header {
    color: #8a9099;
    background: #272c34;
}

.skin-fancyfox .sidebar-menu > li > a {
    border-left: 3px solid transparent;
    color: #c3c8d1;
}

.skin-fancyfox .sidebar-menu > li:hover > a,
.skin-fancyfox .sidebar-menu > li.active > a,
.skin-fancyfox .sidebar-menu > li.menu-open > a {
    color: #fff;
    background: #272c34;
    /* The active item picks up the brand colour, tying the two areas together. */
    border-left-color: #e8721c;
}

.skin-fancyfox .sidebar-menu > li > .treeview-menu {
    background: #272c34;
}

.skin-fancyfox .sidebar-menu > li .treeview-menu > li > a {
    color: #a7aeb8;
}

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

.skin-fancyfox .sidebar a {
    color: #c3c8d1;
}

.skin-fancyfox .sidebar a:hover {
    text-decoration: none;
}

.skin-fancyfox .treeview-menu > li.active > a,
.skin-fancyfox .treeview-menu > li > a:hover {
    color: #fff;
}

.skin-fancyfox .sidebar-form {
    border-radius: 3px;
    border: 1px solid #3a414d;
    margin: 10px 10px;
}

/* ---------------------------------------------------------- accent colours --
   The primary box header and buttons follow the brand so a form reads as part
   of the same system as the navbar. */
.skin-fancyfox .box.box-primary {
    border-top-color: #e8721c;
}

.skin-fancyfox .btn-primary {
    background-color: #e8721c;
    border-color: #d0651a;
}

.skin-fancyfox .btn-primary:hover,
.skin-fancyfox .btn-primary:active,
.skin-fancyfox .btn-primary:focus,
.skin-fancyfox .btn-primary.active {
    background-color: #c25c12;
    border-color: #a94f0f;
}

.skin-fancyfox .bg-orange,
.skin-fancyfox .label-primary,
.skin-fancyfox .progress-bar-primary {
    background-color: #e8721c !important;
}

.skin-fancyfox a {
    color: #c25c12;
}

.skin-fancyfox a:hover,
.skin-fancyfox a:focus {
    color: #e8721c;
}

/* The login screen sits outside the admin shell, so it carries the brand on
   its own rather than through the skin class. */
.login-page .login-logo a,
.login-page .login-box-msg {
    color: #c25c12;
}

.login-page .btn-primary,
.login-page .btn-info {
    background-color: #e8721c;
    border-color: #d0651a;
}

.login-page .btn-primary:hover,
.login-page .btn-info:hover {
    background-color: #c25c12;
    border-color: #a94f0f;
}