/* PPDB BKN - Component Styles
   --------------------------------------------------------------------------
   Lapisan komponen yang dipakai project. SEMUA warna diambil dari token di
   theme.css, sehingga_light mode_ maupun Dark Mode otomatis konsisten.

   Muat setelah theme.css.
   ========================================================================== */

/* ==========================================================================
   BUTTON
   ========================================================================== */
.button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease,
        color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    border: 0;
}

.button:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 3px;
}

.button-gold {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-600) 100%);
    color: #1e293b;
}

.button-gold:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-brand);
}

/* Teks di atas latar emas/gold (bg-yellow-*, bg-gold).
   Sengaja TIDAK memakai token teks, karena token teks berubah terang di
   Dark Mode sementara latar gold tetap terang -> kontras hilang. */
.on-gold {
    color: #1c1917;
}

.button-navy {
    background-color: var(--navy);
    color: var(--on-brand);
}

.button-navy:hover {
    background-color: var(--navy-600);
}

.button-white {
    background-color: var(--surface);
    color: var(--brand-text);
    border: 2px solid var(--surface);
}

.button-white:hover {
    background-color: transparent;
    color: var(--surface);
    border-color: var(--surface);
}

.button-light {
    background-color: var(--bg-subtle);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.button-light:hover {
    background-color: var(--surface-hover);
    color: var(--text-strong);
}

.button-outline {
    background-color: transparent;
    color: var(--brand-text);
    border: 2px solid var(--navy);
}

.button-outline:hover {
    background-color: var(--navy);
    color: var(--on-brand);
}

.button:disabled,
.button[aria-disabled="true"] {
    opacity: 0.6;
    pointer-events: none;
}

/* ==========================================================================
   CARD
   ========================================================================== */
.card {
    background-color: var(--surface);
    color: var(--text-strong);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
}

.feature-card {
    background-color: var(--surface);
    color: var(--text-strong);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

.feature-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.card-desc {
    color: var(--text-subtle);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.card-title {
    color: var(--text);
    font-weight: 600;
}

/* Catatan: `.bg-navy`, `.text-gold`, `.border-gold` kini disediakan oleh
   Tailwind lewat token rgb(var(--*-rgb)) di theme.css, sehingga tidak perlu
   didefinisikan ulang di sini. */

/* ==========================================================================
   HERO / GLASS (konten di atas latar brand gelap)
   ========================================================================== */
.glass-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.step-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.text-shadow-strong {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   FORM - Kontrol input / select / textarea
   --------------------------------------------------------------------------
   Semua warna, border, ring, dan state diambil dari token `--field-*`
   di theme.css, sehingga Light Mode & Dark Mode selalu sinkron.

   Selector memakai awalan `html .` (specificity 0,1,1) agar komponen ini
   menang atas utility Tailwind (0,1,0) yang di-inject CDN. Padding, radius,
   dan lebar TIDAK dikunci di sini supaya utility tata letak per halaman
   (px-4, rounded-xl, w-full, ...) tetap bekerja.
   ========================================================================== */

/* --- Dasar ------------------------------------------------------------- */
/* Lebar TIDAK dikunci supaya utility seperti `w-full` / `w-24` tetap
   bekerja. Hanya fallback zero-specificity untuk input tanpa class. */
:where(input.field, select.field, textarea.field) {
    width: 100%;
}

html .field {
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.5;
    font-family: inherit;
    color: var(--field-text);
    background-color: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: 0.625rem;
    box-shadow: var(--field-shadow);
    transition:
        border-color .18s cubic-bezier(.4, 0, .2, 1),
        box-shadow .18s cubic-bezier(.4, 0, .2, 1),
        background-color .18s cubic-bezier(.4, 0, .2, 1);
    -webkit-appearance: none;
    appearance: none;
}

html .field:hover:not(:disabled):not([readonly]) {
    border-color: var(--field-border-hover);
}

html .field:focus,
html .field:focus-visible {
    outline: none;
    border-color: var(--field-border-focus);
    box-shadow: var(--field-shadow-focus);
}

/* Ring dihilangkan hanya untuk klik mouse pada kolom teks biasa, supaya
   tidak "berkedip" setiap kali user klik. Kontrol yang membuka UI native
   (select, date, time, ...) tetap selalu menampilkan ring karena kalau
   tidak, user tidak ada tanda kolom itu sedang aktif. */
html .field:focus:not(:focus-visible):not(select):not([type="date"]):not([type="time"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]) {
    box-shadow: var(--field-shadow);
    border-color: var(--field-border-hover);
}

/* Placeholder harus terbaca tapi tidak bersaing dengan input terisi */
html .field::placeholder {
    color: var(--field-placeholder);
    opacity: 1;
}

/* Autofill Chrome memaksa warna putih -> samakan dengan tema */
html .field:-webkit-autofill {
    -webkit-text-fill-color: var(--field-text);
    -webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset;
    caret-color: var(--field-text);
    transition: background-color 9999s ease-out 0s;
}

/* --- State: disabled / readonly ---------------------------------------- */
html .field:disabled,
html .field[readonly] {
    background-color: var(--field-bg-disabled);
    border-color: var(--field-border-disabled);
    color: var(--field-text-disabled);
    box-shadow: none;
    cursor: not-allowed;
}

html .field:disabled::placeholder {
    color: var(--field-text-disabled);
}

/* Readonly masih boleh disalin, jadi kursor tidak harus "not-allowed" */
html .field[readonly]:not(:disabled) {
    cursor: text;
}

/* --- State: error & sukses -------------------------------------------- */
/* `aria-invalid` dipakai server-side validation, `:user-invalid` hanya
   menyala setelah pengguna menyentuh kolom (bukan langsung saat load). */
html .field[aria-invalid="true"],
html .field.field-error,
html .field:user-invalid {
    border-color: var(--field-border-error);
    background-color: var(--field-bg-error);
}

html .field[aria-invalid="true"]:focus,
html .field.field-error:focus,
html .field:user-invalid:focus {
    border-color: var(--field-border-error);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / .04), 0 0 0 4px var(--field-ring-error);
}

html .field.field-valid,
html .field:user-valid {
    border-color: var(--field-border-success);
}

html .field.field-valid:focus,
html .field:user-valid:focus {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / .04), 0 0 0 4px var(--field-ring-success);
}

/* --- SELECT: chevron custom ------------------------------------------- */
html select.field {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 1.05rem 1.05rem;
    cursor: pointer;
}

html select.field:hover:not(:disabled) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23475569' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
}

html select.field:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
}

