/* ============================================================
   app.css — التنسيق المركزي لكل صفحات المنتج
   تعديله هنا يُحسّن كل الصفحات دفعةً واحدة (لا حاجة لتعديل كل صفحة).
   المرحلة 2: تحسين احترافي للألوان والمسافات والبطاقات والجداول والشريط.
   ============================================================ */

/* --- 1) متغيّرات التصميم (Design Tokens): غيّر لوناً هنا فيتغيّر في كل مكان --- */
:root{
  --ink:#1A2230;        /* لون النصّ الأساسي */
  --muted:#6B7683;      /* نصّ ثانوي */
  --paper:#FFFFFF;      /* خلفية البطاقات */
  --bg:#F4F6F9;         /* خلفية الصفحة */
  --accent:#0E7C7B;     /* اللون المميّز (أزرار/تمييز) */
  --accent-ink:#0A5A59; /* تمرير الماوس على المميّز */
  --accent-soft:#E6F2F1;/* خلفية خفيفة بلون المميّز */
  --line:#E7EBF0;       /* الحدود والفواصل */
  --good:#12805C; --good-bg:#E7F3EE;
  --bad:#B23A48;  --bad-bg:#FBEAEC;
  --warn:#B8860B; --warn-bg:#FBF3E0;
  --radius:14px;        /* استدارة الزوايا */
  --shadow:0 1px 3px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.05);
  --shadow-hover:0 6px 16px rgba(16,24,40,.08), 0 12px 32px rgba(16,24,40,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Tajawal","Segoe UI",Tahoma,system-ui,sans-serif;
  color:var(--ink); background:var(--bg);   /* الاتجاه من <html dir> (i18n.js): rtl للعربية، ltr للإنجليزية */
  line-height:1.65; -webkit-font-smoothing:antialiased; font-size:15px;
}
a{color:var(--accent-ink);text-decoration:none;transition:color .15s}
.wrap{max-width:1040px;margin:0 auto;padding:26px 20px}

/* --- 2) الشريط العلوي: ثابت أعلى الصفحة مع ظلّ خفيف --- */
header.top{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
header.top .brand{font-weight:700;font-size:1.15rem;color:var(--ink)}
header.top .brand a{color:inherit}
header.top nav{display:flex;align-items:center;gap:6px}
header.top nav a{
  color:var(--muted); padding:6px 12px; border-radius:10px; font-weight:500; font-size:.92rem;
}
header.top nav a:hover{color:var(--ink);background:var(--bg)}
header.top nav .muted{padding:0 6px}

/* --- 3) العناوين --- */
h1{font-size:1.7rem;margin:.1em 0 .15em;letter-spacing:-.01em}
h2{font-size:1.2rem;margin:1.3em 0 .5em}
.muted{color:var(--muted)}

/* --- 4) البطاقات --- */
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow);
}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* --- 5) الحقول والنماذج --- */
label{display:block;font-size:.88rem;color:var(--muted);margin:.7em 0 .3em;font-weight:500}
input,select,button,textarea{font:inherit}
input,select,textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px;
  background:#fff; color:var(--ink); transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:end}
.row>*{flex:1;min-width:150px}

/* --- 6) الأزرار --- */
button{
  cursor:pointer; border:0; border-radius:10px; padding:11px 20px;
  background:var(--accent); color:#fff; font-weight:600; transition:.15s;
  box-shadow:0 1px 2px rgba(16,24,40,.08);
}
button:hover{background:var(--accent-ink);box-shadow:var(--shadow-hover);transform:translateY(-1px)}
button:active{transform:translateY(0)}
button.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}
button.ghost:hover{background:var(--bg);border-color:var(--accent);color:var(--accent-ink)}
button.mini{padding:6px 12px;font-size:.85rem}

/* --- 7) الجداول --- */
table{width:100%;border-collapse:collapse;font-size:.92rem}
thead th{
  color:var(--muted); font-weight:600; font-size:.82rem; text-transform:none;
  background:var(--bg); border-bottom:1px solid var(--line); padding:11px 12px; text-align:start;
  position:sticky; top:0;
}
td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:start}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--accent-soft)}
tbody tr:last-child td{border-bottom:0}
tfoot td{font-weight:700;border-top:2px solid var(--line);background:var(--bg)}

/* --- 8) الوسوم (حالات) --- */
.tag{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.8rem;font-weight:600}
.tag.in{background:var(--good-bg);color:var(--good)}
.tag.out{background:var(--bad-bg);color:var(--bad)}
.tag.absent{background:var(--bad-bg);color:var(--bad)}
.tag.late{background:var(--warn-bg);color:var(--warn)}

/* --- 9) الوضع الليلي التلقائي --- */
@media (prefers-color-scheme:dark){
  :root{
    --ink:#E9EDF1;--muted:#9AA5B1;--paper:#1B2028;--bg:#12151A;--line:#2A313B;
    --accent:#2AA7A4;--accent-ink:#5CC5C2;--accent-soft:#1E2B2B;
    --good-bg:#16302A;--bad-bg:#331E22;--warn-bg:#332B18;
    --shadow:0 1px 3px rgba(0,0,0,.3);--shadow-hover:0 8px 24px rgba(0,0,0,.4);
  }
  header.top{background:rgba(27,32,40,.85)}
  input,select,textarea{background:#232A33;color:var(--ink)}
  button.ghost{background:#232A33}
}

/* --- 10) الاتجاه: قيم ثابتة تبقى من اليسار لليمين في الواجهتين (أرقام، روابط، مفاتيح، مسارات) --- */
.ltr, input[type=url], input[type=email], code, pre.ltr{direction:ltr;unicode-bidi:isolate}