/* ==========================================
 * DATETIME.CSS - MODERN DATETIME PICKER
 * FILE: /css/renter/styles/discover/components/datetime.css
 * VERSION: v=20251001
 * ==========================================
 * 🎯 PURPOSE: DateTime picker container and dropdown styling
 * 📱 COVERAGE: Responsive datetime field with modern design
 * 🔧 FEATURES: Hover effects, dark mode, text sizing
 * 📄 IMPORTED BY: discover.html (line 322)
 * 🚀 STATUS: ACTIVE - Modern datetime picker component
 * ========================================== */

/* ==========================================
 * iOS 13 COMPATIBILITY - Transform adjustment
 * When Google Maps is unavailable, shift datetime to the right
 * ========================================== */
html.ios13-no-maps .datetime-display-container {
  transform: translateX(0.5rem);
}

html.ios13-no-maps .datetime-display-container:hover {
  transform: translateX(0.5rem) translateY(-2px);
}

html.ios13-no-maps .datetime-display-container:active {
  transform: translateX(0.5rem) translateY(-1px);
}
/* DATETIME.CSS: Base container styles */
.datetime-display-container {
  /* datetime.css - Modern Layout */
  position: relative;
  display: block;
  width: 100%;
  min-height: 3.5rem;
  padding: 0;
  box-sizing: border-box;

  /* datetime.css - Modern Styling */
  cursor: pointer;
  user-select: none;
  z-index: var(--z-overlay); /* datetime.css - overlay z-index */

  /* Enhanced Interactions */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.datetime-display-container:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.datetime-display-container:active {
  transform: translateY(-1px);
  transition: all 0.1s ease-out;
}

/* Modern Datetime Picker Dropdown */
#datetime-picker-dropdown {
  /* Enhanced positioning - let JavaScript control exact position */
  min-width: 280px;
  max-width: 380px; /* Reduced from 420px for better mobile fit */
  width: 380px; /* Reduced from 420px */
  max-height: 572px !important; /* Fixed height: 572px */
  min-height: 360px; /* Reduced from 400px for smaller screens */

  /* CRITICAL: Maximum safe z-index to appear above map and all other elements */
  z-index: var(--z-maximum) !important;

  /* Glassmorphism effect removed - no blur */
  /* backdrop-filter: blur(20px); */
  /* -webkit-backdrop-filter: blur(20px); */

  /* Modern animations - NO transform for positioning, only for show/hide */
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;

  /* Ensure visibility when not hidden */
  display: block;
  visibility: visible;

  /* CRITICAL: Ensure dropdown can escape any container constraints */
  position: fixed !important;

  /* CRITICAL: Force new stacking context above everything */
  isolation: isolate !important;

  /* Ensure content can scroll if needed */
  overflow-y: auto;
  overflow-x: hidden;
}

#datetime-picker-dropdown.show {
  opacity: 1;
  pointer-events: auto;
  display: block !important;
  visibility: visible !important;
  isolation: isolate !important;
}

/* Modern Preset Buttons */
.datetime-preset-btn {
  position: relative;
  overflow: hidden;
}

.datetime-preset-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.datetime-preset-btn:hover::before {
  left: 100%;
}

.datetime-preset-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Enhanced form inputs */
#custom-date-input,
#custom-start-time,
#custom-end-time {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#custom-date-input:focus,
#custom-start-time:focus,
#custom-end-time:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* Modern Action Buttons */
#datetime-apply-btn {
  background: linear-gradient(135deg, #1d4ed8, #1d4ed8);
  position: relative;
  overflow: hidden;
}

#datetime-apply-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s;
}

#datetime-apply-btn:hover::before {
  left: 100%;
}

#datetime-apply-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

#datetime-cancel-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Dark mode enhancements for datetime picker */
.dark .datetime-display-container:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.dark #datetime-picker-dropdown {
  border-color: rgba(64, 64, 64, 0.8);
  background: rgba(38, 38, 38, 0.95);
}

.dark .datetime-preset-btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark #custom-date-input:focus,
.dark #custom-start-time:focus,
.dark #custom-end-time:focus {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.dark #datetime-apply-btn:hover {
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}

