/* Emergency Invoice Mobile Fix - Load this last */
@media screen and (max-width: 768px) {
  /* Force everything visible */
  #invoices-list,
  #invoices-list *,
  #invoices-list .table-responsive,
  #invoices-list .table-mobile-cards,
  #invoices-list table,
  #invoices-list tbody,
  #invoices-list tr,
  #invoices-list td {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  
  /* Hide only the thead */
  #invoices-list thead {
    display: none !important;
  }
  
  /* Style the rows as cards */
  #invoices-list tbody tr {
    margin-bottom: 15px !important;
    padding: 15px !important;
    background: white !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  }
  
  /* Style each cell */
  #invoices-list tbody td {
    padding: 8px 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    border: none !important;
    display: block !important;
    width: 100% !important;
  }
  
  /* Add labels before content */
  #invoices-list td[data-label]:before {
    content: attr(data-label) ": " !important;
    font-weight: bold !important;
    color: #555 !important;
    display: inline-block !important;
    min-width: 100px !important;
  }
  
  /* Special styling for actions */
  #invoices-list td[data-label="Actions"] {
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid #eee !important;
  }
  
  #invoices-list .btn-group {
    display: flex !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
  }
  
  #invoices-list .btn {
    flex: 1 !important;
    min-width: 70px !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
  }
  
  /* Debug - make sure container is visible */
  #invoices-list:empty:after {
    content: "Invoice list container is visible but empty" !important;
    display: block !important;
    padding: 20px !important;
    background: yellow !important;
    color: black !important;
  }
}