* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body, html {
    height: 100%;
    width: 100%;
    background-color: #121212;
    color: #ffffff;
    overflow: hidden;
}

/* --- WORKSPACE LAYOUT (2 COLONNE / CLASSICO) --- */
.workspace {
    display: flex;
    height: 100vh;
    width: 100vw;
}

/* --- WORKSPACE LAYOUT (3 COLONNE: EDITOR, CONSOLE, SIDEBAR) --- */
.workspace-three-col {
    display: flex;
    width: 100vw;
    height: calc(100vh - 40px); /* Lascia 40px esatti per il footer in basso */
    background-color: #0d0d0d;
    overflow: hidden;
}

/* --- COLONNA 1: MONACO EDITOR --- */
.editor-panel {
    flex: 5;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #222;
    background-color: #000000;
}

.toolbar {
    height: 45px;
    min-height: 45px; /* Impedisce il collasso al ridimensionamento */
    flex-shrink: 0; /* Evita che il flex container la rimpicciolisca */
    background-color: #1a1a1a;
    display: flex;
    align-items: center;
    padding: 0 15px;
    gap: 10px;
    border-bottom: 1px solid #333;
}

.btn {
    background-color: #1E90FF;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s;
}

    .btn:hover {
        opacity: 0.85;
    }

.btn-reset {
    background-color: #444444;
}

#editor-container {
    flex: 1;
    width: 100%;
}

/* --- GAME PANEL (PHASER.JS) --- */
.game-panel {
    flex: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: #1a1a1a;
    gap: 10px;
}

#phaser-game-container {
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.8);
    border: 1px solid #333;
    overflow: hidden;
}

/* --- COLONNA 2: CONSOLE OUTPUT --- */
.console-panel {
    flex: 4;
    display: flex;
    flex-direction: column;
    background-color: #0d0d0d;
    padding: 10px 15px;
    height: 100%;
    border-right: 1px solid #222;
}

.console-header {
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.console-title {
    font-size: 13px;
    font-weight: bold;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.console-output {
    flex: 1;
    background-color: #000000;
    border: 1px solid #222;
    border-radius: 4px;
    padding: 10px 15px;
    font-family: 'Consolas', 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.4;
    color: #FFD700;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Linee Console Output */
.console-line {
    margin-bottom: 4px;
    color: #FFD700; /* Giallo/Gold predefinito */
}

    .console-line.system {
        color: #1e90ff; /* Blu per i messaggi di sistema */
    }

    .console-line.error {
        color: #ff4d4d; /* Rosso per gli errori */
    }

/* --- COLONNA 3: SIDEBAR (STORICO & PROCEDURE) --- */
.sidebar-panel {
    flex: 3;
    min-width: 260px;
    background-color: #111111;
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 12px;
}

.sidebar-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #161616;
    border: 1px solid #262626;
    border-radius: 4px;
    padding: 10px;
    overflow: hidden;
}

.panel-header {
    height: 30px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #333;
    margin-bottom: 8px;
    padding-bottom: 5px;
}

.header-with-action {
    justify-content: space-between;
}

.panel-title {
    font-size: 11px;
    font-weight: bold;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sidebar-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Stile Cliccabile Storico Esecuzioni (Solo Orario) */
.history-time-item {
    background-color: #1f1f1f;
    border: 1px solid #333;
    color: #cccccc;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

    .history-time-item:hover {
        background-color: #2a2a2a;
        border-color: #1e90ff;
        color: #ffffff;
    }

/* Stile Liste Procedure Definite */
.procedure-item {
    background-color: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #FFD700; /* Giallo/Oro */
    padding: 6px 10px;
    border-radius: 3px;
    font-family: 'Consolas', monospace;
    font-size: 12px;
}

/* Pulsante Carica File .txt */
.btn-upload {
    background-color: #262626;
    color: #dddddd;
    border: 1px solid #444;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 10px;
    cursor: pointer;
}

    .btn-upload:hover {
        background-color: #383838;
        color: #ffffff;
    }

.empty-info {
    font-size: 11px;
    color: #555555;
    font-style: italic;
    padding: 5px;
}

/* --- RESPONSIVE MOBILE (Schermi < 768px) --- */
@media screen and (max-width: 768px) {
    body, html {
        overflow-y: auto; /* Abilita lo scroll verticale su mobile */
    }

    .workspace-three-col {
        flex-direction: column; /* Dispone le 3 colonne l'una sotto l'altra */
        height: auto; /* Rimuove l'altezza fissa da 100vh */
        overflow: visible;
    }

    /* Colonna 1: Editor */
    .editor-panel {
        width: 100%;
        min-height: 350px; /* Garantisce uno spazio di digitazione comodo */
        border-right: none;
        border-bottom: 2px solid #222;
    }

    /* Colonna 2: Output Console */
    .console-panel {
        width: 100%;
        min-height: 250px;
        border-right: none;
        border-bottom: 2px solid #222;
    }

    /* Colonna 3: Sidebar Storico & Procedure */
    .sidebar-panel {
        width: 100%;
        min-height: auto;
    }
}

/* 3. VERO FOOTER NERO IN FONDO AI3 PANNELLI */
.app-footer {
    height: 40px;
    min-height: 40px;
    width: 100vw;
    background-color: #000000; /* Total Black */
    border-top: 1px solid #222;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    font-size: 11px;
    color: #666666;
    z-index: 100;
}

/* --- SCROLLBAR STILE DARK (TIPO MONACO EDITOR) --- */

/* Larghezza e sfondo della traccia per tutti gli elementi con scrollbar */
.console-output::-webkit-scrollbar,
.sidebar-list::-webkit-scrollbar,
.history-item-code::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #1e1e1e; /* Sfondo scuro uguale alla traccia di Monaco */
}

/* Rettangolino che scorre (Thumb) */
.console-output::-webkit-scrollbar-thumb,
.sidebar-list::-webkit-scrollbar-thumb,
.history-item-code::-webkit-scrollbar-thumb {
    background-color: #424242; /* Grigio tipo Monaco */
    border-radius: 0px;
}

    /* Effetto hover sul rettangolino */
    .console-output::-webkit-scrollbar-thumb:hover,
    .sidebar-list::-webkit-scrollbar-thumb:hover,
    .history-item-code::-webkit-scrollbar-thumb:hover {
        background-color: #4f4f4f; /* Grigio leggermente più chiaro al passaggio del mouse */
    }

/* Rettangolo di giunzione in basso a destra (se compaiono sia scroll orizzontale che verticale) */
.console-output::-webkit-scrollbar-corner,
.sidebar-list::-webkit-scrollbar-corner,
.history-item-code::-webkit-scrollbar-corner {
    background-color: #1e1e1e;
}

/* Supporto per Firefox */
.console-output,
.sidebar-list,
.history-item-code {
    scrollbar-width: thin;
    scrollbar-color: #424242 #1e1e1e;
}

#phaser-game-container canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}