/* ============================================================
   وثائق الحوكمة — قالب مشترك لسبع صفحات.
   المُحدِّدات مسبوقة بـdc- تجنّباً لأي تعارض مع site.css.
   ============================================================ */

.dc-open, .dc-list, .dc-more{ --dc-pad: clamp(44px, 4.6vw, 70px); }
.dc-inner, .dc-open-inner{max-width:1180px; margin:0 auto;}

/* ---------- الافتتاحية ---------- */
.dc-open{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(152deg, #04203A 0%, var(--navy) 52%, #0A3457 100%);
  color:#fff; padding:clamp(80px,8.2vw,120px) 28px clamp(46px,5vw,66px);
}
.dc-open-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(56% 74% at 86% 8%, rgba(44,148,142,.24), transparent 60%),
    radial-gradient(44% 60% at 8% 96%, rgba(65,127,193,.16), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 46px);
}
/* صورة غلاف إن رُفعت: تُمزج بطبقة داكنة ليبقى النص مقروءاً */
.dc-open.has-cover .dc-open-bg{
  background-image:
    linear-gradient(150deg, rgba(4,32,58,.92), rgba(5,34,62,.86)),
    var(--cover);
  background-size:cover; background-position:center;
}
.dc-crumb{
  display:flex; align-items:center; gap:9px; margin-bottom:16px;
  font-size:12.5px; color:rgba(255,255,255,.6);
}
.dc-crumb a{color:var(--mint); transition:color .25s ease;}
.dc-crumb a:hover{color:#fff;}
.dc-open h1{
  font-family:var(--font-head); font-weight:800; color:#fff;
  font-size:clamp(25px,3.4vw,42px); line-height:1.26; letter-spacing:-.5px;
  max-width:min(680px, 100%); text-wrap:balance;
}
.dc-lede{
  margin-top:14px; max-width:70ch;
  font-size:clamp(14px,1.25vw,16px); line-height:1.85; color:rgba(255,255,255,.76);
}
.dc-lede p{margin:0 0 10px;}
.dc-lede p:last-child{margin-bottom:0;}
.dc-count{
  display:inline-flex; align-items:baseline; gap:8px; margin-top:22px;
  font-size:12.5px; color:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.14); padding:8px 17px; border-radius:999px;
}
.dc-count b{font-family:'Roboto',sans-serif; font-size:18px; font-weight:800; color:var(--mint);}

