/* THSM Tabloları Mobile/Tablet Düzeltmesi - V9 COLUMN WIDTH OPTIMIZED */

/* =================================== */
/* 1. ANA TABLO: Harf|Arapça|Toplam|Sureler (ÇALIŞIYOR) */
/* =================================== */
@media (max-width: 1023px) {
    /* Container için scroll */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Ana tablo - İlk min-w-full table (Harf|Arapça|Toplam|Sureler) */
    table.min-w-full.bg-white.dark\:bg-gray-800.border-collapse:first-of-type {
        min-width: 600px !important;
        table-layout: fixed !important;
    }
    
    /* 1. Harf sütunu */
    table.min-w-full.bg-white.dark\:bg-gray-800.border-collapse:first-of-type th:nth-child(1),
    table.min-w-full.bg-white.dark\:bg-gray-800.border-collapse:first-of-type td:nth-child(1) {
        width: 80px !important;
        text-align: left !important;
        padding: 8px 6px !important;
        font-size: 12px !important;
    }
    
    /* 2. Arapça sütunu - ÇALIŞIYOR */
    table.min-w-full.bg-white.dark\:bg-gray-800.border-collapse:first-of-type th:nth-child(2),
    table.min-w-full.bg-white.dark\:bg-gray-800.border-collapse:first-of-type td:nth-child(2) {
        width: 100px !important;
        text-align: center !important;
        padding: 8px 4px !important;
        font-size: 16px !important;
        font-family: 'Scheherazade New', serif !important;
        white-space: nowrap !important;
    }
    
    /* 3. Toplam sütunu - ÇALIŞIYOR */
    table.min-w-full.bg-white.dark\:bg-gray-800.border-collapse:first-of-type th:nth-child(3),
    table.min-w-full.bg-white.dark\:bg-gray-800.border-collapse:first-of-type td:nth-child(3) {
        width: 80px !important;
        text-align: center !important;
        padding: 8px 4px !important;
        font-size: 12px !important;
        font-weight: bold !important;
    }
    
    /* 4. Sureler sütunu */
    table.min-w-full.bg-white.dark\:bg-gray-800.border-collapse:first-of-type th:nth-child(4),
    table.min-w-full.bg-white.dark\:bg-gray-800.border-collapse:first-of-type td:nth-child(4) {
        width: 340px !important;
        text-align: left !important;
        padding: 8px 6px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }
}

/* =================================== */
/* 2. ANA ARAPÇA TABLO DÜZELTMESİ - LANDSCAPE PHONE */  
/* =================================== */
@media (min-width: 640px) and (max-width: 900px) and (orientation: landscape) {
    
    /* Ana Arapça tablo - tutarlı font boyutları */
    #tablo-basi .quranic-initials-table .cell-harf,
    #tablo-basi .quranic-initials-table .cell-toplam,
    #tablo-basi .quranic-initials-table .col-harf,
    #tablo-basi .quranic-initials-table .col-toplam {
        font-size: 12px !important;
        font-weight: 600 !important;
        text-align: center !important;
        padding: 4px !important;
    }
    
    /* Harf sütunları eşit genişlik */
    #tablo-basi .quranic-initials-table .col-harf {
        width: 45px !important;
        min-width: 45px !important;
        max-width: 45px !important;
    }
    
    /* Toplam sütunu */
    #tablo-basi .quranic-initials-table .col-toplam {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        font-weight: 700 !important;
    }
}

