/* ================================
   DOSSIER FLEET TABLE MOBILE FIX (HYPER-CONDENSED ACCORDION)
   ================================ */

@media (max-width: 768px) {
  /* 1. Reset Layout & Forcibly Override Tailwind Min-Widths */
  #fleet-section table,
  #fleet-section thead,
  #fleet-section tbody,
  #fleet-section th,
  #fleet-section td,
  #fleet-section tr {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important; /* Kills the 1000px horizontal scroll constraint */
    box-sizing: border-box;
  }

  /* 2. Hide Desktop Header */
  #fleet-section thead {
    display: none !important;
  }

  /* 3. Containerize Rows (The Accordion Card) */
  #fleet-section tbody tr {
    margin-bottom: 0.5rem !important; /* Highly condensed vertical gap */
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
    padding: 1rem !important; /* Single source of truth for internal padding */
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* 4. Eradicate Tailwind Padding Bloat from Data Cells */
  #fleet-section tbody td {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    text-align: right !important;
    background: transparent !important;
  }

  /* 5. Primary Data (Vessel Identity): Always Visible */
  #fleet-section tbody td:first-child {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    text-align: left !important;
  }

  /* 6. Visual Cue: Expand Indicator */
  #fleet-section tbody td:first-child::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 300;
    color: inherit;
    opacity: 0.5;
    line-height: 1;
  }

  /* 7. Secondary Data & CTA: Hidden by Default */
  #fleet-section tbody td:nth-child(2),
  #fleet-section tbody td:nth-child(3),
  #fleet-section tbody td:nth-child(4),
  #fleet-section tbody td:nth-child(5) {
    display: none !important;
  }

  /* 8. Inject Labels for Secondary Specs */
  #fleet-section tbody td:nth-child(2)::before,
  #fleet-section tbody td:nth-child(3)::before,
  #fleet-section tbody td:nth-child(4)::before {
    content: attr(data-label);
    float: left;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #546E7A;
    line-height: 1.5;
  }

  /* 9. The Expanded State Logic (Reveals Specs) */
  #fleet-section tbody tr.expanded td:nth-child(2),
  #fleet-section tbody tr.expanded td:nth-child(3),
  #fleet-section tbody tr.expanded td:nth-child(4) {
    display: block !important;
    margin-top: 0.75rem !important; /* Controlled vertical rhythm */
    font-size: 0.875rem !important;
    line-height: 1.5;
  }

  /* 10. Expanded State: CTA Reveal & Encapsulation */
  #fleet-section tbody tr.expanded td:nth-child(5) {
    display: block !important;
    margin-top: 1rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important; /* Visual separator */
  }

  #fleet-section tbody tr.expanded td:nth-child(5) a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.75rem !important;
  }

  /* 11. Expanded State: Swap Indicator */
  #fleet-section tbody tr.expanded td:first-child::after {
    content: '−';
  }
}