/* =========================================================
   PRAM Test — UI Styles (Light/Dark, Answer Sheet, Quiz UI)
   ========================================================= */

/* ---------- CSS Variables (Light / Dark) ---------- */
:root {
    --bg: #eef2f7;
    --fg: #2b2f34;
    --card: #ffffff;
    --muted: #6b7a90;

    --primary: #1771e6;
    --primary-100: #f1f6ff;
    --primary-200: #dfeeff;

    --accent: #31a24c;

    --border: #c9d7ec;
    --shadow: 0 10px 24px rgba(16, 24, 40, .06);

    --table-border: #dbe3ee;
    --table-head: #f6f8fc;
}

body.dark {
    --bg: #0f1420;
    --fg: #e6ebf5;
    --card: #121a2a;
    --muted: #9fb0cc;

    --primary: #4da3ff;
    --primary-100: #0e2342;
    --primary-200: #143055;

    --accent: #35c56b;

    --border: #2b3c58;
    --shadow: 0 8px 20px rgba(0, 0, 0, .35);

    --table-border: #20314b;
    --table-head: #0e1a2d;
}

/* ---------- Reset / Base ---------- */
* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--fg);
}

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

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
    display: block;
}

/* ---------- Common UI ---------- */
.card {
    background: var(--card);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 22px;
}

.btn {
    appearance: none;
    -webkit-appearance: none;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 16px;
    font-weight: 600;
    cursor: pointer;
}

.btn[disabled] {
    opacity: .6;
    cursor: not-allowed;
}

.small {
    color: var(--muted);
    font-size: 13px;
}

.alert {
    background: #ffeaea;
    color: #b64242;
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
}

/* ---------- Layout ---------- */
.layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    min-height: 100vh;
}

.sidebar {
    background: var(--card);
    border-right: 1px solid var(--table-border);
    padding: 18px 16px;
}

.main {
    padding: 28px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

/* ---------- Sidebar Head ---------- */
.h-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--fg);
}

.userline {
    margin-top: 6px;
    color: var(--muted);
    font-size: 13px;
}

/* ---------- Timer ---------- */
.timer {
    margin-top: 14px;
    font-weight: 800;
    font-size: 44px;
    /* mare, ca în preview */
    color: var(--primary);
    letter-spacing: 1px;
}

.tlabel {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
}

.tlabel::before {
    content: "⏱";
    font-size: 16px;
    opacity: .85;
}

/* ---------- Answer Sheet ---------- */
.block {
    margin-top: 16px;
}

.sheet-title {
    margin: 6px 0 6px;
    font-weight: 700;
    color: var(--fg);
}

.grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.grid button {
    height: 34px;
    width: 100%;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--primary-100);
    color: var(--fg);
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
}

.grid button:hover {
    filter: brightness(0.98);
}

.grid button.active {
    outline: 3px solid var(--primary);
}

.grid button.visited {
    background: var(--primary-200);
    border-color: var(--border);
}

/* albastru deschis */
.grid button.answered {
    background: #bfe8bf;
    border-color: #7ac87a;
}

/* verde */

/* Legendă mini */
.legend {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: var(--muted);
}

.legend span {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
}

.legend .v {
    background: var(--primary-200);
}

.legend .a {
    background: #bfe8bf;
}

.legend .c {
    background: #ecf9ef;
    border: 1px solid var(--accent);
}

/* ---------- Question Card ---------- */
.qcard {
    max-width: 980px;
}

.qtitle {
    font-size: 18px;
    font-weight: 700;
    color: var(--fg);
    margin-bottom: 12px;
}

/* Variantă răspuns (checkbox outline albastru, bifa) */
.choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    margin: 8px 0;
    background: var(--card);
}

.choice input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    margin: 0;
    width: 18px;
    height: 18px;
    border: 2px solid var(--primary);
    border-radius: 3px;
    display: inline-block;
    background: transparent;
}

.choice input[type="checkbox"]:checked {
    background: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8.5l3 3 6-6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.choice.correct-hint {
    border-color: var(--accent);
    background: #ecf9ef;
}

/* admin vede corectul */

/* ---------- Controls ---------- */
.controls {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

#finishBtn {
    margin-left: auto;
    background: var(--accent);
}

/* ---------- Settings panel (sidebar) ---------- */
.settings {
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}

.switch {
    display: flex;
    align-items: center;
    gap: 10px;
}

.switch input {
    width: 42px;
    height: 22px;
    accent-color: var(--primary);
}

.badges {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.badges .dp {
    background: #ffe29f;
    padding: 2px 6px;
    border-radius: 4px;
    color: #7a4d00;
    font-size: 12px;
}

.badges .sign {
    background: #c9ffe2;
    padding: 2px 6px;
    border-radius: 4px;
    color: #0e6a3b;
    font-size: 12px;
}

/* ---------- Auth (Login) ---------- */
.auth {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

.card h2 {
    margin: 0 0 8px;
}

.card input,
.card select {
    width: 100%;
    padding: 10px 12px;
    margin: 6px 0 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card);
    color: var(--fg);
}

/* ---------- Avatar (decor în topbar) ---------- */
.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 30%, #e8f0ff, #c9d7ec);
    display: inline-block;
    border: 1px solid var(--border);
}

/* ---------- Tables (admin, history) ---------- */
table {
    width: 100%;
    border-collapse: collapse;
}

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

table th {
    background: var(--table-head);
    color: var(--fg);
}

table tr:nth-child(even) td {
    background: color-mix(in srgb, var(--card) 92%, var(--bg));
}

/* ---------- Utilities ---------- */
.hidden {
    display: none !important;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 1024px) {
    .layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        border-right: none;
        border-bottom: 1px solid var(--table-border);
    }

    .grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media (max-width: 640px) {
    .grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .controls {
        flex-direction: column;
    }

    #finishBtn {
        margin-left: 0;
    }

    .timer {
        font-size: 36px;
    }
}