/* Token warna app mobile - 22-08-2026 awalnya biru-ungu (senada icon), direvisi ke navy
   polos (permintaan owner). SENGAJA TIDAK LAGI sama persis dengan
   public_html/assets/css/style.css (ERP desktop, masih hijau) - app mobile sekarang punya
   identitas visual sendiri, ERP desktop tetap hijau seperti biasa. */
:root {
    --bg: #f4f6fb;
    --card: #ffffff;
    --text: #1a2233;
    --muted: #656f85;
    --border: #e1e5f0;
    --primary: #1e3a8a;
    --primary-dark: #0f1f4d;
    --primary-soft: #e5eaf7;
    --danger: #c0392b;
    --danger-soft: #fdecea;
    --warning: #b8860b;
    --warning-soft: #fdf3e0;
    --info: #1e40af;
    --info-soft: #e6edfc;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 2px 10px -4px rgba(15, 31, 77, .16);
    --shadow-lg: 0 -8px 30px -6px rgba(10, 18, 40, .25);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.4;
    padding-bottom: env(safe-area-inset-bottom);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
button { font-family: inherit; }

/* Tombol/kartu yang ditekan sedikit menciut - umpan balik sentuhan seperti app native,
   bukan link web polos yang cuma berubah warna. */
.m-tap { transition: transform .08s ease, opacity .08s ease; }
.m-tap:active { transform: scale(.96); opacity: .85; }

.m-topbar {
    position: sticky; top: 0; z-index: 20;
    background: linear-gradient(120deg, #fbfcfe 0%, #eef2fa 55%, #dbe4f5 100%);
    border-bottom: 1px solid var(--border); color: var(--text);
    display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
    padding: 9px 16px; padding-top: calc(9px + env(safe-area-inset-top));
}
/* min-width:0 + nowrap/ellipsis (03-09-2026) - dashboard.php ganti judul jadi "Enterprise
   Resource Planning", jauh lebih panjang dari judul halaman lain ("Dashboard", "Saldo
   Komisi", dst). Tanpa ini, flex item teks akan melebar/membungkus dua baris di layar HP
   sempit dan menabrak logo di kanannya. */
.m-topbar-title {
    font-weight: 700; font-size: 1rem; color: var(--text); text-transform: uppercase;
    letter-spacing: .3px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-topbar-logo { height: 30px; width: auto; flex-shrink: 0; }

.m-container { max-width: 560px; margin: 0 auto; padding: 14px 14px 28px; }

.m-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
}
.m-card h2 { margin: 0 0 10px; font-size: 1.05rem; }
.m-muted { color: var(--muted); font-size: 0.88rem; }
.m-section-title { font-size: .95rem; font-weight: 700; margin: 18px 2px 10px; color: var(--text); }
.m-section-title:first-child { margin-top: 2px; }
/* Banner filter agen aktif (23-08-2026) - muncul di atas halaman begitu satu agen dipilih
   dari popup "Daftar Agen", pengganti tampilan ringkas di sheet yang dipakai sebelumnya
   (lihat catatan koreksi di kepala orders.php). */
.m-agen-filter-aktif {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--primary-soft); color: var(--primary-dark); border-radius: var(--radius-sm);
    padding: 9px 14px; margin-bottom: 12px; font-size: .84rem; font-weight: 600;
}
.m-agen-filter-aktif svg { vertical-align: -2px; margin-right: 3px; }
.m-agen-filter-hapus {
    flex-shrink: 0; font-size: .76rem; font-weight: 700; color: var(--primary-dark);
    text-decoration: none; background: rgba(255,255,255,.6); border-radius: 999px; padding: 4px 10px;
}

/* ---------- Box "Paket Belum Dikirim" (orders.php, dipindah dari dashboard.php 22-08-2026)
   - pengganti KPI umum, khusus agen pengemasan. Revisi tampilan 23-08-2026: judul +
   pemicu "Daftar Agen" digabung satu tombol kotak besar, kotak Paket & Kilat digabung satu
   (dulu 2 kotak terpisah) ---------- */
.m-paket-box { margin-bottom: 4px; }
.m-agen-header-btn {
    display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
    font-size: 1rem; font-weight: 800;
    color: var(--text); background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 13px 16px;
    margin-bottom: 10px; cursor: pointer;
}
.m-agen-header-btn svg { flex-shrink: 0; }

/* Kotak gabungan Paket + Kilat - grid 4 kolom (label, belum, sudah, total), label kolom
   cuma sekali di baris atas supaya tidak berulang. Angka Total dibedakan lewat teks tebal
   berwarna (bukan latar warna lagi seperti sebelumnya). */
.m-paket-gabung {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 12px 14px; margin-bottom: 10px;
}
.m-paket-gabung-head, .m-paket-gabung-row {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; align-items: center; gap: 6px;
}
.m-paket-gabung-head span:not(:first-child), .m-paket-gabung-row strong { text-align: center; }
.m-paket-gabung-head span { font-size: .62rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .2px; }
.m-paket-gabung-row { padding: 8px 0 0; border-top: 1px solid var(--border); margin-top: 8px; }
.m-paket-gabung-row:first-of-type { border-top: none; margin-top: 4px; padding-top: 0; }
.m-paket-gabung-label { font-size: .8rem; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.m-paket-gabung-label svg { width: 12px; height: 12px; }
.m-paket-gabung-row strong { font-size: 1.05rem; font-weight: 800; }
.m-paket-gabung-row strong.warna-biru { color: var(--primary); }
.m-paket-gabung-row strong.warna-merah { color: var(--danger); }
.m-paket-gabung-row strong.warna-hijau { color: var(--uang-masuk); }
.m-paket-dikirim { color: var(--uang-masuk); }
.m-paket-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); overflow: hidden;
}
.m-paket-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.m-paket-table th {
    text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .3px;
    color: var(--muted); padding: 8px 12px 6px; font-weight: 700;
}
.m-paket-table th:not(:first-child), .m-paket-table td:not(:first-child) { text-align: center; }
.m-paket-row { border-top: 1px solid var(--border); cursor: pointer; }
.m-paket-row:active { background: rgba(0,0,0,.03); }
.m-paket-row td { padding: 10px 12px; }
.m-paket-row td:first-child { font-weight: 600; display: flex; align-items: center; gap: 6px; overflow: hidden; }
.m-paket-row td:first-child > *:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Kolom indikator Instant (22-08-2026, dipindah ke kanan kolom Akun 22-08-2026) - kolom
   TANPA judul header, cuma ikon motor hijau kalau agen itu punya pesanan Instant/Same Day
   yang belum diproses. Menggantikan titik m-paket-blink yang dulu nempel di dalam sel Akun. */
.m-paket-table th:nth-child(2), .m-paket-row td:nth-child(2) { width: 30px; padding-left: 0; padding-right: 0; }
/* Ikon kurir asli dari owner (22-08-2026, kurir.png) - gambar berwarna, bukan lagi SVG
   satu warna lewat mi(), jadi tidak pakai currentColor. */
.m-instant-icon { width: 22px; height: auto; display: inline-block; vertical-align: middle; }
.m-plat-badge {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: .62rem;
    font-weight: 800; line-height: 1;
}
.m-paket-jml { font-weight: 800; font-size: .95rem; }
.m-paket-batal { color: var(--danger); }
.m-paket-blink {
    width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex-shrink: 0;
    animation: m-blink 1s ease-in-out infinite;
}
@keyframes m-blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .m-paket-blink { animation: none; opacity: .8; } }
.m-paket-breakdown { display: flex; flex-direction: column; gap: 8px; }
.m-paket-breakdown-row {
    display: flex; justify-content: space-between; padding: 8px 12px; background: #f6f7f6;
    border-radius: 9px; font-size: .88rem;
}

/* ---------- Segmen 1: KPI 2x2 - ringkas, ikon+angka sebaris, tanpa banyak ruang kosong ---------- */
.m-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.m-kpi {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 12px 14px; position: relative; overflow: hidden; box-shadow: var(--shadow);
}
.m-kpi-top { display: flex; align-items: center; gap: 9px; }
.m-kpi-icon {
    width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0;
}
.m-kpi-icon svg { width: 16px; height: 16px; }
.m-kpi.tone-primary .m-kpi-icon { background: var(--primary-soft); color: var(--primary-dark); }
.m-kpi.tone-info .m-kpi-icon { background: var(--info-soft); color: var(--info); }
.m-kpi.tone-warning .m-kpi-icon { background: var(--warning-soft); color: var(--warning); }
.m-kpi.tone-danger .m-kpi-icon { background: var(--danger-soft); color: var(--danger); }
.m-kpi-value { font-size: 1.4rem; font-weight: 800; line-height: 1; }
.m-kpi-label { color: var(--muted); font-size: 0.76rem; font-weight: 500; margin-top: 4px; }
.m-kpi-delta { font-size: 0.72rem; font-weight: 600; margin-top: 5px; display: flex; align-items: center; gap: 3px; }
.m-kpi-delta.up { color: var(--primary-dark); }
.m-kpi-delta.down { color: var(--danger); }
.m-kpi-delta.flat { color: var(--muted); }
.m-kpi-delta svg { width: 11px; height: 11px; }

/* ---------- Segmen 2: aksi cepat, grid 4 kolom x 2 baris ---------- */
/* Direvisi 23-08-2026 (permintaan owner) - sebelumnya sempat dibuat scroll horizontal saat
   tombol Notifikasi baru ditambahkan (5 tombol), tapi owner minta tetap grid biasa, cukup
   melebar ke baris ke-2 begitu lebih dari 4 tombol (auto-wrap bawaan CSS grid). */
.m-quickrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 4px; }
.m-quick {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 14px 4px 12px; color: var(--text); position: relative; text-decoration: none;
}
.m-quick-icon {
    width: 40px; height: 40px; border-radius: 50%; background: var(--primary-soft);
    color: var(--primary-dark); display: flex; align-items: center; justify-content: center;
}
.m-quick-icon.tone-warning { background: var(--warning-soft); color: var(--warning); }
/* Hijau uang (03-09-2026, permintaan owner khusus tile Saldo) - dikecualikan dari aturan
   "kartu aksi seragam tanpa warna" di bagian bawah berkas ini (bab Kartu aksi). Memakai
   --uang-masuk yang sama dengan token "uang masuk" di seluruh app, bukan warna baru. */
.m-quick-icon.tone-uang { background: rgba(21, 115, 71, .12); color: var(--uang-masuk); }
.m-quick-icon svg { width: 19px; height: 19px; }
.m-quick-label { font-size: 0.72rem; font-weight: 600; text-align: center; }
/* Menu yang belum dikembangkan - terlihat jelas belum aktif, bukan link mati diam-diam. */
.m-quick.placeholder { color: var(--muted); }
.m-quick.placeholder .m-quick-icon { background: var(--bg); color: var(--muted); }

