/**
 * Mobile Responsiveness Improvements
 * Date: 2025-10-17 (initial mobile improvements)
 * Updated: 2025-10-20 (comprehensive modal redesign)
 * Purpose: Quick wins to enhance mobile UX
 *
 * IMPORTANT: Add this file to index.html AFTER styles-unified.css
 * <link rel="stylesheet" href="css/mobile-improvements.css">
 *
 * ⚠️ TECHNICAL DEBT WARNING:
 * This file uses !important overrides extensively (237 declarations across ~750 lines).
 * This is a TEMPORARY solution for quick mobile improvements.
 *
 * Future refactoring needed:
 * - Refactor styles-unified.css to mobile-first approach
 * - Remove all !important declarations
 * - Consolidate into single CSS file
 * - See docs/CSS_REFACTORING_PLAN.md for details
 */

/* ===== PRIORITY 1: CRITICAL FIXES ===== */

/* Fix 1: Improve Room Indicator Readability */
@media (max-width: 768px) {
  .room-indicator {
    font-size: 0.6rem !important; /* Increased from 0.55rem */
    padding: 0.15rem 0.3rem !important;
    min-width: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
  }
}

/* Fix 2: Larger Modal Close Button */
@media (max-width: 768px) {
  .modal-close {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.5rem !important;
    top: 0.75rem !important;
    right: 0.75rem !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }

  .modal-close:hover {
    background: rgba(255, 255, 255, 1) !important;
    transform: scale(1.05) !important;
  }
}

/* Fix 3: Better Touch Feedback for Interactive Elements */
@media (hover: none) and (pointer: coarse) {
  /* Buttons */
  .btn:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s ease !important;
  }

  /* Calendar days */
  .calendar-day:active {
    transform: scale(0.95) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition:
      transform 0.1s ease,
      box-shadow 0.1s ease !important;
  }

  /* Navigation buttons */
  .nav-btn:active,
  .legend-toggle-btn:active {
    transform: scale(0.9) !important;
    transition: transform 0.1s ease !important;
  }

  /* Counter buttons */
  .counter-btn:active {
    transform: scale(0.85) !important;
    background: rgba(0, 122, 255, 0.1) !important;
  }

  /* Mini calendar days */
  .mini-calendar-day:active {
    transform: scale(0.93) !important;
    background: rgba(0, 122, 255, 0.1) !important;
  }
}

/* Fix 4: Improve Mini Calendar Day Size */
@media (max-width: 768px) {
  .mini-calendar-day {
    height: 42px !important; /* Increased from 38px */
    min-width: 42px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
  }

  .mini-calendar-day-header {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 0.3rem !important;
  }
}

/* Fix 5: Better Calendar Day Number Visibility */
@media (max-width: 768px) {
  .calendar-day-number {
    font-size: 0.85rem !important; /* ~13.6px - Improved readability */
    font-weight: 700 !important;
    margin-bottom: 0.15rem !important;
  }

  .calendar-day {
    min-height: 54px !important; /* Increased from 50px */
    padding: 0.2rem !important;
  }

  /* Ensure all calendar text is readable */
  .calendar-day-content,
  .calendar-weekday,
  .month-name {
    font-size: 0.875rem !important; /* 14px minimum for readability */
  }
}

