:root {
    --bg0: #0a0f18;
    --bg: #0f172a;
    --panel: #152238;
    --panel2: #1a2d4a;
    --elev: 0 18px 50px rgba(0, 0, 0, 0.45);
    --border: rgba(148, 163, 184, 0.18);
    --text: #f1f5f9;
    --muted: #94a3b8;
    --accent: #34d399;
    --accent-dim: #059669;
    --accent2: #6ee7b7;
    --danger: #f87171;
    --success: #22c55e;
    --warn: #fbbf24;
    --radius: 12px;
    --radius-sm: 8px;
    /* Tipografi lokal / sistem — prioritas stack iOS (SF Pro) di Apple, fallback sistem lain (offline). */
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
    --sidebar-end: #111c2e;
    --topbar-bg: rgba(15, 23, 42, 0.9);
    --pos-topbar-bg: rgba(10, 14, 22, 0.92);
    --input-bg: rgba(15, 23, 42, 0.65);
    --input-focus-border: rgba(52, 211, 153, 0.55);
    --input-ring: rgba(52, 211, 153, 0.18);
    --qty-bg: rgba(0, 0, 0, 0.18);
    --nav-active-fg: #d1fae5;
    --sidebar-foot-bg: rgba(0, 0, 0, 0.15);
    --empty-muted-bg: rgba(255, 255, 255, 0.02);
    --sticky-cart-bg: linear-gradient(180deg, transparent 0%, rgba(10, 14, 20, 0.92) 28%);
    --btn-primary-fg: #ffffff;
    --btn-accent-fg: #ffffff;
    --btn-on-solid: #ffffff;
    --brand-mark-fg: #064e3b;
    --btn-primary-gradient: linear-gradient(180deg, #34d399 0%, #059669 100%);
    --btn-primary-gradient-hover: linear-gradient(180deg, #6ee7b7 0%, #047857 100%);
    --btn-primary-border: rgba(16, 185, 129, 0.75);
    --btn-primary-border-hover: rgba(52, 211, 153, 0.95);
    --btn-primary-shadow-hover: 0 2px 18px rgba(16, 185, 129, 0.38), var(--neon-glow-soft);
    --line-sep: rgba(148, 163, 184, 0.12);
    --modal-backdrop: rgba(0, 0, 0, 0.55);
    /* Cahaya halus (biru) — tombol, kartu, bilah */
    --neon-glow: 0 4px 28px rgba(52, 211, 153, 0.2), 0 0 48px -10px rgba(52, 211, 153, 0.16);
    --neon-glow-soft: 0 0 40px -12px rgba(52, 211, 153, 0.14);
    --neon-surface: 0 0 0 1px rgba(52, 211, 153, 0.07), 0 0 56px -20px rgba(52, 211, 153, 0.14);
    --neon-sidebar: 4px 0 48px -14px rgba(52, 211, 153, 0.16);
    --neon-topbar: 0 1px 0 rgba(52, 211, 153, 0.14), 0 14px 42px -24px rgba(52, 211, 153, 0.12);
}

html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;
    --bg0: #f7f9fc;
    --bg: #edf2f8;
    --panel: #ffffff;
    --panel2: #f8fbff;
    --elev: 0 14px 36px rgba(15, 23, 42, 0.07), 0 1px 0 rgba(255, 255, 255, 0.85) inset;
    --border: rgba(15, 23, 42, 0.09);
    --text: #0b1220;
    --muted: #64748b;
    --accent: #10b981;
    --accent-dim: #059669;
    --accent2: #047857;
    --danger: #dc2626;
    --success: #059669;
    --warn: #ca8a04;
    --sidebar-end: #eef4fb;
    --topbar-bg: rgba(255, 255, 255, 0.9);
    --pos-topbar-bg: rgba(255, 255, 255, 0.94);
    --input-bg: #ffffff;
    --input-focus-border: rgba(16, 185, 129, 0.7);
    --input-ring: rgba(16, 185, 129, 0.18);
    --qty-bg: rgba(16, 185, 129, 0.08);
    --nav-active-fg: #065f46;
    --sidebar-foot-bg: rgba(247, 250, 255, 0.96);
    --empty-muted-bg: rgba(16, 185, 129, 0.05);
    --sticky-cart-bg: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.97) 22%);
    --btn-primary-fg: #ffffff;
    --btn-accent-fg: #ffffff;
    --btn-on-solid: #ffffff;
    --brand-mark-fg: #022c22;
    --btn-primary-gradient: linear-gradient(180deg, #34d399 0%, #059669 100%);
    --btn-primary-gradient-hover: linear-gradient(180deg, #6ee7b7 0%, #047857 100%);
    --btn-primary-border: rgba(16, 185, 129, 0.75);
    --btn-primary-border-hover: rgba(52, 211, 153, 0.95);
    --btn-primary-shadow-hover: 0 2px 18px rgba(16, 185, 129, 0.42), var(--neon-glow-soft);
    --line-sep: rgba(15, 23, 42, 0.08);
    --modal-backdrop: rgba(15, 23, 42, 0.45);
    --neon-glow: 0 4px 26px rgba(16, 185, 129, 0.22), 0 0 44px -12px rgba(16, 185, 129, 0.14);
    --neon-glow-soft: 0 0 36px -12px rgba(16, 185, 129, 0.12);
    --neon-surface: 0 0 0 1px rgba(16, 185, 129, 0.1), 0 10px 40px -18px rgba(16, 185, 129, 0.12);
    --neon-sidebar: 4px 0 40px -14px rgba(16, 185, 129, 0.12);
    --neon-topbar: 0 1px 0 rgba(16, 185, 129, 0.12), 0 10px 36px -20px rgba(16, 185, 129, 0.1);
}

html[data-theme="light"] body {
    background:
        radial-gradient(920px 500px at 12% -8%, rgba(16, 185, 129, 0.08), transparent 55%),
        radial-gradient(1000px 540px at 85% -12%, rgba(16, 185, 129, 0.12), transparent 58%),
        radial-gradient(860px 460px at -8% 100%, rgba(34, 197, 94, 0.07), transparent 56%),
        var(--bg0);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background:
        radial-gradient(1000px 520px at 92% 0%, rgba(52, 211, 153, 0.09), transparent 52%),
        radial-gradient(1200px 600px at 10% -10%, rgba(52, 211, 153, 0.08), transparent 55%),
        radial-gradient(800px 480px at 0% 105%, rgba(16, 185, 129, 0.06), transparent 58%),
        var(--bg0);
    color: var(--text);
    font-size: 15px;
    line-height: 1.55;
    min-height: 100vh;
}

button,
input,
select,
textarea,
optgroup {
    font-family: inherit;
}

a { color: var(--accent2); }
a:hover { color: var(--accent); }

.app-body { min-height: 100vh; }
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 264px;
    background: linear-gradient(180deg, var(--panel) 0%, var(--sidebar-end) 100%);
    border-right: 1px solid var(--border);
    box-shadow: var(--neon-sidebar);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 120;
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.brand {
    padding: 1.15rem 1.1rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dim));
    color: var(--brand-mark-fg);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), var(--neon-glow-soft);
}
.brand-mark .brand-icon {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2;
}
.brand-text { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
.brand-text-muted {
    font-weight: 650;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}
.store-pill {
    margin: 0.65rem 0.85rem 0;
    padding: 0.45rem 0.65rem;
    border-radius: 999px;
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.25);
    font-size: 0.78rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}
.store-pill-icon {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    max-width: 1.15rem;
    max-height: 1.15rem;
    display: block;
    opacity: 0.85;
}
.store-pill-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pemilih outlet di sidebar (multi-outlet) */
.sidebar-outlet-wrap {
    padding: 0.55rem 0.85rem 0.65rem;
    border-bottom: 1px solid var(--border);
}
.sidebar-branch-form {
    margin: 0;
}
.sidebar-outlet-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 0.35rem;
    opacity: 0.85;
}
.sidebar-outlet-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.42rem 0.55rem 0.42rem 0.5rem;
    border-radius: 999px;
    background: rgba(52, 211, 153, 0.09);
    border: 1px solid rgba(52, 211, 153, 0.28);
}
html[data-theme="light"] .sidebar-outlet-pill {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.35);
}
.sidebar-outlet-pill::after {
    content: '';
    position: absolute;
    right: 0.55rem;
    top: 50%;
    margin-top: -2px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--muted);
    opacity: 0.65;
    pointer-events: none;
}
.sidebar-outlet-pill-ico {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    opacity: 0.88;
}
.sidebar-outlet-select {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0.15rem 1.35rem 0.15rem 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.82rem !important;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-outlet-select:focus {
    outline: none;
}
/* Daftar native select: color-scheme + option supaya kontras saat dropdown terbuka (dark mode) */
html[data-theme="dark"] .sidebar-outlet-select {
    color-scheme: dark;
}
html[data-theme="light"] .sidebar-outlet-select {
    color-scheme: light;
}
html[data-theme="dark"] .sidebar-outlet-select option {
    background-color: #1e293b;
    color: #f8fafc;
}
html[data-theme="light"] .sidebar-outlet-select option {
    background-color: #ffffff;
    color: #0f172a;
}
.sidebar-outlet-pill:focus-within {
    border-color: rgba(56, 189, 248, 0.55);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.12);
}
html[data-theme="light"] .sidebar-outlet-pill:focus-within {
    border-color: rgba(6, 182, 212, 0.5);
    box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.15);
}

.nav {
    display: flex;
    flex-direction: column;
    padding: 0.65rem 0.6rem;
    gap: 0.1rem;
    flex: 1;
    overflow-y: auto;
}
.nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}
.nav::-webkit-scrollbar {
    width: 8px;
}
.nav::-webkit-scrollbar-track {
    background: transparent;
}
.nav::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.32);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.nav::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.48);
    border: 2px solid transparent;
    background-clip: padding-box;
}
html[data-theme="light"] .nav {
    scrollbar-color: rgba(100, 116, 139, 0.34) transparent;
}
html[data-theme="light"] .nav::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.30);
    border: 2px solid transparent;
    background-clip: padding-box;
}
html[data-theme="light"] .nav::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.46);
    border: 2px solid transparent;
    background-clip: padding-box;
}
.nav-section-label {
    margin: 0.85rem 0.5rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0.9;
}
.nav-section-label:first-child { margin-top: 0.35rem; }

.nav-item {
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    border: 1px solid transparent;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.12s ease, border-color 0.12s ease;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.nav-item .nav-icon {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    opacity: 0.88;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.04); }
.nav-item.active {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.35);
    color: var(--nav-active-fg);
}

html[data-theme="light"] .nav-item:hover { background: rgba(6, 182, 212, 0.09); }
html[data-theme="light"] .nav-item.active {
    background: rgba(6, 182, 212, 0.14);
    border-color: rgba(6, 182, 212, 0.45);
}

.sidebar-foot {
    padding: 1rem;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    background: var(--sidebar-foot-bg);
    display: none;
}
.user-meta strong { display: block; font-size: 0.9rem; }
.role-pill {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    text-transform: capitalize;
    color: var(--muted);
}

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-left: 264px;
    min-height: 100vh;
    transition: margin-left 0.24s ease;
}

.topbar {
    padding: 1rem 1.5rem 1.1rem;
    border-bottom: 1px solid var(--border);
    background: var(--topbar-bg);
    backdrop-filter: blur(10px);
    box-shadow: var(--neon-topbar);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.topbar-titles { flex: 1; min-width: 0; }

/* Mobile & tablet: bilah judul + burger tetap terlihat saat scroll */
@media (max-width: 1024px) {
    .main > .topbar {
        position: sticky;
        top: 0;
        z-index: 320;
        isolation: isolate;
    }
}

/* Tutup/buka sidebar (desktop — konten lebih lebar) */
.sidebar-collapse-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel2);
    color: var(--text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sidebar-collapse-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
}
.sidebar-collapse-icon {
    display: block;
    transition: transform 0.2s ease;
}
body.app-sidebar-collapsed .sidebar-collapse-icon {
    transform: scaleX(-1);
}
@media (min-width: 961px) {
    .sidebar-collapse-toggle {
        display: inline-flex;
    }
    body.app-sidebar-collapsed .sidebar {
        transform: translateX(-100%);
        box-shadow: none;
        pointer-events: none;
    }
    body.app-sidebar-collapsed .main {
        margin-left: 0;
    }
    body.app-sidebar-collapsed:not(.pos-receipt-flow) .content {
        max-width: none;
    }
}
body.pos-full .sidebar-collapse-toggle,
body.pos-receipt-flow .sidebar-collapse-toggle {
    display: none !important;
}

/* Menu mobile — desktop disembunyikan */
.nav-backdrop {
    display: none;
}
.nav-drawer-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel2);
    color: var(--text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.nav-drawer-toggle:hover { background: rgba(255, 255, 255, 0.06); }
.nav-drawer-icon {
    display: block;
    width: 1.2rem;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}
.page-title { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
.page-subtitle { display: none; }

.topbar-aside { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.top-theme-btn {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel2);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.top-theme-btn:hover { color: var(--text); border-color: var(--input-focus-border); }
.theme-icon {
    width: 1rem;
    height: 1rem;
    display: inline-flex;
}
.theme-icon svg { width: 1rem; height: 1rem; }
.theme-icon-sun { display: none; }
.theme-icon-moon { display: inline-flex; }
html[data-theme="light"] .theme-icon-sun { display: inline-flex; }
html[data-theme="light"] .theme-icon-moon { display: none; }
.top-user-menu-wrap { position: relative; }
.top-user-btn {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel2);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.top-user-btn:hover { color: var(--text); border-color: var(--input-focus-border); }
.top-user-icon { width: 1rem; height: 1rem; }
.top-user-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.45rem);
    width: min(240px, 78vw);
    padding: 0.7rem;
    z-index: 220;
}
.top-user-head {
    margin-bottom: 0.6rem;
}
.top-user-head strong { display: block; font-size: 0.92rem; }
.top-user-actions {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.top-user-action-btn {
    justify-content: center;
    border-color: var(--border);
    background: rgba(255, 255, 255, 0.02);
}
.top-user-action-btn:hover {
    background: rgba(56, 189, 248, 0.08);
    border-color: rgba(56, 189, 248, 0.32);
}
.top-user-action-btn-danger:hover {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.4);
}
.chip {
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 0.78rem;
    color: var(--muted);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.clock { font-variant-numeric: tabular-nums; font-size: 0.9rem; }
/* Jam topbar flow hanya di halaman POS */
body:not([data-page="pos"]) .pos-topbar .pos-live-clock {
    display: none;
}

.content { padding: 1.35rem 1.5rem 2rem; flex: 1; max-width: 1400px; width: 100%; }
body[data-page="pos"] .main > .topbar { display: none; }
body[data-page="pos"] .content { padding-top: 0.5rem; padding-bottom: 0.75rem; padding-left: 1.25rem; padding-right: 1.25rem; }
body[data-page="pos"] .pos-topbar--legacy { display: none !important; }
body[data-page="purchase"] .main > .topbar { display: none; }
body[data-page="purchase"] .content { padding-top: 1rem; padding-left: 1.25rem; padding-right: 1.25rem; }
body[data-page="stock_add"] .main > .topbar { display: none; }
body[data-page="stock_add"] .content { padding-top: 1rem; padding-left: 1.25rem; padding-right: 1.25rem; }

/* POS chrome */
.pos-topbar {
    position: sticky;
    top: 0;
    z-index: 320;
    isolation: isolate;
    background: var(--pos-topbar-bg);
    border-bottom: 1px solid var(--border);
    margin: -0.75rem -1.5rem 1rem;
    padding: 0.55rem 1.5rem;
    backdrop-filter: blur(8px);
}
.pos-topbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    max-width: 1400px;
    margin: 0 auto;
}
/* Kasir / Pembelian / Tambah stok: header & konten memenuhi lebar area main (bukan kotak 1400px) */
body[data-page="pos"]:not(.pos-receipt-flow) .content,
body[data-page="purchase"] .content,
body[data-page="stock_add"] .content {
    max-width: none;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
body[data-page="pos"] .pos-topbar-inner,
body[data-page="purchase"] .pos-topbar-inner,
body[data-page="stock_add"] .pos-topbar-inner {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
.pos-topbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-left: auto;
}
.pos-brand { font-weight: 800; letter-spacing: 0.08em; font-size: 0.78rem; color: var(--accent); }
/* Pelanggan di toolbar: di kanan kolom cari produk — nama (klik = modal), + minimal */
.pos-toolbar-cust {
    display: inline-flex;
    align-items: stretch;
    gap: 0.28rem;
    flex-shrink: 0;
    max-width: min(220px, 36vw);
}
.pos-cust-trigger-minimal {
    flex: 1;
    min-width: 0;
    padding: 0.48rem 0.65rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text);
    font: inherit;
    font-size: 0.84rem;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.pos-cust-trigger-minimal:hover {
    border-color: var(--input-focus-border);
}
.pos-cust-trigger-minimal:focus-visible {
    outline: none;
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 3px var(--input-ring);
}
.pos-cust-trigger-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 650;
    line-height: 1.2;
    max-width: 100%;
}
.pos-cust-plus-minimal {
    flex-shrink: 0;
    width: 2.05rem;
    height: 2.05rem;
    padding: 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.pos-cust-plus-minimal:hover {
    color: var(--accent2);
    border-color: var(--input-focus-border);
    background: var(--qty-bg);
}
.pos-cust-plus-minimal:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--input-ring);
}
.pos-cust-trigger-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
}
.pur-supplier-row {
    margin-bottom: 0.6rem;
}
.pur-supplier-row .pos-cust-trigger-minimal {
    flex: 1;
}
html[data-theme="light"] body[data-page="pos"] .pos-cust-plus-minimal {
    color: #64748b;
}
html[data-theme="light"] body[data-page="pos"] .pos-cust-plus-minimal:hover {
    color: #991b1b;
    border-color: rgba(185, 28, 28, 0.35);
    background: rgba(254, 226, 226, 0.35);
}

.pos-cust-search-modal {
    max-width: min(520px, 100%);
}
.pos-cust-search-body {
    padding: 0 1.1rem 1.1rem;
}
.pos-cust-search-hint {
    font-size: 0.72rem;
    margin: 0.35rem 0 0.5rem;
}
.pos-cust-search-status {
    font-size: 0.78rem;
    min-height: 1.2rem;
    margin-bottom: 0.35rem;
}
.pos-cust-search-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: min(52vh, 420px);
    overflow-y: auto;
    padding-right: 0.15rem;
    margin-top: 0.25rem;
}
.pos-cust-result-card {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.65rem;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel2);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.1s ease, background 0.1s ease;
}
.pos-cust-result-card:hover {
    border-color: var(--input-focus-border);
    background: var(--qty-bg);
}
.pos-cust-result-card--umum {
    background: var(--panel);
}
.pos-cust-result-name {
    font-weight: 650;
    font-size: 0.88rem;
    line-height: 1.25;
    margin-bottom: 0.25rem;
}
.pos-cust-result-meta {
    font-size: 0.76rem;
}
.pos-cust-result-loyalty {
    font-size: 0.76rem;
    margin-top: 0.2rem;
    color: var(--accent2, #38bdf8);
    font-weight: 600;
}
.pos-cust-result-details {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.pos-cust-result-line {
    font-size: 0.78rem;
    line-height: 1.35;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    align-items: baseline;
}
.pos-cust-result-k {
    flex: 0 0 auto;
    min-width: 3.2rem;
}
.pos-cust-result-val {
    flex: 1 1 140px;
    min-width: 0;
    word-break: break-word;
}

.pos-cust-modal-panel {
    max-width: 400px;
}
.pos-cust-quick-form .label {
    margin-top: 0.35rem;
}

.pos-cust-no-results {
    margin-top: 0.65rem;
    padding: 0.75rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border);
    background: var(--panel);
}

.pos-cust-add-divider {
    margin: 0.85rem 0 0.35rem;
    border: 0;
    border-top: 1px solid var(--border);
}

button.pos-cust-show-form-btn {
    width: 100%;
    justify-content: center;
    margin-top: 0.25rem;
}

.pos-cust-add-panel {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
}

.pos-cust-add-actions {
    margin-top: 0.75rem;
}

@media (max-width: 520px) {
    .pos-cust-result-line {
        flex-direction: column;
        gap: 0.1rem;
    }
    .pos-cust-result-k {
        min-width: 0;
    }
}
.pos-toolbar { margin-top: 0; align-items: center; }
.pos-search-form { display: flex; gap: 0.5rem; flex: 1; min-width: 220px; }
.input-search { flex: 1; min-width: 200px; font-size: 1rem; padding: 0.65rem 0.85rem; }
.toolbar-hint { font-size: 0.8rem; margin-left: auto; }
.kbd {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    border: 1px solid var(--border);
    font-size: 0.72rem;
    font-family: inherit;
    background: var(--panel2);
}

.pos-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(300px, 400px);
    gap: 0.85rem;
    align-items: start;
}
.pos-layout--stack {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    grid-template-columns: none;
    max-width: 100%;
}
/* Kasir — satu panel penuh lebar (mirip pembelian) */
.pos-layout--flow {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    gap: 0;
    padding-bottom: 0;
}
.pos-flow-panel {
    --pos-flow-pad-x: 1.5rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    min-height: min(calc(100vh - 5.5rem), 920px);
    overflow: hidden;
}
.pos-flow-panel__head {
    flex-shrink: 0;
    padding: 0.65rem var(--pos-flow-pad-x) 0.55rem;
    border-bottom: 1px solid var(--border);
}
/* Baris atas: menu + shift + aksi */
.pos-flow-head-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    margin-bottom: 0.35rem;
}
.pos-flow-head-menu {
    flex-shrink: 0;
}
/* Waktu + shift + tutup shift (satu blok) */
.pos-flow-head-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
    flex: 1;
    min-width: 0;
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-sm);
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.18);
    font-size: 0.84rem;
}
.pos-flow-head-strip__shift {
    flex: 1;
    min-width: 0;
}
.pos-flow-head-strip__close {
    margin-left: auto;
    flex-shrink: 0;
}
.pos-flow-head-cust-row {
    flex: 0 1 auto;
    min-width: 0;
}
.pos-flow-head-shift {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
    flex: 1;
    min-width: 0;
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-sm);
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.18);
    font-size: 0.84rem;
}
.pos-flow-head-shift--warn {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.25);
}
.pos-flow-head-shift .btn {
    margin-left: auto;
}
.pos-flow-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
}
/* Satu baris: tanggal · pelanggan */
.pos-flow-head-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.45rem;
    line-height: 1.35;
}
.pos-flow-head-meta-row--inline {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0.32rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel2);
}
.pos-flow-head-meta-row--inline .pos-cust-trigger-inline {
    max-width: min(100%, 15rem);
}
.pos-flow-head-datetime {
    display: inline;
    font-size: 0.92rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    margin: 0;
    white-space: nowrap;
}
.pos-flow-head-sep {
    font-size: 0.85rem;
    user-select: none;
}
.pos-flow-head-cust-label {
    font-size: 0.82rem;
    white-space: nowrap;
}
.pos-cust-trigger-inline {
    font-size: 0.92rem;
    font-weight: 600;
    padding: 0.15rem 0.35rem;
    max-width: min(100%, 14rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pos-flow-head-meta-row .pos-cart-count-badge {
    margin-left: auto;
    font-size: 0.75rem;
}
.pos-flow-head-meta-row--inline .pos-cart-count-badge {
    margin-left: 0.2rem;
}
body[data-page="pos"] .pos-flow-head-top .pos-flow-head-meta-row--inline {
    margin-right: 0.25rem;
}
.pos-flow-panel__head-main {
    display: none;
}
body[data-page="pos"] .pos-flow-cart-head {
    display: none;
}
body[data-page="pos"] #pos-search-btn {
    display: none !important;
}
.pos-flow-panel__head .pos-catalog-head {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: wrap;
}
.pos-flow-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pos-flow-panel__search {
    flex-shrink: 0;
    padding: 0.65rem var(--pos-flow-pad-x) 0.55rem;
    border-bottom: 1px solid var(--border);
}
body[data-page="pos"] #pos-grid-hint,
body[data-page="pos"] .pos-flow-panel__search .pos-grid-hint {
    display: none !important;
}
.pos-prod-search-wrap {
    position: relative;
}
.pos-prod-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 40;
    max-height: min(42vh, 320px);
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    -webkit-overflow-scrolling: touch;
}
.pos-prod-results-table {
    width: 100%;
    margin: 0;
}
.pos-prod-results-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--panel);
    box-shadow: 0 1px 0 var(--border);
    padding: 0.5rem 0.65rem;
    font-size: 0.76rem;
}
.pos-prod-results-table tbody td {
    padding: 0.5rem 0.65rem;
    font-size: 0.88rem;
}
.pos-prod-results-table tr.pos-product-row {
    cursor: pointer;
}
.pos-prod-results-table tr.pos-product-row:hover,
.pos-prod-results-table tr.pos-product-row.is-active {
    background: rgba(14, 165, 233, 0.08);
}
.pos-prod-results-table tr.pos-product-row.is-active {
    outline: 2px solid rgba(14, 165, 233, 0.35);
    outline-offset: -2px;
}
.pos-prod-results-table tr.pos-service-row {
    cursor: pointer;
}
.pos-prod-results-table tr.pos-service-row:hover,
.pos-prod-results-table tr.pos-service-row.is-active {
    background: rgba(14, 165, 233, 0.08);
}
.pos-prod-results-table tr.pos-service-row.is-active {
    outline: 2px solid rgba(14, 165, 233, 0.35);
    outline-offset: -2px;
}
/* Pencarian jasa: sembunyikan stok, batch, expired */
body[data-page="pos"][data-pos-catalog="services"] .pos-prod-results-table .pos-res-col-stock,
body[data-page="pos"][data-pos-catalog="services"] .pos-prod-results-table .pos-res-col-batch,
body[data-page="pos"][data-pos-catalog="services"] .pos-prod-results-table .pos-res-col-exp {
    display: none;
}
.pos-cart-table {
    width: 100%;
    min-width: 520px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8rem;
}
.pos-cart-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--panel);
    box-shadow: 0 1px 0 var(--border);
    padding: 0.4rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--muted);
    white-space: nowrap;
}
.pos-cart-table thead th:first-child,
.pos-cart-table tbody td:first-child {
    padding-left: 0.75rem;
}
.pos-cart-table tbody td {
    padding: 0.45rem 0.55rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--line-sep);
    font-size: 0.8rem;
}
.pos-cart-table tbody tr:last-child td {
    border-bottom: none;
}
.pos-cart-table .pos-cart-col-name strong {
    font-size: 0.82rem;
    font-weight: 600;
    display: block;
    line-height: 1.25;
    margin: 0;
}
.pos-cart-table .pos-cart-col-name .mono {
    display: none;
}
.pos-cart-table .pos-cart-col-batch,
.pos-cart-table .pos-cart-col-exp {
    font-size: 0.75rem;
}
.pos-cart-table .pos-cart-col-price,
.pos-cart-table .pos-cart-col-total {
    font-size: 0.8rem;
    font-weight: 600;
}
.pos-cart-table .pos-cart-col-total strong {
    font-size: 0.82rem;
    font-weight: 650;
}
.pos-cart-table .empty-state-cell {
    text-align: center;
    padding: 1.25rem 0.75rem;
    font-size: 0.85rem;
}
.pos-cart-line-qty--table {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.1rem 0.15rem;
    background: var(--qty-bg, var(--panel));
}
.pos-cart-line-qty--table .pos-qty-input {
    width: auto;
    min-width: 2.6rem;
    max-width: 4.5rem;
    min-height: 0;
    text-align: center;
    padding: 0.2rem 0.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    border: none;
    background: transparent;
    box-shadow: none;
}
.pos-cart-line-qty--table .pos-qty-btn {
    min-width: 1.45rem;
    width: 1.45rem;
    height: 1.45rem;
    min-height: 1.45rem;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 4px;
}
body[data-page="pos"] .pos-cart-table .pos-unit-price-input {
    width: 5.5rem;
    padding: 0.25rem 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 6px;
}
body[data-page="pos"] .pos-cart-table .pos-line-remove {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1rem;
}
.pos-flow-panel__head {
    flex-shrink: 0;
    padding: 1.1rem var(--pos-flow-pad-x) 0.9rem;
    border-bottom: 1px solid var(--border);
}
.pos-flow-panel__search .pos-search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.55rem;
}
.pos-flow-panel__search .pur-search-bar {
    flex: 1;
    min-width: min(100%, 16rem);
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
}
.pos-flow-panel__search .pur-search-bar:focus-within {
    border-color: rgba(14, 165, 233, 0.5);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.pos-flow-panel__search .pur-search-bar .input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0.35rem 0.1rem;
}
.pos-flow-panel__search .pos-grid-hint {
    margin: 0;
    font-size: 0.83rem;
}
.pos-flow-panel__prod {
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}
.pos-flow-panel__prod-scroll {
    max-height: min(32vh, 280px);
    overflow: auto;
    padding: 0 var(--pos-flow-pad-x) 0.65rem;
    -webkit-overflow-scrolling: touch;
}
.pos-flow-panel__prod-scroll .pos-product-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--panel);
    box-shadow: 0 1px 0 var(--border);
}
.pos-flow-panel__cart {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pos-flow-cart-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem var(--pos-flow-pad-x) 0.5rem;
    border-bottom: 1px solid var(--border);
}
.pos-flow-cart-head .card-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}
.pos-flow-panel__cart-scroll {
    flex: 1 1 auto;
    min-height: 140px;
    max-height: min(42vh, 420px);
    overflow-y: auto;
    padding: 0.55rem var(--pos-flow-pad-x) 0.75rem;
    -webkit-overflow-scrolling: touch;
}
.pos-flow-panel__checkout {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.65rem 1.25rem;
    align-items: center;
    padding: 0.75rem var(--pos-flow-pad-x) 0.9rem;
    margin: 0;
    border-top: 2px solid var(--border);
    background: var(--panel);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.07);
    position: static;
}
body[data-page="pos"] .pos-layout--flow #pos-cart-panel {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    width: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
body[data-page="pos"] .pos-layout--flow .pos-flow-panel__checkout {
    position: fixed;
    left: calc(264px + 1.25rem);
    right: 1.25rem;
    bottom: 0.75rem;
    z-index: 35;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
}
body[data-page="pos"] .pos-layout--flow {
    padding-bottom: 8.6rem !important;
}
body[data-page="pos"] .pos-layout--flow #pos-cart-lines {
    max-height: min(38vh, 360px);
}
body[data-page="pos"] .pos-mobile-shell {
    width: 100%;
    max-width: none;
}
.pos-flow-panel .pos-product-table {
    width: 100%;
}
@media (max-width: 640px) {
    .pos-flow-panel__head-main {
        grid-template-columns: 1fr 1fr;
    }
    .pos-flow-panel__head-main .pos-stack-head__meta {
        grid-column: 1 / -1;
    }
    .pos-flow-panel__checkout {
        grid-template-columns: 1fr;
    }
    .pos-flow-panel__checkout .btn-checkout {
        width: 100%;
    }
}
.pos-stack-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem 1.25rem;
    align-items: end;
    padding: 0.85rem 1.1rem;
}
.pos-stack-head__date,
.pos-stack-head__cust {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.pos-stack-head__datetime {
    font-size: 1.05rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}
.pos-cust-trigger-stack {
    text-align: left;
    max-width: 100%;
}
.pos-stack-catalog {
    flex: 0 0 auto;
}
.pos-stack-cart {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.pos-stack-cart .pos-cart-panel-body {
    flex: 1;
    min-height: 0;
    padding: 0.65rem 1rem 1rem;
}
.pos-cart-scroll {
    max-height: min(38vh, 320px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.pos-stack-checkout {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 15;
    padding: 0.85rem 1.1rem 1rem;
    margin: 0;
    border-top: 1px solid var(--border);
    background: var(--panel);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem 1.25rem;
    align-items: center;
}
.pos-stack-checkout .pos-sticky-totals {
    margin: 0;
}
.pos-stack-checkout .btn-checkout {
    min-width: 10rem;
    margin: 0;
}
@media (max-width: 640px) {
    .pos-stack-head {
        grid-template-columns: 1fr 1fr;
    }
    .pos-stack-head__meta {
        grid-column: 1 / -1;
    }
    .pos-stack-checkout {
        grid-template-columns: 1fr;
    }
    .pos-stack-checkout .btn-checkout {
        width: 100%;
    }
}
.pos-products-panel { min-width: 0; order: 1; }
.pos-cart { order: 2; min-width: 0; }
body[data-page="pos"] .pos-topbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}
body[data-page="pos"] .pos-live-clock {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    color: var(--muted);
    white-space: nowrap;
}
body[data-page="pos"] #pos-cart-panel.card-pro {
    position: sticky;
    top: 0.5rem;
    max-height: calc(100vh - 5.5rem);
}
@media (max-width: 768px) {
    body[data-page="pos"] #pos-cart-panel.card-pro {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        max-height: none;
        margin: 0;
    }
}
body[data-page="pos"] .pos-cart-panel-body {
    overflow: hidden;
}
body[data-page="pos"] #pos-cart-lines {
    max-height: min(38vh, 340px);
}
body[data-page="pos"] .pos-cart-checkout {
    overflow-y: auto;
    max-height: min(42vh, 420px);
}
/* Pembelian / tambah stok — keranjang compact seperti POS (bukan full layar) */
@media (max-width: 768px) {
    body[data-page="purchase"] #pur-cart-panel.card-pro,
    body[data-page="stock_add"] #stkadd-cart-panel.card-pro {
        top: auto;
        max-height: min(40vh, 300px);
        overflow: hidden;
    }
    body[data-page="purchase"] #pur-cart-panel .pos-cart-panel-body,
    body[data-page="purchase"] #pur-cart-panel .card-body,
    body[data-page="stock_add"] #stkadd-cart-panel .pos-cart-panel-body,
    body[data-page="stock_add"] #stkadd-cart-panel .card-body {
        flex: 0 1 auto;
        min-height: 0;
        overflow: hidden;
    }
    body[data-page="purchase"] #pur-cart-lines,
    body[data-page="stock_add"] #stkadd-cart-lines {
        flex: 0 1 auto !important;
        max-height: min(20vh, 140px) !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    body[data-page="purchase"] .pur-cart-field-label {
        display: none;
    }
    body[data-page="purchase"] .pur-cart-edit-row {
        margin-top: 0.1rem;
        gap: 0.35rem 0.5rem;
    }
    body[data-page="purchase"] .pur-cart-field {
        flex: 1 1 45%;
        min-width: 4.5rem;
    }
    body[data-page="purchase"] .pos-cart-line {
        padding: 0.45rem 0.15rem;
        gap: 0.25rem;
    }
    body[data-page="stock_add"] #stkadd-cart-panel .pos-cart-panel-body {
        overflow: hidden;
    }
    body[data-page="purchase"] #pur-cart-panel .card-head,
    body[data-page="stock_add"] #stkadd-cart-panel .card-head {
        padding: 0.5rem 0.85rem 0.2rem;
    }
    body[data-page="purchase"] .pos-cart-footer.pos-cart-sticky-bar,
    body[data-page="stock_add"] .pos-cart-footer.pos-cart-sticky-bar {
        padding-top: 0.35rem;
    }
}
.pos-pay-form--sidebar .pos-modal-actions {
    display: none;
}
.pos-pay-form--sidebar > .pos-pay-hint:first-of-type {
    display: none;
}
.pos-grid-hint { font-size: 0.8rem; margin: 0 0 0.65rem; }
.pos-products-body { padding-top: 0.35rem; }

