/* Mobile-Responsive Styles for Golf Training Tracker */

/* Import modern fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

/* Ensure proper viewport scaling */
@viewport {
    width: device-width;
    zoom: 1.0;
}

/* Mobile-first responsive breakpoints */
:root {
    --mobile-breakpoint: 768px;
    --mobile-padding: 10px;

    /* Golf-Themed Color Palette */
    --golf-green-primary: #2d5016;
    --golf-green-medium: #4a7c2d;
    --golf-green-light: #6b9a4f;
    --golf-green-accent: #7fb069;
    --golf-fairway-blue: #4a90e2;
    --golf-sky-blue: #7cb9e8;
    --golf-sand-beige: #d4a574;
    --golf-sand-light: #e8d4b8;
    --golf-white: #f8f9fa;
    --golf-success: #4a7c2d;
    --golf-warning: #d4a574;
    --golf-danger: #c94c4c;
    --golf-info: #4a90e2;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.18);

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
}

/* Golf-Themed Global Styles */
body {
    background-color: var(--golf-white);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif !important;
}

/* Typography improvements */
h1, h2, h3, h4, h5, h6,
.card-header {
    font-family: 'Poppins', 'Inter', sans-serif !important;
    letter-spacing: -0.02em;
}

h1 {
    font-size: 2.5rem;
    font-weight: 700;
}

h2 {
    font-size: 2rem;
    font-weight: 600;
}

h3 {
    font-size: 1.75rem;
    font-weight: 600;
}

h4 {
    font-size: 1.5rem;
    font-weight: 600;
}

h5 {
    font-size: 1.25rem;
    font-weight: 600;
}

p, span, div {
    line-height: 1.6;
}

/* Bootstrap Grid Overflow Fix - Allow dropdowns to escape */
.row {
    overflow: visible !important;
}

.col,
[class*="col-"] {
    overflow: visible !important;
}

/* Card Enhancements */
.card {
    border-radius: 12px !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid rgba(74, 124, 45, 0.1) !important;
    transition: all 0.3s ease !important;
    overflow: visible !important;
}

.card:hover {
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-2px);
}

.card-header {
    background: linear-gradient(135deg, var(--golf-green-primary) 0%, var(--golf-green-medium) 100%) !important;
    color: white !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 1rem 1.25rem !important;
}

.card-header h4,
.card-header h5 {
    color: white !important;
}

.card-body {
    padding: var(--spacing-md) !important;
}

/* Button Enhancements */
.btn-primary {
    background: linear-gradient(135deg, var(--golf-green-medium) 0%, var(--golf-green-light) 100%) !important;
    border: none !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--golf-green-primary) 0%, var(--golf-green-medium) 100%) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-1px);
}

.btn-success {
    background: var(--golf-success) !important;
    border-color: var(--golf-success) !important;
    box-shadow: var(--shadow-sm) !important;
}

.btn-success:hover {
    background: var(--golf-green-primary) !important;
    border-color: var(--golf-green-primary) !important;
    box-shadow: var(--shadow-md) !important;
}

.btn-info {
    background: var(--golf-info) !important;
    border-color: var(--golf-info) !important;
    box-shadow: var(--shadow-sm) !important;
}

.btn-warning {
    background: var(--golf-warning) !important;
    border-color: var(--golf-warning) !important;
    color: #333 !important;
    box-shadow: var(--shadow-sm) !important;
}

