/* ============================================================
   MTQ 2026 – Halaman Input Peserta
   Stylesheet khusus: pesertamtq.html
   ============================================================ */

/* ---- Base reset (mirror dari style.css untuk konsistensi) ---- */
body {
    background-color: #f3f7f6;
    color: #1f2937;
    margin: 0;
}

/* ---- Form inputs ---- */
#fNama,
#fTgl,
#fSurat,
#fAyat,
#fHalaman,
#fUndian {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #111827;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#fNama:focus,
#fTgl:focus,
#fSurat:focus,
#fAyat:focus,
#fHalaman:focus,
#fUndian:focus {
    outline: none;
    border-color: #26c596;
    box-shadow: 0 0 0 3px rgba(38, 197, 150, 0.25);
}

/* ---- Highlight merah: No. Undian duplikat (validasi real-time & on-save) ----
   Styling #fUndian didefinisikan dengan selector #id di file ini, sehingga kelas
   Tailwind (border-red-500) tidak cukup kuat untuk menimpanya. Kelas
   .undian-invalid dipasang/dilepas dari JS (mtq/js/peserta.js). */
#fUndian.undian-invalid,
#fUndian.undian-invalid:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}

/* ---- Efek goyang (shake) sebagai feedback input error ----
   Dipasang sementara (500ms) dari JS saat user mencoba menyimpan
   namun No. Undian masih duplikat. Nama class mengikuti konvensi
   Tailwind (animate-shake) tetapi didefinisikan manual di sini karena
   Tailwind CDN JIT tidak men-generate kelas yang ditambahkan via JS. */
@keyframes mtq-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.animate-shake {
    animation: mtq-shake 0.5s ease-in-out;
}

/* ---- Select desa (tinggi 42px seragam) ---- */
#fDesa {
    width: 100%;
    height: 42px;
    padding: 8px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #111827;
    appearance: auto;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#fDesa:focus {
    outline: none;
    border-color: #26c596;
    box-shadow: 0 0 0 3px rgba(38, 197, 150, 0.25);
}

/* ---- Age status badges ---- */
.age-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 9999px;
}

.age-status.empty {
    background-color: #eff6ff;
    color: #2563eb;
}

.age-status.valid {
    background-color: #dcfce7;
    color: #166534;
}

.age-status.invalid {
    background-color: #fef2f2;
    color: #991b1b;
}

/* ---- ID Column Font (JetBrains Mono - Clean & Readable) ---- */
.id-font {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.03em;
    color: #1f2937;
    font-feature-settings: "tnum" 1, "zero" 1;
    -webkit-font-feature-settings: "tnum" 1, "zero" 1;
}

/* ---- Dropdown Filter (Cabang / Golongan / Gender) ---- */
/* Disejajarkan dengan kotak pencarian (#pesertaSearch): tinggi kompak,
   panah custom seperti #fDesa, fokus memakai warna accent vizora */
.filter-select {
    width: auto;
    min-width: 9.5rem;
    height: auto;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    color: #374151;
    background-color: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;              /* rounded-md */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
}

.filter-select:hover {
    background-color: #ffffff;
}

.filter-select:focus {
    outline: none;
    border-color: #6b7280;                       /* gray-500 */
    box-shadow: 0 0 0 3px rgba(229, 231, 235, 0.9); /* focus:ring-gray-200 */
    background-color: #ffffff;
}

/* Indikator kategori aktif pada judul daftar (judul tabel dinamis) */
#listTitle .kat-active {
    color: #059669; /* emerald-600: aksen hijau senada dengan badge "Lengkap" */
}

@media (max-width: 640px) {
    .filter-select {
        width: 100%;
        min-width: 0;
    }
}

/* ---- Dropdown Filter (Cabang / Golongan / Gender) ---- */

td {
    padding: 10px 12px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
}

tbody tr:hover {
    background-color: #f9fafb;
}

/* ---- Print ---- */
@media print {
    body > *:not(#printArea) {
        display: none !important;
    }

    #printArea {
        display: block !important;
        width: 100%;
        box-sizing: border-box;
    }
}

.tab-btn.active {
    background: #113f36;
    color: #ffffff;
    border-color: #113f36;
    border-bottom: 2px solid #f3f7f6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   CHECKBOX PREMIUM (Radix / Shadcn-style) — Hanya untuk tabel peserta
   Menimpa aturan global `input[type="checkbox"]` di style.css
   agar utility Tailwind (w-5 h-5, text-emerald-600, bg-white,
   border-gray-300, rounded, shadow-sm, dsb.) berjalan penuh.
   ============================================================ */
.table-wrap input[type="checkbox"],
input[type="checkbox"].row-checkbox,
#checkbox-all {
    width: 1.25rem;                        /* w-5 */
    height: 1.25rem;                       /* h-5 */
    border: 1px solid #d1d5db;             /* border-gray-300 */
    background-color: #ffffff;             /* bg-white */
    border-radius: 0.375rem;               /* rounded */
    cursor: pointer;                       /* cursor-pointer */
    transition: all 200ms ease-in-out;     /* transition-all duration-200 */
}

/* Saat dicentang: isi mengikuti warna aksen (text-emerald-600) */
#checkbox-all:checked,
input[type="checkbox"].row-checkbox:checked {
    background-color: currentColor;
    border-color: currentColor;
}