/*
 * Flash Delivery - Responsive Styles
 * Mobile-First Responsive Design for all devices
 */

/* ============================================================================
   Base Responsive Configuration
   ============================================================================ */

/* Ensure proper rendering and touch zooming */
@viewport {
  width: device-width;
  zoom: 1.0;
}

/* Base body styles for mobile */
body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent horizontal scrolling */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ============================================================================
   Typography Responsive Scaling
   ============================================================================ */

/* Mobile-first typography */
@media screen and (max-width: 767px) {
  h1, .ui.header.huge { font-size: 1.8rem !important; }
  h2, .ui.header.large { font-size: 1.5rem !important; }
  h3, .ui.header.medium { font-size: 1.3rem !important; }
  h4, .ui.header.small { font-size: 1.1rem !important; }

  /* Base font size slightly smaller on mobile */
  body { font-size: 14px; }
}

/* Tablet adjustments */
@media screen and (min-width: 768px) and (max-width: 991px) {
  h1, .ui.header.huge { font-size: 2.2rem !important; }
  h2, .ui.header.large { font-size: 1.8rem !important; }
  body { font-size: 15px; }
}

/* ============================================================================
   Grid & Layout Responsive Behavior
   ============================================================================ */

/* Stack grids on mobile */
@media screen and (max-width: 767px) {
  .ui.grid > .column,
  .ui.grid > .row > .column {
    width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Reduce grid padding on mobile */
  .ui.grid {
    margin-left: -0.5rem !important;
    margin-right: -0.5rem !important;
  }

  /* Ensure segments don't overflow */
  .ui.segment {
    margin: 0.5rem !important;
    padding: 1rem !important;
  }
}

/* ============================================================================
   Touch-Friendly Interactive Elements
   ============================================================================ */

/* Larger tap targets for mobile */
@media screen and (max-width: 767px) {
  .ui.button {
    min-height: 44px !important; /* iOS recommended tap target */
    padding: 0.85em 1.5em !important;
    font-size: 1rem !important;
  }

  .ui.fluid.button {
    margin-bottom: 0.75rem !important;
  }

  /* Touch-friendly form inputs */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    min-height: 44px !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 0.75rem !important;
  }

  /* Larger checkbox and radio targets */
  .ui.checkbox input,
  .ui.radio.checkbox input {
    width: 24px !important;
    height: 24px !important;
  }
}

/* ============================================================================
   Map Responsive Behavior
   ============================================================================ */

/* Maps adjust to screen size */
@media screen and (max-width: 767px) {
  /* Interactive map container */
  [id^="delivery-map"],
  [id$="-map"] {
    height: 300px !important;
    margin: 0.5rem 0 !important;
  }

  /* Map controls overlay */
  .leaflet-control-container {
    transform: scale(1.2);
    transform-origin: top left;
  }

  /* Flash Delivery watermark on mobile */
  .flash-marker {
    font-size: 2em !important;
  }
}

/* Tablet map sizing */
@media screen and (min-width: 768px) and (max-width: 991px) {
  [id^="delivery-map"],
  [id$="-map"] {
    height: 400px !important;
  }
}

/* ============================================================================
   Dashboard Responsive Layouts
   ============================================================================ */

/* Mobile dashboard adjustments */
@media screen and (max-width: 767px) {
  /* Stack dashboard cards vertically */
  .ui.cards > .card {
    width: 100% !important;
    margin: 0.5rem 0 !important;
  }

  .ui.three.cards > .card,
  .ui.four.cards > .card,
  .ui.five.cards > .card {
    width: 100% !important;
  }

  /* Statistics cards */
  .ui.statistic > .value {
    font-size: 2rem !important;
  }

  /* Reduce spacing in statistics group */
  .ui.statistics {
    flex-direction: column;
    align-items: center;
  }

  .ui.statistics > .statistic {
    margin: 0.5rem 0 !important;
    width: 100%;
    text-align: center !important;
  }
}

/* ============================================================================
   Table Responsive Behavior
   ============================================================================ */

@media screen and (max-width: 767px) {
  /* Make tables scrollable horizontally */
  .ui.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ui.table {
    font-size: 0.9rem !important;
  }

  .ui.table th,
  .ui.table td {
    padding: 0.5rem !important;
    white-space: nowrap;
  }

  /* Hide less important columns on mobile */
  .ui.table .mobile-hidden {
    display: none !important;
  }
}

