/* ============================================================
   LANDING DESIGN SYSTEM OVERRIDE — Drama China VIP SPA
   Diterapkan dari https://arsip.utu.ac.id/assets/css/landing_page.css
   Desain system: brand #006DF0, Poppins, kartu radius 16px, shadow halus.
   Target: komponen Home/Dashboard yang sudah ada (tanpa ngerusak layout).
   ============================================================ */

/* --- 1. TYPOGRAPHY: Poppins (sesuai design system) — dimuat via <link> di index.html (non-blocking) --- */
html, body, #root, button, input, select, textarea {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

/* --- 2. BRAND ACCENT: ganti lime #006DF0 -> #006DF0 (brand UTU) --- */
body {
  background-color: #0f1a2e; /* dark navy, match SPA theme (jaga anti-flash putih saat pre-mount) */
}

.bg-primary-500,
.bg-primary-600,
.from-primary-500,
.from-primary-600,
.to-primary-600,
.via-primary-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(0 109 240 / var(--tw-bg-opacity, 1)) !important;
}
.from-primary-400,
.via-primary-200 { background-color: #4d93f5 !important; }

.text-primary-500,
.text-primary-400,
.text-primary-300 {
  color: #006DF0 !important;
}
.text-primary-100 { color: #cfe4ff !important; }

.border-primary-500 { border-color: #006DF0 !important; }

/* dot / indicator brand */
.bg-primary-500\/20 { background-color: rgba(0,109,240,.2) !important; }
.bg-primary-500\/10 { background-color: rgba(0,109,240,.1) !important; }

/* --- 3. SURFACE / BACKGROUND standard (sesuai dark, diselaraskan) --- */
.bg-surface-dark { background-color: #0f1a2e !important; } /* var --text / brand-dark blend */
/* CATATAN: base `.bg-surface` = rgb(23 32 48), `.bg-surface-light` = rgb(30 43 64)
   (sudah gelap/gelap). JANGAN override ke putih — itu yg bikin box putih di admin,
   akun, dll. Biarkan base dark berlaku. */

/* --- 3a. ADMIN panel — override global bg-surface->putih JANGAN kena admin.
   Pulihkan surface gelap utk header-card & item sidebar admin (bg-surface-light). */
.min-h-screen.bg-\[\#0B1120\] .bg-surface,
.min-h-screen.bg-\[\#0B1120\] .bg-surface-light,
.admin-sidebar .bg-surface,
.admin-sidebar .bg-surface-light {
  background-color: rgb(19 28 42) !important;
}

/* --- 3b. KONTRA F: restore surface gelap utk komponen yg bawa teks putih --- */
/* Button episode (grid angka) pakai bg-surface-light + teks putih inherit -> white-on-white.
   Kembalikan ke dark surface asli supaya angka kebaca; hover tetap ke primary/black. */
button[class*="aspect-square"][class*="bg-surface-light"] {
  background-color: rgb(30 43 64) !important;
  color: #ffffff !important;
}
/* Button language switcher (bendera) — dark surface biar bendera & teks kelihatan */
button[class*="bg-surface-light"]:has(img[alt="Indonesia"]),
button[class*="bg-surface-light"]:has(img[src*="flagcdn"]) {
  background-color: rgb(23 32 48) !important;
  color: #ffffff !important;
}
/* Placeholder skeleton loading (kartu & pill) — restore dark biar kelihatan di atas body light */
[class*="animate-pulse"][class*="bg-surface-light"] {
  background-color: rgb(30 43 64) !important;
}
/* Poster drama (aspect 3/4) — restore dark di balik gambar biar tidak flash putih saat loading */
[class*="aspect-[3/4]"][class*="overflow-hidden"][class*="bg-surface-light"] {
  background-color: rgb(23 32 48) !important;
}
/* INPUT di atas surface gelap (bg-surface-light) — teks & caret putih biar terbaca */
input[class*="bg-surface-light"], textarea[class*="bg-surface-light"], select[class*="bg-surface-light"] {
  color: #ffffff !important;
  caret-color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
input[class*="bg-surface-light"]::placeholder, textarea[class*="bg-surface-light"]::placeholder {
  color: rgb(156 163 175) !important;
  -webkit-text-fill-color: rgb(156 163 175) !important;
}
/* LOGO ANIMASI HEADER & FOOTER — warna di-edit langsung di data Lottie (merah -> biru #006DF0),
   sehingga header dan footer tampil sama (biru solid #006DF0). */
/* DAFTAR EPISODE — perbaiki tampilan: kurangi tombol bujur sangkar raksasa,
   jadikan pill ramping, rounded, border halus, hover biru brand #006DF0 */
div[class*="grid-cols-5"] button[class*="aspect-square"],
div[class*="grid-cols-8"] button[class*="aspect-square"] {
  aspect-ratio: auto !important;
  width: 100% !important;
  height: 48px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  transition: all 0.15s ease !important;
}
div[class*="grid-cols-5"] button[class*="aspect-square"]:hover,
div[class*="grid-cols-8"] button[class*="aspect-square"]:hover {
  background-color: rgba(0, 109, 240, 0.22) !important;
  border-color: rgba(0, 109, 240, 0.6) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.bg-dark-700 { background-color: #16233c !important; }
.bg-dark-800 { background-color: #101d33 !important; }
.bg-dark-900 { background-color: #0b1424 !important; }
.bg-dark-600 { background-color: #1d2d4a !important; }
.bg-dark-500 { background-color: #243656 !important; }
.bg-dark-400 { background-color: #2f4470 !important; }

/* --- 4. KARTU (card) shadow + radius sesuai design system --- */
.card, [class*="rounded-2xl"], [class*="rounded-xl"] {
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px -12px rgba(16,24,40,.10);
}
/* hover pada kartu drama */
[class*="group"]:hover [class*="shadow"],
[class*="hover:shadow"]:hover {
  box-shadow: 0 18px 40px -16px rgba(0,109,240,.22) !important;
}

/* --- 5. NAVBAR header: glass + border halus --- */
header[class*="sticky"] {
  background: rgba(15,26,46,.80) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(230,234,242,.08) !important;
}

/* --- 6. PLATFORM BAR pills --- */
.platform-bar-desktop { background: rgba(15,26,46,.92) !important; }
button[class*="rounded-xl border"], [class*="rounded-xl"][class*="border"] {
  border-radius: 10px !important;
  transition: all .25s ease !important;
}
button[class*="rounded-xl border"]:hover {
  border-color: #006DF0 !important;
  color: #006DF0 !important;
  background: rgba(0,109,240,.08) !important;
}

/* --- 7. BOTTOM NAV --- */
nav[class*="fixed bottom-0"] {
  background: rgba(15,26,46,.94) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(230,234,242,.08) !important;
}

/* --- 8. SECTION HEADING --- */
section [class*="mb-6"] h1,
section [class*="mb-6"] h2,
section [class*="mb-6"] h3 {
  font-weight: 700 !important;
  letter-spacing: -.01em;
}

/* --- 9. FOOTER --- */
footer {
  background: #0b1424 !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
}

/* --- 10. TOMBOL / CTA primary --- */
button[class*="bg-primary-500"], a[class*="bg-primary-500"] {
  box-shadow: 0 6px 14px -6px rgba(0,109,240,.6) !important;
}
button[class*="bg-primary-500"]:hover, a[class*="bg-primary-500"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -6px rgba(0,109,240,.6) !important;
}

/* ============================================================
   RESPOSIF — sesuaikan dengan mini-breakpoint landing css
   ============================================================ */
@media (max-width: 640px) {
  header[class*="sticky"] { background: rgba(15,26,46,.92) !important; }
}

/* ============================================================
   FIX RESPONSIF ADMIN — header jangan "numbuk" status bar HP
   (jam / baterai / notch). Admin pakai sticky top-0 tanpa
   env(safe-area-inset-top), lalu page pakai viewport-fit=cover,
   sh header naik ke bawah status bar di HP. Desktop tidak terpengaruh
   (env() = 0px). Dipicu hanya di dalam container admin (bg #0B1120).
   ============================================================ */
@media (max-width: 640px) {
  [class*="bg-[#0B1120]"] [class*="sticky"][class*="top-0"] {
    padding-top: calc(env(safe-area-inset-top, 0px) + 4px);
  }
}

/* ===== Platform bar (desktop & mobile) — restore dark navy button, jangan ikut
   override global .bg-surface->putih. Cocok dengan referensi (rgb 23,32,48). ===== */
.platform-bar-desktop button[class*="bg-surface"],
.platform-bar-mobile button[class*="bg-surface"] {
  background-color: rgb(23, 32, 48) !important;
}
.platform-bar-desktop button[class*="bg-surface"]:hover,
.platform-bar-mobile button[class*="bg-surface"]:hover {
  background-color: rgb(30, 43, 64) !important;
}

/* ===== Drama card hover: tombol play — jangan biru (override primary->#006DF0),
   pakai glass netral yg cocok tema gelap, icon putih tetap. ===== */
a[href*="/drama/"] [class*="bg-primary-500"][class*="rounded-full"] {
  background-color: rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}
a[href*="/drama/"] [class*="bg-primary-500"][class*="rounded-full"] svg {
  color: #fff;
  fill: #fff;
}

/* ============================================================
   RESPONSIF PENGATURAN SITUS (admin/settings)
   - Grid 2 kolom (1fr + 300px) cuma aktif di layar BESAR (lg+);
     di HP/tablet stack jadi 1 kolom biar ga sempit/overflow.
   - Guard min-width:0 supaya child card bisa menyusut (tidak
     memaksa lebar konten > viewport).
   - Form control di dalam card dipaksa max-width 100%.
   ============================================================ */
@media (max-width: 1023.98px) {
  .md\:grid-cols-\[1fr_300px\] {
    grid-template-columns: 1fr !important;
  }
}
.max-w-5xl .card,
.max-w-5xl .card > * {
  min-width: 0;
}
.card input,
.card textarea,
.card select,
.card img {
  max-width: 100%;
}

/* ============================================================
   Pengaturan Situs — tab section: di HP biarkan BUNGKUS (wrap)
   biar SEMUA tombol (termasuk "Pembatasan Konten") kelihatan.
   Sebelumnya `w-fit` + overflow-x-auto bikin bar lebih lebar dari
   layar -> tombol terakhir kelewat (horizontal overflow).
   ============================================================ */
@media (max-width: 767px) {
  .card[class*="overflow-x-auto"][class*="w-fit"] {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 480px) {
  .card[class*="overflow-x-auto"][class*="w-fit"] button {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
    font-size: 0.75rem !important;
  }
}