/* ============================================================
   HRM Yusa — Tema Modern Panel Filament v3
   Di-inject via render hook `panels::styles.after` pada kedua
   panel (app & admin). Aman untuk light & dark mode.
   ============================================================ */

:root {
    --hrm-brand-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #c026d3 125%);
    --hrm-brand-soft: rgb(99 102 241 / 0.08);
    --hrm-brand-shadow: 99 102 241;
}

/* ---------- Dasar: tipografi & transisi halus ---------- */
html.fi-body,
body.fi-body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Scrollbar tipis & modern */
* {
    scrollbar-width: thin;
    scrollbar-color: rgb(148 163 184 / 0.45) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgb(148 163 184 / 0.45);
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: rgb(148 163 184 / 0.7); }

/* ---------- Tombol ---------- */
.fi-btn {
    border-radius: 0.75rem !important;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s ease, filter 0.2s ease, background-color 0.2s ease !important;
}
.fi-btn:active { transform: scale(0.97); }

/* Tombol utama: gradien brand + glow */
.fi-btn-color-primary {
    background-image: var(--hrm-brand-grad) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px -10px rgb(var(--hrm-brand-shadow) / 0.65) !important;
}
.fi-btn-color-primary:hover {
    filter: brightness(1.09) saturate(1.05);
    box-shadow: 0 14px 28px -10px rgb(var(--hrm-brand-shadow) / 0.7) !important;
    transform: translateY(-1px);
}

.fi-icon-btn { border-radius: 0.7rem !important; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.fi-icon-btn:hover { transform: translateY(-1px); }

/* ---------- Input & form ---------- */
.fi-input-wrp {
    border-radius: 0.75rem !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.fi-input-wrp:focus-within {
    box-shadow: 0 0 0 4px rgb(var(--hrm-brand-shadow) / 0.12) !important;
}
.fi-fo-field-wrp > .fi-fo-field-wrp-label *,
.fi-fo-field-wrp-label-label { font-weight: 600; }
.fi-checkbox-input { border-radius: 0.4rem !important; }

/* ---------- Kartu / Section / Widget dashboard ---------- */
.fi-section {
    border-radius: 1rem !important;
    transition: box-shadow 0.3s ease;
}
.fi-wi-widget {
    border-radius: 1.25rem !important;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.fi-wi-widget:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -18px rgb(var(--hrm-brand-shadow) / 0.28) !important;
}

/* ---------- Tabel ---------- */
.fi-ta-ctn { border-radius: 1rem !important; }
.fi-ta-header-cell-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.75;
}
.fi-ta-content tbody tr { transition: background-color 0.15s ease; }

/* ---------- Sidebar ---------- */
.fi-sidebar-item-button {
    border-radius: 0.7rem !important;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.25s ease,
        background-image 0.25s ease !important;
}
/* Item aktif: pil gradien brand */
.fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-button {
    background-image: var(--hrm-brand-grad) !important;
    background-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 10px 20px -10px rgb(var(--hrm-brand-shadow) / 0.7);
}
.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-icon { color: #fff !important; }

/* PENTING: label item aktif punya utility warnanya sendiri (text-primary-600 /
   dark:text-primary-400) yang tidak mewarisi warna tombol — tanpa aturan ini
   teks tampil gelap di atas gradien gelap sehingga tidak terlihat. */
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-label {
    color: #fff !important;
}

/* Titik indikator item bertingkat (dalam grup terbuka): putih agar kontras
   di atas pil gradien; garis konektor di dalam pil disembunyikan. */
.fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border > div:last-child {
    background-color: #fff !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border > div:not(:last-child) {
    display: none;
}

/* Hover item biasa: rona brand lembut */
.fi-sidebar-item:not(.fi-active):hover .fi-sidebar-item-button {
    background-color: var(--hrm-brand-soft) !important;
}

/* ---------- Topbar: efek kaca (mode terang) ---------- */
html:not(.dark) .fi-topbar {
    background-color: rgb(255 255 255 / 0.8) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
}
.fi-global-search .fi-input-wrp { border-radius: 999px !important; }

/* ---------- Halaman simple (login, reset password) ---------- */
.fi-simple-layout { position: relative; }
html:not(.dark) .fi-simple-layout {
    background:
        radial-gradient(620px 340px at 10% -10%, rgb(99 102 241 / 0.16), transparent 62%),
        radial-gradient(540px 320px at 102% 14%, rgb(217 70 239 / 0.12), transparent 58%),
        radial-gradient(520px 360px at 50% 118%, rgb(124 58 237 / 0.13), transparent 60%),
        #f8fafc;
}
/* Kartu login/reset mengambang */
.fi-simple-main-ctn section {
    border-radius: 1.5rem !important;
    transition: box-shadow 0.3s ease;
}
html:not(.dark) .fi-simple-main-ctn section {
    box-shadow: 0 30px 70px -28px rgb(79 70 229 / 0.35) !important;
}
.fi-simple-header .fi-logo img,
.fi-simple-header img { border-radius: 0.75rem; }

/* ---------- Dropdown / modal / notifikasi ---------- */
.fi-modal-window,
.fi-dropdown-panel,
.fi-ac-panel { border-radius: 1.1rem !important; overflow: hidden; }

/* ---------- Mode gelap: bayangan lembut saja ---------- */
html.dark .fi-section,
html.dark .fi-ta-ctn { box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); }

/* ---------- Mobile: cegah zoom otomatis iOS & hasilkan target sentuh nyaman ---------- */
@media (max-width: 640px) {
    .fi-input,
    .fi-input-wrp input,
    .fi-input-wrp select {
        font-size: 16px !important;
    }
    .fi-btn { min-height: 44px; }
    .fi-sidebar-item-button { min-height: 44px; }
}

/* ---------- Hormati preferensi reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .fi-btn,
    .fi-icon-btn,
    .fi-wi-widget,
    .fi-sidebar-item-button,
    .fi-section { transition: none !important; }
    .fi-btn-color-primary:hover,
    .fi-icon-btn:hover { transform: none; }
}