/* ===========================================================================
   GovHub — نظام التصميم
   هويّة GitHub (نظام Primer): خطّ النظام، أيقونات Octicons بمقاس ١٦، صناديق بإطارٍ
   وزوايا ٦ بكسل بلا ظلال، الأزرق #0969da للروابط والتحديد والتركيز، والأخضر
   #1f883d للزرّ الرئيسيّ وحده. رأسٌ بعرض الصفحة، وتحته قائمةٌ جانبيّة كقوائم GitHub.
   أسماء الرموز والأصناف باقيةٌ كما هي، فتتبعها الصفحات كلّها.
   =========================================================================== */

/* ===== ١ · الرموز ===== */
:root{
  /* الخطّ: خطّ النظام كما في GitHub — Segoe UI على ويندوز، وSF على أبل، وNoto على غيرهما */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans","Noto Sans Arabic",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* سُلّم الأزرق — أزرق شعار داتا هب (#134CF8) على بنية Primer */
  --brand-50:#EEF3FF;  --brand-100:#DCE6FE; --brand-200:#B8CEFD; --brand-300:#8AADFB;
  --brand-400:#4F7FF9; --brand-500:#134CF8; --brand-600:#0F3CD4; --brand-700:#0B2EA6;
  --brand-800:#0A2580; --brand-900:#071A5C;
  --brand-grad:linear-gradient(120deg,#1005B0 0%,#134CF8 48%,#2E89F9 82%,#92B8F2 100%);

  /* الأسطح والنصوص */
  --bg:#FFFFFF; --card:#FFFFFF; --border:#D1D9E0; --border-2:#C8D1DA; --hover:#F6F8FA;
  --ink:#1F2328; --ink-2:#59636E; --ink-3:#6E7781; --inverse:#FFFFFF;

  /* الدلاليّة */
  --ok:#1A7F37;   --ok-bg:#DAFBE1;   --ok-line:#B7E7C4;
  --warn:#9A6700; --warn-bg:#FFF8C5; --warn-line:#EEDCAB;
  --bad:#D1242F;  --bad-bg:#FFEBE9;  --bad-line:#FFCDCD;
  --info:#134CF8; --info-bg:#EEF3FF; --info-line:#B8CEFD;
  --wip:#8250DF;  --wip-bg:#FBEFFF;  --wip-line:#E7D5FF;

  /* حالات التشغيل (نقاط السيرفرات والرسوم) */
  --up:#1F883D; --dn:#CF222E; --mt:#BF8700; --idle:#818B98;

  /* عناصر التحكّم — Primer controls */
  --hdr-bg:#F6F8FA;
  --nav-hover:rgba(129,139,152,.10); --nav-on:rgba(129,139,152,.15); --counter-bg:rgba(129,139,152,.12);
  --btn-bg:#F6F8FA; --btn-hover:#EFF2F5; --btn-active:#E6EAEF; --btn-border:#D1D9E0;
  --btn-shadow:0 1px 0 0 rgba(31,35,40,.04);
  /* الزرّ الرئيسيّ بأزرق الشعار */
  --btn-pri:#134CF8; --btn-pri-hover:#0F3CD4; --btn-pri-active:#0B2EA6;
  --btn-pri-border:rgba(16,5,176,.25); --btn-pri-shadow:0 1px 0 0 rgba(31,35,40,.1),0 4px 12px -4px rgba(19,76,248,.45);
  --btn-danger-hover:#A40E26;
  --seg-track:#EFF2F5; --seg-knob:#818B98;
  --input-bg:#FFFFFF; --input-shadow:inset 0 1px 0 0 rgba(31,35,40,.04);
  --focus:#134CF8; --tab-on:#134CF8;
  --emph:#25292E; --overlay:rgba(200,209,218,.5);

  /* الظلال: الصندوق بلا ظلّ، والطافي وحده له ظلّ */
  --sh-sm:none; --sh:none; --sh-md:none;
  --sh-lg:0 0 0 1px rgba(209,217,224,.5),0 6px 12px -3px rgba(37,41,46,.04),0 6px 18px 0 rgba(37,41,46,.12);
  --sh-xl:0 0 0 1px #D1D9E0,0 40px 80px 0 rgba(37,41,46,.24);
  --sh-brand:none; --sh-brand-lg:none;

  /* الزوايا والحركة */
  --sb-w:16rem;
  --r-lg:6px; --r-xl:6px; --r-2xl:6px; --r-3xl:12px;
  --ease:cubic-bezier(.33,1,.68,1); --dur:120ms;
}

/* الوضع الليليّ — GitHub Dark */
:root[data-theme="dark"]{
  --brand-50:rgba(79,127,249,.12); --brand-100:rgba(79,127,249,.2); --brand-200:rgba(79,127,249,.42);
  --brand-300:#3A6DF0; --brand-400:#5B86FA; --brand-500:#7DA2FF; --brand-600:#9DB9FF;
  --brand-700:#B8CEFD; --brand-800:#DCE6FE; --brand-900:#EEF3FF;
  --brand-grad:linear-gradient(120deg,#0B0480 0%,#1D45D8 50%,#2E89F9 100%);

  --bg:#0D1117; --card:#0D1117; --border:#3D444D; --border-2:#656C76; --hover:#151B23;
  --ink:#F0F6FC; --ink-2:#9198A1; --ink-3:#848D97; --inverse:#0D1117;

  --ok:#3FB950;   --ok-bg:rgba(46,160,67,.15);  --ok-line:rgba(46,160,67,.4);
  --warn:#D29922; --warn-bg:rgba(187,128,9,.15); --warn-line:rgba(187,128,9,.4);
  --bad:#F85149;  --bad-bg:rgba(248,81,73,.1);   --bad-line:rgba(248,81,73,.4);
  --info:#7DA2FF; --info-bg:rgba(79,127,249,.12); --info-line:rgba(79,127,249,.42);
  --wip:#AB7DF8;  --wip-bg:rgba(171,125,248,.15); --wip-line:rgba(171,125,248,.4);

  --up:#3FB950; --dn:#F85149; --mt:#D29922; --idle:#656C76;

  --hdr-bg:#010409;
  --nav-hover:rgba(101,108,118,.2); --nav-on:rgba(101,108,118,.28); --counter-bg:rgba(101,108,118,.3);
  --btn-bg:#212830; --btn-hover:#262C36; --btn-active:#2A313C; --btn-border:#3D444D; --btn-shadow:none;
  --btn-pri:#2F5FF0; --btn-pri-hover:#3D6CF5; --btn-pri-active:#2550D6;
  --btn-pri-border:rgba(240,246,252,.12); --btn-pri-shadow:0 4px 14px -4px rgba(47,95,240,.6);
  --btn-danger-hover:#B62324;
  --seg-track:#262C36; --seg-knob:#656C76;
  --input-bg:#0D1117; --input-shadow:none;
  --focus:#5B86FA; --tab-on:#7DA2FF;
  --emph:#3D444D; --overlay:rgba(1,4,9,.6);

  --sh-lg:0 0 0 1px #3D444D,0 8px 24px 0 #010409;
  --sh-xl:0 0 0 1px #3D444D,0 24px 48px 0 #010409;
}

/* ===== ٢ · الأساس ===== */
*{margin:0;padding:0;box-sizing:border-box}
/* الجذر سائل: ١٦ بكسل على الشاشات المعتادة كجذر GitHub، ويكبر على الشاشات العريضة حتى ٢٠.
   كلّ المقاسات بـ rem، فتكبر الواجهة كلّها معه لا الخطّ وحده. */
html{-webkit-text-size-adjust:100%;font-size:clamp(16px, 0.26vw + 12.7px, 20px)}
body{font-family:var(--font);background:var(--bg);color:var(--ink);
  font-size:0.875rem;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
[dir="rtl"] body{direction:rtl;text-align:right}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
b,strong{font-weight:600}
table{border-collapse:collapse}
svg{display:block}
::selection{background:var(--brand-100)}
/* حلقة التركيز كما في GitHub: خطٌّ أزرق بعرض ٢ */
:where(a,button,summary,[tabindex],[role="tab"]):focus-visible{outline:2px solid var(--focus);outline-offset:-2px;box-shadow:none}

h1,h2,h3,h4{font-weight:600;line-height:1.25;color:var(--ink)}
.noise{display:none}

/* ===== ٣ · التخطيط ===== */
.app-root{min-height:100vh}
html.has-sb .app-root{padding-inline-start:var(--sb-w)}
.container{max-width:clamp(60rem, 94vw, 118rem);margin-inline:auto;padding:1.5rem 2rem}
.page{animation:none}
.view-enter{animation:fade .16s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* رأس الصفحة — PageHeader: سياقٌ صغير فوق العنوان، والإجراءات في جهة النهاية */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;
  flex-wrap:wrap;margin-bottom:1rem}
.kicker{display:inline-flex;align-items:center;gap:.4rem;font-size:0.8125rem;font-weight:600;color:var(--brand-500);margin-bottom:4px}
.kicker:not(:empty)::before{content:'';width:.875rem;height:3px;border-radius:2px;background:var(--brand-grad)}
.page-head h1{font-size:1.5rem;font-weight:600}
.sub{font-size:0.875rem;color:var(--ink-2);line-height:1.6;margin-top:4px;max-width:76ch}
.muted{color:var(--ink-2)}
.mono{font-family:var(--font-mono);font-size:0.8125rem;font-variant-numeric:tabular-nums}
.good{color:var(--ok)} .bad{color:var(--bad)}

/* ===== ٤ · العلامة ===== */
.brand{display:flex;align-items:center;gap:0.5rem;color:var(--ink)}
/* شعار داتا هب: النسخة الداكنة على الفاتح، والبيضاء على الداكن */
.logo{height:1.75rem;width:auto;display:block}
.logo-d{display:none}
:root[data-theme="dark"] .logo-l{display:none}
:root[data-theme="dark"] .logo-d{display:block}

/* ===== ٥ · القائمة الجانبيّة — NavList ===== */
.sidebar[hidden]{display:none}   /* [hidden] وحده يخسر أمام display:flex */
.sidebar{position:fixed;inset-block:var(--tb-h,4rem) 0;inset-inline-start:0;width:var(--sb-w);z-index:40;
  background:var(--card);border-inline-end:1px solid var(--border);
  display:flex;flex-direction:column;padding:0.75rem 0.5rem}
.sb-sec{font-size:0.75rem;font-weight:600;color:var(--ink-2);padding:0.375rem 0.5rem;margin-top:0.5rem}
.sb-nav{display:flex;flex-direction:column;gap:0.125rem;overflow-y:auto;flex:1;min-height:0;padding-inline:0.5rem;margin-inline:-0.5rem}
.sb-link,.sb-tool{position:relative;display:flex;align-items:center;gap:0.5rem;min-height:2rem;padding:0.375rem 0.5rem;
  border-radius:6px;color:var(--ink);font-size:0.875rem;font-weight:400;line-height:1.43;
  transition:background-color var(--dur) var(--ease);width:100%;text-align:start}
.sb-link .ic,.sb-tool .ic{width:1rem;height:1rem;flex:none;color:var(--ink-2)}
.sb-link:hover,.sb-tool:hover{background:var(--nav-hover)}
.sb-link.active{background:var(--brand-50);color:var(--brand-600);font-weight:600}
.sb-link.active .ic{color:var(--brand-500)}
/* علامة الصفحة الحاليّة: شريطٌ أزرق في الحافّة كما في GitHub */
.sb-link.active::after{content:'';position:absolute;inset-inline-start:-0.5rem;inset-block-start:calc(50% - 12px);
  width:4px;height:24px;border-radius:6px;background:var(--brand-500)}

.avatar{width:2rem;height:2rem;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:0.8125rem;font-weight:600;color:#fff;background:var(--brand-grad);
  box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--brand-200)}

.sb-mtoggle{display:none;position:fixed;z-index:60;
  width:2rem;height:2rem;border-radius:6px;background:var(--btn-bg);border:1px solid var(--btn-border);
  align-items:center;justify-content:center;color:var(--ink-2)}
.sb-mtoggle .ic{width:1rem;height:1rem}
.sb-scrim{display:none;position:fixed;inset:0;z-index:35;background:var(--overlay)}

/* ===== ٦ · الأزرار — Button ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  height:2rem;padding:0 0.75rem;border-radius:6px;font-size:0.875rem;font-weight:500;line-height:1.43;
  background:var(--btn-bg);color:var(--ink);border:1px solid var(--btn-border);box-shadow:var(--btn-shadow);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease);white-space:nowrap;
  text-decoration:none;user-select:none}
.btn:hover{background:var(--btn-hover);border-color:var(--btn-border)}
.btn:active{background:var(--btn-active)}
.btn .ic{width:1rem;height:1rem;color:var(--ink-2)}
.btn-sm{height:1.75rem;padding:0 0.5rem;font-size:0.8125rem;gap:0.25rem}
.btn-sm .ic{width:1rem;height:1rem}
.btn-primary{background:var(--btn-pri);color:#fff;border-color:var(--btn-pri-border);box-shadow:var(--btn-pri-shadow)}
.btn-primary:hover{background:var(--btn-pri-hover);border-color:var(--btn-pri-border)}
.btn-primary:active{background:var(--btn-pri-active)}
.btn-primary .ic{color:inherit}
.btn-ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink)}
.btn-ghost:hover{background:var(--nav-hover);border-color:transparent}
.btn-ghost:active{background:var(--nav-on)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* قطعة اختيار — SegmentedControl */
.seg{display:inline-flex;gap:0;padding:0;background:var(--seg-track);border-radius:6px;flex-wrap:wrap}
.seg button{min-height:2rem;padding:0 0.75rem;border-radius:6px;border:1px solid transparent;
  font-size:0.875rem;font-weight:400;color:var(--ink);transition:background-color var(--dur) var(--ease)}
.seg button:hover{background:var(--nav-hover)}
.seg button.active{background:var(--card);border-color:var(--seg-knob);font-weight:600}

/* ===== ٧ · الصناديق — Box ===== */
.card{background:var(--card);border:1px solid var(--border);border-radius:6px}
.card-pad{padding:1rem}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:0.75rem;flex-wrap:wrap;
  padding:1rem;border-bottom:1px solid var(--border)}
/* رأس الصندوق في أعلاه رماديٌّ كـ Box-header */
.card>.card-head:first-child{background:var(--hover);border-radius:5px 5px 0 0}
.card-head h3{font-size:0.875rem;font-weight:600}
.card-head .muted{font-size:0.75rem}
.card-pad>.card-head{padding:0 0 0.75rem;margin-bottom:0.75rem;background:none}

/* ===== ٨ · الحقول — TextInput ===== */
.fld{display:block;margin-bottom:1rem}
.fld span{display:block;font-size:0.875rem;font-weight:600;color:var(--ink);margin-bottom:0.25rem}
.fld input,.fld select,.fld textarea,.rj-select,input[type="text"],input[type="email"],input[type="password"]{
  width:100%;min-height:2rem;padding:0.3125rem 0.75rem;background:var(--input-bg);border:1px solid var(--border);
  border-radius:6px;font-size:0.875rem;line-height:1.43;color:var(--ink);box-shadow:var(--input-shadow);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.rj-select{width:auto;min-width:150px;background-color:var(--input-bg)}
select.rj-select{padding-inline-end:2rem;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%2359636E'%3E%3Cpath d='m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 8px center}
.fld input:focus,.fld select:focus,.fld textarea:focus,.rj-select:focus,
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus{
  outline:none;border-color:var(--focus);box-shadow:inset 0 0 0 1px var(--focus)}
::placeholder{color:var(--ink-3)}

/* ===== ٩ · الجداول — DataTable ===== */
.table-wrap{overflow:auto;border-radius:0 0 6px 6px}
.card>.table-wrap:first-child{border-radius:6px}
.wk-table{width:100%;font-size:0.875rem}
.wk-table thead th{position:sticky;inset-block-start:0;z-index:1;
  background:var(--hover);color:var(--ink-2);font-size:0.75rem;font-weight:600;
  text-align:start;padding:0.5rem 0.75rem;white-space:nowrap;border-bottom:1px solid var(--border)}
.wk-table td{padding:0.5rem 0.75rem;border-top:1px solid var(--border);vertical-align:top;line-height:1.6}
.wk-table tbody tr:first-child td{border-top:0}
.wk-table tbody tr{transition:background-color var(--dur) var(--ease)}
.wk-table tbody tr:hover{background:var(--hover)}
.wk-table b{font-weight:600}
.dm-empty{padding:2rem 1.25rem;text-align:center;color:var(--ink-2);font-size:0.875rem}

/* ===== ١٠ · الشارات — Label ===== */
.pill{display:inline-flex;align-items:center;gap:0.25rem;padding:0 0.4375rem;border-radius:2em;
  font-size:0.75rem;font-weight:500;line-height:1.125rem;background:transparent;color:var(--ink-2);
  border:1px solid var(--border);white-space:nowrap}
.pill.g{border-color:var(--ok);color:var(--ok)}
.pill.w{border-color:var(--mt);color:var(--warn)}
.pill.r{border-color:var(--dn);color:var(--bad)}
.pill.b{border-color:var(--brand-500);color:var(--brand-500)}
.badge{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;border-radius:6px;
  font-size:0.875rem;font-weight:500;background:var(--hover);color:var(--ink-2);border:1px solid var(--border)}
.badge.alert{background:var(--bad-bg);color:var(--ink);border-color:var(--bad-line)}
.badge.alert .ic{color:var(--bad)}
.badge .ic{width:1rem;height:1rem}

/* ===== ١١ · النوافذ — Dialog ===== */
.modal-ov{position:fixed;inset:0;z-index:80;background:var(--overlay);
  display:grid;place-items:center;padding:1.25rem;animation:fade .2s var(--ease)}
.modal{background:var(--card);border-radius:12px;
  box-shadow:var(--sh-xl);padding:1rem;width:min(42rem,100%);max-height:88vh;overflow:auto;
  animation:pop .2s var(--ease)}
@keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.modal h3{font-size:0.875rem;font-weight:600;padding-bottom:0.75rem;margin:-0.125rem 0 0.75rem;border-bottom:1px solid var(--border)}
.modal-foot{display:flex;gap:0.5rem;justify-content:flex-start;flex-wrap:wrap;
  margin:1rem -1rem -1rem;padding:1rem;border-top:1px solid var(--border)}
.modal-err{background:var(--bad-bg);color:var(--ink);border:1px solid var(--bad-line);
  border-radius:6px;padding:0.5rem 0.75rem;font-size:0.8125rem;margin-bottom:0.75rem}

/* ===== ١٢ · الإشعارات ===== */
.toast-host{position:fixed;inset-block-end:24px;inset-inline:0;z-index:90;
  display:flex;flex-direction:column;align-items:center;gap:0.5rem;pointer-events:none}
.toast{background:var(--emph);color:#fff;padding:0.75rem 1rem;border-radius:6px;
  font-size:0.875rem;font-weight:500;box-shadow:var(--sh-lg);transition:opacity .3s var(--ease);
  animation:toastIn .2s var(--ease);max-width:min(560px,92vw);text-align:center}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===== ١٣ · صفحة الدخول — كصفحة الدخول في GitHub: عمودٌ ضيّق في الوسط ===== */
.auth-wrap{min-height:100vh;display:flex;justify-content:center;padding:2.5rem 1rem;background:var(--bg)}
.auth-col{width:100%;max-width:21.25rem;margin-inline:auto;display:flex;flex-direction:column;align-items:stretch}
.auth-logo{display:flex;justify-content:center;margin-bottom:1.5rem}
.auth-logo .logo{height:3rem}
.auth-title{font-size:1.5rem;font-weight:300;text-align:center;margin-bottom:0.25rem}
.auth-tag{font-size:0.875rem;color:var(--ink-2);text-align:center;margin-bottom:1rem}
.auth-box{background:var(--hover);border:1px solid var(--border);border-radius:6px;padding:1rem}
.auth-box .fld{margin-bottom:1rem}
.auth-box .btn{width:100%}
.auth-sep{font-size:0.75rem;color:var(--ink-2);text-align:center;margin:0.75rem 0}
.auth-note{margin-top:1rem;padding:1rem;border:1px solid var(--border);border-radius:6px;
  font-size:0.875rem;text-align:center;color:var(--ink-2)}

/* ===== ١٤ · الأيقونات — Octicons ===== */
.ic{width:1rem;height:1rem;flex:none;fill:currentColor;vertical-align:text-bottom}

/* ===== ١٥ · الشاشات الصغيرة ===== */
@media(max-width:860px){
  html.has-sb .app-root{padding-inline-start:0}
  /* القائمة في جهتها الطبيعيّة (اليمين في العربيّة) وتُزاح خارج الشاشة إلى اليمين. */
  .sidebar{inset-inline-start:0;inset-inline-end:auto;transform:translateX(100%);transition:transform .2s var(--ease);box-shadow:var(--sh-lg)}
  [dir="ltr"] .sidebar{transform:translateX(-100%)}
  html.sb-open .sidebar{transform:none}
  html.sb-open .sb-scrim{display:block}
  .sb-mtoggle{display:flex;inset-block-start:1rem;inset-inline-start:1rem;inset-inline-end:auto}
  .container{padding:1rem}
  .page-head h1{font-size:1.25rem}
  .modal{border-radius:12px}
}