/* ==========================================================================
   UI polish bersama — form, popup (modal), tombol, SweetAlert.
   Dimuat setelah site.css. Sengaja memakai selector spesifik agar menyeragamkan
   .soft-input / modal yang didefinisikan berbeda-beda di tiap halaman.
   ========================================================================== */

/* ---------- Fokus & interaksi dasar ---------- */
button, [role="button"], select, label[for], summary { cursor: pointer; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: .55; }
:where(a, button, [tabindex]):focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: #6366f1; }
html { -webkit-tap-highlight-color: transparent; }

/* ---------- Kolom input (.soft-input) ---------- */
:where(.soft-input) { padding-left: 1rem; padding-right: 1rem; font-size: .875rem; font-weight: 600; }

input.soft-input, select.soft-input, textarea.soft-input {
    width: 100%;
    min-height: 2.9rem;
    padding-top: .7rem; padding-bottom: .7rem;
    background-color: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: .875rem;
    color: #1e293b;
    line-height: 1.4;
    outline: none;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
input.soft-input:hover, select.soft-input:hover, textarea.soft-input:hover { border-color: #cbd5e1; }
input.soft-input:focus, select.soft-input:focus, textarea.soft-input:focus {
    background-color: #fff;
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .14);
}
.soft-input::placeholder { color: #94a3b8; font-weight: 500; }
textarea.soft-input { min-height: 5.5rem; line-height: 1.55; resize: vertical; }
textarea.soft-input.resize-none { resize: none; }

.dark input.soft-input, .dark select.soft-input, .dark textarea.soft-input {
    background-color: rgba(15, 23, 42, .55); border-color: #334155; color: #f1f5f9; color-scheme: dark;
}
.dark input.soft-input:hover, .dark select.soft-input:hover, .dark textarea.soft-input:hover { border-color: #475569; }
.dark input.soft-input:focus, .dark select.soft-input:focus, .dark textarea.soft-input:focus {
    background-color: #0f172a; border-color: #818cf8; box-shadow: 0 0 0 4px rgba(129, 140, 248, .18);
}
.dark .soft-input::placeholder { color: #64748b; }

/* Select: panah sendiri (kecuali yang sudah memakai ikon manual via appearance-none) */
select.soft-input:not(.appearance-none) {
    -webkit-appearance: none; appearance: none; 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='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .85rem center; background-size: 1.1rem;
}

/* Input tanggal/waktu & file */
input.soft-input[type="date"], input.soft-input[type="time"], input.soft-input[type="datetime-local"], input.soft-input[type="month"] { cursor: text; }
input.soft-input[type="file"] { padding: .45rem .6rem; cursor: pointer; }
input.soft-input[type="file"]::file-selector-button {
    margin-right: .75rem; padding: .45rem .9rem; border: 0; border-radius: .6rem;
    background: #eef2ff; color: #4f46e5; font-weight: 800; font-size: .75rem; cursor: pointer; transition: background .15s;
}
input.soft-input[type="file"]::file-selector-button:hover { background: #e0e7ff; }
.dark input.soft-input[type="file"]::file-selector-button { background: rgba(99, 102, 241, .2); color: #a5b4fc; }

/* ---------- Label ---------- */
label[class*="tracking-widest"] { display: block; font-size: .6875rem; line-height: 1.2; }
label[class*="tracking-widest"].flex, label[class*="tracking-widest"].inline-flex { display: flex; }

/* ---------- Popup / modal ---------- */
.fixed.inset-0[class*="bg-slate-900"] {
    background-color: rgba(15, 23, 42, .55);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    overscroll-behavior: contain;
}
.fixed.inset-0[class*="bg-slate-900"] > div:first-of-type {
    border-radius: 1.75rem;
    box-shadow: 0 30px 70px -20px rgba(15, 23, 42, .45), 0 0 0 1px rgba(148, 163, 184, .18);
    animation: ui-modal-in .22s cubic-bezier(.2, .8, .3, 1) both;
    scrollbar-width: thin;
}
.fixed.inset-0[class*="bg-slate-900"] .modal-panel { border-color: transparent; }
@keyframes ui-modal-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* Spasi antar kolom di dalam form popup */
.fixed.inset-0[class*="bg-slate-900"] form :where(.space-y-4) > * + * { margin-top: 1.1rem; }

/* Tombol aksi di popup */
.fixed.inset-0[class*="bg-slate-900"] form button[type="submit"],
.fixed.inset-0[class*="bg-slate-900"] form button[type="button"] { transition: transform .12s, box-shadow .15s, background-color .15s, filter .15s; }
.fixed.inset-0[class*="bg-slate-900"] form button[type="submit"]:hover { filter: brightness(1.05); }
.fixed.inset-0[class*="bg-slate-900"] form button:active { transform: scale(.97); }

/* HP: popup jadi bottom sheet */
@media (max-width: 640px) {
    .fixed.inset-0[class*="bg-slate-900"][class*="items-center"] { align-items: flex-end; padding: 0; }
    .fixed.inset-0[class*="bg-slate-900"] > div:first-of-type {
        max-width: 100%; width: 100%; max-height: 92vh; overflow-y: auto;
        border-radius: 1.5rem 1.5rem 0 0; animation-name: ui-sheet-in;
    }
}
@media (max-width: 640px) {
    .fixed.inset-0[class*="bg-slate-900"] > div:first-of-type.p-8 { padding: 1.25rem; }
    .fixed.inset-0[class*="bg-slate-900"] > div:first-of-type h3.text-2xl { font-size: 1.2rem; line-height: 1.5rem; }
}
@keyframes ui-sheet-in { from { transform: translateY(100%); } to { transform: none; } }

/* ---------- SweetAlert2 ---------- */
.swal2-popup { border-radius: 1.5rem !important; font-family: inherit !important; padding: 1.75rem 1.5rem !important; }
.swal2-title { font-size: 1.2rem !important; font-weight: 800 !important; }
.swal2-html-container { font-size: .9rem !important; }
.swal2-input, .swal2-textarea, .swal2-select {
    border: 1.5px solid #e2e8f0 !important; border-radius: .875rem !important; box-shadow: none !important;
    font-size: .9rem !important; font-weight: 600 !important; margin: 1rem auto 0 !important; width: 100% !important; max-width: 100% !important;
}
.swal2-input:focus, .swal2-textarea:focus, .swal2-select:focus { border-color: #6366f1 !important; box-shadow: 0 0 0 4px rgba(99, 102, 241, .14) !important; }
.swal2-styled { border-radius: .875rem !important; font-weight: 700 !important; font-size: .875rem !important; padding: .7rem 1.4rem !important; }
.swal2-styled.swal2-confirm { background: #4f46e5 !important; }
.swal2-styled:focus { box-shadow: 0 0 0 4px rgba(99, 102, 241, .25) !important; }
.dark .swal2-popup { background: #1e293b !important; color: #e2e8f0 !important; }
.dark .swal2-title, .dark .swal2-html-container { color: #f1f5f9 !important; }
.dark .swal2-input, .dark .swal2-textarea, .dark .swal2-select { background: #0f172a !important; border-color: #334155 !important; color: #f1f5f9 !important; }

@media (prefers-reduced-motion: reduce) {
    .fixed.inset-0[class*="bg-slate-900"] > div:first-of-type { animation: none; }
}