/* Opsi dropdown mengikuti tema juga (Chrome/Edge ikut color-scheme) */
html select.field option {
    background-color: var(--field-bg);
    color: var(--field-text);
}

/* --- TEXTAREA ---------------------------------------------------------- */
html textarea.field {
    min-height: 6rem;
    resize: vertical;
    line-height: 1.6;
}

/* --- DATE / TIME / WEEK / MONTH / DATETIME-LOCAL ----------------------- */
/* `color-scheme` yang sudah di-set membuat ikon picker otomatis terang
   di Dark Mode. Sisa kebutuhan: cursor + area klik yang lebih luas. */
html input[type="date"].field,
html input[type="time"].field,
html input[type="datetime-local"].field,
html input[type="month"].field,
html input[type="week"].field {
    cursor: pointer;
}

html input[type="date"].field::-webkit-calendar-picker-indicator,
html input[type="time"].field::-webkit-calendar-picker-indicator,
html input[type="datetime-local"].field::-webkit-calendar-picker-indicator,
html input[type="month"].field::-webkit-calendar-picker-indicator,
html input[type="week"].field::-webkit-calendar-picker-indicator {
    opacity: .55;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    transition: opacity .18s ease, background-color .18s ease;
}

html input[type="date"].field:hover::-webkit-calendar-picker-indicator,
html input[type="time"].field:hover::-webkit-calendar-picker-indicator,
html input[type="datetime-local"].field:hover::-webkit-calendar-picker-indicator,
html input[type="month"].field:hover::-webkit-calendar-picker-indicator,
html input[type="week"].field:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
    background-color: var(--field-border-soft);
}

