/* ==========================================================================
   ui-modern.css — lapisan polesan tampilan global STR (Security Tracking Report)
   Dimuat SETELAH Bootstrap. Berisi: animasi lembut, transisi interaksi, dan
   penyempurnaan responsive. Tidak mengubah struktur/logika halaman apapun.

   Catatan teknis penting:
   - Semua animasi masuk memakai fill-mode "backwards" (bukan "both"), sehingga
     setelah animasi selesai TIDAK ada transform yang tertinggal. Ini penting
     agar modal Bootstrap yang berada di dalam kartu/tabel tetap berposisi benar
     (elemen ber-transform akan memutus position:fixed milik anak-anaknya).
   - Animasi tabel hanya memakai opacity (tanpa transform) agar kolom sticky
     pada tabel absensi tetap berfungsi.
   - Dihormati pengaturan "kurangi gerakan" milik perangkat pengguna.
   ========================================================================== */

:root {
    --ui-ease: cubic-bezier(.22, .61, .36, 1);
    --ui-dur: .45s;
    --ui-brand: #017e84;
}

@keyframes uiFadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes uiFadeUp   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes uiFadeDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes uiScaleIn  { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; animation: uiFadeIn .35s ease backwards; }

/* ---------- Kartu & panel: muncul naik perlahan ---------- */
.card, .summary-card, .stat-card, .stat-item, .stat-pill, .card-menu,
.absen-box, .absen-card, .team-report-card, .profile-float-card, .modern-card,
.settings-card, .struktur-card, .duty-card, .org-card, .history-card {
    animation: uiFadeUp var(--ui-dur) var(--ui-ease) backwards;
}

/* Jeda bertahap antar kolom agar muncul berurutan, bukan serentak */
.row > :nth-child(2) :is(.card, .stat-card, .stat-pill, .stat-item, .card-menu, .org-card, .duty-card) { animation-delay: .07s; }
.row > :nth-child(3) :is(.card, .stat-card, .stat-pill, .stat-item, .card-menu, .org-card, .duty-card) { animation-delay: .14s; }
.row > :nth-child(4) :is(.card, .stat-card, .stat-pill, .stat-item, .card-menu, .org-card, .duty-card) { animation-delay: .21s; }
.row > :nth-child(5) :is(.card, .stat-card, .stat-pill, .stat-item, .card-menu, .org-card, .duty-card) { animation-delay: .28s; }
.row > :nth-child(n+6) :is(.card, .stat-card, .stat-pill, .stat-item, .card-menu, .org-card, .duty-card) { animation-delay: .32s; }

/* Efek angkat halus saat disentuh/di-hover */
.stat-card, .stat-pill, .stat-item, .org-card, .duty-card, .card-menu {
    transition: transform .22s var(--ui-ease), box-shadow .25s ease;
}
.stat-card:hover, .stat-pill:hover, .stat-item:hover, .org-card:hover, .duty-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 24, 40, .10);
}

/* ---------- Tabel: baris muncul memudar berurutan (opacity saja) ---------- */
.table tbody tr, table.abs-table tbody tr { animation: uiFadeIn .4s ease backwards; }
.table tbody tr:nth-child(1), table.abs-table tbody tr:nth-child(1) { animation-delay: .02s; }
.table tbody tr:nth-child(2), table.abs-table tbody tr:nth-child(2) { animation-delay: .06s; }
.table tbody tr:nth-child(3), table.abs-table tbody tr:nth-child(3) { animation-delay: .10s; }
.table tbody tr:nth-child(4), table.abs-table tbody tr:nth-child(4) { animation-delay: .14s; }
.table tbody tr:nth-child(5), table.abs-table tbody tr:nth-child(5) { animation-delay: .18s; }
.table tbody tr:nth-child(6), table.abs-table tbody tr:nth-child(6) { animation-delay: .22s; }
.table tbody tr:nth-child(7), table.abs-table tbody tr:nth-child(7) { animation-delay: .26s; }
.table tbody tr:nth-child(n+8), table.abs-table tbody tr:nth-child(n+8) { animation-delay: .30s; }
.table > tbody > tr { transition: background-color .2s ease; }

