/* =========================================================
   Main stylesheet

   Contents
   1.  Theme variables
   2.  Reset and base
   3.  Typography
   4.  Layout
   5.  Header and navigation
   6.  Panels, posts, sidebar and footer
   7.  Recruitment and raid progress
   8.  Tables
   9.  BBCode / forum post content
   10. Forms and inputs
   11. Buttons and links
   12. Notifications
   13. Responsive adjustments
   ========================================================= */


/* ---------- 1. Theme variables ---------- */

:root {
    /* Surfaces and lines */
    --bg: #121214;
    --panel: #1c1c20;
    --line: #33343a;

    /* Text */
    --steel: #c9ccd3;
    --text: #e4e5e8;
    --muted: #8b8e97;

    /* Palettes */
    --gold: #b9892b;
    --gold2: #e0b050;
    --gold3: #6d5610;
    --blood: #a3191f;
    --blood2: #d12a31;
    --blood3: #6d1014;

    /* Active accent: point these at the gold or blood palette to re-theme the site */
    --accent: var(--gold);
    --accent2: var(--gold2);
    --accent-hover: var(--gold3);
}


/* ---------- 2. Reset and base ---------- */

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    background: radial-gradient(1200px 500px at 50% -100px, #2a2a30, var(--bg));
    color: var(--text);
    font: 16px/1.6 Inter, system-ui, sans-serif;
}


/* ---------- 3. Typography ---------- */

h2 {
    margin: 0 0 16px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--accent);
    color: var(--steel);
    font: 2rem Cinzel, serif;
}

h2 + .box h2 {
    margin-bottom: 12px;
}

h3.detail {
    margin: 0 0 4px;
    color: var(--text);
    font: 700 1.8rem Cinzel, serif;
}

.sub {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: .95rem;
}

.muted {
    color: var(--muted);
    font-size: .9em;
}

.count {
    color: var(--muted);
    font: 1rem Inter, sans-serif;
}

code {
    padding: 1px 5px;
    border-radius: 3px;
    background: #0c0c0e;
}


/* ---------- 4. Layout ---------- */

.wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

.adminmain {
    max-width: 860px;
    margin: 0 auto;
}

.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 28px;
    align-items: start;
}


/* ---------- 5. Header and navigation ---------- */

header {
    padding: 32px 0 8px;
    text-align: center;
}

