:root { --bg:#f6f4ef; --card:#fff; --ink:#1f2328; --muted:#6b7078; --brand:#8a1c1c; --ok:#1f7a3a; --warn:#a15c00; --err:#b42318; --line:#e3ded3; }
* { box-sizing: border-box; }
body { margin:0; font-family: "Noto Kufi Arabic","Segoe UI",Tahoma,system-ui,sans-serif; background:var(--bg); color:var(--ink); font-size:15px; line-height:1.6; }
header { display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; padding:.6rem 1rem; background:var(--brand); color:#fff; position:sticky; top:0; z-index:5; }
.brand { font-weight:700; }
nav { display:flex; flex-wrap:wrap; gap:.25rem; flex:1; }
nav a { color:#fff; text-decoration:none; padding:.2rem .6rem; border-radius:6px; }
nav a.active, nav a:hover { background:rgba(255,255,255,.18); }
#who { font-size:.85rem; display:flex; gap:.5rem; align-items:center; }
#who button { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.6); }
main { max-width:1200px; margin:0 auto; padding:1rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1rem; margin-bottom:1rem; }
h1 { font-size:1.3rem; margin:.2rem 0 1rem; } h2 { font-size:1.1rem; margin:0 0 .6rem; } h3 { font-size:1rem; margin:.8rem 0 .4rem; }
.grid { display:grid; gap:.7rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.two { display:grid; gap:1rem; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); align-items:start; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
label { display:flex; flex-direction:column; gap:.2rem; font-size:.9rem; color:var(--muted); }
label.inline { flex-direction:row; align-items:center; gap:.4rem; color:var(--ink); }
input, select, textarea, button { font:inherit; }
input, select, textarea { padding:.45rem .55rem; border:1px solid #cfc8ba; border-radius:7px; background:#fff; color:var(--ink); min-width:0; }
input[type=number] { direction:ltr; text-align:right; }
textarea { min-height:3rem; }
button, .btn { padding:.45rem .9rem; border:1px solid var(--brand); background:var(--brand); color:#fff; border-radius:7px; cursor:pointer; text-decoration:none; display:inline-block; }
button.secondary, .btn.secondary { background:#fff; color:var(--brand); }
button.danger { background:var(--err); border-color:var(--err); }
button.ok { background:var(--ok); border-color:var(--ok); }
button:disabled { opacity:.5; cursor:not-allowed; }
.actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem; }
table { width:100%; border-collapse:collapse; font-size:.92rem; }
th, td { padding:.4rem .45rem; border-bottom:1px solid var(--line); text-align:right; vertical-align:top; }
th { background:#faf8f3; font-weight:600; }
td.num, th.num { text-align:left; direction:ltr; white-space:nowrap; }
.table-wrap { overflow-x:auto; }
.muted { color:var(--muted); } .small { font-size:.85rem; }
.pill { display:inline-block; padding:.05rem .5rem; border-radius:99px; font-size:.8rem; background:#eee; white-space:nowrap; }
.st-draft{background:#eee}.st-awaiting_approval{background:#ffe7c2}.st-approval_rejected{background:#fdd}.st-quote_sent{background:#e2ecff}
.st-confirmed{background:#d9f2df}.st-preparing{background:#fff3b0}.st-ready{background:#cdeffd}.st-out_for_delivery{background:#e5dcff}
.st-delivered{background:#d5f5ea}.st-closed{background:#c9c9c9}.st-cancelled{background:#f3d0d0;text-decoration:line-through}
.msg { border-radius:8px; padding:.5rem .7rem; margin:.4rem 0; font-size:.9rem; }
.msg.err { background:#fdecea; color:var(--err); } .msg.warn { background:#fff4e0; color:var(--warn); } .msg.info { background:#eef4ff; color:#244a8f; } .msg.ok { background:#e8f6ec; color:var(--ok); }
.msg ul { margin:.2rem 0; padding-inline-start:1.2rem; }
.pick { display:grid; grid-template-columns: 1fr auto auto; gap:.3rem .5rem; align-items:center; padding:.25rem 0; border-bottom:1px dashed var(--line); }
.pick input[type=number] { width:4.5rem; }
.pick .tag { font-size:.75rem; color:var(--muted); }
details { border:1px solid var(--line); border-radius:8px; padding:.3rem .6rem; margin:.4rem 0; background:#fffdf9; }
summary { cursor:pointer; font-weight:600; }
.totals td { font-weight:600; } .grand td { font-size:1.05rem; border-top:2px solid var(--ink); }
.sticky { position:sticky; top:4.2rem; }
.kpis { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:.6rem; }
.kpi { background:#fff; border:1px solid var(--line); border-radius:8px; padding:.6rem; } .kpi b { display:block; font-size:1.2rem; }
#toast { position:fixed; bottom:1rem; left:50%; transform:translateX(-50%); background:#222; color:#fff; padding:.5rem 1rem; border-radius:8px; display:none; z-index:20; max-width:90vw; }
.login { max-width:380px; margin:3rem auto; }
.assume { border-inline-start:4px solid var(--warn); }
.quote { max-width:800px; margin:0 auto; background:#fff; padding:1.5rem; border:1px solid var(--line); }
@media print { .no-print { display:none !important; } body { background:#fff; } main { padding:0; } .quote { border:0; } }