/* ═══════════════════════════════════════════════════════════════
   مرصد البورصة — نظام التصميم المشترك
   الصفحات التلاتة بتستورد الملف ده. أي تغيير في الألوان أو
   الشكل العام يتعمل هنا مرة واحدة، مش في كل صفحة.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* خلفية فاتحة: الأبيض للأسطح، ورمادي فاتح للخلفية عشان الكروت
     تبان مرفوعة عنها من غير حدود تقيلة */
  --bg:#f4f6f9; --surface:#ffffff; --surface-2:#fafbfc;
  --line:#e5e8ed; --line-2:#eef0f4;
  --ink:#111318; --ink-2:#4a5160; --ink-3:#858d9c;

  /* الأخضر والأحمر مختارين يعدّوا تباين AA على الأبيض — ألوان
     الشاشة الغامقة القديمة كانت بتغيب على الخلفية الفاتحة */
  --up:#0a8f52; --up-bg:#e7f6ee;
  --down:#cf2d20; --down-bg:#fdeceb;
  --gold:#9a7016; --gold-bg:#fdf4e1; --gold-line:#e8d5a8;
  --blue:#1a56c4; --blue-bg:#eaf0fd;
  --amber:#b06f0a; --amber-bg:#fdf0dc;

  --mono:'JetBrains Mono',ui-monospace,monospace;
  --body:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --display:'Alexandria',var(--body);

  --sh-1:0 1px 2px rgba(16,24,40,.05);
  --sh-2:0 2px 8px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --sh-3:0 8px 28px rgba(16,24,40,.09), 0 2px 6px rgba(16,24,40,.04);
  --r:14px;
  --nav-w:212px;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg); color:var(--ink); font-family:var(--body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
button{font-family:inherit; cursor:pointer; border:none; background:none;
  color:inherit}
a{color:inherit; text-decoration:none}
.up{color:var(--up)} .down{color:var(--down)}
.mono{font-family:var(--mono)}

/* ── الهيكل ─────────────────────────────────────────────────── */
.shell{display:grid; min-height:100vh;
  grid-template-columns:var(--nav-w) minmax(0,1fr);
  grid-template-areas:"nav main"}
.shell.with-list{grid-template-columns:var(--nav-w) minmax(0,1fr) var(--list-w,300px);
  grid-template-areas:"nav main list"}

/* ── القائمة الجانبية (يمين في العربي) ── */
.nav{grid-area:nav; background:var(--surface);
  border-inline-start:1px solid var(--line);
  padding:1.5rem 1rem; position:sticky; top:0; height:100vh; overflow-y:auto;
  display:flex; flex-direction:column; gap:1.5rem}
.brand{display:flex; align-items:center; gap:.6rem; padding:0 .35rem}
.brand-mark{width:34px; height:34px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(140deg,var(--gold),#c9a24a);
  display:grid; place-items:center; color:#fff; font-weight:700;
  font-family:var(--display); font-size:.95rem; box-shadow:var(--sh-2)}
.brand-t{font-family:var(--display); font-weight:600; font-size:.95rem;
  line-height:1.25}
.brand-s{font-size:.66rem; color:var(--ink-3); margin-top:.1rem}

.search{position:relative}
.search input{width:100%; padding:.62rem .8rem .62rem 2.1rem; border-radius:10px;
  background:var(--bg); border:1px solid var(--line); font-family:var(--body);
  font-size:.85rem; color:var(--ink); outline:none; transition:.15s}
.search input:focus{border-color:var(--gold); background:var(--surface);
  box-shadow:0 0 0 3px var(--gold-bg)}
.search svg{position:absolute; inset-inline-start:.7rem; top:50%;
  transform:translateY(-50%); color:var(--ink-3); pointer-events:none}

.navlinks{display:flex; flex-direction:column; gap:.15rem}
.navlinks a{display:flex; align-items:center; gap:.6rem; padding:.6rem .7rem;
  border-radius:9px; font-size:.86rem; color:var(--ink-2); transition:.15s}
.navlinks a:hover{background:var(--bg); color:var(--ink)}
.navlinks a.on{background:var(--gold-bg); color:var(--gold); font-weight:600}
.navlinks svg{flex-shrink:0; opacity:.85}

.navsec{font-size:.63rem; letter-spacing:.14em; color:var(--ink-3);
  font-weight:600; padding:0 .7rem; margin-bottom:.4rem}
.langbar{display:flex; gap:.3rem; background:var(--bg); padding:.25rem;
  border-radius:9px}
.langbar button{flex:1; padding:.38rem; border-radius:7px; font-size:.78rem;
  color:var(--ink-2); transition:.15s}
.langbar button.on{background:var(--surface); color:var(--ink); font-weight:600;
  box-shadow:var(--sh-1)}
.nav-foot{margin-top:auto; font-size:.66rem; color:var(--ink-3);
  line-height:1.6; padding:0 .35rem}

/* ── المنطقة الوسطى ── */
.main{grid-area:main; padding:1.5rem; display:flex; flex-direction:column;
  gap:1.1rem; min-width:0}
.page-h{display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem; flex-wrap:wrap}
.page-t{font-family:var(--display); font-size:1.5rem; font-weight:600;
  letter-spacing:-.01em}
.page-s{font-size:.82rem; color:var(--ink-3); margin-top:.3rem;
  line-height:1.6; max-width:62ch}

/* ── الكروت العامة ── */
.card{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--sh-1); padding:1.1rem 1.2rem}
.card h3{font-size:.78rem; font-weight:600; color:var(--ink-3);
  margin-bottom:.9rem; display:flex; align-items:center; gap:.4rem}

.sumrow{display:grid; gap:.8rem;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.sum{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:.95rem 1.05rem; box-shadow:var(--sh-1)}
.sum-l{font-size:.7rem; color:var(--ink-3); display:flex; align-items:center;
  gap:.35rem}
.sum-v{font-family:var(--mono); font-size:1.5rem; font-weight:700;
  margin-top:.35rem; letter-spacing:-.02em; line-height:1}
.sum-s{font-size:.68rem; color:var(--ink-3); margin-top:.35rem}
.dot{width:7px; height:7px; border-radius:50%; display:inline-block;
  flex-shrink:0}
.dot.live{background:var(--up); box-shadow:0 0 0 3px var(--up-bg)}
.dot.off{background:var(--gold); box-shadow:0 0 0 3px var(--gold-bg)}
.bar2{display:flex; height:5px; border-radius:3px; overflow:hidden;
  margin-top:.55rem; background:var(--line-2)}

/* ── العناصر الصغيرة ── */
.tag{font-size:.63rem; padding:.18rem .45rem; border-radius:5px;
  font-weight:600; white-space:nowrap; display:inline-block}
.tag.gold{background:var(--gold-bg); color:var(--gold)}
.tag.up{background:var(--up-bg); color:var(--up)}
.tag.down{background:var(--down-bg); color:var(--down)}
.tag.flat{background:var(--line-2); color:var(--ink-2)}
.tag.blue{background:var(--blue-bg); color:var(--blue)}
.tag.amber{background:var(--amber-bg); color:var(--amber)}
.pill{font-size:.62rem; padding:.1rem .4rem; border-radius:4px;
  background:var(--line-2); color:var(--ink-2)}
.pill.hi{background:var(--down-bg); color:var(--down)}
.px-tag{font-family:var(--mono); font-size:.56rem; letter-spacing:.06em;
  color:var(--gold); background:var(--gold-bg); border:1px solid var(--gold-line);
  padding:.12rem .34rem; border-radius:4px; align-self:center;
  white-space:nowrap}

.kv{display:flex; justify-content:space-between; align-items:baseline;
  padding:.42rem 0; border-bottom:1px dashed var(--line-2); gap:1rem;
  font-size:.82rem}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--ink-2)}