.btn-danger {
    background: var(--golf-danger) !important;
    border-color: var(--golf-danger) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Alert Enhancements */
.alert {
    border-radius: 10px !important;
    border: none !important;
    box-shadow: var(--shadow-sm) !important;
}

.alert-success {
    background-color: rgba(74, 124, 45, 0.1) !important;
    border-left: 4px solid var(--golf-success) !important;
}

.alert-info {
    background-color: rgba(74, 144, 226, 0.1) !important;
    border-left: 4px solid var(--golf-info) !important;
}

.alert-warning {
    background-color: rgba(212, 165, 116, 0.1) !important;
    border-left: 4px solid var(--golf-warning) !important;
}

.alert-danger {
    background-color: rgba(201, 76, 76, 0.1) !important;
    border-left: 4px solid var(--golf-danger) !important;
}

/* Navbar Enhancements */
.navbar {
    background: linear-gradient(135deg, var(--golf-green-primary) 0%, var(--golf-green-medium) 100%) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Badge Enhancements with Golf Theme */
.badge-success {
    background: var(--golf-success) !important;
}

.badge-info {
    background: var(--golf-info) !important;
}

.badge-warning {
    background: var(--golf-warning) !important;
    color: #333 !important;
}

.badge-danger {
    background: var(--golf-danger) !important;
}

/* Table Enhancements */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(74, 124, 45, 0.03) !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(74, 124, 45, 0.08) !important;
}

/* Dashboard Metric Card Enhancements */
.metric-card .card-body {
    position: relative;
    overflow: visible;
}

.metric-card .card-body::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(74, 124, 45, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

/* Metric value styling */
.text-primary {
    color: var(--golf-green-medium) !important;
}

.text-success {
    color: var(--golf-success) !important;
}

.text-info {
    color: var(--golf-info) !important;
}

.text-warning {
    color: var(--golf-warning) !important;
}

.text-danger {
    color: var(--golf-danger) !important;
}

/* Heading enhancements */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600 !important;
}

h2 {
    color: var(--golf-green-primary) !important;
}

/* Upload area enhancement */
.dash-upload {
    transition: all 0.3s ease !important;
}

.dash-upload:hover {
    background-color: rgba(74, 124, 45, 0.05) !important;
    border-color: var(--golf-green-medium) !important;
}

/* Glassmorphism Effects */
/* Apply subtle glass effect to outline cards */
.card[class*="outline"] {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(74, 124, 45, 0.2) !important;
}

/* Enhanced glassmorphism for success/info cards */
.card.border-success,
.card[color="success"][class*="outline"] {
    background: linear-gradient(135deg, rgba(74, 124, 45, 0.1) 0%, rgba(255, 255, 255, 0.8) 100%) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.card.border-info,
.card[color="info"][class*="outline"] {
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.1) 0%, rgba(255, 255, 255, 0.8) 100%) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Glassmorphism for player selector and navbar cards */
#player-selector-container .card {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(74, 124, 45, 0.15) !important;
}

