/* =========================================================
   أفق السداد · مركز السيو
   لوحة تحكم بهوية "مستند رسمي مختوم" — حبر كحلي + نحاس
   ========================================================= */

:root{
  --ink:        #0D131F;   /* حبر الخلفية */
  --ink-2:      #141D2C;   /* لوح */
  --ink-3:      #1B2637;   /* لوح مرتفع */
  --rule:       #26344A;   /* خط شعرة */
  --rule-soft:  #1D283A;
  --brass:      #D8A22B;   /* نحاس الختم — لون التوقيع */
  --brass-dim:  #8C6A1E;
  --jade:       #35B79C;   /* نجاح */
  --coral:      #E2604C;   /* خطر */
  --slate:      #8A99B0;   /* نص ثانوي */
  --paper:      #E9EDF4;   /* نص أساسي */

  --f-display: "Tajawal", system-ui, sans-serif;
  --f-body:    "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --r: 10px;
  --pad: 16px;
}

*{ box-sizing:border-box; }

/* لازم تسبق أي display في الكلاسات، وإلا تظهر العناصر المخفية */
[hidden]{ display:none !important; }

html,body{ margin:0; padding:0; }

body{
  background:
    /* شبكة مخطط هندسي خفيفة — تشير لعالم المستندات الرسمية */
    linear-gradient(var(--rule-soft) 1px, transparent 1px) 0 0/100% 44px,
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px) 0 0/44px 100%,
    radial-gradient(120% 70% at 50% 0%, #17223300 0%, #0A0F19 100%),
    var(--ink);
  background-blend-mode: overlay, overlay, normal, normal;
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.num{ font-family: var(--f-mono); font-variant-numeric: tabular-nums; direction:ltr; unicode-bidi:isolate; }
.muted{ color: var(--slate); }
.sm{ font-size: 12.5px; }
.err{ color: var(--coral); font-size: 13px; }
.empty{ color: var(--slate); font-size: 13.5px; padding: 18px 4px; }

/* ---------- الختم: العنصر المميّز ---------- */
.seal{
  display:grid; place-items:center;
  border-radius: 50%;
  border: 2px solid var(--brass);
  color: var(--brass);
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.05;
  text-align:center;
  position: relative;
  background: radial-gradient(circle at 30% 25%, #D8A22B14, transparent 60%);
}
.seal::after{
  content:""; position:absolute; inset:5px;
  border-radius:50%; border:1px dashed color-mix(in srgb, var(--brass) 45%, transparent);
}
.seal-xs{ width:40px; height:40px; font-size:10px; border-width:1.5px; }
.seal-sm{ width:64px; height:64px; font-size:14px; }
.seal-lg{ width:118px; height:118px; font-size:19px; border-width:3px; }

.stamp{
  animation: stampIn .5s cubic-bezier(.2,1.4,.4,1) both;
  transform-origin: center;
}
@keyframes stampIn{
  0%{ transform: scale(1.9) rotate(-14deg); opacity:0; }
  60%{ transform: scale(.94) rotate(-6deg); opacity:1; }
  100%{ transform: scale(1) rotate(-6deg); opacity:1; }
}
.stamp.fail{ border-color: var(--coral); color: var(--coral); }
.stamp.fail::after{ border-color: color-mix(in srgb, var(--coral) 45%, transparent); }

/* ---------- بوابة الرمز ---------- */
.gate{ min-height:100dvh; display:grid; place-items:center; padding:24px; }
.gate-card{
  width:min(360px,100%); background:var(--ink-2); border:1px solid var(--rule);
  border-radius:var(--r); padding:28px 22px; text-align:center;
}
.gate-card h1{ font-family:var(--f-display); font-size:22px; margin:14px 0 4px; }
.gate-card .seal{ margin-inline:auto; }
.gate-card input{ width:100%; margin:14px 0 10px; }

input, select{
  background:var(--ink); border:1px solid var(--rule); color:var(--paper);
  border-radius:8px; padding:11px 12px; font-family:var(--f-body); font-size:14px;
  width:100%;
}
input:focus-visible, select:focus-visible, button:focus-visible, .tab:focus-visible{
  outline:2px solid var(--brass); outline-offset:2px;
}

/* ---------- الأزرار ---------- */
.btn{
  font-family:var(--f-display); font-weight:700; font-size:14px;
  border-radius:8px; padding:10px 16px; cursor:pointer; border:1px solid transparent;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn-primary{ background:var(--brass); color:#17120A; }
.btn-primary:hover{ background:#EBB43A; }
.btn-ghost{ background:transparent; border-color:var(--rule); color:var(--slate); }
.btn-ghost:hover{ border-color:var(--brass-dim); color:var(--paper); }
.btn-danger{ background:transparent; border-color:color-mix(in srgb,var(--coral) 50%,transparent); color:var(--coral); }
.btn-danger:hover{ background:color-mix(in srgb,var(--coral) 14%,transparent); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

/* ---------- الهيكل ---------- */
.app{ max-width:1180px; margin-inline:auto; padding:0 14px 60px; }

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 2px; border-bottom:1px solid var(--rule);
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--ink) 82%, transparent);
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand-name{ font-family:var(--f-display); font-weight:800; font-size:16px; }
.brand-site{ font-family:var(--f-mono); font-size:11.5px; color:var(--slate); text-decoration:none; direction:ltr; display:block; }
.brand-site:hover{ color:var(--brass); }
.topbar-right{ display:flex; align-items:center; gap:10px; }

.dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.dot-on{ background:var(--jade); box-shadow:0 0 0 4px color-mix(in srgb,var(--jade) 18%,transparent); }
.dot-off{ background:var(--coral); }

/* ---------- شريط الفحص ---------- */
.doctor{
  margin-top:12px; border:1px solid var(--rule); border-radius:var(--r);
  background:var(--ink-2); padding:12px 14px;
  display:grid; gap:8px;
}
.doctor-row{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; }
.doctor-row b{ font-family:var(--f-display); font-weight:700; min-width:110px; }
.doctor-row span{ color:var(--slate); font-family:var(--f-mono); font-size:11.5px; direction:ltr; unicode-bidi:plaintext; word-break:break-word; flex:1; }
.chk{ width:16px; height:16px; border-radius:4px; flex:none; margin-top:4px; display:grid; place-items:center; font-size:10px; font-weight:700; }
.chk-ok{ background:color-mix(in srgb,var(--jade) 20%,transparent); color:var(--jade); }
.chk-no{ background:color-mix(in srgb,var(--coral) 20%,transparent); color:var(--coral); }

/* ---------- التبويبات ---------- */
.tabs{ display:flex; gap:2px; margin:16px 0 4px; border-bottom:1px solid var(--rule); }
.tab{
  background:none; border:none; border-bottom:2px solid transparent;
  color:var(--slate); font-family:var(--f-display); font-weight:700; font-size:14px;
  padding:10px 14px; cursor:pointer;
}
.tab-on{ color:var(--brass); border-bottom-color:var(--brass); }

.panel{ padding-top:18px; }

.eyebrow{
  font-family:var(--f-display); font-weight:700; font-size:11.5px;
  letter-spacing:.09em; color:var(--brass-dim); text-transform:uppercase;
  margin:0 0 10px;
}

/* ---------- بطاقات الخطط ---------- */
.preset-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:10px; }
.preset{
  text-align:right; background:var(--ink-2); border:1px solid var(--rule);
  border-radius:var(--r); padding:14px; cursor:pointer;
  transition:border-color .15s, transform .12s, background .15s;
  display:flex; flex-direction:column; gap:5px; color:inherit; font:inherit;
}
.preset:hover{ border-color:var(--brass-dim); background:var(--ink-3); }
.preset:active{ transform:scale(.985); }
.preset-t{ font-family:var(--f-display); font-weight:700; font-size:15.5px; }
.preset-s{ font-size:12.5px; color:var(--slate); line-height:1.5; }
.preset-m{ display:flex; gap:8px; margin-top:6px; font-size:11px; color:var(--brass-dim); font-family:var(--f-mono); justify-content:flex-start; }

.custom{ margin-top:16px; border:1px solid var(--rule-soft); border-radius:var(--r); padding:10px 14px; background:var(--ink-2); }
.custom summary{ cursor:pointer; font-family:var(--f-display); font-weight:700; font-size:13.5px; color:var(--slate); }
.custom-body{ display:flex; gap:8px; margin:12px 0 4px; }
.custom-body input{ font-family:var(--f-mono); font-size:12.5px; direction:ltr; text-align:left; }

/* ---------- التشغيل الحيّ ---------- */
.live{ margin-top:8px; }
.live-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.cmd{ font-family:var(--f-mono); font-size:12.5px; color:var(--paper); direction:ltr; display:block; word-break:break-all; }

.meter-track{ height:5px; background:var(--rule-soft); border-radius:99px; overflow:hidden; }
.meter-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--brass-dim),var(--brass));
  transition:width .6s cubic-bezier(.4,0,.2,1);
}
.meter-meta{ display:flex; justify-content:space-between; font-size:12px; margin-top:6px; }

.stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--rule-soft);
  border:1px solid var(--rule-soft); border-radius:var(--r); overflow:hidden; margin:16px 0; }
.stat{ background:var(--ink-2); padding:12px 6px; text-align:center; }
.stat-n{ display:block; font-size:19px; font-weight:500; color:var(--paper); }
.stat-l{ display:block; font-size:10.5px; color:var(--slate); margin-top:2px; }

.live-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.col{ min-width:0; }

/* لوح الوكلاء */
.agent-board{ display:grid; gap:8px; }
.agent{
  border:1px solid var(--rule); border-radius:9px; background:var(--ink-2);
  padding:11px 12px; display:grid; gap:4px;
  position:relative; overflow:hidden;
}
.agent::before{
  content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px;
  background:var(--rule);
}
.agent-run::before{ background:var(--brass); }
.agent-done::before{ background:var(--jade); }
.agent-failed::before{ background:var(--coral); }
.agent-run{ animation:breathe 2.4s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ border-color:var(--rule);} 50%{ border-color:var(--brass-dim);} }

.agent-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.agent-name{ font-family:var(--f-display); font-weight:700; font-size:14px; }
.agent-time{ font-family:var(--f-mono); font-size:11px; color:var(--slate); unicode-bidi:plaintext; }
.agent-desc{ font-size:12px; color:var(--slate); line-height:1.5; }
.agent-foot{ font-family:var(--f-mono); font-size:10.5px; color:var(--brass-dim); unicode-bidi:plaintext; }

