:root {
    --bg0: #0a0e14;
    --bg: #101827;
    --panel: #151f32;
    --panel2: #1c2840;
    --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: #34d399;
    --warn: #fbbf24;
    --radius: 12px;
    --radius-sm: 8px;
    /* Tipografi sepenuhnya lokal / sistem — tanpa unduhan font dari internet (mode offline). */
    --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --sidebar-end: #121b2e;
    --topbar-bg: rgba(16, 24, 39, 0.88);
    --pos-topbar-bg: rgba(10, 14, 20, 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: #ecfdf5;
    --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 neon halus (emerald) — dipakai 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: #0ea5e9;
    --accent-dim: #0284c7;
    --accent2: #0369a1;
    --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(14, 165, 233, 0.7);
    --input-ring: rgba(14, 165, 233, 0.18);
    --qty-bg: rgba(6, 182, 212, 0.08);
    --nav-active-fg: #075985;
    --sidebar-foot-bg: rgba(247, 250, 255, 0.96);
    --empty-muted-bg: rgba(14, 165, 233, 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: #042f49;
    --btn-primary-gradient: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
    --btn-primary-gradient-hover: linear-gradient(180deg, #7dd3fc 0%, #0369a1 100%);
    --btn-primary-border: rgba(14, 165, 233, 0.75);
    --btn-primary-border-hover: rgba(56, 189, 248, 0.95);
    --btn-primary-shadow-hover: 0 2px 18px rgba(14, 165, 233, 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(14, 165, 233, 0.22), 0 0 44px -12px rgba(14, 165, 233, 0.14);
    --neon-glow-soft: 0 0 36px -12px rgba(14, 165, 233, 0.12);
    --neon-surface: 0 0 0 1px rgba(14, 165, 233, 0.1), 0 10px 40px -18px rgba(14, 165, 233, 0.12);
    --neon-sidebar: 4px 0 40px -14px rgba(14, 165, 233, 0.12);
    --neon-topbar: 0 1px 0 rgba(14, 165, 233, 0.12), 0 10px 36px -20px rgba(14, 165, 233, 0.1);
}

html[data-theme="light"] body {
    background:
        radial-gradient(920px 500px at 12% -8%, rgba(14, 165, 233, 0.08), transparent 55%),
        radial-gradient(1000px 540px at 85% -12%, rgba(14, 165, 233, 0.12), transparent 58%),
        radial-gradient(860px 460px at -8% 100%, rgba(59, 130, 246, 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);
    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;
}

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

.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: 1rem;
    height: 1rem;
    flex-shrink: 0;
    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(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 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(52, 211, 153, 0.55);
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 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(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 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: 95;
    }
}

/* 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 { margin: 0.25rem 0 0; font-size: 0.88rem; color: var(--muted); max-width: 52ch; }

.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(52, 211, 153, 0.08);
    border-color: rgba(52, 211, 153, 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; }

.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.75rem; }
body[data-page="purchase"] .main > .topbar { display: none; }
body[data-page="purchase"] .content { padding-top: 0.75rem; }

/* POS chrome */
.pos-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    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;
}
.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-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(300px, 42%) 1fr;
    gap: 0.85rem;
    align-items: start;
}
.pos-products-panel { min-width: 0; }
.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(148px, 1fr));
    gap: 0.65rem;
}
.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(52, 211, 153, 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(52, 211, 153, 0.14), rgba(16, 185, 129, 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 {
    color: var(--accent);
}
.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;
}
body[data-page="purchase"] #pur-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 {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#pur-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-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-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--line-sep);
}
.pos-cart-line-main { flex: 1 1 120px; min-width: 0; }
.pos-cart-line-name { font-weight: 650; font-size: 0.88rem; line-height: 1.2; }
.pos-cart-line-meta { font-size: 0.72rem; margin-top: 0.06rem; }
.pos-cart-line-qty {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.1rem 0.28rem;
    background: var(--qty-bg);
    flex-shrink: 0;
}
.pos-qty-btn {
    width: 1.9rem;
    height: 1.9rem;
    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;
    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: 7.5rem;
    max-width: 100%;
    padding: 0.22rem 0.4rem;
    font-size: 0.78rem;
    border-radius: 6px;
    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;
    margin-left: auto;
}
.pos-line-remove {
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgba(248, 113, 113, 0.15);
    color: #fecaca;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.pos-line-remove:hover { background: rgba(248, 113, 113, 0.28); }
.pos-cart-sticky-bar {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 0.65rem;
    border-top: 1px solid var(--border);
    background: var(--sticky-cart-bg);
}
.pos-sticky-totals { font-size: 0.82rem; margin-bottom: 0.5rem; }
.pos-sticky-line {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.2rem 0;
}
.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.75rem;
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px dashed var(--line-sep);
}
.pos-sticky-total-label { font-weight: 650; font-size: 0.88rem; }
.pos-sticky-total-val {
    font-size: 1.2rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--accent2);
    letter-spacing: -0.02em;
}

