/* =========================================================
   BENJIHUB FILE SERVER
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');


/* =========================================================
   ROOT
   ========================================================= */

:root {

    --bg: #050308;
    --bg-soft: #0b0610;

    --purple-dark: #6b21a8;
    --purple: #a855f7;
    --purple-bright: #c084fc;

    --text: #d8b4fe;
    --text-dim: #9f7aca;

    --green: #8aff80;
    --green-dim: #5fae58;

    --red: #ff5c5c;

    --border: #6b21a8;

    --font-terminal: "VT323", monospace;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}


html,
body {

    margin: 0;
    padding: 0;

    min-height: 100%;
    width: 100%;
}


body {

    background: var(--bg);

    color: var(--text);

    font-family: var(--font-terminal);

    font-size: 22px;

    letter-spacing: 0.02em;

    overflow-x: hidden;
}


/* =========================================================
   CRT SCREEN
   ========================================================= */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 999;

    background:
        repeating-linear-gradient(to bottom,
            rgba(255, 255, 255, 0.025) 0px,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px,
            transparent 4px);

    opacity: 0.35;
}


body::after {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 998;

    background:
        radial-gradient(ellipse at center,
            transparent 55%,
            rgba(0, 0, 0, 0.45) 100%);
}


/* =========================================================
   MAIN TERMINAL
   ========================================================= */

.file-terminal {

    width: 100%;

    min-height: 100vh;

    margin: 0;

    padding: 28px 32px 60px;
}


/* =========================================================
   HEADER
   ========================================================= */

.file-header {

    border-bottom: 1px solid var(--purple-dark);

    padding-bottom: 12px;

    margin-bottom: 28px;

    box-shadow:
        0 1px 0 rgba(168, 85, 247, 0.08);
}


.header-line {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    min-width: 0;
}


.prompt-line {

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;

    white-space: nowrap;
}


.prompt-text {

    color: var(--purple-bright);

    text-shadow:
        0 0 5px rgba(192, 132, 252, 0.35);
}


.prompt-arrow {

    color: var(--green);

    text-shadow:
        0 0 5px rgba(138, 255, 128, 0.35);
}


/* =========================================================
   BREADCRUMBS
   ========================================================= */

.breadcrumb-path {

    display: flex;

    align-items: center;

    min-width: 0;

    overflow: hidden;

    white-space: nowrap;
}


.breadcrumb-link {

    color: var(--green);

    text-decoration: none;

    text-shadow:
        0 0 5px rgba(138, 255, 128, 0.25);
}


.breadcrumb-link:hover {

    color: #b8ffb0;

    text-shadow:
        0 0 8px rgba(138, 255, 128, 0.55);
}


.breadcrumb-root {

    color: var(--green);
}


.breadcrumb-separator {

    color: var(--text-dim);

    margin: 0 2px;
}


.breadcrumb-current {

    color: var(--purple-bright);

    text-shadow:
        0 0 5px rgba(192, 132, 252, 0.3);
}


/* =========================================================
   BACK HOME
   ========================================================= */

.back-home-link {

    flex-shrink: 0;

    color: var(--green);

    text-decoration: none;

    white-space: nowrap;

    text-shadow:
        0 0 5px rgba(138, 255, 128, 0.25);
}


.back-home-link:hover {

    color: #b8ffb0;

    text-shadow:
        0 0 8px rgba(138, 255, 128, 0.55);
}


/* =========================================================
   FILE SECTION
   ========================================================= */

.file-section {

    width: 100%;
}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.section-title {

    color: var(--purple-bright);

    margin-bottom: 18px;

    white-space: nowrap;

    overflow: hidden;

    text-shadow:
        0 0 6px rgba(168, 85, 247, 0.3);
}


/* =========================================================
   COMMAND LINE
   ========================================================= */

.command-line {

    color: var(--text-dim);

    margin-bottom: 16px;
}


.command-line::first-letter {

    color: var(--green);
}


/* =========================================================
   DIRECTORY LIST
   ========================================================= */

.directory-list {

    border-top: 1px solid var(--purple-dark);

    border-bottom: 1px solid var(--purple-dark);

    padding: 8px 0;

    box-shadow:
        0 0 14px rgba(107, 33, 168, 0.08);
}


/* =========================================================
   FILE ENTRY WRAPPER
   ========================================================= */

.file-entry-wrapper {

    display: block;

    width: 100%;
}


/* =========================================================
   FILE ENTRY
   ========================================================= */

.file-entry {

    /*
     * FLEX instead of GRID.
     *
     * icon      = fixed
     * filename  = flexible
     * right side = fixed
     */

    display: flex;

    align-items: center;

    width: 100%;

    min-width: 0;

    min-height: 34px;

    padding: 3px 8px;

    color: var(--text);

    text-decoration: none;
}


