* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===================================================================
   FULL-HEIGHT APP LAYOUT (All Devices)
   
   Catena flex completa per riempire il viewport su tutti i dispositivi:
   html(100%) → body(flex) → #root → .app → .main-content(scroll)
   =================================================================== */

:root {
    --app-height: 100%;
}

html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overscroll-behavior: none;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #0a1628 0%, #1a2942 100%);
    color: #ffffff;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;               /* body non scrolla MAI - è .main-content che scrolla */
    display: flex;
    flex-direction: column;
    overscroll-behavior: none;
}

#root {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;                  /* Critico per flex overflow */
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
}

/* ===== APP CONTAINER (flex chain link) ===== */
.app {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;                  /* Critico: permette shrink sotto contenuto */
    overflow: hidden;
    width: 100%;
    height: 100%;
}

/* ===== HEADER ===== */
.header {
    background: rgba(10, 22, 40, 0.95);
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    flex-shrink: 0;                 /* NON comprimere header */
}

.header-left h1 {
    font-size: 32px;
    font-weight: 300;
    letter-spacing: 1px;
}

/* Installer badge */
.installer-badge {
    padding: 4px 12px;
    background: rgba(46, 204, 113, 0.2);
    border: 1px solid rgba(46, 204, 113, 0.5);
    border-radius: 12px;
    font-size: 12px;
    color: #2ecc71;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.installer-badge-close {
    background: none;
    border: none;
    color: #2ecc71;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    opacity: 0.7;
}

.header-stats {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.95);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.stat-item svg {
    opacity: 0.8;
    flex-shrink: 0;
}

.header-stats > div {
    white-space: nowrap;
}

.header-left {
    display: flex;
    align-items: center;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Installer button — stile coerente con hamburger di panel.js */
.header-installer-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.header-installer-btn svg {
    width: 18px;
    height: 18px;
}

.header-installer-btn:hover,
.header-installer-btn:active {
    background: rgba(74, 158, 255, 0.2);
    border-color: rgba(74, 158, 255, 0.4);
    color: #fff;
}

.logo {
    height: 40px;
}

/* ===== NAVIGATION ===== */
.navigation {
    background: rgba(10, 22, 40, 0.8);
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;                 /* NON comprimere nav tabs */
}

/* Nasconde scrollbar ma mantiene funzionalità */
.navigation::-webkit-scrollbar {
    height: 0;
    display: none;
}

.nav-tabs {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0 40px;
    min-width: min-content; /* Permette ai tab di estendersi oltre viewport */
}

.nav-tabs li {
    padding: 15px 25px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
    opacity: 0.85;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-tabs li:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.05);
}

.nav-tabs li.active {
    opacity: 1;
    border-bottom-color: #4a9eff;
    color: #fff;
    font-weight: 600;
}

/* ===== CONTENUTO PRINCIPALE ===== */
.main-content {
    padding: 40px;
    padding-bottom: calc(40px + var(--sab, 0px));
    padding-left: calc(40px + var(--sal, 0px));
    padding-right: calc(40px + var(--sar, 0px));
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    flex: 1;                        /* Riempie tutto lo spazio dopo header+nav */
    min-height: 0;                  /* Permette shrink sotto contenuto */
    overflow-y: auto;               /* Scroll QUI, non su body */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;                  /* Flex container per i figli */
    flex-direction: column;
}

/* ===== GRIGLIA AMBIENTI ===== */
.rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

/* Desktop large: limita larghezza card, non full-width */
@media (min-width: 1025px) {
    .rooms-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 340px));
    }
}

@media (min-width: 1400px) {
    .rooms-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
    }
}

.room-card {
    background: linear-gradient(135deg, var(--room-color) 0%, var(--room-color-dark) 100%);
    border-radius: 12px;
    padding: 30px 25px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.room-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.room-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.3s;
}

.room-card:hover::before {
    opacity: 1;
}

.room-icon {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.9;
    color: white;
}

.room-icon .mdi {
    color: white;
}

.room-name {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 10px;
}

.room-info {
    font-size: 13px;
    opacity: 0.9;
}

.room-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 2; /* Sopra il ::before overlay della card */
}

.room-card:hover .room-actions {
    opacity: 1;
}

.icon-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: white;
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.add-room-card {
    border: 3px dashed rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: all 0.3s;
}

.add-room-card:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
}

.add-room-icon {
    font-size: 48px;
    opacity: 0.5;
}

/* ===== VISTA DETTAGLIO AMBIENTE ===== */
.room-detail {
    background: rgba(10, 22, 40, 0.6);
    border-radius: 16px;
    padding: 30px;
    flex: 1;                        /* RIEMPIE tutto lo spazio in main-content */
    display: flex;
    flex-direction: column;
}

.room-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
    flex-shrink: 0;                 /* NON comprimere in flex column */
}

.room-nav-left {
    flex: 1;
    min-width: 180px;
}

.room-nav-center {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 0 0 auto;
    justify-content: center;
}

.room-nav-center h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 300;
    color: white;
    min-width: 150px;
    text-align: center;
}

.room-nav-arrow {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.room-nav-arrow:hover:not(.disabled) {
    background: rgba(74, 158, 255, 0.3);
    border-color: #4a9eff;
    transform: scale(1.1);
}

.room-nav-arrow:active:not(.disabled) {
    transform: scale(0.95);
}

.room-nav-arrow.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.room-nav-arrow svg {
    width: 24px;
    height: 24px;
}

.back-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.back-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.room-detail-actions {
    display: flex;
    gap: 10px;
    flex: 1;
    justify-content: flex-end;
    min-width: 180px;
}

.btn {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
    font-weight: 500;
}

.btn-primary {
    background: #4a9eff;
    color: white;
}

.btn-primary:hover {
    background: #3a8eef;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

.btn-danger {
    background: #e74c3c;
    color: white;
}

.btn-danger:hover {
    background: #c0392b;
}

/* ===== CANVAS PIANTINA =====  */
.floorplan-container {
    position: relative;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    overflow: hidden;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: pan-y; /* ★ Permetti scroll verticale di default, solo editMode disabilita */
}

/* In edit mode: blocca scroll per permettere drag dispositivi */
.floorplan-container.edit-mode-active {
    touch-action: none;
}

/* CONTAINER SENZA PIANTINA - Sfondo trasparente */
.floorplan-container.no-floorplan-container {
    background: transparent !important;
    min-height: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.floorplan-container.no-floorplan-container .floorplan-canvas {
    background: transparent !important;
    background-color: transparent !important;
    height: auto !important;
}

.floorplan-canvas {
    position: relative;
    width: 100%;
    height: 100%;        /* ★ Cresce col container (era 600px fisso) */
    min-height: 400px;   /* Minimo ragionevole */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Wrapper che mantiene l'aspect ratio dell'immagine */
.floorplan-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

/* ===== LAYOUT GRIGLIA QUANDO NON C'È PIANTINA (tutti i device) ===== */
.floorplan-wrapper.no-floorplan {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: flex-start !important;
    gap: 30px 50px !important;
    padding: 40px !important;
    min-height: 400px;
    background: transparent !important;
}

.floorplan-wrapper.no-floorplan .device-marker {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 !important;
}

/* ICONE senza piantina - STESSI COLORI delle icone con piantina */
.floorplan-wrapper.no-floorplan .device-icon {
    width: 45px !important;
    height: 45px !important;
}

.floorplan-wrapper.no-floorplan .device-icon.off {
    background: rgba(149, 165, 166, 0.7);
}

.floorplan-wrapper.no-floorplan .device-icon.on {
    background: rgba(243, 156, 18, 0.9);
    box-shadow: 0 4px 20px rgba(243, 156, 18, 0.5);
}

/* Icona MDI - stesse dimensioni */
.floorplan-wrapper.no-floorplan .device-icon i,
.floorplan-wrapper.no-floorplan .device-icon .mdi {
    font-size: 28px !important;
}

/* LABEL senza piantina */
.floorplan-wrapper.no-floorplan .device-label {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin-top: 10px !important;
    background: rgba(20, 30, 50, 0.9) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Pulsanti riordino in modalità modifica */
.device-reorder-buttons {
    display: none;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    gap: 4px;
    z-index: 10;
}

.floorplan-wrapper.no-floorplan.edit-mode .device-reorder-buttons {
    display: flex !important;
}

.reorder-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid white;
    background: #3498db;
    color: white;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: all 0.2s;
}

.reorder-btn:hover {
    background: #2980b9;
    transform: scale(1.1);
}

.reorder-btn:disabled {
    background: #7f8c8d;
    cursor: not-allowed;
    opacity: 0.5;
}

.reorder-btn:disabled:hover {
    transform: none;
}

.floorplan-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.7;
}

/* ✅ Sfondo default: riempie tutto il container senza barre */
.floorplan-image.default-background {
    object-fit: cover;
    opacity: 1;
}

.no-floorplan {
    text-align: center;
    padding: 60px;
    opacity: 0.5;
}

.no-floorplan-icon {
    font-size: 80px;
    margin-bottom: 20px;
}

.default-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 10px;
    padding: 20px;
    opacity: 1;
}

.grid-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    transition: all 0.2s;
}

.grid-circle:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.03);
}

/* ===== DISPOSITIVI SULLA PIANTINA ===== */
.device-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    z-index: 10;
}

.device-marker:active {
    cursor: grabbing;
    z-index: 100;
}

.device-marker:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

/* Stile durante il drag - più visibile e reattivo */
.device-marker.dragging {
    transform: translate(-50%, -50%) scale(1.15);
    z-index: 1000;
    transition: none; /* Rimuove transizione durante drag per reattività immediata */
}

.device-marker.dragging .device-icon {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.8);
    opacity: 0.95;
}