html .field:disabled::-webkit-calendar-picker-indicator {
    opacity: .25;
    cursor: not-allowed;
}

/* --- NUMBER: spinner halus ------------------------------------------- */
html input[type="number"].field {
    -moz-appearance: textfield;
}

html input[type="number"].field::-webkit-outer-spin-button,
html input[type="number"].field::-webkit-inner-spin-button {
    opacity: .45;
    height: 1.1em;
    transition: opacity .18s ease;
}

html input[type="number"].field:hover::-webkit-outer-spin-button,
html input[type="number"].field:hover::-webkit-inner-spin-button {
    opacity: .9;
}

/* --- SEARCH: tombol hapus bawaan -------------------------------------- */
html input[type="search"].field::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 1.1em;
    width: 1.1em;
    border-radius: 999px;
    background-color: var(--field-icon);
    cursor: pointer;
    opacity: .6;
    transition: opacity .18s ease;
}

html input[type="search"].field::-webkit-search-cancel-button:hover {
    opacity: 1;
}

/* --- CHECKBOX & RADIO -------------------------------------------------- */
html input[type="checkbox"],
html input[type="radio"] {
    accent-color: var(--field-border-focus);
    transition: accent-color .18s ease;
}

html input[type="checkbox"]:focus-visible,
html input[type="radio"]:focus-visible {
    outline: 2px solid var(--field-border-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- FILE -------------------------------------------------------------- */
html input[type="file"].field {
    padding: 0.5rem;
    cursor: pointer;
}

html input[type="file"].field::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.4rem 0.85rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--field-text);
    background-color: var(--field-bg-hover);
    border: 1px solid var(--field-border);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, transform .12s ease;
}

html input[type="file"].field:hover::file-selector-button {
    border-color: var(--field-border-focus);
}

html input[type="file"].field:active::file-selector-button {
    transform: translateY(1px);
}

html input[type="file"].field:disabled::file-selector-button {
    background-color: var(--field-bg-disabled);
    color: var(--field-text-disabled);
    cursor: not-allowed;
}

/* --- UKURAN OPSIONAL --------------------------------------------------- */
html .field-sm {
    padding: 0.4rem 0.65rem;
    font-size: 0.8125rem;
    border-radius: 0.5rem;
}

html .field-lg {
    padding: 0.8rem 1.05rem;
    font-size: 0.9375rem;
    border-radius: 0.75rem;
}

/* --- FIELD DENGAN IKON (opsional) -------------------------------------- */
/* Pakai: <div class="field-wrap"><svg class="field-icon">…</svg>
           <input class="field field-with-icon"></div>                  */
html .field-wrap {
    position: relative;
    display: block;
}

html .field-icon {
    position: absolute;
    top: 50%;
    left: 0.875rem;
    transform: translateY(-50%);
    width: 1.05rem;
    height: 1.05rem;
    color: var(--field-icon);
    pointer-events: none;
    transition: color .18s ease;
}

html .field-wrap:focus-within .field-icon {
    color: var(--field-border-focus);
}

html .field-with-icon {
    padding-left: 2.5rem;
}

/* Ikon berbentuk blok berwarna penuh (lebar 3rem / w-12) seperti di
   halaman login: ruang teks harus selebar bloknya. */
html .field-with-icon-block {
    padding-left: 3rem;
}

html .field-wrap-icon-right .field-icon {
    left: auto;
    right: 0.875rem;
}

html .field-with-icon-right {
    padding-left: 0.875rem;
    padding-right: 2.5rem;
}

/* Ikon bisa berupa tombol (mis. tombol lihat sandi) */
html .field-action {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    color: var(--text-muted);
    transition: color .18s ease, background-color .18s ease;
}

html .field-action:hover {
    color: var(--field-border-focus);
    background-color: var(--field-border-soft);
}

html .field-has-action {
    padding-right: 2.75rem;
}

