#dateRangePicker {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px !important; /* Force 16px to prevent mobile zoom */
    -webkit-text-size-adjust: 100%; /* Prevent iOS text size adjustment */
}

/* Ensure the picker doesn't overflow */
.daterangepicker {
    box-sizing: border-box;
    z-index: 10000;
}

/* Mobile-specific responsive styles */
@media (max-width: 576px) {
    #dateRangePicker {
        font-size: 16px !important; /* Prevent mobile zoom on focus */
        touch-action: manipulation; /* Improve touch behavior */
    }

    .daterangepicker {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 95% !important;
        max-width: 340px !important;
        margin: 0 !important;
    }

    /* Show only one calendar on mobile */
    .daterangepicker .drp-calendar.left {
        display: block !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }

    .daterangepicker .drp-calendar.right {
        display: none !important;
    }

    /* Stack ranges vertically on mobile */
    .daterangepicker .ranges {
        width: 100% !important;
        float: none !important;
        text-align: left !important;
        margin-bottom: 10px !important;
    }

    .daterangepicker .ranges ul {
        width: 100% !important;
    }

    .daterangepicker .ranges li {
        font-size: 13px;
        padding: 8px 12px;
        margin-bottom: 2px;
    }

    /* Calendar adjustments */
    .daterangepicker .drp-calendar {
        max-width: 100% !important;
        padding: 8px !important;
    }

    .daterangepicker .calendar-table {
        font-size: 13px;
    }

    .daterangepicker .calendar-table th,
    .daterangepicker .calendar-table td {
        padding: 4px;
        min-width: 32px;
        height: 32px;
    }

    /* Buttons */
    .daterangepicker .drp-buttons {
        padding: 8px !important;
        border-top: 1px solid #ddd;
        text-align: center;
        clear: both;
    }

    .daterangepicker .drp-buttons .btn {
        margin: 0 4px;
        font-size: 14px;
    }

    /* Selected dates display */
    .daterangepicker .drp-selected {
        display: none; /* Hide on mobile to save space */
    }
}

/* Tablet adjustments */
@media (min-width: 577px) and (max-width: 768px) {
    .daterangepicker {
        width: auto !important;
        max-width: 600px !important;
    }

    .daterangepicker .drp-calendar {
        max-width: 280px !important;
    }
}