/* =========================================================
   كشف الحساب — أنماط المستند.

   يُحمَّل على قالب «حساباتي المالية» وحده. أنماط البنود نفسها
   (‏.finrow و.finfinal و.finkpi) في app.css؛ ما هنا هو ما يحوّل الصفحة
   من شاشة أرقام إلى مستند: الترويسة، وحلقة التغطية، والترقيم، والتذييل.
   ========================================================= */

/* =========================================================
   ١) ترويسة المستند
   ========================================================= */
.stmt-doc{
  display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(20px,3vw,44px);
  flex-wrap:wrap;
  padding:clamp(20px,2.4vw,28px);margin-block-end:18px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  /* الخيط الأزرق العلوي يقول «هذا مستند رسمي» قبل قراءة كلمة */
  border-block-start:3px solid var(--blue);
}
.stmt-doc-brand{display:flex;align-items:center;gap:16px}
.stmt-doc-brand img{height:44px;width:auto}
.stmt-doc-brand h2{margin:0;font-size:clamp(1.1rem,1.8vw,1.35rem);line-height:1.3}
.stmt-doc-brand p{margin:.25em 0 0;font-size:.85rem;color:var(--ink-3)}

.stmt-doc-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:14px 26px;margin:0;flex:1 1 340px;
}
.stmt-doc-meta div{min-width:0}
.stmt-doc-meta dt{font-size:.73rem;font-weight:700;letter-spacing:.05em;color:var(--ink-3);
  text-transform:uppercase}
.stmt-doc-meta dd{margin:.35em 0 0;font-family:var(--f-num);font-size:.98rem;font-weight:700;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

.stmt-tools{display:flex;gap:8px;flex-wrap:wrap;margin-inline-start:auto}
.stmt-tools .btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.7;fill:none}

/* =========================================================
   ٢) الملخّص وحلقة التغطية
   ========================================================= */
.stmt-sum-body{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px,2.4vw,34px);align-items:center;padding:clamp(16px,2vw,24px);
}
@media (max-width:760px){
  .stmt-sum-body{grid-template-columns:1fr;justify-items:center}
  .stmt-sum-body .finkpis{width:100%}
}

/**
 * الحلقة تجيب سؤالاً واحداً: «كم من المستحق دفعته؟».
 * وضعها بجانب الأرقام لا فوقها مقصود — الرقم يقول كم، والحلقة تقول
 * أين نحن من الكل، والاثنان يُقرآن معاً في نظرة واحدة.
 */
.stmt-donut{position:relative;width:130px;height:130px;flex:none}
.stmt-donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.stmt-donut circle{fill:none;stroke-width:11}
.stmt-donut-track{stroke:var(--tint-2)}
.stmt-donut-fill{
  stroke:var(--blue);stroke-linecap:round;
  transition:stroke-dashoffset .9s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.stmt-donut.is-debt .stmt-donut-fill{stroke:#E04343}
.stmt-donut-txt{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:2px;
}
.stmt-donut-txt b{
  font-family:var(--f-num);font-size:1.75rem;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.stmt-donut-txt b i{font-style:normal;font-size:.9rem;color:var(--ink-3);margin-inline-start:1px}
.stmt-donut-txt small{font-size:.68rem;color:var(--ink-3);max-width:11ch;line-height:1.4;margin-inline:auto}

/* =========================================================
   ٣) ترقيم الحملات
   ========================================================= */
/**
 * رقم تسلسلي لكل حملة داخل الكشف. ليس زينة: العميل الذي يسأل عن بند
 * يقول «رقم ٣» بدل أن ينسخ اسم حملة طويلاً — وهذا وحده يختصر المكالمة.
 */
.stmt-no{
  display:grid;place-items:center;width:30px;height:30px;flex:none;
  border-radius:9px;background:var(--tint-2);color:var(--blue-700);
  font-family:var(--f-num);font-size:.85rem;font-weight:800;font-variant-numeric:tabular-nums;
}

/* =========================================================
   ٤) تذييل المستند
   ========================================================= */
.stmt-legal{padding:clamp(18px,2.2vw,26px)}
.stmt-legal h3{margin:0 0 14px;font-size:1rem}
.stmt-legal ol{margin:0 0 16px;padding-inline-start:1.3em;display:grid;gap:.6em;
  font-size:.92rem;line-height:1.85;color:var(--ink-2)}
.stmt-legal ol li::marker{color:var(--blue);font-weight:700}
.stmt-legal .muted{font-size:.87rem;line-height:1.9;margin-block-end:16px}

/* =========================================================
   ٥) الطباعة
   ========================================================= */
@media print{
  .stmt-doc{border:0;border-block-start:3px solid #0F62F5;padding-inline:0;margin-block-end:6mm}
  .stmt-tools{display:none!important}
  .stmt-sum-body{grid-template-columns:auto 1fr;padding:0}
  .stmt-donut{width:34mm;height:34mm}
  .stmt-legal ol{break-inside:avoid}
  .stmt-no{border:1px solid #c9cdd3}
}