:root{
  --bg:#f4f6f8; --card:#ffffff; --ink:#1a2230; --muted:#6b7785;
  --line:#e3e8ef; --brand:#0d1b2a; --accent:#2f6fed; --accent-d:#2257c4;
  --good:#1a9c5b; --good-bg:#e7f6ee; --warn:#b9770a; --warn-bg:#fdf3e0;
  --bad:#d23f3f; --bad-bg:#fdebeb; --radius:12px; --shadow:0 1px 3px rgba(16,24,40,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Kufi Arabic",sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.45;
}
body.rtl{font-family:"Noto Kufi Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--accent); text-decoration:none}
h1,h2,h3{margin:0 0 .5rem}
h1{font-size:1.4rem}
h2{font-size:1.15rem}

/* Topbar */
.topbar{background:var(--brand); color:#fff; position:sticky; top:0; z-index:20}
.topbar-in{max-width:1100px; margin:0 auto; display:flex; align-items:center; gap:1rem;
  padding:.6rem 1rem; flex-wrap:wrap}
.brand{color:#fff; font-weight:700; font-size:1.1rem; letter-spacing:.2px}
.mainnav{display:flex; gap:.25rem; flex:1; flex-wrap:wrap; overflow-x:auto}
.navlink{color:#cfd8e6; padding:.45rem .7rem; border-radius:8px; white-space:nowrap; font-weight:500}
.navlink:hover{background:rgba(255,255,255,.08); color:#fff}
.navlink.active{background:var(--accent); color:#fff}
.topbar-right{display:flex; align-items:center; gap:.6rem}
.langtoggle{color:#fff; border:1px solid rgba(255,255,255,.3); padding:.3rem .6rem; border-radius:8px; font-size:.85rem}
.who{color:#aebdd1; font-size:.82rem; white-space:nowrap}
.btn-logout{color:#fff; background:rgba(255,255,255,.12); padding:.35rem .7rem; border-radius:8px; font-size:.85rem}

/* Page */
.page-in{max-width:1100px; margin:0 auto; padding:1.2rem 1rem 4rem}
.page-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap}

/* Cards & grid */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.card-pad{padding:1rem}
.grid{display:grid; gap:1rem}
.grid-stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem; box-shadow:var(--shadow)}
.stat-label{color:var(--muted); font-size:.82rem; text-transform:uppercase; letter-spacing:.4px}
.stat-value{font-size:1.7rem; font-weight:700; margin-top:.25rem}
.stat-sub{color:var(--muted); font-size:.85rem; margin-top:.2rem}
.stat.good .stat-value{color:var(--good)} .stat.warn .stat-value{color:var(--warn)} .stat.bad .stat-value{color:var(--bad)}

/* Tables */
.tbl{width:100%; border-collapse:collapse; background:var(--card)}
.tbl th,.tbl td{padding:.6rem .7rem; text-align:start; border-bottom:1px solid var(--line)}
.tbl th{color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.4px; background:#fafbfc}
.tbl tr:last-child td{border-bottom:0}
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius)}
.num{font-variant-numeric:tabular-nums; text-align:end}

/* Badges */
.badge{display:inline-block; padding:.15rem .5rem; border-radius:999px; font-size:.78rem; font-weight:600}
.badge.good{background:var(--good-bg); color:var(--good)}
.badge.warn{background:var(--warn-bg); color:var(--warn)}
.badge.bad{background:var(--bad-bg); color:var(--bad)}
.badge.muted{background:#eef1f5; color:var(--muted)}

/* Forms */
.field{margin-bottom:.9rem}
.field label{display:block; font-size:.85rem; color:var(--muted); margin-bottom:.3rem; font-weight:600}
input,select,textarea{
  width:100%; padding:.6rem .7rem; border:1px solid var(--line); border-radius:10px;
  font:inherit; color:var(--ink); background:#fff;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(47,111,237,.15)}
.row{display:flex; gap:.8rem; flex-wrap:wrap}
.row>.field{flex:1; min-width:140px}
.check{display:flex; align-items:center; gap:.5rem}
.check input{width:auto}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:.4rem; justify-content:center; cursor:pointer;
  padding:.6rem 1rem; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink);
  font:inherit; font-weight:600}
.btn:hover{background:#f6f8fb}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-d)}
.btn-danger{background:var(--bad); border-color:var(--bad); color:#fff}
.btn-block{width:100%}
.btn-lg{padding:.8rem 1.2rem; font-size:1.05rem}
.btn-sm{padding:.35rem .6rem; font-size:.85rem}

/* Login */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1rem;
  background:linear-gradient(160deg,#0d1b2a,#1c3556)}
.login-card{background:#fff; border-radius:16px; padding:2rem; width:100%; max-width:380px; box-shadow:0 12px 40px rgba(0,0,0,.25)}
.login-card h1{text-align:center; margin-bottom:1.4rem}
.alert{padding:.6rem .8rem; border-radius:10px; margin-bottom:1rem; font-size:.9rem}
.alert.bad{background:var(--bad-bg); color:var(--bad)}
.alert.good{background:var(--good-bg); color:var(--good)}

/* Flash messages */
.flash{padding:.6rem .9rem; border-radius:10px; margin-bottom:1rem; font-size:.9rem}
.flash.ok{background:var(--good-bg); color:var(--good)}
.flash.bad{background:var(--bad-bg); color:var(--bad)}

/* Toolbar (list filters) */
.toolbar{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center}
.toolbar input[type=search]{flex:1; min-width:180px}
.toolbar select{width:auto; min-width:150px}
.toolbar label.inline{display:flex; align-items:center; gap:.4rem}
.toolbar label.inline span{font-size:.85rem; color:var(--muted); font-weight:600}
.toolbar label.inline input{width:auto}

/* Form grid (product / customer) */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
.form-grid label{display:grid; gap:.3rem; align-content:start}
.form-grid label>span{font-size:.85rem; color:var(--muted); font-weight:600}
.form-grid label>span i{font-weight:400; font-style:normal; opacity:.7}
.form-grid .span2{grid-column:1 / -1}
.form-grid .checkrow{display:flex; flex-direction:row; align-items:center; gap:.5rem}
.form-grid .checkrow input{width:auto}
.input-row{display:flex; gap:.5rem}
.input-row input{flex:1}
.form-actions{display:flex; gap:.6rem; margin-top:.4rem}
@media(max-width:680px){.form-grid{grid-template-columns:1fr}}
.thumb{max-width:120px; border-radius:10px; border:1px solid var(--line)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85rem}
.pad{padding:.8rem}
.badge.ok{background:var(--good-bg); color:var(--good)}

/* Dialog / modal */
.modal{border:0; border-radius:14px; padding:1.2rem; box-shadow:0 20px 60px rgba(0,0,0,.3); max-width:440px; width:92vw}
.modal::backdrop{background:rgba(8,14,24,.5)}
.modal h3{margin-bottom:.4rem}
.modal label{display:grid; gap:.3rem; margin-top:.6rem}
.receipt{max-width:360px}

/* Sell layout (POS) */
.sell-grid{display:grid; grid-template-columns:1fr 380px; gap:1rem; align-items:start}
@media(max-width:880px){.sell-grid{grid-template-columns:1fr}}
.scan-input{font-size:1.1rem; padding:.8rem .9rem}
.results{margin-top:.6rem; max-height:62vh; overflow-y:auto; border:1px solid var(--line); border-radius:10px}
.results:empty{display:none}
.results.sm{position:absolute; inset-inline:0; max-height:220px; background:#fff; z-index:5; box-shadow:var(--shadow); margin-top:.2rem}
.result-row{display:flex; align-items:center; gap:.7rem; width:100%; text-align:start; padding:.6rem .7rem;
  border:0; border-bottom:1px solid var(--line); background:#fff; cursor:pointer; font:inherit; color:var(--ink)}
.result-row:hover{background:#f6f8fb}
.result-row:last-child{border-bottom:0}
.r-name{flex:1; font-weight:600}
.r-price{font-variant-numeric:tabular-nums; color:var(--muted)}
.r-stock{min-width:42px; text-align:end}
.cart-panel h2{margin-bottom:.6rem}
.cart-tbl th,.cart-tbl td{padding:.4rem .45rem}
.mini{width:70px; padding:.35rem .4rem; text-align:end}
.totals{margin-top:.8rem; border-top:1px solid var(--line); padding-top:.6rem}
.totals .row{display:flex; justify-content:space-between; padding:.25rem 0}
.totals .row.grand{font-size:1.3rem; font-weight:700; border-top:2px solid var(--ink); margin-top:.3rem; padding-top:.5rem}
.checkout{margin-top:1rem; display:grid; gap:.7rem}
.checkout label{display:grid; gap:.3rem}
.checkout label>span{font-size:.85rem; color:var(--muted); font-weight:600}
.cust-pick{position:relative}

.muted{color:var(--muted)}
.right{text-align:end}
.mt{margin-top:1rem} .mb{margin-bottom:1rem}
.flex{display:flex; gap:.6rem; align-items:center}
.flex-wrap{flex-wrap:wrap}
.spacer{flex:1}
.toast{position:fixed; inset-block-end:1rem; inset-inline:0; margin:auto; width:fit-content;
  background:var(--ink); color:#fff; padding:.7rem 1.2rem; border-radius:10px; z-index:50; opacity:0; transition:opacity .2s}
.toast.show{opacity:1}

@media print{ .topbar,.checkout,.sell-grid>section:first-child,.form-actions,.page-head{display:none!important} }