/* emesys Pharma — override aksen aplikasi (Design Guide §8).
   Navy + gold + denyut tetap milik ekosistem; hanya aksen app yang bergeser ke
   Hijau Apotek. Dimuat SETELAH tokens.css & emesys.css. */
:root {
    --app-accent: var(--app-pharma);
    --app-accent-bg: var(--app-pharma-bg);
}

/* ============================================================
   App-shell: sidebar bisa di-collapse di DESKTOP (khusus repo Pharma).
   - Frontliner (SPG/kasir): shell .em-autohide → sidebar default
     TERSEMBUNYI tiap masuk layar; klik burger topbar untuk munculkan.
   - Peran lain: sidebar tampil; klik burger untuk menyembunyikan.
   Toggle pakai checkbox #em-nav-toggle yang sudah ada (tanpa JS).
   Mobile (≤860px) memakai perilaku kanonik emesys.css (tak diubah).
   ============================================================ */
.em-burger-top {
    display: none;
    flex-direction: column; justify-content: center; gap: 4px;
    width: 38px; height: 38px; padding: 8px; margin-right: 6px;
    cursor: pointer; border-radius: var(--r-sm, 8px); flex: 0 0 auto;
}
.em-burger-top span { width: 20px; height: 2px; background: #475467; border-radius: 2px; transition: .2s; }
.em-burger-top:hover { background: rgba(16, 24, 40, .06); }

@media (min-width: 861px) {
    .em-burger-top { display: flex; }
    .em-sidebar { transition: width .22s ease, flex-basis .22s ease; overflow: hidden; }

    /* peran biasa: dicentang = sembunyi · frontliner: default sembunyi */
    .em-nav-toggle:checked ~ .em-sidebar,
    .em-shell.em-autohide .em-sidebar { width: 0; flex-basis: 0; }

    /* frontliner: dicentang = munculkan (specificity menang) */
    .em-shell.em-autohide .em-nav-toggle:checked ~ .em-sidebar {
        width: var(--sidebar-w); flex-basis: var(--sidebar-w);
    }
}

@media (max-width: 860px) {
    .em-burger-top { display: none; } /* mobile pakai burger di sidebar (kanonik) */
}

/* Layar kerja POS & SPG (.pos-roomy): katalog dominan + keranjang lebar bisa digeser */
@media (min-width: 861px) {
    /* tanpa header in-content → tinggi maksimal (topbar 60 + padding 48). .pos.pos-roomy
       agar menang spesifisitas atas .pos { height } */
    .pos.pos-roomy { --pos-cart-w: 34%; height: calc(100vh - 108px); }
    /* katalog dominan (66%); keranjang 34% (bisa digeser 30–70% via splitter) */
    .pos-roomy .pos-cart { flex: 0 0 var(--pos-cart-w); }
    /* katalog: 3 kolom ke samping (kartu lebar), baris bertambah ke bawah (scroll) */
    .pos-roomy .pos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    /* nama obat lebih besar & jelas + harga/satuan lebih terbaca */
    .pos-roomy .pos-card { min-height: 122px; padding: 12px 14px 14px; }
    .pos-roomy .pos-card-nama { font-size: 1.04rem; font-weight: 700; line-height: 1.22; color: #111827; }
    .pos-roomy .pos-card-sub { font-size: .78rem; }
    .pos-roomy .pos-card-harga { font-size: 1.02rem; }
    /* baris keranjang lebih lega & terbaca (tidak sempit) */
    .pos-roomy .pos-line { padding: 10px 14px; gap: 3px 10px; }
    .pos-roomy .pos-line-nama { font-size: .96rem; line-height: 1.25; }
    .pos-roomy .pos-line-sub { font-size: .8rem; }
    .pos-roomy .pos-line-sum { font-size: 1rem; }
    .pos-roomy .pos-qty { margin-top: 4px; }
    .pos-roomy .pos-qty button { width: 32px; height: 32px; font-size: 1.1rem; }
    .pos-roomy .pos-qty input { width: 44px; height: 32px; font-size: .95rem; }
    /* footer keranjang dipadatkan → list obat muat lebih banyak */
    .pos-roomy .pos-cart-foot { padding: 8px 12px; }
    .pos-roomy .pos-sumrow { font-size: .78rem; margin-bottom: 2px; }
    .pos-roomy .pos-totrow { margin: 2px 0 8px; }
    .pos-roomy .pos-totrow .val { font-size: 1.25rem; }
    .pos-roomy .pos-pay-btn { padding: 9px; font-size: .98rem; }
    .pos-roomy .pos-foot-actions { margin-top: 6px; }
    .pos-roomy .pos-foot-actions button { padding: 6px; }
    /* teks bantuan tetap tampil, font kecil */
    .pos-roomy .pos-cart-foot .form-text { font-size: .68rem; line-height: 1.3; margin-top: 4px; }
    .pos-splitter {
        flex: 0 0 8px; align-self: stretch;
        cursor: col-resize; border-radius: 999px;
        background: var(--line, #e5e7eb);
        position: relative; transition: background .15s;
    }
    .pos-splitter:hover, .pos-splitter.dragging { background: var(--app-accent, #1E9E6A); }
    .pos-splitter::after {
        content: ''; position: absolute; inset: 0; margin: auto;
        width: 2px; height: 30px; border-radius: 2px; background: rgba(255, 255, 255, .75);
    }
    .pos-splitter:focus-visible { outline: 2px solid var(--app-accent, #1E9E6A); outline-offset: 2px; }
}
@media (max-width: 860px) {
    .pos-splitter { display: none; } /* mobile: keranjang jadi bottom-sheet */
}

/* ============================================================
   POS Register (gaya kasir Moka) — komponen khusus aplikasi.
   Memakai token kanonik (--app-accent, --line, radius, font).
   Dua panel: katalog (kiri, scroll internal) + keranjang (kanan, pinned).
   ============================================================ */
.pos {
    display: flex;
    gap: 14px;
    height: calc(100vh - 124px);
    min-height: 460px;
}
.pos-catalog {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.pos-cart {
    flex: 0 0 360px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line, #e5e7eb);
    border-radius: var(--r-lg, 14px);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}

/* toolbar: cari + gudang + tab kategori */
.pos-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}
.pos-search {
    flex: 1 1 220px;
    min-width: 160px;
}
.pos-tabs {
    flex: 0 0 auto;          /* jangan menyusut di kolom flex → cegah scrollbar vertikal palsu */
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;      /* overflow-x:auto memaksa overflow-y jadi auto; matikan eksplisit */
    padding-bottom: 4px;
    margin-bottom: 8px;
    scrollbar-width: thin;
}
.pos-tab {
    flex: 0 0 auto;
    border: 1px solid #e2e5ea;
    background: #f2f4f7;     /* fill abu muda → tab terlihat jelas sebagai tombol */
    color: #344054;
    border-radius: var(--r-pill, 999px);
    padding: 6px 14px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all .12s;
}
.pos-tab:hover { border-color: var(--app-accent); background: #fff; color: var(--app-accent); }
.pos-tab.active {
    background: var(--app-accent);
    border-color: var(--app-accent);
    color: #fff;
}

/* grid produk */
.pos-grid {
    flex: 1 1 auto;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 7px;
    align-content: start;
    padding: 2px 4px 10px 2px;
    scrollbar-width: thin;
}
.pos-card {
    position: relative;
    text-align: left;
    background: #fff;
    border: 1px solid var(--line, #e5e7eb);
    border-radius: var(--r-md, 10px);
    padding: 7px 9px 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 72px;
    transition: transform .08s, box-shadow .12s, border-color .12s;
}
.pos-card:hover {
    border-color: var(--app-accent);
    box-shadow: 0 4px 14px rgba(16, 24, 40, .1);
    transform: translateY(-1px);
}
.pos-card:active { transform: translateY(0); }
.pos-card.is-empty { opacity: .5; cursor: not-allowed; }
.pos-card.is-empty:hover { transform: none; box-shadow: none; border-color: var(--line, #e5e7eb); }
/* stok Penjualan habis tapi ada di gudang → klik untuk minta dipindah */
.pos-card.is-minta { border-color: #f0b86e; background: #fffaf2; }
.pos-card.is-minta:hover { border-color: #d98a23; }
.pos-card-nama {
    font-weight: 600;
    font-size: .82rem;
    line-height: 1.15;
    color: #1f2937;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-shrink: 0;            /* nama jangan dikompres flex (cegah terpotong saat kartu punya baris promo/diskon) */
    padding-right: 3.8rem;     /* sediakan ruang utk badge stok (pojok kanan-atas) agar nama tak tertutup */
}
.pos-card-sub { font-size: .66rem; color: #98a2b3; }
.pos-card-harga {
    margin-top: auto;
    font-weight: 700;
    color: var(--app-accent);
    font-size: .84rem;
}
.pos-card-stok {
    position: absolute;
    top: 6px; right: 6px;
    max-width: 42%;            /* pengaman: badge tak melebar ke seluruh kartu */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .6rem;
    font-weight: 600;
    color: #667085;
    background: #f2f4f7;
    border-radius: 999px;
    padding: 1px 6px;
}
/* ---- Mode DAFTAR (tabel) untuk katalog POS & SPG ----------------------------
   Kartu bagus untuk barang yang namanya pendek dan sering dihafal. Di apotek
   namanya panjang ("GLIKODERM CLARIFYING GEL 100ML"), dan kartu memotongnya di
   baris kedua — kasir jadi menebak barang dari harga. Mode daftar memberi nama
   satu baris penuh.

   Sengaja memakai elemen yang SAMA (.pos-card), hanya tata letaknya yang
   berganti: klik, tahan-lama, tombol papan ketik, penanda stok habis, dan
   penanda "minta ke gudang" semuanya tetap berlaku tanpa satu baris JS tambahan.
   Menyalin penanda-penanda itu ke markup kedua berarti suatu hari ada mode yang
   lupa melarang jual barang kosong. */
.pos-grid.is-list {
    display: block;
    padding-right: 2px;
}
.pos-grid.is-list .pos-card {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding: 7px 10px;
    border-radius: 8px;
    margin-bottom: 4px;
}
.pos-grid.is-list .pos-card:hover { transform: none; }
.pos-grid.is-list .pos-card-nama {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
    white-space: normal;       /* nama panjang BOLEH turun baris — yang dilarang cuma terpotong */
    padding-right: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: .86rem;
}
.pos-grid.is-list .pos-card-sub {
    flex: 0 0 auto;
    width: 5.5rem;
    text-align: right;
}
.pos-grid.is-list .pos-card-price,
.pos-grid.is-list .pos-card-harga {
    margin-top: 0;
    flex: 0 0 auto;
    width: 7.5rem;
    text-align: right;
}
.pos-grid.is-list .pos-card-stok {
    position: static;
    flex: 0 0 auto;
    order: 9;                  /* stok paling kanan, sejajar — bukan menempel di pojok kartu */
    width: 5rem;
    max-width: none;
    text-align: center;
}
@media (max-width: 575.98px) {
    /* di layar sempit satuan dilepas supaya nama & harga tetap utuh */
    .pos-grid.is-list .pos-card-sub { display: none; }
    .pos-grid.is-list .pos-card-price,
    .pos-grid.is-list .pos-card-harga { width: 6rem; }
    .pos-grid.is-list .pos-card-stok { width: 4rem; }
}

.pos-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.pos-dot.hijau { background: #16a34a; }
.pos-dot.biru { background: #2563eb; }
.pos-dot.merah { background: #dc2626; }
.pos-dot.abu { background: #98a2b3; }

/* keranjang */
.pos-cart-head {
    padding: 8px 12px;
    border-bottom: 1px solid var(--line, #e5e7eb);
    display: flex;
    align-items: center;
    gap: 8px;
}
.pos-cart-head .pos-cart-title { font-weight: 700; color: var(--navy, #182c61); }
.pos-cart-lines {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 6px 0;
    scrollbar-width: thin;
}
.pos-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #98a2b3;
    gap: 6px;
    text-align: center;
    padding: 20px;
}
.pos-empty .em { font-size: 2.2rem; }
.pos-line {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1px 10px;
    padding: 6px 12px;
    border-bottom: 1px solid #f2f4f7;
}
.pos-line-nama { font-weight: 600; font-size: .82rem; color: #1f2937; }
.pos-line-sub { font-size: .7rem; color: #98a2b3; }
.pos-line-sub b { color: #475467; font-weight: 600; }
.pos-line-sum { font-weight: 700; font-size: .86rem; text-align: right; white-space: nowrap; }
.pos-line-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.pos-qty {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--line, #e5e7eb);
    border-radius: var(--r-pill, 999px);
    overflow: hidden;
    margin-top: 2px;
}
/* stepper di kolom tengah keranjang — pusatkan vertikal di area kosong */
.pos-line > .pos-qty { align-self: center; justify-self: center; margin: 0; }
.pos-qty button {
    width: 22px; height: 22px;
    border: 0;
    background: #f9fafb;
    color: #344054;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
}
.pos-qty button:hover { background: var(--app-accent); color: #fff; }
.pos-qty input {
    width: 34px;
    height: 22px;
    text-align: center;
    border: 0;
    border-left: 1px solid var(--line, #e5e7eb);
    border-right: 1px solid var(--line, #e5e7eb);
    font-weight: 700;
    font-size: .82rem;
    -moz-appearance: textfield;
}
.pos-qty input::-webkit-outer-spin-button,
.pos-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pos-line-del {
    border: 0; background: transparent; color: #d92d20;
    cursor: pointer; font-size: .9rem;
}

/* footer keranjang */
.pos-cart-foot {
    border-top: 1px solid var(--line, #e5e7eb);
    padding: 12px 14px;
    background: #fbfcfd;
}
.pos-sumrow { display: flex; justify-content: space-between; font-size: .8rem; color: #667085; margin-bottom: 4px; }
.pos-totrow { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 12px; }
.pos-totrow .lbl { font-weight: 600; color: var(--navy, #182c61); }
.pos-totrow .val { font-weight: 800; font-size: 1.5rem; color: var(--navy, #182c61); }
.pos-pay-btn {
    width: 100%;
    border: 0;
    background: var(--gold, #fbc531);
    color: #1a1d29;
    font-weight: 800;
    font-size: 1.02rem;
    border-radius: var(--r-md, 10px);
    padding: 12px;
    cursor: pointer;
    transition: filter .12s;
}
.pos-pay-btn:hover { filter: brightness(.96); }
.pos-pay-btn:disabled { opacity: .5; cursor: not-allowed; }
.pos-foot-actions { display: flex; gap: 8px; margin-top: 8px; }
.pos-foot-actions button {
    flex: 1; border: 1px solid var(--line, #e5e7eb); background: #fff;
    border-radius: var(--r-md, 10px); padding: 7px; font-size: .8rem; cursor: pointer; color: #475467;
}
.pos-foot-actions button:hover { border-color: var(--app-accent); color: var(--app-accent); }

/* overlay pembayaran */
.pos-overlay {
    position: fixed; inset: 0; z-index: 1080;
    background: rgba(16, 24, 40, .5);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.pos-overlay[hidden] { display: none; }
.pos-paycard {
    width: 100%; max-width: 420px;
    background: #fff; border-radius: var(--r-lg, 14px);
    box-shadow: 0 24px 48px rgba(16, 24, 40, .28);
    overflow: hidden;
}
.pos-paycard-head {
    background: var(--navy, #182c61); color: #fff;
    padding: 16px 18px; text-align: center;
}
.pos-paycard-head .ttl { font-size: .8rem; opacity: .8; }
.pos-paycard-head .amt { font-size: 1.9rem; font-weight: 800; }
.pos-paycard-body { padding: 16px 18px; }
.pos-methods { display: flex; gap: 8px; margin-bottom: 14px; }
.pos-methods button {
    flex: 1; border: 1.5px solid var(--line, #e5e7eb); background: #fff;
    border-radius: var(--r-md, 10px); padding: 10px; font-weight: 700; cursor: pointer; color: #475467;
}
.pos-methods button.active { border-color: var(--app-accent); background: var(--app-accent); color: #fff; }
.pos-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.pos-chips button {
    border: 1px solid var(--line, #e5e7eb); background: #f9fafb;
    border-radius: var(--r-pill, 999px); padding: 6px 12px; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.pos-chips button:hover { border-color: var(--app-accent); color: var(--app-accent); }
.pos-kembali { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line, #e5e7eb); }
.pos-kembali .v { font-weight: 800; font-size: 1.3rem; color: var(--app-accent); }
.pos-paycard-foot { display: flex; gap: 8px; padding: 0 18px 18px; }
.pos-paycard-foot button { flex: 1; border-radius: var(--r-md, 10px); padding: 12px; font-weight: 800; cursor: pointer; border: 0; }
.pos-btn-cancel { background: #f2f4f7; color: #344054; }
.pos-btn-confirm { background: var(--gold, #fbc531); color: #1a1d29; }
.pos-btn-confirm:disabled { opacity: .5; cursor: not-allowed; }

/* sukses */
.pos-done { text-align: center; padding: 8px 4px; }
.pos-done .ic { font-size: 2.6rem; }
.pos-done .big { font-size: 1.6rem; font-weight: 800; color: var(--app-accent); }

/* ── Elemen khusus mobile (default tersembunyi di desktop) ── */
.pos-mobilebar { display: none; }
.pos-sheet-close { display: none; }
.pos-cart-backdrop { display: none; }
.pos-numpad { display: none; }

/* ── Tablet / layar sentuh: target sentuh ≥44px (SRS-N05) ── */
@media (pointer: coarse) {
    .pos-card { min-height: 88px; padding: 10px 11px 8px; }
    .pos-tab { padding: 11px 18px; font-size: .9rem; }
    .pos-qty button { width: 44px; height: 44px; font-size: 1.2rem; }
    .pos-qty input { width: 48px; height: 44px; font-size: 1rem; }
    .pos-line-del { font-size: 1.3rem; padding: 4px 10px; }
    .pos-chips button { padding: 11px 16px; font-size: .9rem; }
    .pos-methods button { padding: 14px; }
    .pos-paycard-foot button { padding: 15px; }
    .pos-pay-btn { padding: 15px; font-size: 1.1rem; }

    /* numpad nominal (SRD §7.2) */
    .pos-numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
    .pos-numpad button {
        border: 1px solid var(--line, #e5e7eb); background: #fff;
        border-radius: var(--r-md, 10px); padding: 14px 0;
        font-size: 1.2rem; font-weight: 700; color: #1f2937;
        cursor: pointer; min-height: 52px; line-height: 1;
    }
    .pos-numpad button:active { background: var(--app-accent-bg, #E3F5EC); border-color: var(--app-accent, #1E9E6A); }
    .pos-numpad button.np-bs { color: #d92d20; }
}

/* ── Tablet portrait & ponsel: keranjang jadi bottom-sheet ── */
@media (max-width: 860px) {
    .pos { flex-direction: column; height: auto; min-height: 0; gap: 8px; }
    .pos-catalog { min-height: 60vh; padding-bottom: 76px; }
    .pos-grid { max-height: none; overflow: visible; }

    /* keranjang meluncur dari bawah */
    .pos-cart {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto;
        flex-basis: auto; max-height: 88vh;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 30px rgba(16, 24, 40, .24);
        transform: translateY(110%);
        transition: transform .26s ease;
        z-index: 1076;
    }
    .pos-cart.open { transform: translateY(0); }
    .pos-cart-lines { max-height: 46vh; }

    /* tombol tutup sheet */
    .pos-sheet-close {
        display: inline-flex; align-items: center; justify-content: center;
        width: 34px; height: 34px; margin-right: 6px;
        border: 0; background: #f2f4f7; color: #344054;
        border-radius: 50%; font-size: 1rem; cursor: pointer; line-height: 1;
    }

    /* bar mengambang: ringkasan + buka keranjang */
    .pos-mobilebar {
        display: flex; align-items: center; gap: 12px;
        position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1072;
        border: 0; border-radius: 13px;
        background: var(--navy, #182c61); color: #fff;
        padding: 14px 18px; font-size: .95rem; font-weight: 700;
        box-shadow: 0 6px 22px rgba(16, 24, 40, .32);
        text-align: left;
    }
    .pos-mobilebar .mbar-mid { margin-left: auto; opacity: .8; font-weight: 600; font-size: .85rem; }
    .pos-mobilebar .mbar-right { font-weight: 800; font-size: 1.05rem; }
    .pos-cart.open ~ .pos-mobilebar { display: none; }

    .pos-cart-backdrop { position: fixed; inset: 0; background: rgba(16, 24, 40, .42); z-index: 1075; }
    .pos-cart-backdrop.show { display: block; }
}

/* ============================================================
   Sidebar accordion: tiap section (Master, Inventory, dst.) jadi
   grup yang bisa dilipat. Default TERTUTUP agar tidak ramai; grup
   yang memuat halaman aktif dibuka otomatis (atribut `open` dari PHP).
   Native <details>/<summary> — tanpa JS.
   ============================================================ */
.em-nav-group { margin: 1px 0; border-radius: var(--r-sm, 8px); }
.em-nav-group[open] { background: rgba(255, 255, 255, .035); }        /* panel section aktif "menyala" lembut */
summary.em-nav-section {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; user-select: none; list-style: none;
    padding: 10px 12px;
    color: rgba(255, 255, 255, .78);                                  /* JAUH lebih terang dari .5 (tak lagi kusam) */
    border-radius: var(--r-sm, 8px);
    transition: color .12s ease, background .12s ease;
}
summary.em-nav-section::-webkit-details-marker { display: none; }
summary.em-nav-section:hover { color: #fff; background: rgba(255, 255, 255, .07); }
/* ikon "logo" section: chip glass ber-gradasi + highlight → dimensi & hidup */
summary.em-nav-section .em-ico {
    width: 28px; height: 28px; flex: 0 0 28px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; line-height: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .07));
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 9px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
    opacity: 1;
    /* emoji section = warna PENUH & pekat (samakan dgn ikon item) */
    filter: saturate(1.25) brightness(1.05) drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
    transition: transform .14s ease, background .14s ease, box-shadow .14s ease, border-color .14s ease;
}
summary.em-nav-section:hover .em-ico {
    background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .12));
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 3px 8px rgba(0, 0, 0, .18);
}
.em-nav-sec-label {
    font-size: 13px; letter-spacing: .005em; text-transform: none; font-weight: 600;
}
.em-nav-caret {
    margin-left: auto;
    width: 7px; height: 7px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg);
    transition: transform .15s ease;
    opacity: .6;
}
/* section terbuka → chip hijau apotek BERCAHAYA + teks putih penuh */
.em-nav-group[open] > summary.em-nav-section { color: #fff; }
.em-nav-group[open] > summary.em-nav-section .em-ico {
    /* status terbuka: cincin + glow hijau, latar tetap glass → warna emoji tetap terlihat */
    background: linear-gradient(180deg, rgba(38, 184, 132, .22), rgba(30, 158, 106, .12));
    border-color: rgba(38, 184, 132, .7);
    box-shadow: 0 0 0 1px rgba(38, 184, 132, .5), 0 3px 12px rgba(30, 158, 106, .4), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.em-nav-group[open] > summary.em-nav-section .em-nav-caret { transform: rotate(-135deg); opacity: .9; }

/* ── Item nav: accent-bar hijau halus + transisi mulus (poles premium) ── */
.em-nav-item {
    position: relative;
    transition: background .14s ease, color .14s ease, padding-left .14s ease;
}
.em-nav-item::before {
    content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 0; border-radius: 3px; background: var(--app-accent);
    transition: height .16s ease, opacity .16s ease; opacity: 0;
}
.em-nav-item:hover { padding-left: 15px; }
.em-nav-item:hover::before { height: 15px; opacity: .55; }
.em-nav-item.active {
    background: linear-gradient(90deg, rgba(30, 158, 106, .16), rgba(255, 255, 255, .045));
}
.em-nav-item.active::before {
    height: 20px; opacity: 1; box-shadow: 0 0 8px rgba(30, 158, 106, .6);
}
.em-nav-item.active .em-ico { opacity: 1; }
/* ikon item = emoji warna PENUH & lebih pekat biar hidup di sidebar gelap (item/obat 💊, zat aktif 🧪, promo 🎁, dll) */
.em-nav-item .em-ico {
    opacity: 1;
    font-size: 15px;
    filter: saturate(1.25) brightness(1.05) drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
}

/* ── Item "solo" (parent tanpa anak, mis. Dashboard/Pusat Kendali): samakan gaya dengan
      header seksi (chip ikon 28px + label tebal), agar sejajar visual dgn parent accordion. ── */
.em-nav-item.em-nav-solo {
    gap: 10px;
    padding: 10px 12px;
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .005em;
    border-radius: var(--r-sm, 8px);
}
.em-nav-item.em-nav-solo::before { content: none; }                    /* buang accent-bar item */
.em-nav-item.em-nav-solo:hover { padding-left: 12px; background: rgba(255, 255, 255, .07); color: #fff; }
.em-nav-item.em-nav-solo .em-dot { display: none; }                    /* status aktif via chip, bukan titik */
.em-nav-item.em-nav-solo .em-ico {
    width: 28px; height: 28px; flex: 0 0 28px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; line-height: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .07));
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 9px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
    filter: saturate(1.25) brightness(1.05) drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
    transition: transform .14s ease, background .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.em-nav-item.em-nav-solo:hover .em-ico {
    background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .12));
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 3px 8px rgba(0, 0, 0, .18);
}
/* aktif: samakan dgn seksi terbuka — teks putih + chip hijau bercahaya */
.em-nav-item.em-nav-solo.active { color: #fff; background: linear-gradient(90deg, rgba(30, 158, 106, .16), rgba(255, 255, 255, .045)); }
.em-nav-item.em-nav-solo.active .em-ico {
    background: linear-gradient(180deg, rgba(38, 184, 132, .22), rgba(30, 158, 106, .12));
    border-color: rgba(38, 184, 132, .7);
    box-shadow: 0 0 0 1px rgba(38, 184, 132, .5), 0 3px 12px rgba(30, 158, 106, .4), inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* ── Sub-menu (anak di dalam seksi) di-indent sedikit agar tak sejajar induknya ── */
.em-nav-group .em-nav-item { padding-left: 24px; }
.em-nav-group .em-nav-item:hover { padding-left: 27px; }               /* jaga indent saat hover */
.em-nav-group .em-nav-item::before { left: 13px; }                     /* accent-bar ikut geser */

/* ============================================================
   PT switcher (head-office): pemilih PT di topbar + banner peringatan.
   ============================================================ */
.em-tenant {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 8px; margin-right: 6px;
    border: 1px solid var(--line, #e5e7eb); border-radius: var(--r-pill, 999px);
    background: #fff;
}
.em-tenant-ico { font-size: 13px; line-height: 1; }
.em-tenant select {
    border: 0; background: transparent; outline: none;
    font-size: 13px; font-weight: 600; color: #1f2937;
    max-width: 190px; cursor: pointer;
}
.em-tenant.switched {
    border-color: #f0b429; background: #fffbeb;
}
.em-tenant.switched select { color: #92400e; }

.em-tenant-banner {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 16px; font-size: .86rem;
    color: #92400e; background: #fff8e1;
    border-bottom: 1px solid #f0d488;
}
.em-tenant-banner b { color: #7c2d12; }
.em-tenant-back {
    margin-left: auto; border: 1px solid #d97706; background: #fff;
    color: #b45309; border-radius: var(--r-sm, 8px);
    padding: 4px 10px; font-size: .82rem; font-weight: 600; cursor: pointer;
    white-space: nowrap;
}
.em-tenant-back:hover { background: #d97706; color: #fff; }

/* ============================================================
   Sidebar: kolom cari modul/fitur (filter client-side).
   Sticky di atas daftar nav; menyatu dengan sidebar navy.
   ============================================================ */
.em-nav-search {
    position: sticky; top: -8px; z-index: 3;
    margin: -8px -10px 6px; padding: 8px 10px;
    background: var(--navy-900);
}
.em-nav-search input {
    width: 100%; box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    color: #fff; border-radius: 8px;
    padding: 7px 30px 7px 10px; font-size: 13px; outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center;
}
.em-nav-search input::placeholder { color: rgba(255, 255, 255, .42); }
.em-nav-search input:focus {
    border-color: var(--app-accent); background-color: rgba(255, 255, 255, .1);
}
.em-nav-empty {
    color: rgba(255, 255, 255, .5); font-size: 12px; padding: 8px 12px;
}

/* ============================================================
   Konsolidasi head-office: drill-down Holding → PT → Cabang.
   Grid 5 kolom agar rapi; tiap PT = <details> yang bisa di-expand
   untuk lihat rincian per cabang (native, tanpa JS).
   ============================================================ */
.kons-tbl { --kons-cols: minmax(150px, 2.2fr) .7fr 1fr 1.3fr; }
.kons-head, .kons-sum, details.kons-pt > summary, .kons-outlet {
    display: grid; grid-template-columns: var(--kons-cols);
    gap: 8px; align-items: center; padding: 9px 14px;
}
.kons-num { text-align: right; white-space: nowrap; }
.kons-head {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
    color: #667085; background: #f9fafb; border-bottom: 1px solid var(--line, #e5e7eb);
}
details.kons-pt { border-bottom: 1px solid #f2f4f7; }
details.kons-pt > summary {
    cursor: pointer; list-style: none; font-weight: 600; color: #1f2937;
    transition: background .12s ease;
}
details.kons-pt > summary::-webkit-details-marker { display: none; }
details.kons-pt > summary:hover { background: #f9fafb; }
.kons-pt-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
details.kons-pt > summary .kons-pt-name::before {
    content: '▸'; color: #98a2b3; font-size: .8em;
    transition: transform .15s ease;
}
details.kons-pt[open] > summary .kons-pt-name::before { transform: rotate(90deg); }
.kons-outlet {
    padding-left: 34px; font-size: .9rem; color: #475467; background: #fcfcfd;
}
.kons-cabang + .kons-cabang { border-top: 1px dashed #eef0f3; }
/* cabang bisa di-expand → top 5 obat/alkes */
details.kons-cabang > summary.kons-outlet {
    cursor: pointer; list-style: none;
}
details.kons-cabang > summary::-webkit-details-marker { display: none; }
details.kons-cabang > summary:hover { background: #f4f6f8; }
details.kons-cabang > summary .kons-pt-name::before {
    content: '▸'; color: #98a2b3; font-size: .8em; margin-right: 4px;
    transition: transform .15s ease; display: inline-block;
}
details.kons-cabang[open] > summary .kons-pt-name::before { transform: rotate(90deg); }
.kons-top {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 8px 14px 12px 34px; background: #fbfcfd; border-top: 1px solid #f2f4f7;
}
.kons-top-h { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #475467; margin-bottom: 4px; }
.kons-top-list { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.kons-top-list li {
    counter-increment: t; display: flex; align-items: baseline; gap: 6px;
    font-size: .82rem; padding: 2px 0; color: #344054;
}
.kons-top-list li::before {
    content: counter(t) '.'; color: #98a2b3; font-size: .72rem; flex: 0 0 16px;
}
.kons-top-list li span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kons-top-list li b { color: var(--app-accent); white-space: nowrap; }
.kons-top-empty { font-size: .8rem; color: #98a2b3; padding: 2px 0; }
@media (max-width: 575px) { .kons-top { grid-template-columns: 1fr; } }
.kons-sum { font-weight: 700; background: #fbfcfd; border-top: 2px solid #e5e7eb; }

/* Leaderboard cabang */
.kons-lb { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.kons-lb + .kons-lb { border-top: 1px solid #f2f4f7; }
.kons-lb-rank {
    flex: 0 0 24px; width: 24px; height: 24px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700; color: #667085; background: #f2f4f7;
}
.kons-lb:nth-child(1) .kons-lb-rank { background: var(--app-accent); color: #fff; }
.kons-lb:nth-child(2) .kons-lb-rank { background: #cbd5e1; color: #1f2937; }
.kons-lb:nth-child(3) .kons-lb-rank { background: #e7c9a9; color: #7c2d12; }
.kons-lb-body { flex: 1; min-width: 0; }
.kons-lb-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.kons-lb-nama { font-size: .86rem; font-weight: 600; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kons-lb-jual { font-size: .84rem; white-space: nowrap; }
.kons-lb-bar { height: 6px; border-radius: 999px; background: #f2f4f7; margin-top: 4px; overflow: hidden; }
.kons-lb-bar span { display: block; height: 100%; background: var(--app-accent); border-radius: 999px; }

/* ============================================================
   Pusat Kendali — sistem visual dashboard (angka tabular, kartu lembut).
   ============================================================ */
#main .em-content, .kons-hero, .kons-kpi, .kons-lb, .kons-acard { font-variant-numeric: tabular-nums; }

/* HERO: omzet grup + pertumbuhan + area-chart penuh di bawah */
.kons-hero {
    position: relative; overflow: hidden; border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #ffffff 0%, #f3fbf7 60%, #eef6ff 100%);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 30px -18px rgba(30, 158, 106, .5);
}
.kons-hero-body { position: relative; z-index: 2; padding: 18px 22px 58px; }
.kons-hero-label { font-size: .82rem; color: #667085; font-weight: 500; }
.kons-hero-row { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; flex-wrap: wrap; }
.kons-hero-val { font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; color: #101828; line-height: 1.05; }
.kons-hero-sub { font-size: .78rem; color: #98a2b3; margin-top: 3px; }
.kons-hero-chart { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; z-index: 1; }
.kons-hero-chart .kons-spark-svg { width: 100%; height: 100%; display: block; }

/* badge pertumbuhan */
.kons-gbadge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: .72rem; font-weight: 800; padding: 3px 10px; border-radius: 999px;
    white-space: nowrap; line-height: 1;
}
.kons-gbadge.lg { font-size: .82rem; padding: 5px 12px; }
.kons-gbadge.up { background: #d1fadf; color: #067647; }
.kons-gbadge.down { background: #fee4e2; color: #b42318; }
.kons-gbadge.flat { background: #eaecf0; color: #667085; }
.kons-gbadge.new { background: #d1e9ff; color: #175cd3; }

/* KPI cards: ikon-chip + angka besar + sub */
.kons-kpi {
    height: 100%; display: flex; align-items: center; gap: 11px;
    background: #fff; border: 1px solid var(--line, #e5e7eb); border-radius: 13px;
    padding: 13px 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.kons-kpi:hover { box-shadow: 0 8px 22px -10px rgba(16, 24, 40, .22); transform: translateY(-2px); }
.kons-kpi-ic {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 19px;
    background: #f2f4f7; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.kons-kpi-body { min-width: 0; }
.kons-kpi-lbl { font-size: .72rem; color: #98a2b3; font-weight: 500; }
.kons-kpi-val { font-size: 1.28rem; font-weight: 800; color: #101828; line-height: 1.15; letter-spacing: -.01em; white-space: nowrap; }
.kons-kpi-sub { font-size: .68rem; color: #98a2b3; }
.kons-kpi.accent .kons-kpi-ic { background: #e7f7f0; }
.kons-kpi.accent .kons-kpi-val { color: #0b7a52; }
.kons-kpi.gold .kons-kpi-ic { background: #fef7e6; }
.kons-kpi.gold .kons-kpi-val { color: #b7791f; }
.kons-kpi.info .kons-kpi-ic { background: #eaf2ff; }

/* Header halaman + keseragaman kartu */
.pk-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.pk-head-ic {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 22px;
    background: linear-gradient(135deg, #12395e, #1e2a44); color: #fff;
    box-shadow: 0 8px 18px -8px rgba(18, 57, 94, .65);
}
.pk-holding { font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #e7f7f0; color: #0b7a52; }
.pk .card { border-radius: 14px; border-color: #eef0f3; }
.pk .card:not(.kons-hero) { box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.pk .card-header { background: transparent; border-bottom: 1px solid #f2f4f7; border-radius: 14px 14px 0 0; font-weight: 600; }

/* meta leaderboard: pertumbuhan + margin */
.kons-lb-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.kons-lb-margin { font-size: .72rem; color: #667085; }

/* Panel kewaspadaan (anomali per cabang) — kartu */
.kons-alert-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px;
}
.kons-acard {
    position: relative; overflow: hidden;
    background: #fff; border: 1px solid var(--line, #e5e7eb); border-radius: 12px;
    padding: 12px 14px 12px 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: box-shadow .14s ease, transform .14s ease;
}
.kons-acard:hover { box-shadow: 0 6px 18px rgba(16, 24, 40, .1); transform: translateY(-1px); }
.kons-acard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #12b76a; }
.kons-acard.amber::before { background: #f79009; }
.kons-acard.red::before { background: #f04438; }
.kons-acard-head { display: flex; align-items: center; gap: 6px; }
.kons-acard-head .nm { font-weight: 700; font-size: .9rem; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kons-pill { margin-left: auto; flex: 0 0 auto; font-size: .66rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.kons-pill.ok { background: #ecfdf3; color: #067647; }
.kons-pill.warn { background: #fef0c7; color: #b54708; }
.kons-pill.bad { background: #fee4e2; color: #b42318; }
.kons-acard-pt { font-size: .72rem; color: #98a2b3; margin: 1px 0 10px; }
.kons-acard-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.kons-stat .lbl { display: block; font-size: .66rem; color: #98a2b3; text-transform: uppercase; letter-spacing: .02em; }
.kons-stat .val { font-size: .84rem; font-weight: 700; color: #344054; white-space: nowrap; }
.kons-stat.zero .val { color: #cbd5e1; font-weight: 600; }
.kons-stat.hit .val { color: #d92d20; }
.kons-stat.hit-amber .val { color: #b54708; }

/* ============================================================
   Layar Order SPG (.pos-spg) — turunan .pos-roomy, dipakai HANYA di
   views/sales-order/buat.php (kasir /pos/register sengaja tidak ikut).
   SPG memeriksa ulang seluruh isi order sebelum "Kirim ke Kasir", jadi
   baris item dibuat lebih besar TAPI daftar harus muat 6-10 baris:
   - baris diskon per item hanya muncul saat 🏷 ditekan (buat.php),
   - footer dipangkas (Item digabung ke Total, "Diskon item" hilang saat
     nol, "Rencana bayar" jadi <details> yang terlipat),
   - .pos-cart-lines diberi min-height agar footer tak mencaplok daftar.
   ============================================================ */
.pos-spg .pos-line { align-items: center; }
/* subtotal + tombol sebaris (bukan bertumpuk) — tumpukan bikin baris ±64px, ini ±48px */
.pos-spg .pos-line-right { flex-direction: row; align-items: center; gap: 8px; }
.pos-spg .pos-line-sum { min-width: 66px; }
/* baris item tanpa garis bawah kalau baris diskonnya sedang terbuka */
.pos-spg .pos-line:has(+ .pos-line-disc) { border-bottom: 0; }
.pos-spg .pos-line-tools { display: flex; align-items: center; gap: 4px; }

/* toggle diskon: tombol berbingkai (bukan emoji pudar — dulu tak terlihat) */
.pos-spg .pos-line-tag {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0;
    border: 1px solid var(--line, #e5e7eb); border-radius: 7px;
    background: #fff; color: #667085;
    font-size: .78rem; line-height: 1; cursor: pointer;
    transition: border-color .12s, background .12s;
}
.pos-spg .pos-line-tag:hover { border-color: var(--app-accent, #1E9E6A); background: #f9fafb; }
.pos-spg .pos-line-tag.on {
    background: var(--app-accent-bg, #E3F5EC);
    border-color: var(--app-accent, #1E9E6A);
}
.pos-spg .pos-line-del { font-size: 1rem; line-height: 1; padding: 0 2px; }
.pos-spg .pos-line-hemat { color: var(--app-accent, #1E9E6A); font-weight: 700; }
.pos-spg .pos-line-disc {
    display: flex; align-items: center; gap: 6px;
    padding: 0 14px 8px; margin-top: -2px;
    border-bottom: 1px solid #f2f4f7;
}
.pos-spg .pos-line-disc .lbl { font-size: .72rem; color: #667085; }
.pos-spg .pos-line-disc .dscval { width: 96px; text-align: right; font-size: .8rem; padding: 2px 6px; }
.pos-spg .pos-line-disc .dsctipe { font-size: .72rem; padding: 2px 9px; }
.pos-spg .pos-line-disc .hemat { font-size: .72rem; font-weight: 700; color: var(--app-accent, #1E9E6A); }

/* strip SPG + counter: setipis mungkin */
.pos-spg .pos-cart-spg {
    display: flex; align-items: center; gap: 8px;
    padding: 2px 8px 4px; font-size: .72rem; color: #6c757d;
}
.pos-spg .pos-cart-spg .form-control { max-width: 150px; padding: 1px 7px; font-size: .72rem; height: auto; }

/* jumlah item pindah ke label Total → satu baris footer hemat */
.pos-spg .pos-cnt { font-size: .72rem; font-weight: 600; color: #98a2b3; }

/* rencana bayar terlipat */
.pos-spg .pos-plan { margin: 2px 0 4px; }
.pos-spg .pos-plan > summary {
    cursor: pointer; list-style: none;
    font-size: .72rem; color: #667085; padding: 2px 0;
}
.pos-spg .pos-plan > summary::-webkit-details-marker { display: none; }
.pos-spg .pos-plan > summary::before { content: '▸ '; color: #98a2b3; }
.pos-spg .pos-plan[open] > summary::before { content: '▾ '; }
.pos-spg .pos-plan > summary span { opacity: .75; }
.pos-spg .pos-plan > summary:hover { color: var(--app-accent, #1E9E6A); }
.pos-spg .pos-plan > div { margin-top: 4px; }

/* "Total" mengecil kalau ada baris "Bayar" — cukup satu angka besar di footer */
.pos-spg .pos-totrow-sm .val { font-size: 1rem; font-weight: 700; }
.pos-spg .pos-totrow-sm .lbl { font-size: .85rem; font-weight: 600; }

/* desktop: huruf item besar TAPI baris padat.
   .pos-cart-lines memakai flex:1 → tingginya = SISA panel. Jadi satu-satunya cara
   memuat 6-10 baris adalah menipiskan head/strip-SPG/footer + tinggi baris.
   JANGAN pasang min-height di sini: terbukti memotong footer 25px @viewport 624px. */
@media (min-width: 861px) {
    .pos-spg .pos-line { padding: 6px 12px; gap: 0 10px; }
    .pos-spg .pos-line-nama { font-size: 1rem; font-weight: 700; line-height: 1.25; color: #111827; }
    .pos-spg .pos-line-sub { font-size: .8rem; line-height: 1.25; }
    .pos-spg .pos-line-sum { font-size: 1.05rem; }
    /* stepper dikecilkan → nama obat dapat lebar, tidak turun 2 baris */
    .pos-spg .pos-qty button { width: 26px; height: 26px; font-size: 1rem; }
    .pos-spg .pos-qty input { width: 38px; height: 26px; font-size: .88rem; }

    /* head & footer tidak boleh menyusut (tombol kepotong) */
    .pos-spg .pos-cart-head, .pos-spg .pos-cart-foot { flex: 0 0 auto; }
    .pos-spg .pos-cart-head { padding: 5px 10px; }
    .pos-spg .pos-cart-foot { padding: 5px 12px 7px; }
    .pos-spg .pos-sumrow { margin-bottom: 0; }
    .pos-spg .pos-totrow { margin: 0 0 3px; }
    .pos-spg .pos-totrow .val { font-size: 1.16rem; }
    .pos-spg .pos-pay-btn { padding: 7px; font-size: .95rem; }
    .pos-spg .pos-foot-actions { margin-top: 3px; }
    .pos-spg .pos-foot-actions button { padding: 4px; }
    .pos-spg .pos-cart-lines { padding: 2px 0; }
}

/* layar pendek (laptop 768p / jendela tidak penuh): rapatkan lagi agar tetap ≥6 baris */
@media (min-width: 861px) and (max-height: 780px) {
    .pos-spg .pos-line { padding: 4px 12px; }
    .pos-spg .pos-line-nama { font-size: .95rem; }
    .pos-spg .pos-line-sub { font-size: .76rem; }
    .pos-spg .pos-cart-spg { padding: 0 8px 2px; }
    .pos-spg .pos-cart-head { padding: 3px 10px; }
    .pos-spg .pos-cart-foot { padding: 3px 12px 5px; }
    .pos-spg .pos-totrow { margin: 0 0 1px; }
    .pos-spg .pos-pay-btn { padding: 5px; }
    .pos-spg .pos-plan { margin: 1px 0 2px; }
}

/* tablet/ponsel (keranjang = bottom-sheet): tetap terbaca, sheet dinaikkan */
@media (max-width: 860px) {
    .pos-spg .pos-line-nama { font-size: 1rem; }
    .pos-spg .pos-line-sub { font-size: .84rem; }
    .pos-spg .pos-line-sum { font-size: 1.06rem; }
    .pos-spg .pos-cart-lines { max-height: 56vh; }
}

/* layar sentuh: target 🏷 & isian diskon ≥44px (SRS-N05) */
@media (pointer: coarse) {
    .pos-spg .pos-line-tag { width: 40px; height: 40px; font-size: 1.05rem; border-radius: 9px; }
    .pos-spg .pos-line-del { font-size: 1.3rem; padding: 4px 8px; }
    .pos-spg .pos-line-disc .dscval { width: 112px; font-size: .95rem; padding: 7px 9px; }
    .pos-spg .pos-line-disc .dsctipe { font-size: .85rem; padding: 9px 13px; }
    .pos-spg .pos-plan > summary { padding: 8px 0; font-size: .84rem; }
}

/* ============================================================
   Pengaturan Apotek (.set-*) — settings ber-tab, minim scroll.
   Tab pill sticky di atas, pane per topik, baris-switch compact,
   penjelasan panjang dilipat (<details>), bar simpan sticky bawah.
   ============================================================ */
/* tab bar: segmented pill, menempel saat halaman di-scroll */
.set-tabs {
    position: sticky; top: 10px; z-index: 6;
    display: flex; gap: 4px; flex-wrap: wrap;
    width: fit-content; max-width: 100%;
    background: #fff; border: 1px solid var(--line, #e5e7eb);
    border-radius: var(--r-pill, 999px);
    padding: 5px; margin-bottom: 16px;
    box-shadow: var(--sh-2, 0 6px 18px rgba(24, 44, 97, .08));
}
.set-tab {
    display: inline-flex; align-items: center; gap: 7px;
    border: 0; background: transparent;
    color: #475467; font-weight: 600; font-size: .86rem;
    font-family: var(--font-display, inherit);
    padding: 8px 15px; border-radius: 999px;
    cursor: pointer; white-space: nowrap;
    transition: background .13s, color .13s, box-shadow .13s;
}
.set-tab:hover { color: var(--app-accent, #1E9E6A); background: var(--mist, #F4F7FB); }
.set-tab.active {
    background: var(--app-accent, #1E9E6A); color: #fff;
    box-shadow: 0 2px 8px rgba(30, 158, 106, .35);
}
.set-tab-ico { font-size: .95rem; line-height: 1; }

/* pane: hanya tab aktif yang tampil */
.set-pane { display: none; }
.set-pane.active { display: block; animation: setFade .16s ease; }
@keyframes setFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* kartu & form dipadatkan (halaman settings = banyak field) */
.set .card { border-radius: 14px; }
.set .card-header {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 16px; font-size: .93rem;
}
.set .card-body { padding: 14px 16px 16px; }
.set .form-label { font-size: .82rem; margin-bottom: 4px; }
.set .form-control, .set .form-select { padding: 7px 11px; font-size: .9rem; }
.set textarea.form-control { line-height: 1.4; }
.set .form-text { font-size: .74rem; line-height: 1.45; }
.set-lbl-sub { font-weight: 400; font-size: .72rem; color: #98a2b3; }
.set-intro { font-size: .78rem; color: #667085; line-height: 1.5; margin-bottom: 12px; }

/* chip ikon + subjudul kecil di header kartu */
.set-ico {
    flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; background: var(--app-accent-bg, #E3F5EC);
}
.set-hsub { margin-left: auto; font-weight: 400; font-size: .72rem; color: #98a2b3; white-space: nowrap; }

/* baris switch: judul+deskripsi kiri, toggle kanan; menyala saat aktif */
.set-rows { display: flex; flex-direction: column; gap: 8px; }
.set-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 12px; margin: 0;
    border: 1px solid var(--line, #e5e7eb); border-radius: 10px;
    cursor: pointer; transition: border-color .12s, background .12s;
}
.set-row:hover { border-color: #c6cfdd; background: #fbfcfd; }
.set-row:has(.form-check-input:checked) { border-color: var(--app-accent, #1E9E6A); background: #f5fbf8; }
.set-row-main { flex: 1; min-width: 0; }
.set-row-title { display: block; font-weight: 600; font-size: .86rem; color: #1f2937; }
.set-row-desc { display: block; font-size: .74rem; color: #667085; line-height: 1.45; margin-top: 1px; }
/* toggle pil (replika .form-switch Bootstrap — di sini tanpa wrapper .form-check) */
.set-row .form-check-input {
    flex: 0 0 auto; width: 2.35em; height: 1.3em; margin-top: 2px; cursor: pointer;
    border-radius: 2em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280,0,0,0.25%29'/%3e%3c/svg%3e");
    background-position: left center; background-repeat: no-repeat; background-size: contain;
    transition: background-position .15s ease-in-out, background-color .15s ease-in-out, border-color .15s;
}
.set-row .form-check-input:checked {
    background-color: var(--app-accent, #1E9E6A); border-color: var(--app-accent, #1E9E6A);
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* penjelasan panjang dilipat — ringkas tapi tidak hilang */
.set-more { margin-top: 6px; }
.set-more > summary {
    cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 5px;
    font-size: .74rem; font-weight: 600; color: var(--info, #2E6BD6);
}
.set-more > summary::-webkit-details-marker { display: none; }
.set-more > summary::before { content: 'ⓘ'; font-size: .8rem; }
.set-more > summary:hover { text-decoration: underline; }
.set-more > div {
    font-size: .74rem; color: #475467; line-height: 1.55;
    background: var(--mist, #F4F7FB); border: 1px solid var(--line, #e5e7eb);
    border-radius: 8px; padding: 8px 11px; margin-top: 6px;
}

/* bar simpan: sticky di bawah, selalu terjangkau tanpa scroll ke ujung */
.set-save {
    position: sticky; bottom: 12px; z-index: 5;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--line, #e5e7eb);
    border-radius: 12px; padding: 10px 14px; margin-top: 16px;
    box-shadow: var(--sh-2, 0 6px 18px rgba(24, 44, 97, .08));
}
.set-save-hint { font-size: .76rem; color: #667085; }
.set.set-no-save .set-save { display: none; } /* tab Integrasi punya form sendiri */

/* token broker */
.set-token {
    padding: 5px 10px; border-radius: 8px;
    background: var(--mist, #F4F7FB); border: 1px solid var(--line, #e5e7eb);
    font-size: .8rem; word-break: break-all;
}

/* ponsel: tab bisa digulir menyamping, tak memakan tinggi layar */
@media (max-width: 640px) {
    .set-tabs { flex-wrap: nowrap; overflow-x: auto; width: auto; scrollbar-width: none; }
    .set-tabs::-webkit-scrollbar { display: none; }
    .set-tab { padding: 7px 12px; font-size: .8rem; }
}