/* ============================================================
   tema.css — METEOR, Tema 2 dan Tema 3

   Panel punya tiga rupa yang dipilih di Setelan dan disimpan per HP
   (10 Okt 2026, permintaan Bos). Tema 1 adalah tampilan yang sudah ada:
   seluruhnya milik theme.css + app.css dan TIDAK disentuh file ini.
   Tema 2 dan 3 berupa lapisan di atasnya, menyala lewat
   <html data-tema="2|3"> yang dipasang skrip kecil di <head>.

   Aturan main file ini:
   1. SEMUA selektor berawalan [data-tema="2"] atau [data-tema="3"].
      Aturan tanpa awalan itu ikut mengubah Tema 1 — jangan.
   2. Markup dan logikanya satu untuk ketiga tema. Yang diubah di sini
      hanya rupa dan tata letak; urutan di HTML tetap urutan Tema 1 dan
      dipindah lewat order / grid-area.
   3. Blok mode malam tiap tema WAJIB mengulang setiap token warna yang
      ditulis blok terangnya. Blok terang tema (0,2,0) dimuat sesudah
      blok malam Tema 1 (0,2,0) dan menang atasnya, jadi token yang
      lupa diulang tetap terang di mode malam.
   4. Elemen yang disembunyikan lewat atribut hidden tidak boleh diberi
      display di sini kecuali lewat :not([hidden]) — display dari CSS
      mengalahkan hidden bawaan browser dan elemennya muncul lagi.
   5. Warna titik (status, operator, radar produk) datang dari Setelan
      dan tidak diatur di sini. Tema hanya mengubah bingkainya.

   File ini hanya dimuat index.html. Halaman pembeli punya theme.css
   sendiri dan tidak pernah melihatnya.
   ============================================================ */

/* ---------- 0. IKON ----------
   Dipakai sebagai mask di ::before, jadi warnanya ikut warna teks dan
   tidak ada markup yang perlu ditambah untuk sekadar hiasan. */
[data-tema="2"],
[data-tema="3"] {
  --ik-dompet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12V7H5a2 2 0 0 1 0-4h14v4'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h16v-5'/%3E%3Cpath d='M18 12a2 2 0 0 0 0 4h4v-4Z'/%3E%3C/svg%3E");
  --ik-segar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E");
  --ik-saring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E");
  --ik-mata-coret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.88 9.88a3 3 0 1 0 4.24 4.24'/%3E%3Cpath d='M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68'/%3E%3Cpath d='M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61'/%3E%3Cline x1='2' x2='22' y1='2' y2='22'/%3E%3C/svg%3E");
  --ik-naik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E");
  --ik-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --ik-jam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}


/* ████████████████████████████████████████████████████████████
   TEMA 2 — biru lembut
   Plus Jakarta Sans, kartu putih bertepi tipis di atas latar abu
   kebiruan, omzet sebagai satu bidang biru di puncak beranda.
   ████████████████████████████████████████████████████████████ */

/* ---------- 2.1 Token ---------- */
[data-tema="2"] [data-theme="admin"] {
  --bg:          #F3F5F9;
  --surface:     #FFFFFF;
  --surface-alt: #F6F8FB;
  --surface-2:   #FAFBFD;
  --border:      #E3E8F0;
  --border-kuat: #D5DCE8;
  --divider:     #EEF1F6;

  --text:   #0F172A;
  --text-2: #475569;
  --text-3: #64748B;

  --brand:        #1F4FD8;
  --brand-hover:  #1A43BC;
  --brand-press:  #163BA3;
  --brand-soft:   #EAF0FF;
  --brand-border: #C9D6FB;
  --brand-teks:   #1F4FD8;
  --on-brand:     #FFFFFF;

  --error:      #DC2626;
  --info:       #1F4FD8;
  --ok-soft:    #E7F7EE;
  --error-soft: #FDECEC;
  --info-soft:  #EAF0FF;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, .08);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, .10);
  --shadow-xl: 0 24px 56px rgba(15, 23, 42, .16);
  --shadow-brand: 0 10px 24px rgba(31, 79, 216, .35);

  --kaca:        rgba(255, 255, 255, .94);
  --kaca-border: #E3E8F0;

  /* Milik tema ini saja. */
  --ikon:        #334155;   /* ikon & teks tombol netral */
  --merek:       #1F3FAE;   /* tulisan METEOR */
  --hero:        #1F4FD8;   /* bidang omzet */
  --hero-garis:  #4A72E4;
  --hero-redup:  #DCE6FF;
  --hero-tombol: #2A5AE0;
  --hero-tombol-garis: #5B7FE6;
  --hero-bayang: 0 12px 28px rgba(31, 79, 216, .25);
  --brand-pucat: #F5F8FF;   /* latar tombol Segarkan */

  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-angka:   'Plus Jakarta Sans', system-ui, sans-serif;

  --r-sm: 12px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 26px;
}

/* ---------- 2.1b Token mode malam ----------
   Setiap warna di blok atas diulang di sini — lihat aturan main no. 3. */
[data-tema="2"][data-mode="gelap"] [data-theme="admin"] {
  --bg:          #0C1322;
  --surface:     #141D30;
  --surface-alt: #1B2740;
  --surface-2:   #172238;
  --border:      #26334D;
  --border-kuat: #364663;
  --divider:     #212D45;

  --text:   #E8EDF7;
  --text-2: #AAB7CE;
  --text-3: #8593AC;

  --brand:        #7F9FFF;
  --brand-hover:  #97B1FF;
  --brand-press:  #6A8BF0;
  --brand-soft:   #182648;
  --brand-border: #2C4078;
  --brand-teks:   #93ADFF;
  --on-brand:     #0B1220;

  --error:      #FF8A80;
  --info:       #93ADFF;
  --ok-soft:    #0E2A1A;
  --error-soft: #31191A;
  --info-soft:  #152243;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .55);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, .62);
  --shadow-xl: 0 26px 60px rgba(0, 0, 0, .70);
  --shadow-brand: 0 10px 24px rgba(0, 0, 0, .55);

  --kaca:        rgba(20, 29, 48, .94);
  --kaca-border: #26334D;

  --ikon:        #C6D1E4;
  --merek:       #A9BEFF;
  /* Bidang omzet tetap biru pekat bertulisan putih: di latar malam justru
     dialah satu-satunya bidang berwarna, dan itu memang maksudnya. */
  --hero:        #2450D6;
  --hero-garis:  #4E74E6;
  --hero-redup:  #DCE6FF;
  --hero-tombol: #2F5DE4;
  --hero-tombol-garis: #6485EA;
  --hero-bayang: 0 12px 28px rgba(0, 0, 0, .45);
  --brand-pucat: #16223F;
}

/* ---------- 2.2 Bilah atas ---------- */
[data-tema="2"] .topbar {
  padding: 14px var(--sp-4) 8px;
  padding-top: calc(14px + env(safe-area-inset-top));
  background: var(--bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
}

[data-tema="2"] .topbar-title {
  font-size: 1.125rem;
  letter-spacing: .14em;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--merek);
}
[data-tema="2"] .topbar-subtitle {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: 0;
}

[data-tema="2"] .topbar-right { gap: 4px; }
[data-tema="2"] .topbar-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--ikon);
}
[data-tema="2"] .notif-badge {
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: .6875rem;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--bg);
}

/* Empat tombol 44px tidak muat di layar sempit bersama logonya. */
@media (max-width: 400px) {
  [data-tema="2"] .topbar-btn { width: 40px; height: 40px; }
}
@media (max-width: 360px) {
  [data-tema="2"] .topbar-btn { width: 36px; height: 36px; border-radius: 10px; }
}

/* Penanda toko tutup: bilah atas tema ini tanpa garis bawah, jadi penandanya
   dibuat kartu kecil yang berdiri sendiri, bukan pita selebar layar. */
[data-tema="2"] .banner-toko {
  margin: 0 var(--sp-4) 8px;
  border: 1px solid var(--warn);
  border-radius: 14px;
}
[data-tema="2"] .banner-komeet { border-color: var(--info); }

/* ---------- 2.3 Menu bawah (HP) ----------
   Pil geser milik Tema 1 dimatikan. Penanda aktifnya pil kecil di belakang
   ikon saja, digambar ::before tiap tab. */
[data-tema="2"] .bottom-nav {
  bottom: calc(14px + env(safe-area-inset-bottom));
  padding: 0 6px;
  background: var(--surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--border);
  border-radius: 26px;
  box-shadow: var(--shadow-lg);
}
[data-tema="2"] .nav-indikator { display: none; }

[data-tema="2"] .nav-item {
  padding: 11px 4px 10px;
  gap: 4px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-2);
}
[data-tema="2"] .nav-item.active { color: var(--brand-teks); font-weight: 700; }
[data-tema="2"] .nav-item span.nav-label { opacity: 1; transform: none; }

