:root {
	--app-primary: #0d6efd;
	--app-sidebar-width: 250px;
	--app-bg: #f4f6f9;
}

body { background: var(--app-bg); font-size: .925rem; }

.btn-primary { background-color: var(--app-primary); border-color: var(--app-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--app-primary); border-color: var(--app-primary); filter: brightness(.92); }
.btn-outline-primary { color: var(--app-primary); border-color: var(--app-primary); }
.btn-outline-primary:hover { background-color: var(--app-primary); border-color: var(--app-primary); color: #fff; }
a { color: var(--app-primary); }

/* Layout */
.app-wrapper { display: flex; min-height: 100vh; }
.app-sidebar {
	width: var(--app-sidebar-width); flex-shrink: 0; background: #fff; border-right: 1px solid #e5e7eb;
	position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 1040;
}
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
	display: flex; align-items: center; background: #fff; border-bottom: 1px solid #e5e7eb;
	padding: .75rem 1.5rem; position: sticky; top: 0; z-index: 1020;
}
.app-content { padding: 1.5rem; flex: 1; }
.app-footer { padding: 1rem 1.5rem; color: #6c757d; font-size: .8rem; }

.app-brand { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem; text-decoration: none; color: inherit; border-bottom: 1px solid #f0f0f0; }
.app-brand-logo { max-height: 38px; max-width: 38px; }
.app-brand-icon {
	display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
	border-radius: .6rem; background: var(--app-primary); color: #fff; font-size: 1.15rem;
}
.app-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.app-brand-text small { color: #6c757d; }

.app-nav { padding: .75rem; }
.app-nav .nav-heading { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; margin: 1rem .75rem .35rem; }
.app-nav .nav-link { display: flex; align-items: center; gap: .6rem; color: #374151; border-radius: .5rem; padding: .5rem .75rem; }
.app-nav .nav-link i { font-size: 1.05rem; }
.app-nav .nav-link:hover { background: #f3f4f6; }
.app-nav .nav-link.active { background: var(--app-primary); color: #fff; }

.app-sidebar-backdrop { display: none; }

@media (max-width: 991.98px) {
	.app-sidebar { position: fixed; left: 0; transform: translateX(-100%); transition: transform .2s ease; }
	body.sidebar-open .app-sidebar { transform: translateX(0); }
	body.sidebar-open .app-sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 1030; }
	.app-content { padding: 1rem; }
	.app-topbar { padding: .75rem 1rem; }
}

/* Komponen */
.card { border: 1px solid #e5e7eb; border-radius: .75rem; }
.card > .card-header:first-child { border-radius: .75rem .75rem 0 0; }
.stat-card .stat-label { color: #6c757d; font-size: .8rem; }
.stat-card .stat-value { font-size: 1.75rem; font-weight: 600; }
.table > :not(caption) > * > * { padding: .65rem .75rem; }

/* Konten soal */
.question-content { overflow-wrap: anywhere; }
.question-content img { max-width: 100%; height: auto; }
.question-content table { border-collapse: collapse; margin: .5rem 0; }
.question-content td, .question-content th { border: 1px solid #dee2e6; padding: .25rem .5rem; }
.question-content p:last-child { margin-bottom: 0; }
.option-list { display: flex; flex-direction: column; gap: .5rem; }
.option-item { display: flex; gap: .75rem; padding: .6rem .75rem; border: 1px solid #e5e7eb; border-radius: .5rem; }
.option-item.is-correct { border-color: #198754; background: #f0faf4; }
.option-code {
	flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #f3f4f6;
	display: inline-flex; align-items: center; justify-content: center; font-weight: 600;
}
.option-item.is-correct .option-code { background: #198754; color: #fff; }

/* File Manager */
.fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.fm-item { background: #fff; border: 1px solid #e5e7eb; border-radius: .6rem; padding: .5rem; display: flex; flex-direction: column; color: inherit; }
.fm-folder:hover { border-color: var(--app-primary); }
.fm-thumb {
	height: 110px; display: flex; align-items: center; justify-content: center; background: #f8f9fa;
	border-radius: .4rem; overflow: hidden; font-size: 2.6rem; width: 100%;
}
.fm-folder .fm-thumb { color: #f0b429; }
.fm-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fm-name { font-size: .8rem; font-weight: 500; margin-top: .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-meta { font-size: .72rem; color: #6c757d; }
.fm-actions { display: flex; gap: .25rem; margin-top: .4rem; flex-wrap: wrap; }
.fm-actions form { display: inline; }

/* Mode peserta: sembunyikan kunci & pembahasan */
.participant-mode .answer-key { display: none !important; }
.participant-mode .option-item.is-correct { border-color: #e5e7eb; background: transparent; }
.participant-mode .option-item.is-correct .option-code { background: #f3f4f6; color: inherit; }

/* Review */
.review-notes { white-space: normal; background: rgba(0,0,0,.03); border-left: 3px solid #ffc107; padding: .4rem .6rem; border-radius: .25rem; overflow-wrap: anywhere; }
.review-timeline .review-notes { border-left-color: #adb5bd; }
.app-nav .nav-link .badge { font-size: .7rem; }

/* Editor */
.tox-tinymce { border-radius: .5rem !important; }
.is-invalid + .tox-tinymce, .tox-tinymce.is-invalid { border-color: #dc3545 !important; }

/* Login */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; }
.login-card { width: 100%; max-width: 420px; border-radius: 1rem; }