/* Enhanced Simulation Results - Responsive Layout Fixes */
/* Addresses overlapping issues and partial visibility problems for paid simulations */

/* ================================================
   MOBILE FIRST APPROACH - Base styles for small screens
   ================================================ */

/* Hide non-essential elements on mobile */
@media (max-width: 767.98px) {
    /* Hide point spread distribution chart */
    .spread-distribution-section {
        display: none !important;
    }
    
    /* Hide all individual simulation score tables */
    .scores-grid {
        display: none !important;
    }
    
    /* Hide score cards */
    .scores-card {
        display: none !important;
    }
    
    /* Fix spacing issues from hidden elements */
    .fade-in {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Ensure no extra margins from adjacent hidden elements */
    .d-none + *,
    [style*="display: none"] + * {
        margin-top: 0 !important;
    }
}

/* Mobile Summary Section */
.mobile-summary {
    padding: 0 1rem;
    margin-bottom: 1rem;
    margin-top: 0;
}

.summary-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-subtle);
}

.summary-stats {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.summary-stats .stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.summary-stats .stat-row:last-child {
    border-bottom: none;
}

.summary-stats .stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.summary-stats .stat-value {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

/* Container and Layout Fixes */
.container-fluid {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

/* Mobile-specific container fixes */
@media (max-width: 767.98px) {
    /* Override spacing variables for mobile */
    .container-fluid {
        --spacing-xxl: 1.5rem;
        --spacing-xl: 1rem;
    }
    
    /* Remove bottom margins from all direct children */
    .container-fluid > div {
        margin-bottom: 1rem !important;
    }
    
    /* Last child should have no margin */
    .container-fluid > div:last-child {
        margin-bottom: 0 !important;
    }
}

/* Hero Section - Prevent Overflow */
.results-hero {
    padding: 1rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.team-showcase {
    max-width: 100%;
    overflow: hidden;
}

/* Team Cards - Fix Overlap on Mobile */
.team-card-enhanced {
    width: 100%;
    max-width: 280px;
    margin: 0 auto 1rem;
    padding: 1.5rem;
    position: relative;
    z-index: 1;
}

/* Prevent Logo Overflow */
.team-logo-enhanced {
    width: 80px;
    height: 80px;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto 1rem;
    display: block;
}

/* VS Section - Clear Positioning */
.vs-section {
    position: relative;
    z-index: 2;
    margin: 1rem 0;
    clear: both;
    text-align: center;
}

.vs-badge {
    display: inline-flex;
    position: relative;
    margin: 0 auto;
}

/* Spread Display - Prevent Overflow */
.spread-showcase {
    overflow: hidden;
    padding: 1rem;
    margin: 1rem -1rem;
}

.spread-dial-container {
    max-width: 100%;
    overflow: hidden;
    margin: 0 auto;
}

#spread-dial-svg {
    max-width: 100%;
    height: auto;
}

/* Insights Dashboard - Single Column Mobile */
.insights-dashboard {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 0.5rem;
    margin-bottom: 1.5rem; /* Reduced from 2rem */
}

.insight-card {
    width: 100%;
    min-height: 100px;
    padding: 1rem;
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
}

.insight-card.highlight {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), var(--bg-secondary));
    border-color: rgba(16, 185, 129, 0.2);
}

.insight-value {
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: var(--text-primary);
}

.insight-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.insight-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 50%;
    margin-bottom: 0.5rem;
    color: var(--cta-primary);
}

/* Charts - Responsive Container */
.chart-section {
    margin-bottom: 1.5rem;
    overflow: hidden;
    width: 100%;
}

.chart-container {
    position: relative;
    height: 250px;
    max-width: 100%;
    padding: 1rem;
}

/* Mobile-specific chart adjustments */
@media (max-width: 767.98px) {
    .chart-section {
        margin-bottom: 1rem;
    }
    
    .chart-header {
        padding: 0.75rem 1rem;
    }
}

.chart-container canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/* Side-by-side Charts Container */
.charts-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem; /* Reduced from 2rem to minimize white space */
}