[data-tema="2"] .nav-item > svg,
[data-tema="2"] .nav-item > .nav-ikon-wadah { margin: 4px 0; }
[data-tema="2"] .nav-item svg,
[data-tema="2"] .nav-item.active svg { transform: none; stroke-width: 2; }
[data-tema="2"] .nav-item:active svg { transform: scale(.86); }

[data-tema="2"] .nav-item::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 11px;
  left: 50%;
  width: 54px;
  height: 30px;
  margin-left: -27px;
  border-radius: var(--r-full);
  background: var(--brand-soft);
  opacity: 0;
  transform: scale(.7);
  transition: opacity var(--dur-2) var(--ease-standar),
              transform var(--dur-3) var(--ease-pegas);
}
[data-tema="2"] .nav-item.active::before { opacity: 1; transform: none; }

[data-tema="2"] .nav-badge {
  top: -6px;
  right: -12px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: .65rem;
  font-weight: 700;
}

/* ---------- 2.4 Tombol tambah ---------- */
[data-tema="2"] .fab {
  right: 20px;
  bottom: calc(104px + env(safe-area-inset-bottom));
  width: 58px;
  height: 58px;
  border-radius: 20px;
}

/* ---------- 2.5 Komponen umum ---------- */
[data-tema="2"] .btn { font-weight: 700; }
[data-tema="2"] .section-title { font-size: 1.0625rem; font-weight: 800; letter-spacing: 0; }

[data-tema="2"] .section-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  font-family: inherit;
  font-size: .84rem;
  font-weight: 700;
  background: var(--brand-pucat);
}
[data-tema="2"] .section-action:active { background: var(--brand-soft); }

/* Ikon kecil di depan tombol bagian. */
[data-tema="2"] #head-peta .section-action::before,
[data-tema="2"] #btn-filter-titik::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--ik-segar) center / contain no-repeat;
  mask: var(--ik-segar) center / contain no-repeat;
}
[data-tema="2"] #btn-filter-titik::before {
  -webkit-mask-image: var(--ik-saring);
  mask-image: var(--ik-saring);
}
[data-tema="2"] #btn-filter-titik {
  background: var(--surface);
  border-color: var(--border-kuat);
  color: var(--ikon);
}
[data-tema="2"] #btn-filter-titik[aria-expanded="true"] {
  background: var(--brand-soft);
  border-color: var(--brand-border);
  color: var(--brand-teks);
}

/* Lencana status: pil berisi warna lembut dari warna statusnya sendiri.
   Titik kecilnya dipertahankan — untuk TERSEDIA dialah yang membawa warna
   operator, sementara tulisannya sengaja netral. */
[data-tema="2"] .badge {
  border-color: transparent;
  background: color-mix(in srgb, currentColor 11%, transparent);
  font-weight: 700;
}
/* Tulisan TERSEDIA sengaja netral (warnanya milik operator dan bisa kuning),
   jadi latarnya diambil dari warna titiknya, bukan dari warna tulisan. */
[data-tema="2"] .badge[data-status="TERSEDIA"] {
  background: color-mix(in srgb, var(--warna-titik, var(--st-tersedia)) 14%, transparent);
}

/* ---------- 2.6 Beranda: kartu statistik ---------- */
[data-tema="2"] .stats-row { gap: 12px; margin-bottom: var(--sp-4); }

[data-tema="2"] .stat-card {
  padding: 18px;
  border-radius: 18px;
  box-shadow: none;
}
[data-tema="2"] .stat-card::before { display: none; }
[data-tema="2"] .stat-card .stat-label {
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--text-2);
  margin-bottom: 10px;
}
[data-tema="2"] .stat-card .stat-nilai { letter-spacing: 0; }
/* Angka besar hanya di beranda. Kartu yang sama dipakai halaman Stok untuk
   nominal rupiah panjang, dan di ukuran ini "Rp 18.100.000" terpotong. */
[data-tema="2"] #page-dashboard .stat-card .stat-nilai {
  font-size: 2rem;
  line-height: 1;
}

/* Kedua kartu "hari ini" digantung ke izin dasbor.omzet lewat atribut
   hidden; aturan di bawah memberi keduanya display, jadi hidden-nya
   ditegaskan lagi di sini. Dua id sekaligus supaya selektor ini selalu lebih
   khusus daripada aturan mana pun di file ini yang memberi display. */
[data-tema="2"] #page-dashboard #kartu-omzet[hidden],
[data-tema="2"] #page-dashboard #kartu-terjual-hari[hidden] { display: none; }

/* Bidang omzet. Warnanya ditulis sendiri (bukan --brand) supaya tetap biru
   pekat bertulisan putih di mode malam, saat --brand berubah jadi biru muda. */
[data-tema="2"] #kartu-omzet {
  display: block;
  padding: 20px 22px;
  background: var(--hero);
  border-color: transparent;
  color: #FFFFFF;
}
[data-tema="2"] #kartu-omzet .stat-label {
  margin-bottom: 12px;
  color: var(--hero-redup);
}
[data-tema="2"] #kartu-omzet .stat-label.omzet-label { justify-content: space-between; }
[data-tema="2"] #kartu-omzet .stat-nilai {
  font-size: 2.125rem;
  letter-spacing: -.01em;
  text-align: left;
  color: #FFFFFF;
}
[data-tema="2"] .omzet-mata {
  width: 36px;
  height: 36px;
  border: 1px solid var(--hero-tombol-garis);
  border-radius: 10px;
  background: var(--hero-tombol);
  color: #FFFFFF;
}
[data-tema="2"] .omzet-mata:hover { background: var(--hero-tombol); color: #FFFFFF; }

/* HP dan tablet: omzet naik ke puncak, dan "Terjual hari ini" menempel di
   bawahnya sebagai kaki bidang yang sama. Keduanya tetap dua elemen — yang
   menyatukan cuma sudut, warna, dan garis pemisah tipis di antaranya. */
@media (max-width: 1023.98px) {
  [data-tema="2"] #kartu-omzet {
    order: -2;
    grid-column: 1 / -1;
    padding: 20px 20px 16px;
    border-radius: 22px 22px 0 0;
    box-shadow: var(--hero-bayang);
  }
  [data-tema="2"] #kartu-terjual-hari {
    order: -1;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: -12px;
    padding: 14px 20px 18px;
    background: linear-gradient(var(--hero-garis), var(--hero-garis)) center top / calc(100% - 40px) 1px no-repeat,
                var(--hero);
    border-color: transparent;
    border-radius: 0 0 22px 22px;
    box-shadow: var(--hero-bayang);
    color: #FFFFFF;
  }
  [data-tema="2"] #kartu-terjual-hari .stat-label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-bottom: 0;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--hero-redup);
  }
  [data-tema="2"] #kartu-terjual-hari .stat-label::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: none;
    background: currentColor;
    -webkit-mask: var(--ik-naik) center / contain no-repeat;
    mask: var(--ik-naik) center / contain no-repeat;
  }
  [data-tema="2"] #kartu-terjual-hari .stat-nilai {
    flex: none;
    font-size: 1.375rem;
    color: #FFFFFF;
  }
}

/* ---------- 2.7 Beranda: Kantong Saya ---------- */
[data-tema="2"] #kantong-saya {
  margin-bottom: var(--sp-4);
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
}
[data-tema="2"] #kantong-saya .section-header {
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 0;
}
/* Judul mengambil satu baris penuh; jumlah unit turun ke baris sendiri di
   bawahnya. Bersisian, keduanya tidak muat di HP dan judulnya patah dua. */
[data-tema="2"] .kantong-judul { flex: 1 0 100%; }
[data-tema="2"] .kantong-tombol { gap: 8px; padding: 0; margin: 0; }
[data-tema="2"] .kantong-tombol::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: none;
  background: var(--brand-teks);
  -webkit-mask: var(--ik-dompet) center / contain no-repeat;
  mask: var(--ik-dompet) center / contain no-repeat;
}
[data-tema="2"] .kantong-panah {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--ikon);
}
[data-tema="2"] #kantong-saya-ringkas {
  margin-top: 10px;
  padding: 5px 10px;
  border-radius: var(--r-full);
  background: var(--brand-soft);
  color: var(--brand-teks);
  font-size: .72rem;
  font-weight: 700;
}

[data-tema="2"] #kantong-saya-isi:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
[data-tema="2"] #kantong-saya-isi .inv-mutasi {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin-bottom: 0;
  padding: 12px;
  background: var(--surface-alt);
  border: 0;
  border-radius: 14px;
  box-shadow: none;
}
/* Urutan di kotak: nama, jumlah, lalu "sejak" — beda dari urutan markup
   (nama, sejak, jumlah), jadi pembungkus kirinya dilebur dan ketiganya
   diurut ulang. */
