/*

    col-X-1 = 8.333333% (1/12)
    col-X-2 = 16.666667% (2/12)
    col-X-3 = 25% (3/12)
    col-X-4 = 33.333333% (4/12)
    col-X-5 = 41.666667% (5/12)
    col-X-6 = 50% (6/12)
    col-X-7 = 58.333333% (7/12)
    col-X-8 = 66.666667% (8/12)
    col-X-9 = 75% (9/12)
    col-X-10 = 83.333333% (10/12)
    col-X-11 = 91.666667% (11/12)
    col-X-12 = 100% (12/12)

    col-X cellulare
    sm cellulare orizzontale o tablet piccoli
    md tablet verticale
    lg tablet orizzontale
    xl pc desktop

    w-sm-100 Larghezza 100% solo sugli schermi piccoli (fino a 576px, smartphone).
    w-md-75 Larghezza 75% su schermi medi e grandi (tablet e oltre, da 768px in su).
    
*/


@media (min-width: 576px) {
    .edit-label {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;  /* Equivalente a col-sm-4 */
    }
}

@media (max-width: 767px) {
    .movimento-detail {
        display: block;
    }

    .fixed-cart-button {
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(15px) saturate(180%);
        -webkit-backdrop-filter: blur(15px) saturate(180%);
        padding: 15px;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        text-align: center;
    }
/*
    .fixed-cart-button {
        left: 0;
        right: 0;
        bottom: 0;
        padding: 12px 15px;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        border-radius: 0;
        text-align: center;
    }
*/
}

@media (min-width: 768px) {
    .edit-label {
        flex: 0 0 25%;
        max-width: 25%;  /* Equivalente a col-md-3 */
    }
}

@media (min-width: 992px) {
    .edit-label {
        flex: 0 0 30%;
        max-width: 30%;  /* Equivalente a col-lg-3 */
    }
}

@media (min-width: 1200px) {
    .edit-label {
        flex: 0 0 16.6667%;
        max-width: 16.6667%;  /* Equivalente a col-xl-2 */
    }
}

/* bottone submit sempre in primo piano */
.fixed-cart-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.fixed-cart-button button {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.img-container {
    width: 90px;
    height: 90px;
    min-width: 90px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-preview {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tabella-articoli .img-link {
    display: contents;
}

/* switch piu' piccolo */
.switch-small input[data-switch] + label {
    width: 32px;
    height: 16px;
}

.switch-small input[data-switch] + label:after {
    width: 12px;
    height: 12px;
    top: 2px;
    left: 2px;
}

.switch-small input[data-switch]:checked + label:after {
    left: 18px;
}


/*****************/
/* cambi globali */
/*****************/
:root {
    /* PRIMARY COLOR */
    --ct-primary: rgb(59, 123, 13);
    --ct-primary-rgb: 59, 123, 13;

    /* BUTTONS */
    --ct-btn-primary-bg: rgb(59, 123, 13);
    --ct-btn-primary-border: rgb(59, 123, 13);
    --ct-btn-primary-hover-bg: rgb(49, 103, 10);
    --ct-btn-primary-hover-border: rgb(49, 103, 10);
    --ct-btn-primary-active-bg: rgb(43, 92, 9);
    --ct-btn-primary-active-border: rgb(43, 92, 9);
    --ct-btn-primary-disabled-bg: rgb(59, 123, 13);
    --ct-btn-primary-disabled-border: rgb(59, 123, 13);

    /* NAV PILLS / TABS */
    --ct-nav-pills-link-active-bg: rgb(59, 123, 13);
    --ct-nav-pills-link-active-color: #fff;

    --ct-nav-tabs-link-active-color: rgb(59, 123, 13);
    --ct-nav-tabs-link-active-border-color: rgb(59, 123, 13);

    /* BADGES */
    --ct-badge-primary-bg: rgb(59, 123, 13);

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

    /* ROW SELECTED */
    --color-selected-odd-light: #e6ff00;
    --color-selected-even-light: #d4eb00;
    --color-selected-odd-dark: #747f00;
    --color-selected-even-dark: #687100;

    /* ROW ALERT */
    --color-alert-odd-light:  #ff9bb8;
    --color-alert-even-light: #f2a3b8;
/*     --color-alert-odd-light:  #ff4d4d; */
/*     --color-alert-even-light: #e64545; */
    --color-alert-odd-dark:  #7f3a3a;
    --color-alert-even-dark: #703232;
/*     --color-alert-odd-dark:  #8c2e2e; */
/*     --color-alert-even-dark: #7a2828; */

}

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

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

.btn-outline-primary {
    color: rgb(59, 123, 13) !important;
    border-color: rgb(59, 123, 13) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: rgb(59, 123, 13) !important;
    border-color: rgb(59, 123, 13) !important;
    color: #fff !important;
}

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

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: rgb(59, 123, 13) !important;
    color: #fff !important;
}

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

.nav-tabs .nav-link.active {
    color: rgb(59, 123, 13) !important;
    border-color: rgb(59, 123, 13) rgb(222, 226, 230) rgb(59, 123, 13) !important;
}

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

.badge-primary,
.bg-primary,
.text-bg-primary {
    background-color: rgb(59, 123, 13) !important;
}

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

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

.text-primary {
    color: rgb(59, 123, 13) !important;
}

.border-primary {
    border-color: rgb(59, 123, 13) !important;
}

.bg-primary {
    background-color: rgb(59, 123, 13) !important;
}

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

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

.dropdown-item.active,
.dropdown-item:active {
    background-color: rgb(59, 123, 13) !important;
    color: #fff !important;
}

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

.page-item.active .page-link {
    background-color: rgb(59, 123, 13) !important;
    border-color: rgb(59, 123, 13) !important;
}

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

.progress-bar {
    background-color: rgb(59, 123, 13) !important;
}

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

/* Forza background e testo bianco per voce attiva */
.side-nav .menuitem-active > a {
    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 i,
.side-nav .menuitem-active > a span {
    color: #ffffff !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 verde 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;
}