/* ═══════════════════════════════════════════════════════════
   NoChain — Mobile Override CSS
   Inline style'ları CSS attribute selector ile ezer.
   Bu dosya app.css'den SONRA yüklenir.
   ═══════════════════════════════════════════════════════════ */

/* ── Tablet & Mobil (≤ 860px) ────────────────────────────── */
@media (max-width: 860px) {

  /* ■ TÜM inline grid-template-columns'ları 1 sütuna indir */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* ■ Sabit px genişlikli sidebar/panel'leri genişlet */
  [style*="width:280px"],
  [style*="width:300px"],
  [style*="width:320px"],
  [style*="width:360px"],
  [style*="width:400px"],
  [style*="width:420px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ■ hero sağ panel sıraya al (mobilde önce) */
  .hero-right { order: -1; }

  /* ■ Büyük font'ları küçült */
  [style*="font-size:40px"],
  [style*="font-size:44px"],
  [style*="font-size:46px"],
  [style*="font-size:48px"] {
    font-size: 26px !important;
  }
  [style*="font-size:36px"],
  [style*="font-size:38px"] {
    font-size: 24px !important;
  }
  [style*="font-size:32px"],
  [style*="font-size:34px"] {
    font-size: 20px !important;
  }
  [style*="font-size:28px"],
  [style*="font-size:26px"] {
    font-size: 18px !important;
  }

  /* ■ Gap'leri küçült */
  [style*="gap:60px"] { gap: 20px !important; }
  [style*="gap:56px"] { gap: 18px !important; }
  [style*="gap:48px"] { gap: 16px !important; }

  /* ■ Padding'leri küçült */
  [style*="padding:52px"],
  [style*="padding:56px"],
  [style*="padding:64px"] {
    padding: 28px 16px !important;
  }
  [style*="padding:48px"] { padding: 24px 16px !important; }
  [style*="padding-top:48px"] { padding-top: 28px !important; }
  [style*="padding-top:64px"] { padding-top: 32px !important; }
  [style*="padding-top:72px"] { padding-top: 36px !important; }
}

/* ── Sadece Mobil (≤ 768px) ──────────────────────────────── */
@media (max-width: 768px) {

  /* ■ Temel layout */
  .container { padding: 0 12px 20px !important; }
  .card { padding: 14px !important; }
  .topbar { padding: 0 12px !important; gap: 6px !important; }
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0)) !important; }

  /* ■ Bottom nav göster */
  .mob-nav { display: flex !important; }
  .footer { display: none !important; }
  .nav-username { display: none !important; }

  /* ■ Nav hamburger */
  .nav-toggle { display: flex !important; }
  .nav-links {
    display: none !important;
    position: fixed !important;
    top: 60px !important; left: 0 !important; right: 0 !important;
    bottom: calc(60px + env(safe-area-inset-bottom, 0)) !important;
    background: var(--bg2) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px !important;
    gap: 2px !important;
    overflow-y: auto !important;
    z-index: 140 !important;
    border-top: 1px solid var(--line) !important;
  }
  body.nav-open .nav-links { display: flex !important; }
  .navlink { height: auto !important; padding: 12px 14px !important; border-radius: var(--r2) !important; border-bottom: none !important; }

  /* ■ Toast */
  .toast { left: 12px !important; right: 12px !important; bottom: 72px !important; }

  /* ■ Dashboard — header */
  .dash-header-inner { padding: 0 12px !important; }
  .dash-header-top { flex-direction: column !important; gap: 10px !important; }
  .dash-header-top > div:last-child { text-align: left !important; }
  .dash-grid { padding: 0 12px !important; }
  .dash-tabs { flex-wrap: wrap !important; }
  .dash-tab { flex: 0 0 50% !important; border-bottom: 1px solid var(--line) !important; }
  .dash-tab:nth-child(odd) { border-right: 1px solid var(--line) !important; }
  .dash-tab:last-child { border-right: none !important; }
  .dash-tab-val { font-size: 15px !important; }

  /* ■ Dashboard — quick actions */
  .quick-btn { min-width: 0 !important; padding: 10px 6px !important; }
  .quick-btn-ico { font-size: 18px !important; }
  .quick-btn-lbl { font-size: 10px !important; }

  /* ■ Dashboard — portföy barı */
  .port-bar { margin: 6px 0 12px !important; }

  /* ■ Market */
  .mkt-wrap {
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .mkt-sidebar {
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
    max-height: 280px !important;
    overflow-y: auto !important;
  }
  #chartBox {
    height: 300px !important;
    min-height: 300px !important;
  }
  .mkt-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
  .tf-row { flex-wrap: wrap !important; }
  .ohlc-bar { gap: 10px !important; flex-wrap: wrap !important; padding: 8px 12px !important; }

  /* ■ Stats strip */
  .stats-strip { flex-direction: column !important; }
  .stats-strip-item { border-right: none !important; border-bottom: 1px solid var(--line) !important; padding: 14px 16px !important; }

  /* ■ Tablolar */
  .table { font-size: 12px !important; }
  .table th, .table td { padding: 8px 10px !important; }

  /* ■ Hero */
  .home-hero { padding: 28px 0 20px !important; }
  .hero-banner { padding: 32px 0 !important; }
  .hero-stats {
    gap: 14px !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
    flex-wrap: wrap !important;
  }
  .hero-stat-val { font-size: 20px !important; }

  /* ■ Feature grid */
  .feat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .feat-card { padding: 16px !important; }

  /* ■ Market widget (home) */
  .mkt-widget { box-shadow: none !important; }

  /* ■ Addr box */
  .addr-text { font-size: 10px !important; word-break: break-all !important; }

  /* ■ P2P sayfası */
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns:3fr 1fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns:1fr 3fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ■ Flex row'ları sarmala */
  .row-between { flex-wrap: wrap !important; gap: 8px !important; }

  /* ■ Kart içi padding'ler */
  [style*="padding:18px 20px"],
  [style*="padding:16px 20px"],
  [style*="padding:14px 18px"],
  [style*="padding:14px 20px"] {
    padding: 12px 14px !important;
  }

  /* ■ Büyük portföy değeri */
  .balance-big { font-size: 26px !important; }
  #totalUsdVal { font-size: 26px !important; }

  /* ■ Sabit px genişlikleri sıfırla */
  [style*="min-width:280px"],
  [style*="min-width:300px"],
  [style*="min-width:320px"] {
    min-width: 0 !important;
  }

  /* ■ Overflowing horizontal tables */
  .table-responsive, div > table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

  /* ■ Scrollbar şeffaflaştır mobilde */
  ::-webkit-scrollbar { width: 3px; height: 3px; }
}