/* Notice Katya (03-09-2026, permintaan owner) - dipindah dari tile grid ke baris tersendiri
   DI ATAS m-quickrow: avatar foto kotak kecil + pesan status di sampingnya, SENGAJA beda
   bentuk dari tile grid lain di bawahnya. */
/* padding-right ekstra (03-09-2026) - lencana "Offline" pojok kanan-atas kartu ini
   posisinya absolute, jadi tidak otomatis menyisakan ruang; tanpa ini teks pesan yang
   panjang bisa menabrak/tertutup lencananya. */
.m-katya-notice { position: relative; display: flex; align-items: center; gap: 12px; text-decoration: none; padding-right: 72px; }
.m-katya-avatar {
    width: 56px; height: 56px; flex-shrink: 0;
    border-radius: var(--radius); overflow: hidden;
}
.m-katya-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Lencana pojok kanan-atas KARTU (bukan avatar) - kuning, permintaan owner 03-09-2026.
   Sempat dipasang di pojok avatar dulu, dipindah ke pojok kartu m-katya-notice sendiri. */
.m-katya-status {
    position: absolute; top: 8px; right: 8px;
    background: #FFD60A; color: #111; font-size: .66rem; font-weight: 800;
    letter-spacing: .3px; text-transform: uppercase; padding: 3px 7px; border-radius: 999px;
}
.m-katya-pesan { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m-katya-nama { font-weight: 700; font-size: 1rem; color: var(--text); }
.m-katya-pesan .m-muted { font-size: .88rem; }

.m-quick-soon {
    position: absolute; top: 6px; right: 6px; background: var(--warning-soft); color: var(--warning);
    font-size: 0.56rem; font-weight: 700; padding: 2px 5px; border-radius: 999px; letter-spacing: .2px;
}
.m-quick-badge {
    position: absolute; top: 4px; right: 10px; min-width: 18px; height: 18px; border-radius: 999px;
    background: #FF9F1C; color: #fff; font-size: .66rem; font-weight: 800; padding: 0 4px;
    display: flex; align-items: center; justify-content: center; line-height: 1;
    animation: m-blink-badge 1s ease-in-out infinite;
}
@keyframes m-blink-badge { 0%, 100% { background: #FF9F1C; } 50% { background: var(--danger); } }
@media (prefers-reduced-motion: reduce) { .m-quick-badge { animation: none; background: var(--danger); } }

/* ---------- Segmen 3: kartu pesanan kaya informasi ---------- */
.m-order-list { display: flex; flex-direction: column; gap: 12px; }
.m-order-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); overflow: hidden;
}
.m-order-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid var(--border); background: #fafbfa;
}
.m-order-code { font-weight: 800; font-size: .96rem; letter-spacing: .2px; }
.m-oc-head-left { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.m-oc-exp {
    font-size: .68rem; font-weight: 800; white-space: nowrap; color: var(--info);
    background: var(--info-soft); padding: 2px 7px; border-radius: 6px;
}
.m-oc-exp.terlambat { color: #fff; background: var(--danger); }

/* ---------- Baris item (satu per produk) - untuk operator cocokkan barang fisik ---------- */
.m-oc-items { padding: 10px 14px 2px; display: flex; flex-direction: column; gap: 10px; }
.m-oc-item { display: flex; align-items: center; gap: 10px; }
.m-oc-item-img {
    width: 64px; height: 64px; border-radius: 10px; flex-shrink: 0; object-fit: cover;
    border: 1px solid var(--border); background: #f3f3f3;
}
.m-avatar {
    width: 64px; height: 64px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 1.05rem; text-transform: uppercase;
}
.m-oc-item-info { flex: 1; min-width: 0; }
/* Judul item (09-09-2026) - BOLD & lebih besar dari sebelumnya (bukan cuma font-weight
   600) karena sekarang isinya istilah pendek internal (lihat catatan di
   order_card_mobile.php), bukan lagi judul listing panjang yang butuh clamp 2 baris supaya
   muat - foto produk yang diperbesar & teks pendek ini sama-sama untuk mempercepat operator
   mencocokkan warna/kemasan fisik saat packing. */
.m-oc-item-name {
    font-weight: 800; font-size: .88rem; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.m-oc-item-sku { color: var(--muted); font-size: .74rem; margin-top: 2px; }
.m-oc-item-qty {
    flex-shrink: 0; font-weight: 800; font-size: 1.3rem; line-height: 1; text-align: right;
}
.m-oc-item-unit { font-size: .68rem; font-weight: 600; color: var(--muted); margin-left: 2px; }

/* ---------- Meta: sumber marketplace, pembeli, kurir, tanggal ---------- */
.m-oc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 14px 0; font-size: .8rem; color: var(--muted); }
.m-oc-meta span { display: inline-flex; align-items: center; gap: 4px; }
.m-oc-meta svg { width: 13px; height: 13px; flex-shrink: 0; }
.m-oc-meta-tanggal { padding-top: 4px; padding-bottom: 8px; font-size: .74rem; }
.m-oc-source {
    font-weight: 800; text-transform: uppercase; letter-spacing: .2px; font-size: .72rem;
    padding: 3px 8px; border-radius: 5px; color: #fff;
}
.m-oc-source.src-shopee { background: #ee4d2d; }
.m-oc-source.src-tiktok { background: #111; }
.m-oc-source.src-tokopedia { background: #03ac0e; }
.m-oc-source.src-lazada { background: #0f146d; }
.m-oc-source.src-lain { background: var(--muted); }
.m-resi-printed { color: var(--primary-dark); display: inline-flex; align-items: center; }
/* Lokasi Toko per pesanan (08-09-2026, digabung 1 baris dengan sumber marketplace & kurir
   sejak revisi hari yang sama) - format sama persis dengan badge .m-oc-source (bold,
   uppercase, latar warna solid), tapi kuning - beda peran dari badge marketplace, jadi
   sengaja beda warna supaya tidak tertukar sekilas pandang. */
.m-oc-lokasi {
    font-weight: 800; text-transform: uppercase; letter-spacing: .2px;
    font-size: .72rem; padding: 3px 8px; border-radius: 5px; background: #FFC933; color: #5c3d00;
}
/* "diproses oleh" (08-09-2026) - garis pemisah di bawahnya, member jeda visual dari harga/
   tombol aksi di footer kartu supaya tidak berdempetan. */
.m-oc-proses { padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 2px; }
.m-resi-printed svg { width: 12px; height: 12px; }
.m-oc-catatan {
    margin: 0 14px 8px; padding: 6px 10px; border-radius: 8px; background: #fff8e1;
    color: #000; font-weight: 700; font-size: .78rem; line-height: 1.35;
}

/* Kartu Instant/Same Day - latar merah lembut di header, penanda cepat tanpa buka detail. */
.m-oc-head-instant { background: var(--danger-soft) !important; }
.m-oc-head-instant .m-order-code { color: #96271b; }

.m-oc-clickable { cursor: pointer; }
.m-oc-clickable:active { background: #fafbfa; }

.m-order-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 14px; border-top: 1px solid var(--border);
}
.m-order-total { display: flex; flex-direction: column; gap: 2px; font-weight: 800; font-size: 1.1rem; }
/* % potongan & Netto per pesanan (08-09-2026) - dari orders.settled_amount/estimasi_cair
   yang sudah diisi sistem escrow, murni ditampilkan di sini (lihat catatan di
   order_card_mobile.php). Font lebih kecil & tidak tebal - informasi pendukung di bawah
   angka checkout, bukan menyaingi angka utamanya. */
.m-oc-netto { font-weight: 600; font-size: .72rem; color: var(--muted); }
.m-tracking-btn {
    display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 999px;
    background: #dcfce7; color: #15803d; font-size: .82rem; font-weight: 700;
    border: none; cursor: pointer;
}
.m-tracking-btn svg { width: 14px; height: 14px; }

/* ---------- Sheet riwayat tracking ---------- */
.m-track-list { display: flex; flex-direction: column; gap: 0; margin-top: 10px; }
.m-track-item { display: flex; gap: 10px; padding: 8px 0; border-left: 2px solid var(--border); padding-left: 14px; margin-left: 4px; position: relative; }
.m-track-item::before { content: ''; position: absolute; left: -5px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.m-track-item:first-child::before { background: var(--primary); }
.m-track-item:first-child { border-left-color: var(--primary); }
.m-track-jam { font-size: .7rem; color: var(--muted); flex-shrink: 0; width: 74px; }
.m-track-ket { font-size: .82rem; line-height: 1.4; }
.m-order-action { flex-shrink: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.m-cetak-badge { color: var(--danger); display: inline-flex; align-items: center; gap: 3px;
    font-size: .72rem; font-weight: 700; white-space: nowrap; }
.m-cetak-badge svg { width: 13px; height: 13px; }

.m-btn-action {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px;
    border-radius: 999px; border: none; font-size: .88rem; font-weight: 700; cursor: pointer;
    background: var(--primary); color: #fff;
}
.m-btn-action svg { width: 15px; height: 15px; }
.m-btn-action.print { background: var(--info); }

.m-kilat-info {
    display: flex; align-items: flex-start; gap: 8px; background: var(--info-soft);
    color: var(--info); border-radius: var(--radius-sm); padding: 10px 12px;
    font-size: .78rem; line-height: 1.5; margin-bottom: 14px;
}
.m-kilat-info svg { flex-shrink: 0; margin-top: 1px; }
.m-kilat-info a { color: inherit; font-weight: 700; }

.m-kilat-print-grup { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.m-kilat-tandai {
    background: none; border: none; color: var(--muted); font-size: .72rem;
    text-decoration: underline; cursor: pointer; padding: 2px;
}
.m-btn-action:disabled { opacity: .55; }
.m-kilat-badge {
    display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 999px;
    background: var(--warning-soft); color: var(--warning); font-size: .82rem; font-weight: 700;
}
.m-kilat-badge svg { width: 14px; height: 14px; }

.m-instant-badge {
    display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700;
    color: var(--info); white-space: nowrap;
}
.m-instant-badge svg { width: 13px; height: 13px; }
.m-instant-badge.terlambat { color: var(--danger); }

.m-badge {
    display: inline-block; padding: 4px 10px; border-radius: 999px;
    font-size: 0.74rem; font-weight: 700; white-space: nowrap;
}
.m-badge.status-menunggu_pembayaran { background: var(--warning-soft); color: #92400e; }
.m-badge.status-dikonfirmasi { background: var(--info-soft); color: var(--info); }
.m-badge.status-diproses { background: #ede9fe; color: #5b21b6; }
.m-badge.status-dikirim { background: var(--primary-soft); color: var(--primary-dark); }
.m-badge.status-selesai { background: var(--primary-soft); color: var(--primary-dark); }
.m-badge.status-dibatalkan { background: var(--danger-soft); color: #991b1b; }

/* ---------- Ringkasan Bulan Ini (dashboard.php, dipindah dari orders.php 22-08-2026) -
   19-08-2026, tema terang 22-08-2026 ---------- */
.m-ringkasan-box {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text);
    padding: 14px 16px; margin-bottom: 12px;
}
/* Baris atas 3 kolom (revisi 22-08-2026): Pesanan Hari Ini (kiri) | Omset Hari Ini, owner
   saja, TANPA label - cuma nominal + kemarin kecil (tengah) | persentase banding (kanan) -
   sebelumnya Omset punya kotak berlabel sendiri di bawah baris ini, dihapus supaya box
   tidak makan tempat vertikal dan grafik 7 hari di bawahnya bisa lebih tinggi. */
.m-ringkasan-hari { display: grid; grid-template-columns: 1fr auto 1fr; align-items: flex-end; gap: 10px; }
.m-ringkasan-omset-tengah { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.m-ringkasan-omset-angka { font-size: 1.15rem; font-weight: 800; color: var(--warning); white-space: nowrap; }
.m-ringkasan-omset-kemarin { font-size: .68rem; color: var(--muted); white-space: nowrap; }
.m-ringkasan-hari-utama { display: flex; flex-direction: column; gap: 1px; }
.m-ringkasan-banding { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.m-ringkasan-delta {
    display: inline-flex; align-items: center; gap: 3px; font-size: .78rem; font-weight: 800;
    padding: 2px 8px; border-radius: 999px; background: var(--bg); color: var(--muted);
}
.m-ringkasan-delta.naik { background: #dcfce7; color: #15803d; }
.m-ringkasan-delta.turun { background: var(--danger-soft); color: #991b1b; }
.m-ringkasan-divider { height: 1px; background: var(--border); margin: 12px 0; }

.m-chart7 { display: flex; justify-content: space-between; gap: 4px; margin-top: 10px; }
.m-chart7-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
/* margin-bottom (06-09-2026, permintaan owner: "beri jarak antara grafik batang dan jumlah
   paket") - ditaruh di sini (bukan di gap kolom) supaya cuma renggangkan jarak ke batang,
   TIDAK ikut merenggangkan jarak batang ke label hari di bawahnya. */
.m-chart7-jml { font-size: .58rem; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.m-chart7-track { width: 100%; max-width: 16px; height: 56px; display: flex; align-items: flex-end; background: var(--bg); border-radius: 3px 3px 0 0; }
.m-chart7-bar { width: 100%; min-height: 3px; border-radius: 3px 3px 0 0; background: var(--border); }
.m-chart7-bar.ini { background: var(--primary); }
.m-chart7-hari { font-size: .6rem; color: var(--muted); }
.m-chart7-hari.ini { font-weight: 800; color: var(--primary); }
.m-ringkasan-top { display: flex; justify-content: space-between; gap: 10px; }
.m-ringkasan-utama, .m-ringkasan-target { display: flex; flex-direction: column; gap: 1px; }
.m-ringkasan-target { text-align: right; flex-shrink: 0; }
.m-ringkasan-label { font-size: .68rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.m-ringkasan-angka { font-size: 1.5rem; font-weight: 800; line-height: 1.2; color: var(--text); }
.m-ringkasan-angka.besar { font-size: 2.1rem; color: var(--primary-dark); }
.m-ringkasan-hari-row { display: flex; align-items: baseline; gap: 6px; }
.m-ringkasan-batal { font-size: 1.05rem; font-weight: 800; color: var(--danger); }
.m-ringkasan-angka.kecil { font-size: 1.15rem; }
.m-ringkasan-angka .m-muted { color: var(--muted); font-weight: 600; font-size: .8rem; }
.m-ringkasan-sub { font-size: .68rem; color: var(--muted); }
.m-ringkasan-bar { margin-top: 10px; }

/* ---------- Kotak tab status (1 box, wrap - tidak scroll) ---------- */
.m-tabbox {
    display: flex; flex-wrap: wrap; gap: 6px; background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 10px; margin-bottom: 14px;
}
.m-tab-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--bg); color: var(--text);
    font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.m-tab-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.m-tab-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
    padding: 0 4px; border-radius: 999px; background: rgba(0,0,0,.08); font-size: .68rem; font-weight: 800;
}
.m-tab-chip.active .m-tab-count { background: rgba(255,255,255,.28); }
/* Tab & badge permintaan pembatalan (26-08-2026) - merah, menuntut perhatian. */
.m-tab-chip.minta-batal { border-color: var(--danger); color: var(--danger); }
.m-tab-chip.minta-batal.active { background: var(--danger); border-color: var(--danger); color: #fff; }
/* Label kecil di atas baris tab kurir dinamis (08-09-2026) - menandai baris kedua ini
   sumbernya beda (kurir pesanan Diproses), bukan lanjutan baris status di atasnya. */
.m-tabbox-label {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
    color: var(--muted); margin: -6px 2px 6px;
}
/* Baris tab status (08-09-2026, revisi tampilan sehari kemudian - versi hijau rata sekilas
   terasa datar/kurang menonjol, permintaan owner) - dirombak jadi 4 kartu MINI-STATISTIK
   (label kecil di atas, angka besar di bawah - pola yang SAMA dipakai kotak "Paket Belum
   Dikirim"/Ringkasan di atasnya, bukan gaya baru) SUPAYA jelas ini "titik kerja utama"
   halaman - operator langsung menangkap angka besarnya tanpa perlu baca label dulu.
   Warna PER STATUS (bukan hijau rata) - dan sengaja PAKAI ULANG warna yang SUDAH bermakna
   sama persis di halaman ini: --uang-masuk untuk Dikirim (sama seperti kolom Dikirim di
   kotak Ringkasan & tabel Akun di atas), --danger untuk Batal (sama seperti kolom Batal di
   tabel Akun) - supaya satu warna = satu arti konsisten di seluruh halaman, bukan cuma di
   baris ini. New Order dapat --warning (kuning tua, "baru masuk perlu perhatian"), Diproses
   dapat --primary (navy, warna utama app - "sedang dikerjakan"). */
.m-tabbox-status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.m-tabbox-status .m-tab-chip {
    flex-direction: column; justify-content: center; align-items: center; gap: 2px;
    border-radius: var(--radius-sm); padding: 10px 2px; border: none; color: #fff;
    box-shadow: 0 2px 6px -2px rgba(0,0,0,.25);
}
.m-tabbox-status .m-tab-label {
    font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
    opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.m-tabbox-status .m-tab-count {
    background: none; padding: 0; min-width: 0; height: auto;
    font-size: 1.3rem; font-weight: 800; color: #fff; line-height: 1.1;
}
.m-tabbox-status .m-status-new { background: var(--warning); }
.m-tabbox-status .m-status-proses { background: var(--primary); }
.m-tabbox-status .m-status-dikirim { background: var(--uang-masuk); }
.m-tabbox-status .m-status-batal { background: var(--danger); }
/* Aktif = cincin putih + terangkat sedikit, warnanya sendiri TIDAK diganti - supaya kartu
   yang sedang dipilih tetap dikenali sebagai kartu status yang sama, bukan berubah jadi
   warna lain yang tidak berkaitan. */
.m-tabbox-status .m-tab-chip.active {
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), 0 4px 10px -2px rgba(0,0,0,.35);
    transform: translateY(-1px);
}
/* Tombol putusan pembatalan di lembar ringkasan (27-08-2026) - berdampingan, tombol
   "Setujui Batal" merah karena tidak bisa dibatalkan. */
.m-batal-aksi { display: flex; gap: 8px; margin-top: 10px; }
.m-batal-aksi .m-btn { flex: 1; padding: 11px; font-size: .88rem; margin-bottom: 0; }

.m-badge-minta-batal {
    background: var(--danger); color: #fff; font-size: .58rem; font-weight: 800;
    padding: 3px 6px; border-radius: 999px; letter-spacing: .3px; margin-right: 5px;
    white-space: nowrap;
}

.m-search { width: 100%; padding: 12px 15px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--card); font-size: 1rem; margin-bottom: 12px; }

label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
select, input[type=text], input[type=password], input[type=number], input[type=date], textarea {
    width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 1rem; background: #fff; color: var(--text); margin-bottom: 12px;
}
.m-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 14px; border-radius: var(--radius); border: none;
    background: var(--primary); color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer;
}
/* Abu-abu (09-09-2026, permintaan owner - sebelumnya putih nyaris tak beda dari latar kartu
   sheet, kurang terlihat sebagai tombol) - dipakai tombol "Tutup" di semua popup/sheet
   (detail pesanan, tracking, rincian paket, dsb - satu class dipakai bersama semuanya). */
.m-btn.secondary { background: #d8dce3; color: var(--text); border: 1px solid #c4c9d2; }
.m-btn.danger { background: var(--danger); }
.m-btn:disabled { opacity: .6; }
.m-btn.sm { width: auto; padding: 8px 14px; font-size: .82rem; }

.m-alert { padding: 13px 15px; border-radius: var(--radius); margin-bottom: 12px; font-size: 0.92rem; }
.m-alert.error { background: var(--danger-soft); color: #991b1b; }
.m-alert.success { background: var(--primary-soft); color: var(--primary-dark); }
.m-alert.warning { background: var(--warning-soft); color: #92400e; border: 1px solid var(--warning); }

/* ---------- Dashboard Produksi (redesain 19-08-2026: hero card + aksi berwarna + list ringkas) ---------- */
.m-prod-hero {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 14px 16px; margin-bottom: 12px; color: #fff;
}
.m-prod-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.m-prod-hero-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.m-prod-hero-icon {
    width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.m-prod-hero-info { display: flex; flex-direction: column; gap: 1px; }
.m-prod-hero-label { font-size: .72rem; font-weight: 600; opacity: .85; text-transform: uppercase; letter-spacing: .3px; }
.m-prod-hero-value { font-size: 1.35rem; font-weight: 800; line-height: 1.15; }
.m-prod-hero-value small { font-size: .7rem; font-weight: 600; opacity: .8; }
.m-prod-hero-batch { text-align: right; flex-shrink: 0; }
.m-prod-hero-batch strong { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.m-prod-hero-batch span { font-size: .62rem; font-weight: 600; opacity: .85; text-transform: uppercase; letter-spacing: .3px; }
.m-prod-hero-gauge { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.22); }
.m-prod-hero-gauge-top { display: flex; justify-content: space-between; font-size: .72rem; opacity: .9; margin-bottom: 5px; }
.m-prod-hero-gauge-top strong { font-weight: 700; }
.m-prod-hero-bar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.22); overflow: hidden; }
.m-prod-hero-bar-isi { height: 100%; background: #fff; border-radius: 4px; }

/* Hero Produksi baris 1 & 2 (09-09-2026, permintaan owner) - kartu "Kebutuhan Produksi" dan
   "Selisih Timbang Bahan Mentah" TERPISAH dihapus, isinya dipadatkan ke sini. Class BARU,
   TIDAK menyentuh .m-prod-hero-row/-left/-icon/-info/-label/-value/-batch di atas - itu
   masih dipakai hero stok.php apa adanya (Bahan Mentah + Siap Kirim), beda kebutuhan dari
   3+4 kolom di sini. */
.m-prod-hero-row3 { display: grid; grid-template-columns: 1.05fr 1fr .9fr; gap: 6px; }
.m-prod-hero-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m-prod-hero-col.tengah { align-items: center; text-align: center; }
.m-prod-hero-col.kanan { align-items: flex-end; text-align: right; }
.m-prod-hero-col-lbl {
    font-size: .72rem; font-weight: 600; opacity: .82; text-transform: uppercase; letter-spacing: .25px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.m-prod-hero-col-val { font-size: 1.32rem; font-weight: 800; line-height: 1.2; }
.m-prod-hero-col-val.redup { opacity: .65; font-weight: 700; font-size: 1.12rem; }
/* Jumlah karung adalah angka UTAMA di baris 1 (09-09-2026, permintaan owner) - dibuat lebih
   besar dari 2 kolom lain di sebelahnya, bukan sama rata seperti sebelumnya. */
.m-prod-hero-col-val.utama { font-size: 1.68rem; }
.m-prod-hero-col-val small { font-size: .72rem; font-weight: 600; opacity: .85; margin-left: 2px; }
.m-prod-hero-col-sub { font-size: .8rem; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.m-prod-hero-batch2-head {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.22);
    font-size: .78rem; opacity: .85;
}
.m-prod-hero-batch2-head strong { font-size: .92rem; opacity: 1; font-weight: 700; letter-spacing: .2px; }
.m-prod-hero-batch2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.m-prod-hero-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m-prod-hero-stat-lbl {
    font-size: .68rem; font-weight: 600; opacity: .78; text-transform: uppercase; letter-spacing: .2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-prod-hero-stat-val { font-size: 1.05rem; font-weight: 800; line-height: 1.25; }
.m-prod-hero-stat-val small { font-size: .72rem; font-weight: 600; opacity: .85; }
.m-prod-hero-stat-sub { font-size: .66rem; opacity: .72; }
/* Warna selisih SAMA dengan palet zona 3-warna yang sudah dipakai bar Min/Max/Over
   (.m-prod-bar3-zona.kurang/.lebih) - bukan warna baru, tetap satu bahasa visual. */
.m-prod-hero-stat-val.negatif { color: #fca5a5; }
.m-prod-hero-stat-val.positif { color: #86efac; }

/* Balik ke 2 kolom (09-09-2026, permintaan owner) - sempat 3 kolom sejak 27-08-2026
   (Smelter/Oven/Packing), tapi Oven dihapus dan Packing pindah ke stok.php sehingga cuma
   tersisa 2 tombol di kedua halaman yang memakai class ini (produksi.php: Smelter+Bahan
   Datang, stok.php: Packing+Retur) - grid-nya kelupaan tidak ikut disesuaikan, jadi
   menyisakan ruang kosong di kanan. */
.m-prod-tombol-baris { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 0 16px; }
.m-prod-action-btn {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 10px;
    border-radius: var(--radius-sm); border: none; font-weight: 700;
    font-size: .82rem; cursor: pointer; text-align: left; line-height: 1.2;
}
.m-prod-action-icon {
    width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0; background: rgba(255,255,255,.28);
}
.m-prod-action-btn.smelter { background: #1E3A8A; color: #fff; }
.m-prod-action-btn.smelter .m-prod-action-icon { background: rgba(255,255,255,.28); color: #fff; }
.m-prod-action-btn.oven { background: #FFE3BF; color: #B75B00; }
.m-prod-action-btn.oven .m-prod-action-icon { background: #FF8C00; color: #FFD54A; }
/* Packing (27-08-2026) - tombol ini dulu berlabel OVEN padahal isinya mencatat produk jadi.
   Hijau supaya jelas beda dari oven (oranye) dan smelter (biru). */
.m-prod-action-btn.packing { background: #DCFCE7; color: #15803D; }
.m-prod-action-btn.packing .m-prod-action-icon { background: #15803D; color: #DCFCE7; }
.m-prod-action-btn:disabled { opacity: .5; }

.m-section-title { display: flex; align-items: center; gap: 6px; }

.m-output-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.m-output-card {
    display: flex; align-items: center; gap: 9px;
    background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--border);
    border-radius: var(--radius-sm); padding: 9px 11px;
}
.m-output-badge {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .74rem; font-weight: 800;
}
.m-output-body { min-width: 0; }
.m-output-card.halus { border-left-color: #2563A6; }
.m-output-card.halus .m-output-badge { background: #DCEEFF; color: #2563A6; }
.m-output-card.bibit { border-left-color: #26824B; }
.m-output-card.bibit .m-output-badge { background: #DDF7E3; color: #26824B; }
.m-output-card.kasar { border-left-color: #1E3A8A; }
.m-output-card.kasar .m-output-badge { background: #E4EAFB; color: #1E3A8A; }
.m-output-card.limbah { border-left-color: #FF9F1C; }
.m-output-card.limbah .m-output-badge { background: #FFEAD1; color: #B75B00; }
.m-output-label { font-size: .7rem; font-weight: 600; color: var(--muted); margin-bottom: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-output-angka { font-size: 1rem; font-weight: 800; color: var(--text); }
.m-output-angka span { font-size: .64rem; font-weight: 600; color: var(--muted); }
/* Varian badge berdiri sendiri (dipakai di stok-agen.php, di luar .m-output-card) */
.m-output-badge.halus { background: #DCEEFF; color: #2563A6; }
.m-output-badge.bibit { background: #DDF7E3; color: #26824B; }
.m-output-badge.kasar { background: #E4EAFB; color: #1E3A8A; }
.m-output-badge.limbah { background: #FFEAD1; color: #B75B00; }

/* ---------- Dashboard Stok: badge approval, grid agen, list produk agen - 19-08-2026 ---------- */
.m-stok-approval-badge {
    display: flex; align-items: center; gap: 8px; background: var(--warning-soft);
    border: 1px solid #f0dca0; color: var(--warning); border-radius: var(--radius-sm);
    padding: 10px 12px; font-size: .82rem; font-weight: 700; margin-bottom: 12px;
}
.m-stok-approval-badge svg:last-child { margin-left: auto; flex-shrink: 0; }

.m-agen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.m-agen-card {
    display: block; position: relative; background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 10px 12px; text-decoration: none; color: var(--text);
}
.m-agen-card-top { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.m-agen-icon {
    width: 26px; height: 26px; border-radius: 50%; background: var(--primary-soft); color: var(--primary);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.m-agen-nama { flex: 1; min-width: 0; font-weight: 700; font-size: .86rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-agen-stat { font-size: .68rem; color: var(--muted); }
.m-agen-rendah { color: var(--danger); font-weight: 700; }
.m-agen-berat { font-size: .68rem; color: var(--muted); margin-top: 4px; }
/* Indikator "ada produk di bawah buffer" - api animasi (SVG gradien, dari owner) di pojok
   kanan bawah kartu, gantikan titik blink lama (m-paket-blink dipakai bareng dashboard.php,
   sengaja tidak diubah global - ini kelas khusus kartu agen). Animasinya ada DI DALAM SVG
   (kelas .flame-outer/.flame-inner, lihat stok.php) - kelas ini cuma mengatur posisi.
   Gradiennya punya id unik per kartu (flameGrad<id agen>) supaya tidak bentrok kalau lebih
   dari 1 kartu tampil sekaligus (id HTML wajib unik per halaman). */
.m-agen-fire { position: absolute; right: 8px; bottom: 8px; line-height: 0; }
.m-agen-fire .flame-outer { animation: m-agen-flame-pulse 1.6s ease-in-out infinite alternate; transform-origin: 12.5px 22px; }
.m-agen-fire .flame-inner { animation: m-agen-flame-pulse 1.2s ease-in-out infinite alternate-reverse; transform-origin: 12.5px 22px; }
@keyframes m-agen-flame-pulse { 0% { opacity: .45; transform: scale(.92); } 100% { opacity: 1; transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) {
    .m-agen-fire .flame-outer, .m-agen-fire .flame-inner { animation: none; }
}

.m-agenprod-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
/* Kartu bertumpuk (09-09-2026, dirombak dari 1 baris horizontal - permintaan owner: strip
   Masuk/Stok/Keluar harus horizontal & terasa profesional, bukan angka ditumpuk sempit di
   kolom kanan). Struktur: kepala (foto+nama+tombol transfer) / Min-Max-Vol+bar 3-zona /
   strip 3 kolom - lihat catatan lengkap di includes/agenprod.php.
   REVISI 09-09-2026 (sehari kemudian): wadah baris ini SEKARANG <div>, bukan <button> lagi -
   ada 3 elemen interaktif TERPISAH di dalamnya (tombol transfer, Masuk, Keluar), dan HTML
   tidak mengizinkan <button> bersarang. Tidak ada lagi cursor:pointer di sini - kalau mau
   tunjuk "bisa diklik", itu tanggung jawab tombol kecilnya masing-masing sekarang. */
.m-agenprod-row {
    display: flex; flex-direction: column; width: 100%;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 11px 12px; color: var(--text);
}
.m-agenprod-head { display: flex; align-items: center; gap: 10px; }
/* Foto produk (09-09-2026, permintaan owner) - lebih besar dari badge inisial biasa (30px)
   supaya benar-benar kelihatan sebagai FOTO, bukan ikon kecil - badge fallback ikut
   dibesarkan sama (scoped ke sini saja) supaya keduanya tetap sejajar rapi kalau tercampur
   dalam satu daftar (sebagian produk punya foto, sebagian belum). */
.m-agenprod-foto { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); background: #f3f3f3; }
.m-agenprod-head .m-output-badge { width: 44px; height: 44px; border-radius: 10px; font-size: .95rem; }
.m-agenprod-body { flex: 1; min-width: 0; }
.m-agenprod-nama { display: block; font-weight: 700; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-agenprod-sub { display: block; font-size: .7rem; color: var(--muted); margin-top: 2px; }
/* Tombol transfer kotak (09-09-2026, menggantikan chevron ">" - permintaan owner: harus
   jelas kelihatan sebagai TOMBOL AKSI, bukan sekadar penanda "ada halaman berikutnya").
   Cuma dirender kalau $clickable true (penanggung jawab gudang) - lihat agenprod.php. */
.m-agenprod-transfer {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--radius-sm); border: none;
    background: var(--primary); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.m-agenprod-transfer:active { filter: brightness(.9); }
/* Strip Masuk/Stok/Keluar - grid 3 kolom rata, label kecil uppercase di atas + angka besar
   di bawah (pola SAMA dipakai kotak Ringkasan Paket di orders.php, bukan gaya baru sendiri -
   permintaan owner: "informatif dan profesional"). Kolom Stok ditandai latar & pembatas
   supaya jelas itu ANGKA UTAMA, Masuk/Keluar di kiri-kanannya adalah PENDUKUNG (arus hari
   ini), bukan tiga angka sama pentingnya berjejer datar. */
.m-agenprod-stats {
    display: grid; grid-template-columns: 1fr 1.2fr 1fr; margin-top: 9px;
    border-top: 1px solid var(--border); padding-top: 8px;
}
.m-agenprod-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 4px; }
.m-agenprod-stat.stok { border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
/* Masuk/Keluar SEKARANG tombol (09-09-2026, permintaan owner: "berikan UI pada qty agar
   terlihat itu tombol" - buka riwayat pergerakan hari ini, lihat assets/js/riwayat-gerak.js).
   Latar pil tipis warna sesuai arahnya + border supaya terlihat beda dari kolom Stok yang
   murni informasi statis di tengahnya - bukan cuma warna teks seperti sebelumnya. */
.m-agenprod-stat-btn {
    border: none; background: none; font: inherit; cursor: pointer; border-radius: var(--radius-sm);
}
.m-agenprod-stat-btn:active { filter: brightness(.95); }
/* Warna dipertegas (09-09-2026, permintaan owner - versi tint tipis sebelumnya dianggap
   kurang tegas) - latar lebih jenuh + border lebih tebal & lebih gelap. */
.m-agenprod-stat-btn.masuk { background: #bbf7d0; border: 1.5px solid #22c55e; }
.m-agenprod-stat-btn.keluar { background: #fecaca; border: 1.5px solid #ef4444; }
.m-agenprod-stat-lbl {
    font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
    color: var(--muted);
}
.m-agenprod-stat-val { font-size: 1rem; font-weight: 800; color: var(--text); line-height: 1.2; }
.m-agenprod-stat.masuk .m-agenprod-stat-val { color: var(--uang-masuk); }
.m-agenprod-stat.keluar .m-agenprod-stat-val { color: var(--uang-keluar); }
.m-agenprod-stat.stok .m-agenprod-stat-val { font-size: 1.25rem; }
.m-agenprod-stat.stok .m-agenprod-stat-val.merah { color: var(--danger); }
.m-agenprod-stat.stok .m-agenprod-stat-val.hijau { color: var(--primary); }
.m-agenprod-stat-unit { font-size: .64rem; font-weight: 600; color: var(--muted); }

/* ---------- Popup Riwayat Pergerakan Stok (09-09-2026) - lihat assets/js/riwayat-gerak.js.
   Waktu (jam:menit:detik) SELALU ditampilkan (permintaan owner: "pastikan ada waktu
   detail") - bukan cuma "beberapa menit lalu" yang lain di app ini, karena di sini yang
   dicari justru KAPAN PERSISNYA, bukan seberapa baru. ---------- */
.m-riwayat-gerak-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.m-riwayat-gerak-row {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px;
    background: var(--bg); border-radius: var(--radius-sm);
}
.m-riwayat-gerak-jam {
    flex-shrink: 0; font-size: .78rem; font-weight: 700; color: var(--text);
    font-variant-numeric: tabular-nums; width: 58px;
}
.m-riwayat-gerak-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.m-riwayat-gerak-info strong { font-size: .82rem; }
.m-riwayat-gerak-info .m-muted { font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-riwayat-gerak-qty { flex-shrink: 0; font-weight: 800; font-size: .92rem; }
.m-riwayat-gerak-qty.masuk { color: var(--uang-masuk); }
.m-riwayat-gerak-qty.keluar { color: var(--uang-keluar); }
.m-riwayat-gerak-total {
    display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--border); font-size: .88rem;
}

/* ---------- Opname Stok (09-09-2026) - grid pilih lokasi (opname.php) + daftar produk
   (opname-lokasi.php, memakai ulang .m-agenprod-row/.m-kirim-*/.m-qty-* yang sudah ada). ---------- */
.m-opname-loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.m-opname-loc-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 14px; text-decoration: none; color: var(--text);
}
/* Baris atas: ikon kiri, badge "Gudang Utama" kanan (kalau ada) - dipisah dari .m-opname-loc-icon
   polos supaya keduanya bisa sejajar di kartu yang sama, bukan ikon lalu badge menumpuk vertikal. */
.m-opname-loc-top { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 2px; }
.m-opname-loc-icon {
    width: 36px; height: 36px; border-radius: 10px; background: var(--primary-soft);
    color: var(--primary); display: flex; align-items: center; justify-content: center;
}
.m-opname-loc-nama { font-weight: 700; font-size: .88rem; }
.m-opname-loc-tag {
    font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
    color: var(--primary); background: var(--primary-soft); padding: 2px 7px; border-radius: 999px;
}
/* Jumlah produk & tanggal terakhir opname - 2 KOLOM berdampingan (09-09-2026, revisi tampilan
   sehari kemudian, permintaan owner: sebelumnya ditumpuk 2 baris vertikal, dianggap kurang
   ringkas). Pola label-kecil-di-atas-angka-di-bawah yang sama dipakai strip Masuk/Stok/Keluar
   di kartu produk (agenprod.php) - bukan gaya baru sendiri. Tanggal ditandai kuning+petir
   kalau sudah >30 hari atau belum pernah - supaya lokasi yang perlu diprioritaskan kelihatan
   sekilas pandang tanpa perlu buka satu-satu. */
.m-opname-loc-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 4px;
    border-top: 1px solid var(--border); padding-top: 6px;
}
.m-opname-loc-stat { display: flex; flex-direction: column; gap: 1px; }
.m-opname-loc-stat-lbl {
    font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
    color: var(--muted);
}
.m-opname-loc-stat-val { font-size: .78rem; font-weight: 700; color: var(--text); }
.m-opname-loc-stat-val.perlu { color: var(--warning); display: inline-flex; align-items: center; gap: 3px; }
.m-opname-loc-stat-val svg { width: 10px; height: 10px; flex-shrink: 0; }
.m-opname-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.m-opname-list .m-agenprod-head { justify-content: space-between; }

.m-back-btn {
    display: inline-flex; align-items: center; gap: 6px; background: var(--card);
    border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px 7px 10px;
    font-size: .82rem; font-weight: 600; color: var(--text); text-decoration: none; margin-bottom: 10px;
}
.m-back-chevron { transform: rotate(180deg); flex-shrink: 0; color: var(--muted); }

.m-agenreq-actions { display: flex; gap: 8px; margin-top: 10px; }
.m-agenreq-actions .m-btn { flex: 1; padding: 9px; font-size: .82rem; }

.m-prod-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.m-prod-row {
    display: flex; align-items: center; gap: 10px;
    background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm); padding: 8px 10px;
}
.m-prod-row.rendah { border-left-color: var(--warning); }
.m-prod-row.kritis { border-left-color: var(--danger); }
.m-prod-row-main { flex: 1; min-width: 0; }
.m-prod-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.m-prod-nama { font-weight: 600; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-prod-angka { font-size: .72rem; color: var(--muted); font-weight: 700; flex-shrink: 0; }
.m-prod-angka.rendah { color: var(--warning); }
.m-prod-angka.kritis { color: var(--danger); }
.m-prod-bar { height: 5px; border-radius: 4px; background: var(--bg); overflow: hidden; }
.m-prod-bar-isi { height: 100%; background: var(--primary); border-radius: 4px; }
.m-prod-bar-isi.rendah { background: var(--warning); }
.m-prod-bar-isi.kritis { background: var(--danger); }
/* Bar 3-zona [Kurang | Sehat | Lebih] (09-09-2026, permintaan owner) - lihat
   stok_posisi_zona() di includes/produksi.php. Track dibagi RATA 3 pertiga (bukan
   proporsional ke angka min/max sungguhan) supaya skalanya konsisten dibaca di semua baris
   produk apa pun jaraknya. Penanda posisi = pill di atas track, warnanya ikut zona tempat ia
   berada. Warna dipertegas (09-09-2026, revisi tampilan sehari kemudian - versi pastel
   sebelumnya dianggap kurang tegas) - zona & penanda jauh lebih jenuh, track lebih tebal
   supaya perbedaan 3 zonanya kelihatan sekilas pandang tanpa perlu diperhatikan dekat-dekat. */
.m-prod-bar3 { position: relative; display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin-top: 7px; }
/* Teks daftar Hasil Produksi diperbesar (09-09-2026, permintaan owner - pengguna sudah agak
   tua), terutama angka kg. Khusus daftar ini lewat .m-prod-list-besar - TIDAK mengubah
   ukuran .m-prod-row di daftar lain (Riwayat Terkini, Selisih Timbang, dst) yang masih
   memakai ukuran default. */
.m-prod-list-besar .m-prod-row-top { align-items: flex-start; }
.m-prod-list-besar .m-prod-nama { font-size: 1.05rem; white-space: normal; }
.m-prod-list-besar .m-prod-angka { font-size: 1.5rem; font-weight: 800; color: var(--text); text-align: right; }
.m-prod-list-besar .m-prod-angka .m-muted { display: block; font-size: .8rem; font-weight: 600; margin-top: 2px; }
.m-prod-list-besar .m-prod-bar3 { height: 14px; margin-top: 10px; }
.m-prod-bar3-zona { flex: 1; height: 100%; }
.m-prod-bar3-zona.kurang { background: #fca5a5; }
.m-prod-bar3-zona.sehat { background: #86efac; }
.m-prod-bar3-zona.lebih { background: #c4b5fd; }
.m-prod-bar3-zona:not(:last-child) { border-right: 1px solid rgba(255,255,255,.85); }
.m-prod-bar3-penanda {
    position: absolute; top: -3px; width: 6px; height: 16px; border-radius: 3px;
    background: var(--primary); transform: translateX(-50%);
    box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.35);
}
.m-prod-bar3-penanda.kurang { background: #b91c1c; }
.m-prod-bar3-penanda.sehat { background: #15803d; }
.m-prod-bar3-penanda.lebih { background: #7c3aed; }
.m-prod-bar3-penanda.tanpa_batas { display: none; }

.m-fab-back {
    position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: 52px; height: 52px; border-radius: 50%; z-index: 40;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff; text-decoration: none;
    font-size: 1.5rem; line-height: 1; box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.m-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.m-form-grid .m-field.full { grid-column: 1 / -1; }
.m-form-grid label { margin-bottom: 4px; }
.m-form-grid select, .m-form-grid input { margin-bottom: 10px; }
.m-prod-ro { margin-top: 4px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg); }
.m-prod-ro.baik { background: var(--primary-soft); }
.m-prod-ro.buruk { background: var(--danger-soft); }
.m-prod-ro-hd { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); margin-bottom: 6px; }
.m-prod-ro-row { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; padding: 3px 0; }
/* Teks pratinjau sedikit lebih besar dari default (09-09-2026, permintaan owner - revisi
   setelah 1.64rem ternyata kebesaran) - dipakai popup Mulai Batch Smelter (ro-smelt) dan
   Selesaikan Batch (ro-selesai). flex-wrap dinyalakan supaya baris yang lebih panjang (mis.
   "Bahan mentah (stok)") tidak terpotong di layar sempit. */
.m-prod-ro-besar .m-prod-ro-row { font-size: 1.05rem; flex-wrap: wrap; padding: 4px 0; }

/* Popup "Selesaikan Batch Smelter" - 3 kolom Halus/Bibit/Kasar (09-09-2026, permintaan
   owner) - field lama (m-form-grid biasa) kekecilan padahal isinya cuma sampai 4 digit,
   jadi dibesarkan tapi tetap PROPORSIONAL (3 kolom sempit, bukan selebar penuh kartu).
   Warna label & latar per komponen SAMA dengan palet .m-output-badge.halus/.bibit/.kasar
   yang sudah dipakai kartu Hasil Produksi - bukan warna baru, operator sudah kenal warnanya. */
.m-hasil-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.m-hasil-field label { display: block; font-size: .8rem; font-weight: 700; margin-bottom: 6px; text-align: center; }
.m-hasil-field.halus label { color: #2563A6; }
.m-hasil-field.bibit label { color: #26824B; }
.m-hasil-field.kasar label { color: #1E3A8A; }
.m-hasil-input-wrap { border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: #fff; overflow: hidden; }
.m-hasil-field.halus .m-hasil-input-wrap { border-color: #2563A6; background: #EAF3FF; }
.m-hasil-field.bibit .m-hasil-input-wrap { border-color: #26824B; background: #EAFBF0; }
.m-hasil-field.kasar .m-hasil-input-wrap { border-color: #1E3A8A; background: #EBEFFA; }
.m-hasil-input-wrap input {
    width: 100%; border: none; background: transparent; margin: 0; padding: 12px 6px 2px;
    font-size: 1.6rem; font-weight: 800; text-align: center; color: var(--text);
    -moz-appearance: textfield;
}
.m-hasil-input-wrap input:focus { outline: none; }
.m-hasil-input-wrap input::-webkit-outer-spin-button,
.m-hasil-input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.m-hasil-unit {
    display: block; text-align: center; font-size: .7rem; font-weight: 700; opacity: .6;
    padding-bottom: 8px; text-transform: uppercase; letter-spacing: .3px;
}

/* ---------- Bottom sheet (popup Drop/Pickup, dsb) - terasa native ---------- */
.m-sheet-backdrop {
    position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 50;
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.m-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.m-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
    background: var(--card); border-radius: 20px 20px 0 0; box-shadow: var(--shadow-lg);
    max-height: 82vh; overflow-y: auto;
    padding: 10px 18px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform .25s cubic-bezier(.32,.72,0,1);
}
.m-sheet-backdrop.open .m-sheet { transform: translateY(0); }
.m-sheet-grip { width: 36px; height: 4px; border-radius: 999px; background: var(--border); margin: 6px auto 14px; }
.m-sheet-title { font-weight: 800; font-size: 1.05rem; margin-bottom: 4px; }
.m-sheet-sub { color: var(--muted); font-size: .85rem; margin-bottom: 16px; }
.m-sheet-actions { display: flex; gap: 10px; margin-top: 18px; }
.m-sheet-actions .m-btn { flex: 1; }

/* ---------- Lightbox foto produk (09-09-2026) - overlay gelap penuh layar, foto sebesar
   mungkin tanpa terpotong (object-fit:contain), TERPISAH dari m-sheet-backdrop (lihat
   catatan di assets/js/orders.js). z-index lebih tinggi dari sheet supaya menang kalau
   kebetulan keduanya sempat aktif bersamaan. ---------- */
.m-foto-backdrop {
    position: fixed; inset: 0; background: rgba(10, 12, 20, .92); z-index: 55;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.m-foto-backdrop.open { opacity: 1; pointer-events: auto; }
.m-foto-besar {
    max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px;
    box-shadow: 0 10px 40px -8px rgba(0,0,0,.6);
}
.m-foto-tutup {
    position: fixed; top: calc(14px + env(safe-area-inset-top)); right: 16px; z-index: 56;
    width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(107, 114, 128, .55); color: #fff; font-size: 1.4rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}

/* ---------- Detail pesanan read-only (klik kartu) ---------- */
.m-detail-rows { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.m-detail-row { display: flex; justify-content: space-between; gap: 14px; font-size: .85rem; }
.m-detail-row span { color: var(--muted); flex-shrink: 0; }
.m-detail-row strong { text-align: right; font-weight: 600; }
.m-detail-items { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.m-detail-total {
    display: flex; justify-content: space-between; align-items: center; margin-top: 14px;
    padding-top: 10px; border-top: 1px solid var(--border); font-size: 1rem;
}
.m-detail-total strong { font-weight: 800; }

.m-opsi {
    display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; margin-bottom: 8px;
    border: 1.5px solid var(--border); border-radius: var(--radius); cursor: pointer;
}
.m-opsi:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.m-opsi input { margin-top: 3px; accent-color: var(--primary); width: 18px; height: 18px; flex-shrink: 0; }
.m-opsi strong { font-size: .95rem; }
.m-opsi .m-muted { font-size: .8rem; margin-top: 2px; display: block; }
.m-opsi.disabled { opacity: .45; pointer-events: none; }

/* ---------- Popup Kirim ke Agen (09-09-2026) - 2 kolom [Agen Tujuan | Jumlah], foto
   produk, stepper qty besar tanpa keyboard. Dirancang untuk pengguna berumur: tombol besar,
   tanpa perlu mengetik angka sama sekali (permintaan owner). ---------- */
.m-kirim-produk { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.m-kirim-foto { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; }
.m-kirim-foto-kosong { display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--muted); }
.m-kirim-2col { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; align-items: start; }
/* Kolom Jumlah Karung vs Berat Total tidak simetris (09-09-2026, permintaan owner) - Jumlah
   Karung cuma 1 digit, Berat Total sampai 3 digit, jadi kolomnya dibuat lebih besar. Khusus
   popup Mulai Batch Smelter, tidak mengubah rasio default .m-kirim-2col di popup lain. */
.m-kirim-2col-smelter { grid-template-columns: .7fr 1.3fr; }
.m-kirim-col-agen > label, .m-kirim-col-qty > label {
    display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .3px; color: var(--muted); margin-bottom: 7px;
}
/* Varian ramping .m-opsi khusus kolom sempit ini - padding & font dikecilkan supaya nama
   agen + angka stok tetap muat rapi tanpa terpotong di kolom selebar ~150px. */
.m-opsi-kirim { padding: 9px 10px; margin-bottom: 6px; gap: 8px; }
.m-opsi-kirim strong { font-size: .82rem; }
.m-opsi-kirim .m-muted { font-size: .7rem; }
.m-opsi-kirim input { width: 16px; height: 16px; }
/* Stepper qty - TIDAK ADA input teks sama sekali, cuma tombol + angka tampilan. Ditumpuk
   vertikal (bukan +/- berdampingan) supaya tombolnya bisa selebar penuh kolom = target
   ketuk sebesar mungkin (permintaan owner: pengisi orang tua, hindari salah ketik/pencet). */
.m-qty-stepper { display: flex; flex-direction: column; gap: 8px; }
.m-qty-btn {
    width: 100%; height: 52px; border-radius: var(--radius-sm); border: none; cursor: pointer;
    font-size: 1.8rem; font-weight: 800; line-height: 1; color: #fff;
    display: flex; align-items: center; justify-content: center;
    -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.m-qty-btn.plus { background: var(--uang-masuk); }
.m-qty-btn.minus { background: var(--uang-keluar); }
.m-qty-btn:active { filter: brightness(.92); }
.m-qty-tampil {
    text-align: center; font-size: 2rem; font-weight: 800; color: var(--text);
    background: var(--bg); border-radius: var(--radius-sm); padding: 10px 4px;
    font-variant-numeric: tabular-nums;
}

.m-spin {
    display: inline-block; width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
    animation: m-spin .6s linear infinite; vertical-align: middle;
}
@keyframes m-spin { to { transform: rotate(360deg); } }

/* Toast kecil di bawah layar - konfirmasi aksi tanpa mengganggu alur. */
.m-toast {
    position: fixed; left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 60; background: var(--text); color: #fff; padding: 12px 16px; border-radius: var(--radius);
    font-size: .88rem; font-weight: 500; box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; pointer-events: none;
}
.m-toast.show { opacity: 1; transform: translateY(0); }
.m-toast.error { background: var(--danger); }
.m-toast.success { background: var(--primary-dark); }

.m-login-body {
    background: linear-gradient(160deg, #fbfcfe 0%, #e7edf9 45%, #c3d2ee 100%);
    min-height: 100vh;
}
.m-login-wrap {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100vh; padding: 32px 22px; box-sizing: border-box;
}
.m-login-top { display: flex; flex-direction: column; align-items: center; margin-bottom: 28px; }
.m-login-logo { width: 190px; height: auto; margin-bottom: 8px; }
.m-login-tagline { font-size: .82rem; color: var(--muted); font-weight: 600; letter-spacing: .2px; margin: 0; }

.m-login-card {
    width: 100%; max-width: 380px; background: #fff;
    border-radius: 22px; padding: 28px 24px 26px;
    box-shadow: 0 18px 40px -14px rgba(23, 92, 58, .28), 0 2px 8px rgba(0,0,0,.04);
}
.m-login-title { font-size: 1.35rem; font-weight: 800; color: var(--text); margin: 0 0 4px; }
.m-login-sub { font-size: .85rem; color: var(--muted); margin: 0 0 20px; }

.m-login-field {
    position: relative; display: flex; align-items: center;
    margin-bottom: 14px;
}
.m-login-field-icon {
    position: absolute; left: 14px; color: var(--muted); display: flex; pointer-events: none;
}
.m-login-field input {
    width: 100%; margin-bottom: 0; padding: 14px 14px 14px 42px;
    border: 1.5px solid var(--border); border-radius: 14px; background: #fbfbfa;
    font-size: .95rem; transition: border-color .15s, background .15s;
}
.m-login-field input:focus {
    outline: none; border-color: var(--primary); background: #fff;
}
.m-login-toggle {
    position: absolute; right: 12px; background: none; border: none; padding: 4px 6px;
    color: var(--primary-dark); font-size: .74rem; font-weight: 700; cursor: pointer;
}
.m-login-submit { margin-top: 6px; padding: 15px; font-size: 1rem; border-radius: 14px;
    box-shadow: 0 8px 18px -6px rgba(31, 122, 77, .5); }

.m-login-footer { margin-top: 22px; font-size: .74rem; color: var(--muted); text-align: center; max-width: 300px; }

/* Profil/settings */
.m-profile-row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.m-profile-name { font-weight: 700; font-size: 1.02rem; }
.m-profile-role { color: var(--muted); font-size: .82rem; text-transform: capitalize; }
.m-linklist { display: flex; flex-direction: column; }
.m-linklist a {
    display: flex; align-items: center; gap: 12px; padding: 14px 2px; color: var(--text);
    border-bottom: 1px solid var(--border); font-size: .95rem; font-weight: 500;
}
.m-linklist a:last-child { border-bottom: none; }
.m-linklist svg { width: 19px; height: 19px; color: var(--primary-dark); flex-shrink: 0; }
.m-linklist .m-chevron { margin-left: auto; color: var(--muted); width: 16px; height: 16px; }

/* ---------- Halaman Notifikasi (23-08-2026) ---------- */
.m-notif-list { display: flex; flex-direction: column; gap: 8px; }
.m-notif-item {
    display: flex; gap: 10px; background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 12px;
}
.m-notif-item.belum-dibaca { border-color: var(--warning); background: var(--warning-soft); }
.m-notif-icon {
    width: 34px; height: 34px; border-radius: 50%; background: var(--warning-soft); color: var(--warning);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.m-notif-item.belum-dibaca .m-notif-icon { background: #fff; }
.m-notif-icon svg { width: 17px; height: 17px; }
.m-notif-body { min-width: 0; flex: 1; }
.m-notif-judul { font-size: .85rem; font-weight: 700; margin-bottom: 2px; }
.m-notif-pesan { font-size: .82rem; color: var(--text); line-height: 1.4; word-wrap: break-word; }
.m-notif-waktu { font-size: .72rem; color: var(--muted); margin-top: 4px; }

/* Notifikasi prioritas (24-08-2026, Purchase Order) - tampil paling atas (ORDER BY priority
   DESC di notifikasi.php), ditandai border+label supaya beda jelas dari notifikasi biasa. */
.m-notif-item.prioritas { border-color: var(--danger); position: relative; }
.m-notif-prioritas {
    position: absolute; top: -8px; left: 10px; background: var(--danger); color: #fff;
    font-size: .6rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; letter-spacing: .3px;
}

/* Tombol aksi Tolak/Done Purchase Order, tampil di notifikasi.php khusus owner selama PO
   masih 'diajukan'. */
.m-po-aksi { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.m-po-aksi-done, .m-po-aksi-tolak { display: flex; gap: 6px; }
.m-po-aksi-done input[type="number"], .m-po-aksi-done select, .m-po-aksi-tolak input[type="text"] {
    flex: 1; min-width: 0; padding: 8px 9px; border: 1px solid var(--border); border-radius: 8px;
    font-size: .8rem; background: #fff; color: var(--text);
}
.m-po-hasil { font-size: .8rem; font-weight: 700; margin-top: 8px; display: flex; align-items: center; gap: 5px; }
.m-po-hasil.selesai, .m-po-hasil.selesai svg { color: #15803d; }
.m-po-hasil.ditolak, .m-po-hasil.ditolak svg { color: var(--danger); }

/* ---------- Halaman Purchase Order (24-08-2026) ---------- */
.m-po-list { display: flex; flex-direction: column; gap: 8px; }
.m-po-item {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 12px; position: relative;
}
.m-po-status {
    display: inline-block; font-size: .66rem; font-weight: 800; padding: 3px 8px; border-radius: 999px;
    margin-bottom: 6px; letter-spacing: .2px;
}
.m-po-status.diajukan { background: var(--warning-soft); color: var(--warning); }
.m-po-status.selesai { background: #e2f5e8; color: #15803d; }
.m-po-status.ditolak { background: var(--danger-soft); color: var(--danger); }
.m-po-catatan { font-size: .88rem; line-height: 1.4; word-wrap: break-word; }
.m-po-meta { font-size: .72rem; color: var(--muted); margin-top: 6px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Saldo & Tugas (01-09-2026, permintaan owner)
   Memakai token tema yang sudah ada supaya ikut identitas navy app mobile.
   Hijau/merah di sini BUKAN warna merek - itu makna (uang masuk vs keluar,
   tugas selesai), jadi sengaja punya token sendiri, bukan menumpang --primary.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    --uang-masuk: #157347;
    --uang-keluar: #b3372a;
}

/* ---------- Saldo (halaman Saldo Komisi, dibangun ulang 03-09-2026) ---------- */
.m-saldo-total-label {
    font-size: .74rem; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--muted);
}
.m-saldo-total {
    font-size: 1.9rem; font-weight: 800; letter-spacing: -.5px;
    margin-top: 4px; font-variant-numeric: tabular-nums;
}

/* Baris Progress Komisi Penjualan (Bonus Tahap/Insentif) - masih kartu per baris karena
   jumlahnya sedikit (maks beberapa tahap), beda dari riwayat transaksi di bawah yang bisa
   panjang dan sekarang dirender sebagai tabel (.m-saldo-tabel). */
.m-saldo-item {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 14px 16px;
}
.m-saldo-kiri { min-width: 0; }
.m-saldo-nama { font-weight: 700; font-size: .95rem; }
.m-saldo-sub { color: var(--muted); font-size: .78rem; margin-top: 2px; }
.m-saldo-nilai {
    font-weight: 800; font-size: 1rem; white-space: nowrap;
    font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.m-saldo-nilai.minus { color: var(--uang-keluar); }

/* Tabel riwayat komisi per segmen - baris rapat pengganti satu kartu per transaksi, supaya
   daftar panjang tidak jadi tumpukan ruang kosong. Kolom tengah ("No Ref") isinya beda
   arti per segmen, lihat $segmenKolomRef & wallet_ref_label() di saldo.php. */
.m-saldo-tabel-card { padding: 4px 16px; }
.m-saldo-tabel-head, .m-saldo-tabel-baris, .m-saldo-tabel-total {
    display: grid; grid-template-columns: 82px 1fr auto; gap: 10px; align-items: center;
    padding: 8px 0;
}
.m-saldo-tabel-head {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
    color: var(--muted); border-bottom: 1px solid var(--border);
}
.m-saldo-tabel-head span:last-child { text-align: right; }
.m-saldo-tabel-baris { font-size: .84rem; border-top: 1px solid var(--border); }
.m-saldo-tabel-baris span:first-child { white-space: nowrap; color: var(--muted); }
.m-saldo-tabel-baris .ref { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-saldo-tabel-baris .nilai { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.m-saldo-tabel-total {
    font-size: .84rem; font-weight: 800; border-top: 2px solid var(--border);
}
.m-saldo-tabel-total span:first-child { grid-column: 1 / 3; }
.m-saldo-tabel-total span:last-child { text-align: right; color: var(--uang-masuk); font-variant-numeric: tabular-nums; }

/* ---------- Tugas ---------- */
.m-tugas-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.m-tugas-angka {
    font-size: 1.6rem; font-weight: 800; margin-top: 4px; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.m-tugas-angka span { font-size: .85rem; font-weight: 600; color: var(--muted); }
.m-tugas-persen {
    font-size: 1.1rem; font-weight: 800; color: var(--primary);
    font-variant-numeric: tabular-nums;
}
.m-tugas-bar {
    height: 6px; border-radius: 999px; background: var(--border);
    margin-top: 12px; overflow: hidden;
}
.m-tugas-bar span {
    display: block; height: 100%; background: var(--primary);
    border-radius: 999px; transition: width .3s ease;
}

.m-tugas-item {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px;
}
.m-tugas-centang {
    width: 26px; height: 26px; flex-shrink: 0; margin-top: 1px;
    border-radius: 8px; border: 2px solid var(--border); background: transparent;
    display: flex; align-items: center; justify-content: center;
    color: #fff; cursor: pointer; padding: 0;
    transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.m-tugas-centang:active { transform: scale(.9); }
.m-tugas-item.selesai .m-tugas-centang { background: var(--uang-masuk); border-color: var(--uang-masuk); }
.m-tugas-isi { min-width: 0; flex: 1; }
.m-tugas-judul { font-weight: 700; font-size: .95rem; }
.m-tugas-item.selesai .m-tugas-judul { text-decoration: line-through; color: var(--muted); }
.m-tugas-ket { color: var(--muted); font-size: .82rem; margin-top: 3px; }
.m-tugas-meta {
    display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 7px;
    font-size: .76rem; color: var(--muted);
}
.m-tugas-meta span { display: inline-flex; align-items: center; gap: 4px; }
.m-tugas-meta .oleh { color: var(--uang-masuk); font-weight: 600; }
.m-tugas-pinalti {
    display: inline-block; margin-left: 6px; font-size: .64rem; font-weight: 600; padding: 1px 7px;
    border-radius: 4px; background: rgba(185, 28, 28, .14); color: #b91c1c; vertical-align: middle;
}

/* Produk yang belum punya batas stok di sebuah lokasi (02-09-2026). Ditampilkan supaya
   ketidakhadirannya di daftar utama punya penjelasan, bukan jadi teka-teki. */
.m-belum-baris{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
    padding:6px 0;border-top:1px solid var(--border);font-size:.84rem}
.m-belum-baris:first-of-type{border-top:0}

/* ══════════════════════════════════════════════════════════════════════════════════════
   Tema dashboard - 02-09-2026, permintaan owner ("warna profesional & terkesan informatif")

   Masalah tampilan sebelumnya: seluruh halaman berada pada rentang terang yang nyaris sama
   (latar #f4f6fb, kartu putih, garis #e1e5f0, batang grafik abu di atas jalur nyaris putih).
   Tidak ada yang menonjol, jadi mata tidak diberi tahu mana yang penting - dan grafik 7 hari
   praktis tidak terbaca. Omzet juga memakai --warning (kuning), warna yang di seluruh sistem
   ini berarti "peringatan", bukan "uang".

   Yang dilakukan: kotak ringkasan dijadikan panel navy gelap sehingga KPI utama tidak bisa
   tertukar dengan detail di bawahnya, dan uang diberi warna sendiri (teal) yang tidak
   bertabrakan makna dengan peringatan. Sisa halaman tetap kartu putih - kontras itulah yang
   membentuk urutan bacanya.

   Ditulis sebagai lapisan tambahan di akhir berkas, BUKAN menyunting aturan aslinya:
   pembatalan cukup menghapus blok ini, dan tampilan lama kembali utuh.
   ══════════════════════════════════════════════════════════════════════════════════════ */

:root {
    --bg: #eceff7;              /* sedikit lebih dalam supaya kartu putih benar-benar terangkat */
    --border: #dde2ee;
    --text: #131a2a;
    --muted: #5c6579;
    --primary-dark: #14275e;
    --accent: #0f766e;          /* teal - warna UANG. Dulu memakai --warning (kuning). */
    --accent-soft: #d9efec;
    --shadow: 0 2px 12px -6px rgba(15, 31, 77, .22);
    --hero-1: #1e3a8a;
    --hero-2: #16307a;
    --hero-3: #0f2150;
    --hero-teks: #eaf0ff;
    --hero-redup: rgba(234, 240, 255, .62);
    --hero-garis: rgba(255, 255, 255, .14);
}

/* ── Panel utama ─────────────────────────────────────────────────────────────────────── */
.m-ringkasan-box {
    background: linear-gradient(158deg, var(--hero-1) 0%, var(--hero-2) 46%, var(--hero-3) 100%);
    border-color: transparent;
    color: var(--hero-teks);
    box-shadow: 0 12px 28px -16px rgba(12, 28, 74, .85);
    padding: 16px;
}
.m-ringkasan-box .m-ringkasan-label { color: var(--hero-redup); letter-spacing: .4px; }
.m-ringkasan-box .m-ringkasan-angka { color: #fff; }
.m-ringkasan-box .m-ringkasan-angka.besar { color: #fff; letter-spacing: -.5px; }
.m-ringkasan-box .m-ringkasan-angka .m-muted { color: var(--hero-redup); }
.m-ringkasan-box .m-ringkasan-sub,
.m-ringkasan-box .m-ringkasan-omset-kemarin { color: var(--hero-redup); }
.m-ringkasan-box .m-ringkasan-divider { background: var(--hero-garis); }

/* Uang: teal muda. Cukup terang untuk terbaca di navy, dan jelas beda dari angka jumlah
   yang putih - sekali lihat sudah ketahuan mana "berapa pesanan" dan mana "berapa rupiah". */
.m-ringkasan-box .m-ringkasan-omset-angka { color: #7fdccd; }
/* Label kolom kiri tidak boleh membungkus - "PESANAN HARI INI" pecah dua baris membuat
   angka utamanya turun dan kehilangan posisi sebagai hal pertama yang dibaca. */
.m-ringkasan-box .m-ringkasan-hari .m-ringkasan-label { white-space: nowrap; }
.m-ringkasan-box .m-ringkasan-batal { color: #fca5a5; }

.m-ringkasan-box .m-ringkasan-delta { background: rgba(255, 255, 255, .12); color: var(--hero-teks); }
.m-ringkasan-box .m-ringkasan-delta.naik { background: rgba(74, 222, 128, .18); color: #86efac; }
.m-ringkasan-box .m-ringkasan-delta.turun { background: rgba(248, 113, 113, .18); color: #fca5a5; }

/* ── Grafik 7 hari ───────────────────────────────────────────────────────────────────── */
/* Batang jadi putih transparan di atas jalur yang lebih gelap: bentuknya terbaca dari jauh,
   dan hari ini dibedakan lewat batang PUTIH PENUH, bukan lewat warna lain - perbedaan
   terang/gelap lebih cepat ditangkap daripada perbedaan corak. */
.m-ringkasan-box .m-chart7 { margin-top: 12px; }
.m-ringkasan-box .m-chart7-track { background: rgba(3, 12, 38, .38); max-width: 20px; border-radius: 4px 4px 0 0; }
.m-ringkasan-box .m-chart7-bar { background: rgba(255, 255, 255, .52); border-radius: 4px 4px 0 0; }
.m-ringkasan-box .m-chart7-bar.ini { background: #ffffff; }
.m-ringkasan-box .m-chart7-jml { color: var(--hero-redup); font-size: .6rem; }
.m-ringkasan-box .m-chart7-hari { color: rgba(234, 240, 255, .5); }
.m-ringkasan-box .m-chart7-hari.ini { color: #fff; font-weight: 800; }
/* Hari tertinggi minggu ini. Ditulis SESUDAH aturan .ini supaya kalau hari ini sekaligus
   hari tertinggi, batangnya hijau - sementara label harinya tetap putih tebal, jadi "hari
   ini" tidak kehilangan penandanya. */
.m-ringkasan-box .m-chart7-bar.puncak { background: #4ade80; }
.m-ringkasan-box .m-chart7-jml.puncak { color: #86efac; font-weight: 800; }

/* Hari TERENDAH. Ditulis sesudah .ini dan .puncak supaya menang untuk hari ini - keputusan
   owner: kalau hari ini kebetulan terendah, batangnya merah, bukan putih. Keduanya tidak
   pernah bertabrakan dengan .puncak karena penjaga $adaBeda menolak keadaan "semua sama".

   Merahnya SENGAJA bukan merah alarm (--danger, dipakai pesanan batal & saldo minus). Setiap
   minggu pasti punya hari terendah, jadi warna ini akan menyala terus-menerus; kalau coraknya
   sama persis dengan merah peringatan, merah di seluruh app ikut kehilangan bobot. Terakota
   ini terbaca sebagai "paling rendah", bukan sebagai "ada yang rusak". */
.m-ringkasan-box .m-chart7-bar.lembah { background: #d9827c; }
.m-ringkasan-box .m-chart7-jml.lembah { color: #eda9a3; font-weight: 800; }

/* Badge "Target Omset Harian tercapai" (06-09-2026, Control Panel > Keuangan > Target
   Komisi) - independen dari puncak/lembah di atas (itu soal JUMLAH PAKET tertinggi/terendah
   minggu ini; ini soal OMSET hari itu vs target rupiah harian). Hijau muda SOLID (bukan
   translucent seperti chip lain di kotak ini) supaya menonjol jadi badge di antara deretan
   angka pudar - ditulis SESUDAH .puncak/.lembah supaya warnanya menang kalau satu hari
   kebetulan keduanya. */
.m-ringkasan-box .m-chart7-jml.capai-omset {
    background: #dcfce7; color: #15803d; font-weight: 800;
    padding: 1px 6px; border-radius: 999px;
}

/* Animasi tumbuh, SEKALI, hanya untuk batang tertinggi - kabar baik boleh bergerak, kabar
   buruk cukup diam (merah yang ikut beranimasi akan terasa seperti alarm).

   Memakai transform: scaleY(), BUKAN animasi height. Percobaan pertama menganimasikan height
   dengan keyframe 'from' saja, dan itu punya mode gagal yang buruk: fill-mode menahan
   keadaan keyframe TERAKHIR, yang di situ juga 0% - kalau animasinya tidak pernah selesai
   (peramban membekukan animasi, tab dibuka di latar, mesin yang tersendat), batang TERTINGGI
   justru terkunci di tinggi nol. Batang yang paling penting malah jadi yang paling mungkin
   hilang.

   scaleY tidak punya mode gagal itu: keadaan akhirnya scaleY(1) - sama persis dengan keadaan
   normal elemen - jadi tanpa fill-mode sama sekali, batang yang animasinya gagal jalan tetap
   tampil utuh. Harga yang dibayar cuma sudut membulatnya sedikit memipih selama 0,9 detik
   pertumbuhan, dan itu jauh lebih murah daripada batang yang lenyap. */
@keyframes mPuncakTumbuh {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}
.m-ringkasan-box .m-chart7-bar.puncak {
    transform-origin: bottom;
    animation: mPuncakTumbuh .9s cubic-bezier(.16, .84, .34, 1);
}
@media (prefers-reduced-motion: reduce) {
    .m-ringkasan-box .m-chart7-bar.puncak { animation: none; }
}

/* ── Bar target ──────────────────────────────────────────────────────────────────────── */
/* Dibatasi ke dalam .m-ringkasan-box - .m-prod-bar juga dipakai baris stok agen yang
   latarnya putih, dan warna terang ini akan hilang di sana. */
.m-ringkasan-box .m-prod-bar { background: rgba(255, 255, 255, .13); height: 6px; }
.m-ringkasan-box .m-prod-bar-isi { background: #7fdccd; }
.m-ringkasan-box .m-prod-bar-isi.rendah { background: #fcd34d; }
.m-ringkasan-box .m-prod-bar-isi.kritis { background: #fca5a5; }

/* ── Kartu aksi ──────────────────────────────────────────────────────────────────────── */
/* Tetap seragam, tidak diberi warna berbeda-beda: ini navigasi, bukan informasi. Delapan
   warna berbeda akan terlihat seperti mainan dan justru melemahkan panel di atasnya, yang
   memang seharusnya jadi satu-satunya pusat perhatian. Yang diperkuat cuma keterbacaannya. */
.m-quick { box-shadow: var(--shadow); }
.m-quick-icon { background: var(--primary-soft); color: var(--primary); }
.m-quick-label { font-weight: 700; color: var(--text); letter-spacing: .1px; }
.m-quick.placeholder { opacity: .72; }

.m-section-title { letter-spacing: .1px; }


/* ── Ukuran teks diperbesar - 02-09-2026, permintaan owner ────────────────────────────────
   "perbesar ukuran textnya, tapi jangan sampai merubah ukuran layout, karena sudah pas."

   Karena itu yang disentuh HANYA font-size. Semua yang menentukan bentuk kotak - padding,
   gap, tinggi jalur grafik (56px), lebar kolom, ukuran lingkaran ikon - tidak diubah sama
   sekali. Kenaikannya juga ditahan di kisaran 5-8%: cukup untuk terbaca lebih enak, tapi
   masih muat di ruang yang sudah ada tanpa ada teks yang membungkus ke baris baru.

   Label tile "Purchase Order" diganti "Request" (perubahan terpisah di dashboard.php), dan
   itu sekaligus menghilangkan satu-satunya label yang dulu pecah dua baris - jadi kedua baris
   tile sekarang sama tinggi. */
.m-ringkasan-box .m-ringkasan-label { font-size: .73rem; }
.m-ringkasan-box .m-ringkasan-angka { font-size: 1.6rem; }
.m-ringkasan-box .m-ringkasan-angka.besar { font-size: 2.25rem; }
.m-ringkasan-box .m-ringkasan-angka.kecil { font-size: 1.24rem; }
.m-ringkasan-box .m-ringkasan-omset-angka { font-size: 1.24rem; }
.m-ringkasan-box .m-ringkasan-omset-kemarin,
.m-ringkasan-box .m-ringkasan-sub { font-size: .73rem; }
.m-ringkasan-box .m-ringkasan-delta { font-size: .82rem; }
.m-ringkasan-box .m-ringkasan-batal { font-size: 1.12rem; }
.m-ringkasan-box .m-chart7-jml { font-size: .66rem; }
.m-ringkasan-box .m-chart7-hari { font-size: .66rem; }
/* Label tile dinaikkan lagi ke .90rem (permintaan owner: "text menu masih kurang besar").
   Ini batas praktisnya, bukan angka yang dikira-kira: kolom tile 81px, dan label terpanjang
   "Notifikasi" pada ukuran ini memakan 66px dari 73px ruang dalam - sisa 7px. Dinaikkan lagi
   ke .94rem sisanya tinggal 6px, terlalu tipis untuk selisih metrik huruf antar ponsel.

   Padding samping tile 4px -> 3px hanya untuk memberi ruang teks itu. Lebar tile sendiri
   ditentukan grid dan TIDAK berubah, begitu juga jarak antar tile. */
.m-quick { padding: 14px 3px 12px; }
.m-quick-label { font-size: .90rem; }
.m-section-title { font-size: 1.02rem; }