[data-tema="2"] #kantong-saya-isi .inv-mutasi-kiri { display: contents; }
[data-tema="2"] #kantong-saya-isi .inv-mutasi-kiri > div:first-child { order: 1; font-size: .875rem; }
[data-tema="2"] #kantong-saya-isi .inv-mutasi-qty {
  order: 2;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: inherit;
}
[data-tema="2"] #kantong-saya-isi .qty-angka { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
[data-tema="2"] #kantong-saya-isi .qty-satuan { font-size: .75rem; font-weight: 600; }
[data-tema="2"] #kantong-saya-isi .inv-sub { order: 3; margin-top: 0; font-size: .75rem; }

/* ---------- 2.8 Beranda: Peta Sebaran ----------
   Judul dan petanya dua elemen bersaudara di markup. Supaya terbaca sebagai
   satu kartu, judulnya digambar sebagai bagian atas kartu dan pembungkus
   petanya sebagai bagian bawah, tanpa jarak di antaranya. */
[data-tema="2"] #head-peta,
[data-tema="2"] #head-daftar {
  margin-bottom: 0;
  padding: 16px 16px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
}

[data-tema="2"] #page-dashboard .map-wrap.admin-map {
  height: 316px;
  margin-bottom: var(--sp-4);
  padding: 0 16px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 20px 20px;
  box-shadow: none;
}
[data-tema="2"] #map-dashboard {
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
}

/* Kontrol peta. */
[data-tema="2"] .leaflet-bar {
  border: 1px solid var(--border-kuat) !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: var(--shadow-md) !important;
}
[data-tema="2"] .leaflet-bar a,
[data-tema="2"] .leaflet-bar a:first-child,
[data-tema="2"] .leaflet-bar a:last-child {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  border-bottom-color: var(--border);
  font-size: 20px;
  font-weight: 500;
}
[data-tema="2"] .pengalih-lapisan {
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--border-kuat);
  border-radius: var(--r-full);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
[data-tema="2"] .pengalih-lapisan button {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--ikon);
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
}
[data-tema="2"] .pengalih-lapisan button[aria-pressed="true"] {
  background: var(--brand);
  color: var(--on-brand);
}

/* ---------- 2.9 Beranda: Daftar Titik ----------
   Sama dengan peta: judul, saringan, bar sembunyikan, dan daftarnya adalah
   elemen bersaudara. Masing-masing digambar sebagai satu ruas kartu — judul
   ruas atas, daftar ruas bawah, sisanya ruas tengah. Ruas yang sedang
   hidden hilang begitu saja tanpa meninggalkan celah. */
[data-tema="2"] #filter-titik,
[data-tema="2"] #saring-info,
[data-tema="2"] #aksi-diambil,
[data-tema="2"] #list-titik {
  margin-bottom: 0;
  padding-left: 16px;
  padding-right: 16px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
[data-tema="2"] #filter-titik:not([hidden]),
[data-tema="2"] #saring-info:not([hidden]),
[data-tema="2"] #aksi-diambil:not(:empty) { padding-bottom: 12px; }
[data-tema="2"] #list-titik {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  border-radius: 0 0 20px 20px;
}

/* Bar "masih tampil / disembunyikan". Gaya Tema 1-nya ditulis inline di
   app.js, jadi di sini perlu !important untuk menimpanya. */
/* margin-bottom inline-nya dinolkan: #aksi-diambil tidak punya tepi bawah,
   jadi margin itu menembus keluar dan membelah kartu dengan secelah latar
   halaman. Jaraknya diganti padding pada ruasnya (di atas). */
[data-tema="2"] .aksi-kotak {
  gap: 2px !important;
  margin-bottom: 0 !important;
  padding: 6px !important;
  background: var(--surface-alt);
  border: 0 !important;
  border-radius: 14px !important;
}
[data-tema="2"] .aksi-baris {
  flex-wrap: nowrap !important;
  gap: 8px !important;
  padding: 2px 2px 2px 8px;
}
[data-tema="2"] .aksi-teks {
  flex: 1;
  min-width: 0;
  font-size: .78rem !important;
  line-height: 1.35;
  color: var(--text-2) !important;
}
[data-tema="2"] .aksi-sembunyi .aksi-teks::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -3px;
  background: var(--text-3);
  -webkit-mask: var(--ik-mata-coret) center / contain no-repeat;
  mask: var(--ik-mata-coret) center / contain no-repeat;
}
[data-tema="2"] .aksi-tombol {
  flex: none;
  min-height: 38px;
  padding: 0 12px !important;
  border: 1px solid var(--brand-border);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--brand-teks);
  font-size: .78rem !important;
  font-weight: 700;
  box-shadow: none;
}

[data-tema="2"] .titik-item {
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  box-shadow: none;
}
[data-tema="2"] .titik-kode { font-size: .9375rem; font-weight: 800; letter-spacing: .02em; }
[data-tema="2"] .titik-area { font-size: .78rem; }
[data-tema="2"] .titik-harga { font-size: .9375rem; font-weight: 800; margin-bottom: 6px; }
[data-tema="2"] .titik-item .badge {
  padding: 3px 8px !important;
  font-size: .66rem !important;
  font-weight: 800;
  letter-spacing: .06em;
}
[data-tema="2"] .titik-kosong { border-radius: 14px; }

/* ---------- 2.10 Layar lebar ----------
   Sidebar putih setinggi layar dengan logo di puncaknya, bilah atas tinggal
   judul halaman dan empat tombol. Beranda: empat kartu statistik sebaris,
   peta di kiri, Kantong Saya dan Daftar Titik bertumpuk di kanan. */
