/* ============================================
   Mobil uyum — tüm temalardan SONRA yüklenir.
   Inline grid'ler ve v2'nin !important kurallarını ezmek için
   seçiciler "html body[class]" ile başlar (özgüllük > body.theme-v2 ...).
   ============================================ */
@media (max-width: 720px) {
  html body[class] .pm-container {
    border-radius: 0 !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
  }

  /* --- Topbar: ortadaki meta (gün/saat/isim) absolute-center yerine alt satıra --- */
  html body[class] .pm-topbar {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    padding: 10px 12px 6px !important;
  }
  html body[class] .pm-topbar-actions {
    position: static !important;
    transform: none !important;
    order: 3 !important;
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 4px 12px !important;
    white-space: normal !important;
  }
  html body[class] .pm-topbar-date,
  html body[class] .pm-topbar-right {
    gap: 2px !important;
  }
  html body[class] .pm-topbar [x-data] > div[x-show] {
    width: calc(100vw - 24px) !important;
    max-width: 320px !important;
  }

  /* --- Ana sekmeler: mobilde kaydırma yerine 2 satıra sar (4'erli). Tüm
     sekmeler görünür, kaydırma yok → ekran okuyucu dostu. --- */
  html body[class] .nav-tabs {
    margin: 0 12px 10px !important;
    flex-wrap: wrap !important;
    overflow: hidden !important;
  }
  html body[class] .nav-tab {
    flex: 1 0 25% !important;
    max-width: 25% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    padding: 8px 4px !important;
    font-size: 12px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  }

  /* --- İçerik + sağ menü: tek kolon, menü içeriğin altına --- */
  html body[class] .pm-container div[style*="grid-template-columns: 1fr 220px"],
  html body[class] .pm-container div[style*="grid-template-columns:1fr 280px"],
  html body[class] .pm-container div[style*="grid-template-columns: 200px 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* V1 karakter paneli 3-kolon istatistikler */
  html body[class] .pm-container div[style*="grid-template-columns: 1.1fr 0.95fr 0.95fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* --- V2 İstatistikler grid'i: sabit etiket kolonları (90px/64px) mobilde
     sağ kolonu ekrandan taşırıyor. Etiketleri auto yapıp değerleri sola
     yaklaştır, boşluk/padding'i kıs, fontu biraz küçült → 3 kolon sığsın. --- */
  html body[class] .v2-stats {
    padding: 9px 12px !important;
    column-gap: 10px !important;
    font-size: 12px !important;
  }
  html body[class] .v2-stats .v2-row {
    grid-template-columns: auto minmax(0, 1fr) !important;
    column-gap: 5px !important;
    font-size: 12px !important;
    min-width: 0 !important;
  }
  /* Bar satırlarında etiket SABİT genişlik — yoksa "Mutluluk:" uzun olduğu için
     o satırın barı daralıp "100 / 100" sayısı kesiliyor; sabitle barlar eşit/hizalı. */
  html body[class] .v2-stats .v2-bar-row {
    grid-template-columns: 60px minmax(0, 1fr) !important;
    column-gap: 5px !important;
    font-size: 12px !important;
    min-width: 0 !important;
  }
  html body[class] .v2-stats .v2-row .val,
  html body[class] .v2-stats .v2-row .lbl {
    min-width: 0 !important;
  }
  /* Para ve diğer kolon-atamalı satırlar da aynı dar şablonu kullansın */
  html body[class] .v2-stats .v2-row.money {
    grid-template-columns: auto minmax(0, 1fr) !important;
    column-gap: 5px !important;
  }

  /* Bar üstü sayılar ("100 / 100") mobilde dar barda sığmıyor → küçült. */
  html body[class] .v2-stats .v2-bar .num {
    font-size: 9px !important;
    padding-right: 4px !important;
  }

  /* Son Giriş "Online": mobilde "Online" yazısı yerine mesaj başlığındaki
     gibi halkalı yuvarlak yeşil nokta göster. Yazıyı gizle (font-size:0 DEĞİL;
     o ::before dikey hizasını bozuyordu), ::before'u nokta yap. */
  html body[class] .v2-stats .v2-online .v2-online-t {
    display: none !important;
  }
  html body[class] .v2-stats .v2-online::before {
    content: "" !important;
    display: inline-block !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: #5fae37 !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45) !important;
    margin: 0 !important;
    vertical-align: middle !important;
  }

  html body[class] .notification-strip { margin-left: 12px !important; margin-right: 12px !important; }
  html body[class] .pm-flash-wrap { margin-left: 12px; margin-right: 12px; }

  /* Geniş tablolar paneli taşırmasın */
  html body[class] .panel-body { overflow-x: auto; }

  /* --- Ek: diğer içerik+yan menü / sabit kolon düzenleri → tek kolon --- */
  html body[class] .pm-container div[style*="grid-template-columns: 1fr 280px"],
  html body[class] .pm-container div[style*="grid-template-columns:1fr 280px"],
  html body[class] .pm-container div[style*="grid-template-columns: 1fr 240px"],
  html body[class] .pm-container div[style*="grid-template-columns: 240px 1fr"],
  html body[class] .pm-container div[style*="grid-template-columns: 120px 1fr"],
  html body[class] .pm-container div[style*="grid-template-columns: 110px 1fr"],
  html body[class] .pm-container div[style*="grid-template-columns: 60px 1fr 2fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* --- Kart gridleri: 3-4 kolon → 2 kolon --- */
  html body[class] .pm-container div[style*="grid-template-columns: 1fr 1fr 1fr 1fr"],
  html body[class] .pm-container div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* --- Form kontrolleri taşmasın --- */
  html body[class] .panel-body input,
  html body[class] .panel-body textarea,
  html body[class] .panel-body select {
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* === Çok dar ekranlar (telefon dikey, <=480px) === */
@media (max-width: 480px) {
  /* 2 kolonlu inline gridler → tek kolon */
  html body[class] .pm-container div[style*="grid-template-columns: 1fr 1fr"],
  html body[class] .pm-container div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Sekmeler biraz daha sıkı (4'erli wrap'te "Sıralamalar" taşmasın) */
  html body[class] .nav-tab { padding: 7px 3px !important; font-size: 11px !important; }
  /* Panel başlıkları taşmasın */
  html body[class] .panel-header { font-size: 12.5px !important; }
}