/* ============================================================
   tema.css — ELANG, 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 ELANG */
  --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;
}

/* ---------- 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-waktu { font-size: .72rem; }
[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";
  }
  /* Daftar titik sudah dipindah ke sidebar (tataDaftarSidebar() di app.js,
     18 Okt 2026): kolom kanan tinggal Kantong, judul Daftar Titik + saringan,
     Jual Cepat, dan Siap Jual — keduanya dulu tanpa area dan cuma kebetulan
     jatuh di kolom kanan. Baris terakhir dibiarkan kosong dan menyerap sisa
     tinggi, supaya peta tetap setinggi layar. Dua aturan di atas tetap berlaku
     selama daftarnya belum dipindah (sekejap waktu halaman dimuat). */
  [data-tema="2"] #page-dashboard .page-content:not(:has(#list-titik)) {
    grid-template-rows: auto var(--judul-peta-h) auto auto auto auto auto auto minmax(0, 1fr);
    grid-template-areas:
      "statistik   statistik"
      "judul-peta  kantong"
      "peta        kantong"
      "peta        judul-daftar"
      "peta        saring"
      "peta        info"
      "peta        jual"
      "peta        siap"
      "peta        .";
  }
  [data-tema="2"] #page-dashboard .page-content:not(:has(#list-titik)):has(#kantong-saya[hidden]) {
    grid-template-rows: auto var(--judul-peta-h) auto auto auto auto minmax(0, 1fr);
    grid-template-areas:
      "statistik   statistik"
      "judul-peta  judul-daftar"
      "peta        saring"
      "peta        info"
      "peta        jual"
      "peta        siap"
      "peta        .";
  }
  [data-tema="2"] #page-dashboard #btn-jual-cepat { grid-area: jual; margin: 16px 0 0; }
  [data-tema="2"] #page-dashboard #siap-jual { grid-area: siap; margin: 20px 0 0; }

  /* Tanpa daftar di bawahnya, judul Daftar Titik jadi kartu utuh. Kalau
     strip saringan atau baris keterangan saringan sedang tampil, ruas yang
     paling bawah itulah yang menutup kartunya. */
  [data-tema="2"] #page-dashboard .page-content:not(:has(#list-titik)) #head-daftar {
    border-bottom: 1px solid var(--border);
    border-radius: 20px;
  }
  [data-tema="2"] #page-dashboard .page-content:not(:has(#list-titik)) #head-daftar:has(~ #filter-titik:not([hidden])),
  [data-tema="2"] #page-dashboard .page-content:not(:has(#list-titik)) #head-daftar:has(~ #saring-info:not([hidden])) {
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
  }
  [data-tema="2"] #page-dashboard .page-content:not(:has(#list-titik)) #saring-info:not([hidden]),
  [data-tema="2"] #page-dashboard .page-content:not(:has(#list-titik)) #filter-titik:not([hidden]):not(:has(~ #saring-info:not([hidden]))) {
    padding-top: 2px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    border-radius: 0 0 20px 20px;
  }

  /* Daftar titik di sidebar, di bawah menu. Wadahnya mengisi sisa tinggi
     sidebar dan daftarnya bergulir sendiri; isinya dipadatkan karena lebar
     sidebar cuma 216px. Hanya di beranda — di halaman lain sidebar kembali
     menu saja. Ruas kartu dari bagian 2.9 (latar, tepi, sudut) dilepas:
     sidebar sendiri sudah bidang putihnya. */
  [data-tema="2"] .nav-daftar:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--divider);
  }
  [data-tema="2"] .app-shell:has(#page-dashboard:not(.active)) .nav-daftar { display: none; }
  [data-tema="2"] .nav-daftar #aksi-diambil,
  [data-tema="2"] .nav-daftar #list-titik {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
  }
  [data-tema="2"] .nav-daftar #aksi-diambil:empty { display: none; }
  [data-tema="2"] .nav-daftar #list-titik {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Batang gulir di tepi sidebar, bukan menempel di kartu titik. */
    margin-right: -12px;
    padding-right: 8px;
  }
  [data-tema="2"] .nav-daftar .aksi-kotak { padding: 4px !important; }
  [data-tema="2"] .nav-daftar .aksi-baris { padding: 2px 2px 2px 6px; }
  [data-tema="2"] .nav-daftar .aksi-teks { font-size: .6875rem !important; }
  [data-tema="2"] .nav-daftar .aksi-sembunyi .aksi-teks::before { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; }
  [data-tema="2"] .nav-daftar .aksi-tombol { min-height: 28px; padding: 0 9px !important; font-size: .6875rem !important; }
  [data-tema="2"] .nav-daftar .titik-item {
    gap: 8px;
    margin-bottom: 8px;
    padding: 10px 10px 10px 13px;
    border-radius: 12px;
  }
  [data-tema="2"] .nav-daftar .titik-kode { font-size: .8125rem; }
  [data-tema="2"] .nav-daftar .titik-area { font-size: .6875rem; }
  [data-tema="2"] .nav-daftar .titik-waktu { font-size: .625rem; }
  [data-tema="2"] .nav-daftar .titik-harga { font-size: .8125rem; margin-bottom: 4px; }
  [data-tema="2"] .nav-daftar .titik-item .badge {
    padding: 2px 6px !important;
    font-size: .58rem !important;
  }
  [data-tema="2"] .nav-daftar .titik-kosong { font-size: .8125rem !important; padding: 16px 8px !important; }

  [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.

   18 Okt 2026 dibuat lebih minimalis atas permintaan Bos ("lebih
   minimalis tapi tetap tegas, perkecil kartu info terjual dll"): garis
   2px, bayangan keras cuma dua ukuran (--bayang untuk kartu/panel,
   --bayang-kecil untuk tombol), hiasan ekor meteor di kartu omzet
   dibuang, dan kartu statistik dipadatkan — di layar lebar omzet dan
   tiga angka lainnya jadi satu baris. Warna blok dan hurufnya 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:    2px;
  --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;

  /* Dua ukuran bayangan saja. Tiap aturan tema ini memakai salah satunya,
     bukan menulis angkanya sendiri, supaya kerasnya seragam di semua halaman. */
  --bayang:       3px 3px 0 var(--garis);
  --bayang-kecil: 2px 2px 0 var(--garis);
  --shadow-xs: 1px 1px 0 var(--garis);
  --shadow-sm: var(--bayang-kecil);
  --shadow-md: var(--bayang-kecil);
  --shadow-lg: var(--bayang);
  --shadow-xl: var(--bayang);
  --shadow-brand: var(--bayang-kecil);

  --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;

  --bayang:       3px 3px 0 var(--garis);
  --bayang-kecil: 2px 2px 0 var(--garis);
  --shadow-xs: 1px 1px 0 var(--garis);
  --shadow-sm: var(--bayang-kecil);
  --shadow-md: var(--bayang-kecil);
  --shadow-lg: var(--bayang);
  --shadow-xl: var(--bayang);
  --shadow-brand: var(--bayang-kecil);

  --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: var(--bayang-kecil);
}
[data-tema="3"] .banner-toko strong { color: #111111; }
[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: var(--bayang);
}
[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: var(--bayang-kecil);
}
/* Ditekan = tombolnya turun menimpa bayangannya sendiri. */
[data-tema="3"] .btn:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
[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: var(--bayang-kecil); }

[data-tema="3"] .input {
  border: var(--tebal) solid var(--garis);
}
[data-tema="3"] .input:focus {
  border-color: var(--garis);
  box-shadow: 2px 2px 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: var(--bayang-kecil);
}
[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: var(--bayang);
}
[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: var(--bayang);
}
[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: 2px 2px 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: var(--bayang-kecil);
}
[data-tema="3"] .section-action:active {
  transform: translate(2px, 2px);
  background: var(--surface);
  box-shadow: none;
}
[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: var(--bayang-kecil);
}

/* ---------- 3.6 Beranda: kartu statistik ----------
   Ringkas (18 Okt 2026): angkanya tetap paling tebal di layar, tapi kotaknya
   cuma setinggi label + angka. Di HP omzet satu bilah penuh, tiga angka lain
   sebaris di bawahnya; di layar lebar keempatnya satu baris (bagian 3.10). */
/* 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 {
  padding: 12px 14px;
  border: var(--tebal) solid var(--garis);
  box-shadow: var(--bayang);
}
[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: 10px;
  margin-bottom: 18px;
}
/* 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: 6px;
  min-height: 0;
  padding: 10px 12px;
  border-radius: 14px;
  color: #111111;
}
[data-tema="3"] #page-dashboard .stat-card .stat-label {
  margin-bottom: 0;
  font-size: .625rem;
  line-height: 1.25;
  color: inherit;
}
[data-tema="3"] #page-dashboard .stat-card .stat-nilai {
  font-size: 1.75rem;
  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: 10px 12px;
  background: var(--kuning);
}

/* Omzet: label di atas angka, tombol mata menempel di kanan-tengah kartu.
   Labelnya tidak lagi position: relative, jadi tombol itu berpatokan pada
   kartunya; ruang kanan kartu disisakan supaya angka tidak masuk ke bawahnya.
   Letaknya dihitung dengan top, bukan transform, karena tombol ini sudah
   memakai transform: scale() waktu ditekan. */
[data-tema="3"] #page-dashboard #kartu-omzet {
  order: -1;
  grid-column: 1 / -1;
  justify-content: center;
  gap: 4px;
  min-height: 0;
  padding: 12px 64px 12px 14px;
  background: var(--jingga);
}
[data-tema="3"] #page-dashboard #kartu-omzet .stat-label {
  position: static;
  font-size: .6875rem;
  letter-spacing: .14em;
}
[data-tema="3"] #page-dashboard #kartu-omzet .stat-nilai {
  font-size: clamp(1.625rem, 8vw, 2.125rem);
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
}
[data-tema="3"] .omzet-mata {
  width: 38px;
  height: 38px;
  border: var(--tebal) solid #111111;
  border-radius: 10px;
  background: #FFFFFF;
  color: #111111;
  box-shadow: 2px 2px 0 #111111;
}
[data-tema="3"] #page-dashboard #kartu-omzet .omzet-mata {
  position: absolute;
  top: calc(50% - 19px);
  right: 14px;
}
[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.25rem; }
[data-tema="3"] .kantong-panah { width: 20px; height: 20px; color: var(--text); stroke-width: 3; }
[data-tema="3"] .hadir-panah { width: 18px; height: 18px; 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: var(--bayang);
  --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: var(--bayang);
}