/* Fix 6: Improve Header Button Accessibility */
@media (max-width: 768px) {
  /* Keep language labels visible */
  .language-switch .lang-label {
    display: inline !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
  }

  /* Add better spacing for header buttons */
  .nav .btn {
    min-width: 44px !important;
    min-height: 44px !important; /* Apple HIG minimum touch target */
    padding: 0.5rem 0.75rem !important;
  }

  /* Ensure SVG icons are visible */
  .nav .btn svg {
    margin: 0 !important;
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
  }

  /* CRITICAL FIX: Header action buttons (Room Info, Bulk Booking) */
  #roomInfoBtn,
  #bulkActionBtn,
  .header-action-btn {
    min-height: 44px !important; /* Apple HIG compliance */
    min-width: 44px !important;
    padding: 0.75rem 1rem !important;
    font-size: 14px !important; /* Improved readability */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Navigation arrows - ensure 44x44px minimum */
  .nav-btn,
  .calendar-nav-btn,
  button[aria-label*='Previous'],
  button[aria-label*='Next'] {
    min-width: 44px !important;
    min-height: 44px !important; /* Added to meet Apple HIG */
    padding: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Fix 7: Improve Button Readability */
@media (max-width: 768px) {
  /* All buttons should have readable font size */
  .btn,
  button:not(.counter-btn):not(.mini-calendar-day):not(.calendar-day) {
    font-size: 0.875rem !important; /* 14px minimum for readability */
    font-weight: 600 !important;
    min-height: 44px !important; /* Touch target compliance */
  }

  /* Primary action buttons - extra emphasis */
  .btn-primary,
  .btn-success,
  button[type='submit'] {
    font-size: 1rem !important; /* 16px for primary actions */
    font-weight: 700 !important;
    padding: 0.85rem 1.25rem !important;
  }
}

/* ===== PRIORITY 2: UX ENHANCEMENTS ===== */

/* Enhancement 1: Better Modal Scrolling */
@media (max-width: 768px) {
  .modal-content {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    /* REMOVED: position: relative !important; - Breaks stacking context */
  }

  /* Ensure modal content has proper padding for close button */
  .modal-content > h2 {
    padding-right: 60px !important;
    padding-top: 0.5rem !important;
  }
}

/* Enhancement 2: Improve Form Input Visibility */
@media (max-width: 768px) {
  .input-group input,
  .input-group textarea,
  .input-group select {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    padding: 0.85rem !important;
    border-width: 2px !important;
  }

  .input-group input:focus,
  .input-group textarea:focus,
  .input-group select:focus {
    border-color: #007aff !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1) !important;
  }
}

/* Enhancement 3: Better Guest Counter Visual Feedback */
@media (max-width: 768px) {
  .counter-value {
    font-size: 1.2rem !important;
    min-width: 50px !important;
    font-weight: 700 !important;
    color: var(--primary-600) !important;
  }

  .counter-controls {
    border: 2px solid #e2e8f0 !important;
    border-radius: 10px !important;
  }

  .counter-controls button {
    font-weight: 700 !important;
    color: var(--primary-600) !important;
  }
}

/* Enhancement 4: Improve Price Display */
@media (max-width: 768px) {
  .price-summary {
    position: relative !important;
  }

  #totalPrice,
  #bulkTotalPrice,
  #tempReservationsTotalPrice {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--primary-600) !important;
  }
}

/* Enhancement 5: Better Toast Notifications */
@media (max-width: 768px) {
  #notificationContainer,
  .toast-container {
    bottom: 1rem !important;
    left: 1rem !important;
    right: 1rem !important;
    max-width: calc(100vw - 2rem) !important;
  }

  .toast,
  .notification {
    font-size: 0.95rem !important;
    padding: 1rem !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
  }
}

/* Enhancement 6: Improve Legend Visibility */
@media (max-width: 768px) {
  .legend-toggle-btn {
    font-size: 0.95rem !important;
    padding: 1rem !important;
    font-weight: 600 !important;
  }

  .legend-item {
    padding: 0.75rem !important;
    border-radius: 8px !important;
    background: white !important;
    margin-bottom: 0.5rem !important;
  }

  .legend-text strong {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
  }

  .legend-text p {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    margin-top: 0.25rem !important;
  }
}

/* ===== PRIORITY 3: EDGE CASE FIXES ===== */

/* Fix for very small devices (360px and below) */
@media (max-width: 360px) {
  /* Stack phone input vertically */
  .phone-input-container {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .phone-prefix-select {
    width: 100% !important;
  }

  .phone-number-input {
    width: 100% !important;
  }

  /* Reduce calendar day height further */
  .calendar-day {
    min-height: 48px !important;
    padding: 0.15rem !important;
  }

  /* Smaller buttons on ultra-small screens (but still readable) */
  .btn {
    font-size: 0.875rem !important; /* 14px - minimum for readability */
    padding: 0.65rem 0.85rem !important;
  }

  /* Reduce modal header font */
  .modal h2 {
    font-size: 1.1rem !important;
  }
}

/* Fix for landscape orientation on mobile */
@media (max-width: 896px) and (orientation: landscape) {
  /* Make modals scrollable in landscape */
  .modal-content {
    max-height: 95vh !important;
    overflow-y: auto !important;
  }

  /* Reduce header height in landscape */
  .header-content {
    padding: 0.5rem !important;
    gap: 0.5rem !important;
  }

  /* Compact calendar in landscape */
  .calendar-day {
    min-height: 40px !important;
    padding: 0.1rem !important;
  }

  .calendar-day-number {
    font-size: 0.7rem !important;
  }

  .room-indicator {
    font-size: 0.5rem !important;
    padding: 0.1rem 0.2rem !important;
  }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

/* Better focus indicators for keyboard navigation */
@media (max-width: 768px) {
  .btn:focus-visible,
  .calendar-day:focus-visible,
  .nav-btn:focus-visible {
    outline: 3px solid #007aff !important;
    outline-offset: 3px !important;
    border-radius: 8px !important;
  }

  .input-group input:focus-visible,
  .input-group textarea:focus-visible,
  .input-group select:focus-visible {
    outline: 3px solid #007aff !important;
    outline-offset: 2px !important;
  }
}

/* Improve contrast for better readability */
@media (max-width: 768px) {
  .calendar-day {
    border-width: 1.5px !important;
  }

  .calendar-day.occupied {
    border-color: rgba(239, 68, 68, 0.3) !important;
  }

  .calendar-day.available {
    border-color: rgba(16, 185, 129, 0.3) !important;
  }

  .calendar-day.proposed {
    border-color: rgba(234, 179, 8, 0.4) !important;
  }
}

/* ===== LOADING STATES & TRANSITIONS ===== */

/* Smooth transitions for mobile interactions */
@media (max-width: 768px) {
  .btn,
  .calendar-day,
  .mini-calendar-day,
  .nav-btn,
  .counter-btn {
    transition: all 0.2s ease !important;
  }

  /* Add loading state for buttons */
  .btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
  }

  /* Add spinner animation */
  @keyframes mobile-spinner {
    to {
      transform: rotate(360deg);
    }
  }

  .loading::after {
    content: '' !important;
    width: 20px !important;
    height: 20px !important;
    border: 3px solid rgba(255, 255, 255, 0.3) !important;
    border-top-color: white !important;
    border-radius: 50% !important;
    animation: mobile-spinner 0.6s linear infinite !important;
  }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Reduce animations on slower devices */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Hardware acceleration for smooth scrolling */
@media (max-width: 768px) {
  .modal-content,
  .calendar-section,
  .booking-right-column {
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: scroll-position !important;
  }
}

/* ===== PRINT STYLES (Bonus) ===== */

@media print {
  /* Hide non-essential elements when printing */
  .header,
  .nav,
  .legend-toggle-container,
  .modal-close,
  .booking-actions {
    display: none !important;
  }

  /* Optimize calendar for printing */
  .calendar-grid {
    page-break-inside: avoid !important;
  }
}

/* ===== MOBILE MODAL REDESIGN ===== */
/* Fixes: Content overlap, sticky positioning, iOS Safari issues */

@media (max-width: 768px) {
  /* === MODAL CONTAINER === */
  .compact-booking-modal {
    height: 100vh !important;
    max-height: 100vh !important;
    width: 100vw !important;
    max-width: 100vw !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* === HEADER === */
  .booking-modal-header {
    flex: 0 0 auto !important;
    padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem 1rem !important;
    position: relative !important;
    z-index: 10 !important;
  }

  /* === CONTENT === */
  .booking-modal-content {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    scroll-behavior: smooth !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    grid-template-columns: unset !important;
    padding: 1rem !important;
    padding-bottom: 2rem !important;
  }

  /* === COLUMNS === */
  .booking-left-column,
  .booking-right-column {
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .booking-right-column {
    overflow: visible !important;
  }

  /* === CALENDAR === */
  /* MAINTENANCE NOTE: If changing the 320px value, also update:
   * - MOBILE_MODAL_REDESIGN.md (lines 46, 102, 185)
   * - DEPLOYMENT_VERIFICATION_2025-10-20.md (lines 68, 122)
   */
  .interactive-calendar {
    height: clamp(280px, 40vh, 320px) !important; /* Flexible height for small devices */
    min-height: 280px !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    scroll-behavior: smooth !important;
  }

  /* === FOOTER === */
  .booking-actions,
  .modal-footer {
    flex: 0 0 auto !important;
    position: relative !important;
    width: 100% !important;
    z-index: 5 !important;
    padding: 1rem !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    background: white !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08) !important;
  }

  /* === BUTTONS === */
  .booking-actions > div,
  .modal-footer > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  .booking-actions .btn,
  .modal-footer .btn {
    width: 100% !important;
    min-height: 48px !important;
    padding: 0.875rem 1rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* === BODY LOCK === */
  body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
}

/* === iOS SAFARI === */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    .booking-actions,
    .modal-footer {
      padding-bottom: calc(1rem + max(env(safe-area-inset-bottom, 0px), 20px)) !important;
    }

    .booking-modal-header {
      padding-top: calc(1rem + max(env(safe-area-inset-top, 0px), 10px)) !important;
    }
  }
}

/* ===== RESPONSIVE FIXES 2025-12-03 ===== */
/* Fixes: Toggle overflow, Admin table, Form grids, Search input */

/* --- Issue 1: Bulk Booking Guest Name Rows --- */
@media (max-width: 480px) {
  #bulkAdultsNamesContainer > div,
  #bulkChildrenNamesContainer > div,
  #bulkToddlersNamesContainer > div {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  #bulkAdultsNamesContainer > div > div:last-child,
  #bulkChildrenNamesContainer > div > div:last-child,
  #bulkToddlersNamesContainer > div > div:last-child {
    flex-shrink: 1 !important;
    flex-basis: 100% !important;
    justify-content: flex-start !important;
    white-space: normal !important;
    margin-top: 0.25rem !important;
  }

  #bulkAdultsNamesContainer > div > input,
  #bulkChildrenNamesContainer > div > input,
  #bulkToddlersNamesContainer > div > input {
    flex: 1 1 calc(50% - 0.5rem) !important;
    min-width: 0 !important;
  }

  #bulkAdultsNamesContainer label,
  #bulkChildrenNamesContainer label,
  #bulkToddlersNamesContainer label {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

@media (max-width: 360px) {
  #bulkAdultsNamesContainer > div,
  #bulkChildrenNamesContainer > div,
  #bulkToddlersNamesContainer > div {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #bulkAdultsNamesContainer > div > input,
  #bulkChildrenNamesContainer > div > input,
  #bulkToddlersNamesContainer > div > input {
    flex: none !important;
    width: 100% !important;
  }

  #bulkAdultsNamesContainer > div > div:last-child,
  #bulkChildrenNamesContainer > div > div:last-child,
  #bulkToddlersNamesContainer > div > div:last-child {
    flex-basis: auto !important;
    justify-content: center !important;
    padding: 0.5rem !important;
    background: #f8fafc !important;
    border-radius: 4px !important;
  }
}

/* --- Issue 2: Admin Table Action Buttons --- */
@media (max-width: 768px) {
  .bookings-table {
    width: 100% !important;
    overflow-x: hidden !important;
    white-space: normal !important;
  }

  .bookings-table td:last-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid #e2e8f0 !important;
    margin-top: 0.5rem !important;
  }

  .bookings-table td:last-child::before {
    display: none !important;
  }

  .bookings-table td:last-child .btn,
  .bookings-table td:last-child button,
  .bookings-table .action-buttons .btn-modern {
    width: 100% !important;
    min-height: 44px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    justify-content: center !important;
  }

  .bookings-table td:first-child {
    position: absolute !important;
    top: 0.75rem !important;
    right: 0.75rem !important;
    padding: 0 !important;
    border: none !important;
  }

  .bookings-table td:first-child::before {
    display: none !important;
  }

  .bookings-table td:first-child input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
  }

  .bookings-table tr {
    position: relative !important;
    padding-top: 2.5rem !important;
  }
}