@media (min-width: 1024px) {
  [data-tema="2"] {
    --sidebar-w:    216px;
    --sidebar-sela:  16px;
    --topbar-h:      84px;
    /* Lebar kolom kanan beranda. Dipakai grid beranda DAN posisi tombol
       tambah (yang position: fixed, di luar grid itu), jadi satu sumber. Di
       layar 1024px kolom 380px tetap menyisakan peta cuma ±300px. */
    --kol-kanan: clamp(300px, 30vw, 380px);
  }

  /* z-index di atas sidebar (100): logonya anak bilah ini, dan tanpa itu
     tertimbun sidebar yang datang belakangan di markup. */
  [data-tema="2"] .topbar {
    z-index: 101;
    min-height: var(--topbar-h);
    padding: 0 32px;
  }
  [data-tema="2"] .topbar-judul:not(:empty) {
    display: block;
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--text);
  }
  [data-tema="2"] .topbar-right { gap: 8px; }
  [data-tema="2"] .banner-toko { margin: 0 32px 4px; }

  /* Logo keluar dari bilah atas dan berdiri di puncak sidebar. */
  [data-tema="2"] .topbar-logo {
    position: fixed;
    z-index: 101;
    top: 26px;
    left: 24px;
    width: 200px;
    gap: 12px;
  }
  [data-tema="2"] .topbar-logo img { width: 44px; height: 44px; }
  [data-tema="2"] .topbar-title { font-size: 1.375rem; letter-spacing: .16em; }
  [data-tema="2"] .topbar-subtitle { font-size: .75rem; letter-spacing: .03em; }

  [data-tema="2"] .bottom-nav {
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(var(--sidebar-w) + var(--sidebar-sela) * 2);
    gap: 4px;
    padding: 104px 16px 24px;
    background: var(--surface);
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
  }
  [data-tema="2"] .nav-item {
    min-height: 48px;
    padding: 0 14px;
    gap: 12px;
    border-radius: 12px;
    font-size: .9375rem;
    color: var(--ikon);
  }
  [data-tema="2"] .nav-item.active { color: var(--brand-teks); }
  [data-tema="2"] .nav-item:focus-visible { outline-color: var(--brand); }
  [data-tema="2"] .nav-item > svg,
  [data-tema="2"] .nav-item > .nav-ikon-wadah { margin: 0; }
  [data-tema="2"] .nav-item::before { display: none; }

  /* Di sidebar pil geser Tema 1 dipakai lagi, sebagai sorotan baris aktif. */
  [data-tema="2"] .nav-indikator {
    display: block;
    background: var(--brand-soft);
    border: 0;
    border-radius: 12px;
  }

  /* Angka di ujung kanan baris, bukan menempel di sudut ikon. */
  [data-tema="2"] .nav-ikon-wadah { position: static; }
  [data-tema="2"] .nav-badge {
    top: 50%;
    right: 12px;
    min-width: 22px;
    height: 22px;
    margin-top: -11px;
    padding: 0 7px;
    line-height: 22px;
    font-size: .75rem;
    box-shadow: none;
  }

  [data-tema="2"] .fab { width: 60px; height: 60px; }

  /* Beranda. Seperti Tema 1, tingginya dikunci ke layar dan yang bergulir
     cuma daftar titiknya. Bedanya kolom kanan di sini memuat Kantong Saya DAN
     Daftar Titik: kalau kantongnya dibuka di layar pendek, sisanya bisa habis.
     Karena itu daftar dijamin minimal 260px, dan kalau memang tidak muat
     halamannya yang bergulir — bukan daftarnya yang lenyap. */
  [data-tema="2"] #page-dashboard { overflow-y: auto; }
  [data-tema="2"] #page-dashboard .page-content {
    --judul-peta-h: 76px;
    max-width: none;
    padding: 12px 32px 32px;
    grid-template-columns: minmax(0, 1fr) var(--kol-kanan);
    grid-template-rows: auto var(--judul-peta-h) auto auto auto auto auto minmax(260px, 1fr);
    grid-template-areas:
      "statistik   statistik"
      "judul-peta  kantong"
      "peta        kantong"
      "peta        judul-daftar"
      "peta        saring"
      "peta        info"
      "peta        aksi"
      "peta        daftar";
    column-gap: 24px;
  }
  [data-tema="2"] #page-dashboard #filter-titik { grid-area: saring; }
  [data-tema="2"] #page-dashboard #saring-info  { grid-area: info; }
  /* Kantong kosong = kartunya hidden, dan kolom kanan kehilangan penghuni
     baris pertamanya. Tanpa aturan ini Daftar Titik tetap mulai dari baris
     kedua dan berdiri 76px lebih rendah daripada kartu peta di sebelahnya. */
  [data-tema="2"] #page-dashboard .page-content:has(#kantong-saya[hidden]) {
    grid-template-rows: auto var(--judul-peta-h) auto auto auto minmax(260px, 1fr);
    grid-template-areas:
      "statistik   statistik"
      "judul-peta  judul-daftar"
      "peta        saring"
      "peta        info"
      "peta        aksi"
      "peta        daftar";
  }

  [data-tema="2"] #page-dashboard .stats-row {
    grid-template-columns: 1fr 1fr 1fr 1.7fr;
    gap: 16px;
    margin-bottom: 24px;
  }
  /* Akun tanpa izin dasbor.omzet cuma punya dua kartu: dijajarkan penuh. */
  [data-tema="2"] #page-dashboard .stats-row:has(#kartu-omzet[hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  [data-tema="2"] #page-dashboard .stat-card { padding: 20px 22px; }
  [data-tema="2"] #page-dashboard .stat-card .stat-label { font-size: .75rem; margin-bottom: 12px; }
  /* Mengecil bersama layar: di 1024px kartu omzet tinggal ±200px, dan angka
     jutaan pada ukuran penuh sudah menyentuh tepinya. */
  [data-tema="2"] #page-dashboard .stat-card .stat-nilai {
    font-size: clamp(1.5rem, 2.5vw, 2.375rem);
    white-space: nowrap;
  }
  /* Di layar lebar keempatnya kartu biasa lagi: bentuk mendatar yang dipasang
     app.css untuk dua kartu "hari ini" dikembalikan ke tegak. */
  [data-tema="2"] #kartu-terjual-hari,
  [data-tema="2"] #kartu-omzet {
    grid-column: auto;
    display: block;
    padding: 20px 22px;
  }
  [data-tema="2"] #kartu-terjual-hari .stat-nilai { text-align: left; }
  [data-tema="2"] #kartu-terjual-hari .stat-label { margin-bottom: 12px; }

  [data-tema="2"] #page-dashboard #head-peta {
    align-self: stretch;
    padding: 20px 20px 16px;
  }
  [data-tema="2"] #page-dashboard .map-wrap.admin-map {
    height: 100%;
    margin-bottom: 0;
    padding: 0 20px 20px;
  }
  [data-tema="2"] #page-dashboard .section-title { font-size: 1.125rem; }

  [data-tema="2"] #page-dashboard #kantong-saya {
    align-self: start;
    margin-bottom: 24px;
    padding: 20px;
  }
  /* Di kolom kanan Kantong Saya berupa daftar berbaris, bukan kotak. */
  [data-tema="2"] #page-dashboard #kantong-saya-isi:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 8px;
  }
  [data-tema="2"] #page-dashboard #kantong-saya-isi .inv-mutasi {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    background: none;
    border-top: 1px solid var(--divider);
    border-radius: 0;
  }
  [data-tema="2"] #page-dashboard #kantong-saya-isi .inv-mutasi-kiri {
    display: block;
    flex: 1;
    min-width: 0;
  }
  [data-tema="2"] #page-dashboard #kantong-saya-isi .inv-mutasi-kiri > div:first-child { font-size: .9375rem; }
  [data-tema="2"] #page-dashboard #kantong-saya-isi .inv-sub {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: .78rem;
  }
  [data-tema="2"] #page-dashboard #kantong-saya-isi .inv-sub::before {
    content: "";
    width: 13px;
    height: 13px;
    flex: none;
    background: currentColor;
    -webkit-mask: var(--ik-jam) center / contain no-repeat;
    mask: var(--ik-jam) center / contain no-repeat;
  }

  [data-tema="2"] #page-dashboard #head-daftar { padding: 20px 20px 14px; }
  [data-tema="2"] #page-dashboard #head-daftar .section-title {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  [data-tema="2"] #page-dashboard #head-daftar .section-title::before {
    content: "";
    width: 20px;
    height: 20px;
    flex: none;
    background: var(--brand-teks);
    -webkit-mask: var(--ik-pin) center / contain no-repeat;
    mask: var(--ik-pin) center / contain no-repeat;
  }
  [data-tema="2"] #page-dashboard #filter-titik,
  [data-tema="2"] #page-dashboard #saring-info,
  [data-tema="2"] #page-dashboard #aksi-diambil,
  [data-tema="2"] #page-dashboard #list-titik {
    padding-left: 20px;
    padding-right: 20px;
  }
  [data-tema="2"] #page-dashboard #list-titik { padding-right: 14px; padding-bottom: 8px; }
  [data-tema="2"] #page-dashboard .aksi-tombol { min-height: 34px; }

  /* Tombol tambah duduk di sudut kanan-bawah PETA, bukan sudut layar: di tema
     ini sudut layar ditempati Daftar Titik. Jaraknya = tepi halaman (32) +
     kolom kanan + sela kolom (24) + tepi kartu peta (20) + napas (16). */
  [data-tema="2"] .fab {
    right: calc(var(--kol-kanan) + 92px);
    bottom: 68px;
  }
}


/* ████████████████████████████████████████████████████████████
   TEMA 3 — tegas berwarna
   Garis hitam tebal, bayangan keras tanpa kabur, blok warna cerah,
   Bricolage Grotesque untuk judul dan angka. Di mode malam garisnya
   berbalik jadi krem di atas latar gelap; blok warnanya tetap.
   ████████████████████████████████████████████████████████████ */

/* ---------- 3.1 Token ---------- */
[data-tema="3"] [data-theme="admin"] {
  /* Milik tema ini. --garis dipakai tepi DAN bayangan; --tinta adalah
     bidang pekat (tombol utama, menu bawah, pil) dengan --on-tinta di atasnya. */
  --garis:    #111111;
  --tinta:    #111111;
  --on-tinta: #FFFFFF;
  --tebal:    2.5px;
  --kuning:   #FFD23F;
  --hijau:    #2BD46C;
  --biru:     #2D5BFF;
  --jingga:   #FF5B14;
  --jambon:   #FF7AD9;
  --langit:   #8FB0FF;
  --nav-latar: #111111;
  --nav-teks:  #FFFFFF;

  --bg:          #F2EFE6;
  --surface:     #FFFFFF;
  --surface-alt: #F7F4EC;
  --surface-2:   #FBF9F4;
  --border:      var(--garis);
  --border-kuat: var(--garis);
  --divider:     #CFC9BA;

  --text:   #111111;
  --text-2: #3D3D3D;
  --text-3: #5C5A55;

  --brand:        var(--tinta);
  --brand-hover:  #2B2B2B;
  --brand-press:  #000000;
  --brand-soft:   var(--kuning);
  --brand-border: var(--garis);
  --brand-teks:   #111111;
  --on-brand:     var(--on-tinta);

  --aksen:        var(--jingga);
  --aksen-hover:  #FF7A40;
  --aksen-press:  #E24A08;
  --aksen-soft:   #FFE3D4;
  --aksen-border: var(--garis);
  --aksen-teks:   #B13700;
  --on-aksen:     #111111;

  --ok:    #0B7A36;
  --warn:  #8A5A00;
  --error: #C81E1E;
  --info:  #1D3FCC;
  --ok-soft:    #D6F7E2;
  --warn-soft:  #FFF1BF;
  --error-soft: #FFE1DC;
  --info-soft:  #DCE5FF;
  --on-status:  #FFFFFF;

  --shadow-xs: 2px 2px 0 var(--garis);
  --shadow-sm: 3px 3px 0 var(--garis);
  --shadow-md: 4px 4px 0 var(--garis);
  --shadow-lg: 5px 5px 0 var(--garis);
  --shadow-xl: 7px 7px 0 var(--garis);
  --shadow-brand: 4px 4px 0 var(--garis);

  --kaca:        #FFFFFF;
  --kaca-border: var(--garis);

  --font-display: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;
  --font-body:    'Archivo', system-ui, -apple-system, sans-serif;
  --font-angka:   'Archivo', system-ui, sans-serif;

  --r-sm: 12px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-xl: 22px;
}