header img {
    max-width: 100%;
    max-height: 240px;
    height: auto;
    filter: drop-shadow(0 12px 18px #000a);
}

/* Shared by the main nav and the admin/attendance tabs */
nav,
.tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

nav a,
.tabs a {
    border: 1px solid var(--line);
    border-radius: 4px;
    background: linear-gradient(#26262b, #19191c);
    color: var(--steel);
    text-decoration: none;
}

/* Main nav */
nav {
    margin: 22px 0 34px;
}

nav a {
    padding: 6px 22px;
    font: 1.35rem Cinzel, serif;
    transition: .15s;
}

/* Tabs */
.tabs {
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 14px;
}

.tabs a {
    padding: 7px 20px;
    font-size: .9rem;
    font-weight: 600;
}

/* Hover, focus and current-page states */
nav a:hover,
nav a:focus-visible,
nav a[aria-current],
.tabs a:hover,
.tabs a[aria-current] {
    border-color: var(--accent2);
    color: #fff;
}

nav a:hover,
nav a:focus-visible,
nav a[aria-current],
.tabs a[aria-current] {
    background: linear-gradient(var(--accent), var(--accent-hover));
}

nav a:focus-visible {
    outline: none;
}


/* ---------- 6. Panels, posts, sidebar and footer ---------- */

/* Boxes (table wrappers share the same frame) */
.box,
.tablewrap {
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    border-radius: 4px;
    background: var(--panel);
}

.box {
    margin-bottom: 20px;
    padding: 16px 20px;
}

.box.narrow {
    max-width: 380px;
    margin: 0 auto;
}

/* Sidebar */
aside .box {
    margin-bottom: 20px;
    padding: 16px 18px;
}

aside h2 {
    margin-bottom: 12px;
    font-size: 1.6rem;
}

aside h2 a {
    color: inherit;
    text-decoration: none;
}

aside h2 a:hover {
    color: var(--accent2);
}

aside h2.solo {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/* Posts */
.post {
    margin-bottom: 14px;
    padding: 16px 20px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: 4px;
    background: var(--panel);
}

.post h3 {
    margin: 0 0 2px;
    font-size: 1.1rem;
}

.post h3 a {
    color: var(--text);
    text-decoration: none;
}

.post h3 a:hover {
    color: var(--accent2);
}

.post p {
    margin: 0;
    color: #b9bbc2;
}

.meta {
    margin-bottom: 8px;
    color: var(--muted);
    font-size: .82rem;
}

/* Footer */
footer {
    padding: 30px 0 40px;
    color: var(--muted);
    font-size: .85rem;
    text-align: center;
}


/* ---------- 7. Recruitment and raid progress ---------- */

/* Recruitment needs */
.need {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.need:last-of-type {
    border-bottom: 0;
}

.badge {
    padding: 2px 9px;
    border: 1px solid var(--line);
    border-radius: 99px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.badge.high {
    border-color: var(--blood);
    color: var(--blood2);
    /* color: #fff; */
}

.badge.medium {
    border-color: var(--gold);
    color: var(--gold2);
}

.badge.low {
    border-color: #4a7c59;
    color: #7fc291;
}

.apply {
    display: block;
    margin-top: 12px;
    color: var(--steel);
    font-size: .9rem;
    text-align: center;
}

/* Raid progress */
.raid {
    margin-bottom: 16px;
}

.raid:last-child {
    margin-bottom: 0;
}

.raid .row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: .9rem;
}

.raid .row span:last-child {
    color: var(--muted);
}

.bar {
    height: 8px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #0c0c0e;
}

.bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
}

.bar.done i {
    background: linear-gradient(90deg, #8d9099, var(--steel));
}


/* ---------- 8. Tables ---------- */

.tablewrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

tbody tr:last-child td {
    border-bottom: 0;
}

tbody tr:hover {
    background: #222227;
}

td a {
    color: var(--text);
    text-decoration: none;
}

td a:hover {
    color: var(--accent2);
}

.cls {
    font-weight: 600;
}

.admintable .r {
    white-space: nowrap;
    text-align: right;
}

/* Header cells and sortable-column buttons */
th {
    padding: 0;
    background: #17171a;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

th.nosort {
    padding: 12px 16px;
    color: var(--muted);
}

th button {
    all: unset;
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 12px 16px;
    color: var(--muted);
    cursor: pointer;
}

th button:hover,
th button:focus-visible {
    background: #222227;
    color: #fff;
}

th button::after {
    content: " \2195";
    opacity: .4;
}

th[aria-sort="ascending"] button,
th[aria-sort="descending"] button {
    color: var(--steel);
}

th[aria-sort="ascending"] button::after {
    content: " \25B2";
    color: var(--accent2);
    opacity: 1;
}

th[aria-sort="descending"] button::after {
    content: " \25BC";
    color: var(--accent2);
    opacity: 1;
}


/* ---------- 9. BBCode / forum post content ---------- */

.body {
    color: #b9bbc2;
}

.body a {
    color: #e07a7f;
}

.body a:hover {
    color: #fff;
}

.body img {
    max-width: 100%;
    height: auto;
    border-radius: 3px;
}

.body blockquote {
    margin: 10px 0;
    padding: 8px 14px;
    border-left: 3px solid var(--steel);
    border-radius: 3px;
    background: #141417;
}

.body cite {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: .8rem;
    font-style: normal;
}

.body pre {
    overflow-x: auto;
    margin: 10px 0;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: #0c0c0e;
}

.body code {
    font: .88rem ui-monospace, Menlo, Consolas, monospace;
}

.body ul,
.body ol {
    margin: 8px 0;
    padding-left: 24px;
}


/* ---------- 10. Forms and inputs ---------- */

/* Fields */
label {
    display: block;
    margin-bottom: 12px;
    color: var(--muted);
    font-size: .85rem;
}

input[type="text"],
input[type="password"],
input[type="date"],
select {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #0c0c0e;
    color: var(--text);
    font: inherit;
}

input[type="date"] {
    color-scheme: dark;
}

input:focus,
select:focus {
    outline: 2px solid var(--accent2);
    outline-offset: 1px;
}

form.inline {
    display: inline;
}

/* Member and raid forms */
.memberform,
.raidform {
    display: grid;
    gap: 0 14px;
    align-items: end;
}

.memberform {
    grid-template-columns: 2fr 1fr 1fr;
}

.raidform {
    grid-template-columns: 2fr 1fr;
}

.memberform .actions,
.raidform .actions,
.raidform .full {
    grid-column: 1 / -1;
}

.memberform .actions,
.raidform .actions {
    display: flex;
    gap: 10px;
}

/* Attendance checklist */
.checkhead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: .85rem;
}

.checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    max-height: 340px;
    overflow-y: auto;
    margin-bottom: 16px;
    padding: 2px;
}

label.chk {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #17171a;
    color: var(--text);
    font-size: .9rem;
    cursor: pointer;
}

label.chk:hover {
    border-color: var(--accent2);
}

label.chk input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent2);
}

label.chk small {
    margin-left: auto;
    color: var(--muted);
    font-size: .72rem;
}


/* ---------- 11. Buttons and links ---------- */

.btn {
    display: inline-block;
    padding: 9px 20px;
    border: 1px solid var(--accent2);
    border-radius: 4px;
    background: linear-gradient(var(--accent), var(--accent-hover));
    color: #fff;
    font: 600 .9rem Inter, sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover {
    filter: brightness(1.15);
}

.btn.ghost,
.btn.danger {
    background: #1c1c20;
}

.btn.ghost {
    border-color: var(--line);
    color: var(--steel);
}

.btn.danger {
    border-color: var(--accent);
    color: #e07a7f;
}

.btn.danger:hover {
    background: var(--accent);
    color: #fff;
}

.btn.small {
    padding: 4px 12px;
    font-size: .8rem;
}

/* "Back" links on detail pages */
.back {
    margin: 0 0 6px;
    font-size: .9rem;
}

.back a {
    color: var(--steel);
    text-decoration: none;
}

.back a:hover {
    color: var(--accent2);
}


/* ---------- 12. Notifications ---------- */

.flash {
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 4px;
}

.flash.ok {
    border-color: #4a7c59;
    background: #14231a;
    color: #9bd3ab;
}

.flash.err {
    border-color: var(--accent);
    background: #2a1214;
    color: #f0a0a4;
}


/* ---------- 13. Responsive adjustments ---------- */

@media (max-width: 800px) {
    .layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .memberform,
    .raidform {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    nav a {
        flex: 1 1 40%;
        text-align: center;
    }
}