/*
  Mobile-First Optimizations
  Google Apps-Style Mobile Experience
*/

/* === FAB KOMPLETT ENTFERNT === */
/* User bevorzugt klassische Buttons statt FAB */

/* === Responsive Breakpoints === */
@media (max-width: 768px) {
  /* Hide desktop navigation */
  .desktop-nav {
    display: none !important;
  }
  
  /* Show mobile elements */
  .md-bottom-nav {
    display: flex !important;
  }
  
  /* Mobile bottom navigation only */
  
  /* Container adjustments */
  .container {
    margin: 0;
    padding: var(--space-4);
    border-radius: 0;
    min-height: 100vh;
    box-sizing: border-box;
  }
  
  /* Header mobile optimization */
  .header {
    padding: var(--space-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
  }
  
  /* Feature navigation mobile */
  .feature-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-6);
  }
  
  .feature-nav button {
    justify-content: flex-start;
    padding: var(--space-4);
    font-size: var(--text-base);
  }
  
  /* Mobile table cards */
  .mobile-table-cards table {
    display: none !important;
  }
  
  .mobile-cards-container {
    display: block !important;
    padding: var(--space-2);
  }
  
  .table-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-sm);
  }
  
  .table-card:hover {
    box-shadow: var(--shadow-md);
  }
  
  .table-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
  }

  /* Zeitkonto Card Checkbox Styling */
  .table-card__checkbox-container {
    display: flex;
    align-items: center;
    margin-right: var(--space-3);
  }

  .table-card__checkbox-container input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
  }

  .table-card__main-info {
    flex: 1;
  }

  .table-card__time {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--color-gold);
  }

  .table-card__working-hours {
    font-size: var(--text-lg);
  }
  
  .table-card__title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
  }
  
  .table-card__subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
  }
  
  .table-card__body {
    display: grid;
    gap: var(--space-3);
  }
  
  .table-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .table-card__label {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
  }
  
  .table-card__value {
    font-size: var(--text-sm);
    color: var(--color-text);
    text-align: right;
  }
  
  .table-card__actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
  }
  
  .table-card__action {
    flex: 1;
    padding: var(--space-2);
    font-size: var(--text-xs);
  }
  
  /* Form optimizations */
  .form-container {
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin: 0;
  }
  
  .md-input__field {
    min-height: var(--touch-sm);
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  /* Basis-Styling für ALLE Mobile Date/Time Inputs */
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"] {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
    -webkit-text-fill-color: var(--color-text) !important;
    border: 2px solid var(--color-gold) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-3) var(--space-2) !important;
    min-height: var(--touch-sm) !important;
    font-size: 16px !important; /* Prevent zoom on iOS */
    box-sizing: border-box !important;
  }
  
  /* Wrapper-bezogene Styles entfernen, da keine JS-Wrapper mehr erzeugt werden */
  
  /* Custom Mobile Input Wrapper */
  .input-with-icon {
    position: relative;
    display: block;
    width: 100%;
  }
  
  /* Native Browser-Symbole sind global bereits versteckt (styles.css) */
  
  /* Goldene Symbole über CSS hinzufügen */
  input[type="date"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Ctext x='12' y='16' text-anchor='middle' font-size='16'%3E📅%3C/text%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px 20px;
    padding-right: 40px;
  }
  
  input[type="time"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Ctext x='12' y='16' text-anchor='middle' font-size='16'%3E⏰%3C/text%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px 20px;
    padding-right: 40px;
  }
  
  /* Zusätzliche Wrapper-spezifische Overrides entfallen */
  
  /* Keine sichtbaren nativen Icons auf Mobile */
  
  /* Filter controls mobile */
  .filter-controls {
    display: grid;
    gap: var(--space-3);
  }
  
  .filter-controls select,
  .filter-controls input:not([type="checkbox"]) {
    width: 100% !important;
    min-height: var(--touch-sm);
    border-radius: var(--radius-md);
  }
  
  /* Mobile Checkbox Filter Styling */
  .checkbox-filter {
    order: -1; /* Zeige Checkbox zuerst auf mobile */
    background: var(--color-bg-secondary);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
  }
  
  .checkbox-label {
    gap: var(--space-2);
    font-size: 16px; /* Größere Touch-Targets auf Mobile */
  }
  
  .checkbox-label input[type="checkbox"] {
    width: 24px; /* Größere Checkbox auf Mobile */
    height: 24px;
    transform: scale(1.1);
  }
  
  /* Pagination mobile */
  .pagination {
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
  }
  
  .pagination button {
    min-height: var(--touch-sm);
    min-width: var(--touch-sm);
  }
  
  /* Modal mobile */
  .modal-content {
    width: 95vw;
    max-width: none;
    margin: var(--space-4);
    max-height: 90vh;
    overflow-y: auto;
  }
  
  /* Summary mobile */
  .summary {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    text-align: center;
    font-size: var(--text-lg);
    font-weight: 600;
  }
  
  /* === Mobile Inventory Tables Fixes === */
  /* Fix overlapping columns in Buchen tables - behalte fixed layout für Spaltenbreiten */
  #dailyIncomingTable,
  #dailyClosingTable,
  #provisioningTable,
  #purchaseTable {
    table-layout: fixed !important; /* Behalte fixed layout für definierte Spaltenbreiten */
    min-width: 900px; /* Mindestbreite für alle Spalten */
    width: 100% !important;
  }
  
  /* Ensure table containers scroll horizontally */
  .table-container {
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100%;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }
  
  /* Mobile-spezifische Spaltenbreiten für Tagesbuchung-Tabellen */
  /* Spalte 1: Artikel ID */
  #dailyIncomingTable th:nth-child(1),
  #dailyIncomingTable td:nth-child(1),
  #dailyClosingTable th:nth-child(1),
  #dailyClosingTable td:nth-child(1) {
    width: 70px !important;
    min-width: 70px !important;
  }

  /* Spalte 2: Artikel */
  #dailyIncomingTable th:nth-child(2),
  #dailyIncomingTable td:nth-child(2),
  #dailyClosingTable th:nth-child(2),
  #dailyClosingTable td:nth-child(2) {
    width: 180px !important;
    min-width: 180px !important;
    white-space: normal;
    word-break: break-word;
  }

  /* Spalte 3: Maß - WICHTIG: Sichtbar halten */
  #dailyIncomingTable th:nth-child(3),
  #dailyIncomingTable td:nth-child(3),
  #dailyClosingTable th:nth-child(3),
  #dailyClosingTable td:nth-child(3) {
    width: 50px !important;
    min-width: 50px !important;
    white-space: nowrap;
  }

  /* Spalte 4: ME */
  #dailyIncomingTable th:nth-child(4),
  #dailyIncomingTable td:nth-child(4),
  #dailyClosingTable th:nth-child(4),
  #dailyClosingTable td:nth-child(4) {
    width: 50px !important;
    min-width: 50px !important;
    white-space: nowrap;
  }

  /* Spalte 5: Bestand vorher */
  #dailyIncomingTable th:nth-child(5),
  #dailyIncomingTable td:nth-child(5),
  #dailyClosingTable th:nth-child(5),
  #dailyClosingTable td:nth-child(5) {
    width: 100px !important;
    min-width: 100px !important;
    white-space: nowrap;
  }

  /* Spalte 6: Zugang/Verbrauch */
  #dailyIncomingTable th:nth-child(6),
  #dailyIncomingTable td:nth-child(6),
  #dailyClosingTable th:nth-child(6),
  #dailyClosingTable td:nth-child(6) {
    width: 70px !important;
    min-width: 70px !important;
  }

  /* Spalte 7: Von-LO/Bewegungstyp */
  #dailyIncomingTable th:nth-child(7),
  #dailyIncomingTable td:nth-child(7),
  #dailyClosingTable th:nth-child(7),
  #dailyClosingTable td:nth-child(7) {
    width: 120px !important;
    min-width: 120px !important;
    white-space: nowrap;
  }

  /* Spalte 8: Bestand neu */
  #dailyIncomingTable th:nth-child(8),
  #dailyIncomingTable td:nth-child(8),
  #dailyClosingTable th:nth-child(8),
  #dailyClosingTable td:nth-child(8) {
    width: 100px !important;
    min-width: 100px !important;
    white-space: nowrap;
  }

  /* Allgemeine Zell-Eigenschaften */
  #dailyIncomingTable th,
  #dailyIncomingTable td,
  #dailyClosingTable th,
  #dailyClosingTable td,
  #provisioningTable th,
  #provisioningTable td,
  #purchaseTable th,
  #purchaseTable td {
    padding: 6px 4px !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Mobile Dropdown-Breiten - an Display-Breite orientieren */
  .custom-select-modal {
    width: min(95vw, 400px) !important; /* Mobile: fast volle Display-Breite */
    max-width: 95vw !important;
  }
  
  /* Article name column - bereits oben definiert */
  
  /* Input fields and selects in table cells */
  #dailyIncomingTable input,
  #dailyIncomingTable select,
  #dailyIncomingTable .custom-select-trigger,
  #dailyClosingTable input,
  #dailyClosingTable select,
  #dailyClosingTable .custom-select-trigger,
  #provisioningTable input,
  #provisioningTable select,
  #provisioningTable .custom-select-trigger,
  #purchaseTable input,
  #purchaseTable select,
  #purchaseTable .custom-select-trigger {
    min-width: 70px; /* Minimum touch target */
    font-size: 14px; /* Slightly smaller for mobile */
  }

  /* Touch improvements */
  input[type="checkbox"] {
    width: 20px;
    height: 20px;
    transform: scale(1.2);
  }
  
  /* Spacing for mobile bottom nav */
  #mainContent {
    padding-bottom: calc(var(--touch-lg) + var(--space-8));
  }
  
  /* Sub navigation mobile */
  .sub-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    margin: var(--space-4) 0;
  }
  
  .sub-nav button {
    flex: 1;
    min-width: fit-content;
    padding: var(--space-3) var(--space-4);
  }
}

