.auto-resize {
    border: 1px solid #ccc;
    padding: 4px 8px;
    font-size: 15px;
    min-width: 50px;
    max-width: 100%;
    transition: width 0.2s ease;
    border-radius: 6px;
}


/* ?? STILE BASE PER TUTTI I PULSANTI */
.btn-custom {
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    padding: 12px 28px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ?? Arancione */
.btn-orange {
    background: linear-gradient(135deg, #ff9800, #f57c00);
}

    .btn-orange:hover {
        background: linear-gradient(135deg, #f57c00, #ef6c00);
        transform: translateY(-2px);
    }

/* ?? Rosso */
.btn-red {
    background: linear-gradient(135deg, #e53935, #c62828);
}

    .btn-red:hover {
        background: linear-gradient(135deg, #c62828, #b71c1c);
        transform: translateY(-2px);
    }

/* ?? Verde chiaro */
.btn-green {
    background: linear-gradient(135deg, #66bb6a, #43a047);
}

    .btn-green:hover {
        background: linear-gradient(135deg, #43a047, #388e3c);
        transform: translateY(-2px);
    }

/* Effetto click */
.btn-custom:active {
    transform: translateY(1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/*  Checkbox professionale e moderna */
.custom-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

    .custom-checkbox input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        width: 22px;
        height: 22px;
        border: 2px solid #bbb;
        border-radius: 6px;
        background-color: #fff;
        position: relative;
        transition: all 0.25s ease;
    }

        .custom-checkbox input[type="checkbox"]:hover {
            border-color: #ff9800; /* colore arancione in hover */
        }

        .custom-checkbox input[type="checkbox"]:checked {
            background-color: #ff9800; /* arancione base */
            border-color: #ff9800;
        }

            .custom-checkbox input[type="checkbox"]:checked::after {
                content: "✓";
                color: white;
                font-size: 15px;
                font-weight: bold;
                position: absolute;
                top: 1px;
                left: 5px;
            }

        .custom-checkbox input[type="checkbox"]:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.3);
        }

    .custom-checkbox span {
        transition: color 0.3s ease;
    }

    .custom-checkbox input[type="checkbox"]:checked + span {
        color: #ff9800;
    }

.select-auto-width {
    width: auto;
    max-width: 100%;
    min-width: 250px; /* opzionale */
}



/* --- SIDEBAR DETTAGLIO PRESENZE --- */
.presenze-sidebar-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    display: none;
    z-index: 1050;
}

.presenze-sidebar {
    position: fixed;
    top: 0;
    right: -500px;
    width: 500px;
    height: 100vh;
    background: white;
    box-shadow: -4px 0 12px rgba(0,0,0,0.25);
    transition: right 0.35s ease;
    padding: 20px;
    overflow-y: auto;
    z-index: 1060;
}

    .presenze-sidebar.open {
        right: 0;
    }

.presenze-sidebar-overlay.show {
    display: block;
}

.navbar .dropdown-menu .dropdown-item i {
    width: 18px;
    text-align: center;
}

/* ======================= GLOBAL OVERLAY ======================= */
.app-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(3px);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.app-overlay-box {
    background: #4a4a4a;
    padding: 35px 55px;
    border-radius: 14px;
    color: white;
    font-size: 20px;
    text-align: center;
}

.app-spinner {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #00c853;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    margin: 0 auto 10px auto;
    animation: appSpin 1s linear infinite;
}

@keyframes appSpin {
    to {
        transform: rotate(360deg);
    }
}