/* ============================================================================
   Form Responsive Behavior
   ============================================================================ */

@media screen and (max-width: 767px) {
  .ui.form .field {
    margin-bottom: 1rem !important;
  }

  /* Stack form fields */
  .ui.form .inline.fields {
    flex-direction: column !important;
  }

  .ui.form .inline.fields > .field {
    margin-bottom: 0.75rem !important;
    width: 100% !important;
  }

  /* Full-width form buttons on mobile */
  .ui.form .ui.button:not(.icon) {
    width: 100% !important;
    margin-top: 0.5rem !important;
  }
}

/* ============================================================================
   Modal Responsive Behavior
   ============================================================================ */

@media screen and (max-width: 767px) {
  .ui.modal {
    width: 95% !important;
    margin: 1rem auto !important;
  }

  .ui.modal > .header {
    padding: 1rem !important;
    font-size: 1.3rem !important;
  }

  .ui.modal > .content {
    padding: 1rem !important;
  }

  .ui.modal > .actions {
    padding: 1rem !important;
    text-align: center !important;
  }

  .ui.modal > .actions > .button {
    width: 100% !important;
    margin: 0.25rem 0 !important;
  }
}

/* ============================================================================
   Menu & Navigation Responsive
   ============================================================================ */

@media screen and (max-width: 767px) {
  .ui.menu {
    flex-direction: column !important;
  }

  .ui.menu .item {
    width: 100% !important;
    text-align: left !important;
    padding: 1rem !important;
  }

  .ui.menu:not(.vertical) .item {
    border-bottom: 1px solid rgba(34, 36, 38, 0.1) !important;
  }

  /* Hamburger menu container */
  .ui.menu .item.mobile-only {
    display: flex !important;
  }

  .ui.menu .item:not(.mobile-only) {
    display: none;
  }

  /* When mobile menu is active */
  .ui.menu.mobile-visible .item:not(.mobile-only) {
    display: flex !important;
  }
}

@media screen and (min-width: 768px) {
  .ui.menu .item.mobile-only {
    display: none !important;
  }
}

/* ============================================================================
   Shopping Cart Responsive
   ============================================================================ */

@media screen and (max-width: 767px) {
  /* Cart item cards stack fully */
  .cart-item {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .cart-item-image {
    width: 100% !important;
    max-width: 200px !important;
    margin: 0 auto 1rem !important;
  }

  .cart-item-details {
    width: 100% !important;
    text-align: center !important;
  }

  /* Cart quantity controls */
  .cart-quantity-controls {
    justify-content: center !important;
    margin-top: 0.5rem !important;
  }

  /* Cart summary */
  .cart-summary {
    position: relative !important;
    width: 100% !important;
    margin-top: 1rem !important;
  }
}

/* ============================================================================
   Order Tracking & Delivery Responsive
   ============================================================================ */

@media screen and (max-width: 767px) {
  /* Order cards */
  .order-card {
    padding: 1rem !important;
  }

  .order-status-badge {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 0.5rem !important;
  }

  /* Delivery tracking timeline */
  .delivery-timeline {
    padding-left: 1rem !important;
  }

  .delivery-timeline-item {
    padding-bottom: 1.5rem !important;
  }
}

/* ============================================================================
   Restaurant Gallery Responsive
   ============================================================================ */

@media screen and (max-width: 767px) {
  /* Restaurant cards */
  .restaurant-card {
    width: 100% !important;
    margin: 0.5rem 0 !important;
  }

  .restaurant-card img {
    height: 200px !important;
    object-fit: cover;
  }

  /* Menu item gallery */
  .menu-gallery {
    grid-template-columns: 1fr !important;
  }

  .menu-item-card {
    margin: 0.5rem !important;
  }
}

/* Tablet: 2 columns */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .menu-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Desktop: 3+ columns */
@media screen and (min-width: 992px) {
  .menu-gallery {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  }
}

/* ============================================================================
   Analytics Dashboard Responsive
   ============================================================================ */

@media screen and (max-width: 767px) {
  /* Charts and graphs */
  canvas,
  .chart-container {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Analytics cards */
  .analytics-card {
    margin-bottom: 1rem !important;
  }

  .analytics-metric {
    font-size: 1.8rem !important;
  }
}

/* ============================================================================
   Utility Classes
   ============================================================================ */

/* Hide on mobile */
@media screen and (max-width: 767px) {
  .mobile-hidden {
    display: none !important;
  }
}

/* Show only on mobile */
.mobile-only {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .mobile-only {
    display: block !important;
  }

  .mobile-only.inline {
    display: inline !important;
  }

  .mobile-only.flex {
    display: flex !important;
  }
}

/* Tablet only */
.tablet-only {
  display: none !important;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .tablet-only {
    display: block !important;
  }
}

/* Desktop only */
.desktop-only {
  display: none !important;
}

@media screen and (min-width: 992px) {
  .desktop-only {
    display: block !important;
  }
}

/* ============================================================================
   Button Animations - Reject Button Color Pulse
   ============================================================================ */

/* Animación de color para botón de rechazar: naranja ↔ rojo */
@keyframes rejectColorPulse {
  0% {
    background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
  }
  50% {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  }
  100% {
    background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
  }
}

/* Clase para el botón con animación de color */
.reject-pulse-color {
  animation: rejectColorPulse 2s ease-in-out infinite !important;
}

/* Animación suave para botón de confirmación */
@keyframes confirmPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
  }
}

