/* ========================================
   EARTHQUAKE TABLE STYLES
   File: /css/earthquake-table.css
   Description: Styles for the recent earthquake data table
   Added: Oct 2025
   ======================================== */
/* ---------- Container ---------- */
#earthquake-table-app {
  overflow-x: auto;
}
/* ---------- Table Layout ---------- */
#earthquake-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
/* ---------- Table Head & Body ---------- */
#earthquake-table thead {
  display: table;
  width: 100%;
  table-layout: fixed;
}
#earthquake-table tbody {
  display: block;
  max-height: 340px; /* Adjusted height for about 10 rows */
  overflow-y: auto;
  width: 100%;
}
#earthquake-table tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
/* ---------- Table Cells ---------- */
#earthquake-table th,
#earthquake-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  word-wrap: break-word;
}
#earthquake-table th {
  background-color: #d3c7a2;
  font-weight: bold;
}
#earthquake-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}
#earthquake-table tbody tr:hover {
  background-color: #ddd;
}
/* ---------- Column Widths ---------- */
#earthquake-table th:nth-child(1),
#earthquake-table td:nth-child(1) {
  width: 12%;
}
#earthquake-table th:nth-child(2),
#earthquake-table td:nth-child(2) {
  width: 48%;
}
#earthquake-table th:nth-child(3),
#earthquake-table td:nth-child(3) {
  width: 28%;
}
#earthquake-table th:nth-child(4),
#earthquake-table td:nth-child(4) {
  width: 12%;
}
/* ---------- Status & Messages ---------- */
#status-messages-table {
  font-weight: bold;
  color: #cc0000;
  margin-top: 10px;
}
/* ---------- Responsive Layout ---------- */
@media (max-width: 767px) {
  /* Remove horizontal scroll on mobile */
  #earthquake-table-app {
    overflow-x: visible;
  }
  
    /* Mobile: show more rows before scrolling */
  #earthquake-table tbody {
    max-height: 900px !important;
  }
  
  #earthquake-table th,
  #earthquake-table td {
    padding: 4px 2px;
    font-size: 0.7em;
  }
  
  /* Adjust column widths for mobile - must add up to 100% */
  #earthquake-table th:nth-child(1),
  #earthquake-table td:nth-child(1) {
    width: 14%;  /* Magnitude */
  }
  #earthquake-table th:nth-child(2),
  #earthquake-table td:nth-child(2) {
    width: 41%;  /* Location */
  }
  #earthquake-table th:nth-child(3),
  #earthquake-table td:nth-child(3) {
    width: 30%;  /* Time */
  }
  #earthquake-table th:nth-child(4),
  #earthquake-table td:nth-child(4) {
    width: 15%;  /* Depth */
  }
  
  /* Make text wrap better */
  #earthquake-table td {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  
  /* Ensure tbody rows respect mobile widths */
  #earthquake-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
}
/* ---------- Optional: Quake Count Display ---------- */
#quake-count {
  font-weight: bold;
  color: #495057;
  margin: 10px 0;
}

/* ---------- Desktop Layout ---------- */
@media (min-width: 768px) {
  #earthquake-table tbody {
    max-height: 1020px; /* Desktop - about 30 rows */
  }
}