/* Debugging CSS for mobile overflow issues */

/* Add this class to body when debugging */
.debug-overflow {
  /* Make the page highlight overflow horizontally */
  outline: 2px solid red;
  overflow-x: hidden; /* Ensure we can see what's causing overflow */
}

/* Highlight all direct children of the body to see their boundaries */
.debug-overflow > * {
  outline: 1px dashed blue;
}

/* Highlight potentially problematic elements */
.debug-overflow img,
.debug-overflow input,
.debug-overflow select,
.debug-overflow textarea,
.debug-overflow button,
.debug-overflow table,
.debug-overflow [class*="w-"],
.debug-overflow pre,
.debug-overflow code {
  outline: 2px dashed green;
}

/* Add overflow markers to all elements that exceed viewport width */
.debug-overflow * {
  max-width: 100vw; /* Will help identify which elements are exceeding viewport */
}

/* Highlight elements that are causing overflow */
.debug-overflow [style*="width"],
.debug-overflow [style*="min-width"] {
  outline: 3px solid orange;
}

/* Add visual indicator for elements with no wrapping */
.debug-overflow .truncate:not([class*="break-"]),
.debug-overflow .whitespace-nowrap {
  outline: 3px solid purple;
}

/* Identify flex containers that might not be wrapping properly */
.debug-overflow .flex:not([class*="flex-wrap"]) {
  outline: 3px dotted red;
}