.confirm-pulse {
  animation: confirmPulse 1.5s ease-in-out infinite !important;
}

/* ============================================================================
   Order Notification Animations - Emergentes con shake
   ============================================================================ */

/* Animación slide-in con pequeño shake */
@keyframes slideInShake {
  0% {
    opacity: 0;
    transform: translateX(-20px) scale(0.95);
  }
  50% {
    opacity: 1;
    transform: translateX(5px) scale(1.02);
  }
  70% {
    transform: translateX(-3px) scale(1);
  }
  85% {
    transform: translateX(2px) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Animación pulse para badges */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }
}

/* Animación de parpadeo suave para notificaciones urgentes */
@keyframes urgentBlink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Clase para notificaciones de rechazo con blink */
.notification-rejected {
  animation: slideInShake 0.5s ease-out, urgentBlink 2s ease-in-out infinite 0.5s;
}

/* Clase para notificaciones de en-route */
.notification-en-route {
  animation: slideInShake 0.5s ease-out;
}

/* ============================================================================
   Performance Optimizations
   ============================================================================ */

/* Reduce animations on mobile for better performance */
@media screen and (max-width: 767px) {
  * {
    animation-duration: 0.3s !important;
    transition-duration: 0.3s !important;
  }
}

/* Enable GPU acceleration for smooth scrolling */
@media screen and (max-width: 767px) {
  .scrollable,
  .ui.segment[style*="overflow"],
  [style*="overflow-y"] {
    -webkit-overflow-scrolling: touch;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

/* ============================================================================
   Print Styles
   ============================================================================ */

@media print {
  /* Hide non-essential elements when printing */
  .ui.menu,
  .ui.sidebar,
  .no-print {
    display: none !important;
  }

  /* Ensure content fits on page */
  body {
    font-size: 12pt !important;
  }

  .ui.container {
    width: 100% !important;
    max-width: none !important;
  }
}

/* ============================================================================
   Accessibility Enhancements
   ============================================================================ */

/* Larger focus indicators on mobile for accessibility */
@media screen and (max-width: 767px) {
  *:focus {
    outline: 3px solid #32CD32 !important;
    outline-offset: 2px !important;
  }

  button:focus,
  a:focus,
  input:focus,
  select:focus,
  textarea:focus {
    box-shadow: 0 0 0 3px rgba(50, 205, 50, 0.3) !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .ui.button,
  .ui.card,
  .ui.segment {
    border: 2px solid currentColor !important;
  }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   Dark Mode Support (Future Enhancement)
   ============================================================================ */

@media (prefers-color-scheme: dark) {
  /* Can be extended later if dark mode is desired */
  :root {
    --text-color: #ffffff;
    --bg-color: #1a1a1a;
    --card-bg: #2a2a2a;
  }
}