.dark #datetime-cancel-btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Ensure proper text alignment and spacing in datetime field */
.datetime-display-container .flex.items-center {
  align-items: center !important;
}
.datetime-display-container .flex-1.min-w-0 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.125rem;
  /* CENTERED: Horizontally center datetime text */
  align-items: center;
  text-align: center;
}
/* Ensure text doesn't overflow and is centered */
.datetime-display-container .text-xs,
.datetime-display-container .text-sm,
.datetime-display-container .datetime-label-text,
.datetime-display-container #datetime-display-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center !important;
  width: 100%;
}
/* Completely hide the datetime input - it should be invisible but functional */
#start-time {
  /* CRITICAL: Hide the native datetime input completely */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;

  /* Make it completely invisible */
  opacity: 0 !important;
  visibility: hidden !important;

  /* Remove all visual styling */
  background: transparent !important;
  border: none !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;

  /* Hide text content */
  color: transparent !important;
  text-shadow: none !important;
  font-size: 16px !important; /* Prevent mobile zoom */

  /* Remove browser styling */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  -webkit-text-fill-color: transparent !important;

  /* Ensure it's still clickable but invisible */
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: var(--z-search-focus) !important;

  /* Move any text completely off-screen */
  text-indent: -9999px !important;
  overflow: hidden !important;
}
/* Make sure the input covers the entire container */
.datetime-display-container:has(#start-time) {
  position: relative;
}
/* Remove conflicting pointer-events rules - let datetime input handle clicks */

/* Datetime container text sizing - Base mobile styles */
.datetime-display-container .text-xs {
  font-size: 0.75rem; /* Readable label */
  line-height: 1rem; /* Tight line height */
}

.datetime-display-container .text-sm {
  font-size: 0.875rem; /* Readable value text */
  line-height: 1.125rem; /* Tight line height */
}

/* Note: Desktop overrides for these are in the @media (min-width: 1024px) block below */

/* Ensure text content doesn't expand container */
.datetime-display-container .pl-6 {
  padding-left: 1.5rem;
  padding-right: 2rem; /* Space for dropdown arrow */
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%; /* Fill container height */
}
/* Ensure icons stay properly positioned */
.datetime-display-container .absolute {
  z-index: var(--z-search); /* Above text content */
}
/* Remove any margin that might expand container */
.datetime-display-container .mt-0\.5,
.datetime-display-container .mt-1 {
  margin-top: 0;
}

/* CRITICAL: Ensure proper contrast on dark overlays and backgrounds */
.dark *[style*="background: rgba(0"],
.dark *[style*="background-color: rgba(0"],
html.dark *[style*="background: rgba(0"],
html.dark *[style*="background-color: rgba(0"],
body.dark *[style*="background: rgba(0"],
body.dark *[style*="background-color: rgba(0"] {
  color: #f9fafb !important; /* Light text on dark backgrounds */
}

/* Ensure text is light on any very dark background */
*[style*="background: #0"],
*[style*="background-color: #0"],
*[style*="background: rgba(0, 0, 0"],
*[style*="background-color: rgba(0, 0, 0"] {
  color: #f9fafb !important; /* Light text on very dark backgrounds */
}

/* Override any gray-800 text that might appear on dark backgrounds in dark mode */
.dark .text-gray-800,
html.dark .text-gray-800,
body.dark .text-gray-800,
.dark [style*="color: #ffffff"],
html.dark [style*="color: #ffffff"],
body.dark [style*="color: #ffffff"] {
  color: #f9fafb !important; /* Light text in dark mode */
}

/* NOTE: Dark mode styles (including NUCLEAR OPTION) consolidated in dark-mode.css */

/* Cover computed styles that might result in gray-800 */

/* ========================================
 * RESPONSIVE DATETIME DROPDOWN SIZING
 * ======================================== */

/* Desktop: ≥1024px - Use responsive viewport sizing */
@media (min-width: 1024px) {
  #datetime-picker-dropdown {
    max-height: 90vh !important; /* Utilize available viewport space */
  }
}

/* Tablet: 768px-1023px - Responsive height for tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  #datetime-picker-dropdown {
    max-height: 85vh !important; /* Tablet-optimized height */
  }
}

/* Mobile: 340px-767px - Centered modal approach */
@media (min-width: 340px) and (max-width: 767px) {
  #datetime-picker-dropdown {
    width: calc(100vw - 2rem) !important;
    max-width: 340px !important; /* Reduced from 380px */
    min-width: 280px !important;
    max-height: 75vh !important;
    min-height: 320px !important; /* Reduced for mobile */
    left: 50% !important;
    right: auto !important; /* Override any right positioning */
    transform: translateX(-50%) !important;
    top: 5rem !important; /* Avoid header overlap */
    padding: 0.75rem !important; /* Reduced padding for mobile */
    margin: 0 auto !important; /* Center horizontally */
  }
  
  /* CRITICAL: Override inline styles for mobile/touch devices */
  #datetime-picker-dropdown[style] {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* RESPONSIVE BUTTON SIZING: Reduce button sizes for mobile */
  #datetime-picker-dropdown #hourly-tab,
  #datetime-picker-dropdown #daily-tab,
  #datetime-picker-dropdown #weekly-tab,
  #datetime-picker-dropdown .datetime-preset-btn,
  #datetime-picker-dropdown #datetime-apply-btn,
  #datetime-picker-dropdown #datetime-cancel-btn {
    padding: 0.5rem 0.75rem !important; /* Reduced from 0.75rem 1.25rem */
    font-size: 0.875rem !important; /* Reduced from 1rem */
    min-height: 36px !important; /* Reduced from 44px */
    min-width: auto !important; /* Remove min-width constraint */
  }
  
  /* RESPONSIVE INPUT SIZING: Reduce input field sizes for mobile */
  #datetime-picker-dropdown input[type="date"],
  #datetime-picker-dropdown input[type="time"],
  #datetime-picker-dropdown select {
    padding: 0.625rem 0.75rem !important; /* Reduced from 1rem */
    font-size: 0.875rem !important; /* Reduced from 1rem */
    min-height: 36px !important; /* Reduced from 44px */
  }
}

