@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

/* ============================================================
   نظام إدارة مصنع — لوحة شغل يومية
   اللون: عنابي على رمادي أردوازي | الخط: IBM Plex Sans Arabic
   ============================================================ */
:root{
  /* ====== ألوان RYA: فوشيا EB1256 · ماجنتا BC2A8D · تيل AADDDD ====== */
  --ink:#1e1420;          /* أسود بميل بنفسجي دافي */
  --ink-2:#5b4d58;
  --ink-3:#8c7d88;
  --bg:#f7f4f6;           /* أوف-وايت دافي بميل وردي خفيف */
  --panel:#fff;
  --line:#e7dee4;
  --line-soft:#f3edf1;

  --brand:#bc2a8d;        /* الماجنتا — الأزرار والروابط */
  --brand-dark:#9a1f72;
  --brand-soft:#fbedf6;
  --accent:#eb1256;       /* الفوشيا — للحظة الأعلى صوتًا بس */

  --plum:#2b1226;         /* القايمة — باذنجاني */
  --plum-2:#3a1b33;
  --teal:#15707e;         /* تيل RYA غامق عشان يتقرا */
  --teal-bg:#eaf6f6;

  --ok:#19684a;    --ok-bg:#e6f2ec;
  --warn:#a8221f;  --warn-bg:#fcebeb;
  --amber:#8a6512; --amber-bg:#fbf2dd;

  --r:9px;
  --shadow:0 1px 2px rgba(43,18,38,.06), 0 1px 3px rgba(43,18,38,.05);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'IBM Plex Sans Arabic',system-ui,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:15px; line-height:1.6;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0; font-weight:600; line-height:1.3; letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }

