/*
 * Tema "Pawon Yang Kung v2 Glass" untuk Filament backoffice.
 * Sumber: Admin Pawon Yang Kung v2 Glass.dc.html (Claude Design).
 * Skin CSS di atas kelas fi-* Filament v3 — banyak !important karena
 * menimpa utility Tailwind bawaan panel.
 */

:root {
  --pyk-cream: #eee6d9;
  --pyk-ink: #1c1917;
  --pyk-brown: rgba(26, 17, 11, 0.93);
  --pyk-gold: #c9962c;
  --pyk-gold-soft: rgba(201, 150, 44, 0.34);
  --pyk-red: #b91c1c;
  --pyk-muted: #8a7f72;
  --pyk-card: rgba(255, 255, 255, 0.8);
  --pyk-card-border: rgba(255, 255, 255, 0.75);
}

/* ===== Latar glass hangat ===== */
body.fi-body {
  background:
    radial-gradient(1100px 620px at 10% -12%, rgba(232, 181, 74, 0.34), transparent 62%),
    radial-gradient(900px 520px at 92% 4%, rgba(185, 28, 28, 0.13), transparent 60%),
    radial-gradient(900px 700px at 58% 118%, rgba(102, 66, 24, 0.2), transparent 62%),
    repeating-linear-gradient(135deg, rgba(102, 66, 24, 0.03) 0 2px, transparent 2px 16px),
    var(--pyk-cream) !important;
  background-attachment: fixed !important;
  color: var(--pyk-ink);
}

/* Heading pakai Plus Jakarta Sans */
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-wi-stats-overview-stat-value,
.fi-ta-header-cell-label {
  font-family: "Plus Jakarta Sans", Inter, sans-serif !important;
}

/* ===== Sidebar: cokelat gelap kaca beraksen emas ===== */
.fi-sidebar {
  background: var(--pyk-brown) !important;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  /* garis emas hanya di bagian nav — strip logo putih menyatu dengan topbar */
  border-right: none !important;
}

.fi-sidebar-nav {
  border-right: 1px solid var(--pyk-gold-soft);
}

/* Strip logo menyatu dengan topbar putih; hanya nav di bawahnya yang cokelat.
   Solid (bukan translusen) karena berada di atas sidebar cokelat. */
.fi-sidebar-header {
  background: #fbf8f2 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: none !important;
}

.fi-sidebar-header .fi-logo,
.fi-sidebar-header span {
  color: #241811 !important;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
}

.fi-sidebar-group-label {
  color: #8e7b62 !important;
  font-size: 10px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase;
}

.fi-sidebar-group > .fi-sidebar-group-button .fi-sidebar-group-label,
.fi-sidebar-group-collapse-button {
  color: #8e7b62 !important;
}

.fi-sidebar-item-button {
  border-radius: 10px !important;
}

.fi-sidebar-item-button .fi-sidebar-item-label {
  color: #c0ae95 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}

.fi-sidebar-item-button .fi-sidebar-item-icon {
  color: #a08d74 !important;
}

.fi-sidebar-item-button:hover {
  background: rgba(201, 150, 44, 0.12) !important;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
  color: #f2e8d8 !important;
}

.fi-sidebar-item-active .fi-sidebar-item-button {
  background: rgba(201, 150, 44, 0.18) !important;
  box-shadow: inset 3px 0 0 var(--pyk-gold);
}

.fi-sidebar-item-active .fi-sidebar-item-button .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-button .fi-sidebar-item-icon {
  color: #f5e3c0 !important;
}

/* Badge tenant/outlet switcher di sidebar */
.fi-sidebar .fi-tenant-menu-trigger,
.fi-sidebar [x-data*="tenant"] > button {
  border: 1px solid rgba(201, 150, 44, 0.28) !important;
  background: rgba(201, 150, 44, 0.08) !important;
  border-radius: 10px !important;
  color: #f2e8d8 !important;
}

.fi-sidebar .fi-tenant-menu-trigger * {
  color: #f2e8d8 !important;
}

/* ===== Topbar: putih kaca ===== */
.fi-topbar nav {
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: none !important;
}

/* ===== Kartu, section, widget: putih translusen ===== */
.fi-section,
.fi-wi-widget > .fi-section,
.fi-ta-ctn,
.fi-fo-tabs,
.fi-dropdown-panel {
  background: var(--pyk-card) !important;
  border: 1px solid var(--pyk-card-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05) !important;
}

.fi-dropdown-panel {
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

/* KPI stats ala design */
.fi-wi-stats-overview-stat {
  background: var(--pyk-card) !important;
  border: 1px solid var(--pyk-card-border) !important;
  border-radius: 14px !important;
}

.fi-wi-stats-overview-stat-value {
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
}

.fi-wi-stats-overview-stat-label {
  color: var(--pyk-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* ===== Tabel ===== */
.fi-ta-header-ctn {
  border-bottom: 1px solid rgba(255, 255, 255, 0.6) !important;
}

.fi-ta-table thead {
  background: rgba(255, 255, 255, 0.42) !important;
}

.fi-ta-header-cell-label {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--pyk-muted) !important;
}

.fi-ta-row {
  border-color: rgba(120, 90, 50, 0.1) !important;
}

.fi-ta-row:hover {
  background: rgba(255, 253, 248, 0.75) !important;
}

.fi-ta-table {
  background: transparent !important;
}

/* ===== Tombol ===== */
.fi-btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
}

/* ===== Input ===== */
.fi-input-wrp {
  background: rgba(255, 255, 255, 0.62) !important;
  border-radius: 10px !important;
  --tw-ring-color: rgba(255, 255, 255, 0.8) !important;
}

.fi-input-wrp:focus-within {
  --tw-ring-color: var(--pyk-gold) !important;
}

/* ===== Modal: kaca ===== */
.fi-modal-close-overlay {
  background: rgba(38, 26, 16, 0.42) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.fi-modal-window {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
}

/* ===== Badge ===== */
.fi-badge {
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* ===== Notifikasi ===== */
.fi-no-notification {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  border-radius: 12px !important;
}

/* ===== Switcher outlet: pindah ke topbar, sembunyikan versi sidebar ===== */
.fi-sidebar .fi-tenant-menu,
.fi-sidebar-header .fi-tenant-menu {
  display: none !important;
}

.fi-topbar .fi-tenant-menu .fi-tenant-menu-trigger {
  width: auto;
  white-space: nowrap;
  border: 1px solid #e7e1d8;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  padding: 6px 14px 6px 8px;
}

.fi-topbar .fi-tenant-menu .fi-tenant-menu-trigger:hover {
  background: #ffffff;
}

/* ===== Halaman login panel ===== */
.fi-simple-layout {
  background: transparent !important;
}

.fi-simple-main {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  border-radius: 18px !important;
}

/* ===== Brand: maskot + teks ===== */
.fi-logo {
  align-items: center;
  gap: 10px;
}

.pyk-brand-img {
  height: 100%;
}

.pyk-brand-text {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.2px;
  color: #241811;
  white-space: nowrap;
}

/* Logo maskot di halaman login: besar, bertumpuk, bayangan hangat */
.fi-simple-main .fi-logo {
  height: auto !important;
  flex-direction: column;
  gap: 6px;
  margin-inline: auto;
}

.fi-simple-main .pyk-brand-img {
  height: 8rem;
  filter: drop-shadow(0 10px 24px rgba(102, 66, 24, 0.3));
}

.fi-simple-main .pyk-brand-text {
  font-size: 21px;
}

/* Pagination & footer table area menyatu dengan kartu */
.fi-ta-content,
.fi-pagination {
  background: transparent !important;
}