/* public/css/style.css */
:root {
    --primary-color: #2c3e50;
    --secondary-color: #34495e;
    --accent-color: #3498db;
    --text-color: #333;
    --sidebar-width: 250px;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    color: var(--text-color);
    background-color: #f4f6f9;
}

/* Header & Logo */
.header-container {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #dcdde1;
    height: 60px;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.app-logo {
    height: 50px;
    margin-right: 20px;
}

.page-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-color);
}

/* Bottone Toggle Menu */
.toggle-btn {
    font-size: 22px;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--primary-color);
    margin-right: 15px;
    padding: 5px;
}

/* Sidebar Menu (A Scomparsa) */
.sidebar {
    height: 100vh;
    width: var(--sidebar-width);
    position: fixed;
    top: 0;
    left: calc(-1 * var(--sidebar-width)); /* Nascosto all'avvio */
    background-color: var(--primary-color);
    padding-top: 70px;
    box-sizing: border-box;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.sidebar.active {
    left: 0;
}

.sidebar a {
    padding: 15px 25px;
    text-decoration: none;
    font-size: 16px;
    color: #ecf0f1;
    display: block;
    transition: all 0.2s;
    cursor: pointer;
}

.sidebar a:hover {
    background-color: var(--secondary-color);
    border-left: 4px solid var(--accent-color);
    padding-left: 21px;
}

/* Contenuto Principale */

/* Contenuto Principale: di base occupa tutto lo spazio */
.main-content {
    margin-top: 60px;
    padding: 20px;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

/* Quando il menu compare, il contenuto si sposta a destra senza farsi coprire */
.main-content.shifted {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
}

/* Cards di Stato per Pagina Info */
.status-card {
    padding: 15px 20px;
    margin: 15px 0;
    border-radius: 6px;
    font-weight: 600;
    display: inline-block;
    min-width: 200px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.status-online { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.status-offline { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }


/* Stile unificato per i Form di Inserimento */
.main-content form, 
.form-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 500px;
    margin-bottom: 30px;
}

.main-content label {
    font-weight: 600;
    margin-bottom: -10px;
    color: var(--secondary-color);
}

.main-content input[type="text"], 
.main-content input[type="password"], 
.main-content select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
}

/* Pulsanti Standard dell'applicazione */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.2s;
}

.btn-primary { background-color: var(--primary-color); color: white; }
.btn-primary:hover { background-color: var(--secondary-color); }
.btn-secondary { background-color: #bdc3c7; color: #333; }
.btn-secondary:hover { background-color: #95a5a6; }

/* Allineamento classi bottoni per tabelle */
.btn-warning {
    background-color: #f1c40f;
    color: #fff;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: background 0.2s;
}

.btn-warning:hover {
    background-color: #f39c12;
}

.btn-danger {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
}

/* Stile unificato per le Tabelle Dati */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border-radius: 4px;
    overflow: hidden;
}

.data-table th, 
.data-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

.data-table th {
    background-color: var(--secondary-color);
    color: #ffffff;
    font-weight: 600;
}

.data-table tr:hover {
    background-color: #f8f9fa;
}

/* Stile unificato per box su body */
.box-main {
    background:#fff;
    padding:25px;
    border-radius:6px;
    box-shadow:0 2px 4px rgba(0,0,0,0.05);
}


#deviceTreeContainer ul {
    list-style-type: none; /* Rimuove i pallini classici delle liste */
    padding-left: 20px;    /* Crea l'indentazione ad albero */
}

#deviceTreeContainer summary {
    cursor: pointer;       /* Mostra la manina quando passi sopra con il mouse */
    user-select: none;     /* Evita la selezione del testo per sbaglio al doppio click */
}

#deviceTreeContainer summary:hover {
    color: #007bff;        /* Cambia colore al passaggio del mouse */
}

/* ==========================================================================
   ANIMAZIONI E STILI PER AGGIORNAMENTI LIVE (STILE MQTT EXPLORER)
   ========================================================================== */

/* Animazione per il rettangolo interno del Topic */
@keyframes flash-summary-span {
    0%, 75% { 
        background-color: #28a745 !important; /* Verde pieno e acceso (fino a ~2.2 secondi) */
        color: white !important;
    }
    100% { 
        background-color: transparent !important; /* Sfuma tornando trasparente */
        color: var(--text-color) !important;
    }
}

/* Animazione per la barra laterale del blocco <details> */
@keyframes flash-container-border {
    0%, 75% { 
        border-left-color: #28a745 !important;
        background-color: rgba(40, 167, 69, 0.04) !important;
    }
    100% { 
        border-left-color: transparent !important;
        background-color: transparent !important;
    }
}

/* Contenitore <details> del messaggio quando si aggiorna */
.flash-update {
    border-left: 4px solid transparent;
    transition: none;
    animation: flash-container-border 3s forwards ease-out; 
}

/* Il tag summary mantiene display nativo, ma lo span interno si colora stabilmente */
.flash-update > summary span.topic-title {
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    animation: flash-summary-span 3s forwards ease-out;
}

/* Forza il testo in grassetto a ereditare il colore bianco dell'animazione */
.flash-update > summary span.topic-title strong {
    color: inherit !important;
}