/* ---------- قائمة الوثائق ---------- */
.dc-list{padding:var(--dc-pad) 28px;}
.dc-docs{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
.dc-docs li{
  position:relative; display:flex; align-items:center; gap:16px;
  padding:16px 12px; border-bottom:1px solid var(--line); overflow:hidden;
  transition:background .3s ease, padding-inline-start .35s cubic-bezier(.16,1,.3,1);
}
.dc-docs li::before{
  content:''; position:absolute; inset-block:0; inset-inline-start:0; width:3px;
  background:var(--teal); transform:scaleY(0); transform-origin:bottom;
  transition:transform .38s cubic-bezier(.16,1,.3,1);
}
.dc-docs li:hover{background:var(--paper-tint); padding-inline-start:20px;}
.dc-docs li:hover::before{transform:scaleY(1);}
.dc-ic{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:var(--mint-pale); color:var(--teal);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease, color .3s ease;
}
.dc-ic svg{width:20px; height:20px;}
.dc-docs li:hover .dc-ic{background:var(--teal); color:#fff;}
.dc-body{flex:1; min-width:0;}
.dc-body > b{
  display:block; font-family:var(--font-head); font-size:15.5px; font-weight:800;
  color:var(--navy); line-height:1.5;
}
.dc-meta{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:6px;}
.dc-meta time, .dc-meta > span{
  font-family:'Roboto',sans-serif; font-size:12.5px; color:#7c8b99; letter-spacing:.2px;
}
.dc-meta em{
  font-style:normal; font-size:11.5px; font-weight:700; color:var(--teal);
  background:var(--mint-pale); border:1px solid rgba(31,120,116,.16);
  padding:3px 11px; border-radius:999px;
}

.dc-dl{
  display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
  padding:10px 20px; border-radius:999px; font-size:13.5px; font-weight:700;
  background:var(--navy); color:#fff;
  transition:background .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.dc-dl svg{width:16px; height:16px;}
.dc-dl:hover{background:linear-gradient(120deg, var(--teal), var(--teal-soft)); transform:translateY(-2px);}
/* حالة عدم توفّر الملف — نصّ لا زرّ، فلا يضغط الزائر ما لا يعمل */
.dc-soon{
  flex-shrink:0; font-size:12px; color:#9aa8b4;
  border:1px dashed var(--line); padding:8px 15px; border-radius:999px;
}

/* حالة فارغة */
.dc-empty{
  text-align:center; padding:clamp(34px,4.2vw,54px) 28px;
  background:var(--paper-tint); border:1px dashed var(--line);
}
.dc-empty-ic{
  width:54px; height:54px; border-radius:50%; margin:0 auto 15px;
  background:#fff; border:1px solid var(--line); color:var(--teal);
  display:flex; align-items:center; justify-content:center;
}
.dc-empty-ic svg{width:25px; height:25px;}
.dc-empty h2{font-family:var(--font-head); font-size:18px; font-weight:800; color:var(--navy);}
.dc-empty p{margin:10px auto 0; max-width:52ch; font-size:14px; line-height:1.85; color:#5d7285;}

/* ---------- أقسام أخرى ---------- */
.dc-more{padding:var(--dc-pad) 28px; background:var(--paper-tint);}
.dc-more h2{
  font-family:var(--font-head); font-size:clamp(18px,2vw,23px); font-weight:800;
  color:var(--navy); margin-bottom:18px;
}
.dc-more-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:12px;}
.dc-more-card{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#fff; border:1px solid var(--line); padding:16px 18px;
  font-family:var(--font-head); font-size:14.5px; font-weight:800; color:var(--navy);
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease;
}
.dc-more-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:rgba(31,120,116,.35);}
.dc-more-card svg{width:16px; height:16px; color:var(--teal); flex-shrink:0; transition:transform .35s cubic-bezier(.16,1,.3,1);}
.dc-more-card:hover svg{transform:translateX(-5px);}

/* ---------- الحركة ---------- */
@media (prefers-reduced-motion: no-preference){
  [data-reveal] .dc-docs li,
  [data-reveal] .dc-more-card{
    animation:dc-rise .6s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(var(--i, 0) * 55ms);
    animation-play-state:paused;
  }
  [data-reveal].in-view .dc-docs li,
  [data-reveal].in-view .dc-more-card{animation-play-state:running;}
  @keyframes dc-rise{from{opacity:0; translate:0 12px;} to{opacity:1; translate:0 0;}}
}

/* ---------- الاستجابة ---------- */
@media (max-width:640px){
  .dc-docs li{flex-wrap:wrap; padding:14px 8px; gap:12px;}
  .dc-ic{width:38px; height:38px;}
  .dc-ic svg{width:17px; height:17px;}
  .dc-body{flex:1 1 calc(100% - 50px);}
  /* الزرّ ينتقل لسطر مستقل بعرض كامل بدل أن يضغط العنوان */
  .dc-dl, .dc-soon{flex:1 1 100%; justify-content:center; text-align:center;}
}

/* ============================================================
   بطاقات الوثائق — صفّ أفقي مضغوط.
   الوثائق كثيرة، فالبطاقة الطويلة تُطيل الصفحة بلا فائدة. مصغّر
   جانبي صغير، ثم عين وتاريخ وعنوان، وأيقونة تحميل في الطرف.
   ============================================================ */
.dc-cards{
  display:grid; gap:12px; list-style:none; padding:0; margin:0;
  grid-template-columns:repeat(auto-fill, minmax(min(340px,100%), 1fr));
}
.dc-card{
  display:flex; align-items:stretch; gap:0;
  background:var(--paper-tint, #F4F8F7);
  border:1px solid transparent; border-radius:var(--r-xl, 4px);
  overflow:hidden; min-height:96px;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.dc-card:hover{
  background:#fff; border-color:rgba(31,120,116,.3);
  box-shadow:0 12px 26px -16px rgba(5,34,62,.28);
}

/* المصغّر الجانبي — يظهر عند وجود غلاف فقط */
.dc-card-thumb{
  flex:0 0 108px; position:relative; overflow:hidden;
  background:#e8eef1; display:flex; align-items:center; justify-content:center;
}
.dc-card-thumb img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  -webkit-user-select:none; user-select:none; -webkit-user-drag:none;
}
.dc-card-ph{color:rgba(5,34,62,.2);}
.dc-card-ph svg{width:30px; height:30px;}

.dc-card-body{
  flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;
  padding:14px 16px; justify-content:center;
}

/* العين أيقونة صغيرة فوق التاريخ كما في المرجع */
.dc-eye{
  align-self:flex-start; display:inline-flex; color:var(--teal, #1F7874);
  transition:color .2s ease, transform .2s ease;
}
.dc-eye svg{width:19px; height:19px;}
.dc-eye:hover{color:var(--navy, #05223E); transform:scale(1.12);}

.dc-card-date{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12px; color:#7b8896;
}
.dc-card-date em{
  font-style:normal; padding:1px 8px; border-radius:999px;
  background:var(--mint-pale, #EAF6F0); color:var(--teal, #1F7874);
  font-size:11px; font-weight:700;
}
.dc-card-title{
  font-size:14.5px; font-weight:800; color:var(--navy, #05223E); line-height:1.5;
  transition:color .2s ease;
}
a.dc-card-title:hover{color:var(--teal, #1F7874);}
.dc-card-title.is-plain{color:#8593a1;}
.dc-card-soon{
  font-style:normal; font-size:11px; color:#8593a1;
  align-self:flex-start; padding:1px 8px; border-radius:999px;
  background:rgba(5,34,62,.05);
}
.dc-card.is-pending{opacity:.7;}
.dc-card.is-pending:hover{background:var(--paper-tint, #F4F8F7); box-shadow:none; border-color:transparent;}

/* أيقونة التحميل — دائرة بيضاء في الطرف، بلا كلمات */
.dc-dl-btn{
  flex:0 0 auto; align-self:center; margin-inline-end:16px;
  width:42px; height:42px; padding:0; border:none; cursor:pointer;
  border-radius:50%; background:#fff; color:var(--teal, #1F7874);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px -6px rgba(5,34,62,.3);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.dc-dl-btn svg{width:19px; height:19px;}
.dc-dl-btn:hover{background:var(--teal, #1F7874); color:#fff; transform:scale(1.07);}

/* شريط التوضيح أسفل القائمة */
.dc-readonly{
  display:flex; align-items:center; gap:9px; margin-top:22px;
  padding:11px 16px; border-radius:var(--r-xl, 4px);
  background:var(--mint-pale, #EAF6F0);
  border-inline-start:3px solid var(--teal, #1F7874);
  color:#2f4a52; font-size:13px; font-weight:600;
}
.dc-readonly svg{width:18px; height:18px; flex:none; color:var(--teal, #1F7874);}

/* ============================================================
   قارئ الوثيقة — صفحات مُصوَّرة
   ============================================================ */
.dr-head{background:var(--navy, #05223E); color:#fff; padding:110px 0 40px;}
.dr-inner{max-width:1000px; margin-inline:auto; padding-inline:28px;}
.dr-crumb{font-size:13px; color:rgba(255,255,255,.6); margin-bottom:14px;}
.dr-crumb a{color:rgba(255,255,255,.85);}
.dr-crumb a:hover{color:var(--mint, #B3DECA); text-decoration:underline; text-underline-offset:3px;}
.dr-crumb span[aria-hidden]{margin:0 8px;}
.dr-head h1{font-size:clamp(23px,3vw,34px); font-weight:900; color:#fff; line-height:1.4;}
.dr-meta{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:12px; font-size:13.5px; color:rgba(255,255,255,.7);}
.dr-meta em{font-style:normal; padding:2px 11px; border-radius:999px; background:rgba(255,255,255,.12);}
/* أيقونة وحدها بلا نصّ — دائرة صغيرة تكفي للدلالة */
.dr-notice{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:18px; width:38px; height:38px; border-radius:50%;
  background:rgba(179,222,202,.14); border:1px solid rgba(179,222,202,.4);
  color:var(--mint, #B3DECA); cursor:help;
}
.dr-notice svg{width:19px; height:19px; flex:none;}

.dr-body{background:var(--paper-tint, #F4F8F7); padding:36px 0 70px;}
.dr-pages{display:flex; flex-direction:column; gap:20px;}
.dr-page{position:relative; margin:0;}
.dr-page img{
  display:block; width:100%; height:auto;
  border:1px solid var(--line, rgba(5,34,62,.09));
  border-radius:var(--r-xl, 4px);
  background:#fff; box-shadow:0 14px 30px -20px rgba(5,34,62,.3);
  -webkit-user-select:none; user-select:none; -webkit-user-drag:none;
}
.dr-page figcaption{
  margin-top:8px; text-align:center; font-size:12px; color:#7b8896;
}
.dr-foot{margin-top:32px; text-align:center;}
.dr-back-btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 30px; border-radius:var(--r-lg, 3px);
  background:var(--teal, #1F7874); color:#fff; font-weight:700; font-size:14.5px;
  transition:transform .2s ease, background .2s ease;
}
.dr-back-btn:hover{transform:translateY(-2px); background:var(--navy, #05223E);}
.dr-unavailable{
  text-align:center; padding:60px 24px; background:#fff;
  border:1px solid var(--line, rgba(5,34,62,.09)); border-radius:var(--r-xl, 4px);
}
.dr-unavailable h2{font-size:22px; color:var(--navy, #05223E); margin-bottom:10px;}
.dr-unavailable p{color:#6b7c8d; margin-bottom:22px;}

@media (max-width:600px){
  .dr-head{padding:96px 0 30px;}
  .dr-inner{padding-inline:18px;}
  .dr-body{padding:24px 0 50px;}
}

/* ============================================================
   تخطيط عمودين: بطاقات + لوحة كحلية جانبية
   ============================================================ */
.dc-split{
  display:grid; gap:22px; align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(280px, 340px);
}
@media (max-width:1000px){ .dc-split{grid-template-columns:1fr;} }

/* البطاقات أعرض: عمودان بدل ثلاثة داخل العمود الأيسر */
.dc-split .dc-cards{grid-template-columns:repeat(auto-fill, minmax(min(330px,100%), 1fr));}

/* ---------- اللوحة الكحلية ---------- */
.dc-aside{
  position:relative; overflow:hidden;
  background:var(--navy, #05223E); color:rgba(255,255,255,.82);
  border-radius:var(--r-xl, 4px); padding:30px 26px 26px;
  position:sticky; top:96px;
}
.dc-aside-corner{
  position:absolute; inset-block-start:0; inset-inline-end:0;
  width:0; height:0; border-block-start:96px solid var(--teal, #1F7874);
  border-inline-start:96px solid transparent;
}
.dc-aside-badge{
  position:absolute; inset-block-start:18px; inset-inline-end:18px; z-index:2;
  width:44px; height:44px; border-radius:50%;
  background:#fff; color:var(--teal, #1F7874);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.4);
}
.dc-aside-badge svg{width:21px; height:21px;}
.dc-aside h2{
  position:relative; z-index:1;
  color:#fff; font-size:20px; font-weight:900; line-height:1.45;
  max-width:min(190px,100%); margin-bottom:20px;
}
.dc-aside-list{list-style:none; margin:0; padding:0;}
.dc-aside-list li{
  display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:center;
  padding:13px 0; border-block-end:1px solid rgba(255,255,255,.13);
}
.dc-aside-list li:last-child{border-block-end:0;}
.dc-aside-date{
  grid-column:1/-1; font-size:11.5px; color:rgba(255,255,255,.5);
}
.dc-aside-list a:not(.dc-aside-eye){
  font-size:14px; font-weight:700; color:#fff; line-height:1.5;
  transition:color .2s ease;
}
.dc-aside-list a:not(.dc-aside-eye):hover{color:var(--mint, #B3DECA);}
.dc-aside-soon{font-size:14px; color:rgba(255,255,255,.42);}
.dc-aside-eye{
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:var(--mint, #B3DECA);
  transition:background .2s ease, color .2s ease;
}
.dc-aside-eye svg{width:17px; height:17px;}
.dc-aside-eye:hover{background:var(--mint, #B3DECA); color:var(--navy, #05223E);}

/* ---------- زرّ طلب التحميل ---------- */
.dc-dl-btn{
  margin-inline-start:auto;
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 15px; border-radius:var(--r-lg, 3px);
  background:var(--teal, #1F7874); color:#fff; border:none; cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:700;
  transition:background .2s ease, transform .2s ease;
}
.dc-dl-btn svg{width:15px; height:15px;}
.dc-dl-btn:hover{background:var(--navy, #05223E); transform:translateY(-1px);}

/* ---------- نافذة الطلب ---------- */
.dc-modal{
  /* التصفير العام يُلغي margin:auto الافتراضي للـdialog فلا يتوسّط */
  inset:0; margin:auto;
  width:min(420px, calc(100vw - 32px));
  border:none; border-radius:var(--r-xl, 4px); padding:28px;
  background:#fff; color:var(--ink, #0A1E2E);
  box-shadow:0 30px 70px -20px rgba(5,34,62,.5);
}
.dc-modal::backdrop{background:rgba(5,34,62,.55); backdrop-filter:blur(3px);}
.dc-modal-x{display:flex; justify-content:flex-start;}
.dc-modal-x button{
  background:none; border:none; font-size:26px; line-height:1;
  color:#8b9aa9; cursor:pointer; padding:0;
}
.dc-modal-x button:hover{color:var(--navy, #05223E);}
.dc-modal h3{font-size:19px; font-weight:900; color:var(--navy, #05223E); margin:0 0 6px;}
.dc-modal-doc{
  font-size:14px; font-weight:700; color:var(--teal, #1F7874);
  margin:0 0 4px; line-height:1.5;
}
.dc-modal-note{font-size:13px; color:#6b7c8d; margin:0 0 18px; line-height:1.7;}
.dc-modal label{display:grid; gap:6px; margin-bottom:13px;}
.dc-modal label > span{font-size:13px; font-weight:700; color:var(--navy, #05223E);}
.dc-modal label i{color:#c0392b; font-style:normal;}
.dc-modal input{
  width:100%; padding:11px 13px; font:inherit; font-size:15px;
  border:1px solid var(--line, rgba(5,34,62,.14)); border-radius:var(--r-lg, 3px);
  background:#fff; color:var(--ink, #0A1E2E);
}
.dc-modal input:focus{
  outline:none; border-color:var(--teal, #1F7874);
  box-shadow:0 0 0 3px rgba(31,120,116,.15);
}
.dc-modal input[aria-invalid="true"]{border-color:#c0392b;}
.dc-modal-send{
  width:100%; margin-top:6px; padding:13px; border:none; cursor:pointer;
  border-radius:var(--r-lg, 3px); background:var(--teal, #1F7874); color:#fff;
  font-family:inherit; font-size:15px; font-weight:800;
  transition:background .2s ease;
}
.dc-modal-send:hover{background:var(--navy, #05223E);}
.dc-modal-send[disabled]{opacity:.6; cursor:progress;}
.dc-modal-msg{margin:12px 0 0; font-size:13.5px; font-weight:700; line-height:1.6;}
.dc-modal-msg.is-ok{color:#1d7a4d;}
.dc-modal-msg.is-err{color:#c0392b;}

/* أيقونة الرابط الخارجي تُميَّز عن أيقونة الطلب بلونها */
.dc-dl-btn.is-link{color:var(--blue, #417FC1);}
.dc-dl-btn.is-link:hover{background:var(--blue, #417FC1); color:#fff;}
