/* ParaPusula tema v5
   Tek kaynak: renk, yazı, yüzey, kontrol, erişilebilirlik.
   Kullanım: <link rel="stylesheet" href="/static/theme.css?v=1">
   Not: Tailwind CDN sayfaya sonradan stil eklediği için yardımcı sınıfları
   ezen kurallar "body" öneki ile yazıldı. */

/* ---------- Değişkenler ---------- */
:root {
  color-scheme: light;
  --bg-1: #eef2ff; --bg-2: #f5f3ff;
  --ink: #1e1b4b; --ink-muted: #55657a;
  --accent: #6366f1; --accent-strong: #4f46e5; --focus: #4f46e5;
  --glass-bg: rgba(255,255,255,0.58); --glass-bg-strong: rgba(255,255,255,0.76); --glass-bg-solid: rgba(255,255,255,0.94);
  --glass-border: rgba(255,255,255,0.85); --glass-shadow: rgba(99,102,241,0.16); --glass-hi: rgba(255,255,255,0.75);
  --field-bg: rgba(255,255,255,0.62); --field-border: rgba(99,102,241,0.22); --field-bg-focus: rgba(255,255,255,0.95);
  /* Yazı ölçeği: Tailwind'deki text-[10/11/12/13px] sınıflarının karşılığı */
  --fs-2xs: 0.75rem; --fs-xs: 0.78rem; --fs-sm: 0.8125rem; --fs-md: 0.875rem;
  --icon-btn: 32px; --period-h: 28px;
}
html.dark {
  color-scheme: dark;
  --bg-1: #0f172a; --bg-2: #1e1b4b;
  --ink: #e2e8f0; --ink-muted: #a3b1c6; --focus: #a5b4fc;
  --glass-bg: rgba(30,27,75,0.55); --glass-bg-strong: rgba(30,27,75,0.78); --glass-bg-solid: rgba(30,27,75,0.96);
  --glass-border: rgba(255,255,255,0.10); --glass-shadow: rgba(0,0,0,0.4); --glass-hi: rgba(255,255,255,0.06);
  --field-bg: rgba(255,255,255,0.07); --field-border: rgba(255,255,255,0.16); --field-bg-focus: rgba(255,255,255,0.12);
}
/* Telefonda yazılar bir kademe büyür */
@media (max-width: 640px) {
  :root { --fs-2xs: 0.75rem; --fs-xs: 0.8125rem; --fs-sm: 0.875rem; --fs-md: 0.9375rem; }
}
/* Dokunmatik ekranda hedefler büyür */
@media (pointer: coarse) {
  :root { --icon-btn: 36px; --period-h: 34px; }
}

/* ---------- Taban ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  color: var(--ink);
  min-height: 100vh; min-height: 100dvh;
  position: relative; overflow-x: hidden;
  font-size: 0.9375rem;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.font-display { font-family: 'Outfit', system-ui, sans-serif; }
.brand-text { background: linear-gradient(90deg, #6366f1, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.maskable-amount, table td, table th, .tnum { font-variant-numeric: tabular-nums; }

/* ---------- Yazı boyutu: sabit px sınıflarını ölçekli hale getir ---------- */
body .text-\[10px\] { font-size: var(--fs-2xs); }
body .text-\[11px\] { font-size: var(--fs-xs); }
body .text-\[12px\] { font-size: var(--fs-sm); }
body .text-\[13px\] { font-size: var(--fs-md); }

