/* ----------------------------------------------
   divelog.css (for dives_overview.tpl styling)
   ---------------------------------------------- */

/* 1) Container styling */
.site-content {
  max-width: 960px;       /* matches typical page width */
  margin: 0 auto;         /* center on the page */
  padding: 20px;          /* some breathing room */
  font-family: Arial, sans-serif;
  color: #333;
}

/* 2) Page title (H1) */
.page-title {
  font-size: 2em;
  color: #004C8C;         /* a deep ocean blue */
  margin-bottom: 16px;
  border-bottom: 2px solid #ddd;
  padding-bottom: 8px;
}

/* 3) Table wrapper (for possible horizontal scroll on small screens) */
.table-wrapper {
  overflow-x: auto;
}

/* 4) The main dive log table */
.divelog-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  background: #fafafa;
}

/* 5) Header row styling */
.divelog-header th {
  background-color: #004C8C;  /* dark‐blue header */
  color: #ffffff;            /* white text */
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 3px solid #002B55;
  vertical-align: bottom;
}

/* 6) Individual data‐row styling */
.divelog-row td {
  padding: 10px 12px;
  border-bottom: 1px solid #e0e0e0;
  vertical-align: middle;
}

/* 7) Zebra striping for readability */
.divelog-row:nth-child(even) {
  background-color: #f2faff;
}

/* 8) Hover highlight */
.divelog-row:hover {
  background-color: #e0f0fe;
}

/* 9) Link (the dive number) styling */
.link-number {
  color: #004C8C;
  text-decoration: none;
  font-weight: bold;
}
.link-number:hover {
  text-decoration: underline;
}

/* 10) Profile icon tweaks */
.icon-profile {
  vertical-align: middle;
  margin-right: 6px;
  width: 16px;   /* adjust as needed */
  height: 16px;
}

/* 11) Column‐specific tweaks (optional) */
.cell-number {
  white-space: nowrap;
}
.cell-depth, 
.cell-time {
  text-align: right;
  white-space: nowrap;
}
.cell-date {
  white-space: nowrap;
}
.cell-location {
  /* If city/place names get too long, wrap neatly */
  word-wrap: break-word;
}

/* 12) Optional: For very small viewports, reduce padding */
@media (max-width: 600px) {
  .divelog-header th,
  .divelog-row td {
    padding: 6px 8px;
  }
  .page-title {
    font-size: 1.5em;
  }
}