/* ============================================
   COMPREHENSIVE MOBILE RESPONSIVENESS
   ============================================ */

/* Mobile-first improvements (up to 1199px) */
@media (max-width: 1199px) {
  /* Prevent horizontal overflow */
  body,
  html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Ensure all containers respect viewport */
  #adminDashboard {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Don't override dashboardMain overflow - it needs to scroll */
  #dashboardMain {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .content-section,
  .holded-card,
  main,
  section {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Cards - Mobile spacing */
  .holded-card {
    margin: 0.75rem !important;
    padding: 1rem !important;
    border-radius: var(--radius-lg) !important;
    max-width: calc(100% - 1.5rem) !important;
    box-sizing: border-box !important;
  }

  /* Reservations Chart - Mobile fixes */
  #reservationsChart {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  #reservationsChart .flex.items-end.justify-between {
    min-width: 100% !important;
    gap: 0.25rem !important;
    padding: 0.5rem !important;
  }

  #reservationsChart .flex.flex-col.items-center {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    max-width: 100% !important;
  }

  #reservationsChart .w-5 {
    width: 0.75rem !important;
    min-width: 0.75rem !important;
  }

  #reservationsChart .text-xs {
    font-size: 0.65rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  #reservationsChart .h-20 {
    min-height: 5rem !important;
  }

  /* Category headers - Stack on mobile */
  .flex.items-center.justify-between {
    flex-wrap: wrap !important;
  }

  /* Button groups - Wrap and stack */
  .flex.space-x-2,
  .flex.space-x-3 {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  /* Prevent text overflow */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Buttons - Mobile touch-friendly */
  .holded-button,
  .holded-button-primary,
  .holded-button-secondary,
  .holded-button-danger {
    min-height: 44px !important; /* Touch target size */
    min-width: 44px !important; /* Square buttons on mobile for icon-only */
    padding: 0.75rem !important;
    font-size: var(--text-base) !important;
    white-space: normal !important; /* Allow wrapping */
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Icon-only buttons on mobile - larger icons */
  @media (max-width: 640px) {
    .holded-button i,
    .holded-button-primary i,
    .holded-button-secondary i,
    .holded-button-danger i {
      font-size: 1.25rem !important; /* 20px - larger icons for better visibility */
    }
  }

  /* Button text - Allow wrapping */
  .holded-button span,
  .holded-button-primary span,
  .holded-button-secondary span,
  .holded-button-danger span {
    white-space: normal !important;
  }

  /* Icon-only buttons on mobile - centered and larger */
  @media (max-width: 640px) {
    #menuHeaderActions .holded-button,
    #menuHeaderActions .holded-button-primary,
    #menuHeaderActions .holded-button-secondary {
      padding: 0.75rem !important;
      min-width: 48px !important;
      width: auto !important;
      flex-shrink: 0 !important;
      aspect-ratio: 1 !important; /* Perfect squares */
    }

    /* Larger icons in menu header actions */
    #menuHeaderActions .holded-button i,
    #menuHeaderActions .holded-button-primary i,
    #menuHeaderActions .holded-button-secondary i {
      font-size: 1.375rem !important; /* 22px - even larger for better visibility */
      margin: 0 !important; /* Remove margins when icon-only */
    }
  }

  /* Tooltip support for icon-only buttons */
  @media (max-width: 640px) {
    #menuHeaderActions button[title]:hover::after,
    #menuHeaderActions button[title]:focus::after {
      content: attr(title);
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.9);
      color: white;
      padding: 0.5rem 0.75rem;
      border-radius: 0.375rem;
      font-size: 0.75rem;
      white-space: nowrap;
      z-index: 1000;
      margin-bottom: 0.5rem;
      pointer-events: none;
    }

    #menuHeaderActions button {
      position: relative;
    }
  }

  /* Button groups - Stack on mobile */
  .flex.gap-2,
  .flex.gap-3,
  .flex.gap-4 {
    flex-wrap: wrap;
  }

  /* Typography - Mobile sizing */
  h1 {
    font-size: var(--text-2xl) !important;
  }
  h2 {
    font-size: var(--text-xl) !important;
  }
  h3 {
    font-size: var(--text-lg) !important;
  }
  h4 {
    font-size: var(--text-base) !important;
  }

  .text-2xl {
    font-size: var(--text-xl) !important;
  }
  .text-xl {
    font-size: var(--text-lg) !important;
  }
  .text-lg {
    font-size: var(--text-base) !important;
  }

  /* Orders section - Mobile compact stats */
  #orders-section .grid.grid-cols-4 {
    gap: 0.5rem !important;
  }

  /* Orders stats cards - Mobile optimization */
  @media (max-width: 640px) {
    #orders-section .holded-card.p-3 {
      padding: 0.75rem 0.375rem !important;
    }

    /* Ensure stats cards fit in one row */
    #orders-section .grid.grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 0.375rem !important;
    }

    /* Ensure all cards have same height */
    #orders-section .holded-card {
      min-height: 120px !important;
    }

    /* Larger text on mobile to match other screens */
    #orders-section .holded-card .text-xl {
      font-size: 1.25rem !important;
      line-height: 1.5rem !important;
    }

    #orders-section .holded-card .text-xs {
      font-size: 0.75rem !important;
      line-height: 1rem !important;
    }

    /* Fixed label height for alignment */
    #orders-section .holded-card .h-8 {
      height: 2rem !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
    }

    /* Icon sizes */
    #orders-section .holded-card .w-10 {
      width: 2.5rem !important;
      height: 2.5rem !important;
    }

    #orders-section .holded-card .w-10 i {
      font-size: 1rem !important;
    }

    /* Prevent number overflow */
    #orders-section .holded-card .text-heading {
      word-break: break-word !important;
      overflow-wrap: break-word !important;
      max-width: 100% !important;
    }
  }

  /* Ensure consistent text sizes across orders section */
  @media (max-width: 640px) {
    #orders-section h2 {
      font-size: 1.25rem !important;
      line-height: 1.75rem !important;
    }

    #orders-section .text-body {
      font-size: 0.875rem !important;
    }

    #orders-section button {
      font-size: 0.875rem !important;
    }
  }

  /* Content sections - Mobile padding */
  .content-section {
    padding: 0.75rem !important;
  }

  /* Spacing utilities - Reduce on mobile */
  .gap-6 {
    gap: 1rem !important;
  }
  .gap-4 {
    gap: 0.75rem !important;
  }
  .p-6 {
    padding: 1rem !important;
  }
  .p-4 {
    padding: 0.75rem !important;
  }
  .px-6 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  .py-4 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  /* Flex utilities - Stack on mobile */
  .lg\:flex-row {
    flex-direction: column !important;
  }

  /* Ensure menu section maintains two-column layout on desktop/laptop */
  #menu-section > .flex.flex-col.lg\:flex-row,
  #menu-section > div.flex.flex-col.lg\:flex-row {
    flex-direction: row !important;
  }

  /* Ensure menu section sidebar and content are side by side on desktop */
  @media (min-width: 1024px) {
    #menu-section > .flex {
      flex-direction: row !important;
    }
  }

  /* Menu section sidebar - ensure all text and icons are black */
  #menu-section .sidebar-clean .text-heading,
  #menu-section .sidebar-clean .text-sm,
  #menu-section .sidebar-clean .text-xs,
  #menu-section
    .sidebar-clean
    span:not(.fas):not(.far):not(.fab):not(button):not(.holded-button-primary):not(
      .holded-button-secondary
    ),
  #menu-section .sidebar-clean .menu-sidebar-item i,
  #menu-section .sidebar-clean .menu-sidebar-item .fas,
  #menu-section .sidebar-clean .menu-sidebar-item .far,
  #menu-section .sidebar-clean .menu-sidebar-item .fab {
    color: #1f2937 !important;
  }

  /* Ensure "Add Category" button in menu sidebar is black */
  #menu-section .sidebar-clean button[onclick*='showAddCategoryModal'] {
    color: #1f2937 !important;
  }

  /* Text alignment - Center on mobile for better UX */
  .text-left {
    text-align: left;
  }

  /* Whitespace - Allow wrapping on mobile (except where explicitly needed) */
  .whitespace-nowrap {
    white-space: normal !important;
  }

  /* But preserve whitespace-nowrap for icons and small elements */
  i.whitespace-nowrap,
  .whitespace-nowrap i {
    white-space: nowrap !important;
  }

  /* Max widths - Full width on mobile */
  .max-w-md,
  .max-w-lg,
  .max-w-xl,
  .max-w-2xl {
    max-width: 100% !important;
  }

  /* Fix all flex justify-between to wrap - EXCEPT modals and elements inside modals */
  .flex.items-center.justify-between:not(.modal-card):not([class*='modal-']):not(
      .modal-overlay *
    ):not(#modalContainer *),
  .flex.justify-between:not(.modal-card):not([class*='modal-']):not(.modal-overlay *):not(
      #modalContainer *
    ),
  .flex.items-start.justify-between:not(.modal-card):not([class*='modal-']):not(
      .modal-overlay *
    ):not(#modalContainer *),
  .flex.items-end.justify-between:not(.modal-card):not([class*='modal-']):not(.modal-overlay *):not(
      #modalContainer *
    ) {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  /* Ensure flex containers wrap - EXCEPT modals, modal headers, and modal content */
  .flex:not(.flex-nowrap):not(.modal-card):not(.modal-card-content):not([class*='modal-']):not(
      .modal-overlay *
    ):not(#modalContainer *) {
    flex-wrap: wrap !important;
  }

  /* Ensure modal elements don't wrap */
  .modal-overlay .flex.flex-col,
  #modalContainer .flex.flex-col,
  .modal-card.flex.flex-col,
  .modal-card-content.flex.flex-col {
    flex-wrap: nowrap !important;
    flex-direction: column !important;
  }

  .modal-overlay .flex.items-center.justify-between,
  #modalContainer .flex.items-center.justify-between {
    flex-wrap: nowrap !important;
  }

  /* Fix space-x utilities to use gap instead */
  .flex.space-x-1,
  .flex.space-x-2,
  .flex.space-x-3,
  .flex.space-x-4,
  .flex.space-x-6 {
    gap: 0.5rem !important;
  }

  /* Reduce large padding on mobile */
  .p-6 {
    padding: 1rem !important;
  }
  .p-8 {
    padding: 1rem !important;
  }
  .p-10 {
    padding: 1.25rem !important;
  }
  .p-12 {
    padding: 1.5rem !important;
  }
  .px-6 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  .px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .px-10 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .px-12 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .py-6 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  .py-8 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* Fix all cards */
  .holded-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Action buttons - Mobile friendly */
  .action-btn {
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0.5rem !important;
    font-size: 0.875rem !important;
  }

  /* Stats and metrics - Better mobile layout */
  .stat-card {
    padding: 1rem !important;
  }

  /* Badges - Smaller on mobile */
  .badge,
  .order-status-badge {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
  }

  /* Better spacing in filter cards */
  .holded-card .flex.flex-wrap {
    gap: 0.75rem !important;
  }
}

/* Tablet specific (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Menu preview content - allow normal scrolling */
  #menuPreviewContent {
    max-height: none !important;
  }

  /* Slightly more spacing */
  .holded-card {
    margin: 1rem !important;
    padding: 1.25rem !important;
  }
}