/* ── ECC Mobile Responsive Patch ── */

/* Mobile: Stack table rows as cards */
@media (max-width: 768px) {
  /* Hide less important columns on mobile */
  /* Keep: Urgency badge, Artist, Thread/Topic, Responsible */
  /* Hide: Label, Status, Decision Required, PA Notes, mail icon */

  /* The table uses Tailwind utility classes with fixed widths */
  /* Override fixed widths to allow wrapping */
  .w-\[44px\], .w-\[48px\], .w-\[70px\], .w-\[95px\],
  .w-\[100px\], .w-\[110px\], .w-\[120px\], .w-\[140px\], .w-\[170px\] {
    width: auto !important;
    min-width: 0 !important;
  }
  .min-w-\[180px\], .min-w-\[200px\], .min-w-\[220px\] {
    min-width: 0 !important;
  }

  /* Make the table wrapper scroll horizontal with a hint */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* Add scroll shadow hint */
  .overflow-x-auto::after {
    content: '';
    position: sticky;
    right: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, var(--bg-root));
    pointer-events: none;
  }

  /* Compact the header/filter area */
  .flex-wrap {
    gap: 6px !important;
  }

  /* Make urgency group headers more compact */
  .text-\[14px\] {
    font-size: 12px !important;
  }

  /* Reduce padding on table cells */
  .px-3 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .px-4 {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .px-5 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Stack the top header bar */
  .sticky.top-0 {
    position: relative !important;
  }

  /* Compact the filter dropdowns */
  select, .h-8 {
    height: 32px !important;
    font-size: 11px !important;
  }

  /* Ensure body has space for bottom nav */
  body {
    padding-bottom: 64px !important;
  }

  /* Thread title column - allow wrapping */
  .line-clamp-1, .line-clamp-2 {
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
  }

  /* Make group-by toggles smaller */
  .gap-3 {
    gap: 6px !important;
  }

  /* Reduce max-width constraint */
  .max-w-\[1440px\] {
    max-width: 100% !important;
    padding: 0 8px !important;
  }
}

/* Small mobile: Extra compact */
@media (max-width: 480px) {
  .px-8 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  
  /* Hide the group-by toggle on very small screens */
  .text-\[11px\].uppercase.tracking-wider {
    font-size: 10px !important;
    letter-spacing: 0.03em !important;
  }
}