.pos-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 0.55rem;
}
.pos-product-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel2);
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-decoration: none;
    transition: transform 0.08s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
.pos-product-card:hover {
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}
.pos-product-card:active { transform: translateY(0); }
.pos-product-card.is-low-stock { opacity: 0.75; }
.pos-product-card-media {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(145deg, rgba(56, 189, 248, 0.14), rgba(14, 165, 233, 0.08));
    color: var(--accent);
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.pos-product-card-media.has-image {
    background: transparent;
}
.pos-product-card-media img {
    width: 62%;
    height: 62%;
    object-fit: contain;
    display: block;
    border-radius: 0.45rem;
    margin: auto;
}
.pos-product-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.45rem 0.55rem 0.55rem;
}
.pos-product-card-name {
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pos-product-card-meta { font-size: 0.68rem; color: var(--muted); }
.pos-product-card-price {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--accent2);
    margin-top: 0.1rem;
    font-variant-numeric: tabular-nums;
}
body[data-page="purchase"] .pur-catalog-beli {
    display: none !important;
}
.nav-drawer-account {
    display: none;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}
.nav-drawer-account-name {
    margin: 0 0.7rem 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    line-height: 1.35;
}
.nav-item--logout {
    color: var(--danger, #f87171);
}
.cash-btn-iconed--compact {
    gap: 0.25rem;
}
.cash-btn-iconed--compact .cash-toolbar-svg {
    width: 0.9rem;
    height: 0.9rem;
}

.pos-cart-panel-body { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-height: 0; }
body[data-page="pos"] #pos-cart-panel.card-pro {
    display: flex;
    flex-direction: column;
    max-height: min(calc(100vh - 120px), 900px);
}
body[data-page="pos"] #pos-cart-panel .card-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
@media (min-width: 769px) {
    body[data-page="purchase"] #pur-cart-panel.card-pro,
    body[data-page="stock_add"] #stkadd-cart-panel.card-pro {
        display: flex;
        flex-direction: column;
        max-height: min(calc(100vh - 120px), 900px);
    }
    body[data-page="purchase"] #pur-cart-panel .card-body,
    body[data-page="stock_add"] #stkadd-cart-panel .card-body {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
}
.pur-cart-edit-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
    align-items: flex-end;
    margin-top: 0.15rem;
}
.pur-cart-field {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}
.pur-cart-field-label {
    font-size: 0.72rem;
}
body[data-page="purchase"] #pur-search-btn,
body[data-page="purchase"] #pur-scan-btn,
body[data-page="stock_add"] #stkadd-search-btn,
body[data-page="stock_add"] #stkadd-scan-btn {
    display: inline-flex;
}
@media (min-width: 769px) {
    #pur-cart-lines,
    #stkadd-cart-lines {
        flex: 1;
        max-height: min(52vh, 480px);
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 0.2rem;
        margin: 0 -0.15rem 0 0;
    }
}
@media (max-width: 768px) {
    #pur-cart-lines,
    #stkadd-cart-lines {
        flex: 0 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 0.2rem;
        margin: 0 -0.15rem 0 0;
    }
}
#pos-cart-lines {
    flex: 1;
    max-height: min(52vh, 480px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.2rem;
    margin: 0 -0.15rem 0 0;
}
.pos-cart-line {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.65rem 0.2rem;
    border-bottom: 1px solid var(--line-sep);
}
#pos-cart-lines .pos-cart-line:last-child,
#pur-cart-lines .pos-cart-line:last-child,
#stkadd-cart-lines .pos-cart-line:last-child {
    border-bottom: none;
}
.pos-cart-footer.pos-cart-sticky-bar .pos-sticky-total-line {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.pos-cart-line-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.35rem 0.45rem;
    align-items: start;
}
.pos-cart-line-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.pos-cart-line-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.pos-cart-line-name {
    font-weight: 650;
    font-size: 0.9rem;
    line-height: 1.25;
    min-width: 0;
}
.pos-cart-line-meta {
    font-size: 0.72rem;
    margin-top: 0;
}
.pos-cart-line-qty {
    display: inline-flex;
    align-items: stretch;
    gap: 0.35rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.1rem 0.28rem;
    background: var(--qty-bg);
    align-self: flex-start;
}
.pos-qty-btn {
    width: 1.9rem;
    min-height: 1.9rem;
    height: auto;
    align-self: stretch;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: var(--panel);
    color: var(--text);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    font-weight: 700;
}
.pos-qty-btn:hover { filter: brightness(1.12); }
.pos-qty-val {
    min-width: 1.6rem;
    text-align: center;
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
}
.pos-qty-input {
    width: 5rem;
    min-width: 4.5rem;
    max-width: 8rem;
    min-height: 1.9rem;
    align-self: stretch;
    box-sizing: border-box;
    padding: 0.28rem 0.35rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 650;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}
.pos-qty-input:focus {
    outline: none;
    border-color: var(--accent2, #06b6d4);
    box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.15);
}
.pos-unit-price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.25rem;
}
.pos-unit-price-input {
    width: 8.5rem;
    max-width: 100%;
    padding: 0.5rem 0.65rem;
    font-size: 0.92rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
}
.pos-unit-price-input.is-below-cost {
    border-color: #b91c1c;
    background: rgba(185, 28, 28, 0.08);
}
.pos-unit-price-warn {
    font-size: 0.7rem;
    color: #fca5a5;
    white-space: nowrap;
}
html[data-theme="light"] .pos-unit-price-warn {
    color: #b91c1c;
}
.pos-cart-line-total {
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--accent2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    align-self: start;
}
.pos-line-remove {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: rgba(248, 113, 113, 0.15);
    color: #fecaca;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.pos-line-remove:hover { background: rgba(248, 113, 113, 0.35); }
.pos-cart-sticky-bar {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 2px solid var(--border);
    background: var(--sticky-cart-bg);
}
.pos-service-custom {
    margin-top: 1rem;
    padding: 0.75rem;
}
.pos-service-custom .card-head {
    padding: 0 0 0.5rem;
    border: none;
}
.pos-service-custom .card-title {
    font-size: 1rem;
}
.pos-service-custom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px auto;
    gap: 0.5rem;
    align-items: end;
}
.pos-service-empty {
    margin-top: 0.75rem;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    text-align: center;
    border: 1px dashed var(--border);
    background: var(--panel2);
}
.pos-service-empty .muted {
    margin: 0;
}
body[data-page="pos"] .pos-service-search-row {
    margin: 0.6rem 0 0.75rem;
}
body[data-page="pos"] .pos-service-search-row .input {
    width: 100%;
    max-width: 420px;
}
body[data-page="pos"] .pos-tab-panel[data-pos-tab-panel="services"] {
    padding-left: var(--pos-flow-pad-x);
    padding-right: var(--pos-flow-pad-x);
}
body[data-page="pos"] .pos-tab-panel[data-pos-tab-panel="services"] > .alert,
body[data-page="pos"] .pos-tab-panel[data-pos-tab-panel="services"] > .pos-service-empty,
body[data-page="pos"] .pos-tab-panel[data-pos-tab-panel="services"] > .pos-service-custom {
    margin-left: 0;
    margin-right: 0;
}
.pos-sticky-totals { font-size: 0.8rem; margin-bottom: 0.4rem; }
.pos-sticky-line {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.2rem 0;
    font-size: 0.8rem;
}
.pos-sticky-line .pos-sticky-num {
    font-size: 0.82rem;
    font-weight: 600;
}
.pos-sticky-num { font-variant-numeric: tabular-nums; color: var(--text); }
.pos-sticky-total-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.65rem;
    margin-top: 0.35rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--line-sep);
}
.pos-sticky-total-label { font-weight: 650; font-size: 0.85rem; }
.pos-sticky-total-val {
    font-size: 1.05rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--accent2);
    letter-spacing: -0.01em;
}
body[data-page="pos"] .pos-flow-panel__checkout .btn-checkout {
    font-size: 0.95rem;
    padding: 0.7rem 1rem;
}
.pos-cart-checkout .pos-pay-form--sidebar {
    padding-top: 0.35rem;
}
.pos-cart-checkout .pos-pay-form--sidebar .pos-pay-hint {
    font-size: 0.75rem;
    margin: 0 0 0.35rem;
}
.pos-cart-checkout .total-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.84rem;
    margin: 0.15rem 0;
}
.pos-cart-checkout .total-grand {
    margin: 0.45rem 0 0.55rem;
    padding: 0.65rem 0.75rem;
    background: rgba(56, 189, 248, 0.08);
    border-radius: 0.5rem;
    border: 1px solid rgba(56, 189, 248, 0.22);
}
.pos-cart-checkout .total-grand strong {
    font-size: 1.35rem;
    color: var(--accent2);
}
.pos-btn-pay-main {
    width: 100%;
    margin-top: 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.85rem 1.25rem;
}
.pos-product-card {
    position: relative;
}
.pos-product-card::after {
    content: "+";
    position: absolute;
    right: 0.45rem;
    bottom: 0.45rem;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 0.4rem;
    background: var(--accent);
    color: #0a0e14;
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.65rem;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
body[data-page="purchase"] .pos-product-card::after,
body[data-page="stock_add"] .pos-product-card::after {
    display: none;
}

.pos-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: var(--modal-backdrop);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0.75rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}
.pos-modal-overlay[hidden] {
    display: none !important;
}
.pos-modal {
    width: 100%;
    max-width: 440px;
    max-height: min(92vh, 640px);
    overflow-y: auto;
    padding: 0;
    margin: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.5), var(--neon-glow-soft);
}
@media (min-width: 520px) {
    .pos-modal-overlay { align-items: center; }
    .pos-modal { border-radius: var(--radius); }
}
.pos-uom-dialog__body {
    padding: 0.65rem 1.25rem 0.15rem;
}
.pos-uom-dialog__foot {
    padding: 0.5rem 1.25rem 0.85rem;
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
}
.pos-uom-dialog__actions {
    padding: 0.85rem 1.25rem 1.1rem;
    margin: 0;
    border-top: 1px solid var(--border);
}
.pos-uom-dialog #pos-uom-product-line,
.pos-uom-dialog #stock-uom-product-line {
    margin-top: 0 !important;
    margin-bottom: 0.35rem;
}
.pos-uom-dialog #stock-uom-qty-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.pos-uom-dialog #pos-uom-level-list,
.pos-uom-dialog #stock-uom-level-list,
.pos-uom-level-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.35rem 0 0.75rem;
    max-height: min(50vh, 320px);
    overflow-y: auto;
}
.pos-uom-pick-btn {
    text-align: left;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
    font: inherit;
}
.pos-uom-pick-btn:hover {
    border-color: var(--accent2, #06b6d4);
}
.pos-pay-print-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
}
.pos-pay-print-actions .btn-pay-confirm {
    flex: 1 1 12rem;
    min-width: 10rem;
}
.pos-uom-pick-btn.is-selected {
    outline: 2px solid var(--accent2, #06b6d4);
    outline-offset: 1px;
}
.pos-uom-pick-title { font-weight: 650; font-size: 0.92rem; }
.pos-uom-pick-sub { font-size: 0.78rem; margin-top: 0.2rem; line-height: 1.35; }
.product-form-jump {
    margin: 0 0 0.85rem;
    font-size: 0.88rem;
}
.product-form-jump a {
    color: var(--accent2, #06b6d4);
    text-decoration: none;
    font-weight: 600;
}
.product-form-jump a:hover {
    text-decoration: underline;
}
#pf-main,
#pf-uom {
    scroll-margin-top: 0.75rem;
}
#product-modal-wrap .crud-modal {
    max-width: min(98vw, 1040px);
    width: 100%;
}
@media (max-width: 520px) {
    #product-modal-wrap .product-modal-code-name-row {
        grid-template-columns: 1fr !important;
    }
}
.pos-product-uom-badge {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.1rem 0.32rem;
    border-radius: 4px;
    background: rgba(6, 182, 212, 0.18);
    color: var(--accent2, #06b6d4);
    vertical-align: middle;
    margin-left: 0.25rem;
}
.pos-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem 0.65rem;
    border-bottom: 1px solid var(--border);
}
.pos-modal-title { margin: 0; font-size: 1.1rem; font-weight: 700; }
.pos-modal-close {
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.06);
    color: var(--muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.pos-modal-close:hover { color: var(--text); }
.pos-pay-form { padding: 1rem 1.1rem 1.25rem; }
.pos-pay-hint { font-size: 0.78rem; line-height: 1.4; margin: 0 0 0.75rem; }
.pos-scan-modal { max-width: min(96vw, 420px); }
.pos-scan-body { padding: 0.5rem 0.75rem 0.85rem; }
.pos-scan-reader {
    width: 100%;
    min-height: 220px;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
}
.pos-scan-hint { font-size: 0.78rem; margin: 0.5rem 0 0; text-align: center; }
body[data-page="pos"] #pos-scan-btn { display: none; }
.pos-pay-change strong {
    font-size: 1.05rem;
    color: var(--success);
    font-variant-numeric: tabular-nums;
}
/* .total-row memakai display:flex; tanpa ini atribut hidden kalah spesifisitas → baris Kembali tetap tampil di QRIS/transfer */
.pos-pay-change.total-row[hidden],
#pay-change-wrap[hidden] {
    display: none !important;
}
.pos-modal-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}
@media (min-width: 400px) {
    .pos-modal-actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .pos-modal-actions .btn-pay-confirm { flex: 1; max-width: 260px; margin-left: auto; }
}
.pos-cust-search-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    text-align: left;
    border: 1px solid var(--border);
    background: var(--panel2);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.6rem;
    cursor: pointer;
    gap: 0.15rem;
}
.pos-cust-search-item + .pos-cust-search-item { margin-top: 0.4rem; }
.pos-money-input { font-variant-numeric: tabular-nums; }
.pos-grid-empty-inner { grid-column: 1 / -1; }

.receipt-pos-actions {
    max-width: 420px;
    margin: 0 auto 1rem;
}
.receipt-pos-actions.card-pro {
    padding: 1rem 1.1rem;
}
.receipt-pos-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
}
.receipt-pos-actions-grid--labeled {
    grid-template-columns: 1fr 1fr;
}
.receipt-pos-actions-grid--labeled .receipt-pos-btn-kasir {
    grid-column: 1 / -1;
}
.receipt-pos-actions-grid--labeled .btn--sale-print {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}
.receipt-pos-actions-grid--labeled .btn--sale-print span {
    font-size: 0.82rem;
    font-weight: 600;
}
.receipt-bt-printer-hint {
    font-size: 0.78rem;
    margin: 0 0 0.35rem;
}
.pos-pay-cust-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.65rem;
    flex-wrap: wrap;
}
.pos-cust-trigger-pay {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}
.pos-float-actions {
    display: none;
}
.pos-receipt-modal {
    max-width: min(560px, 96vw);
    width: 100%;
    max-height: min(92vh, 900px);
    display: flex;
    flex-direction: column;
}
.pos-receipt-modal-body {
    overflow: auto;
    max-height: calc(92vh - 3.5rem);
    padding: 0 0.85rem 0.85rem;
}
.pos-receipt-modal-body .sale-receipt-bundle {
    max-width: 420px;
    margin: 0 auto;
}

.sale-receipt-preview-wrap {
    margin-top: 0.75rem;
}
.sale-receipt-preview-wrap--from-pos {
    margin-top: 0;
}
.sale-receipt-preview-lead {
    margin: 0 0 0.65rem;
    font-size: 0.9rem;
}
.sale-receipt-preview-wrap .sale-receipt-bundle {
    max-width: 480px;
    margin: 0 auto;
}
.sale-receipt-preview-wrap--from-pos .sale-receipt-bundle {
    max-width: min(420px, 100%);
}

/* Pratinjau nota: kertas putih — teks gelap walau tema aplikasi gelap */
html[data-theme="dark"] .pos-receipt-scope .receipt.receipt--struk,
html[data-theme="dark"] .pos-receipt-scope .receipt.receipt--invoice-grid,
html[data-theme="dark"] .sale-receipt-scope .receipt.receipt--struk,
html[data-theme="dark"] .sale-receipt-scope .receipt.receipt--invoice-grid {
    color: #0f172a;
    background: #fff;
    border-color: #cbd5e1;
}
html[data-theme="dark"] .pos-receipt-scope .receipt,
html[data-theme="dark"] .pos-receipt-scope .receipt *,
html[data-theme="dark"] .sale-receipt-scope .receipt,
html[data-theme="dark"] .sale-receipt-scope .receipt * {
    color: #0f172a !important;
}
html[data-theme="dark"] .pos-receipt-scope .receipt .receipt-sk-addr,
html[data-theme="dark"] .pos-receipt-scope .receipt .receipt-sk-meta-lbl,
html[data-theme="dark"] .pos-receipt-scope .receipt .receipt-sk-meta-screen,
html[data-theme="dark"] .pos-receipt-scope .receipt .receipt-sk-item-qty,
html[data-theme="dark"] .pos-receipt-scope .receipt .receipt-sk-total-row--pay,
html[data-theme="dark"] .pos-receipt-scope .receipt .receipt-sk-footer,
html[data-theme="dark"] .pos-receipt-scope .receipt .receipt-sk-debts-tag,
html[data-theme="dark"] .pos-receipt-scope .receipt .receipt-inv-addr,
html[data-theme="dark"] .pos-receipt-scope .receipt .receipt-inv-side-lbl,
html[data-theme="dark"] .pos-receipt-scope .receipt .receipt-inv-meta-screen,
html[data-theme="dark"] .pos-receipt-scope .receipt .muted,
html[data-theme="dark"] .sale-receipt-scope .receipt .receipt-sk-addr,
html[data-theme="dark"] .sale-receipt-scope .receipt .receipt-sk-meta-lbl,
html[data-theme="dark"] .sale-receipt-scope .receipt .receipt-sk-meta-screen,
html[data-theme="dark"] .sale-receipt-scope .receipt .receipt-sk-item-qty,
html[data-theme="dark"] .sale-receipt-scope .receipt .receipt-sk-total-row--pay,
html[data-theme="dark"] .sale-receipt-scope .receipt .receipt-sk-footer,
html[data-theme="dark"] .sale-receipt-scope .receipt .receipt-sk-debts-tag,
html[data-theme="dark"] .sale-receipt-scope .receipt .receipt-inv-addr,
html[data-theme="dark"] .sale-receipt-scope .receipt .receipt-inv-side-lbl,
html[data-theme="dark"] .sale-receipt-scope .receipt .receipt-inv-meta-screen,
html[data-theme="dark"] .sale-receipt-scope .receipt .muted {
    color: #475569 !important;
}
html[data-theme="dark"] .pos-receipt-scope .receipt .receipt-sk-rule,
html[data-theme="dark"] .pos-receipt-scope .receipt .receipt-inv-table th,
html[data-theme="dark"] .pos-receipt-scope .receipt .receipt-inv-table td,
html[data-theme="dark"] .pos-receipt-scope .receipt .receipt-inv-side,
html[data-theme="dark"] .pos-receipt-scope .receipt .receipt-inv-debts-table th,
html[data-theme="dark"] .pos-receipt-scope .receipt .receipt-inv-debts-table td,
html[data-theme="dark"] .sale-receipt-scope .receipt .receipt-sk-rule,
html[data-theme="dark"] .sale-receipt-scope .receipt .receipt-inv-table th,
html[data-theme="dark"] .sale-receipt-scope .receipt .receipt-inv-table td,
html[data-theme="dark"] .sale-receipt-scope .receipt .receipt-inv-side,
html[data-theme="dark"] .sale-receipt-scope .receipt .receipt-inv-debts-table th,
html[data-theme="dark"] .sale-receipt-scope .receipt .receipt-inv-debts-table td {
    border-color: #cbd5e1 !important;
}
html[data-theme="dark"] .pos-receipt-scope .receipt .receipt-inv-table thead th,
html[data-theme="dark"] .sale-receipt-scope .receipt .receipt-inv-table thead th {
    background: #f1f5f9 !important;
}