/* =================================== */
/* 3. KOMBINASYON TABLOSU - LANDSCAPE PHONE */  
/* =================================== */
@media (min-width: 640px) and (max-width: 900px) and (orientation: landscape) {
    
    /* COMBINATION TABLE CONTAINER - CONTAINER İÇİNDE KALACAK */
    .thsm-summary-table-2 {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 -15px !important; /* Daha az taşma */
        padding: 0 15px !important;
        display: block !important;
        max-width: 100% !important; /* Container sınırları içinde */
        position: relative !important;
    }
    
    /* SCROLLBAR STYLE - Daha ince */
    .thsm-summary-table-2::-webkit-scrollbar {
        height: 6px !important;
    }
    
    .thsm-summary-table-2::-webkit-scrollbar-track {
        background: #f8f9fa !important;
        border-radius: 8px !important;
    }
    
    .thsm-summary-table-2::-webkit-scrollbar-thumb {
        background: #6b7280 !important;
        border-radius: 8px !important;
    }
    
    /* COMBINATION TABLE - OPTİMİZE GENİŞLİK */
    .thsm-summary-table-2 table {
        min-width: 750px !important; /* 800px → 750px (daha compact) */
        width: 750px !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
        margin: 0 auto !important; /* Ortalı */
        display: table !important;
    }
    
    /* SÜTUN GENİŞLİKLERİ - YATAY TELEFON OPTİMİZE */
    
    /* 1. Sure/Chapter - GENİŞLETİLDİ */
    .thsm-summary-table-2 th:nth-child(1), 
    .thsm-summary-table-2 td:nth-child(1) {
        width: 130px !important; /* 110px → 130px (19. Maryam için) */
        min-width: 130px !important;
        max-width: 130px !important;
        text-align: left !important;
        padding: 6px 4px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* 2. Kombinasyon/Combination */
    .thsm-summary-table-2 th:nth-child(2),
    .thsm-summary-table-2 td:nth-child(2) {
        width: 120px !important; /* 130px → 120px (biraz daha dar) */
        min-width: 120px !important;
        max-width: 120px !important;
        text-align: left !important;
        padding: 6px 4px !important;
        font-size: 11px !important;
        font-family: 'Scheherazade New', serif !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* 3. Ta sütunu */
    .thsm-summary-table-2 th:nth-child(3),
    .thsm-summary-table-2 td:nth-child(3) {
        width: 80px !important; /* 95px → 80px (daha compact) */
        min-width: 80px !important;
        max-width: 80px !important;
        text-align: center !important;
        padding: 6px 3px !important;
        font-size: 11px !important;
    }
    
    /* 4. Ha sütunu - MERKEZ HİZALAMA DÜZELTİLDİ */
    .thsm-summary-table-2 th:nth-child(4),
    .thsm-summary-table-2 td:nth-child(4) {
        width: 80px !important; /* 95px → 80px */
        min-width: 80px !important;
        max-width: 80px !important;
        text-align: center !important; /* Merkez hizalama zorla */
        padding: 6px 3px !important;
        font-size: 11px !important;
    }
    
    /* 5. Sin sütunu */
    .thsm-summary-table-2 th:nth-child(5),
    .thsm-summary-table-2 td:nth-child(5) {
        width: 80px !important; /* 95px → 80px */
        min-width: 80px !important;
        max-width: 80px !important;
        text-align: center !important;
        padding: 6px 3px !important;
        font-size: 11px !important;
    }
    
    /* 6. Mim sütunu */
    .thsm-summary-table-2 th:nth-child(6),
    .thsm-summary-table-2 td:nth-child(6) {
        width: 80px !important; /* 95px → 80px */
        min-width: 80px !important;
        max-width: 80px !important;
        text-align: center !important;
        padding: 6px 3px !important;
        font-size: 11px !important;
    }
    
    /* 7. Toplam/Total sütunu */
    .thsm-summary-table-2 th:nth-child(7),
    .thsm-summary-table-2 td:nth-child(7) {
        width: 90px !important; /* 120px → 90px (daha compact) */
        min-width: 90px !important;
        max-width: 90px !important;
        text-align: center !important;
        padding: 6px 3px !important;
        font-size: 11px !important;
        font-weight: bold !important;
    }
    
    /* TÜM HÜCRELER - GENEL AYARLAR */
    .thsm-summary-table-2 th,
    .thsm-summary-table-2 td {
        vertical-align: middle !important;
        border: 1px solid #e5e7eb !important;
        line-height: 1.3 !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }
    
    /* TOTAL WIDTH: 130+120+80+80+80+80+90 = 660px (750px içine sığar) */
}

/* =================================== */
/* 3. GENEL TABLET/MOBILE (LANDSCAPE PHONE HARİÇ) */  
/* =================================== */
@media (max-width: 1023px) and not (min-width: 640px) and (max-width: 900px) and (orientation: landscape) {
    
    /* Standard mobile/tablet approach */
    .thsm-summary-table-2 {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 -15px !important;
        padding: 0 15px !important;
    }
    
    .thsm-summary-table-2 table {
        min-width: 850px !important;
        table-layout: fixed !important;
    }
    
    /* Standard column widths */
    .thsm-summary-table-2 th,
    .thsm-summary-table-2 td {
        padding: 8px 4px !important;
        font-size: 12px !important;
    }
}

/* =================================== */
/* 4. ÖZET TABLOSU: #tablo-sonu (6 sütunlu) */
/* =================================== */
@media (max-width: 1023px) {
    /* Özet tablo container */
    #tablo-sonu {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 20px -10px !important;
        padding: 0 10px !important;
    }
    
    /* Özet tablosu */
    #tablo-sonu .quranic-initials-table {
        min-width: 600px !important;
        width: 100% !important;
        table-layout: fixed !important;
        font-size: 12px !important;
    }
    
    /* SADECE ÖZET TABLO - Ana Arapça tablo etkilenmemeli */
    div#tablo-sonu .quranic-initials-table th,
    div#tablo-sonu .quranic-initials-table td {
        padding: 8px 4px !important;
        font-size: 12px !important;
        font-weight: normal !important;
        text-align: center !important;
        vertical-align: middle !important;
    }
    
    /* TÜRKÇE ÖZET TABLO SÜTUN GENİŞLİKLERİ - 6 SÜTUN (Sure + 4 harf + Toplam) */
    
    /* 1. Sure sütunu */
    #tablo-sonu .quranic-initials-table th:nth-child(1),
    #tablo-sonu .quranic-initials-table td:nth-child(1) {
        width: 18% !important;
        text-align: left !important;
    }
    
    /* 2-5. Harf sütunları: ط ه س م - Eşit genişlik */
    #tablo-sonu .quranic-initials-table th:nth-child(2),
    #tablo-sonu .quranic-initials-table td:nth-child(2),
    #tablo-sonu .quranic-initials-table th:nth-child(3),
    #tablo-sonu .quranic-initials-table td:nth-child(3),
    #tablo-sonu .quranic-initials-table th:nth-child(4),
    #tablo-sonu .quranic-initials-table td:nth-child(4),
    #tablo-sonu .quranic-initials-table th:nth-child(5),
    #tablo-sonu .quranic-initials-table td:nth-child(5) {
        width: 16% !important;
        text-align: center !important;
        font-weight: normal !important;
    }
    
    /* 6. Toplam sütunu - vurgulu */
    #tablo-sonu .quranic-initials-table th:nth-child(6),
    #tablo-sonu .quranic-initials-table td:nth-child(6) {
        width: 18% !important;
        font-weight: 600 !important;
        text-align: center !important;
    }
}