/* Small Phone: ≤375px - Compact centered modal */
@media (max-width: 375px) {
  #datetime-picker-dropdown {
    width: calc(100vw - 1rem) !important;
    max-width: 300px !important; /* Reduced from 320px */
    min-width: 260px !important;
    max-height: 70vh !important;
    min-height: 300px !important; /* Further reduced for small phones */
    left: 50% !important;
    right: auto !important; /* Override any right positioning */
    transform: translateX(-50%) !important;
    top: 4rem !important; /* Compact top spacing */
    padding: 0.5rem !important; /* Minimal padding for small screens */
    font-size: 0.875rem !important; /* Slightly smaller text */
    margin: 0 auto !important; /* Center horizontally */
  }
  
  /* CRITICAL: Override inline styles for small mobile/touch devices */
  #datetime-picker-dropdown[style] {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Reduce font sizes in dropdown for small screens */
  #datetime-picker-dropdown .text-sm {
    font-size: 0.75rem !important;
  }
  
  #datetime-picker-dropdown .text-base {
    font-size: 0.875rem !important;
  }
  
  /* RESPONSIVE BUTTON SIZING: Further reduce button sizes for small phones */
  #datetime-picker-dropdown #hourly-tab,
  #datetime-picker-dropdown #daily-tab,
  #datetime-picker-dropdown #weekly-tab,
  #datetime-picker-dropdown .datetime-preset-btn,
  #datetime-picker-dropdown #datetime-apply-btn,
  #datetime-picker-dropdown #datetime-cancel-btn {
    padding: 0.375rem 0.5rem !important; /* Further reduced for small phones */
    font-size: 0.75rem !important; /* Smaller font for small screens */
    min-height: 32px !important; /* Further reduced from 44px */
    min-width: auto !important; /* Remove min-width constraint */
  }
  
  /* RESPONSIVE INPUT SIZING: Further reduce input field sizes for small phones */
  #datetime-picker-dropdown input[type="date"],
  #datetime-picker-dropdown input[type="time"],
  #datetime-picker-dropdown select {
    padding: 0.5rem 0.625rem !important; /* Further reduced for small phones */
    font-size: 0.8125rem !important; /* Smaller font for small screens */
    min-height: 32px !important; /* Further reduced from 44px */
  }
}

/* ========================================
 * TOUCH DEVICE SPECIFIC: Force horizontal centering
 * ======================================== */