.receipt-pos-actions-grid .btn {
    margin: 0;
    min-height: 2.65rem;
    padding: 0.5rem 0.65rem;
    font-size: 0.82rem;
    justify-content: center;
}
.receipt-pos-actions-grid .btn-action-icon {
    width: 1rem;
    height: 1rem;
}
.receipt-pos-btn-kasir {
    grid-column: 1 / -1;
}
.receipt-pos-hint { font-size: 0.84rem; line-height: 1.4; margin: 0 0 0.35rem; }

.sale-print-status {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 0.65rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-sm, 8px);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.82rem;
    line-height: 1.35;
}
.sale-print-status--toolbar {
    flex: 1 1 100%;
    width: 100%;
    margin: 0 0 0.5rem;
    order: -1;
}
.toolbar--sale-detail-print {
    flex-wrap: wrap;
}
.sale-print-status-dot {
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    margin-top: 0.28rem;
    border-radius: 50%;
    background: var(--muted);
}
.sale-print-status[data-state="busy"] {
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(56, 189, 248, 0.08);
}
.sale-print-status[data-state="busy"] .sale-print-status-dot {
    background: var(--accent2, #38bdf8);
    animation: sale-print-pulse 0.9s ease-in-out infinite;
}
.sale-print-status[data-state="ok"] {
    border-color: rgba(52, 211, 153, 0.45);
    background: rgba(52, 211, 153, 0.08);
}
.sale-print-status[data-state="ok"] .sale-print-status-dot {
    background: #34d399;
}
.sale-print-status[data-state="err"] {
    border-color: rgba(248, 113, 113, 0.5);
    background: rgba(248, 113, 113, 0.1);
}
.sale-print-status[data-state="err"] .sale-print-status-dot {
    background: #f87171;
}
.sale-print-status-text {
    flex: 1;
    min-width: 0;
    color: var(--text);
}
@keyframes sale-print-pulse {
    0%, 100% { opacity: 0.45; transform: scale(0.92); }
    50% { opacity: 1; transform: scale(1); }
}
.receipt-pos-actions .btn[disabled],
.toolbar--sale-detail-print .btn[disabled] {
    opacity: 0.55;
    pointer-events: none;
}

.card-pro {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--elev), var(--neon-surface);
}
.card-head {
    padding: 1rem 1.15rem 0.35rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.card-title { margin: 0; font-size: 1rem; font-weight: 650; }
.card-desc { margin: 0.2rem 0 0; font-size: 0.82rem; }
.card-body { padding: 0.75rem 1.15rem 1.15rem; }

.cart-panel { position: sticky; top: 3.5rem; }

.empty-state {
    padding: 1.5rem 1rem;
    border: 1px dashed rgba(148, 163, 184, 0.25);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 0.92rem;
}
.empty-muted { border-style: solid; background: var(--empty-muted-bg); }

/* —— Halaman login: split-screen (hero + form) —— */
.login-body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg0);
}
.login-split {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
    width: 100%;
}
.login-theme-fab {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 100;
    width: 2.45rem;
    height: 2.45rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(10px);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.login-theme-fab:hover {
    color: var(--text);
    border-color: var(--input-focus-border);
}
.login-theme-fab .theme-icon {
    width: 1.1rem;
    height: 1.1rem;
}
.login-theme-fab .theme-icon svg {
    width: 1.1rem;
    height: 1.1rem;
}
html[data-theme="light"] .login-theme-fab .theme-icon-sun {
    color: #059669;
}
html[data-theme="dark"] .login-theme-fab .theme-icon-moon {
    color: #6ee7b7;
}
html[data-theme="light"] .login-theme-fab {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(148, 163, 184, 0.45);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
}

.login-hero {
    flex: 0 0 38%;
    max-width: 440px;
    position: relative;
    display: flex;
    align-items: stretch;
    color: #f8fafc;
    background:
        radial-gradient(900px 520px at 18% 12%, rgba(52, 211, 153, 0.28), transparent 55%),
        radial-gradient(720px 440px at 92% 78%, rgba(16, 185, 129, 0.2), transparent 52%),
        linear-gradient(165deg, #052e1f 0%, #065f46 42%, #022c22 100%);
}
.login-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 14px 14px;
    pointer-events: none;
}
.login-hero-inner {
    position: relative;
    z-index: 1;
    padding: 2.5rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}
.login-hero-brand { margin-bottom: 1.75rem; }
.login-hero-icon-wrap {
    margin-bottom: 1rem;
}
.login-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
}
.login-hero-icon svg {
    width: 1.45rem;
    height: 1.45rem;
}
.login-hero-icon-img {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: contain;
    border-radius: 14px;
    box-shadow: var(--neon-glow-soft);
    background: rgba(15, 23, 42, 0.55);
}
.login-hero-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(248, 250, 252, 0.85);
    margin-bottom: 0.65rem;
}
.login-hero-title {
    margin: 0 0 0.35rem;
    font-size: clamp(1.45rem, 2.5vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
}
.login-hero-sub {
    margin: 0 0 0.65rem;
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.95;
}
.login-hero-desc {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(248, 250, 252, 0.82);
    max-width: 34ch;
}
.login-hero-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.login-hero-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.login-hero-fico {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(125, 211, 252, 0.25);
    color: #bae6fd;
}
.login-hero-fico svg {
    width: 1.1rem;
    height: 1.1rem;
}
.login-hero-ftext {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.82rem;
    line-height: 1.35;
    color: rgba(248, 250, 252, 0.88);
}
.login-hero-ftext strong {
    font-size: 0.9rem;
    font-weight: 650;
    color: #fff;
}
.login-hero-ftext span:last-child {
    opacity: 0.88;
}
.login-hero-foot {
    margin: 2rem 0 0;
    font-size: 0.72rem;
    color: rgba(248, 250, 252, 0.55);
}

.login-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem 3rem;
    background:
        radial-gradient(900px 480px at 72% -8%, rgba(14, 165, 233, 0.09), transparent 55%),
        radial-gradient(700px 400px at 100% 100%, rgba(37, 99, 235, 0.07), transparent 50%),
        linear-gradient(180deg, #0c1220 0%, #070b12 100%);
}
.login-panel-inner {
    width: 100%;
    max-width: 400px;
}
.login-panel-brand {
    text-align: center;
    margin-bottom: 1.75rem;
}
.login-panel-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(255, 255, 255, 0.04);
    margin-bottom: 0.65rem;
}
.login-panel-logo-fallback {
    width: 64px;
    height: 64px;
    margin: 0 auto 0.65rem;
    border-radius: 16px;
    border: 1px solid rgba(56, 189, 248, 0.28);
    background: rgba(14, 165, 233, 0.1);
    color: #5eead4;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-panel-logo-fallback svg {
    width: 1.75rem;
    height: 1.75rem;
}
.login-panel-kicker {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.95);
    margin-bottom: 0.35rem;
}
.login-panel-store {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
}

.login-auth-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
}
.login-auth-icon {
    display: inline-flex;
    color: #34d399;
}
.login-auth-icon svg {
    width: 1rem;
    height: 1rem;
}
.login-auth-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6ee7b7;
}
.login-title {
    margin: 0 0 0.35rem;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
}
.login-sub {
    margin: 0 0 1.35rem;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.45;
}
.hint-login { margin-top: 1rem; font-size: 0.8rem; color: var(--muted); line-height: 1.45; }
.hint-login code { background: var(--panel2); padding: 0.1rem 0.35rem; border-radius: 4px; }

.login-form-stack {
    gap: 0.65rem;
}
.login-field {
    margin-top: 0.15rem;
}
.login-field-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.4rem;
}
.login-input-row {
    position: relative;
    display: flex;
    align-items: center;
}
.login-input-ico {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--muted);
    pointer-events: none;
    z-index: 1;
}
.login-input-ico svg {
    width: 1.1rem;
    height: 1.1rem;
}
.login-input-field {
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.55);
}
.login-pass-toggle {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}
.login-pass-toggle:hover {
    color: var(--text);
    background: rgba(148, 163, 184, 0.12);
}
.login-pass-toggle svg {
    width: 1.05rem;
    height: 1.05rem;
}
.login-pass-toggle .eye-off {
    display: none;
}
.login-pass-toggle.is-visible .eye-open {
    display: none;
}
.login-pass-toggle.is-visible .eye-off {
    display: inline-flex;
}

.login-remember {
    margin-top: 0.35rem;
    font-size: 0.88rem;
}

.login-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    color: #fff !important;
    background: linear-gradient(135deg, #34d399 0%, #059669 42%, #047857 100%);
    box-shadow:
        0 4px 24px rgba(16, 185, 129, 0.35),
        0 0 40px -8px rgba(16, 185, 129, 0.4);
}
.login-submit-btn--block {
    width: 100%;
}
.login-submit-btn:hover:not(:disabled) {
    filter: brightness(1.06);
    box-shadow:
        0 8px 32px rgba(16, 185, 129, 0.42),
        0 0 48px -6px rgba(16, 185, 129, 0.48);
}
.login-submit-ico {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
}

.login-panel-foot {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--muted);
}
.login-panel-foot-dot {
    margin: 0 0.35rem;
    opacity: 0.5;
}

/* Mobile lebar ≤767px: hanya form — sidebar disembunyikan. Tablet/desktop & tablet landscape: sidebar tetap */
@media (max-width: 767px) {
    .login-hero {
        display: none !important;
    }
    .login-split {
        flex-direction: column;
        min-height: 100vh;
    }
    .login-panel {
        flex: 1;
        padding-top: 2.35rem;
        padding-bottom: 2.75rem;
    }
}
@media (min-width: 768px) and (max-width: 960px) {
    .login-hero {
        flex: 0 0 34%;
        max-width: 360px;
        min-height: min(100vh, 920px);
    }
    .login-hero-inner {
        padding: 1.65rem 1.35rem 1.5rem;
    }
    .login-hero-features {
        gap: 0.75rem;
    }
}

html[data-theme="light"] .login-panel {
    background:
        radial-gradient(900px 480px at 70% -10%, rgba(16, 185, 129, 0.1), transparent 55%),
        radial-gradient(700px 400px at 100% 100%, rgba(34, 197, 94, 0.08), transparent 50%),
        linear-gradient(180deg, #f4f7fc 0%, #eef2f9 100%);
}
html[data-theme="light"] .login-input-field {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.12);
}
html[data-theme="light"] .login-hero {
    background:
        radial-gradient(820px 500px at 14% 12%, rgba(110, 231, 183, 0.42), transparent 55%),
        radial-gradient(640px 420px at 88% 82%, rgba(16, 185, 129, 0.34), transparent 52%),
        linear-gradient(165deg, #065f46 0%, #059669 42%, #064e3b 100%);
}
html[data-theme="light"] .login-hero-fico {
    color: #e0f2fe;
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.14);
}
html[data-theme="light"] .login-auth-icon,
html[data-theme="light"] .login-auth-label {
    color: #047857;
}
html[data-theme="light"] .login-panel-logo-fallback {
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
}
html[data-theme="light"] .login-submit-btn {
    background: linear-gradient(135deg, #34d399 0%, #059669 45%, #047857 100%);
    box-shadow:
        0 4px 22px rgba(16, 185, 129, 0.32),
        0 0 36px -10px rgba(5, 150, 105, 0.38);
}
html[data-theme="light"] .login-submit-btn:hover:not(:disabled) {
    box-shadow:
        0 8px 28px rgba(16, 185, 129, 0.38),
        0 0 44px -8px rgba(5, 150, 105, 0.42);
}

.stack { display: flex; flex-direction: column; gap: 0.35rem; }
.label { font-size: 0.8rem; color: var(--muted); margin-top: 0.5rem; }
.input, select.input, textarea.input {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text);
    font: inherit;
}
.input:focus, select.input:focus, textarea.input:focus {
    outline: none;
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 3px var(--input-ring);
}
.input-lg { font-size: 1.15rem; padding: 0.75rem 0.85rem; font-variant-numeric: tabular-nums; }

/* Login: `.input` memakai padding seragam — beri ruang kiri untuk ikon & kanan untuk mata */
.login-field .input.login-input-field {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    padding-left: 3.35rem;
    padding-right: 0.85rem;
    border-radius: 12px;
}
.login-input-row--pass .input.login-input-field {
    padding-right: 2.75rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--panel2);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.12s ease, transform 0.06s ease;
}
.btn:hover:not(:disabled) { filter: brightness(1.06); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary {
    background: var(--btn-primary-gradient);
    border-color: var(--btn-primary-border);
    color: var(--btn-on-solid);
    font-weight: 600;
    box-shadow: var(--neon-glow);
}
.btn-primary:hover:not(:disabled),
.btn-primary:focus-visible {
    filter: none;
    background: var(--btn-primary-gradient-hover);
    border-color: var(--btn-primary-border-hover);
    box-shadow: var(--btn-primary-shadow-hover);
}
/* Global a:hover mengalahkan warna teks — tautan tombol solid tetap kontras */
a.btn.btn-primary:hover:not(:disabled),
a.btn.btn-primary:focus-visible,
a.btn.btn-accent:hover:not(:disabled),
a.btn.btn-accent:focus-visible,
a.btn.btn-danger:hover:not(:disabled),
a.btn.btn-danger:focus-visible {
    color: var(--btn-on-solid);
}
.btn-accent {
    background: linear-gradient(180deg, #2dd4bf 0%, #0f766e 100%);
    border-color: rgba(13, 148, 136, 0.75);
    color: var(--btn-on-solid);
    font-weight: 650;
    box-shadow: 0 4px 22px rgba(13, 148, 136, 0.18), 0 0 36px -12px rgba(45, 212, 191, 0.12);
}
.btn-accent:hover:not(:disabled),
.btn-accent:focus-visible {
    filter: none;
    background: linear-gradient(180deg, #5eead4 0%, #115e59 100%);
    border-color: rgba(45, 212, 191, 0.95);
    box-shadow: 0 2px 18px rgba(13, 148, 136, 0.38), 0 0 36px -10px rgba(45, 212, 191, 0.2);
}
.btn-danger {
    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
    border-color: rgba(185, 28, 28, 0.85);
    color: var(--btn-on-solid);
    font-weight: 600;
}
.btn-danger:hover:not(:disabled),
.btn-danger:focus-visible {
    filter: none;
    background: linear-gradient(180deg, #f87171 0%, #991b1b 100%);
    box-shadow: 0 2px 14px rgba(248, 113, 113, 0.35);
}
.btn-danger-soft {
    background: rgba(254, 202, 202, 0.12);
    border-color: rgba(248, 113, 113, 0.42);
    color: #fecaca;
    text-decoration: none;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
}
.btn-danger-soft:hover:not(:disabled) {
    filter: none;
    background: rgba(254, 202, 202, 0.2);
    border-color: rgba(248, 113, 113, 0.55);
    color: #fff;
}
html[data-theme="light"] .btn-danger-soft {
    background: #fef2f2;
    border-color: rgba(185, 28, 28, 0.35);
    color: #b91c1c;
}
html[data-theme="light"] .btn-danger-soft:hover:not(:disabled) {
    background: #fee2e2;
    color: #991b1b;
}
.btn-ghost { background: transparent; }
.btn-sm { padding: 0.35rem 0.65rem; font-size: 0.85rem; min-height: 2.1rem; line-height: 1.1; }
.btn-xs { padding: 0.2rem 0.55rem; font-size: 0.78rem; min-height: 1.85rem; line-height: 1.1; }
.btn-block { width: 100%; }

/* Tombol aksi seragam: tinggi sama + ikon kecil konsisten */
.btn .btn-act-ico {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
    stroke-width: 2;
}
.btn-xs .btn-act-ico { width: 0.85rem; height: 0.85rem; }
/* Bungkus aksi tabel agar rata tengah & jarak konsisten */
.row-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.row-actions form { display: inline-flex; margin: 0; }
/* Varian aksi lembut berlatar warna (kontras di tema gelap & terang) */
.btn-soft-edit {
    background: rgba(59, 130, 246, 0.16);
    border-color: rgba(59, 130, 246, 0.42);
    color: #93c5fd;
    font-weight: 600;
}
.btn-soft-edit:hover:not(:disabled) { filter: none; background: rgba(59, 130, 246, 0.26); color: #fff; }
html[data-theme="light"] .btn-soft-edit { background: #eff6ff; border-color: rgba(37, 99, 235, 0.4); color: #1d4ed8; }
.btn-soft-print {
    background: rgba(45, 212, 191, 0.16);
    border-color: rgba(45, 212, 191, 0.42);
    color: #5eead4;
    font-weight: 600;
}
.btn-soft-print:hover:not(:disabled) { filter: none; background: rgba(45, 212, 191, 0.26); color: #fff; }
html[data-theme="light"] .btn-soft-print { background: #ecfdf5; border-color: rgba(13, 148, 136, 0.4); color: #0f766e; }
.btn-soft-view {
    background: rgba(168, 85, 247, 0.16);
    border-color: rgba(168, 85, 247, 0.42);
    color: #d8b4fe;
    font-weight: 600;
}
.btn-soft-view:hover:not(:disabled) { filter: none; background: rgba(168, 85, 247, 0.26); color: #fff; }
html[data-theme="light"] .btn-soft-view { background: #faf5ff; border-color: rgba(147, 51, 234, 0.4); color: #7e22ce; }
.btn-icon { min-width: 2rem; justify-content: center; }
.btn-checkout { 
    padding: 1rem 1.5rem; 
    font-size: 1.1rem; 
    font-weight: 700;
    margin-top: 0.5rem;
    border-radius: 10px;
}

.alert {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: 0.92rem;
    border: 1px solid transparent;
}
.alert-error { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.35); color: #fecaca; }
.alert-success { background: rgba(56, 189, 248, 0.1); border-color: rgba(56, 189, 248, 0.35); color: #bae6fd; }
.alert-warning { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.4); color: #fde68a; }
.alert-rich {
    background: rgba(56, 189, 248, 0.06);
    border-color: rgba(56, 189, 248, 0.28);
    color: var(--text);
}
.alert-rich strong { color: var(--text); }
.alert-rich a, .alert-success a { color: #5eead4; font-weight: 600; }
.alert-rich .receipt-link { color: #99f6e4 !important; text-decoration: underline; }

.grid-kpi { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }

/* Dashboard mobile: KPI dua kolom */
@media (max-width: 640px) {
    body[data-page="dashboard"] .grid-kpi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }
    body[data-page="dashboard"] .grid-kpi .kpi {
        padding: 0.65rem 0.55rem;
        min-width: 0;
    }
    body[data-page="dashboard"] .grid-kpi .kpi .val {
        font-size: 1.05rem;
        line-height: 1.2;
        word-break: break-word;
    }
    body[data-page="dashboard"] .grid-kpi .kpi .lbl {
        font-size: 0.66rem;
        line-height: 1.2;
    }
    body[data-page="dashboard"] .grid-kpi .kpi .muted {
        font-size: 0.62rem;
        line-height: 1.25;
    }
    body[data-page="dashboard"] .grid-kpi .ri-info-dot {
        flex-shrink: 0;
    }
}

@media (max-width: 767px) {
    body[data-page="dashboard"] .grid-kpi .kpi-dash-pay-mix {
        display: none !important;
    }
}

/* Dashboard: teaser menuju Insight toko (minimal, rapi mobile & desktop) */
.dash-insight-teaser {
    margin-bottom: 1.15rem;
    padding: 1.15rem 1.35rem;
    border: 1px solid var(--border);
    background: var(--panel);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, var(--elev), var(--neon-surface);
}
.dash-insight-teaser-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 1.25rem;
}
.dash-insight-teaser-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 14px;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.22);
    color: var(--accent2);
    flex-shrink: 0;
}
.dash-insight-svg {
    width: 1.3rem;
    height: 1.3rem;
}
.dash-insight-teaser-copy {
    flex: 1;
    min-width: min(100%, 280px);
    padding-top: 0.1rem;
}
.dash-insight-teaser-title {
    display: block;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    margin: 0 0 0.45rem;
    color: var(--text);
}
.dash-insight-teaser-desc {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--muted);
    max-width: 38rem;
}
.dash-insight-teaser-btn:hover,
.dash-insight-teaser-btn:focus-visible {
    color: var(--btn-on-solid);
}
@media (max-width: 520px) {
    .dash-insight-teaser {
        padding: 1rem 1.05rem;
    }
    .dash-insight-teaser-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }
    .dash-insight-teaser-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
    .dash-insight-teaser-btn {
        width: 100%;
        justify-content: center;
        align-self: stretch;
    }
}
html[data-theme="light"] .dash-insight-teaser {
    background: var(--panel);
    border-color: rgba(6, 182, 212, 0.2);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), var(--neon-surface);
}
html[data-theme="light"] .dash-insight-teaser-icon {
    background: rgba(6, 182, 212, 0.08);
    border-color: rgba(6, 182, 212, 0.22);
}
.kpi {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), var(--neon-surface);
}
.kpi-accent {
    border-color: rgba(56, 189, 248, 0.38);
    background: linear-gradient(145deg, rgba(56, 189, 248, 0.1), var(--panel));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), var(--neon-surface), var(--neon-glow-soft);
}
.kpi .val { font-size: 1.45rem; font-weight: 800; margin-top: 0.25rem; letter-spacing: -0.02em; }
.kpi .lbl { color: var(--muted); font-size: 0.84rem; }
.kpi-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}
.kpi-head .lbl { flex: 1; min-width: 0; }
.kpi-click { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.kpi-click:hover {
    border-color: rgba(56, 189, 248, 0.42);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28), var(--neon-glow-soft);
}
.kpi-click:focus-visible { outline: 2px solid rgba(56, 189, 248, 0.7); outline-offset: 2px; }
.kpi-sub { font-size: 0.78rem; line-height: 1.35; margin-top: 0.35rem; }
.dash-help-body p { margin: 0 0 0.75rem; line-height: 1.55; color: var(--text); }
.dash-help-body p:last-child { margin-bottom: 0; }
.dash-help-actions { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.ri-kpi-grid .kpi .lbl {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.ri-board {
    display: grid;
    gap: 1rem;
    margin-top: 0.25rem;
}
.ri-section .card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.ri-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.9rem;
}
.ri-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(160deg, rgba(148, 163, 184, 0.05), transparent 48%), var(--panel2);
    padding: 0.9rem;
}
.ri-card h3 {
    margin: 0 0 0.45rem;
    font-size: 0.96rem;
}
.ri-card .ri-big {
    margin: 0.1rem 0 0.2rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.ri-info-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    background: rgba(148, 163, 184, 0.08);
    padding: 0;
}
.ri-pl-section .card-body {
    padding-top: 0.5rem;
}
.ri-pl-grid {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 32rem;
    margin-bottom: 1rem;
}
.ri-pl-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}
.ri-pl-row--sub {
    font-weight: 600;
    border-bottom-width: 2px;
}
.ri-pl-row--deduct .ri-pl-amt {
    color: var(--danger, #f87171);
}
.ri-pl-row--muted {
    opacity: 0.85;
    font-size: 0.92rem;
}
.ri-pl-subtitle {
    margin: 0.5rem 0 0.65rem;
    font-size: 0.95rem;
    font-weight: 600;
}
.ri-pl-exp-table-wrap {
    overflow-x: auto;
    margin-bottom: 1rem;
}
.ri-pl-exp-table {
    font-size: 0.9rem;
}
.ri-pl-net {
    margin-top: 0.5rem;
    padding: 0.85rem 1rem;
    border-radius: 0.5rem;
    background: rgba(52, 211, 153, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.22);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.ri-pl-net-lbl {
    font-size: 0.88rem;
    color: var(--muted);
}
.ri-pl-net-val {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--accent2, #34d399);
}
.ri-pl-net-hint {
    margin: 0;
    font-size: 0.82rem;
}
html[data-theme="light"] .ri-pl-net {
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.25);
}
.ri-info-dot:focus-visible {
    outline: 2px solid var(--accent2);
    outline-offset: 1px;
}
html[data-theme="light"] .ri-card {
    background: linear-gradient(160deg, rgba(51, 65, 85, 0.03), transparent 48%), #fff;
}
html[data-theme="light"] .ri-info-dot {
    border-color: rgba(71, 85, 105, 0.35);
    background: rgba(71, 85, 105, 0.07);
}

.dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin-bottom: 1.5rem; align-items: start; }
.dash-grid.dash-grid--cashier-slim { grid-template-columns: 1fr; }
@media (max-width: 1024px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-grid-analytics {
    grid-template-columns: 1.4fr 1fr;
    margin-top: -0.5rem;
}
@media (max-width: 1024px) { .dash-grid-analytics { grid-template-columns: 1fr; } }

.chart {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
    height: 190px;
    padding: 0.35rem 0 1.35rem;
}
.chart-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.22rem;
    min-width: 0;
    min-height: 0;
    position: relative;
}
.chart-bar-track {
    flex: 1 1 auto;
    width: 100%;
    max-width: 26px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 136px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(148, 163, 184, 0.14), rgba(148, 163, 184, 0.03));
    padding: 2px;
}
.chart-bar {
    width: 100%;
    max-width: 22px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--accent2), var(--accent-dim));
    min-height: 4px;
    opacity: 0.96;
    box-shadow: 0 10px 22px rgba(2, 132, 199, 0.28);
    transition: filter 0.15s ease, transform 0.15s ease;
}
.chart-bar-wrap:hover .chart-bar {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.chart-val {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--muted);
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.14s ease, transform 0.14s ease;
    white-space: nowrap;
}
.chart-bar-wrap:hover .chart-val {
    opacity: 1;
    transform: translateY(0);
}
.chart-lbl {
    font-size: 0.66rem;
    color: var(--muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.chart-canvas-wrap {
    position: relative;
    height: clamp(260px, 42vh, 420px);
}
.chart-canvas-wrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}
.chart-canvas-wrap-sm {
    height: clamp(220px, 34vh, 320px);
}

.quick-actions { display: grid; gap: 0.5rem; }
.qa-btn {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
    text-decoration: none;
    color: var(--text);
    transition: background 0.12s ease, bordering 0.12s ease;
}
.qa-btn:hover { background: rgba(56, 189, 248, 0.08); border-color: rgba(56, 189, 248, 0.25); }
.qa-btn.secondary { opacity: 0.95; }
.qa-btn-icon {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    margin-top: 0.08rem;
    color: var(--accent);
}
.qa-btn-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}
.qa-btn-body strong { font-weight: 650; line-height: 1.25; }
.qa-btn-sub { display: block; font-size: 0.82rem; line-height: 1.35; }

.section-title { font-size: 1rem; margin: 1.5rem 0 0.65rem; font-weight: 650; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), var(--neon-surface); }
.table-rounded { border-radius: var(--radius); }
table.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table th, .table td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th {
    background: rgba(15, 23, 42, 0.85);
    color: #94a3b8;
    font-weight: 650;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.table-pro tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 0.86em; }
.strong { font-weight: 650; }

.toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 1rem; }
.toolbar form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

