/* ═══════════════════════════════════════════════════════════
   مكوّنات الصفحات الداخلية — Inner page components
   ═══════════════════════════════════════════════════════════ */

/* ── بطاقات الخدمات الإلكترونية ── */
.esv-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px}
.esv-card{
  display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center;
  padding:22px 24px; border-radius:var(--r-lg); color:inherit;
  background:var(--surface); border:1px solid var(--line);
  transition:box-shadow .26s var(--ease), transform .26s var(--ease), border-color .26s var(--ease);
}
.esv-card:hover{box-shadow:var(--shadow-2); transform:translateY(-2px); border-color:var(--brass-line)}
.esv-card.primary{background:var(--ink-solid); color:#F2F5F8; border-color:transparent}
.esv-card.primary:hover{box-shadow:var(--shadow-3)}
.esv-ic{
  width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:13px;
  background:var(--brass-soft); color:var(--brass); border:1px solid var(--brass-line);
}
.esv-card.primary .esv-ic{background:rgba(214,165,82,.18); color:var(--brass-2); border-color:rgba(214,165,82,.32)}
.esv-ic svg{width:21px; height:21px}
.esv-txt{display:flex; flex-direction:column; gap:4px; min-width:0}
.esv-txt > b{font-family:'Tajawal',system-ui,sans-serif; font-weight:800; font-size:16.5px; display:flex; align-items:center; gap:7px}
.esv-txt > span{font-size:13.5px; color:var(--ink-3); line-height:1.65}
.esv-card.primary .esv-txt > b{color:#fff}
.esv-card.primary .esv-txt > span{color:rgba(242,245,248,.62)}
.esv-txt .ext{width:12px; height:12px; opacity:.5; display:inline-grid}
.esv-txt .ext svg{width:100%; height:100%}
.esv-go{
  width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:var(--surface-2); color:var(--brass); border:1px solid var(--line);
}
.esv-card.primary .esv-go{background:rgba(242,245,248,.1); border-color:rgba(242,245,248,.18); color:var(--brass-2)}
.esv-go svg{width:15px; height:15px; transition:transform .22s var(--ease)}
[dir="rtl"] .esv-go svg{transform:scaleX(-1)}
.esv-card:hover .esv-go svg{transform:translateX(3px)}
[dir="rtl"] .esv-card:hover .esv-go svg{transform:scaleX(-1) translateX(3px)}

/* ── رئيس الجامعة ── */
.pres{display:grid; grid-template-columns:300px 1fr; gap:38px; align-items:start}
.pres-photo{border-radius:var(--r-lg); overflow:hidden; background:var(--surface-3); box-shadow:var(--shadow-2)}
.pres-photo img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:top center}
.pres-txt{display:flex; flex-direction:column; gap:14px}
.pres-txt h3{font-size:25px}
.pres-role{font-size:14px; color:var(--brass); font-weight:600; margin-top:-8px}
.pres-txt p{font-size:15.5px; line-height:1.9; color:var(--ink-2); max-width:64ch}
@media (max-width:820px){.pres{grid-template-columns:1fr; gap:24px} .pres-photo{max-width:260px}}

/* ── التحقق من الشهادة ── */
.verify-box{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; box-shadow:var(--shadow-1)}
.v-label{display:block; font-size:13.5px; font-weight:600; color:var(--ink-2); margin-bottom:9px}
.v-row{display:flex; gap:12px; flex-wrap:wrap}
.v-row .input{flex:1; min-width:220px; font-family:'IBM Plex Sans Arabic'; letter-spacing:.02em}
.v-result{margin-top:24px; padding:22px 24px; border-radius:var(--r); border:1px solid var(--line)}
.v-result.ok{background:var(--ok-soft); border-color:var(--ok)}
.v-result.bad{background:var(--flag-soft); border-color:var(--flag)}
.v-result > b{display:block; font-family:'Tajawal',system-ui,sans-serif; font-weight:800; font-size:18px; margin-bottom:12px}
.v-result.ok > b{color:var(--ok)}
.v-result.bad > b{color:var(--flag)}
.v-fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:12px}
.v-fields div{display:flex; flex-direction:column; gap:3px}
.v-fields span{font-size:11.5px; color:var(--ink-3)}
.v-fields b{font-size:15px; font-family:'Tajawal',system-ui,sans-serif; font-weight:700}
.v-result .small{color:var(--ink-3)}

