@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom responsive table styles for trips-table-container */
.trips-table-container {
  @apply w-full overflow-x-auto rounded-lg border border-gray-200 bg-white shadow-sm;
}

.trips-table {
  @apply w-full min-w-full table-auto;
}

.trips-table th {
  @apply px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider bg-gray-50 border-b border-gray-200;
}

.trips-table td {
  @apply px-4 py-3 text-sm text-gray-900 border-b border-gray-200 whitespace-nowrap;
}

.trips-table tbody tr:hover {
  @apply bg-gray-50;
}

/* POD column specific responsive handling */
.trips-table td:nth-child(8) { /* POD column */
  @apply max-w-xs truncate;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  .trips-table-container {
    @apply block overflow-x-auto;
  }
  
  .trips-table {
    @apply text-xs;
  }
  
  .trips-table th,
  .trips-table td {
    @apply px-2 py-2;
  }
  
  /* Hide less important columns on mobile */
  .trips-table th:nth-child(5), /* Order # */
  .trips-table th:nth-child(6), /* Truck */
  .trips-table th:nth-child(7), /* Trailer */
  .trips-table td:nth-child(5),
  .trips-table td:nth-child(6),
  .trips-table td:nth-child(7) {
    @apply hidden sm:table-cell;
  }
}

@media (max-width: 768px) {
  .trips-table {
    @apply text-sm;
  }
  
  .trips-table th:nth-child(4), /* Type */
  .trips-table td:nth-child(4) {
    @apply hidden md:table-cell;
  }
}

/* POD file preview responsive */
.pod-file-preview {
  @apply flex items-center gap-2 mt-2 p-2 bg-green-50 border border-green-200 rounded;
}

.pod-file-preview .pod-filename {
  @apply flex-1 text-green-800 font-medium truncate;
}

.btn-remove-pod {
  @apply bg-red-500 text-white border-none rounded-full w-6 h-6 cursor-pointer text-sm flex items-center justify-center hover:bg-red-600;
}

/* Enhanced responsive container */
.container {
  @apply max-w-4xl mx-auto p-4 bg-white min-h-screen shadow-lg;
}

@media (max-width: 640px) {
  .container {
    @apply p-2;
  }
}

/* Responsive form sections */
.form-section {
  @apply mb-6 p-4 sm:p-6 bg-gray-50 rounded-lg border border-gray-200 shadow-sm;
}

@media (max-width: 640px) {
  .form-section {
    @apply p-3;
  }
}

/* Responsive buttons */
.btn {
  @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-150 m-1 min-w-[120px];
}

@media (max-width: 640px) {
  .btn {
    @apply w-full m-0 mb-2;
  }
}

/* Responsive grid for form rows */
.form-row {
  @apply grid gap-4 mb-4;
}

.form-row:not(.three-cols) {
  @apply grid-cols-1 sm:grid-cols-2;
}

.form-row.three-cols {
  @apply grid-cols-1 sm:grid-cols-2 lg:grid-cols-3;
}

/* Responsive form groups */
.form-group {
  @apply mb-4 flex flex-col;
}

@media (max-width: 640px) {
  .form-group {
    @apply mb-3;
  }
}

/* Enhanced table for better mobile experience */
@media (max-width: 640px) {
  .trips-table {
    font-size: 0.75rem;
  }
  
  .trips-table th,
  .trips-table td {
    padding: 0.5rem 0.25rem;
  }
  
  /* Stack table on very small screens */
  .trips-table tbody tr {
    @apply block mb-4 border border-gray-200 rounded;
  }
  
  .trips-table tbody td {
    @apply block text-left px-3 py-2;
  }
  
  .trips-table tbody td:before {
    content: attr(data-label);
    @apply font-semibold text-gray-700 mr-2;
  }
}