/**
 * DateTimeRangePicker Styles - Mobile Responsive Version
 * Version: 1.1.0
 * 
 * All styles are scoped to .dtrp-widget-container to prevent conflicts
 * Mobile responsive: wraps to two rows on small screens
 */

/* Main widget container */
.dtrp-widget-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: 20px 0;
}

/* Widget title */
.dtrp-widget-title {
    color: #333;
    margin: 0 0 15px 0;
    font-size: 18px;
    font-weight: 600;
}

/* Picker wrapper - horizontal layout */
.dtrp-picker-wrapper {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    position: relative;
}

/* Input groups */
.dtrp-input-group {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.dtrp-input-group .dtrp-label {
    font-size: 11px;
    font-weight: 600;
    color: #555;
    margin: 0 0 5px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}

.dtrp-input-wrapper {
    position: relative;
}

/* Input styling - using the specific class names */
.dtrp-widget-container .calendar_date,
.dtrp-widget-container .calendar_start_time,
.dtrp-widget-container .calendar_end_date,
.dtrp-widget-container .calendar_end_time {
    padding: 8px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    background: white;
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: inherit;
    color: #333;
    display: block;
    width: 100%;
}

/* Date inputs minimum width */
.dtrp-widget-container .calendar_date,
.dtrp-widget-container .calendar_end_date {
    min-width: 140px;
}

/* Time inputs minimum width */
.dtrp-widget-container .calendar_start_time,
.dtrp-widget-container .calendar_end_time {
    min-width: 110px;
}

/* Hover states */
.dtrp-widget-container .calendar_date:hover,
.dtrp-widget-container .calendar_start_time:hover,
.dtrp-widget-container .calendar_end_date:hover,
.dtrp-widget-container .calendar_end_time:hover {
    border-color: #646464;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Focus states */
.dtrp-widget-container .calendar_date:focus,
.dtrp-widget-container .calendar_start_time:focus,
.dtrp-widget-container .calendar_end_date:focus,
.dtrp-widget-container .calendar_end_time:focus {
    outline: none;
    border-color: #646464;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

/* Disabled state */
.dtrp-widget-container input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f5f5f5;
}

/* Error state */
.dtrp-widget-container .dtrp-error {
    border-color: #f44336 !important;
    animation: dtrp-shake 0.3s ease;
}

.dtrp-widget-container .dtrp-error:focus {
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.2) !important;
}

/* Separator arrow */
.dtrp-separator {
    display: flex;
    align-items: center;
    padding-top: 18px;
    color: #999;
    font-size: 18px;
    flex-shrink: 0;
}

/* Mobile-only separator (hidden by default) */
.dtrp-mobile-separator {
    display: none;
    width: 100%;
    text-align: center;
    color: #999;
    font-size: 12px;
    padding: 8px 0;
    position: relative;
}

.dtrp-mobile-separator::before,
.dtrp-mobile-separator::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 35%;
    height: 1px;
    background: #e0e0e0;
}

.dtrp-mobile-separator::before {
    left: 0;
}

.dtrp-mobile-separator::after {
    right: 0;
}

/* Validation messages */
.dtrp-validation-msg {
    position: absolute;
    bottom: -22px;
    left: 0;
    right: 0;
    color: #f44336;
    font-size: 11px;
    display: none;
    animation: dtrp-fadeIn 0.3s ease;
    white-space: nowrap;
    z-index: 10;
}

.dtrp-validation-msg.dtrp-show {
    display: block;
}