/* ---------- 3.1b Token mode malam ----------
   Setiap warna di blok atas diulang di sini — lihat aturan main no. 3. */
[data-tema="3"][data-mode="gelap"] [data-theme="admin"] {
  --garis:    #EDE8DA;
  --tinta:    #F5F1E6;
  --on-tinta: #111111;
  --nav-latar: #0B0A08;
  --nav-teks:  #F5F1E6;

  --bg:          #1E1B16;
  --surface:     #2A2620;
  --surface-alt: #353029;
  --surface-2:   #302B24;
  --border:      var(--garis);
  --border-kuat: var(--garis);
  --divider:     #4A443A;

  --text:   #F5F1E6;
  --text-2: #D2CBBB;
  --text-3: #AAA292;

  --brand:        var(--tinta);
  --brand-hover:  #FFFFFF;
  --brand-press:  #DAD4C4;
  /* Kuning terang tidak bisa jadi latar lembut di sini: --brand-teks juga
     dipakai sebagai warna tulisan di atas permukaan gelap, jadi pasangannya
     dibalik — latar zaitun tua, tulisannya yang kuning. */
  --brand-soft:   #4B4014;
  --brand-border: var(--garis);
  --brand-teks:   #FFD23F;
  --on-brand:     var(--on-tinta);

  --aksen:        var(--jingga);
  --aksen-hover:  #FF7A40;
  --aksen-press:  #E24A08;
  --aksen-soft:   #4A2412;
  --aksen-border: var(--garis);
  --aksen-teks:   #FF9A6B;
  --on-aksen:     #111111;

  --ok:    #5BE08F;
  --warn:  #FFD23F;
  --error: #FF8A75;
  --info:  #9DB4FF;
  --ok-soft:    #173A25;
  --warn-soft:  #3F3410;
  --error-soft: #45211B;
  --info-soft:  #1F2B52;
  --on-status:  #111111;

  --shadow-xs: 2px 2px 0 var(--garis);
  --shadow-sm: 3px 3px 0 var(--garis);
  --shadow-md: 4px 4px 0 var(--garis);
  --shadow-lg: 5px 5px 0 var(--garis);
  --shadow-xl: 7px 7px 0 var(--garis);
  --shadow-brand: 4px 4px 0 var(--garis);

  --kaca:        #2A2620;
  --kaca-border: var(--garis);
}

/* ---------- 3.2 Bilah atas ---------- */
[data-tema="3"] .topbar {
  padding: 14px var(--sp-4) 12px;
  padding-top: calc(14px + env(safe-area-inset-top));
  background: var(--bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
}
[data-tema="3"] .topbar-logo img { box-shadow: none; }
[data-tema="3"] .topbar-title {
  font-size: 1.3125rem;
  line-height: 1;
  letter-spacing: 0;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--text);
}
[data-tema="3"] .topbar-subtitle {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-2);
}

[data-tema="3"] .topbar-right { gap: 4px; }
[data-tema="3"] .topbar-btn {
  width: 44px;
  height: 44px;
  border: var(--tebal) solid var(--garis);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
}
[data-tema="3"] .topbar-btn:active { background: var(--kuning); color: #111111; }
[data-tema="3"] #btn-notif { background: var(--kuning); color: #111111; }
[data-tema="3"] .notif-badge {
  top: -9px;
  right: -8px;
  min-width: 22px;
  height: 21px;
  line-height: 17px;
  border: 2px solid #111111;
  background: var(--jingga);
  color: #111111;
  font-size: .6875rem;
  box-shadow: none;
}

@media (max-width: 400px) {
  [data-tema="3"] .topbar-btn { width: 40px; height: 40px; }
}
@media (max-width: 360px) {
  [data-tema="3"] .topbar-btn { width: 36px; height: 36px; border-radius: 10px; border-width: 2px; }
}

/* Penanda toko tutup: blok kuning bertepi tebal, senada tombol notifikasi. */
[data-tema="3"] .banner-toko {
  margin: 0 var(--sp-4) 10px;
  border: var(--tebal) solid var(--garis);
  border-radius: 14px;
  background: var(--kuning);
  color: #111111;
  font-weight: 600;
  box-shadow: 3px 3px 0 var(--garis);
}
[data-tema="3"] .banner-toko strong { color: #111111; }
[data-tema="3"] .banner-komeet { background: var(--langit); }
[data-tema="3"] .banner-toko-tombol {
  border: var(--tebal) solid #111111;
  border-radius: 10px;
  background: #111111;
  color: #FFFFFF;
}

/* ---------- 3.3 Menu bawah (HP) ----------
   Bidang hitam; pil geser milik Tema 1 dipakai apa adanya, diwarnai kuning. */
[data-tema="3"] .bottom-nav {
  bottom: calc(14px + env(safe-area-inset-bottom));
  background: var(--nav-latar);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: var(--tebal) solid var(--garis);
  border-radius: 22px;
  box-shadow: none;
}
[data-tema="3"] .nav-indikator {
  background: var(--kuning);
  border: 0;
  border-radius: 16px;
}
[data-tema="3"] .nav-item {
  padding: 10px 4px 9px;
  gap: 4px;
  border-radius: 16px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--nav-teks);
}
[data-tema="3"] .nav-item.active { color: #111111; font-weight: 800; }
[data-tema="3"] .nav-item span.nav-label { opacity: 1; transform: none; }
[data-tema="3"] .nav-item svg,
[data-tema="3"] .nav-item.active svg { transform: none; stroke-width: 2.2; }
[data-tema="3"] .nav-item:active svg { transform: scale(.86); }
[data-tema="3"] .nav-item:focus-visible { outline-color: var(--kuning); }
[data-tema="3"] .nav-badge {
  top: -8px;
  right: -12px;
  min-width: 19px;
  height: 19px;
  line-height: 15px;
  border: 2px solid #111111;
  background: var(--jingga);
  color: #111111;
  font-size: .65rem;
  box-shadow: none;
}

/* ---------- 3.4 Tombol tambah ---------- */
[data-tema="3"] .fab {
  right: 18px;
  bottom: calc(102px + env(safe-area-inset-bottom));
  width: 62px;
  height: 62px;
  border: var(--tebal) solid #111111;
  border-radius: 18px;
  background: var(--jingga);
  color: #111111;
  box-shadow: 4px 4px 0 var(--garis);
}
[data-tema="3"] .fab:active { box-shadow: 1px 1px 0 var(--garis); }

/* ---------- 3.5 Komponen umum ----------
   Token sudah menghitamkan semua tepi 1px. Yang di bawah ini menebalkan
   benda-benda utamanya, supaya halaman lain serupa dengan beranda. */
[data-tema="3"] .btn {
  border: var(--tebal) solid var(--garis);
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: 3px 3px 0 var(--garis);
}
/* Ditekan = tombolnya turun menimpa bayangannya sendiri. */
[data-tema="3"] .btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--garis);
}
[data-tema="3"] .btn-kedua,
[data-tema="3"] .btn-kecil { background: var(--surface); color: var(--text); }
[data-tema="3"] .btn-kecil { border-width: 2px; box-shadow: 2px 2px 0 var(--garis); }

[data-tema="3"] .input {
  border: var(--tebal) solid var(--garis);
}
[data-tema="3"] .input:focus {
  border-color: var(--garis);
  box-shadow: 3px 3px 0 var(--kuning);
}

[data-tema="3"] .kartu,
[data-tema="3"] .form-section,
[data-tema="3"] .review-item,
[data-tema="3"] .user-item,
[data-tema="3"] .report-table-card,
[data-tema="3"] .notif-panel,
[data-tema="3"] .tema-opsi {
  border: var(--tebal) solid var(--garis);
  box-shadow: 3px 3px 0 var(--garis);
}
[data-tema="3"] .review-item { border-left-width: 8px; border-left-color: var(--kuning); }
[data-tema="3"] .tema-opsi[aria-pressed="true"] {
  border-color: var(--garis);
  background: var(--kuning);
  color: #111111;
  box-shadow: 4px 4px 0 var(--garis);
}
[data-tema="3"] .tema-opsi[aria-pressed="true"] .tema-ket { color: #111111; }

[data-tema="3"] .segmen {
  padding: 3px;
  border: var(--tebal) solid var(--garis);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--garis);
}
[data-tema="3"] .segmen-btn { border-radius: 9px; font-weight: 700; color: var(--text); }
[data-tema="3"] .segmen-btn[aria-pressed="true"] {
  background: var(--tinta);
  color: var(--on-tinta);
  box-shadow: none;
}
[data-tema="3"] .segmen-btn[data-ikut="1"] {
  box-shadow: inset 0 0 0 2px var(--garis);
  color: var(--text);
}

