/* ============================================
   SBY - Layout Düzeltmeleri
   index.html'de en son CSS olarak ekle
   ============================================ */

/* Ana içerik alanı — tam genişlik */
.main-content {
  max-width: none !important;
  width: 100% !important;
  padding: 1.5rem 2rem !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Sidebar sabit, içerik esnek */
#app-screen {
  width: 100vw !important;
  overflow: hidden !important;
}

/* Ebeveyn paneli grid — tam genişlik */
.parent-stats-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* Profil sayfası — tam genişlik */
.profile-page {
  max-width: 100% !important;
  width: 100% !important;
}

/* Avatar grid — daha geniş */
.avatar-grid {
  grid-template-columns: repeat(10, 1fr) !important;
}

/* Tema grid */
.theme-grid {
  grid-template-columns: repeat(6, 1fr) !important;
}

/* Profil section */
.profile-section,
.profile-header-card {
  max-width: 100% !important;
}

/* Eğitim layout */
.edu-layout {
  height: auto !important;
  min-height: calc(100vh - 6rem) !important;
}

/* Oyun hub */
.games-hub {
  max-width: 100% !important;
}

.games-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* Mesajlaşma layout */
.messages-layout {
  height: calc(100vh - 5rem) !important;
}

/* Günlük grid */
.entry-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
}

/* Taşmaları önle */
* { box-sizing: border-box !important; }

@media (max-width: 1024px) {
  .parent-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .games-grid        { grid-template-columns: repeat(2, 1fr) !important; }
  .theme-grid        { grid-template-columns: repeat(3, 1fr) !important; }
  .avatar-grid       { grid-template-columns: repeat(8, 1fr) !important; }
}

@media (max-width: 768px) {
  .main-content { padding: 1rem !important; }
  .parent-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .games-grid        { grid-template-columns: repeat(2, 1fr) !important; }
  .theme-grid        { grid-template-columns: repeat(2, 1fr) !important; }
  .avatar-grid       { grid-template-columns: repeat(5, 1fr) !important; }
}