/* =========================================================================
   mobile.css -- NAVIGASI BAWAH + penetral markup mobile lama
   =========================================================================

   SEJARAH SINGKAT (penting, baca sebelum menambah apa pun di sini):

   Berkas ini dulu berisi 2.426 baris: sebuah UI mobile TERSENDIRI yang
   menggambar ulang hampir tiap komponen aplikasi (kartu, tabel, tombol,
   KPI, tab, filter) khusus untuk layar <=768px. Ia bekerja dua cara --
   lewat komponen ber-markup sendiri (.m-*), dan lewat MENATA ULANG markup
   desktop dengan nama kelas desktop.

   Cara kedua itulah yang membuatnya rapuh. Revolusi UI desktop (Agu 2026)
   mengganti nama seluruh markup jadi .d-*, dan seketika ~376 pemakaian
   kelas yang ditata di sini tidak lagi mengenai apa pun. Tampilan HP rusak
   tanpa satu baris pun terhapus. Menambalnya berarti mengejar dua UI
   selamanya: tiap perubahan desktop diam-diam memutus kait mobile-nya.

   KEPUTUSAN PEMILIK (14 Agu 2026): berhenti memelihara dua UI. app.css
   yang mengurus desktop MAUPUN HP -- ia memang sudah punya blok
   @media (max-width:768px) yang menumpuk tabel jadi kartu, menjadikan grid
   satu kolom, dan membuat tiap kartu menggulirkan isinya sendiri.

   Jadi yang tersisa di berkas ini cuma empat hal:

     1. MENETRALKAN markup .m-* yang masih ada di PHP, di SEMUA lebar.
        Dulu penetralan ini cuma berlaku di >=769px. Markupnya belum
        dihapus dari PHP supaya perubahan ini bisa dibalik dengan mudah;
        pembersihannya menyusul terpisah.

     2. NAVIGASI BAWAH di HP (.m-tabbar). Ini satu-satunya bagian UI mobile
        yang dipertahankan, atas permintaan pemilik: rail kiri sulit
        dijangkau jempol. Markupnya sudah ada di includes/footer.php,
        sadar-peran, dan tersambung ke assets/swipe-nav.js.

     3. HEADER FROSTED GLASS di HP (.m-topbar) -- dihidupkan lagi 15 Agu
        2026 atas permintaan pemilik sebagai "signature" aplikasi. Sempat
        ikut dipensiunkan bersama UI mobile terpisah, tapi markupnya tidak
        pernah dihapus dari includes/header.php dan $m_title/$m_subtitle
        masih diisi hampir semua halaman -- jadi yang perlu dikembalikan
        hanya gayanya. Bedanya dengan versi lama: warnanya sekarang
        diturunkan dari token app.css, bukan dari --m-* yang sudah tidak
        ada, jadi mode gelap & warna aksen ikut sendiri.

     4. DASBOR HP dua layar (.m-only ringkasan + .m-analitik analitik) --
        dihidupkan lagi 15 Agu 2026. Markupnya sudah ada di index.php sejak
        UI mobile lama; perpindahan layarnya kini lewat alamat ?v=analitik,
        bukan panel geser ber-JS.

   Warnanya memakai token app.css (--card-solid, --border, --primary, dst),
   jadi mode gelap & warna aksen ikut sendiri tanpa aturan tambahan.
   ========================================================================= */


/* =========================================================================
   1. NETRALKAN MARKUP MOBILE LAMA -- berlaku di SEMUA lebar
   =========================================================================

   display:contents pada .m-analitik & .m-analitik-body -- BUKAN none --
   karena keduanya membungkus seluruh isi dashboard. contents membuat
   pembungkusnya lenyap dari layout sementara anak-anaknya tetap tersusun
   persis seperti sebelum dibungkus. Kalau dipasang none, seluruh dashboard
   ikut hilang.
   ========================================================================= */

/* .m-topbar TIDAK lagi dinetralkan di sini -- ia hidup kembali sebagai
   header HP (lihat bagian 3). Yang mengaturnya ada di dekat .m-tabbar,
   dengan pola yang sama: mati di semua lebar, dinyalakan di <=768px. */
.m-blob,
.m-only,
.m-analitik-head { display: none; }

/* Kartu lipat Rekonsiliasi (index.php) cuma untuk layar Analitik di HP --
   di desktop blok yang sama dibuka sebagai sheet dari tombol di kepala
   halaman. Dimatikan di sini supaya tidak bocor ke lebar mana pun kecuali
   yang menyalakannya di bagian 4. */
.d-rekon-hp { display: none; }

.m-analitik,
.m-analitik-body { display: contents; }