/* --- LABEL, BANTUAN, PESAN KESALAHAN ------------------------------------ */
.label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-body);
    margin-bottom: 0.5rem;
}

html .field-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 0.375rem;
}

html .field-label .required {
    color: #ef4444;
    margin-left: 0.125rem;
}

html .field-hint {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-faint);
}

html .field-message {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
}

html .field-message-error {
    color: #ef4444;
}

html .field-message-success {
    color: #059669;
}

html .field-group {
    margin-bottom: 1.125rem;
}

/* Alias lama: `.input` dipakai beberapa halaman sebelum komponen ini ada. */
html .input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    color: var(--field-text);
    background-color: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: 0.625rem;
    box-shadow: var(--field-shadow);
    transition: border-color .18s cubic-bezier(.4, 0, .2, 1), box-shadow .18s cubic-bezier(.4, 0, .2, 1);
}

html .input:focus {
    outline: none;
    border-color: var(--field-border-focus);
    box-shadow: var(--field-shadow-focus);
}

html .input::placeholder {
    color: var(--field-placeholder);
    opacity: 1;
}

/* --- SELECT & placeholder icon: varian Dark Mode -----------------------
   Ikon chevron select memakai SVG data-URI, jadi tidak bisa mengikuti
   token. Warnanya ditulis ulang di sini agar tetap terbaca di atas
   latar gelap.                                                             */
