/* =========================================
   DESKTOP (≥ 769px): Reset to standard table
   ========================================= */
/* =========================================
   DESKTOP (≥ 769px): Advanced Cleanup
   ========================================= */
@media (min-width: 769px) {
  /* Prevent column names and cell text from wrapping to 2 lines */
  .list-cards-wrap .entity-grid th,
  .list-cards-wrap .entity-grid td {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* Adds '...' if text is too long */
    padding: 12px 15px !important;     /* Better spacing for a premium look */
  }

  /* Increase readability with alternating row colors */
  .list-cards-wrap .entity-grid tbody tr:nth-child(even) {
    background-color: #f9fafb !important;
  }

  /* Optional: Make the header look more distinct */
  .list-cards-wrap .entity-grid thead th {
    background-color: #f3f4f6 !important;
    font-weight: 700 !important;
    color: #374151 !important;
    border-bottom: 2px solid #e5e7eb !important;
  }

  /* Allow the table to scroll horizontally if it exceeds container width */
  .list-cards-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}


/* =========================================
   MOBILE (≤ 768px): Card layout
   ========================================= */
/* =========================================
   MOBILE (≤ 768px): Refined Card Text
   ========================================= */
/* =========================================
   MOBILE (≤ 768px): Ultimate Word-Wrap Fix
   ========================================= */
@media (max-width: 768px) {
  /* Prevent word fragmentation on Android & iOS */
  .list-cards-wrap .entity-grid td.has-mobile-label,
  .list-cards-wrap .entity-grid td.has-mobile-label * {
    /* 1. Kill the 'break-all' behavior */
    word-break: normal !important; 
    -ms-word-break: normal !important;
    
    /* 2. Enable safe wrapping (moves whole word to next line) */
    overflow-wrap: break-word !important; 
    word-wrap: break-word !important;
    
    /* 3. Disable any browser-injected hyphenation */
    hyphens: none !important;
    -webkit-hyphens: none !important;
    
    /* 4. Reset the desktop 'nowrap' */
    white-space: normal !important;
  }

  /* Structural adjustment to prevent narrow-column breaking */
  .list-cards-wrap .entity-grid td.has-mobile-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    padding: 10px 0 !important;
  }

  .list-cards-wrap .entity-grid .mobile-label {
    flex: 0 0 110px !important; /* Fixed width for labels */
    max-width: 110px !important;
    font-weight: 700 !important;
    margin-right: 15px !important;
    white-space: normal !important; /* Allow label itself to wrap safely */
    word-break: normal !important;
  }

  /* The actual data container */
  .list-cards-wrap .entity-grid td.has-mobile-label > :not(.mobile-label) {
    flex: 1 1 auto !important;
    min-width: 0 !important; /* Critical for flexbox wrapping */
  }
}