/* Show only one chart on mobile */
@media (max-width: 767.98px) {
    /* Override base styles for charts-row */
    .charts-row {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        margin-bottom: 1rem !important;
        margin-top: 0 !important;
        padding-right: 0 !important;
        padding: 0 !important;
    }
    
    /* Hide second chart completely */
    .charts-row .chart-section:last-child {
        display: none !important;
    }
    
    /* Reduce spacing around remaining chart */
    .chart-section {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Override chart container fixed heights */
    .chart-container {
        height: 200px !important;
        min-height: unset !important;
        padding: 0.5rem 0 !important;
    }
    
    /* Fix empty space issue - ensure hidden elements don't create gaps */
    .scores-grid + .charts-row,
    .mobile-summary + .charts-row {
        margin-top: 1rem !important;
    }
    
    /* Remove any spacing from hidden scores grid */
    .scores-grid.d-none {
        margin: 0 !important;
        padding: 0 !important;
        height: 0 !important;
    }
    
    /* Specific fix for charts row positioning */
    .mobile-summary ~ .charts-row {
        margin-top: 1rem !important;
    }
}

/* Scores Grid - Single Column */
.scores-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 1rem;
    margin-bottom: 2rem;
}

.scores-card {
    width: 100%;
    overflow: hidden;
}

/* Table Responsive Wrapper */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0;
}

.scores-table {
    min-width: 320px;
    table-layout: fixed;
}

.scores-table th,
.scores-table td {
    padding: 0.5rem;
    white-space: nowrap;
    text-align: center;
}

/* Hide numbering column on mobile */
.score-cell.d-none.d-sm-table-cell {
    display: none !important;
}

/* Player Stats Section */
.player-stats-section {
    padding: 0 0.5rem;
    overflow: hidden;
    margin-bottom: 1rem; /* Reduced from default 2rem */
}

@media (max-width: 767.98px) {
    .player-stats-section {
        margin-top: 0;
        margin-bottom: 1rem; /* Reduced from 1.5rem to eliminate white space */
    }
    
    .section-header {
        margin-bottom: 1rem;
    }
}

/* Fix for when player stats section is empty or has minimal content */
.player-stats-section:empty,
.player-stats-section .row:empty {
    margin-bottom: 0;
    padding: 0;
    height: 0;
}

/* Reduce animation delay impact on layout */
.player-stats-section.fade-in {
    animation-delay: 0.4s; /* Reduced from 0.65s */
}

/* Fix spacing between sections to prevent white space */
.charts-row + .player-stats-section {
    margin-top: 0;
}

.player-stats-section + .team-stats-section {
    margin-top: 0.5rem; /* Controlled spacing between sections */
}

.player-team-card {
    width: 100%;
    margin-bottom: 1rem;
    overflow: hidden;
    padding: 1rem;
}

.player-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    width: 100%;
}

.player-card {
    width: 100%;
    overflow: hidden;
    padding: 0.75rem;
}

.player-name {
    font-size: 0.875rem;
}

.player-position {
    font-size: 0.7rem;
    padding: 0.125rem 0.375rem;
}

.player-stats {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
}

.stat-item {
    flex: 0 0 auto;
    min-width: 60px;
    text-align: center;
    padding: 0.25rem;
}

.stat-value {
    font-size: 0.875rem;
}

.stat-label {
    font-size: 0.65rem;
}

/* Show fewer players on mobile */
@media (max-width: 767.98px) {
    .player-card:nth-child(n+5) {
        display: none;
    }
    
    .player-card.more-players {
        display: flex !important;
    }
    
    .more-players-content .more-text {
        display: block !important;
    }
    
    .more-players-content .less-text {
        display: none !important;
    }
}

/* Team Stats Section */
.team-stats-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 1rem;
    margin-bottom: 1.5rem; /* Reduced from 2rem for better spacing */
    margin-top: 0.5rem; /* Added to ensure proper separation without excessive gap */
}

.team-stats-card {
    width: 100%;
    overflow: hidden;
}

.team-stats-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    min-width: 280px;
}

/* CTA Section */
.cta-section {
    padding: 1.5rem 1rem;
    text-align: center;
}