/* =========================================================================
   1b. KOMPONEN LINTAS-LEBAR -- BUKAN khusus HP
   =========================================================================

   Dikembalikan 14 Agu 2026. Waktu berkas ini diringkas, blok di bawah ikut
   terbuang -- padahal ia BUKAN bagian dari UI mobile terpisah:
   reseller_detail.php dibangun langsung dengan kelas .m-* ini dan tidak
   punya padanan .d-*, jadi tanpa aturan berikut halaman itu tampil sebagai
   teks polos di DESKTOP maupun HP.

   Kalau nanti reseller_detail.php ditulis ulang memakai komponen .d-*,
   seluruh blok ini boleh ikut dihapus.
   ========================================================================= */

:root {
    /* Dipakai komponen lintas-lebar di bawah. Diturunkan dari token app.css
       supaya warna aksen & tema ikut, kecuali yang memang dipatok desain
       (gradasi wine, warna status). */
    --m-primary:   var(--primary, #8c1c33);
    --m-wine-grad: linear-gradient(135deg, #7a1226, #4a0a16);
    --m-ok-bg:     rgba(52,199,89,0.14);
    --m-ok-fg:     #1f8a3d;
    --m-warn-bg:   rgba(255,149,0,0.14);
    --m-warn-fg:   #b26200;
    --m-danger-bg: rgba(255,59,48,0.12);
    --m-danger-fg: #d70015;
}
/* Di tema gelap teks status dicerahkan -- versi terang di atas nyaris tidak
   terbaca di atas latar gelap. */
html[data-theme="dark"] {
    --m-ok-fg:     #63d67e;
    --m-warn-fg:   #ffb84d;
    --m-danger-fg: #ff6961;
}

/* =====================================================================
   KOMPONEN LINTAS-LEBAR -- BUKAN khusus HP
   ---------------------------------------------------------------------
   reseller_detail.php adalah halaman BARU (tidak ada versi lamanya), jadi
   ia memakai kelas .m-* ini di lebar berapa pun. Kalau aturannya ditaruh
   di dalam @media (max-width:768px), halaman itu tampil sebagai teks polos
   tanpa gaya begitu dibuka di layar lebar. Menempatkannya di sini TIDAK
   mengubah halaman lama mana pun: kelas-kelas ini hanya dipakai di
   reseller_detail.php dan di dalam blok .m-only (yang di desktop memang
   sudah display:none).
   ===================================================================== */

.m-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    margin-top: 3px;
}
.m-badge.ok     { background: var(--m-ok-bg);     color: var(--m-ok-fg); }
.m-badge.warn   { background: var(--m-warn-bg);   color: var(--m-warn-fg); }
.m-badge.danger { background: var(--m-danger-bg); color: var(--m-danger-fg); }
.m-badge.mati   { background: var(--bg);        color: var(--muted); }

.m-perf-bar {
    height: 5px;
    border-radius: 999px;
    background: var(--surface-tint-2);
    margin-top: 9px;
    overflow: hidden;
}
.m-perf-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--m-primary), #5ac8fa);
    transition: width .5s cubic-bezier(.4,0,.2,1);
}

/* =====================================================================
   LAYAR RINCIAN RESELLER (reseller_detail.php)
   ---------------------------------------------------------------------
   Kartu ringkasan burgundy, target, tren 6 bulan, rincian per produk,
   riwayat setoran bulanan, lalu tombol nonaktifkan/hapus.
   ===================================================================== */

.m-kembali {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}
/* :hover-nya WAJIB ditulis sendiri. `text-decoration: none` di atas tidak
   cukup karena app.css punya `a:hover { text-decoration: underline }` yang
   kekhususannya (0,1,1) mengalahkan `.m-kembali` (0,1,0) -- urutan berkas
   tidak menolong sama sekali di sini. `.m-kembali:hover` (0,2,0) menang. */
.m-kembali:hover { text-decoration: none; }
.m-kembali-ikon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--card);
    box-shadow: var(--shadow-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.m-hero {
    background: var(--m-wine-grad);
    color: #fff;
    border-radius: 18px;
    padding: 16px 17px;
    margin-bottom: 14px;
}
.m-hero-atas {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.m-hero-nama { font-size: 17px; font-weight: 700; line-height: 1.25; }
.m-hero-status {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
}
.m-hero-status.aktif { background: rgba(52,199,89,0.28); }
.m-hero-sub { font-size: 11.5px; opacity: 0.78; margin-top: 3px; }
.m-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.16);
}
.m-hero-angka { font-size: 16px; font-weight: 700; line-height: 1.2; }
.m-hero-label { font-size: 10.5px; opacity: 0.72; margin-top: 2px; }

