/* 
   İsm Sayfası İçin Mobil Fix
   Allah sayfası referans alınarak oluşturuldu
   Problem: 3 rakamlı ayet numaraları (118) mobilde satır kırılıyor
*/

/* SADECE MOBILDE AKTIF - İSM SAYFASI RESPONSIVE */
@media (max-width: 768px) {
    /* İsm sayfası tablo - normal genişlik */
    .harf-table {
        width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
        border: 1px solid #e5e7eb !important;
    }
    
    /* İsm sayfası tablo container - NO SCROLL */
    .table-container {
        overflow-x: visible !important;
        max-width: 100% !important;
    }
    
    /* Genel padding küçültme - Allah referansı - GÜÇLÜ SPECIFICITY */
    .harf-table tbody th, 
    .harf-table tbody td,
    .harf-table th, 
    .harf-table td {
        padding: 4px !important;
        font-size: 12px !important;
        vertical-align: middle !important; /* top → middle (rakamları ortala) */
        border: 1px solid #e5e7eb !important;
    }
    
    /* Sure sütunu - dar + ortalanmış */
    .harf-table th.surah-col,
    .harf-table td.surah-col,
    .harf-table .cell-sure {  
        width: 15% !important;
        max-width: 40px !important;
        text-align: center !important;
        font-size: 11px !important;
        padding: 3px 2px !important; /* Vertical padding artırıldı */
        white-space: nowrap !important; /* Sayı kırılmasın */
        vertical-align: middle !important; /* Ortalama */
        line-height: 1.3 !important; /* Daha rahat */
    }
    
    /* Ayet sütunu - SORUNLU ALAN - ortalanmış + biraz büyük - SÜPER GÜÇ */
    .harf-table tbody tr td.cell-ayet,
    .harf-table tbody td.cell-ayet,
    .harf-table td.cell-ayet,
    .harf-table th.verse-col,
    .harf-table td.verse-col,
    .harf-table .cell-ayet {  
        width: 12% !important; /* 15% yerine 12% - daha dar */
        max-width: 35px !important; /* 40px yerine 35px */
        text-align: center !important;
        font-size: 11px !important; /* 10px → 11px biraz büyüttük */
        padding: 3px 1px !important; /* 1px → 3px vertical padding - ortalama için */
        white-space: nowrap !important; /* ÖNEMLİ: 118 gibi sayılar kırılmasın */
        line-height: 1.3 !important; /* 1.2 → 1.3 biraz daha rahat */
        vertical-align: middle !important; /* Ortalama - SÜPER GÜÇLÜ */
    }
    
    /* Arapça metin sütunu - genişlik artırıldı (Allah referansı) */
    .harf-table th.arabic-text,
    .harf-table td.arabic-text,
    .harf-table .cell-metin {
        width: 63% !important; /* 60% yerine 63% - daha geniş */
        white-space: normal !important;
        word-wrap: break-word !important;
        line-height: 1.6 !important;
        font-size: 14px !important;
        padding: 6px 4px !important;
        font-family: 'Scheherazade New', serif !important;
        direction: rtl !important;
    }
    
    /* Count sütunu - dar + ortalanmış */
    .harf-table th.count-col,
    .harf-table td.count-col,
    .harf-table .cell-harf {  
        width: 10% !important;
        max-width: 35px !important;
        text-align: center !important;
        font-size: 11px !important;
        font-weight: bold !important;
        padding: 3px 2px !important; /* Vertical padding artırıldı */
        white-space: nowrap !important;
        vertical-align: middle !important; /* Ortalama */
        line-height: 1.3 !important; /* Daha rahat */
    }
    
    /* Tablo başlık stilleri (Allah referansı) */
    .harf-table thead th {
        background-color: #f9fafb !important;
        font-weight: 600 !important;
        text-align: center !important;
        border-bottom: 2px solid #e5e7eb !important;
        font-size: 10px !important; /* Header yazıları için daha küçük font */
        line-height: 1.2 !important; /* Sıkıştırılmış satır */
        padding: 4px 2px !important; /* Daha az padding */
    }
    
    /* Toplam satırı özel stili */
    .total-row td {
        font-weight: bold !important;
        background-color: #faf5ff !important; /* Mor ton */
        padding: 6px 4px !important;
        font-size: 12px !important;
    }
    
    .totals-label {
        font-size: 11px !important;
        padding: 4px !important;
    }
    
    .grand-total {
        font-size: 14px !important;
        color: #9C27B0 !important; /* İsm teması mor */
        font-weight: bold !important;
    }
    
    /* Dark mode desteği (Allah referansı) */
    .dark .harf-table {
        border: 1px solid #374151 !important;
    }
    
    .dark .harf-table th,
    .dark .harf-table td {
        border: 1px solid #374151 !important;
    }
    
    .dark .harf-table thead th {
        background-color: #1f2937 !important;
        border-bottom: 2px solid #374151 !important;
    }
    
    .dark .total-row td {
        background-color: rgba(156, 39, 176, 0.2) !important;
    }
}

/* Extra küçük ekranlar için (iPhone SE gibi) */
@media (max-width: 375px) {
    .harf-table .cell-ayet {
        font-size: 10px !important; /* 9px → 10px biraz büyüttük */
        max-width: 30px !important;
        padding: 2px 0px !important; /* 0px → 2px vertical padding */
        vertical-align: middle !important;
    }
    
    .harf-table .cell-sure {
        font-size: 10px !important;
        max-width: 35px !important;
        padding: 2px !important; /* Vertical padding eklendi */
        vertical-align: middle !important;
    }
    
    .harf-table .cell-harf {
        padding: 2px !important; /* Count için de vertical padding */
        vertical-align: middle !important;
    }
}