/* Gaya tambahan di luar Tailwind: hanya untuk plugin dan elemen yang dibuat oleh library. */

html { -webkit-tap-highlight-color: transparent; }

/* Fokus: outline dengan jarak dari tepi elemen (bukan ring/ganti border) */
:where(input:not([type=checkbox]):not([type=radio]), textarea, select):focus {
	outline: 2px solid rgba(70, 100, 230, .6);
	outline-offset: 3px;
}
:where(a, button, [tabindex]):focus-visible {
	outline: 2px solid rgba(70, 100, 230, .6);
	outline-offset: 3px;
}


/* Transisi untuk semua elemen interaktif (hover, focus, disabled) */
a, button, input, textarea, select, label {
	transition: color .15s ease, background-color .15s ease, border-color .15s ease,
		box-shadow .15s ease, outline-color .15s ease, outline-offset .15s ease, opacity .15s ease;
}

/*
 * Komponen form: input dan tombol memakai tinggi yang sama.
 * Normal : px 12 / py 10, text-sm  -> tinggi 42px
 * Small  : px 10 / py 6,  text-xs  -> tinggi 30px
 * Keduanya memakai border 1px dan line-height tetap agar sejajar.
 */
.input, .btn {
	display: block;
	box-sizing: border-box;
	padding: .625rem .75rem;
	font-size: .875rem;
	line-height: 1.25rem;
	border: 1px solid transparent;
	border-radius: .75rem;
}
.input-sm, .btn-sm {
	padding: .375rem .625rem;
	font-size: .75rem;
	line-height: 1rem;
	border-radius: .5rem; /* satu tingkat di bawah ukuran normal (.75rem) */
}

