/* ===== VARIABLES ===== */
:root {
    --black:      #111;
    --white:      #fff;
    --bg:         #f5f5f5;
    --text:       #222;
    --muted:      #888;
    --gold:       #b8960c;
    --gold-light: #d4af37;
    --border:     #ddd;
    --sidebar-w:  200px;
    --board-size: min(480px, 70vw);
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ===== BODY — light striped background ===== */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    background:
        repeating-linear-gradient(
            45deg,
            #f5f5f5 0px, #f5f5f5 25px,
            #efefef 25px, #efefef 50px
        );
    line-height: 1.6;
}

/* ===== LINKS & HEADLINES ===== */
a { color: var(--black); text-decoration: none; font-weight: 500; }
a:hover { color: var(--gold); }
h1, h2, h3 { color: var(--black); font-weight: 700; }

/* ===== LAYOUT ===== */
.layout { display: flex; min-height: 100vh; }

/* ===== SIDEBAR — dark with chess pattern ===== */
.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect x='0' y='0' width='50' height='50' fill='%23fff' opacity='.07'/%3E%3Crect x='50' y='0' width='50' height='50' fill='%23fff' opacity='.02'/%3E%3Crect x='100' y='0' width='50' height='50' fill='%23fff' opacity='.07'/%3E%3Crect x='150' y='0' width='50' height='50' fill='%23fff' opacity='.02'/%3E%3Crect x='0' y='50' width='50' height='50' fill='%23fff' opacity='.02'/%3E%3Crect x='50' y='50' width='50' height='50' fill='%23fff' opacity='.07'/%3E%3Crect x='100' y='50' width='50' height='50' fill='%23fff' opacity='.02'/%3E%3Crect x='150' y='50' width='50' height='50' fill='%23fff' opacity='.07'/%3E%3Crect x='0' y='100' width='50' height='50' fill='%23fff' opacity='.07'/%3E%3Crect x='50' y='100' width='50' height='50' fill='%23fff' opacity='.02'/%3E%3Crect x='100' y='100' width='50' height='50' fill='%23fff' opacity='.07'/%3E%3Crect x='150' y='100' width='50' height='50' fill='%23fff' opacity='.02'/%3E%3Crect x='0' y='150' width='50' height='50' fill='%23fff' opacity='.02'/%3E%3Crect x='50' y='150' width='50' height='50' fill='%23fff' opacity='.07'/%3E%3Crect x='100' y='150' width='50' height='50' fill='%23fff' opacity='.02'/%3E%3Crect x='150' y='150' width='50' height='50' fill='%23fff' opacity='.07'/%3E%3Ctext x='100' y='130' text-anchor='middle' font-size='120' fill='%23d4af37' opacity='.08'%3E%E2%99%9A%3C/text%3E%3C/svg%3E")
        center / 200px 200px repeat,
        var(--black);
    border-right: 3px solid var(--gold);
    padding: 1.2rem 0;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    overflow-y: auto;
}

.logo {
    display: block;
    padding: 0 1rem 1rem;
    color: #fff !important;
    font-weight: 700;
    font-size: 1.05rem;
    border-bottom: 1px solid #333;
    margin-bottom: 0.5rem;
}

.sidebar nav { flex: 1; }
.sidebar nav ul { list-style: none; }
.sidebar nav li a {
    display: block;
    padding: 0.4rem 1rem;
    color: #ccc;
    font-size: 0.9rem;
    border-left: 2px solid transparent;
}
.sidebar nav li a:hover {
    color: var(--gold-light);
    border-left-color: var(--gold-light);
    background: rgba(255,255,255,0.05);
}