/* ---------- Kontrast ---------- */
html:not(.dark) body .text-slate-400 { color: #64748b; }
html:not(.dark) body .text-slate-500 { color: #55657a; }
html:not(.dark) body .text-emerald-600 { color: #047857; }
html:not(.dark) body .text-amber-600 { color: #b45309; }
html:not(.dark) body .text-sky-600 { color: #0369a1; }
html.dark .text-slate-800 { color: #e2e8f0 !important; }
html.dark .text-slate-700 { color: #cbd5e1 !important; }
html.dark .text-slate-600 { color: #a3b1c6 !important; }
html.dark .text-slate-500 { color: #a3b1c6 !important; }
html.dark .text-slate-400 { color: #94a3b8 !important; }
html.dark [class*="bg-white/"] { background-color: rgba(255,255,255,0.06) !important; }
html.dark [class*="hover:bg-white"]:hover { background-color: rgba(255,255,255,0.14) !important; }
::placeholder { color: #64748b; opacity: 1; }
html.dark ::placeholder { color: #94a3b8; }

/* ---------- Arka plan ışıkları ---------- */
.aurora-blob { position: fixed; border-radius: 9999px; filter: blur(90px); opacity: 0.3; z-index: 0; animation: drift 24s ease-in-out infinite alternate; pointer-events: none; will-change: transform; }
.blob-1 { width: 420px; height: 420px; background: #6366f1; top: -140px; left: -120px; }
.blob-2 { width: 380px; height: 380px; background: #10b981; top: 120px; right: -160px; animation-delay: -6s; }
.blob-3 { width: 340px; height: 340px; background: #f43f5e; bottom: -120px; left: 25%; animation-delay: -12s; }
@keyframes drift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(50px,-40px) scale(1.1); } }
@media (max-width: 640px) { .aurora-blob { opacity: 0.22; filter: blur(70px); } }
@media (prefers-reduced-motion: reduce) {
  .aurora-blob { animation: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Cam yüzeyler ---------- */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 8px 32px var(--glass-shadow);
  position: relative; z-index: 1;
}
.glass-header {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid var(--glass-border);
  position: sticky; top: 0; z-index: 20;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card, .glass-header { background: var(--glass-bg-solid); }
}

/* ---------- Form alanları ---------- */
.glass-input { background: var(--field-bg); border: 1px solid var(--field-border); color: var(--ink); transition: background-color .15s, border-color .15s, box-shadow .15s; }
.glass-input:focus { background: var(--field-bg-focus); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.25); outline: none; }
html.dark .glass-input { background: var(--field-bg); border-color: var(--field-border); }
html.dark .glass-input:focus { background: var(--field-bg-focus); border-color: var(--accent); }
@media (max-width: 640px) {
  /* iPhone, 16px altındaki alanlara odaklanınca sayfayı yakınlaştırır */
  body .glass-input { font-size: 16px; }
}

/* ---------- Sekmeler, butonlar ---------- */
.glass-tab-active { background: rgba(255,255,255,0.92); }
html.dark .glass-tab-active { background: rgba(255,255,255,0.16); }
.icon-btn { width: var(--icon-btn); height: var(--icon-btn); display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; transition: background-color .15s, color .15s, transform .1s; flex-shrink: 0; }
.icon-btn:active, .period-btn:active { transform: scale(0.96); }
.period-btn { min-height: var(--period-h); padding: 3px 10px; border-radius: 8px; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-muted); transition: background-color .15s, color .15s, transform .1s; }
.period-btn.active { background: rgba(79,70,229,0.92); color: #ffffff; }
button:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- Odak (klavye) ---------- */
:where(a, button, summary, input, select, textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Kaydırma çubuğu ---------- */
.scroll-box { scrollbar-width: thin; scrollbar-color: rgba(99,102,241,0.35) transparent; }
.scroll-box::-webkit-scrollbar { width: 5px; height: 5px; }
.scroll-box::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.3); border-radius: 10px; }

/* ---------- İkonlar (static/icons.svg) ---------- */
.ic { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.2em; flex: none; }
.ic-lg { width: 1.6em; height: 1.6em; }

/* ---------- Bileşen: Son İşlemler (dashboard) ----------
   Telefonda 4 sütunlu tablo yerine iki satırlı kart:
   [tarih | tutar] / [açıklama + rozetler | düzenle sil] */
@media (max-width: 640px) {
  .scroll-box:has(#tx_table_body) { max-height: min(65vh, 560px); }
  #tx_table_body { display: block; }
  #tx_table_body tr[data-tx-type] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "date amt" "desc act";
    column-gap: 0.5rem; row-gap: 0.15rem;
    padding: 0.55rem 0.1rem;
  }
  /* filterTx satırı gizlerken satır içi display:none yazıyor, bunu koru */
  #tx_table_body tr[data-tx-type][style*="display: none"] { display: none !important; }
  #tx_table_body td { display: block; padding: 0; width: auto; }
  #tx_table_body td:nth-child(1) { grid-area: date; font-size: 0.75rem; }
  #tx_table_body td:nth-child(2) { grid-area: desc; font-size: 0.8125rem; line-height: 1.35; min-width: 0; }
  #tx_table_body td:nth-child(3) { grid-area: amt; font-size: 0.8125rem; text-align: right; align-self: center; }
  #tx_table_body td:nth-child(4) { grid-area: act; display: flex; gap: 0.375rem; justify-content: flex-end; align-items: flex-start; }
  #tx_table_body .text-\[10px\] { font-size: 0.6875rem; }
  #tx_table_body .icon-btn { width: 30px; height: 30px; border-radius: 8px; }
  #tx_table_body .icon-btn svg { width: 15px; height: 15px; }
}

/* ---------- Bileşen: Birikim Geçmişi (yatırım) ----------
   Telefonda 7 sütunlu tablo yerine üç satırlı kart:
   [tarih | değer] / [enstrüman | düzenle sil] / [adet | birim | maliyet] */
@media (max-width: 640px) {
  .scroll-box:has(#history_body) { max-height: min(65vh, 560px); }
  #history_body { display: block; }
  #history_body tr[data-category] {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    grid-template-areas: "date date val val" "inst inst inst act" "qty unit cost cost";
    column-gap: 0.5rem; row-gap: 0.2rem;
    padding: 0.55rem 0.1rem;
  }
  #history_body tr[data-category][style*="display: none"] { display: none !important; }
  #history_body td { display: block; padding: 0; width: auto; text-align: left; }
  #history_body td:nth-child(1) { grid-area: date; font-size: 0.75rem; }
  #history_body td:nth-child(2) { grid-area: inst; min-width: 0; line-height: 1.35; }
  #history_body td:nth-child(3) { grid-area: qty; }
  #history_body td:nth-child(4) { grid-area: unit; }
  #history_body td:nth-child(5) { grid-area: cost; }
  #history_body td:nth-child(6) { grid-area: val; text-align: right; font-size: 0.875rem; }
  #history_body td:nth-child(7) { grid-area: act; display: flex; gap: 0.375rem; justify-content: flex-end; align-items: flex-start; }
  #history_body td:nth-child(3), #history_body td:nth-child(4), #history_body td:nth-child(5) { font-size: 0.75rem; color: var(--ink-muted); }
  #history_body td:nth-child(3)::before { content: "Adet"; display: block; font-size: 0.6875rem; opacity: 0.85; }
  #history_body td:nth-child(4)::before { content: "Birim"; display: block; font-size: 0.6875rem; opacity: 0.85; }
  #history_body td:nth-child(5)::before { content: "Maliyet"; display: block; font-size: 0.6875rem; opacity: 0.85; }
  #history_body .text-\[10px\] { font-size: 0.6875rem; }
  #history_body .icon-btn { width: 30px; height: 30px; border-radius: 8px; }
  #history_body .icon-btn svg { width: 15px; height: 15px; }
}

/* ---------- Mobil tablo düzeltmeleri (başlık satırı olan tablolar için) ---------- */
@media (max-width: 640px) {
  table:has(#tx_table_body), table:has(#history_body) { display: block; width: 100%; }
  table:has(#history_body) thead { display: none; }
  #history_tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  #history_tabs::-webkit-scrollbar { display: none; }
  #history_tabs > button { white-space: nowrap; flex: none; }
}

/* ---------- Gömülü içerik (TradingView vb.) ----------
   Üst belge koyu, iframe içeriği açık temalıysa tarayıcı iframe'e opak beyaz zemin çizer.
   Iframe'in kendi renk şemasını "normal" bırakmak şeffaflığı korur. */
iframe { color-scheme: normal; }

/* ---------- Yüzen tema butonu (başlığında tema butonu olmayan sayfalar) ---------- */
.pp-theme-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; color: var(--ink); cursor: pointer;
  background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
  box-shadow: 0 6px 20px var(--glass-shadow);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: transform .1s, background-color .15s;
}
.pp-theme-fab:active { transform: scale(0.94); }
.pp-theme-fab .ic { width: 1.3rem; height: 1.3rem; }
@media print { .pp-theme-fab { display: none; } }