.cart-lines { margin: 0.25rem 0 0.75rem; max-height: min(48vh, 420px); overflow-y: auto; padding-right: 0.25rem; }

.cart-line-pro {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
.cart-line-main { flex: 1; min-width: 0; }
.cart-line-name { font-weight: 650; }
.cart-line-meta { font-size: 0.8rem; margin-top: 0.15rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.cart-line-total { font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 0.35rem; color: var(--accent2); }
.inline-qty-form { display: inline-flex; align-items: center; gap: 0.25rem; vertical-align: middle; }
.qty-input { width: 4.2rem; padding: 0.25rem 0.35rem; font-size: 0.85rem; }

.totals-block { margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.total-row { display: flex; justify-content: space-between; margin: 0.35rem 0; font-size: 0.9rem; color: var(--muted); }
.total-row strong { color: var(--text); font-variant-numeric: tabular-nums; }
.total-grand { font-size: 1.05rem; margin-top: 0.75rem; color: var(--text); }
.total-grand strong { font-size: 1.15rem; color: var(--accent2); }
.checkout-form .label { margin-top: 0.65rem; }

.pos-full .sidebar { display: none; }
.pos-full .app-shell .main { width: 100%; margin-left: 0; }
.pos-full .content { max-width: none; padding-left: 1rem; padding-right: 1rem; }

/* Layar penuh: header Kasir/Pembelian & toolbar sejajar kiri–kanan layar (bukan kotak 1400px di tengah) */
.pos-full .pos-topbar-inner {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}
body.pos-full[data-page="pos"] .pos-topbar,
body.pos-full[data-page="purchase"] .pos-topbar,
body.pos-full[data-page="stock_add"] .pos-topbar {
    margin: -0.75rem -1rem 1rem;
    padding: 0.55rem 1rem;
}

/* Alur struk dari POS: fokus cetak, tanpa sidebar/topbar */
.pos-receipt-flow .sidebar,
.pos-receipt-flow .topbar { display: none; }
.pos-receipt-flow .app-shell .main { width: 100%; margin-left: 0; }
.pos-receipt-flow .content {
    max-width: 560px;
    margin: 0 auto;
    padding: 1rem 1rem 2rem;
}

.muted { color: var(--muted); }
.badge {
    display: inline-block;
    padding: 0.12rem 0.45rem;
    border-radius: 6px;
    font-size: 0.72rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    text-transform: capitalize;
}
.badge-warn { border-color: rgba(244, 67, 54, 0.55); color: #F44336; background: rgba(244, 67, 54, 0.14); font-weight: 600; }
html[data-theme="light"] .badge-warn { border-color: rgba(244, 67, 54, 0.6); color: #F44336; background: rgba(244, 67, 54, 0.1); }
.badge-info { border-color: rgba(56, 189, 248, 0.45); color: var(--accent2); }
html[data-theme="light"] .badge-info {
    border-color: rgba(14, 165, 233, 0.45);
    color: #0369a1;
}

.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.form-actions { margin-top: 1.25rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.hint-field { font-size: 0.78rem; color: var(--muted); margin: 0.35rem 0 0; }

.dl-readonly { display: grid; grid-template-columns: 140px 1fr; gap: 0.35rem 0.75rem; font-size: 0.9rem; margin: 0; }
.dl-readonly dt { color: var(--muted); margin: 0; }
.dl-readonly dd { margin: 0; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Receipt / print */
.receipt {
    max-width: 400px;
    margin: 0 auto;
    padding: 1rem 1.15rem 2rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.92rem;
}
.receipt-header { text-align: center; margin-bottom: 0.85rem; }
.receipt-store { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; }
.receipt-tagline { font-weight: 650; font-size: 0.86rem; margin-top: 0.12rem; margin-bottom: 0.2rem; }
.receipt-addr { color: var(--muted); font-size: 0.82rem; }
.receipt-meta { font-size: 0.85rem; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); padding: 0.65rem 0; margin-bottom: 0.65rem; }
.receipt-meta > div { margin: 0.2rem 0; }
.receipt-items { width: 100%; border-collapse: collapse; margin-bottom: 0.5rem; }
.receipt-item-name { font-weight: 650; padding-top: 0.5rem; }
.receipt-sub { font-size: 0.82rem; padding-bottom: 0.35rem; }
.receipt-num { text-align: right; font-variant-numeric: tabular-nums; }
.receipt-totals { border-top: 1px solid var(--border); padding-top: 0.5rem; font-size: 0.88rem; }
.receipt-totals .rrow { display: flex; justify-content: space-between; margin: 0.25rem 0; }
.receipt-totals .rgrand { font-weight: 800; font-size: 1rem; margin-top: 0.35rem; }
.receipt-totals .receipt-est { font-size: 0.82rem; color: var(--muted, #64748b); }
.receipt-totals .receipt-est-profit { font-weight: 650; color: var(--text); margin-top: 0.15rem; }
.receipt-profit-note { font-size: 0.72rem; margin: 0.35rem 0 0; line-height: 1.35; }
.receipt-ref { font-size: 0.8rem; }
.receipt-thanks { text-align: center; margin-top: 1rem; color: var(--muted); font-size: 0.85rem; }

/* Nota faktur bergrid (sale_detail) */
.receipt.receipt--invoice-grid {
    max-width: 720px;
    font-size: 0.88rem;
}
.receipt-inv-head {
    display: grid;
    grid-template-columns: 56px 1fr minmax(150px, 220px);
    gap: 0.5rem 0.75rem;
    align-items: start;
    margin-bottom: 0.5rem;
    padding-bottom: 0.55rem;
    border-bottom: 2px solid var(--border);
}
.receipt-inv-logo-cell { min-height: 1px; }
.receipt-inv-logo-wrap { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; background: #fff; }
.receipt-inv-logo-img { width: 100%; height: 100%; object-fit: cover; }
.receipt-inv-center { min-width: 0; }
.receipt-inv-store { font-weight: 800; font-size: 1.08rem; letter-spacing: -0.02em; line-height: 1.2; }
.receipt-inv-tagline { font-size: 0.8rem; font-weight: 650; margin-top: 0.12rem; }
.receipt-inv-addr { font-size: 0.78rem; color: var(--muted); margin-top: 0.18rem; line-height: 1.4; }
.receipt-inv-side {
    font-size: 0.8rem;
    border: 1px solid var(--border);
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    align-self: start;
}
.receipt-inv-side-row { display: flex; justify-content: space-between; gap: 0.5rem; margin: 0.12rem 0; line-height: 1.3; }
.receipt-inv-side-row--cust { align-items: flex-start; }
.receipt-inv-side-lbl { color: var(--muted); font-weight: 700; flex-shrink: 0; }
.receipt-inv-side-val { text-align: right; font-weight: 650; word-break: break-word; }
.receipt-inv-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.45rem 0 0.65rem;
    font-size: 0.8rem;
}
.receipt-inv-table th,
.receipt-inv-table td {
    border: 1px solid var(--border);
    padding: 0.3rem 0.38rem;
    vertical-align: top;
}
.receipt-inv-table thead th {
    background: rgba(128, 128, 128, 0.1);
    font-weight: 700;
    text-align: center;
}
.receipt-inv-col-no { width: 2.1rem; text-align: center; font-variant-numeric: tabular-nums; }
.receipt-inv-col-qty { min-width: 7.5rem; width: 22%; max-width: 11rem; text-align: right; white-space: normal; line-height: 1.25; font-variant-numeric: tabular-nums; }
.receipt-inv-col-name { text-align: left; word-break: break-word; }
.receipt-inv-col-price,
.receipt-inv-col-sum { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.receipt-inv-line--empty td { height: 1.4rem; }
.receipt-inv-debts {
    margin-top: 0.55rem;
    font-size: 0.78rem;
}
.receipt-inv-debts-title {
    font-weight: 800;
    margin-bottom: 0.28rem;
    letter-spacing: 0.01em;
}
.receipt-inv-debts-table {
    width: 100%;
    border-collapse: collapse;
}
.receipt-inv-debts-table th,
.receipt-inv-debts-table td {
    border: 1px solid var(--border);
    padding: 0.22rem 0.35rem;
    vertical-align: top;
}
.receipt-inv-debts-table thead th {
    font-weight: 800;
    text-align: left;
    background: rgba(0, 0, 0, 0.03);
}
.receipt-inv-debts-col-date { width: 4.5rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.receipt-inv-debts-col-inv { word-break: break-word; }
.receipt-inv-debts-col-amt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 650; }
.receipt-inv-debts-total th,
.receipt-inv-debts-total td {
    font-weight: 800;
    text-align: right;
}
.receipt-inv-debts-total th { text-align: left; }
.receipt-inv-debts-row--current td { background: rgba(255, 193, 7, 0.12); }
.receipt-inv-debts-tag {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    vertical-align: middle;
}
.receipt-inv-bottom {
    display: grid;
    grid-template-columns: 1fr minmax(200px, 280px);
    gap: 0.65rem;
    align-items: start;
}
.receipt-inv-notice {
    border: 1px solid var(--border);
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    font-size: 0.78rem;
    line-height: 1.45;
}
.receipt-inv-notice-title { font-weight: 800; margin-bottom: 0.28rem; letter-spacing: 0.02em; }
.receipt-inv-notice-text { margin: 0; }
.receipt-inv-notice-custom {
    margin: 0;
    line-height: 1.5;
    font-size: inherit;
    text-align: left;
    word-break: break-word;
}
.receipt-inv-notice-footer { margin: 0.4rem 0 0; }
.receipt-inv-sumtbl { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.receipt-inv-sumtbl th,
.receipt-inv-sumtbl td {
    border: 1px solid var(--border);
    padding: 0.3rem 0.45rem;
}
.receipt-inv-sumtbl th {
    text-align: left;
    font-weight: 650;
    width: 44%;
    background: rgba(128, 128, 128, 0.08);
}
.receipt-inv-sumtbl td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.receipt-inv-sum-grand th,
.receipt-inv-sum-grand td { font-size: 0.95rem; font-weight: 800; }
.receipt-inv-pay-extra {
    font-size: 0.78rem;
    margin-top: 0.45rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    color: var(--muted);
}
.receipt-inv-pay-line { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.receipt-inv-thanks { text-align: center; margin-top: 0.65rem; color: var(--muted); font-size: 0.84rem; }

.toolbar.toolbar--sale-detail-print {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.toolbar--sale-detail-print .btn--sale-print,
.receipt-pos-actions .btn--sale-print {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}
.toolbar--sale-detail-print .btn--sale-print .btn-action-icon,
.receipt-pos-actions .btn--sale-print .btn-action-icon {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
}

/* Struk ringkas / thermal (sale_detail) */
.receipt.receipt--struk {
    max-width: 420px;
    margin: 0.75rem auto 1.25rem;
    padding: 0.5rem 0.65rem;
    font-size: 0.82rem;
    line-height: 1.35;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}
.receipt-sk-brand { text-align: center; }
.receipt-sk-logo-wrap {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.35rem;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}
.receipt-sk-logo { width: 100%; height: 100%; object-fit: cover; }
.receipt-sk-store { font-weight: 650; font-size: 0.88rem; }
.receipt-sk-tagline { font-size: 0.76rem; font-weight: 500; margin-top: 0.12rem; }
.receipt-sk-addr { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }
.receipt-sk-rule { border: 0; border-top: 1px dashed var(--border); margin: 0.4rem 0; }
.receipt-sk-meta { font-size: 0.78rem; }
.receipt-sk-meta-row { display: flex; justify-content: space-between; gap: 0.5rem; margin: 0.15rem 0; align-items: baseline; }
.receipt-sk-meta-lbl { color: var(--muted); font-weight: 500; flex-shrink: 0; }
.receipt-sk-meta-val { font-weight: 600; text-align: right; word-break: break-word; }
.receipt-sk-items { width: 100%; border-collapse: collapse; font-size: 0.74rem; table-layout: fixed; }
.receipt-sk-item-row td { padding: 0.2rem 0; vertical-align: top; font-variant-numeric: tabular-nums; }
.receipt-sk-item-detail {
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.25;
    word-break: break-word;
    padding-right: 0.35rem;
}
.receipt-sk-item-name { font-weight: 600; font-size: 0.78rem; padding: 0.35rem 0 0.08rem; vertical-align: top; }
.receipt-sk-item-line td { padding: 0 0 0.35rem; vertical-align: top; font-variant-numeric: tabular-nums; }
.receipt-sk-item-qty { color: var(--muted); font-size: 0.74rem; width: 58%; }
.receipt-sk-item-sum { text-align: right; font-weight: 500; white-space: nowrap; width: 38%; }
.receipt-sk-totals { font-size: 0.78rem; margin-top: 0.2rem; }
.receipt-sk-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0.14rem 0;
    font-variant-numeric: tabular-nums;
}
.receipt-sk-total-row span:first-child { flex: 1; min-width: 0; }
.receipt-sk-total-row span:last-child { text-align: right; flex-shrink: 0; white-space: nowrap; }
.receipt-sk-total-row--grand {
    font-weight: 700;
    font-size: 0.82rem;
    margin-top: 0.3rem;
    padding-top: 0.28rem;
    border-top: 1px solid var(--border);
}
.receipt-sk-total-row--pay {
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--muted);
}
.receipt-sk-payments { display: none !important; }
.receipt-sk-pay-line { display: flex; justify-content: space-between; gap: 0.35rem; margin: 0.1rem 0; font-size: 0.74rem; }
.receipt-sk-debts { margin-top: 0.45rem; font-size: 0.74rem; }
.receipt-sk-debts-title { font-weight: 800; margin-bottom: 0.2rem; }
.receipt-sk-debts-tbl { width: 100%; border-collapse: collapse; }
.receipt-sk-debts-tbl td {
    padding: 0.12rem 0;
    vertical-align: top;
    border-bottom: 1px dotted var(--border);
    font-variant-numeric: tabular-nums;
}
.receipt-sk-debts-date { white-space: nowrap; width: 22%; }
.receipt-sk-debts-inv { word-break: break-word; }
.receipt-sk-debts-amt { text-align: right; white-space: nowrap; }
.receipt-sk-debts-tag { font-size: 0.7rem; color: var(--muted); }
.receipt-sk-debts-total { font-weight: 800; margin-top: 0.25rem; text-align: right; }
.receipt-sk-footer { text-align: center; margin-top: 0.65rem; font-size: 0.78rem; color: var(--muted); white-space: pre-wrap; }
.receipt-sk-settle { margin-top: 0.45rem; font-size: 0.8rem; }

@media screen {
    body.sale-detail-page.sale-detail-screen-primary-faktur .receipt--struk-only,
    .pos-receipt-scope[data-screen-primary="faktur"] .receipt--struk-only,
    .sale-receipt-scope[data-screen-primary="faktur"] .receipt--struk-only {
        display: none !important;
    }
    body.sale-detail-page.sale-detail-screen-primary-struk .receipt--faktur-only,
    .pos-receipt-scope[data-screen-primary="struk"] .receipt--faktur-only,
    .sale-receipt-scope[data-screen-primary="struk"] .receipt--faktur-only {
        display: none !important;
    }
}
@media (max-width: 600px) {
    .receipt-inv-head { grid-template-columns: 48px 1fr; }
    .receipt-inv-side { grid-column: 1 / -1; }
    .receipt-inv-bottom { grid-template-columns: 1fr; }
}

@media print {
    @page {
        margin: 8mm;
        background: #fff;
    }
    html,
    body,
    body.app-body,
    .app-shell,
    .main,
    .content {
        background: #fff !important;
        background-color: #fff !important;
        background-image: none !important;
        color: #000 !important;
        min-height: 0 !important;
        height: auto !important;
        box-shadow: none !important;
    }
    body { background: #fff; color: #000; }
    body.sale-detail-page * {
        box-shadow: none !important;
    }
    body.sale-detail-page.printing-struk *,
    body.sale-detail-page.printing-faktur * {
        visibility: hidden;
    }
    body.sale-detail-page.printing-struk .sale-receipt-bundle,
    body.sale-detail-page.printing-struk #receipt-struk,
    body.sale-detail-page.printing-struk #receipt-struk *,
    body.sale-detail-page.printing-faktur .sale-receipt-bundle,
    body.sale-detail-page.printing-faktur #receipt-faktur,
    body.sale-detail-page.printing-faktur #receipt-faktur * {
        visibility: visible;
    }
    body.sale-detail-page.printing-struk .sale-receipt-bundle,
    body.sale-detail-page.printing-struk #receipt-struk,
    body.sale-detail-page.printing-faktur .sale-receipt-bundle,
    body.sale-detail-page.printing-faktur #receipt-faktur {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0.3cm 0.4cm !important;
        background: #fff !important;
        border: none !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }
    body.sale-detail-page.printing-struk .receipt--faktur-only,
    body.sale-detail-page.printing-faktur .receipt--struk-only {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: hidden !important;
    }
    body.sale-detail-page .sale-receipt-bundle,
    body.sale-detail-page .sale-receipt-preview-wrap {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.printing-from-pos #pos-receipt-overlay {
        display: block !important;
    }
    body.printing-from-pos * {
        visibility: hidden;
    }
    body.printing-from-pos #pos-receipt-overlay,
    body.printing-from-pos #pos-receipt-overlay * {
        visibility: visible;
    }
    body.printing-from-pos #pos-receipt-overlay {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        background: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.printing-from-pos #pos-receipt-overlay .pos-modal-head,
    body.printing-from-pos #pos-receipt-overlay .receipt-pos-actions,
    body.printing-from-pos #pos-receipt-overlay .sale-print-status,
    body.printing-from-pos #pos-receipt-overlay .receipt-bt-printer-hint {
        display: none !important;
        visibility: hidden !important;
    }
    body.printing-from-pos #pos-receipt-body,
    body.printing-from-pos #pos-receipt-body .sale-receipt-bundle,
    body.printing-from-pos #pos-receipt-body .receipt,
    body.printing-from-pos #pos-receipt-body .receipt * {
        visibility: visible;
    }
    body.printing-from-pos.printing-faktur .receipt--struk-only,
    body.printing-from-pos.printing-struk .receipt--faktur-only,
    body.printing-from-pos.printing-struk-no-kop .receipt--faktur-only {
        display: none !important;
        visibility: hidden !important;
    }
    body.printing-from-pos.printing-faktur .receipt--faktur-only,
    body.printing-from-pos.printing-struk .receipt--struk-only,
    body.printing-from-pos.printing-struk-no-kop .receipt--struk-only {
        display: block !important;
        visibility: visible !important;
    }
    .no-print,
    .sidebar,
    .topbar,
    .pos-topbar,
    .toolbar,
    .footer-scripts,
    .mobile-bottom-nav,
    .nav-backdrop,
    .sale-detail-preview-hint,
    .sale-print-status,
    .sale-receipt-preview-hint { display: none !important; visibility: hidden !important; }
    .app-shell { display: block; }
    .main { display: block; margin: 0 !important; padding: 0 !important; }
    .content { padding: 0 !important; max-width: none !important; margin: 0 !important; }
    .receipt {
        border: none;
        border-radius: 0;
        box-shadow: none;
        max-width: 80mm;
        font-size: 11pt;
        color: #000;
        background: #fff;
    }
    .receipt.receipt--invoice-grid {
        max-width: none;
        width: 100%;
        padding: 0.4cm 0.5cm;
        font-size: 10pt;
    }
    .receipt--invoice-grid .receipt-inv-meta-screen,
    .receipt--invoice-grid .receipt-inv-settle.no-print,
    .receipt--invoice-grid .receipt-inv-pay-extra { display: none !important; }
    .receipt--invoice-grid .receipt-inv-head,
    .receipt--invoice-grid .receipt-inv-table th,
    .receipt--invoice-grid .receipt-inv-table td,
    .receipt--invoice-grid .receipt-inv-debts-table th,
    .receipt--invoice-grid .receipt-inv-debts-table td,
    .receipt--invoice-grid .receipt-inv-side,
    .receipt--invoice-grid .receipt-inv-notice,
    .receipt--invoice-grid .receipt-inv-sumtbl th,
    .receipt--invoice-grid .receipt-inv-sumtbl td {
        border-color: #000 !important;
    }
    .receipt--invoice-grid .receipt-inv-addr,
    .receipt--invoice-grid .receipt-inv-side-lbl,
    .receipt--invoice-grid .receipt-inv-pay-extra { color: #000 !important; }
    /* sale_detail: satu format cetak per job */
    body.sale-detail-page.printing-faktur .receipt--struk-only,
    body.sale-detail-page.printing-struk .receipt--faktur-only,
    body.sale-detail-page.printing-struk-no-kop .receipt--faktur-only { display: none !important; }
    body.sale-detail-page.sale-detail-default-print-faktur:not(.printing-struk):not(.printing-struk-no-kop) .receipt--struk-only { display: none !important; }
    body.sale-detail-page.sale-detail-default-print-struk:not(.printing-faktur) .receipt--faktur-only { display: none !important; }
    body.sale-detail-page.sale-detail-default-print-faktur:not(.printing-struk):not(.printing-struk-no-kop) .receipt--faktur-only,
    body.sale-detail-page.sale-detail-default-print-struk:not(.printing-faktur) .receipt--struk-only { display: block !important; }
    body.sale-detail-page.printing-faktur .receipt--faktur-only,
    body.sale-detail-page.printing-struk .receipt--struk-only,
    body.sale-detail-page.printing-struk-no-kop .receipt--struk-only { display: block !important; }
    body.sale-detail-page.printing-struk-no-kop .receipt-sk-brand,
    body.printing-from-pos.printing-struk-no-kop .receipt-sk-brand { display: none !important; }
    .receipt.receipt--struk {
        max-width: 80mm !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0.3cm 0.4cm !important;
        font-size: 10pt !important;
        border: none !important;
        border-radius: 0 !important;
    }
    body.sale-detail-page .receipt--struk-only .receipt-sk-meta-screen,
    body.sale-detail-page .receipt--struk-only .receipt-sk-settle.no-print { display: none !important; }
    /* Struk thermal: semua teks hitam (override .muted, .badge, tema) */
    .receipt,
    .receipt * {
        color: #000 !important;
    }
    .receipt .badge,
    .receipt .badge-warn,
    .receipt .badge-info {
        background: transparent !important;
        border-color: #000 !important;
    }
}

@media (max-width: 960px) {
    .main {
        margin-left: 0;
    }
    .nav-drawer-toggle {
        display: inline-flex;
    }
    body.pos-full .nav-drawer-toggle,
    body.pos-receipt-flow .nav-drawer-toggle {
        display: none !important;
    }

    .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 390;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }
    body.nav-drawer-open .nav-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    body.pos-full .nav-backdrop,
    body.pos-receipt-flow .nav-backdrop {
        display: none !important;
    }

    /* Drawer mengganti sidebar baris (hindari store-pill meregang vertikal aneh) */
    #app-sidebar.sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(292px, 88vw);
        max-width: 100%;
        z-index: 400;
        flex-direction: column;
        align-items: stretch;
        border-right: 1px solid var(--border);
        box-shadow: none;
        transform: translateX(-100%);
        transition: transform 0.22s ease, box-shadow 0.22s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: env(safe-area-inset-bottom, 0);
        padding-top: env(safe-area-inset-top, 0);
        visibility: visible;
    }
    body:not(.nav-drawer-open) #app-sidebar.sidebar {
        transform: translateX(-100%);
    }
    body.nav-drawer-open #app-sidebar.sidebar,
    #app-sidebar.sidebar.sidebar-drawer-open {
        display: flex !important;
        visibility: visible !important;
        transform: translateX(0) !important;
        box-shadow: var(--elev);
        z-index: 600;
        pointer-events: auto !important;
    }
    body.nav-drawer-open #app-sidebar.sidebar a,
    body.nav-drawer-open #app-sidebar.sidebar button,
    body.nav-drawer-open #app-sidebar.sidebar select {
        pointer-events: auto;
        touch-action: manipulation;
    }
    body.nav-drawer-open .nav-backdrop {
        z-index: 590;
        pointer-events: auto !important;
        cursor: pointer;
    }
    body.nav-drawer-open .app-shell .main {
        pointer-events: auto;
    }
    /* Drawer: store pill penuh lebar */
    .store-pill {
        align-self: stretch;
        max-width: none;
    }
    .sidebar-outlet-wrap {
        align-self: stretch;
    }
    .sidebar-outlet-pill {
        max-width: none;
    }

    .app-shell { flex-direction: column; }
    .main {
        width: 100%;
        flex: 1;
        min-height: 0;
    }
    .pos-layout { grid-template-columns: 1fr; }
    .pos-products-panel { order: 1; }
    .pos-cart { order: 2; }
    .cart-panel { position: static; }
    .content { max-width: none; }

    /* Topbar ringkas: burger | judul+subjudul | tema (kanan atas); tanpa ikon user */
    .topbar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.65rem 0.75rem;
        padding-top: max(0.75rem, env(safe-area-inset-top));
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
    .nav-drawer-toggle {
        position: relative;
        z-index: 2;
    }
    .nav-drawer-toggle {
        grid-column: 1;
        grid-row: 1;
    }
    .topbar-titles {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }
    .topbar-aside {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        align-self: center;
    }
    .topbar .top-user-menu-wrap {
        display: none !important;
    }
    .page-title {
        font-size: 1.12rem;
        line-height: 1.2;
    }
    .page-subtitle {
        margin-top: 0.1rem;
        font-size: 0.78rem;
        line-height: 1.25;
    }

    /* Drawer: akun digabung di menu navigasi */
    .sidebar-foot {
        display: none !important;
    }
    .nav-drawer-account {
        display: flex;
    }

    body[data-page="pos"] .pos-topbar-inner {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.45rem 0.5rem;
        align-items: center;
    }
    body[data-page="pos"] .pos-topbar-inner > .nav-drawer-toggle {
        grid-column: 1;
        grid-row: 1;
    }
    body[data-page="pos"] .pos-topbar-inner > .pos-brand {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
    }
    body[data-page="pos"] .pos-topbar-inner > .pos-brand:first-child {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    body[data-page="pos"] .pos-topbar-inner > .pos-topbar-actions {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-left: 0;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem;
    }
    body[data-page="pos"] .pos-topbar-actions .btn-sm {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* Pembelian / tambah stok: topbar & menu 2 tombol (sama POS) */
    body[data-page="purchase"] .pos-topbar-inner,
    body[data-page="stock_add"] .pos-topbar-inner {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.45rem 0.5rem;
        align-items: center;
    }
    body[data-page="purchase"] .pos-topbar-inner > .nav-drawer-toggle,
    body[data-page="stock_add"] .pos-topbar-inner > .nav-drawer-toggle {
        grid-column: 1;
        grid-row: 1;
    }
    body[data-page="purchase"] .pos-topbar-inner > .pos-brand,
    body[data-page="stock_add"] .pos-topbar-inner > .pos-brand {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
    }
    body[data-page="purchase"] .pos-topbar-inner > .pos-brand:first-child,
    body[data-page="stock_add"] .pos-topbar-inner > .pos-brand:first-child {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    body[data-page="purchase"] .pos-topbar-inner > .pos-topbar-actions,
    body[data-page="stock_add"] .pos-topbar-inner > .pos-topbar-actions {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-left: 0;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem;
    }
    body[data-page="purchase"] .pos-topbar-actions .btn-sm,
    body[data-page="stock_add"] .pos-topbar-actions .btn-sm {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    body[data-page="pos"] .pos-topbar-inner,
    body[data-page="purchase"] .pos-topbar-inner,
    body[data-page="stock_add"] .pos-topbar-inner {
        position: relative;
    }
    body[data-page="pos"] .pos-topbar-inner > .pos-live-clock,
    body[data-page="purchase"] .pos-topbar-inner > .pos-live-clock,
    body[data-page="stock_add"] .pos-topbar-inner > .pos-live-clock {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: center;
        margin-left: 0;
        font-size: 0.75rem;
    }
    body[data-page="pos"] .pos-topbar-inner > .pos-brand,
    body[data-page="purchase"] .pos-topbar-inner > .pos-brand,
    body[data-page="stock_add"] .pos-topbar-inner > .pos-brand {
        font-size: 0.72rem;
        letter-spacing: 0.04em;
        line-height: 1.2;
        padding-right: 4.5rem;
    }
    body[data-page="pos"] .pos-layout,
    body[data-page="purchase"] .pos-layout,
    body[data-page="stock_add"] .pos-layout {
        grid-template-columns: 1fr;
    }
    body[data-page="pos"] #pos-search-btn,
    body[data-page="pos"] #pos-scan-btn,
    body[data-page="purchase"] #pur-search-btn,
    body[data-page="purchase"] #pur-scan-btn,
    body[data-page="stock_add"] #stkadd-search-btn,
    body[data-page="stock_add"] #stkadd-scan-btn {
        display: inline-flex;
    }
    body[data-page="pos"] .pos-product-grid,
    body[data-page="purchase"] .pos-product-grid,
    body[data-page="stock_add"] .pos-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.45rem;
    }
    body[data-page="pos"] .pos-products-panel,
    body[data-page="pos"] .pos-product-grid {
        width: 100%;
        min-width: 0;
    }
    body[data-page="pos"] .pos-product-card-media,
    body[data-page="purchase"] .pos-product-card-media,
    body[data-page="stock_add"] .pos-product-card-media {
        font-size: 1.15rem;
    }
    body[data-page="pos"] .pos-product-card-body,
    body[data-page="purchase"] .pos-product-card-body,
    body[data-page="stock_add"] .pos-product-card-body {
        padding: 0.35rem 0.4rem 0.45rem;
    }
    body[data-page="pos"] .pos-product-card-name,
    body[data-page="purchase"] .pos-product-card-name,
    body[data-page="stock_add"] .pos-product-card-name {
        font-size: 0.74rem;
    }
    body[data-page="pos"] .pos-product-card-meta,
    body[data-page="purchase"] .pos-product-card-meta,
    body[data-page="stock_add"] .pos-product-card-meta {
        font-size: 0.62rem;
    }
    body[data-page="pos"] .pos-product-card-price,
    body[data-page="purchase"] .pos-product-card-price,
    body[data-page="stock_add"] .pos-product-card-price {
        font-size: 0.78rem;
    }
    body[data-page="pos"] .pos-toolbar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0.5rem;
    }
    body[data-page="purchase"] .pos-toolbar,
    body[data-page="stock_add"] .pos-toolbar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0.5rem;
    }
    body[data-page="pos"] .pos-search-form {
        min-width: 0;
        flex: 1 1 220px;
        width: auto;
    }
    body[data-page="purchase"] .pos-search-form,
    body[data-page="stock_add"] .pos-search-form {
        min-width: 0;
        flex: 1 1 220px;
        width: auto;
    }
    body[data-page="pos"] .pos-toolbar-cust {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
    }
    body[data-page="purchase"] .pos-toolbar-cust {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
    }
    body[data-page="pos"] .pos-cust-trigger-minimal,
    body[data-page="purchase"] .pos-cust-trigger-minimal {
        min-width: 0;
    }
    body[data-page="pos"] .input-search,
    body[data-page="purchase"] .input-search,
    body[data-page="stock_add"] .input-search {
        min-width: 0;
        width: 100%;
        font-size: 16px; /* cegah zoom iOS */
    }
    body[data-page="purchase"] .pur-supplier-row {
        width: 100%;
    }
    body[data-page="pos"] .toolbar-hint { display: none; }
    body[data-page="purchase"] .toolbar-hint { display: none; }
    body[data-page="pos"] .pos-layout {
        gap: 0.5rem;
    }
    body[data-page="purchase"] .pos-layout,
    body[data-page="stock_add"] .pos-layout {
        gap: 0.5rem;
    }
    body[data-page="pos"] .card-head,
    body[data-page="purchase"] .card-head,
    body[data-page="stock_add"] .card-head {
        padding: 0.65rem 0.85rem 0.25rem;
    }
    body[data-page="pos"] .card-body,
    body[data-page="purchase"] .card-body,
    body[data-page="stock_add"] .card-body {
        padding: 0.55rem 0.85rem 0.85rem;
    }
    body[data-page="pos"] .pos-products .card-body,
    body[data-page="purchase"] .pos-products-panel .card-body,
    body[data-page="stock_add"] .pos-products-panel .card-body {
        padding-bottom: 0.35rem;
    }
    body[data-page="pos"] .cart-line-pro {
        padding: 0.45rem 0;
        font-size: 0.85rem;
    }
    body[data-page="purchase"] .cart-line-pro {
        padding: 0.45rem 0;
        font-size: 0.85rem;
    }
    body[data-page="pos"] .pos-cart.card-pro,
    body[data-page="purchase"] #pur-cart-panel.card-pro,
    body[data-page="stock_add"] #stkadd-cart-panel.card-pro {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        z-index: 50;
        box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45), var(--neon-glow-soft);
        border-radius: var(--radius) var(--radius) 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    body[data-page="purchase"] #pur-cart-panel.card-pro,
    body[data-page="stock_add"] #stkadd-cart-panel.card-pro {
        max-height: min(40vh, 300px);
        overflow: hidden;
    }
    body[data-page="purchase"] #pur-checkout-actions .hint-field,
    body[data-page="purchase"] #pur-checkout-actions .pur-checkout-hint,
    body[data-page="stock_add"] #stkadd-actions .stkadd-save-hint {
        display: none;
    }
    body[data-page="stock_add"] #stkadd-actions .btn-checkout {
        width: 100%;
    }
    body[data-page="stock_add"] .pos-cart-line {
        padding: 0.45rem 0.15rem;
        gap: 0.25rem;
    }
    body[data-page="stock_add"] #stkadd-cart-panel .pos-cart-panel-body {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    body[data-page="stock_add"] #stkadd-actions {
        flex: 0 0 auto;
    }
    body[data-page="pos"] .checkout-form .input-lg {
        font-size: 16px;
    }

    body[data-page="pos"] .pos-live-clock,
    body[data-page="pos"] .pos-live-clock--desktop,
    body[data-page="purchase"] .pos-live-clock,
    body[data-page="purchase"] .pos-live-clock--desktop,
    body[data-page="stock_add"] .pos-live-clock,
    body[data-page="stock_add"] .pos-live-clock--desktop {
        display: none !important;
    }
    body[data-page="pos"] .pos-topbar-actions--desktop,
    body[data-page="purchase"] .pos-topbar-actions--desktop,
    body[data-page="stock_add"] .pos-topbar-actions--desktop {
        display: none !important;
    }
    body[data-page="pos"] .pos-topbar-inner > .pos-brand,
    body[data-page="purchase"] .pos-topbar-inner > .pos-brand,
    body[data-page="stock_add"] .pos-topbar-inner > .pos-brand {
        padding-right: 0;
        font-size: 0.95rem;
        font-weight: 700;
    }
    body[data-page="pos"] .pos-topbar,
    body[data-page="purchase"] .pos-topbar,
    body[data-page="stock_add"] .pos-topbar {
        margin-bottom: 0;
        padding-bottom: 0.15rem;
    }
    body[data-page="pos"] .pos-float-actions,
    body[data-page="purchase"] .pos-float-actions,
    body[data-page="stock_add"] .pos-float-actions {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        position: fixed;
        top: max(0.45rem, env(safe-area-inset-top));
        right: max(0.45rem, env(safe-area-inset-right));
        z-index: 55;
    }
    body[data-page="pos"] .pos-float-btn--fullscreen {
        display: none !important;
    }
    body[data-page="pos"] .pos-float-btn,
    body[data-page="purchase"] .pos-float-btn,
    body[data-page="stock_add"] .pos-float-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.15rem;
        height: 2.15rem;
        border-radius: 999px;
        background: var(--panel, rgba(15, 23, 42, 0.92));
        border: 1px solid var(--border);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
        color: var(--text);
        text-decoration: none;
    }
    body[data-page="pos"] .pos-float-icon,
    body[data-page="purchase"] .pos-float-icon,
    body[data-page="stock_add"] .pos-float-icon {
        width: 1.05rem;
        height: 1.05rem;
    }
    body[data-page="pos"] .pos-mobile-shell,
    body[data-page="purchase"] .pos-mobile-shell,
    body[data-page="stock_add"] .pos-mobile-shell {
        display: flex;
        flex-direction: column;
        min-height: calc(100dvh - 2.75rem);
        min-height: calc(100vh - 2.75rem);
    }
    body[data-page="pos"] .pos-toolbar--sticky,
    body[data-page="purchase"] .pos-toolbar--sticky,
    body[data-page="stock_add"] .pos-toolbar--sticky {
        position: sticky;
        top: 0;
        z-index: 45;
        background: var(--bg);
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
        margin-bottom: 0.25rem;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }
    body[data-page="pos"] .pos-layout--flow {
        padding-bottom: 0 !important;
        gap: 0;
    }
    body[data-page="pos"] .pos-flow-head-actions {
        display: none;
    }
    body[data-page="pos"] .pos-flow-head-datetime {
        font-size: 0.88rem;
    }
    body[data-page="pos"] .pos-flow-head-meta-row .pos-cart-count-badge {
        margin-left: 0;
    }
    body[data-page="pos"] .pos-layout--flow #pos-cart-lines,
    body[data-page="pos"] .pos-layout--flow .pos-flow-panel__cart-scroll {
        max-height: min(36vh, 320px);
    }
    body[data-page="pos"] .pos-layout--flow .pos-flow-panel__checkout {
        position: fixed;
        left: 1rem;
        right: 1rem;
        bottom: calc(0.5rem + env(safe-area-inset-bottom, 0));
    }
    body[data-page="pos"] .pos-layout--flow {
        padding-bottom: calc(10rem + env(safe-area-inset-bottom, 0)) !important;
    }
    body[data-page="pos"] .pos-layout,
    body[data-page="purchase"] .pos-layout,
    body[data-page="stock_add"] .pos-layout {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        gap: 0.35rem;
        padding-bottom: calc(var(--flow-cart-inset, min(34vh, 260px)) + env(safe-area-inset-bottom, 0));
    }
    body[data-page="purchase"] .pos-layout,
    body[data-page="stock_add"] .pos-layout {
        padding-bottom: calc(var(--flow-cart-inset, min(40vh, 300px)) + env(safe-area-inset-bottom, 0));
    }
    body[data-page="pos"] .pos-products-panel,
    body[data-page="purchase"] .pos-products-panel,
    body[data-page="stock_add"] .pos-products-panel {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        order: 1;
    }
    body[data-page="pos"] .pos-products-panel .card-body,
    body[data-page="purchase"] .pos-products-panel .card-body,
    body[data-page="stock_add"] .pos-products-panel .card-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    body[data-page="pos"] .pos-cart.card-pro,
    body[data-page="purchase"] .pos-cart.card-pro,
    body[data-page="stock_add"] .pos-cart.card-pro {
        flex: 0 0 auto;
        order: 2;
    }
    body[data-page="pos"] #pos-cart-lines {
        flex: 0 1 auto;
        max-height: min(28vh, 200px);
    }
    body[data-page="purchase"] #pur-cart-lines,
    body[data-page="stock_add"] #stkadd-cart-lines {
        flex: 0 1 auto !important;
        max-height: min(20vh, 140px) !important;
    }
    body[data-page="pos"] .pos-toolbar-cust[hidden] {
        display: none !important;
    }
    body[data-page="pos"] .pos-float-btn--sales {
        display: none !important;
    }
    body[data-page="pos"] #pos-grid-hint,
    body[data-page="pos"] .pos-tab-panel[data-pos-tab-panel="services"] > .pos-grid-hint,
    body[data-page="purchase"] .pos-grid-hint,
    body[data-page="stock_add"] .pos-grid-hint {
        display: none !important;
    }
    body[data-page="pos"].pos-mobile-cart-visible .pos-products-panel {
        padding-bottom: 0.25rem;
    }

    /* Toolbar & filter mobile: ikon + teks rapat; baris aksi geser horizontal */
    .pos-toolbar .cash-btn-iconed,
    .page-filter-toolbar .cash-btn-iconed,
    .page-filter-top-actions .cash-btn-iconed,
    .payables-top-actions .cash-btn-iconed,
    .cash-toolbar-btns .cash-btn-iconed {
        display: inline-flex;
        align-items: center;
        gap: 0.32rem;
        padding: 0.42rem 0.62rem;
        font-size: 0.78rem;
        line-height: 1.2;
        white-space: nowrap;
        flex-shrink: 0;
        justify-content: center;
        min-width: 0;
    }
    .pos-toolbar .cash-btn-iconed .cash-toolbar-svg,
    .page-filter-toolbar .cash-btn-iconed .cash-toolbar-svg,
    .page-filter-top-actions .cash-btn-iconed .cash-toolbar-svg,
    .payables-top-actions .cash-btn-iconed .cash-toolbar-svg {
        width: 0.95rem;
        height: 0.95rem;
    }
    .pos-toolbar .cash-btn-iconed span:not(.sr-only),
    .page-filter-toolbar .cash-btn-iconed span:not(.sr-only),
    .page-filter-top-actions .cash-btn-iconed span:not(.sr-only),
    .payables-top-actions .cash-btn-iconed span:not(.sr-only) {
        display: inline;
    }
    .page-filter-top-actions,
    .payables-top-actions {
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.4rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        padding-bottom: 0.3rem;
        margin-bottom: 0.85rem;
    }
    .page-filter-top-actions > .btn,
    .page-filter-top-actions > a.btn,
    .payables-top-actions > .btn,
    .payables-top-actions > a.btn {
        flex: 0 0 auto;
        scroll-snap-align: start;
        font-size: 0.78rem;
        padding: 0.42rem 0.62rem;
        white-space: nowrap;
    }
    .page-filter-top-actions::-webkit-scrollbar,
    .payables-top-actions::-webkit-scrollbar {
        height: 4px;
    }
    .page-filter-top-actions::-webkit-scrollbar-thumb,
    .payables-top-actions::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.35);
        border-radius: 4px;
    }
    .cash-toolbar-btns {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        gap: 0.4rem;
        padding-bottom: 0.25rem;
    }
    .cash-toolbar-btns .btn {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }
    .pos-search-form .cash-btn-iconed {
        flex: 0 0 auto;
    }
    .page-filter-top-actions,
    .payables-top-actions,
    .cash-toolbar-btns {
        overscroll-behavior-x: contain;
        touch-action: pan-x;
    }
    /* Modal / form: banyak tombol → satu baris geser, bukan stack tinggi */
    .pos-modal-actions,
    .form-actions:not(.form-actions--stack) {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        gap: 0.4rem;
        overscroll-behavior-x: contain;
    }
    .pos-modal-actions .btn,
    .form-actions:not(.form-actions--stack) .btn {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
        font-size: 0.78rem;
        padding: 0.45rem 0.65rem;
        max-width: none;
        margin-left: 0;
    }
    .pos-modal-actions .btn-pay-confirm {
        flex: 0 0 auto;
        max-width: none;
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    .chip { display: none; }
    .clock { display: none; }
    body[data-page="pos"] .content,
    body[data-page="purchase"] .content,
    body[data-page="stock_add"] .content {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
        padding-top: 0.5rem;
    }
    body[data-page="pos"] .pos-topbar,
    body[data-page="purchase"] .pos-topbar,
    body[data-page="stock_add"] .pos-topbar {
        margin-left: -0.65rem;
        margin-right: -0.65rem;
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }
    body[data-page="pos"] .pos-topbar-inner .btn-sm,
    body[data-page="purchase"] .pos-topbar-inner .btn-sm,
    body[data-page="stock_add"] .pos-topbar-inner .btn-sm {
        font-size: 0.72rem;
        padding: 0.35rem 0.5rem;
    }
}

