/* ==========================================================================
   السلف والمستحقات — صفحة مستقلة لمتابعة ما لي عند الناس.
   تعتمد متغيرات الألوان الحالية في :root فقط، بنفس هوية بقية الصفحات.
   ========================================================================== */

/* ---------- البطاقة الرئيسية ---------- */
.lend-hero{
  background:var(--surface-1); border-radius:var(--radius-card); padding:15px 16px 13px;
  margin-bottom:11px; direction:rtl;
}
.lend-hero-main{ display:flex; flex-direction:column; gap:2px; margin-bottom:11px; }
.lend-hero-main span{ font-size:12px; color:var(--muted); }
.lend-hero-main b{ font-size:29px; font-weight:800; font-variant-numeric:tabular-nums; direction:ltr; text-align:right; }
.lend-hero-main small{ font-size:11.5px; color:var(--muted); }
.lend-hero-mini{ display:flex; flex-wrap:wrap; gap:6px; }
.lend-hero-mini > div{
  flex:1 1 calc(50% - 6px); min-width:0; background:var(--surface-3);
  border-radius:var(--radius-small); padding:7px 10px;
  display:flex; flex-direction:column; gap:1px;
}
.lend-hero-mini span{ font-size:10.5px; color:var(--muted); }
.lend-hero-mini b{ font-size:14px; font-variant-numeric:tabular-nums; direction:ltr; text-align:right; }

/* ---------- شريط الأدوات والبحث ---------- */
.lend-toolbar{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:9px; direction:rtl; }
.lend-toolbar .btn{ flex:1 1 auto; }
.lend-search{
  width:100%; font-family:inherit; font-size:16px; color:var(--text-primary);
  min-height:var(--control-h); padding:9px 12px; margin-bottom:11px;
  border:1px solid var(--line); border-radius:var(--radius-small);
  background:var(--surface-3); direction:rtl;
}
.lend-search:focus{ outline:none; box-shadow:var(--focus-ring); }

/* ---------- التقويم: المستحقات القريبة ---------- */
.lend-upcoming{
  background:var(--surface-3); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:11px 12px; margin-bottom:12px; direction:rtl;
}
.lend-up-title{ font-size:13px; font-weight:700; color:var(--ink); margin-bottom:8px; }
.lend-up-group{ margin-bottom:9px; }
.lend-up-group:last-child{ margin-bottom:0; }
.lend-up-h{
  display:block; font-size:11px; font-weight:700; color:var(--muted);
  margin-bottom:4px; padding-inline-start:2px;
}
.lend-up-h b{ font-variant-numeric:tabular-nums; }
.lend-up-overdue .lend-up-h{ color:var(--danger); }
.lend-up-week .lend-up-h{ color:var(--warn-deep); }
.lend-up-row{
  width:100%; display:flex; align-items:center; gap:8px; justify-content:space-between;
  background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-small);
  padding:7px 10px; margin-bottom:4px; font-family:inherit; cursor:pointer;
  text-align:start; color:var(--ink); direction:rtl;
}
.lend-up-row:active{ transform:scale(var(--press-scale, .99)); }
.lend-up-row > span{ display:flex; flex-direction:column; gap:1px; min-width:0; font-size:13px; }
.lend-up-row small{ font-size:10.5px; color:var(--muted); }
.lend-up-row b{ font-size:13.5px; font-variant-numeric:tabular-nums; direction:ltr; white-space:nowrap; }
.lend-up-overdue .lend-up-row{ border-inline-start:3px solid var(--danger); }
.lend-up-week .lend-up-row{ border-inline-start:3px solid var(--warn); }
.lend-up-more{ display:block; font-size:11px; color:var(--muted); padding-inline-start:4px; }