/* ---------- Tombol & form ---------- */
.btn {
    transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease,
                border-color .2s ease, color .2s ease, opacity .2s ease;
}
.btn:hover:not(:disabled):not(.disabled) { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(16, 24, 40, .12); }
.btn:active:not(:disabled):not(.disabled) { transform: translateY(0) scale(.98); box-shadow: none; }
.btn-close:hover { transform: none; box-shadow: none; }

.form-control, .form-select { transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.form-control:focus, .form-select:focus {
    border-color: var(--ui-brand);
    box-shadow: 0 0 0 .2rem rgba(1, 126, 132, .15);
}

/* ---------- Alert, dropdown, modal ---------- */
.alert { animation: uiFadeDown .4s var(--ui-ease) backwards; border: 0; box-shadow: 0 2px 8px rgba(16, 24, 40, .06); }
.dropdown-menu.show { animation: uiFadeIn .15s ease; }   /* opacity saja: Popper memakai transform inline */

.modal.fade .modal-dialog {
    transform: translateY(18px) scale(.97);
    transition: transform .3s var(--ui-ease), opacity .3s ease;
}
.modal.show .modal-dialog { transform: none; }
.modal-backdrop.show { opacity: .45; }
.modal-content { border: 0; border-radius: 14px; box-shadow: 0 20px 50px rgba(16, 24, 40, .25); overflow: hidden; }

/* ---------- Komponen khas aplikasi ---------- */
.quick-menu-item { animation: uiFadeUp .5s var(--ui-ease) backwards; }
.quick-menu-item:nth-child(2) { animation-delay: .06s; }
.quick-menu-item:nth-child(3) { animation-delay: .12s; }
.quick-menu-item:nth-child(4) { animation-delay: .18s; }
.quick-menu-item .icon-circle { transition: transform .22s var(--ui-ease), box-shadow .25s ease; }
.quick-menu-item:hover .icon-circle { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 16px rgba(16, 24, 40, .18); }
.quick-menu-item:active .icon-circle { transform: scale(.95); }

.btn-absen { transition: transform .18s var(--ui-ease), box-shadow .22s ease, filter .2s ease; }
.btn-absen:hover:not(:disabled) { filter: brightness(1.05); }

.bottom-nav a { transition: color .2s ease, transform .15s ease; }
.bottom-nav a:active { transform: scale(.92); }
.bottom-nav a.active i { animation: uiScaleIn .3s var(--ui-ease); }

.abs-wrap, .sheet-wrapper { animation: uiFadeIn .5s ease backwards; }

/* ---------- Scrollbar tabel yang lebih halus ---------- */
.table-responsive, .abs-wrap, .sheet-wrapper { scrollbar-width: thin; scrollbar-color: #c3ccd6 transparent; }
.table-responsive::-webkit-scrollbar, .abs-wrap::-webkit-scrollbar, .sheet-wrapper::-webkit-scrollbar { height: 8px; width: 8px; }
.table-responsive::-webkit-scrollbar-thumb, .abs-wrap::-webkit-scrollbar-thumb, .sheet-wrapper::-webkit-scrollbar-thumb {
    background: #c3ccd6; border-radius: 8px;
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
    .main-content { padding: 12px !important; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }
    .btn { min-height: 38px; }                       /* target sentuh lebih nyaman */
    .btn-sm { min-height: 34px; }
    .form-control, .form-select { font-size: 16px; } /* mencegah auto-zoom pada iOS */
    .form-control-sm, .form-select-sm { font-size: 16px; }
    .card-body { padding: .9rem; }
    .modal-dialog { margin: .75rem; }
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .alert { font-size: .9rem; }
}
@media (min-width: 1400px) {
    .container { max-width: 1280px; }
}

/* ---------- Hormati preferensi "kurangi gerakan" ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}