.sidebar-bottom {
    padding: 0.8rem 1rem 0;
    border-top: 1px solid #333;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.sidebar-admin-title { display: block; font-size: 0.75rem; font-weight: 700; color: var(--gold-light); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem; }
.sidebar-bottom a { font-size: 0.8rem; color: #888; }
.sidebar-bottom a:hover { color: var(--gold-light); }

/* ===== CONTENT ===== */
.content {
    flex: 1;
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
    padding: 1.5rem 2rem;
    max-width: 860px;
}

/* ===== ARTICLES ===== */
.article-list article {
    margin-bottom: 1.2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.article-list article:last-child { border-bottom: none; }
.article-list h2 { font-size: 1.2rem; margin-bottom: 0.15rem; }
.article-list h2 a { color: var(--black); }
.article-list h2 a:hover { color: var(--gold); }
.meta { color: var(--muted); font-size: 0.8rem; }

.article-detail h1 {
    font-size: 1.8rem;
    border-bottom: 3px solid var(--black);
    padding-bottom: 0.4rem;
    margin-bottom: 0.4rem;
}

.article-body { margin-top: 1rem; }
.article-body h2, .article-body h3 { margin-top: 1.5rem; margin-bottom: 0.4rem; }
.article-body p { margin-bottom: 0.8rem; }
.article-body table { border-collapse: collapse; margin: 1rem 0; width: 100%; }
.article-body th { background: var(--black); color: var(--white); border: 1px solid var(--border); padding: 0.4rem 0.6rem; text-align: left; }
.article-body td { border: 1px solid var(--border); padding: 0.4rem 0.6rem; }

/* ===== CHESS BOARDS ===== */
.pgn-viewer { margin: 1.5rem auto; max-width: var(--board-size); }
.fen-viewer { margin: 1.5rem auto; width: var(--board-size); height: var(--board-size); }
.pgn-viewer .board { width: var(--board-size); height: var(--board-size); }
.controls { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: .5rem; }
.controls button {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text);
    cursor: pointer;
    border-radius: 3px;
    font-size: 0.9rem;
}
.controls button:hover { background: var(--black); border-color: var(--black); color: var(--white); }
.move-info { min-width: 9rem; text-align: center; font-family: monospace; color: var(--text); font-size: 0.9rem; }

/* ===== LOGIN ===== */
.login-box {
    max-width: 340px;
    margin: 3rem auto;
    padding: 2rem;
    background: var(--white);
    border: 2px solid var(--black);
    border-radius: 6px;
}
.login-box h1 { text-align: center; margin-bottom: 1.2rem; font-size: 1.3rem; }
.login-box label { display: block; font-weight: 600; margin-top: 0.8rem; color: var(--text); font-size: 0.9rem; }
.login-box input {
    width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 3px;
    margin-top: 0.2rem; background: var(--bg); color: var(--text);
}
.login-box input:focus { outline: none; border-color: var(--black); }
.login-box button {
    width: 100%; margin-top: 1.2rem; padding: 0.6rem;
    background: var(--black); color: var(--white); border: none; border-radius: 3px;
    font-size: 0.95rem; font-weight: 700; cursor: pointer; text-transform: uppercase;
}
.login-box button:hover { background: var(--gold); }
.login-error { color: #c00; text-align: center; font-weight: 600; }

/* ===== ADMIN ===== */
.admin-dashboard section { margin-bottom: 2rem; }
.admin-dashboard table { width: 100%; border-collapse: collapse; margin-top: 0.4rem; }
.admin-dashboard th { background: var(--black); color: var(--white); border: 1px solid var(--border); padding: 0.4rem 0.6rem; text-align: left; }
.admin-dashboard td { border: 1px solid var(--border); padding: 0.4rem 0.6rem; }
.admin-dashboard td form button { background: none; border: none; color: var(--black); cursor: pointer; font-size: 0.85rem; font-weight: 600; }
.admin-dashboard td form button:hover { color: var(--gold); }

.btn-small {
    display: inline-block; padding: 0.2rem 0.6rem;
    background: var(--black); color: var(--white) !important; border-radius: 3px;
    font-size: 0.8rem; font-weight: 600;
}
.btn-small:hover { background: var(--gold); }

.admin-form { max-width: 720px; }
.admin-form:has(.preview-open) { max-width: none; }
.admin-form label { display: block; font-weight: 600; margin-top: 1rem; color: var(--text); }
.admin-form label small { font-weight: normal; color: var(--muted); }
.admin-form input, .admin-form select, .admin-form textarea {
    width: 100%; padding: .5rem; border: 1px solid var(--border); border-radius: 3px;
    margin-top: 0.2rem; background: var(--white); color: var(--text);
}
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus { outline: none; border-color: var(--black); box-shadow: 0 0 0 1px var(--black); }
.admin-form textarea { font-family: monospace; resize: vertical; }
/* ===== MARKDOWN TOOLBAR ===== */
.md-toolbar { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 0.3rem; }
.md-toolbar button {
    padding: 0.25rem 0.5rem; border: 1px solid var(--border); background: var(--white);
    color: var(--text); cursor: pointer; border-radius: 3px; font-size: 0.8rem; font-weight: 600;
    line-height: 1;
}
.md-toolbar button:hover { background: var(--black); color: var(--white); }

/* ===== MARKDOWN PREVIEW ===== */
.editor-wrapper { display: flex; gap: 1rem; }
.editor-wrapper textarea { flex: 1; min-width: 0; }
.md-preview {
    display: none;
    flex: 1; min-width: 0;
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.8rem;
    background: var(--white);
    overflow-y: auto;
    max-height: 60vh;
}
.editor-wrapper.preview-open .md-preview { display: block; }
.editor-wrapper.preview-open { max-width: none; }

.form-actions { margin-top: 1.2rem; display: flex; gap: 1rem; align-items: center; }
.form-actions button {
    padding: 0.5rem 1.5rem; background: var(--black); color: var(--white); border: none; border-radius: 3px;
    cursor: pointer; font-size: 0.95rem; font-weight: 700;
}
.form-actions button:hover { background: var(--gold); }
.form-actions a { color: var(--muted); }

/* ===== FOOTER ===== */
footer { text-align: center; padding: 1.5rem; color: var(--muted); font-size: 0.8rem; border-top: 1px solid var(--border); }

/* ===== RESPONSIVE ===== */
@media (max-width: 700px) {
    .sidebar {
        position: relative;
        width: 100%; flex-shrink: unset;
        border-right: none; border-bottom: 3px solid var(--gold);
        flex-direction: row; flex-wrap: wrap; align-items: center;
        padding: 0.6rem 1rem; gap: 0.5rem;
    }
    .logo { padding: 0; border: none; margin: 0; }
    .sidebar nav ul { display: flex; flex-wrap: wrap; gap: 0; }
    .sidebar nav li a { padding: 0.3rem 0.6rem; border-left: none; }
    .sidebar-bottom { border: none; padding: 0; flex-direction: row; gap: 0.6rem; }
    .content { margin-left: 0; }
    main { padding: 1rem; }
}