/**
 * SX1 Product Documents Table Styles
 * Shortcode: [sx1_product_documents_table]
 */

/*
====== TABLE WRAPPER ======
*/
.sx1-documents-table-wrapper {
    margin: 40px 0;
    overflow-x: auto;
}

/*
====== TABLE BASE ======
*/
.sx1-documents-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
}

/*
====== TABLE HEADER ======
*/
.sx1-documents-table thead {
    background-color: #ffffff;
}

.sx1-documents-table thead th {
    padding: 15px 20px;
    text-align: left;
    color: #01a850;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: 3px solid #018a42;
}

/* When header is hidden */
.sx1-documents-table.sx1-no-header tbody tr:first-child {
    border-top: 0px solid #01a850;
}

/*
====== TABLE BODY ======
*/
.sx1-documents-table tbody tr {
    border-bottom: 1px solid #8be1b4;
    transition: background-color 0.3s ease;
}

.sx1-documents-table tbody tr td {
    padding: 12px;
}

.sx1-documents-table tbody tr.sx1-docs-row:nth-child(2n) {
    background-color: #f5f6f5;
}

.sx1-documents-table tbody tr.sx1-docs-row:hover {
    background-color: #e2fdea;
}

.sx1-documents-table tbody tr:last-child {
    border-bottom: none;
}

.sx1-documents-table tbody td {
    padding: 15px 20px;
    vertical-align: middle;
}

/*
====== COLUMN WIDTHS ======
*/
.sx1-docs-col-name {
    width: 30%;
}

.sx1-docs-col-safety,
.sx1-docs-col-tech,
.sx1-docs-col-performance {
    width: 23.33%;
    text-align: center;
}

/*
====== PRODUCT NAME ======
*/
.sx1-docs-col-name strong {
    color: #333333;
    font-size: 16px;
    font-weight: 600;
}

/*
====== PDF BUTTONS (from popup-content.php) ======
*/
.sx1-documents-table .sx1-pdf-btn {
    display: inline-flex;
}

/*
====== EMPTY CELL ======
*/
.sx1-docs-empty-cell {
    color: #999999;
    font-size: 18px;
}

/*
====== EMPTY STATE ======
*/
.sx1-docs-empty {
    text-align: center;
    padding: 60px 20px;
    font-size: 18px;
    color: #666666;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin: 40px 0;
}

/*
====== RESPONSIVE DESIGN ======
*/

/* Tablet (under 1024px) */
@media screen and (max-width: 1023px) {
    .sx1-documents-table thead th,
    .sx1-documents-table tbody td {
        padding: 12px 5px;
        font-size: 14px;
    }
    
    .sx1-pdf-btn {
        padding: 10px 15px;
        font-size: 13px;
    }
}

/* Mobile (under 768px) - Stack layout */
@media screen and (max-width: 767px) {
    .sx1-documents-table {
        border: none !important;
    }
    .sx1-documents-table-wrapper {
        margin: 20px 0;
    }
    
    /* Hide table headers */
    .sx1-documents-table thead {
        display: none;
    }
    
    /* Make each row a card */
    .sx1-documents-table,
    .sx1-documents-table tbody,
    .sx1-documents-table tbody tr,
    .sx1-documents-table tbody td {
        display: block;
        width: 100%;
    }
    
    .sx1-documents-table tbody tr {
        margin-bottom: 20px;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 15px;
    }
    
    .sx1-documents-table tbody td {
        padding: 10px 0;
        text-align: left !important;
        border-bottom: 1px solid #f0f0f0;
    }

    .sx1-documents-table tbody td:last-child {
        border-bottom: none;
    }
    .sx1-documents-table tbody td.sx1-docs-col-name {
        line-height: 1.2rem;
    }

    /* Add labels before content */
/*
    .sx1-docs-col-name::before {
        content: 'Terméknév: ';
        font-weight: 700;
        color: #01a850;
    }
    
    .sx1-docs-col-safety::before {
        content: 'Biztonsági adatlap: ';
        font-weight: 700;
        color: #01a850;
        display: block;
        margin-bottom: 5px;
    }
    
    .sx1-docs-col-tech::before {
        content: 'Műszaki adatlap: ';
        font-weight: 700;
        color: #01a850;
        display: block;
        margin-bottom: 5px;
    }
    
    .sx1-docs-col-performance::before {
        content: 'Teljesítménynyilatkozat: ';
        font-weight: 700;
        color: #01a850;
        display: block;
        margin-bottom: 5px;
    }
*/
    
    .sx1-documents-table .sx1-pdf-btn {
        width: 100%;
        min-width: max-content;
        justify-content: center;
    }

    @supports selector(td:has(span.sx1-docs-empty-cell)) {
        td:has(span.sx1-docs-empty-cell) {
            display: none;
        }
    }

    .sx1-documents-table .sx1-docs-col-name {
        border-width: 0px !important;
        padding-bottom: 10px;
    }

    .sx1-documents-table tbody tr td {
        border-width: 0px !important;
    }
}

/* Small Mobile (under 480px) */
@media screen and (max-width: 479px) {
    .sx1-documents-table tbody tr {
        padding: 10px 5px;
    }

}