[data-tema="3"] .sheet {
  border: var(--tebal) solid var(--garis);
  border-bottom: 0;
  box-shadow: none;
}
[data-tema="3"] .toast {
  background: var(--tinta);
  color: var(--on-tinta);
  border: 2px solid var(--garis);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--kuning);
}
[data-tema="3"] .menu-ikon { border: 2px solid var(--garis); color: #111111; background: var(--kuning); }
[data-tema="3"] .menu-item.bahaya .menu-ikon { background: var(--jingga); color: #111111; }

[data-tema="3"] .section-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
[data-tema="3"] .section-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: var(--tebal) solid var(--garis);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: .84rem;
  font-weight: 800;
  box-shadow: 3px 3px 0 var(--garis);
}
[data-tema="3"] .section-action:active {
  transform: translate(2px, 2px);
  background: var(--surface);
  box-shadow: 1px 1px 0 var(--garis);
}
[data-tema="3"] #head-peta .section-action { background: var(--kuning); color: #111111; }
[data-tema="3"] #head-peta .section-action::before,
[data-tema="3"] #btn-filter-titik::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--ik-segar) center / contain no-repeat;
  mask: var(--ik-segar) center / contain no-repeat;
}
[data-tema="3"] #btn-filter-titik::before {
  -webkit-mask-image: var(--ik-saring);
  mask-image: var(--ik-saring);
}
[data-tema="3"] #btn-filter-titik[aria-expanded="true"] { background: var(--kuning); color: #111111; }

/* Lencana status: bertepi hitam, diisi warna statusnya sendiri yang
   dipudarkan. Warnanya tetap dari Setelan — lihat aturan main no. 5. */
[data-tema="3"] .badge {
  border: 2px solid var(--garis);
  background: color-mix(in srgb, currentColor 20%, var(--surface));
  font-weight: 800;
  letter-spacing: .06em;
}
[data-tema="3"] .badge::before { box-shadow: 0 0 0 1.5px var(--garis); }
/* Tulisan TERSEDIA netral, jadi isinya diambil dari warna titiknya. */
[data-tema="3"] .badge[data-status="TERSEDIA"] {
  background: color-mix(in srgb, var(--warna-titik, var(--st-tersedia)) 24%, var(--surface));
}
[data-tema="3"] .chip-saring[aria-pressed="true"] {
  border-color: var(--garis);
  box-shadow: 2px 2px 0 var(--garis);
}

/* ---------- 3.6 Beranda: kartu statistik ---------- */
/* Lihat catatan yang sama di bagian 2.6: hidden harus menang atas display. */
[data-tema="3"] #page-dashboard #kartu-omzet[hidden],
[data-tema="3"] #page-dashboard #kartu-terjual-hari[hidden] { display: none; }

[data-tema="3"] .stat-card {
  border: var(--tebal) solid var(--garis);
  box-shadow: 3px 3px 0 var(--garis);
}
[data-tema="3"] .stat-card::before { display: none; }
[data-tema="3"] .stat-card .stat-label { font-weight: 800; letter-spacing: .1em; }
[data-tema="3"] .stat-card .stat-nilai { letter-spacing: -.01em; }

[data-tema="3"] #page-dashboard .stats-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 10px;
  margin-bottom: 20px;
}
/* Akun tanpa izin dasbor.omzet cuma punya dua kartu (Tersedia, Terjual):
   kisi tiga kolomnya dirapatkan jadi dua supaya tidak ada kolom kosong. */
[data-tema="3"] #page-dashboard .stats-row:has(#kartu-omzet[hidden]) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
[data-tema="3"] #page-dashboard .stat-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 8px;
  min-height: 108px;
  padding: 12px;
  color: #111111;
}
[data-tema="3"] #page-dashboard .stat-card .stat-label {
  margin-bottom: 0;
  font-size: .6875rem;
  line-height: 1.25;
  color: inherit;
}
[data-tema="3"] #page-dashboard .stat-card .stat-nilai {
  font-size: 2.25rem;
  line-height: 1;
  text-align: left;
  color: inherit;
}
/* Warna blok: Tersedia hijau, Terjual biru, Terjual hari ini kuning. Dua
   yang pertama tidak punya id, jadi dipilih lewat urutannya di markup. */
[data-tema="3"] #page-dashboard .stats-row > .stat-card:nth-child(1) { background: var(--hijau); }
[data-tema="3"] #page-dashboard .stats-row > .stat-card:nth-child(2) { background: var(--biru); color: #FFFFFF; }
[data-tema="3"] #page-dashboard #kartu-terjual-hari {
  grid-column: auto;
  padding: 12px;
  background: var(--kuning);
}

[data-tema="3"] #page-dashboard #kartu-omzet {
  order: -1;
  grid-column: 1 / -1;
  gap: 12px;
  min-height: 0;
  padding: 18px 20px 22px;
  background: var(--jingga);
  border-radius: 22px;
  box-shadow: 5px 5px 0 var(--garis);
}
/* Ekor meteor di sudut kanan-bawah: satu lingkaran dan dua goresan miring.
   Murni hiasan, jadi digambar gradien dan tidak menangkap ketukan. */
[data-tema="3"] #page-dashboard #kartu-omzet::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background:
    radial-gradient(circle at calc(100% - 78px) calc(100% + 6px), rgba(17, 17, 17, .13) 0 46px, transparent 47px),
    linear-gradient(135deg, transparent 0 71%, rgba(17, 17, 17, .11) 71% 73%, transparent 73% 79%, rgba(17, 17, 17, .11) 79% 80.5%, transparent 80.5%);
  pointer-events: none;
}
[data-tema="3"] #page-dashboard #kartu-omzet .stat-label {
  position: relative;
  font-size: .8125rem;
  letter-spacing: .16em;
}
[data-tema="3"] #page-dashboard #kartu-omzet .stat-label.omzet-label { justify-content: space-between; }
[data-tema="3"] #page-dashboard #kartu-omzet .stat-nilai {
  position: relative;
  font-size: clamp(2rem, 11vw, 2.875rem);
  line-height: .95;
  letter-spacing: -.03em;
  white-space: nowrap;
}
[data-tema="3"] .omzet-mata {
  width: 44px;
  height: 44px;
  border: var(--tebal) solid #111111;
  border-radius: 12px;
  background: #FFFFFF;
  color: #111111;
  box-shadow: 3px 3px 0 #111111;
}
[data-tema="3"] .omzet-mata:hover { background: #FFFFFF; color: #111111; }

/* ---------- 3.7 Beranda: Kantong Saya — tiket ---------- */
[data-tema="3"] #kantong-saya { margin-bottom: 20px; }
[data-tema="3"] #kantong-saya .section-header { margin-bottom: 0; }
[data-tema="3"] #kantong-saya .section-title { font-size: 1.5rem; }
[data-tema="3"] .kantong-panah { width: 20px; height: 20px; color: var(--text); stroke-width: 3; }
[data-tema="3"] #kantong-saya-ringkas {
  padding: 6px 11px;
  border-radius: var(--r-full);
  background: var(--tinta);
  color: var(--on-tinta);
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}

[data-tema="3"] #kantong-saya-isi:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
  /* Ruang untuk bayangan keras tiket paling kanan dan paling bawah. */
  padding: 0 3px 3px 0;
}
[data-tema="3"] #kantong-saya-isi .inv-mutasi {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-bottom: 0;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  border: var(--tebal) solid var(--garis);
  border-radius: 16px;
  box-shadow: 3px 3px 0 var(--garis);
  --tiket: var(--kuning);
}
[data-tema="3"] #kantong-saya-isi .inv-mutasi-kiri {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
}
[data-tema="3"] #kantong-saya-isi .inv-mutasi-kiri > div:first-child {
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.1;
}
[data-tema="3"] #kantong-saya-isi .inv-mutasi-kiri strong { font-weight: 800; }
[data-tema="3"] #kantong-saya-isi .inv-sub {
  margin-top: 0;
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-2);
}
/* Sobekan tiket: garis putus-putus, lalu potongan berwarna berisi jumlahnya. */
[data-tema="3"] #kantong-saya-isi .inv-mutasi-qty {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 14px;
  border-top: var(--tebal) dashed var(--garis);
  background: var(--tiket);
  color: #111111;
  font-family: inherit;
}
[data-tema="3"] #kantong-saya-isi .qty-angka {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1;
}
[data-tema="3"] #kantong-saya-isi .qty-satuan {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* Dua lubang setengah lingkaran di kiri-kanan garis sobekan. */
[data-tema="3"] #kantong-saya-isi .inv-mutasi::before,
[data-tema="3"] #kantong-saya-isi .inv-mutasi::after {
  content: "";
  position: absolute;
  bottom: 39px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: var(--tebal) solid var(--garis);
  border-radius: 50%;
  background: var(--bg);
}
[data-tema="3"] #kantong-saya-isi .inv-mutasi::before { left: -11px; }
[data-tema="3"] #kantong-saya-isi .inv-mutasi::after  { right: -11px; }