.cta-button-enhanced {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

/* ================================================
   SMALL TABLETS (576px - 767px)
   ================================================ */
@media (min-width: 576px) {
    .results-hero {
        padding: 1.5rem;
    }
    
    .team-card-enhanced {
        max-width: 320px;
        padding: 2rem;
    }
    
    .team-logo-enhanced {
        width: 100px;
        height: 100px;
    }
    
    .insights-dashboard {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .chart-container {
        height: 300px;
    }
    
    .player-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

/* ================================================
   TABLETS (768px - 991px)
   ================================================ */
@media (min-width: 768px) {
    .results-hero {
        padding: 2rem;
    }
    
    /* Team showcase horizontal layout */
    .team-showcase .row {
        align-items: center;
    }
    
    .team-card-enhanced {
        margin-bottom: 0;
    }
    
    .team-logo-enhanced {
        width: 120px;
        height: 120px;
    }
    
    .insights-dashboard {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .chart-container {
        height: 350px;
    }
    
    /* Charts side by side */
    .charts-row {
        flex-direction: row;
        gap: 2rem;
    }
    
    .charts-row .chart-section {
        flex: 1;
    }
    
    .scores-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    /* Show table numbering */
    .score-cell.d-none.d-sm-table-cell {
        display: table-cell !important;
    }
    
    .team-stats-section {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* ================================================
   LARGE SCREENS (992px+)
   ================================================ */
@media (min-width: 992px) {
    .results-hero {
        padding: 2.5rem;
    }
    
    .team-logo-enhanced {
        width: 150px;
        height: 150px;
    }
    
    .chart-container {
        height: 400px;
    }
    
    .scores-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
    
    .player-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1rem;
    }
}

/* ================================================
   EXTRA LARGE SCREENS (1200px+)
   ================================================ */
@media (min-width: 1200px) {
    .container-fluid {
        max-width: 1400px;
        margin: 0 auto;
    }
    
    .team-logo-enhanced {
        width: 180px;
        height: 180px;
    }
    
    .scores-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ================================================
   LANDSCAPE MOBILE OPTIMIZATION
   ================================================ */
@media (max-height: 600px) and (orientation: landscape) {
    .results-hero {
        padding: 1rem;
    }
    
    .team-logo-enhanced {
        width: 60px;
        height: 60px;
    }
    
    .insights-dashboard {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .chart-container {
        height: 200px;
    }
}

/* ================================================
   UTILITY CLASSES & FIXES
   ================================================ */

/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden;
}

/* Fix Bootstrap container issues */
.row {
    margin-left: -15px;
    margin-right: -15px;
}

.col-12, .col-md-2, .col-md-5 {
    padding-left: 15px;
    padding-right: 15px;
}

/* Ensure proper z-index stacking */
.favored-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

/* Fix modal backdrop issues */
.modal-backdrop {
    position: fixed;
    z-index: 1040;
}

#simulationModal {
    z-index: 1050;
}

/* Smooth scrolling for better UX */
.table-responsive,
.player-stats,
.team-stats-body {
    scroll-behavior: smooth;
}

/* Add visual scroll indicators */
.table-responsive::-webkit-scrollbar,
.player-stats::-webkit-scrollbar,
.team-stats-body::-webkit-scrollbar {
    height: 6px;
}

.table-responsive::-webkit-scrollbar-track,
.player-stats::-webkit-scrollbar-track,
.team-stats-body::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

.table-responsive::-webkit-scrollbar-thumb,
.player-stats::-webkit-scrollbar-thumb,
.team-stats-body::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.table-responsive::-webkit-scrollbar-thumb:hover,
.player-stats::-webkit-scrollbar-thumb:hover,
.team-stats-body::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Animation performance */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Touch device optimizations */
@media (hover: none) {
    .team-card-enhanced:hover,
    .insight-card:hover,
    .player-card:hover {
        transform: none;
    }
}

/* Print optimizations */
@media print {
    .chart-container {
        height: 300px !important;
        page-break-inside: avoid;
    }
    
    .scores-grid {
        grid-template-columns: 1fr;
    }
    
    .table-responsive {
        overflow: visible;
    }
    
    .scores-table {
        width: 100%;
    }
}