/* Facture Rawafid */
:root{color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}body{margin:0}img{max-width:100%}[hidden]{display:none!important}
/* Layout: form column + invoice preview, stacked on phone. Rawafid navy/blue palette. */
:root{
  --bg:#f2f4f9; --paper:#ffffff; --fg:#17202e; --muted:#5d6878; --line:#d9dee8;
  --accent:#1f3a78; --accent-soft:#e7edf8; --danger:#b3261e;
  --display:"Cairo","Tajawal",Tahoma,sans-serif;
  --body:"Tajawal","Cairo",Tahoma,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#10151d; --paper:#18202b; --fg:#e7ecf3; --muted:#9aa6b6; --line:#2c3644;
  --accent:#86a9ec; --accent-soft:#1e2b3d; --danger:#f2847b; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#10151d; --paper:#18202b; --fg:#e7ecf3; --muted:#9aa6b6; --line:#2c3644;
  --accent:#86a9ec; --accent-soft:#1e2b3d; --danger:#f2847b; color-scheme:dark}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.6}
.wrap{max-width:1100px;margin:0 auto;padding-block:24px 48px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:start}
@media (max-width:820px){.wrap{grid-template-columns:minmax(0,1fr)}}
h1{font-family:var(--display);font-size:1.7rem;margin:0;color:var(--accent);text-wrap:balance}
h2{font-family:var(--display);font-size:1.1rem;margin:0}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:20px;display:grid;gap:16px;min-width:0}
.intro{color:var(--muted);margin:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:420px){.grid2{grid-template-columns:1fr}}
.opts{display:flex;flex-wrap:wrap;gap:8px 20px}
.chk{display:flex;flex-direction:row;align-items:center;gap:8px;color:var(--fg);font-size:.95rem;cursor:pointer}
.chk input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
table.no-cbm .c-cbm,table.no-sum .c-sum,table.no-ship .c-ship{display:none}
label{display:grid;gap:4px;font-size:.9rem;color:var(--muted)}
input,select{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:8px 10px;width:100%;box-sizing:border-box}
input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.item{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;padding:12px;border:1px dashed var(--line);border-radius:8px;align-items:center}
.thumb{width:88px;height:88px;border-radius:6px;background:var(--accent-soft);display:grid;place-items:center;overflow:hidden;cursor:pointer;color:var(--accent);font-size:.8rem;text-align:center;border:none;padding:0;font-family:inherit}
.thumb img{width:100%;height:100%;object-fit:cover}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:8px;align-items:end;min-width:0}
@media (max-width:560px){.row3{grid-template-columns:1fr 1fr}.item{grid-template-columns:72px minmax(0,1fr)}.thumb{width:72px;height:72px}}
.del{background:none;border:1px solid var(--line);color:var(--danger);border-radius:6px;padding:8px 10px;cursor:pointer;font:inherit}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{font:inherit;font-weight:600;border-radius:8px;padding:10px 18px;cursor:pointer;border:1px solid var(--accent)}
.btn.primary{background:var(--accent);color:var(--paper)}
.btn.ghost{background:transparent;color:var(--accent)}
.tag{font-size:.8rem;color:var(--muted)}
/* invoice: always paper white */
.inv{background:#fff;color:#17202e;border-radius:4px;padding:28px;box-shadow:0 2px 14px rgba(20,30,50,.12);min-width:0}
.inv-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-bottom:3px solid #1f3a78;padding-bottom:14px}
.inv-head .logo{height:96px;width:auto}
.inv-head .t{font-family:var(--display);font-weight:900;font-size:2rem;color:#1f3a78;line-height:1.1}
.meta{font-size:.9rem;color:#4a5566;display:grid;gap:2px}
.client{margin-block:16px;font-size:1rem}
.client b{color:#5d6878;font-weight:400}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.95rem;font-variant-numeric:tabular-nums}
th{background:#1f3a78;color:#fff;font-weight:700;font-family:var(--display);padding:8px;text-align:right}
td{padding:8px;border-bottom:1px solid #e3e7ee;vertical-align:middle}
tfoot td{font-weight:700;background:#f3f6fb;border-top:2px solid #1f3a78;border-bottom:none}
td.n,th.n{text-align:left;white-space:nowrap}
td img{width:56px;height:56px;object-fit:cover;border-radius:4px;display:block}
.noimg{width:56px;height:56px;border-radius:4px;background:#eef2f7}
.total.cbm{font-size:1rem;background:#f3f6fb}
.total+.total{margin-top:8px}
.total{display:flex;justify-content:space-between;margin-top:14px;padding:12px 14px;background:#e7edf8;border-radius:6px;font-weight:700;font-size:1.15rem}
.foot{margin-top:18px;text-align:center;color:#5d6878;font-size:.85rem;display:grid;gap:2px}
.foot span[dir=ltr]{unicode-bidi:isolate}
.out{display:grid;gap:8px}
.out img{border:1px solid var(--line);border-radius:6px}