/* modali.css — PoliMed src/css */
/* Stili: responsive, media query, overlay modali, paziente */

        /* 1. Modulo Accettazione Paziente (Nasconde a sinistra, Centra al click) */
        #modal-paziente {
            display: none !important;
            position: fixed !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            z-index: 2500 !important;
            width: 900px !important;
            max-width: 95vw !important;
            max-height: 90vh !important;
            background: #fff !important;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
            border-radius: 8px !important;
            overflow-y: auto !important;
            flex-direction: column;
        }

        #modal-paziente.show {
            display: flex !important;
        }

        /* 2. Side Panel Laterale */
        #side-panel {
            position: fixed !important;
            top: 0 !important;
            right: 0 !important;
            height: 100vh !important;
            background: #fff !important;
            z-index: 2400 !important;
            transform: translateX(100%) !important;
            transition: transform 0.2s ease-out !important;
            will-change: transform !important;
            perspective: 1000px !important;
            -webkit-perspective: 1000px !important;
            backface-visibility: hidden !important;
            -webkit-backface-visibility: hidden !important;
        }

        #side-panel.open {
            transform: translateX(0) !important;
        }

        /* 3. Sfondo Oscurato */
        #overlay {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            background: rgba(0, 0, 0, 0.55) !important;
            z-index: 2300 !important;
            opacity: 0 !important;
            pointer-events: none !important;
            transition: opacity 0.22s ease !important;
        }

        #overlay.show {
            opacity: 1 !important;
            pointer-events: auto !important;
        }

        /* ICONE STATO SIDE PANEL - Design Minimal MedOS */
        #sp-status-icons {
            display: flex;
            gap: 6px;
            justify-content: center;
            align-items: center;
            padding: 10px 12px;
            background: #fff;
            border-radius: 10px;
            margin-bottom: 12px;
            border: 1px solid rgba(22, 125, 135, 0.15);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }

        .sp-icon-btn {
            position: relative;
            width: 36px;
            height: 36px;
            border: none !important;
            border-radius: 8px !important;
            background: transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .sp-icon-btn:hover {
            background: rgba(22, 125, 135, 0.08);
            transform: translateY(-2px);
        }

        .sp-icon-btn:active {
            transform: translateY(0) scale(0.95);
        }

        .sp-icon-btn svg {
            width: 22px;
            height: 22px;
            transition: all 0.2s ease;
        }

        /* Stati attivi con sfondo colorato */
        .sp-icon-btn.active-green {
            background: rgba(46, 204, 113, 0.12);
        }

        .sp-icon-btn.active-orange {
            background: rgba(243, 156, 18, 0.12);
        }

        .sp-icon-btn.active-yellow {
            background: rgba(241, 196, 15, 0.12);
        }

        .sp-icon-btn.active-blue {
            background: rgba(52, 152, 219, 0.12);
        }

        .sp-icon-btn.active-red {
            background: rgba(231, 76, 60, 0.12);
        }

        .sp-icon-btn.active-gray {
            background: rgba(127, 140, 141, 0.12);
        }