/* =================================== */
/* 5. KÜÇÜK MOBİL (480px altı) */
/* =================================== */
@media (max-width: 480px) {
    table.min-w-full.bg-white.dark\:bg-gray-800.border-collapse:first-of-type {
        min-width: 500px !important;
        font-size: 10px !important;
    }
    
    .thsm-summary-table-2 table {
        min-width: 600px !important; /* Küçük mobil için de daraltıldı */
        font-size: 10px !important;
    }
    
    #tablo-sonu .quranic-initials-table {
        min-width: 500px !important;
        font-size: 10px !important;
    }
}

/* =================================== */
/* 6. DEBUG MODE - BOYUT BİLGİSİ (ÖPSİYONEL) */
/* =================================== */
@media (min-width: 640px) and (max-width: 900px) and (orientation: landscape) {
    /* Debug - yatay telefonda combination table görünür mü */
    .thsm-summary-table-2 {
        /* border: 2px solid #10b981 !important; */ /* Debug için - opsiyonel */
    }
    
    /* Debug message - opsiyonel */
    .thsm-summary-table-2::before {
        /* content: "YATAY TELEFON: 750px tablo | 7 sütun optimize" !important;
        display: block !important;
        background: #10b981 !important;
        color: white !important;
        padding: 4px !important;
        text-align: center !important;
        font-size: 10px !important;
        font-weight: bold !important; */
    }
}