/* ============================================================
   ZEN Training Admin — tema visual tambahan di atas Filament.
   File ini murni CSS (tanpa build step/Vite/npm) supaya bisa
   langsung dipakai di server tanpa proses compile apa pun —
   cukup taruh di public/css/zen-theme.css dan di-load lewat
   renderHook() di AdminPanelProvider.

   Pendekatan: selector di sini SENGAJA dibuat lembut & aditif
   (tidak pakai !important berlebihan, tidak override struktur
   layout) supaya kalau ada 1-2 class Filament yang beda dari
   yang diperkirakan, tidak ada yang rusak — cuma efek visual itu
   saja yang tidak muncul. Kalau ada bagian yang keliatan aneh
   setelah dipasang, kirim screenshot-nya, saya sesuaikan lagi.
   ============================================================ */

:root {
    --zen-gold-from: #F4B942;
    --zen-gold-to:   #FFD266;
    --zen-green-from:#7CCB9B;
    --zen-green-to:  #4CAF8A;
    --zen-blue-from: #67C7D9;
    --zen-blue-to:   #3BA7BB;
    --zen-purple-from:#A27CFF;
    --zen-purple-to: #7B61FF;
    --zen-orange-from:#FFB26B;
    --zen-orange-to: #FF8A42;
    --zen-emerald-from:#00E5B3;
    --zen-emerald-to:#00B88A;
}

/* ── Entrance animation untuk kartu-kartu widget (stat cards, dsb) ── */
@keyframes zen-fade-in-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fi-wi-stats-overview-stat,
.fi-section,
.fi-ta-ctn {
    animation: zen-fade-in-up .45s ease both;
}

/* Efek "stagger" ringan supaya kartu muncul berurutan, bukan bersamaan */
.fi-wi-stats-overview-stats > .fi-wi-stats-overview-stat:nth-child(1) { animation-delay: 0ms; }
.fi-wi-stats-overview-stats > .fi-wi-stats-overview-stat:nth-child(2) { animation-delay: 60ms; }
.fi-wi-stats-overview-stats > .fi-wi-stats-overview-stat:nth-child(3) { animation-delay: 120ms; }
.fi-wi-stats-overview-stats > .fi-wi-stats-overview-stat:nth-child(4) { animation-delay: 180ms; }

/* ── Stat card: hover lift halus + border glow tipis ── */
.fi-wi-stats-overview-stat {
    transition: transform .2s ease, box-shadow .2s ease;
}
.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -8px rgba(244, 185, 66, 0.25);
}

/* ── Ikon di dalam stat card diberi latar gradient bulat ── */
.fi-wi-stats-overview-stat-icon {
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--zen-green-from), var(--zen-green-to));
    padding: .5rem;
}

/* ── Badge sukses/"Excellent" — pulse-glow halus ── */
@keyframes zen-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 138, 0.35); }
    50%      { box-shadow: 0 0 0 6px rgba(76, 175, 138, 0); }
}
.fi-badge.fi-color-success {
    animation: zen-pulse-glow 2.4s ease-in-out infinite;
}

/* ── Sidebar: item aktif diberi aksen gradient di sisi kiri ── */
.fi-sidebar-nav-item.fi-active .fi-sidebar-item-button {
    position: relative;
    border-radius: .5rem;
}
.fi-sidebar-nav-item.fi-active .fi-sidebar-item-button::before {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: 15%;
    bottom: 15%;
    width: 3px;
    border-radius: 9999px;
    background: linear-gradient(180deg, var(--zen-gold-from), var(--zen-gold-to));
}

/* ── Sidebar header: aksen background gradient zen yang lembut ── */
.fi-sidebar-header {
    position: relative;
    overflow: hidden;
}
.fi-sidebar-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 80% at 15% 0%, rgba(244, 185, 66, 0.10), transparent 60%),
        radial-gradient(60% 80% at 85% 100%, rgba(76, 175, 138, 0.10), transparent 60%);
    pointer-events: none;
}

/* ── Topbar: garis aksen gradient tipis di bagian bawah ── */
.fi-topbar > nav {
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--zen-gold-from), var(--zen-green-to), var(--zen-blue-to)) 1;
}

/* ── Tombol utama: transisi halus saat hover/klik ── */
.fi-btn {
    transition: transform .15s ease, box-shadow .15s ease;
}
.fi-btn:active {
    transform: scale(0.97);
}

/* ── Panel/section: transisi halus saat filter/tabel berubah (Livewire) ── */
.fi-section, .fi-ta-ctn {
    transition: opacity .2s ease;
}

/* Hormati preferensi pengguna yang mematikan animasi */
@media (prefers-reduced-motion: reduce) {
    .fi-wi-stats-overview-stat,
    .fi-section,
    .fi-ta-ctn,
    .fi-badge.fi-color-success {
        animation: none !important;
    }
}

/* ============================================================
   §17.59 — Halaman Login "ZEN Connect" (sesuai mockup branding
   yg diberikan user). Scoped KHUSUS ke .fi-simple-layout (login/
   reset password/verifikasi email) — TIDAK menyentuh tampilan
   panel admin sesudah login sama sekali. Belum ada foto resort
   asli yg diupload, jadi background sementara pakai gradient
   dusk/teal (tinggal ganti ke foto asli kalau ada filenya —
   ganti properti `background` di `.fi-simple-layout` jadi
   `background-image: url('/images/....jpg')`).
   ============================================================ */

.fi-simple-layout {
    position: relative;
    background:
        linear-gradient(180deg, rgba(8, 26, 30, 0.55), rgba(8, 22, 26, 0.78)),
        linear-gradient(160deg, #0f2f36 0%, #1c4a4a 35%, #2f6157 60%, #d98a3d 100%);
    background-attachment: fixed;
}

.zen-login-brand {
    text-align: center;
    color: #eafaf5;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.zen-login-logo {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.2;
}
.zen-login-logo span {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: .3em;
    opacity: .9;
}
.zen-login-tagline {
    margin-top: .5rem;
    font-size: .8rem;
    letter-spacing: .05em;
    opacity: .85;
}

/* Kartu login: dark/teal semi-transparan + blur, sesuai mockup */
.fi-simple-main {
    background: rgba(13, 34, 38, 0.82) !important;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.fi-simple-header-heading {
    color: #f4fbf9 !important;
}
.fi-simple-header-subheading {
    color: rgba(234, 250, 245, 0.75) !important;
}
.fi-simple-main label {
    color: rgba(234, 250, 245, 0.9) !important;
}
.fi-simple-main .fi-input-wrp {
    background: rgba(255, 255, 255, 0.07) !important;
    box-shadow: none !important;
}
.fi-simple-main input {
    color: #f4fbf9 !important;
}
.fi-simple-main input::placeholder {
    color: rgba(234, 250, 245, 0.4) !important;
}
.fi-simple-main svg {
    color: rgba(234, 250, 245, 0.6) !important;
}
.fi-simple-main .fi-btn {
    background: linear-gradient(135deg, #6fae94, #4c8a72) !important;
    border-color: transparent !important;
}

.zen-login-footer-wrap {
    text-align: center;
    margin-top: 2rem;
    color: rgba(234, 250, 245, 0.85);
}
.zen-login-footer {
    font-style: italic;
    font-size: .9rem;
}
.zen-login-version {
    margin-top: .35rem;
    font-size: .7rem;
    opacity: .6;
}