body {
    background: #222;
    font-family: sans-serif;
    /* font-family: monospace; */
    color: #eee;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

h2 {
    margin-top: 0;
}

.container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-row: 1fr 1fr;
    gap: 20px;
}

/* Actions */
.actions {
    margin-top: 20px;
    width: 100%;
    text-align: center;

    textarea {
        width: 100%;
        height: 150px;
        margin-top: 15px;
        background: #111;
        color: #fff;
        border: 1px solid #444;
        font-family: monospace;
        padding: 10px;
        border-radius: 4px;
    }

    button {
        background: #25a18e;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;

        &:hover {
            background: #00a5cf;
        }
    }
}


/* Editor Styles */
.panel {
    background: #2d2d2d;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    .grid{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .input-group{
        
        margin-top:1rem;
        label{
            display:block;margin-bottom:0.3rem;
        }
        input{padding:0.5rem; background:#3d3d3d; border:0; width:50%;color:#fff}
    }
    .filereg {
        &::file-selector-button {
            font-weight: bold;
            color: dodgerblue;
            padding: 0.5em;
            border: thin solid grey;
            border-radius: 3px;
        }

        &:before {
            content: 'Select some files';
            display: inline-block;
        }
    }

    .color-grid {
        width: 80%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px 20%;
    }

    .color-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.8em;
        text-align: right;
        label{ 
            width:80%;
            span{display:block;opacity: 0.5;}
        }
        input[type="color"] {
            border: none;
            width: 50px;
            height: 30px;
            cursor: pointer;
            background: none;
        }
    }
}


/* Terminale */
.terminal {
    border-radius: 6px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
    overflow: hidden;


    .terminal-header {
        background: #333;
        padding: 6px 10px;
        display: flex;
        align-items: center;
        gap: 6px;

        .terminal-btn {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
        }

        .terminal-btn-red {
            background: #ff5f57;
        }

        .terminal-btn-yellow {
            background: #ffbd2e;
        }

        .terminal-btn-green {
            background: #28c840;
        }
    }

    .terminal-title {
        margin-left: 10px;
        color: #aaa;
        font-size: 12px;
    }

    /* Prompt */
    .terminal-body {
        background: var(--ansi-2,#000);
        padding: 10px;
        font-size: 16px;
        overflow-y: auto;
        height: 60vh;
        font-family: var(--fontFamily,sans-serif);
        color:var(--ansi-0,#fff);

        /* Stili per le righe del terminale */
        .terminal-line {
            /*white-space: pre;*/
            /* Mantiene la spaziatura da terminale */
            margin-bottom: 2px;
        }

        /* Mapping classi -> Variabili ANSI PuTTY */
        .term-inode {
            /*color: var(--ansi-8);*/
            color: var(--ansi-0,#fff);
        }
        .term-user {
            /*color: var(--ansi-10);*/
            color: var(--ansi-0,#fff);
        }

        /* Inode in Grigio scuro (Bold Black) */
        .term-perms {
            /*color: var(--ansi-11);*/
            color: var(--ansi-0,#fff);
        }

        /* Permessi in Verde brillante */
        .term-owner {
            /*color: var(--ansi-13);*/
            color: var(--ansi-0,#fff);
        }

        /* Proprietario in Giallo */
        .term-group {
            /*color: var(--ansi-13);*/
            color: var(--ansi-0,#fff);
        }

        /* Gruppo in Giallo */
        .term-size {
            /*color: var(--ansi-15);*/
            color: var(--ansi-0,#fff);
        }

        /* Dimensione in Bianco bold */
        .term-date {
            /*color: var(--ansi-7);*/
            color: var(--ansi-0,#fff);
        }

        /* Data in Grigio (Black) */

        /* Colori basati sul tipo di file */
        .term-name {

            /* Directory: Blu */
            &.dir {
                color: var(--ansi-15);
                /*font-weight: bold;*/
                &.stikybit{
                    background-color: var(--ansi-14);
                    color:var(--ansi-20);
                    padding:2px;
                }
                &.d777{
                    color:var(--ansi-14);
                    background-color: var(--ansi-10);
                    padding:2px;
                }
            }
            &.file{
                &.f777{
                     color: var(--ansi-10);
                }
            }
            
        }

    }

}


/* Colori “tipo ls” */
.item.dir {
    color: #4ea5ff;
    /* directory: blu */
    /* di */
    /*[web:3][web:12]*/
}

.item.file-regular {
    color: #eeeeee;
    /* file normale */
    /*[web:4]*/
}

.item.file-exec {
    color: #4ef54e;
    /* eseguibile: verde */
    /* ex */
    /*[web:3][web:4][web:12]*/
}

.item.file-symlink {
    color: #4deeea;
    /* symlink: cyan chiaro */
    /* ln */
    /*[web:3][web:4]*/
}

.item.file-archive {
    color: #ff5555;
    /* archivi/compressi: rosso */
    /*[web:4][web:12]*/
}

.item.file-image {
    color: #ff79ff;
    /* immagini/video: magenta */
    /*[web:4]*/
}

.item.file-audio {
    color: #40e0d0;
    /* audio: cyan */
    /*[web:4]*/
}

.item.file-device {
    color: #ffd700;
    background: #222;
    /* device: giallo su sfondo scuro */
    /*[web:12]*/
}

.item.file-pipe {
    color: #ffff00;
    background: #000;
    /* pipe: giallo/nero */
    /*[web:4]*/
}

.item.file-broken-link {
    color: #ff5555;
    background: #000;
    /* symlink rotto: rosso/bg scuro */
    /*[web:4]*/
}