/* assets/css/custom.css */

/* Hover dokunuşu */
.hover-bg:hover { background-color: var(--bs-light); }

/* Harf çipleri */
.letter-chip{
  width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; font-weight:700; border:1px solid #dee2e6; background:#fff; margin:4px;
}
.letter-chip.pending{ border-color:#adb5bd; color:#6c757d; }
.letter-chip.passed{ background:#fff3cd; border-color:#ffe69c; }
.letter-chip.correct{ background:#d1e7dd; border-color:#a3cfbb; }
.letter-chip.wrong{ background:#f8d7da; border-color:#f1aeb5; }

/* (isteğe bağlı) Tamamen taşma istemediğin özel tablolar için */
.table-fixed td, .table-fixed th{ white-space:nowrap; }

/* Sidebar genişliği (md+) */
.sidebar { width: 260px; }
@media (max-width: 767.98px) { .sidebar { display: none; } }

/* ===== TABLOLAR ===== */
/* Başlıklar tek satır; gövde kelime bazlı kırılır */
.table thead th { white-space: nowrap; }
.table tbody td {
  white-space: normal;
  overflow-wrap: break-word;   /* kelimelerde kır */
  word-break: break-word;      /* eski tarayıcılar için */
}

/* Tablonun yalnızca sarmalayıcısı scroll alsın */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Küçük ekranda tabloyu ferahlat: minimum genişlik ver → sadece sarmalayıcı kayar */
@media (max-width: 576.98px) {
  .table { table-layout: auto; width: 100%; }
  .table-responsive > .table { min-width: 720px; }  /* ihtiyaca göre 640–760 arası oynatabilirsin */
  .letter-chip { width:32px; height:32px; font-size:.9rem; }  /* çipleri küçült */
}

/* Uzun metin sütunu: masaüstünde sınırlı, mobilde serbest */
.cell-text { max-width: 450px; }
@media (max-width: 576.98px) { .cell-text { max-width: 100%; } }

/* Rozet/butonlar hücreyi şişirmesin */
.badge { white-space: nowrap; }
.table .btn { max-width: 100%; }
.table .btn i { pointer-events: none; }

/* Görseller taşmasın */
img, svg { max-width: 100%; height: auto; }

/* Ek güvenlik: inline max-width kullanılan hücreleri mobilde serbest bırak */
@media (max-width: 576.98px) {
  td[style*="max-width:"] { max-width: 100% !important; }
}