/**
 * NFL Rankings Frontend Styles
 * Optimized for full width on desktop, scrollable on mobile
 * 
 * @package NFL_Rankings_Importer
 * @since 1.2.0
 */

/* ===== Screen Reader Text (Accessibility) ===== */
.screen-reader-text {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    word-wrap: normal !important;
}

/* ===== Wrapper ===== */
.nfl-rankings-wrapper {
    margin: 20px auto;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== Main Table ===== */
.nfl-rankings-table {
    border-collapse: collapse !important;
    width: 100% !important;
    background: #ffffff !important;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 15px !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    border-radius: 10px !important;
    border: 1px solid #e5e5e5 !important;
}

/* ===== Header Styles ===== */
.nfl-rankings-table thead th {
    background: linear-gradient(90deg, #f5f5f5, #ffffff) !important;
    color: #333333 !important;
    font-weight: 800 !important;
    padding: 10px 14px !important;
    text-align: center !important;
    font-size: 17px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    border-bottom: 3px solid #f59e0b !important;
    position: relative !important;
    transition: box-shadow 0.3s ease, transform 0.2s ease !important;
    white-space: nowrap !important;
}

.nfl-rankings-table thead th:hover {
    transform: translateY(-2px) !important;
    box-shadow: inset 0 0 10px rgba(245, 158, 11, 0.2) !important;
}

/* Focus styles for accessibility */
.nfl-rankings-table thead th:focus {
    outline: 2px solid #f59e0b !important;
    outline-offset: -2px !important;
}

.nfl-rankings-table thead th:focus:not(:focus-visible) {
    outline: none !important;
}

.nfl-rankings-table thead th:focus-visible {
    outline: 2px solid #f59e0b !important;
    outline-offset: -2px !important;
}

/* ===== Row Styles ===== */
.nfl-rankings-table tbody tr {
    transition: background 0.2s ease !important;
}

.nfl-rankings-table tbody tr:nth-child(even) {
    background: #f9f9f9 !important;
}

.nfl-rankings-table tbody tr:nth-child(odd) {
    background: #ffffff !important;
}

.nfl-rankings-table tbody tr:hover {
    background: #e0f2fe !important;
}

/* ===== Cell Styles ===== */
.nfl-rankings-table tbody td {
    padding: 8px 10px !important;
    text-align: center !important;
    font-weight: 500 !important;
    font-size: 17px !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    vertical-align: middle !important;
    border: 1px solid #e5e5e5 !important;
}

.nfl-rankings-table tbody td:first-child {
    font-weight: 600 !important;
    border-left: 2px solid #f59e0b !important;
    border-radius: 6px 0 0 6px !important;
}

/* ===== Footer Styles ===== */
.nfl-rankings-table tfoot td {
    background: #f9f9f9 !important;
    padding: 6px 10px !important;
    text-align: center !important;
    color: #666666 !important;
    font-weight: 500 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    border: 1px solid #e5e5e5 !important;
}

/* ===== Sortable Column Styles ===== */
.nfl-rankings-table th.sortable {
    cursor: pointer !important;
}

.nfl-rankings-table th.sortable:hover {
    background: linear-gradient(90deg, #e0f2fe, #ffffff) !important;
}

/* ===== Player Icons (Starter/Injured) ===== */
.qb-name {
    display: inline !important;
    vertical-align: middle !important;
}

.qb-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 0.35em !important;
    font-size: 0.9em !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    position: relative !important;
    top: -0.05em !important;
}

/* Starter: Gold star */
.qb-icon-starter {
    color: #f2b01e !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

/* Injured: Red medical cross */
.qb-icon-injured {
    color: #dc2626 !important;
    font-weight: bold !important;
}

/* ===== Link Styles ===== */
.nfl-rankings-table tbody td a {
    color: #e04040 !important;
    text-decoration: none !important;
}

.nfl-rankings-table tbody td a:hover {
    text-decoration: underline !important;
}

.nfl-rankings-table tbody td a:focus {
    outline: 2px solid #e04040 !important;
    outline-offset: 2px !important;
}

/* ===== Mobile Responsive ===== */
@media screen and (max-width: 768px) {
    .nfl-rankings-wrapper {
        margin: 15px 0;
        overflow-x: auto;
    }
    
    .nfl-rankings-table {
        font-size: 13px !important;
        border-radius: 6px !important;
        min-width: 100% !important;
        display: table !important;
    }
    
    .nfl-rankings-table thead th,
    .nfl-rankings-table tbody td {
        padding: 6px 8px !important;
        font-size: 15px !important;
        min-width: 80px !important;
        white-space: nowrap !important;
    }
    
    .nfl-rankings-table thead th {
        text-transform: none !important;
        letter-spacing: 0 !important;
    }
    
    .nfl-rankings-table tbody td:first-child {
        border-radius: 0 !important;
    }
    
    /* Smaller icons on mobile */
    .qb-icon {
        font-size: 0.8em !important;
        margin-left: 0.25em !important;
    }
}

/* ===== Tablet Responsive ===== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .nfl-rankings-wrapper {
        margin: 20px 10px;
    }
}

/* ===== Print Styles ===== */
@media print {
    .nfl-rankings-wrapper {
        overflow: visible !important;
    }
    
    .nfl-rankings-table {
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }
    
    .nfl-rankings-table thead th {
        background: #f0f0f0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    .qb-icon-starter {
        color: #000 !important;
    }
    
    .qb-icon-injured {
        color: #666 !important;
    }
}