/* 
 * MOBILE RESPONSIVE FIXES
 * Critical mobile design improvements
 */

/* 1. Base mobile improvements */
@media (max-width: 600px) {
  /* Prevent horizontal scroll */
  body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Container responsive padding */
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  /* Cards: reduce padding on mobile */
  .bg-white.rounded-lg,
  .bg-white.shadow {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  /* Typography: smaller on mobile */
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.25rem !important; }
  h3 { font-size: 1.125rem !important; }
  
  /* Buttons: full-width by default */
  button:not(.inline-btn) {
    width: 100% !important;
    margin-bottom: 0.5rem;
  }
  
  /* Forms: stack inputs */
  .grid.grid-cols-2,
  .grid.grid-cols-3,
  .grid.grid-cols-4 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  /* Tables: horizontal scroll */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 0.875rem;
  }
  
  /* Navigation tabs: horizontal scroll */
  .flex.gap-2 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  
  .flex.gap-2::-webkit-scrollbar {
    display: none;
  }
  
  /* Stats cards: 2 columns max */
  .grid.grid-cols-5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Modal: full-screen on mobile */
  .fixed.inset-0 > div {
    max-width: 100% !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  
  /* Input fields: larger touch targets */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  select,
  textarea {
    min-height: 44px !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
  
  /* Buttons: larger touch targets */
  button,
  a.btn {
    min-height: 44px !important;
    padding: 0.75rem 1rem !important;
  }
  
  /* Icon buttons: ensure 44x44px */
  button.icon-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* 2. Stempel-Terminal Mobile */
@media (max-width: 600px) {
  #stempelContent .text-6xl {
    font-size: 3rem !important;
  }
  
  #stempelContent .text-4xl {
    font-size: 2rem !important;
  }
  
  #stempelContent .text-2xl {
    font-size: 1.5rem !important;
  }
  
  /* Stempel buttons: make them huge */
  #stempelContent button.bg-green-600,
  #stempelContent button.bg-red-600 {
    min-height: 80px !important;
    font-size: 1.5rem !important;
  }
}

/* 3. Dashboard Mobile */
@media (max-width: 600px) {
  /* Statistik cards: stack vertically */
  #statistikContent .grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Navigation buttons: scroll horizontally */
  #statistikContent .flex.gap-2 {
    display: flex;
    overflow-x: auto;
    gap: 0.5rem;
  }
  
  #statistikContent button {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* 4. Kassenbuch Mobile */
@media (max-width: 600px) {
  /* Kassenzettel cards: full-width */
  #kassenbuchContent .grid-cols-2,
  #kassenbuchContent .grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  
  /* Filter buttons: stack */
  #kassenbuchContent .flex.gap-2 {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* 5. Personal/Mitarbeiter Mobile */
@media (max-width: 600px) {
  /* Mitarbeiter cards: full-width */
  #personalContent .grid-cols-2,
  #personalContent .grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  
  /* Detail view: full-width sections */
  #mitarbeiterDetailContent .grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
}

/* 6. Fix overflow issues */
@media (max-width: 600px) {
  /* Prevent text overflow */
  * {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Images: responsive */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Pre/Code: horizontal scroll */
  pre, code {
    overflow-x: auto;
    white-space: pre-wrap;
  }
}

/* 7. Bottom Navigation Helper (if needed) */
@media (max-width: 600px) {
  /* Add bottom padding for fixed bottom bars */
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  /* Fixed bottom actions */
  .fixed.bottom-0 {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
}

/* 8. Touch feedback */
@media (max-width: 600px) {
  /* Add active state for better feedback */
  button:active,
  a:active {
    opacity: 0.7;
    transform: scale(0.98);
  }
}