/* Alert glassmorphism */
.alert {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Dropdown glassmorphism and proper z-index */
.Select-menu-outer,
.dropdown-menu {
    background: white !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(74, 124, 45, 0.2) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Dropdown menu items - ensure visibility */
.Select-option,
.VirtualizedSelectOption {
    background-color: white !important;
    color: #333 !important;
    padding: 10px 12px !important;
    cursor: pointer !important;
}

.Select-option:hover,
.VirtualizedSelectOption:hover {
    background-color: rgba(127, 176, 105, 0.15) !important;
    color: #333 !important;
}

.Select-option.is-selected,
.VirtualizedSelectOption.is-selected {
    background-color: rgba(127, 176, 105, 0.25) !important;
    color: #2d5016 !important;
    font-weight: 600 !important;
}

.Select-option.is-focused,
.VirtualizedSelectOption.is-focused {
    background-color: rgba(127, 176, 105, 0.2) !important;
    color: #333 !important;
}

/* Ensure text in dropdown control is visible */
.Select-value-label,
.Select-placeholder,
.Select--single > .Select-control .Select-value {
    color: #333 !important;
}

/* Dropdown control styling */
.Select-control {
    background-color: white !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 6px !important;
}

.Select-control:hover {
    border-color: rgba(127, 176, 105, 0.5) !important;
}

.Select.is-focused:not(.is-open) > .Select-control {
    border-color: var(--golf-green-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(127, 176, 105, 0.25) !important;
}

/* Multi-select values */
.Select-value {
    background-color: rgba(127, 176, 105, 0.2) !important;
    color: #2d5016 !important;
    border: 1px solid rgba(127, 176, 105, 0.3) !important;
    border-radius: 4px !important;
}

/* Fix Dash dropdown positioning with higher z-index */
.dash-dropdown {
    position: relative;
}

/* Ensure dropdown menus appear above other content */
.dash-dropdown .Select-menu-outer,
.dash-dropdown .Select-menu {
    position: absolute;
    z-index: 9999 !important;
    width: 100%;
    background: white !important;
}

/* Simple clean dropdown styling */
.Select-menu-outer {
    z-index: 9999 !important;
    background: white !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    border: 1px solid rgba(74, 124, 45, 0.2) !important;
    border-radius: 6px !important;
}

.Select-menu {
    max-height: 300px !important;
    overflow-y: auto !important;
    background: white !important;
}

/* Dynamic spacing - only when dropdown is open */
.card-body:has(.Select.is-open) {
    padding-bottom: 250px !important;
    transition: padding-bottom 0.2s ease;
}

/* Default state - minimal spacing */
.card-body:has(.dash-dropdown) {
    padding-bottom: 10px;
    transition: padding-bottom 0.2s ease;
}

/* Ensure parent rows have overflow visible */
.row:has(.dash-dropdown) {
    overflow: visible !important;
}

.modal {
    z-index: 1060;
}

.modal-backdrop {
    z-index: 1055;
}

/* Input Focus Effects */
input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--golf-green-medium) !important;
    box-shadow: 0 0 0 0.2rem rgba(74, 124, 45, 0.25) !important;
    outline: none !important;
    transition: all 0.2s ease-in-out;
}

/* Dropdown focus effects */
.Select-control:focus-within,
.dash-dropdown:focus-within {
    border-color: var(--golf-green-medium) !important;
    box-shadow: 0 0 0 0.2rem rgba(74, 124, 45, 0.15) !important;
}

/* Loading Animation */
@keyframes golfBallBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.loading-golf-ball {
    animation: golfBallBounce 1s ease-in-out infinite;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in animation for cards */
.card {
    animation: fadeIn 0.4s ease-out;
}

/* Loading spinner with golf theme */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-spinner {
    border: 3px solid rgba(74, 124, 45, 0.1);
    border-top: 3px solid var(--golf-green-medium);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

/* Button loading state */
.btn.disabled,
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Hover effect enhancements */
.btn:not(:disabled):hover {
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

.btn:not(:disabled):active {
    transform: translateY(0);
}

/* Link hover effects */
a:not(.btn) {
    transition: color 0.2s ease;
}

a:not(.btn):hover {
    color: var(--golf-green-medium) !important;
}

/* Table row animations */
.table tbody tr {
    transition: background-color 0.2s ease;
}

/* Badge pulse effect for new/updated items */
@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

.badge.pulse {
    animation: badgePulse 2s ease-in-out infinite;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Compact toggle switches (for dispersion page smart filtering and heatmap) */
.form-check {
    padding-left: 2.5em !important;
}

.form-check-input {
    width: 2.5em !important;
    height: 1.25em !important;
    margin-top: 0.25em !important;
    margin-left: -2.5em !important;
}

.form-check-label {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #333 !important;
    cursor: pointer !important;
}

/* Smaller, inline toggle switches */
.form-switch.form-switch-sm {
    min-height: 1.5rem !important;
    padding-left: 3rem !important;
    margin-bottom: 0 !important;
}

.form-switch.form-switch-sm .form-check-input {
    width: 2rem !important;
    height: 1rem !important;
    margin-left: -3rem !important;
    margin-top: 0.25rem !important;
}

.form-switch.form-switch-sm .form-check-label {
    font-size: 0.875rem !important;
}

/* Form validation states with golf colors */
.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: var(--golf-success) !important;
    background-image: none;
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
    border-color: var(--golf-success) !important;
    box-shadow: 0 0 0 0.2rem rgba(74, 124, 45, 0.25) !important;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--golf-danger) !important;
    background-image: none;
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
    border-color: var(--golf-danger) !important;
    box-shadow: 0 0 0 0.2rem rgba(201, 76, 76, 0.25) !important;
}

/* General mobile optimizations */
@media (max-width: 768px) {
    /* Reduce container padding on mobile */
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Make cards more compact but maintain visual appeal */
    .card-body {
        padding: 1rem !important;
    }

    /* WCAG AAA Accessibility: Minimum 44px touch targets */
    .btn,
    button,
    a.btn,
    .nav-link,
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0.75rem 1rem !important;
    }

    /* Larger, more touch-friendly form inputs */
    input.form-control,
    select.form-select,
    textarea.form-control,
    .dash-dropdown,
    .Select-control {
        min-height: 48px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 0.75rem 1rem !important;
        border-radius: 8px !important;
    }

    /* Enhanced button sizing for mobile */
    .btn-lg {
        min-height: 52px !important;
        font-size: 1.125rem !important;
        padding: 1rem 1.5rem !important;
    }

    .btn-sm {
        min-height: 40px !important;
        font-size: 0.95rem !important;
        padding: 0.5rem 0.875rem !important;
    }

    /* Responsive typography scaling */
    h1 {
        font-size: 2rem !important; /* Down from 2.5rem */
    }

    h2 {
        font-size: 1.65rem !important; /* Down from 2rem */
    }

    h3 {
        font-size: 1.4rem !important; /* Down from 1.75rem */
    }

    h4 {
        font-size: 1.25rem !important; /* Down from 1.5rem */
    }

    h5 {
        font-size: 1.1rem !important; /* Down from 1.25rem */
    }

    /* Readable body text on mobile */
    body,
    p,
    span,
    div {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    /* Larger metric values for readability */
    .card-body h3 {
        font-size: 1.75rem !important;
    }

    /* Optimized spacing for mobile */
    .mb-3, .my-3 {
        margin-bottom: 1rem !important;
    }

    .mb-4, .my-4 {
        margin-bottom: 1.25rem !important;
    }

    .mt-3, .my-3 {
        margin-top: 1rem !important;
    }

    .mt-4, .my-4 {
        margin-top: 1.25rem !important;
    }

    /* Card spacing */
    .card {
        margin-bottom: 1rem !important;
        border-radius: 10px !important; /* Slightly less rounded on mobile */
    }

    /* Card headers optimized for mobile */
    .card-header {
        padding: 0.875rem 1rem !important;
        font-size: 1.1rem !important;
    }

    .card-header h4,
    .card-header h5 {
        font-size: 1.15rem !important;
        margin-bottom: 0 !important;
    }

    /* Make buttons stack vertically (except button groups) */
    .btn:not(.btn-group .btn) {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Button groups stay inline */
    .btn-group .btn {
        width: auto;
    }

    /* Enhanced table display for mobile */
    table.table {
        font-size: 0.875rem !important;
        border-radius: 8px !important;
        overflow: hidden;
    }

    /* Larger table headers with golf theme */
    table.table thead th {
        background: linear-gradient(135deg, var(--golf-green-primary), var(--golf-green-medium)) !important;
        color: white !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        padding: 0.875rem 0.5rem !important;
        border: none !important;
        white-space: nowrap;
    }

    /* Better table cell spacing */
    table.table tbody td {
        padding: 0.75rem 0.5rem !important;
        vertical-align: middle !important;
        border-color: rgba(74, 124, 45, 0.1) !important;
    }

    /* Horizontal scroll with shadow indicators */
    .table-responsive {
        border-radius: 8px;
        box-shadow: inset -5px 0 5px -5px rgba(0,0,0,0.1),
                    inset 5px 0 5px -5px rgba(0,0,0,0.1);
    }

    /* Hide less important columns on very small screens */
    @media (max-width: 576px) {
        .mobile-hide-xs {
            display: none !important;
        }
    }

    /* Optimize navbar for mobile */
    .navbar-brand {
        font-size: 1rem !important;
    }

    .navbar-nav {
        flex-direction: column;
    }

    .navbar .nav-item {
        width: 100%;
        text-align: left;
    }

    /* Make dropdowns full width on mobile */
    .Select-control,
    .dash-dropdown {
        width: 100% !important;
    }

    /* Optimize data tables for mobile */
    .dash-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dash-table-container .dash-spreadsheet {
        max-width: 100%;
    }

    .dash-table-container .dash-spreadsheet-inner {
        overflow-x: scroll !important;
    }

    /* Make table cells more readable on mobile */
    .dash-cell {
        font-size: 0.85rem !important;
        padding: 8px 6px !important;
        min-width: 70px !important;
    }

    .dash-header {
        font-size: 0.85rem !important;
        padding: 8px 6px !important;
    }

    /* Stack form elements vertically */
    .row > .col,
    .row > [class*="col-"] {
        margin-bottom: 1rem;
    }

    /* Make stat cards stack nicely */
    .metric-card {
        margin-bottom: 1rem;
    }

    /* Optimize alerts */
    .alert {
        font-size: 0.9rem !important;
        padding: 0.875rem !important;
        border-radius: 8px !important;
        margin-bottom: 1rem !important;
    }

    /* Larger, more readable badges on mobile */
    .badge {
        font-size: 0.85rem !important;
        padding: 0.5rem 0.75rem !important;
        border-radius: 6px !important;
        font-weight: 600 !important;
    }

    /* Quality badges - larger on mobile for readability */
    .quality-badge {
        min-width: 48px !important;
        height: 32px !important;
        padding: 0 14px !important;
        font-size: 0.95rem !important;
    }

    /* Mobile navigation improvements */
    .navbar-collapse {
        background: var(--golf-green-primary) !important;
        padding: 1rem !important;
        margin: 0.5rem -1rem -0.5rem !important;
        border-radius: 0 0 8px 8px !important;
    }

    .navbar-nav .nav-link {
        padding: 0.875rem 1rem !important;
        margin: 0.25rem 0 !important;
        border-radius: 6px !important;
        transition: background-color 0.2s ease !important;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:active {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    /* Mobile dropdown menus */
    .dropdown-menu {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 8px !important;
        margin-top: 0.5rem !important;
    }

    .dropdown-item {
        padding: 0.875rem 1rem !important;
        font-size: 0.95rem !important;
    }

    /* Better spacing for form labels */
    label,
    .form-label {
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.5rem !important;
        color: var(--golf-green-primary) !important;
    }

    /* Chart containers - fix whitespace and sizing issues */
    .js-plotly-plot {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Plotly chart wrapper */
    .js-plotly-plot .plotly,
    .js-plotly-plot .svg-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fix plotly main-svg sizing */
    .js-plotly-plot .main-svg {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Ensure plotly graphs take full width */
    div[id*="graph"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fix graph containers */
    .graph-container,
    .dash-graph {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Specific fix for dispersion scatter plot */
    #dispersion-scatter-plot,
    #heatmap-dispersion-chart {
        width: 100% !important;
        max-width: 100% !important;
    }

    #dispersion-scatter-plot > div,
    #heatmap-dispersion-chart > div {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Reduce card padding on mobile for graphs */
    .card-body > .js-plotly-plot {
        margin-left: -0.75rem !important;
        margin-right: -0.75rem !important;
    }

    /* Fix for any plotly legend taking too much space */
    .js-plotly-plot .legend {
        max-width: 100% !important;
    }

    /* Hide scatter plot legend on mobile to maximize plot area */
    #dispersion-scatter-plot .legend {
        display: none !important;
    }

    /* Fix legend text wrapping - keep labels on single line */
    .js-plotly-plot .legendtext {
        white-space: nowrap !important;
        font-size: 10px !important;
    }

    /* Make legend more compact on mobile */
    .js-plotly-plot .legend .traces {
        max-width: 100% !important;
    }

    /* Fix width calculation issues */
    .card .js-plotly-plot .plot-container,
    .card .js-plotly-plot .plotly {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Remove any fixed widths from plotly */
    .plotly-graph-div {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fix colorbar positioning on mobile to prevent squeezing */
    .js-plotly-plot .colorbar {
        display: none !important;  /* Hide colorbar entirely on mobile */
    }

    /* Hide the colorbar's parent container too */
    .js-plotly-plot g.colorbar {
        display: none !important;
    }

    /* Ensure scatter plot uses full available width */
    #dispersion-scatter-plot .js-plotly-plot .xy {
        width: 100% !important;
    }

    /* Force scatter plot to full width by hiding legend and colorbar space */
    #dispersion-scatter-plot .js-plotly-plot svg.main-svg {
        width: 100% !important;
    }

    #dispersion-scatter-plot .js-plotly-plot .bg {
        width: 100% !important;
    }

    /* Maximize plot area in scatter plot */
    #dispersion-scatter-plot .plotly .xy {
        transform: none !important;
    }

    /* Reduce margins around plotly plots on mobile */
    .card-body .js-plotly-plot {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }

    /* Let plotly handle transforms naturally with domain=[0,1] setting */
    /* Just ensure containers don't constrain */

    /* Hide less important columns on mobile */
    .mobile-hide {
        display: none !important;
    }

    /* Player selector optimization */
    #player-selector {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fix player selector container on mobile */
    #player-selector-container .d-flex.align-items-center {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Make player selector dropdown full width on mobile */
    #player-selector-container .d-inline-block {
        display: block !important;
        width: 100% !important;
    }

    /* Stack label and dropdown vertically */
    #player-selector-container .fw-bold.me-2 {
        margin-bottom: 0.5rem !important;
        display: block !important;
    }

    /* Override inline styles on mobile */
    #player-selector-container [style*="width: 250px"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Make player selector card more compact on mobile */
    #player-selector-container .card {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Training plan optimizations */
    .training-session-card {
        margin-bottom: 1rem;
    }

    /* Import summary cards */
    .summary-card {
        margin-bottom: 0.75rem;
    }
}

/* Tablet optimizations (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .card-body {
        padding: 1rem !important;
    }
}

/* Touch-friendly interactions */
@media (hover: none) and (pointer: coarse) {
    /* Increase tap targets for touch devices */
    .btn,
    .nav-link,
    a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Better spacing for touch */
    .navbar .nav-item {
        padding: 4px 0;
    }

    /* Make dropdowns easier to tap */
    .Select-control {
        min-height: 44px !important;
    }
}

/* Landscape mobile optimization */
@media (max-width: 896px) and (orientation: landscape) {
    /* Reduce vertical space usage in landscape */
    h2 {
        font-size: 1.25rem !important;
        margin-bottom: 0.5rem !important;
    }

    .card {
        margin-bottom: 0.75rem !important;
    }

    .navbar {
        padding: 0.25rem 0.5rem !important;
    }
}

/* Dark mode support for mobile */
@media (prefers-color-scheme: dark) {
    /* Optional: Add dark mode styles if desired */
}

/* Print optimizations */
@media print {
    .navbar,
    .btn,
    #player-selector {
        display: none !important;
    }

    .container-fluid {
        padding: 0 !important;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .card {
        border: 2px solid currentColor !important;
    }

    .btn {
        border: 2px solid currentColor !important;
    }
}

/* Utility classes for mobile */
.mobile-only {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block !important;
    }

    .desktop-only {
        display: none !important;
    }
}

/* Chart responsive sizing */
.chart-container {
    width: 100%;
    height: auto;
    min-height: 300px;
}

@media (max-width: 768px) {
    .chart-container {
        min-height: 250px;
    }
}

/* Improve spacing for mobile readability */
@media (max-width: 768px) {
    p {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .table {
        font-size: 0.875rem;
    }

    /* Better spacing in lists */
    li {
        margin-bottom: 0.5rem;
    }
}

/* ============================================
   BOTTOM NAVIGATION BAR (Mobile-Friendly)
   ============================================ */

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65px;
    background: white;
    border-top: 1px solid #e0e0e0;
    display: none; /* Hidden on desktop */
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding-bottom: env(safe-area-inset-bottom); /* iOS safe area */
}

/* Show on mobile only */
@media (max-width: 768px) {
    .bottom-nav {
        display: flex;
    }
    
    /* Add padding to page content so it's not hidden behind nav */
    #page-content {
        padding-bottom: 80px !important;
    }
}

/* Individual nav items - scoped to bottom nav only */
.bottom-nav .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 4px;
    text-decoration: none;
    color: #666;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    min-width: 60px;
    min-height: 44px; /* Apple's minimum tap target size */
}

.bottom-nav .nav-item:hover,
.bottom-nav .nav-item:focus {
    color: var(--golf-green-primary, #2d5016);
    text-decoration: none;
    background: rgba(0, 0, 0, 0.05);
}

.bottom-nav .nav-item.active {
    color: var(--golf-green-primary, #2d5016);
    font-weight: 600;
}

/* Nav icons */
.bottom-nav .nav-item i {
    font-size: 22px;
    margin-bottom: 4px;
    display: block;
}

.bottom-nav .nav-item span {
    display: block;
    font-size: 11px;
    line-height: 1.2;
}

/* Active indicator */
.bottom-nav .nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: var(--golf-green-primary, #2d5016);
    border-radius: 0 0 3px 3px;
}

/* Ripple effect on tap */
.bottom-nav .nav-item {
    position: relative;
    overflow: hidden;
}

.bottom-nav .nav-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.bottom-nav .nav-item:active::after {
    width: 100px;
    height: 100px;
}

/* iOS safe area support */
@supports (padding: max(0px)) {
    .bottom-nav {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
}

/* Dark mode support (if implemented) */
@media (prefers-color-scheme: dark) {
    .bottom-nav {
        background: #1a1a1a;
        border-top-color: #333;
    }

    .bottom-nav .nav-item {
        color: #aaa;
    }

    .bottom-nav .nav-item:hover,
    .bottom-nav .nav-item.active {
        color: var(--golf-green-light, #6b9a4f);
    }
}

/* Badge for notifications (optional future enhancement) */
.bottom-nav .nav-item .badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 20px);
    background: var(--golf-danger, #c94c4c);
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   DROPDOWN IMPROVEMENTS (Mobile)
   ============================================ */

/* Make dropdowns more touch-friendly on mobile */
@media (max-width: 768px) {
    .Select-control {
        min-height: 44px !important; /* Apple's minimum tap target */
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }

    .Select-value-label {
        font-size: 16px !important;
    }
}

/* Prevent zoom on input focus (iOS) */
input,
select,
textarea {
    font-size: 16px !important;
}