/* Edit/delete buttons on markers (positioned in device-marker, outside device-icon) */
.marker-edit-btn {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid white;
    color: white;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    z-index: 20;
    padding: 0;
    transition: transform 0.15s;
    pointer-events: auto;
    touch-action: manipulation;
}
.marker-edit-btn:hover { transform: scale(1.15); }
.marker-edit-btn:active { transform: scale(0.95); }
.marker-delete-btn { background: #e74c3c; top: -6px; left: -6px; }
.marker-rename-btn { background: #4a9eff; top: -6px; right: -6px; }

.device-icon {
    position: relative;
    width: 45px;
    height: 45px;
    background: rgba(149, 165, 166, 0.7); /* Grigio come default (stile OFF) */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff; /* Colore icona bianco */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 3px solid rgba(255, 255, 255, 0.3);
    overflow: hidden; /* ✅ Contiene testo valore sensore dentro il cerchio */
    /* ✅ NO transizioni su background/box-shadow - cambio stato ISTANTANEO */
    transition: width 0.2s, height 0.2s, font-size 0.2s;
}

.device-icon.on {
    background: rgba(243, 156, 18, 0.9);  /* Giallo/arancio */
    box-shadow: 0 4px 20px rgba(243, 156, 18, 0.5);
}

.device-icon.off {
    background: rgba(149, 165, 166, 0.7);
}

/* Feedback visivo toggle - micro pulse */
.device-icon.toggling {
    animation: quickPulse 0.15s ease-out;
}

.device-mobile-toggle.toggling {
    animation: quickPulse 0.15s ease-out;
}

@keyframes quickPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.device-label {
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    padding: 4px 12px;
    border-radius: 12px;
    transition: top 0.2s, font-size 0.2s;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
}

/* ===== LISTA DISPOSITIVI LATERALE ===== */
.devices-sidebar {
    background: rgba(10, 22, 40, 0.6);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

.devices-list {
    display: grid;
    gap: 10px;
}

.device-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
}

.device-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.device-item-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.device-item-icon {
    font-size: 24px;
}

.device-item-info h4 {
    font-size: 14px;
    margin-bottom: 4px;
}

.device-item-info p {
    font-size: 12px;
    opacity: 0.7;
}

/* ===== MODALE ===== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.modal {
    background: linear-gradient(135deg, #1a2942 0%, #0a1628 100%);
    border-radius: 16px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.modal-header h2 {
    font-size: 24px;
    font-weight: 400;
}

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.close-btn:hover {
    opacity: 1;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    opacity: 0.9;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: white;
    font-size: 14px;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #4a9eff;
    background: rgba(255, 255, 255, 0.1);
}

/* Fix colore testo nelle opzioni del select */
.form-group select option {
    background: #1a2942;
    color: white;
    padding: 10px;
}

.form-group select option:hover {
    background: #4a9eff;
}

.color-picker-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
}

.color-preview {
    width: 50px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 25px;
}

/* ===== COLORI PREDEFINITI PER CARD ===== */
.color-cyan { --room-color: #17a2b8; --room-color-dark: #138496; }
.color-purple { --room-color: #9b59b6; --room-color-dark: #8e44ad; }
.color-red { --room-color: #e74c3c; --room-color-dark: #c0392b; }
.color-orange { --room-color: #e67e22; --room-color-dark: #d35400; }
.color-green { --room-color: #27ae60; --room-color-dark: #229954; }
.color-blue { --room-color: #3498db; --room-color-dark: #2980b9; }
.color-yellow { --room-color: #f39c12; --room-color-dark: #e67e22; }
.color-pink { --room-color: #e91e63; --room-color-dark: #c2185b; }
.color-teal { --room-color: #1abc9c; --room-color-dark: #16a085; }
.color-indigo { --room-color: #6366f1; --room-color-dark: #4f46e5; }

/* ===== CONFIGURAZIONE ===== */
.config-section {
    background: rgba(10, 22, 40, 0.6);
    border-radius: 12px;
    padding: 30px;
    max-width: 600px;
}

.config-section h2 {
    margin-bottom: 25px;
    font-weight: 400;
}

.connection-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    margin-top: 15px;
}

.connection-status.connected {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

.connection-status.disconnected {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* ===== UPLOAD AREA ===== */
.upload-area {
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: rgba(255, 255, 255, 0.02);
}

.upload-area:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
}

.upload-area.dragging {
    border-color: #4a9eff;
    background: rgba(74, 158, 255, 0.1);
}

.upload-icon {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.6;
}

/* ===== MATERIAL DESIGN ICONS ===== */
.mdi {
    font-size: inherit;
    line-height: inherit;
}

.room-icon .mdi {
    font-size: 48px;
}

.device-icon .mdi {
    font-size: 28px;
    color: #ffffff;
}

.device-mobile-icon .mdi {
    font-size: 28px;
}

.device-item-icon .mdi {
    font-size: 24px;
}

.icon-btn .mdi {
    font-size: 24px;
}

/* ===== ICON PICKER CATEGORIZZATO ===== */
.icon-categories {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    max-height: 120px;
    overflow-y: auto;
    padding: 5px;
}

.category-tab {
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.category-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(74, 158, 255, 0.3);
}

.category-tab.active {
    background: rgba(74, 158, 255, 0.3);
    border-color: #4a9eff;
    font-weight: 500;
}

.icon-picker-grid {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

.icon-subcategory {
    margin-bottom: 20px;
}

.icon-subcategory:last-child {
    margin-bottom: 0;
}

.icon-subcat-label {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.7;
    margin-bottom: 10px;
    padding-left: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.icon-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.icon-grid .icon-btn {
    transition: all 0.2s;
}

.icon-grid .icon-btn:hover {
    transform: scale(1.1);
    background: rgba(74, 158, 255, 0.2) !important;
}

/* Scrollbar personalizzata per icon picker */
.icon-picker-grid::-webkit-scrollbar,
.icon-categories::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.icon-picker-grid::-webkit-scrollbar-track,
.icon-categories::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.icon-picker-grid::-webkit-scrollbar-thumb,
.icon-categories::-webkit-scrollbar-thumb {
    background: rgba(74, 158, 255, 0.3);
    border-radius: 10px;
}

.icon-picker-grid::-webkit-scrollbar-thumb:hover,
.icon-categories::-webkit-scrollbar-thumb:hover {
    background: rgba(74, 158, 255, 0.5);
}

/* ===== LAYOUT RESPONSIVE - MOBILE FIRST ===== */

/* DEFAULT: MOBILE - Lista dispositivi */
.devices-mobile-list {
    display: block !important;
    padding: 20px;
    flex: 1;                        /* Riempie spazio rimanente in room-detail */
}

.device-mobile-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: nowrap;
}

.device-mobile-item:active {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(0.98);
}

.device-mobile-icon {
    width: 50px;
    height: 50px;
    background: rgba(74, 158, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}

.device-mobile-info {
    flex: 1;
    min-width: 0; /* ✅ Permette text-overflow su flexbox */
}

.device-mobile-name {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 4px;
    /* ✅ Permette max 2 righe prima di troncare */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    max-height: 2.6em; /* 2 righe x line-height 1.3 */
    word-break: break-word;
}

/* ✅ Wrapper per stato + icona info */
.device-mobile-state-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.device-mobile-state {
    font-size: 13px;
    opacity: 0.7;
}

/* ✅ Icona info per mostrare nome completo */
.name-info-btn {
    font-size: 12px;
    cursor: pointer;
    opacity: 0.6;
    flex-shrink: 0;
    padding: 2px;
    transition: opacity 0.2s, transform 0.2s;
}

.name-info-btn:active {
    opacity: 1;
    transform: scale(1.2);
}

/* Small phones (≤380px) */
@media (max-width: 380px) {
    .device-mobile-item {
        padding: 14px 12px;
        gap: 10px;
    }
    
    .device-mobile-icon {
        width: 44px;
        height: 44px;
        font-size: 24px;
    }
    
    .device-mobile-name {
        font-size: 15px;
    }
    
    .device-mobile-toggle {
        transform: scale(0.9);
        transform-origin: right center;
    }
    
    .device-mobile-button-circle {
        width: 44px;
        height: 44px;
    }
    
    .device-mobile-button-circle .mdi {
        font-size: 20px;
    }
    
    .name-info-btn {
        font-size: 11px;
    }
    
    /* Header stats compatto su small phones */
    .header-stats {
        gap: 10px;
        font-size: 11px;
    }
}

.device-mobile-toggle {
    width: 50px;
    height: 28px;
    background: rgba(149, 165, 166, 0.3);
    border-radius: 14px;
    position: relative;
    transition: background 0.1s ease-out; /* Cambio colore veloce */
    flex-shrink: 0;
}

.device-mobile-toggle.on {
    background: rgba(46, 204, 113, 0.4);
}

.toggle-circle {
    width: 24px;
    height: 24px;
    background: #95a5a6;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left 0.2s ease-out, background 0.1s ease-out; /* Movimento fluido, colore veloce */
}

.device-mobile-toggle.on .toggle-circle {
    left: 24px;
    background: #2ecc71;
}

/* Pulsante circolare per button (stile toggle) */
.device-mobile-button-circle {
    width: 50px;
    height: 50px;
    background: rgba(149, 165, 166, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
}

.device-mobile-button-circle:hover {
    background: rgba(46, 204, 113, 0.4);
}

.device-mobile-button-circle:active {
    background: rgba(46, 204, 113, 0.6);
    transform: scale(0.95);
}

.device-mobile-button-circle .mdi {
    font-size: 24px;
    color: #ffffff;
}

.devices-mobile-empty {
    text-align: center;
    padding: 60px 20px;
    opacity: 0.5;
}

.devices-mobile-empty .empty-icon {
    font-size: 80px;
    margin-bottom: 20px;
}

/* Icone draggabili in modalità modifica */
.device-mobile-item.draggable {
    cursor: move;
    border: 2px dashed rgba(74, 158, 255, 0.5);
    background: rgba(74, 158, 255, 0.1);
}

.device-mobile-item.dragging {
    opacity: 0.5;
    transform: scale(1.05);
}

/* Input rinomina in modalità modifica */
.device-mobile-name-edit {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(74, 158, 255, 0.5);
    border-radius: 6px;
    padding: 8px 12px;
    color: white;
    font-size: 16px;
    font-weight: 500;
    width: 100%;
}

.device-mobile-name-edit:focus {
    outline: none;
    border-color: #4a9eff;
    background: rgba(255, 255, 255, 0.15);
}

.device-mobile-drag-handle {
    font-size: 24px;
    opacity: 0.7;
    cursor: move;
    padding: 0 8px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

/* Stili drag mobile */
.device-mobile-item.dragging {
    opacity: 0.6 !important;
    transform: scale(1.05) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
    z-index: 1000 !important;
    position: relative !important;
}

/* Nascondi piantina e sidebar su mobile per default */
.floorplan-container {
    display: none !important;
}

.devices-sidebar {
    display: none !important;
}

/* ===== TABLET E DESKTOP: Mostra piantina, nascondi lista mobile ===== */
@media (min-width: 769px) {
    /* Mostra piantina - flex per centrare + flex:1 per riempire room-detail */
    .floorplan-container {
        display: flex !important;
        flex: 1;
        align-items: center;
        justify-content: center;
    }
    
    /* Canvas deve crescere con il container */
    .floorplan-canvas {
        flex: 1;
        min-height: 0; /* Permette shrink in flex */
    }
    
    /* Mostra sidebar */
    .devices-sidebar {
        display: block !important;
    }
    
    /* Nascondi lista mobile */
    .devices-mobile-list {
        display: none !important;
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Nascondi elementi solo desktop su mobile */
    .hide-on-mobile {
        display: none !important;
    }
    
    .header {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 16px 10px 52px; /* left padding per hamburger panel.js */
        justify-content: space-between;
        align-items: center;
    }
    
    .header-left {
        flex-shrink: 0;
    }
    
    /* Mobile: installer badge compatto */
    .installer-badge {
        font-size: 11px;
        padding: 3px 10px;
        gap: 6px;
    }
    
    /* ★ Mobile: stats centrati, compatti, su una riga */
    .header-stats {
        flex: 1;
        justify-content: center;
        gap: 16px;
        font-size: 13px;
    }
    
    .stat-item {
        gap: 4px;
        justify-content: center;
    }
    
    .rooms-grid {
        grid-template-columns: 1fr;
    }
    
    /* Pulsanti sempre visibili su mobile (no hover) */
    .room-actions {
        opacity: 1 !important;
    }
    
    .room-card {
        min-height: 150px;
    }
    
    .main-content {
        padding: 12px;
        padding-bottom: calc(12px + var(--sab, 0px));
        padding-left: calc(12px + var(--sal, 0px));
        padding-right: calc(12px + var(--sar, 0px));
    }
    
    .nav-tabs {
        padding: 0 12px; /* Padding ridotto su mobile */
    }
    
    /* Header e pulsanti mobile */
    .room-detail-header {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 20px;
    }

    /* Centra "Torna agli ambienti" su mobile */
    .room-nav-left {
        min-width: 0;
        text-align: center;
        display: flex;
        justify-content: center;
    }

    .back-btn {
        font-size: 13px;
        padding: 8px 16px;
        border-radius: 20px;
        opacity: 0.7;
    }

    .room-detail-header h2 {
        font-size: 28px;
        margin: 4px 0;
    }

    .room-detail-actions {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .room-detail-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== RESPONSIVE TABLET ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    .rooms-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .room-actions {
        opacity: 1;
    }
    
    /* ✅ TABLET: Icone e label con sfondo default */
    .floorplan-wrapper.has-default-background .device-icon {
        width: 50px !important;
        height: 50px !important;
        border: 2px solid rgba(255, 255, 255, 0.7) !important;
    }
    
    .floorplan-wrapper.has-default-background .device-icon .mdi,
    .floorplan-wrapper.has-default-background .device-icon i {
        font-size: 28px !important;
    }
    
    .floorplan-wrapper.has-default-background .device-icon.on {
        background: rgba(243, 156, 18, 0.9);
        box-shadow: 0 4px 18px rgba(243, 156, 18, 0.5) !important;
    }
    
    .floorplan-wrapper.has-default-background .device-label {
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin-top: 6px !important;
        font-size: 11px !important;
        max-width: 100px !important;
        padding: 4px 8px !important;
        background: rgba(20, 30, 50, 0.95) !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        text-align: center !important;
        border-radius: 10px !important;
    }
    
    /* Griglia senza piantina su tablet */
    .floorplan-wrapper.no-floorplan {
        gap: 25px 40px !important;
        padding: 30px !important;
    }
    
    .floorplan-wrapper.no-floorplan .device-icon {
        width: 55px !important;
        height: 55px !important;
    }
    
    .floorplan-wrapper.no-floorplan .device-icon .mdi,
    .floorplan-wrapper.no-floorplan .device-icon i {
        font-size: 32px !important;
    }
    
    .floorplan-wrapper.no-floorplan .device-icon.on {
        background: rgba(243, 156, 18, 0.9);
    }
}

/* ===== RESPONSIVE MOBILE PORTRAIT - GRIGLIA SENZA PIANTINA ===== */
@media (max-width: 768px) and (orientation: portrait) {
    .floorplan-wrapper.no-floorplan {
        gap: 20px 30px !important;
        padding: 20px !important;
        min-height: 300px !important;
    }
    
    .floorplan-wrapper.no-floorplan .device-icon {
        width: 52px !important;
        height: 52px !important;
        border: 3px solid rgba(255, 255, 255, 0.6) !important;
    }
    
    .floorplan-wrapper.no-floorplan .device-icon .mdi,
    .floorplan-wrapper.no-floorplan .device-icon i {
        font-size: 30px !important;
    }
    
    .floorplan-wrapper.no-floorplan .device-icon.on {
        background: #f39c12;
        box-shadow: 0 4px 20px rgba(243, 156, 18, 0.5) !important;
    }
    
    .floorplan-wrapper.no-floorplan .device-label {
        font-size: 12px !important;
        max-width: 100px !important;
        background: rgba(20, 30, 50, 0.9) !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        padding: 6px 12px !important;
    }
    
    /* Pulsanti riordino su mobile portrait */
    .floorplan-wrapper.no-floorplan .device-reorder-buttons {
        top: -28px !important;
    }
}

/* ===== RESPONSIVE MOBILE - DISPOSITIVI ===== */
@media (max-width: 768px) {
    .device-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
        border: 2px solid rgba(255, 255, 255, 0.3);
    }
    
    .device-label {
        top: 48px;
        font-size: 10px;
        padding: 2px 8px;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .device-marker:hover {
        transform: translate(-50%, -50%) scale(1.05);
    }
    
    /* Impedisci zoom su double-tap in modalità editing */
    .device-marker {
        touch-action: manipulation; /* Permetti tap ma no double-tap zoom */
    }
    
    /* Solo in edit mode blocca scroll per drag */
    .floorplan-container.edit-mode-active {
        touch-action: none; /* Previene scroll durante drag */
    }
    
    /* Pulsanti più grandi su mobile */
    .room-detail-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .room-detail-actions .btn {
        padding: 10px 16px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    /* Header ultra-compatto su schermi piccoli */
    .header {
        padding: 8px 12px 8px 52px; /* left padding per hamburger panel.js */
        gap: 4px;
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .header-left h1 {
        font-size: 18px;
    }
    
    /* Installer badge su riga dedicata quando attivo */
    .header-left:has(.installer-badge) {
        order: -1;
        width: 100%;
        justify-content: center;
    }
    
    .installer-badge {
        font-size: 10px;
        padding: 3px 8px;
    }
    
    .header-stats {
        font-size: 12px;
        gap: 10px;
    }
    
    .header-right {
        gap: 6px;
    }
    
    .header-installer-btn {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }
    
    .header-installer-btn svg {
        width: 16px;
        height: 16px;
    }
    
    .main-content {
        padding: 8px;
        padding-bottom: calc(8px + var(--sab, 0px));
    }
    
    .nav-tabs {
        padding: 0 8px;
    }
    
    .nav-tabs li {
        padding: 10px 14px;
        font-size: 13px;
    }

    .device-icon {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }
    
    .device-label {
        top: 42px;
        font-size: 9px;
        padding: 2px 6px;
        max-width: 70px;
    }
    
    .room-detail-actions .btn {
        font-size: 11px;
        padding: 8px 10px;
    }
    
    /* Header più compatto */
    .room-detail-header h2 {
        font-size: 20px;
    }
    
    .back-btn {
        font-size: 13px;
        padding: 8px 12px;
    }
    
    /* Navigazione ambienti mobile */
    .room-nav-center {
        order: -1;
        width: 100%;
        justify-content: center;
    }
    
    .room-nav-center h2 {
        font-size: 22px;
        min-width: 100px;
    }
    
    .room-nav-arrow {
        width: 40px;
        height: 40px;
    }
}

/* ===== MOBILE LANDSCAPE: Layout ottimizzato con scroll ===== */
@media (max-width: 1024px) and (orientation: landscape) {
    /* ★ FIX SCROLL: main-content resta il contenitore di scroll.
       Su Android WebView, spostare lo scroll su body non funziona.
       Manteniamo overflow-y su main-content con height flessibile. */
    html {
        position: static !important;
        height: 100% !important;
        overscroll-behavior: auto !important; /* ★ Override base none */
    }
    
    body {
        height: 100% !important;
        overflow: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: auto !important;
    }
    
    #root {
        height: 100% !important;
        overflow: hidden !important;
    }
    
    .app {
        height: 100% !important;
        overflow: hidden !important;
    }
    
    /* Container principale - scroll QUI */
    .main-content:not(.fullscreen-content) {
        padding: 5px !important;
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: auto !important;
        touch-action: pan-y !important;
        flex: 1 !important;
        min-height: 0 !important;
        height: 0 !important; /* Force flex to calculate available height */
    }
    
    /* ★ room-detail: espande per contenere la piantina grande */
    .room-detail:not(.fullscreen) {
        flex: none !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    
    /* Header: sticky con stacking context superiore */
    .room-detail-header {
        padding: 5px 10px !important;
        margin-bottom: 0 !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px 10px !important;
        position: sticky;
        top: 0;
        background: #1a202c !important;
        z-index: 500;                   /* ★ Molto alto - sopra tutto */
        border-bottom: 1px solid rgba(255,255,255,0.15);
        box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    }
    
    /* Nascondi pulsante "Torna agli ambienti" */
    .back-btn {
        display: none !important;
    }
    
    /* Navigazione ambienti compatta */
    .room-nav-center {
        gap: 8px !important;
    }
    
    .room-nav-center h2 {
        font-size: 16px !important;
        min-width: auto !important;
    }
    
    .room-nav-arrow {
        width: 30px !important;
        height: 30px !important;
        padding: 5px !important;
    }
    
    .room-nav-arrow svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    /* Pulsanti azioni - distribuiti a larghezza piena in landscape */
    .room-detail-actions {
        display: flex !important;
        flex-wrap: wrap;
        gap: 6px !important;
        justify-content: center;
        width: 100%;
        order: 10;
    }
    
    .room-detail-actions .btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        text-align: center;
    }
    
    .room-detail-actions .btn.fullscreen-btn {
        flex: 0 0 auto;
    }
    
    .room-nav-left {
        flex: 0 0 auto !important;
        min-width: auto !important;
    }
    
    /* Show edit buttons also in landscape - override hide-on-mobile for wider landscape */
    .room-detail-actions .hide-on-mobile {
        display: flex !important;
    }
    
    /* PIANTINA MOLTO GRANDE - scroll necessario */
    .floorplan-container {
        display: flex !important;
        min-height: 120vh !important;
        height: auto !important;
        border-radius: 8px;
        margin: 0 !important;
        overflow: visible !important;
        touch-action: pan-y !important;
        position: relative !important;
        z-index: 1 !important;          /* ★ Stacking context basso - header z-index 500 sta sopra */
        isolation: isolate !important;   /* ★ Crea stacking context: figli non escono */
    }
    
    .floorplan-canvas {
        width: 100% !important;
        min-height: 120vh !important;
        height: auto !important;
        touch-action: pan-y !important;
    }
    
    .floorplan-wrapper {
        touch-action: pan-y !important;
    }
    
    .floorplan-image {
        opacity: 0.92 !important;
        touch-action: pan-y !important;
        pointer-events: none !important; /* ★ Immagine non intercetta tocchi */
    }
    
    /* ★ Device markers: permettono scroll verticale passante */
    .device-marker {
        touch-action: pan-y !important;
    }
    
    .device-icon {
        touch-action: pan-y !important;
    }
    
    /* NASCONDI COMPLETAMENTE GRIGLIA DEFAULT */
    .default-grid {
        display: none !important;
    }
    
    /* Nascondi lista mobile in landscape */
    .devices-mobile-list {
        display: none !important;
    }
    
    /* Icone più grandi senza label */
    .device-marker {
        transform: translate(-50%, -50%) !important;
        touch-action: pan-y !important; /* PERMETTE SCROLL VERTICALE */
    }
    
    .device-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 19px !important;
        border-width: 2px !important;
        box-shadow: 0 3px 12px rgba(0,0,0,0.5) !important;
        touch-action: pan-y !important; /* PERMETTE SCROLL VERTICALE */
    }
    
    /* Nascondi label SOLO quando c'è piantina vera (non per sfondo default) */
    .floorplan-wrapper:not(.no-floorplan):not(.has-default-background) .device-label {
        display: none !important;
    }
    
    /* ✅ Mostra label con sfondo default - CENTRATO */
    .floorplan-wrapper.has-default-background .device-marker {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .floorplan-wrapper.has-default-background .device-label {
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin-top: 6px !important;
        font-size: 11px !important;
        width: 100px !important;
        max-width: 100px !important;
        padding: 4px 8px !important;
        background: rgba(20, 30, 50, 0.95) !important;
        color: #ffffff !important;
        font-weight: 500 !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        border-radius: 8px !important;
    }
    
    /* Pulsanti edit più piccoli */
    .device-icon button {
        width: 18px !important;
        height: 18px !important;
        font-size: 9px !important;
        top: -7px !important;
    }
    
    /* Nascondi header HA */
    .header {
        display: none !important;
    }
    
    /* Nascondi navigation tabs */
    .nav-tabs {
        display: none !important;
    }
}

/* ===== MOBILE LANDSCAPE SENZA PIANTINA: Layout griglia ===== */
@media (max-width: 1024px) and (orientation: landscape) {
    /* Wrapper senza piantina - usa flexbox con gap maggiore */
    .floorplan-wrapper.no-floorplan {
        min-height: 50vh !important;
        gap: 20px 35px !important;
        padding: 15px 25px !important;
    }
    
    /* ✅ SMARTPHONE LANDSCAPE: Icone e label con sfondo default */
    .floorplan-wrapper.has-default-background .device-marker {
        /* Centra il marker per allineare label */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .floorplan-wrapper.has-default-background .device-icon {
        width: 40px !important;
        height: 40px !important;
        border: 2px solid rgba(255, 255, 255, 0.7) !important;
    }
    
    .floorplan-wrapper.has-default-background .device-icon .mdi,
    .floorplan-wrapper.has-default-background .device-icon i {
        font-size: 22px !important;
    }
    
    .floorplan-wrapper.has-default-background .device-icon.on {
        background: rgba(243, 156, 18, 0.9);
        box-shadow: 0 3px 15px rgba(243, 156, 18, 0.5) !important;
    }
    
    .floorplan-wrapper.has-default-background .device-label {
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin-top: 5px !important;
        font-size: 10px !important;
        width: 90px !important;
        max-width: 90px !important;
        padding: 3px 5px !important;
        background: rgba(20, 30, 50, 0.95) !important;
        color: #ffffff !important;
        font-weight: 500 !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        border-radius: 6px !important;
    }
    
    /* Icone su mobile landscape */
    .floorplan-wrapper.no-floorplan .device-icon {
        width: 44px !important;
        height: 44px !important;
        border: 2px solid rgba(255, 255, 255, 0.7) !important;
    }
    
    .floorplan-wrapper.no-floorplan .device-icon .mdi,
    .floorplan-wrapper.no-floorplan .device-icon i {
        font-size: 26px !important;
    }
    
    .floorplan-wrapper.no-floorplan .device-icon.on {
        background: rgba(243, 156, 18, 0.9);
        box-shadow: 0 4px 20px rgba(243, 156, 18, 0.5) !important;
    }
    
    /* Label più compatte - MOSTRA con display block */
    .floorplan-wrapper.no-floorplan .device-label {
        display: block !important;
        font-size: 11px !important;
        max-width: 100px !important;
        margin-top: 8px !important;
        padding: 5px 10px !important;
        background: rgba(20, 30, 50, 0.9) !important;
        color: #ffffff !important;
        font-weight: 600 !important;
    }
    
    /* Pulsanti riordino più piccoli */
    .floorplan-wrapper.no-floorplan .device-reorder-buttons {
        top: -25px !important;
    }
    
    .floorplan-wrapper.no-floorplan .reorder-btn {
        width: 20px !important;
        height: 20px !important;
        font-size: 11px !important;
    }
    
    /* Scenari/Programmazioni senza piantina su mobile landscape */
    .scene-devices-desktop-grid .floorplan-wrapper.no-floorplan {
        gap: 15px 30px !important;
        padding: 15px !important;
    }
    
    .scene-devices-desktop-grid .floorplan-wrapper.no-floorplan .device-icon {
        width: 40px !important;
        height: 40px !important;
        /* Colori gestiti dagli stili inline nel JSX */
    }
    
    .scene-devices-desktop-grid .floorplan-wrapper.no-floorplan .device-icon .mdi,
    .scene-devices-desktop-grid .floorplan-wrapper.no-floorplan .device-icon i {
        font-size: 24px !important;
    }
    
    .scene-devices-desktop-grid .floorplan-wrapper.no-floorplan .device-label {
        display: block !important;
        font-size: 10px !important;
        max-width: 90px !important;
        background: rgba(20, 30, 50, 0.9) !important;
        color: #ffffff !important;
    }
}

/* ===== MODAL ENTITY CONTROL ===== */

.entity-modal {
    background: linear-gradient(135deg, #1a2942 0%, #0a1628 100%);
    border-radius: 20px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
    position: relative;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

/* ===== CLIMATE CONTROL STILE HOME ASSISTANT ===== */
.climate-control-ha {
    padding: 20px;
}

.climate-control-ha h3 {
    margin: 0 0 20px 0;
    font-size: 22px;
    text-align: center;
    color: #4a9eff;
}

.climate-circle-container {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto 20px;
    touch-action: none;
    user-select: none;
}

.climate-circle-svg {
    width: 100%;
    height: 100%;
}

.climate-arc {
    transition: stroke-dasharray 0.3s ease, stroke 0.3s ease;
}

.climate-handle {
    cursor: grab;
}

.climate-handle:active {
    cursor: grabbing;
}

.climate-center-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.climate-status-label {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.climate-setpoint-temp {
    font-size: 56px;
    font-weight: 300;
    line-height: 1;
    color: white;
}

.climate-setpoint-temp .climate-temp-unit {
    font-size: 24px;
    opacity: 0.7;
    vertical-align: super;
}

.climate-current-small {
    font-size: 14px;
    opacity: 0.6;
    margin-top: 8px;
}

.climate-temp-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
}

.climate-temp-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.climate-temp-btn:hover {
    background: rgba(74, 158, 255, 0.3);
    border-color: #4a9eff;
    transform: scale(1.1);
}

.climate-temp-btn:active {
    transform: scale(0.95);
}

.climate-temp-btn svg {
    width: 24px;
    height: 24px;
}

.climate-temp-range {
    font-size: 14px;
    opacity: 0.5;
    min-width: 80px;
    text-align: center;
}

.climate-modes-ha {
    margin-top: 20px;
}

.climate-modes-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.climate-mode-btn-ha {
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    width: 52px;
    height: 52px;
    cursor: pointer;
    transition: all 0.2s;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.climate-mode-btn-ha:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.climate-mode-btn-ha.active {
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
}

.mode-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mode-btn-icon svg {
    width: 24px;
    height: 24px;
}

/* Fan mode section */
.climate-fan-section {
    width: 100%;
    margin-top: 12px;
}

.climate-fan-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    justify-content: center;
}

.climate-fan-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.climate-fan-btn {
    padding: 7px 16px;
    border-radius: 20px;
    border: 1.5px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.02em;
}

.climate-fan-btn:hover {
    background: rgba(255,255,255,0.13);
    color: #fff;
    border-color: rgba(255,255,255,0.35);
}

.climate-fan-btn.active {
    color: white;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}

/* Responsive climate control */
@media (max-width: 480px) {
    .climate-circle-container {
        width: 180px;
        height: 180px;
    }
    
    .climate-setpoint-temp {
        font-size: 44px;
    }
    
    .climate-setpoint-temp .climate-temp-unit {
        font-size: 18px;
    }
    
    .climate-current-small {
        font-size: 12px;
    }
    
    .climate-temp-btn {
        width: 42px;
        height: 42px;
    }
    
    .climate-mode-btn-ha {
        width: 46px;
        height: 46px;
    }
    
    .mode-btn-icon svg {
        width: 20px;
        height: 20px;
    }
}

/* ===== CLIMATE CONTROL (Vecchio - da rimuovere) ===== */
.climate-control h3,
.light-control h3,
.cover-control h3,
.fan-control h3,
.media-control h3,
.lock-control h3,
.generic-control h3 {
    margin: 0 0 25px 0;
    font-size: 24px;
    text-align: center;
    color: #4a9eff;
}

.climate-current {
    text-align: center;
    margin-bottom: 30px;
}

.temp-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
}

.temp-value {
    font-size: 64px;
    font-weight: 200;
    color: #4a9eff;
}

.temp-unit {
    font-size: 32px;
    opacity: 0.7;
}

.temp-label {
    margin-top: 10px;
    opacity: 0.7;
    font-size: 14px;
}

.climate-setpoint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    background: rgba(74, 158, 255, 0.1);
    padding: 20px;
    border-radius: 15px;
}

.temp-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(74, 158, 255, 0.3);
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s;
}

.temp-btn:hover {
    background: rgba(74, 158, 255, 0.5);
    transform: scale(1.1);
}

.temp-btn:active {
    transform: scale(0.95);
}

.setpoint-display {
    text-align: center;
}

.setpoint-value {
    font-size: 48px;
    font-weight: 300;
    display: block;
    color: white;
}

.setpoint-unit {
    font-size: 20px;
    opacity: 0.7;
    margin-left: 5px;
}

.setpoint-label {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 5px;
}

.climate-modes {
    margin-top: 25px;
}

.modes-label {
    font-size: 14px;
    opacity: 0.7;
    margin-bottom: 15px;
    text-align: center;
}

.modes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.mode-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 15px 10px;
    cursor: pointer;
    transition: all 0.2s;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.mode-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(74, 158, 255, 0.3);
}

.mode-btn.active {
    background: rgba(74, 158, 255, 0.3);
    border-color: #4a9eff;
}

.mode-icon {
    font-size: 28px;
}

.mode-label {
    font-size: 12px;
    opacity: 0.9;
}

/* ===== LIGHT CONTROL ===== */
.light-toggle {
    text-align: center;
    margin-bottom: 30px;
}

.toggle-btn {
    padding: 20px 40px;
    border-radius: 50px;
    border: none;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.toggle-btn.on {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    color: white;
}

.toggle-btn.off {
    background: rgba(255, 255, 255, 0.1);
    color: #95a5a6;
}

.toggle-btn:hover {
    transform: scale(1.05);
}

.toggle-icon {
    font-size: 32px;
}

/* ===== LIGHT CONTROL STILE HOME ASSISTANT ===== */
.light-control-ha {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    min-height: 350px;
}

.light-ha-title {
    margin: 0 0 15px 0;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    text-align: center;
}

.light-ha-header {
    text-align: center;
    margin-bottom: 20px;
}

.light-ha-percentage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.light-ha-icon {
    font-size: 28px;
    transition: opacity 0.3s;
}

.light-ha-value {
    font-size: 56px;
    font-weight: 300;
    transition: color 0.3s;
}

.light-ha-lastchanged {
    font-size: 13px;
    color: #888;
    margin-top: 5px;
}

/* Slider verticale container */
.light-ha-slider-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 15px 0;
}

.light-ha-slider-track {
    position: relative;
    width: 90px;
    height: 200px;
    border-radius: 45px;
    overflow: hidden;
    transition: background 0.15s;
    cursor: pointer;
    touch-action: none;
}

.light-ha-thumb {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 30px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    transition: bottom 0.1s ease-out, background 0.2s;
    pointer-events: none;
}

/* Pulsante Power */
.light-ha-power {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(40, 40, 40, 0.8);
    border: 2px solid #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    margin-top: 15px;
}

.light-ha-power:hover {
    transform: scale(1.1);
    background: rgba(60, 60, 60, 0.9);
}

.light-ha-power.on {
    box-shadow: 0 0 20px rgba(255, 180, 50, 0.4);
}

.light-ha-power.off {
    opacity: 0.7;
}

/* Responsive per tablet */
@media (min-width: 768px) {
    .light-control-ha {
        min-height: 400px;
        padding: 30px;
    }
    
    .light-ha-value {
        font-size: 64px;
    }
    
    .light-ha-slider-track {
        width: 100px;
        height: 240px;
        border-radius: 50px;
    }
    
    .light-ha-thumb {
        width: 80px;
        height: 35px;
    }
}

/* Responsive per PC */
@media (min-width: 1024px) {
    .light-control-ha {
        min-height: 420px;
    }
    
    .light-ha-value {
        font-size: 72px;
    }
    
    .light-ha-slider-track {
        width: 110px;
        height: 260px;
        border-radius: 55px;
    }
    
    .light-ha-thumb {
        width: 90px;
        height: 38px;
    }
    
    .light-ha-power {
        width: 64px;
        height: 64px;
    }
}

.brightness-control,
.fan-speed,
.volume-control {
    margin-top: 25px;
}

.brightness-label,
.speed-label,
.volume-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
}

.brightness-slider,
.speed-slider,
.volume-slider,
.position-slider {
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    -webkit-appearance: none;
}

.brightness-slider::-webkit-slider-thumb,
.speed-slider::-webkit-slider-thumb,
.volume-slider::-webkit-slider-thumb,
.position-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4a9eff;
    cursor: pointer;
    transition: all 0.2s;
}

.brightness-slider::-webkit-slider-thumb:hover,
.speed-slider::-webkit-slider-thumb:hover,
.volume-slider::-webkit-slider-thumb:hover,
.position-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(74, 158, 255, 0.5);
}

/* ===== COVER CONTROL ===== */
/* ===== COVER CONTROL STILE HOME ASSISTANT ===== */
.cover-control-ha {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    min-height: 380px;
}

.cover-ha-title {
    font-size: 16px;
    font-weight: 500;
    color: #94a3b8;
    margin-bottom: 15px;
    text-align: center;
}

.cover-ha-header {
    text-align: center;
    margin-bottom: 20px;
}

.cover-ha-percentage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.cover-ha-icon {
    font-size: 32px;
}

.cover-ha-value {
    font-size: 56px;
    font-weight: 300;
    transition: color 0.3s;
}

.cover-ha-status {
    font-size: 16px;
    color: #94a3b8;
    margin-top: 5px;
}

.cover-ha-lastchanged {
    font-size: 12px;
    color: #64748b;
    margin-top: 5px;
}

/* Slider verticale container */
.cover-ha-slider-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 15px 0;
}

.cover-ha-slider-track {
    position: relative;
    width: 90px;
    height: 200px;
    border-radius: 45px;
    overflow: hidden;
    transition: background 0.15s;
    cursor: pointer;
    touch-action: none;
}

.cover-ha-thumb {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 30px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    transition: bottom 0.1s ease-out, background 0.2s;
    pointer-events: none;
}

/* Labels slider (Aperta/Chiusa) */
.cover-ha-slider-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 200px;
    margin-left: 12px;
    font-size: 11px;
    color: #64748b;
}

.cover-ha-slider-labels .label-top,
.cover-ha-slider-labels .label-bottom {
    padding: 4px 0;
}

.cover-ha-slider-labels .label-top {
    color: #22c55e;
}

.cover-ha-slider-labels .label-bottom {
    color: #64748b;
}

/* Indicatore motore invertito */
.cover-ha-reversed-indicator {
    margin-top: 8px;
    padding: 4px 10px;
    background: rgba(245, 158, 11, 0.15);
    border-radius: 12px;
    font-size: 11px;
    color: #f59e0b;
}

/* Pulsanti Apri/Stop/Chiudi */
.cover-ha-buttons {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    margin-top: 15px;
}

.cover-ha-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px 8px;
    background: rgba(100, 116, 139, 0.3);
    border: 2px solid transparent;
    border-radius: 12px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.cover-ha-btn:hover {
    background: rgba(100, 116, 139, 0.5);
    color: #fff;
}

.cover-ha-btn.active {
    background: rgba(59, 130, 246, 0.3);
    border-color: #3b82f6;
    color: #3b82f6;
}

.cover-ha-btn.stop {
    background: rgba(239, 68, 68, 0.2);
}

.cover-ha-btn.stop:hover {
    background: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

.cover-ha-btn svg {
    opacity: 0.9;
}

/* Responsive per tablet */
@media (min-width: 768px) {
    .cover-control-ha {
        min-height: 420px;
    }
    
    .cover-ha-value {
        font-size: 64px;
    }
    
    .cover-ha-slider-track {
        width: 100px;
        height: 240px;
        border-radius: 50px;
    }
    
    .cover-ha-thumb {
        width: 80px;
        height: 35px;
    }
}

/* Responsive per PC */
@media (min-width: 1024px) {
    .cover-control-ha {
        min-height: 450px;
    }
    
    .cover-ha-value {
        font-size: 72px;
    }
    
    .cover-ha-slider-track {
        width: 110px;
        height: 260px;
        border-radius: 55px;
    }
    
    .cover-ha-thumb {
        width: 90px;
        height: 38px;
    }
}

/* Legacy cover styles (mantenuti per retrocompatibilità) */
.cover-position {
    text-align: center;
    margin-bottom: 30px;
}

.position-value {
    font-size: 72px;
    font-weight: 200;
    color: #4a9eff;
}

.position-label {
    font-size: 18px;
    opacity: 0.7;
    margin-top: 10px;
}

.cover-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
}

.cover-btn {
    flex: 1;
    padding: 15px;
    background: rgba(74, 158, 255, 0.2);
    border: 2px solid rgba(74, 158, 255, 0.3);
    border-radius: 12px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.cover-btn:hover {
    background: rgba(74, 158, 255, 0.3);
    border-color: #4a9eff;
    transform: translateY(-2px);
}

.cover-btn:active {
    transform: translateY(0);
}

.cover-slider-control {
    margin-top: 25px;
}

.slider-label {
    font-size: 14px;
    opacity: 0.7;
    margin-bottom: 10px;
}

/* ===== FAN CONTROL ===== */
.fan-toggle {
    text-align: center;
    margin-bottom: 30px;
}

/* ===== MEDIA PLAYER CONTROL ===== */
.media-info {
    text-align: center;
    margin-bottom: 30px;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 12px;
}

.media-title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 8px;
}

.media-artist {
    font-size: 16px;
    opacity: 0.7;
}

.media-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.media-buttons button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(74, 158, 255, 0.2);
    border: 2px solid rgba(74, 158, 255, 0.3);
    color: white;
    font-size: 28px;
    cursor: pointer;
    transition: all 0.2s;
}

.media-buttons button:hover {
    background: rgba(74, 158, 255, 0.4);
    border-color: #4a9eff;
    transform: scale(1.1);
}

/* ===== LOCK CONTROL ===== */
.lock-status {
    text-align: center;
    margin-bottom: 30px;
}

.lock-icon {
    font-size: 100px;
    margin-bottom: 20px;
}

.lock-icon.locked {
    color: #e74c3c;
}

.lock-icon.unlocked {
    color: #2ecc71;
}

.lock-state {
    font-size: 24px;
    font-weight: 500;
}

.lock-btn {
    width: 100%;
    padding: 20px;
    border-radius: 12px;
    border: none;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s;
    color: white;
}

.lock-btn.lock {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.lock-btn.unlock {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.lock-btn:hover {
    transform: scale(1.05);
}

/* ===== GENERIC CONTROL ===== */
.entity-state {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.state-label {
    font-size: 14px;
    opacity: 0.7;
}

.state-value {
    font-size: 18px;
    font-weight: 500;
    color: #4a9eff;
}

.generic-btn {
    width: 100%;
    padding: 18px;
    border-radius: 12px;
    border: none;
    font-size: 18px;
    cursor: pointer;
    margin-bottom: 20px;
    transition: all 0.2s;
}

.generic-btn.on {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
}

.generic-btn.off {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    color: white;
}

.generic-btn:hover {
    transform: scale(1.02);
}

.entity-attributes {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 12px;
}

.attr-label {
    font-size: 14px;
    opacity: 0.7;
    margin-bottom: 10px;
}

.attr-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px;
}

.attr-row:last-child {
    border-bottom: none;
}

.attr-key {
    opacity: 0.7;
}

.attr-value {
    font-weight: 500;
}

/* ===== RESPONSIVE MODAL ===== */
@media (max-width: 480px) {
    .entity-modal {
        padding: 20px;
        width: 95%;
    }
    
    .temp-value {
        font-size: 48px;
    }
    
    .setpoint-value {
        font-size: 36px;
    }
    
    .modes-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
    
    .position-value {
        font-size: 56px;
    }
}

/* ===== ANIMAZIONI ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.4s ease-out;
}

/* ===== MODAL LARGE (per configurazione entità) ===== */
.modal-large {
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
}

/* ===== SCENE EDITOR ===== */
.scene-editor {
    padding: 20px;
    min-height: 100%;
}

.scene-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.scene-editor-header h2 {
    margin: 0;
    font-size: 24px;
}

.scene-editor-actions {
    display: flex;
    gap: 10px;
}

.back-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.back-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(-3px);
}

/* Riutilizza stili room-card per scene cards */
.scene-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    padding: 30px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 180px;
}

.scene-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.scene-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.05);
    opacity: 0;
    transition: opacity 0.3s;
}

.scene-card:hover::before {
    opacity: 1;
}

/* ===== SCENARI - LISTA MOBILE ===== */
.scene-devices-mobile-list {
    display: none; /* Nascosta di default su desktop */
}

.scene-devices-desktop-grid {
    display: block; /* Visibile di default su desktop */
}

/* Layout griglia per Scenari/Programmazioni senza piantina */
.scene-devices-desktop-grid .floorplan-wrapper.no-floorplan {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: flex-start !important;
    gap: 30px 50px !important;
    padding: 40px !important;
    min-height: 300px;
}

.scene-devices-desktop-grid .floorplan-wrapper.no-floorplan .device-marker {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* ICONE LUMINOSE in Scenari/Programmazioni */
.scene-devices-desktop-grid .floorplan-wrapper.no-floorplan .device-icon {
    opacity: 1 !important;
    width: 45px !important;
    height: 45px !important;
    border: 3px solid rgba(255, 255, 255, 0.7) !important;
}

.scene-devices-desktop-grid .floorplan-wrapper.no-floorplan .device-icon .mdi,
.scene-devices-desktop-grid .floorplan-wrapper.no-floorplan .device-icon i {
    font-size: 28px !important;
    color: #ffffff !important;
}

/* Colori gestiti dagli stili inline nel JSX */

.scene-devices-desktop-grid .floorplan-wrapper.no-floorplan .device-label {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin-top: 10px !important;
    background: rgba(20, 30, 50, 0.9) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.scene-device-mobile-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.scene-device-mobile-item:active {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(0.98);
}

.scene-device-mobile-item.in-scene {
    border: 2px solid #3498db;
    background: rgba(52, 152, 219, 0.1);
}

.scene-device-checkbox {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #3498db;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
}

.scene-device-mobile-item.in-scene .scene-device-checkbox {
    background: #3498db;
    border-color: #3498db;
    color: #fff;
}

.scene-device-mobile-icon {
    width: 50px;
    height: 50px;
    background: rgba(74, 158, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.scene-device-mobile-icon .mdi {
    font-size: 28px;
}

.scene-device-mobile-info {
    flex: 1;
    min-width: 0;
}

.scene-device-mobile-name {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scene-device-mobile-state {
    font-size: 13px;
    opacity: 0.7;
}

.scene-device-config-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    font-size: 20px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
}

.scene-device-config-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.scene-legend-desktop {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    font-size: 12px;
    margin-top: 15px;
}

/* ===== ESPANSIONE AMBIENTE SCENARI ===== */
.scene-room-wrapper {
    /* Default: auto column */
}

.scene-room-wrapper.expanded {
    grid-column: 1 / -1;
}

.scene-room-expansion {
    margin-top: 15px;
    background: rgba(255,255,255,0.05);
    border-radius: 15px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.1);
}

.scene-room-expansion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

/* ===== RESPONSIVE MOBILE - SCENARI ===== */
@media (max-width: 768px) {
    /* Scene Editor - padding ridotto */
    .scene-editor {
        padding: 15px;
    }
    
    /* Header verticale su mobile */
    .scene-editor-header {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
        text-align: center;
    }
    
    .scene-editor-header h2 {
        font-size: 20px;
        order: 1;
    }
    
    .scene-editor-header .back-btn {
        order: 0;
        padding: 8px 15px;
        font-size: 13px;
    }
    
    .scene-editor-header .btn-primary {
        order: 2;
        width: 100%;
        padding: 12px;
        font-size: 15px;
    }
    
    /* Mostra lista mobile, nascondi griglia desktop */
    .scene-devices-mobile-list {
        display: block !important;
    }
    
    .scene-devices-desktop-grid {
        display: none !important;
    }
    
    /* Card ambienti - griglia singola colonna */
    .scene-editor .rooms-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
        padding: 0;
    }
    
    /* Wrapper card - sempre full width su mobile */
    .scene-room-wrapper,
    .scene-room-wrapper.expanded {
        grid-column: 1 !important;
        width: 100%;
        max-width: 100%;
    }
    
    .scene-editor .room-card {
        min-height: 100px;
        padding: 15px;
    }
    
    .scene-editor .room-card .room-icon {
        font-size: 36px;
    }
    
    .scene-editor .room-card .room-name {
        font-size: 16px;
    }
    
    .scene-editor .room-card .room-info {
        font-size: 12px;
    }
    
    /* Espansione ambiente - contenuta nello schermo */
    .scene-editor .rooms-grid > div {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
    
    /* Header espansione più compatto */
    .scene-editor h4 {
        font-size: 15px;
        flex-wrap: wrap;
    }
    
    /* Box espansione */
    .scene-editor .rooms-grid > div > div:last-child {
        margin-top: 10px;
        padding: 15px;
        border-radius: 12px;
    }
    
    /* Pulsanti espansione */
    .scene-editor .btn-small {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    /* Pulsanti più grandi per touch */
    .scene-device-config-btn {
        width: 44px;
        height: 44px;
    }
    
    .scene-device-checkbox {
        width: 28px;
        height: 28px;
    }
    
    /* Info box più compatta */
    .scene-editor > div:nth-child(2) {
        padding: 12px;
        margin-bottom: 15px;
    }
    
    .scene-editor > div:nth-child(2) p {
        font-size: 13px;
        margin: 0;
    }
    
    .scene-editor > div:nth-child(2) p:last-child {
        margin-top: 8px;
    }
    
    /* Titolo "Seleziona Ambiente" */
    .scene-editor > h3 {
        font-size: 16px;
        margin-bottom: 15px;
    }
    
    /* Espansione ambiente mobile */
    .scene-room-expansion {
        margin-top: 10px;
        padding: 15px;
        border-radius: 12px;
    }
    
    .scene-room-expansion-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .scene-room-expansion-header h4 {
        font-size: 15px;
        text-align: center;
    }
    
    .scene-room-expansion-header > div:last-child {
        display: flex;
        gap: 10px;
        justify-content: center;
    }
    
    .scene-room-expansion-header .btn-small {
        flex: 1;
        text-align: center;
    }
    
    /* Lista dispositivi mobile */
    .scene-devices-mobile-list {
        margin-top: 15px;
    }
    
    .scene-device-mobile-item {
        padding: 12px;
        gap: 10px;
    }
    
    .scene-device-mobile-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
    
    .scene-device-mobile-name {
        font-size: 14px;
    }
    
    .scene-device-mobile-state {
        font-size: 12px;
    }
}

/* ===== RESPONSIVE TABLET - SCENARI ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    .scene-editor .rooms-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== SCHEDULE MANAGER STYLES ===== */
.schedule-manager {
    padding: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.schedule-manager.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: rgba(255, 255, 255, 0.6);
}

.schedule-header {
    text-align: center;
    margin-bottom: 25px;
}

.schedule-header h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 24px;
    margin-bottom: 8px;
}

.schedule-header h2 .mdi {
    font-size: 28px;
    color: #4a9eff;
}

.schedule-subtitle {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

/* Tab navigation */
.schedule-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.2);
    padding: 8px;
    border-radius: 12px;
}

.schedule-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.schedule-tab:hover {
    background: rgba(255, 255, 255, 0.05);
}

.schedule-tab.active {
    background: rgba(74, 158, 255, 0.2);
    color: #4a9eff;
}

.schedule-tab .mdi {
    font-size: 18px;
}

/* Lista Programmazioni */
.schedules-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.schedule-item {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 15px;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.schedule-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.schedule-item.disabled {
    opacity: 0.5;
}

.schedule-item-main {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
}

.schedule-time-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(74, 158, 255, 0.2);
    color: #4a9eff;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 600;
    min-width: 90px;
    justify-content: center;
}

.schedule-time-badge .mdi {
    font-size: 16px;
}

.schedule-info {
    flex: 1;
}

.schedule-device-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 4px;
}

.schedule-device-name .mdi {
    font-size: 18px;
}

.schedule-details {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.schedule-item-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Toggle button */
.toggle-btn {
    width: 50px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.toggle-track {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    position: relative;
    transition: background 0.2s ease;
}

.toggle-btn.active .toggle-track {
    background: rgba(74, 158, 255, 0.4);
}

.toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-btn.active .toggle-thumb {
    left: calc(100% - 26px);
    background: #4a9eff;
}

.delete-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 59, 48, 0.1);
    border: none;
    border-radius: 8px;
    color: #ff3b30;
    cursor: pointer;
    transition: all 0.2s ease;
}

.delete-btn:hover {
    background: rgba(255, 59, 48, 0.2);
}

.delete-btn .mdi {
    font-size: 18px;
}

/* Empty state */
.schedule-manager .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.5);
}

.schedule-manager .empty-state .mdi {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.3;
}

.schedule-manager .empty-state h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: white;
}

.schedule-manager .empty-state p {
    margin-bottom: 20px;
}

.schedule-manager .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #4a9eff 0%, #2d7fd3 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.schedule-manager .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(74, 158, 255, 0.4);
}

/* Devices Selection */
.devices-selection {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.device-filter {
    margin-bottom: 10px;
}

.filter-select {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.filter-select:focus {
    outline: none;
    border-color: #4a9eff;
}

.filter-select option {
    background: #2c2c2e;
    color: white;
}

.selection-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    background: rgba(74, 158, 255, 0.1);
    border-radius: 8px;
    color: #4a9eff;
    font-size: 14px;
}

.btn-clear {
    background: none;
    border: none;
    color: #4a9eff;
    cursor: pointer;
    font-size: 13px;
    text-decoration: underline;
}

.devices-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.device-item-select {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.device-item-select:hover {
    background: rgba(255, 255, 255, 0.08);
}

.device-item-select.selected {
    background: rgba(74, 158, 255, 0.1);
    border-color: #4a9eff;
}

.device-icon-wrapper {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.device-icon-wrapper .mdi {
    font-size: 22px;
    color: white;
}

.device-item-select .device-info {
    flex: 1;
}

.device-item-select .device-name {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 2px;
}

.device-item-select .device-entity-id {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}

.check-icon {
    color: #4a9eff;
}

.check-icon .mdi {
    font-size: 24px;
}

/* Create schedule bar */
.create-schedule-bar {
    position: sticky;
    bottom: 0;
    padding: 15px 0;
    background: linear-gradient(to top, rgba(26, 26, 46, 1) 0%, rgba(26, 26, 46, 0.9) 80%, transparent 100%);
    margin-top: 15px;
}

.btn-create-schedule {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    background: linear-gradient(135deg, #4a9eff 0%, #2d7fd3 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-create-schedule:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 158, 255, 0.4);
}

.btn-create-schedule .mdi {
    font-size: 22px;
}

/* Schedule Modal */
.schedule-modal {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.schedule-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.schedule-modal .modal-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    margin: 0;
}

.schedule-modal .modal-header .mdi {
    color: #4a9eff;
}

.schedule-modal .close-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.schedule-modal .close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.schedule-modal .modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.schedule-modal .form-section {
    margin-bottom: 20px;
}

.schedule-modal .form-section label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 10px;
}

.schedule-modal .form-section label .mdi {
    font-size: 18px;
    color: #4a9eff;
}

.selected-devices-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.device-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(74, 158, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    color: #4a9eff;
}

.device-tag .mdi {
    font-size: 14px;
}

.time-input,
.date-input,
.duration-input,
.action-select,
.repeat-select {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: white;
    font-size: 16px;
}

.time-input:focus,
.date-input:focus,
.duration-input:focus,
.action-select:focus,
.repeat-select:focus {
    outline: none;
    border-color: #4a9eff;
}

.action-select,
.repeat-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

.action-select option,
.repeat-select option {
    background: #2c2c2e;
    color: white;
}

.help-text {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

/* Days selector */
.days-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.day-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid transparent;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.day-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.day-btn.active {
    background: rgba(74, 158, 255, 0.2);
    border-color: #4a9eff;
    color: #4a9eff;
}

/* Modal footer */
.schedule-modal .modal-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.schedule-modal .btn-delete {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid rgba(255, 59, 48, 0.3);
    border-radius: 10px;
    color: #ff3b30;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: auto;
}

.schedule-modal .btn-delete:hover {
    background: rgba(255, 59, 48, 0.2);
}

.schedule-modal .btn-cancel {
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.schedule-modal .btn-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
}

.schedule-modal .btn-save {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #4a9eff 0%, #2d7fd3 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.schedule-modal .btn-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(74, 158, 255, 0.4);
}

/* ===== RESPONSIVE SCHEDULE MANAGER ===== */
@media (max-width: 768px) {
    .schedule-manager {
        padding: 15px;
    }

    .schedule-header h2 {
        font-size: 20px;
    }

    .schedule-tabs {
        padding: 6px;
    }

    .schedule-tab {
        padding: 10px 12px;
        font-size: 13px;
    }

    .schedule-item {
        padding: 12px;
        flex-wrap: wrap;
    }

    .schedule-time-badge {
        font-size: 14px;
        padding: 6px 12px;
        min-width: auto;
    }

    .schedule-device-name {
        font-size: 14px;
    }

    .schedule-details {
        font-size: 12px;
    }

    .schedule-item-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .devices-list {
        max-height: 350px;
    }

    .device-item-select {
        padding: 10px 12px;
    }

    .device-icon-wrapper {
        width: 40px;
        height: 40px;
    }

    .schedule-modal {
        width: 95%;
        max-height: 95vh;
    }

    .schedule-modal .modal-header,
    .schedule-modal .modal-content,
    .schedule-modal .modal-footer {
        padding: 15px;
    }

    .days-selector {
        justify-content: center;
    }

    .day-btn {
        width: 40px;
        height: 40px;
    }

    .schedule-modal .modal-footer {
        flex-wrap: wrap;
    }

    .schedule-modal .btn-delete {
        width: 100%;
        justify-content: center;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .schedule-modal .btn-cancel,
    .schedule-modal .btn-save {
        flex: 1;
    }
}

/* ===== VIDEO SURVEILLANCE STYLES ===== */

.video-surveillance-view {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;                        /* RIEMPIE tutto lo spazio in main-content */
    min-height: 0;                  /* Permette shrink in flex context */
    position: relative;
}

/* Video view: espandi oltre il padding del main-content per riempire tutto */
@media (max-width: 768px) {
    .video-surveillance-view {
        margin: -12px;
        width: calc(100% + 24px);
    }
}
@media (min-width: 769px) {
    .video-surveillance-view {
        margin: -40px;
        width: calc(100% + 80px);
    }
}

.video-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background: rgba(10, 22, 40, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.video-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.video-header-left h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 300;
}

.go2rtc-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
}

.go2rtc-status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.go2rtc-status.connected .status-dot {
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
}

.go2rtc-status.disconnected .status-dot {
    background: #ef4444;
}

.video-header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.grid-selector {
    display: flex;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px;
    border-radius: 8px;
}

.grid-selector button {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-selector button:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
}

.grid-selector button.active {
    color: #4a9eff;
    background: rgba(74, 158, 255, 0.15);
}

/* Video Content Area - Flex container for grid + sidebar */
.video-content-area {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

/* Video Grid Layouts */
.video-grid {
    flex: 1;
    display: grid;
    gap: 8px;
    padding: 8px;
    background: linear-gradient(180deg, #0a1628 0%, #0d1f35 100%);
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    isolation: isolate;
}

.video-grid-1x1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.video-grid-2x2 {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
}

.video-grid-3x3 {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
}

.video-grid-4x4 {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
}

/* Camera Player */
.camera-player {
    position: relative;
    background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%);
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    aspect-ratio: 16 / 9;
    min-height: 0;
    /* Isola compositing layer — GPU layers non leakano verso parent */
    contain: layout style paint;
    isolation: isolate;
}

.camera-player:hover {
    border-color: rgba(74, 158, 255, 0.3);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5),
                0 0 20px rgba(74, 158, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Fullscreen nativo */
.camera-player.native-fullscreen {
    border-radius: 0;
    border: none;
    box-shadow: none;
}

.camera-player:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0;
    background: #000;
}

.camera-player:fullscreen .camera-video-container {
    position: absolute;
    inset: 0;
}

.camera-player:fullscreen .camera-iframe {
    width: 100%;
    height: 100%;
}

.camera-player:fullscreen .camera-overlay {
    position: fixed;
    inset: 0;
    z-index: 10;
}

.camera-player:fullscreen .camera-controls {
    position: fixed;
    bottom: 20px;
    right: 20px;
    opacity: 0;
    transition: opacity 0.3s;
}

.camera-player:fullscreen:hover .camera-controls,
.camera-player:fullscreen .camera-controls.visible {
    opacity: 1;
}

.camera-video-container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.camera-video-container iframe.camera-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.camera-loading,
.camera-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    padding: 20px;
}

.camera-error {
    color: #ef4444;
}

.camera-error .btn-small {
    margin-top: 10px;
    padding: 6px 12px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 4px;
    cursor: pointer;
}

.camera-error .btn-small:hover {
    background: rgba(255, 255, 255, 0.2);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #4a9eff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.camera-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.camera-name-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
    padding: 12px 15px;
    font-size: 13px;
    font-weight: 600;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.3px;
}

.camera-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.9); }
}

.camera-controls {
    display: flex;
    gap: 8px;
    padding: 12px;
    justify-content: flex-end;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.3s;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

.camera-player:hover .camera-controls,
.camera-controls.visible {
    opacity: 1;
}

.camera-controls button {
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.camera-controls button:hover {
    background: rgba(74, 158, 255, 0.9);
    border-color: rgba(74, 158, 255, 0.5);
}

.camera-controls button.delete-btn:hover {
    background: rgba(239, 68, 68, 0.9);
    border-color: rgba(239, 68, 68, 0.5);
}

/* Camera List Sidebar */
.camera-list-sidebar {
    position: relative;
    flex-shrink: 0;
    width: 260px;
    background: rgba(10, 22, 40, 0.98);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    z-index: 10;
}

.camera-list-sidebar h4 {
    padding: 15px 20px;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.camera-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.camera-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 5px;
    background: rgba(255, 255, 255, 0.03);
    transition: background 0.15s ease;
}

.camera-list-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.camera-list-item.visible {
    border-left: 3px solid #4a9eff;
    background: rgba(74, 158, 255, 0.1);
}

.camera-list-item.selected {
    border-left: 3px solid #4ade80;
    background: rgba(74, 222, 128, 0.15);
}

.camera-list-item.selected .camera-name {
    font-weight: 600;
}

/* Mobile camera selector dropdown */
.mobile-video-selectors {
    display: flex;
    gap: 6px;
    align-items: center;
}

.mobile-grid-select,
.mobile-camera-select {
    background: rgba(74, 158, 255, 0.15);
    border: 1px solid rgba(74, 158, 255, 0.4);
    border-radius: 8px;
    color: white;
    padding: 6px 28px 6px 10px;
    font-size: 13px;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-grid-select option,
.mobile-camera-select option {
    background: #1a2540;
    color: white;
}

.camera-list-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.camera-list-info .camera-name {
    font-size: 13px;
    color: white;
}

.camera-list-info .camera-group {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

.camera-list-actions {
    display: flex;
    gap: 5px;
}

.camera-list-actions button {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.camera-list-actions button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Empty State */
.video-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: rgba(255, 255, 255, 0.5);
    padding: 40px;
    background: linear-gradient(180deg, #0a1628 0%, #0d1f35 100%);
}

.video-empty-state svg {
    opacity: 0.3;
}

.video-empty-state h3 {
    font-size: 20px;
    font-weight: 400;
    color: white;
}

.video-empty-state p {
    font-size: 14px;
}

/* Fullscreen Modal - Covers entire screen */
/* ===== CAMERA FULLSCREEN IN-PLACE =====
   Lo stesso iframe resta in riproduzione — nessun freeze al ritorno
*/
.camera-player.fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: #000 !important;
    margin: 0 !important;
}

.camera-player.fullscreen .camera-video-container {
    border-radius: 0;
}

.camera-player.fullscreen .camera-iframe {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
}

.camera-player.fullscreen .camera-overlay {
    display: none;
}

.camera-fullscreen-close {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 100;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.camera-fullscreen-close:hover {
    background: rgba(239, 68, 68, 0.8);
}

.camera-fullscreen-close:active {
    background: rgba(239, 68, 68, 0.9);
}

.camera-fullscreen-name {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 100;
    background: rgba(0, 0, 0, 0.75);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 500;
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
}

.camera-fullscreen-name::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
    animation: pulse-dot 2s ease-in-out infinite;
}

/* ===== SNAPSHOT BUTTON ===== */
.snapshot-btn-active {
    background: rgba(59, 130, 246, 0.8) !important;
}

.snapshot-btn-active:hover {
    background: rgba(59, 130, 246, 1) !important;
}

.snapshot-btn-active.loading {
    opacity: 0.7;
    cursor: wait;
}

.snapshot-btn-active.snapshot-success {
    background: rgba(16, 185, 129, 1) !important;
    animation: snapshotFlash 0.5s ease;
}

@keyframes snapshotFlash {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* ===== SNAPSHOTS GALLERY ===== */
.video-header-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.snapshots-gallery-panel {
    background: rgba(30, 41, 59, 0.98);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.snapshots-gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.snapshots-gallery-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 16px;
    color: white;
}

.snapshots-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.storage-info {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
    padding: 5px 12px;
    border-radius: 20px;
}

.snapshots-empty {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.5);
}

.snapshots-empty svg {
    margin-bottom: 15px;
    opacity: 0.5;
}

.snapshots-empty p {
    margin: 5px 0;
}

.snapshots-empty .hint {
    font-size: 13px;
    opacity: 0.7;
}

.snapshots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    max-height: 350px;
    overflow-y: auto;
}

.snapshot-card {
    position: relative;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease;
    border: 2px solid transparent;
}

.snapshot-card:hover {
    border-color: rgba(74, 158, 255, 0.5);
}

.snapshot-card.selected {
    border-color: #4a9eff;
}

.snapshot-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.snapshot-info {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.snapshot-camera {
    font-size: 13px;
    font-weight: 500;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.snapshot-date {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

.snapshot-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.2s;
}

.snapshot-card:hover .snapshot-actions {
    opacity: 1;
}

.snapshot-actions button {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.snapshot-actions button:hover {
    background: rgba(74, 158, 255, 0.8);
}

.snapshot-actions button.delete-btn:hover {
    background: rgba(239, 68, 68, 0.8);
}

/* Snapshot Preview Modal */
.snapshot-preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.snapshot-preview-container {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    background: rgba(30, 41, 59, 0.95);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

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

.snapshot-preview-close {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.snapshot-preview-close:hover {
    background: rgba(239, 68, 68, 0.8);
}

.snapshot-preview-info {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.snapshot-preview-info h4 {
    margin: 0;
    font-size: 16px;
    color: white;
}

.snapshot-preview-info span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.snapshot-preview-actions {
    padding: 0 20px 20px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* ===== PTZ CONTROLS ===== */
.ptz-overlay {
    position: absolute;
    bottom: 50px;
    right: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 15;
    pointer-events: auto;
}

.ptz-pad {
    display: grid;
    grid-template-areas:
        ".    up    ."
        "left center right"
        ".    down  .";
    grid-template-columns: 36px 36px 36px;
    grid-template-rows: 36px 36px 36px;
    gap: 3px;
}

.ptz-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    touch-action: none;
}

.ptz-btn:hover { background: rgba(52, 152, 219, 0.7); }
.ptz-btn:active { background: rgba(52, 152, 219, 0.9); }
.ptz-up { grid-area: up; }
.ptz-left { grid-area: left; }
.ptz-center { grid-area: center; background: rgba(52, 152, 219, 0.4); }
.ptz-center:hover { background: rgba(52, 152, 219, 0.7); }
.ptz-right { grid-area: right; }
.ptz-down { grid-area: down; }

.ptz-zoom {
    display: flex;
    gap: 6px;
}

.ptz-zoom .ptz-btn {
    width: 34px;
    height: 34px;
}

/* ===== AI DESCRIPTION ===== */
.ai-description-box {
    margin: 0 20px;
    padding: 12px 15px;
    background: rgba(52, 152, 219, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.3);
    border-radius: 8px;
}

.ai-desc-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #3498db;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-description-box p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #eee;
}

.snapshot-ai-badge {
    display: inline-block;
    padding: 1px 5px;
    background: rgba(52, 152, 219, 0.3);
    color: #3498db;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.active-btn {
    background: rgba(52, 152, 219, 0.8) !important;
}

/* Camera Config Modal */
.camera-config-modal {
    max-width: 550px;
}

.camera-config-modal .modal-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-row {
    display: flex;
    gap: 15px;
}

.form-row .form-group {
    flex: 1;
}

.mode-toggle {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 3px;
    margin-top: 8px;
}

.mode-toggle button {
    flex: 1;
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s ease, color 0.15s ease;
}

.mode-toggle button:hover {
    color: white;
}

.mode-toggle button.active {
    background: #4a9eff;
    color: white;
}

.input-with-presets {
    display: flex;
    gap: 10px;
}

.input-with-presets input {
    flex: 1;
}

.input-with-presets select {
    width: 120px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    font-size: 13px;
    cursor: pointer;
}

.generated-url {
    background: rgba(0, 0, 0, 0.3);
    padding: 12px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 12px;
    word-break: break-all;
    color: #4a9eff;
}

.test-connection-section {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 10px;
}

.test-connection-section .btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

.test-result {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 6px;
}

.test-result.success {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.test-result.error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.switch-label {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Loading message */
.loading-message {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .video-header {
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }

    .video-header-left {
        width: 100%;
        justify-content: space-between;
    }

    .video-header-left h2 {
        font-size: 18px;
    }

    /* ★ FIX: header-right deve scrollare orizzontalmente, non clippare */
    .video-header-right {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px; /* spazio per scrollbar */
        /* Nascondi scrollbar ma mantieni funzionalità */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .video-header-right::-webkit-scrollbar {
        display: none;
    }

    /* Grid selector compatto su mobile */
    .video-header-right .grid-selector {
        flex-shrink: 0;
    }

    .video-header-buttons {
        display: flex;
        gap: 4px;
        flex-shrink: 0;
        flex-wrap: nowrap;
    }

    .video-header-buttons .btn {
        font-size: 11px;
        padding: 5px 8px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* ★ "Aggiungi" - icona sola su mobile stretto */
    .video-header-buttons .btn-primary {
        flex-shrink: 0;
        padding: 5px 10px;
    }

    /* Su mobile: sempre vista singola (1x1) */
    .video-grid {
        padding: 6px;
        gap: 6px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        align-content: start;
    }

    .video-grid-1x1 {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    /* ── MOBILE: SEMPRE 1x1 ──
       Le griglie multi-camera sono disabilitate su mobile perché:
       1. I riquadri sono troppo piccoli per essere utili
       2. Più iframe WebRTC simultanei esauriscono la GPU memory → crash
       Il selettore griglia è nascosto, l'utente usa il dropdown camera. */

    .camera-player {
        min-height: 0;
        aspect-ratio: 16 / 9;
        transition: none !important;
        transform: none !important;
        contain: layout style paint;
        isolation: isolate;
    }

    .camera-player:hover {
        transform: none;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .video-grid-1x1 .camera-player {
        aspect-ratio: 16 / 9;
    }

    /* Animazioni → statiche su mobile (risparmio GPU) */
    .camera-status-dot {
        animation: none;
        opacity: 1;
    }

    .fullscreen-camera-name::before {
        animation: none;
    }

    /* Touch: controlli sempre visibili */
    .camera-controls {
        opacity: 1;
        background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    }

    .camera-controls button {
        background: rgba(0, 0, 0, 0.85);
        transition: none;
    }

    .camera-controls button:hover,
    .camera-controls button:active {
        transform: none;
    }

    .snapshot-actions {
        opacity: 1;
    }

    .snapshot-actions button {
        transition: none;
    }

    .ptz-btn {
        background: rgba(0, 0, 0, 0.85);
        transition: none;
    }

    .fullscreen-close-btn {
        background: rgba(0, 0, 0, 0.9);
        transition: none;
    }

    .fullscreen-camera-name {
        background: rgba(0, 0, 0, 0.9);
    }

    .snapshot-card {
        transition: none;
    }

    .snapshot-card:hover {
        transform: none;
    }

    .camera-list-sidebar {
        display: none;
    }

    .camera-config-modal {
        width: 95vw;
        max-width: none;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .input-with-presets {
        flex-direction: column;
    }

    .input-with-presets select {
        width: 100%;
    }

    .video-content-area {
        flex-direction: column;
    }

    .snapshots-gallery-panel {
        max-height: 50vh;
    }

    .snapshot-preview-container {
        max-width: 98vw;
        max-height: 95vh;
    }

    .snapshot-preview-actions {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .snapshot-preview-info {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px;
    }
}

/* ── MOBILE LANDSCAPE: fullscreen camera ── */
.video-surveillance-view.mobile-landscape {
    position: fixed;
    inset: 0;
    z-index: 9999;
    margin: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #000;
}

.mobile-landscape .video-header {
    display: none;
}

.mobile-landscape .video-content-area {
    height: 100vh;
}

.mobile-landscape .video-grid {
    padding: 0;
    gap: 0;
    background: #000;
    height: 100vh;
    position: relative; /* per il selettore camera absolute */
}

.mobile-landscape .camera-player {
    border-radius: 0;
    border: none;
    box-shadow: none;
    aspect-ratio: unset;
    height: 100vh;
    width: 100vw;
}

.mobile-landscape .camera-overlay {
    z-index: 10;
}

.mobile-landscape .camera-controls {
    opacity: 1;
    padding: 12px 16px;
}

.mobile-landscape .camera-name-overlay {
    display: none; /* il nome è nel landscape-camera-selector */
}

.mobile-landscape .camera-list-sidebar {
    display: none;
}

/* Selettore camera floating in landscape */
.landscape-camera-selector {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.7);
    padding: 6px 10px;
    border-radius: 24px;
    pointer-events: auto;
}

.landscape-camera-name {
    color: white;
    font-size: 14px;
    font-weight: 500;
    min-width: 80px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.landscape-nav-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.landscape-nav-btn:active {
    background: rgba(74, 158, 255, 0.6);
}

.automation-wizard-steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow-x: auto;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.3s;
    flex-shrink: 0;
}

.wizard-step.active {
    opacity: 1;
}

.wizard-step.completed {
    opacity: 0.8;
}

.wizard-step .step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(155, 89, 182, 0.3);
    border: 2px solid rgba(155, 89, 182, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    transition: all 0.3s;
}

.wizard-step.active .step-number {
    background: #9b59b6;
    border-color: #9b59b6;
    box-shadow: 0 0 20px rgba(155, 89, 182, 0.5);
}

.wizard-step.completed .step-number {
    background: #2ecc71;
    border-color: #2ecc71;
}

.wizard-step .step-info {
    display: flex;
    flex-direction: column;
}

.wizard-step .step-title {
    font-weight: 600;
    font-size: 14px;
}

.wizard-step .step-desc {
    font-size: 11px;
    opacity: 0.7;
}

.wizard-step .step-connector {
    width: 40px;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 10px;
}

/* Step Content */
.automation-step-content {
    min-height: 400px;
}

.step-panel {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 20px;
}

.step-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.step-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    margin-bottom: 5px;
}

.step-header h3 .mdi {
    font-size: 24px;
    color: #9b59b6;
}

.step-header p {
    opacity: 0.7;
    font-size: 14px;
}

/* Items List */
.items-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.item-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.2s;
}

.item-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(155, 89, 182, 0.5);
}

.item-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    background: rgba(155, 89, 182, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.item-icon .mdi {
    font-size: 22px;
    color: #9b59b6;
}

.item-content {
    flex: 1;
    min-width: 0;
}

.item-type {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 3px;
}

.item-desc {
    font-size: 13px;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-actions {
    display: flex;
    gap: 8px;
}

.item-actions .icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.item-actions .icon-btn:hover {
    background: rgba(155, 89, 182, 0.3);
}

.item-actions .icon-btn.danger:hover {
    background: rgba(231, 76, 60, 0.3);
    color: #e74c3c;
}

/* Add Item Button */
.add-item-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 15px;
    background: rgba(155, 89, 182, 0.2);
    border: 2px dashed rgba(155, 89, 182, 0.5);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.add-item-btn:hover {
    background: rgba(155, 89, 182, 0.3);
    border-color: #9b59b6;
}

.add-item-btn .mdi {
    font-size: 20px;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    opacity: 0.6;
}

.empty-state .mdi {
    font-size: 48px;
    margin-bottom: 10px;
    display: block;
}

/* Summary Grid */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.summary-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 15px;
}

.summary-card h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.summary-card h4 .mdi {
    color: #9b59b6;
}

.summary-item {
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.summary-item:last-child {
    border-bottom: none;
}

.summary-item.warning {
    color: #f39c12;
}

/* Automation Options */
.automation-options {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 15px;
}

.automation-options h4 {
    margin-bottom: 15px;
    font-size: 14px;
}

/* Wizard Navigation */
.automation-wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    margin-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-success {
    background: #2ecc71 !important;
    border-color: #2ecc71 !important;
}

.btn-success:hover {
    background: #27ae60 !important;
}

.btn-success:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Automation Modal */
.automation-modal {
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
}

.automation-modal .modal-body {
    padding: 20px;
}

/* Type Selector */
.type-selector {
    padding: 10px 0;
}

.selector-hint {
    font-size: 14px;
    opacity: 0.7;
    margin-bottom: 15px;
}

.type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.type-card:hover {
    background: rgba(155, 89, 182, 0.2);
    border-color: rgba(155, 89, 182, 0.5);
    transform: translateY(-2px);
}

.type-card .mdi {
    font-size: 28px;
    color: #9b59b6;
    margin-bottom: 8px;
}

.type-card .type-label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.type-card .type-desc {
    font-size: 11px;
    opacity: 0.6;
    line-height: 1.3;
}

/* Type Config */
.type-config {
    padding: 10px 0;
}

.config-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.config-header .mdi {
    font-size: 24px;
    color: #9b59b6;
}

.config-header span {
    font-weight: 600;
}

.back-btn-small {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-btn-small:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Form styles within automation modal */
.automation-modal .form-group {
    margin-bottom: 15px;
}

.automation-modal .form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
}

.automation-modal .form-group input,
.automation-modal .form-group select,
.automation-modal .form-group textarea {
    width: 100%;
    padding: 10px 12px;
    background: #2c2c2e;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
}

.automation-modal .form-group input:focus,
.automation-modal .form-group select:focus,
.automation-modal .form-group textarea:focus {
    border-color: #9b59b6;
    outline: none;
}

.automation-modal .form-group select option {
    background: #2c2c2e;
    color: #fff;
}

.automation-modal .form-group textarea {
    resize: vertical;
    min-height: 80px;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 13px;
}

.automation-modal .form-group small {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    opacity: 0.6;
}

/* Responsive */
@media (max-width: 768px) {
    .automation-wizard-steps {
        flex-direction: column;
        gap: 15px;
    }
    
    .wizard-step .step-connector {
        display: none;
    }
    
    .wizard-step .step-info {
        display: block;
    }
    
    .wizard-step .step-desc {
        display: none;
    }
    
    .summary-grid {
        grid-template-columns: 1fr;
    }
    
    .type-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .automation-wizard-nav {
        flex-direction: column;
        gap: 10px;
    }
    
    .automation-wizard-nav .btn {
        width: 100%;
    }
}

/* State Selector Component */
.state-selector-wrapper {
    width: 100%;
}

.state-selector-wrapper select {
    width: 100%;
}

.state-selector-custom {
    display: flex;
    gap: 8px;
    align-items: center;
}

.state-selector-custom input {
    flex: 1;
}

.state-selector-custom .btn-small {
    padding: 8px 12px;
    background: var(--primary-color, #3498db);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.state-selector-custom .btn-small:hover {
    opacity: 0.9;
}


/* ✅ Toast per nome completo dispositivo */
@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.name-toast {
    animation: fadeIn 0.2s ease;
}



/* ===== AUDIO VIEW EASYDOM STYLE ===== */
.audio-view {
    height: 100%;
    color: white;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.audio-view input[type="text"],
.audio-view input[type="search"] {
    outline: none;
}

.audio-view input[type="text"]:focus,
.audio-view input[type="search"]:focus {
    border-color: rgba(29, 185, 84, 0.5) !important;
}

.audio-view input[type="range"] {
    -webkit-appearance: none;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.2);
}

.audio-view input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1DB954;
    cursor: pointer;
}

.audio-view input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1DB954;
    cursor: pointer;
    border: none;
}

.audio-view button:hover {
    opacity: 0.9;
}

/* Scrollbar styling */
.audio-view ::-webkit-scrollbar {
    width: 6px;
}

.audio-view ::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
}

.audio-view ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
}

.audio-view ::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.3);
}

/* Le regole responsive più dettagliate sono definite più sotto con classi specifiche */



/* Pulse animation for radio live indicator */
@keyframes pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== GLOBAL PLAYER BAR RESPONSIVE ===== */
@media (max-width: 768px) {
    .global-player-volume {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .global-player-bar {
        padding: 8px 10px !important;
    }
}

/* ===== AUDIO VIEW RESPONSIVE ===== */
.audio-view-container {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.audio-sidebar {
    width: 280px;
    min-width: 280px;
    border-right: 1px solid rgba(255,255,255,0.1);
    padding: 20px;
    overflow-y: auto;
    background: rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.audio-main-content {
    flex: 1;
    overflow-y: auto;
    padding: 25px 30px;
    min-width: 0;
}

.audio-header {
    padding: 10px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.audio-header h2 {
    margin: 0;
    font-size: 20px;
    flex-shrink: 0;
}

.audio-header p {
    display: none;
}

.audio-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 18px;
}

.audio-service-card {
    padding: 25px;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 130px;
}

.audio-service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.audio-service-card .service-icon {
    transition: transform 0.3s ease;
}

.audio-service-card:hover .service-icon {
    transform: scale(1.1);
}

.audio-playlists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.audio-radio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.audio-player-bar {
    padding: 10px 20px;
    background: rgba(0,0,0,0.3);
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* MDI icon alignment in audio controls */
.audio-view button i.mdi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* TABLET (768px - 1024px) */
@media (max-width: 1024px) {
    .audio-sidebar {
        width: 240px;
        min-width: 240px;
        padding: 15px;
    }
    
    .audio-main-content {
        padding: 20px;
    }
    
    .audio-services-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 15px;
    }
    
    .audio-service-card {
        padding: 20px;
        min-height: 120px;
    }
    
    .audio-playlists-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 12px;
    }
    
    .audio-radio-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

/* MOBILE LANDSCAPE / SMALL TABLET (600px - 768px) */
@media (max-width: 768px) {
    .audio-view-container {
        flex-direction: column;
    }
    
    .audio-sidebar {
        width: 100%;
        min-width: 100%;
        max-height: 180px;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding: 12px 15px;
    }
    
    .audio-main-content {
        padding: 15px;
    }
    
    .audio-header {
        padding: 12px 15px;
    }
    
    .audio-header h2 {
        font-size: 22px;
    }
    
    .audio-services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-bottom: 20px;
    }
    
    .audio-service-card {
        padding: 15px;
        min-height: 100px;
    }
    
    .audio-service-card .service-icon {
        font-size: 28px !important;
    }
    
    .audio-service-card .service-name {
        font-size: 14px !important;
    }
    
    .audio-service-card .service-desc {
        display: none;
    }
    
    .audio-playlists-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }
    
    .audio-radio-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .audio-player-bar {
        padding: 12px 15px;
        gap: 10px;
    }
    
    /* Nascondi elementi meno importanti su tablet */
    .audio-sidebar .output-info-box {
        display: none;
    }
}

/* MOBILE PORTRAIT (<600px) */
@media (max-width: 600px) {
    .audio-sidebar {
        max-height: 150px;
        padding: 10px 12px;
    }
    
    .audio-sidebar .quick-actions {
        flex-direction: column;
        gap: 5px;
    }
    
    .audio-sidebar .output-list {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 5px;
    }
    
    .audio-sidebar .output-item {
        flex-shrink: 0;
        min-width: 120px;
    }
    
    .audio-main-content {
        padding: 12px;
    }
    
    .audio-header h2 {
        font-size: 20px;
    }
    
    .audio-services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 15px;
    }
    
    .audio-service-card {
        padding: 12px;
        min-height: 80px;
    }
    
    .audio-service-card .service-icon {
        font-size: 24px !important;
    }
    
    .audio-service-card .service-name {
        font-size: 12px !important;
    }
    
    .audio-playlists-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
    }
    
    .audio-search-bar {
        flex-direction: column;
    }
    
    .audio-search-bar input {
        width: 100%;
    }
    
    .audio-search-bar button {
        width: 100%;
    }
    
    .audio-player-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .audio-player-bar .track-info {
        width: 100%;
    }
    
    .audio-player-bar .controls {
        justify-content: center;
    }
    
    .audio-player-bar .volume-control {
        width: 100%;
    }
}

/* EXTRA SMALL MOBILE (<400px) */
@media (max-width: 400px) {
    .audio-header {
        padding: 10px 12px;
    }
    
    .audio-header h2 {
        font-size: 18px;
    }
    
    .audio-services-grid {
        gap: 6px;
    }
    
    .audio-service-card {
        padding: 10px;
        min-height: 70px;
    }
    
    .audio-service-card .service-icon {
        font-size: 20px !important;
    }
    
    .audio-service-card .service-name {
        font-size: 11px !important;
    }
}


/* ===== FULLSCREEN MODE - MODALITÀ SCHERMO INTERO ===== */

/* Container app in modalità fullscreen */
.app.fullscreen-mode {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Main content in fullscreen - occupa tutto lo spazio */
.main-content.fullscreen-content {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 !important;
    margin: 0;
    /* position:fixed + inset:0 è sufficiente, no height esplicito */
    overflow: hidden;
    z-index: 100;
}

/* Room detail in fullscreen - layout verticale: header + piantina */
.room-detail.fullscreen {
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    margin: 0;
    border-radius: 0;
    background: #1a202c;
}

/* Header in fullscreen - SOPRA la piantina (non overlay) */
.room-detail.fullscreen .room-detail-header {
    position: relative;
    flex-shrink: 0;
    background: rgba(26, 32, 44, 0.98);
    z-index: 10;
    padding: 12px 20px;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
}

/* Floorplan container in fullscreen - occupa lo spazio rimanente */
.room-detail.fullscreen .floorplan-container {
    flex: 1;
    position: relative;
    min-height: 0; /* Importante per flex */
    height: auto !important;
    border-radius: 0;
    background: #1a202c;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Canvas della piantina in fullscreen */
.room-detail.fullscreen .floorplan-canvas {
    height: 100% !important;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Piantina wrapper in fullscreen - CRITICO per posizionamento icone */
.room-detail.fullscreen .floorplan-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 8px;
    overflow: visible; /* Permette alle icone di uscire leggermente */
    /* ✅ NO flexbox - manteniamo stesso layout della modalità normale per consistenza icone */
}

/* Immagine piantina in fullscreen */
.room-detail.fullscreen .floorplan-wrapper img {
    /* ✅ FIX: Mantieni position:absolute come in modalità normale */
    /* Questo garantisce che le icone siano posizionate correttamente rispetto all'immagine */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Pulsante Fullscreen */
.fullscreen-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px !important;
}

.fullscreen-btn svg {
    flex-shrink: 0;
}

.fullscreen-btn-text {
    white-space: nowrap;
}

/* Room name in fullscreen */
.room-detail.fullscreen .room-nav-center h2 {
    font-size: 1.3em;
}

/* Frecce navigazione in fullscreen */
.room-detail.fullscreen .room-nav-arrow {
    width: 40px;
    height: 40px;
}

/* Pulsanti azioni in fullscreen */
.room-detail.fullscreen .room-detail-actions {
    flex-direction: row !important;
    width: auto;
}

.room-detail.fullscreen .room-detail-actions .btn {
    padding: 8px 14px;
    font-size: 13px;
    width: auto;
}

/* Back button in fullscreen */
.room-detail.fullscreen .back-btn {
    padding: 8px 16px;
    font-size: 13px;
}

/* Nascondi lista mobile in fullscreen - usa solo piantina */
.room-detail.fullscreen .devices-mobile-list {
    display: none !important;
}

/* ===== RESPONSIVE FULLSCREEN ===== */

/* Tablet in fullscreen */
@media (min-width: 769px) and (max-width: 1024px) {
    .room-detail.fullscreen .room-detail-header {
        padding: 10px 15px;
    }
    
    .room-detail.fullscreen .floorplan-container {
        padding: 15px;
    }
    
    .room-detail.fullscreen .room-nav-center h2 {
        font-size: 1.1em;
    }
}

/* Mobile in fullscreen */
@media (max-width: 768px) {
    /* Nascondi pulsante fullscreen su smartphone - non serve */
    .fullscreen-btn {
        display: none !important;
    }
    
    .room-detail.fullscreen .room-detail-header {
        padding: 10px 12px;
        flex-wrap: nowrap;
    }
    
    .room-detail.fullscreen .floorplan-container {
        padding: 10px;
    }
    
    .room-detail.fullscreen .back-btn {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .room-detail.fullscreen .room-nav-center h2 {
        font-size: 1em;
        min-width: auto;
    }
    
    .room-detail.fullscreen .room-nav-arrow {
        width: 36px;
        height: 36px;
    }
    
    .room-detail.fullscreen .room-detail-actions .btn {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    /* Mostra piantina anche su mobile in fullscreen */
    .room-detail.fullscreen .floorplan-wrapper {
        display: flex !important;
    }
}

/* Schermi grandi - più spazio */
@media (min-width: 1400px) {
    .room-detail.fullscreen .floorplan-container {
        padding: 30px;
    }
}

/* Animazione transizione fullscreen */
.room-detail {
    transition: all 0.3s ease;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE LANDSCAPE AMBIENTI — Piantina fullscreen + nav floating
   In landscape su mobile, la piantina occupa tutto lo schermo.
   L'utente naviga tra ambienti e controlla i dispositivi
   direttamente dalla piantina. Nessun pulsante extra.
   ══════════════════════════════════════════════════════════════ */

.room-detail.mobile-landscape-room {
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 0 !important;
    margin: 0;
    border-radius: 0;
    background: #0a1628;
    max-height: 100vh;
    overflow: hidden;
}

.mobile-landscape-room .room-detail-header {
    display: none !important;
}

.mobile-landscape-room .devices-mobile-list {
    display: none !important;
}

/* Override il display:none mobile-first della piantina */
.mobile-landscape-room .floorplan-container {
    display: flex !important;
    flex: 1;
    position: relative;
    padding: 0;
    margin: 0;
    border-radius: 0;
    background: #0a1628;
    height: 100vh;
    min-height: 0 !important; /* Override il 600px base! */
    max-height: 100vh;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
}

.mobile-landscape-room .floorplan-canvas {
    position: absolute !important;
    inset: 0;
    min-height: 0 !important; /* Override il 400px base! */
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-landscape-room .floorplan-wrapper {
    position: absolute !important;
    inset: 0;
    min-height: 0 !important;
}

/* L'immagine è già position:absolute nel base CSS — 
   ora funziona perché il wrapper ha dimensioni reali da inset:0 */
.mobile-landscape-room .floorplan-wrapper img {
    object-fit: contain;
    max-height: 100vh;
}

/* ── Overlay navigazione landscape ── */

/* Nome ambiente — top center, discreto */
.room-landscape-title {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    color: white;
    font-size: 15px;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 20px;
    border-radius: 20px;
    white-space: nowrap;
    pointer-events: none;
}

/* X chiudi — top right */
.room-landscape-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.room-landscape-close:active {
    background: rgba(231, 76, 60, 0.7);
}

/* Frecce laterali — bordo sinistro/destro, metà altezza */
.room-landscape-side-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    color: white;
    width: 36px;
    height: 56px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.room-landscape-side-arrow.left {
    left: 0;
    border-radius: 0 8px 8px 0;
}

.room-landscape-side-arrow.right {
    right: 0;
    border-radius: 8px 0 0 8px;
}

.room-landscape-side-arrow:active {
    background: rgba(74, 158, 255, 0.6);
}

.main-content {
    transition: all 0.3s ease;
}

/* ===== CROSS-PLATFORM MOBILE FIXES ===== */

/* Normalizzazione font e spacing */
@media (max-width: 768px) {
    /* Reset per uniformità mobile */
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Room cards uniformi */
    .room-card {
        min-height: 140px;
        padding: 20px;
        -webkit-transform: translateZ(0); /* Hardware acceleration */
        transform: translateZ(0);
    }
    
    .room-card .room-icon {
        font-size: 40px;
        margin-bottom: 12px;
    }
    
    .room-card .room-name {
        font-size: 18px;
        line-height: 1.3;
    }
    
    .room-card .room-info {
        font-size: 13px;
    }
    
    /* Header compatto */
    .header h1 {
        font-size: 24px;
    }
    
    /* Nav tabs uniformi */
    .nav-tabs {
        gap: 0;
        padding: 0 10px;
        -webkit-overflow-scrolling: touch;
    }
    
    .nav-tabs li {
        padding: 12px 14px;
        font-size: 13px;
        white-space: nowrap;
    }
    
    /* Room detail header mobile */
    .room-detail-header {
        padding: 15px;
        gap: 15px;
    }
    
    .room-detail-header h2 {
        font-size: 22px;
    }
    
    /* Device icons su mobile */
    .device-icon {
        width: 38px !important;
        height: 38px !important;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    .device-icon .mdi,
    .device-icon i {
        font-size: 20px !important;
    }
    
    .device-label {
        font-size: 11px !important;
        padding: 3px 8px !important;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ===== TABLET OPTIMIZATION ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Room cards tablet */
    .rooms-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .room-card {
        min-height: 160px;
        padding: 24px 20px;
    }
    
    .room-card .room-icon {
        font-size: 44px;
    }
    
    .room-card .room-name {
        font-size: 18px;
    }
    
    /* Nav tabs tablet */
    .nav-tabs {
        gap: 5px;
    }
    
    .nav-tabs li {
        padding: 14px 18px;
        font-size: 14px;
    }
    
    /* Floorplan tablet */
    .floorplan-container {
        min-height: 450px;
    }
    
    /* Device icons tablet */
    .device-icon {
        width: 44px !important;
        height: 44px !important;
    }
    
    .device-icon .mdi,
    .device-icon i {
        font-size: 24px !important;
    }
    
    .device-label {
        font-size: 12px !important;
        padding: 4px 10px !important;
    }
    
    /* Room detail header tablet */
    .room-detail-header {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .room-detail-actions {
        flex-direction: row !important;
        width: auto;
    }
    
    .room-detail-actions .btn {
        width: auto;
        padding: 10px 16px;
    }
}

/* ===== LANDSCAPE MOBILE FIXES ===== */
@media (max-width: 1024px) and (orientation: landscape) {
    .rooms-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .room-card {
        min-height: 120px;
        padding: 16px;
    }
    
    .room-card .room-icon {
        font-size: 36px;
        margin-bottom: 8px;
    }
    
    .room-card .room-name {
        font-size: 16px;
    }
    
    /* Header compatto in landscape */
    .header {
        padding: 10px 20px;
    }
    
    .header h1 {
        font-size: 20px;
    }
    
    /* Floorplan landscape */
    .floorplan-container {
        min-height: 250px;
    }
}

/* ===== SMALL PHONES ===== */
@media (max-width: 380px) {
    .room-card {
        min-height: 120px;
        padding: 16px;
    }
    
    .room-card .room-icon {
        font-size: 36px;
    }
    
    .room-card .room-name {
        font-size: 16px;
    }
    
    .nav-tabs li {
        padding: 10px 12px;
        font-size: 12px;
    }
    
    .device-icon {
        width: 34px !important;
        height: 34px !important;
    }
    
    .device-icon .mdi,
    .device-icon i {
        font-size: 18px !important;
    }
    
    .device-label {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }
}


/* ===== FIX TOOLBAR ROOM DETAIL v1.0.52 ===== */

/* Toolbar pulsanti - flex wrap per evitare sovrapposizioni */
.room-detail-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center;
    justify-content: flex-end;
}

/* Pulsanti più compatti */
.room-detail-actions .btn {
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
}

/* Fullscreen button più compatto */
.room-detail-actions .fullscreen-btn {
    display: flex;
    align-items: center;
    gap: 6px;
}

.room-detail-actions .fullscreen-btn svg {
    flex-shrink: 0;
}

/* Mobile: pulsanti più piccoli */
@media (max-width: 900px) {
    .room-detail-actions {
        gap: 5px !important;
    }
    
    .room-detail-actions .btn {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    /* Nascondi testo su schermi medi */
    .room-detail-actions .fullscreen-btn-text {
        display: none;
    }
}

/* Mobile piccolo: toolbar scrollabile orizzontalmente */
@media (max-width: 600px) {
    .room-detail-header {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    
    .room-detail-actions {
        justify-content: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
    }
    
    .room-detail-actions .btn {
        flex-shrink: 0;
    }
}

/* ===== FIX FULLSCREEN HEADER ===== */

/* In fullscreen, header più compatto */
.room-detail.fullscreen .room-detail-header {
    padding: 10px 15px;
    gap: 10px;
}

.room-detail.fullscreen .room-detail-actions {
    gap: 6px !important;
}

.room-detail.fullscreen .room-detail-actions .btn {
    padding: 6px 10px;
    font-size: 12px;
}

/* ================================================================
   SURVEILLANCE SETTINGS - FULL SCREEN PANEL
   ================================================================ */

.surv-settings-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(8px);
    padding: 16px;
}

.surv-settings-panel {
    background: linear-gradient(160deg, #141e30 0%, #0a1220 100%);
    border-radius: 20px;
    width: 100%;
    max-width: 860px;
    max-height: calc(100% - 32px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.08);
    overflow: hidden;
}

/* Header */
.surv-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.surv-settings-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.surv-settings-title svg {
    color: #4a9eff;
    flex-shrink: 0;
}

.surv-settings-title h2 {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

.surv-settings-subtitle {
    display: block;
    font-size: 13px;
    color: rgba(255,255,255,0.45);
    margin-top: 2px;
}

.surv-settings-close {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: none;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.surv-settings-close:hover {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

/* Content scrollabile */
.surv-settings-content {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.surv-settings-content::-webkit-scrollbar {
    width: 6px;
}
.surv-settings-content::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
}

.surv-settings-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Cards */
.surv-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.surv-card:hover {
    border-color: rgba(255,255,255,0.12);
}

.surv-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.surv-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.surv-card-icon-blue {
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
}

.surv-card-icon-orange {
    background: rgba(230, 126, 34, 0.15);
    color: #e67e22;
}

.surv-card-title-group {
    flex: 1;
    min-width: 0;
}

.surv-card-title-group h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

.surv-card-title-group p {
    font-size: 13px;
    color: rgba(255,255,255,0.4);
    margin: 3px 0 0;
}

.surv-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Toggle switch */
.surv-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    flex-shrink: 0;
}

.surv-toggle input { display: none; }

.surv-toggle-slider {
    width: 44px;
    height: 24px;
    background: rgba(255,255,255,0.12);
    border-radius: 12px;
    position: relative;
    transition: background 0.3s;
    flex-shrink: 0;
}

.surv-toggle-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
}

.surv-toggle input:checked + .surv-toggle-slider {
    background: #3498db;
}

.surv-toggle input:checked + .surv-toggle-slider::after {
    transform: translateX(20px);
}

.surv-toggle-label {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
    min-width: 70px;
}

.surv-toggle input:checked ~ .surv-toggle-label {
    color: #3498db;
}

/* Form dentro le card */
.surv-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.surv-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.surv-field-full {
    grid-column: 1 / -1;
}

.surv-field label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    gap: 8px;
}

.surv-field input,
.surv-field select,
.surv-field textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: #fff;
    font-size: 15px;
    font-family: inherit;
    transition: all 0.2s;
    box-sizing: border-box;
}

.surv-field input:focus,
.surv-field select:focus,
.surv-field textarea:focus {
    outline: none;
    border-color: #4a9eff;
    background: rgba(255,255,255,0.08);
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.15);
}

.surv-field select option {
    background: #1a2942;
    color: #fff;
}

.surv-field textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

.surv-field-hint {
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    line-height: 1.4;
}

.surv-badge-saved {
    font-size: 11px;
    padding: 2px 8px;
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
    border-radius: 6px;
    font-weight: 600;
}

/* Test row */
.surv-test-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.surv-test-result {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 10px;
}

.surv-test-result.success {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
}

.surv-test-result.error {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
}

/* Storage grid */
.surv-storage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.surv-storage-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
}

.surv-storage-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(230, 126, 34, 0.1);
    color: #e67e22;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.surv-storage-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.surv-storage-field label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
}

.surv-input-with-unit {
    display: flex;
    align-items: center;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    overflow: hidden;
    transition: border-color 0.2s;
}

.surv-input-with-unit:focus-within {
    border-color: #4a9eff;
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.15);
}

.surv-input-with-unit input {
    flex: 1;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    width: 60px;
    min-width: 0;
}

.surv-input-with-unit input:focus {
    outline: none;
}

.surv-unit {
    padding: 10px 14px;
    font-size: 13px;
    color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.04);
    border-left: 1px solid rgba(255,255,255,0.08);
    white-space: nowrap;
}

.surv-storage-equiv {
    font-size: 12px;
    color: rgba(255,255,255,0.3);
}

/* Info banner */
.surv-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(52, 152, 219, 0.06);
    border: 1px solid rgba(52, 152, 219, 0.15);
    border-radius: 10px;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    line-height: 1.5;
}

.surv-info-banner svg {
    flex-shrink: 0;
    color: #3498db;
    margin-top: 1px;
}

/* Footer fisso */
.surv-settings-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 32px;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.15);
    flex-shrink: 0;
}

.btn-lg {
    padding: 12px 28px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Responsive ── */
@media (max-width: 700px) {
    .surv-settings-overlay {
        padding: 0;
    }
    
    .surv-settings-panel {
        border-radius: 0;
        max-height: 100%;
        max-width: 100%;
    }
    
    .surv-settings-header {
        padding: 18px 20px;
    }
    
    .surv-settings-title h2 {
        font-size: 18px;
    }
    
    .surv-settings-subtitle {
        display: none;
    }
    
    .surv-settings-content {
        padding: 20px;
    }
    
    .surv-card-header {
        flex-wrap: wrap;
        padding: 16px 18px;
    }
    
    .surv-card-title-group p {
        display: none;
    }
    
    .surv-card-body {
        padding: 18px;
    }
    
    .surv-form-grid {
        grid-template-columns: 1fr;
    }
    
    .surv-storage-grid {
        grid-template-columns: 1fr;
    }
    
    .surv-storage-item {
        padding: 14px;
    }
    
    .surv-settings-footer {
        padding: 16px 20px;
    }

    .surv-toggle-label {
        display: none;
    }
}

@media (max-width: 420px) {
    .surv-settings-header {
        padding: 14px 16px;
    }
    
    .surv-settings-title svg {
        width: 22px;
        height: 22px;
    }
    
    .surv-settings-title h2 {
        font-size: 16px;
    }
    
    .surv-settings-content {
        padding: 14px;
    }
    
    .surv-card-body {
        padding: 14px;
    }
    
    .btn-lg {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
}

/* ================================================================
   SYSTEM CONFIG - CARD LAYOUT
   ================================================================ */

.sys-config {
    padding: 0;
}

.sys-config-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 0 20px;
    margin-bottom: 8px;
}

.sys-config-header svg {
    color: #4a9eff;
    flex-shrink: 0;
}

.sys-config-header h2 {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

.sys-config-subtitle {
    display: block;
    font-size: 13px;
    color: rgba(255,255,255,0.4);
    margin-top: 2px;
}

/* Cards grid */
.sys-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 20px;
}

.sys-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.sys-card:hover {
    border-color: rgba(255,255,255,0.14);
}

/* Card header */
.sys-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sys-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sys-card-title {
    flex: 1;
    min-width: 0;
}

.sys-card-title h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

.sys-card-title p {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    margin: 2px 0 0;
}

/* Card body */
.sys-card-body {
    padding: 20px 22px;
}

.sys-card-body .form-group {
    margin-bottom: 16px;
}

.sys-card-body .form-group label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    margin-bottom: 6px;
    display: block;
}

.sys-card-body .form-group input,
.sys-card-body .form-group select,
.sys-card-body .form-group textarea {
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: #fff;
    font-size: 14px;
    transition: all 0.2s;
    box-sizing: border-box;
}

.sys-card-body .form-group input:focus,
.sys-card-body .form-group select:focus {
    outline: none;
    border-color: #4a9eff;
    background: rgba(255,255,255,0.08);
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.12);
}

.sys-card-body .form-group small {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: rgba(255,255,255,0.35);
}

.sys-card-body .btn {
    margin-top: 4px;
}

/* Card color themes - icons */
.sys-card-blue .sys-card-icon {
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
}

.sys-card-red .sys-card-icon {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

.sys-card-green .sys-card-icon {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
}

.sys-card-yellow .sys-card-icon {
    background: rgba(241, 196, 15, 0.15);
    color: #f1c40f;
}

.sys-card-purple .sys-card-icon {
    background: rgba(155, 89, 182, 0.15);
    color: #9b59b6;
}

.sys-card-orange .sys-card-icon {
    background: rgba(230, 126, 34, 0.15);
    color: #e67e22;
}

/* Color stripe on left */
.sys-card-blue { border-left: 3px solid rgba(52, 152, 219, 0.5); }
.sys-card-red { border-left: 3px solid rgba(231, 76, 60, 0.5); }
.sys-card-green { border-left: 3px solid rgba(46, 204, 113, 0.5); }
.sys-card-yellow { border-left: 3px solid rgba(241, 196, 15, 0.5); }
.sys-card-purple { border-left: 3px solid rgba(155, 89, 182, 0.5); }
.sys-card-orange { border-left: 3px solid rgba(230, 126, 34, 0.5); }

/* Note: border-left is on header but we want it on card */
.sys-card:has(.sys-card-blue) { border-left: 3px solid rgba(52, 152, 219, 0.4); }
.sys-card:has(.sys-card-red) { border-left: 3px solid rgba(231, 76, 60, 0.4); }
.sys-card:has(.sys-card-green) { border-left: 3px solid rgba(46, 204, 113, 0.4); }
.sys-card:has(.sys-card-yellow) { border-left: 3px solid rgba(241, 196, 15, 0.4); }
.sys-card:has(.sys-card-purple) { border-left: 3px solid rgba(155, 89, 182, 0.4); }
.sys-card:has(.sys-card-orange) { border-left: 3px solid rgba(230, 126, 34, 0.4); }

/* Connection status inside card */
.sys-card-body .connection-status {
    margin-bottom: 16px;
}

/* Fix form-row inside cards */
.sys-card-body .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* Responsive */
@media (max-width: 700px) {
    .sys-config-header {
        padding: 18px 0 14px;
    }
    
    .sys-config-header h2 {
        font-size: 18px;
    }
    
    .sys-config-subtitle {
        display: none;
    }
    
    .sys-card-header {
        padding: 14px 16px;
    }
    
    .sys-card-body {
        padding: 16px;
    }
    
    .sys-card-title p {
        display: none;
    }
    
    .sys-card-body .form-row {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   MOBILE LAYOUT FIX (≤768px) - Professional Mobile
   
   Layout edge-to-edge su mobile:
   - .main-content prende lo sfondo del pannello
   - .room-detail diventa trasparente (no card appearance)
   - Padding ridotto ovunque per massimizzare spazio
   - .video-surveillance-view usa flex: 1, non calc(100vh)
   =================================================================== */

@media (max-width: 768px) {
    
    /* ── Body & Main: sfondo uniforme ── */
    .main-content {
        padding: 8px !important;
        background: rgba(10, 22, 40, 0.4);
        border-radius: 0;
    }
    
    /* ── Room Detail: EDGE-TO-EDGE (no card) ── */
    .room-detail {
        background: transparent !important;
        border-radius: 0 !important;
        padding: 12px 8px 8px 8px !important; /* Più spazio sopra per evitare taglio */
    }
    
    /* Reset esplicito per quando si torna da landscape a portrait */
    .room-detail:not(.mobile-landscape-room) {
        position: static !important;
        inset: auto !important;
        z-index: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* ── Room Header: compatto ── */
    .room-detail-header {
        margin-bottom: 6px !important;
        gap: 8px !important;
        padding: 0 !important;
    }
    
    .room-detail-header h2 {
        font-size: 20px !important;
    }
    
    .back-btn {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
    
    /* ── Room Nav: compatto ── */
    .room-nav-left {
        min-width: auto !important;
    }
    
    .room-nav-center {
        gap: 8px !important;
    }
    
    .room-nav-center h2 {
        min-width: auto !important;
    }
    
    .room-nav-arrow {
        width: 36px !important;
        height: 36px !important;
    }
    
    /* ── Actions: compatte ── */
    .room-detail-actions {
        gap: 6px !important;
    }
    
    .room-detail-actions .btn {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
    
    .fullscreen-btn-text {
        display: none !important;
    }
    
    /* ── Device Mobile List: compatta ── */
    .devices-mobile-list {
        padding: 4px 0 !important;
    }
    
    .device-mobile-item {
        padding: 10px 12px !important;
        margin-bottom: 6px !important;
        gap: 10px !important;
    }
    
    .device-mobile-icon {
        width: 42px !important;
        height: 42px !important;
        font-size: 22px !important;
    }
    
    .device-mobile-name {
        font-size: 14px !important;
    }
    
    .device-mobile-state {
        font-size: 12px !important;
    }
    
    /* ── Video Surveillance: SOLO FLEX, NO calc(100vh) ── */
    .video-surveillance-view {
        height: auto !important;
        min-height: 0 !important;
        flex: 1 !important;
    }
    
    .video-header {
        padding: 10px 12px !important;
    }
    
    .video-header-left h2 {
        font-size: 16px !important;
    }
    
    .video-content-area {
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    
    .video-grid {
        flex: 1 !important;
        min-height: 0 !important;
        gap: 6px !important;
        padding: 6px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Camera: aspect-ratio per mantenere proporzioni, no min-height fisso */
    .camera-player {
        min-height: 0 !important;
        aspect-ratio: 16 / 9 !important;
    }
    
    /* ── Header app compatto ── */
    .header {
        padding: 8px 12px !important;
        gap: 6px !important;
    }
    
    .header-stats {
        font-size: 11px !important;
        gap: 8px !important;
    }
    
    .header h1 {
        font-size: 20px !important;
    }
    
    /* ── Nav tabs compatti ── */
    .nav-tabs li {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
    
    /* ── Room Card compatta ── */
    .room-card {
        min-height: 120px !important;
        padding: 16px !important;
    }
}

/* ===================================================================
   RESPONSIVE FIX v2.0 - Multi-Device Layout
   
   Corregge:
   1. Desktop: room cards troppo larghe (grid multi-colonna)
   2. Mobile: modali installatore (entity config, labels) fullscreen
   3. Tablet: layout intermedio ottimizzato
   =================================================================== */

/* ── BASE: .modal-content mancava definizione ── */
.modal-content {
    background: linear-gradient(135deg, #1a2942 0%, #0a1628 100%);
    border-radius: 16px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: modalSlideIn 0.3s ease-out;
    -webkit-overflow-scrolling: touch;
}

.modal-content.modal-large {
    max-width: 800px;
}

/* ── DESKTOP ≥1025px: Room cards grid ottimizzato ── */
@media (min-width: 1025px) {
    .room-card {
        min-height: 160px;
        padding: 24px 20px;
    }
    
    .room-icon {
        font-size: 40px;
        margin-bottom: 12px;
    }
    
    .room-name {
        font-size: 18px;
    }
    
    /* Azioni sempre visibili su touch-screen desktop */
    @media (hover: none) {
        .room-actions {
            opacity: 1 !important;
        }
    }
}

/* ── TABLET PORTRAIT 769-1024px ── */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .rooms-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px;
    }
    
    .room-card {
        min-height: 140px;
        padding: 20px 16px;
    }
}

/* ── TABLET LANDSCAPE ── */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .rooms-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
        gap: 14px;
    }
    
    .room-card {
        min-height: 130px;
        padding: 18px 14px;
    }
}

/* ── MOBILE ≤768px: Griglia ambienti 1 colonna ── */
@media (max-width: 768px) and (orientation: portrait) {
    .rooms-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
}

/* ── MOBILE LANDSCAPE: Griglia 2 colonne ── */
@media (max-width: 900px) and (orientation: landscape) {
    .rooms-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }
    
    .room-card {
        min-height: 100px !important;
        padding: 14px !important;
    }
    
    .room-icon {
        font-size: 28px;
        margin-bottom: 6px;
    }
    
    .room-name {
        font-size: 15px;
    }
}

/* ===================================================================
   MODALI INSTALLATORE - Responsive Fullscreen su Mobile
   
   Modali: Configurazione Entità, Gestione Etichette, Aggiungi Utente
   Su mobile diventano fullscreen per massimizzare usabilità
   =================================================================== */

/* ── MOBILE ≤768px: Modali quasi fullscreen ── */
@media (max-width: 768px) {
    /* Modal overlay: position absolute per riempire correttamente in iframe */
    .modal-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        right: auto !important;
        bottom: auto !important;
    }
    
    /* Modali installatore fullscreen su mobile */
    .modal-overlay > .modal.installer-modal,
    .modal-overlay > .modal-content.modal-large {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Modali standard (non-installer): occupano quasi tutto ma con margini */
    .modal-overlay > .modal:not(.installer-modal):not(.entity-modal) {
        width: 95% !important;
        max-width: 500px !important;
        max-height: 85% !important;
        height: auto !important;
    }
    
    /* Entity modal: mantiene dimensioni compatte */
    .modal-overlay > .entity-modal {
        width: 95% !important;
        max-width: 500px !important;
        height: auto !important;
        max-height: 85% !important;
        border-radius: 20px !important;
    }
    
    /* Overlay senza blur pesante su mobile (performance) */
    .modal-overlay {
        backdrop-filter: blur(2px);
    }
    
    /* Modal header compatto su mobile */
    .modal-overlay .modal-header {
        margin-bottom: 0;
        flex-shrink: 0;
        padding: 16px 16px 12px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    .modal-overlay .modal-header h2,
    .modal-overlay .modal-header h3 {
        font-size: 17px !important;
        line-height: 1.3;
        padding-right: 10px;
        flex: 1;
    }
    
    /* ★ X button sempre visibile e tappabile su mobile */
    .modal-overlay .modal-header .close-btn {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        min-width: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        opacity: 0.8;
        background: rgba(255,255,255,0.1);
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,0.2);
    }
    
    /* Modal actions sticky in basso */
    .modal-overlay .modal .modal-actions,
    .modal-overlay .modal-content .modal-actions {
        flex-shrink: 0;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: auto;
    }
}

/* ── MOBILE PICCOLO ≤480px: Ultra compatto ── */
@media (max-width: 480px) {
    .modal-overlay > .modal.installer-modal,
    .modal-overlay > .modal-content.modal-large {
        padding: 0 !important;
    }
    
    .modal-overlay .modal-header {
        padding: 12px !important;
    }
    
    .installer-modal .modal-header h3 {
        font-size: 15px !important;
    }
    
    .installer-modal div[style*="flexWrap"] > button {
        padding: 5px 10px !important;
        font-size: 11px !important;
    }
}

/* ── TABLET ≥769px: Modali centrati con dimensioni ragionevoli ── */
@media (min-width: 769px) and (max-width: 1024px) {
    .modal-overlay > .modal[style*="maxWidth: '900px'"] {
        max-width: 90vw !important;
        max-height: 85vh !important;
    }
    
    .modal-content.modal-large {
        max-width: 90vw;
        max-height: 85vh;
    }
}

/* ===================================================================
   SISTEMA TAB - Responsive Cards Grid
   =================================================================== */

/* Mobile: sys cards 1 colonna, scroll libero */
@media (max-width: 768px) {
    .sys-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .sys-card-header {
        padding: 12px 14px !important;
    }
    
    .sys-card-title h3 {
        font-size: 14px !important;
    }
    
    .sys-card-body {
        padding: 14px !important;
    }
    
    /* Form rows single column */
    .sys-card-body .form-row {
        grid-template-columns: 1fr !important;
    }
    
    /* Bottoni in card body più piccoli */
    .sys-card-body .btn {
        font-size: 13px !important;
        padding: 8px 14px !important;
    }
}

/* ===================================================================
   TOUCH TARGETS - Min 44px per accessibilità mobile
   =================================================================== */
@media (hover: none) and (pointer: coarse) {
    /* Touch devices: target minimo 44px */
    .icon-btn,
    .close-btn,
    .btn,
    .room-nav-arrow {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Azioni room card sempre visibili su touch */
    .room-actions {
        opacity: 1 !important;
    }
    
    /* Toggle switch area più grande */
    .device-mobile-toggle {
        min-width: 52px;
        min-height: 32px;
    }
    
    /* Checkbox nelle modali più grandi */
    .modal input[type="checkbox"] {
        width: 20px;
        height: 20px;
        min-width: 20px;
        accent-color: #2ecc71;
    }
}

/* ===================================================================
   SCROLLBAR PERSONALIZZATE - Stile scuro per tutte le piattaforme
   =================================================================== */
.modal::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.modal div[style*="overflow"]::-webkit-scrollbar {
    width: 6px;
}

.modal::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track,
.modal div[style*="overflow"]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.modal::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb,
.modal div[style*="overflow"]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.modal::-webkit-scrollbar-thumb:hover,
.modal-content::-webkit-scrollbar-thumb:hover,
.modal div[style*="overflow"]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Firefox scrollbar */
.modal,
.modal-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}

/* ===================================================================
   ENTITY GROUP LIST - Layout migliorato nei modali installatore
   =================================================================== */

/* ── INSTALLER MODAL: Regole specifiche ── */
.installer-modal {
    -webkit-overflow-scrolling: touch;
}

.installer-modal .modal-header h3 {
    word-break: break-word;
    hyphens: auto;
}

/* Grouped entity items: spacing migliore */
@media (max-width: 768px) {

    /* Installer modal fullscreen su mobile */
    .modal-overlay > .installer-modal {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        padding: 14px !important;
    }
    
    .installer-modal .modal-header {
        flex-shrink: 0;
        margin-bottom: 10px !important;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .installer-modal .modal-header h3 {
        font-size: 16px !important;
        line-height: 1.3;
        padding-right: 36px;
    }
    
    /* Area scroll interna */
    .installer-modal > div[style*="overflowY"],
    .installer-modal > div[style*="overflow-y"] {
        flex: 1 !important;
        min-height: 0 !important;
        -webkit-overflow-scrolling: touch;
        padding: 8px 2px !important;
    }

    /* Entity group header (device name with arrow) */
    .installer-modal div[style*="cursor: 'pointer'"][style*="padding: '12px"] {
        padding: 10px 12px !important;
    }
    
    /* Entity sub-items */
    .installer-modal div[style*="paddingLeft: '20px'"] label,
    .installer-modal div[style*="padding-left: 20px"] label {
        padding: 8px 10px !important;
        font-size: 13px;
    }
    
    /* Search input in modals - font-size 16px previene zoom iOS */
    .installer-modal input[type="text"],
    .installer-modal input[placeholder*="Cerca"] {
        font-size: 16px !important;
        padding: 12px 14px !important;
    }
    
    /* Categorie: scrollabili orizzontalmente su mobile */
    .installer-modal div[style*="flexWrap"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        padding-bottom: 8px !important;
        scrollbar-width: none;
    }
    
    .installer-modal div[style*="flexWrap"]::-webkit-scrollbar {
        display: none;
    }
    
    /* Bottoni categoria più compatti */
    .installer-modal div[style*="flexWrap"] > button {
        flex-shrink: 0 !important;
        padding: 7px 14px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    
    /* Contatore selezione compatto */
    .installer-modal div[style*="justifyContent: 'space-between'"][style*="background: 'rgba(46"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 8px 12px !important;
    }
    
    /* Entity modal NON fullscreen (dettaglio dispositivo) */
    .modal-overlay > .entity-modal {
        width: 95% !important;
        max-width: 500px !important;
        height: auto !important;
        max-height: 90vh !important;
        border-radius: 20px !important;
    }
}

/* ===================================================================
   VIDEO SURVEILLANCE - Professional Camera Effects & Layout
   =================================================================== */

/* Iframe deve riempire il container completamente */
.camera-video-container iframe.camera-iframe {
    object-fit: cover;
}

/* Camera player: effetto professionale al passaggio */
.camera-player::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 1;
}

.camera-player:hover::after {
    box-shadow: inset 0 0 0 2px rgba(74, 158, 255, 0.4);
}

/* Camera name overlay migliorato */
.camera-name-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.3) 60%, transparent 100%) !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase;
    z-index: 2;
}

/* Recording indicator pulsante */
.camera-status-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6),
                0 0 16px rgba(16, 185, 129, 0.3) !important;
}

/* Controls overlay migliorato */
.camera-controls {
    background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.3) 60%, transparent 100%) !important;
    padding: 10px 12px !important;
    z-index: 2;
}

/* Touch: controls sempre parzialmente visibili */
@media (hover: none) and (pointer: coarse) {
    .camera-controls {
        opacity: 0.7 !important;
    }
    
    .camera-player:hover {
        transform: none;
    }
    
    .camera-controls button {
        min-width: 40px;
        min-height: 40px;
    }
}

/* Desktop ≥1025px: Grid video con gap più pulito */
@media (min-width: 1025px) {
    .video-grid {
        gap: 10px;
        padding: 10px;
    }
    
    /* 3x3 su desktop: rows che si adattano */
    .video-grid-3x3 {
        grid-auto-rows: 1fr;
    }
    
    /* Camera hover più pronunciato su desktop */
    .camera-player:hover {
        transform: translateY(-2px) scale(1.005);
    }
}

/* Tablet: gap intermedio */
@media (min-width: 769px) and (max-width: 1024px) {
    .video-grid {
        gap: 8px;
        padding: 8px;
    }
    
    .camera-name-overlay {
        font-size: 11px !important;
        padding: 8px 10px !important;
    }
}

/* Mobile landscape: griglia ottimizzata per video */
@media (max-width: 1024px) and (orientation: landscape) {
    .video-grid {
        gap: 4px !important;
        padding: 4px !important;
    }
    
    .camera-player {
        border-radius: 6px !important;
    }
    
    .camera-name-overlay {
        font-size: 10px !important;
        padding: 6px 8px !important;
    }
    
    .camera-controls {
        padding: 6px 8px !important;
    }
    
    .camera-controls button {
        width: 30px !important;
        height: 30px !important;
    }
    
    /* Hide sidebar and header in landscape to maximize video */
    .camera-list-sidebar {
        display: none !important;
    }
    
    /* Compact header - single row */
    .video-header {
        padding: 4px 10px !important;
        min-height: 0 !important;
    }
    
    .video-header-left h2 {
        font-size: 13px !important;
        gap: 6px !important;
    }
    
    .video-header-left h2 svg {
        width: 14px !important;
        height: 14px !important;
    }
    
    .video-header-right {
        gap: 4px !important;
    }
    
    .video-header-right .grid-selector button {
        width: 26px !important;
        height: 26px !important;
    }
    
    .video-header-right .btn {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }
    
    /* Make video grid fill available space */
    .video-content-area {
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    
    .video-surveillance-view {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    
    .video-grid {
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Camera fills available space */
    .camera-player {
        min-height: 0 !important;
        height: 100% !important;
    }
    
    .camera-video-container {
        height: 100% !important;
    }
    
    .camera-controls {
        padding: 4px 6px !important;
    }
    
    .camera-controls button {
        width: 28px !important;
        height: 28px !important;
    }
    
    .camera-name-overlay {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }
}

/* ===== SISTEMA ALLARME ===== */
.alarm-view {
    padding: 20px;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.alarm-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 80px 20px;
    color: rgba(255,255,255,0.6);
}

.alarm-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: #4a9eff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Empty state */
.alarm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    max-width: 500px;
    margin: 0 auto;
}

.alarm-empty-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    border-radius: 20px;
    margin-bottom: 24px;
    color: rgba(255,255,255,0.3);
}

.alarm-empty-icon svg { width: 40px; height: 40px; }
.alarm-empty h3 { font-weight: 500; margin-bottom: 8px; font-size: 20px; }
.alarm-empty p { color: rgba(255,255,255,0.5); line-height: 1.5; margin-bottom: 24px; }

.alarm-install-guide {
    background: rgba(74,158,255,0.08);
    border: 1px solid rgba(74,158,255,0.2);
    border-radius: 12px;
    padding: 20px 24px;
    text-align: left;
    width: 100%;
}

.alarm-install-guide h4 { font-size: 14px; margin-bottom: 12px; color: #4a9eff; font-weight: 600; }
.alarm-install-guide ol { padding-left: 20px; margin: 0; }
.alarm-install-guide li { margin-bottom: 8px; color: rgba(255,255,255,0.7); font-size: 13px; line-height: 1.5; }

/* Header */
.alarm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.alarm-header-left { display: flex; align-items: center; gap: 12px; }
.alarm-header-right { display: flex; align-items: center; gap: 10px; }

.alarm-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 500;
    margin: 0;
}

.alarm-title svg { width: 24px; height: 24px; opacity: 0.8; }

.alarm-badge-alarmo {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    background: rgba(74,158,255,0.15);
    color: #4a9eff;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.alarm-area-select {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: white;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    outline: none;
}

.alarm-area-select:focus { border-color: #4a9eff; }
.alarm-area-select option { background: #1a2942; color: white; }

.alarm-btn-config {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: all 0.2s;
}

.alarm-btn-config:hover { background: rgba(255,255,255,0.12); color: #4a9eff; border-color: rgba(74,158,255,0.3); }
.alarm-btn-config svg { width: 20px; height: 20px; }

/* Feedback */
.alarm-feedback {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
    animation: fadeSlideIn 0.3s ease;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.alarm-feedback svg { width: 20px; height: 20px; flex-shrink: 0; }
.alarm-feedback-success { background: rgba(46,204,113,0.12); border: 1px solid rgba(46,204,113,0.25); color: #2ecc71; }
.alarm-feedback-error { background: rgba(231,76,60,0.12); border: 1px solid rgba(231,76,60,0.25); color: #e74c3c; }
.alarm-feedback-info { background: rgba(74,158,255,0.12); border: 1px solid rgba(74,158,255,0.25); color: #4a9eff; }

/* Content layout */
.alarm-content {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.alarm-content.with-installer { flex-direction: row; }

.alarm-user-panel {
    flex: 1;
    min-width: 0;
    max-width: 480px;
    margin: 0 auto;
}

/* Triggered background pulse */
.alarm-triggered-bg { animation: triggeredPulse 2s ease-in-out infinite; }

@keyframes triggeredPulse {
    0%, 100% { background: transparent; }
    50% { background: rgba(231,76,60,0.05); }
}

/* Status Display */
.alarm-status-display {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: rgba(10,22,40,0.6);
    border-radius: 16px;
    border-left: 4px solid;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.alarm-status-triggered { animation: triggeredBorder 1s ease-in-out infinite; }

@keyframes triggeredBorder {
    0%, 100% { border-left-color: #e74c3c; }
    50% { border-left-color: #f39c12; }
}

.alarm-status-icon-wrapper {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    flex-shrink: 0;
}

.alarm-status-icon-wrapper svg { width: 28px; height: 28px; }

.alarm-status-text { flex: 1; min-width: 0; }

.alarm-status-label {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.3px;
    margin-bottom: 2px;
}

.alarm-status-area { font-size: 12px; color: rgba(255,255,255,0.5); }

.alarm-status-user {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    margin-top: 4px;
}

.alarm-status-user svg { width: 14px; height: 14px; }

/* Countdown Ring */
.alarm-countdown {
    position: relative;
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alarm-countdown-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.alarm-countdown-number {
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Arm Mode Buttons */
.alarm-modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 8px;
    margin-bottom: 20px;
}

.alarm-mode-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    background: var(--mode-bg, transparent);
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

.alarm-mode-btn:hover {
    border-color: var(--mode-color);
    color: var(--mode-color);
    background: color-mix(in srgb, var(--mode-color) 8%, transparent);
}

.alarm-mode-btn.active {
    border-color: var(--mode-color);
    color: var(--mode-color);
    background: var(--mode-bg);
    box-shadow: 0 0 20px color-mix(in srgb, var(--mode-color) 15%, transparent);
}

.alarm-mode-btn:disabled { opacity: 0.4; pointer-events: none; }

.alarm-mode-icon { display: flex; align-items: center; justify-content: center; }
.alarm-mode-icon svg { width: 22px; height: 22px; }
.alarm-mode-label { font-size: 11px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; }
.alarm-mode-zone-count { font-size: 9px; color: rgba(255,255,255,0.35); font-weight: 400; }

/* Keypad */
.alarm-keypad-section {
    background: rgba(10,22,40,0.6);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.alarm-pin-display {
    text-align: center;
    margin-bottom: 16px;
}

.alarm-pin-dots {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 8px;
}

.alarm-pin-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    transition: all 0.15s ease;
}

.alarm-pin-dot.filled {
    background: #4a9eff;
    border-color: #4a9eff;
    box-shadow: 0 0 8px rgba(74,158,255,0.4);
}

.alarm-pin-hint {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    margin-top: 4px;
}

.alarm-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 280px;
    margin: 0 auto;
}

.alarm-key {
    width: 100%;
    aspect-ratio: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 500;
    color: white;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.alarm-key:hover { background: rgba(255,255,255,0.12); }
.alarm-key:active { background: rgba(255,255,255,0.18); transform: scale(0.95); }

.alarm-key-action {
    font-size: 16px;
    color: rgba(255,255,255,0.5);
}

.alarm-key-action svg { width: 22px; height: 22px; }

.alarm-key-confirm {
    color: #2ecc71;
    border-color: rgba(46,204,113,0.2);
}

.alarm-key-confirm:hover { background: rgba(46,204,113,0.1); }

/* Panic Button */
.alarm-panic-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    background: rgba(231,76,60,0.08);
    border: 1.5px solid rgba(231,76,60,0.25);
    border-radius: 12px;
    color: #e74c3c;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 20px;
}

.alarm-panic-btn:hover { background: rgba(231,76,60,0.15); border-color: rgba(231,76,60,0.4); }
.alarm-panic-btn svg { width: 20px; height: 20px; }

/* Sensors Section */
.alarm-sensors-section, .alarm-log-section {
    background: rgba(10,22,40,0.6);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.alarm-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.alarm-section-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: rgba(255,255,255,0.8);
}

.alarm-section-header h3 svg { width: 18px; height: 18px; opacity: 0.6; }

.alarm-sensor-badge-open {
    font-size: 11px;
    padding: 2px 8px;
    background: rgba(231,76,60,0.15);
    color: #e74c3c;
    border-radius: 12px;
    font-weight: 600;
}

.alarm-section-chevron { transition: transform 0.25s ease; display: flex; color: rgba(255,255,255,0.3); }
.alarm-section-chevron.open { transform: rotate(180deg); }

.alarm-sensors-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 14px;
}

.alarm-sensor-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border-left: 3px solid;
    transition: all 0.2s;
}

.alarm-sensor-card.closed { border-color: #2ecc71; }
.alarm-sensor-card.open { border-color: #e74c3c; background: rgba(231,76,60,0.05); }

.alarm-sensor-icon { color: rgba(255,255,255,0.5); display: flex; }
.alarm-sensor-card.open .alarm-sensor-icon { color: #e74c3c; }

.alarm-sensor-info { flex: 1; min-width: 0; }
.alarm-sensor-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.alarm-sensor-state { font-size: 11px; margin-top: 2px; }
.state-closed { color: #2ecc71; }
.state-open { color: #e74c3c; font-weight: 600; }

.alarm-sensor-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-closed { background: #2ecc71; }
.dot-open { background: #e74c3c; animation: pulseDot 1.5s ease-in-out infinite; }

@keyframes pulseDot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.alarm-sensors-empty { padding: 20px; text-align: center; color: rgba(255,255,255,0.3); font-size: 13px; }

/* Event Log */
.alarm-log-section h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: rgba(255,255,255,0.8);
}

.alarm-log-section h3 svg { width: 16px; height: 16px; opacity: 0.5; }

.alarm-log-list { display: flex; flex-direction: column; gap: 4px; }

.alarm-log-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.alarm-log-entry:last-child { border-bottom: none; }

.alarm-log-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.alarm-log-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alarm-log-name { font-size: 12px; color: rgba(255,255,255,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alarm-log-state { font-size: 12px; font-weight: 600; }
.alarm-log-time { font-size: 11px; color: rgba(255,255,255,0.3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ===== INSTALLER PANEL ===== */
.alarm-installer-panel {
    flex: 1;
    min-width: 0;
    max-width: 600px;
    background: rgba(10,22,40,0.7);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 200px);
}

.alarm-installer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.alarm-installer-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

.alarm-installer-header h3 svg { width: 20px; height: 20px; opacity: 0.6; }

.alarm-btn-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
}

.alarm-btn-close:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); }

/* Installer Tabs */
.alarm-installer-tabs {
    display: flex;
    gap: 2px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    overflow-x: auto;
}

.alarm-inst-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    white-space: nowrap;
}

.alarm-inst-tab:hover { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.04); }

.alarm-inst-tab.active {
    color: #4a9eff;
    background: rgba(74,158,255,0.1);
}

.alarm-inst-tab svg { width: 16px; height: 16px; }

.alarm-installer-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    -webkit-overflow-scrolling: touch;
}

/* Installer Sections */
.alarm-inst-section { }
.alarm-inst-section-header { margin-bottom: 16px; }
.alarm-inst-section-header h4 { font-size: 15px; font-weight: 600; margin: 0 0 4px 0; }
.alarm-inst-desc { font-size: 12px; color: rgba(255,255,255,0.4); margin: 0; line-height: 1.5; }

.alarm-inst-list { display: flex; flex-direction: column; gap: 8px; }

.alarm-inst-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.2s;
}

.alarm-inst-card:hover { border-color: rgba(255,255,255,0.12); }

.alarm-inst-card-icon { display: flex; flex-shrink: 0; }
.alarm-inst-card-icon svg { width: 22px; height: 22px; }

.alarm-inst-card-info { flex: 1; min-width: 0; }
.alarm-inst-card-name { font-size: 14px; font-weight: 500; }
.alarm-inst-card-detail { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 2px; }
.alarm-inst-card-id { font-size: 10px; color: rgba(255,255,255,0.2); font-family: monospace; }

.alarm-inst-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 16px;
    background: rgba(74,158,255,0.06);
    border: 1px solid rgba(74,158,255,0.12);
    border-radius: 10px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    line-height: 1.5;
    margin-top: 16px;
}

.alarm-inst-tip i { color: #4a9eff; font-size: 18px; flex-shrink: 0; margin-top: 1px; }

.alarm-inst-empty {
    padding: 30px 20px;
    text-align: center;
    color: rgba(255,255,255,0.3);
    font-size: 13px;
    line-height: 1.6;
}

/* Sensor Groups */
.alarm-inst-sensor-group {
    margin-bottom: 16px;
}

.alarm-inst-sensor-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 6px;
}

.alarm-inst-sensor-group-header svg { width: 18px; height: 18px; opacity: 0.5; }

.alarm-inst-count {
    font-size: 11px;
    padding: 1px 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    color: rgba(255,255,255,0.5);
}

.alarm-inst-sensor-list { display: flex; flex-direction: column; gap: 3px; }

.alarm-inst-sensor-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13px;
    transition: background 0.2s;
}

.alarm-inst-sensor-row:hover { background: rgba(255,255,255,0.03); }
.alarm-inst-sensor-row.open { background: rgba(231,76,60,0.06); }

.alarm-inst-sensor-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-closed { background: #2ecc71; }
.status-open { background: #e74c3c; animation: pulseDot 1.5s ease-in-out infinite; }

.alarm-inst-sensor-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alarm-inst-sensor-id { font-size: 10px; color: rgba(255,255,255,0.2); font-family: monospace; }

/* Settings */
.alarm-inst-status-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.alarm-inst-status-card.connected {
    background: rgba(46,204,113,0.08);
    border: 1px solid rgba(46,204,113,0.2);
}

.alarm-inst-status-card.disconnected {
    background: rgba(231,76,60,0.06);
    border: 1px solid rgba(231,76,60,0.15);
}

.alarm-inst-status-icon { display: flex; flex-shrink: 0; }
.alarm-inst-status-card.connected .alarm-inst-status-icon { color: #2ecc71; }
.alarm-inst-status-card.disconnected .alarm-inst-status-icon { color: #e74c3c; }
.alarm-inst-status-icon svg { width: 28px; height: 28px; }

.alarm-inst-status-title { font-size: 14px; font-weight: 600; }
.alarm-inst-status-detail { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 2px; }

.alarm-inst-info-block {
    margin-bottom: 20px;
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,0.04);
}

.alarm-inst-info-block h5 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.4);
    margin: 0 0 12px 0;
}

.alarm-inst-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.alarm-inst-info-row:last-child { border-bottom: none; }
.alarm-inst-info-label { font-size: 13px; color: rgba(255,255,255,0.6); }
.alarm-inst-info-value { font-size: 13px; font-weight: 500; }
.alarm-inst-info-value.text-warning { color: #e74c3c; }

code.alarm-inst-info-value {
    font-size: 11px;
    padding: 2px 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: rgba(255,255,255,0.5);
}

.alarm-inst-info-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
}

.alarm-inst-info-badge.on { background: rgba(46,204,113,0.12); color: #2ecc71; }
.alarm-inst-info-badge.off { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); }

/* ===== FULL-SCREEN INSTALLER MODE ===== */
.alarm-installer-mode .alarm-header {
    margin-bottom: 8px;
}

.alarm-installer-mode .alarm-user-panel {
    display: none !important;
}

.alarm-installer-mode .alarm-content {
    flex-direction: column !important;
}

.alarm-installer-mode .alarm-content.with-installer {
    flex-direction: column !important;
}

.alarm-installer-mode .alarm-installer-panel {
    max-width: none !important;
    width: 100% !important;
    max-height: none !important;
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 0;
}

.alarm-installer-mode .alarm-installer-tabs {
    background: rgba(10,22,40,0.5);
    border-radius: 12px;
    padding: 6px;
    margin-bottom: 20px;
    max-width: none;
}

.alarm-installer-mode .alarm-installer-content {
    background: transparent;
    flex: 1;
    overflow-y: auto;
    padding: 0 !important;
}

.alarm-installer-mode .alarm-inst-section {
    background: rgba(10,22,40,0.5);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 24px;
}

.alarm-installer-mode .alarm-inst-toggle-row {
    max-width: none;
}

.alarm-installer-mode .alarm-inst-area-config {
    background: rgba(10,22,40,0.4);
}

.alarm-installer-mode .alarm-feedback { display: none; }

/* Back button style */
.alarm-btn-back {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 16px !important;
    width: auto !important;
    height: auto !important;
    background: rgba(74,158,255,0.1) !important;
    border: 1px solid rgba(74,158,255,0.3) !important;
    border-radius: 10px !important;
    color: #4a9eff !important;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.alarm-btn-back:hover {
    background: rgba(74,158,255,0.2) !important;
}

.alarm-btn-back .mdi {
    font-size: 18px;
}

.alarm-btn-back-text {
    font-size: 13px;
    font-weight: 500;
}

/* Installer badge */
.alarm-badge-installer {
    font-size: 11px;
    padding: 3px 10px;
    background: rgba(74,158,255,0.12);
    color: #4a9eff;
    border-radius: 20px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* ===== ALARM MULTI-ZONE ===== */

/* Global Status Bar */
.alarm-global-status {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 16px;
    transition: all 0.3s;
}
.alarm-global-status.disarmed { background: rgba(46,204,113,0.08); border-color: rgba(46,204,113,0.2); }
.alarm-global-status.armed { background: rgba(231,76,60,0.08); border-color: rgba(231,76,60,0.2); }
.alarm-global-status.partial { background: rgba(243,156,18,0.08); border-color: rgba(243,156,18,0.2); }
.alarm-global-status.triggered { background: rgba(231,76,60,0.15); border-color: rgba(231,76,60,0.4); animation: alarm-pulse 1s infinite; }

.alarm-global-status-icon {
    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
    border-radius: 14px; flex-shrink: 0;
}
.alarm-global-status.disarmed .alarm-global-status-icon { background: rgba(46,204,113,0.15); color: #2ecc71; }
.alarm-global-status.armed .alarm-global-status-icon { background: rgba(231,76,60,0.15); color: #e74c3c; }
.alarm-global-status.partial .alarm-global-status-icon { background: rgba(243,156,18,0.15); color: #f39c12; }
.alarm-global-status.triggered .alarm-global-status-icon { background: rgba(231,76,60,0.25); color: #e74c3c; }

.alarm-global-status-text { flex: 1; }
.alarm-global-status-label { font-size: 16px; font-weight: 700; color: #fff; }
.alarm-global-status.triggered .alarm-global-status-label { color: #e74c3c; }
.alarm-global-status-detail { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; }

/* Zone Cards */
.alarm-zone-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.alarm-zone-card {
    padding: 14px 16px;
    border-radius: 12px;
    border: 1.5px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.alarm-zone-card:hover { background: rgba(255,255,255,0.06); }
.alarm-zone-card.armed { border-color: rgba(231,76,60,0.35); background: rgba(231,76,60,0.06); }
.alarm-zone-card.triggered { border-color: rgba(231,76,60,0.5); background: rgba(231,76,60,0.1); animation: alarm-pulse 1s infinite; }
.alarm-zone-card.selected { border-color: rgba(74,158,255,0.5); background: rgba(74,158,255,0.08); }
.alarm-zone-card.armed.selected { border-color: rgba(74,158,255,0.5); }

.alarm-zone-card-header {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-bottom: 8px;
}

.alarm-zone-card-name {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600; color: #fff;
}

.alarm-zone-icon { display: flex; }
.alarm-zone-icon svg { width: 16px; height: 16px; }

.alarm-zone-card-state {
    font-size: 11px; font-weight: 600; padding: 3px 10px;
    border-radius: 20px; white-space: nowrap;
}

.alarm-zone-checkbox {
    width: 18px; height: 18px; border-radius: 4px;
    border: 1.5px solid rgba(255,255,255,0.25); display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
    transition: all 0.2s;
}
.alarm-zone-checkbox.checked {
    background: #4a9eff; border-color: #4a9eff; color: #fff;
}
.alarm-zone-checkbox svg { width: 12px; height: 12px; }

.alarm-zone-card-sensors {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

.alarm-zone-sensor-dot {
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    border-radius: 6px; transition: all 0.2s;
}
.alarm-zone-sensor-dot svg { width: 14px; height: 14px; }
.alarm-zone-sensor-dot.closed { background: rgba(46,204,113,0.12); color: #2ecc71; }
.alarm-zone-sensor-dot.open { background: rgba(231,76,60,0.15); color: #e74c3c; }

.alarm-zone-open-count {
    font-size: 11px; color: #e74c3c; font-weight: 500;
    margin-left: 4px;
}

/* Zone Hint */
.alarm-zone-hint {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 12px; color: rgba(255,255,255,0.4);
    padding: 6px 12px; margin-bottom: 12px;
}
.alarm-zone-hint-btn {
    background: rgba(74,158,255,0.1); border: 1px solid rgba(74,158,255,0.25);
    color: #4a9eff; font-size: 11px; padding: 3px 10px; border-radius: 6px;
    cursor: pointer; transition: all 0.2s;
}
.alarm-zone-hint-btn:hover { background: rgba(74,158,255,0.2); }

/* Sensor Zone Label */
.alarm-sensor-zone-label {
    grid-column: 1 / -1;
    font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.5);
    padding: 8px 0 4px 0; text-transform: uppercase; letter-spacing: 0.5px;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 4px;
}
.alarm-sensor-zone-label:first-child { border-top: none; margin-top: 0; }

/* ===== ALARM RESPONSIVE ===== */
@media (max-width: 900px) {
    .alarm-content.with-installer {
        flex-direction: column;
    }

    .alarm-user-panel {
        max-width: 100%;
    }

    .alarm-installer-panel {
        max-width: 100%;
        max-height: none;
    }
}

@media (max-width: 768px) {
    .alarm-view { padding: 12px; }
    .alarm-title { font-size: 18px; }

    .alarm-modes {
        grid-template-columns: repeat(3, 1fr);
    }

    .alarm-status-display { padding: 14px; }
    .alarm-status-label { font-size: 17px; }

    .alarm-keypad { max-width: 240px; }

    .alarm-key {
        font-size: 20px;
        border-radius: 10px;
    }

    .alarm-installer-panel {
        border-radius: 12px;
    }
}

@media (max-width: 400px) {
    .alarm-modes {
        grid-template-columns: repeat(2, 1fr);
    }

    .alarm-header { flex-direction: column; align-items: flex-start; }
    .alarm-header-right { width: 100%; justify-content: flex-end; }
}

/* ===== ALARM INSTALLER V2 - Functional Controls ===== */

/* Toggle Switch */
.alarm-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.alarm-toggle-switch input { opacity: 0; width: 0; height: 0; }

.alarm-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(255,255,255,0.12);
    border-radius: 24px;
    transition: all 0.3s;
}

.alarm-toggle-slider:before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: rgba(255,255,255,0.6);
    border-radius: 50%;
    transition: all 0.3s;
}

.alarm-toggle-switch input:checked + .alarm-toggle-slider { background: #4a9eff; }
.alarm-toggle-switch input:checked + .alarm-toggle-slider:before { transform: translateX(20px); background: white; }

/* Toggle Row */
.alarm-inst-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.alarm-inst-toggle-row:last-child { border-bottom: none; }

.alarm-inst-toggle-info { flex: 1; min-width: 0; padding-right: 16px; }
.alarm-inst-toggle-label { display: block; font-size: 14px; font-weight: 500; }
.alarm-inst-toggle-desc { display: block; font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 3px; line-height: 1.4; }

.alarm-inst-settings-grid {
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
    padding: 4px 16px;
    border: 1px solid rgba(255,255,255,0.04);
}

/* Mode Card */
.alarm-inst-area-config { display: flex; flex-direction: column; gap: 8px; }
.alarm-inst-area-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 0;
    color: rgba(255,255,255,0.7);
}

.alarm-inst-area-name svg { width: 18px; height: 18px; }

.alarm-inst-mode-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 12px 14px;
    transition: all 0.2s;
}

.alarm-inst-mode-card.enabled { border-color: rgba(255,255,255,0.1); }
.alarm-inst-mode-card.disabled { opacity: 0.6; }

.alarm-inst-mode-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.alarm-inst-mode-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.alarm-inst-mode-icon { display: flex; }
.alarm-inst-mode-icon svg { width: 20px; height: 20px; }
.alarm-inst-mode-name { font-size: 14px; font-weight: 500; }

.alarm-inst-mode-delays {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.alarm-inst-delay-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.alarm-inst-delay-field label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.35);
    font-weight: 600;
}

.alarm-inst-delay-field input {
    width: 100%;
    padding: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: white;
    font-size: 14px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.alarm-inst-delay-field input:focus { border-color: #4a9eff; outline: none; }

/* Sensor Config */
.alarm-inst-sensor-config {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    margin-bottom: 6px;
    overflow: hidden;
}

.alarm-inst-sensor-config.open { border-color: rgba(231,76,60,0.2); }

.alarm-inst-sensor-main {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.alarm-inst-sensor-details { flex: 1; min-width: 0; }

.alarm-inst-sensor-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.alarm-inst-sensor-type {
    font-size: 11px;
    font-weight: 600;
    color: #4a9eff;
    background: rgba(74,158,255,0.1);
    padding: 1px 6px;
    border-radius: 4px;
}

.alarm-inst-sensor-actions { display: flex; gap: 4px; }

.alarm-inst-btn-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: all 0.2s;
}

.alarm-inst-btn-icon:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8); }
.alarm-inst-btn-icon.alarm-inst-btn-danger:hover { background: rgba(231,76,60,0.1); color: #e74c3c; border-color: rgba(231,76,60,0.2); }
.alarm-inst-btn-icon svg { width: 16px; height: 16px; }

/* Sensor Edit Expanded */
.alarm-inst-sensor-edit {
    padding: 12px 14px;
    background: rgba(0,0,0,0.2);
    border-top: 1px solid rgba(255,255,255,0.06);
}

.alarm-inst-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.alarm-inst-field-row label {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
    min-width: 100px;
}

.alarm-inst-field-row select,
.alarm-inst-field-row input[type="text"],
.alarm-inst-field-row input[type="number"] {
    flex: 1;
    padding: 7px 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: white;
    font-size: 13px;
}

.alarm-inst-field-row select:focus,
.alarm-inst-field-row input:focus { border-color: #4a9eff; outline: none; }
.alarm-inst-field-row select option { background: #1a2942; color: white; }

/* Zone sensor dropdown */
.alarm-inst-area-config select { color: #fff !important; }
.alarm-inst-area-config select option { background: #1a2942; color: #fff; }

.alarm-inst-mode-checks {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.alarm-inst-check-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
}

.alarm-inst-check-label input[type="checkbox"] {
    accent-color: #4a9eff;
    width: 15px;
    height: 15px;
}

.alarm-inst-sensor-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* Add Sensors */
.alarm-inst-btn-add {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(74,158,255,0.1);
    border: 1px solid rgba(74,158,255,0.25);
    border-radius: 8px;
    color: #4a9eff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.alarm-inst-btn-add:hover { background: rgba(74,158,255,0.18); }
.alarm-inst-btn-add svg { width: 16px; height: 16px; }

.alarm-inst-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.alarm-inst-add-sensors {
    background: rgba(10,22,40,0.8);
    border: 1px solid rgba(74,158,255,0.15);
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
}

.alarm-inst-add-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.alarm-inst-add-header h5 { font-size: 14px; font-weight: 600; margin: 0; }

.alarm-inst-add-list {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.alarm-inst-add-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.alarm-inst-add-item:hover { background: rgba(74,158,255,0.08); }

.alarm-inst-add-item-info { flex: 1; min-width: 0; }
.alarm-inst-add-item-name { font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alarm-inst-add-item-class { font-size: 10px; color: rgba(255,255,255,0.3); display: block; }
.alarm-inst-add-item-btn { color: #4a9eff; display: flex; }

/* User Cards */
.alarm-inst-user-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    margin-bottom: 6px;
}

.alarm-inst-user-main {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}

.alarm-inst-user-icon { display: flex; flex-shrink: 0; }
.alarm-inst-user-icon svg { width: 24px; height: 24px; }

.alarm-inst-user-info { flex: 1; min-width: 0; }
.alarm-inst-user-name { font-size: 14px; font-weight: 500; }

.alarm-inst-user-perms {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.alarm-inst-perm {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(74,158,255,0.1);
    color: #4a9eff;
}

.alarm-inst-perm.admin { background: rgba(243,156,18,0.12); color: #f39c12; }
.alarm-inst-perm.override { background: rgba(231,76,60,0.1); color: #e74c3c; }

.alarm-inst-user-actions { display: flex; gap: 4px; }

/* New User Form */
.alarm-inst-new-user-form {
    background: rgba(74,158,255,0.04);
    border: 1px solid rgba(74,158,255,0.15);
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
}

.alarm-inst-new-user-form h5 { font-size: 14px; font-weight: 600; margin: 0 0 14px 0; }

.alarm-inst-user-perm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.alarm-inst-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}

.alarm-inst-btn-secondary {
    padding: 8px 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.alarm-inst-btn-secondary:hover { background: rgba(255,255,255,0.1); }

.alarm-inst-btn-primary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: rgba(74,158,255,0.15);
    border: 1px solid rgba(74,158,255,0.3);
    border-radius: 8px;
    color: #4a9eff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.alarm-inst-btn-primary:hover { background: rgba(74,158,255,0.25); }
.alarm-inst-btn-primary:disabled { opacity: 0.4; pointer-events: none; }
.alarm-inst-btn-primary svg { width: 16px; height: 16px; }

.alarm-inst-saving {
    text-align: center;
    padding: 10px;
    font-size: 12px;
    color: #4a9eff;
    animation: fadeSlideIn 0.2s ease;
}

.alarm-inst-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    color: rgba(255,255,255,0.4);
    font-size: 13px;
}
/* Tour Overlay */
.tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: tourFadeIn 0.3s ease;
}

@keyframes tourFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Tour Modal */
.tour-modal {
    background: linear-gradient(145deg, #1e3a5f 0%, #0d1f33 100%);
    border-radius: 20px;
    max-width: 480px;
    width: 90%;
    padding: 0;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
    animation: tourSlideUp 0.4s ease;
    overflow: hidden;
}

@keyframes tourSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.tour-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.2);
}

.tour-step-counter {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 12px;
    border-radius: 12px;
}

.tour-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
}

.tour-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.tour-modal-icon {
    font-size: 64px;
    text-align: center;
    padding: 20px 0 10px;
}

.tour-modal-title {
    font-size: 24px;
    font-weight: 600;
    color: white;
    text-align: center;
    margin: 0 0 15px;
    padding: 0 25px;
}

.tour-modal-content {
    padding: 0 25px 20px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    line-height: 1.6;
}

.tour-modal-content p {
    margin: 8px 0;
}

.tour-modal-content ul {
    margin: 15px 0;
    padding-left: 0;
    list-style: none;
}

.tour-modal-content ul li {
    padding: 6px 0;
}

.tour-modal-content strong {
    color: #4a9eff;
}

.tour-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tour-btn-group {
    display: flex;
    gap: 10px;
}

/* Tour Buttons */
.tour-btn {
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.tour-btn-primary {
    background: linear-gradient(135deg, #4a9eff 0%, #6366f1 100%);
    color: white;
}

.tour-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(74, 158, 255, 0.4);
}

.tour-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.tour-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

.tour-btn-ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    padding: 12px 16px;
}

.tour-btn-ghost:hover {
    color: rgba(255, 255, 255, 0.8);
}

.tour-btn-small {
    padding: 8px 14px;
    font-size: 13px;
}

.tour-btn-link {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 13px;
    padding: 8px;
}

.tour-btn-link:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* Tour Spotlight */
.tour-spotlight-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    pointer-events: none;
}

.tour-spotlight-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.tour-spotlight-ring {
    position: fixed;
    border: 3px solid #4a9eff;
    border-radius: 10px;
    pointer-events: none;
    box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.3), 0 0 30px rgba(74, 158, 255, 0.4);
    animation: tourPulseRing 2s infinite;
}

@keyframes tourPulseRing {
    0%, 100% { box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.3), 0 0 30px rgba(74, 158, 255, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(74, 158, 255, 0.2), 0 0 50px rgba(74, 158, 255, 0.5); }
}

/* Tour Tooltip */
.tour-tooltip {
    position: fixed;
    width: 320px;
    background: linear-gradient(145deg, #1e3a5f 0%, #0d1f33 100%);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
    z-index: 10001;
    pointer-events: auto;
    animation: tourTooltipIn 0.3s ease;
}

@keyframes tourTooltipIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.tour-tooltip-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px 10px;
}

.tour-step-counter-small {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
    padding: 3px 8px;
    border-radius: 8px;
}

.tour-tooltip-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.tour-tooltip-body {
    padding: 0 18px 12px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}

.tour-tooltip-body strong {
    color: #4a9eff;
}

.tour-tooltip-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(74, 158, 255, 0.1);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.tour-pulse-dot {
    width: 8px;
    height: 8px;
    background: #4a9eff;
    border-radius: 50%;
    animation: tourPulseDot 1.5s infinite;
}

@keyframes tourPulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
}

.tour-tooltip-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Note e CTA */
.tour-note {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    padding: 10px 15px;
    border-radius: 10px;
    margin-top: 15px;
    font-size: 13px;
}

.tour-cta {
    display: inline-block;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 15px;
    transition: all 0.2s;
}

.tour-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4);
}

/* Tour Summary */
.tour-summary {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 15px 20px;
    margin: 15px 0;
    text-align: left;
}

.tour-summary h4 {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 10px;
}

.tour-summary ul {
    margin: 0;
}

/* Responsive */
@media (max-width: 600px) {
    .tour-modal {
        max-width: 95%;
        margin: 10px;
    }
    
    .tour-modal-title {
        font-size: 20px;
    }
    
    .tour-modal-icon {
        font-size: 48px;
    }
    
    .tour-tooltip {
        width: calc(100% - 30px);
        max-width: 320px;
        left: 15px !important;
        right: 15px !important;
        /* Su mobile il tooltip va sempre in basso o in alto */
        position: fixed !important;
    }
    
    .tour-tooltip-body {
        font-size: 13px;
    }
    
    .tour-tooltip-header h3 {
        font-size: 14px;
    }
    
    .tour-tooltip-hint {
        font-size: 12px;
        padding: 8px 15px;
    }
    
    .tour-modal-footer {
        flex-direction: column;
        gap: 10px;
    }
    
    .tour-btn-group {
        width: 100%;
        justify-content: center;
    }
    
    /* Spotlight ring più visibile su mobile */
    .tour-spotlight-ring {
        border-width: 2px;
    }
}

/* Pulsante carica piantina demo */
.tour-floorplan-action {
    padding: 15px 25px;
    text-align: center;
}

.tour-btn-floorplan {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.tour-btn-floorplan:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4);
}

.tour-btn-floorplan:active {
    transform: translateY(-1px);
}

/* ===== INSTALLER TOUR STYLES ===== */
.installer-tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.installer-tour-modal {
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(74, 158, 255, 0.3);
    border-radius: 20px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(74, 158, 255, 0.1);
}

.installer-tour-badge {
    display: inline-block;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Tour Installatore specifici stili */
.installer-tour-modal {
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

.installer-tour-modal .tour-modal-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.installer-tour-badge {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.tour-floating-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    pointer-events: none; /* Container non blocca click */
}

.tour-floating-modal {
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid rgba(74, 158, 255, 0.4);
    border-radius: 16px;
    padding: 0;
    max-width: 350px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(74, 158, 255, 0.2);
    pointer-events: auto; /* Solo il modal riceve click */
    animation: floatIn 0.3s ease-out;
}

@keyframes floatIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.tour-floating-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tour-floating-icon {
    font-size: 24px;
}

.tour-floating-title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.tour-floating-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.6);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.tour-floating-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.tour-floating-content {
    padding: 15px 20px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1.5;
}

.tour-floating-content p {
    margin: 0 0 8px 0;
}

.tour-floating-content p:last-child {
    margin-bottom: 0;
}

.tour-floating-content strong {
    color: #4ade80;
}

.tour-floating-footer {
    padding: 15px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
}

/* Mobile: floating modal in basso al centro */
@media (max-width: 768px) {
    .tour-floating-container {
        bottom: 10px;
        right: 10px;
        left: 10px;
    }
    
    .tour-floating-modal {
        max-width: 100%;
    }
}

/* ===== FIX DEMO BANNER IN FULLSCREEN ===== */