.input {
	width: 100%;
	color: #1e293b;
	background-color: #fff;
	border-color: #cbd5e1;
}
.input::placeholder { color: #94a3b8; }
.input:hover:not(:disabled):not(:focus) { border-color: #94a3b8; }
.input:disabled { background-color: #f1f5f9; cursor: not-allowed; }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
}
.btn-sm { gap: .375rem; }
/* Ikon di dalam tombol (mis. Boxicons dengan text-lg) membawa line-height sendiri (28px) dan membesarkan tombol;
 * paksa mengikuti line-height tombol agar tinggi tetap 42px / 30px. !important karena utilitas Tailwind juga important. */
.btn i { line-height: inherit !important; }
.btn:disabled { cursor: not-allowed; opacity: .6; }

.btn-primary { color: #fff; background-color: #4664E6; border-color: #4664E6; }
.btn-primary:hover:not(:disabled) { background-color: #2244E1; border-color: #2244E1; }

.btn-light { color: #334155; background-color: #fff; border-color: #cbd5e1; }
.btn-light:hover:not(:disabled) { background-color: #f1f5f9; border-color: #94a3b8; }

.btn-danger { color: #fff; background-color: #dc2626; border-color: #dc2626; }
.btn-danger:hover:not(:disabled) { background-color: #b91c1c; border-color: #b91c1c; }

/* jQuery Validation */
label.error {
	display: block;
	margin-top: .375rem;
	font-size: .75rem;
	color: #dc2626;
}
input.error, textarea.error, select.error {
	border-color: #f87171 !important;
}
input.error:focus, textarea.error:focus, select.error:focus { outline-color: rgba(239, 68, 68, .6); }

/* Scrollbar: tipis, membulat, menyatu dengan latar (berlaku di seluruh halaman, termasuk tabel/sidebar/modal) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border: 3px solid transparent;
	background-clip: padding-box; /* jarak di sekeliling thumb: tampak lebih ramping */
	border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) { /* Firefox */
	* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
}

/* Air Datepicker mengikuti warna brand */
.air-datepicker { --adp-accent-color: #4664E6; --adp-font-family: 'Plus Jakarta Sans', sans-serif; --adp-z-index: 60; --adp-border-radius: .75rem; }

/* Tom Select mengikuti tampilan input */
.ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control { border-radius: .75rem; padding: .625rem .75rem; border-color: #cbd5e1; box-shadow: none; }
.ts-wrapper.focus .ts-control { border-color: #cbd5e1; outline: 2px solid rgba(70, 100, 230, .6); outline-offset: 3px; box-shadow: none; }
.ts-dropdown { border-radius: .75rem; overflow: hidden; margin-top: .5rem; }

/* Trumbowyg */
.trumbowyg-box, .trumbowyg-editor { border-radius: .75rem; }

/* Tooltip ringan: <elemen data-tip="Teks"> (muncul di atas saat hover / fokus keyboard) */
[data-tip] { position: relative; }
[data-tip]::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	z-index: 50;
	padding: .375rem .625rem;
	font-size: .75rem;
	font-weight: 500;
	line-height: 1rem;
	white-space: nowrap;
	color: #fff;
	background: #1e293b;
	border-radius: .5rem;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 3px);
	transition: opacity .15s ease, transform .15s ease;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after {
	opacity: 1;
	transform: translate(-50%, 0);
}
/* Varian rata kanan untuk tombol di tepi kanan (agar tidak memicu scroll horizontal): data-tip-pos="end" */
[data-tip][data-tip-pos="end"]::after { left: auto; right: 0; transform: translate(0, 3px); }
[data-tip][data-tip-pos="end"]:hover::after, [data-tip][data-tip-pos="end"]:focus-visible::after { transform: translate(0, 0); }

/* Modal dasar (dibuat oleh modal.confirm di global.js): animasi masuk/keluar cepat dan halus */
dialog.modal[open] { animation: modal-in .2s cubic-bezier(.16, 1, .3, 1); }
dialog.modal[open]::backdrop { animation: modal-backdrop-in .2s ease-out; }
dialog.modal.is-closing { animation: modal-out .14s ease-in forwards; }
dialog.modal.is-closing::backdrop { animation: modal-backdrop-out .14s ease-in forwards; }

@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes modal-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(.97); } }
@keyframes modal-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-backdrop-out { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	dialog.modal[open], dialog.modal[open]::backdrop, dialog.modal.is-closing, dialog.modal.is-closing::backdrop { animation-duration: 1ms; }
}

/* Sembunyikan scrollbar pada wadah yang bisa digeser (mis. tab filter di mobile) */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Checkbox bulat: <input type="checkbox" class="check">. Fokus = outline berjarak seperti input; centang = latar biru seperti .btn-primary */
.check {
	-webkit-appearance: none;
	appearance: none;
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	vertical-align: middle;
	cursor: pointer;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	border: 1.5px solid #cbd5e1;
	border-radius: 9999px;
}
.check:hover:not(:disabled) { border-color: #94a3b8; }
.check:focus { outline: 2px solid rgba(70, 100, 230, .6); outline-offset: 2px; }
.check:checked {
	background-color: #4664E6;
	border-color: #4664E6;
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 9.5l2.5 2.5L13 6.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}
.check:checked:hover:not(:disabled) { background-color: #2244E1; border-color: #2244E1; }
.check[type=checkbox]:indeterminate {
	background-color: #4664E6;
	border-color: #4664E6;
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.5 9h7' stroke='white' stroke-width='2' stroke-linecap='round'/%3e%3c/svg%3e");
}
.check:disabled { opacity: .5; cursor: not-allowed; }

/* Editor Trumbowyg (soal IQ): menyatu dengan gaya input */
.trumbowyg-box, .trumbowyg-editor { margin: 0; }
.trumbowyg-box { border: 1px solid #cbd5e1; border-radius: .75rem; overflow: hidden; background: #fff; }
.trumbowyg-box:focus-within { outline: 2px solid rgba(70, 100, 230, .6); outline-offset: 2px; }
.trumbowyg-box.trumbowyg-fullscreen { border-radius: 0; outline: none; }
.trumbowyg-button-pane { background: #f1f5f9; border-bottom: 1px solid #e2e8f0; }
.trumbowyg-button-pane::after { display: none; }
.trumbowyg-button-pane button:hover:not(.trumbowyg-disable), .trumbowyg-button-pane button.trumbowyg-active { background: #e2e8f0; }
.trumbowyg-editor, .trumbowyg-textarea { padding: 1rem; font-size: .875rem; line-height: 1.65; color: #1e293b; min-height: 160px; }
/* Tailwind preflight menghapus gaya elemen dasar; kembalikan di dalam editor */
.trumbowyg-editor ul { list-style: disc; padding-left: 1.5rem; }
.trumbowyg-editor ol { list-style: decimal; padding-left: 1.5rem; }
.trumbowyg-editor h1, .trumbowyg-editor h2, .trumbowyg-editor h3, .trumbowyg-editor h4 { font-weight: 700; margin: .5rem 0; }
.trumbowyg-editor h1 { font-size: 1.5rem; } .trumbowyg-editor h2 { font-size: 1.25rem; } .trumbowyg-editor h3 { font-size: 1.1rem; }
.trumbowyg-editor blockquote { border-left: 3px solid #cbd5e1; padding-left: 1rem; color: #475569; }
.trumbowyg-editor table { border-collapse: collapse; }
.trumbowyg-editor td, .trumbowyg-editor th { border: 1px solid #cbd5e1; padding: .25rem .5rem; }
.trumbowyg-editor img { display: inline-block; }

/* Isi soal bergambar/tabel di halaman mengerjakan tes IQ (HTML dari editor, dibersihkan server) */
.q-content p { margin: 0 0 .75rem; }
.q-content p:last-child { margin-bottom: 0; }
.q-content img { display: block; max-width: 100%; height: auto; margin: .75rem auto; border-radius: .75rem; }
.q-content ul { list-style: disc; padding-left: 1.5rem; margin: .5rem 0; }
.q-content ol { list-style: decimal; padding-left: 1.5rem; margin: .5rem 0; }
.q-content table { border-collapse: collapse; margin: .75rem 0; max-width: 100%; }
.q-content td, .q-content th { border: 1px solid #cbd5e1; padding: .375rem .625rem; }
.q-content h1, .q-content h2, .q-content h3, .q-content h4 { font-weight: 700; margin: .5rem 0; }