:root{--dark:#081432;--dark2:#0d1d46;--purple:#5727e8;--blue:#1058ff;--green:#02a85a;--orange:#ff7900;--red:#f0182d;--line:#e8edf7;--text:#0c1437;--muted:#66708c;--bg:#f8fbff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;font-size:14px}.app{display:flex;min-height:100vh}.sidebar{width:280px;background:linear-gradient(180deg,#0b1840,#06112c);color:white;padding:20px 16px;position:fixed;height:100vh;overflow:auto}.brand{display:flex;gap:14px;align-items:center;margin-bottom:24px}.logo{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,#7649ff,#3710bb);display:grid;place-items:center;font-size:25px;font-weight:800}.brand span{display:block;color:#aeb9e0;font-size:12px;margin-top:4px}.sidebar nav{display:grid;gap:6px}.sidebar a{color:white;text-decoration:none;padding:14px;border-radius:10px;display:flex;align-items:center;gap:10px;font-weight:650}.sidebar a.active,.sidebar a:hover{background:linear-gradient(90deg,#672bff,#4d21d4)}.pill{background:#6b35ff;color:#fff;border-radius:6px;padding:2px 6px;margin-left:auto}.branch-card{margin-top:22px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.04);border-radius:12px;padding:16px}.branch-card small{display:block;color:#aeb9e0}.logout{position:sticky;bottom:0;background:rgba(255,255,255,.05);margin-top:24px;justify-content:center}.main{margin-left:280px;flex:1}.top{height:74px;background:white;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr auto auto auto auto auto;gap:14px;align-items:center;padding:0 22px;position:sticky;top:0;z-index:3}.hamb,.top select,.top input,.btn{border:1px solid var(--line);background:white;border-radius:9px;padding:11px 14px;font-weight:650}.hamb{font-size:20px;border:0}.bell{position:relative;font-size:20px}.bell em{position:absolute;right:-8px;top:-8px;background:red;color:#fff;font-size:11px;border-radius:50%;padding:1px 5px}.avatar{width:42px;height:42px;border-radius:50%;background:#5525db;color:#fff;display:grid;place-items:center;font-weight:800}.top small{display:block;color:var(--muted);font-size:11px}.content{padding:22px}.grid{display:grid;gap:14px}.metrics{grid-template-columns:repeat(6,1fr);margin-bottom:16px}.metric{background:white;border:1px solid var(--line);border-radius:13px;padding:20px;display:flex;gap:15px;align-items:center;box-shadow:0 5px 18px rgba(15,35,80,.04)}.metric img{width:52px;height:52px;border-radius:50%;object-fit:cover}.metric small{font-size:11px;font-weight:800;text-transform:uppercase}.metric strong{display:block;font-size:22px;margin:4px 0}.metric span{color:var(--muted)}.blue{color:var(--blue)}.green{color:var(--green)}.orange{color:var(--orange)}.red{color:var(--red)}.layout-dash{grid-template-columns:2fr .72fr .92fr}.panel{background:white;border:1px solid var(--line);border-radius:13px;padding:16px;box-shadow:0 5px 18px rgba(15,35,80,.04)}.panel h3{margin:0 0 14px;font-size:16px}.panel h3 small{color:var(--muted);font-weight:600}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.filters{display:grid;grid-template-columns:1fr 1fr 2fr auto;gap:10px;margin-bottom:12px}.input,select{border:1px solid var(--line);border-radius:8px;padding:11px 13px;background:white;width:100%}table{border-collapse:collapse;width:100%;font-size:13px}th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left}th{font-size:11px;text-transform:uppercase;color:#26304e;background:#fbfcff}.item{display:flex;align-items:center;gap:10px}.thumb{width:36px;height:46px;border-radius:5px;object-fit:cover;background:#eef2f8}.tag{display:inline-block;border-radius:6px;padding:4px 8px;background:#f3f6fb;font-size:12px}.tag.green{background:#e4fbf0}.tag.orange{background:#fff0df}.tag.blue{background:#eaf0ff}.dot{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid #cad2e8;margin-right:6px;vertical-align:middle}.black{background:#000}.white{background:white}.space{background:#6a718a}.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px}.action{border:1px solid var(--line);background:#fff;border-radius:9px;padding:14px;font-weight:800;color:#481fe0}.action.red{color:red}.action.orange{color:#ff7300}.activity li{margin:13px 0}.right-grid{display:grid;gap:14px}.layout-bottom{grid-template-columns:1fr 1fr 1fr;margin-top:14px}.pos-layout{display:grid;grid-template-columns:1.8fr 1.15fr;gap:16px}.pos-products{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.product{border:1px solid var(--line);border-radius:13px;background:#fff;padding:13px;position:relative;min-height:166px}.product img{width:64px;height:84px;object-fit:contain;float:left;margin-right:12px}.price{font-size:20px;font-weight:900;margin-top:20px}.add{position:absolute;right:13px;bottom:13px;width:34px;height:34px;border:1px solid #6b35ff;border-radius:8px;background:white;color:#4d21d4;font-size:24px}.tabs{display:flex;gap:10px;margin:13px 0}.tabs button{border:1px solid var(--line);background:#fff;padding:12px 18px;border-radius:9px;font-weight:800}.tabs button.active{background:#5b27e9;color:white}.cart-panel{position:sticky;top:96px}.cart-row{display:grid;grid-template-columns:1.2fr .7fr .6fr .7fr .7fr auto;gap:8px;align-items:center;border-bottom:1px solid var(--line);padding:13px 0}.qty{display:flex}.qty button,.qty input{width:31px;height:31px;text-align:center;border:1px solid var(--line);background:white}.payment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.pay{padding:16px;border:1px solid var(--line);border-radius:9px;background:#fff;font-weight:800}.pay.active{border-color:#5b27e9;color:#4d21d4}.totalbox{margin:15px 0;padding:15px;background:#fbfcff;border:1px solid var(--line);border-radius:10px}.grand{font-size:26px;color:#5122e2;font-weight:900}.process{width:100%;border:0;background:linear-gradient(90deg,#5927e9,#4b22d4);color:white;border-radius:10px;padding:19px;font-size:16px;font-weight:900}.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.notice{padding:12px;border-radius:8px;margin-bottom:12px}.ok{background:#e8fff4;color:#06723d}.bad{background:#fff0f0;color:#bd1020}@media(max-width:1200px){.metrics{grid-template-columns:repeat(3,1fr)}.layout-dash,.pos-layout,.layout-bottom{grid-template-columns:1fr}.pos-products{grid-template-columns:repeat(2,1fr)}}

/* Staff POS screen - matched to approved reference */
.staff-pos-app .sidebar{width:282px;padding:20px 16px;background:linear-gradient(180deg,#0b1742 0%,#06102c 100%)}
.staff-pos-app .main{margin-left:282px;background:#fbfdff}.staff-pos-app .brand{margin-bottom:28px}.staff-pos-app .brand .logo{width:56px;height:56px;border-radius:14px;font-size:24px}.staff-pos-app .brand b{font-size:17px;line-height:1.35}.staff-pos-app .brand span{font-size:13px;color:#936cff;letter-spacing:.4px;font-weight:800}.staff-sidebar nav{gap:13px}.staff-sidebar nav a{height:56px;border-radius:10px;padding:0 16px;font-size:16px;gap:14px}.staff-sidebar nav a.active{background:linear-gradient(90deg,#6d32ff,#5323dc);box-shadow:0 8px 18px rgba(70,33,195,.28)}.staff-sidebar .logout{position:absolute;left:16px;right:16px;bottom:20px;height:56px;border:1px solid rgba(255,255,255,.13);border-radius:8px;background:rgba(255,255,255,.05)}
.staff-topbar{height:80px;grid-template-columns:56px auto 1fr auto auto 48px auto;border-left:1px solid var(--line);padding:0 24px;background:#fff}.staff-topbar .hamb{font-size:24px}.staff-current-branch{display:flex;align-items:center;gap:12px}.staff-current-branch select{width:180px;height:43px;font-weight:800;border-radius:8px}.top-action{height:46px;border:1px solid #dcdffb;background:#fff;border-radius:8px;padding:0 20px;color:#4d21d4;font-weight:800;font-size:14px}.top-action.scan{border-color:#5b27e9}.staff-topbar .avatar{width:44px;height:44px;border-radius:50%;background:#4d21d4;color:#fff;font-size:16px}.staff-topbar small{color:#66708c}.staff-content{padding:20px 20px 24px}.staff-pos-shell{display:grid;grid-template-columns:minmax(660px,1fr) 628px;gap:12px}.staff-products-panel,.staff-cart-panel{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 20px rgba(14,35,82,.04);padding:18px}.staff-cart-panel{padding:22px 18px}.staff-search-row{display:grid;grid-template-columns:1fr 142px 124px 118px;gap:12px;margin-bottom:18px}.staff-search-box{height:48px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;padding:0 12px;gap:10px}.staff-search-box span{font-size:22px;color:#66708c}.staff-search-box input{border:0;outline:0;flex:1;font-size:14px}.staff-search-box button{border:0;background:#fff;color:#66708c;font-size:18px}.staff-search-row select,.staff-filter-btn{height:48px;border:1px solid var(--line);border-radius:8px;background:#fff;font-weight:800;color:#16213e}.staff-tabs{display:flex;gap:10px;margin-bottom:14px}.staff-tabs button{height:42px;padding:0 18px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#0c1437;font-weight:800}.staff-tabs button.active{background:#5c28e9;color:#fff;border-color:#5c28e9}.staff-product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.staff-product-card{min-height:190px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:16px;position:relative;display:grid;grid-template-columns:70px 1fr;grid-template-rows:1fr auto;column-gap:14px}.staff-product-card img{width:66px;height:92px;object-fit:contain;border-radius:7px;align-self:start}.staff-product-info b{font-size:14px}.staff-product-info span,.staff-product-info small{display:block;color:#2f3c5f;font-size:12px;line-height:1.8}.staff-product-info strong{display:block;margin-top:3px;font-size:13px}.staff-product-price{grid-column:1/3;font-size:20px;font-weight:900;margin-top:10px;color:#0a1334}.staff-add-btn{position:absolute;right:14px;bottom:15px;width:34px;height:34px;border:1px solid #6b35ff;border-radius:7px;background:white;color:#5b27e9;font-size:27px;line-height:28px}.staff-product-card.out .staff-add-btn{opacity:.24;background:#eef0f6;color:#8890aa;border-color:#dce2f0}.staff-pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin:20px 0 0;color:#283653}.staff-pagination span{margin-right:20px}.staff-pagination button{min-width:36px;height:36px;border:1px solid var(--line);border-radius:7px;background:#fff;font-weight:800}.staff-pagination button.active{color:#5b27e9;border-color:#5b27e9}.staff-quick-actions{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:18px;background:#fff}.staff-quick-actions h3{margin:0 0 14px}.staff-quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.staff-quick-grid button{height:92px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#4d21d4;font-weight:800}.staff-quick-grid span{display:block;font-size:30px;margin-bottom:8px}.staff-cart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.staff-cart-head h2{margin:0;font-size:20px}.staff-cart-head a{color:#f0182d;text-decoration:none;font-weight:800}.staff-cart-table-head{height:40px;background:#fbfcff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 110px 88px 110px 100px 24px;align-items:center;padding:0 8px;font-size:11px;font-weight:900;color:#283653}.staff-cart-list{min-height:255px}.staff-cart-item{display:grid;grid-template-columns:1fr 110px 88px 110px 100px 24px;gap:0;align-items:center;border-bottom:1px solid var(--line);padding:18px 8px}.staff-cart-product{display:flex;gap:12px;align-items:center}.staff-cart-product img{width:45px;height:55px;object-fit:contain;border-radius:6px}.staff-cart-product b{font-size:13px}.staff-cart-product small{display:block;margin-top:6px;color:#66708c}.staff-qty{display:flex}.staff-qty button,.staff-qty input{width:30px;height:31px;border:1px solid var(--line);background:#fff;text-align:center}.staff-qty input{font-weight:800}.staff-x{border:0;background:#fff;color:red;font-size:20px}.empty-cart{padding:30px;text-align:center;color:#66708c}.staff-note-total{display:grid;grid-template-columns:1fr 300px;gap:18px;margin-top:22px}.staff-note-total .input{height:43px}.staff-total-box{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 16px}.staff-total-box p{display:flex;justify-content:space-between;margin:10px 0}.staff-total-box p.total{border-top:1px solid var(--line);padding-top:14px;font-size:17px}.staff-total-box p.total b{font-size:25px;color:#5122e2}.payment-title{margin:34px 0 18px;font-size:17px}.staff-payment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.staff-payment-grid .pay{height:64px;border:1px solid var(--line);border-radius:9px;background:#fff;font-weight:900;color:#1b2545}.staff-payment-grid .pay.active{border-color:#5b27e9;color:#5122e2;background:#fff}.staff-label{display:block;margin-top:28px;margin-bottom:10px;font-weight:900;color:#16213e}.amount-wrap{height:51px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;padding:0 13px;gap:10px}.amount-wrap input{border:0;outline:0;flex:1;font-size:18px;font-weight:800}.staff-change{display:flex;justify-content:space-between;align-items:center;margin:24px 0 22px;font-weight:900}.staff-change b{font-size:24px;color:#02a85a}.staff-process{height:68px;width:100%;border:0;border-radius:8px;color:white;background:linear-gradient(90deg,#5e2dea,#4d21d4);font-size:18px;font-weight:900;box-shadow:0 12px 25px rgba(78,33,212,.18)}.staff-today-sales{display:flex;justify-content:space-between;align-items:center;margin-top:28px;color:#66708c;font-size:14px}.staff-today-sales b{font-size:18px;color:#5122e2}.staff-products-panel .input{height:43px}@media(max-width:1450px){.staff-pos-shell{grid-template-columns:1fr}.staff-cart-panel{position:static}.staff-product-grid{grid-template-columns:repeat(3,1fr)}}

.notice.good{background:#e9fbf1;color:#057a3b;border-radius:10px;padding:12px;margin:16px 0;}