/* MOD: Latest Releases on index page */

#rel-wrap {
    margin: 4px 0 10px;
}

/* Title bar */
#rel-head {
  background: #e5edf2;
  border: 1px solid #c3cbd1;
    border-radius: 5px 5px 0 0;
    padding: 7px 10px;
    text-align: center;
}
#rel-head .rel-h1 {
    margin: 0;
    padding: 0;
    color: #333;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.3;
}

/* Category tabs */
#rel-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    padding: 8px;
    background: #f3f3f3;
    border: 1px solid #d7d7d7;
    border-top: none;
}
.rel-tab {
    display: inline-block;
    padding: 5px 11px;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s, color .12s, border-color .12s;
}
.rel-tab:hover {
    background: #eaeaea;
    color: #111;
    text-decoration: none;
}
.rel-tab-active,
.rel-tab-active:hover {
    background: #4a90d9;
    border-color: #3877bd;
    color: #fff;
}

/* Table */
.rel-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.rel-table thead th {
    text-align: center;
    padding: 6px 8px;
    font-weight: bold;
}
.rel-table th.rel-col-topic { text-align: center; }
.rel-table td {
    padding: 2px 3px;
    vertical-align: middle;
    border-top: 1px solid #e2e2e2;
}

/* Column widths */
.rel-col-added,
.rel-added { width: 16%; }
.rel-col-tor,
.rel-tor { width: 15%; }

/* "Added" column: date + author stacked */
.rel-added .rel-date {
    display: block;
    font-weight: bold;
    font-size: 11px;
    color: #555;
}
.rel-added .rel-author {
    display: block;
    margin-top: 2px;
    font-size: 11px;
}
.rel-added .rel-by { color: #888; }

/* "Topic" column */
.rel-topic { text-align: left; }
.rel-topic .rel-status {
    display: inline-block;
    margin-right: 3px;
}
.rel-topic .topictitle {
    font-weight: bold;
    font-size: 13px;
}
.rel-topic img { vertical-align: middle; }

/* NEW badge + row highlight */
.rel-new-badge {
    display: inline-block;
    margin-right: 4px;
    padding: 0 5px;
    border-radius: 3px;
    background: #d24a43;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 15px;
    vertical-align: middle;
}

/* "Torrent" column: size badge + S/L pills */
.rel-tor .rel-size {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 3px;
    background: #f0883e;
    color: #fff;
    font-weight: bold;
    font-size: 11px;
    white-space: nowrap;
}
.rel-tor .rel-sl {
    display: block;
    margin-top: 4px;
    white-space: nowrap;
}
.rel-tor .rel-seed,
.rel-tor .rel-leech {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 3px;
    color: #fff;
    font-weight: bold;
    font-size: 11px;
}
.rel-tor .rel-seed { background: #3aa648; margin-right: 3px; }
.rel-tor .rel-leech { background: #d24a43; }

/* Loading state */
#rel-rows.rel-loading { opacity: .5; }
.nowrap { white-space: nowrap; }

/* Status icons reuse the tracker's .tor-icon classes; ensure visibility here */
.rel-topic .tor-icon { font-weight: bold; }
.rel-topic .tor-not-approved { color: #d24a43; }
.rel-topic .tor-approved { color: #3aa648; }

/* Dark theme */
body.dark-mode #rel-head { background: #15171a; }
body.dark-mode #rel-tabs { background: #1d2024; border-color: #34383d; }
body.dark-mode .rel-tab { background: #25282d; border-color: #3a3f45; color: #cfd3d8; }
body.dark-mode .rel-tab:hover { background: #2f333a; color: #fff; }
body.dark-mode .rel-tab-active,
body.dark-mode .rel-tab-active:hover { background: #4a90d9; border-color: #3877bd; color: #fff; }
body.dark-mode .rel-table td { border-top-color: #2c3036; }
body.dark-mode .rel-added .rel-date { color: #aab0b7; }
body.dark-mode .rel-added .rel-by { color: #7d848c; }
body.dark-mode tr.rel-new td { background-color: #2a2410; }

/* Small screens */
@media (max-width: 640px) {
    .rel-col-added, .rel-added,
    .rel-col-tor, .rel-tor { width: auto; }
    #rel-tabs { gap: 4px; padding: 6px; }
    .rel-tab { padding: 4px 8px; font-size: 11px; }
}