/**
 * WP Customer Area - Private Files Responsive Table (ENHANCED)
 * Transforms table to card layout on mobile devices
 * STRONGER SPECIFICITY to override browser defaults
 * 
 * BEDA Branding Colors:
 * - BEDA Blue: #487984
 * - Mist: #c6d9db
 * - Fern: #c3cebd
 * - Linen: #eae1d6
 * - Stone: #c3c4c3
 */

/* ========================================
   MOBILE VIEW (768px and below)
   Cards layout - each row becomes a card
   ======================================== */
@media (max-width: 768px) {

    /* TABLE CONTAINER - Override display:table */
    .collection.cuar_private_file .table-responsive {
        overflow: visible !important;
    }

    .collection.cuar_private_file .table-responsive .table,
    .collection.cuar_private_file table.table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        border: none !important;
        border-collapse: collapse !important;
        background-color: transparent !important;
    }

    /* HIDE TABLE HEADERS COMPLETELY */
    .collection.cuar_private_file .table-responsive thead,
    .collection.cuar_private_file .table thead,
    .collection.cuar_private_file table thead {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
    }

    /* TABLE BODY - Block display */
    .collection.cuar_private_file .table-responsive tbody,
    .collection.cuar_private_file .table tbody,
    .collection.cuar_private_file table tbody {
        display: block !important;
        width: 100% !important;
        background-color: transparent !important;
    }

    /* EACH ROW AS A CARD */
    .collection.cuar_private_file .table-responsive tbody tr,
    .collection.cuar_private_file .table tbody tr,
    .collection.cuar_private_file table tbody tr {
        display: block !important;
        width: 100% !important;
        background: white !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        margin-bottom: 16px !important;
        padding: 0 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* TABLE CELLS - Label + Value pairs */
    .collection.cuar_private_file .table-responsive td,
    .collection.cuar_private_file .table tbody td,
    .collection.cuar_private_file table tbody td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        border: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        padding: 12px 16px !important;
        background-color: transparent !important;
        box-sizing: border-box !important;
    }

    /* Remove border from last cell in each row */
    .collection.cuar_private_file .table-responsive tbody tr td:last-child,
    .collection.cuar_private_file .table tbody tr td:last-child,
    .collection.cuar_private_file table tbody tr td:last-child {
        border-bottom: none !important;
    }

    /* LABELS - Show data-label attribute as label */
    .collection.cuar_private_file .table-responsive td[data-label]:before,
    .collection.cuar_private_file .table tbody td[data-label]:before,
    .collection.cuar_private_file table tbody td[data-label]:before {
        content: attr(data-label) ": " !important;
        display: inline-block !important;
        font-weight: 600 !important;
        color: #487984 !important;
        margin-right: 8px !important;
        min-width: 130px !important;
    }

    /* Remove the ::before label from Action column */
    .collection.cuar_private_file .table-responsive td[data-label="Action"]:before,
    .collection.cuar_private_file .table tbody td[data-label="Action"]:before,
    .collection.cuar_private_file table tbody td[data-label="Action"]:before {
        content: "" !important;
        display: none !important;
    }

    /* Action cell - Center align */
    .collection.cuar_private_file .table-responsive td[data-label="Action"],
    .collection.cuar_private_file .table tbody td[data-label="Action"],
    .collection.cuar_private_file table tbody td[data-label="Action"] {
        text-align: center !important;
    }

    /* Category as badge/pill */
    .collection.cuar_private_file .table-responsive td[data-label="Category"],
    .collection.cuar_private_file .table tbody td[data-label="Category"],
    .collection.cuar_private_file table tbody td[data-label="Category"] {
        padding-bottom: 16px !important;
    }

    .collection.cuar_private_file .table-responsive td[data-label="Category"] span,
    .collection.cuar_private_file .table tbody td[data-label="Category"] span,
    .collection.cuar_private_file table tbody td[data-label="Category"] span {
        display: inline-block !important;
        background-color: #c6d9db !important;
        color: #487984 !important;
        padding: 4px 12px !important;
        border-radius: 16px !important;
        font-size: 12px !important;
        font-weight: 500 !important;
    }

    /* File name - Bold and blue */
    .collection.cuar_private_file .table-responsive td[data-label="File Name"],
    .collection.cuar_private_file .table tbody td[data-label="File Name"],
    .collection.cuar_private_file table tbody td[data-label="File Name"] {
        padding-top: 16px !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .collection.cuar_private_file .table-responsive td[data-label="File Name"] a,
    .collection.cuar_private_file .table tbody td[data-label="File Name"] a,
    .collection.cuar_private_file table tbody td[data-label="File Name"] a {
        color: #487984 !important;
        text-decoration: none !important;
        font-weight: 600 !important;
    }

    .collection.cuar_private_file .table-responsive td[data-label="File Name"] a:hover,
    .collection.cuar_private_file .table tbody td[data-label="File Name"] a:hover,
    .collection.cuar_private_file table tbody td[data-label="File Name"] a:hover {
        text-decoration: underline !important;
    }

    /* Download button styling */
    .collection.cuar_private_file .btn-primary {
        background-color: #487984 !important;
        border-color: #487984 !important;
        color: white !important;
        padding: 8px 16px !important;
        border-radius: 4px !important;
        text-decoration: none !important;
        display: inline-block !important;
    }

    .collection.cuar_private_file .btn-primary:hover {
        background-color: #c6d9db !important;
        border-color: #c6d9db !important;
        color: #487984 !important;
    }

}

/* ========================================
   EXTRA SMALL DEVICES (480px and below)
   Further optimize for very small screens
   ======================================== */
@media (max-width: 480px) {

    .collection.cuar_private_file .table-responsive tbody tr {
        margin-bottom: 12px !important;
        padding: 0 !important;
    }

    .collection.cuar_private_file .table-responsive td,
    .collection.cuar_private_file .table tbody td,
    .collection.cuar_private_file table tbody td {
        padding: 10px 12px !important;
    }

    .collection.cuar_private_file .table-responsive td[data-label]:before,
    .collection.cuar_private_file .table tbody td[data-label]:before,
    .collection.cuar_private_file table tbody td[data-label]:before {
        min-width: 100px !important;
        display: block !important;
        margin-bottom: 4px !important;
        margin-right: 0 !important;
    }

    .collection.cuar_private_file .btn {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

}

/* ========================================
   DESKTOP VIEW (769px and above)
   Regular table layout
   ======================================== */
@media (min-width: 769px) {

    .collection.cuar_private_file .table-responsive {
        overflow-x: auto !important;
    }

    .collection.cuar_private_file .table,
    .collection.cuar_private_file table {
        display: table !important;
        width: 100% !important;
        border-collapse: collapse !important;
    }

    .collection.cuar_private_file .table thead,
    .collection.cuar_private_file table thead {
        display: table-header-group !important;
    }

    .collection.cuar_private_file .table tbody,
    .collection.cuar_private_file table tbody {
        display: table-row-group !important;
    }

    .collection.cuar_private_file .table tbody tr,
    .collection.cuar_private_file table tbody tr {
        display: table-row !important;
    }

    .collection.cuar_private_file .table td,
    .collection.cuar_private_file table td,
    .collection.cuar_private_file .table th,
    .collection.cuar_private_file table th {
        display: table-cell !important;
        border: 1px solid #ddd !important;
        padding: 12px !important;
    }

    /* Hide data-label pseudo-elements on desktop */
    .collection.cuar_private_file .table td[data-label]:before,
    .collection.cuar_private_file table td[data-label]:before {
        content: "" !important;
        display: none !important;
    }

}