.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-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-pay-change strong {
    font-size: 1.05rem;
    color: var(--success);
    font-variant-numeric: tabular-nums;
}
.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;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.receipt-pos-hint { font-size: 0.84rem; line-height: 1.4; margin: 0 0 0.25rem; }

.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: #0284c7;
}
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.22), transparent 52%),
        linear-gradient(165deg, #064e3b 0%, #0f766e 38%, #042f2e 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-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(167, 243, 208, 0.22);
    color: #a7f3d0;
}
.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(16, 185, 129, 0.09), transparent 55%),
        radial-gradient(700px 400px at 100% 100%, rgba(45, 212, 191, 0.06), 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(52, 211, 153, 0.28);
    background: rgba(16, 185, 129, 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: #5eead4;
}
.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: #5eead4;
}
.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(5, 150, 105, 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(5, 150, 105, 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(14, 165, 233, 0.1), transparent 55%),
        radial-gradient(700px 400px at 100% 100%, rgba(59, 130, 246, 0.06), 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(125, 211, 252, 0.45), transparent 55%),
        radial-gradient(640px 420px at 88% 82%, rgba(56, 189, 248, 0.35), transparent 52%),
        linear-gradient(165deg, #0369a1 0%, #0284c7 42%, #0c4a6e 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: #0284c7;
}
html[data-theme="light"] .login-panel-logo-fallback {
    border-color: rgba(14, 165, 233, 0.35);
    background: rgba(14, 165, 233, 0.1);
    color: #0284c7;
}
html[data-theme="light"] .login-submit-btn {
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 45%, #0369a1 100%);
    box-shadow:
        0 4px 22px rgba(14, 165, 233, 0.32),
        0 0 36px -10px rgba(2, 132, 199, 0.38);
}
html[data-theme="light"] .login-submit-btn:hover:not(:disabled) {
    box-shadow:
        0 8px 28px rgba(14, 165, 233, 0.38),
        0 0 44px -8px rgba(2, 132, 199, 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; }
.btn-xs { padding: 0.2rem 0.45rem; font-size: 0.78rem; }
.btn-block { width: 100%; }
.btn-icon { min-width: 2rem; justify-content: center; }
.btn-checkout { padding: 0.85rem 1rem; font-size: 1rem; margin-top: 0.35rem; }

.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(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.35); color: #a7f3d0; }
.alert-warning { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.4); color: #fde68a; }
.alert-rich {
    background: rgba(52, 211, 153, 0.06);
    border-color: rgba(52, 211, 153, 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;
    }
}

/* 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(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 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 {
    flex-shrink: 0;
    align-self: center;
    white-space: nowrap;
}
.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(52, 211, 153, 0.38);
    background: linear-gradient(145deg, rgba(52, 211, 153, 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(52, 211, 153, 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(52, 211, 153, 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-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; }
@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(52, 211, 153, 0.08); border-color: rgba(52, 211, 153, 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: ui-monospace, Consolas, monospace; 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 {
    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(251, 191, 36, 0.45); color: #fde68a; }
.badge-info { border-color: rgba(52, 211, 153, 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; }

@media print {
    body { background: #fff; color: #000; }
    .no-print, .sidebar, .topbar, .pos-topbar, .toolbar, .footer-scripts { display: none !important; }
    .app-shell { display: block; }
    .main { display: block; }
    .content { padding: 0 !important; max-width: none !important; }
    .receipt {
        border: none;
        border-radius: 0;
        box-shadow: none;
        max-width: 80mm;
        font-size: 11pt;
        color: #000;
        background: #fff;
    }
    /* 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: 250;
        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) */
    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(292px, 88vw);
        max-width: 100%;
        z-index: 300;
        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);
    }
    body.nav-drawer-open .sidebar {
        transform: translateX(0);
        box-shadow: var(--elev);
    }
    /* 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 {
        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: footer dengan Keluar (ikon user di topbar disembunyikan di mobile) */
    .sidebar-foot {
        display: block;
    }

    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: topbar & menu 2 tombol (sama POS) */
    body[data-page="purchase"] .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 {
        grid-column: 1;
        grid-row: 1;
    }
    body[data-page="purchase"] .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 {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    body[data-page="purchase"] .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 {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    body[data-page="pos"] .pos-toolbar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0.5rem;
    }
    body[data-page="purchase"] .pos-toolbar {
        flex-direction: column;
        flex-wrap: nowrap;
        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 {
        min-width: 0;
        flex: none;
        width: 100%;
        max-width: none;
    }
    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: none;
        width: 100%;
        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 {
        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 {
        gap: 0.5rem;
    }
    body[data-page="pos"] .card-head {
        padding: 0.65rem 0.85rem 0.25rem;
    }
    body[data-page="purchase"] .card-head {
        padding: 0.65rem 0.85rem 0.25rem;
    }
    body[data-page="pos"] .card-body {
        padding: 0.55rem 0.85rem 0.85rem;
    }
    body[data-page="purchase"] .card-body {
        padding: 0.55rem 0.85rem 0.85rem;
    }
    body[data-page="pos"] .pos-products .card-body {
        padding-bottom: 0.35rem;
    }
    body[data-page="purchase"] .pos-products-panel .card-body {
        padding-bottom: 0.35rem;
    }
    body[data-page="pos"] #pos-cart-lines {
        max-height: min(30vh, 220px);
    }
    body[data-page="purchase"] #pur-cart-lines {
        max-height: min(30vh, 220px);
    }
    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 {
        position: sticky;
        bottom: 0;
        z-index: 40;
        box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45), var(--neon-glow-soft);
        border-radius: var(--radius) var(--radius) 0 0;
        margin-top: 0.15rem;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    body[data-page="purchase"] .pos-cart.card-pro {
        position: sticky;
        bottom: 0;
        z-index: 40;
        box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45), var(--neon-glow-soft);
        border-radius: var(--radius) var(--radius) 0 0;
        margin-top: 0.15rem;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    body[data-page="pos"] .checkout-form .input-lg {
        font-size: 16px;
    }
}