/* ---------------- الهيكل ---------------- */
.shell{display:flex; min-height:100vh}
.side{
  width:238px; flex:none; color:#d8c6d4;
  background:linear-gradient(180deg, #3a1b33 0%, var(--plum) 60%);
  position:sticky; top:0; height:100vh; overflow-y:auto; overflow-x:hidden;
}
.brand{padding:20px 20px 16px; border-bottom:1px solid rgba(255,255,255,.08)}
.brand b{display:block; font-size:16.5px; color:#fff; font-weight:600; letter-spacing:-.2px}
.brand span{font-size:12px; color:#9c8396; letter-spacing:.3px}

.nav{padding:10px 10px 30px}
.nav .grp{
  font-size:11.5px; color:#9c8396; padding:16px 10px 6px; font-weight:500;
  margin-top:6px; border-top:1px solid rgba(255,255,255,.07);
}
.nav .grp:first-of-type{border-top:0; margin-top:0}
.nav a{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px;
  color:#d2c0ce; font-size:14.5px; margin-bottom:1px; transition:background .12s;
}
.nav a svg{width:17px; height:17px; flex:none; opacity:.8}
.nav a span.lb{flex:1; min-width:0}
.nav a:hover{background:var(--plum-2); color:#fff; text-decoration:none}
.nav a.on{background:var(--brand); color:#fff; font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.25)}
.nav a.on svg{opacity:1}
.nav a .pill{
  background:rgba(255,255,255,.14); color:#fff; font-size:11px; padding:1px 7px;
  border-radius:10px; font-weight:600;
}
.nav a.on .pill{background:rgba(0,0,0,.25)}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
  background:rgba(255,255,255,.92); backdrop-filter:saturate(1.2) blur(6px); border-bottom:1px solid var(--line);
  padding:13px 26px; display:flex; align-items:center; gap:16px; justify-content:space-between;
  position:sticky; top:0; z-index:20;
}
.topbar h1{font-size:19px}
.topbar .sub{font-size:13px; color:var(--ink-3); margin-top:1px}
.who{font-size:13px; color:var(--ink-2); display:flex; align-items:center; gap:12px}
.wrap{padding:22px 26px 60px; max-width:1400px; width:100%}

/* ---------------- البطاقات ---------------- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); margin-bottom:16px; box-shadow:var(--shadow)}
.card > h3{
  padding:13px 18px; border-bottom:1px solid var(--line-soft); font-size:15px; font-weight:600;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.card .body{padding:18px}
.card .foot{padding:12px 18px; border-top:1px solid var(--line-soft); background:#fdfafc; border-radius:0 0 var(--r) var(--r)}

/* شريط الأرقام: لوح واحد مقسوم بخطوط، مش كروت متكررة */
.kpis{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; margin-bottom:16px; box-shadow:var(--shadow);
}
.kpi{padding:14px 16px; border-left:1px solid var(--line-soft)}
.kpi:last-child{border-left:0}
.kpi .lbl{font-size:12.5px; color:var(--ink-3); line-height:1.5}
.kpi .val{font-size:23px; font-weight:600; margin:2px 0 1px; letter-spacing:-.6px; line-height:1.2}
.kpi .val small{font-size:13px; color:var(--ink-3); font-weight:400; letter-spacing:0}
.kpi.alert{background:var(--warn-bg)}
.kpi.alert .val{color:var(--warn)}
@media (max-width:640px){ .kpi{border-left:0; border-bottom:1px solid var(--line-soft)} }

/* ---------------- الجداول ---------------- */
.tbl{width:100%; border-collapse:collapse; font-size:14.2px}
.tbl th{
  text-align:right; font-weight:600; font-size:12.5px; color:var(--ink-2);
  padding:9px 14px; border-bottom:1px solid var(--line); background:#faf6f9; white-space:nowrap;
  position:sticky; top:0; z-index:1;
}
.tbl td{padding:9px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:#fdfafc}
.tbl .n{text-align:left; white-space:nowrap}
.tbl .mini{font-size:12.5px; color:var(--ink-3)}
.tbl tfoot td{background:#faf6f9; font-weight:600; border-top:1px solid var(--line); border-bottom:0}
.scroll{overflow-x:auto; max-height:72vh; overflow-y:auto}

/* ---------------- الأزرار ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); padding:8px 14px; border-radius:6px;
  font:inherit; font-size:14px; cursor:pointer; white-space:nowrap; transition:background .12s,border-color .12s;
}
.btn:hover{background:#faf5f8; border-color:#d9ccd4; text-decoration:none}
.btn.p{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600;
        box-shadow:0 1px 2px rgba(188,42,141,.25)}
.btn.p:hover{background:var(--brand-dark); border-color:var(--brand-dark)}
.btn.d{color:var(--warn); border-color:#e7c9c5}
.btn.d:hover{background:var(--warn-bg)}
.btn.sm{padding:5px 10px; font-size:13px}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* ---------------- النماذج ---------------- */
label{display:block; font-size:13px; color:var(--ink-2); margin-bottom:5px; font-weight:500}
input[type=text],input[type=number],input[type=date],input[type=password],select,textarea{
  width:100%; padding:8px 11px; border:1px solid var(--line); border-radius:6px;
  font:inherit; font-size:14.5px; background:#fff; color:var(--ink); font-variant-numeric:tabular-nums;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand); outline-offset:-1px; border-color:var(--brand)}
input::placeholder{color:#b3a5ae}
textarea{min-height:70px; resize:vertical}
.grid{display:grid; gap:14px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.row{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.row .f{flex:1; min-width:150px}
.hint{font-size:12.5px; color:var(--ink-3); margin-top:5px; line-height:1.6}

/* ---------------- الوسوم والرسائل ---------------- */
.tag{
  display:inline-block; font-size:12px; padding:2px 9px; border-radius:4px;
  background:var(--line-soft); color:var(--ink-2); font-weight:500;
}
.tag.raw{background:#f1e9f3; color:#6b3a73}
.tag.pack{background:var(--teal-bg); color:var(--teal)}
.tag.ok{background:var(--ok-bg); color:var(--ok)}
.tag.low{background:var(--warn-bg); color:var(--warn)}
.tag.mid{background:var(--amber-bg); color:var(--amber)}

.msg{
  padding:11px 15px; border-radius:6px; margin-bottom:16px; font-size:14.5px;
  border:1px solid; border-right-width:3px; line-height:1.7;
}
.msg.ok{background:var(--ok-bg); border-color:#bfdfd0; border-right-color:var(--ok); color:#12543a}
.msg.err{background:var(--warn-bg); border-color:#eec8c4; border-right-color:var(--warn); color:var(--warn)}
.msg.info{background:var(--teal-bg); border-color:#c6e4e6; border-right-color:var(--teal); color:#115560}

.empty{padding:42px 20px; text-align:center; color:var(--ink-3); font-size:14px}
.empty b{display:block; color:var(--ink-2); font-weight:600; margin-bottom:5px; font-size:15.5px}
.bar{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.sep{height:1px; background:var(--line-soft); margin:16px 0}
.mono{font-variant-numeric:tabular-nums; letter-spacing:.02em}

.more{display:none}
.more.open{display:block}
.nav .grp a{color:#9c8396; text-decoration:none}
.nav .grp a:hover{color:#fff}
.ver{
  margin:20px 10px 0; padding:12px 10px 0; border-top:1px solid rgba(255,255,255,.08);
  font-size:11.5px; color:#8a7384; line-height:1.5;
}
.ver span{display:block; color:#6d5a68}

@media (max-width:900px){
  .shell{flex-direction:column}
  .side{width:100%; height:auto; position:static}
  .nav{display:flex; flex-wrap:wrap; gap:3px; padding:10px}
  .nav .grp{display:none}
  .nav a{margin:0}
  .nav .more{display:flex; flex-wrap:wrap; gap:3px; width:100%}
  .wrap,.topbar{padding-left:14px; padding-right:14px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .scroll{max-height:none}
}
@media print{
  .side,.topbar,.btn,.noprint{display:none !important}
  body{background:#fff}
  .card{border:0}
  .tbl th{position:static}
}