/* Tema Flux (Ungu-Biru, Dark) — 2026-08-12, dikonfirmasi eksplisit pemilik
   vault, restyle meniru referensi "Flux Dashboard" (dark-mode, gradien
   ungu->biru, kartu rounded-2xl, sidebar aksen kiri, badge pill).

   Hand-written CSS MURNI (BUKAN Tailwind utility class) — hosting produksi
   TERBUKTI tidak bisa compile class Tailwind baru yang ditulis di Blade
   (bug nyata modul Cyber Security, 2026-08-11: "class Tailwind custom
   tidak ter-compile"). Semua override di sini pakai CSS biasa menyasar
   class asli Filament v4 (dicek langsung dari vendor/filament/*, BUKAN
   tebakan): fi-section, fi-sidebar-item, fi-badge, fi-btn, fi-avatar,
   fi-wi-stats-overview-stat, fi-topbar, fi-main, fi-body, fi-modal-window.

   File ini CUMA dimuat kalau preset 'flux-ungu-biru' aktif (lihat
   App\Services\Tampilan::pakaiGayaFlux() + render hook di
   App\Providers\AppServiceProvider) — pilih preset lain di Pengaturan
   Tampilan utk kembali ke tampilan Filament standar, reversibel penuh. */

:root {
  --flux-violet: #7c3aed;
  --flux-violet-dark: #6d28d9;
  --flux-blue: #3b82f6;
  --flux-gradient: linear-gradient(135deg, var(--flux-violet) 0%, var(--flux-blue) 100%);
}

/* ===== Latar dasar — near-black spt referensi (bukan abu-abu default Filament) ===== */
html.dark .fi-body {
  background-color: #09090b;
}

html.dark .fi-sidebar {
  background-color: #09090b;
  border-color: rgb(255 255 255 / 0.06);
}

/* ===== Kartu / Section — rounded-2xl + border tipis + bayangan lembut ===== */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-modal-window,
.fi-dropdown-panel {
  border-radius: 1rem !important;
}

html.dark .fi-section,
html.dark .fi-wi-stats-overview-stat,
html.dark .fi-ta-ctn {
  background-color: #111114;
  border-color: rgb(255 255 255 / 0.08);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.4);
}

html.dark .fi-section:hover,
html.dark .fi-wi-stats-overview-stat:hover {
  border-color: rgb(124 58 237 / 0.35);
}

/* ===== Sidebar — item aktif dapat aksen gradien di kiri + bg lembut ===== */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
  position: relative;
  border-radius: 0.625rem;
  background: linear-gradient(90deg, rgb(124 58 237 / 0.18), rgb(59 130 246 / 0.05) 80%);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
  content: '';
  position: absolute;
  left: -0.75rem;
  top: 0.375rem;
  bottom: 0.375rem;
  width: 3px;
  border-radius: 9999px;
  background: var(--flux-gradient);
}

.fi-sidebar-item-btn {
  border-radius: 0.625rem;
}

/* ===== Badge — bentuk pill penuh (referensi pakai badge bulat, bukan rounded-md) ===== */
.fi-badge {
  border-radius: 9999px !important;
}

/* ===== Tombol — rounded lebih besar, tombol warna primary dapat gradien ungu->biru ===== */
.fi-btn {
  border-radius: 0.75rem !important;
}

.fi-btn.fi-color-primary {
  background: var(--flux-gradient) !important;
  border-color: transparent !important;
}

.fi-btn.fi-color-primary:not(:disabled):hover {
  filter: brightness(1.08);
}

.fi-icon-btn {
  border-radius: 9999px;
}

/* ===== Avatar — ring gradien tipis, kesan "identitas berwarna" spt referensi ===== */
.fi-avatar {
  border-radius: 9999px;
  box-shadow: 0 0 0 2px rgb(124 58 237 / 0.35);
}

/* ===== Topbar — sedikit transparan + blur, kesan mengambang di atas konten ===== */
html.dark .fi-topbar {
  background-color: rgb(9 9 11 / 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-color: rgb(255 255 255 / 0.06);
}

/* ===== Widget stat — angka lebih tegas, ikon dapat aksen ungu ===== */
.fi-wi-stats-overview-stat-value {
  font-weight: 700;
}

/* ===== Hero Greeting (App\Filament\Widgets\FluxHeroGreeting) ===== */
.flux-hero {
  border-radius: 1.25rem;
  padding: 1.75rem 2rem;
  background: var(--flux-gradient);
  background-image:
    radial-gradient(circle at 15% 20%, rgb(255 255 255 / 0.10) 0%, transparent 40%),
    radial-gradient(circle at 85% 80%, rgb(255 255 255 / 0.08) 0%, transparent 45%),
    var(--flux-gradient);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.flux-hero-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.flux-hero-subtitle {
  font-size: 0.875rem;
  color: rgb(255 255 255 / 0.85);
  margin: 0;
}

.flux-hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.flux-hero-stat {
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.15);
  border-radius: 0.875rem;
  padding: 0.875rem 1rem;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.flux-hero-stat-label {
  font-size: 0.75rem;
  color: rgb(255 255 255 / 0.75);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.25rem;
}

.flux-hero-stat-value {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
}

@media (prefers-reduced-motion: no-preference) {
  .fi-section,
  .fi-wi-stats-overview-stat {
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }
}