/* Touch devices (phones/tablets) - Comprehensive responsive styling */
@media (hover: none) and (pointer: coarse) and (max-width: 1023px) {
  /* MAIN CONTAINER: Compact width for touch mobile */
  #datetime-picker-dropdown {
    width: calc(100vw - 2rem) !important;
    max-width: 320px !important; /* Reduced from 380px */
    min-width: 280px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(calc(-50% - 8px)) !important; /* Center with small left offset */
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0.75rem !important; /* Tighter padding */
  }
  
  /* CRITICAL: Override inline styles with attribute selector */
  #datetime-picker-dropdown[style] {
    width: calc(100vw - 2rem) !important;
    max-width: 320px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(calc(-50% - 8px)) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    inset: auto !important;
  }
  
  /* INNER CONTAINER PADDING: Reduce all padding */
  #datetime-picker-dropdown > div,
  #datetime-picker-dropdown .p-4,
  #datetime-picker-dropdown .p-5,
  #datetime-picker-dropdown .p-6 {
    padding: 0.625rem !important;
  }
  
  #datetime-picker-dropdown .px-4,
  #datetime-picker-dropdown .px-5,
  #datetime-picker-dropdown .px-6 {
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
  }
  
  #datetime-picker-dropdown .py-3,
  #datetime-picker-dropdown .py-4 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  
  /* SPACING: Tighter gaps */
  #datetime-picker-dropdown .space-y-3 > * + *,
  #datetime-picker-dropdown .space-y-4 > * + * {
    margin-top: 0.5rem !important;
  }
  
  #datetime-picker-dropdown .gap-2 {
    gap: 0.375rem !important;
  }
  
  #datetime-picker-dropdown .gap-3,
  #datetime-picker-dropdown .gap-4 {
    gap: 0.5rem !important;
  }
  
  /* TABS: Compact styling */
  #datetime-picker-dropdown #hourly-tab,
  #datetime-picker-dropdown #daily-tab,
  #datetime-picker-dropdown #weekly-tab {
    padding: 0.375rem 0.625rem !important;
    font-size: 0.75rem !important;
    min-height: 32px !important;
    flex: 1 !important;
  }
  
  /* PRESET BUTTONS: Compact grid */
  #datetime-picker-dropdown .datetime-preset-btn {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.75rem !important;
    min-height: 32px !important;
  }
  
  /* ACTION BUTTONS: Compact */
  #datetime-picker-dropdown #datetime-apply-btn,
  #datetime-picker-dropdown #datetime-cancel-btn {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8125rem !important;
    min-height: 36px !important;
  }
  
  /* INPUT FIELDS: Compact */
  #datetime-picker-dropdown input[type="date"],
  #datetime-picker-dropdown input[type="time"],
  #datetime-picker-dropdown #custom-date-input,
  #datetime-picker-dropdown #custom-start-time,
  #datetime-picker-dropdown #custom-end-time,
  #datetime-picker-dropdown select {
    padding: 0.5rem 0.625rem !important;
    font-size: 0.8125rem !important;
    min-height: 34px !important;
    width: 100% !important;
  }
  
  /* LABELS: Smaller text */
  #datetime-picker-dropdown label,
  #datetime-picker-dropdown .text-xs {
    font-size: 0.6875rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  #datetime-picker-dropdown .text-sm {
    font-size: 0.75rem !important;
  }
  
  #datetime-picker-dropdown .text-base {
    font-size: 0.8125rem !important;
  }
  
  #datetime-picker-dropdown .text-lg {
    font-size: 0.875rem !important;
  }
  
  /* HEADER: Compact */
  #datetime-picker-dropdown h3,
  #datetime-picker-dropdown .font-semibold {
    font-size: 0.875rem !important;
  }
  
  /* ICONS: Slightly smaller */
  #datetime-picker-dropdown svg {
    width: 1rem !important;
    height: 1rem !important;
  }
  
  #datetime-picker-dropdown .w-5.h-5 {
    width: 1rem !important;
    height: 1rem !important;
  }
  
  #datetime-picker-dropdown .w-6.h-6 {
    width: 1.125rem !important;
    height: 1.125rem !important;
  }
  
  /* FLEX LAYOUTS: Ensure proper wrapping */
  #datetime-picker-dropdown .flex {
    flex-wrap: wrap !important;
  }
  
  #datetime-picker-dropdown .grid {
    gap: 0.375rem !important;
  }
  
  /* BORDERS: Tighter margins */
  #datetime-picker-dropdown .border-t,
  #datetime-picker-dropdown .border-b {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
}

/* SMALL PHONES: Even more compact */
@media (hover: none) and (pointer: coarse) and (max-width: 375px) {
  #datetime-picker-dropdown,
  #datetime-picker-dropdown[style] {
    width: calc(100vw - 1rem) !important;
    max-width: 290px !important;
    min-width: 260px !important;
    padding: 0.5rem !important;
  }
  
  #datetime-picker-dropdown > div,
  #datetime-picker-dropdown .p-4,
  #datetime-picker-dropdown .p-5,
  #datetime-picker-dropdown .p-6 {
    padding: 0.5rem !important;
  }
  
  #datetime-picker-dropdown #hourly-tab,
  #datetime-picker-dropdown #daily-tab,
  #datetime-picker-dropdown #weekly-tab {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.6875rem !important;
    min-height: 28px !important;
  }
  
  #datetime-picker-dropdown .datetime-preset-btn {
    padding: 0.25rem 0.375rem !important;
    font-size: 0.6875rem !important;
    min-height: 28px !important;
  }
  
  #datetime-picker-dropdown #datetime-apply-btn,
  #datetime-picker-dropdown #datetime-cancel-btn {
    padding: 0.375rem 0.625rem !important;
    font-size: 0.75rem !important;
    min-height: 32px !important;
  }
  
  #datetime-picker-dropdown input[type="date"],
  #datetime-picker-dropdown input[type="time"],
  #datetime-picker-dropdown #custom-date-input,
  #datetime-picker-dropdown #custom-start-time,
  #datetime-picker-dropdown #custom-end-time,
  #datetime-picker-dropdown select {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.75rem !important;
    min-height: 30px !important;
  }
  
  #datetime-picker-dropdown label,
  #datetime-picker-dropdown .text-xs {
    font-size: 0.625rem !important;
  }
  
  #datetime-picker-dropdown .text-sm {
    font-size: 0.6875rem !important;
  }
  
  #datetime-picker-dropdown h3,
  #datetime-picker-dropdown .font-semibold {
    font-size: 0.8125rem !important;
  }
}