/**
 * TECNOVALORE - OVERRIDE ADMINLTE
 * Sovrascrive i colori hardcoded di LTE.css e skin-blue-light.css
 * usando esclusivamente le variabili definite in colors.css.
 *
 * NON modificare LTE.css o skin-blue-light.css direttamente.
 * Per cambiare i colori del tema modificare solo colors.css.
 *
 * Caricato DOPO LTE.css e skin-blue-light.css in index.html.
 */


/* =============================================
   LINK GLOBALI
   ============================================= */

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

a:hover,
a:active,
a:focus {
    color: var(--color-link-hover);
}


/* =============================================
   BODY / CONTENT WRAPPER
   ============================================= */

.content-wrapper {
    background-color: var(--color-content-bg);
}


/* =============================================
   FOOTER
   ============================================= */

.main-footer {
    background: var(--color-footer-bg);
    color: var(--color-footer-text);
    border-top-color: var(--color-footer-border);
}


/* =============================================
   HEADER / NAVBAR  (override skin-blue-light)
   ============================================= */

.skin-blue-light .main-header .navbar {
    background-color: var(--color-header-bg);
}

.skin-blue-light .main-header .navbar .nav > li > a {
    color: var(--color-header-link);
}

.skin-blue-light .main-header .navbar .nav > li > a:hover,
.skin-blue-light .main-header .navbar .nav > li > a:active,
.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: var(--color-header-link-hover-bg);
    color: var(--color-header-link);
}

.skin-blue-light .main-header .navbar .sidebar-toggle {
    color: whitesmoke;
}

.skin-blue-light .main-header .navbar .sidebar-toggle:hover {
    color: var(--color-header-toggle-hover);
    background: var(--color-header-link-hover-bg);
    background-color: var(--color-header-logo-hover-bg);
}

@media (max-width: 767px) {
    .skin-blue-light .main-header .navbar .dropdown-menu li.divider {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .skin-blue-light .main-header .navbar .dropdown-menu li a {
        color: var(--color-header-link);
    }

    .skin-blue-light .main-header .navbar .dropdown-menu li a:hover {
        background: var(--color-header-logo-hover-bg);
    }
}


/* =============================================
   LOGO
   ============================================= */

.skin-blue-light .main-header .logo {
    background-color: var(--color-header-logo-bg);
    color: var(--color-header-text);
    border-bottom: 0 solid transparent;
}

.skin-blue-light .main-header .logo:hover {
    background-color: var(--color-header-logo-hover-bg);
}

.skin-blue-light .main-header li.user-header {
    background-color: var(--color-brand-primary);
}

.skin-blue.layout-top-nav .main-header > .logo,
.skin-blue-light.layout-top-nav .main-header > .logo {
    background-color: var(--color-header-logo-bg);
    color: var(--color-header-text);
}

.skin-blue.layout-top-nav .main-header > .logo:hover,
.skin-blue-light.layout-top-nav .main-header > .logo:hover {
    background-color: var(--color-header-logo-hover-bg);
}


/* =============================================
   SIDEBAR / MENU  (override skin-blue-light)
   ============================================= */

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

.skin-blue-light .main-sidebar {
    border-right: 1px solid var(--color-sidebar-border);
}

.skin-blue-light .user-panel > .info,
.skin-blue-light .user-panel > .info > a {
    color: var(--color-sidebar-link);
}

.skin-blue-light .sidebar-menu > li.header {
    color: var(--color-sidebar-header-text);
    background: var(--color-sidebar-bg);
}

.skin-blue-light .sidebar-menu > li:hover > a,
.skin-blue-light .sidebar-menu > li.active > a {
    color: var(--color-sidebar-link-hover);
    background: var(--color-sidebar-link-hover-bg);
}

.skin-blue-light .sidebar-menu > li.active {
    border-left-color: var(--color-sidebar-active-border);
}

.skin-blue-light .sidebar-menu > li > .treeview-menu {
    background: var(--color-sidebar-submenu-bg);
}

.skin-blue-light .sidebar a {
    color: var(--color-sidebar-link);
}

.skin-blue-light .sidebar-menu .treeview-menu > li > a {
    color: var(--color-sidebar-submenu-link);
}

.skin-blue-light .sidebar-menu .treeview-menu > li.active > a,
.skin-blue-light .sidebar-menu .treeview-menu > li > a:hover {
    color: var(--color-sidebar-link-hover);
}

.skin-blue-light .sidebar-form {
    border: 1px solid var(--color-sidebar-form-border);
}

.skin-blue-light .sidebar-form input[type="text"],
.skin-blue-light .sidebar-form .btn {
    background-color: var(--color-bg-surface);
}

.skin-blue-light .sidebar-form input[type="text"]:focus,
.skin-blue-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
    background-color: var(--color-bg-surface);
}

@media (min-width: 768px) {
    .skin-blue-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
        border-left: 1px solid var(--color-sidebar-border);
    }
}

.skin-blue-light .main-footer {
    border-top-color: var(--color-footer-border);
}

.skin-blue-light .content-header {
    background: transparent;
}