.file-entry:hover {

    background: rgba(107, 33, 168, 0.14);

    color: var(--purple-bright);

    text-shadow:
        0 0 5px rgba(192, 132, 252, 0.3);
}


/* =========================================================
   FILE ICON
   ========================================================= */

.file-icon {

    flex: 0 0 34px;

    width: 34px;

    color: var(--purple-bright);

    text-align: center;

    white-space: nowrap;
}


.directory-entry .file-icon {

    color: var(--green);

    text-shadow:
        0 0 5px rgba(138, 255, 128, 0.25);
}


.parent-entry .file-icon {

    color: var(--green);
}


/* =========================================================
   FILE NAME
   ========================================================= */

.file-name {

    /*
     * This is the ONLY flexible portion.
     */

    flex: 1 1 auto;

    min-width: 0;

    margin-left: 10px;

    overflow-wrap: anywhere;

    word-break: break-word;

    color: inherit;

    text-decoration: none;
}


.directory-entry .file-name {

    color: var(--purple-bright);
}


.parent-entry .file-name {

    color: var(--green);
}


.regular-file .file-name {

    color: var(--text);
}


/* =========================================================
   RIGHT SIDE
   ========================================================= */

.file-type {

    /*
     * NEVER shrink.
     * NEVER wrap.
     * Always remain on the same row.
     */

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    flex-wrap: nowrap;

    gap: 10px;

    width: max-content;

    min-width: max-content;

    margin-left: 20px;

    padding-left: 0;

    white-space: nowrap;

    color: var(--text-dim);

    text-align: right;
}


.directory-entry .file-type {

    color: var(--green-dim);
}


.parent-entry .file-type {

    color: var(--green);
}


/* =========================================================
   ZIP BUTTON
   ========================================================= */

.directory-download-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    width: max-content;

    min-width: max-content;

    padding: 1px 7px;

    border: 1px solid var(--purple-dark);

    color: var(--green);

    background: rgba(107, 33, 168, 0.08);

    text-decoration: none;

    white-space: nowrap;

    line-height: 1;

    font-size: 19px;

    text-shadow:
        0 0 5px rgba(138, 255, 128, 0.25);
}


.directory-download-button:hover {

    color: var(--purple-bright);

    background: rgba(107, 33, 168, 0.22);

    border-color: var(--purple);

    text-shadow:
        0 0 8px rgba(192, 132, 252, 0.5);

    box-shadow:
        0 0 8px rgba(107, 33, 168, 0.2);
}


/* =========================================================
   DIRECTORY TYPE
   ========================================================= */

.directory-type {

    display: inline-block;

    flex: 0 0 auto;

    white-space: nowrap;

    color: var(--green-dim);
}


/* =========================================================
   REGULAR FILE TYPE
   ========================================================= */

.regular-file-type {

    display: inline-block;

    flex: 0 0 auto;

    white-space: nowrap;
}


/* =========================================================
   HOVER STATES
   ========================================================= */

.directory-entry:hover .file-name {

    color: var(--green);
}


.directory-entry:hover .file-type {

    color: var(--green);
}


.regular-file:hover .file-name {

    color: var(--purple-bright);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    body {

        font-size: 20px;
    }


    .file-terminal {

        width: 100%;

        min-height: 100vh;

        padding: 18px 16px 50px;
    }


    .header-line {

        align-items: flex-start;

        flex-direction: column;

        gap: 10px;
    }


    .prompt-line {

        width: 100%;

        overflow-x: auto;

        padding-bottom: 2px;
    }


    .breadcrumb-path {

        overflow: visible;
    }


    .back-home-link {

        align-self: flex-start;
    }


    .section-title {

        font-size: 19px;
    }


    .file-entry {

        padding-left: 2px;

        padding-right: 2px;
    }


    .file-icon {

        flex-basis: 28px;

        width: 28px;
    }


    .file-name {

        margin-left: 6px;
    }


    .file-type {

        margin-left: 10px;

        gap: 7px;
    }


    .directory-download-button {

        font-size: 18px;

        padding: 2px 6px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 500px) {

    body {

        font-size: 18px;
    }


    .file-terminal {

        width: 100%;

        min-height: 100vh;

        padding: 12px 8px 40px;
    }


    .file-header {

        margin-bottom: 20px;
    }


    .prompt-line {

        gap: 6px;
    }


    .section-title {

        font-size: 16px;
    }


    .command-line {

        font-size: 18px;
    }


    .file-entry {

        min-height: 32px;
    }


    .file-icon {

        flex-basis: 25px;

        width: 25px;
    }


    .file-name {

        margin-left: 4px;
    }


    .file-type {

        margin-left: 6px;

        gap: 4px;
    }


    .directory-download-button {

        font-size: 16px;

        padding: 2px 4px;
    }


    .directory-type {

        font-size: 16px;
    }
}