:root{
  --cream:#FAF6EC; --cream-deep:#F1E9D8; --line:#E3D8BF; --white:#fff;
  --green:#23402C; --green-light:#3C5F44; --head:#23402C; --on-green:#FAF6EC;
  --brass:#B98D4B; --brass-light:#D9B87A; --ink:#25302a; --muted:#6b756e;
  --danger:#9b2c2c; --ok:#2d6a3e; --navy:#16283B;
}
@media (prefers-color-scheme: dark){
  :root{
    --cream:#121a15; --cream-deep:#1c2922; --line:#2e4035; --white:#18231d;
    --ink:#e9e5d9; --muted:#9fb0a5; --head:#cfe3d3; --brass:#d2a862; --danger:#f08a8a; --ok:#7cc48f;
    color-scheme:dark;
  }
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-padding-top:env(safe-area-inset-top,0px);}
body{font-family:'Tajawal',system-ui,sans-serif; background:var(--cream); color:var(--ink); line-height:1.6;
  padding-bottom:env(safe-area-inset-bottom,0px);}
[hidden]{display:none !important;}
button,input,select,textarea{font-family:inherit; font-size:.95rem; color:inherit;}
:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}
.num{direction:ltr; unicode-bidi:isolate; display:inline-block;}
a{color:var(--head);}

/* ===== login ===== */
.login{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--green);}
.login-box{background:var(--cream); border-radius:10px; padding:32px 26px; width:100%; max-width:360px; text-align:center;}
.login-box h1{font-size:1.3rem; color:var(--head); margin:10px 0 4px;}
.login-box p{color:var(--muted); font-size:.88rem; margin-bottom:18px;}
.login-box input{width:100%; padding:12px 14px; margin-bottom:10px; text-align:center; direction:ltr;}
.err{color:var(--danger); font-size:.86rem; min-height:1.3em; margin-top:8px;}

/* ===== shell ===== */
header.top{background:var(--green); color:var(--on-green); padding:calc(10px + env(safe-area-inset-top,0px)) 16px 0; position:sticky; top:0; z-index:20;}
.top-in{max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:10px; padding-bottom:8px;}
.top-in svg{width:32px; height:32px; flex-shrink:0;}
.brand-t{font-weight:700; line-height:1.2;}
.brand-s{font-size:.75rem; color:var(--brass-light);}
.sp{flex:1;}
.who{font-size:.82rem; color:var(--brass-light); white-space:nowrap;}
.top-btn{background:transparent; color:var(--on-green); border:1px solid rgba(250,246,236,.4); padding:5px 12px; border-radius:6px; cursor:pointer; font-size:.82rem;}
.top-btn:hover{background:rgba(250,246,236,.12);}
nav.tabs{max-width:1180px; margin:0 auto; display:flex; gap:2px; overflow-x:auto; scrollbar-width:none;}
nav.tabs::-webkit-scrollbar{display:none;}
nav.tabs a{color:var(--on-green); opacity:.75; text-decoration:none; padding:8px 13px; white-space:nowrap; border-bottom:3px solid transparent; font-size:.9rem;}
nav.tabs a.on{opacity:1; border-bottom-color:var(--brass-light); font-weight:700;}
main{max-width:1180px; margin:0 auto; padding:18px 16px 70px; display:flex; flex-direction:column; gap:18px;}
h2{font-size:1.1rem; color:var(--head);}
h3{font-size:.98rem; color:var(--head); margin-bottom:8px;}
.card{background:var(--white); border:1px solid var(--line); border-radius:8px; padding:16px;}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.between{justify-content:space-between;}
.muted{color:var(--muted); font-size:.85rem;}
.note{font-size:.8rem; color:var(--muted);}

/* ===== forms ===== */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px 14px;}
label.f,div.f{display:flex; flex-direction:column; gap:4px; font-size:.84rem; color:var(--muted); min-width:0;}
input,select,textarea{width:100%; min-width:0; padding:10px 12px; border:1.5px solid var(--line); border-radius:6px; background:var(--cream);}
input:focus,select:focus,textarea:focus{border-color:var(--green); background:var(--white);}
input[type=checkbox]{width:18px; height:18px; accent-color:var(--green); padding:0;}
.chk{display:flex; align-items:center; gap:8px; padding-top:22px; color:var(--ink); font-size:.9rem;}
.btn{background:var(--green); color:var(--on-green); border:0; padding:11px 22px; border-radius:6px; cursor:pointer; font-weight:700;}
.btn:hover{background:var(--green-light);}
.btn:disabled{opacity:.6; cursor:wait;}
.btn-line{background:transparent; color:var(--head); border:1.5px solid var(--head); padding:9px 16px; border-radius:6px; cursor:pointer;}
.btn-line:hover{background:var(--cream-deep);}
.btn-danger{background:transparent; color:var(--danger); border:1.5px solid var(--danger); padding:9px 16px; border-radius:6px; cursor:pointer;}
.link{background:none; border:0; color:var(--head); text-decoration:underline; cursor:pointer; padding:2px 4px;}
.link.del{color:var(--danger);}

/* ===== stats ===== */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px;}
.stat{background:var(--white); border:1px solid var(--line); border-radius:8px; padding:12px 14px;}
.stat .lb{font-size:.8rem; color:var(--muted);}
.stat .vl{font-size:1.25rem; font-weight:700; color:var(--head);}
.stat .sub{font-size:.76rem; color:var(--muted);}
.stat.hl .vl{color:var(--brass);}
.stat.bad .vl{color:var(--danger);}