@media (max-width: 480px) {
  .bookings-table td {
    padding: 0.375rem 0 !important;
    font-size: 0.875rem !important;
  }

  .bookings-table td::before {
    width: 100px !important;
    font-size: 0.75rem !important;
  }
}

/* --- Issue 3: Admin Form Grids --- */
@media (max-width: 768px) {
  #blockDateForm > div[style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  #blockReason,
  #blockDateForm input[type="text"] {
    width: 100% !important;
  }

  #blockDateForm div[style*="repeat(auto-fill"] {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
  }
}

@media (max-width: 480px) {
  #priceConfigForm > div[style*="grid"],
  #roomConfigForm > div[style*="grid"],
  .settings-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
}

/* --- Issue 4: Search Input Min-Width --- */
@media (max-width: 480px) {
  #searchBookings {
    min-width: unset !important;
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  input[type="text"][placeholder*="Hledat"],
  input[type="text"][style*="min-width: 300px"] {
    min-width: unset !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 360px) {
  #searchBookings {
    padding: 0.625rem !important;
    font-size: 14px !important;
  }
}

/* --- Issue 5: Admin Tabs Scrollable --- */
@media (max-width: 768px) {
  .admin-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    padding-bottom: 0.5rem !important;
  }

  .tab-button {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 0.6rem 0.8rem !important;
    font-size: 0.85rem !important;
  }
}

