/* THSM Tables Mobile/Tablet Fix - V9 COLUMN WIDTH OPTIMIZED */

/* =================================== */
/* 1. MAIN TABLE: Letter|Arabic|Total|Chapters (WORKING) */
/* =================================== */
@media (max-width: 1023px) {
    /* Container scroll */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Main table - First min-w-full table (Letter|Arabic|Total|Chapters) */
    table.min-w-full.bg-white.dark\:bg-gray-800.border-collapse:first-of-type {
        min-width: 600px !important;
        table-layout: fixed !important;
    }
    
    /* 1. Letter column */
    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. Arabic column - WORKING */
    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. Total column - WORKING */
    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. Chapters column */
    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. MAIN ARABIC TABLE FIX - LANDSCAPE PHONE */  
/* =================================== */
@media (min-width: 640px) and (max-width: 900px) and (orientation: landscape) {
    
    /* Main Arabic table - consistent font sizes */
    #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;
    }
    
    /* Letter columns equal width */
    #tablo-basi .quranic-initials-table .col-harf {
        width: 45px !important;
        min-width: 45px !important;
        max-width: 45px !important;
    }
    
    /* Total column */
    #tablo-basi .quranic-initials-table .col-toplam {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        font-weight: 700 !important;
    }
}

/* =================================== */
/* 3. COMBINATION TABLE - LANDSCAPE PHONE */  
/* =================================== */
@media (min-width: 640px) and (max-width: 900px) and (orientation: landscape) {
    
    /* COMBINATION TABLE CONTAINER - STAYS IN CONTAINER */
    .thsm-summary-table-2 {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 -15px !important; /* Less overflow */
        padding: 0 15px !important;
        display: block !important;
        max-width: 100% !important; /* Within container bounds */
        position: relative !important;
    }
    
    /* SCROLLBAR STYLE - Thinner */
    .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 - OPTIMIZED WIDTH */
    .thsm-summary-table-2 table {
        min-width: 750px !important; /* 800px → 750px (more compact) */
        width: 750px !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
        margin: 0 auto !important; /* Centered */
        display: table !important;
    }
    
    /* COLUMN WIDTHS - LANDSCAPE PHONE OPTIMIZED */
    
    /* 1. Chapter - EXPANDED */
    .thsm-summary-table-2 th:nth-child(1), 
    .thsm-summary-table-2 td:nth-child(1) {
        width: 130px !important; /* 110px → 130px (for "19. Mary") */
        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. Combination */
    .thsm-summary-table-2 th:nth-child(2),
    .thsm-summary-table-2 td:nth-child(2) {
        width: 120px !important; /* 130px → 120px (slightly narrower) */
        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 column */
    .thsm-summary-table-2 th:nth-child(3),
    .thsm-summary-table-2 td:nth-child(3) {
        width: 80px !important; /* 95px → 80px (more compact) */
        min-width: 80px !important;
        max-width: 80px !important;
        text-align: center !important;
        padding: 6px 3px !important;
        font-size: 11px !important;
    }
    
    /* 4. Ha column - CENTER ALIGNMENT FIXED */
    .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; /* Force center alignment */
        padding: 6px 3px !important;
        font-size: 11px !important;
    }
    
    /* 5. Seen column */
    .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 column */
    .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. Total column */
    .thsm-summary-table-2 th:nth-child(7),
    .thsm-summary-table-2 td:nth-child(7) {
        width: 90px !important; /* 120px → 90px (more 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;
    }
    
    /* ALL CELLS - GENERAL SETTINGS */
    .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 (fits in 750px) */
}

/* =================================== */
/* 3. GENERAL TABLET/MOBILE (EXCLUDING LANDSCAPE PHONE) */  
/* =================================== */
@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. SUMMARY TABLE: #tablo-sonu (6 columns) */
/* =================================== */
@media (max-width: 1023px) {
    /* Summary table container */
    #tablo-sonu {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 20px -10px !important;
        padding: 0 10px !important;
    }
    
    /* Summary table */
    #tablo-sonu .quranic-initials-table {
        min-width: 600px !important;
        width: 100% !important;
        table-layout: fixed !important;
        font-size: 12px !important;
    }
    
    /* ONLY SUMMARY TABLE - Main Arabic table should not be affected */
    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;
    }
    
    /* ENGLISH SUMMARY TABLE COLUMN WIDTHS - 7 COLUMNS (Chapter + Initial Letters + 4 letters + Total) */
    
    /* 1. Chapter column */
    #tablo-sonu .quranic-initials-table th:nth-child(1),
    #tablo-sonu .quranic-initials-table td:nth-child(1) {
        width: 15% !important;
        text-align: left !important;
    }
    
    /* 2. Initial Letters column */
    #tablo-sonu .quranic-initials-table th:nth-child(2),
    #tablo-sonu .quranic-initials-table td:nth-child(2) {
        width: 18% !important;
        text-align: left !important;
    }
    
    /* 3-6. Letter columns: ط ه س م - Equal width */
    #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),
    #tablo-sonu .quranic-initials-table th:nth-child(6),
    #tablo-sonu .quranic-initials-table td:nth-child(6) {
        width: 13% !important;
        text-align: center !important;
        font-weight: normal !important;
    }
    
    /* 7. Total column - highlighted */
    #tablo-sonu .quranic-initials-table th:nth-child(7),
    #tablo-sonu .quranic-initials-table td:nth-child(7) {
        width: 15% !important;
        font-weight: 600 !important;
        text-align: center !important;
    }
}

/* =================================== */
/* 5. SMALL MOBILE (under 480px) */
/* =================================== */
@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; /* Also narrowed for small mobile */
        font-size: 10px !important;
    }
    
    #tablo-sonu .quranic-initials-table {
        min-width: 500px !important;
        font-size: 10px !important;
    }
}

/* =================================== */
/* 6. DEBUG MODE - SIZE INFO (OPTIONAL) */
/* =================================== */
@media (min-width: 640px) and (max-width: 900px) and (orientation: landscape) {
    /* Debug - check if landscape phone mode is detected */
    .thsm-summary-table-2 {
        /* border: 2px solid #10b981 !important; */ /* For debugging - optional */
    }
    
    /* Debug message - optional */
    .thsm-summary-table-2::before {
        /* content: "LANDSCAPE PHONE: 750px table | 7 columns optimized" !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; */
    }
}