/* Warna sobekan per produk. Bawaannya bergilir menurut urutan; produk yang
   dikenal dipatok ke warnanya sendiri supaya tidak berganti waktu produk lain
   habis dan urutannya bergeser. */
[data-tema="3"] #kantong-saya-isi .inv-mutasi:nth-child(4n+2) { --tiket: var(--hijau); }
[data-tema="3"] #kantong-saya-isi .inv-mutasi:nth-child(4n+3) { --tiket: var(--jambon); }
[data-tema="3"] #kantong-saya-isi .inv-mutasi:nth-child(4n+4) { --tiket: var(--langit); }
[data-tema="3"] #kantong-saya-isi .inv-mutasi[data-kode="1GELON"]   { --tiket: var(--kuning); }
[data-tema="3"] #kantong-saya-isi .inv-mutasi[data-kode="MP2"]      { --tiket: var(--hijau); }
[data-tema="3"] #kantong-saya-isi .inv-mutasi[data-kode="SEPER"]    { --tiket: var(--jambon); }
[data-tema="3"] #kantong-saya-isi .inv-mutasi[data-kode="SEPOTONG"] { --tiket: var(--langit); }

/* ---------- 3.8 Beranda: Peta Sebaran ----------
   Judul dan petanya dua elemen bersaudara; digambar sebagai ruas atas dan
   ruas bawah satu kartu (penjelasannya di bagian 2.8). */
[data-tema="3"] #head-peta,
[data-tema="3"] #head-daftar {
  margin-bottom: 0;
  padding: 10px 10px 10px 16px;
  background: var(--surface);
  border: var(--tebal) solid var(--garis);
  border-radius: 20px 20px 0 0;
  box-shadow: 5px 5px 0 var(--garis);
}

[data-tema="3"] #page-dashboard .map-wrap.admin-map {
  margin-bottom: 25px;
  border: var(--tebal) solid var(--garis);
  border-top: 0;
  border-radius: 0 0 20px 20px;
  box-shadow: 5px 5px 0 var(--garis);
}

[data-tema="3"] .leaflet-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 0 !important;
  background: none;
  box-shadow: none !important;
}
[data-tema="3"] .leaflet-bar a,
[data-tema="3"] .leaflet-bar a:first-child,
[data-tema="3"] .leaflet-bar a:last-child {
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  line-height: 36px;
  border: var(--tebal) solid var(--garis);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  box-shadow: 3px 3px 0 var(--garis);
}
[data-tema="3"] .pengalih-lapisan {
  padding: 3px;
  gap: 3px;
  border: var(--tebal) solid var(--garis);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: 3px 3px 0 var(--garis);
}
[data-tema="3"] .pengalih-lapisan button {
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 700;
}
[data-tema="3"] .pengalih-lapisan button[aria-pressed="true"] {
  background: var(--tinta);
  color: var(--on-tinta);
  font-weight: 800;
}
[data-tema="3"] .atribusi-lapisan {
  border: 1.5px solid var(--garis);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
}

/* ---------- 3.9 Beranda: Daftar Titik ---------- */
[data-tema="3"] #filter-titik,
[data-tema="3"] #saring-info,
[data-tema="3"] #aksi-diambil,
[data-tema="3"] #list-titik {
  margin-bottom: 0;
  padding-left: 14px;
  padding-right: 14px;
  background: var(--surface);
  border-left: var(--tebal) solid var(--garis);
  border-right: var(--tebal) solid var(--garis);
  box-shadow: 5px 5px 0 var(--garis);
}
/* Tiap ruas yang tampil membawa jarak atasnya sendiri, daftar juga — jadi
   jarak antar-ruas sama berapa pun ruas yang sedang tersembunyi. */
[data-tema="3"] #filter-titik:not([hidden]),
[data-tema="3"] #saring-info:not([hidden]),
[data-tema="3"] #aksi-diambil:not(:empty) { padding-top: 14px; }
[data-tema="3"] #list-titik {
  margin-bottom: 25px;
  padding-top: 14px;
  padding-bottom: 2px;
  border-bottom: var(--tebal) solid var(--garis);
  border-radius: 0 0 20px 20px;
}

[data-tema="3"] .aksi-kotak {
  gap: 12px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}
[data-tema="3"] .aksi-baris {
  flex-wrap: nowrap !important;
  gap: 8px !important;
  padding: 5px 5px 5px 12px;
  border: 2px dashed var(--garis);
  border-radius: 14px;
}
[data-tema="3"] .aksi-teks {
  flex: 1;
  min-width: 0;
  font-size: .8125rem !important;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text) !important;
}
[data-tema="3"] .aksi-jml {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
}
[data-tema="3"] .aksi-tombol {
  flex: none;
  min-height: 40px;
  padding: 0 12px !important;
  border: 0;
  border-radius: 10px;
  background: var(--tinta);
  color: var(--on-tinta);
  font-size: .8125rem !important;
  font-weight: 700;
  box-shadow: none;
}
[data-tema="3"] .aksi-tombol:active { transform: scale(.96); background: var(--tinta); box-shadow: none; }

[data-tema="3"] .titik-item {
  gap: 12px;
  padding: 12px 14px;
  border: var(--tebal) solid var(--garis);
  border-radius: 16px;
  box-shadow: none;
}
[data-tema="3"] .titik-item:active { border-color: var(--garis); box-shadow: 3px 3px 0 var(--garis); }
[data-tema="3"] .titik-dot {
  box-sizing: content-box;
  width: 9px;
  height: 9px;
  border: var(--tebal) solid var(--garis);
}
[data-tema="3"] .titik-kode {
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0;
}
[data-tema="3"] .titik-area { font-size: .78rem; font-weight: 500; color: var(--text-2); }
[data-tema="3"] .titik-harga {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  margin-bottom: 5px;
}
[data-tema="3"] .titik-item .badge {
  padding: 2px 8px !important;
  font-size: .66rem !important;
  letter-spacing: .08em;
}
[data-tema="3"] .titik-kosong { border: 2px dashed var(--garis); }

/* ---------- 3.10 Layar lebar ----------
   Tidak ada sidebar: menu naik ke bilah atas, di antara logo dan tombol.
   Beranda bergulir seperti halaman biasa — omzet besar dan tiga batang
   statistik di puncak, tiket Kantong Saya sebaris, lalu peta bersisian
   dengan Daftar Titik yang setinggi petanya dan bergulir sendiri. */