/* --- iOS Safe Areas for Admin --- */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    .bookings-table tr:last-child {
      margin-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    }
  }
}

/* --- Issue 6: Admin Container Overflow --- */
@media (max-width: 768px) {
  .admin-container,
  #adminContent {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .tab-content,
  .tab-content.active {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding: 1rem !important;
  }

  /* Price config cards */
  .settings-card,
  .price-card,
  #priceConfigForm,
  #roomConfigForm,
  #bulkPriceForm {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Form rows should stack on mobile */
  .price-row,
  .config-row,
  .form-row {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  /* Price input groups */
  .price-input-group,
  .config-input-group {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .price-input-group input,
  .config-input-group input {
    min-width: 80px !important;
    max-width: 120px !important;
    flex: 1 1 auto !important;
  }

  /* Admin header responsive */
  .admin-header {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    padding: 0.75rem !important;
  }

  .admin-header h1 {
    font-size: 1.1rem !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 0.5rem !important;
  }

  .admin-header nav {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 0.5rem !important;
  }

  .admin-header button {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.85rem !important;
  }
}

@media (max-width: 480px) {
  .tab-content,
  .tab-content.active {
    padding: 0.75rem !important;
  }

  /* Bulk pricing table */
  #bulkPriceForm table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #bulkPriceForm th,
  #bulkPriceForm td {
    padding: 0.5rem !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
  }

  #bulkPriceForm input[type="number"] {
    width: 70px !important;
    padding: 0.4rem !important;
  }
}

/* ===== END RESPONSIVE FIXES 2025-12-03 ===== */

/* ===== END OF MOBILE IMPROVEMENTS ===== */

/**
 * Usage Instructions:
 *
 * 1. Add this file to index.html:
 *    <link rel="stylesheet" href="css/mobile-improvements.css">
 *
 * 2. Test on multiple devices:
 *    - iPhone SE (375px)
 *    - iPhone 12 (390px)
 *    - Samsung Galaxy (360px)
 *    - iPad Mini (768px)
 *
 * 3. Use Chrome DevTools Device Mode for quick testing
 *
 * 4. Check all user flows:
 *    - Calendar navigation
 *    - Room booking
 *    - Form submission
 *    - Modal interactions
 *
 * 5. Monitor performance:
 *    - No horizontal scroll
 *    - Smooth scrolling
 *    - Quick touch response
 *    - No layout shift
 *
 * 6. CRITICAL: Test on real iPhone Safari:
 *    - Verify "Přidat rezervaci" button is clickable
 *    - Verify button doesn't hide behind Safari toolbar
 *    - Test both single room and bulk booking modals
 */