/* —— Tema terang: penyesuaian komponen —— */
html[data-theme="light"] .alert-error {
    background: rgba(254, 226, 226, 0.92);
    border-color: rgba(220, 38, 38, 0.28);
    color: #991b1b;
}
html[data-theme="light"] .alert-success {
    background: rgba(209, 250, 229, 0.88);
    border-color: rgba(5, 150, 105, 0.3);
    color: #0369a1;
}
html[data-theme="light"] .alert-warning {
    background: rgba(254, 243, 199, 0.92);
    border-color: rgba(217, 119, 6, 0.35);
    color: #92400e;
}
html[data-theme="light"] .alert-rich {
    background: rgba(224, 242, 254, 0.75);
    border-color: rgba(6, 182, 212, 0.32);
    color: #0f172a;
}
html[data-theme="light"] .alert-rich a,
html[data-theme="light"] .alert-success a { color: #0d9488; }
html[data-theme="light"] .kpi { box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06), var(--neon-surface); }
html[data-theme="light"] .kpi-accent {
    border-color: rgba(6, 182, 212, 0.38);
    background: linear-gradient(145deg, rgba(6, 182, 212, 0.11), var(--panel));
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06), var(--neon-surface), var(--neon-glow-soft);
}
html[data-theme="light"] .table th {
    background: rgba(241, 245, 249, 0.98);
    color: var(--muted);
}
html[data-theme="light"] .table-wrap {
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.06), var(--neon-surface);
}
html[data-theme="light"] .chart-bar-track {
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.2), rgba(148, 163, 184, 0.06));
}
html[data-theme="light"] .chart-bar {
    box-shadow: 0 10px 22px rgba(3, 105, 161, 0.22);
}
html[data-theme="light"] .table-pro tbody tr:hover { background: rgba(6, 182, 212, 0.05); }
html[data-theme="light"] .qa-btn {
    background: rgba(6, 182, 212, 0.04);
}
html[data-theme="light"] .qa-btn:hover {
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.32);
}
html[data-theme="light"] .pos-product-card:hover {
    box-shadow: 0 12px 32px rgba(6, 182, 212, 0.14);
    border-color: rgba(6, 182, 212, 0.35);
}
html[data-theme="light"] .pos-product-card-media {
    background: linear-gradient(145deg, rgba(6, 182, 212, 0.22), rgba(14, 165, 233, 0.1));
}
html[data-theme="light"] body[data-page="pos"] .pos-cart.card-pro {
    box-shadow: 0 -12px 36px rgba(15, 23, 42, 0.1), var(--neon-glow-soft);
}
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1px dashed rgba(148, 163, 184, 0.35);
    color: var(--text);
    margin-bottom: 0.35rem;
}
html[data-theme="light"] .theme-toggle-btn {
    border: 1px solid rgba(6, 182, 212, 0.35);
    color: var(--accent2);
}
html[data-theme="light"] .pos-line-remove {
    color: #b91c1c;
}
html[data-theme="light"] .pos-modal {
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15), var(--neon-glow-soft);
}
html[data-theme="light"] .nav-drawer-toggle:hover {
    background: rgba(6, 182, 212, 0.1);
}
html[data-theme="light"] .sidebar-collapse-toggle:hover {
    background: rgba(6, 182, 212, 0.1);
}

/* POS tema terang: angka / judul kasir merah pekat (bukan nuansa pink/biru lembut) */
html[data-theme="light"] body[data-page="pos"] .pos-product-card-price,
html[data-theme="light"] body[data-page="pos"] .pos-cart-line-total,
html[data-theme="light"] body[data-page="pos"] .pos-sticky-total-val,
html[data-theme="light"] body[data-page="pos"] .pos-product-card-media {
    color: #b91c1c;
}
html[data-theme="light"] body[data-page="pos"] .pos-brand {
    color: #991b1b;
}

/* Toolbar & filter tabel */
.table-filter-bar {
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
}
.table-toolbar-wrap {
    margin-bottom: 1rem;
}
.pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.85rem;
}
.pager-info {
    font-size: 0.84rem;
    color: var(--muted);
}
.btn.disabled,
.btn[disabled] {
    opacity: 0.5;
    pointer-events: none;
}
.table-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.text-expense {
    color: #fca5a5;
}
html[data-theme="light"] .text-expense {
    color: #b91c1c;
}
.menu-fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin: 0;
}
.menu-fieldset legend {
    padding: 0 0.35rem;
}
.menu-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.45rem 0.75rem;
    margin-top: 0.5rem;
}
.check-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    cursor: pointer;
}
.import-card {
    margin-bottom: 1rem;
}
html[data-theme="light"] .table-filter-bar {
    background: rgba(6, 182, 212, 0.04);
}

/* Datatable: toolbar tetap, isi tabel scroll (pencarian tidak naik-turun) */
.kasir-dt-fixed {
    --pur-dt-pad-x: 1.15rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.kasir-dt-fixed__toolbar {
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    padding-left: var(--pur-dt-pad-x);
    padding-right: var(--pur-dt-pad-x);
}
.kasir-dt-fixed__scroll {
    height: min(calc(100vh - 15.5rem), 720px);
    max-height: min(calc(100vh - 15.5rem), 720px);
    overflow: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--pur-dt-pad-x) 0.5rem;
    box-sizing: border-box;
}
.kasir-dt-fixed__table {
    width: 100%;
    margin: 0;
}
.kasir-dt-fixed__scroll thead th,
.kasir-dt-fixed__scroll tbody td {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
}
.kasir-dt-fixed__scroll thead th:first-child,
.kasir-dt-fixed__scroll tbody td:first-child {
    padding-left: 0;
}
.kasir-dt-fixed__scroll thead th:last-child,
.kasir-dt-fixed__scroll tbody td:last-child {
    padding-right: 0;
}
.kasir-dt-fixed__scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--panel);
    box-shadow: 0 1px 0 var(--border);
}
html[data-theme="light"] .kasir-dt-fixed__scroll thead th {
    background: #f1f5f9;
}
@media (max-width: 768px) {
    .kasir-dt-fixed__scroll {
        height: min(calc(100vh - 13rem), 560px);
        max-height: min(calc(100vh - 13rem), 560px);
    }
}

/* Mutasi stok — datatable */
.stk-mv-table { min-width: 1100px; }
.stk-mv-table .stk-col-prod strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.35;
}
.stk-mv-table .stk-prod-code {
    display: block;
    font-size: 0.78rem;
    margin-top: 0.1rem;
}
.stk-col-when { width: 8.5rem; white-space: nowrap; }
.stk-col-prod { min-width: 10rem; }
.stk-col-type { width: 7rem; }
.stk-col-batch { width: 6.5rem; }
.stk-col-exp { width: 6.5rem; white-space: nowrap; }
.stk-col-qty { width: 4.5rem; }
.stk-col-unit { width: 5rem; }
.stk-col-pbf { min-width: 7rem; }
.stk-pur-ref {
    margin-top: 0.25rem;
}
.stk-pur-ref__link {
    font-size: 0.78rem;
    font-weight: 600;
    color: #f87171;
    text-decoration: none;
}
.stk-pur-ref__link:hover {
    color: #ef4444;
    text-decoration: underline;
}
html[data-theme="light"] .stk-pur-ref__link {
    color: #dc2626;
}
.stk-col-proof { width: 5rem; text-align: center; }
.stk-col-after { width: 6.5rem; white-space: nowrap; }