/* === Tablet optimizations === */
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    max-width: 90vw;
    padding: var(--space-6);
  }
  
  .feature-nav {
    flex-wrap: wrap;
  }
  
  .feature-nav button {
    flex: 1;
    min-width: 200px;
  }
  
  /* Show desktop nav on tablet */
  .desktop-nav {
    display: block !important;
  }
  
  .md-bottom-nav {
    display: none !important;
  }
}

/* === Desktop optimizations === */
@media (min-width: 1025px) {
  .md-bottom-nav {
    display: none !important;
  }
  
  /* FAB bleibt auf Desktop sichtbar */
  .md-fab {
    bottom: var(--space-6);
    right: var(--space-6);
  }
  
  .desktop-nav {
    display: block !important;
  }
  
  /* Hover effects for desktop */
  .md-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }
  
  .md-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    transition: all var(--duration-normal) var(--ease-out);
  }
  
  .table-container:hover {
    box-shadow: var(--shadow-md);
  }
}

/* === Accessibility improvements === */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === High contrast mode === */
@media (prefers-contrast: high) {
  :root {
    --color-border: #000;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
  }
}

/* === Focus improvements for keyboard navigation === */
.md-bottom-nav__item:focus,
.md-fab:focus,
.md-button:focus {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* === Swipe indicators for horizontal scrolling === */
.table-container::after {
  content: '← Wischen für mehr →';
  position: absolute;
  bottom: var(--space-2);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  background: var(--color-bg);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  z-index: 1;
  display: none;
}

@media (max-width: 768px) {
  .table-container:not(.mobile-table-cards)::after {
    display: block;
  }
}

/* === Loading states === */
.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-border);
  border-top: 2px solid var(--color-gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 1;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}