/* ---------- الأقسام والصفوف ---------- */
.lend-sec{ margin-bottom:9px; }
.lend-sec-head{
  width:100%; display:flex; align-items:center; gap:9px; cursor:pointer;
  background:var(--surface-3); border:1px solid var(--line);
  border-radius:var(--radius-small); padding:9px 11px; font-family:inherit; direction:rtl;
}
.lend-sec-overdue .lend-sec-head{ border-color:rgba(229,29,69,.22); background:linear-gradient(160deg,var(--surface-3) 0%,var(--danger-soft) 100%); }
.lend-sec-settled .lend-sec-head{ border-color:rgba(0,168,59,.2); background:linear-gradient(160deg,var(--surface-3) 0%,var(--pos-soft) 100%); }
.lend-sec-icon{
  width:var(--ico-box-sm, 28px); height:var(--ico-box-sm, 28px); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-1); border-radius:9px; font-size:14px;
}
.lend-sec-main{ min-width:0; display:flex; flex-direction:column; gap:1px; flex:1; }
.lend-sec-main b{ font-size:14px; color:var(--ink); }
.lend-sec-main small{ font-size:10.5px; color:var(--muted); }
.lend-sec-total{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; min-width:84px; }
.lend-sec-total small{ font-size:10px; color:var(--muted); }
.lend-sec-total b{ font-size:13px; font-variant-numeric:tabular-nums; direction:ltr; white-space:nowrap; }
.lend-sec-head .dch-car{ color:var(--muted); }
.lend-sec.collapsed .lend-sec-body{ display:none; }
.lend-sec-body{ display:flex; flex-direction:column; gap:5px; padding-top:6px; animation:softIn .18s ease; }

