/* 
 * DARK MODE - RETRO / TERMINAL-STYLE 
 */

body {
    margin: 0;
    padding: 0;
    /* Terminal-like font and colors */
    font-family: "Courier New", Courier, monospace;
    background-color: #000;
    color: #0f0;
}

/* Banner styling */
.banner {
    background-color: #222;
    color: #0f0;
    padding: 20px;
    text-align: center;
}
.banner h1 {
    margin: 0;
    font-weight: normal; /* simpler in a retro style */
}

/* Menubar */
.menubar {
    width: 90%;
    margin: 0 auto;
    padding: 10px 0;
    background-color: #111;
    border-bottom: 1px solid #555;
    text-align: left;
}
.menubar table {
    border-collapse: collapse;
    width: 100%;
}
.menubar td {
    padding: 5px 10px;
}
.menubar td a {
    text-decoration: none;
    color: #0f0;
}
.menubar td a:hover {
    color: #ff0; /* bright yellow on hover */
}
.menubar input[type="text"] {
    padding: 5px;
    border: 1px solid #555;
    border-radius: 2px;
    background-color: #000;
    color: #0f0;
}
.menubar input[type="submit"] {
    padding: 5px 10px;
    border: 1px solid #555;
    background-color: #333;
    color: #0f0;
    cursor: pointer;
    border-radius: 2px;
}
.menubar input[type="submit"]:hover {
    background-color: #444;
}

/* Site message bar */
.message-bar {
    background: #0f0;
    color: #000;
    text-align: center;
    padding: 7px 20px;
    font-family: "Courier New", Courier, monospace;
    font-size: 1em;
    font-weight: bold;
    border-top: 2px solid #0a0;
    border-bottom: 2px solid #0a0;
    word-wrap: break-word;
}

/* Main content wrapper */
.content {
    width: 90%;
    margin: 20px auto;
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    background-color: #111;
    border: 1px solid #555;
    margin-bottom: 20px;
}
thead tr {
    background-color: #222;
    border-bottom: 2px solid #0f0; /* bright green separator */
}
th, td {
    padding: 10px;
    text-align: left;
    vertical-align: middle;
}
th {
    font-weight: bold;
}
tbody tr {
    border-bottom: 1px solid #333;
}
tbody tr:nth-child(even) {
    background-color: #000;
}
/* Hover effect on table rows */
tbody tr:hover {
    background-color: #333;
}

a {
    color: #0f0;
}
a:hover {
    color: #ff0;
}

/* Column widths */
.name-col, .filename-col  { width: 18%; }
.desc-col                 { width: 49%; }
.size-col                 { width: 9%; }
.date-col, .age-col       { width: 8%; white-space: nowrap; }
.downloads-col            { width: 6%; }

/* Make sure description can wrap */
.desc-col {
    white-space: normal;
    word-wrap: break-word;
    overflow: visible;
}

/* Directory heading in flat list */
.dir-heading {
    background-color: #333;
    font-weight: bold;
    color: #fff; /* stands out */
}

/* Breadcrumb area (All Files view) */
.breadcrumb {
    margin-bottom: 8px;
}
.breadcrumb strong {
    font-weight: bold;
}
.breadcrumb a {
    color: #0f0;
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}

/* Parent directory link row */
.parent-dir-link {
    font-style: italic;
}

/*
 * DESC-LINK styling for "link" in descriptions
 * Now more subtle than bright yellow
 */
.desc-link {
    color: #0f0;            /* same green as text, but bold */
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px dotted #0f0; /* a gentle underline effect */
    padding: 0 2px;
}
.desc-link:hover {
    color: #ff0;           /* bright yellow text on hover */
    border-color: #ff0;
}

/* Highlight style for search term matches */
.highlight {
    background-color: yellow;
    color: black;
}

/* Admin forms and controls */
input[type="text"], input[type="password"], select, textarea {
    background-color: #000;
    color: #0f0;
    border: 1px solid #555;
    border-radius: 2px;
    padding: 5px;
    font-family: "Courier New", Courier, monospace;
    font-size: 1em;
}
textarea {
    width: 100%;
    box-sizing: border-box;
}
.btn-action {
    border: 1px solid #555;
    background-color: #333;
    color: #0f0;
    padding: 5px 12px;
    cursor: pointer;
    border-radius: 2px;
    font-family: "Courier New", Courier, monospace;
    font-size: 1em;
}
.btn-action:hover {
    background-color: #444;
    color: #ff0;
}
.btn-danger {
    border-color: #900;
    color: #f44;
}
.btn-danger:hover {
    background-color: #300;
    color: #f66;
}
.flash-success {
    color: #0f0;
    border: 1px solid #0f0;
    padding: 8px 12px;
    margin-bottom: 12px;
    background-color: #010;
}
.flash-error {
    color: #f44;
    border: 1px solid #900;
    padding: 8px 12px;
    margin-bottom: 12px;
    background-color: #100;
}
.admin-section {
    margin-bottom: 30px;
}
.admin-section h3 {
    border-bottom: 1px solid #555;
    padding-bottom: 5px;
    margin-bottom: 12px;
}
.desc-input {
    width: 100%;
    box-sizing: border-box;
}

/* Admin: actions column */
.actions-col {
    width: 28%;
    vertical-align: top;
}

/* Screenshot thumbnail column */
.thumb-col {
    width: 164px;
    text-align: center;
    vertical-align: middle;
}
.thumb {
    max-width: 148px;
    max-height: 112px;
    display: block;
    margin: 0 auto;
    cursor: pointer;
    border: 1px solid #333;
}
.thumb:hover {
    border-color: #0f0;
}

/* Full-size screenshot modal */
#ss-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.92);
    z-index: 9999;
    cursor: zoom-out;
}
#ss-modal-img {
    max-width: 90vw;
    max-height: 90vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #0f0;
    cursor: default;
}

/* Admin mode: redistribute column widths to make room for .actions-col */
table.admin-mode .name-col,
table.admin-mode .filename-col { width: 12%; }
table.admin-mode .desc-col      { width: 22%; }
table.admin-mode .size-col      { width: 6%;  }
table.admin-mode .date-col,
table.admin-mode .age-col       { width: 6%;  }
table.admin-mode .downloads-col { width: 5%;  }

/* Compact flex-row forms inside admin table cells */
.admin-row-form {
    margin: 0 0 4px 0;
    display: flex;
    gap: 4px;
    align-items: center;
}
.admin-row-form:last-child { margin-bottom: 0; }
.admin-row-form .desc-input,
.rename-input,
.admin-row-form select {
    flex: 1;
    min-width: 0;
}

/* Pagination controls */
.pagination {
    margin: 10px 0;
    text-align: center;
    color: #0f0;
}
.pagination a {
    color: #0f0;
    margin: 0 8px;
    text-decoration: none;
    border: 1px solid #555;
    padding: 3px 8px;
}
.pagination a:hover {
    background-color: #333;
    color: #ff0;
}