/* Info panel */
.dtrp-info-panel {
    margin-top: 20px;
    padding: 15px;
    background: linear-gradient(135deg, #64646415 0%, #764ba215 100%);
    border-radius: 8px;
    border-left: 3px solid #646464;
}

.dtrp-info-title {
    color: #646464;
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 600;
}

.dtrp-selected-range {
    color: #333;
    font-size: 13px;
    line-height: 1.5;
}

.dtrp-selected-range .dtrp-highlight {
    font-weight: 600;
    color: #646464;
}

/* Clear button */
.dtrp-clear-btn {
    padding: 8px 16px;
    background: #646464;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 15px;
    display: inline-block;
}

.dtrp-clear-btn:hover:not(:disabled) {
    background: #5a67d8;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.dtrp-clear-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Animations */
@keyframes dtrp-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

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

/* Responsive adjustments for tablets and mobile */
@media (max-width: 768px) {
    .dtrp-widget-container {
        padding: 15px;
    }
    
    /* Enable two-row layout on mobile */
    .dtrp-picker-wrapper {
        padding: 15px;
        gap: 10px;
        flex-wrap: wrap;
        overflow-x: visible;
        align-items: stretch;
    }
    
    /* Create two groups: start and end */
    .dtrp-date-time-group {
        display: flex;
        gap: 10px;
        width: 100%;
        flex: 1 1 100%;
    }
    
    /* Input groups take up half width in their row */
    .dtrp-input-group {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
    }
    
    /* Hide desktop separator on mobile */
    .dtrp-separator {
        display: none;
    }
    
    /* Show mobile separator */
    .dtrp-mobile-separator {
        display: block;
        order: 2;
        flex-basis: 100%;
    }
    
    /* Ensure proper ordering with flexbox */
    .dtrp-input-group.dtrp-start-date { order: 1; }
    .dtrp-input-group.dtrp-start-time { order: 1; }
    .dtrp-input-group.dtrp-end-date { order: 3; }
    .dtrp-input-group.dtrp-end-time { order: 3; }
    
    /* Adjust input styles for mobile */
    .dtrp-widget-container .calendar_date,
    .dtrp-widget-container .calendar_start_time,
    .dtrp-widget-container .calendar_end_date,
    .dtrp-widget-container .calendar_end_time {
        padding: 8px 10px;
        font-size: 14px;
        min-width: 0;
        width: 100%;
    }
    
    /* Adjust label spacing */
    .dtrp-input-group .dtrp-label {
        font-size: 10px;
        margin-bottom: 4px;
    }
    
    /* Adjust validation message position for wrapped layout */
    .dtrp-validation-msg {
        bottom: -20px;
    }
    
    /* Info panel adjustments */
    .dtrp-info-panel {
        margin-top: 25px;
        padding: 12px;
    }
}

/* Smaller mobile screens */
@media (max-width: 480px) {
    .dtrp-widget-container {
        padding: 12px;
    }
    
    .dtrp-picker-wrapper {
        padding: 12px;
        gap: 8px;
    }
    
    /* Stack all inputs vertically on very small screens */
    .dtrp-input-group {
        flex: 1 1 100%;
    }
    
    /* Group start inputs */
    .dtrp-input-group.dtrp-start-date,
    .dtrp-input-group.dtrp-start-time {
        margin-bottom: 0;
    }
    
    /* Add more spacing before end inputs */
    .dtrp-mobile-separator {
        margin: 10px 0;
    }
    
    /* Smaller text and padding */
    .dtrp-widget-container .calendar_date,
    .dtrp-widget-container .calendar_start_time,
    .dtrp-widget-container .calendar_end_date,
    .dtrp-widget-container .calendar_end_time {
        padding: 7px 9px;
        font-size: 13px;
    }
    
    .dtrp-clear-btn {
        padding: 7px 14px;
        font-size: 12px;
        width: 100%;
    }
}

/* Custom scrollbar for desktop mode */
.dtrp-picker-wrapper::-webkit-scrollbar {
    height: 5px;
}

.dtrp-picker-wrapper::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 3px;
}

.dtrp-picker-wrapper::-webkit-scrollbar-thumb {
    background: #646464;
    border-radius: 3px;
}

.dtrp-picker-wrapper::-webkit-scrollbar-thumb:hover {
    background: #5a67d8;
}

/* Theme variations */
.dtrp-widget-container.dtrp-theme-dark {
    background: #2d3748;
    color: #e2e8f0;
}

.dtrp-widget-container.dtrp-theme-dark .dtrp-widget-title {
    color: #e2e8f0;
}

.dtrp-widget-container.dtrp-theme-dark .dtrp-picker-wrapper {
    background: #1a202c;
}

.dtrp-widget-container.dtrp-theme-dark .dtrp-input-group .dtrp-label {
    color: #a0aec0;
}

.dtrp-widget-container.dtrp-theme-dark .calendar_date,
.dtrp-widget-container.dtrp-theme-dark .calendar_start_time,
.dtrp-widget-container.dtrp-theme-dark .calendar_end_date,
.dtrp-widget-container.dtrp-theme-dark .calendar_end_time {
    background: #2d3748;
    color: #e2e8f0;
    border-color: #4a5568;
}

.dtrp-widget-container.dtrp-theme-dark .dtrp-mobile-separator {
    color: #a0aec0;
}

.dtrp-widget-container.dtrp-theme-dark .dtrp-mobile-separator::before,
.dtrp-widget-container.dtrp-theme-dark .dtrp-mobile-separator::after {
    background: #4a5568;
}

.dtrp-widget-container.dtrp-theme-dark .dtrp-info-panel {
    background: linear-gradient(135deg, #64646420 0%, #764ba220 100%);
    border-left-color: #646464;
}

.dtrp-widget-container.dtrp-theme-dark .dtrp-selected-range {
    color: #e2e8f0;
}

/* Compact theme */
.dtrp-widget-container.dtrp-theme-compact {
    padding: 12px;
}

.dtrp-widget-container.dtrp-theme-compact .dtrp-picker-wrapper {
    padding: 10px;
    gap: 8px;
}

.dtrp-widget-container.dtrp-theme-compact .dtrp-widget-title {
    font-size: 16px;
    margin-bottom: 10px;
}

.dtrp-widget-container.dtrp-theme-compact .calendar_date,
.dtrp-widget-container.dtrp-theme-compact .calendar_start_time,
.dtrp-widget-container.dtrp-theme-compact .calendar_end_date,
.dtrp-widget-container.dtrp-theme-compact .calendar_end_time {
    padding: 5px 8px;
    font-size: 13px;
}

.dtrp-widget-container.dtrp-theme-compact .dtrp-info-panel {
    padding: 10px;
    margin-top: 12px;
}

.dtrp-widget-container.dtrp-theme-compact .dtrp-clear-btn {
    padding: 6px 12px;
    font-size: 12px;
    margin-top: 10px;
}