/* ============================================================
   MARS DATA — THEME REFRESH (overlay)
   Aman & reversibel. Tidak mengubah logika, hanya tampilan.
   - Pertahankan branding teal Mars Data (#0F766E)
   - Gaya bersih: kartu putih, bayangan lembut, sudut membulat
   - FIX: safe-area (tombol back tidak ketutup notch), anti-kepotong
   - Responsif semua HP, tipografi lebih rapi (kurangi kesan tebal/AI)
   Dimuat PALING AKHIR supaya menang cascade.
   ============================================================ */

:root{
  /* Branding tetap Mars Data */
  --primary:#0F766E; --secondary:#14B8A6;
  /* Palet netral bersih ala dashboard modern */
  --mars-bg:#f4f7fb;
  --mars-card:#ffffff;
  --mars-line:#e6ecf5;
  --mars-text:#0f172a;
  --mars-mut:#64748b;
  --mars-shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --mars-radius:16px;
  --mars-safe-top:env(safe-area-inset-top, 0px);
  --mars-safe-bot:env(safe-area-inset-bottom, 0px);
}

/* ---------- Dasar & anti-scroll horizontal ---------- */
html,body{ overflow-x:hidden; -webkit-text-size-adjust:100%; }
*{ -webkit-tap-highlight-color:transparent; }
img,svg,video,canvas,iframe,table{ max-width:100%; height:auto; }
.screen, .card, .panel, .box, [class*="-card"]{ box-sizing:border-box; }
/* teks panjang tidak menembus layar */
h1,h2,h3,h4,p,span,div,td,th,li,button,a{ overflow-wrap:anywhere; word-break:break-word; }

/* ============================================================
   FIX UTAMA: SAFE-AREA — tombol back & header tidak ketutup notch
   ============================================================ */
.header-page{
  padding-top:calc(12px + var(--mars-safe-top)) !important;
  padding-left:calc(14px + env(safe-area-inset-left, 0px));
  padding-right:calc(14px + env(safe-area-inset-right, 0px));
  min-height:calc(52px + var(--mars-safe-top));
  display:flex; align-items:center; gap:12px;
  background:var(--mars-card);
  box-shadow:0 1px 0 var(--mars-line);
  position:relative; z-index:20;
}
/* tombol back: pastikan tampil, cukup besar untuk disentuh */
.header-page i.ph-arrow-left,
.header-page [class*="ph-arrow-left"]{
  display:inline-flex !important; align-items:center; justify-content:center;
  width:38px; height:38px; font-size:22px; border-radius:10px;
  color:var(--primary) !important; cursor:pointer; flex:0 0 auto;
}
.header-page i.ph-arrow-left:active{ background:rgba(15,118,110,.08); }
.header-page h2{ font-size:16px; font-weight:700; margin:0; }

/* konten layar: beri ruang aman kiri/kanan/bawah (home indicator) */
.screen{
  padding-left:max(0px, env(safe-area-inset-left, 0px));
  padding-right:max(0px, env(safe-area-inset-right, 0px));
}
.screen.has-bottom-nav{ padding-bottom:calc(84px + var(--mars-safe-bot)); }

/* bottom nav: angkat dari home-indicator, gaya pill bersih */
#bottom-nav{
  padding-bottom:calc(8px + var(--mars-safe-bot)) !important;
  background:var(--mars-card);
  border-top:1px solid var(--mars-line);
  box-shadow:0 -2px 12px rgba(16,24,40,.05);
}

/* ============================================================
   ESTETIKA: kartu bersih, sudut membulat, bayangan lembut
   ============================================================ */
body{ background:var(--mars-bg); color:var(--mars-text); }
.card, .panel, .box, .stat-card, .menu-card,
[class*="-card"]:not(.pkg-card):not(.pelanggan-card):not(.hero-card):not(.saldo-card):not(.promo-card){
  background:var(--mars-card);
  border:1px solid var(--mars-line);
  border-radius:var(--mars-radius);
  box-shadow:var(--mars-shadow);
}

/* ============================================================
   KURANGI KESAN "TEBAL / AI": bobot font lebih kalem
   (angka besar tetap menonjol, tapi tidak 900)
   ============================================================ */
h1,h2,h3{ font-weight:700 !important; letter-spacing:-.01em; }
.pkg-speed, .pkg-price, .stat-value, .big-number, .amount{ font-weight:700 !important; }
button, .btn, [class*="btn-"]{ font-weight:600 !important; letter-spacing:0; }
/* tombol utama: gaya rapi, tidak norak */
.btn-primary, button.primary, [class*="btn-primary"]{
  background:var(--primary); border:0; color:#fff; border-radius:10px;
}
.btn-primary:hover, button.primary:hover{ filter:brightness(.96); }

/* ikon phosphor "bold" dibuat sedikit lebih ramping secara visual */
i[class*="ph-bold"]{ font-size:.98em; }

/* ============================================================
   RESPONSIF: ikuti ukuran layar HP, tidak ada yang terpotong
   ============================================================ */
@media (max-width:480px){
  .header-page h2{ font-size:15px; }
  /* grid apa pun yang memaksa 3-4 kolom → turun agar tidak sempit/terpotong */
  [style*="grid-template-columns"][class*="grid"]{ grid-template-columns:1fr 1fr !important; }
  .container, .wrap, .content, .screen-inner{ padding-left:14px; padding-right:14px; }
  /* tabel lebar bisa digeser, bukan terpotong */
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
}
@media (max-width:360px){
  /* HP kecil: paksa satu kolom biar tidak mepet */
  [class*="grid"]{ grid-template-columns:1fr !important; }
}

/* modal & popup tidak melebihi layar */
.modal, .modal-content, .popup, [class*="modal"]{
  max-width:calc(100vw - 24px); max-height:calc(100vh - 24px - var(--mars-safe-top));
  border-radius:var(--mars-radius);
}


/* ============================================================
   [REVISI 2] FIX HALAMAN SALDO BLANK / PUTIH POLOS
   ------------------------------------------------------------
   BIANG MASALAH: selector `[class*="-card"]` di atas ikut menangkap
   .saldo-card / .hero-card / .promo-card, lalu MENIMPA background
   gradient-nya jadi putih (--mars-card:#ffffff). Karena semua teks di
   dalam kartu saldo berwarna putih, kartunya jadi tampak KOSONG.
   Selector itu sudah dikecualikan; di bawah ini gradient-nya dipertegas
   lagi supaya aman dari CSS pihak ketiga / cache tema.
   ============================================================ */
.hero-card{ border:0 !important; box-shadow:0 10px 24px rgba(0,0,0,.10) !important; }
.saldo-card{
  background:
    url("data:image/svg+xml,%3Csvg width='160' height='160' viewBox='0 0 160 160' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='160' cy='160' r='140' stroke='white' stroke-opacity='0.08' stroke-width='20'/%3E%3Ccircle cx='160' cy='160' r='100' stroke='white' stroke-opacity='0.08' stroke-width='20'/%3E%3Ccircle cx='160' cy='160' r='60' stroke='white' stroke-opacity='0.08' stroke-width='20'/%3E%3C/svg%3E") no-repeat bottom right,
    linear-gradient(135deg,#00A99D,#00796B) !important;
  color:#fff !important;
}
.promo-card{ background:linear-gradient(135deg,#FF8C00,#FFA333) !important; color:#fff !important; }
.saldo-card *, .promo-card *{ color:#fff; }
.saldo-card .btn-pill, .promo-card .btn-pill{ color:#fff; }
.saldo-card .btn-pill{ background:#F97316 !important; }