:root {
    --brand: #111111;
    --brand-dark: #000000;
    --brand-light: #f2f2f2;
    --bg: #fafafa;
    --surface: #ffffff;
    --line: #ececec;
    --muted: #8a8a8a;

    --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-color: #1a1a1a;
    --bs-border-color: var(--line);
    --bs-link-color: #111;
    --bs-link-color-rgb: 17, 17, 17;
    --bs-link-hover-color: #000;
    --bs-link-hover-color-rgb: 0, 0, 0;
    --bs-focus-ring-color: rgba(17, 17, 17, .15);
}

body {
    background: var(--bg);
    font-family: var(--bs-body-font-family);
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .navbar-brand, .modal-title { letter-spacing: -.02em; font-weight: 700; }
.text-muted { color: var(--muted) !important; }

/* Navbar: clean white with black accent */
.navbar.bg-brand { background: rgba(255, 255, 255, .9) !important; backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); box-shadow: none !important; }
.navbar.bg-brand .navbar-brand { color: #111; }
.navbar.bg-brand .nav-link { color: #6b6b6b; font-weight: 500; border-radius: .6rem; padding: .45rem .8rem !important; }
.navbar.bg-brand .nav-link:hover { color: #111; background: var(--brand-light); }
.navbar.bg-brand .nav-link.active { color: #fff !important; background: var(--brand); }
.navbar.bg-brand .navbar-toggler { border-color: var(--line); }
.navbar.bg-brand .text-white-50 { color: #6b6b6b !important; }
.navbar.bg-brand .btn-outline-light { color: #111; border-color: var(--line); }
.navbar.bg-brand .btn-outline-light:hover { background: #111; color: #fff; border-color: #111; }

/* Brand utilities */
.bg-brand { background: var(--brand) !important; }
.text-brand { color: var(--brand) !important; }
.btn { font-weight: 500; border-radius: .65rem; }
.btn-brand { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.btn-brand:hover, .btn-brand:focus, .btn-brand:active { background: var(--brand-dark) !important; color: #fff !important; border-color: var(--brand-dark) !important; }
.btn-outline-brand { color: var(--brand); border-color: #d9d9d9; background: #fff; }
.btn-outline-brand:hover, .btn-check:checked + .btn-outline-brand { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-outline-secondary { color: #333; border-color: #dcdcdc; }
.btn-outline-secondary:hover { background: #111; border-color: #111; color: #fff; }

.form-control, .form-select, .input-group-text { border-color: #e2e2e2; border-radius: .65rem; }
.form-control:focus, .form-select:focus { border-color: #111; box-shadow: 0 0 0 .2rem rgba(17, 17, 17, .08); }
.form-label { font-weight: 500; font-size: .9rem; }

/* Login */
.login-page { background: var(--bg); }
.login-page .card { border: 1px solid var(--line) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, .06) !important; }
.login-logo { width: 64px; height: 64px; border-radius: 1rem; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.7rem; }

/* POS layout */
.pos-page { overflow-x: hidden; }
.pos-wrap { min-height: calc(100vh - 56px); }
.pos-products { padding: 1.25rem; }
.category-tabs { overflow-x: auto; white-space: nowrap; flex-wrap: nowrap; scrollbar-width: none; gap: .5rem; }
.category-tabs::-webkit-scrollbar { display: none; }
.category-tabs .btn { border-radius: 2rem; padding-left: 1rem; padding-right: 1rem; }

.product-card { cursor: pointer; border: 1px solid var(--line); border-radius: 1rem; transition: transform .1s, box-shadow .15s, border-color .15s; user-select: none; height: 100%; background: var(--surface); }
.product-card:hover { border-color: #d0d0d0; box-shadow: 0 8px 24px rgba(0, 0, 0, .06); }
.product-card:active { transform: scale(.97); }
.product-card .icon { width: 44px; height: 44px; border-radius: .75rem; background: var(--brand-light); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.product-card .name { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.product-card .price { color: var(--brand); font-weight: 700; }
.product-card .qty-badge { position: absolute; top: .5rem; right: .5rem; background: var(--brand) !important; }

.cart-panel { background: var(--surface); border-left: 1px solid var(--line); }
@media (min-width: 992px) {
    .cart-panel { position: sticky; top: 56px; height: calc(100vh - 56px); }
}
.cart-panel .offcanvas-body { display: flex; flex-direction: column; padding: 0; height: 100%; }
.cart-items { flex: 1 1 auto; overflow-y: auto; }
.cart-item { border-bottom: 1px solid var(--line); padding: .85rem 1rem; }
.cart-item .qty-ctrl .btn { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.cart-item .qty-ctrl span { min-width: 28px; display: inline-block; text-align: center; font-weight: 600; }
.cart-empty { color: #b0b0b0; }
.cart-footer { border-top: 1px solid var(--line); padding: 1rem; background: var(--surface); }

.mobile-cart-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: var(--brand); color: #fff; padding: .75rem 1rem; box-shadow: 0 -6px 20px rgba(0, 0, 0, .12); }
@media (max-width: 991.98px) { .pos-products { padding-bottom: 5.5rem; } }

/* Payment */
.pay-method .btn { padding: .9rem .5rem; font-weight: 600; }
.pay-method .btn i { font-size: 1.4rem; display: block; }
.quick-cash .btn { flex: 1 1 30%; }
.pay-total { font-size: 2.1rem; font-weight: 800; color: var(--brand); letter-spacing: -.03em; }

/* Tables & cards */
.table { --bs-table-color: #1a1a1a; }
.table-light { --bs-table-bg: #f7f7f7; --bs-table-color: #6b6b6b; }
.table-light th { font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.table-trx td, .table-trx th { vertical-align: middle; white-space: nowrap; }
.stat-card { border: 1px solid var(--line) !important; border-radius: 1rem; }
.stat-card .stat-icon { width: 44px; height: 44px; border-radius: .75rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }

.card { border-radius: 1rem; border-color: var(--line); }
.card.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, .03) !important; }
.modal-content { border: 0; border-radius: 1.1rem; box-shadow: 0 24px 60px rgba(0, 0, 0, .15); }
.badge { font-weight: 600; letter-spacing: .01em; }