/**
 * ========================================================================
 * TEXT OVERFLOW PROTECTION - GLOBAL STYLES
 * ========================================================================
 * Prevents long unbroken strings from breaking layout across entire app
 * Applies to all text content, form inputs, and display areas
 * 
 * @version 1.0.0
 * @since 2025-11-22
 * ========================================================================
 */

/* ========================================
   UNIVERSAL TEXT WRAPPING (All Elements)
   ======================================== */

/* Apply to all text elements to prevent overflow */
body,
p,
div,
span,
h1, h2, h3, h4, h5, h6,
li,
td,
th,
blockquote,
pre {
    /* Break long words that don't fit */
    word-wrap: break-word;
    overflow-wrap: break-word;
    
    /* Break at any character if needed (emergency fallback) */
    word-break: break-word;
    
    /* Add hyphens for better appearance */
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* ========================================
   FORM INPUTS & TEXTAREAS
   ======================================== */

/* Apply to all form fields */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea {
    /* Break long words in inputs */
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    
    /* Prevent horizontal scrolling */
    overflow-x: hidden;
}

/* Specific textarea handling */
textarea {
    /* Force text to wrap within textarea */
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ========================================
   DESCRIPTION & CONTENT AREAS
   ======================================== */

/* Target description fields specifically */
.description,
.item-description,
.prose,
[class*="description"] {
    /* Aggressive word breaking */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    
    /* Prevent horizontal overflow */
    overflow-x: hidden !important;
    max-width: 100% !important;
    
    /* Ensure hyphens are used */
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

/* ========================================
   CONTAINER OVERFLOW PROTECTION
   ======================================== */

/* Ensure containers don't overflow */
.container,
.max-w-none,
.prose,
.bg-white,
[class*="col-span"],
[class*="grid-cols"] {
    /* Prevent container overflow */
    overflow-wrap: break-word;
    word-wrap: break-word;
    
    /* Hide horizontal overflow as last resort */
    overflow-x: auto;
    max-width: 100%;
}

/* ========================================
   SPECIFIC COMPONENT FIXES
   ======================================== */

/* Lost/Found item details */
.item-details,
.lost-item-details,
.found-item-details {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    overflow-x: hidden !important;
}

/* Card components */
.card,
.rounded-lg,
.shadow-md {
    overflow: hidden;
    word-wrap: break-word;
}

/* ========================================
   EMERGENCY OVERFLOW FIXES
   ======================================== */

/* Absolute last resort for any element */
* {
    /* Prevent any element from exceeding parent width */
    max-width: 100%;
    box-sizing: border-box;
}

/* Prevent tables from breaking layout */
table {
    table-layout: fixed;
    word-wrap: break-word;
}

/* ========================================
   TAILWIND PROSE OVERRIDE
   ======================================== */

/* Override Tailwind prose defaults that might allow overflow */
.prose {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    overflow-x: hidden !important;
}

.prose p,
.prose div,
.prose span {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* ========================================
   CODE & PREFORMATTED TEXT
   ======================================== */

/* Handle code blocks safely */
pre,
code {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    overflow-x: auto;
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    /* Extra aggressive breaking on mobile */
    body,
    p,
    div,
    span {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Ensure mobile containers don't overflow */
    .container,
    .max-w-none {
        overflow-x: hidden !important;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Maintain accessibility for screen readers */
[aria-label],
[aria-describedby] {
    /* Still allow breaking but maintain semantic meaning */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    /* Ensure printed content wraps properly */
    * {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}