/* Mobile-friendly styles for Foresight Dashboard */

/* Better spacing and touch targets for sliders - ALL SCREEN SIZES */
.rc-slider {
    margin: 20px 0 !important;
    padding: 10px 0 !important;
}

/* Larger slider handle for easier touch interaction - ALL SCREEN SIZES */
.rc-slider-handle {
    width: 24px !important;
    height: 24px !important;
    margin-top: -10px !important;
    border-width: 3px !important;
}

/* Thicker slider track - ALL SCREEN SIZES */
.rc-slider-track {
    height: 6px !important;
}

.rc-slider-rail {
    height: 6px !important;
}

/* Larger touch area for slider marks - ALL SCREEN SIZES */
.rc-slider-mark-text {
    font-size: 12px !important;
    margin-top: 8px !important;
}

/* Improve touch targets for mobile */
@media (max-width: 1025px) {
    .btn {
        min-height: 44px;
        font-size: 14px;
    }

    /* Improve dropdown touch targets */
    .Select-control {
        min-height: 44px !important;
    }

    /* Better card spacing on mobile */
    .card {
        margin-bottom: 1rem !important;
    }

    /* Smaller headings on mobile */
    h5 {
        font-size: 1.1rem !important;
    }

    h6 {
        font-size: 1rem !important;
    }

    /* Improve modal on mobile */
    .modal-dialog {
        margin: 0.5rem !important;
    }

    /* Reduce padding in card bodies */
    .card-body {
        padding: 1rem !important;
    }

    /* Better button text wrapping */
    .btn {
        white-space: normal;
        word-wrap: break-word;
    }
}

/* Improve graph responsiveness across all screen sizes */
.js-plotly-plot {
    width: 100% !important;
}

/* Ensure graphs scale properly */
.js-plotly-plot .plotly {
    width: 100% !important;
}

/* Better touch experience for interactive elements */
@media (hover: none) and (pointer: coarse) {
    .btn:hover {
        transform: scale(0.98);
    }
}