/* Classic Apache Directory Listing - Reimagined */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap');

/* Breadcrumb path - raw text after h1 */
h1 {
    font-family: "IBM Plex Mono", monospace;
    font-size: 28px;
    font-weight: bold;
    margin: 0;
    padding-bottom: 14px;
    color: #000000;
}

/* Style text nodes after h1 (the breadcrumb path) */
body {
    font-family: "IBM Plex Mono", monospace;
    font-size: 16px;
    background: #ffffff;
    color: #888888;
    padding: 20px 30px;
    margin: 0 auto;
    max-width: 1200px;
}

/* Reset color for everything else */
table, address {
    color: #000000;
}

hr {
    border: none;
    border-top: 1px solid #000000;
    margin: 14px 0;
}

a {
    color: #0000ee;
    text-decoration: none;
}

a:visited {
    color: #551a8b;
}

a:hover {
    text-decoration: underline;
}

address {
    font-family: "IBM Plex Mono", monospace;
    font-size: 14px;
    font-style: normal;
    margin-top: 16px;
}

/* Nginx fancy index table */
table {
    font-family: "IBM Plex Mono", monospace;
    font-size: 16px;
    border-collapse: collapse;
    width: 100%;
}

thead tr {
    border-bottom: 1px solid #000000;
}

thead th {
    text-align: left;
    padding: 14px 28px 14px 0;
    font-weight: bold;
    font-size: 16px;
}

thead th a {
    color: #000000;
    text-decoration: none;
    pointer-events: none;
}

/* Hide the arrow links (second <a> in each th) */
thead th a + a {
    display: none;
}

/* Override visited link color in header */
thead th a:visited {
    color: #000000;
}

tbody td {
    padding: 8px 28px 8px 0;
    line-height: 22px;
    font-size: 16px;
}

/* Extra space after header row */
tbody tr:first-child td {
    padding-top: 18px;
}

/* Icon and text alignment */
td:first-child a {
    display: inline-block;
}

td:first-child a::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 22px;
    margin-right: 10px;
    vertical-align: middle;
    background-size: 20px 22px;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    top: -1px;
}

/* Directories */
td:first-child a[href$="/"]::before {
    background-image: url('/theme/icons/folder.gif');
}

/* Parent directory */
td:first-child a[href="../"]::before {
    background-image: url('/theme/icons/back.gif');
}

/* Video */
td:first-child a[href$=".mp4"]::before,
td:first-child a[href$=".webm"]::before,
td:first-child a[href$=".avi"]::before,
td:first-child a[href$=".mkv"]::before,
td:first-child a[href$=".mov"]::before {
    background-image: url('/theme/icons/movie.gif');
}

/* Images */
td:first-child a[href$=".gif"]::before,
td:first-child a[href$=".png"]::before,
td:first-child a[href$=".jpg"]::before,
td:first-child a[href$=".jpeg"]::before,
td:first-child a[href$=".webp"]::before,
td:first-child a[href$=".svg"]::before {
    background-image: url('/theme/icons/image2.gif');
}

/* Audio */
td:first-child a[href$=".mp3"]::before,
td:first-child a[href$=".wav"]::before,
td:first-child a[href$=".ogg"]::before,
td:first-child a[href$=".flac"]::before {
    background-image: url('/theme/icons/sound2.gif');
}

/* Archives */
td:first-child a[href$=".zip"]::before,
td:first-child a[href$=".gz"]::before,
td:first-child a[href$=".bz2"]::before,
td:first-child a[href$=".7z"]::before,
td:first-child a[href$=".rar"]::before {
    background-image: url('/theme/icons/compressed.gif');
}

td:first-child a[href$=".tar"]::before {
    background-image: url('/theme/icons/tar.gif');
}

/* Documents */
td:first-child a[href$=".pdf"]::before {
    background-image: url('/theme/icons/pdf.gif');
}

td:first-child a[href$=".txt"]::before,
td:first-child a[href$=".md"]::before,
td:first-child a[href$=".log"]::before {
    background-image: url('/theme/icons/text.gif');
}

td:first-child a[href$=".html"]::before,
td:first-child a[href$=".htm"]::before {
    background-image: url('/theme/icons/layout.gif');
}

/* Code */
td:first-child a[href$=".pl"]::before,
td:first-child a[href$=".pm"]::before,
td:first-child a[href$=".py"]::before {
    background-image: url('/theme/icons/p.gif');
}

td:first-child a[href$=".c"]::before,
td:first-child a[href$=".h"]::before,
td:first-child a[href$=".cpp"]::before {
    background-image: url('/theme/icons/c.gif');
}

td:first-child a[href$=".sh"]::before,
td:first-child a[href$=".js"]::before,
td:first-child a[href$=".php"]::before,
td:first-child a[href$=".rb"]::before {
    background-image: url('/theme/icons/script.gif');
}

td:first-child a[href$=".css"]::before,
td:first-child a[href$=".json"]::before,
td:first-child a[href$=".xml"]::before,
td:first-child a[href$=".yml"]::before,
td:first-child a[href$=".yaml"]::before {
    background-image: url('/theme/icons/text.gif');
}

/* Binaries */
td:first-child a[href$=".exe"]::before,
td:first-child a[href$=".bin"]::before {
    background-image: url('/theme/icons/binary.gif');
}

/* Default for unmatched files */
td:first-child a:not([href$="/"])::before {
    background-image: url('/theme/icons/unknown.gif');
}

/* Ensure folder icons win over default */
td:first-child a[href$="/"]::before {
    background-image: url('/theme/icons/folder.gif') !important;
}

td:first-child a[href="../"]::before {
    background-image: url('/theme/icons/back.gif') !important;
}

/* Responsive - hide date column on narrow screens */
@media (max-width: 800px) {
    body {
        padding: 15px 15px;
        font-size: 14px;
    }

    h1 {
        font-size: 20px;
        padding-bottom: 10px;
    }

    table {
        font-size: 14px;
        width: 100%;
    }

    thead th,
    tbody td,
    address {
        font-size: 14px;
    }

    /* Hide date column */
    thead th:nth-child(3),
    tbody td:nth-child(3) {
        display: none;
    }

    thead th {
        padding: 10px 12px 10px 0;
    }

    tbody td {
        padding: 6px 12px 6px 0;
    }

    tbody tr:first-child td {
        padding-top: 14px;
    }

    /* Smaller icons on mobile */
    td:first-child a::before {
        width: 16px;
        height: 18px;
        background-size: 16px 18px;
        margin-right: 8px;
    }
}