:root { --ink:#172118; --paper:#f6f6f0; --surface:#fff; --line:#e7e9e3; --muted:#718072; --sage:#dce8d7; --accent:#e77547; --danger:#bc3c32; --ease-out:cubic-bezier(.23,1,.32,1); }
* { box-sizing:border-box; }
body { min-width:320px; color:var(--ink); background:var(--paper); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { -webkit-tap-highlight-color:transparent; }
button { transition:transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
button:active { transform:scale(.97); }
.app-shell { min-height:100dvh; }
.eyebrow { margin:0 0 .4rem; color:#657363; font-size:.7rem; font-weight:750; letter-spacing:.13em; text-transform:uppercase; }
.brand-mark { display:grid; width:32px; height:32px; place-items:center; border-radius:10px; color:#eff4eb; background:var(--ink); font-family:Georgia, serif; font-size:.82rem; font-weight:bold; letter-spacing:-.06em; }
.login-shell { min-height:100dvh; display:grid; align-content:center; justify-items:center; gap:2.3rem; padding:2rem 1rem; background:radial-gradient(circle at 78% 17%, #e4ebdc 0, transparent 26rem), var(--paper); }
.login-brand,.sidebar-brand { display:flex; align-items:center; gap:.7rem; font-size:.75rem; font-weight:800; letter-spacing:.14em; }
.login-card { width:min(100%, 420px); padding:2.25rem; border:1px solid rgba(23,33,24,.07); border-radius:24px; background:rgba(255,255,255,.86); box-shadow:0 20px 60px rgba(23,33,24,.08); }
.login-card h1 { margin:0; font-size:1.75rem; letter-spacing:-.055em; font-weight:700; }
.login-copy { margin: .65rem 0 1.8rem; color:var(--muted); font-size:.94rem; }
.form-label { margin-bottom:.45rem; font-size:.82rem; font-weight:650; }
.form-control,.form-select,.input-group-text { border-color:#dce1d9; min-height:46px; box-shadow:none!important; }
.form-control:focus,.form-select:focus { border-color:#8ba486; box-shadow:0 0 0 .22rem rgba(116,145,112,.14)!important; }
.btn-dark { border-color:var(--ink); background:var(--ink); }
.btn-dark:hover { border-color:#29392a; background:#29392a; }
.btn-lg { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:.65rem; font-weight:650; }
.form-error { min-height:1.1rem; margin-bottom:0; color:var(--danger); font-size:.83rem; }
.login-foot { margin:0; color:#899486; font-size:.75rem; }
.workspace { min-height:100dvh; }
.sidebar { position:fixed; z-index:10; inset:0 auto 0 0; width:245px; display:flex; flex-direction:column; padding:1.6rem 1rem; background:var(--ink); color:#f3f6ed; }
.sidebar-brand { padding:0 .55rem; }
.sidebar .nav { gap:.3rem; margin-top:3.3rem; }
.sidebar .nav-link { display:flex; align-items:center; gap:.85rem; width:100%; padding:.76rem .8rem; border:0; border-radius:10px; color:#afbcac; background:transparent; text-align:left; font-size:.9rem; }
.sidebar .nav-link i { font-size:1.08rem; }
.sidebar .nav-link:hover,.sidebar .nav-link.active { color:#fff; background:rgba(255,255,255,.1); }
.sidebar-bottom { margin-top:auto; }
.location-button { width:100%; display:flex; align-items:center; gap:.6rem; padding:.75rem .65rem; border:1px solid rgba(255,255,255,.12); border-radius:10px; color:#e7eee4; background:rgba(255,255,255,.06); font-size:.78rem; text-align:left; }
.location-button span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.location-button .bi-chevron-expand { opacity:.55; }
.user-row { display:flex; align-items:center; gap:.7rem; padding:.9rem .45rem 0; font-size:.77rem; }
.user-row span:nth-child(2) { flex:1; min-width:0; }.user-row strong,.user-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.user-row small { margin-top:.12rem; color:#9dac9a; text-transform:capitalize; }
.user-avatar { display:grid; flex:none; width:28px; height:28px; place-items:center; border-radius:50%; background:#b6c7ad; color:#273326; font-size:.65rem; font-weight:800; }
.icon-button { display:grid; width:32px; height:32px; place-items:center; border:0; border-radius:8px; color:inherit; background:transparent; }
.icon-button:hover { background:rgba(255,255,255,.1); }
.page-area { margin-left:245px; min-height:100dvh; padding:2.4rem clamp(1.5rem,4vw,4.5rem); }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:2.15rem; }.page-heading h1 { margin:0; font-size:clamp(1.65rem,3vw,2.35rem); font-weight:700; letter-spacing:-.06em; }.header-actions { display:flex; align-items:center; gap:1rem; }.status-dot { display:flex; align-items:center; gap:.4rem; color:var(--muted); font-size:.78rem; }.status-dot i { width:7px; height:7px; border-radius:50%; background:#69a06a; box-shadow:0 0 0 4px rgba(105,160,106,.13); }
.pos-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,380px); overflow:hidden; min-height:calc(100dvh - 180px); border:1px solid var(--line); border-radius:20px; background:var(--surface); box-shadow:0 12px 30px rgba(23,33,24,.035); }.product-panel { padding:1.5rem 1.7rem; }.scan-box { display:flex; align-items:flex-start; gap:1rem; padding:1rem; border:1px solid #d9e4d3; border-radius:14px; background:#f5f9f2; }.scan-icon { display:grid; flex:none; width:42px; height:42px; place-items:center; border-radius:10px; background:var(--sage); color:#38603b; font-size:1.3rem; }.scan-box label { display:block; margin-bottom:.35rem; font-size:.83rem; font-weight:700; }.scan-box small { display:block; margin-top:.4rem; color:#778375; font-size:.72rem; }.search-results { position:relative; z-index:2; }.search-list { position:absolute; top:.45rem; left:0; right:0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:white; box-shadow:0 14px 30px rgba(23,33,24,.12); }.search-item { display:grid; grid-template-columns:1fr auto auto; gap:1rem; align-items:center; width:100%; padding:.85rem 1rem; border:0; border-bottom:1px solid #f0f1ed; background:white; text-align:left; }.search-item:last-child { border-bottom:0; }.search-item:hover { background:#f6f9f4; }.search-item strong { display:block; font-size:.86rem; }.search-item small { color:var(--muted); }.stock-pill { padding:.2rem .45rem; border-radius:20px; background:#edf4ea; color:#477045; font-size:.71rem; font-weight:700; }.search-price { font-size:.85rem; font-weight:750; }
.quick-head { display:flex; align-items:baseline; justify-content:space-between; margin:2.1rem 0 1rem; }.quick-head h2,.checkout-title h2,.card-heading h2 { margin:0; font-size:1rem; font-weight:730; letter-spacing:-.02em; }.quick-head span { color:var(--muted); font-size:.75rem; }.empty-cart,.empty-state { display:grid; justify-items:center; padding:3.6rem 1rem; color:var(--muted); text-align:center; }.empty-icon { display:grid; width:46px; height:46px; place-items:center; margin-bottom:1rem; border-radius:50%; background:#f0f3ed; color:#82907d; font-size:1.2rem; }.empty-cart h3,.empty-state h2 { margin:0 0 .45rem; color:var(--ink); font-size:1rem; font-weight:700; }.empty-cart p,.empty-state p { max-width:300px; margin:0; font-size:.83rem; }.cart-lines { border-top:1px solid #edf0eb; }.cart-line { display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:center; padding:.9rem 0; border-bottom:1px solid #edf0eb; }.cart-line h3 { margin:0 0 .2rem; font-size:.86rem; font-weight:700; }.cart-line p { margin:0; color:var(--muted); font-size:.76rem; }.line-control { display:flex; align-items:center; gap:.5rem; }.line-control button { display:grid; width:25px; height:25px; place-items:center; padding:0; border:1px solid #d9dfd6; border-radius:7px; background:white; }.line-control span { min-width:1rem; font-size:.84rem; text-align:center; }.line-price { margin-left:.8rem; font-weight:750; font-size:.85rem; }.remove-line { color:#9aa498; }
.checkout-panel { display:flex; flex-direction:column; padding:1.5rem; border-left:1px solid var(--line); background:#fbfcf9; }.checkout-title { display:flex; align-items:flex-start; justify-content:space-between; }.sale-id { padding:.25rem .45rem; border-radius:6px; background:#eff3eb; color:#71806e; font-size:.65rem; font-weight:800; letter-spacing:.06em; }.total-block { display:flex; align-items:baseline; justify-content:space-between; padding:1.6rem 0; margin:1.3rem 0 1.3rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.total-block span { color:var(--muted); font-size:.82rem; }.total-block strong { font-size:1.85rem; letter-spacing:-.065em; }.payment-selector { display:grid; grid-template-columns:repeat(2,1fr); gap:.45rem; }.payment-option { display:flex; align-items:center; gap:.5rem; padding:.65rem; border:1px solid #dfe4db; border-radius:9px; color:#657263; background:white; font-size:.76rem; text-align:left; }.payment-option.active { border-color:#6f936d; color:#27502a; background:#f0f7ed; box-shadow:0 0 0 1px #6f936d; }.payment-summary { display:flex; justify-content:space-between; padding:1rem 0; margin-top:auto; color:var(--muted); font-size:.82rem; }.payment-summary strong { color:var(--ink); font-size:1.1rem; }.complete-sale { width:100%; }.complete-sale:disabled { border-color:#d8ded5; background:#d8ded5; color:#788277; }.complete-sale kbd { padding:.15rem .35rem; border-radius:4px; color:#b1c0ae; background:rgba(255,255,255,.14); font-size:.64rem; font-weight:600; }.checkout-note { margin:1rem 0 0; color:#829080; font-size:.72rem; text-align:center; }.checkout-note i { margin-right:.25rem; }
.content-card { padding:1.5rem; border:1px solid var(--line); border-radius:18px; background:white; }.card-heading { display:flex; justify-content:space-between; margin-bottom:1.2rem; }.card-heading p { margin:.3rem 0 0; color:var(--muted); font-size:.82rem; }.stock-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }.stock-card { padding:1.2rem; border:1px solid var(--line); border-radius:14px; background:white; }.stock-card small { display:block; color:var(--muted); font-size:.75rem; }.stock-card strong { display:block; margin-top:.3rem; font-size:1.5rem; letter-spacing:-.06em; }.stock-card span { display:block; margin-top:.55rem; color:#597356; font-size:.72rem; }.stock-result { display:flex; align-items:center; justify-content:space-between; padding:.9rem 0; border-bottom:1px solid #edf0eb; }.stock-result:last-child { border:0; }.stock-result strong { display:block; font-size:.86rem; }.stock-result small { color:var(--muted); }.stock-results .stock-pill { font-size:.76rem; }.mobile-topbar,.mobile-nav { display:none; }
.toast { color:white; background:#243326; box-shadow:0 10px 30px rgba(0,0,0,.15); }.modal-content { overflow:hidden; border:0; border-radius:18px; }.modal-header { align-items:flex-start; border:0; padding:1.4rem 1.4rem 1rem; }.modal-header h2 { margin:0; font-size:1.15rem; letter-spacing:-.04em; }.location-choice { display:flex; align-items:center; gap:.8rem; width:100%; padding:1rem 1.4rem; border:0; border-top:1px solid var(--line); background:white; text-align:left; }.location-choice:hover,.location-choice.active { background:#f3f8f0; }.location-choice i { display:grid; width:34px; height:34px; place-items:center; border-radius:9px; background:#edf4e9; color:#4d714c; }.location-choice strong,.location-choice small { display:block; }.location-choice small { margin-top:.1rem; color:var(--muted); font-size:.73rem; }.location-choice .bi-check2 { margin-left:auto; background:transparent; color:#48804a; font-size:1.15rem; }
@media (max-width: 992px) { .sidebar { display:none; }.page-area { margin-left:0; padding:1.4rem 1rem 5.8rem; }.mobile-topbar { display:flex; align-items:center; justify-content:space-between; padding:1rem; border-bottom:1px solid var(--line); background:#fff; }.mobile-brand { display:flex; align-items:center; gap:.55rem; padding:0; border:0; background:transparent; color:var(--ink); font-size:.7rem; font-weight:800; letter-spacing:.12em; }.mobile-brand .brand-mark { width:28px; height:28px; }.mobile-topbar .icon-button { color:var(--ink); background:#f1f4ef; }.mobile-nav { position:fixed; z-index:10; inset:auto 0 0; display:grid; grid-template-columns:repeat(3,1fr); padding:max(.45rem, env(safe-area-inset-bottom)) .7rem .45rem; border-top:1px solid var(--line); background:rgba(255,255,255,.94); backdrop-filter:blur(12px); }.mobile-nav button { display:grid; gap:.18rem; place-items:center; padding:.35rem; border:0; color:#7c8878; background:transparent; font-size:.65rem; }.mobile-nav i { font-size:1.1rem; }.mobile-nav .active { color:#345b36; }.pos-layout { grid-template-columns:1fr; min-height:auto; }.checkout-panel { border-top:1px solid var(--line); border-left:0; }.product-panel { padding:1rem; }.checkout-panel { padding:1.2rem; }.payment-summary { margin-top:1.2rem; }.stock-summary { grid-template-columns:1fr; }.page-heading { margin-bottom:1.3rem; }.header-actions .status-dot { display:none; } }
@media (max-width: 520px) { .login-card { padding:1.65rem; border-radius:18px; }.scan-box { padding:.75rem; gap:.7rem; }.scan-icon { width:35px; height:35px; font-size:1rem; }.scan-box small { display:none; }.search-item { grid-template-columns:1fr auto; gap:.55rem; }.search-item .stock-pill { grid-column:1; justify-self:start; }.search-price { grid-row:1; grid-column:2; }.page-heading h1 { font-size:1.7rem; }.header-actions .btn { padding:.55rem .7rem; }.cart-line { gap:.45rem; }.line-price { margin-left:.45rem; }.total-block strong { font-size:1.65rem; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }