@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');

body { 
  font-family: 'Nunito', sans-serif; 
}

/* 1. Gembok Layar Utama Super Kuat */
html, body, #main-app {
  overflow-x: hidden !important;
  max-width: 100vw;
  width: 100%;
  position: relative;
}

/* 2. Jinakkan Semua Wadah Tabel (REVISI HP & DESKTOP) */
.overflow-x-auto {
  width: 100%;
  overflow-x: auto !important; /* WAJIB auto agar rel geser HP menyala */
  -webkit-overflow-scrolling: touch; 
}

/* 3. Atur Batas Minimal Lebar Tabel */
.overflow-x-auto table {
  width: 100%;
  min-width: 1000px; /* Tabel besar (pendaftaran/pelanggan) dipaksa minimal 1000px agar rapi & memunculkan scroll di HP */
  border-collapse: collapse;
}

/* REVISI: Kecilkan batas minimal agar lebih selaras dengan sidebar */
.overflow-x-auto table {
  min-width: 800px; 
}

/* ==========================================
   GAYA KHUSUS TABEL PPPOE (COMPACT & CLEAN)
   ========================================== */

/* 1. Menyesuaikan padding dan font tabel ke ukuran standar Web App */
#section-pppoe table th, 
#section-pppoe table td,
#section-hotspot table th, 
#section-hotspot table td {
  padding: 10px 14px !important;  /* Jarak atas-bawah dilonggarkan agar lebih lega */
  font-size: 13px !important;     /* Ukuran huruf dibesarkan agar nyaman dibaca mata */
}

/* Menyesuaikan ukuran tombol 'Aksi' agar proporsional dengan huruf yang membesar */
#section-pppoe table td button,
#section-hotspot table td button {
  width: 32px !important;
  height: 32px !important;
}

/* 2. Merampingkan Header Kontrol (Pencarian, Filter, Router) */
#section-pppoe .px-6.py-5,
#section-hotspot .px-6.py-5 {
  padding: 8px 16px !important; /* Jarak atas dan bawah dipipihkan menjadi 8px */
}

/* 3. Menyesuaikan tinggi input & tombol agar seimbang */
#section-pppoe .modern-input,
#section-hotspot .modern-input {
  height: 30px !important; /* Kotak input dan dropdown dikecilkan */
  font-size: 11px !important;
  padding: 0 10px !important;
}

#section-pppoe button,
#section-hotspot button {
  height: 22px !important; /* Diperkecil jadi 26px agar lebih mungil */
  font-size: 9px !important; /* Hurufnya juga sedikit dikecilkan */
  padding: 0 9px !important; /* Jarak pinggirnya dirapatkan */
  display: flex;
  align-items: center;
}

/* 4. Menyesuaikan area footer tabel (Halaman) */
#section-pppoe .px-6.py-4.border-t,
#section-hotspot .px-6.py-4.border-t {
  padding: 8px 20px !important;
}

/* 4. Khusus tabel kecil (Lokasi & Paket) biar menyesuaikan layar HP (tidak perlu kepanjangan) */
#section-lokasi table,
#section-paket table {
  min-width: 100%; 
}

/* 5. Pastikan teks di dalam tabel tetap rapi satu baris */
.overflow-x-auto table th,
.overflow-x-auto table td {
  white-space: nowrap; 
}