/* Kasir — katalog produk mirip pembelian */
body[data-page="pos"] .pos-toolbar--sticky {
    position: sticky;
    top: 0;
    z-index: 20;
    margin-bottom: 0.5rem;
    padding: 0.35rem 0;
    background: var(--bg0, #0f1419);
}
html[data-theme="light"] body[data-page="pos"] .pos-toolbar--sticky {
    background: var(--bg0, #f4f6f8);
}
body[data-page="pos"] .pos-toolbar--catalog-only {
    padding: 0;
    margin: 0;
    min-height: 0;
    border: none;
    background: transparent;
}
body[data-page="pos"] .pos-toolbar--catalog-only .pos-search-form {
    display: none;
}
.pos-catalog-panel {
    --pur-dt-pad-x: 1rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.pos-catalog-panel .card-body.pos-products-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}
body[data-page="pos"] .pos-catalog-panel.pos-products-panel {
    display: flex;
    flex-direction: column;
    min-height: min(calc(100vh - 8rem), 900px);
}
.pos-catalog-panel__search {
    flex-shrink: 0;
    padding: 0.65rem var(--pur-dt-pad-x) 0.6rem;
    border-bottom: 1px solid var(--border);
}
.pos-catalog-panel__search .pos-search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.pos-catalog-panel__search .pur-search-bar {
    flex: 1;
    min-width: min(100%, 14rem);
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
}
.pos-catalog-panel__search .pur-search-bar:focus-within {
    border-color: rgba(14, 165, 233, 0.5);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.pos-catalog-panel__search .pur-search-bar__icon {
    opacity: 0.55;
    flex-shrink: 0;
}
.pos-catalog-panel__search .pur-search-bar .input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0.35rem 0.1rem;
}
.pos-catalog-panel__scroll {
    flex: 1 1 auto;
    height: min(calc(100vh - 17rem), 520px);
    max-height: min(calc(100vh - 17rem), 520px);
    overflow: auto;
    overflow-x: auto;
    padding: 0 var(--pur-dt-pad-x) 0.4rem;
    -webkit-overflow-scrolling: touch;
}
.pos-product-table {
    width: 100%;
    min-width: 640px;
    margin: 0;
    font-size: 0.88rem;
}
.pos-product-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.55rem 0.65rem;
    font-size: 0.76rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 var(--border);
}
html[data-theme="light"] .pos-product-table thead th {
    background: #f1f5f9;
}
.pos-product-table tbody td {
    padding: 0.55rem 0.65rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}
.pos-product-table tbody tr.pos-product-row {
    cursor: pointer;
    transition: background 0.12s;
}
.pos-product-table tbody tr.pos-product-row:hover td {
    background: rgba(14, 165, 233, 0.06);
}
.pos-product-table tbody tr.is-low-stock td {
    opacity: 0.72;
}
.pos-col-prod strong {
    display: block;
    font-weight: 650;
    font-size: 0.9rem;
    line-height: 1.35;
}
.pos-col-prod .mono {
    display: block;
    font-size: 0.78rem;
    margin-top: 0.08rem;
}
.pos-col-code { width: 6.5rem; }
.pos-col-stock { width: 5.5rem; }
.pos-col-price { width: 7rem; }
.pos-col-action { width: 4rem; text-align: center; }
.pos-tab-panel.is-active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.pos-tab-panel[data-pos-tab-panel="products"] .pos-grid-hint {
    padding: 0.35rem var(--pur-dt-pad-x) 0;
    margin: 0;
    font-size: 0.8rem;
}
@media (max-width: 900px) {
    .pos-catalog-panel__scroll {
        height: min(calc(100vh - 14rem), 420px);
        max-height: min(calc(100vh - 14rem), 420px);
    }
}

body[data-page="purchase"] .pos-topbar {
    margin-bottom: 0.5rem;
}

/* —— Halaman Kas —— */
.cash-filter-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.45rem 0.65rem;
    flex: 1;
    min-width: min(100%, 560px);
}
.cash-f-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.cash-f-grow .input-compact {
    min-width: 168px;
}
.cash-f-lbl {
    font-size: 0.72rem;
    color: var(--muted);
}
.cash-toolbar-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex-shrink: 0;
}
.cash-table-wrap {
    margin-top: 0;
}
.cash-table-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
}
html[data-theme="light"] .cash-table-head {
    background: rgba(6, 182, 212, 0.04);
}
.cash-table-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 650;
}
.cash-table-q {
    width: min(100%, 280px);
}
.cash-modal-panel {
    max-width: 520px;
}
.cash-export-modal-inner {
    max-width: min(560px, 100%);
}
.cash-export-fields {
    margin-bottom: 0.75rem;
}
.cash-modal-lead {
    margin-top: 0;
    font-size: 0.85rem;
    margin-bottom: 0.65rem;
}
.btn-outline-accent {
    border: 1px solid rgba(56, 189, 248, 0.55);
    background: transparent;
    color: var(--accent);
}
.btn-outline-accent:hover {
    background: var(--qty-bg);
    border-color: var(--input-focus-border);
}
html[data-theme="light"] .btn-outline-accent {
    border-color: rgba(14, 165, 233, 0.55);
    color: var(--accent-dim);
}
.btn-accent-light {
    border: 1px solid rgba(56, 189, 248, 0.45);
    background: rgba(56, 189, 248, 0.14);
    color: var(--accent);
}
.btn-accent-light:hover:not(:disabled),
.btn-accent-light:focus-visible {
    background: rgba(56, 189, 248, 0.22);
    border-color: rgba(56, 189, 248, 0.65);
    color: var(--accent);
}
html[data-theme="light"] .btn-accent-light {
    border-color: rgba(14, 165, 233, 0.45);
    background: rgba(14, 165, 233, 0.1);
    color: var(--accent-dim);
}
html[data-theme="light"] .btn-accent-light:hover:not(:disabled),
html[data-theme="light"] .btn-accent-light:focus-visible {
    background: rgba(14, 165, 233, 0.16);
    border-color: rgba(14, 165, 233, 0.6);
    color: var(--accent-dim);
}
.cash-btn-iconed {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.btn--ph-print .btn-action-icon {
    width: 1rem;
    height: 1rem;
}
.cash-toolbar-svg {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}
.cash-inline-ic {
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    margin-right: 0.15rem;
}
.cash-detail-lbl {
    margin-left: 0.15rem;
}
.cash-detail-trigger {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
/* Preview ringkas di baris tabel — klik membuka modal rincian */
.cash-preview-min.cash-detail-trigger {
    white-space: nowrap;
    max-width: 100%;
}
.cash-preview-min {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.2rem 0.45rem;
    margin: 0;
    font: inherit;
    font-size: 0.78rem;
    color: var(--muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease;
}
.cash-preview-min:hover {
    background: var(--qty-bg);
    color: var(--text);
}
.cash-preview-min__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 14rem;
}
@media (max-width: 640px) {
    .cash-preview-min__text {
        max-width: 9rem;
    }
}
.cash-preview-min__cam {
    display: inline-flex;
    align-items: center;
    gap: 0.12rem;
    flex-shrink: 0;
    color: var(--accent2);
    opacity: 0.88;
}
.cash-preview-min__ic {
    width: 0.85rem;
    height: 0.85rem;
}
.cash-preview-min__n {
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
}
.cash-preview-min__chev {
    flex-shrink: 0;
    opacity: 0.45;
    font-size: 1.05rem;
    line-height: 1;
}
.cash-proof-field {
    position: relative;
}
.cash-proof-pick-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.cash-proof-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
}
.cash-proof-hint-inline {
    margin: 0;
    flex: 1;
    min-width: 10rem;
}
.cash-proof-queue {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.5rem;
}
.cash-proof-queue-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel2);
}
.cash-proof-queue-thumb {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--panel);
}
.cash-proof-queue-thumb img {
    display: block;
    width: auto;
    height: auto;
    max-width: 120px;
    max-height: 120px;
    object-fit: contain;
}
.cash-proof-queue-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
}
.cash-proof-queue-name {
    font-size: 0.76rem;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.cash-proof-queue-rm {
    flex-shrink: 0;
}
.cash-col-preview {
    width: 1%;
    white-space: nowrap;
}
.cash-export-filter-box {
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.02);
    margin-bottom: 1rem;
}
html[data-theme="light"] .cash-export-filter-box {
    background: rgba(6, 182, 212, 0.04);
}
.cash-export-mode-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 1.1rem;
    margin-bottom: 1rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.02);
}
html[data-theme="light"] .cash-export-mode-row {
    background: rgba(6, 182, 212, 0.04);
}
.cash-export-mode-row label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    font-size: 0.88rem;
}
.cash-export-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
@media (max-width: 520px) {
    .cash-export-actions-grid {
        grid-template-columns: 1fr;
    }
}
.cash-export-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--panel2);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.cash-export-tile:hover {
    border-color: var(--input-focus-border);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] .cash-export-tile:hover {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
.cash-export-tile--excel:hover {
    border-color: rgba(22, 163, 74, 0.45);
}
.cash-export-svg {
    width: 1.35rem;
    height: 1.35rem;
    color: var(--accent2);
}
.cash-export-tile-ic {
    margin-bottom: 0.35rem;
}
.cash-export-tile-title {
    font-weight: 700;
    font-size: 0.88rem;
}
.cash-export-tile-desc {
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 0.15rem;
    line-height: 1.35;
}
.cash-detail-modal-panel {
    max-width: min(480px, 100%);
}
.cash-detail-dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem 1rem;
    margin: 0;
}
.cash-detail-dl dt {
    margin: 0;
    font-size: 0.72rem;
    color: var(--muted);
}
.cash-detail-dl dd {
    margin: 0;
    font-size: 0.88rem;
}
.cash-detail-bukti {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--line-sep);
}
.cash-detail-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.45rem;
}
.cash-detail-thumb-link {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--panel2);
    padding: 0;
    cursor: zoom-in;
}
.cash-detail-thumb {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: contain;
}
.cash-edit-thumb-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.35rem;
}
.cash-edit-existing-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.72rem;
}
.cash-edit-existing-item input {
    cursor: pointer;
}
.cash-edit-thumb-a {
    display: block;
    border-radius: 4px;
    overflow: hidden;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: zoom-in;
}
.cash-edit-thumb-img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    display: block;
}
.cash-edit-remove-cap {
    color: var(--muted);
}
#pur-image-modal.crud-modal-overlay,
#cash-image-modal.crud-modal-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}
.cash-image-modal-panel.crud-modal {
    max-width: 100vw;
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cash-image-modal-panel .card-head {
    flex-shrink: 0;
    padding: 0.5rem 0.75rem 0.35rem;
}
.cash-image-modal-panel .card-title {
    font-size: 0.95rem;
}
.cash-image-modal-body {
    flex: 1 1 auto;
    padding: 0.35rem;
    display: block;
    overflow: auto;
    min-height: 0;
    text-align: center;
}
.cash-image-preview-img {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    object-fit: none;
    border-radius: 0;
    background: var(--panel2);
    cursor: zoom-in;
    vertical-align: top;
}
#pur-image-modal .cash-image-preview-img.is-zoomed {
    cursor: zoom-out;
}
.cash-ajax-loader {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(2, 6, 23, 0.42);
    display: none;
    align-items: center;
    justify-content: center;
}
.cash-ajax-loader:not([hidden]) {
    display: flex;
}
.cash-ajax-loader__box {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--text);
    font-size: 0.86rem;
}
.cash-ajax-loader__spin {
    width: 0.95rem;
    height: 0.95rem;
    border: 2px solid var(--line-sep);
    border-top-color: var(--accent2);
    border-radius: 50%;
    animation: cash-spin 0.65s linear infinite;
}
@keyframes cash-spin {
    to {
        transform: rotate(360deg);
    }
}
.cash-ajax-notice {
    position: fixed;
    right: 0.9rem;
    top: 0.9rem;
    z-index: 1450;
    max-width: min(380px, calc(100vw - 1.8rem));
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
    font-size: 0.83rem;
    display: none;
}
.cash-ajax-notice:not([hidden]) {
    display: block;
}
.cash-ajax-notice.is-ok {
    background: rgba(14, 165, 233, 0.16);
    border-color: rgba(14, 165, 233, 0.5);
    color: #bae6fd;
}
.cash-ajax-notice.is-err {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.48);
    color: #fecaca;
}
body.cash-ajax-busy {
    cursor: progress;
}
.pager-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.35rem;
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--border);
    color: var(--accent2);
    text-decoration: none;
}
a.pager-num:hover {
    background: var(--qty-bg);
}
span.pager-num.is-current {
    background: var(--qty-bg);
    border-color: var(--input-focus-border);
    font-weight: 650;
    color: var(--text);
    cursor: default;
}
body[data-page="cash"] .cash-pager {
    flex-wrap: wrap;
    justify-content: flex-start;
}
.pager-info-inline {
    margin-top: 0.5rem;
    font-size: 0.84rem;
}
@media (max-width: 720px) {
    body[data-page="cash"] .page-filter-top-actions {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    body[data-page="cash"] .page-filter-top-actions .btn {
        flex: 0 0 auto;
        min-width: 0;
        justify-content: center;
        white-space: nowrap;
    }
    .cash-filter-inline {
        width: 100%;
    }
    .cash-f-grow .input-compact {
        width: 100%;
        min-width: 0;
    }
    .cash-table-q {
        width: 100%;
    }
}

.crud-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 450;
    background: var(--modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 2.5vw, 2rem);
}
.crud-modal-overlay[hidden] { display: none !important; }
.crud-modal {
    width: 100%;
    max-width: 640px;
    max-height: min(92vh, 760px);
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--elev);
    opacity: 1;
}
.crud-modal .card-head {
    padding: 1rem 1.25rem 0.8rem;
    border-bottom: 1px solid var(--border);
}
.crud-modal > .form-grid,
.crud-modal form.form-grid {
    padding: 1rem 1.25rem 1.25rem;
}
@media (max-width: 640px) {
    .crud-modal-overlay {
        align-items: flex-end;
        padding: 0.65rem;
    }
    #pur-image-modal.crud-modal-overlay,
    #cash-image-modal.crud-modal-overlay {
        align-items: stretch;
        padding: 0;
    }
    .crud-modal {
        border-radius: var(--radius) var(--radius) 0 0;
        max-height: 94vh;
    }
    .cash-image-modal-panel.crud-modal {
        border-radius: 0;
        max-height: 100vh;
        height: 100vh;
    }
    .crud-modal .card-head,
    .crud-modal > .form-grid,
    .crud-modal form.form-grid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Modal varian kemasan: lebar & tinggi sama dengan modal Edit/Tambah produk (#product-modal-wrap .crud-modal) */
.crud-modal.product-uom-crud-modal {
    max-width: min(98vw, 1040px);
    width: 100%;
}
.crud-modal.product-uom-crud-modal .card-body {
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
    padding-top: 0.35rem;
}
.product-uom-unified--embed {
    margin: 0;
}
.uom-field--embed-sell {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--line-sep);
    background: var(--card-bg, var(--panel));
}
.uom-field--embed-sell .label {
    margin-bottom: 0.4rem;
}
.uom-field--embed-sell .input {
    max-width: 12rem;
}
.uom-field--embed-sell .uom-main-caption {
    margin-top: 0.45rem;
}

/* Tombol aksi tabel & halaman sunting transaksi — ukuran ringkas */
.table-actions--elegant {
    flex-wrap: wrap;
    gap: 0.28rem;
    align-items: center;
}
.table-action-form {
    display: inline-flex;
    margin: 0;
}
.table-action-form button.btn-action {
    font: inherit;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.28rem 0.55rem;
    min-height: 0;
    border-radius: 7px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid var(--border);
    background: var(--panel2);
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.2;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
    box-shadow: none;
}
.btn-action:hover:not(:disabled) {
    filter: none;
    background: rgba(148, 163, 184, 0.14);
    border-color: rgba(148, 163, 184, 0.35);
}
.btn-action:active:not(:disabled) {
    transform: translateY(1px);
}
.btn-action:focus-visible {
    outline: 2px solid var(--accent2);
    outline-offset: 2px;
}
.btn-action-icon {
    width: 0.78rem;
    height: 0.78rem;
    flex-shrink: 0;
    opacity: 1;
}

/* Chip laporan & zona bahaya: Edit & Hapus ukuran sama */
.table-actions--elegant .btn-action {
    padding: 0.18rem 0.42rem;
    font-size: 0.65rem;
    gap: 0.22rem;
    border-radius: 6px;
    font-weight: 600;
}
.table-actions--elegant .btn-action-icon {
    width: 0.68rem;
    height: 0.68rem;
}

.btn-action--ghost {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.35);
    color: var(--text);
}
.btn-action--ghost:hover:not(:disabled) {
    background: rgba(148, 163, 184, 0.2);
    border-color: rgba(148, 163, 184, 0.5);
    color: var(--text);
}
.btn-action--secondary {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.28);
    color: var(--text);
}
.btn-action--secondary:hover:not(:disabled) {
    background: rgba(148, 163, 184, 0.2);
    border-color: rgba(148, 163, 184, 0.4);
}
.btn-action--outline {
    background: transparent;
    border-style: dashed;
    border-color: rgba(52, 211, 153, 0.5);
    color: var(--accent2);
}
.btn-action--outline:hover:not(:disabled) {
    background: rgba(52, 211, 153, 0.1);
    border-color: rgba(52, 211, 153, 0.75);
    color: var(--accent);
}

/* Utama: hijau + teks putih (hover lebih terang, bukan pudar) */
.btn-action--accent {
    background: linear-gradient(180deg, #34d399 0%, #059669 100%);
    border-color: rgba(16, 185, 129, 0.85);
    color: var(--btn-on-solid);
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.25);
}
.btn-action--accent:hover:not(:disabled) {
    background: linear-gradient(180deg, #6ee7b7 0%, #047857 100%);
    border-color: rgba(52, 211, 153, 0.95);
    color: var(--btn-on-solid);
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35);
}
.btn-action--accent:focus-visible {
    outline-color: #6ee7b7;
}
.btn-action--accent .btn-action-icon {
    stroke: currentColor;
}

/* Hapus / bahaya: merah solid + teks putih — ukuran chip sama dengan accent */
.btn-action--danger {
    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
    border-color: rgba(185, 28, 28, 0.9);
    color: var(--btn-on-solid);
    box-shadow: 0 1px 3px rgba(185, 28, 28, 0.28);
}
.btn-action--danger:hover:not(:disabled) {
    background: linear-gradient(180deg, #f87171 0%, #991b1b 100%);
    border-color: rgba(153, 27, 27, 0.95);
    color: var(--btn-on-solid);
    box-shadow: 0 2px 10px rgba(248, 113, 113, 0.35);
}
.btn-action--danger:focus-visible {
    outline-color: #f87171;
}
.btn-action--danger .btn-action-icon {
    stroke: currentColor;
}

html[data-theme="light"] .btn-action--accent,
html[data-theme="light"] .btn-action--danger {
    color: #ffffff;
}

.txn-edit-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    margin-bottom: 1rem;
}
.txn-edit-toolbar .btn-action {
    padding: 0.32rem 0.62rem;
    font-size: 0.74rem;
}
.txn-edit-toolbar .btn-action-icon {
    width: 0.82rem;
    height: 0.82rem;
}
.txn-edit-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 56rem;
}
.txn-edit-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1rem;
    align-items: start;
}
.txn-edit-fields > div {
    min-width: 0;
}
.txn-full-edit-form .txn-detail-card {
    margin: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.txn-detail-table .input.input-compact {
    padding: 0.3rem 0.42rem;
    font-size: 0.78rem;
    min-width: 0;
    width: 100%;
    max-width: 7.5rem;
}
.btn-action--icononly {
    padding: 0.12rem 0.28rem !important;
    min-width: 0;
}
.table-actions--elegant .btn-action--icononly {
    padding: 0.06rem 0.18rem !important;
    border-radius: 5px;
}
.table-actions--elegant .btn-action--icononly .btn-action-icon {
    width: 0.56rem !important;
    height: 0.56rem !important;
}
.txn-detail-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}
/* Toolbar filter seragam: baris aksi di atas, kartu filter di bawah */
.page-filter-top-actions,
.payables-top-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.85rem;
    margin-bottom: 1rem;
    padding: 0.15rem 0.05rem 0;
}
/* Desktop: boleh wrap; mobile: geser horizontal (lihat @media 768px) */
.page-filter-toolbar,
.payables-filter-toolbar {
    margin-bottom: 1.15rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.02);
}
html[data-theme="light"] .page-filter-toolbar,
html[data-theme="light"] .payables-filter-toolbar {
    background: rgba(6, 182, 212, 0.04);
}
.page-filter-toolbar .cash-filter-inline.page-filter-form,
.page-filter-toolbar .page-filter-form.cash-filter-inline,
.payables-filter-toolbar .cash-filter-inline.payables-filter-form {
    gap: 0.55rem 1rem;
    align-items: flex-end;
    width: 100%;
}
.page-filter-submit,
.payables-filter-submit {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
}
/* Ikon filter dari markup (cash-btn-iconed + kasir_icon); tanpa ::before agar tidak dobel */
.page-filter-summary {
    margin: 0 0 0.95rem;
    font-size: 0.9rem;
}
@media (max-width: 760px) {
    .txn-edit-fields {
        grid-template-columns: 1fr;
    }
}
body[data-page="purchase_edit"] .txn-edit-layout,
body[data-page="sale_edit"] .txn-edit-layout,
body[data-page="purchase_edit"] .txn-full-edit-form {
    max-width: 64rem;
    margin: 0;
}
/* Mode baca-saja: beberapa card berturut-turut */
body[data-page="purchase_edit"] .txn-edit-layout:not(.txn-full-edit-form),
body[data-page="sale_edit"] .txn-edit-layout:not(.txn-full-edit-form) {
    gap: 1.35rem;
}
body[data-page="purchase_edit"] .txn-edit-toolbar,
body[data-page="sale_edit"] .txn-edit-toolbar {
    margin-bottom: 1.35rem;
}
body[data-page="purchase_edit"] .txn-full-edit-form,
body[data-page="sale_edit"] .txn-full-edit-form {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    margin-bottom: 1.35rem;
}
body[data-page="purchase_edit"] .txn-detail-card,
body[data-page="sale_edit"] .txn-detail-card {
    max-width: 64rem;
    margin: 0 0 1.25rem 0;
    padding: 1.2rem 1.35rem;
}
body[data-page="purchase_edit"] .txn-full-edit-form .txn-detail-card,
body[data-page="sale_edit"] .txn-full-edit-form .txn-detail-card {
    margin: 0;
    max-width: none;
}
body[data-page="purchase_edit"] .txn-detail-card > .txn-meta-grid + .table-filter-bar,
body[data-page="sale_edit"] .txn-detail-card > .txn-meta-grid + .table-filter-bar {
    margin-top: 0.85rem;
}
body[data-page="purchase_edit"] .txn-edit-fields,
body[data-page="sale_edit"] .txn-edit-fields {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 1rem 1.15rem;
}
@media (max-width: 900px) {
    body[data-page="purchase_edit"] .txn-edit-fields,
    body[data-page="sale_edit"] .txn-edit-fields {
        grid-template-columns: 1fr;
    }
}
.txn-detail-card__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.txn-detail-card__icon {
    width: 1.15rem;
    height: 1.15rem;
    opacity: 0.85;
}
.txn-detail-card__subtitle {
    font-size: 0.88rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem;
    color: var(--muted);
}
.txn-detail-hint {
    font-size: 0.86rem;
    margin: 0 0 0.85rem;
    line-height: 1.45;
}
.txn-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.65rem 1rem;
    margin: 0;
}
.txn-meta-grid dt {
    font-size: 0.78rem;
    margin: 0;
}
.txn-meta-grid dd {
    margin: 0.15rem 0 0;
    font-size: 0.92rem;
}
.txn-detail-table {
    font-size: 0.88rem;
}
.txn-totals-rows {
    margin: 0;
    padding: 0;
}
.txn-total-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.35rem 0;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.2);
    font-size: 0.9rem;
}
.txn-total-line--grand {
    border-bottom: none;
    margin-top: 0.25rem;
    padding-top: 0.65rem;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}
.txn-detail-card--form .form-stack {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.txn-form-actions {
    margin-top: 0.65rem;
}
.txn-detail-card--danger-zone {
    border-color: rgba(248, 113, 113, 0.28);
    background: linear-gradient(145deg, rgba(248, 113, 113, 0.06), var(--panel));
}
.txn-danger-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}
.txn-form-actions .btn-action {
    padding: 0.4rem 0.85rem;
    font-size: 0.78rem;
    border-radius: 8px;
}
.txn-form-actions .btn-action-icon {
    width: 0.85rem;
    height: 0.85rem;
}
@media (max-width: 640px) {
    .table-actions--elegant .btn-action span {
        max-width: 5rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Branding toko (logo) */
.brand {
    align-items: center;
}
.brand-logo-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 10px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: var(--panel2);
}
.dash-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
}
.dash-hero-logo {
    width: 52px;
    height: 52px;
    max-width: 52px;
    max-height: 52px;
    object-fit: contain;
    border-radius: 14px;
    border: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--panel2);
}
.dash-hero-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.dash-hero-sub {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
}
.settings-logo-preview img,
.settings-logo-readonly-img {
    max-height: 96px;
    max-width: 220px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid var(--border);
    padding: 0.35rem;
    background: var(--panel2);
}
.settings-logo-preview-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-bottom: 0.35rem;
}
.settings-logo-remove-form {
    flex-shrink: 0;
    margin: 0;
}
.settings-logo-form {
    margin-top: 0.75rem;
}

/* Pengguna — modal form */
.user-modal-panel {
    max-width: min(560px, 96vw);
    width: 100%;
}
.user-modal-body {
    max-height: min(72vh, 640px);
    overflow-y: auto;
    padding-right: 0.15rem;
}
.receipt-logo-wrap {
    margin-bottom: 0.45rem;
}
.receipt-logo-img {
    display: block;
    margin: 0 auto;
    max-height: 56px;
    max-width: 180px;
    object-fit: contain;
}

/* Insight toko (analitik) */
.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 1.15rem;
    margin-top: 1rem;
}
.insights-card .card-body {
    padding-top: 0.65rem;
}
/* Ringkasan cerdas: kontras jelas (terang: putih + teks gelap; gelap: navy + teks terang) */
.insights-ai-banner {
    margin-top: 0.75rem;
    padding: 1.35rem 1.4rem 1.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--elev);
}
html[data-theme="light"] .insights-ai-banner {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.07);
}
html[data-theme="light"] .insights-ai-banner-head strong {
    color: #0f172a;
}
html[data-theme="light"] .insights-ai-sub {
    color: #475569;
}
html[data-theme="light"] .insights-ai-icon {
    color: #0284c7;
}
html[data-theme="light"] .insights-ai-list {
    color: #1e293b;
}
html[data-theme="dark"] .insights-ai-banner {
    background: #111827;
    border-color: rgba(148, 163, 184, 0.22);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .insights-ai-banner-head strong {
    color: #f8fafc;
}
html[data-theme="dark"] .insights-ai-sub {
    color: #cbd5e1;
}
html[data-theme="dark"] .insights-ai-icon {
    color: #38bdf8;
}
html[data-theme="dark"] .insights-ai-list {
    color: #e2e8f0;
}
.insights-ai-banner-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.insights-ai-sub {
    display: block;
    font-size: 0.88rem;
    margin-top: 0.2rem;
    line-height: 1.45;
}
.insights-ai-icon {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    color: var(--accent);
}
.insights-ai-list {
    margin: 0;
    padding-left: 1.25rem;
    line-height: 1.6;
    font-size: 0.93rem;
    color: var(--text);
}
.insights-ai-list li + li {
    margin-top: 0.5rem;
}

/* Insight: kartu keuangan & kas */
.insights-finance-section {
    margin-top: 1.1rem;
}
.insights-expiry-section {
    margin-top: 1.1rem;
}
.insights-finance-banner-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.insights-finance-banner-head .insights-ai-icon {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    color: var(--accent);
}
.insights-finance-banner-head .card-title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.3;
}
.insights-finance-banner-head-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.insights-finance-lead {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    line-height: 1.55;
}
.insights-finance-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}
.insights-finance-kpi {
    padding: 0.75rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
    min-width: 0;
}
html[data-theme="light"] .insights-finance-kpi {
    background: rgba(14, 165, 233, 0.04);
}
.insights-finance-kpi--accent {
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(56, 189, 248, 0.08);
}
html[data-theme="light"] .insights-finance-kpi--accent {
    border-color: rgba(14, 165, 233, 0.35);
    background: rgba(14, 165, 233, 0.08);
}
.insights-finance-kpi-lbl {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.35rem;
}
.insights-finance-kpi-val {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text);
}
.insights-finance-kpi-sub {
    display: block;
    font-size: 0.78rem;
    line-height: 1.35;
    margin-top: 0.3rem;
}
.insights-finance-tips-title {
    font-size: 0.92rem;
    font-weight: 650;
    margin: 1.1rem 0 0.5rem;
    color: var(--text);
}
.insights-finance-tips {
    margin: 0;
    padding-left: 1.2rem;
    line-height: 1.55;
    font-size: 0.9rem;
    color: var(--text);
}
.insights-finance-tips li + li {
    margin-top: 0.4rem;
}
@media (max-width: 520px) {
    .insights-finance-kpis {
        grid-template-columns: 1fr 1fr;
    }
}
.insights-bar-chart-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -0.25rem;
    padding: 0 0.25rem 0.25rem;
}
.insights-bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2px;
    height: 140px;
    padding: 0 0.15rem;
}
.insights-bar-chart--daily {
    justify-content: flex-start;
    gap: 3px;
}
.insights-bar-chart--daily .insights-bar-cell {
    flex: 0 0 1.1rem;
    min-width: 1.1rem;
}
.insights-hbar-scroll {
    max-height: 280px;
    overflow-y: auto;
    padding-right: 0.25rem;
}
.insights-hbar-scroll--daily {
    max-height: 320px;
}
.insights-hbar-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.38rem;
    font-size: 0.8rem;
}
.insights-hbar-lbl {
    flex: 0 0 2rem;
    text-align: right;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.insights-hbar-scroll--daily .insights-hbar-lbl {
    flex: 0 0 2.6rem;
}
.insights-hbar-track {
    flex: 1;
    height: 10px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
    min-width: 0;
}
.insights-hbar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--accent2), var(--accent-dim));
    min-width: 2px;
}
.insights-hbar-meta {
    flex: 0 0 5.75rem;
    text-align: right;
    font-size: 0.72rem;
    color: var(--muted);
    white-space: nowrap;
}
.insights-debt-list {
    margin: 0;
    padding-left: 1.1rem;
    line-height: 1.55;
    font-size: 0.9rem;
    color: var(--muted);
}
.insights-debt-list li + li {
    margin-top: 0.45rem;
}
.insights-bar-cell {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}
.insights-bar-fill {
    width: 100%;
    max-width: 14px;
    margin: 0 auto;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, var(--accent2), var(--accent-dim));
    min-height: 4px;
}
.insights-bar-label {
    font-size: 0.62rem;
    color: var(--muted);
    margin-top: 0.25rem;
    white-space: nowrap;
}

