/**
 * Full Width Layout System
 * Stretches tables and content to use full screen width
 * Created: 2026-01-22
 */

/* Remove container width restrictions */
#app-container,
.app-container,
.container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Full width for main content sections */
.section {
  max-width: 100% !important;
  width: 100% !important;
  padding: var(--spacing-lg);
}

/* Full width for cards containing tables */
.section .card {
  max-width: 100% !important;
  width: 100% !important;
}

/* Ensure disputes section uses full width */
#disputes-section {
  max-width: 100% !important;
  width: 100% !important;
}

#disputes-section .card {
  max-width: 100% !important;
  width: 100% !important;
}

/* Full width for table container */
#disputes-section .overflow-x-auto {
  width: 100%;
  overflow-x: auto;
}

/* Table stretches to full width */
#disputes-section table {
  width: 100%;
  min-width: 100%;
  table-layout: auto;
}

/* Better column sizing for wide screens */
#disputes-section th,
#disputes-section td {
  white-space: nowrap;
  padding: 8px 12px;
}

/* Allow long text to wrap in certain columns */
#disputes-section td:nth-child(7),  /* Equipment Description */
#disputes-section td:nth-child(10) { /* Reason */
  white-space: normal;
  max-width: 200px;
}

/* Responsive adjustments */
@media (min-width: 1024px) {
  .section {
    padding: var(--spacing-xl) var(--spacing-lg);
  }
}

@media (min-width: 1280px) {
  .section {
    padding: var(--spacing-xl);
  }
  
  /* More room for description columns on large screens */
  #disputes-section td:nth-child(7),
  #disputes-section td:nth-child(10) {
    max-width: 300px;
  }
}

@media (min-width: 1536px) {
  /* Extra spacing on ultra-wide screens */
  .section {
    padding: var(--spacing-2xl);
  }
  
  #disputes-section td:nth-child(7),
  #disputes-section td:nth-child(10) {
    max-width: 400px;
  }
}

/* Full width for other sections with tables */
#transactions-section,
#equipment-section,
#partners-section,
#locations-section,
#invoices-section {
  max-width: 100% !important;
  width: 100% !important;
}

#transactions-section .card,
#equipment-section .card,
#partners-section .card,
#locations-section .card,
#invoices-section .card {
  max-width: 100% !important;
  width: 100% !important;
}

/* Ensure horizontal scrolling works smoothly */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--brand-primary) var(--bg-tertiary);
}

.overflow-x-auto::-webkit-scrollbar {
  height: 8px;
}

.overflow-x-auto::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
  border-radius: 4px;
}

.overflow-x-auto::-webkit-scrollbar-thumb {
  background: var(--brand-primary);
  border-radius: 4px;
}

.overflow-x-auto::-webkit-scrollbar-thumb:hover {
  background: var(--brand-hover);
}

/* Improve table header visibility */
thead.bg-slate-700 {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Better spacing for export buttons */
.card .flex.gap-2.flex-wrap {
  width: 100%;
}

/* Bulk actions bar full width */
#disputes-bulk-actions-bar {
  width: 100%;
  max-width: 100%;
}

/* Print-friendly: restore normal width */
@media print {
  #app-container,
  .section,
  .card {
    max-width: 100%;
    padding: 10px;
  }
  
  #disputes-section table {
    font-size: 8px;
  }
  
  #disputes-section th,
  #disputes-section td {
    padding: 4px 6px;
  }
}