/* Centralized styles for the Runalyze-like tables and page
   Updated for reordered columns:
   Distance | Achieved | Icon | Prognosis | Optimum | Marathon Shape | Weekly mileage | Long Run
   Use classes (weekly-col, hidden-mobile) for robust sizing.
*/

:root{
  --page-max-width:1100px;
  --muted: #666;
  --border: #e6e6e6;
  --row-alt: #fbfcfd;
  --strong-sep: #d6d6d6;
  --accent-ok: #1a9a42;
  --accent-bad: #c1392b;
  --marathon-shade: #f0f5fb;
}

*{box-sizing:border-box}
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  margin: 10px;
  background:#fff;
  color:#222;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.page-title { font-size:0.98rem; font-weight:700; margin-bottom:6px; }
.note { color:var(--muted); font-size:0.88rem; margin-bottom:8px; }

.chart-wrap { max-width:var(--page-max-width); margin:10px auto; }
.chart-heading { margin:6px 0 8px; font-size:0.94rem; }
canvas { width:100% !important; height:300px !important; display:block; background:#fff; border-radius:4px; }

/* Container: allow horizontal scroll if table is wider than viewport */
.tables-wrap { max-width:var(--page-max-width); margin:6px auto 24px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.rz-wrapper { padding:6px 0; }

/* Use auto layout and inline-table so table shrinks to content */
.rz-table{
  display:inline-table;
  table-layout:auto;
  font-size:0.92rem;
  color:#333;
  background:#fff;
  border-collapse:collapse;
  margin:0;
}

/* Group header row */
.rz-table thead tr.group-row th{
  text-align:center;
  font-weight:700;
  padding:5px 4px;
  border-bottom:1px solid var(--border);
  background:transparent;
  font-size:0.94rem;
}

/* Column labels row */
.rz-table thead tr.label-row th{
  font-weight:700;
  padding:7px 8px;
  background:#fafafa;
  border-bottom:1px solid var(--border);
  text-align:left;
  font-size:0.90rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* vertical divider at start of the Required group (Marathon Shape column is now the first of required) */
.rz-table thead tr.label-row th:nth-child(6),
.rz-table tbody td:nth-child(6){ border-left:1px solid var(--border); }

/* cell spacing (compact) */
.rz-table tbody td{
  padding:6px 8px;
  border-bottom:1px solid #f2f2f2;
  vertical-align:middle;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* weekly-col: constrain and allow wrapping */
.rz-table thead th.weekly-col,
.rz-table td.weekly-col{
  white-space:normal;
  max-width:180px;
  word-break:break-word;
}

/* constrain prognosis/optimum cells using the hidden-mobile class (robust to reordering) */
.rz-table th.hidden-mobile,
.rz-table td.hidden-mobile{
  white-space:normal;
  max-width:120px;
  word-break:break-word;
}

/* alternating row background */
.rz-table tbody tr:nth-child(odd) td{ background:#fff; }
.rz-table tbody tr:nth-child(even) td{ background:var(--row-alt); }

/* distance column: bold, compact */
.rz-table tbody td:nth-child(1){ font-weight:700; white-space:nowrap; padding-left:8px; }

/* achieved column: centered and compact (now column 2) */
.rz-table tbody td:nth-child(2){ text-align:center; white-space:nowrap; padding-right:8px; }

/* small helper text */
.small{ font-size:0.85rem; color:var(--muted); margin:0; padding:0; }

/* marathon goal separators and shading */
.top-separated td{ border-top:1.6px solid var(--strong-sep); }
.bottom-separated td{ border-bottom:1.6px solid var(--strong-sep); }
.marathon-goal td{ background: var(--marathon-shade) !important; }

/* icons */
.fa-check.plus, .plus{ color:var(--accent-ok); font-weight:700; }
.fa-xmark.minus, .minus{ color:var(--accent-bad); font-weight:700; }
.fa-solid{ font-size:0.95rem; vertical-align:middle; }

/* hide certain columns only on very small screens */
.hidden-mobile{ display:table-cell; }
@media (max-width:480px){
  .hidden-mobile{ display:none; }
  .rz-table th.hidden-mobile, .rz-table td.hidden-mobile { max-width:1px; }
}

/* user header compact */
.user-block{ display:flex; justify-content:space-between; align-items:flex-start; margin:8px 0 4px; gap:8px; }
.user-title{ font-weight:700; font-size:0.98rem; margin:0; }
.user-meta{ text-align:right; font-size:0.84rem; color:var(--muted); margin-top:2px; }

/* responsive tweaks */
@media (max-width:720px){
  .rz-table thead tr.label-row th, .rz-table tbody td{ padding:5px 6px; font-size:0.88rem; }
  canvas{ height:240px !important; }
}