@media (min-width: 1024px) {
  [data-tema="3"] {
    --sidebar-w:    0px;
    --sidebar-sela: 0px;
    --topbar-h:     76px;
  }

  [data-tema="3"] .app-shell { padding-left: 0; }

  [data-tema="3"] .topbar {
    box-sizing: border-box;
    min-height: var(--topbar-h);
    margin: 24px 36px 0;
    padding: 0 14px;
    background: var(--surface);
    border: var(--tebal) solid var(--garis);
    border-radius: 20px;
    box-shadow: 5px 5px 0 var(--garis);
  }
  [data-tema="3"] .topbar-logo { gap: 12px; }
  [data-tema="3"] .topbar-logo img { width: 46px; height: 46px; }
  [data-tema="3"] .topbar-title { font-size: 1.75rem; letter-spacing: .02em; }
  [data-tema="3"] .topbar-subtitle { font-size: .8125rem; }
  [data-tema="3"] .topbar-right { gap: 10px; }
  [data-tema="3"] .banner-toko { margin: 16px 41px 0 36px; }
  [data-tema="3"] .topbar-btn { width: 46px; height: 46px; }

  /* Menu: elemen yang sama dengan dock HP, ditambatkan ke tengah bilah atas.
     Tingginya 46px di dalam bilah 76px yang turun 24px dari puncak layar. */
  [data-tema="3"] .bottom-nav {
    z-index: 101;
    top: 39px;
    bottom: auto;
    left: 50%;
    width: auto;
    transform: translateX(-50%);
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  [data-tema="3"] .bottom-nav.tersembunyi { transform: translateX(-50%); }
  [data-tema="3"] .nav-item {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: center;
    height: 46px;
    padding: 0 16px;
    gap: 8px;
    border-radius: 14px;
    font-size: .9375rem;
    color: var(--text);
  }
  [data-tema="3"] .nav-item.active { color: var(--on-tinta); }
  [data-tema="3"] .nav-item:focus-visible { outline-color: var(--garis); }
  [data-tema="3"] .nav-item svg { width: 19px; height: 19px; }
  [data-tema="3"] .nav-indikator { background: var(--tinta); border-radius: 14px; }

  /* Angka mengikuti labelnya, bukan menempel di sudut ikon. */
  [data-tema="3"] .nav-ikon-wadah { display: contents; }
  [data-tema="3"] .nav-badge {
    position: static;
    order: 3;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    line-height: 20px;
    font-size: .75rem;
  }

  /* Beranda. */
  [data-tema="3"] #page-dashboard { overflow-y: auto; }
  [data-tema="3"] #page-dashboard .page-content {
    --judul-peta-h: 73px;
    --peta-h: clamp(420px, calc(100dvh - 400px), 640px);
    max-width: none;
    height: auto;
    padding: 28px 41px 48px 36px;
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-rows: auto auto var(--judul-peta-h) auto auto auto minmax(0, 1fr);
    grid-template-areas:
      "statistik   statistik"
      "kantong     kantong"
      "judul-peta  judul-daftar"
      "peta        saring"
      "peta        info"
      "peta        aksi"
      "peta        daftar";
    column-gap: 24px;
  }
  [data-tema="3"] #page-dashboard #filter-titik { grid-area: saring; }
  [data-tema="3"] #page-dashboard #saring-info  { grid-area: info; }

  /* Omzet di kiri setinggi tiga batang statistik di kanannya. */
  [data-tema="3"] #page-dashboard .stats-row {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    grid-template-rows: repeat(3, 68px);
    gap: 16px 24px;
    margin-bottom: 28px;
  }
  [data-tema="3"] #page-dashboard .stat-card {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    min-height: 0;
    padding: 0 22px;
    border-radius: 18px;
    box-shadow: 4px 4px 0 var(--garis);
  }
  /* Tanpa kartu omzet tidak ada yang mengisi kolom kiri: dua batang yang
     tersisa dijajarkan selebar halaman. */
  [data-tema="3"] #page-dashboard .stats-row:has(#kartu-omzet[hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 68px;
  }
  [data-tema="3"] #page-dashboard .stats-row:has(#kartu-omzet[hidden]) .stat-card { grid-column: auto; }
  [data-tema="3"] #page-dashboard .stat-card .stat-label { font-size: .84rem; letter-spacing: .14em; }
  [data-tema="3"] #page-dashboard .stat-card .stat-nilai { font-size: 2.5rem; }
  [data-tema="3"] #page-dashboard #kartu-terjual-hari { grid-column: 2; padding: 0 22px; }
  [data-tema="3"] #page-dashboard #kartu-omzet {
    order: 0;
    grid-column: 1;
    grid-row: 1 / span 3;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    padding: 26px 30px;
    border-radius: 26px;
    box-shadow: 7px 7px 0 var(--garis);
  }
  [data-tema="3"] #page-dashboard #kartu-omzet .stat-label { font-size: .875rem; }
  [data-tema="3"] #page-dashboard #kartu-omzet .stat-nilai {
    font-size: clamp(3rem, 6vw, 5.5rem);
    letter-spacing: -.035em;
  }
  [data-tema="3"] #page-dashboard #kartu-omzet::before {
    background:
      radial-gradient(circle at calc(100% - 130px) calc(100% + 10px), rgba(17, 17, 17, .13) 0 62px, transparent 63px),
      linear-gradient(135deg, transparent 0 74%, rgba(17, 17, 17, .11) 74% 75.5%, transparent 75.5% 81%, rgba(17, 17, 17, .11) 81% 82%, transparent 82%);
  }
  [data-tema="3"] .omzet-mata { width: 46px; height: 46px; }

  /* Tiket berbaring: nama di kiri, sobekan berwarna di kanan. */
  [data-tema="3"] #page-dashboard #kantong-saya { margin-bottom: 28px; }
  [data-tema="3"] #page-dashboard #kantong-saya .section-header { justify-content: flex-start; gap: 14px; }
  [data-tema="3"] #page-dashboard .kantong-judul { flex: 0 1 auto; }
  [data-tema="3"] #page-dashboard #kantong-saya .section-title { font-size: 1.875rem; }
  [data-tema="3"] #page-dashboard #kantong-saya-ringkas { padding: 7px 13px; font-size: .8125rem; }
  [data-tema="3"] #page-dashboard #kantong-saya-isi:not([hidden]) {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    margin-top: 16px;
    padding: 0 5px 4px 0;
  }
  [data-tema="3"] #page-dashboard #kantong-saya-isi .inv-mutasi {
    flex-direction: row;
    min-height: 100px;
    border-radius: 18px;
    box-shadow: 4px 4px 0 var(--garis);
  }
  [data-tema="3"] #page-dashboard #kantong-saya-isi .inv-mutasi-kiri {
    flex: 1;
    justify-content: center;
    gap: 6px;
    padding: 16px 18px;
  }
  [data-tema="3"] #page-dashboard #kantong-saya-isi .inv-mutasi-kiri > div:first-child { font-size: 1.375rem; }
  [data-tema="3"] #page-dashboard #kantong-saya-isi .inv-sub { font-size: .8125rem; }
  [data-tema="3"] #page-dashboard #kantong-saya-isi .inv-mutasi-qty {
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 96px;
    padding: 0;
    border-top: 0;
    border-left: var(--tebal) dashed var(--garis);
  }
  [data-tema="3"] #page-dashboard #kantong-saya-isi .qty-angka { font-size: 2.5rem; }
  [data-tema="3"] #page-dashboard #kantong-saya-isi .inv-mutasi::before,
  [data-tema="3"] #page-dashboard #kantong-saya-isi .inv-mutasi::after {
    left: auto;
    right: 86px;
    width: 20px;
    height: 20px;
  }
  [data-tema="3"] #page-dashboard #kantong-saya-isi .inv-mutasi::before { top: -12px; bottom: auto; }
  [data-tema="3"] #page-dashboard #kantong-saya-isi .inv-mutasi::after  { top: auto; bottom: -12px; }

  [data-tema="3"] #page-dashboard #head-peta,
  [data-tema="3"] #page-dashboard #head-daftar {
    align-self: stretch;
    padding: 12px 16px 12px 22px;
    border-radius: 22px 22px 0 0;
    box-shadow: 6px 6px 0 var(--garis);
  }
  [data-tema="3"] #page-dashboard #head-peta .section-title,
  [data-tema="3"] #page-dashboard #head-daftar .section-title { font-size: 1.5rem; }

  [data-tema="3"] #page-dashboard .map-wrap.admin-map {
    align-self: start;
    height: var(--peta-h);
    margin-bottom: 0;
    border-radius: 0 0 22px 22px;
    box-shadow: 6px 6px 0 var(--garis);
  }

  [data-tema="3"] #page-dashboard #filter-titik,
  [data-tema="3"] #page-dashboard #saring-info,
  [data-tema="3"] #page-dashboard #aksi-diambil,
  [data-tema="3"] #page-dashboard #list-titik {
    padding-left: 18px;
    padding-right: 18px;
    box-shadow: 6px 6px 0 var(--garis);
  }
  [data-tema="3"] #page-dashboard #filter-titik:not([hidden]),
  [data-tema="3"] #page-dashboard #saring-info:not([hidden]),
  [data-tema="3"] #page-dashboard #aksi-diambil:not(:empty) { padding-top: 18px; }
  /* Daftar setinggi sisa kartunya (= tinggi peta) dan bergulir di dalam.
     contain: size membuat isinya tidak ikut menentukan tinggi baris grid —
     tanpa itu daftar 200 titik menarik barisnya sepanjang daftar itu. */
  [data-tema="3"] #page-dashboard #list-titik {
    contain: size;
    margin-bottom: 0;
    padding-top: 18px;
    padding-right: 12px;
    border-radius: 0 0 22px 22px;
  }

  /* Tombol tambah hitam berbayang jingga, di sudut kanan-bawah kolom peta. */
  [data-tema="3"] .fab {
    right: 482px;
    bottom: 36px;
    width: 66px;
    height: 66px;
    background: #111111;
    color: #FFFFFF;
    box-shadow: 5px 5px 0 var(--jingga);
  }
  [data-tema="3"] .fab:active { box-shadow: 2px 2px 0 var(--jingga); }
}

/* Antara 1024 dan 1240px logo, menu, dan empat tombol tidak muat sebaris
   dengan ukuran penuhnya: menu dirapatkan dan sub-judul logo dilepas. */
@media (min-width: 1024px) and (max-width: 1239.98px) {
  [data-tema="3"] .topbar-subtitle { display: none; }
  [data-tema="3"] .topbar-title { font-size: 1.375rem; }
  [data-tema="3"] .topbar-right { gap: 6px; }
  [data-tema="3"] .bottom-nav { gap: 2px; }
  [data-tema="3"] .nav-item { padding: 0 11px; gap: 6px; font-size: .875rem; }
}