/* LUNX — الأنماط: متغيرات الألوان، الوضع الداكن/الفاتح، RTL، الطباعة.
   هوية المنتج (مش هوية العميل): Deep teal #0F5B66 + sand #E3A857 على خلفية هادية. ألوان الحالات (أحمر / برتقالي / أخضر…) بمعناها. */
[hidden] { display: none !important; }   /* hidden يكسب دايمًا (حتى على .form label اللي عليها display:flex) */
:root {
  --bg: #f5f8f8;
  --surface: #ffffff;
  --surface-2: #eef3f3;
  --border: #dce5e6;
  --text: #12262b;
  --muted: #5b6f73;
  --primary: #0f5b66;
  --primary-2: #0b4650;
  --primary-soft: #e3f0f1;
  --on-primary: #ffffff;                         /* النص فوق لون الهوية */
  --accent: #e3a857;
  --neon: #5cc0ce;                                /* توهّج التركيز/الهوفر — ثابت في الوضعين */
  --logo-bg: #0f5b66; --logo-fg: #ffffff;        /* علامة LUNX */
  --red: #c0392b;   --red-soft: #fbe7e5;
  --orange: #d9730d; --orange-soft: #fdeede;
  --yellow: #b58a00; --yellow-soft: #fbf3d6;
  --green: #2e8b57;  --green-soft: #e2f3e9;
  --blue: #2f6db3;   --blue-soft: #e4eef9;
  --purple: #7b4bb3; --purple-soft: #efe7f8;
  --grey: #7d8a86;   --grey-soft: #eceff0;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.05);
  --radius: 12px;
  --hero-bg: #0f5b66;
  --viz-1: #2a78d6; --viz-2: #eb6834;            /* ألوان سلاسل الرسوم (لوحة المصروفات): الرسوم / الدعم */
  --font: "IBM Plex Sans Arabic", "Cairo", "IBM Plex Sans", "Segoe UI", Tahoma, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0e1719;
  --surface: #152124;
  --surface-2: #1c2b2f;
  --border: #2a3c40;
  --text: #e4eeef;
  --muted: #9ab0b4;
  --primary: #5cc0ce;
  --primary-2: #48a9b7;
  --primary-soft: #17363c;
  --on-primary: #0b2226;
  --logo-bg: #5cc0ce; --logo-fg: #0b2226;
  --red: #ff6b5e;   --red-soft: #3a1f1c;
  --orange: #ff9f4a; --orange-soft: #3a2a1a;
  --yellow: #f2c94c; --yellow-soft: #36301a;
  --green: #5fd08f;  --green-soft: #1a3326;
  --blue: #6aa8ef;   --blue-soft: #1a2a3d;
  --purple: #b48cf0; --purple-soft: #2b2140;
  --grey: #97a39f;   --grey-soft: #25302d;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  --hero-bg: #124a54;
  --viz-1: #3987e5; --viz-2: #d95926;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.55; }
a { color: var(--primary); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- الشريط العلوي ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border);
}
/* هوية LUNX: العلامة + الاسم (كابيتال متباعد، وحرف X بلون الهوية)، وجنبه اسم الجهة المرخّص لها (إعداد) */
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.logo-mark { width: 30px; height: 30px; flex-shrink: 0; display: block; }
.wordmark { font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif; font-weight: 600; font-size: 16px; letter-spacing: .32em; margin-inline-end: -.32em; direction: ltr; color: var(--text); }
.wordmark b { font-weight: inherit; color: var(--primary); }
/* اسم الجهة: واضح وبولد جنب LUNX */
.brand small { font-size: 15px; font-weight: 700; color: var(--text); border-inline-start: 1px solid var(--border); padding-inline-start: 12px; margin-inline-start: 6px; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.brand small:empty { display: none; }
.search-wrap { position: relative; flex: 1; max-width: 520px; margin-inline: auto; }
.search-wrap input { width: 100%; padding: 8px 14px; border-radius: 999px; border: 1px solid transparent; background: var(--surface-2); color: var(--text); outline: none; }
.search-wrap input:focus { border-color: var(--primary); background: var(--surface); }
.search-wrap input::placeholder { color: var(--muted); }
.search-results {
  position: absolute; top: calc(100% + 6px); inset-inline: 0; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); max-height: 60vh; overflow: auto; z-index: 60;
}
.search-results .grp { padding: 6px 12px; font-size: 12px; color: var(--muted); background: var(--surface-2); }
.search-results .item { padding: 8px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.search-results .item:hover, .search-results .item.active { background: var(--primary-soft); }
.tb-btn {
  position: relative; background: transparent; border: 1px solid transparent; color: var(--text); border-radius: 8px; padding: 6px 10px; cursor: pointer; white-space: nowrap;
}
.tb-btn:hover { background: var(--surface-2); border-color: var(--border); }
.tb-btn .count { position: absolute; top: -5px; inset-inline-end: -5px; background: var(--red); color: #fff; font-size: 11px; border-radius: 999px; padding: 0 5px; min-width: 18px; text-align: center; }

/* ---------- التخطيط ---------- */
.layout { display: flex; min-height: calc(100vh - 50px); }
.navrail { width: 210px; flex-shrink: 0; background: var(--surface); border-inline-end: 1px solid var(--border); padding: 12px 8px; position: sticky; top: 50px; height: calc(100vh - 50px); overflow: auto; }
.navrail button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 12px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: start; color: var(--text); }
.navrail button:hover { background: var(--surface-2); }
.navrail button.active { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.navrail .ico { width: 22px; text-align: center; }
.navrail .ver { color: var(--muted); font-size: 11px; padding: 12px; }
main#content { flex: 1; padding: 18px 22px 60px; min-width: 0; }
@media (max-width: 900px) {
  .navrail { position: fixed; bottom: 0; top: auto; height: auto; width: 100%; display: flex; overflow-x: auto; z-index: 30; padding: 4px; border-top: 1px solid var(--border); }
  .navrail button { flex-direction: column; font-size: 11px; gap: 2px; min-width: 76px; }
  .navrail .ver { display: none; }
  .brand small, .tb-label { display: none; }
  main#content { padding: 12px 12px 90px; }
}

/* ---------- عناصر عامة ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.page-head h1 { font-size: 20px; margin: 0; }
.page-head .sub { color: var(--muted); font-size: 13px; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; }
.card h3 { margin: 0 0 10px; font-size: 15px; }
.grid { display: grid; gap: 12px; }
.grid.kpi { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.kpi-card { cursor: pointer; }
.kpi-card .v { font-size: 26px; font-weight: 800; }
.kpi-card .l { color: var(--muted); font-size: 13px; }
.kpi-card.red .v { color: var(--red); } .kpi-card.orange .v { color: var(--orange); }
.kpi-card.green .v { color: var(--green); } .kpi-card.blue .v { color: var(--blue); }
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); padding: 7px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-2); }
.btn.danger { color: var(--red); border-color: var(--red); }
.btn.danger.solid { background: var(--red); color: #fff; }
.btn.sm { padding: 3px 8px; font-size: 12px; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* جاري التنفيذ (setBusy في core.js) */
body.busy { cursor: progress; }
body.busy .btn:disabled { cursor: progress; }
body::after { content: ""; position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 10000; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--primary), transparent) no-repeat; background-size: 35% 100%;
  opacity: 0; transition: opacity .15s; }
