/* ==========================================================================
   LVS Mastery Performance Hub - Master Stylesheet (Version 4.0)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LAYOUT RESET & CORE TAB LOGIC
   -------------------------------------------------------------------------- */
.lvs-master-hub, 
.lvs-ta-container, 
.lvs-hub-card { 
    width: 100% !important; 
    max-width: 100vw !important; 
    overflow-x: hidden !important; 
    box-sizing: border-box !important; 
}

.lvs-pane, 
.lvs-hub-sub { 
    display: none !important; 
}

.lvs-pane.active, 
.lvs-hub-sub.active { 
    display: block !important; 
}

/* Force Dropdowns to stay within screen boundaries */
#lvs_ta_quiz_selector, 
#lvs_hub_select, 
#quiz_selector, 
.lvs-select { 
    width: 100% !important; 
    max-width: 100% !important; 
    box-sizing: border-box !important; 
    display: block !important; 
    white-space: nowrap !important; 
    overflow: hidden !important; 
    text-overflow: ellipsis !important; 
    padding: 10px 30px 10px 10px !important; 
    font-size: 14px !important; 
    height: auto !important; 
    line-height: 1.2 !important; 
    border-radius: 8px; 
    border: 1px solid #ccc; 
    background: #fff;
}

/* --------------------------------------------------------------------------
   2. SHARED UI ELEMENTS (CARDS & BUTTONS)
   -------------------------------------------------------------------------- */
.lvs-hub-card { 
    background: #fff; 
    padding: 20px; 
    border-radius: 12px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
    margin-bottom: 20px; 
    border: 1px solid #eee; 
    overflow: hidden; 
}

.lvs-hub-tabs { 
    display: flex; 
    justify-content: center; 
    gap: 8px; 
    margin-bottom: 20px; 
    flex-wrap: wrap; 
}

.lvs-hub-btn { 
    padding: 10px 18px; 
    cursor: pointer; 
    font-weight: 700; 
    background: #fff; 
    border-radius: 8px; 
    border: 1px solid #ddd; 
    transition: 0.3s; 
    font-size: 14px; 
}

.lvs-hub-btn.active { 
    background: #0274be; 
    color: #fff; 
    border-color: #0274be; 
}

.lvs-hub-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 15px; 
    margin-bottom: 20px; 
}

/* Attempt Circle Counter */
.lvs-attempt-circle { 
    width: 80px; 
    height: 80px; 
    border: 4px solid #0274be; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: #f0faff; 
    margin: 10px auto; 
}
.lvs-attempt-val { 
    font-size: 24px; 
    font-weight: 900; 
    color: #0274be; 
}

/* --------------------------------------------------------------------------
   3. RESPONSIVE DATA TABLES
   -------------------------------------------------------------------------- */
.lvs-responsive-table, 
.lvs-responsive-table1,
.lvs-ta-container table, 
.lvs-master-hub table { 
    width: auto !important; 
    min-width: 60%; 
    max-width: 800px !important; 
    margin: 20px auto !important; 
    border-collapse: collapse; 
    border: 1px solid #eee !important; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important; 
}

.lvs-responsive-table th,
.lvs-responsive-table1 th { 
    font-weight: 700; 
    padding: 12px 25px !important; 
    text-align: left; 
    border-bottom: 2px solid #eee; 
}

