/* ══════════════════════════════════════════════════════════════
   المالية — للمالك وحده
   ══════════════════════════════════════════════════════════════
   ‏الداخلُ والخارجُ لونان ثابتان في كلِّ مكان (اجتازا فحصَ عمى الألوان: ΔE ٩٫٢):
   ‏الداخلُ أخضرُ مائيّ والخارجُ برتقاليّ — لا الأحمرُ والأخضرُ المحجوزان للحال. */
:root {
  --fin-in: #1baf7a;
  --fin-out: #eb6834;
  --fin-in-soft: color-mix(in srgb, var(--fin-in) 14%, transparent);
  --fin-out-soft: color-mix(in srgb, var(--fin-out) 14%, transparent);
}
:root[data-theme="dark"] {
  --fin-in: #199e70;
  --fin-out: #d95926;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --fin-in: #199e70; --fin-out: #d95926; }
}

.fin-page { display: grid; gap: var(--sp-5); }
.fin-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.fin-nav { display: inline-flex; align-items: center; gap: 6px; }
.fin-nav .fin-range { min-width: 150px; text-align: center; font-weight: var(--fw-semibold); font-size: 13.5px; }
.fin-badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-full); background: var(--fin-out); color: #fff; font-size: 11px; font-weight: var(--fw-bold);
}
.fin-panel { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 16px; }
.fin-panel h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14px; }
.fin-panel h4 svg { width: 16px; height: 16px; color: var(--text-muted); }
.fin-panel h4 small { margin-inline-start: auto; color: var(--text-muted); font-weight: var(--fw-normal); font-size: 12px; }
.fin-muted { color: var(--text-muted); font-size: 12.5px; }
.fin-num { font-variant-numeric: tabular-nums; }

/* ‏الأرقامُ الثلاثة فوق */
.fin-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.fin-kpi {
  background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 16px 18px; display: grid; gap: 6px; position: relative; overflow: hidden;
}
.fin-kpi::after { content: ''; position: absolute; inset-inline-start: 0; inset-block: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--border-strong); }
.fin-kpi[data-k="in"]::after { background: var(--fin-in); }
.fin-kpi[data-k="out"]::after { background: var(--fin-out); }
.fin-kpi[data-k="net"]::after { background: var(--accent); }
.fin-kpi span { color: var(--text-muted); font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.fin-kpi span svg { width: 15px; height: 15px; }
.fin-kpi b { font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fin-kpi small { color: var(--text-muted); font-size: 12px; }
.fin-kpi[data-neg="1"] b { color: var(--danger-text); }

.fin-two { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 1100px) { .fin-two { grid-template-columns: 1fr; } }

/* ‏ستّةُ أشهر: عمودان لكلِّ شهر، والقيمةُ عند المرور */
.fin-chart { position: relative; }
.fin-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; align-items: end; height: 190px; padding: 6px 4px 0; border-bottom: 1px solid var(--border-subtle); }
.fin-month { display: flex; justify-content: center; align-items: flex-end; gap: 2px; height: 100%; position: relative; }
.fin-bar { width: min(22px, 40%); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.fin-bar[data-k="in"] { background: var(--fin-in); }
.fin-bar[data-k="out"] { background: var(--fin-out); }
.fin-month:hover .fin-bar, .fin-month:focus-visible .fin-bar { filter: brightness(1.08); }
.fin-month:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.fin-labels { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 6px; text-align: center; font-size: 11.5px; color: var(--text-muted); }
.fin-tip {
  position: absolute; top: 0; transform: translateX(50%); pointer-events: none; z-index: 2;
  background: var(--surface-1); border: 1px solid var(--border-default); border-radius: 10px; box-shadow: var(--shadow-md);
  padding: 8px 10px; font-size: 12px; white-space: nowrap; display: grid; gap: 3px;
}
.fin-tip[hidden] { display: none; }
.fin-tip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-inline-end: 6px; }
.fin-legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-secondary); margin-top: 10px; }
.fin-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fin-legend i { width: 10px; height: 10px; border-radius: 3px; }