@media (prefers-color-scheme: dark) {
    html select.field {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2393a2bd' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    }

    html select.field:hover:not(:disabled) {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ccd7ea' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    }

    html select.field:focus {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2360a5fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    }

    html .field-message-error {
        color: #fca5a5;
    }

    html .field-message-success {
        color: #6ee7b7;
    }

    html .field-label .required {
        color: #f87171;
    }
}

/* Tombol submit utama */
.btn-primary {
    background-color: var(--navy);
    color: var(--on-brand);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover {
    background-color: var(--navy-600);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background-color: var(--bg-subtle);
    color: var(--text-strong);
    border: 1px solid var(--border);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-secondary:hover {
    background-color: var(--surface-hover);
    border-color: var(--border-strong);
}

.btn-danger {
    background-color: #dc2626;
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-danger:hover {
    background-color: #b91c1c;
}

.btn:disabled,
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-error {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: #fa9c9c;
}

.field-invalid {
    border-color: #ef4444 !important;
}

/* ==========================================================================
   TABEL
   ========================================================================== */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.table thead th {
    background-color: var(--bg-subtle);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-body);
    vertical-align: middle;
}

.table tbody tr {
    background-color: var(--surface);
    transition: background-color 0.15s ease;
}

.table tbody tr:hover {
    background-color: var(--bg-subtle);
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

/* ==========================================================================
   BADGE / ALERT
   ========================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.25rem;
    border: 1px solid transparent;
    white-space: nowrap;
}

.alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid;
    margin-bottom: 1.5rem;
}

.alert-success {
    background-color: var(--alert-success-bg);
    border-color: var(--alert-success-border);
    color: var(--alert-success-text);
}

.alert-danger {
    background-color: var(--alert-danger-bg);
    border-color: var(--alert-danger-border);
    color: var(--alert-danger-text);
}

.alert-warning {
    background-color: var(--alert-warning-bg);
    border-color: var(--alert-warning-border);
    color: var(--alert-warning-text);
}

.alert-info {
    background-color: var(--alert-info-bg);
    border-color: var(--alert-info-border);
    color: var(--alert-info-text);
}

:root {
    --alert-success-bg: #f0fdf4;
    --alert-success-border: #bbf7d0;
    --alert-success-text: #14532d;
    --alert-danger-bg: #fef2f2;
    --alert-danger-border: #fecaca;
    --alert-danger-text: #7f1d1d;
    --alert-warning-bg: #fffbeb;
    --alert-warning-border: #fde68a;
    --alert-warning-text: #78350f;
    --alert-info-bg: #eff6ff;
    --alert-info-border: #bfdbfe;
    --alert-info-text: #1e3a8a;
}

@media (prefers-color-scheme: dark) {
    :root {
        --alert-success-bg: #15332f;
        --alert-success-border: #1e4f3d;
        --alert-success-text: #aef0c6;
        --alert-danger-bg: #31212d;
        --alert-danger-border: #522f38;
        --alert-danger-text: #fcbfbf;
        --alert-warning-bg: #312e21;
        --alert-warning-border: #534621;
        --alert-warning-text: #fde29c;
        --alert-info-bg: #192a43;
        --alert-info-border: #253e61;
        --alert-info-text: #b7d7fd;
    }
}

/* ==========================================================================
   MODAL
   ========================================================================== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: var(--overlay);
    backdrop-filter: blur(4px);
}

.modal {
    width: 100%;
    max-width: 32rem;
    background-color: var(--surface);
    color: var(--text-strong);
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background-color: var(--bg-subtle);
    font-weight: 600;
    color: var(--text);
}

.modal-body {
    padding: 1.5rem;
    color: var(--text-body);
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    background-color: var(--bg-subtle);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* ==========================================================================
   UTILITAS
   ========================================================================== */
.animate-spin {
    animation: ppdb-spin 1s linear infinite;
}

@keyframes ppdb-spin {
    to {
        transform: rotate(360deg);
    }
}

.pointer-events-none {
    pointer-events: none;
}

.backdrop-blur-md {
    backdrop-filter: blur(12px);
}

.ring-1 {
    box-shadow: 0 0 0 1px currentColor;
}

.ring-white\/20 {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.ring-white\/30 {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   RESPONSIF
   ========================================================================== */
@media (max-width: 768px) {
    .button {
        width: 100%;
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }

    .feature-card {
        margin-bottom: 1rem;
    }

    header nav a {
        display: block;
        width: 100%;
    }

    /* Cegah zoom otomatis iOS */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px;
    }

    table {
        font-size: 0.75rem;
    }

    table th,
    table td {
        padding: 0.5rem !important;
    }
}

@media (max-width: 640px) {
    .card {
        padding: 1.5rem;
        border-radius: 0.75rem;
    }

    .md\:flex-row {
        flex-direction: column;
    }

    .md\:grid-cols-2,
    .md\:grid-cols-3 {
        grid-template-columns: 1fr;
    }
}

/* Scroll tabel yang keluar dari padding card di layar kecil */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
    .table-scroll {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ==========================================================================
   PRINT - selalu gunakan gaya terang (hemat tinta & mudah dibaca)
   ========================================================================== */
@media print {

    body {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .no-print,
    header,
    footer,
    nav,
    aside {
        display: none !important;
    }

    .card,
    .table tbody tr {
        background: #ffffff !important;
        color: #000000 !important;
        border-color: #cccccc !important;
        box-shadow: none !important;
    }
}/* Modern responsive table styles */

/* Modern responsive table styles */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 768px) {
    .table-mobile-stack thead {
        display: none;
    }
    .table-mobile-stack tbody tr {
        display: block;
        border: 1px solid var(--border);
        border-radius: 0.75rem;
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        background: var(--surface);
        box-shadow: var(--shadow-sm);
    }
    .table-mobile-stack tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.5rem 0 !important;
        border: none !important;
        text-align: right;
    }
    .table-mobile-stack tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted);
        text-align: left;
        padding-right: 1rem;
    }
    .table-mobile-stack tbody td[data-label=""]::before {
        display: none;
    }
}
/* Form improvements */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) {
    .form-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .form-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}
.form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}
.btn-modern {
    padding: 0.625rem 1.25rem;
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}
.btn-navy {
    background: var(--navy);
    color: var(--on-brand);
    border: 1px solid transparent;
}
.btn-navy:hover {
    background: var(--navy-600);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.btn-gold {
    background: var(--gold);
    color: #1e293b;
    border: 1px solid transparent;
}
.btn-gold:hover {
    background: var(--gold-600);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
/* Modal improvements */
.modal-overlay-modern {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.modal-panel-modern {
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    border: 2px solid var(--border);
}
/* Badge & status improvements */
.badge-modern {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid;
    white-space: nowrap;
}
/* Consistent brand buttons */
.btn-brand {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-600) 100%);
  color: var(--on-brand);
  border-bottom: 3px solid var(--gold);
  box-shadow: var(--shadow-sm);
}
.btn-brand:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
/* Better table mobile spacing */
@media (max-width: 768px) {
  .table-mobile-stack tbody td {
    padding: 0.625rem 0 !important;
    font-size: 0.875rem;
  }
}
/* Enhanced responsive tables - mobile card view */
.table-mobile-stack {
  @media (max-width: 768px) {
    font-size: 0.875rem;
    
    thead {
      display: none;
    }
    
    tbody tr {
      display: block;
      border: 1px solid var(--border);
      border-radius: 0.75rem;
      margin-bottom: 0.75rem;
      padding: 0.75rem;
      background: var(--surface);
      box-shadow: var(--shadow-sm);
      break-inside: avoid;
    }
    
    tbody td {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 0.5rem 0 !important;
      border: none !important;
      text-align: right;
      border-bottom: 1px solid var(--border-soft);
    }
    
    tbody td:last-child {
      border-bottom: none !important;
    }
    
    tbody td::before {
      content: attr(data-label);
      font-weight: 600;
      color: var(--text-muted);
      text-align: left;
      padding-right: 0.75rem;
      flex-shrink: 0;
      min-width: 80px;
    }
    
    tbody td[data-label=""]::before,
    tbody td:not([data-label])::before {
      display: none;
    }
    
    tbody td:not([data-label]) {
      justify-content: flex-start;
      text-align: left;
    }
  }
}

/* Table header sticky */
.table-responsive thead th {
  position: sticky;
  top: 0;
  background: var(--bg-subtle);
  z-index: 10;
}

/* Dark mode table readability */
@media (prefers-color-scheme: dark) {
  .table-responsive {
    border-color: var(--border-strong);
  }
  
  .table-mobile-stack tbody tr {
    background: var(--surface);
    border-color: var(--border);
  }
  
  .table-mobile-stack tbody td {
    border-bottom-color: var(--border-soft);
  }
}

/* Form card enhancements */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .form-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .form-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile button - full width touch targets */
.btn-mobile-full {
  @media (max-width: 640px) {
    width: 100%;
    justify-content: center;
  }
}

/* Admin sidebar mobile overlay improvement */
#adminSidebarOverlay {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Card modern styling */
.card-modern {
  background: var(--surface);
  border-radius: 1rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.card-modern:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

/* Badge modern */
.badge-modern {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid;
  white-space: nowrap;
}

/* Dark mode form fields readability */
@media (prefers-color-scheme: dark) {
  html .field {
    background-color: var(--field-bg);
    color: var(--field-text);
    border-color: var(--field-border);
  }
  
  html .field::placeholder {
    color: var(--field-placeholder);
  }
}
/* ==========================================================================
   DESKTOP ZOOM STABILITY & LAYOUT CONSISTENCY
   ========================================================================== */

/* Prevent content overflow on zoom */
.admin-layout, body {
    min-width: 0;
    overflow-x: hidden;
}

/* Admin layout: sidebar + main content proportions */
.admin-main {
    display: flex;
    flex: 1;
    min-width: 0;
}

/* Desktop: sidebar fixed width, main content fluid */
@media (min-width: 1024px) {
    .admin-main {
        flex-direction: row;
    }
    .admin-content {
        flex: 1;
        min-width: 0;
    }
}

/* Main content padding for all screen sizes */
.admin-content {
    width: 100%;
}

/* Container max-width consistency across all admin pages */
.max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl, .max-w-2xl {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Table responsive wrapper - full width, no overflow issues */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    background: var(--surface);
    margin: 0 -0.75rem;
    padding: 0 0.75rem;
}

@media (min-width: 640px) {
    .table-responsive {
        margin: 0;
        padding: 0;
    }
}

/* Ensure tables don't shrink content unnaturally */
.table-responsive table {
    width: 100%;
    border-collapse: collapse;
}

/* Card consistency */
.card-modern, .card {
    width: 100%;
    max-width: 100%;
}

/* Form field consistency */
.field {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Button touch targets */
button, .btn-modern, .btn-brand, .btn-navy, .btn-gold {
    min-height: 44px;
    min-width: 44px;
}

/* Mobile: full-width buttons for better touch */
@media (max-width: 640px) {
    .btn-mobile-full,
    .mobile-full-btn {
        width: 100% !important;
        justify-content: center;
    }
    
    /* Mobile: stack action buttons vertically */
    .action-buttons {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .action-buttons .action-btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Mobile: filter bar full width inputs */
    .filter-bar .field {
        min-width: 0;
        flex: 1 1 100%;
    }
    
    /* Mobile: export/print buttons stack */
    .export-buttons {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .export-buttons a,
    .export-buttons button {
        width: 100% !important;
        justify-content: center;
    }
}

/* Tablet: balanced layout */
@media (min-width: 641px) and (max-width: 1023px) {
    .admin-content {
        padding: 1rem !important;
    }
    
    .table-responsive {
        margin: 0 -1rem;
        padding: 0 1rem;
    }
    
    .action-buttons {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .action-buttons .action-btn {
        flex: 1 1 45%;
        justify-content: center;
    }
}

/* Desktop: spacious layout */
@media (min-width: 1024px) {
    .admin-content {
        padding: 1.5rem !important;
    }
    
    .table-responsive {
        margin: 0;
        padding: 0;
    }
    
    .action-buttons {
        flex-direction: row;
        gap: 0.75rem;
    }
}

/* Dark mode: ensure all text is readable */
@media (prefers-color-scheme: dark) {
    .bg-slate-50 {
        background-color: var(--bg-subtle) !important;
    }
    
    .text-slate-900 {
        color: var(--text-strong) !important;
    }
    
    .text-slate-800 {
        color: var(--text-strong) !important;
    }
    
    .text-slate-700 {
        color: var(--text-body) !important;
    }
    
    .text-slate-600 {
        color: var(--text-muted) !important;
    }
    
    .text-slate-500 {
        color: var(--text-muted) !important;
    }
    
    .text-slate-400 {
        color: var(--text-subtle) !important;
    }
    
    .border-slate-200 {
        border-color: var(--border) !important;
    }
    
    .bg-white {
        background-color: var(--surface) !important;
        color: var(--text-strong) !important;
    }
    
    .hover:bg-slate-50:hover {
        background-color: var(--surface-hover) !important;
    }
    
    .shadow-sm {
        box-shadow: var(--shadow-sm) !important;
    }
    
    .shadow-lg {
        box-shadow: var(--shadow-lg) !important;
    }
    
    .shadow-md {
        box-shadow: var(--shadow-md) !important;
    }
}

/* Light mode: ensure proper contrast */
@media (prefers-color-scheme: light) {
    .bg-slate-50 {
        background-color: #f8fafc !important;
    }
    
    .bg-white {
        background-color: #ffffff !important;
    }
}

/* Focus styles for accessibility */
button:focus-visible,
a:focus-visible,
.field:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--gold);
    color: #1e293b;
    padding: 0.5rem 1rem;
    z-index: 9999;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}
/* ==========================================================================
   ZOOM-RESPONSIVE LAYOUT - Admin Views
   Prevents content cutoff/overflow at any browser zoom level
   ========================================================================== */

/* Root: prevent horizontal overflow at any zoom */
html, body {
    overflow-x: hidden;
    min-width: 0;
}

/* All containers must shrink below viewport at high zoom */
.admin-content,
.max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl, .max-w-2xl, .max-w-full {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Flex children must be able to shrink */
.admin-main, .admin-content, .card-modern, .card, .table-responsive {
    min-width: 0 !important;
}

/* ===== TABLES: Never overflow viewport on zoom ===== */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    background: var(--surface);
    margin: 0 calc(-1 * var(--px-default, 0.75rem));
    padding: 0 var(--px-default, 0.75rem);
    max-width: 100vw;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .table-responsive {
        margin: 0;
        padding: 0;
    }
}

/* Table cells: allow wrapping, no fixed widths that cause overflow */
.table-responsive table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    max-width: 100%;
}

.table-responsive th,
.table-responsive td {
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal !important;
    min-width: 0 !important;
}

/* Remove fixed min-widths that break zoom */
.table-responsive table[style*="min-width"],
.table-responsive table[style*="min-w-"] {
    min-width: auto !important;
    width: 100% !important;
}

/* ===== CARDS: Responsive at any zoom ===== */
.card-modern, .card, .card-body-standard, .stat-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Stat cards: flexible layout */
.stat-card {
    flex-wrap: wrap;
    gap: 1rem;
}

.stat-content {
    min-width: 0;
    flex: 1 1 auto;
}

.stat-value {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ===== BUTTONS: Touch-friendly, no overflow ===== */
button, .btn-modern, .btn-brand, .btn-navy, .btn-gold,
.btn-primary, .btn-secondary, .btn-danger, .btn-success {
    min-height: 44px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile: buttons full width */
@media (max-width: 640px) {
    .btn-mobile-full,
    .mobile-full-btn,
    .export-buttons a,
    .export-buttons button,
    .action-buttons .action-btn {
        width: 100% !important;
        justify-content: center;
    }
    
    .action-buttons {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .export-buttons {
        flex-direction: column !important;
        gap: 0.5rem !important;
        flex-wrap: wrap;
    }
}

/* Tablet: buttons wrap nicely */
@media (min-width: 641px) and (max-width: 1023px) {
    .action-buttons {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .action-buttons .action-btn {
        flex: 1 1 45%;
        justify-content: center;
    }
}

/* Desktop: buttons in row */
@media (min-width: 1024px) {
    .action-buttons {
        flex-direction: row;
        gap: 0.75rem;
        flex-wrap: wrap;
    }
}

/* ===== FILTER BAR: Flexible inputs on zoom ===== */
.filter-bar {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    align-items: center !important;
}

.filter-bar .field {
    min-width: 0 !important;
    flex: 1 1 200px !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.filter-bar .filter-select {
    min-width: 0 !important;
    flex: 0 0 auto !important;
    max-width: 100% !important;
}

.filter-bar .filter-reset {
    flex: 0 0 auto !important;
    white-space: nowrap;
}

/* ===== SIDEBAR LINKS: No overflow on zoom ===== */
#adminSidebar nav a,
#adminSidebar .nav-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    box-sizing: border-box;
}

#adminSidebar nav {
    overflow-y: auto;
    max-height: 100%;
}

/* ===== MODAL: Responsive at any zoom ===== */
.modal-overlay {
    overflow-y: auto;
    padding: 1rem;
    box-sizing: border-box;
}

.modal-panel {
    max-width: calc(100vw - 2rem);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .modal-panel {
        max-width: min(640px, calc(100vw - 2rem));
    }
}

/* ===== FORMS: Flexible fields ===== */
.field {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.form-grid-2 {
    grid-template-columns: 1fr;
}

.form-grid-3 {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .form-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .form-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===== HIGH ZOOM LEVELS (150%+) ===== */
@media (min-resolution: 144dpi), (min-width: 320px) {
    /* Safari/iOS zoom detection via resolution */
}

@media (max-width: 480px) {
    /* Extra small: stack everything */
    .admin-content {
        padding: 0.5rem !important;
    }
    
    .table-responsive {
        margin: 0 -0.5rem;
        padding: 0 0.5rem;
    }
    
    .filter-bar .field {
        font-size: 16px !important; /* Prevent iOS zoom on focus */
    }
}

/* ===== PRINT: Safe layout ===== */
@media print {
    .admin-layout, .admin-main, .admin-content {
        overflow-x: visible !important;
        width: 100% !important;
    }
    .table-responsive {
        overflow-x: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}