.lvs-responsive-table th { background: #f8f9fa; color: #333; }
.lvs-responsive-table1 th { background: #0274be; color: #fff; }

.lvs-responsive-table td,
.lvs-responsive-table1 td { 
    padding: 12px 25px !important; 
    border-bottom: 1px solid #f0f0f0; 
}

/* --------------------------------------------------------------------------
   4. WATUPRO SPECIFIC OVERRIDES
   -------------------------------------------------------------------------- */
/* Change "Completed Quizzes" to "Attempted Tests" visually */
.watupro-wrap h2 { 
    font-size: 0 !important; 
    text-align: center !important; 
    margin: 20px 0 !important; 
}
.watupro-wrap h2::after { 
    content: "Attempted Tests" !important; 
    font-size: 24px !important; 
    display: block !important; 
    text-align: center !important; 
    font-weight: 700 !important; 
    color: #111 !important; 
    visibility: visible !important; 
}

/* Hide WatuPRO Export Link */
.watupro-wrap p a[href*="watupro_export_my_exams"],
.watupro-wrap p:has(a[href*="watupro_export_my_exams"]) { 
    display: none !important; 
}

/* WatuPRO Results Table Styling */
.watupro-table { 
    width: auto !important; 
    min-width: 80% !important; 
    max-width: 900px !important; 
    margin: 0 auto !important; 
    border-collapse: collapse !important; 
}
.watupro-table thead th { 
    background-color: #0274be !important; 
    color: #ffffff !important; 
    padding: 12px !important; 
}
.watupro-table td a[href*="show_details"] { 
    background: #0274be; 
    color: #fff !important; 
    padding: 5px 12px; 
    border-radius: 4px; 
    text-decoration: none; 
    font-size: 12px; 
    font-weight: 600; 
}
.watupro-table td a[href*="show_details"]:hover { 
    background: #015a92; 
}

/* Sticky Back to Results Button */
.lvs-sticky-back { 
    position: fixed !important; 
    bottom: 30px !important; 
    right: 30px !important; 
    z-index: 9999 !important; 
    padding: 12px 24px !important; 
    background: #0274be !important; 
    color: #ffffff !important; 
    border-radius: 50px !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important; 
    text-decoration: none !important; 
    font-weight: 700 !important; 
    transition: all 0.3s ease !important; 
}
.lvs-sticky-back:hover { 
    background: #015a92 !important; 
    transform: scale(1.05) !important; 
    box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important; 
}

/* --------------------------------------------------------------------------
   5. MOBILE RESPONSIVENESS (< 600px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
    /* 1. Layout Reset & Safe Containment */
    body, html { overflow-x: hidden !important; }
    .lvs-master-hub { padding: 10px !important; box-sizing: border-box !important; width: 100% !important; }
    
    .lvs-hub-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 15px !important;
        margin: 0 !important;
    }

    /* 2. Card Centering & Alignment */
    .lvs-hub-card {
        width: 100% !important;
        min-width: 0 !important; 
        box-sizing: border-box !important;
        margin: 0 0 15px 0 !important; /* Restored bottom margin so cards breathe */
        padding: 20px 15px !important;
        overflow: hidden !important;
        text-align: center !important; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Snaps content to the top, removing the massive gap */
    }

    /* 3. Fix the Oval Chart Issue (Protect Circular Aspect Ratio) */
    .lvs-hub-card canvas {
        max-width: 100% !important;
        height: auto !important; 
        width: auto !important; /* Reverts previous stretching bug */
    }
    canvas[data-type="doughnut"] {
        width: 110px !important;
        height: 110px !important;
        margin: 0 auto !important;
    }

    /* 4. Fix Streak Banner & Alert Boxes (Force Centering) */
    .lvs-master-hub div[style*="gap: 15px"],
    .lvs-master-hub div[style*="background: #fff3cd"],
    .lvs-master-hub div[style*="background:#e8fdf5"] {
        display: flex !important;
        flex-direction: column !important;
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 15px !important;
        gap: 10px !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* 5. Normalize Typography & Font Sizes */
    .lvs-hub-card h4 { font-size: 16px !important; margin-bottom: 8px !important; }
    
    /* Huge Numbers (Shrink for Mobile) */
    .lvs-hub-card div[style*="font-size:54px"], 
    .lvs-hub-card div[style*="font-size:44px"],
    .lvs-hub-card div[style*="font-size:1.6rem"] {
        font-size: 32px !important;
        line-height: 1.1 !important;
        margin: 5px 0 !important;
    }
    
    /* Medium Units (%ile, min, /21) */
    .lvs-hub-card div[style*="font-size:24px"], 
    .lvs-hub-card span[style*="font-size:24px"],
    .lvs-hub-card small {
        font-size: 16px !important;
    }

    /* Small Descriptive Text */
    .lvs-hub-card div[style*="font-size:13px"],
    .lvs-hub-card div[style*="font-size:18px"],
    .lvs-hub-card p {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    /* Benchmark Pill Shape */
    .lvs-hub-card div[style*="border-radius:50px"] {
        padding: 6px 15px !important;
        font-size: 12px !important;
        display: inline-block !important;
        margin-bottom: 10px !important;
    }

    /* 6. Mobile Tables */
    .lvs-responsive-table, .lvs-responsive-table1, .lvs-responsive-table thead, .lvs-responsive-table1 thead, .lvs-responsive-table tbody, .lvs-responsive-table1 tbody, .lvs-responsive-table tr, .lvs-responsive-table1 tr, .lvs-responsive-table td, .lvs-responsive-table1 td, .lvs-ta-container table, .lvs-master-hub table, .watupro-table, .watupro-table thead, .watupro-table tbody, .watupro-table tr, .watupro-table td { display: block !important; width: 100% !important; min-width: 100% !important; }
    .lvs-responsive-table thead, .lvs-responsive-table1 thead, .watupro-table thead { display: none !important; }
    .lvs-responsive-table tr, .lvs-responsive-table1 tr, .watupro-table tr { border: 1px solid #ddd !important; margin-bottom: 10px !important; border-radius: 10px !important; padding: 5px !important; }
    .lvs-responsive-table td, .lvs-responsive-table1 td { text-align: right !important; padding: 10px 15px !important; position: relative !important; display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 13px !important; border: none !important; border-bottom: 1px solid #f9f9f9 !important; }
    .lvs-responsive-table td:last-child, .lvs-responsive-table1 td:last-child { border-bottom: none !important; }
    .lvs-responsive-table td::before, .lvs-responsive-table1 td::before { content: attr(data-label); font-weight: 800 !important; color: #0274be !important; text-align: left !important; flex: 1; }
    .lvs-select, #lvs_ta_quiz_selector, #lvs_hub_select { font-size: 13px !important; }
    
    /* 7. Sticky Button Override */
    .lvs-sticky-back { right: 50% !important; transform: translateX(50%) !important; bottom: 20px !important; width: auto !important; white-space: nowrap !important; font-size: 13px !important; padding: 10px 20px !important; }
    .lvs-sticky-back:hover { transform: translateX(50%) scale(1.05) !important; }
}