[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: var(--bayang);
}

[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: var(--bayang-kecil);
}
[data-tema="3"] .pengalih-lapisan {
  padding: 3px;
  gap: 3px;
  border: var(--tebal) solid var(--garis);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: var(--bayang-kecil);
}
[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: var(--bayang);
}
/* 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: var(--bayang-kecil); }
[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-waktu { font-size: .72rem; font-weight: 500; }
[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 dan tiga angka lainnya
   sebaris 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:     64px;
  }

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

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

  /* Menu: elemen yang sama dengan dock HP, ditambatkan ke tengah bilah atas.
     Tingginya 40px di dalam bilah 64px yang turun 18px dari puncak layar:
     18 + (64 - 40) / 2 = 30. */
  [data-tema="3"] .bottom-nav {
    z-index: 101;
    top: 30px;
    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: 40px;
    padding: 0 14px;
    gap: 7px;
    border-radius: 11px;
    font-size: .875rem;
    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: 17px; height: 17px; }
  [data-tema="3"] .nav-indikator { background: var(--tinta); border-radius: 11px; }

  /* 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: 21px;
    height: 21px;
    padding: 0 5px;
    line-height: 17px;
    font-size: .6875rem;
  }

  /* Beranda. */
  [data-tema="3"] #page-dashboard { overflow-y: auto; }
  [data-tema="3"] #page-dashboard .page-content {
    --judul-peta-h: 64px;
    --peta-h: clamp(420px, calc(100dvh - 330px), 720px);
    max-width: none;
    height: auto;
    padding: 24px 41px 40px 36px;
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-rows: auto auto var(--judul-peta-h) auto auto auto auto auto minmax(0, 1fr);
    grid-template-areas:
      "statistik   statistik"
      "kantong     kantong"
      "judul-peta  jual"
      "peta        siap"
      "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; }
  /* Jual Cepat dan Siap Jual (17 Okt 2026) dulu tanpa area, jadi grid
     menaruhnya di sel kosong pertama: selama Kantong tampil kebetulan di
     kolom kanan, tapi begitu gudang kosong dan Kantong disembunyikan, tombol
     Jual Cepat melar jadi kotak krem raksasa di kolom kiri. Sekarang dipatok
     di kolom kanan, di atas kartu Daftar Titik — tombolnya setinggi dan
     sejajar judul Peta Sebaran. */
  [data-tema="3"] #page-dashboard #btn-jual-cepat {
    grid-area: jual;
    height: var(--judul-peta-h);
    margin-bottom: 0;
  }
  [data-tema="3"] #page-dashboard #siap-jual { grid-area: siap; margin: 20px 0 24px; }

  /* Empat kartu satu baris setinggi 84px: omzet paling lebar di kiri, lalu
     Tersedia, Terjual, Terjual hari ini. Isinya tetap label di atas angka
     seperti di HP, jadi kartu 200px di layar 1024px pun tidak terpotong. */
  [data-tema="3"] #page-dashboard .stats-row {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    grid-template-rows: 84px;
    gap: 16px;
    margin-bottom: 24px;
  }
  /* Tanpa kartu omzet tinggal dua kartu, dijajarkan selebar halaman. */
  [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 { padding: 12px 18px; }
  [data-tema="3"] #page-dashboard .stat-card .stat-label { font-size: .75rem; letter-spacing: .12em; }
  [data-tema="3"] #page-dashboard .stat-card .stat-nilai { font-size: 2rem; }
  [data-tema="3"] #page-dashboard #kartu-terjual-hari { padding: 12px 18px; }
  [data-tema="3"] #page-dashboard #kartu-omzet {
    grid-column: auto;
    justify-content: space-between;
    padding: 12px 66px 12px 18px;
  }
  [data-tema="3"] #page-dashboard #kartu-omzet .stat-label { font-size: .75rem; }
  /* Ikut lebar layar: di 1024px kartu omzet cuma ±310px, dan .stat-card
     ber-overflow:hidden memotong angka yang kebesaran tanpa tanda apa pun
     ("Rp 125.825.6" terbaca seperti angka benar — lihat app.css bagian 6). */
  [data-tema="3"] #page-dashboard #kartu-omzet .stat-nilai { font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
  [data-tema="3"] #page-dashboard #kartu-omzet .omzet-mata { right: 16px; }

  /* Tiket berbaring: nama di kiri, sobekan berwarna di kanan. */
  [data-tema="3"] #page-dashboard #kantong-saya { margin-bottom: 24px; }
  [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.375rem; }
  [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: 16px;
    margin-top: 14px;
    padding: 0 3px 3px 0;
  }
  [data-tema="3"] #page-dashboard #kantong-saya-isi .inv-mutasi {
    flex-direction: row;
    min-height: 76px;
    border-radius: 16px;
  }
  [data-tema="3"] #page-dashboard #kantong-saya-isi .inv-mutasi-kiri {
    flex: 1;
    justify-content: center;
    gap: 4px;
    padding: 12px 16px;
  }
  [data-tema="3"] #page-dashboard #kantong-saya-isi .inv-mutasi-kiri > div:first-child { font-size: 1.125rem; }
  [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: 84px;
    padding: 0;
    border-top: 0;
    border-left: var(--tebal) dashed var(--garis);
  }
  [data-tema="3"] #page-dashboard #kantong-saya-isi .qty-angka { font-size: 2rem; }
  [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: 74px;
    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: 10px 12px 10px 18px;
    border-radius: 18px 18px 0 0;
  }
  [data-tema="3"] #page-dashboard #head-peta .section-title,
  [data-tema="3"] #page-dashboard #head-daftar .section-title { font-size: 1.25rem; }
  /* 10 + 40 + 10 + dua garis 2px = --judul-peta-h 64px. */
  [data-tema="3"] #page-dashboard #head-peta .section-action,
  [data-tema="3"] #page-dashboard #head-daftar .section-action { min-height: 40px; }

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

  [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;
  }
  [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 18px 18px;
  }

  /* Halaman Stok: enam kartu angka tiga sebaris, bukan dua — separuh
     tingginya, dan tabel stok naik ke layar pertama. */
  [data-tema="3"] #page-stok .stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Tombol tambah hitam berbayang jingga, di sudut kanan-bawah kolom peta. */
  [data-tema="3"] .fab {
    right: 482px;
    bottom: 32px;
    width: 58px;
    height: 58px;
    background: #111111;
    color: #FFFFFF;
    box-shadow: 3px 3px 0 var(--jingga);
  }
  [data-tema="3"] .fab:active { box-shadow: 1px 1px 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.25rem; }
  [data-tema="3"] .topbar-right { gap: 6px; }
  [data-tema="3"] .bottom-nav { gap: 2px; }
  [data-tema="3"] .nav-item { padding: 0 10px; gap: 6px; font-size: .8125rem; }
}