/* 6. Izinkan deskripsi/alamat panjang untuk memotong teks otomatis jadi titik-titik (...) */
td.max-w-\[200px\] {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Elegant Accent Colors */
:root {
  --brand-yellow: #FFD100; /* IM3 Yellow */
  --brand-red: #E60000;    /* IM3 Red */
}

.text-brand-yellow { color: var(--brand-yellow); }
.text-brand-red { color: var(--brand-red); }
.bg-brand-yellow { background-color: var(--brand-yellow); }
.bg-brand-red { background-color: var(--brand-red); }
.ring-brand-yellow { --tw-ring-color: var(--brand-yellow); }

/* Modern Input Styling */
.modern-input {
  /* Kita tambahkan shadow-sm (bayangan halus) dan bg-slate-100 (abu-abu muda) */
  @apply w-full px-4 py-3 rounded-xl bg-slate-100 border border-slate-300 outline-none transition-all duration-200 text-slate-800 shadow-sm;
}

.modern-input:focus {
  /* Saat diklik, kotak jadi putih bersih dan bayangannya lebih tegas */
  @apply bg-white border-transparent ring-2 ring-brand-yellow shadow-md;
}

.modern-input:focus {
  @apply bg-white border-transparent ring-2 ring-brand-yellow shadow-sm;
}

.loader { 
  border-top-color: var(--brand-red); 
  animation: spinner 1s linear infinite; 
}

@keyframes spinner { 
  0% { transform: rotate(0deg); } 
  100% { transform: rotate(360deg); } 
}

/* ==========================================
   DESAIN SCROLLBAR MODERN (TIPIS & HALUS)
   ========================================== */

/* 1. Pengaturan untuk browser Mozilla Firefox */
* {
  scrollbar-width: thin; /* Buat jadi tipis */
  scrollbar-color: transparent transparent; /* Sembunyikan warna awalnya */
  transition: scrollbar-color 0.3s ease; /* Efek kemunculan mulus */
}

/* Munculkan tipis saat dilewati mouse (Khusus Firefox) */
*:hover {
  scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
}

/* 2. Pengaturan untuk Google Chrome, Microsoft Edge, dan Safari */
::-webkit-scrollbar {
  width: 6px; /* Lebar scrollbar sangat tipis */
  height: 6px; /* Tinggi scrollbar (jika geser kiri-kanan) */
}

/* HILANGKAN PANAH ATAS & BAWAH */
::-webkit-scrollbar-button {
  display: none;
}

/* Jalur lintasan scroll (dibuat tembus pandang) */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Batang pegangan scroll (thumb) - Awalnya dibuat tembus pandang */
::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 10px; /* Ujung batang dibuat membulat / halus */
}

/* SULAPNYA DI SINI: Batang pegangan baru muncul (warna abu-abu) saat disentuh mouse */
*:hover::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4); 
}

/* Saat batangnya ditahan/diklik untuk digeser, warnanya jadi sedikit lebih jelas */
*:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.7);
}

/* ==========================================
   PERBAIKAN TAMPILAN HP (MOBILE RESPONSIVE)
   ========================================== */

@media screen and (max-width: 768px) {
  /* 1. Merapikan Kartu Statistik PPPOE & Hotspot di HP agar tingginya menyesuaikan teks */
  #section-pppoe .grid-cols-2 > div,
  #section-hotspot .grid-cols-2 > div {
    height: auto !important;
    min-height: 110px !important;
    gap: 8px;
    padding: 12px !important;
  }
  
  /* Mengecilkan sedikit ikon grafis di latar belakang kartu, KECUALI garis gelombang */
  #section-pppoe .grid-cols-2 > div svg:not(.absolute),
  #section-hotspot .grid-cols-2 > div svg:not(.absolute) {
    width: 35px;
    height: auto;
  }

  /* 2. Menyusun 3 Kartu Dashboard Menyamping di HP */
  #section-dashboard .grid-cols-1 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #section-dashboard .grid-cols-1 > div {
    padding: 12px 6px !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
  }
  #section-dashboard .grid-cols-1 > div > div.z-10 {
    margin-left: 0 !important;
  }
  #section-dashboard .grid-cols-1 > div > div.w-14 {
    margin-bottom: 8px !important;
    margin-right: 0 !important;
    width: 32px !important;
    height: 32px !important;
  }
  #section-dashboard .grid-cols-1 > div i.text-2xl {
    font-size: 14px !important;
  }
  #section-dashboard .grid-cols-1 > div h3 {
    font-size: 8px !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
  }
  #section-dashboard .grid-cols-1 > div p.text-3xl {
    font-size: 16px !important;
  }
  #section-dashboard .grid-cols-1 > div .flex.items-baseline {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
}