/* ============================================================
   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);display:flex;align-items:center;gap:10px}
header.top .brand::before{content:"";flex:none;width:30px;height:30px;background:url(/img/brand/dawam-icon.svg) center/contain no-repeat}
.brand-logo{display:block;height:64px;width:auto;margin:0 auto 18px}
@media print{header.top .brand::before{display:none}}
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}

/* ---------- ترويسة الطباعة (بيانات الشركة من «الإعدادات») ---------- */
.co-print-head{display:none;align-items:center;gap:16px;border-bottom:2px solid var(--accent,#0E7C7B);padding-bottom:10px;margin-bottom:16px}
.co-print-head img{max-height:64px;max-width:200px;object-fit:contain}
.co-print-head .co-name{font-weight:800;font-size:1.25rem;line-height:1.3}
.co-print-head .co-line{font-size:.85rem;color:#4E6463;margin-top:2px}
.co-print-foot{display:none}
.co-preview{display:flex;border:1px dashed var(--line,#dfe7e7);border-radius:10px;padding:12px;background:#fff}
.co-preview .co-name{font-weight:800;font-size:1.1rem}
.co-preview .co-line{font-size:.85rem;color:#4E6463}
.co-preview img{max-height:56px;max-width:180px;object-fit:contain}
@media print{
  .co-print-head{display:flex !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .co-print-foot{display:block;margin-top:18px;padding-top:6px;border-top:1px solid #ccc;font-size:10px;color:#555;text-align:center}
}

/* بحث الموظفين أعلى صفحة الموظفين: نتائج سريعة تفتح الموظف للتعديل */
.emp-search input{margin-bottom:0}
.emp-hits{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.emp-hits:empty{display:none}
.emp-hit{display:flex;align-items:center;gap:8px;width:100%;text-align:start;background:var(--bg);color:var(--ink);border:1px solid var(--line);padding:10px 12px;border-radius:10px;font-weight:500;box-shadow:none}
.emp-hit:hover{border-color:var(--accent);background:var(--accent-soft)}
.emp-hit .go{margin-inline-start:auto;color:var(--accent-ink);font-weight:700}
#empFormCard{scroll-margin-top:80px}

/* إعلانات صفحة المسح: نقطة اللون في جدول الإدارة، والتنبيه الثابت والشريط المتحرّك في صفحة المسح */
.ann-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-inline-end:8px;background:var(--accent);vertical-align:middle}
.ann-dot.warning{background:#D98A0B}.ann-dot.success{background:#1E8E4E}
a.btn-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.ann-banner{padding:10px 14px;border-radius:12px;margin:0 0 10px;line-height:1.7;font-weight:500;background:#E6F3F2;color:#0B3B3A}
.ann-banner.warning{background:#FFF1D6;color:#6B4500}
.ann-banner.success{background:#E3F4EA;color:#1E6B44}
.ann-ticker{position:relative;overflow:hidden;height:42px;border-radius:12px;background:#0B3B3A;color:#fff;margin:0 0 14px;cursor:default}
.ann-ticker .run{position:absolute;top:0;left:0;white-space:nowrap;line-height:42px;font-weight:600;will-change:transform}
.ann-ticker .item{display:inline-flex;align-items:center;margin-inline:22px}
.ann-ticker .item::before{content:"";width:8px;height:8px;border-radius:50%;background:#7FD6D3;margin-inline-end:10px}
.ann-ticker .item.warning::before{background:#F2A93B}.ann-ticker .item.success::before{background:#8BE0A8}
.ann-ticker.static{height:auto}
.ann-ticker.static .run{position:static;white-space:normal;line-height:1.7;padding:8px 4px}
.ann-ticker.static .item{display:flex;margin:4px 12px}
@media (prefers-color-scheme:dark){
  .ann-banner{background:#163332;color:#CFEDEB}.ann-banner.warning{background:#3A2E14;color:#F7D9A0}.ann-banner.success{background:#16302A;color:#BFE8CF}
}
.ann-ticker.big{height:68px;font-size:1.6rem;border-radius:14px}
.ann-ticker.big .run{line-height:68px}
.ann-ticker.big .item{margin-inline:40px}
.ann-ticker.big .item::before{width:12px;height:12px}
.ann-banner.big{font-size:1.35rem;padding:14px 20px;text-align:center}