/*
 * custom.css — Pubquiz Manager custom styles
 * All application-specific overrides. No inline CSS elsewhere.
 */

/* ── Global layout ─────────────────────────────────────────── */
html, body {
    min-height: 100vh;
}
body {
    display: flex;
    flex-direction: column;
    background-color: #1a1d23;
    color: #e0e0e0;
    font-family: 'Segoe UI', system-ui, sans-serif;
}
main {
    flex: 1 0 auto;
}

/* ── Cards & panels ────────────────────────────────────────── */
.card {
    background-color: #242830;
    border-color: #373d4a;
}
.card-header {
    background-color: #1e2430;
    border-bottom-color: #373d4a;
}

/* ── Tables ─────────────────────────────────────────────────── */
.table {
    --bs-table-bg: #242830;
    --bs-table-striped-bg: #2a2f3d;
    --bs-table-hover-bg: #2e3445;
    --bs-table-color: #e0e0e0;
    --bs-table-border-color: #373d4a;
}
.table thead th {
    background-color: #1a1d23;
    color: #ffc107;
    border-bottom: 2px solid #ffc107;
    white-space: nowrap;
}
.table-secondary td, .table-secondary th {
    --bs-table-bg: #2c2c35;
    opacity: 0.65;
}

/* ── Sort arrows ────────────────────────────────────────────── */
.sort-link {
    color: #ffc107;
    text-decoration: none;
    white-space: nowrap;
}
.sort-link:hover { color: #fff; }
.sort-arrow { font-size: 0.75rem; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge { font-size: 0.75rem; }

/* ── Form controls ──────────────────────────────────────────── */
.form-control, .form-select {
    background-color: #2a2f3d;
    border-color: #454d5e;
    color: #e0e0e0;
}
.form-control:focus, .form-select:focus {
    background-color: #2e3445;
    border-color: #ffc107;
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
}
.form-control::placeholder { color: #6c757d; }
.form-label { color: #adb5bd; font-weight: 500; }
.input-group-text {
    background-color: #1e2430;
    border-color: #454d5e;
    color: #adb5bd;
}

/* ── Accordion (rounds) ─────────────────────────────────────── */
.accordion-item {
    background-color: #242830;
    border-color: #373d4a;
}
.accordion-button {
    background-color: #1e2430;
    color: #e0e0e0;
}
.accordion-button:not(.collapsed) {
    background-color: #1a2035;
    color: #ffc107;
    box-shadow: none;
}
.accordion-button::after {
    filter: invert(1);
}

/* ── Difficulty badges (fixed colours) ─────────────────────── */
.diff-ganz_liicht  { background-color: #198754 !important; }
.diff-liicht       { background-color: #0dcaf0 !important; color: #000 !important; }
.diff-mëttel       { background-color: #ffc107 !important; color: #000 !important; }
.diff-schwéier     { background-color: #dc3545 !important; }
.diff-ganz_schwéier{ background-color: #212529 !important; border: 1px solid #6c757d; }

/* ── Answer option rows ─────────────────────────────────────── */
.answer-row, .pair-row, .subq-row {
    background-color: #1e2430;
    border: 1px solid #373d4a;
    border-radius: 0.375rem;
    padding: 0.5rem;
    margin-bottom: 0.4rem;
}
.answer-row.correct-answer {
    border-color: #198754;
    background-color: #1a2e22;
}

/* ── Login page ─────────────────────────────────────────────── */
.login-bg {
    background: linear-gradient(135deg, #1a1d23 0%, #1e2d40 100%);
}
.login-card {
    border: 1px solid #ffc107;
    box-shadow: 0 0 40px rgba(255, 193, 7, 0.15);
}
.login-logo {
    max-height: 64px;
}

/* ── Question view detail ───────────────────────────────────── */
.q-detail-label {
    color: #6c757d;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.correct-mark { color: #198754; }
.wrong-mark   { color: #6c757d; }

/* ── Pagination ─────────────────────────────────────────────── */
.page-link {
    background-color: #242830;
    border-color: #373d4a;
    color: #e0e0e0;
}
.page-link:hover {
    background-color: #2e3445;
    color: #ffc107;
}
.page-item.active .page-link {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #000;
}
.page-item.disabled .page-link {
    background-color: #1a1d23;
    color: #6c757d;
}

/* ── Round question rows ────────────────────────────────────── */
.round-question-row {
    background-color: #1e2430;
    border: 1px solid #373d4a;
    border-radius: 0.25rem;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Alerts ─────────────────────────────────────────────────── */
.alert-success { --bs-alert-bg: #1a2e22; border-color: #198754; color: #75c898; }
.alert-danger  { --bs-alert-bg: #2d1a1e; border-color: #dc3545; color: #ea868f; }
.alert-warning { --bs-alert-bg: #2d2610; border-color: #ffc107; color: #ffc107; }

/* ── Navbar active link ─────────────────────────────────────── */
.navbar .nav-link.active { color: #ffc107 !important; }

/* ── Password strength bar ──────────────────────────────────── */
#strengthWrap { display: none; }
#policyList   { font-size: 0.82rem; }

/* ── Image grid (matching_images) ───────────────────────────── */
.img-match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.img-match-item { text-align: center; }
.img-match-item img { width: 100%; height: 130px; object-fit: cover; border-radius: 0.25rem; border: 2px solid #373d4a; }