/* Box dati JSON <pre> dentro il messaggio aggiornato */
.flash-update > pre {
    border-left: 2px dashed rgba(40, 167, 69, 0.3) !important;
    background: #fdfdfd !important;
}


/* Container per l'input e il bottone dell'occhio */
.password-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

/* Assicura che l'input mantenga lo spazio a destra per non sovrapporsi all'occhio */
.password-wrapper input {
    padding-right: 40px !important;
    width: 100%;
    box-sizing: border-box;
}

/* Stile del pulsante occhio dentro il campo */
.btn-toggle-pwd {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #555;
    user-select: none;
}

.btn-toggle-pwd:hover {
    color: #000;
    transform: scale(1.1);
}


/* Stile specifico per il pulsante comando a forma di ruota dentata */
.btn-device-settings {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    padding: 2px 6px;
    margin-left: 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.btn-device-settings:hover {
    background-color: #e0e0e0;
    border-color: #bdc3c7;
    transform: rotate(45deg); /* Effetto rotazione simpatica all'hover */
}

/* Stile di blocco per evidenziare il codice del topic di destinazione */
#targetTopicContainer {
    background-color: #2c3e50;
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 13px;
}

/* Regola generale per evitare che padding o bordi allarghino le textbox oltre il 100% */
.iot-container,
.iot-container *,
.iot-container *::before,
.iot-container *::after {
    box-sizing: border-box;
}

/* Stile per i box dei comandi (Invio e Risposta) */
.command-box-wrapper {
    margin-bottom: 20px;
    width: 100%;
}

/* Regola fondamentale per il calcolo corretto delle larghezze */
.textarea-custom {
    width: 100%;
    box-sizing: border-box; /* Impedisce a padding e bordi di far sballare la larghezza */
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: monospace;
    resize: vertical; /* Impedisce all'utente di allargarla in orizzontale rovinando il layout */
}

/* Altezza per il box di invio payload (come da immagine) */
.send-box {
    height: 150px;
}

/* Altezza per il box di risposta (adesso proporzionata e spaziosa) */
.response-box {
    height: 150px; /* Impostata uguale a quella sopra, o aumentala a 200px se preferisci */
    background-color: #f8f9fa; /* Sfondo grigio chiaro per indicare il read-only */
}

/* Contenitore di blocco per distanziare le sezioni ed evitare il collasso dei margini */
.form-group-block {
    width: 100%;
    margin-bottom: 20px;
    display: block; /* Forza l'elemento a prendersi tutta la riga */
}

/* --- STILI GENERALI E CARD DA CONTROLLARE EVENTUALI DOPPI --- */
h2 {
    margin-top: 0;
    color: #222;
}

p.subtitle {
    color: #666;
    margin-bottom: 25px;
}

/* --- LAYOUT FORM SELEZIONE --- */
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: 600;
    margin-bottom: 8px;
    color: #444;
}

.form-group select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
}

/* --- BLOCCO INFO TOPIC --- */
.topic-info-box {
    background-color: #eef2f7;
    border-left: 4px solid #0056b3;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 25px;
    font-size: 15px;
}

.topic-badge {
    background-color: #1a2d42;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: monospace;
}

/* --- PULSANTI DI COMANDO RAPIDO --- */
.cmd-quick-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.btn-action {
    flex: 1;
    background-color: #2c3e50;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-action:hover {
    background-color: #1a252f;
}

/* --- STRUTTURA TEXTAREA (UNIFORMATE) --- */
.textarea-block {
    width: 100%;
    margin-bottom: 20px;
    display: block;
}

.textarea-block label, 
.textarea-block h3 {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}

.textarea-custom {
    width: 100%;
    box-sizing: border-box; /* Cruciale: include padding e bordi nella larghezza 100% */
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    resize: vertical; /* Blocca l'allargamento orizzontale */
}

/* Altezze specifiche e stili dedicati */
.send-box {
    height: 150px;
}

.response-box {
    height: 150px; /* Perfettamente speculare a quella sopra */
    background-color: #f8f9fa; /* Grigio chiaro per indicare sola lettura */
    color: #495057;
}

/* --- PULSANTI DI INVIO / FORMATTAZIONE --- */
.btn-submit-container {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.btn-main {
    background-color: #1c3d5a;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    flex: 2;
}

.btn-main:hover {
    background-color: #102a43;
}

.btn-secondary {
    background-color: #ced4da;
    color: #333;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
}

.btn-secondary:hover {
    background-color: #b8c2cc;
}

/* --- SEPARATORE --- */
hr {
    border: 0;
    border-top: 1px solid #dee2e6;
    margin: 30px 0;
}

.response-status-text {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #666;
}


.login-page {
    margin: 0;
    padding: 0;
    background-color: #000; /* Sfondo nero di sicurezza */
    overflow: hidden;
    font-family: sans-serif;
}

#matrix-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* Mette il canvas sullo sfondo */
}

/* Assicurati che il tuo form di login esistente abbia una classe o un ID con z-index positivo */
.login-container {
    position: relative;
    z-index: 1; 
    background: rgba(255, 255, 255, 0.1); /* Effetto vetro opaco */
    backdrop-filter: blur(10px);
    /* Aggiungi qui il resto dello stile del tuo box */
}