/* حبة كريز — شاشات المخازن والموردين */
:root{
  --brand:#006873;--brand-strong:#004e57;--brand-soft:#d9eef0;--on-brand:#fff;
  --accent:#f2b705;--on-accent:#1f2a2b;
  --surface-100:#fbf4ea;--surface-200:#fff;--surface-300:#f3e8d6;
  --ink:#1f2a2b;--ink-muted:#56656a;--line:#e3d5c0;--line-strong:#8f8170;
  --success:#1d6b45;--success-soft:#dff1e7;--warning:#7a5200;--warning-soft:#fdf0c4;
  --danger:#a8231b;--danger-soft:#fbe3e1;--focus:#006873;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;
  --radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-pill:999px;
  --shadow-card:0 1px 2px rgba(31,42,43,.06),0 2px 8px rgba(31,42,43,.05);
  --font:Rubik,"Segoe UI",Tahoma,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --brand:#4fb0ba;--brand-strong:#7ccad2;--brand-soft:#173a3e;--on-brand:#0b1f21;
  --surface-100:#121718;--surface-200:#1b2223;--surface-300:#243031;
  --ink:#eef3f2;--ink-muted:#a8b6b6;--line:#33403f;--line-strong:#7d8d8c;
  --success:#6fcf9b;--success-soft:#163326;--warning:#f5cd52;--warning-soft:#3a2f0c;
  --danger:#f2978f;--danger-soft:#3d1a18;--focus:#7ccad2;--shadow-card:0 1px 2px rgba(0,0,0,.4);
}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--surface-100);color:var(--ink);font:400 15px/24px var(--font)}
body{min-height:100vh;overflow-x:hidden}
a{color:var(--brand-strong)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.num{font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}
.muted{color:var(--ink-muted)}
.small{font-size:13px;line-height:20px}
.hidden{display:none!important}

/* شريط علوي */
.top{position:sticky;top:0;z-index:10;background:var(--brand);color:var(--on-brand);display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);min-height:56px}
.top .brandname{font-weight:600;font-size:17px;margin-inline-end:auto}
.top .who{font-size:13px;opacity:.9}
.iconbtn{position:relative;background:transparent;border:0;color:inherit;min-width:44px;min-height:44px;border-radius:var(--radius-md);cursor:pointer;font-size:20px}
.iconbtn:hover{background:rgba(255,255,255,.12)}
.badge-count{position:absolute;top:4px;inset-inline-start:4px;background:var(--accent);color:var(--on-accent);border-radius:var(--radius-pill);font:600 11px/16px var(--font);min-width:16px;padding:0 4px}

/* تنقل */
.nav{display:flex;gap:var(--space-1);overflow-x:auto;padding:var(--space-2) var(--space-4);background:var(--surface-200);border-bottom:1px solid var(--line);scrollbar-width:none}
.nav a{flex:none;text-decoration:none;color:var(--ink-muted);padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);font-weight:500;font-size:14px}
.nav a.on{background:var(--brand-soft);color:var(--brand-strong)}

main{padding:var(--space-4);max-width:1280px;margin:0 auto}
h1{font:600 20px/28px var(--font);margin:0 0 var(--space-4)}
h2{font:600 16px/24px var(--font);margin:0 0 var(--space-3)}

.card{background:var(--surface-200);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-card);margin-bottom:var(--space-4)}
.grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media (min-width:700px){.grid{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.kpi .v{font:600 22px/30px var(--font);font-variant-numeric:tabular-nums}
@media (min-width:700px){.kpi .v{font-size:28px;line-height:36px}}
.kpi .l{font-size:13px;color:var(--ink-muted)}
.kpi.warn{border-color:var(--accent)}

/* أزرار */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-4);border-radius:var(--radius-md);font-weight:500;border:1px solid transparent;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--brand);color:var(--on-brand)}
.btn.primary:hover{background:var(--brand-strong)}
.btn.secondary{background:var(--surface-200);color:var(--brand-strong);border-color:var(--line-strong)}
.btn.danger{background:var(--surface-200);color:var(--danger);border-color:var(--danger)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.block{width:100%}
.row{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}

/* حقول */
.field{display:flex;flex-direction:column;gap:var(--space-1);margin-bottom:var(--space-3)}
.field label{font:500 13px/18px var(--font)}
.field .hint{font-size:13px;color:var(--ink-muted)}
input,select,textarea{min-height:44px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface-200);padding:var(--space-2) var(--space-3);width:100%}
input[type=number]{direction:ltr;text-align:left}
textarea{min-height:80px}
.fields{display:grid;gap:0 var(--space-4);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* جداول */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-200)}
table{width:100%;border-collapse:collapse}
th{font:500 13px/18px var(--font);color:var(--ink-muted);text-align:right;padding:var(--space-3);border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:var(--space-3);border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:nth-child(even) td{background:var(--surface-300)}
td.n,th.n{text-align:left}
tr.clickable{cursor:pointer}
tr.clickable:hover td{background:var(--brand-soft)}

/* شارات */
.st{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-2);border-radius:var(--radius-pill);font:500 13px/20px var(--font);white-space:nowrap}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st.received{background:var(--brand-soft);color:var(--brand-strong)}
.st.pending_approval{background:var(--warning-soft);color:var(--warning)}
.st.approved{background:var(--success-soft);color:var(--success)}
.st.rejected{background:var(--danger-soft);color:var(--danger)}
.st.cancelled{background:var(--surface-300);color:var(--ink-muted)}
.up{color:var(--danger);font-weight:600}
.down{color:var(--success);font-weight:600}

/* سطور الإدخال */
.line-item{display:grid;grid-template-columns:1fr 130px 44px;gap:var(--space-2);align-items:end;margin-bottom:var(--space-2)}
.line-item .field{margin:0}

/* رسائل */
.toast{position:fixed;bottom:var(--space-4);left:50%;transform:translateX(-50%);background:var(--ink);color:var(--surface-100);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);z-index:50;max-width:calc(100vw - 32px);box-shadow:var(--shadow-card)}
.toast.err{background:var(--danger);color:#fff}
.empty{text-align:center;color:var(--ink-muted);padding:var(--space-8) var(--space-4)}
.notice{border-radius:var(--radius-md);padding:var(--space-3);margin-bottom:var(--space-3);background:var(--warning-soft);color:var(--warning)}

/* لوحة الإشعارات */
.panel{position:fixed;top:56px;inset-inline-start:var(--space-2);width:min(380px,calc(100vw - 16px));max-height:70vh;overflow:auto;background:var(--surface-200);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);z-index:20;padding:var(--space-2)}
.panel .n-item{padding:var(--space-3);border-bottom:1px solid var(--line)}
.panel .n-item.unread{background:var(--brand-soft)}
.dialog-bg{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40;display:flex;align-items:center;justify-content:center;padding:var(--space-4)}
.dialog{background:var(--surface-200);border-radius:var(--radius-lg);padding:var(--space-4);width:min(520px,100%);max-height:90vh;overflow:auto}

/* دخول */
.login{max-width:400px;margin:10vh auto;padding:var(--space-4)}
.login .logo{font:600 28px/36px var(--font);color:var(--brand);text-align:center;margin-bottom:var(--space-6)}

@media (min-width:1100px){
  main{padding:var(--space-6) var(--space-8)}
  .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--space-6);align-items:start}
}
@media print{
  .top,.nav,.noprint{display:none!important}
  body{background:#fff}
  .card,.tablewrap{box-shadow:none;border-color:#ccc}
}