/* ============================================================
   Page: finans (Genel Bakış / hub) — sayfaya özel stiller.
   SADECE token'lar (variables.css) kullanılır; yeni renk yok.
   KPI kartları için projede .hs-stat-card varsa onu KULLAN; bu dosya
   yalnız hub'a özgü parçaları (hesap kartları, nakit akışı, vadeler) tanımlar.
   Yükleme: resources/css/pages/finans.css → ana CSS pipeline'ına ekle.
   ============================================================ */

/* — Başlık — */
.fin-page        { padding: var(--space-6) var(--space-7, 28px) var(--space-12); }
.fin-head        { margin-bottom: var(--space-6); }
.fin-crumb       { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.fin-title       { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.02em; color: var(--text); margin: 7px 0 4px; }
.fin-sub         { font-size: var(--fs-base); color: var(--text-muted); margin: 0; max-width: 660px; line-height: var(--lh-base); }

/* — KPI satırı (projede .hs-stat-card yoksa) — */
.fin-kpi-grid    { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-5); }
.fin-kpi         { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 15px 17px; }
.fin-kpi-label   { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 500; margin-bottom: var(--space-2); }
.fin-kpi-value   { font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: var(--text); margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.fin-kpi-delta   { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.fin-kpi-delta.up   { color: var(--green); }
.fin-kpi-delta.warn { color: var(--yellow); }

/* — Bölüm başlığı — */
.fin-section-title { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em; color: var(--text-muted); margin: 2px 0 var(--space-3); }

/* — Hesap kartları — */
.fin-accounts    { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-5); }
.fin-acc         { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4) 17px; cursor: pointer;
                   transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.fin-acc:hover   { border-color: var(--navy-light); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.fin-acc-head    { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.fin-acc-id      { display: flex; align-items: center; gap: var(--space-3); }
.fin-acc-icon    { width: 38px; height: 38px; border-radius: var(--radius); background: var(--navy-tint); color: var(--navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fin-acc-icon svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
/* Renkli ikon tonları (hub kutucukları — raporlar/ayarlar). Class eklenmezse varsayılan navy kalır. */
.fin-acc-icon--brand  { background: rgba(200, 82, 30, .12); color: var(--brand); }
.fin-acc-icon--green  { background: var(--green-soft);  color: var(--green); }
.fin-acc-icon--blue   { background: var(--blue-soft);   color: var(--blue); }
.fin-acc-icon--red    { background: var(--red-soft);    color: var(--red); }
.fin-acc-icon--yellow { background: var(--yellow-soft); color: var(--yellow); }
.fin-acc-name    { font-size: var(--fs-base); font-weight: 700; color: var(--text); }
.fin-acc-badge   { font-size: var(--fs-xs); font-weight: 700; background: var(--brand-tint); color: var(--brand); padding: 2px 8px; border-radius: var(--radius-full); }
.fin-acc-bal     { font-size: 23px; font-weight: 800; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.fin-acc-bal.is-neg { color: var(--red); }
.fin-acc-sub     { font-size: var(--fs-sm); color: var(--text-muted); margin: 3px 0 9px; }
.fin-acc-foot    { border-top: 1px solid var(--surface-alt); padding-top: 9px; }
.fin-acc-trend   { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.fin-acc-trend.up   { color: var(--green); }
.fin-acc-trend.down { color: var(--red); }
.fin-acc-trend.warn { color: var(--yellow); }

/* — Alt grid: nakit akışı + yaklaşan vadeler — */
.fin-bottom      { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-5); align-items: stretch; }
.fin-bottom--solo { grid-template-columns: 1fr; }   /* Yaklaşan Vadeler yetkiyle gizliyse grafik kartı tam genişlik */
.fin-card        { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; }
.fin-card-head   { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.fin-card-title  { font-size: var(--fs-base); font-weight: 700; color: var(--text); }
.fin-card-meta   { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }

/* Nakit akışı çubuk grafiği (yükseklik inline % ile, veriden) */
.fin-legend      { display: flex; align-items: center; gap: var(--space-4); }
.fin-legend span { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.fin-dot         { width: 10px; height: 10px; border-radius: 3px; }
.fin-dot.in      { background: var(--navy); }
.fin-dot.out     { background: var(--brand-light); }
.fin-bars        { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2); height: 170px; padding: 0 4px; }
.fin-bar-col     { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); height: 100%; }
.fin-bar-pair    { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 4px; width: 100%; }
.fin-bar         { width: 13px; min-height: 4px; border-radius: 5px 5px 0 0; }
.fin-bar.in      { background: var(--navy); }
.fin-bar.out     { background: var(--brand-light); }
.fin-bar-label   { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }

/* Yaklaşan vadeler */
.fin-up-head     { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.fin-up-item     { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--surface-alt); }
.fin-up-chip     { width: 42px; flex-shrink: 0; text-align: center; padding: 5px 0; border-radius: var(--radius); }
.fin-up-chip.pos { background: var(--green-soft); }
.fin-up-chip.neg { background: var(--red-soft); }
.fin-up-day      { font-size: 15px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.fin-up-chip.pos .fin-up-day { color: var(--green); }
.fin-up-chip.neg .fin-up-day { color: var(--red); }
.fin-up-mon      { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-top: 1px; }
.fin-up-body     { flex: 1; min-width: 0; }
.fin-up-title    { font-size: var(--fs-sm); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-up-tag      { font-size: 11px; font-weight: 700; }
.fin-up-tag.pos  { color: var(--green); }
.fin-up-tag.neg  { color: var(--red); }
.fin-up-amount   { font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.fin-up-amount.pos { color: var(--green); }
.fin-up-amount.neg { color: var(--red); }

/* — Responsive — */
@media (max-width: 1180px) {
  .fin-accounts { grid-template-columns: repeat(2, 1fr); }
  .fin-bottom   { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .fin-kpi-grid, .fin-accounts { grid-template-columns: 1fr; }
}