.m-baris-judul {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.m-baris-judul h2 { margin: 0 0 10px; }
.m-target-persen { font-size: 12px; font-weight: 700; flex-shrink: 0; }

.m-form-target { display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px; }
.m-form-target input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    font-size: 13px;
    font-weight: 600;
}
.m-form-target .btn { flex: 0 0 auto; }

.m-tren-svg { display: block; width: 100%; height: 120px; }
.m-tren-label {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--muted);
}

.m-kartu-rincian,
.m-kartu-bulan {
    background: var(--card);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 8px;
    box-shadow: var(--shadow-xs);
}
.m-kartu-rincian-atas {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.m-kartu-rincian-atas > div { min-width: 0; }
.m-kartu-rincian-nama { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }
.m-kartu-rincian-sub { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.m-kartu-rincian-nilai { font-size: 13px; font-weight: 700; color: var(--text); flex-shrink: 0; white-space: nowrap; }
.m-kartu-rincian .m-perf-bar { margin-top: 8px; height: 4px; }
.m-kartu-rincian .m-perf-bar > span { background: none; }

.m-kartu-bulan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.m-kartu-bulan-label { font-size: 13px; font-weight: 700; color: var(--text); }
.m-kartu-bulan-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.m-kartu-bulan-kanan { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.m-kartu-bulan-nilai { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }
.m-kartu-bulan-kanan .m-badge { margin-top: 0; }

.m-aksi-reseller { display: flex; gap: 10px; margin-top: 18px; }
.m-aksi-reseller form { flex: 1 1 auto; }
.m-aksi-reseller form:last-child { flex: 0 0 96px; }
.m-aksi-reseller .btn { width: 100%; }
.m-aksi-reseller .btn.secondary {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
}
.m-aksi-reseller .btn.danger {
    background: var(--card);
    color: #ff3b30;
    border: 1.5px solid rgba(255,59,48,0.3);
}


/* Bar bawah cuma untuk HP; di desktop rail kiri (.d-rail) yang dipakai. */
.m-tabbar { display: none; }

/* Header atas juga cuma untuk HP; di desktop judul halaman digambar
   .d-head di dalam badan halaman, dan brand + avatar sudah duduk di rail. */
.m-topbar { display: none; }


/* =========================================================================
   2. NAVIGASI BAWAH (<=768px)
   ========================================================================= */

@media (max-width: 768px) {

    /* Dibaca app.css untuk mengangkat .d-actionbar di atas bar ini. */
    :root { --m-tabbar-h: 72px; }

    .m-tabbar {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 30;
        padding: 8px 0 10px;
        /* Ruang untuk garis gestur iPhone / navigasi layar penuh Android. */
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--card-solid);
        border-top: 1px solid var(--border);
    }

    /* Sorotan tab aktif. Posisi & lebarnya dihitung PHP lewat inline style
       (indeks tab aktif / jumlah tab) -- jumlahnya beda antara admin,
       staff, dan tenant tanpa fitur reseller. */
    .m-tab-pill {
        position: absolute;
        top: 5px;
        height: calc(100% - 20px);
        background: color-mix(in srgb, var(--primary) 12%, transparent);
        border-radius: 14px;
        transition: left .25s cubic-bezier(.4,0,.2,1);
        pointer-events: none;
    }

    .m-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 6px 0;
        background: none;
        border: none;
        text-decoration: none;
        position: relative;
        z-index: 1;
        color: var(--muted);
        min-width: 0;
    }
    .m-tab.active { color: var(--primary); }
    .m-tab span {
        font-size: 10.5px;
        font-weight: 700;
        /* Label sesempit apa pun tidak boleh mendorong bar melebihi layar. */
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .m-tab svg { width: 21px; height: 21px; flex-shrink: 0; }

    /* Titik notifikasi (stok menipis / resi belum discan) di ikon tab. */
    .m-tab-dot {
        position: absolute;
        top: 3px;
        left: calc(50% + 7px);
        width: 7px; height: 7px;
        border-radius: 50%;
        background: var(--red);
        border: 1.5px solid var(--card-solid);
    }

    /* Isi halaman tidak boleh tertutup bar. Dipasang di .app-shell, bukan
       body, supaya latar halaman tetap penuh sampai tepi bawah. */
    .app-shell { padding-bottom: var(--m-tabbar-h); }
}


/* =========================================================================
   3. HEADER FROSTED GLASS (<=768px)
   =========================================================================

   Header ini position:fixed, BUKAN anak flex yang ikut menggulir. Di
   desain aslinya ia bagian dari kolom yang tidak bergulir; dibuat fixed
   supaya hasil visualnya sama (isi halaman lewat di baliknya, buram)
   tanpa harus mengubah body jadi flex-column 100dvh -- perubahan yang
   akan menyentuh semua halaman lain.

   Karena fixed, ia tidak mendorong konten sendiri: tingginya dipatok di
   --m-topbar-h dan dibayar .app-shell lewat padding-top. KALAU TIPOGRAFI
   .m-title / .m-subtitle DIUBAH, HITUNG ULANG ANGKANYA (rinciannya di
   bawah) -- kalau tidak, isi halaman akan tertutup header atau menyisakan
   celah kosong.
   ========================================================================= */

@media (max-width: 768px) {

    /* 20 (padding atas)
       + 34 (baris brand: tinggi avatar) + 14 (jarak ke judul)
       + 27,5 (judul 22px x 1,25)
       + 20,2 (subjudul: 2 margin + 13,5px x 1,35)
       + 12 (padding bawah)  = 127,7 -> 128px */
    :root { --m-topbar-h: 128px; }

    /* Halaman tanpa $m_subtitle (laporan_grafik.php & reseller_harga.php)
       kehilangan satu baris, jadi 128 - 20,2 = 107,8 -> 108px. Kelasnya
       dipasang includes/header.php. */
    body.m-tanpa-sub { --m-topbar-h: 108px; }

    .m-topbar {
        display: block;
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 30;
        box-sizing: border-box;
        height: calc(var(--m-topbar-h) + env(safe-area-inset-top, 0px));
        padding: 20px 22px 12px;
        /* Poni iPhone: isinya turun, tingginya ikut bertambah di atas. */
        padding-top: calc(20px + env(safe-area-inset-top, 0px));

        /* Kaca. Nada dasarnya --bg (bukan --card) supaya header terbaca
           sebagai lanjutan latar layar, bukan kartu yang menempel di
           atasnya. Token app.css -> mode gelap ikut sendiri, tidak perlu
           lagi override html[data-theme="dark"] seperti versi lama. */
        background: color-mix(in srgb, var(--bg) 78%, transparent);
        backdrop-filter: blur(30px) saturate(180%);
        -webkit-backdrop-filter: blur(30px) saturate(180%);
    }

    /* Pelarutan lembut di bawah header: isi halaman tidak terpotong garis
       tegas waktu digulir, tapi memudar. Ini yang membedakan header ini
       dari bar biasa -- jangan diganti border-bottom.
       pointer-events:none WAJIB: tanpa itu pita 18px ini memakan sentuhan
       pada kartu pertama di bawah header.
       SENGAJA gradien saja, TANPA backdrop-filter kedua: pita ini duduk
       tepat di bawah bar yang sudah blur 30px, dan dua lapis backdrop-
       filter di atas area yang menggulir harus dikomposisi ulang tiap
       frame. Bedanya di mata nyaris tidak ada, ongkosnya nyata di HP
       kelas menengah -- dan aplikasi ini dipakai sambil scan di gudang. */
    .m-topbar::after {
        content: '';
        position: absolute;
        top: 100%; left: 0; right: 0;
        height: 18px;
        pointer-events: none;
        background: linear-gradient(
            to bottom,
            color-mix(in srgb, var(--bg) 72%, transparent),
            transparent);
    }

    .m-topbar-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }

    .m-brand {
        display: flex;
        align-items: center;
        gap: 9px;
        text-decoration: none;
        min-width: 0;
    }
    .m-brand-mark {
        width: 28px; height: 28px;
        border-radius: 8px;
        background: var(--primary);
        color: #fff;
        font-weight: 700;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .m-brand-text {
        font-weight: 700;
        font-size: 13px;
        color: var(--text);
        letter-spacing: -.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .m-brand-text span { color: var(--muted); font-weight: 500; }

    .m-avatar {
        width: 34px; height: 34px;
        border-radius: 50%;
        background: var(--primary);
        color: #fff;
        font-weight: 700;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 6px rgba(0,0,0,.15);
        text-decoration: none;
        flex-shrink: 0;
        overflow: hidden;
    }
    .m-avatar img { width: 100%; height: 100%; object-fit: cover; }

    /* Pindai QR di kanan atas, berdampingan dengan avatar. Ukuran sentuhnya
       sengaja sama dengan avatar (34px): dua lingkaran bersebelahan yang
       ukurannya beda terbaca sebagai salah satunya lebih penting, padahal
       keduanya sekadar pintu. */
    .m-topbar-aksi { display: flex; align-items: center; gap: 10px; }
    .m-pindai {
        width: 34px; height: 34px;
        border-radius: 50%;
        border: 1px solid var(--border);
        background: var(--card-solid);
        color: var(--primary);
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; padding: 0; flex: 0 0 auto;
    }
    .m-pindai svg { width: 19px; height: 19px; display: block; }
    .m-pindai:active { background: color-mix(in srgb, var(--primary) 14%, var(--card-solid)); }

    /* nowrap + ellipsis BUKAN sekadar rapi: tinggi header dipatok, jadi
       judul yang membungkus jadi 2 baris akan tertimpa tepi bawahnya. */
    .m-title {
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -.01em;
        color: var(--text);
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .m-subtitle {
        font-size: 13.5px;
        color: var(--muted);
        margin-top: 2px;
        line-height: 1.35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Isi halaman turun sejauh tinggi header. Dipasang di .app-shell --
       pasangan padding-bottom milik tab bar di bagian 2. */
    .app-shell {
        padding-top: calc(var(--m-topbar-h) + env(safe-area-inset-top, 0px));
    }

    /* Judul di dalam badan halaman jadi dobel begitu header menampilkan
       judul yang sama, jadi dimatikan -- TAPI hanya teksnya. Blok aksi
       ikut menumpang .d-head ("+ Tambah Produk", "Ekspor", pemilih
       periode); kalau seluruh .d-head disembunyikan, tombol-tombol itu
       lenyap dari HP. */
    .d-head h1,
    .d-head p { display: none; }
    .d-head:not(:has(.d-head-aksi)) { display: none; }
    /* Jarak atas blok aksi tadinya memisahkannya dari judul yang kini
       sudah tidak ada. */
    .d-head .d-head-aksi { margin-top: 0; }

    /* Setiap penggulungan otomatis berhenti di BAWAH header, bukan di
       baliknya: lompatan #anchor, dan scrollIntoView() milik validasi form
       (app.js), hasil retur (checkout.php), serta kartu tenant baru
       (daftar_tenant.php).
       Sengaja scroll-padding pada wadah gulir, BUKAN scroll-margin pada
       elemennya: scroll-margin menggembungkan kotak elemen, jadi
       scrollIntoView({block:'center'}) ikut meleset setengah nilainya.
       scroll-padding hanya mengecilkan area pandang -- "tengah" berarti
       tengah dari sisa layar di bawah header, persis yang diinginkan.

       Catatan: .d-filter & .d-lap-bar TIDAK perlu digeser. app.css sudah
       menjadikan keduanya position:static di HP justru karena header ini
       fixed -- lihat komentarnya di sana. */
    :root { scroll-padding-top: calc(var(--m-topbar-h) + env(safe-area-inset-top, 0px) + 14px); }
}


/* =========================================================================
   4. DASBOR HP: RINGKASAN + LAYAR ANALITIK (<=768px)
   =========================================================================

   Dihidupkan lagi 15 Agu 2026 atas permintaan pemilik. Markupnya SUDAH ADA
   di web/index.php sejak UI mobile lama (.m-only untuk ringkasan,
   .m-analitik untuk analitik lengkap) -- yang hilang cuma gayanya waktu
   berkas ini diringkas. Jadi ini menghidupkan kembali, bukan membangun.

   BEDA POKOK dengan versi lama: perpindahan layar sekarang lewat ALAMAT
   (?v=analitik), bukan panel geser ber-JS. index.php menandai <body> dengan
   .dasbor-ringkas / .dasbor-analitik, dan CSS di bawah yang memilih blok
   mana yang tampil. Akibatnya tombol Back ponsel bekerja, halaman Analitik
   bisa di-bookmark, dan assets/mobile.js (yang dulu mengurus panel ini)
   tetap pensiun.

   Warna diturunkan dari token app.css -- bukan --m-* seperti versi lama --
   supaya mode gelap & warna aksen ikut sendiri.
   ========================================================================= */

@media (max-width: 768px) {

    /* ---- Pemilihan layar ----
       .m-only SENGAJA di-scope ke body.dasbor-ringkas, bukan dibuka untuk
       semua halaman: markup .m-only masih tersisa di beberapa berkas lain
       sebagai kode mati, dan membukanya di sana akan memunculkan tampilan
       lama yang sudah tidak dipelihara. */
    body.dasbor-ringkas .m-only { display: block; }
    body.dasbor-ringkas .m-analitik { display: none; }

    body.dasbor-analitik .m-analitik,
    body.dasbor-analitik .m-analitik-body { display: block; }
    body.dasbor-analitik .m-analitik-head { display: flex; }
    /* Judul & anak judul .d-head memang tidak dipakai di layar Analitik --
       kepala burgundy sudah membawa judul & periodenya -- tapi BLOK AKSI-nya
       dipakai: di situlah tombol Export XLSX tinggal. Bagian 3 sudah
       menyembunyikan h1/p sambil menyisakan .d-head-aksi, jadi di sini
       .d-head cukup dibiarkan apa adanya.

       Yang disembunyikan justru tombol pembuka sheet Rekonsiliasi: di layar
       ini isinya sudah tampil sebagai kartu lipat di badan halaman, dan dua
       jalan ke blok yang sama akan saling merebut node-nya (#blokRekon
       DIPINDAH, bukan digandakan -- lihat skrip di index.php). */
    body.dasbor-analitik .d-head [data-buka-rekon] { display: none; }

    /* Urutan tampil mengikuti desain pemilik: pil periode dulu, baru tombol
       Export, lalu kartu Rekonsiliasi, sisanya (KPI dst) menyusul. Di DOM
       .d-head berada SEBELUM .d-filter karena itulah urutan yang benar di
       desktop, jadi pembalikannya dikerjakan di sini dengan order -- bukan
       dengan memindah markup, yang akan ikut mengubah desktop.

       Nilai 4 pada '> *' adalah dasarnya: apa pun yang tidak disebut khusus
       jatuh ke belakang ketiganya, tanpa perlu menomori satu per satu. */
    body.dasbor-analitik #dashIsi { display: flex; flex-direction: column; }
    body.dasbor-analitik #dashIsi > *           { order: 4; }
    body.dasbor-analitik #dashIsi > .d-filter   { order: 1; }
    body.dasbor-analitik #dashIsi > .d-head     { order: 2; }
    body.dasbor-analitik #dashIsi > .d-rekon-hp { order: 3; }

    /* ---- Kartu lipat Rekonsiliasi Profit Riil ----
       #blokRekon dirender ber-atribut [hidden] karena di desktop ia cuma
       gudang isi untuk sheet. Atribut itu DICOPOT oleh skrip pemindah di
       index.php, bukan ditimpa dari sini: app.css memasang
       [hidden] { display: none !important }, jadi tidak ada selektor yang
       bisa mengalahkannya. */
    body.dasbor-analitik .d-rekon-hp { display: block; }
    /* Judul + lencana jumlah boleh turun ke baris kedua kalau angkanya
       panjang ("1.263 pesanan dari impor terakhir" tidak muat sebaris di
       345px). Tanda panahnya DIKELUARKAN dari arus wrap itu dengan
       position:absolute -- kalau ikut mengalir, ia menempel di ekor lencana
       di baris kedua alih-alih tetap di kanan kartu. */
    body.dasbor-analitik .d-rekon-hp > summary {
        position: relative;
        flex-wrap: wrap;
        gap: 4px 8px;
        padding: 14px 38px 14px 16px;
    }
    body.dasbor-analitik .d-rekon-hp > summary h2 { font-size: 15px; }
    body.dasbor-analitik .d-rekon-hp > summary::after {
        position: absolute;
        right: 18px;
        top: calc(50% - 6px);
        margin-left: 0;
    }
    .d-rekon-hp-ket {
        font-size: 10px;
        font-weight: 600;
        color: var(--muted);
        background: var(--field);
        border-radius: 999px;
        padding: 3px 8px;
    }
    /* ---- BENTUK RINGKAS (desain pemilik 15 Agu 2026) ----
       #blokRekon aslinya dirancang untuk sheet lebar: label panjang, dua
       kotak seret-berkas setinggi ~100px, plus keterangan tambahan. Di kartu
       selebar 345px itu jadi menara yang harus digulir. Semua penyempitan di
       bawah DIKURUNG ke .d-rekon-hp -- sheet, baik di desktop maupun di HP
       (layar ringkas masih punya tombol pembukanya), tetap utuh. */

    /* Teks versi pendek. Pola sama dengan [data-m-teks] di app.css:
       font-size:0 mematikan teks asli (anak <strong> ikut mati karena
       font-size diwariskan), lalu ::before menuliskan versi pendeknya. */
    body.dasbor-analitik .d-rekon-hp [data-hp-teks] { font-size: 0; }
    body.dasbor-analitik .d-rekon-hp [data-hp-teks]::before {
        content: attr(data-hp-teks);
        font-size: 12.5px;
        line-height: 1.5;
    }
    body.dasbor-analitik .d-rekon-hp .d-drop-judul[data-hp-teks]::before {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--text);
    }

    /* Nomor langkah sudah pindah ke judul barisnya, dan keterangan panjang
       tiap kotak tidak dipakai di bentuk ringkas ini. */
    body.dasbor-analitik .d-rekon-hp .d-field-label,
    body.dasbor-analitik .d-rekon-hp .d-drop-ket { display: none; }

    /* Kotak seret jadi SATU BARIS: ikon kecil di kiri, judul di sampingnya.
       Garis putus-putus diganti garis biasa -- di kotak setinggi 44px pola
       putus-putus terbaca ramai, bukan sebagai "area jatuhkan berkas". */
    body.dasbor-analitik .d-rekon-hp .d-drop {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 12px 14px;
        border-style: solid;
        border-width: 1px;
        border-radius: 12px;
        text-align: left;
    }
    body.dasbor-analitik .d-rekon-hp .d-drop svg { width: 15px; height: 15px; flex: 0 0 15px; }
    body.dasbor-analitik .d-rekon-hp .d-rekon-langkah { margin-top: 8px; }

    /* Aksi menumpuk selebar kartu, bukan berderet rata kanan ala sheet. */
    body.dasbor-analitik .d-rekon-hp .d-sheet-aksi {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
    }
    body.dasbor-analitik .d-rekon-hp .d-sheet-aksi > * { flex: 1 1 100%; }
    /* Tombol Import disembunyikan JS sampai kedua berkas terbaca. Di kartu
       ini ia SELALU tampil sesuai desain, tapi mati sampai siap -- style
       inline cuma bisa dikalahkan !important. */
    body.dasbor-analitik .d-rekon-hp #btnImportRekon {
        display: inline-flex !important;
        width: 100%;
    }
    body.dasbor-analitik .d-rekon-hp #btnImportRekon:disabled { opacity: .5; }

    /* Header salam frosted DIMATIKAN di layar Analitik (permintaan pemilik
       15 Agu 2026). Dua kepala bertumpuk -- "Selamat Sore, Ilham" lalu
       "Analitik" tepat di bawahnya -- memakan sepertiga layar sebelum angka
       pertama terlihat, dan keduanya menjawab pertanyaan yang berbeda.
       Kepala burgundy Analitik sudah membawa identitas layarnya sendiri,
       lengkap dengan tombol kembali.
       padding-top .app-shell WAJIB ikut dinolkan: ia yang membayar tinggi
       header fixed itu, dan kalau ditinggal akan menyisakan celah kosong
       setinggi 128px di atas kepala burgundy. */
    body.dasbor-analitik .m-topbar { display: none; }
    body.dasbor-analitik .app-shell { padding-top: 0; }
    /* Tanpa header fixed, tidak ada lagi yang perlu dihindari saat menggulir.
       Ditulis html:has(...) karena scroll-padding milik WADAH GULIR, dan
       wadah gulir halaman ini adalah <html> -- menaruhnya di body tidak
       menimpa apa pun. */
    html:has(body.dasbor-analitik) { scroll-padding-top: 0; }

    /* ---- Kepala burgundy layar Analitik ---- */
    .m-analitik-head {
        align-items: center;
        gap: 12px;
        margin: -16px -16px 14px;   /* melawan padding .d-page, jadi menepi */
        padding: 16px 18px;
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--primary) 88%, #fff),
            color-mix(in srgb, var(--primary) 74%, #000));
        color: #fff;
        /* Rata bawah, TANPA sudut membulat (permintaan pemilik 15 Agu 2026).
           Sudut 20px membuat spanduknya terbaca seperti menyempit di
           pangkalnya; rata penuh menyambung mulus ke isi halaman. */
        border-radius: 0;
    }
    .m-analitik-back {
        width: 32px; height: 32px;
        border-radius: 50%;
        background: rgba(255,255,255,.18);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        text-decoration: none;
    }
    .m-analitik-judul { font-size: 17px; font-weight: 700; }
    .m-analitik-sub   { font-size: 12px; opacity: .78; margin-top: 1px; }

    /* ---- Kartu KPI: DUA per baris, bukan memanjang ke bawah ----
       Di-scope ke layar Analitik dulu; halaman lain yang memakai grid sama
       (mis. Laporan) sengaja belum diubah supaya mudah dibalik. */
    body.dasbor-analitik .d-grid-kpi,
    body.dasbor-analitik .d-grid-rasio {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    body.dasbor-analitik .d-kpi { padding: 13px 14px; }
    body.dasbor-analitik .d-kpi-nilai { font-size: 19px; }

    /* ---- Kotak cari ---- */
    .m-search { position: relative; margin-bottom: 14px; }
    .m-search svg {
        position: absolute;
        left: 14px; top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
    }
    .m-search input {
        width: 100%;
        box-sizing: border-box;
        padding: 12px 14px 12px 40px;
        border-radius: 13px;
        border: 1px solid var(--border);
        background: var(--card-solid);
        color: var(--text);
        font-size: 14px;
    }
    .m-search input:focus { outline: none; border-color: var(--primary); }

    /* ---- Tiga kotak angka ---- */
    .m-stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }
    .m-stat {
        background: var(--card-solid);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 12px 11px;
        text-decoration: none;
        transition: transform .15s;
    }
    .m-stat:active { transform: scale(.96); }
    .m-stat-num { font-size: 21px; font-weight: 700; color: var(--text); }
    .m-stat-num.warn   { color: #ff9500; }
    .m-stat-num.danger { color: var(--red); }
    .m-stat-num.ok     { color: #34c759; }
    .m-stat-label { font-size: 10.5px; color: var(--muted); margin-top: 3px; line-height: 1.3; }

    /* ---- Kartu Omzet burgundy: pintu ke layar Analitik ---- */
    .m-omzet {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 18px;
        padding: 16px 18px;
        border: none;
        border-radius: 18px;
        text-align: left;
        text-decoration: none;
        color: #fff;
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--primary) 88%, #fff),
            color-mix(in srgb, var(--primary) 70%, #000));
        box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--primary) 70%, transparent);
        transition: transform .15s;
    }
    .m-omzet:active { transform: scale(.985); }
    .m-omzet > span { display: block; min-width: 0; }
    .m-omzet-kicker {
        display: block;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        opacity: .8;
    }
    .m-omzet-val { display: block; font-size: 20px; font-weight: 700; margin-top: 3px; }
    .m-omzet-cta { display: block; font-size: 11px; font-weight: 600; opacity: .8; margin-top: 6px; }
    .m-omzet svg { opacity: .8; flex-shrink: 0; }

    /* ---- Judul seksi ---- */
    .m-sec {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin: 18px 0 10px;
    }
    .m-sec-title { font-size: 15.5px; font-weight: 700; color: var(--text); }
    .m-sec-link  { font-size: 12.5px; font-weight: 600; color: var(--primary); text-decoration: none; }
    .m-sec-note  { font-size: 11.5px; font-weight: 600; color: var(--muted); }
    .m-empty     { font-size: 13px; color: var(--muted); margin: 0 0 10px; }

    /* ---- Baris "Perlu Direstok" ---- */
    .m-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 14px;
        margin-bottom: 8px;
        border-radius: 14px;
        background: var(--card-solid);
        border: 1px solid var(--border);
        text-decoration: none;
    }
    .m-row > span { min-width: 0; }
    .m-row-kode  { display: block; font-size: 10.5px; font-weight: 600; color: var(--muted); }
    .m-row-nama  { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); margin-top: 1px; }
    .m-row-kanan { display: block; text-align: right; flex-shrink: 0; margin-left: 10px; }
    .m-row-stok  { display: block; font-size: 13px; font-weight: 700; color: var(--text); }

    /* ---- Kartu "Produk Performa Terbaik" ---- */
    .m-perf {
        padding: 12px 14px;
        margin-bottom: 8px;
        border-radius: 14px;
        background: var(--card-solid);
        border: 1px solid var(--border);
    }
    .m-perf-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .m-perf-kiri { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .m-perf-rank {
        width: 24px; height: 24px;
        border-radius: 50%;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        background: var(--field);
        color: var(--muted);
    }
    .m-perf-rank.top { background: var(--m-warn-bg); color: var(--m-warn-fg); }
    .m-perf-nama {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .m-perf-sub   { font-size: 11px; color: var(--muted); margin-top: 1px; }
    .m-perf-omzet { font-size: 13.5px; font-weight: 700; color: var(--text); flex-shrink: 0; }

    /* Animasi masuk bertahap. */
    .m-rise { animation: mRiseIn .38s cubic-bezier(.4,0,.2,1) both; }
    @keyframes mRiseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
    .m-rise { animation: none; }
}


/* =========================================================================
   KALKULATOR HARGA -- penyesuaian HP
   =========================================================================
   Di desktop kartu hasil duduk di kanan dan menempel saat digulir. Di HP
   kolomnya menumpuk, dan urutan DOM (input dulu, hasil belakangan) jadi
   salah: yang dicari pemilik justru angkanya. Jadi kartu hasil dinaikkan
   ke atas lewat order, BUKAN dengan menukar urutan markup -- di desktop
   urutan tab keyboard "isi dulu, baca hasil" itu yang benar.
   ========================================================================= */
@media (max-width: 768px) {
    .kalk-kolom { display: flex; flex-direction: column; }
    .kalk-kanan { order: -1; }

    /* Tiga angka hasil dibariskan supaya tidak menghabiskan satu layar
       penuh sebelum inputnya kelihatan. */
    .kalk-angka-utama { grid-template-columns: 1fr 1fr; }
    .kalk-angka-utama .kalk-angka:first-child { grid-column: 1 / -1; }
    .kalk-angka-nilai { font-size: 19px; }

    /* Kolom bar proporsi dibuang: di 390px ia memakan ruang yang
       dibutuhkan label dan nominalnya. */
    .kalk-rinci { grid-template-columns: minmax(0, 1fr) 92px; }
    .kalk-rinci-bar { display: none; }

    .kalk-baris-kanan { gap: 8px; }
    .kalk-program .kalk-kotak .d-input { width: 78px; }
}