/* ── خطوات مرقّمة ── */
.flow{display:grid; gap:12px}
.step{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px 24px}
.step .n{
  width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:10px;
  background:var(--brass-soft); color:var(--brass); border:1px solid var(--brass-line);
  font-family:'Tajawal',system-ui,sans-serif; font-weight:800; font-size:14px; font-variant-numeric:tabular-nums;
}
.step .n::before{content:var(--i)}
.step h4{font-size:17px; font-family:'Tajawal',system-ui,sans-serif; font-weight:800; margin-bottom:5px}
.step p{font-size:14.5px; color:var(--ink-2); line-height:1.8}
.step .hint{display:inline-block; margin-top:10px; font-size:12.5px; font-weight:600;
  color:var(--brass); background:var(--brass-soft); padding:4px 12px; border-radius:100px}

/* ══ مجموعة الفلاتر — أزرار مقسّمة ══ */
.pill-group{
  display:inline-flex; align-items:center; gap:4px; padding:5px;
  border-radius:100px; background:var(--surface-2); border:1px solid var(--line);
  max-width:100%; overflow-x:auto; scrollbar-width:none;
}
.pill-group::-webkit-scrollbar{display:none}

.pill{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:9px 20px; border-radius:100px; cursor:pointer; white-space:nowrap;
  background:transparent; border:1px solid transparent; color:var(--ink-2);
  font-family:'Tajawal',system-ui,sans-serif; font-weight:700; font-size:14.5px;
  line-height:1.6; letter-spacing:0;
  transition:background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.pill:hover{background:var(--surface); color:var(--ink)}
.pill[aria-pressed="true"]{
  background:var(--brass); color:#fff; box-shadow:0 2px 8px -2px rgba(120,82,24,.45);
}
[data-theme="dark"] .pill[aria-pressed="true"]{color:#160F04}
/* عدّاد اختياري داخل الزرّ */
.pill .n{
  font-family:'IBM Plex Sans Arabic'; font-weight:600; font-size:11.5px;
  font-variant-numeric:tabular-nums; padding:1px 7px; border-radius:100px;
  background:var(--surface-3); color:var(--ink-3);
}
.pill[aria-pressed="true"] .n{background:rgba(255,255,255,.24); color:#fff}
[data-theme="dark"] .pill[aria-pressed="true"] .n{background:rgba(22,15,4,.2); color:#160F04}

/* الصفّ الحرّ (بلا حاوية) — للفلاتر الطويلة */
.pill-row{display:flex; gap:8px; flex-wrap:wrap}
.pill-row .pill{border-color:var(--line-2); background:var(--surface)}
.pill-row .pill:hover{border-color:var(--brass); color:var(--brass)}
.pill-row .pill[aria-pressed="true"]{border-color:var(--brass); background:var(--brass); color:#fff}
[data-theme="dark"] .pill-row .pill[aria-pressed="true"]{color:#160F04}

/* ── بطاقة خبر قابلة للضغط ── */
.news{cursor:pointer; text-align:start; width:100%; padding:0; font:inherit}
.news:hover{border-color:var(--brass-line)}

/* ── لوحة الخبر داخل الشيت ── */
.news-sheet-img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}

/* article/news lead image as a content card (added 2026-08-11) */
.art-figure{margin:0 0 30px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--surface-2)}
.art-figure img{display:block; width:100%; height:auto}

/* ─────────────────────────────────────────────────────────────
   Department page (site.department) — added 2026-09-09
   Composed body + top-down org chart, fully RTL-safe (logical props)
   ───────────────────────────────────────────────────────────── */
.dept-figure{margin-bottom:34px}

/* mini section header inside the department body */
.dept-head{display:flex; flex-direction:column; gap:12px; margin:52px 0 20px}
.dept-head + .dept-head{margin-top:0}
.dept-head .h-md{margin:0}

/* Vision / Mission / Message — structured accent cards */
.dept-vmm{display:grid; gap:16px; margin-top:20px}
.dept-vmm .vmm{
  position:relative; background:var(--surface);
  border:1px solid var(--line); border-inline-start:3px solid var(--brass);
  border-radius:var(--r); padding:22px 26px; box-shadow:var(--shadow-1)}
.dept-vmm .vmm h3{font-size:19px; color:var(--ink); margin:0 0 8px}
.dept-vmm .vmm p{margin:0; color:var(--ink-2); line-height:1.85; white-space:pre-line}

/* ─── Org chart: top-down boxes + connector lines (roles only) ───
   All connector geometry uses logical properties so the tree is
   symmetric and correct in BOTH dir=ltr and dir=rtl. */
.orgchart-wrap{overflow-x:auto; padding:20px 2px 10px; -webkit-overflow-scrolling:touch}
.orgchart{display:inline-block; min-width:100%; text-align:center}
.orgchart ul{display:flex; justify-content:center; padding:26px 0 0; margin:0; list-style:none; position:relative}
.orgchart li{list-style:none; position:relative; padding:26px 16px 0}

/* the horizontal + vertical connector segments above each node */
.orgchart li::before,
.orgchart li::after{content:""; position:absolute; top:0; width:50%; height:26px; border-top:2px solid var(--line-2)}
.orgchart li::before{inset-inline-end:50%}
.orgchart li::after{inset-inline-start:50%; border-inline-start:2px solid var(--line-2)}

/* a single child needs no branching connectors above it */
.orgchart li:only-child::before,
.orgchart li:only-child::after{display:none}
.orgchart li:only-child{padding-top:0}

/* trim the outward-facing halves on the edge nodes (inline-start / inline-end) */
.orgchart li:first-child::before,
.orgchart li:last-child::after{border:0 none}
.orgchart li:last-child::before{border-inline-end:2px solid var(--line-2); border-start-end-radius:7px}
.orgchart li:first-child::after{border-start-start-radius:7px}

/* vertical drop from a parent box down to its children group */
.orgchart ul ul::before{content:""; position:absolute; top:0; inset-inline-start:50%; width:0; height:26px; border-inline-start:2px solid var(--line-2)}

/* the boxes */
.orgchart .org-box{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:11px 20px; white-space:nowrap;
  border:1px solid var(--brass-line); background:var(--surface); color:var(--ink);
  border-radius:var(--r-sm); box-shadow:var(--shadow-1);
  font-weight:600; font-size:14px;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease)}
.orgchart .org-box:hover{border-color:var(--brass); box-shadow:var(--shadow-2)}
.orgchart > ul > li > .org-box{
  border-color:var(--brass); background:var(--brass-soft); color:var(--brass-2); font-size:15px}
[data-theme="dark"] .orgchart > ul > li > .org-box{background:rgba(214,165,82,.14); color:var(--brass)}

@media (max-width:560px){
  .dept-vmm .vmm{padding:18px 20px}
  .dept-head{margin-top:40px}
  .orgchart li{padding-inline:10px}
  .orgchart .org-box{font-size:13px; padding:9px 15px; min-height:40px}
}

/* ===== Research events (added 2026-09-14) ===== */
.re-ph{width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--surface-2), var(--surface-3)); color:var(--ink-3)}
.re-ph span{font-family:"Tajawal", system-ui; font-weight:800; font-size:15px; letter-spacing:.04em;
    text-transform:uppercase; opacity:.55}
[dir="rtl"] .re-ph span{letter-spacing:normal; text-transform:none}
.re-chips{gap:8px; flex-wrap:wrap; margin-top:2px}

.re-flash{margin-bottom:18px; display:flex; flex-direction:column; gap:8px}
.re-flash .chip{align-self:start}
.re-flash p{margin:0; color:var(--ink-2)}
.re-flash.ok{border-color:var(--ok); background:var(--ok-soft)}
.re-flash.bad{border-color:var(--flag); background:var(--flag-soft)}

.re-meta{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:0;
    border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface)}
