/* UI UX Pro Max - Minimalism + Soft UI */

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

html, body { scroll-behavior: smooth; }

body { font-feature-settings: "cv02","cv03","cv04","cv11"; }

/* Focus state untuk aksesibilitas */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #005BAA;
    outline-offset: 2px;
}

/* Scrollbar halus */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #F5F7FA; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Animasi masuk konten */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeInUp 0.25s ease-out both; }

/* Hormati preferensi reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* Badge status */
.badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.125rem 0.5rem; border-radius: 9999px;
    font-size: 0.75rem; font-weight: 500; line-height: 1.25rem;
    white-space: nowrap;
}
.badge-hadir    { background: rgba(140,198,63,0.12); color: #5a8a1f; }
.badge-terlambat{ background: rgba(255,213,0,0.18);  color: #8a6d00; }
.badge-izin     { background: rgba(0,91,170,0.10);   color: #005BAA; }
.badge-cuti     { background: rgba(0,91,170,0.10);   color: #005BAA; }
.badge-sakit    { background: rgba(227,27,35,0.10);  color: #E31B23; }
.badge-alpha    { background: rgba(227,27,35,0.10);  color: #E31B23; }
.badge-pending  { background: rgba(255,213,0,0.18);  color: #8a6d00; }
.badge-approved { background: rgba(140,198,63,0.12); color: #5a8a1f; }
.badge-rejected { background: rgba(227,27,35,0.10);  color: #E31B23; }

/* Tabel responsif */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
table.data-table th {
    text-align: left; padding: 0.75rem 1rem;
    background: #F5F7FA; color: #64748b;
    font-weight: 600; font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 0.025em;
    white-space: nowrap;
}
table.data-table td { padding: 0.75rem 1rem; border-top: 1px solid #e2e8f0; vertical-align: middle; }
table.data-table tbody tr:hover { background: rgba(0,91,170,0.02); }

/* Tombol */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.5rem 1rem; border-radius: 0.5rem;
    font-size: 0.875rem; font-weight: 500;
    transition: all 0.15s ease; cursor: pointer;
    border: 1px solid transparent; white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: #005BAA; color: #fff; }
.btn-primary:hover:not(:disabled) { background: #004a8a; }
.btn-danger { background: #E31B23; color: #fff; }
.btn-danger:hover:not(:disabled) { background: #c4161d; }
.btn-success { background: #8CC63F; color: #fff; }
.btn-success:hover:not(:disabled) { background: #7ab332; }
.btn-ghost { background: transparent; color: #2C3E50; border-color: #e2e8f0; }
.btn-ghost:hover:not(:disabled) { background: #F5F7FA; }

/* Card */
.card {
    background: #fff; border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,91,170,0.06), 0 1px 3px rgba(0,0,0,0.04);
}
.card-pad { padding: 1.25rem; }

/* Form */
.form-label { display: block; font-size: 0.875rem; font-weight: 500; color: #2C3E50; margin-bottom: 0.375rem; }
.form-input {
    width: 100%; padding: 0.5rem 0.75rem;
    border: 1px solid #cbd5e1; border-radius: 0.5rem;
    font-size: 0.875rem; color: #2C3E50; background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus { outline: none; border-color: #005BAA; box-shadow: 0 0 0 3px rgba(0,91,170,0.12); }
.form-input.error { border-color: #E31B23; }
.form-error { font-size: 0.75rem; color: #E31B23; margin-top: 0.25rem; }