/*
 * buttons.css - satu-satunya sumber bentuk & warna tombol di seluruh aplikasi.
 *
 * Pakai:  <button class="btn btn-primary">        tombol teks (tinggi 40px)
 *         <button class="btn btn-primary btn-sm"> kecil (36px) / btn-lg besar (44px)
 *         <button class="btn btn-icon btn-soft tone-red"> tombol ikon 32x32
 *
 * Varian  : btn-primary | btn-success | btn-danger | btn-secondary | btn-outline
 *           btn-outline-danger | btn-ghost | btn-soft (+ tone-*) | btn-glass
 *
 * Berkas ini dimuat SEBELUM Tailwind CDN menyuntik stylesheet-nya, jadi bila ada
 * konflik dengan spesifisitas sama (mis. hidden, w-full, mt-4) utilitas Tailwind
 * yang menang. Selektor .btn (bukan :where) perlu agar padding/border tidak
 * dikalahkan reset `button { padding: 0 }` milik preflight Tailwind.
 * Jangan menimpa warna/radius/padding tombol dengan utilitas Tailwind - tambah
 * varian di sini bila memang butuh tampilan baru.
 */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.5rem;
    padding: .5rem 1.25rem;
    border: 1px solid transparent;
    border-radius: .75rem;
    font-family: inherit;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease,
                box-shadow .15s ease, transform .15s ease, opacity .15s ease;
}
.btn-block { display: flex; }

/* Ikon/teks di dalam tombol selalu satu garis tengah yang sama. */
.btn > i, .btn > svg { flex-shrink: 0; line-height: 1; }
.btn > i::before { vertical-align: 0; }

.btn:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.btn:active:not(:disabled) { transform: translateY(1px); }

/* ── Ukuran ─────────────────────────────────────────────────────────────── */
.btn-sm { min-height: 2.25rem; padding: .375rem 1rem; font-size: .8125rem; gap: .375rem; }
.btn-lg { min-height: 2.75rem; padding: .625rem 1.5rem; font-size: .875rem; }

/* Tombol ikon: persegi 32x32, radius lebih kecil dari tombol teks. */
.btn-icon {
    width: 2rem; height: 2rem; min-height: 0; padding: 0;
    border-radius: .5rem; font-size: .875rem; gap: 0;
}

/* Varian ukuran ikon: pagination 36px, daftar padat (tombol hapus item) 28px. */
.btn-icon.btn-icon-md { width: 2.25rem; height: 2.25rem; }
.btn-icon.btn-icon-sm { width: 1.75rem; height: 1.75rem; font-size: .8125rem; }

/* Ikon persegi setinggi tombol teks - dipakai bila bersebelahan dengan input. */
.btn-square { width: 2.5rem; padding: 0; gap: 0; }

/* ── Varian solid ───────────────────────────────────────────────────────── */
.btn-primary   { background: #2563eb; color: #fff; box-shadow: 0 4px 6px -1px rgba(59,130,246,.18); }
.btn-primary:hover:not(:disabled)   { background: #1d4ed8; }
.btn-success   { background: #059669; color: #fff; box-shadow: 0 4px 6px -1px rgba(16,185,129,.2); }
.btn-success:hover:not(:disabled)   { background: #047857; }
.btn-danger    { background: #dc2626; color: #fff; box-shadow: 0 4px 6px -1px rgba(239,68,68,.2); }
.btn-danger:hover:not(:disabled)    { background: #b91c1c; }
.btn-warning   { background: #f59e0b; color: #fff; box-shadow: 0 4px 6px -1px rgba(245,158,11,.25); }
.btn-warning:hover:not(:disabled)   { background: #d97706; }

/* ── Varian netral / garis ──────────────────────────────────────────────── */
.btn-secondary { background: #fff; color: #475569; border-color: #e2e8f0; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.btn-secondary:hover:not(:disabled) { background: #f8fafc; border-color: #cbd5e1; }
.btn-outline   { background: #fff; color: #2563eb; border-color: #bfdbfe; }
.btn-outline:hover:not(:disabled)   { background: #eff6ff; border-color: #93c5fd; }
.btn-outline-success { background: #fff; color: #059669; border-color: #a7f3d0; }
.btn-outline-success:hover:not(:disabled) { background: #ecfdf5; border-color: #6ee7b7; }
.btn-outline-danger { background: #fff; color: #dc2626; border-color: #fecaca; }
.btn-outline-danger:hover:not(:disabled) { background: #fef2f2; border-color: #fca5a5; }
.btn-ghost     { background: transparent; color: #64748b; }
.btn-ghost:hover:not(:disabled)     { background: #f1f5f9; color: #334155; }
.btn-ghost-danger { background: transparent; color: #ef4444; }
.btn-ghost-danger:hover:not(:disabled) { background: #fef2f2; color: #dc2626; }

/* ── Soft: latar tipis berwarna, dipilih lewat tone-* ───────────────────── */
.btn-soft { background: var(--tone-bg); color: var(--tone-fg); }
.btn-soft:hover:not(:disabled) { background: var(--tone-hover); }
.tone-blue    { --tone-bg: #eff6ff; --tone-hover: #dbeafe; --tone-fg: #2563eb; }
.tone-sky     { --tone-bg: #f0f9ff; --tone-hover: #e0f2fe; --tone-fg: #0284c7; }
.tone-cyan    { --tone-bg: #ecfeff; --tone-hover: #cffafe; --tone-fg: #0891b2; }
.tone-amber   { --tone-bg: #fffbeb; --tone-hover: #fef3c7; --tone-fg: #d97706; }
.tone-orange  { --tone-bg: #fff7ed; --tone-hover: #ffedd5; --tone-fg: #ea580c; }
.tone-red     { --tone-bg: #fef2f2; --tone-hover: #fee2e2; --tone-fg: #dc2626; }
.tone-rose    { --tone-bg: #fff1f2; --tone-hover: #ffe4e6; --tone-fg: #e11d48; }
.tone-emerald { --tone-bg: #ecfdf5; --tone-hover: #d1fae5; --tone-fg: #059669; }
.tone-slate   { --tone-bg: #f8fafc; --tone-hover: #f1f5f9; --tone-fg: #64748b; }

/* ── Di atas latar gelap/gradasi (header modal & kartu berwarna) ─────────── */
.btn-glass       { background: rgba(255,255,255,.15); color: #fff; }
.btn-glass:hover:not(:disabled)       { background: rgba(255,255,255,.28); }
.btn-glass-close { background: transparent; color: rgba(255,255,255,.8); }
.btn-glass-close:hover:not(:disabled) { background: rgba(255,255,255,.2); color: #fff; }

/* ── Nonaktif: tetap berwarna varian-nya, hanya dipudarkan ───────────────
   Sebelumnya semua varian berubah abu-abu polos sehingga tombol yang
   terkunci tampak seperti jenis tombol lain di samping pasangannya. */
.btn:disabled, .btn[disabled], .btn.is-disabled {
    opacity: .55; box-shadow: none; cursor: not-allowed; transform: none;
}

/* ── Filter tipe soal (Bank Soal): kapsul yang aktif dibedakan warnanya ─────
   Sebelumnya tidak ada gaya "aktif" sama sekali, jadi filter yang sedang
   dipakai tidak terlihat. Dibatasi ke Bank Soal; halaman Nilai punya gaya sendiri. */
#bankSoalFilterBar .filter-btn.active,
#bankSoalPaginatorFilters .filter-btn.active {
    background: #eff6ff; color: #1d4ed8; border-color: #93c5fd;
}