/* Layar ≥1280px: tiga kolom (permintaan Bos 18 Okt 2026, dari gambar
   contohnya). Daftar Titik di kiri, peta di tengah, Jual Cepat + Siap Jual
   di kanan; kartu angka dan Kantong tetap selebar halaman di atasnya. Ketiga
   judul (Daftar Titik, Peta Sebaran, tombol Jual Cepat) sebaris.
   Kolom kiri-kanan sama lebar: 21% layar, paling sempit 280px (daftar dan
   tabel Siap Jual masih terbaca) dan paling lebar 400px seperti kolom kanan
   lama. Di bawah 1280px peta akan tinggal sejengkal, jadi di sana tetap
   susunan dua kolom bagian 3.10. --sisi dipasang di akar karena tombol
   tambah (di luar .page-content) ikut menghitung letaknya darinya. */
@media (min-width: 1280px) {
  [data-tema="3"] { --sisi: clamp(280px, 21vw, 400px); }

  [data-tema="3"] #page-dashboard .page-content {
    grid-template-columns: var(--sisi) minmax(0, 1fr) var(--sisi);
    grid-template-rows: auto auto var(--judul-peta-h) auto auto auto minmax(0, 1fr);
    grid-template-areas:
      "statistik     statistik   statistik"
      "kantong       kantong     kantong"
      "judul-daftar  judul-peta  jual"
      "saring        peta        siap"
      "info          peta        siap"
      "aksi          peta        siap"
      "daftar        peta        siap";
  }
  /* Siap Jual menempel di atas kolomnya; sisa tinggi kolom dibiarkan kosong,
     bukan ditarik setinggi peta. */
  [data-tema="3"] #page-dashboard #siap-jual { align-self: start; margin: 20px 0 0; }

  /* Tombol tambah tetap di sudut kanan-bawah peta, yang sekarang berakhir
     sebelum kolom kanan: tepi kanan halaman 41px + kolom kanan + sela 24px. */
  [data-tema="3"] .fab { right: calc(41px + var(--sisi) + 24px + 18px); }
}