body.busy::after { opacity: 1; transition-delay: .25s; animation: busybar 1.1s linear infinite; }
@keyframes busybar { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media print { body::after { display: none; } }
body.readonly .write-only { display: none !important; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.filters input, .filters select, .form input, .form select, .form textarea {
  border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 7px 10px; min-width: 0;
}
.filters input[type="search"] { min-width: 220px; }
/* خانة بتتملى لوحدها ومابتتعدّلش (تاريخ الرتقة = تاريخ الـ KOC، وعقد التصريح المربوط) */
.form input[readonly], .form select:disabled, table.data input[readonly] { background: var(--grey-soft); color: var(--muted); cursor: not-allowed; }
/* نافذة التصريح وهي مقفولة للعرض: الخانات تتقري عادي (مش باهتة) */
.pm-locked .form input:disabled, .pm-locked .form select:disabled, .pm-locked .form textarea:disabled { background: var(--surface-2); color: var(--text); opacity: 1; cursor: default; -webkit-text-fill-color: var(--text); }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; background: var(--grey-soft); color: var(--muted); border: 1px solid transparent; cursor: default; white-space: nowrap; }
.chip.clickable { cursor: pointer; }
.chip.on { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.t-expired { background: var(--red-soft); color: var(--red); font-weight: 700; }
.t-d30 { background: var(--orange-soft); color: var(--orange); font-weight: 600; }
.t-d60 { background: var(--yellow-soft); color: var(--yellow); }
.t-d90 { background: var(--green-soft); color: var(--green); }
.t-ok { background: var(--blue-soft); color: var(--blue); }
.t-none { background: var(--grey-soft); color: var(--grey); }
.s-active { background: var(--green-soft); color: var(--green); }
.s-warning { background: var(--orange-soft); color: var(--orange); }
.s-terminated, .s-resigned { background: var(--grey-soft); color: var(--grey); }
.s-pending_completion { background: var(--purple-soft); color: var(--purple); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
.empty { text-align: center; color: var(--muted); padding: 30px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
hr.sep { border: 0; border-top: 1px solid var(--border); margin: 12px 0; }

/* ---------- الجداول ---------- */
.table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th { position: sticky; top: 0; background: var(--surface-2); text-align: start; padding: 8px 10px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; cursor: pointer; user-select: none; }
table.data td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tr:hover td { background: var(--surface-2); }
table.data tr.clickable { cursor: pointer; }
table.data tr.sel td { background: var(--primary-soft); }
.pager { display: flex; gap: 6px; align-items: center; justify-content: center; padding: 10px; }
.bulkbar { display: flex; gap: 8px; align-items: center; background: var(--primary-soft); border: 1px solid var(--primary); padding: 8px 12px; border-radius: 10px; margin-bottom: 10px; flex-wrap: wrap; }

/* ---------- النوافذ ---------- */
#modal-root .overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 80; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 12px; overflow: auto; }
.modal { background: var(--surface); border-radius: 14px; width: min(760px, 100%); box-shadow: 0 20px 50px rgba(0,0,0,.3); border: 1px solid var(--border); }
.modal.wide { width: min(1100px, 100%); }
.modal.narrow { width: min(460px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.modal-head h2 { font-size: 17px; margin: 0; }
.modal-body { padding: 16px 18px; max-height: 76vh; overflow: auto; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.form label.full { grid-column: 1 / -1; }
.form label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-size: 13px; }
.form h4 { grid-column: 1 / -1; margin: 8px 0 0; font-size: 13px; color: var(--primary); border-bottom: 1px dashed var(--border); padding-bottom: 4px; }
.req::after { content: " *"; color: var(--red); }
.notice { padding: 8px 12px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); font-size: 13px; margin-bottom: 10px; }
.notice.warn { background: var(--orange-soft); color: var(--orange); }
.notice.err { background: var(--red-soft); color: var(--red); }

/* ---------- الشريط التنبيهي ---------- */
.alertbar { display: flex; gap: 10px; align-items: center; padding: 8px 14px; margin-bottom: 12px; border-radius: 10px; background: var(--red-soft); color: var(--red); cursor: pointer; flex-wrap: wrap; }
.alertbar.backup { background: var(--yellow-soft); color: var(--yellow); cursor: default; }

/* ---------- لوحة التنبيهات ---------- */
.side-panel { position: fixed; top: 50px; inset-inline-end: 0; width: min(430px, 100%); height: calc(100vh - 50px); background: var(--surface); border-inline-start: 1px solid var(--border); box-shadow: var(--shadow); z-index: 70; display: flex; flex-direction: column; }
.side-panel .body { overflow: auto; padding: 10px 14px; flex: 1; }
.alert-item { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.alert-item:hover { background: var(--surface-2); }

/* ---------- بطاقة الموظف ---------- */
.profile-head { display: flex; gap: 14px; align-items: center; }
.avatar { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 800; font-size: 20px; flex-shrink: 0; }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; }
.kv > div > span:first-child { display: block; font-size: 11px; color: var(--muted); }
.progress { height: 8px; background: var(--grey-soft); border-radius: 99px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--primary); }
/* بطاقة الموظف: الرأس، وكروت المستندات، وأقسام البيانات، وقوايم الزراير */
.ec-head { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(135deg, var(--primary-soft), var(--surface) 70%); }
.ec-head .avatar { width: 64px; height: 64px; font-size: 24px; border-radius: 14px; background: var(--primary); color: var(--on-primary); }
.ec-head h2 { margin: 0; font-size: 20px; }
.ec-head .en { color: var(--muted); direction: ltr; text-align: start; font-size: 12.5px; letter-spacing: .3px; }
.ec-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ec-ids { display: grid; grid-template-columns: auto auto; gap: 3px 14px; font-size: 12px; align-self: start; }
.ec-ids span { color: var(--muted); } .ec-ids b { font-variant-numeric: tabular-nums; }
.ec-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 10px 0 0; }
.ec-doc { border: 1px solid var(--border); border-top: 3px solid var(--grey); border-radius: 10px; padding: 7px 10px; background: var(--surface); }
.ec-doc.ok { border-top-color: var(--green); } .ec-doc.warn { border-top-color: var(--orange); } .ec-doc.bad { border-top-color: var(--red); }
.ec-doc span { display: block; font-size: 11px; color: var(--muted); } .ec-doc b { font-size: 14px; font-variant-numeric: tabular-nums; }
.ec-doc small { display: block; font-size: 11px; color: var(--muted); }
.ec-doc.ok small { color: var(--green); } .ec-doc.warn small { color: var(--orange); } .ec-doc.bad small { color: var(--red); }
.ec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.ec-card { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; background: var(--surface); min-width: 0; }
.ec-card.wide { grid-column: 1 / -1; }
.ec-card h4 { margin: 0 0 8px; font-size: 13.5px; display: flex; align-items: center; gap: 6px; color: var(--primary); }
.ec-card h4 + .kv, .ec-card .kv + h4 { margin-top: 8px; }
.ec-f { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 16px; }
.ec-f > div > span { display: block; font-size: 11px; color: var(--muted); } .ec-f > div > b { font-weight: 600; }
.ec-missing { margin-top: 8px; font-size: 11.5px; color: var(--orange); }
.ec-sub { color: var(--muted); font-weight: 400; font-size: 11.5px; }
.ec-block { margin-top: 10px; }
details.ec-menu { position: relative; }
details.ec-menu > summary { list-style: none; } details.ec-menu > summary::-webkit-details-marker { display: none; }
details.ec-menu > div { position: absolute; bottom: calc(100% + 6px); inset-inline-start: 0; min-width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; z-index: 30; display: grid; gap: 2px; }
details.ec-menu.down > div { bottom: auto; top: calc(100% + 6px); }          /* قايمة في أعلى الصفحة: بتفتح لتحت */
details.ec-menu > div button { border: 0; background: none; text-align: start; padding: 7px 10px; border-radius: 7px; cursor: pointer; font: inherit; color: inherit; }
details.ec-menu > div button:hover { background: var(--primary-soft); }
@media (max-width: 760px) { .ec-head { grid-template-columns: auto 1fr; } .ec-ids { grid-column: 1 / -1; } .ec-grid { grid-template-columns: 1fr; } }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 12px; flex-wrap: wrap; }
.tabs button { border: 0; background: none; padding: 8px 12px; cursor: pointer; border-bottom: 2px solid transparent; color: var(--muted); }
.tabs button.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 700; }

/* ---------- القوائم الأفقية (مراحل) ---------- */
.bars .bar-row { display: grid; grid-template-columns: 170px 1fr 48px; align-items: center; gap: 8px; margin: 5px 0; font-size: 13px; cursor: pointer; }
.bars .track { height: 10px; background: var(--grey-soft); border-radius: 99px; overflow: hidden; display: flex; }
.bars .track i { display: block; height: 100%; }
.funnel { display: flex; flex-direction: column; gap: 4px; }
.funnel .st { display: flex; justify-content: space-between; padding: 5px 10px; border-radius: 6px; background: var(--surface-2); font-size: 13px; cursor: pointer; }
.funnel .st.done { background: var(--green-soft); color: var(--green); }
.funnel .st.rej { background: var(--red-soft); color: var(--red); }

/* ---------- التقويم ---------- */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal .dow { text-align: center; font-size: 12px; color: var(--muted); padding: 4px; }
.cal .day { min-height: 78px; border: 1px solid var(--border); border-radius: 8px; padding: 4px; font-size: 11px; background: var(--surface); overflow: hidden; }
.cal .day.out { opacity: .35; }
.cal .day.today { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.cal .day b { display: block; font-size: 12px; }
.cal .ev { display: block; border-radius: 4px; padding: 0 4px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }

/* ---------- الهيكل التنظيمي ---------- */
.org { display: flex; flex-direction: column; gap: 14px; }
.org .node { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.org .children { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding-inline-start: 18px; border-inline-start: 2px solid var(--primary-soft); }
.org .children .node { background: var(--surface-2); min-width: 170px; }

/* ---------- العقد ---------- */
.contract-layout { display: grid; grid-template-columns: 330px 1fr; gap: 14px; align-items: start; }
@media (max-width: 1000px) { .contract-layout { grid-template-columns: 1fr; } }
.contract-paper { background: #fff; color: #111; padding: 28px 34px; border-radius: 6px; box-shadow: var(--shadow); font-family: "Times New Roman", "Traditional Arabic", serif; line-height: 1.8; font-size: 13px; min-height: 60vh; }
.contract-paper table.docx-table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.contract-paper table.docx-table td { border: 1px solid #999; padding: 8px 10px; vertical-align: top; width: 50%; }
.contract-paper p { margin: 0 0 4px; }
.sig-box { display: flex; align-items: center; justify-content: center; min-height: 110px; border: 1px dashed var(--border); border-radius: 8px; background: #fff; padding: 8px; }
.sig-box img { max-width: 100%; max-height: 140px; }
/* ---------- أيقونات خطية بدل الإيموجي (icons.js) — بلون النص ---------- */
.ic { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ic-kw { width: 1.5em; height: 1em; vertical-align: -0.12em; stroke: none; border-radius: 2px; }
.ic-t-ok { color: var(--green); } .ic-t-warn { color: var(--orange); } .ic-t-bad { color: var(--red); } .ic-t-accent { color: var(--accent); }
.ic-t-yellow { color: var(--yellow); } .ic-t-blue { color: var(--blue); } .ic-t-purple { color: var(--purple); } .ic-t-grey { color: var(--grey); }
/* جوه الزرار / الشارة / التنبيه الأيقونة بلون نصه (النقط الملوّنة بتفضل بلونها) */
.btn .ic:not(.ic-dot), .chip .ic:not(.ic-dot), .cu-badge .ic, .notice .ic:not(.ic-dot), .tabs .ic:not(.ic-dot) { color: inherit; }
.pdf-frame { width: 100%; height: 78vh; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
/* ملف الطباعة (من غير ورق الشركة): متحمّل برّه الشاشة — المعاينة بتعرض النسخة اللي عليها الورق */
.pdf-print { position: fixed; inset-inline-start: -10000px; top: 0; width: 800px; height: 600px; border: 0; }

/* ---------- Toast ---------- */
#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: #222; color: #fff; padding: 10px 18px; border-radius: 10px; z-index: 200; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 90vw; }
#toast.show { opacity: 1; }
#toast.err { background: var(--red); }
#toast.ok { background: #1f7a4d; }

.drop-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); min-width: 230px; z-index: 65; padding: 6px; }
.drop-menu button { display: block; width: 100%; text-align: start; border: 0; background: none; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.drop-menu button:hover { background: var(--surface-2); }
.drop-menu .info { padding: 8px 10px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--border); margin-bottom: 4px; }

/* ---------- إعداد التقارير ---------- */
.rb { display: flex; flex-direction: column; gap: 14px; }
.rb-sec h4 { margin: 0 0 8px; font-size: 13px; color: var(--primary); display: flex; align-items: center; gap: 8px; }
.rb-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 16px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.rb-cols > div { display: flex; flex-direction: column; gap: 3px; }
.rb-cols b { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.rb-cols label.check { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.rb-nat { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.rb-nat-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.rb-nat-list { display: flex; flex-wrap: wrap; gap: 5px; max-height: 98px; overflow: auto; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
/* ---------- العهد والمصروفات ---------- */
.cu-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.cu-kpi { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.cu-kpi b { font-size: 20px; }
.cu-kpi span { font-size: 12px; color: var(--muted); }
.cu-h { margin: 14px 0 6px; font-size: 13px; color: var(--primary); }
.cu-pick-list { max-height: 230px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; margin-top: 6px; }
.cu-pick-list label { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px; }
.cu-pick-list label:last-child { border-bottom: 0; }
.cu-pick-list label.on { background: var(--primary-soft); }
table.cu-matrix th, table.cu-matrix td { white-space: nowrap; }
table.cu-matrix .cu-cell input[type=checkbox] { margin-inline-end: 4px; vertical-align: middle; }
table.cu-matrix .cu-cell input[type=number], table.cu-matrix .cu-cell select { width: 72px; }
table.cu-matrix .cu-cell.off { opacity: .45; }
table.cu-matrix .cu-cell input.cu-receipt { width: 96px; margin-top: 3px; font-size: 12px; }
table.cu-lines tr.cu-person td { background: var(--surface-2); font-weight: 600; }
/* عهد خارجية: سطور مكتوبة بالإيد */
table.cu-ext td input:not([type=checkbox]), table.cu-ext td select { width: 100%; min-width: 86px; }
table.cu-ext td input[data-x="desc"] { min-width: 190px; }
table.cu-ext td input[type=number] { min-width: 80px; max-width: 110px; }
table.cu-ext td select { max-width: 190px; }
table.cu-lines input[type=number] { width: 84px; }
table.cu-lines input.cu-receipt { width: 110px; }
.fee-tbl input:not([type=checkbox]), .fee-tbl select { width: 100%; min-width: 70px; }
table.cu-lines tr.cu-closed td { background: var(--green-soft); }
/* «⋯ المزيد» في رأس صفحة العهد */
.cu-more { position: relative; display: inline-block; }
.cu-more-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.cu-more-menu .btn { justify-content: flex-start; text-align: start; border-color: transparent; width: 100%; }
/* 🕓 الخط الزمني للعهدة */
details.cu-tl { margin-top: 14px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; background: var(--surface); }
details.cu-tl summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--primary); }
details.cu-tl ol { list-style: none; margin: 10px 0 2px; padding: 0; border-inline-start: 2px solid var(--border); }
details.cu-tl li { display: flex; gap: 8px; align-items: baseline; padding: 4px 10px; font-size: 13px; position: relative; }
details.cu-tl li::before { content: ''; position: absolute; inset-inline-start: -5px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
details.cu-tl .cu-tl-i { width: 20px; text-align: center; flex: none; }
details.cu-tl .cu-tl-d { flex: none; min-width: 118px; color: var(--muted); font-size: 12px; }
table.cu-lines tr.cu-skip td { background: var(--grey-soft); color: var(--muted); }      /* إجراء خرج من الطلب: مؤجل / مش هيتنفّذ */
.cu-closings { display: flex; flex-direction: column; gap: 6px; }
.cu-closing { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; }
.cu-cl-sum { gap: 6px; flex-wrap: wrap; margin-top: 10px; }
/* «على حساب» (مركز التكلفة / مالك) في صف الشخص: اختيار صغير جنب بياناته */
select.cu-owner-sel { font-size: 12px; padding: 2px 6px; min-height: 0; height: 26px; max-width: 230px; margin-inline-start: 6px; border-radius: 8px; }
.cu-invoices { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; }
.cu-invoice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); }
.cu-inv-bulk { gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 8px; padding: 6px 10px; border: 1px dashed var(--border); border-radius: 10px; }
.cu-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-inline-start: 4px; border-radius: 9px; background: var(--orange); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
td.nowrap { white-space: nowrap; }
.emp-license { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.emp-license > div { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.emp-license span { display: block; font-size: 11px; color: var(--muted); }
table.data td.out, table.data td.warn-cell { background: var(--orange-soft); }
.cu-pick-list label.cu-busy { opacity: .6; cursor: not-allowed; }
.cu-lang select { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; padding: 4px 8px; font: inherit; }
/* قائمة الاختيار المتعدد في الفلاتر (msField في core.js) */
.ms { display: inline-block; max-width: 100%; }
.ms-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 8px; padding: 7px 10px; font: inherit; cursor: pointer; text-align: start; }
.form .ms, .form .ms-btn { width: 100%; max-width: none; }
.ms-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-val small { color: var(--muted); }
.ms-caret { font-style: normal; color: var(--muted); font-size: 10px; }
.ms.on .ms-btn { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.ms-more { background: var(--primary); color: var(--on-primary); border-radius: 9px; padding: 0 6px; font-size: 11px; line-height: 17px; }
.ms-pop { position: fixed; z-index: 150; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 6px; max-height: min(380px, 70vh); }
.ms-pop .ms-q { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; padding: 6px 9px; font: inherit; }
.ms-acts { display: flex; gap: 6px; align-items: center; font-size: 12px; }
.ms-acts button { font: inherit; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.ms-acts .ms-n { margin-inline-start: auto; color: var(--primary); font-weight: 600; }
.ms-list { overflow: auto; display: flex; flex-direction: column; }
.ms-list label { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.ms-list label:hover { background: var(--surface-2); }
.ms-list label[hidden] { display: none; }
.ms-list label span { flex: 1; }
.ms-list label b { color: var(--muted); font-weight: 500; font-size: 12px; }
.rb-lang-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.vt-tbl input { width: 100%; min-width: 220px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 6px; padding: 5px 8px; font: inherit; }
.vt-tbl input.vt-miss { border-color: var(--orange); background: var(--orange-soft); }
.imp-miss { max-height: 180px; overflow: auto; margin: 6px 0; padding-inline-start: 20px; }
.imp-list { max-height: 340px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; margin: 6px 0; }
.imp-emp { padding: 6px 0; border-bottom: 1px dashed var(--border); }
.imp-emp:last-child { border-bottom: 0; }
.imp-emp ul { margin: 4px 0 0; padding-inline-start: 20px; font-size: 13px; }
.imp-old { color: var(--red); text-decoration: line-through; }
.imp-new { color: var(--green); font-weight: 600; }
table.kids td { padding: 3px 4px; }
table.kids input:not([type=checkbox]), table.kids select { width: 100%; min-width: 0; }
.chip.x { background: var(--red-soft); color: var(--red); border-color: var(--red); text-decoration: line-through; }
.rb-range { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 14px; align-items: end; }
.rb-quick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }

/* ---------- مركز إدارة الشركات ---------- */
.co-tabs { margin-bottom: 14px; }
.co-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.co-card { cursor: pointer; display: flex; flex-direction: column; gap: 10px; padding: 16px; transition: border-color .15s, transform .15s; }
.co-card:hover, .co-card:focus-visible { border-color: var(--primary); transform: translateY(-1px); outline: none; }
.co-card.hot { border-inline-start: 3px solid var(--red); }
.co-card-h, .co-detail-h { display: flex; align-items: center; gap: 12px; min-width: 0; }
.co-logo { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--border); display: grid; place-items: center; font-size: 20px; }
.co-detail-h .co-logo { width: 56px; height: 56px; }
.co-card-t { display: flex; flex-direction: column; min-width: 0; }
.co-card-t b { font-size: 15px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.co-card-t span { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: start; }
.co-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.co-stats b { color: var(--text); font-weight: 600; }
.co-status { display: flex; align-items: center; gap: 8px; font-size: 12px; padding-top: 10px; border-top: 1px solid var(--border); margin-top: auto; }
.co-detail-h .co-status { border-top: 0; padding-top: 4px; }
.co-status span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-status b { margin-inline-start: auto; font-size: 11px; color: var(--muted); background: var(--surface-2); border-radius: 99px; padding: 0 7px; }
.co-pane { margin-top: 12px; }
.co-pane h4 { margin: 16px 0 8px; font-size: 13px; }

/* ---------- الصفحة الرئيسية (Dashboard) ---------- */
.db-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.db-span-4 { grid-column: span 4; } .db-span-5 { grid-column: span 5; } .db-span-7 { grid-column: span 7; } .db-span-8 { grid-column: span 8; }
@media (max-width: 1250px) { .db-span-4 { grid-column: span 6; } .db-span-5, .db-span-7, .db-span-8 { grid-column: span 12; } .db-hero { grid-column: span 12; } }
@media (max-width: 760px) { .db-grid > * { grid-column: span 12 !important; } }

/* الرقم الأساسي: محتاج إجراء */
.db-hero { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--radius); background: var(--hero-bg); color: #fff; box-shadow: var(--shadow); min-height: 100%; }
.db-eyebrow { font-size: 13px; opacity: .85; font-weight: 600; }
.db-hero-v { font-size: 56px; font-weight: 700; line-height: 1.05; }
.db-hero-l { font-size: 14px; opacity: .9; }
.db-hero-split { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.db-chip { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 4px 10px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; font-size: 13px; }
.db-chip:hover, .db-chip:focus-visible { background: rgba(255,255,255,.22); }
.db-hero-note { align-self: flex-start; margin-top: 4px; border: 0; background: none; color: #ffd8a8; cursor: pointer; padding: 2px 0; font-size: 13px; text-align: start; }
.db-hero-note:hover { text-decoration: underline; }
.db-hero-btn { align-self: flex-start; background: #fff; color: var(--hero-bg); border: 0; font-weight: 600; }
.db-hero-btn:hover { background: #eef4f1; }
.db-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px var(--surface); }
.db-hero .db-dot { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }

/* المؤشرات */
.db-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; position: relative; }
.db-kpis::before { content: ''; position: absolute; inset: -34px; z-index: -1; pointer-events: none;
  background: radial-gradient(560px 280px at 15% 0%, color-mix(in srgb, var(--primary) 14%, transparent) 0%, transparent 70%),
              radial-gradient(480px 260px at 95% 100%, color-mix(in srgb, var(--neon) 14%, transparent) 0%, transparent 70%); }
.db-kpis > .db-tile:last-child:nth-child(3n+1) { grid-column: 1 / -1; }   /* كارت لوحده في آخر سطر ← بعرض السطر */
@media (max-width: 760px) { .db-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .db-kpis > .db-tile:last-child:nth-child(3n+1) { grid-column: auto; } .db-kpis > .db-tile:last-child:nth-child(2n+1) { grid-column: 1 / -1; } }
.db-tile { cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
  background: color-mix(in srgb, var(--surface) 58%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: border-color .15s, transform .15s, box-shadow .15s; }
.db-tile:hover, .db-tile:focus-visible { border-color: var(--neon); transform: translateY(-1px); outline: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--neon) 45%, transparent), 0 0 16px color-mix(in srgb, var(--neon) 35%, transparent); }
.db-tile-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.db-tile-l { color: var(--muted); font-size: 13px; font-weight: 600; }
.db-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--primary-soft); font-size: 15px; }
.db-tile-v { font-size: 28px; font-weight: 700; line-height: 1.2; }
.db-tile-s { color: var(--muted); font-size: 12px; min-height: 18px; }

/* الكروت */
.db-card { display: flex; flex-direction: column; padding: 16px; min-width: 0; }
.db-card-h { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.db-card-h h3 { margin: 0; font-size: 15px; }
.db-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.db-link { font-size: 12px; white-space: nowrap; padding-top: 2px; }
.db-mini-h { font-size: 12px; font-weight: 600; color: var(--muted); margin: 12px 0 6px; }
.db-mini-h:first-child { margin-top: 0; }

/* أعمدة أفقية: خط الأساس ناحية البداية، والطرف مدوّر 4px والقيمة عنده */
.db-bars { display: flex; flex-direction: column; gap: 2px; }
.db-bar { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); align-items: center; gap: 10px; padding: 4px 6px; border-radius: 6px; font-size: 13px; }
.db-bar.clickable, .db-stack-row.clickable, .db-li.clickable { cursor: pointer; }
.db-bar.clickable:hover, .db-bar:focus-visible, .db-stack-row:hover, .db-stack-row:focus-visible, .db-li.clickable:hover, .db-li:focus-visible { background: var(--surface-2); outline: none; }
.db-bar-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-bar-t { display: flex; align-items: center; gap: 6px; min-width: 0; }
.db-bar-t i { display: block; height: 10px; min-width: 2px; border-start-end-radius: 4px; border-end-end-radius: 4px; }
.db-bar-t b { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* حالة المستندات: عمود مقسّم (فاصل 2px بلون الخلفية) */
.db-stack-head, .db-stack-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 70px; align-items: center; gap: 12px; }
.db-stack-head { font-size: 11px; color: var(--muted); padding: 0 6px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.db-stack-head span:last-child, .db-stack-n { text-align: end; }
.db-stack-row { padding: 9px 6px; margin-bottom: 2px; border-radius: 6px; font-size: 13px; }
.db-stack { display: flex; gap: 2px; height: 14px; border-start-end-radius: 4px; border-end-end-radius: 4px; overflow: hidden; }
.db-stack i { display: block; min-width: 3px; }
.db-stack-n { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); }
.db-stack-n.hot { color: var(--text); }
.db-stack-n.hot::before { content: "● "; color: var(--red); font-size: 10px; }
.db-fill { flex: 1; display: flex; flex-direction: column; }
.db-grow { flex: 1; min-height: 12px; }
.db-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.db-legend span { display: inline-flex; align-items: center; gap: 6px; }
.db-table th, .db-table td { font-size: 12px; padding: 6px 8px; }

/* قوائم */
.db-list { display: flex; flex-direction: column; }
.db-li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 6px; border-bottom: 1px solid var(--border); }
.db-li:last-child { border-bottom: 0; }
.db-li-m { display: flex; flex-direction: column; min-width: 0; }
.db-li-m b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-li-m span, .db-li-e span { color: var(--muted); font-size: 12px; }
.db-li-e { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

/* اكتمال البيانات */
.db-meter-v { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.db-meter-v b { font-size: 28px; font-weight: 700; }
.db-meter-v span { color: var(--muted); font-size: 12px; }
.db-meter { height: 10px; border-radius: 99px; overflow: hidden; }
.db-meter i { display: block; height: 100%; border-radius: 99px; }

/* آخر العمليات */
.db-feed { display: flex; flex-direction: column; gap: 10px; }
.db-feed-i { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.db-feed-ico { width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; font-size: 13px; }
.db-feed-t { font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.db-feed-m { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* التلميح العائم */
.viz-tip { position: fixed; z-index: 120; pointer-events: none; background: var(--text); color: var(--surface); font-size: 12px; padding: 6px 10px; border-radius: 6px; box-shadow: var(--shadow); white-space: nowrap; }

/* ---------- الطباعة ---------- */
@media print {
  .topbar, .navrail, .no-print, #toast { display: none !important; }
  body { background: #fff; color: #000; }
  main#content { padding: 0; }
  .card { box-shadow: none; border: 0; }
}
#emp-table td:nth-child(2) { min-width: 200px; }
#emp-table td:nth-child(2) .small { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#emp-table td:nth-child(5) { min-width: 110px; }

/* لوحة المصروفات الحكومية: أعمدة شهرية متراكمة (فاصل 2px بلون الخلفية، والطرف مدوّر 4px) */
.cu-kpi.clickable { cursor: pointer; }
.cu-kpi .ex-sub { font-size: 11px; }
.cu-kpis.ex-kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.ex-chart { padding-top: 6px; }
.ex-plot { position: relative; height: 190px; margin-inline-start: 52px; margin-top: 14px; }
.ex-grid { position: absolute; inset-inline: 0; border-top: 1px solid var(--border); }
.ex-grid span { position: absolute; inset-inline-start: -52px; width: 46px; top: -9px; text-align: end; font-size: 11px; color: var(--muted); }
.ex-cols { position: absolute; inset: 0; display: flex; align-items: stretch; }
.ex-col { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; border-radius: 6px 6px 0 0; }
.ex-col.clickable { cursor: pointer; }
.ex-col:hover, .ex-col:focus-visible { background: color-mix(in srgb, var(--surface-2) 70%, transparent); outline: none; }
.ex-col i { display: block; width: 24px; max-width: 62%; min-height: 2px; }
.ex-col i.top { border-radius: 4px 4px 0 0; }
.ex-col b { font-size: 11px; font-weight: 600; white-space: nowrap; }
.ex-col i.s1, .ex-sw.s1 { background: var(--viz-1); }
.ex-col i.s2, .ex-sw.s2 { background: var(--viz-2); }
.ex-xs { display: flex; margin-inline-start: 52px; padding: 5px 0 10px; }
.ex-xs span { flex: 1; text-align: center; font-size: 11px; color: var(--muted); }
.ex-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.ex-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-top: 12px; }
table.ex-matrix th, table.ex-matrix td { white-space: nowrap; font-size: 12px; }
table.ex-matrix td.clickable { cursor: pointer; }
table.ex-matrix td.clickable:hover { background: var(--primary-soft); }
table.ex-matrix td.txt, table.ex-matrix th.txt { text-align: start; }
table.ex-matrix tr.ex-co td { background: var(--surface-2); font-weight: 600; }
table.ex-matrix td.ex-cc { padding-inline-start: 26px; }
/* مسار «إنهاء خدمة — عمالة وطنية»: الخطوات بالترتيب */
.kw-steps { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.kw-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.kw-step.on { border-color: var(--primary); background: var(--primary-soft); }
.kw-step.done { background: var(--green-soft); }
.kw-step.lock { opacity: .6; }
.kw-n { font-size: 18px; line-height: 1.3; }
/* صفحة «عن البرنامج» وصفحة الدخول: هوية LUNX */
.about { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 6px 0 10px; }
.about .logo-mark { width: 64px; height: 64px; }
.about .wordmark { font-size: 26px; }
.about .tagline { color: var(--muted); }
.about .tagline-en { color: var(--muted); font-size: 12px; direction: ltr; }
.about .kv { width: 100%; margin-top: 8px; text-align: start; }
/* تقرير جودة البيانات */
.dq{border:1px solid var(--border);border-radius:8px;margin:6px 0;padding:6px 10px}.dq summary{cursor:pointer;padding:2px 0}.dq table{margin-top:6px}
/* عهدة التجديد: الانتهاء الجديد (مطلوب قبل التقفيل) */
.cu-exp input[type=date] { width: 140px; }
.cu-exp.need input[type=date] { border-color: var(--orange); background: var(--orange-soft); }
/* بطاقة التصاريح (موظف / عربية) */
.pc-top { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start; }
.pc-res { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; background: var(--surface); min-width: 240px; }
.pc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 12px; }
.pc-tile { border: 1px solid var(--border); border-top: 3px solid var(--grey); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.pc-tile.ok { border-top-color: var(--green); } .pc-tile.warn { border-top-color: var(--orange); } .pc-tile.bad { border-top-color: var(--red); }
.pc-tile.none { background: var(--bg); }
.pc-tile-h { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 4px; }
.pc-renew { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; line-height: 1.6; }
.pc-renew li span { margin-inline-end: 4px; }
.pc-renew li.ok { color: var(--green); } .pc-renew li.warn { color: var(--orange); } .pc-renew li.bad { color: var(--red); }
a.pc-link { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--muted); }
a.pc-link:hover { color: var(--primary); border-bottom-color: var(--primary); }
@media (max-width: 760px) { .pc-top { grid-template-columns: 1fr; } }

/* =====================================================================
   هوية LUNX — المرحلة 3: تلميع الجداول والنوافذ والنماذج (شكل بس — نفس العناصر ونفس الشغل)
   ===================================================================== */
/* ---------- التركيز بالكيبورد: إطار بلون الهوية على أي عنصر واقف عليه ---------- */
.btn:focus-visible, .tb-btn:focus-visible, .tabs button:focus-visible, .navrail button:focus-visible, .chip.clickable:focus-visible,
a:focus-visible, summary:focus-visible, input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.filters input:focus, .filters select:focus, .form input:focus, .form select:focus, .form textarea:focus,
table.data input:focus, table.data select:focus, .modal-body input[type="search"]:focus, .modal-body input[type="date"]:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

/* ---------- الخانات: ارتفاع واحد، والمقفولة واضحة إنها للعرض ---------- */
.btn { min-height: 37px; }
.btn.sm { min-height: 0; }
.filters input:not([type="checkbox"]):not([type="radio"]), .filters select,
.form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), .form select { height: 37px; }
.form textarea { line-height: 1.5; }
.form label { font-size: 12.5px; }
.form input, .form select, .form textarea, .filters input, .filters select { color: var(--text); font-size: 13.5px; transition: border-color .12s, box-shadow .12s; }
.form input:disabled, .form select:disabled, .form textarea:disabled, .form input[readonly], .filters input:disabled, .filters select:disabled {
  background: var(--grey-soft); color: var(--muted); cursor: not-allowed; border-style: dashed;
}
.form label > .small, .form label > small { font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.form h4, .cu-h { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--primary); }
.cu-h { margin: 16px 0 8px; }

/* ---------- الجداول: سطور متبادلة، أرقام متراصة، رأس وإجمالي أوضح ---------- */
table.data { font-variant-numeric: tabular-nums; }
table.data th { color: var(--text); font-weight: 700; font-size: 12.5px; border-bottom: 2px solid var(--primary); }
table.data tbody tr:where(:nth-child(even)) td { background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tfoot td { padding: 8px 10px; font-weight: 700; background: var(--surface-2); border-top: 2px solid var(--border); }
table.data td.empty, .empty { padding: 28px 16px; line-height: 1.6; }
.empty .ic-empty { display: block; margin: 0 auto 6px; font-size: 30px; line-height: 1; color: var(--border); }
:root[data-theme="dark"] .empty .ic-empty { color: var(--muted); }
/* الشارات (الحالات): مقاس وارتفاع واحد في كل الشاشات */
.chip, .pill { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 1px 9px; font-size: 12px; line-height: 1.5; border-radius: 999px; white-space: nowrap; }

/* ---------- النوافذ: رأس موحد، المحتوى هو اللي بيتحرك، وترتيب أزرار ثابت ---------- */
.modal { display: flex; flex-direction: column; max-height: 92vh; }
.modal-body { flex: 1 1 auto; min-height: 0; max-height: none; }
.modal-head { flex: none; }
.modal-head h2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.modal-head h2 > .ic { flex: none; width: 1.25em; height: 1.25em; color: var(--primary); }
.modal-head > [data-close] { flex: none; width: 34px; height: 34px; min-height: 0; padding: 0; justify-content: center; color: var(--muted); border-radius: 8px; }
.modal-head > [data-close]:hover { color: var(--text); }
/* الفوتر: الرئيسي أول واحد، «إلغاء / إغلاق» آخر واحد، والخطر (حذف) معزول جنب الإغلاق */
.modal-foot { flex: none; justify-content: flex-start; align-items: center; }
.modal-foot > .btn.primary, .modal-foot > .btn.danger.solid { order: -1; }
.modal-foot > [data-close] { order: 10; margin-inline-start: auto; }
.modal-foot > .btn.danger:not(.solid) { order: 9; margin-inline-start: auto; }
.modal-foot:has(> .btn.danger:not(.solid)) > [data-close], .modal-foot:has(> .spacer) > [data-close], .modal-foot > .btn.primary[data-close] { margin-inline-start: 0; }
.modal-foot:has(> .spacer) > .btn.danger:not(.solid) { margin-inline-start: 0; }
.modal-foot > .btn.primary[data-close] { order: -1; }
.pdf-frame { height: min(78vh, calc(92vh - 150px)); }
.notice { border-inline-start: 3px solid currentColor; }

/* ---------- نماذج التصاريح (permit_forms.js): جدول السيارات بخانات تتعدّل، وقايمة النماذج المرقّمة ---------- */
table.pf-veh td { padding: 4px 5px; }
table.pf-veh input { border: 1px solid var(--border); background: var(--surface); border-radius: 6px; padding: 5px 7px; font-size: 13px; }
/* ملف الموظف: فولدرات */
.ef-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.ef-folder { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: inherit; font: inherit; text-align: start; cursor: pointer; transition: border-color .15s, transform .15s; }
.ef-folder:hover, .ef-folder:focus-visible { border-color: var(--primary); transform: translateY(-1px); outline: none; }
.ef-folder > .ic { width: 38px; height: 38px; color: var(--accent); fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke-width: 1.4; }
.ef-folder.empty-folder > .ic { color: var(--grey); fill: none; }
.ef-folder.empty-folder b { color: var(--muted); }
input.doc-filled, select.doc-filled { border-color: var(--green) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 25%, transparent); }
#pf-contract input[readonly] { background: var(--bg); color: var(--muted); cursor: default; }
#pf-project-name { display: block; margin-top: 3px; }
/* ---------- المقاولين (قسم التصاريح): بطاقة المقاول وملفه ---------- */
.pp-logo { background: var(--primary-soft); color: var(--primary); border-color: transparent; font-weight: 700; }
.pp-type { margin-inline-start: auto; flex: none; }
.pp-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; font-size: 12.5px; }
.pp-kv > span { color: var(--muted); } .pp-kv > b { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-acts { gap: 6px; padding-top: 2px; }
/* واجهة التصاريح: بحث + شريط ملخص فوق بطاقات المقاولين، و«المطلوب دلوقتي» تحتها */
.pl-search { position: relative; margin-bottom: 12px; }
.pl-search input[type="search"] { flex: 1; max-width: 560px; }
#pl-res { position: absolute; z-index: 20; inset-inline-start: 0; top: calc(100% + 4px); width: min(560px, 100%); max-height: 380px; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.pl-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pl-tile { padding: 10px 14px; }
.pl-tile.flat { cursor: default; } .pl-tile.flat:hover { border-color: var(--border); transform: none; }
.pl-tile .db-tile-v { font-size: 24px; }
.pl-link { cursor: pointer; border-radius: 6px; }
.pl-link:hover, .pl-link:focus-visible { color: var(--primary); text-decoration: underline; outline: none; }
.pl-none { font-size: 12.5px; color: var(--muted); }
.pl-none b { color: var(--text); }
.pl-todo { margin-top: 16px; }
.db-li.clickable { cursor: pointer; }
.db-li.clickable:hover, .db-li.clickable:focus-visible { background: var(--surface-2); outline: none; }
.pcx-sep { margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--muted); border-top: 1px dashed var(--border); padding-top: 8px; }
.pp-card .co-status { margin-top: 0; }
.pcx-contract { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.pf-form { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.pf-form > b.num { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.pf-form label.small { display: inline-flex; align-items: center; gap: 5px; }
.pf-form input[type="date"], .pf-form select { border: 1px solid var(--border); background: var(--surface); border-radius: 6px; padding: 4px 7px; }

/* ---------- رسائل «تم الحفظ» والأخطاء: أيقونة ولون ثابت ---------- */
#toast { display: flex; align-items: center; gap: 8px; background: var(--text); color: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,.22); font-weight: 500; }
#toast .ic { flex: none; width: 1.3em; height: 1.3em; }
#toast.ok { background: #1f7a4d; color: #fff; }
#toast.err { background: #b3261e; color: #fff; }

/* 📧 إيميل متابعة التجديدات (openDigestMailModal) */
.dg-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.dg-hero.on { background: var(--green-soft); border-color: var(--green); }
.dg-hero-main { display: flex; align-items: center; gap: 12px; }
.dg-hero b { font-size: 16px; }
.dg-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--grey); flex: none; }
.dg-hero.on .dg-dot { background: var(--green); box-shadow: 0 0 0 4px rgba(46,139,87,.2); }
.dg-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.dg-kpis > div { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--primary); border-radius: 10px; padding: 10px; text-align: center; }
.dg-kpis b { display: block; font-size: 22px; font-weight: 800; color: var(--primary); }
.dg-kpis span { color: var(--muted); font-size: 12px; }
.dg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 800px) { .dg-grid { grid-template-columns: 1fr; } .dg-kpis { grid-template-columns: repeat(2, 1fr); } }
.dg-steps { margin: 0; padding-inline-start: 20px; line-height: 1.9; color: var(--text); }
.dg-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid var(--border); }
.dg-row:last-child { border-bottom: 0; }
.dg-row b { flex: 1; min-width: 120px; }
.dg-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); }
.dg-seg button { border: 0; background: none; padding: 5px 11px; cursor: pointer; color: var(--muted); font-size: 12.5px; border-inline-start: 1px solid var(--border); }
.dg-seg button:first-child { border-inline-start: 0; }
.dg-seg button.on { background: var(--primary); color: var(--on-primary); font-weight: 700; }
.dg-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; border: 1px solid var(--border); border-radius: 8px; padding: 4px 6px; background: var(--surface); min-height: 36px; }
.dg-chips:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.dg-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--primary-soft); color: var(--primary); border-radius: 999px; padding: 2px 6px 2px 10px; font-size: 12.5px; }
.dg-chip b { cursor: pointer; color: var(--muted); font-size: 15px; line-height: 1; }
.dg-chip b:hover { color: var(--red); }
.dg-chips input { border: 0 !important; outline: 0; box-shadow: none !important; flex: 1; min-width: 150px; background: transparent; padding: 4px; }
.dg-table td { vertical-align: middle; }

/* 🔔 قسم المتابعة (followup.js) */
.fu-centres { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-bottom: 8px; }
.fu-centre { text-align: start; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; color: var(--text); font: inherit; }
.fu-centre span { color: var(--muted); font-size: 12px; }
.fu-centre:hover { border-color: var(--primary); }
.fu-centre.on { border-color: var(--primary); border-top-color: var(--primary); background: var(--primary-soft); }
.fu-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 4px; background: var(--grey); } .fu-dot.bad { background: var(--red); }
.fu-sec { margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--primary); box-shadow: 0 3px 0 var(--accent); }
.fu-sec h2 { margin: 0; font-size: 16px; color: var(--primary); } .fu-sec small { color: var(--muted); font-weight: 400; font-size: 12px; }
.fu-new { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; } .fu-new textarea { flex: 1; }
.fu-thread { display: flex; flex-direction: column; gap: 8px; }
.fu-c { background: var(--surface); border: 1px solid var(--border); border-inline-start: 3px solid var(--primary); border-radius: 8px; padding: 8px 12px; }
.fu-c-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .fu-c-t { margin-top: 4px; line-height: 1.7; }
.fu-doc { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 2px 0; } .fu-doc b { min-width: 110px; } .fu-doc .num { min-width: 86px; }
.fu-sub { margin: 12px 0 6px; font-weight: 700; color: var(--primary); } .fu-sub small { color: var(--muted); font-weight: 400; }

/* 🔍 بحث المهنة (profession autocomplete) */
.prof-wrap { position: relative; }
.ac-drop { position: absolute; top: calc(100% + 2px); inset-inline-start: 0; inset-inline-end: 0; background: var(--surface); border: 1px solid var(--primary); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.15); z-index: 999; max-height: 260px; overflow-y: auto; padding: 4px 0; margin: 0; list-style: none; }
.ac-drop li { padding: 7px 12px; cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.ac-drop li:hover, .ac-drop li.hover { background: var(--primary-soft); }
.ac-drop .ac-en { color: var(--muted); font-size: 11.5px; direction: ltr; }
.ac-drop .ac-code { color: var(--primary); font-size: 11px; font-family: monospace; margin-inline-start: auto; }

/* مسار التصفّح الشجري لقسم التصاريح (مقاول ‹ نوع ‹ أفراد/سيارات) */
.pb-trail { font-size: 13px; color: var(--muted); margin: 2px 0 12px; }
.pb-crumb { cursor: pointer; }
.pb-crumb:hover { color: var(--primary); text-decoration: underline; }
.pb-crumb.pb-last { color: var(--text); font-weight: 700; cursor: default; text-decoration: none; }

/* الأرقام الفريدة المقفولة / المكرّرة (identifiers.js) */
input.ident-locked { background: var(--grey-soft); cursor: not-allowed; }
input.ident-dup { border-color: var(--red) !important; }

/* لوحة التصاريح: ملخص + إجراءات + بطاقة لكل نوع */
.hub-top { display: flex; gap: 22px; align-items: center; padding: 18px 22px; margin: 6px 0 14px; flex-wrap: wrap; }
.hub-donut { width: 112px; height: 112px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--green) 0 var(--a), var(--orange) var(--a) var(--b), var(--red) var(--b) 100%); }
.hub-donut > span { width: 82px; height: 82px; border-radius: 50%; background: var(--surface); display: grid; place-content: center; text-align: center; line-height: 1.1; }
.hub-donut b { font-size: 1.5rem; } .hub-donut small { color: var(--muted, #6b7a76); font-size: .72rem; }
.hub-top-m { flex: 1; min-width: 260px; display: grid; gap: 10px; }
.hub-sentence { font-size: 1.02rem; line-height: 1.7; }
.hub-stats { display: flex; gap: 26px; flex-wrap: wrap; }
.hub-stats > div { display: grid; line-height: 1.15; } .hub-stats b { font-size: 1.6rem; } .hub-stats span { font-size: .78rem; color: var(--muted, #6b7a76); }
.hub-near { cursor: pointer; padding: 7px 12px; border-radius: 10px; background: var(--orange-soft, #fff3e0); width: fit-content; max-width: 100%; }
.hub-near:hover { filter: brightness(.97); }
.hub-act { padding: 14px 18px; margin-bottom: 16px; border-inline-start: 4px solid var(--red); }
.hub-act-t { font-weight: 700; margin-bottom: 10px; }
.hub-act-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.hub-act-i { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); display: grid; gap: 6px; }
.hub-act-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--c); font-weight: 600; } .hub-act-h b { font-size: 1.25rem; }
.hub-act-n { color: var(--muted, #6b7a76); min-height: 1.4em; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.hub-card { padding: 16px 18px; } .hub-card.hot { box-shadow: 0 0 0 1px var(--red-soft, #f5c6c2), var(--shadow); }
.hub-card-h { display: grid; margin-bottom: 12px; } .hub-card-h b { font-size: 1.08rem; }
.hub-secs { display: grid; gap: 12px; }
.hub-sec { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); display: grid; gap: 8px; transition: background .15s, border-color .15s; }
.hub-sec[data-hub] { cursor: pointer; } .hub-sec[data-hub]:hover, .hub-sec[data-hub]:focus { background: var(--primary-soft); border-color: var(--primary, #0f5b66); outline: none; }
.hub-sec.none { opacity: .6; }
.hub-sec-h { display: flex; justify-content: space-between; align-items: center; } .hub-sec-h b { font-size: 1.35rem; }
.hub-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--border); } .hub-bar i { display: block; }
.hub-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; }
@media (max-width: 640px) { .hub-top { padding: 14px; } .hub-grid { grid-template-columns: 1fr; } }

/* بحث حي في اختيار الموظف / السيارة */
.lsp-list { position: fixed; z-index: 1000; max-height: 320px; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 4px; }
.lsp-item { padding: 7px 10px; border-radius: 7px; cursor: pointer; }
.lsp-item.on, .lsp-item:hover { background: var(--primary-soft); }
.lsp-item.dim { opacity: .55; }
.lsp-t { font-weight: 700; font-size: 1.05rem; } .lsp-s { font-size: .82rem; color: var(--muted, #6b7a76); }
.lsp-c { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.lsp-list mark { background: var(--yellow-soft, #fff3bf); color: inherit; border-radius: 3px; padding: 0 1px; }
.lsp-empty, .lsp-more { padding: 10px; text-align: center; }

/* معاملات متعددة في طلب عهدة */
.cu-grp-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 6px; }
.cu-grp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-bottom: 8px; }
.cu-grp { display: grid; gap: 2px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; position: relative; }
.cu-grp.on { border-color: var(--primary, #0f5b66); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary, #0f5b66); }
.cu-grp [data-grp-del] { position: absolute; inset-inline-end: 6px; top: 6px; }

/* ===== Track 0: حركة الأزرار + مؤشر التحميل + ظهور النوافذ ===== */
.btn { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease; }
.btn:not(:disabled):not(.sm):not(.ghost):hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.14); }
.btn:not(:disabled):active { transform: scale(.95); box-shadow: none; }
.btn.loading { position: relative; pointer-events: none; }
.btn.loading::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-inline-end: .5em; vertical-align: -.15em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: lx-spin .7s linear infinite; }
@keyframes lx-spin { to { transform: rotate(360deg); } }
@keyframes lx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lx-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
#modal-root .overlay { animation: lx-fade .18s ease-out; }
#modal-root .overlay > .modal { animation: lx-pop .22s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transition: none; transform: none; }
  .btn.loading::before { animation-duration: 1.6s; }
  #modal-root .overlay, #modal-root .overlay > .modal { animation: none; }
}

/* ===== Track 1.1: نظام التصميم الموحّد — الرموز + مكوّن «خيار» (check) + جدول الصلاحيات ===== */
:root { --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --focus-ring: 0 0 0 3px rgba(15,91,102,.22); }
/* أي مربّع اختيار / زرار راديو: حجم ثابت ما يصغّرش جوّه flex ولا grid ولا بيورث padding/border الحقول */
input[type="checkbox"], input[type="radio"] { flex: none; width: 18px; height: 18px; min-width: 18px; margin: 0; padding: 0; accent-color: var(--primary); cursor: pointer; }
.form input[type="checkbox"], .form input[type="radio"], .filters input[type="checkbox"], .filters input[type="radio"] { padding: 0; border-radius: 4px; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* «خيار» — كارت صغير بيتلوّن لما يتفعّل */
.form label.check { padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; line-height: 1.4; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.form label.check:hover { border-color: var(--primary); background: var(--primary-soft); }
.form label.check:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.form label.check:has(input:disabled) { cursor: not-allowed; opacity: .7; background: var(--grey-soft); }
.form label.check:has(input:focus-visible) { box-shadow: var(--focus-ring); }
/* شبكة الخيارات: أعمدة متساوية بدل ما كل واحد ياخد مقاسه */
.form:has(> label.check) { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-2) var(--sp-3); }
/* جدول الصلاحيات */
#perm-matrix th { white-space: nowrap; }
#perm-matrix td { padding-block: 6px; }
#perm-matrix tbody tr:hover td { background: var(--primary-soft); }
#perm-matrix td:first-child { font-weight: 600; }
.modal-body h4 { margin: var(--sp-5) 0 var(--sp-2); padding-bottom: var(--sp-1); border-bottom: 1px solid var(--border); }

/* ===== Track 2: الأدوار — كروت القوالب + تمييز الصلاحيات الخطرة ===== */
.form .full { grid-column: 1 / -1; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-2); }
.tpl-card { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: start; padding: var(--sp-3); border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s, background-color .15s, transform .15s; }
.tpl-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.tpl-card.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary); }
#perm-matrix td.perm-risk { background: var(--orange-soft); }
.form label.check.perm-risk { border-color: var(--orange); background: var(--orange-soft); }
#role-danger { margin-top: var(--sp-3); line-height: 1.7; }
@media (prefers-reduced-motion: reduce) { .tpl-card:hover { transform: none; } }

/* ===== Track 1.2–1.4: رأس الصفحة + شريط الفلاتر + مسافات موحّدة (صفحات الأقسام) ===== */
#view-root > .page-head { padding-bottom: var(--sp-3); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
#view-root > .page-head h1 { font-size: 22px; font-weight: 700; line-height: 1.3; }
#view-root > .page-head .actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
#view-root > .filters { padding: var(--sp-3); gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
#view-root > .filters .btn.ghost { margin-inline-start: auto; }
#view-root > .table-wrap { margin-top: 0; }

/* ===== تحسينات الهوية والقراءة (2026-10-21): الشريط العلوي، الجانبي، الخط، رؤوس الجداول، مربعات الاختيار ===== */
:root { --tb-h: 60px; --chrome-bg: #e8f1f2; --chrome-border: #cfdfe1; }
:root[data-theme="dark"] { --chrome-bg: var(--surface-2); --chrome-border: var(--border); }
body { font-size: 14px; }
.topbar { height: var(--tb-h); padding: 0 20px; background: var(--chrome-bg); border-bottom: 1px solid var(--chrome-border); }
.brand { gap: 12px; }
.logo-mark { width: 40px; height: 40px; }
.wordmark { font-size: 19px; }
.brand small { font-size: 16.5px; padding-inline-start: 14px; margin-inline-start: 8px; border-inline-start-color: var(--chrome-border); max-width: 520px; }
.search-wrap input { padding: 8px 16px; font-size: 14px; background: var(--surface); border-color: var(--chrome-border); }
.tb-btn { font-size: 14px; padding: 6px 10px; }
.tb-btn:hover { background: var(--surface); border-color: var(--chrome-border); }
.layout { min-height: calc(100vh - var(--tb-h)); }
.navrail { width: 214px; background: var(--chrome-bg); border-inline-end: 1px solid var(--chrome-border); top: var(--tb-h); height: calc(100vh - var(--tb-h)); padding: 14px 10px; }
.navrail button { padding: 8px 12px; font-size: 14px; gap: 10px; border-radius: 10px; position: relative; }
.navrail button:hover { background: rgba(255, 255, 255, .65); }
:root[data-theme="dark"] .navrail button:hover { background: var(--surface); }
.navrail button.active { background: var(--surface); color: var(--primary); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.navrail button.active::before { content: ""; position: absolute; inset-block: 8px; inset-inline-start: 0; width: 3px; border-radius: 3px; background: var(--primary); }
.navrail .ico { width: 24px; font-size: 16px; }
table.data { font-size: 13.5px; }
table.data th { font-weight: 700; color: var(--text); font-size: 13.5px; padding: 8px 10px; border-bottom: 2px solid var(--primary); }
table.data td { padding: 7px 10px; }
/* مربعات الاختيار: أصغر في الجداول والقوائم */
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; min-width: 16px; }
table.data input[type="checkbox"], table.data input[type="radio"] { width: 15px; height: 15px; min-width: 15px; }
.side-panel { top: var(--tb-h); height: calc(100vh - var(--tb-h)); }
@media (max-width: 900px) {
  .topbar { height: auto; padding: 8px 12px; }
  .navrail { width: 100%; top: auto; height: auto; padding: 4px; }
  .navrail button { padding: 6px 8px; font-size: 11px; }
  .navrail button.active::before { display: none; }
}

/* ===== صفحة الموظفين: قائمة «أدوات» + «فلاتر إضافية» ===== */
details.menu { position: relative; }
details.menu > summary, details.ef-more > summary { list-style: none; cursor: pointer; }
details.menu > summary::-webkit-details-marker, details.ef-more > summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 50; min-width: 220px; display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.menu-list .btn { justify-content: flex-start; width: 100%; border-color: transparent; background: transparent; }
.menu-list .btn:hover { background: var(--primary-soft); transform: none; box-shadow: none; }
.ef-bar { align-items: center; }
.ef-bar > input[type="search"] { flex: 1 1 300px; min-width: 240px; }
details.ef-more { flex: 0 0 auto; }
.ef-more-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-2); padding: var(--sp-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
details.ef-more[open] { flex: 1 1 100%; order: 5; }
.progress { height: 6px; }

/* ===== كروت المقاولين (التصاريح): أكبر ومنظمة في أقسام ===== */
.pp-grid { grid-template-columns: repeat(auto-fill, minmax(390px, 1fr)); gap: 18px; }
.pp-card { padding: 20px; gap: 16px; }
.pp-card .co-logo { width: 52px; height: 52px; font-size: 22px; border-radius: 12px; }
.pp-card .co-card-t b { font-size: 17px; }
.pp-card .co-card-t span { font-size: 13px; }
.pp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pp-kpi { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; font-size: 12px; color: var(--muted); text-align: center; }
.pp-kpi b { font-size: 22px; line-height: 1.2; color: var(--text); }
.pp-kpi-i { font-size: 16px; }
.pp-kpi.pl-link:hover { border-color: var(--primary); background: var(--primary-soft); }
.pp-health { display: flex; flex-direction: column; gap: 8px; }
.pp-bar { display: flex; gap: 2px; height: 10px; border-radius: 99px; overflow: hidden; background: var(--grey-soft); }
.pp-seg { display: block; min-width: 6px; }
.pp-card .pp-kv { font-size: 13.5px; gap: 6px 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.pp-alert { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--orange-soft); border-radius: 8px; font-size: 12.5px; }
.pp-alert span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-alert b { margin-inline-start: auto; font-size: 11px; background: var(--surface); border-radius: 99px; padding: 0 7px; }
.pp-card .pp-acts { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
/* الشريط الجانبي: أكثف شوية عشان يدخل في الشاشة من غير شريط تمرير */
.navrail { padding: 10px 8px; scrollbar-width: thin; }
.navrail button { padding: 6px 12px; font-size: 13.5px; line-height: 1.3; gap: 10px; }
.navrail button + button { margin-top: 2px; }
.navrail .ico { width: 22px; font-size: 15px; }
.navrail .ver { padding: 8px 12px; }
/* زجاج القائمة الجانبية — نفس هوية صفحة الدخول وصفحة الهبوط */
.navrail {
  background: radial-gradient(420px 320px at 15% 0%, color-mix(in srgb, var(--neon) 12%, transparent) 0%, transparent 65%),
              color-mix(in srgb, var(--chrome-bg) 72%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.navrail button.active { box-shadow: 0 0 0 1.5px var(--neon), 0 0 10px 1px var(--neon), 0 0 22px 2px color-mix(in srgb, var(--neon) 55%, transparent); }
.navrail button.active::before { inset-block: 6px; width: 4px; background: var(--neon); box-shadow: 0 0 10px 2px var(--neon); }
.navrail button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--neon), 0 0 12px 1px var(--neon); }
/* جدول الموظفين: يفضل جوّه الشاشة — شريط التمرير الأفقي ظاهر دايمًا تحت الجدول، والرأس ثابت */
/* جدول الموظفين يدخل في عرض الصفحة من غير شريط تمرير أفقي (أعمدة بنسب ثابتة) */
#emp-table { table-layout: fixed; width: 100%; min-width: 1100px; }
#emp-table th, #emp-table td { white-space: normal; overflow-wrap: anywhere; }
#emp-table th:first-child { width: 3%; }
#emp-table th[data-col="name"] { width: 17%; } #emp-table th[data-col="id"] { width: 10%; } #emp-table th[data-col="nationality"] { width: 7%; }
#emp-table th[data-col="profession"] { width: 10%; } #emp-table th[data-col="residencyExp"], #emp-table th[data-col="workPermitExp"], #emp-table th[data-col="passportExp"] { width: 8%; }
#emp-table th[data-col="govStage"] { width: 10%; } #emp-table th[data-col="employmentStatus"] { width: 11%; } #emp-table th[data-col="costCenter"] { width: 13%; }
#emp-table th[data-col="company"] { width: 18%; } #emp-table th[data-col="urgency"] { width: 9%; }
#emp-table .chip, #emp-table .pill { white-space: nowrap; }
#emp-table th, #emp-table td { padding-inline: 8px; }
#emp-table .progress { width: 52px !important; }
/* جدول الموظفين: الاسم على اليمين وباقي الأعمدة في المنتصف — مظهر متناسق ومريح */
#emp-table th, #emp-table td { text-align: center; vertical-align: middle; }
#emp-table th:nth-child(2), #emp-table td:nth-child(2) { text-align: start; padding-inline-start: 14px; }
#emp-table td { padding-block: 11px; }
#emp-table td:nth-child(2) b { font-size: 14px; }
#emp-table td .small.muted { margin-top: 2px; }
#emp-table td > div { margin-inline: auto; }
#emp-table td:nth-child(2) > div { margin-inline: 0; }
#emp-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
#emp-table tbody tr:hover td { background: var(--primary-soft); }
#emp-table input[type="checkbox"] { width: 13px; height: 13px; min-width: 13px; }

/* ===== جدول الموظفين: صورة رمزية + حافة لونية + عدّادات سريعة ===== */
.emp-n { display: flex; align-items: center; gap: 10px; }
.emp-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: var(--primary-soft); color: var(--primary); }
.emp-nt { min-width: 0; text-align: start; }
.emp-en { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-co { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.emp-fact { cursor: help; opacity: .85; }
.emp-miss { display: inline-block; margin-inline-start: 4px; padding: 0 6px; border-radius: 99px; background: var(--orange-soft); color: var(--orange); font-size: 12px; cursor: help; white-space: nowrap; }
#emp-table tbody td:first-child { border-inline-start: 4px solid transparent; }
#emp-table tbody tr.emp-u-red td:first-child { border-inline-start-color: var(--red); }
#emp-table tbody tr.emp-u-orange td:first-child { border-inline-start-color: var(--orange); }
#emp-table tbody tr.emp-u-ok td:first-child { border-inline-start-color: var(--green); }
.emp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.emp-kpi { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; text-align: start; font: inherit; color: var(--muted); transition: border-color .15s, box-shadow .15s, transform .15s; }
.emp-kpi:hover { border-color: var(--primary); transform: translateY(-1px); }
.emp-kpi b { font-size: 22px; line-height: 1; color: var(--text); }
.emp-kpi-i { font-size: 18px; }
.emp-kpi.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary); }
.emp-kpi.green b { color: var(--green); } .emp-kpi.orange b { color: var(--orange); } .emp-kpi.red b { color: var(--red); } .emp-kpi.purple b { color: var(--purple); } .emp-kpi.blue b { color: var(--blue); }
@media (prefers-reduced-motion: reduce) { .emp-kpi:hover { transform: none; } }

/* قائمة الأعمدة + كثافة الجداول + حالة «لا توجد نتائج» */
.cols-list label { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.cols-list label:hover { background: var(--primary-soft); }
.emp-av { display: none; }
body.dense table.data td { padding-block: 3px; }
body.dense table.data th { padding-block: 5px; }
body.dense #emp-table td { padding-block: 4px; }
body.dense #emp-table td .small { display: none; }
body.dense .emp-kpi { padding: 8px 12px; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 12px; color: var(--muted); }
.empty-state .es-ico { font-size: 34px; opacity: .55; }
.empty-state b { font-size: 15px; color: var(--text); }
td.empty, div.empty { color: var(--muted); text-align: center; padding: 28px 12px; }
.skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: 8px; min-height: 14px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: lx-shimmer 1.2s infinite; }
:root[data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent); }
@keyframes lx-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }

/* جداول القوائم العامة: حافة لونية حسب الأقرب انتهاءً + العمود الأول لليمين والباقي في المنتصف */
table.data.edge tbody td:first-child { border-inline-start: 4px solid transparent; }
table.data.edge tbody tr.u-red td:first-child { border-inline-start-color: var(--red); }
table.data.edge tbody tr.u-orange td:first-child { border-inline-start-color: var(--orange); }
table.data.edge tbody tr.u-ok td:first-child { border-inline-start-color: var(--green); }
table.data.al-c th, table.data.al-c td { text-align: center; vertical-align: middle; }
table.data.al-c th:first-child, table.data.al-c td:first-child { text-align: start; padding-inline-start: 14px; }
table.data.al-c tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
table.data.al-c tbody tr:hover td { background: var(--primary-soft); }

/* =====================================================================================
   هوية الزجاج والنيون لكل صفحات النظام — نفس لغة صفحة الدخول والرئيسية والقائمة الجانبية.
   طبقة واحدة فوق المكوّنات المشتركة (بطاقة، جدول، نافذة، زر، حقل، تبويب، شريحة) فكل الشاشات تاخدها مرة واحدة.
   الـblur على الحاويات الكبيرة بس (مش على خلايا الجداول) عشان الأداء.
   ===================================================================================== */
:root { --glass: color-mix(in srgb, var(--surface) 72%, transparent); --glass-strong: color-mix(in srgb, var(--surface) 88%, transparent);
  --glass-border: color-mix(in srgb, var(--primary) 16%, var(--border)); --neon-ring: 0 0 0 3px color-mix(in srgb, var(--neon) 24%, transparent);
  --neon-glow: 0 0 0 1px color-mix(in srgb, var(--neon) 45%, transparent), 0 0 16px color-mix(in srgb, var(--neon) 30%, transparent); }
:root[data-theme="dark"] { --glass: color-mix(in srgb, var(--surface) 62%, transparent); --glass-strong: color-mix(in srgb, var(--surface) 84%, transparent); }

/* خلفية الصفحة: توهّج هادي ثابت يدّي الزجاج عمق */
body { background:
  radial-gradient(900px 520px at 100% -10%, color-mix(in srgb, var(--primary) 9%, transparent) 0%, transparent 65%),
  radial-gradient(800px 480px at -10% 110%, color-mix(in srgb, var(--neon) 8%, transparent) 0%, transparent 65%),
  var(--bg); background-attachment: fixed; }

/* الشريط العلوي زجاج */
.topbar { background: color-mix(in srgb, var(--chrome-bg) 76%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* البطاقات وحاويات الجداول */
.card, .table-wrap { background: var(--glass); border-color: var(--glass-border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: border-color .15s, box-shadow .15s; }
.card.clickable:hover, .card[data-open]:hover, .card[role="button"]:hover { border-color: var(--neon); box-shadow: var(--neon-glow); }
.page-head h1 { letter-spacing: .1px; }

/* الجداول: صف الهوفر بخط نيون في البداية */
table.data th { background: color-mix(in srgb, var(--surface-2) 82%, transparent); }
table.data tbody tr:hover td { background: color-mix(in srgb, var(--neon) 9%, var(--surface)); }
table.data tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--neon); }
[dir="rtl"] table.data tbody tr:hover td:first-child { box-shadow: inset -3px 0 0 var(--neon); }
table.data tr.sel td { background: color-mix(in srgb, var(--neon) 14%, var(--surface)); }

/* النوافذ: زجاج قوي فوق خلفية مغبّشة */
#modal-root .overlay { background: color-mix(in srgb, #071518 52%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal { background: var(--glass-strong); border-color: var(--glass-border); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px rgba(0,0,0,.32), 0 0 0 1px color-mix(in srgb, var(--neon) 18%, transparent); }
.modal-head { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 7%, transparent), transparent); }

/* الأزرار */
.btn { border-radius: 10px; transition: border-color .12s, box-shadow .15s, background .12s, transform .1s; }
.btn:hover:not(:disabled) { border-color: var(--neon); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--primary) 85%, transparent); }
.btn.primary:hover:not(:disabled) { box-shadow: 0 0 0 1px color-mix(in srgb, var(--neon) 50%, transparent), 0 8px 22px -8px color-mix(in srgb, var(--neon) 70%, transparent); }
.btn:focus-visible { outline: none; box-shadow: var(--neon-ring); }

/* الحقول: حلقة نيون عند التركيز (كل الحقول، مش الفورم بس) */
/* صفحة الدخول ليها تصميم الحقول الخاص بيها (حبة من غير مربع داخلي) — مستثناة */
body:not(:has(.login-wrap)) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea):focus {
  outline: none; border-color: var(--neon) !important; box-shadow: var(--neon-ring); }
.filters input, .filters select, .form input, .form select, .form textarea { border-radius: 10px; }

/* التبويبات: الخط تحت التبويب النشط بيتوهّج */
.tabs button { position: relative; transition: color .12s; }
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--primary); border-bottom-color: var(--neon); box-shadow: 0 6px 10px -8px var(--neon); }

/* الشرائح والتنبيهات */
.chip.clickable:hover { border-color: var(--neon); }
.chip.on { border-color: var(--neon); box-shadow: 0 0 10px -2px color-mix(in srgb, var(--neon) 60%, transparent); }
.notice { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 10px; }

/* الطباعة: من غير زجاج ولا توهّج */
@media print {
  body { background: #fff; }
  .card, .table-wrap, .modal, .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .btn, .card, .tabs button { transition: none; } }