/* ============================================
   COURSES TABLE - MOBILE SAME AS DESKTOP
   Desktop table pattern maintained on mobile
   Horizontal scrolling enabled
   Mobile Only (max-width: 767px)
   Desktop: UNCHANGED
   ============================================ */

@media (max-width: 767px) {
    
    /* Table section - full width on mobile */
    .page-courses .main-content .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }
    .page-courses .main-content .container > section {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .page-courses .main-content .container > section > div:last-child {
        margin-left: -8px !important;
        margin-right: -8px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* ============================================
       1. REMOVE ALL BLOCK-LEVEL CONVERSIONS
       Force table elements to maintain table display
       ============================================ */
    
    /* Prevent any CSS from converting table to block */
    div[style*="overflow-x: auto"] table,
    table[style*="width: 100%"],
    table {
        display: table !important;
        table-layout: auto !important;
    }
    
    /* Force thead to remain table-header-group */
    div[style*="overflow-x: auto"] table thead,
    table[style*="width: 100%"] thead,
    table thead {
        display: table-header-group !important;
    }
    
    /* Force tbody to remain table-row-group */
    div[style*="overflow-x: auto"] table tbody,
    table[style*="width: 100%"] tbody,
    table tbody {
        display: table-row-group !important;
    }
    
    /* Force tr to remain table-row (CRITICAL - prevents vertical stacking) */
    div[style*="overflow-x: auto"] table tr,
    table[style*="width: 100%"] tr,
    table tr,
    div[style*="overflow-x: auto"] table thead tr,
    div[style*="overflow-x: auto"] table tbody tr,
    table[style*="width: 100%"] thead tr,
    table[style*="width: 100%"] tbody tr,
    /* Override inline styles */
    div[style*="overflow-x: auto"] table tr[style*="background-color"],
    table[style*="width: 100%"] tr[style*="background-color"] {
        display: table-row !important;
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        border-spacing: 0 !important;
        width: 100% !important;
        border-collapse: collapse !important;
    }
    
    /* Remove any gaps between rows - COMPREHENSIVE */
    div[style*="overflow-x: auto"] table tbody tr + tr,
    table[style*="width: 100%"] tbody tr + tr,
    div[style*="overflow-x: auto"] table tbody tr:not(:first-child),
    table[style*="width: 100%"] tbody tr:not(:first-child),
    div[style*="overflow-x: auto"] table thead tr + tr,
    table[style*="width: 100%"] thead tr + tr {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Ensure first row has no top margin */
    div[style*="overflow-x: auto"] table tbody tr:first-child,
    table[style*="width: 100%"] tbody tr:first-child,
    div[style*="overflow-x: auto"] table thead tr:first-child,
    table[style*="width: 100%"] thead tr:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Ensure last row has no bottom margin */
    div[style*="overflow-x: auto"] table tbody tr:last-child,
    table[style*="width: 100%"] tbody tr:last-child,
    div[style*="overflow-x: auto"] table thead tr:last-child,
    table[style*="width: 100%"] thead tr:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Force td/th to remain table-cell (CRITICAL - prevents block stacking) */
    div[style*="overflow-x: auto"] table td,
    div[style*="overflow-x: auto"] table th,
    table[style*="width: 100%"] td,
    table[style*="width: 100%"] th,
    table td,
    table th {
        display: table-cell !important;
        margin: 0 !important;
        padding: 0 !important;
        border-spacing: 0 !important;
    }
    
    /* Override ALL inline padding styles to prevent extra spacing */
    div[style*="overflow-x: auto"] table th[style*="padding"],
    table[style*="width: 100%"] th[style*="padding"],
    div[style*="overflow-x: auto"] table td[style*="padding"],
    table[style*="width: 100%"] td[style*="padding"] {
        margin: 0 !important;
    }
    
    /* ============================================
       2. TABLE CONTAINER - FIT SINGLE SCREEN (no scroll)
       ============================================ */
    
    div[style*="overflow-x: auto"] {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }
    
    /* ============================================
       3. TABLE - FIT 5 COLUMNS IN SINGLE SCREEN
       Sr | Course Name | Duration | Eligibility | Action
       ============================================ */
    
    div[style*="overflow-x: auto"] table,
    table[style*="width: 100%"],
    table[style*="margin-top: 10px"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        font-size: clamp(9px, 2.2vw, 11px) !important;
        display: table !important;
        table-layout: fixed !important;
        cell-spacing: 0 !important;
        cell-padding: 0 !important;
    }
    
    /* ============================================
       4. TABLE HEADER - COMPACT BUT SAME LAYOUT
       ============================================ */
    
    div[style*="overflow-x: auto"] table thead th,
    table[style*="width: 100%"] thead th,
    div[style*="overflow-x: auto"] table thead th[style*="padding"],
    table[style*="width: 100%"] thead th[style*="padding"] {
        padding: clamp(4px, 1vw, 6px) 3px !important;
        text-align: center !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        font-size: clamp(8px, 2vw, 10px) !important;
        font-weight: 600 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        display: table-cell !important;
        margin: 0 !important;
    }
    
    /* Column widths - Action minimal, Course Name wider */
    div[style*="overflow-x: auto"] table thead th:nth-child(1),
    table[style*="width: 100%"] thead th:nth-child(1),
    div[style*="overflow-x: auto"] table tbody td:nth-child(1),
    table[style*="width: 100%"] tbody td:nth-child(1) { width: 8% !important; }
    div[style*="overflow-x: auto"] table thead th:nth-child(2),
    table[style*="width: 100%"] thead th:nth-child(2),
    div[style*="overflow-x: auto"] table tbody td:nth-child(2),
    table[style*="width: 100%"] tbody td:nth-child(2) { width: 49% !important; }
    div[style*="overflow-x: auto"] table thead th:nth-child(3),
    table[style*="width: 100%"] thead th:nth-child(3),
    div[style*="overflow-x: auto"] table tbody td:nth-child(3),
    table[style*="width: 100%"] tbody td:nth-child(3) { width: 12% !important; }
    div[style*="overflow-x: auto"] table thead th:nth-child(4),
    table[style*="width: 100%"] thead th:nth-child(4),
    div[style*="overflow-x: auto"] table tbody td:nth-child(4),
    table[style*="width: 100%"] tbody td:nth-child(4) { width: 14% !important; }
    div[style*="overflow-x: auto"] table thead th:nth-child(5),
    table[style*="width: 100%"] thead th:nth-child(5),
    div[style*="overflow-x: auto"] table tbody td:nth-child(5),
    table[style*="width: 100%"] tbody td:nth-child(5) { width: 17% !important; }
    
    /* Sr. column (first column) - Ultra compact */
    div[style*="overflow-x: auto"] table thead th:first-child,
    table[style*="width: 100%"] thead th:first-child,
    div[style*="overflow-x: auto"] table thead th:nth-child(1),
    table[style*="width: 100%"] thead th:nth-child(1) {
        padding: clamp(4px, 1vw, 6px) 2px !important;
        text-align: center !important;
    }
    
    /* Course Name header - left align, same font size */
    div[style*="overflow-x: auto"] table thead th:nth-child(2),
    table[style*="width: 100%"] thead th:nth-child(2) {
        text-align: left !important;
        padding: clamp(4px, 1vw, 6px) 4px !important;
        font-size: 10px !important;
    }
    
    /* Duration header (3rd column) */
    div[style*="overflow-x: auto"] table thead th:nth-child(3),
    table[style*="width: 100%"] thead th:nth-child(3) {
        padding: clamp(4px, 1vw, 6px) 2px !important;
        text-align: center !important;
    }
    
    /* Eligibility header (4th column) */
    div[style*="overflow-x: auto"] table thead th:nth-child(4),
    table[style*="width: 100%"] thead th:nth-child(4) {
        padding: clamp(4px, 1vw, 6px) 2px !important;
        text-align: center !important;
    }
    
    /* Action header (5th column) - compact left-right */
    div[style*="overflow-x: auto"] table thead th:last-child,
    table[style*="width: 100%"] thead th:last-child,
    div[style*="overflow-x: auto"] table thead th:nth-child(5),
    table[style*="width: 100%"] thead th:nth-child(5) {
        padding: clamp(4px, 1vw, 6px) 1px !important;
        text-align: center !important;
    }
    
    /* ============================================
       5. TABLE CELLS - COMPACT PADDING
       ============================================ */
    
    div[style*="overflow-x: auto"] table tbody td,
    table[style*="width: 100%"] tbody td,
    div[style*="overflow-x: auto"] table tbody td[style*="padding"],
    table[style*="width: 100%"] tbody td[style*="padding"] {
        padding: clamp(3px, 0.8vw, 5px) 3px !important;
        text-align: center !important;
        border: 1px solid #ddd !important;
        font-size: clamp(8px, 2vw, 10px) !important;
        line-height: 1.25 !important;
        vertical-align: middle !important;
        display: table-cell !important;
        margin: 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Sr. column (first column) in tbody */
    div[style*="overflow-x: auto"] table tbody td:nth-child(1),
    table[style*="width: 100%"] tbody td:nth-child(1) {
        padding: 3px 2px !important;
        text-align: center !important;
    }
    
    /* Course name column - left align, same font size for all */
    div[style*="overflow-x: auto"] table tbody td:nth-child(2),
    table[style*="width: 100%"] tbody td:nth-child(2),
    div[style*="overflow-x: auto"] table tbody td:nth-child(2)[style*="font-weight"],
    table[style*="width: 100%"] tbody td:nth-child(2)[style*="font-weight"],
    div[style*="overflow-x: auto"] table tbody td:nth-child(2)[style*="color"],
    table[style*="width: 100%"] tbody td:nth-child(2)[style*="color"] {
        text-align: left !important;
        padding: 3px 4px !important;
        font-size: 10px !important;
    }
    
    /* Duration column (3rd column) */
    div[style*="overflow-x: auto"] table tbody td:nth-child(3),
    table[style*="width: 100%"] tbody td:nth-child(3) {
        padding: 3px 2px !important;
        text-align: center !important;
    }
    
    /* Eligibility column (4th column) */
    div[style*="overflow-x: auto"] table tbody td:nth-child(4),
    table[style*="width: 100%"] tbody td:nth-child(4) {
        padding: 3px 2px !important;
        text-align: center !important;
    }
    
    /* Action column (5th column) - compact left-right margin */
    div[style*="overflow-x: auto"] table tbody td:nth-child(5),
    table[style*="width: 100%"] tbody td:nth-child(5) {
        padding: 3px 1px !important;
        text-align: center !important;
    }
    
    /* ============================================
       6. ALTERNATING ROW COLORS - MAINTAIN
       ============================================ */
    
    div[style*="overflow-x: auto"] table tbody tr[style*="background-color: #fff"],
    table[style*="width: 100%"] tbody tr[style*="background-color: #fff"] {
        background-color: #fff !important;
    }
    
    div[style*="overflow-x: auto"] table tbody tr[style*="background-color: #f9f9f9"],
    table[style*="width: 100%"] tbody tr[style*="background-color: #f9f9f9"] {
        background-color: #f9f9f9 !important;
    }
    
    /* Header row in tbody */
    div[style*="overflow-x: auto"] table tbody tr[style*="background-color: var(--primary-red)"],
    table[style*="width: 100%"] tbody tr[style*="background-color: var(--primary-red)"] {
        background-color: #c62828 !important;
        color: white !important;
    }
    
    div[style*="overflow-x: auto"] table tbody tr[style*="background-color: var(--primary-red)"] td,
    table[style*="width: 100%"] tbody tr[style*="background-color: var(--primary-red)"] td {
        padding: clamp(10px, 2.5vw, 12px) clamp(8px, 2vw, 10px) !important;
        text-align: center !important;
        font-size: clamp(13px, 3.5vw, 15px) !important;
        font-weight: bold !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        margin: 0 !important;
    }
    
    /* Header row in tbody - Sr. column spacing */
    div[style*="overflow-x: auto"] table tbody tr[style*="background-color: var(--primary-red)"] td:first-child,
    table[style*="width: 100%"] tbody tr[style*="background-color: var(--primary-red)"] td:first-child,
    div[style*="overflow-x: auto"] table tbody tr[style*="background-color: var(--primary-red)"] td:nth-child(1),
    table[style*="width: 100%"] tbody tr[style*="background-color: var(--primary-red)"] td:nth-child(1) {
        padding: clamp(10px, 2.5vw, 12px) clamp(4px, 1vw, 6px) !important;
    }
    
    /* ============================================
       7. ACTION BUTTONS - COMPACT
       ============================================ */
    
    /* Action column Know more button - exclude accordion Read more link */
    div[style*="overflow-x: auto"] table tbody td:last-child a:not(.course-accordion-read-more),
    table[style*="width: 100%"] tbody td:last-child a:not(.course-accordion-read-more) {
        display: inline-block !important;
        padding: 4px 4px !important;
        background-color: #c62828 !important;
        color: white !important;
        text-decoration: none !important;
        border-radius: 3px !important;
        font-size: clamp(8px, 2vw, 10px) !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        transition: background-color 0.3s ease !important;
        line-height: 1.3 !important;
        height: auto !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    
    div[style*="overflow-x: auto"] table tbody td:last-child a:not(.course-accordion-read-more):hover,
    div[style*="overflow-x: auto"] table tbody td:last-child a:not(.course-accordion-read-more):active,
    table[style*="width: 100%"] tbody td:last-child a:not(.course-accordion-read-more):hover,
    table[style*="width: 100%"] tbody td:last-child a:not(.course-accordion-read-more):active {
        background-color: #b71c1c !important;
    }
    
    /* ============================================
       8. TEXT CONTENT - COMPACT
       ============================================ */
    
    div[style*="overflow-x: auto"] table tbody td strong,
    table[style*="width: 100%"] tbody td strong {
        font-weight: 700 !important;
        font-size: clamp(11px, 3vw, 13px) !important;
    }
    
    /* Course names with special styling - same font size, keep color */
    div[style*="overflow-x: auto"] table tbody td:nth-child(2)[style*="color: var(--primary-red)"],
    table[style*="width: 100%"] tbody td:nth-child(2)[style*="color: var(--primary-red)"] {
        color: #c62828 !important;
        font-size: 10px !important;
        font-weight: 700 !important;
    }
    
    /* Table fits single screen - no horizontal scroll needed */
    
    /* ============================================
       10. OVERRIDE ANY STACKING RULES
       Prevent .table-stacked or any other class from breaking table
       ============================================ */
    
    /* Override .table-stacked rules from mobile-first.css */
    div[style*="overflow-x: auto"] table.table-stacked,
    table[style*="width: 100%"].table-stacked,
    table.table-stacked {
        display: table !important;
    }
    
    div[style*="overflow-x: auto"] table.table-stacked thead,
    table[style*="width: 100%"].table-stacked thead,
    table.table-stacked thead {
        display: table-header-group !important;
    }
    
    div[style*="overflow-x: auto"] table.table-stacked tr,
    table[style*="width: 100%"].table-stacked tr,
    table.table-stacked tr {
        display: table-row !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
    }
    
    div[style*="overflow-x: auto"] table.table-stacked td,
    table[style*="width: 100%"].table-stacked td,
    table.table-stacked td {
        display: table-cell !important;
        text-align: center !important;
        padding: clamp(6px, 1.5vw, 8px) clamp(6px, 1.5vw, 8px) !important;
        border-bottom: 1px solid #ddd !important;
    }
    
    div[style*="overflow-x: auto"] table.table-stacked td::before,
    table[style*="width: 100%"].table-stacked td::before,
    table.table-stacked td::before {
        content: none !important;
        float: none !important;
    }
    
    /* ============================================
       11. VERY SMALL SCREENS - ULTRA COMPACT
       ============================================ */
    
    @media (max-width: 480px) {
        div[style*="overflow-x: auto"] table thead th,
        table[style*="width: 100%"] thead th {
            padding: 3px 2px !important;
            font-size: 8px !important;
        }
        div[style*="overflow-x: auto"] table thead th:nth-child(5),
        table[style*="width: 100%"] thead th:nth-child(5) {
            padding: 3px 1px !important;
        }
        
        div[style*="overflow-x: auto"] table tbody td,
        table[style*="width: 100%"] tbody td {
            padding: 2px !important;
            font-size: 8px !important;
        }
        div[style*="overflow-x: auto"] table tbody td:nth-child(2),
        table[style*="width: 100%"] tbody td:nth-child(2) {
            font-size: 10px !important;
        }
        div[style*="overflow-x: auto"] table tbody td:nth-child(5),
        table[style*="width: 100%"] tbody td:nth-child(5) {
            padding: 2px 1px !important;
        }
        
        div[style*="overflow-x: auto"] table tbody td:last-child a:not(.course-accordion-read-more),
        table[style*="width: 100%"] tbody td:last-child a:not(.course-accordion-read-more) {
            padding: 3px 2px !important;
            font-size: 8px !important;
        }
        
        div[style*="overflow-x: auto"] table tbody tr[style*="background-color: var(--primary-red)"] td,
        table[style*="width: 100%"] tbody tr[style*="background-color: var(--primary-red)"] td {
            padding: 4px 2px !important;
            font-size: 8px !important;
        }
    }
}