/* Context Bar globale (header) */

.mc-context-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    height: 100%;
    min-width: 0;
}

.mc-context-bar__group {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.mc-context-bar__controls {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.mc-context-bar__select {
    width: auto;
    min-width: 70px;
    max-width: 230px;
    text-overflow: ellipsis;
}

.mc-context-bar__year-btn {
    padding-left: 8px;
    padding-right: 8px;
}

.mc-context-bar__year-btn i {
    padding-right: 0;
}

.mc-context-bar__year-btn:disabled,
#mc_ctx_reset:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: auto;
}

/* Pulsante occhio: mostra/nasconde i rapporti filtrati per preferenza.
   Icona stilizzata discreta: colore tenue, accento arancio solo all'hover */
.mc-ctx-show-hidden-btn {
    flex-shrink: 0;
    padding: 4px 7px;
    color: #fd7e14;
    background-color: transparent;
    border-color: transparent;
    line-height: 1;
}

.mc-ctx-show-hidden-btn:hover {
    background-color: transparent;
    border-color: transparent;
    color: #e96c02;
}

/* Filtro spento (fa-eye-slash): stai già mostrando tutto → grigio neutro */
.mc-ctx-show-hidden-btn--off {
    color: #a1a1b3;
}

.mc-ctx-show-hidden-btn--off:hover {
    color: #74748b;
}

.mc-ctx-show-hidden-btn i {
    padding-right: 0;
}

/* Pulsante reset: sola icona discreta, accento rosso all'hover */
.mc-ctx-reset-btn {
    flex-shrink: 0;
    padding: 4px 7px;
    color: #a1a1b3;
    background-color: transparent;
    border-color: transparent;
    line-height: 1;
}

.mc-ctx-reset-btn:hover {
    background-color: transparent;
    border-color: transparent;
    color: #f64e60;
}

.mc-ctx-reset-btn i {
    padding-right: 0;
}

/* Filtro dinamico delle liste collegate al contesto (include/listContextFilter.php) */
.mc-list-filter__row {
    margin-bottom: 20px;
}

/* Desktop: barra sulla stessa riga dell'header, accanto al logo, senza
   sovrapporsi agli elementi della topbar (tema, assistenza, notifiche, utente) */
@media (min-width: 1025px) {
    .kt-header .kt-header-menu-wrapper {
        display: flex;
        align-items: stretch;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }

    .kt-header .kt-header-menu-wrapper .kt-header-menu {
        display: flex;
        align-items: stretch;
        width: 100%;
        min-width: 0;
    }

    .kt-header .kt-header__topbar {
        flex-shrink: 0;
    }

    .mc-context-bar {
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .mc-context-bar__group--colf .mc-context-bar__select,
    .mc-context-bar__group--datore .mc-context-bar__select {
        flex: 0 1 auto;
    }
}

/* Schermi desktop stretti: riduco gli spazi per non comprimere i select */
@media (min-width: 1025px) and (max-width: 1450px) {
    .mc-context-bar {
        gap: 8px;
    }
}

/* Contenitore mobile della barra: visibile solo sotto i 1025px */
#mc_context_bar_mobile_container {
    display: none;
}

/* Mobile: la barra viene spostata via JS nel contenitore sotto l'header */
@media (max-width: 1024px) {
    #mc_context_bar_mobile_container {
        display: block;
        background: #ffffff;
        box-shadow: 0px 1px 9px -3px rgba(82, 63, 105, 0.1);
    }

    /* prima riga: anno + datore affiancati; seconda riga: dipendente + reset */
    .mc-context-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 15px;
        height: auto;
    }

    .mc-context-bar__group--anno {
        flex: 0 0 auto;
    }

    .mc-context-bar__group--datore {
        flex: 1 1 0;
        min-width: 0;
    }

    /* il dipendente va a capo su una nuova riga, con il reset a fianco */
    .mc-context-bar__group--colf {
        flex: 1 1 calc(100% - 90px);
        min-width: 0;
    }

    .mc-context-bar__group--reset {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .mc-context-bar__controls {
        width: 100%;
        min-width: 0;
    }

    .mc-context-bar__select {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
}