/**
 * VOOFA AI - Frontend Styling Overrides
 * High specificity (body prefix) and !important flags used to ensure 
 * overrides take effect over the base plugin.
 */

/* 1. Table Header Styling */
body .wpcs-table th {
    font-weight: 400 !important;
    background-color: #632dbe !important;
    font-family: 'poppins', sans-serif !important;
    font-size: 16px !important;
    color: #ffffff !important;
}

/* 2. Table Cell & Border Styling */
body .wpcs-table td {
    padding: 10px !important;
    border-bottom: 1px solid rgb(0, 0, 0) !important;
    color: #000000;
}

/* Generic table border fix */
body table td {
    border: 1px solid #000000 !important;
}

/* 3. Bar Chart Main Container */
body .wpcs-bar-chart {
    background-color: #632dbe !important;
    border-radius: 8px !important;
}

/* 4. Bar Chart Labels and Text */
body .wpcs-bar-chart-head, 
body .wpcs-bar-label, 
body .wpcs-bar-value {
    font-weight: 400 !important;
    font-family: 'poppins', sans-serif !important;
    font-size: 16px !important;
    color: #ffffff !important;
}

/* 5. Animated Bar Gradient (The "Contrail") */
body .wpcs-bar-contrail {
    background: linear-gradient(90deg, rgba(10, 31, 68, 0.000) 0%, rgb(211, 0, 255) 55%, #d5ff00 100%) !important;
}

/* ==========================================
   RESPONSIVE / MOBILE FIXES
   ========================================== */

/* Tablet and Mobile (under 600px) */
@media screen and (max-width: 600px) {
    /* Stack Date and Time in the "When" column */
    body .wpcs-col-when {
        line-height: 1.4 !important;
        font-size: 12px !important;
        white-space: normal !important; /* Allows line breaks to function */
        min-width: 80px !important;
        display: block !important;
    }
}

/* Small Mobile (under 480px) */
@media screen and (max-width: 480px) {
    /* Force table to fit screen width */
    body .wpcs-table {
        table-layout: fixed !important;
        width: 100% !important;
    }
    
    body .wpcs-table th, 
    body .wpcs-table td {
        padding: 8px 4px !important;
        word-wrap: break-word !important;
        font-size: 13px !important; /* Slightly smaller for tight screens */
    }
}