/* ============================================================================
   Interactive Quiz Platform — Theme
   Palet warna mengikuti tampilan live quiz (ungu-biru-emas-hijau-merah) supaya
   halaman admin/host terasa satu keluarga visual dengan layar live/peserta.
   ============================================================================ */

:root {
    --iq-purple: #46178f;
    --iq-purple2: #7b2ff7;
    --iq-blue: #1368ce;
    --iq-blue2: #46b6ff;
    --iq-gold: #d89e00;
    --iq-green: #26890c;
    --iq-red: #e21b3c;
    --iq-pink: #ff4d94;
    --iq-bg: #f4f3fc;
    --iq-card-radius: 1rem;
}

body {
    font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--iq-bg);
    background-image:
        radial-gradient(circle at 8% 0%, rgba(123, 47, 247, 0.07) 0%, transparent 42%),
        radial-gradient(circle at 95% 8%, rgba(19, 104, 206, 0.08) 0%, transparent 40%);
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.01em; }

/* ---------- Navbar ---------- */
.navbar-quizapp {
    background: linear-gradient(100deg, var(--iq-purple), var(--iq-purple2) 65%, var(--iq-blue));
    box-shadow: 0 2px 14px rgba(70, 23, 143, 0.25);
}
.navbar-quizapp .navbar-brand { font-weight: 800; letter-spacing: 0.01em; }
.navbar-brand i { font-size: 1.25rem; }
.navbar-quizapp .nav-link-quiz {
    color: rgba(255, 255, 255, 0.88) !important;
    font-weight: 600;
    padding: 0.35rem 0.65rem;
    border-radius: 0.5rem;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.navbar-quizapp .nav-link-quiz:hover { background: rgba(255, 255, 255, 0.16); color: #fff !important; }
.navbar-quizapp .badge-role {
    background: rgba(255, 255, 255, 0.92);
    color: var(--iq-purple);
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* ---------- Cards ---------- */
.card {
    border-radius: var(--iq-card-radius);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.card.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.9rem 1.8rem rgba(70, 23, 143, 0.14) !important;
}
.card-header { border-radius: var(--iq-card-radius) var(--iq-card-radius) 0 0 !important; }

/* ---------- Buttons ---------- */
.btn { border-radius: 0.65rem; font-weight: 600; }
.btn-primary {
    background: linear-gradient(100deg, var(--iq-purple), var(--iq-purple2));
    border: none;
    box-shadow: 0 3px 10px rgba(70, 23, 143, 0.28);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(100deg, #3a1276, var(--iq-purple2));
    box-shadow: 0 4px 14px rgba(70, 23, 143, 0.38);
}
.btn-success { background: linear-gradient(100deg, var(--iq-green), #37b312); border: none; }
.btn-danger, .btn-outline-danger:hover { background: linear-gradient(100deg, var(--iq-red), #ff5a5a); border-color: transparent; }
.btn-outline-primary { color: var(--iq-purple); border-color: var(--iq-purple2); }
.btn-outline-primary:hover { background: var(--iq-purple2); border-color: var(--iq-purple2); }
.btn:active { transform: translateY(1px); }

/* ---------- Badges ---------- */
.badge { border-radius: 2rem; font-weight: 600; padding: 0.4em 0.85em; letter-spacing: 0.02em; }
.bg-success { background: linear-gradient(100deg, var(--iq-green), #37b312) !important; }
.bg-secondary { background: #8a8fa3 !important; }
.bg-primary { background: linear-gradient(100deg, var(--iq-purple), var(--iq-purple2)) !important; }
.bg-danger { background: linear-gradient(100deg, var(--iq-red), #ff5a5a) !important; }
.bg-warning { background: linear-gradient(100deg, var(--iq-gold), #ffcf4d) !important; color: #4a3300 !important; }

/* ---------- Tables ---------- */
.table thead.table-light th {
    background: #f1eefb;
    color: var(--iq-purple);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    border-bottom: none;
}
.table tbody tr { transition: background 0.12s ease; }
.table tbody tr:hover { background: #faf9ff; }
.table code { background: #f1eefb; color: var(--iq-purple); padding: 0.2em 0.55em; border-radius: 0.4rem; font-weight: 700; letter-spacing: 0.05em; }

/* ---------- Page hero (title band) ---------- */
.page-hero {
    background: linear-gradient(100deg, var(--iq-purple), var(--iq-purple2) 70%, var(--iq-blue));
    border-radius: var(--iq-card-radius);
    color: #fff;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 0.6rem 1.6rem rgba(70, 23, 143, 0.22);
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 90% -10%, rgba(255,255,255,0.18), transparent 55%);
    pointer-events: none;
}
.page-hero h4, .page-hero h1 { color: #fff; margin-bottom: 0.15rem; }
.page-hero p { color: rgba(255,255,255,0.85); margin-bottom: 0; }
.page-hero .btn-light-quiz {
    background: #fff; color: var(--iq-purple); border: none; font-weight: 700;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}
.page-hero .btn-light-quiz:hover { background: #f1eefb; }

/* ---------- Stat cards (dashboard) ---------- */
.stat-card {
    border: none;
    border-radius: var(--iq-card-radius);
    overflow: hidden;
    position: relative;
    box-shadow: 0 0.35rem 1rem rgba(30, 20, 70, 0.08);
}
.stat-card .stat-body { display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.25rem; }
.stat-icon {
    width: 3rem; height: 3rem; flex: none;
    border-radius: 0.9rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.stat-icon.grad-purple { background: linear-gradient(135deg, var(--iq-purple), var(--iq-purple2)); }
.stat-icon.grad-blue   { background: linear-gradient(135deg, var(--iq-blue), var(--iq-blue2)); }
.stat-icon.grad-gold   { background: linear-gradient(135deg, #c98a00, var(--iq-gold)); }
.stat-icon.grad-green  { background: linear-gradient(135deg, #1f6b09, var(--iq-green)); }
.stat-icon.grad-pink   { background: linear-gradient(135deg, #c9006b, var(--iq-pink)); }
.stat-icon.grad-red    { background: linear-gradient(135deg, #a80f28, var(--iq-red)); }
.stat-value { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.stat-label { color: #6b7280; font-size: 0.82rem; font-weight: 600; }

/* ---------- Quiz cards ---------- */
.quiz-card { border: none; border-radius: var(--iq-card-radius); overflow: hidden; }
.quiz-card .quiz-card-strip { height: 6px; background: linear-gradient(90deg, var(--iq-purple), var(--iq-purple2), var(--iq-blue2)); }
.quiz-card.is-draft .quiz-card-strip { background: linear-gradient(90deg, #9096a8, #b9bdcc); }

/* ---------- Auth / join gate pages ---------- */
.auth-shell {
    min-height: calc(100vh - 130px);
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem;
}
.auth-card {
    border: none;
    border-radius: 1.25rem;
    box-shadow: 0 1.2rem 2.8rem rgba(70, 23, 143, 0.18);
    overflow: hidden;
}
.auth-card .auth-banner {
    background: linear-gradient(120deg, var(--iq-purple), var(--iq-purple2) 60%, var(--iq-blue));
    color: #fff; text-align: center; padding: 2rem 1.5rem 1.6rem;
    position: relative;
}
.auth-card .auth-banner::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 15% 110%, rgba(255,255,255,0.22), transparent 55%);
    pointer-events: none;
}
.auth-card .auth-banner i { font-size: 2.6rem; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.2)); }
.auth-card .auth-banner h4 { color: #fff; font-weight: 800; margin: 0.5rem 0 0.15rem; }
.auth-card .auth-banner p { color: rgba(255,255,255,0.85); margin: 0; font-size: 0.85rem; }

/* ---------- QR box ---------- */
.qr-box {
    background: #fff;
    border-radius: 1rem;
    padding: 0.85rem;
    display: inline-flex;
    box-shadow: 0 0.6rem 1.4rem rgba(0,0,0,0.18);
}
.qr-box canvas, .qr-box img { display: block; border-radius: 0.4rem; }
.qr-caption {
    font-size: 0.78rem; letter-spacing: 0.03em; text-transform: uppercase; font-weight: 700;
    opacity: 0.85; margin-top: 0.5rem; text-align: center;
}

/* ---------- Misc ---------- */
.icon-circle {
    width: 2.4rem; height: 2.4rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f1eefb; color: var(--iq-purple); font-size: 1.05rem;
}
.section-title-icon {
    width: 2.1rem; height: 2.1rem; border-radius: 0.6rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--iq-purple), var(--iq-purple2));
    color: #fff; margin-right: 0.5rem; font-size: 1rem;
}
footer.app-footer {
    background: #fff;
    border-top: 1px solid #ece9f7;
}
footer.app-footer i { color: var(--iq-purple2); }

.empty-state { padding: 2.5rem 1rem; text-align: center; color: #7d7d9c; }
.empty-state i { font-size: 2.6rem; color: #c9c3ec; margin-bottom: 0.6rem; display: block; }