/* ============================================================================
   fiyat-page.css — Muhasebe › Alış Fiyatları  (03.08.2026)

   Tasarım kararı: bu ekran bir "fiyat listesi yöneticisi" DEĞİL.
   Tek işi: kâr hesabının göremediği ciroyu kapatmak.
   Bu yüzden imza öğe = KAPSAMA ŞERİDİ. Geri kalan her şey sessiz.

   🔴 Yalnız design-system.css token'ları. Yeni renk/gölge/font İCAT EDİLMEZ.
   ============================================================================ */

/* === İMZA: kapsama şeridi ================================================= */
.fp-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-xs);
  margin-bottom: var(--space-4);
}
.fp-hero-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.fp-hero-val {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fp-hero-val small { font-size: 18px; font-weight: 600; color: var(--text-tertiary); margin-left: 2px; }

/* Şerit: kapsanan düz bordo, açık kısım TARAMALI —
   "bilinmeyen bölge" hissi versin diye; düz kırmızı sadece "kötü" der. */
.fp-meter {
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--surface-active);
  overflow: hidden;
  display: flex;
}
.fp-meter-ok {
  background: var(--primary);
  transition: width var(--transition-slow);
}
.fp-meter-gap {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--danger-soft) 0 5px,
    #fbdada 5px 10px
  );
  border-left: 1px solid var(--danger);
  transition: width var(--transition-slow);
}
.fp-legend {
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.fp-legend-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-secondary); }
.fp-legend-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.fp-legend-dot.ok { background: var(--primary); }
.fp-legend-dot.gap { background-image: repeating-linear-gradient(-45deg, var(--danger-soft) 0 3px, #fbdada 3px 6px); border: 1px solid var(--danger); }
.fp-legend b { color: var(--text); font-variant-numeric: tabular-nums; }

/* === Boşluk listesi ======================================================= */
.fp-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); border-radius: var(--radius); overflow: hidden; }
.fp-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: var(--space-4);
  align-items: center;
  background: var(--surface);
  padding: var(--space-3) var(--space-4);
  transition: background var(--transition);
}
.fp-row:hover { background: var(--surface-hover); }

/* Etki tutarı satırın BAŞINDA — sıralama gerçekten bilgi taşıyor:
   en üsttekini gir, en çok ciroyu kâra dahil et. */
.fp-impact { text-align: right; }
.fp-impact-val { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; line-height: 1.15; }
.fp-impact-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }

.fp-name { min-width: 0; }
.fp-name-main { font-size: 13.5px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.fp-name-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.fp-sku { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); background: var(--surface-active); padding: 1px 6px; border-radius: var(--radius-sm); }

.fp-entry { display: flex; align-items: center; gap: var(--space-2); }
.fp-entry .input { width: 118px; height: 36px; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.fp-entry .input::-webkit-outer-spin-button,
.fp-entry .input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fp-entry .input[type=number] { -moz-appearance: textfield; }
.fp-suffix { font-size: 12px; color: var(--text-tertiary); margin-left: -4px; }

.fp-msg { grid-column: 1 / -1; font-size: 12px; margin-top: 2px; line-height: 1.45; }
.fp-msg-ok { color: var(--success); }
.fp-msg-err { color: var(--danger); }

/* === Boş durum: davet, ölü ekran değil ==================================== */
.fp-empty { text-align: center; padding: var(--space-10) var(--space-6); }
.fp-empty-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.fp-empty-sub { font-size: 13px; color: var(--text-secondary); }

/* === İkincil: mevcut kategori fiyatları =================================== */
.fp-sub { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.fp-tbl { width: 100%; border-collapse: collapse; }
.fp-tbl th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-tertiary); padding: 0 var(--space-3) var(--space-2); }
.fp-tbl th.num, .fp-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.fp-tbl td { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--border); font-size: 13px; }
.fp-tbl tr:hover td { background: var(--surface-hover); }
.fp-key { font-family: var(--font-mono); font-size: 12px; }
.fp-src { font-size: 11px; color: var(--text-tertiary); overflow-wrap: anywhere; }
.fp-tbl .input { width: 100px; height: 32px; font-size: 13px; text-align: right; }

.fp-note { font-size: 12px; color: var(--text-secondary); margin-top: var(--space-3); line-height: 1.5; }
.fp-note b { color: var(--text); }

/* === Dar ekran ============================================================ */
@media (max-width: 760px) {
  .fp-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .fp-impact { text-align: left; order: -1; }
  .fp-entry { justify-content: flex-start; }
  .fp-hero-val { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-meter-ok, .fp-meter-gap, .fp-row { transition: none; }
}