/* ‏المصروفاتُ على البنود */
.fin-cats { display: grid; gap: 11px; }
.fin-cat-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.fin-cat-row span:last-child { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.fin-cat-bar { height: 6px; border-radius: var(--radius-full); background: var(--surface-2); overflow: hidden; margin-top: 4px; }
.fin-cat-bar i { display: block; height: 100%; border-radius: inherit; }

.fin-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fin-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-full);
  font-size: 12px; background: var(--surface-2); border: 1px solid var(--border-subtle); color: var(--text-secondary);
}
.fin-chip svg { width: 13px; height: 13px; }
.fin-chip[data-k="in"] { background: var(--fin-in-soft); border-color: transparent; }
.fin-chip[data-k="out"] { background: var(--fin-out-soft); border-color: transparent; }

.fin-callout {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-lg);
  background: var(--warning-soft); color: var(--warning-text); font-size: 13.5px;
}
.fin-callout svg { width: 18px; height: 18px; flex: none; }
.fin-callout .btn { margin-inline-start: auto; }

/* ‏القوائم: حركات، واشتراكات، ومستحقّات */
.fin-list { display: grid; }
.fin-row {
  display: grid; grid-template-columns: 90px minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  padding: 11px 6px; border-bottom: 1px solid var(--border-hairline, var(--border-subtle)); font-size: 13.5px;
}
.fin-row:last-child { border-bottom: 0; }
.fin-row time { color: var(--text-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.fin-row .fin-what { min-width: 0; }
.fin-row .fin-what b { font-weight: var(--fw-semibold); }
.fin-row .fin-what small { display: block; color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-amt { text-align: end; font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); white-space: nowrap; }
.fin-amt small { display: block; color: var(--text-muted); font-weight: var(--fw-normal); font-size: 11.5px; }
.fin-amt[data-k="in"] { color: var(--success-text); }
.fin-src { font-size: 11px; padding: 1px 8px; border-radius: var(--radius-full); background: var(--surface-2); color: var(--text-muted); }
.fin-x { border: 0; background: none; color: var(--text-muted); cursor: pointer; padding: 5px; border-radius: 8px; display: grid; place-items: center; }
.fin-x:hover { background: var(--danger-soft); color: var(--danger-text); }
.fin-x svg { width: 15px; height: 15px; }
@media (max-width: 700px) {
  .fin-row { grid-template-columns: minmax(0, 1fr) auto; }
  .fin-row time { grid-column: 1 / -1; }
}
.fin-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.fin-filters .form-input { width: auto; min-width: 140px; }

/* ‏نافذةُ الحركة */
.fin-form { display: grid; gap: 14px; }
.fin-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; background: var(--surface-2); border-radius: var(--radius-md); }
.fin-seg button {
  border: 0; border-radius: 8px; padding: 9px; font: inherit; font-weight: var(--fw-semibold); cursor: pointer;
  background: transparent; color: var(--text-secondary);
}
.fin-seg button[aria-pressed="true"][data-k="out"] { background: var(--fin-out); color: #fff; }
.fin-seg button[aria-pressed="true"][data-k="in"] { background: var(--fin-in); color: #fff; }
.fin-amount { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.fin-amount input { font-size: 22px; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.fin-cur { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: var(--radius-md); }
.fin-cur button { border: 0; border-radius: 8px; padding: 6px 12px; font: inherit; cursor: pointer; background: transparent; color: var(--text-secondary); font-weight: var(--fw-semibold); }
.fin-cur button[aria-pressed="true"] { background: var(--surface-1); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.fin-catpick { display: flex; flex-wrap: wrap; gap: 6px; }
.fin-catpick button {
  border: 1px solid var(--border-default); border-radius: var(--radius-full); padding: 5px 12px; font: inherit; font-size: 13px;
  background: var(--surface-1); color: var(--text-secondary); cursor: pointer;
}
.fin-catpick button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: var(--fw-semibold); }
.fin-form label { display: grid; gap: 5px; font-size: 13px; color: var(--text-secondary); }
.fin-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fin-hint { color: var(--text-muted); font-size: 12px; }

/* ‏المرتّبات */
.fin-pay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.fin-pay { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 16px; display: grid; gap: 12px; }
.fin-pay[data-paid="1"] { border-color: color-mix(in srgb, var(--success) 35%, var(--border-subtle)); }
.fin-pay-top { display: flex; align-items: center; gap: 10px; }
.fin-avatar { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: var(--fw-bold); flex: none; }
.fin-pay-top .fin-who { flex: 1; min-width: 0; }
.fin-pay-top .fin-who b { display: block; }
.fin-pay-top .fin-who small { color: var(--text-muted); font-size: 12px; }
.fin-plan-btn { border: 1px dashed var(--border-default); background: none; border-radius: var(--radius-md); padding: 4px 10px; font: inherit; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.fin-plan-btn:hover { border-color: var(--accent); color: var(--accent); }
.fin-hours { display: grid; gap: 5px; }
.fin-hours-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-secondary); }
.fin-hours-bar { height: 8px; border-radius: var(--radius-full); background: var(--surface-2); overflow: hidden; }
.fin-hours-bar i { display: block; height: 100%; background: var(--fin-in); border-radius: inherit; }
.fin-lines { display: grid; gap: 2px; border-top: 1px solid var(--border-hairline, var(--border-subtle)); padding-top: 8px; }
.fin-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 6px 0; font-size: 13px; align-items: center; }
.fin-line > span:last-child { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.fin-line small { display: block; color: var(--text-muted); font-size: 11.5px; }
.fin-pen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.fin-pen span { font-size: 11px; padding: 1px 7px; border-radius: var(--radius-full); background: var(--fin-out-soft); color: var(--text-secondary); }
.fin-stars { display: inline-flex; gap: 2px; direction: ltr; }
.fin-stars button { border: 0; background: none; padding: 2px; cursor: pointer; color: var(--border-strong); line-height: 0; }
.fin-stars button[data-on="1"] { color: #eda100; }
.fin-stars button[data-on="1"] svg { fill: currentColor; }
.fin-stars button svg { width: 20px; height: 20px; }
.fin-stars button:focus-visible { outline: 2px solid var(--accent); border-radius: 4px; }
.fin-adj { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; gap: 6px; }
.fin-total { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--border-subtle); padding-top: 10px; }
.fin-total b { font-size: 24px; font-variant-numeric: tabular-nums; }
.fin-total small { color: var(--text-muted); font-size: 12px; }
.fin-paid { display: inline-flex; align-items: center; gap: 6px; color: var(--success-text); font-weight: var(--fw-semibold); font-size: 13px; }
.fin-paid svg { width: 16px; height: 16px; }
.fin-planform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; background: var(--surface-2); padding: 10px; border-radius: var(--radius-md); }
.fin-planform label { display: grid; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.fin-planform .fin-plan-acts { grid-column: 1 / -1; display: flex; gap: 6px; justify-content: flex-end; }

/* ‏الاشتراكات */
.fin-subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.fin-sub { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 14px; display: grid; gap: 8px; }
.fin-sub[data-due="over"] { border-color: color-mix(in srgb, var(--danger) 45%, var(--border-subtle)); }
.fin-sub[data-due="soon"] { border-color: color-mix(in srgb, var(--warning) 45%, var(--border-subtle)); }
.fin-sub-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.fin-sub-top b { font-size: 15px; }
.fin-sub-amt { font-size: 18px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.fin-sub-acts { display: flex; gap: 6px; flex-wrap: wrap; }

/* ‏رسائلُ البنك */
.fin-cap { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 14px; display: grid; gap: 10px; }
.fin-cap pre {
  margin: 0; white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 13px; line-height: 1.7;
  background: var(--surface-2); border-radius: var(--radius-md); padding: 10px 12px; color: var(--text-secondary); max-height: 140px; overflow: auto;
}
/* ‏وخانةُ السعر تظهر مع الريال والدولار وحدهما — فالصفُّ يلتفّ ولا يترك عمودا فاضيا */
.fin-cap-fields { display: flex; flex-wrap: wrap; gap: 8px; }
.fin-cap-fields > * { flex: 1 1 120px; min-width: 0; }
.fin-cap-fields > [id^="fc-a-"] { flex: 2 1 160px; }
.fin-cap-fields > [hidden] { display: none; }
.fin-cap-acts { display: flex; gap: 8px; justify-content: flex-end; }
.fin-setup details { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 12px 16px; }
.fin-setup summary { cursor: pointer; font-weight: var(--fw-semibold); }
.fin-setup ol { margin: 10px 0 0; padding-inline-start: 20px; line-height: 1.9; font-size: 13.5px; color: var(--text-secondary); }
.fin-code {
  direction: ltr; text-align: left; font-family: ui-monospace, 'Cascadia Mono', monospace; font-size: 12px;
  background: var(--surface-2); border-radius: var(--radius-md); padding: 10px 12px; white-space: pre; overflow: auto; max-height: 260px;
}
.fin-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.fin-copy input { direction: ltr; font-family: ui-monospace, 'Cascadia Mono', monospace; font-size: 12px; }
.fin-empty { color: var(--text-muted); font-size: 13px; padding: 8px 2px; }

/* ‏خمسةُ تبويباتٍ أعرضُ من شاشة موبايل: تُمرَّر وحدَها ولا تمدّ الصفحة */
.fin-toolbar .seg-filters { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.fin-toolbar .seg-filters::-webkit-scrollbar { display: none; }
.fin-toolbar .seg-btn { white-space: nowrap; flex: none; }
@media (max-width: 700px) {
  .fin-toolbar { flex-direction: column; align-items: stretch; }
  .fin-toolbar .toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
  .fin-pay-grid, .fin-subs { grid-template-columns: 1fr; }
  .fin-bars, .fin-labels { gap: 6px; }
}

/* ── ‏مرتبُ المالك ── */
.fin-owner .fin-avatar { background: var(--text-strong); color: var(--surface-1); }
.fin-owner-in { max-width: 150px; text-align: end; }
.fin-owner-acts { display: inline-flex; align-items: center; gap: 8px; }

/* ── ‏الإعلانات ── */
.fin-ads { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.fin-ad { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 16px 18px; display: grid; gap: 10px; align-content: start; }
.fin-ad-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fin-ad-top b { font-size: 15px; color: var(--text-strong); }
.fin-ad .fin-tag { font-size: 11.5px; font-weight: var(--fw-bold); padding: 2px 9px; border-radius: 6px; border: 1px solid var(--border-default); }
.fin-ad .fin-tag[data-k="ok"] { color: var(--success-text); border-color: color-mix(in srgb, var(--success) 50%, transparent); background: var(--success-soft); }
.fin-ad .fin-tag[data-k="bad"] { color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 50%, transparent); background: var(--danger-soft); }
.fin-ad-num b { display: block; font-size: 24px; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.fin-ad-num small { font-size: 12px; }
.fin-ad-err { margin: 0; font-size: 12.5px; color: var(--danger-text); overflow-wrap: anywhere; }
.fin-ad p { margin: 0; }
.fin-ad-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.fin-how summary { cursor: pointer; font-size: 13px; font-weight: var(--fw-bold); }
.fin-how ol { margin: 8px 0 0; padding-inline-start: 20px; font-size: 13px; line-height: 1.8; }