/* المجرى */
.stream{
  max-height:460px; overflow-y:auto; border:1px solid var(--rule-soft);
  border-radius:9px; background:#0A0F19; padding:10px;
  display:flex; flex-direction:column; gap:7px;
  scrollbar-width:thin; scrollbar-color:var(--rule) transparent;
}
.ev{ display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:baseline; font-size:12.5px; }
.ev-t{ font-family:var(--f-mono); font-size:10px; color:#4C5B72; direction:ltr; }
.ev-b{ min-width:0; }
.ev-tag{
  font-family:var(--f-display); font-weight:700; font-size:11px;
  padding:1px 6px; border-radius:4px; margin-inline-end:6px;
  background:var(--rule-soft); color:var(--slate);
}
.ev-tool .ev-tag{ background:color-mix(in srgb,var(--brass) 16%,transparent); color:var(--brass); }
.ev-agent .ev-tag{ background:color-mix(in srgb,var(--jade) 16%,transparent); color:var(--jade); }
.ev-err .ev-tag{ background:color-mix(in srgb,var(--coral) 16%,transparent); color:var(--coral); }
.ev-file .ev-tag{ background:color-mix(in srgb,var(--brass) 26%,transparent); color:#F0C860; }
.ev-txt{ color:var(--slate); word-break:break-word; }
.ev-mono{ font-family:var(--f-mono); font-size:11px; direction:ltr; unicode-bidi:plaintext; display:inline-block; }
.ev-think .ev-txt{ color:#A9B7CC; }

.stamp-wrap{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:34px 0 10px; text-align:center; }

/* ---------- التقارير ---------- */
.reports-layout{ display:grid; grid-template-columns:270px 1fr; gap:16px; align-items:start; }
.pick{ margin-bottom:10px; font-size:12.5px; }
.file-list{ display:grid; gap:5px; }
.file-item{
  text-align:right; background:var(--ink-2); border:1px solid var(--rule-soft);
  border-radius:8px; padding:9px 11px; cursor:pointer; color:inherit; font:inherit;
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.file-item:hover{ border-color:var(--brass-dim); }
.file-item.on{ border-color:var(--brass); background:var(--ink-3); }
.file-name{ font-family:var(--f-mono); font-size:11.5px; direction:ltr; text-align:left; word-break:break-all; }
.file-ext{ font-size:10px; font-family:var(--f-display); font-weight:700; color:var(--brass-dim); }

.report-view{
  background:var(--ink-2); border:1px solid var(--rule); border-radius:var(--r);
  padding:22px 24px; min-height:340px; max-height:76vh; overflow-y:auto;
}
.report-view h1,.report-view h2,.report-view h3{ font-family:var(--f-display); line-height:1.4; }
.report-view h1{ font-size:21px; border-bottom:1px solid var(--rule); padding-bottom:8px; }
.report-view h2{ font-size:17px; color:var(--brass); margin-top:26px; }
.report-view h3{ font-size:15px; margin-top:20px; }
.report-view table{ width:100%; border-collapse:collapse; margin:14px 0; font-size:13px; }
.report-view th,.report-view td{ border:1px solid var(--rule); padding:7px 9px; text-align:right; }
.report-view th{ background:var(--ink-3); font-family:var(--f-display); font-weight:700; }
.report-view code{ font-family:var(--f-mono); font-size:12px; background:#0A0F19; padding:1px 5px; border-radius:4px; direction:ltr; display:inline-block; }
.report-view pre{ background:#0A0F19; border:1px solid var(--rule-soft); border-radius:8px; padding:12px; overflow-x:auto; direction:ltr; text-align:left; }
.report-view pre code{ background:none; padding:0; }
.report-view ul,.report-view ol{ padding-inline-start:22px; }
.report-view a{ color:var(--brass); }
.report-view hr{ border:none; border-top:1px solid var(--rule); margin:22px 0; }
.report-view blockquote{ border-inline-start:3px solid var(--brass-dim); margin:14px 0; padding:2px 14px; color:var(--slate); }

.dl-row{ display:flex; justify-content:flex-end; margin-bottom:10px; }

/* ---------- السجل ---------- */
.history{ display:grid; gap:8px; }
.hrow{
  background:var(--ink-2); border:1px solid var(--rule-soft); border-radius:9px;
  padding:12px 14px; display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center;
}
.hrow-main{ min-width:0; }
.hrow-t{ font-family:var(--f-display); font-weight:700; font-size:14.5px; }
.hrow-s{ font-size:11.5px; color:var(--slate); font-family:var(--f-mono); unicode-bidi:plaintext; }
.badge{ font-family:var(--f-display); font-weight:700; font-size:11px; padding:3px 9px; border-radius:99px; }
.b-done{ background:color-mix(in srgb,var(--jade) 18%,transparent); color:var(--jade); }
.b-failed{ background:color-mix(in srgb,var(--coral) 18%,transparent); color:var(--coral); }
.b-running{ background:color-mix(in srgb,var(--brass) 18%,transparent); color:var(--brass); }
.b-cancelled{ background:var(--rule-soft); color:var(--slate); }

.foot{ margin-top:34px; padding-top:14px; border-top:1px solid var(--rule-soft); text-align:center; }

/* ---------- الجوال ---------- */
@media (max-width: 860px){
  .live-cols{ grid-template-columns:1fr; }
  .reports-layout{ grid-template-columns:1fr; }
  .report-view{ max-height:none; padding:16px; }
  .stats{ grid-template-columns:repeat(3,1fr); }
  .stat:nth-child(4),.stat:nth-child(5){ grid-column:span 1; }
  .stream{ max-height:340px; }
  body{ font-size:14.5px; }
}
@media (max-width: 420px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:last-child{ grid-column:1 / -1; }
  .preset-grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* جداول التقارير على الشاشات الضيقة */
@media (max-width: 700px){
  .report-view table{ display:block; overflow-x:auto; white-space:nowrap; }
}