/* style.css */


/*****************/
/* cambi globali */
/*****************/
:root {

    /* BUTTONS */
    --ct-btn-primary-bg: var(--ct-primary);
    --ct-btn-primary-border: var(--ct-primary);
    --ct-btn-primary-hover-bg: color-mix(in srgb, var(--ct-primary) 88%, #000);
    --ct-btn-primary-active-bg: color-mix(in srgb, var(--ct-primary) 78%, #000);
    --ct-btn-primary-hover-border: var(--ct-btn-primary-hover-bg);
    --ct-btn-primary-active-border: var(--ct-btn-primary-active-bg);
    --ct-btn-primary-disabled-bg: var(--ct-primary);
    --ct-btn-primary-disabled-border: var(--ct-primary);

    /* NAV PILLS / TABS */
    --ct-nav-pills-link-active-bg: var(--ct-primary);
    --ct-nav-pills-link-active-color: #fff;

    --ct-nav-tabs-link-active-color: var(--ct-primary);
    --ct-nav-tabs-link-active-border-color: var(--ct-primary);

    /* BADGES */
    --ct-badge-primary-bg: var(--ct-primary);

    /* ALERTS */
    --ct-alert-primary-bg: rgba(var(--ct-primary-rgb), .15);
    --ct-alert-primary-border: var(--ct-primary);
    --ct-alert-primary-color: var(--ct-primary);

}

/* ==========================================================
   BUTTONS
   ========================================================== */

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:disabled,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--ct-primary) !important;
    border-color: var(--ct-primary) !important;
    color: #fff !important;
}

.btn-outline-primary {
    color: var(--ct-primary) !important;
    border-color: var(--ct-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--ct-primary) !important;
    border-color: var(--ct-primary) !important;
    color: #fff !important;
}

/* ==========================================================
   NAV PILLS
   ========================================================== */

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--ct-primary) !important;
    color: #fff !important;
}

/* ==========================================================
   NAV TABS
   ========================================================== */

.nav-tabs .nav-link.active {
    color: var(--ct-primary) !important;
    border-color: var(--ct-primary) rgb(222, 226, 230) var(--ct-primary) !important;
}

/* ==========================================================
   BADGES
   ========================================================== */

.badge-primary,
.bg-primary,
.text-bg-primary {
    background-color: var(--ct-primary) !important;
}

/* Badge lighten del tema Hyper */
.badge-primary-lighten {
    background: rgba(var(--ct-primary-rgb), 0.15) !important;
    color: var(--ct-primary) !important;
}

/* ==========================================================
   TEXT / BORDER UTILITIES
   ========================================================== */

.text-primary {
    color: var(--ct-primary) !important;
}

.border-primary {
    border-color: var(--ct-primary) !important;
}

.bg-primary {
    background-color: var(--ct-primary) !important;
}

/* Focus shadow */
.form-control:focus,
.form-select:focus {
    border-color: var(--ct-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--ct-primary-rgb), .25) !important;
}

/* ==========================================================
   DROPDOWN ACTIVE
   ========================================================== */

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--ct-primary) !important;
    color: #fff !important;
}

/* ==========================================================
   PAGINATION
   ========================================================== */

.page-item.active .page-link {
    background-color: var(--ct-primary) !important;
    border-color: var(--ct-primary) !important;
}

/* ==========================================================
   PROGRESS BAR
   ========================================================== */

.progress-bar {
    background-color: var(--ct-primary) !important;
}

/* ==========================================================
   SIDEBAR MENU ACTIVE - Sovrascrivi variabili Hyper
   ========================================================== */
html[data-menu-color="light"]:not([data-bs-theme="dark"]) {
    --ct-menu-item-active-color: var(--ct-primary) !important;
}

html[data-sidenav-size="condensed"] .side-nav .side-nav-item:hover .side-nav-link,
html[data-sidenav-size="condensed"] .side-nav .side-nav-item:hover .side-nav-link i {
    background: var(--ct-menu-bg, #fff) !important;
    color: var(--ct-menu-item-active-color, var(--ct-primary)) !important;
}

.side-nav .menuitem-active > a:not([data-bs-toggle="collapse"]) {
    background-color: var(--ct-primary) !important;
    color: #ffffff !important;
    border-left: 3px solid var(--ct-btn-primary-hover-bg) !important;
}

.side-nav .menuitem-active > a:not([data-bs-toggle="collapse"]) i,
.side-nav .menuitem-active > a:not([data-bs-toggle="collapse"]) span {
    color: #fff !important;
}

/* Hover su voci non attive */
.side-nav .side-nav-link:hover:not(.menuitem-active > a) {
    background-color: rgba(var(--ct-primary-rgb), 0.08) !important;
}

/* ==========================================================
   SWITCH - Colore personalizzato per tutti gli switch
   ========================================================== */

/* Switch con data-switch="success" - stato checked */
input[data-switch="success"]:checked + label {
    background-color: var(--ct-primary) !important;
    border-color: var(--ct-primary) !important;
}

input[data-switch="success"]:checked + label:before {
    background-color: var(--ct-primary) !important;
}

input[data-switch="success"]:checked + label:after {
    background-color: #fff !important;
}

/* Hover */
input[data-switch="success"]:hover + label {
    border-color: var(--ct-primary) !important;
}

input[data-switch="success"]:checked:hover + label {
    background-color: var(--ct-btn-primary-hover-bg) !important;
    border-color: var(--ct-btn-primary-hover-bg) !important;
}

/* Focus */
input[data-switch="success"]:focus + label {
    box-shadow: 0 0 0 0.2rem rgba(var(--ct-primary-rgb), 0.25) !important;
    border-color: var(--ct-primary) !important;
}

/* Active/Pressed */
input[data-switch="success"]:checked:active + label {
    background-color: var(--ct-btn-primary-active-bg) !important;
    border-color: var(--ct-btn-primary-active-bg) !important;
}

/* Disabled */
input[data-switch="success"]:checked:disabled + label {
    background-color: var(--ct-btn-primary-disabled-bg) !important;
    border-color: var(--ct-btn-primary-disabled-border) !important;
    opacity: 0.65;
}