.lend-row{
  width:100%; display:grid; grid-template-columns:1fr auto auto; align-items:center;
  gap:9px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-small); padding:10px 12px; cursor:pointer;
  font-family:inherit; text-align:start; color:var(--ink); direction:rtl; position:relative;
}
.lend-row:active{ transform:scale(var(--press-scale, .99)); }
.lend-row-overdue{ border-inline-start:3px solid var(--danger); }
.lend-row-settled{ opacity:.72; }
.lr-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.lr-main b{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lr-meta{ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lr-nums{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.lr-nums strong{ font-size:14.5px; font-variant-numeric:tabular-nums; direction:ltr; white-space:nowrap; }
.lr-nums small{ font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; direction:ltr; }
.lend-row > i{ color:var(--muted); font-style:normal; }
.lend-progress{
  grid-column:1 / -1; height:4px; background:var(--surface-2);
  border-radius:999px; overflow:hidden; margin-top:2px;
}
.lend-progress > i{ display:block; height:100%; background:var(--pos); border-radius:999px; }
.lend-progress.sm{ height:3px; }

/* ---------- نافذة التفاصيل ---------- */
.lend-detail-top{ direction:rtl; margin-bottom:12px; }
.lend-detail-bal{ display:flex; flex-direction:column; gap:2px; margin-bottom:7px; }
.lend-detail-bal span{ font-size:11.5px; color:var(--muted); }
.lend-detail-bal b{ font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; direction:ltr; text-align:right; }
.lend-detail-bal small{ font-size:11.5px; color:var(--muted); }
.lend-detail-grid{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.lend-detail-grid > div{
  flex:1 1 calc(50% - 6px); min-width:0; background:var(--surface-3);
  border-radius:var(--radius-small); padding:7px 10px; display:flex; flex-direction:column; gap:1px;
}
.lend-detail-grid span{ font-size:10.5px; color:var(--muted); }
.lend-detail-grid b{ font-size:13px; font-variant-numeric:tabular-nums; }
.lend-detail-note{ font-size:12px; color:var(--muted); margin-top:8px; direction:rtl; }
.lend-alert{
  margin-top:9px; padding:8px 11px; border-radius:var(--radius-small);
  font-size:12.5px; font-weight:500; direction:rtl;
}
.lend-alert.bad{ background:var(--danger-soft); color:var(--danger-deep); }
.lend-alert.soon{ background:var(--warn-soft); color:var(--warn-deep); }
.lend-detail-actions{ display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; direction:rtl; }
.lend-detail-actions .btn{ flex:1 1 calc(50% - 6px); min-width:0; }

.lend-block{ margin-top:11px; direction:rtl; }
.lend-block > summary{
  cursor:pointer; font-size:13px; font-weight:700; color:var(--ink);
  padding:8px 11px; background:var(--surface-3); border-radius:var(--radius-small); list-style:none;
}
.lend-block > summary::-webkit-details-marker{ display:none; }
.lend-block[open] > summary{ margin-bottom:7px; }

/* جدول الأقساط */
.lend-sched{ display:flex; flex-direction:column; gap:4px; }
.lend-sched-row{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:8px;
  background:var(--surface-3); border-radius:var(--radius-small); padding:7px 10px; font-size:12px;
}
.lend-sched-row .n{ font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
.lend-sched-row .d{ min-width:0; color:var(--ink); }
.lend-sched-row b{ font-variant-numeric:tabular-nums; direction:ltr; white-space:nowrap; }
.lend-sched-row .s{ font-size:10.5px; color:var(--muted); white-space:nowrap; }
.lend-sched-row small{ grid-column:1 / -1; font-size:10.5px; color:var(--muted); }
.lend-st-paid{ background:var(--pos-soft); }
.lend-st-paid .s{ color:var(--pos-deep); }
.lend-st-overdue{ background:var(--danger-soft); }
.lend-st-overdue .s{ color:var(--danger-deep); }
.lend-st-due, .lend-st-partial{ background:var(--warn-soft); }
.lend-st-due .s, .lend-st-partial .s{ color:var(--warn-deep); }

/* سجل العمليات */
.lend-txns{ display:flex; flex-direction:column; gap:4px; }
.lend-txn{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:8px;
  background:var(--surface-3); border-radius:var(--radius-small); padding:7px 10px; font-size:12px;
}
.lend-txn .k{ font-weight:700; white-space:nowrap; }
.lend-txn b{ font-variant-numeric:tabular-nums; direction:ltr; white-space:nowrap; }
.lend-txn .d{ font-size:11px; color:var(--muted); }
.lend-txn small{ grid-column:1 / -1; font-size:10.5px; color:var(--muted); }
.lend-tone-neg .k{ color:var(--danger); }
.lend-tone-pos .k{ color:var(--pos-deep); }
.lend-tone-warn .k{ color:var(--warn-deep); }
.lend-txn-del{
  width:24px; height:24px; border:none; background:transparent; color:var(--text-tertiary);
  border-radius:999px; cursor:pointer; font-size:12px; font-family:inherit;
}
.lend-txn-del:hover{ background:var(--danger-soft); color:var(--danger); }

/* نموذج الإضافة: اختيار خطة الاسترداد */
.lend-plan-seg{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 4px; }
.lend-plan-seg button{
  flex:1 1 calc(33.333% - 6px); min-width:96px; border:1px solid var(--line);
  background:var(--surface-3); border-radius:var(--radius-small); padding:8px 9px;
  cursor:pointer; font-family:inherit; color:var(--ink); text-align:center;
  display:flex; flex-direction:column; gap:2px;
}
.lend-plan-seg button b{ font-size:12.5px; }
.lend-plan-seg button small{ font-size:10px; color:var(--muted); line-height:1.35; }
.lend-plan-seg button.on{ background:var(--green-soft); border-color:var(--green); }
.lend-plan-seg button.on b{ color:var(--green-deep); }

/* نافذة العملية */
.lend-op-summary{ display:flex; gap:6px; margin:8px 0 4px; }
.lend-op-summary span{
  flex:1; background:var(--surface-3); border-radius:var(--radius-small);
  padding:7px 10px; display:flex; flex-direction:column; gap:1px; font-size:10.5px; color:var(--muted);
}
.lend-op-summary b{ font-size:14px; color:var(--ink); font-variant-numeric:tabular-nums; direction:ltr; text-align:right; }
.lend-op-quick{ display:flex; gap:6px; margin-top:6px; }
.lend-op-quick .d-mini{ flex:1; text-align:center; }

/* رابط الوصول من صفحة الديون (الوجه المقابل: ما لي عند الناس) */
.lend-crosslink{
  width:100%; display:flex; align-items:center; gap:10px; direction:rtl;
  background:var(--surface-3); border:1px solid var(--line); border-radius:var(--radius-small);
  padding:10px 12px; margin-bottom:10px; cursor:pointer; font-family:inherit;
  text-align:start; color:var(--ink);
}
.lend-crosslink:active{ transform:scale(var(--press-scale, .99)); }
.lend-crosslink > i{
  width:var(--ico-box-sm, 28px); height:var(--ico-box-sm, 28px); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-style:normal;
  background:var(--surface-1); border-radius:9px; font-size:14px; color:var(--green-deep);
}
.lend-crosslink > span{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.lend-crosslink b{ font-size:13.5px; }
.lend-crosslink small{ font-size:11px; color:var(--muted); }
.lend-crosslink > em{ color:var(--muted); font-style:normal; }

/* عنوان أقسام التقرير المطبوع */
.lend-print-h{ font-size:15px; color:var(--green-deep); margin:16px 0 8px; }

@media (max-width:430px){
  .lend-hero-main b{ font-size:25px; }
  .lend-detail-actions .btn{ flex:1 1 100%; }
  .lend-plan-seg button{ flex:1 1 100%; }
}
@media print{
  .lend-print-h{ font-size:12pt; break-after:avoid; page-break-after:avoid; }
}