.kv .v{font-family:var(--mono); font-weight:600; text-align:end}

.keys{display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr));
  gap:.55rem}
.key{background:var(--bg); border-radius:10px; padding:.6rem .7rem}
.key .l{font-size:.63rem; color:var(--ink-3)}
.key .v{font-family:var(--mono); font-size:.98rem; font-weight:700;
  margin-top:.2rem}

.verdict{padding:.7rem .85rem; border-radius:10px; font-size:.78rem;
  line-height:1.6; margin-top:.75rem}
.verdict.good{background:var(--up-bg); color:#08663b}
.verdict.warn{background:var(--gold-bg); color:#7a5810}
.verdict.bad{background:var(--down-bg); color:#a32016}

.hint{font-size:.72rem; color:var(--ink-3); line-height:1.65;
  margin-top:.7rem}

/* ── الأدوات (بحث وفرز) ── */
.tools{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center}
.tools select,.tools input{padding:.5rem .75rem; border-radius:9px;
  background:var(--surface); border:1px solid var(--line);
  font-family:var(--body); font-size:.8rem; color:var(--ink-2);
  outline:none; cursor:pointer}
.tools input{cursor:text; flex:1; min-width:180px}
.tools select:focus,.tools input:focus{border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gold-bg)}
.cnt{font-family:var(--mono); font-size:.75rem; color:var(--ink-3);
  margin-inline-start:auto}

/* ── شبكة الكروت ── */
.grid{display:grid; gap:.9rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.loading{padding:4rem 1rem; text-align:center; color:var(--ink-3);
  font-family:var(--mono); font-size:.85rem; grid-column:1/-1}

/* ── اللوحة الجانبية (تفاصيل السهم) ── */
.scrim{display:none; position:fixed; inset:0; background:rgba(16,24,40,.35);
  z-index:110}
.scrim.on{display:block}
.panel{position:fixed; top:0; height:100vh; z-index:130;
  width:min(94vw,620px); background:var(--surface);
  inset-inline-start:0; transform:translateX(-102%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y:auto; box-shadow:var(--sh-3);
  border-inline-end:1px solid var(--line)}
html[dir=rtl] .panel{transform:translateX(102%)}
.panel.on,
html[dir=rtl] .panel.on,
html[dir=ltr] .panel.on{transform:translateX(0)}
.p-in{padding:1.6rem 1.5rem 4rem}
.p-close{position:sticky; top:0; float:inline-end; width:34px; height:34px;
  border-radius:9px; background:var(--bg); border:1px solid var(--line);
  color:var(--ink-2); font-size:.9rem; z-index:2}
.p-close:hover{background:var(--line-2)}
.sec{margin-top:1.6rem; padding-top:1.3rem; border-top:1px solid var(--line-2)}
.sec > h3{font-size:.86rem; font-weight:600; color:var(--ink);
  margin-bottom:.9rem}
body.locked{overflow:hidden}

/* ── شريط الموبايل ── */
.mobar{display:none; position:sticky; top:0; z-index:100;
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:.6rem .8rem; align-items:center; gap:.6rem}
.mobtn{padding:.45rem .7rem; border-radius:9px; background:var(--bg);
  border:1px solid var(--line); font-size:.76rem; display:flex;
  align-items:center; gap:.35rem}
.mo-t{flex:1; text-align:center; font-weight:600; font-size:.85rem}

@media(max-width:1180px){ :root{--nav-w:190px} }
@media(max-width:980px){
  .shell,.shell.with-list{grid-template-columns:1fr;
    grid-template-areas:"main"}
  .mobar{display:flex}
  .nav{position:fixed; top:0; height:100vh; z-index:120;
    width:min(84vw,300px); transition:transform .25s ease;
    box-shadow:var(--sh-3); inset-inline-end:0; transform:translateX(100%)}
  html[dir=rtl] .nav{transform:translateX(-100%)}
  /* حالة الفتح مكتوبة لكل اتجاه لوحده وبنفس درجة تحديد قاعدة
     الإغلاق. الاعتماد على !important لوحده مابيشتغلش هنا لأن
     قاعدة [dir=rtl] بتكسبه في الترتيب. */
  .nav.open,
  html[dir=rtl] .nav.open,
  html[dir=ltr] .nav.open{transform:translateX(0)}
  .main{padding:1rem}
  .p-in{padding:1.2rem 1.1rem 3.5rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}