@media only screen and (max-device-width: 480px) {
    :root {
        --pst-font-size-base: 15px;

         /* heading font sizes */
         --pst-font-size-h1: 24px;
         --pst-font-size-h2: 20px;
         --pst-font-size-h3: 16px;
         --pst-font-size-h4: 15px;
         --pst-font-size-h5: 15px;
         --pst-font-size-h6: 15px;
    }
}

/* Dashboard mobile optimizations */
@media only screen and (max-width: 768px) {
    /* Reduce font sizes for better spacing */
    .dashboard-ui {
        padding: 8px;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden; /* Prevent horizontal scroll */
    }
    
    .dashboard-ui h2 {
        font-size: 18px;
        margin-bottom: 8px;
    }
    
    .dashboard-ui h3 {
        font-size: 13px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    
    /* Even smaller form elements */
    .form-control, 
    select,
    .dropdown-check-list .anchor,
    .year-select,
    .min-year-select, 
    .max-year-select {
        font-size: 10px !important;
        padding: 2px 4px !important; /* Adjusted horizontal padding to 4px */
        height: 28px !important;
        min-height: 28px !important;
        width: auto !important; /* Make width adapt to content */
        min-width: 0 !important; /* Allow elements to shrink if needed */
        text-overflow: ellipsis !important; /* Add ellipsis for text overflow */
        white-space: nowrap !important; /* Prevent text wrapping */
    }
    
    /* Stack filter elements vertically instead of horizontally */
    .single-line-filter {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        min-height: auto;
        width: 100%;
    }
    
    /* Full width filters */
    .col-filter-label,
    .col-filter-combined,
    .col-filter-location,
    .col-filter-button {
        width: 100% !important;
        min-width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 0 4px 0 !important;
    }
    
    /* Special styles for label row - keep it inline */
    .col-filter-label {
        margin-bottom: 0 !important;
    }
    
    /* Smaller filter labels */
    .filter-label {
        font-size: 10px;
        padding: 0;
        height: 20px;
        line-height: 20px;
        display: block;
        text-align: left;
    }
    
    /* Specially style the VS tag to fit inline */
    .filter-label-vs {
        padding: 0;
        height: 20px;
        line-height: 20px;
        display: inline-block;
        margin: 0 3px;
    }
    
    /* Force For/Vs to be on same line */
    .filter-for-vs-container {
        display: flex;
        align-items: center;
        width: 100%;
    }
    
    /* Adjust form group spacing */
    .form-group.inline-form label {
        font-size: 10px;
        min-width: 40px;
        margin-right: 3px;
    }
    
    /* Season type selector for mobile */
    .season-type-select {
        font-size: 10px !important;
        width: 110px !important; /* Increased from 90px to 110px */
        min-width: 110px !important;
        max-width: 110px !important;
        padding-left: 4px !important; /* Increased from 3px to 4px */
        padding-right: 4px !important; /* Increased from 3px to 4px */
    }
    
    /* Use shorter text for Regular Season on mobile handled in JS */
    @media screen and (max-width: 480px) {
        /* Smaller Season containers for mobile */
        .season-checkbox-container:first-child {
            width: 100px !important; /* Increased from 90px to 100px */
            padding-left: 6px !important; /* Increased from 5px to 6px */
            padding-right: 6px !important; /* Increased from 5px to 6px */
        }
        
        .season-checkbox-container:nth-child(2) {
            width: 80px !important; /* Increased from 70px to 80px */
            padding-left: 6px !important; /* Increased from 5px to 6px */
            padding-right: 6px !important; /* Increased from 5px to 6px */
        }
        
        /* Reduce gap between containers */
        .season-checkboxes {
            gap: 5px !important; /* Reduced from 15px */
        }
    }
    
    /* Optimize year groups and filter layouts */
    .year-select-row {
        gap: 2px !important; /* Reduced from 3px */
        flex-wrap: nowrap !important; /* Prevent wrapping */
        justify-content: flex-start !important; /* Align to the left */
        width: 100% !important;
        overflow: visible !important;
    }
    
    /* Ensure the select group doesn't grow */
    .year-select-group {
        flex: 0 0 auto !important;
    }
    
    /* Make the season type group smaller */
    .season-type-group {
        flex: 0 0 auto !important;
        margin-left: 4px !important; /* Reduced from 10px */
        margin-right: 4px !important; /* Reduced from 8px to 4px for balanced spacing */
        min-width: auto !important;
    }
    
    /* Make remove buttons more compact and narrower on mobile */
    .btn.btn-danger.remove-game-filter,
    .btn.btn-danger.remove-year-group {
        height: 34px !important; /* Increased from 30px to 34px */
        width: 34px !important; /* Increased from 30px to 34px */
        min-width: 34px !important;
        max-width: 34px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }
    
    /* Make the trash icon fully visible on mobile */
    .trash-icon {
        width: 22px !important; /* Increased from 18px to 22px */
        height: 22px !important; /* Increased from 18px to 22px */
        display: inline-block !important;
        background-image: url('../trash_can_light.svg') !important; /* Ensure icon is showing */
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }
    
    /* Style Remove buttons to stay within container */
    .remove-button-container {
        text-align: right;
        width: auto !important; /* Changed from 100% to auto */
        max-width: 34px !important; /* Match the new button width */
        margin-top: 0 !important; /* Remove top margin */
        margin-left: 0 !important; /* Remove left margin */
        padding: 0 !important;
    }
    
    /* Make "To" text smaller */
    .year-to-text {
        font-size: 9px !important; /* Reduced from 10px */
        margin: 0 1px !important;
        padding: 0 !important;
        line-height: 28px !important;
        width: auto !important;
        min-width: auto !important;
    }
    
    /* Make year selects narrower */
    .year-select {
        width: 60px !important; /* Increased from 55px to 60px */
        min-width: 60px !important; /* Ensure minimum width */
    }
    
    /* More compact and full-width containers */
    .year-groups-container,
    .game-filters-container {
        padding: 5px;
        margin-bottom: 5px;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Action buttons at bottom */
    .form-actions {
        gap: 5px;
        margin-top: 8px;
        padding-top: 5px;
    }
    
    .form-actions .btn {
        height: 30px;
        font-size: 11px;
        padding: 0 8px;
    }
    
    /* Year group and game filter more compact */
    .year-group,
    .game-filter {
        margin-bottom: 2px;
        padding-bottom: 2px;
    }
    
    /* Top controls more stacked */
    .top-controls-row {
        flex-direction: column;
        gap: 5px;
        margin-bottom: 10px;
    }
    
    .plot-type-container,
    .time-container,
    .percent-container {
        width: 100%;
        min-width: 100%;
    }
}


/* Responsive adjustments for screens*/
@media only screen {
    .chart-container {
        height: 400px; /* Increased from 400px to 500px */
    }
    
    .chart-button {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .chart-buttons {
        bottom: 65px; /* Back to previous position */
        right: 70px; /* Right position for mobile */
        padding: 3px;
    }
    
    .chart-btn {
        width: 25px; /* Adjusted to be between original 22px and larger 28px */
        height: 25px; /* Adjusted to be between original 22px and larger 28px */
        padding: 2px;
    }
    
    .chart-icon {
        transform: scale(0.8); /* Adjusted to be between original 0.6075 and larger 0.9 */
    }
}

/* Add a new media query for larger screens to maintain a more square aspect ratio */
@media only screen {
    .chart-container {
        width: 90%;
        max-width: 900px; /* Limit the width on large screens for a more square shape */
    }
}