/* Dashboard — strip paket (minimal) */
.plan-strip {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--panel);
    margin-bottom: 1rem;
}
.plan-strip--free {
    border-color: rgba(251, 191, 36, 0.22);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.07), var(--panel));
}
.plan-strip-inner {
    display: flex;
    align-items: center;
    gap: 0.65rem 1rem;
    flex-wrap: wrap;
    padding: 0.55rem 1rem;
}
.plan-badge {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: var(--warn);
    background: rgba(251, 191, 36, 0.1);
}
.plan-strip-text {
    margin: 0;
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.45;
}
.plan-strip-text a {
    font-weight: 500;
}
.plan-strip--stress {
    border-color: rgba(248, 113, 113, 0.35);
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.08), var(--panel));
    margin-bottom: 1rem;
}
.plan-strip--stress .plan-strip-inner {
    align-items: flex-start;
    padding: 0.85rem 1.25rem 0.95rem;
    gap: 1rem 1.25rem;
}
.plan-strip--stress .plan-strip-text {
    line-height: 1.55;
    padding-top: 0.08rem;
}
.plan-badge--stress {
    border-color: rgba(248, 113, 113, 0.45);
    color: var(--danger);
    background: rgba(248, 113, 113, 0.12);
}

/* Pengaturan — full width & tata letak */
body[data-page="settings"] .content {
    max-width: none;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    padding-top: 1.25rem;
}
.settings-page--full {
    width: 100%;
    max-width: none;
    margin: 0;
}
.settings-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.35rem;
    padding: 0.2rem 0;
    border-bottom: 1px solid var(--border);
}
.settings-tab-btn {
    font: inherit;
    font-size: 0.87rem;
    font-weight: 600;
    padding: 0.5rem 1.1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
.settings-tab-btn:hover {
    color: var(--text);
    background: rgba(148, 163, 184, 0.12);
}
.settings-tab-btn.is-active {
    color: var(--text);
    border-color: var(--border);
    background: var(--panel);
}
.settings-tab-panels .settings-tab-panel[hidden] {
    display: none !important;
}
.settings-tab-panel.is-active:not([hidden]) {
    display: block;
}
.settings-card + .settings-card {
    margin-top: 1.35rem;
}
body[data-page="settings"] .settings-card > .card-head,
body[data-page="settings"] .settings-card > .card-body {
    padding-left: 1.85rem;
    padding-right: 1.85rem;
}
body[data-page="settings"] .settings-card > .card-head {
    padding-top: 1.3rem;
    padding-bottom: 0.95rem;
}
body[data-page="settings"] .settings-card > .card-body {
    padding-top: 1.4rem;
    padding-bottom: 1.85rem;
}

.settings-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.35rem;
    padding: 1.1rem 1.65rem;
}
.settings-summary-main {
    min-width: 0;
}
.settings-summary-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 0.25rem;
}
.settings-summary-value {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height:1.2;
}
.settings-summary-meta {
    font-size: 0.82rem;
    margin-top: 0.3rem;
}
.settings-summary-aside {
    flex-shrink: 0;
    align-self: center;
}

.plan-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.32rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--border);
}
.plan-pill--free {
    color: var(--warn);
    border-color: rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.1);
}
.plan-pill--premium {
    color: var(--success);
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(56, 189, 248, 0.12);
}
.plan-pill--sm {
    font-size: 0.62rem;
    padding: 0.2rem 0.45rem;
}

.settings-subblock-title {
    font-size: 0.79rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin: 0 0 0.75rem;
}
.settings-divider {
    height: 1px;
    background: var(--line-sep);
    margin: 1.65rem 0;
}

.settings-callout {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: 0.9rem;
    line-height: 1.5;
}
.settings-callout--warn {
    border-color: rgba(251, 191, 36, 0.28);
    background: rgba(251, 191, 36, 0.06);
}

.settings-quota-wrap {
    overflow-x: auto;
    margin-bottom: 0.65rem;
}
.settings-quota-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.settings-quota-table th,
.settings-quota-table td {
    padding: 0.45rem 0.65rem 0.45rem 0;
    text-align: left;
    border-bottom: 1px solid var(--line-sep);
}
.settings-quota-table th {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}
.settings-quota-table tbody tr.is-full td {
    color: var(--warn);
}
.settings-quota-notes {
    margin: 0;
    padding-left: 1.15rem;
    font-size: 0.84rem;
    line-height: 1.5;
}
.settings-quota-notes li + li {
    margin-top: 0.35rem;
}

.settings-outlet-table code {
    font-size: 0.82rem;
}
.settings-outlet-table .settings-outlet-cell-phone {
    white-space: nowrap;
    font-size: 0.88rem;
}
.settings-outlet-table .settings-outlet-cell-address {
    max-width: 22rem;
    white-space: normal;
    font-size: 0.86rem;
    line-height: 1.45;
    vertical-align: top;
}

.settings-quota-alert {
    margin-bottom: 1rem;
    padding: 1rem 1.35rem 1.15rem;
    border-color: rgba(251, 191, 36, 0.35) !important;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), var(--panel)) !important;
    box-sizing: border-box;
}
.settings-quota-alert-inner {
    display: flex;
    align-items: flex-start;
    gap: 1rem 1.35rem;
    flex-wrap: wrap;
    padding: 0;
}
.settings-quota-alert .plan-badge {
    margin-top: 0.12rem;
}
.settings-quota-alert-text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    flex: 1;
    min-width: 220px;
    padding: 0.15rem 0 0;
}

.settings-store-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    gap: 1.5rem 2.25rem;
    align-items: start;
}
@media (max-width: 960px) {
    .settings-store-split {
        grid-template-columns: 1fr;
    }
}
.settings-ident-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.15rem 1.35rem;
}
@media (max-width: 640px) {
    .settings-ident-grid {
        grid-template-columns: 1fr;
    }
}
.settings-field-span2 {
    grid-column: 1 / -1;
}

.settings-quota-label-cell {
    vertical-align: top;
}
.quota-label {
    display: block;
    font-weight: 500;
}
.quota-hint {
    display: block;
    font-size: 0.78rem;
    line-height: 1.4;
    margin-top: 0.25rem;
}

.settings-plan-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    gap: 1.25rem 1.75rem;
    align-items: start;
    margin-top: 1rem;
}
@media (max-width: 900px) {
    .settings-plan-split {
        grid-template-columns: 1fr;
    }
}
.settings-plan-split-main {
    min-width: 0;
}
.settings-plan-split-aside {
    min-width: 0;
}
.settings-compare-wrap {
    overflow-x: auto;
}
.settings-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}
.settings-compare-table th,
.settings-compare-table td {
    padding: 0.5rem 0.65rem;
    text-align: left;
    border-bottom: 1px solid var(--line-sep);
    vertical-align: top;
}
.settings-compare-table th {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
}
.settings-compare-table tbody tr:last-child td {
    border-bottom: none;
}
.settings-compare-fn {
    font-size: 0.78rem;
    margin: 0.65rem 0 0;
    line-height: 1.45;
}
.settings-premium-aside {
    padding: 1rem 1.1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--panel2);
}
.settings-premium-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.86rem;
    line-height: 1.5;
}
.settings-premium-list li + li {
    margin-top: 0.45rem;
}

.settings-outlet-add-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.settings-outlet-add-span2 {
    grid-column: 1 / -1;
}
@media (max-width: 640px) {
    .settings-outlet-add-grid {
        grid-template-columns: 1fr;
    }
    .settings-outlet-add-span2 {
        grid-column: auto;
    }
}

.settings-license-modal-panel {
    max-width: min(480px, 96vw);
}
.settings-outlet-cell-license {
    white-space: nowrap;
    vertical-align: middle;
}

/* Varian kemasan / UOM (badge & toolbar preset) */
.product-uom-card .uom-preset-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-sep);
    background: var(--panel2);
}
.uom-preset-toolbar__label {
    font-size: 0.82rem;
    margin-right: 0.15rem;
}
.uom-level-badge {
    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: middle;
}
.uom-label-select-wrap {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 9rem;
}
.uom-label-select-wrap .uom-label-add-btn {
    flex: 0 0 auto;
    min-width: 1.85rem;
    padding-inline: 0.35rem;
    font-weight: 700;
    line-height: 1.2;
}
.uom-label-select-wrap .uom-label-select {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}
.page-toolbar-with-sidebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.75rem;
}
.page-toolbar-with-sidebar > .sidebar-collapse-toggle {
    flex-shrink: 0;
}
body[data-page="purchase"] .table-toolbar-wrap.page-toolbar-with-sidebar,
body[data-page="purchase_edit"] .txn-edit-toolbar.page-toolbar-with-sidebar {
    margin-bottom: 0.65rem;
}
body[data-page="products"] .page-filter-top-actions.page-toolbar-with-sidebar {
    margin-bottom: 0.5rem;
}

/* Satuan utama + satuan lainnya (form produk) */
.product-uom-unified {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-sep);
    background: var(--panel2);
    overflow: hidden;
}
.product-uom-unified .uom-field--main {
    padding: 1rem 1.1rem;
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.06), transparent);
    border-bottom: 1px solid var(--line-sep);
}
.product-uom-unified .uom-field--other,
.product-uom-section--unified-other {
    padding: 1rem 1.1rem 1.05rem;
}
.product-uom-unified .req-mark {
    color: var(--danger, #dc2626);
    font-weight: 700;
}
.uom-field-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.5rem;
}
.uom-field-head .label {
    margin: 0;
    font-weight: 650;
    font-size: 0.95rem;
}
.uom-field-head__sub {
    font-size: 0.8rem;
}
.uom-main-pill {
    font-size: 0.78rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(14, 165, 233, 0.35);
    background: rgba(14, 165, 233, 0.08);
    color: var(--muted);
    white-space: nowrap;
}
.uom-main-pill .uom-hint-base {
    color: var(--accent);
    font-weight: 700;
}
.uom-main-caption {
    margin: 0.45rem 0 0;
    font-size: 0.8rem;
    line-height: 1.4;
}
.uom-main-unit-row {
    display: flex;
    align-items: stretch;
    gap: 0.45rem;
    max-width: 28rem;
}
.uom-main-unit-row .uom-main-unit-select {
    flex: 1 1 auto;
    min-width: 0;
}
.uom-other-intro {
    margin: 0 0 0.65rem;
    font-size: 0.84rem;
    line-height: 1.45;
}
.uom-other-intro .uom-hint-base {
    color: var(--accent);
}
.uom-row-mini-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 0.3rem;
}
.uom-other-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.uom-other-row {
    padding: 0.75rem 0.8rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-sep);
    background: var(--card-bg, var(--panel));
}
.uom-other-row__body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.55rem 0.65rem;
}
.uom-other-row__unit {
    flex: 1 1 11rem;
    min-width: 9.5rem;
    max-width: 16rem;
}
.uom-other-row__unit .uom-label-select-wrap {
    width: 100%;
}
.uom-conv-line {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.35rem 0.45rem;
    flex: 1 1 14rem;
    min-width: 12rem;
}
.uom-conv-lbl {
    font-size: 0.72rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    flex: 0 0 auto;
}
.uom-conv-equation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    border: 1px dashed rgba(14, 165, 233, 0.35);
    background: rgba(14, 165, 233, 0.04);
}
.uom-conv-left-qty {
    font-weight: 700;
    font-size: 0.95rem;
    min-width: 1.25rem;
    text-align: center;
}
.uom-conv-equation .uom-qty-per-base {
    width: 4.25rem;
    min-width: 3.5rem;
    text-align: center;
    font-weight: 650;
}
.uom-conv-unit-a,
.uom-conv-base-label {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
    white-space: nowrap;
}
.uom-conv-base-label {
    color: var(--accent);
}
.uom-conv-eq {
    font-weight: 700;
    opacity: 0.55;
    font-size: 1rem;
}
.uom-other-row__sell {
    flex: 0 0 auto;
    width: 9.5rem;
    min-width: 8.5rem;
}
.uom-other-row__sell .input-compact {
    width: 100%;
}
.uom-default-check {
    margin: 0;
    font-size: 0.82rem;
    align-self: center;
    flex: 0 0 auto;
    white-space: nowrap;
}
.uom-other-row__body .uom-rm-row-btn {
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
}
.uom-preset-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
    margin-bottom: 0.65rem;
}
.uom-preset-toolbar__label {
    font-size: 0.8rem;
    margin-right: 0.15rem;
}
.uom-add-row-btn--primary {
    margin-top: 0.5rem;
    padding: 0.35rem 0;
    border: none;
    background: none;
    color: var(--accent);
    font-weight: 650;
    font-size: 0.88rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.uom-add-row-btn--primary:hover {
    text-decoration: underline;
}
@media (min-width: 720px) {
    .product-uom-unified .uom-field--main .uom-main-unit-row {
        max-width: 22rem;
    }
    .uom-other-row {
        padding: 0.8rem 0.9rem;
    }
    .uom-other-row__body {
        flex-wrap: nowrap;
        gap: 0.65rem 0.75rem;
    }
    .uom-conv-line {
        flex-wrap: nowrap;
    }
    .uom-conv-equation {
        flex-wrap: nowrap;
    }
}
@media (max-width: 719px) {
    .uom-other-row__unit {
        flex: 1 1 100%;
        max-width: none;
    }
    .uom-conv-line {
        flex: 1 1 100%;
    }
    .uom-other-row__sell {
        flex: 1 1 calc(100% - 3rem);
        min-width: 0;
    }
}
.product-uom-embed-list .uom-other-row__body {
    flex-wrap: wrap;
}

.product-form-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem 1rem;
    grid-column: 1 / -1;
}
.product-form-meta-grid .product-form-meta-cell {
    min-width: 0;
}
@media (max-width: 820px) {
    .product-form-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 520px) {
    .product-form-meta-grid {
        grid-template-columns: 1fr;
    }
}

/* Ikon SVG & checkbox — cegah membesar di dashboard/pengaturan */
svg.nav-icon,
svg.qa-btn-icon,
svg.mobile-bottom-nav-svg,
svg.cash-toolbar-svg,
svg.top-user-icon,
svg.sidebar-outlet-pill-ico,
svg.store-pill-icon,
svg.dash-insight-svg {
    width: 1.15rem;
    height: 1.15rem;
    max-width: 1.35rem;
    max-height: 1.35rem;
    flex-shrink: 0;
    display: block;
}
.qa-btn svg.qa-btn-icon {
    width: 1.35rem;
    height: 1.35rem;
}
.settings-page input[type="checkbox"],
.settings-features-panel input[type="checkbox"],
.settings-field-span2 input[type="checkbox"],
.settings-resto-panel input[type="checkbox"],
.settings-toggle-label input[type="checkbox"],
.check-label input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    min-width: 1.05rem;
    min-height: 1.05rem;
    max-width: 1.05rem;
    max-height: 1.05rem;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
    vertical-align: middle;
}
.quick-actions .qa-btn > svg {
    width: 1.35rem;
    height: 1.35rem;
    max-width: 1.5rem;
    max-height: 1.5rem;
    flex-shrink: 0;
}

/* —— Mobile bottom nav & tablet polish —— */
@media (min-width: 769px) and (max-width: 1200px) {
    .pos-layout {
        grid-template-columns: minmax(0, 1.35fr) minmax(280px, 380px);
    }
    body[data-page="pos"] .pos-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    body[data-page="purchase"] .pos-product-grid,
    body[data-page="stock_add"] .pos-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}
@media (max-width: 1024px) {
    body.app-body:not(.pos-full):not(.login-body):not(.setup-preset-mode) {
        padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0));
    }
    body.app-body:not(.pos-full):not(.setup-preset-mode) .app-shell .main {
        width: 100%;
        margin-left: 0;
    }
    body.app-body:not(.pos-full):not(.setup-preset-mode) .nav-drawer-toggle {
        display: inline-flex;
    }
    body.app-body:not(.pos-full):not(.setup-preset-mode) .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 390;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }
    body.nav-drawer-open:not(.setup-preset-mode) .nav-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    body.app-body:not(.pos-full):not(.setup-preset-mode) #app-sidebar.sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(292px, 88vw);
        max-width: 100%;
        z-index: 400;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    body.app-body:not(.pos-full):not(.setup-preset-mode):not(.nav-drawer-open) #app-sidebar.sidebar {
        transform: translateX(-100%);
        box-shadow: none;
    }
    body.nav-drawer-open #app-sidebar.sidebar,
    #app-sidebar.sidebar.sidebar-drawer-open {
        display: flex !important;
        visibility: visible !important;
        transform: translateX(0) !important;
        box-shadow: var(--elev);
        z-index: 600;
        pointer-events: auto !important;
    }
    body.app-sidebar-collapsed.nav-drawer-open #app-sidebar.sidebar {
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }
    body.nav-drawer-open:not(.setup-preset-mode) .nav-backdrop {
        z-index: 590;
        pointer-events: auto !important;
        cursor: pointer;
    }
    body.nav-drawer-open:not(.setup-preset-mode) .app-shell .main {
        pointer-events: auto;
    }
    .nav-drawer-toggle {
        position: relative;
        z-index: 650;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        pointer-events: auto;
    }
    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 200;
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        gap: 0.15rem;
        padding: 0.35rem 0.4rem calc(0.35rem + env(safe-area-inset-bottom, 0));
        background: var(--pos-topbar-bg);
        border-top: 1px solid var(--border);
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
    }
    .mobile-bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        padding: 0.25rem 0.15rem;
        font-size: 0.62rem;
        font-weight: 600;
        color: var(--muted);
        text-decoration: none;
        border-radius: var(--radius-sm);
        min-width: 0;
    }
    .mobile-bottom-nav-item.is-active {
        color: var(--accent);
        background: rgba(56, 189, 248, 0.12);
    }
    .mobile-bottom-nav-svg {
        width: 1.15rem;
        height: 1.15rem;
    }
    .page-filter-toolbar .cash-filter-inline.page-filter-form,
    .page-filter-toolbar .page-filter-form {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-end;
        gap: 0.4rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100%;
    }
    .page-filter-toolbar .cash-f-grow,
    .page-filter-toolbar .input[type="date"],
    .page-filter-toolbar select.input-compact {
        flex: 0 0 auto;
        min-width: 7.2rem;
    }
    .page-filter-toolbar .page-filter-submit {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* Setup preset: layar fokus tanpa navigasi */
body.setup-preset-mode .sidebar,
body.setup-preset-mode .topbar,
body.setup-preset-mode .mobile-bottom-nav,
body.setup-preset-mode .nav-backdrop {
    display: none !important;
}
body.setup-preset-mode .app-shell .main {
    width: 100%;
    margin-left: 0;
}
body.setup-preset-mode .content {
    max-width: 920px;
    margin: 0 auto;
    padding: 1.25rem 1rem 2rem;
}

/* Setup preset toko */
.setup-preset-q {
    margin-bottom: 0.85rem;
    max-width: 28rem;
}
.setup-preset-actions-top {
    margin-bottom: 0.65rem;
}
.setup-preset-head {
    align-items: flex-start;
}
.setup-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
    gap: 0.65rem;
}
/* display:flex mengalahkan atribut hidden bawaan browser — filter preset tidak jalan */
.setup-preset-card[hidden] {
    display: none !important;
}
.setup-preset-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 0.9rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel2);
    cursor: pointer;
    font: inherit;
    color: inherit;
    width: 100%;
    margin: 0;
    transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.setup-preset-card:hover {
    border-color: rgba(56, 189, 248, 0.45);
}
.setup-preset-card.is-selected {
    border-color: var(--accent);
    box-shadow: var(--neon-glow-soft);
}
.setup-preset-svg {
    color: var(--accent);
    display: block;
}
.setup-preset-icon {
    font-size: 1.75rem;
    line-height: 1;
}
.setup-preset-label {
    font-weight: 650;
    font-size: 0.82rem;
}
.setup-preset-desc {
    font-size: 0.68rem;
    line-height: 1.35;
}
.setup-preset-meta {
    margin-top: auto;
    padding-top: 0.25rem;
}
.setup-preset-info {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    font-weight: 600;
}
.setup-preset-feature-list {
    margin: 0;
    padding-left: 1rem;
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.45;
}

/* Dialog ala aplikasi (alert/confirm custom) */
.kasir-ui-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--modal-backdrop);
    backdrop-filter: blur(4px);
}
.kasir-ui-dialog-overlay[hidden] {
    display: none !important;
}
.kasir-ui-dialog {
    width: min(100%, 400px);
    max-height: min(86vh, 520px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--elev), var(--neon-surface);
}
.kasir-ui-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--line-sep);
}
.kasir-ui-dialog-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}
.kasir-ui-dialog-body {
    padding: 1rem;
    overflow-y: auto;
}
.kasir-ui-dialog-message {
    margin: 0;
    white-space: pre-wrap;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
}
.kasir-ui-dialog-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--line-sep);
}

/* Brand KVORA — teks dengan “slice” cahaya */
.brand-text-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}
.brand-text--kvora {
    font-weight: 800;
    letter-spacing: 0.14em;
    font-size: 0.95rem;
    line-height: 1;
    background: linear-gradient(180deg, #ecfdf5 0%, #6ee7b7 45%, #10b981 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
html[data-theme="light"] .brand-text--kvora {
    background: linear-gradient(180deg, #022c22 0%, #047857 50%, #059669 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
.brand-kvora-slice {
    display: block;
    width: 100%;
    min-width: 4rem;
    height: 2px;
    margin-top: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(52, 211, 153, 0.95) 50%, transparent 100%);
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.55);
}
tr.row-warn > td,
tr.pur-line-expired > td {
    background: rgba(244, 67, 54, 0.12) !important;
}
tr.pur-line-highlight-ed > td {
    background: rgba(239, 68, 68, 0.24) !important;
    box-shadow: inset 4px 0 0 #ef4444;
}
html[data-theme="light"] tr.row-warn > td,
html[data-theme="light"] tr.pur-line-expired > td {
    background: rgba(244, 67, 54, 0.1) !important;
}
html[data-theme="light"] tr.pur-line-highlight-ed > td {
    background: rgba(254, 202, 202, 0.85) !important;
    box-shadow: inset 4px 0 0 #dc2626;
}
.input.input-error,
.input-error {
    border-color: #F44336 !important;
    box-shadow: 0 0 0 1px rgba(244, 67, 54, 0.35);
}
.brand-text--store {
    font-weight: 800;
    font-size: 0.92rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--text, #e2e8f0);
    white-space: normal;
    word-break: break-word;
}
html[data-theme="light"] .brand-text--store {
    color: #0f172a;
}
.brand-text-sub {
    font-weight: 650;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Pengaturan: kartu centang fitur */
.settings-preset-strip {
    padding: 1rem 1.15rem;
    border: 1px solid var(--line-sep);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.02);
}
.settings-preset-strip .btn {
    margin-top: 0.35rem;
}
.settings-preset-strip--top {
    margin: 0 0 1.65rem;
    padding-bottom: 0.35rem;
}
.settings-ident-head {
    margin-top: 0.5rem;
    padding-top: 0.25rem;
}

.settings-features-panel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.65rem;
    margin: 0.75rem 0 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.02);
}
.settings-features-panel > .settings-subblock-title,
.settings-features-panel > .settings-field-span2 {
    grid-column: 1 / -1;
}
.settings-features-intro {
    grid-column: 1 / -1;
    margin: 0 0 0.25rem;
    font-size: 0.84rem;
}
.settings-toggle-card {
    border: 1px solid var(--line-sep);
    border-radius: var(--radius-sm);
    background: var(--panel);
    padding: 0.55rem 0.65rem;
}

/* OCR panel */
.settings-invoice-ocr-panel {
    padding: 0.1rem 0;
}
.settings-ocr-notice {
    background: #fffbeb;
    border: 1px solid #f59e0b;
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.84rem;
    line-height: 1.5;
    color: #78350f;
}
.settings-ocr-notice strong {
    color: #92400e;
    margin-right: 0.3rem;
}
.settings-invoice-ocr-head {
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--line-sep);
    margin-bottom: 0.1rem;
}
.settings-ocr-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.15rem 1.45rem;
}
.settings-ocr-section {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
@media (max-width: 640px) {
    .settings-ocr-grid {
        grid-template-columns: 1fr;
    }
}
.settings-toggle-label {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    cursor: pointer;
    margin: 0;
}
.settings-toggle-label input {
    margin-top: 0.2rem;
    flex-shrink: 0;
}
.settings-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    font-size: 0.84rem;
    line-height: 1.35;
}
.settings-toggle-text strong {
    font-weight: 650;
}

.settings-resto-panel {
    grid-column: 1 / -1;
    margin-top: 0.35rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.02);
}
.settings-resto-panel__title {
    margin: 0 0 0.65rem;
}
.settings-resto-panel__body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.settings-resto-panel__item {
    margin: 0;
}
.settings-resto-panel__item--nested {
    margin-top: 0.15rem;
    margin-left: 0.2rem;
    border-style: dashed;
    background: rgba(0, 0, 0, 0.06);
}
.settings-resto-panel__hint {
    margin: 0.4rem 0 0 1.6rem;
    font-size: 0.8rem;
    line-height: 1.45;
}
.settings-resto-panel__hint:last-child {
    margin-bottom: 0;
}
.settings-resto-panel .alert {
    margin: 0.4rem 0 0 1.6rem;
}

/* Pengaturan toko — input & layout mobile */
@media (max-width: 768px) {
    body[data-page="settings"] .content {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 1rem;
    }
    .settings-page--full,
    .settings-store-split,
    .settings-store-col,
    .settings-store-col--form,
    .settings-ident-grid,
    .settings-ident-grid > *,
    .settings-features-panel,
    .settings-field-span2,
    .settings-card .card-body {
        min-width: 0;
        max-width: 100%;
    }
    .settings-ident-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
    .settings-features-panel {
        grid-template-columns: 1fr;
        padding: 0.65rem;
    }
    body[data-page="settings"] .settings-card > .card-head,
    body[data-page="settings"] .settings-card > .card-body {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }
    .settings-page .input,
    .settings-page select.input,
    .settings-page textarea.input,
    .settings-page input[type="file"].input {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px;
    }
    .settings-pwa-url-hint code,
    .settings-page .hint-field code,
    .settings-page code {
        word-break: break-all;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
    }
    .settings-preset-strip .btn {
        width: 100%;
        justify-content: center;
    }
    .settings-bt-actions {
        flex-direction: column;
    }
    .settings-bt-actions .btn {
        width: 100%;
        justify-content: center;
    }
    .settings-resto-panel__hint,
    .settings-resto-panel .alert {
        margin-left: 0;
    }
    .settings-tabs-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 0.35rem;
    }
    .settings-tab-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }
    .settings-pricing-markup-grid {
        max-width: none !important;
    }
    .settings-page .form-actions {
        flex-direction: column;
    }
    .settings-page .form-actions .btn {
        width: 100%;
        justify-content: center;
    }
    .settings-bpr-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.15rem;
        padding: 0 0.15rem;
    }
}
.settings-bpr-table {
    font-size: 0.86rem;
    min-width: 920px;
}