.re-meta > div{padding:15px 18px; border-inline-start:1px solid var(--line)}
.re-meta > div:first-child{border-inline-start:0}
.re-meta dt{font-size:12px; color:var(--ink-3); margin-bottom:4px}
.re-meta dd{margin:0; font-weight:600; color:var(--ink); font-size:14.5px}

.re-day{margin-top:32px}
.re-day:first-of-type{margin-top:0}
.re-day-h{display:flex; align-items:center; gap:10px; margin-bottom:16px;
    font-family:"Tajawal", system-ui; font-weight:800; font-size:18px; color:var(--ink)}
.re-day-h::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--brass); flex:none}

.re-session{border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; background:var(--surface);
    display:flex; flex-direction:column; gap:11px; margin-bottom:14px}
.re-session-top{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.re-session-time{font-variant-numeric:tabular-nums; font-weight:700; color:var(--brass); font-size:14px; white-space:nowrap}
.re-session h4{font-size:16px; font-weight:700; color:var(--ink); line-height:1.4; margin:0}
.re-session-meta{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

.re-reg summary{cursor:pointer; align-self:start; list-style:none}
.re-reg summary::-webkit-details-marker{display:none}
.re-regbox{border-color:var(--brass-line); background:var(--brass-soft);
    display:flex; flex-direction:column; gap:16px}
.re-form .req{color:var(--flag)}
.re-form [hidden]{display:none !important}
.re-grp{display:flex; flex-direction:column; gap:16px}

.re-types{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.re-type{display:flex; align-items:flex-start; gap:10px; border:1px solid var(--line); border-radius:var(--r-sm);
    padding:12px 14px; cursor:pointer; background:var(--surface)}
.re-type input{margin-block-start:3px; width:16px; height:16px; flex:none; accent-color:var(--brass); cursor:pointer}
.re-type:has(input:checked){border-color:var(--brass); background:var(--brass-soft)}
.re-type b{display:block; font-size:14px; color:var(--ink)}
.re-type .muted{font-size:12.5px}
@media (max-width:560px){.re-types{grid-template-columns:1fr}}