/* ── Küçük Telefon (≤ 480px) ─────────────────────────────── */
@media (max-width: 480px) {

  .feat-grid { grid-template-columns: 1fr !important; }
  .hero-title, h1 { font-size: 22px !important; }
  .balance-big { font-size: 22px !important; }
  .stat-val { font-size: 16px !important; }
  .brand-text .name { font-size: 15px !important; }
  .lang-btn { padding: 5px 7px !important; font-size: 11px !important; }

  /* Stat chip'leri küçük ekranda gizle (sadece fiyat kalsın) */
  .mkt-header .stat-chip:not(:first-child) { display: none !important; }

  /* Hero istatistik ayraçları gizle */
  .hero-stats > div[style*="width:1px"] { display: none !important; }

  /* Dash tab 1 sütun */
  .dash-tab { flex: 0 0 100% !important; border-right: none !important; }

  /* Quick actions wrap */
  [style*="display:flex"][style*="flex-wrap:wrap"] { gap: 6px !important; }

  /* Admin paneli */
  .admin-grid { grid-template-columns: 1fr !important; }
}

/* ── PWA Standalone ──────────────────────────────────────── */
@media (display-mode: standalone) {
  .topbar {
    padding-top: env(safe-area-inset-top, 0) !important;
  }
  .mob-nav {
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
    height: calc(60px + env(safe-area-inset-bottom, 0)) !important;
  }
}