/* —— PWA install & printer Bluetooth —— */
.pwa-install-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(4.25rem + env(safe-area-inset-bottom, 0));
    z-index: 380;
    padding: 0.55rem 0.75rem;
    background: var(--panel);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.28);
}
@media (max-width: 768px) {
    body.pos-full .pwa-install-banner,
    body:not(.app-body) .pwa-install-banner {
        bottom: env(safe-area-inset-bottom, 0);
    }
}
.pwa-install-banner-inner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    max-width: 720px;
    margin: 0 auto;
}
.pwa-install-banner-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.82rem;
}
.pwa-install-banner-text strong {
    font-size: 0.9rem;
}
.pwa-install-banner-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
@media (min-width: 769px) {
    .pwa-install-banner.pwa-install-banner--desktop,
    body.login-body .pwa-install-banner.pwa-install-banner--desktop,
    body.app-body .pwa-install-banner.pwa-install-banner--desktop {
        left: auto;
        right: 1rem;
        top: 1rem;
        bottom: auto;
        width: min(300px, calc(100vw - 2rem));
        max-width: 300px;
        padding: 0.65rem 0.75rem;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        border-top: 1px solid var(--border);
        box-shadow: var(--elev);
    }
    body.login-body .pwa-install-banner.pwa-install-banner--desktop {
        top: 4.25rem;
    }
    .pwa-install-banner.pwa-install-banner--desktop .pwa-install-banner-inner,
    body.login-body .pwa-install-banner.pwa-install-banner--desktop .pwa-install-banner-inner,
    body.app-body .pwa-install-banner.pwa-install-banner--desktop .pwa-install-banner-inner {
        flex-direction: column;
        align-items: stretch;
        max-width: none;
        margin: 0;
    }
    .pwa-install-banner.pwa-install-banner--desktop .pwa-install-banner-actions,
    body.login-body .pwa-install-banner.pwa-install-banner--desktop .pwa-install-banner-actions,
    body.app-body .pwa-install-banner.pwa-install-banner--desktop .pwa-install-banner-actions {
        justify-content: flex-end;
    }
}
.kasir-bt-printer-chip {
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel2);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    white-space: nowrap;
}
.kasir-bt-printer-chip.is-supported {
    display: inline-flex;
}
.kasir-bt-printer-chip.is-connected {
    color: var(--accent2);
    border-color: rgba(56, 189, 248, 0.45);
}
.kasir-bt-printer-chip.is-reconnecting {
    opacity: 0.85;
    animation: kasir-bt-pulse 1.1s ease-in-out infinite;
}
@keyframes kasir-bt-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}
.pos-topbar-inner > .kasir-bt-printer-chip {
    margin-left: auto;
}
body[data-page="pos"] .pos-topbar-inner > .pos-live-clock + .kasir-bt-printer-chip {
    margin-left: 0.35rem;
}
.settings-bt-printer-panel {
    padding: 1rem 1.1rem;
    margin-top: 0.35rem;
}
.settings-bt-printer-title {
    margin: 0 0 0.45rem;
    font-size: 1rem;
}
.settings-bt-status {
    margin: 0.5rem 0;
    font-size: 0.88rem;
}
.settings-bt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

/* Modul apotek — alur PBF */
.pharmacy-flow-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}
.pharmacy-flow-steps li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.75rem;
    align-items: start;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    background: var(--surface-2, #f4f7f6);
    border: 1px solid var(--border, #e2e8e6);
}
.pharmacy-flow-num {
    grid-row: span 2;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #0d6b4c;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pharmacy-hub-grid {
    margin-top: 1rem;
}
.pharmacy-chain-timeline {
    display: grid;
    gap: 1rem;
}
.pharmacy-chain-step {
    padding: 1rem 1.1rem;
    border-left: 4px solid #cbd5e1;
    background: var(--surface-2, #f8fafc);
    border-radius: 0 10px 10px 0;
}
.pharmacy-chain-step.is-done {
    border-left-color: #0d6b4c;
}
.pharmacy-chain-step.is-partial {
    border-left-color: #d97706;
}
.pharmacy-chain-step h3 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
}
.settings-pharmacy-panel {
    grid-column: 1 / -1;
    width: 100%;
    padding: 0.85rem 1.1rem;
    border-color: #b8e0d0;
    background: #f0faf6;
}
.settings-ph-sign-block {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--border, #d1d5db);
}
.settings-ph-sign-block .settings-subblock-title {
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
}
.settings-ph-sign-block > .hint-field {
    margin: 0 0 0.85rem;
}
.ph-sign-settings-doc {
    margin: 0 0 1rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: 0.85rem 1.15rem;
}
.ph-sign-settings-doc legend {
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0 0.35rem;
}
.ph-sign-settings-doc .form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
}
@media (max-width: 1100px) {
    .ph-sign-settings-doc .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 520px) {
    .ph-sign-settings-doc .form-grid {
        grid-template-columns: 1fr;
    }
}
.settings-sp-legal-panel {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-soft, #e8ece9);
}
.settings-sp-legal-panel .settings-ident-grid {
    margin-top: 0.75rem;
}
.pharmacy-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border, #e2e8e6);
    overflow-x: auto;
}
.pharmacy-tabs__item {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pharmacy-tabs__item:hover {
    background: var(--surface-2, #f1f5f9);
    color: var(--text, #1e293b);
}
.pharmacy-tabs__item.is-active {
    background: #0d6b4c;
    color: #fff;
    border-color: #0a5a40;
}
.pharmacy-lines-layout {
    display: grid;
    gap: 0.75rem;
}
.pharmacy-prod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.5rem;
    max-height: 14rem;
    overflow-y: auto;
    margin-top: 0.5rem;
}
.pharmacy-prod-grid .ph-prod-pick {
    text-align: left;
    cursor: pointer;
}
.pharmacy-purchase-hint {
    font-size: 0.9rem;
}
.pharmacy-flow-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.4rem;
    margin-top: 0.5rem;
}
.pharmacy-flow-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--border, #d1d5db);
    background: var(--surface-2, #f8fafc);
    color: var(--text, #1e293b);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s;
}
.pharmacy-flow-chip:hover {
    border-color: #0d6b4c;
    background: #ecfdf5;
}
.pharmacy-flow-chip__num {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: #0d6b4c;
    color: #fff;
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pharmacy-flow-arrow {
    color: var(--text-muted, #94a3b8);
    font-size: 1rem;
    font-weight: 700;
    user-select: none;
}
.pharmacy-prod-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.ph-prod-toolbar,
.ph-filter-one-line.page-filter-form {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.35rem;
}
.ph-prod-toolbar .input-search,
.ph-filter-one-line.page-filter-form .input-compact,
.ph-filter-one-line.page-filter-form .input-search {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}
.ph-filter-one-line.page-filter-form .btn {
    flex-shrink: 0;
}
.ph-prod-toolbar .btn {
    flex-shrink: 0;
}
.card-head--split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}
.card-head--split .badge-status {
    align-self: center;
}
.ph-doc-head-meta {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
}
.ph-doc-inline-note {
    margin: 0 0 1rem;
}
.ph-doc-read {
    margin-bottom: 1.25rem;
}
.ph-doc-intro {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}
.ph-doc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: 0.65rem;
}
.ph-doc-card {
    border: 1px solid var(--border, #e2e8e6);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    background: var(--surface-2, #f8faf9);
}
.ph-doc-card--wide {
    grid-column: 1 / -1;
}
.ph-doc-card--highlight {
    border-color: rgba(13, 107, 76, 0.35);
    background: rgba(13, 107, 76, 0.06);
}
.ph-doc-card--highlight .ph-doc-card__value {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--accent-dim, #0f766e);
}
.ph-doc-card__label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted, #64748b);
    margin-bottom: 0.2rem;
}
.ph-doc-card__value {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    word-break: break-word;
}
.ph-doc-table-title {
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
    font-weight: 650;
}
.ph-doc-table-wrap {
    margin-bottom: 0.5rem;
}
.ph-prod-hint {
    font-size: 0.82rem;
    margin: 0 0 0.5rem;
}
.ph-prod-results-wrap {
    max-height: 14rem;
    overflow-y: auto;
    border: 1px solid var(--border, #e2e8e6);
    border-radius: 8px;
}
.ph-prod-pick-row:hover {
    background: rgba(13, 107, 76, 0.07);
}
.ph-prod-results-table .btn-xs {
    white-space: nowrap;
}
.ph-flash-fallback {
    display: none !important;
}
.ph-approve-banner {
    margin-bottom: 0.75rem;
}
.ph-approve-toolbar {
    flex-wrap: wrap;
    gap: 0.5rem;
}
.kasir-notify-toast {
    position: fixed;
    right: 0.85rem;
    top: 0.85rem;
    z-index: 1500;
    max-width: min(400px, calc(100vw - 1.7rem));
    padding: 0.65rem 0.9rem;
    border-radius: 10px;
    border: 1px solid var(--border, #cbd5e1);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    font-size: 0.88rem;
    font-weight: 500;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
}
.kasir-notify-toast.is-show {
    opacity: 1;
    transform: translateY(0);
}
.kasir-notify-toast.is-ok {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #065f46;
}
.kasir-notify-toast.is-err {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
}
html[data-theme="dark"] .kasir-notify-toast.is-ok {
    background: rgba(16, 185, 129, 0.15);
    color: #a7f3d0;
}
html[data-theme="dark"] .kasir-notify-toast.is-err {
    background: rgba(239, 68, 68, 0.15);
    color: #fecaca;
}

/* —— Stok opname —— */
.opname-offline-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1400;
    padding: 0.55rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    background: #451a03;
    color: #fef3c7;
    border-top: 2px solid #f59e0b;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
}
.opname-offline-bar[hidden] {
    display: none !important;
}
.opname-stock-change-banner {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid #fcd34d;
    background: #fffbeb;
    color: #92400e;
    font-size: 0.88rem;
    line-height: 1.45;
}
.opname-stock-change-banner[hidden] {
    display: none !important;
}
.opname-stock-change-banner strong {
    color: #b45309;
}
.opname-stock-change-list {
    margin: 0.45rem 0 0;
    padding-left: 1.15rem;
    max-height: 8rem;
    overflow: auto;
}
html[data-theme="dark"] .opname-stock-change-banner {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.45);
    color: #fde68a;
}
#opname-table tr.opname-sys-changed {
    background: rgba(254, 243, 199, 0.55);
}
#opname-table tr.opname-sys-changed-sale {
    box-shadow: inset 3px 0 0 #f59e0b;
}
html[data-theme="dark"] #opname-table tr.opname-sys-changed {
    background: rgba(245, 158, 11, 0.08);
}
.opname-sys-changed-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: middle;
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fcd34d;
    white-space: nowrap;
}
.opname-sys-changed-badge.is-sale {
    background: #ffedd5;
    color: #c2410c;
    border-color: #fdba74;
}
.opname-sys-qty.is-changed {
    color: #b45309;
    font-weight: 700;
}
.opname-sys-qty-hint {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: #b45309;
    margin-top: 0.15rem;
}
#opname-draft-status.is-saving::before {
    content: '';
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.35rem;
    border: 2px solid #94a3b8;
    border-top-color: var(--accent, #2563eb);
    border-radius: 50%;
    vertical-align: -0.1rem;
    animation: opname-spin 0.7s linear infinite;
}
@keyframes opname-spin {
    to { transform: rotate(360deg); }
}
.opname-save-overlay {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
}
.opname-save-overlay[hidden] {
    display: none !important;
}
.opname-save-overlay-panel {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    text-align: center;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
    min-width: min(280px, calc(100vw - 2rem));
}
.opname-save-overlay-panel .opname-save-spinner {
    width: 2rem;
    height: 2rem;
    margin: 0 auto 0.75rem;
    border: 3px solid #e2e8f0;
    border-top-color: var(--accent, #2563eb);
    border-radius: 50%;
    animation: opname-spin 0.7s linear infinite;
}
.btn.is-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.85;
}
.btn.is-loading::after {
    content: '';
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    margin-left: 0.45rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    vertical-align: -0.1rem;
    animation: opname-spin 0.7s linear infinite;
}
.opname-phys-wrap {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.stk-opname-phys[readonly] {
    background: #f1f5f9;
    cursor: pointer;
    max-width: 6.5rem;
}
html[data-theme="dark"] .stk-opname-phys[readonly] {
    background: #1e293b;
}
.opname-lot-badge {
    display: block;
    font-size: 0.72rem;
    margin-top: 0.2rem;
    text-align: right;
}
.opname-phys-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.opname-phys-modal[hidden] {
    display: none !important;
}
.opname-phys-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}
.opname-phys-modal-panel {
    position: relative;
    z-index: 1;
    width: min(640px, 100%);
    max-height: 90vh;
    overflow: auto;
    margin: 0;
}
body.opname-phys-modal-open {
    overflow: hidden;
}
#opname-phys-lots-table .input-compact {
    min-width: 0;
    width: 100%;
}
#opname-phys-lots-table .opname-lot-sys-cell {
    white-space: nowrap;
}
#opname-phys-lots-table input[type="date"].input-compact {
    min-width: 9.5rem;
}

/* —— Shift kasir —— */
.shift-flow-page .content {
    max-width: 520px;
    margin-inline: auto;
    padding: 1.25rem 1.35rem 2rem;
}
.shift-flow {
    padding: 0.25rem 0 1rem;
}
.shift-close-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 0.25rem 0 1.5rem;
}
.shift-close-toolbar {
    margin-bottom: 0.85rem;
}
.shift-close-card {
    padding: 1.25rem 1.35rem;
}
.shift-close-card .shift-section {
    margin-bottom: 1.15rem;
}
.shift-history-page {
    max-width: none;
    margin: 0;
    width: 100%;
}
.shift-history-page--full {
    max-width: none;
    margin: 0;
    width: 100%;
}
.low-stock-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.82rem;
    margin: 0 0 0.75rem;
    line-height: 1.5;
}
.low-stock-legend .badge-warn { margin-right: 0.15rem; }
.exp-days-field {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.exp-days-field .input { max-width: 5.5rem; text-align: right; }
.exp-days-suffix { font-size: 0.82rem; color: var(--muted, #94a3b8); }
.exp-pur-links {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
}
.dash-expiry-snooze-form {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.dash-expiry-snooze-lbl { font-size: 0.82rem; }
.dash-expiry-snooze-input { max-width: 4.5rem; text-align: right; }
.dash-expiry-snooze-suffix { font-size: 0.82rem; }
.sale-return-hint {
    font-size: 0.86rem;
    line-height: 1.55;
    margin: 0 0 1rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.25);
}
.sale-return-subtitle { margin: 0 0 0.65rem; }
.ex-search-results {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 2px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}
.ex-search-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.7rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border, #eef2f7);
    cursor: pointer;
    font-size: 0.88rem;
}
.ex-search-opt:last-child { border-bottom: 0; }
.ex-search-opt:hover { background: rgba(15, 118, 110, 0.1); }
.ex-search-empty { padding: 0.6rem 0.7rem; font-size: 0.85rem; color: var(--muted, #94a3b8); }
.sale-ret-doc {
    max-width: 420px;
    margin: 0 auto;
    background: #fff;
    color: #000;
    padding: 1.1rem 1.25rem;
    border-radius: 10px;
    border: 1px solid var(--border, #e2e8f0);
}
.sale-ret-kop { text-align: center; margin-bottom: 0.6rem; }
.sale-ret-kop-name { font-weight: 700; font-size: 1.05rem; }
.sale-ret-kop-addr { font-size: 0.8rem; }
.sale-ret-title { text-align: center; font-size: 0.95rem; margin: 0.5rem 0 0.75rem; border-top: 1px dashed #000; border-bottom: 1px dashed #000; padding: 0.35rem 0; }
.sale-ret-meta { width: 100%; font-size: 0.85rem; margin-bottom: 0.6rem; }
.sale-ret-meta td:first-child { width: 38%; }
.sale-ret-section-lbl { font-weight: 700; font-size: 0.85rem; margin: 0.5rem 0 0.25rem; }
.sale-ret-tbl { width: 100%; font-size: 0.85rem; border-collapse: collapse; margin-bottom: 0.5rem; }
.sale-ret-tbl th, .sale-ret-tbl td { text-align: left; padding: 0.2rem 0; border-bottom: 1px dotted #999; }
.sale-ret-tbl th.num, .sale-ret-tbl td.num { text-align: right; }
.sale-ret-tbl-sum td { font-weight: 700; border-top: 1px solid #000; border-bottom: 0; }
.sale-ret-note { font-size: 0.82rem; margin: 0.5rem 0; }
.sale-ret-sign { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; font-size: 0.82rem; text-align: center; }
.sale-ret-sign-box { flex: 1; }
.sale-ret-sign-line { margin-top: 2.5rem; border-top: 1px solid #000; padding-top: 0.2rem; }
.sale-ret-foot { text-align: center; font-size: 0.72rem; margin-top: 0.8rem; }
@media print {
    .sale-ret-print-toolbar { display: none !important; }
    .sale-ret-doc { border: 0; max-width: none; }
}
.stk-recon {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin: 0 0 1rem;
}
.stk-recon--ok { border-color: rgba(56, 189, 248, 0.4); background: rgba(56, 189, 248, 0.06); }
.stk-recon--warn { border-color: rgba(244, 67, 54, 0.45); background: rgba(244, 67, 54, 0.06); }
.stk-recon-main {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.stk-recon-cell { display: flex; flex-direction: column; gap: 0.15rem; }
.stk-recon-lbl { font-size: 0.78rem; color: var(--muted, #94a3b8); }
.stk-recon-val { font-size: 1.05rem; font-weight: 700; }
.stk-recon-variants { margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px dashed var(--border, #e2e8f0); }
.stk-recon-variant-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; }
.stk-recon-variant {
    font-size: 0.86rem;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    background: var(--surface-2, rgba(148, 163, 184, 0.12));
}
.stk-recon-hint { margin: 0.65rem 0 0; font-size: 0.82rem; }
.shift-history-page .card-pro {
    padding: 0;
    overflow: hidden;
}
.shift-history-page .card-pro .kasir-dt-fixed {
    padding: 0 1.15rem 1rem;
}
.shift-history-page .toolbar {
    margin-bottom: 0.85rem;
}
.shift-flow-page .content-main {
    max-width: 520px;
    margin-inline: auto;
}
.shift-flow__hero {
    text-align: center;
    padding: 1.75rem 1.25rem 1.25rem;
    margin-bottom: 1rem;
    background: linear-gradient(145deg, var(--accent) 0%, #1d4ed8 100%);
    color: #fff;
    border: none;
}
.shift-flow__hero-icon svg {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto 0.75rem;
    display: block;
    opacity: 0.95;
}
.shift-flow__title {
    margin: 0 0 0.35rem;
    font-size: 1.35rem;
}
.shift-flow__sub {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
}
.shift-flow__card {
    padding: 1.25rem;
}
.shift-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.shift-tabs__btn {
    display: block;
    text-align: center;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    font-weight: 600;
    text-decoration: none;
    color: var(--text);
    background: var(--surface);
}
.shift-tabs__btn.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.shift-money-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.shift-money-field__prefix {
    font-weight: 600;
    color: var(--muted);
}
.shift-label-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}
.shift-pin-check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.92rem;
    cursor: pointer;
}
.shift-skip-form {
    margin-top: 1rem;
    text-align: center;
}
.shift-skip-link {
    font-size: 0.92rem;
}
.shift-flow__foot {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.92rem;
}
.shift-dl {
    margin: 0;
}
.shift-dl > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border-soft);
}
.shift-pay-breakdown__total {
    margin-top: 0.25rem;
    padding-top: 0.35rem;
    border-top: 1px dashed var(--border-soft);
}
.shift-pay-breakdown__total dd {
    font-weight: 700;
}
.shift-dl dt {
    margin: 0;
    color: var(--muted);
    font-weight: 500;
}
.shift-dl dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}
.shift-dl--grid > div:last-child {
    border-bottom: none;
}
.shift-close-card__title {
    margin: 0 0 1rem;
    font-size: 1.2rem;
}
.shift-section {
    margin-bottom: 1.35rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--border-soft);
}
.shift-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.shift-section__title {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}
.shift-system-row,
.shift-diff-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.65rem 0;
    margin-bottom: 0.75rem;
}
.shift-diff-row.is-short strong {
    color: #dc2626;
}
.shift-diff-row.is-over strong {
    color: #059669;
}
.shift-recap-total {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    margin: 0.75rem 0 0;
    font-size: 0.92rem;
}
.shift-sales-dt {
    max-height: 220px;
}
.pos-shift-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
    padding: 0.55rem 0.85rem;
    margin-bottom: 0.65rem;
    border-radius: var(--radius-md);
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.2);
    font-size: 0.88rem;
}
.pos-shift-bar--warn {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.25);
}
.pos-shift-bar__label {
    font-weight: 600;
}
.pos-shift-bar .btn {
    margin-left: auto;
}
.shift-print-doc {
    max-width: 420px;
    margin: 0 auto;
    padding: 1rem;
    font-size: 0.92rem;
}
.shift-print-doc__head {
    text-align: center;
    margin-bottom: 1rem;
}
.shift-print-doc__head h1 {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
}
.shift-print-doc__title {
    font-weight: 700;
    margin: 0.35rem 0;
}
.shift-print-block h2 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.5rem;
    color: var(--muted);
}
.shift-print-kv {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.75rem;
}
.shift-print-kv th,
.shift-print-kv td {
    padding: 0.25rem 0;
    vertical-align: top;
    text-align: left;
}
.shift-print-kv th {
    width: 48%;
    font-weight: 500;
    color: var(--muted);
}
@media print {
    .shift-print-toolbar {
        display: none !important;
    }
    .shift-print-doc {
        max-width: none;
    }
}

.dash-expiry-warn {
    margin-bottom: 1rem;
    border-left: 4px solid #f59e0b;
    padding: 1.1rem 1.25rem;
}
.dash-expiry-warn--danger {
    border: 1px solid rgba(248, 113, 113, 0.45);
    border-left: 4px solid #ef4444;
    background: rgba(239, 68, 68, 0.08);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.06);
}
.dash-expiry-warn--danger .dash-expiry-warn__text {
    color: #fecaca;
}
html[data-theme="light"] .dash-expiry-warn--danger {
    background: rgba(254, 226, 226, 0.65);
}
html[data-theme="light"] .dash-expiry-warn--danger .dash-expiry-warn__text {
    color: #991b1b;
}
.dash-expiry-warn__link {
    display: block;
    color: #fca5a5;
    text-decoration: none;
    padding: 0.35rem 0.45rem;
    margin: 0 -0.45rem;
    border-radius: var(--radius-sm);
    line-height: 1.5;
}
.dash-expiry-warn__link:hover {
    color: #fff;
    background: rgba(239, 68, 68, 0.2);
}
html[data-theme="light"] .dash-expiry-warn__link {
    color: #b91c1c;
}
html[data-theme="light"] .dash-expiry-warn__link:hover {
    color: #7f1d1d;
    background: rgba(254, 202, 202, 0.85);
}
.dash-expiry-warn__item--past .dash-expiry-warn__exp,
.dash-expiry-warn__exp {
    font-weight: 700;
    color: #f87171;
}
html[data-theme="light"] .dash-expiry-warn__item--past .dash-expiry-warn__exp,
html[data-theme="light"] .dash-expiry-warn__exp {
    color: #dc2626;
}
.dash-expiry-warn__pur {
    font-weight: 600;
}
.badge-danger {
    background: rgba(239, 68, 68, 0.2);
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.45);
}
html[data-theme="light"] .badge-danger {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
}
.dash-expiry-warn__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
}
.dash-expiry-warn__text {
    margin: 0 0 0.6rem;
    line-height: 1.55;
}
.dash-expiry-warn__list {
    margin: 0.5rem 0 1rem;
    padding-left: 1.1rem;
    font-size: 0.9rem;
    line-height: 1.6;
}
.dash-expiry-warn__list li {
    margin-bottom: 0.2rem;
}
.dash-expiry-warn__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border, rgba(148, 163, 184, 0.25));
}
.dash-expiry-snooze-form {
    margin: 0;
    margin-left: auto;
    padding: 0.3rem 0.55rem;
    border-radius: 8px;
    background: var(--surface-2, rgba(148, 163, 184, 0.1));
    gap: 0.5rem;
}
@media (max-width: 640px) {
    .dash-expiry-snooze-form {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }
}
.sale-return-card {
    padding: 1.25rem 1.35rem;
    max-width: 960px;
}
.sale-return-page .toolbar {
    margin-bottom: 0.85rem;
}
.sale-return-card .card-title {
    margin: 0 0 0.35rem;
}
.sale-return-card > .muted {
    margin: 0 0 1rem;
}
.sale-return-find-form {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--panel);
}
.sale-return-card .kasir-dt-fixed {
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.sale-return-card .kasir-dt-fixed__scroll {
    max-height: min(50vh, 420px);
}
.sale-return-card .data-table,
.sale-return-card .table-pro {
    width: 100%;
}
.sale-return-card .data-table thead th,
.sale-return-card .table-pro thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--panel);
}
.sale-returns-page .toolbar {
    margin-bottom: 0.85rem;
}
.sale-returns-page .card-pro {
    padding: 0;
    overflow: hidden;
}
.sale-returns-page .card-pro .kasir-dt-fixed {
    padding: 0 1.15rem 1rem;
}
.sale-returns-page .pager {
    padding: 0 1.15rem 1rem;
}
.pur-return-inline {
    display: inline;
    margin: 0;
}
.sale-return-sale-head {
    margin: 0.75rem 0 1rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-md);
    background: var(--surface-2, rgba(0, 0, 0, 0.04));
}
.sale-return-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
    font-size: 1.05rem;
}
.form-row-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}

/* POS flow cleanup: prevent legacy cart-card styles from breaking table layout */
body[data-page="pos"] .pos-layout--flow #pos-cart-panel.card-pro {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    max-height: none !important;
    margin: 0 !important;
}
body[data-page="pos"] .pos-layout--flow #pos-cart-lines {
    flex: 1 1 auto;
    overflow: auto;
    /* Override kasir-dt-fixed__scroll yang menghapus padding kiri */
    padding: 0.55rem 1.5rem 0.75rem !important;
    margin: 0;
}
/* Batalkan aturan datatable: kolom pertama tidak boleh padding-left: 0 */
body[data-page="pos"] .pos-layout--flow #pos-cart-lines .pos-cart-table thead th:first-child,
body[data-page="pos"] .pos-layout--flow #pos-cart-lines .pos-cart-table tbody td:first-child {
    padding-left: 0.75rem !important;
}
body[data-page="pos"] .pos-layout--flow #pos-cart-lines .pos-cart-table thead th:last-child,
body[data-page="pos"] .pos-layout--flow #pos-cart-lines .pos-cart-table tbody td:last-child {
    padding-right: 0.85rem !important;
}
body[data-page="pos"] .pos-layout--flow #pos-cart-lines .pos-cart-line {
    display: table-row;
    padding: 0;
    border-bottom: none;
}
body[data-page="pos"] .pos-layout--flow #pos-cart-lines .pos-cart-line strong {
    white-space: normal;
}
body[data-page="pos"] .pos-layout--flow .pos-cart-line-qty {
    align-self: auto;
}
/* Footer total & bayar — selaraskan padding kiri dengan keranjang */
body[data-page="pos"] .pos-layout--flow .pos-flow-panel__checkout {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}
body.app-sidebar-collapsed[data-page="pos"] .pos-layout--flow .pos-flow-panel__checkout,
body.pos-full[data-page="pos"] .pos-layout--flow .pos-flow-panel__checkout {
    left: 1.25rem;
}
body[data-page="pos"] .pos-layout--flow .pos-flow-cart-head {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}
body[data-page="pos"] .pos-layout--flow .pos-flow-panel__head {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* Safety: backdrop menu tidak boleh aktif di desktop */
@media (min-width: 1025px) {
    body .nav-backdrop {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    body.nav-drawer-open {
        overflow: auto !important;
    }
}

.dash-low-stock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.pur-col-action--btns {
    white-space: nowrap;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
}

.pur-ret-line--focus td {
    background: color-mix(in srgb, var(--accent, #0f766e) 12%, transparent);
}

.pur-ret-line--focus .sale-return-qty {
    border-color: var(--accent, #0f766e);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #0f766e) 25%, transparent);
}