/* -- Themes -- */
/* Send me your themes at web.themes@katt.boo*/
:root { /*Default*/
--bg: #1e1e2e;
--fg: #f5f5f5; /* Soft off-white */

--text_terminal: #ffd991;  /* Soft amber */
--border_terminal: #ffd991;

--text_sidebar: #a6e3a1;  /* Soft green */
--border_sidebar: #a6e3a1;

--text_input: #b4befe;  /* Soft lavender-blue */
--border_input: #b4befe;

--border_tooltip: #f5c2e7;  /* Soft pink */
--text_tooltip: #f5c2e7;

--accent1: #94e2d5; /* Pastel cyan */
--accent2: #f2b5d4; /* Pastel magenta */
--dim: #a1a1b5; /* Soft grey-blue */
}

[data-theme='neon-green'] {
    --bg: #000000;
    --fg: #00ff00;

    --text_terminal: #dfffec;
    --border_terminal: #00ff66;

    --text_sidebar: #00ff00;
    --border_sidebar: #00ff00;

    --text_input: #dfffec;
    --border_input: #66ff66;

    --border_tooltip: #99ff99;
    --text_tooltip: #99ff99;

    --accent1: #33ff99;
    --accent2: #66ffaa;
    --dim: #336633;
}

[data-theme='solarized-dark'] {
    --bg: #002b36;
    --fg: #93a1a1;

    --text_terminal: #b58900;
    --border_terminal: #b58900;

    --text_sidebar: #859900;
    --border_sidebar: #859900;

    --text_input: #268bd2;
    --border_input: #268bd2;

    --border_tooltip: #d33682;
    --text_tooltip: #d33682;

    --accent1: #2aa198; /* cyan */
    --accent2: #cb4b16; /* orange */
    --dim: #586e75;
}


html, body { height: fit-content; width: 100%; padding: 0; margin: 0;}
body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;    
}
.layout { 
    display: flex; 
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    padding: 1%; 
    border-right: 1px solid var(--border_sidebar);
}
.brand { 
    margin-bottom: 8px; 
    color: var(--accent1); 
}
.nav { 
    display: flex; 
    flex-direction: column; 
    gap: 6px; }
.nav button {
    width: 130px;
    text-align: left; 
    padding: 6px 8px; 
    border-radius: 6px; 
    cursor: pointer;
    border: 1px solid var(--border_sidebar); 
    color: var(--text_sidebar); 
    background: transparent;
}
.menu {
    display: none;
}

/* Terminal */
.main { 
    flex: 1; 
    padding: 16px; 
}
.term { 
    border: 1px solid var(--border_terminal); 
    height: 60vh; 
    min-height: 360px; 
    display: flex; 
    flex-direction: column; 
}
.screen { 
    flex: 1; 
    overflow: auto; 
    padding: 12px; 
    color: var(--text_terminal);
}
.screen .line { 
    white-space: pre-wrap; 
    word-break: break-word; 
}
.screen pre { 
    white-space: pre; 
    line-height: 1.25; 
    font-size: 0.95rem; 
    margin: 0; 
}
.inputbar { 
    border-top: 1px solid var(--border_input);
    padding: 8px; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}
.prompt .user { color: var(--accent1); }
.prompt .host { color: var(--accent2); }
.prompt .path { color: var(--accent1); }
.cmd { 
    flex: 1; 
    background: transparent; 
    border: none; 
    outline: none; 
    overflow: hidden;
    color: var(--text_input); 
    caret-color: var(--accent1); 
}
.tooltip { 
    display: inline-block; 
    padding: 1px 6px; 
    border: 1px solid var(--border_tooltip); 
    color: var(--text_tooltip); 
}

/* Blinking block cursor */
.blink { 
    width: 8px; 
    height: 16px; 
    margin-left: 2px; 
    background: var(--accent1); 
    animation: blink 1s steps(1,end) infinite; 
    display: inline-block; 
}
@keyframes blink { 50% { opacity: 0; } }

/* Utilities (the grey text e.g '#opening {file}' ) */
.dim { opacity: .8; }




/* -- mobile changes */ 
@media (max-device-width: 545px) {
    html, body, .layout, .main {
        min-height: fit-content;
        flex: none;
    }
    .layout {
        flex-direction: column;
    }
    .sidebar {
        width: 90%;
        padding: 5% 0% 0% 5%;
        border: none;
    }
    .nav {
        display: none;
        flex-flow: row;
    }
    .menu {
        display: flex;
    }
    .version {
        display: none;
    }
}