@media (max-width: 600px) {
    .chip { display: none; }
    .clock { display: none; }
    body[data-page="pos"] .content,
    body[data-page="purchase"] .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 {
        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 {
        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: #047857;
}
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);
}

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(52, 211, 153, 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);
}
.cash-btn-iconed {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.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 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.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: cover;
}
.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);
}
.cash-image-modal-panel {
    max-width: min(860px, 96vw);
}
.cash-image-modal-body {
    padding-top: 0.5rem;
}
.cash-image-preview-img {
    display: block;
    width: 100%;
    max-height: 76vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: var(--panel2);
}
.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(16, 185, 129, 0.16);
    border-color: rgba(16, 185, 129, 0.5);
    color: #a7f3d0;
}
.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: column;
        align-items: stretch;
    }
    body[data-page="cash"] .page-filter-top-actions .btn {
        flex: 1;
        min-width: 0;
        justify-content: center;
    }
    .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;
    }
    .crud-modal {
        border-radius: var(--radius) var(--radius) 0 0;
        max-height: 94vh;
    }
    .crud-modal .card-head,
    .crud-modal > .form-grid,
    .crud-modal form.form-grid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* 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: transparent;
    border-color: rgba(148, 163, 184, 0.35);
    color: var(--text);
}
.btn-action--ghost:hover:not(:disabled) {
    background: rgba(148, 163, 184, 0.1);
    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: biru + teks putih (hover lebih terang, bukan pudar) */
.btn-action--accent {
    background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
    border-color: rgba(14, 165, 233, 0.85);
    color: var(--btn-on-solid);
    box-shadow: 0 1px 3px rgba(14, 165, 233, 0.25);
}
.btn-action--accent:hover:not(:disabled) {
    background: linear-gradient(180deg, #7dd3fc 0%, #0369a1 100%);
    border-color: rgba(56, 189, 248, 0.95);
    color: var(--btn-on-solid);
    box-shadow: 0 2px 10px rgba(14, 165, 233, 0.35);
}
.btn-action--accent:focus-visible {
    outline-color: #7dd3fc;
}
.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;
}
.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: 72px;
    height: 72px;
    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-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(52, 211, 153, 0.35);
    background: rgba(52, 211, 153, 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;
    }
}

/* Dashboard: sembunyikan aksi cepat Kas (tunai) */
body[data-page="dashboard"] .qa-dashboard-hide-cash {
    display: none !important;
}
.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;
}
.settings-page--full {
    width: 100%;
    max-width: none;
}
.settings-card + .settings-card {
    margin-top: 1rem;
}

.settings-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 1rem 1.15rem;
}
.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(52, 211, 153, 0.35);
    background: rgba(52, 211, 153, 0.12);
}
.plan-pill--sm {
    font-size: 0.62rem;
    padding: 0.2rem 0.45rem;
}

.settings-subblock-title {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin: 0 0 0.5rem;
}
.settings-divider {
    height: 1px;
    background: var(--line-sep);
    margin: 1.25rem 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(220px, 320px);
    gap: 1.5rem 2rem;
    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: 1rem;
}
@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;
}