/* ===== tables / lists ===== */
.tw{overflow-x:auto; border:1px solid var(--line); border-radius:6px;}
table{width:100%; border-collapse:collapse; font-size:.88rem;}
th{background:var(--cream-deep); color:var(--head); text-align:right; padding:9px 11px; white-space:nowrap; font-weight:700;}
td{padding:9px 11px; border-top:1px solid var(--line); vertical-align:top;}
td.n{white-space:nowrap;}
tr.off td{opacity:.55;}
.empty{padding:24px; text-align:center; color:var(--muted);}
.list{display:flex; flex-direction:column; gap:8px;}
.item{display:grid; grid-template-columns:1fr auto; gap:4px 12px; background:var(--white); border:1px solid var(--line); border-radius:8px; padding:12px 14px; text-decoration:none; color:inherit;}
a.item:hover{border-color:var(--brass);}
.item .t{font-weight:700;}
.item .m{font-size:.82rem; color:var(--muted);}
.item .amt{text-align:left; font-weight:700;}
.tag{display:inline-block; padding:0 9px; border-radius:20px; font-size:.76rem; border:1px solid var(--line); margin-inline-start:4px;}
.tag.amana{border-color:var(--brass); color:var(--brass);}
.tag.void{border-color:var(--danger); color:var(--danger);}
.tag.paid{border-color:var(--ok); color:var(--ok);}
.tag.due{border-color:var(--danger); color:var(--danger);}

/* ===== invoice items form ===== */
.items{border:1px solid var(--line); border-radius:6px; padding:12px; background:var(--cream);}
.it-row{display:grid; grid-template-columns:minmax(0,2.6fr) minmax(0,.8fr) minmax(0,1fr) auto; gap:8px; align-items:end; margin-bottom:10px;}
.it-row input,.it-row select{background:var(--white);}
.it-sum{font-size:.84rem; color:var(--muted); white-space:nowrap; padding-bottom:12px;}
.totals{display:grid; gap:4px; max-width:340px; margin-inline-start:auto; font-size:.95rem;}
.totals div{display:flex; justify-content:space-between; gap:20px;}
.totals .big{font-size:1.15rem; font-weight:700; color:var(--head); border-top:1px solid var(--line); padding-top:6px;}

/* ===== invoice sheet ===== */
.sheet{background:#fff; color:#222; border:1px solid var(--line); border-radius:6px; padding:26px 24px; max-width:820px; margin:0 auto; width:100%; position:relative;}
.sheet h1{font-size:1.4rem; color:#23402C;}
.sheet .hd{display:flex; justify-content:space-between; gap:16px; align-items:flex-start; border-bottom:2px solid #B98D4B; padding-bottom:12px; margin-bottom:14px;}
.sheet .logo{display:flex; align-items:center; gap:10px;}
.sheet .logo svg{width:46px; height:46px;}
.sheet table{font-size:.9rem; color:#222;}
.sheet th{background:#F1E9D8; color:#23402C;}
.sheet td{border-top:1px solid #E3D8BF;}
.sheet .box{display:grid; grid-template-columns:1fr 1fr; gap:6px 20px; margin-bottom:14px; font-size:.9rem;}
.sheet .box b{color:#23402C;}
.sheet .sign{display:flex; justify-content:space-between; margin-top:38px; font-size:.85rem; color:#555;}
.sheet .sign div{border-top:1px solid #999; padding-top:4px; width:30%; text-align:center;}
.sheet .stamp{position:absolute; top:46%; left:50%; transform:translate(-50%,-50%) rotate(-18deg); font-size:3.4rem; font-weight:900; color:rgba(155,44,44,.28); border:6px solid rgba(155,44,44,.28); padding:4px 24px; border-radius:10px; pointer-events:none;}
.sheet .totals{color:#222;}
.sheet .totals .big{color:#23402C; border-color:#E3D8BF;}

/* ===== modal / toast ===== */
#modal{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:40; display:flex; align-items:center; justify-content:center; padding:16px;}
.modal-box{background:var(--cream); border-radius:10px; padding:20px; width:100%; max-width:420px; max-height:90vh; overflow:auto;}
.toast{position:fixed; bottom:calc(20px + env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%); background:#16283B; color:#FAF6EC; padding:10px 20px; border-radius:6px; font-size:.9rem; z-index:50; max-width:90vw; text-align:center;}
.toast.err{background:#7a1f1f;}
.banner{background:var(--cream-deep); border:1px solid var(--line); border-radius:8px; padding:9px 14px; font-size:.88rem; color:var(--ink);}
.banner.warn{border-color:var(--danger); color:var(--danger);}
.top-btn.warn{border-color:#f0b4b4; background:rgba(155,44,44,.35);}
#netBadge{font-size:.76rem; white-space:nowrap;}

@media(max-width:620px){
  .it-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .it-row .it-prod{grid-column:1 / -1;}
  .sheet{padding:16px 12px;}
  .sheet .box{grid-template-columns:1fr;}
}
@page{size:A4; margin:12mm;}
@media print{
  body{background:#fff;}
  header.top,.noprint,#toast,#modal{display:none !important;}
  main{padding:0; max-width:none;}
  .sheet{border:0; border-radius:0; padding:0; max-width:none;}
}