/* styles.css - Mobile-first responsive styles for Reak-Score */

:root{
  --bg:#f7f7f9;
  --card:#ffffff;
  --muted:#000000;
  --accent:#0f62fe;
  --text:#0f1724;
  --border: #e5e7eb;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
  padding:16px;
}

header{
  background:linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
  border-radius:10px;
  padding:12px 16px;
  box-shadow:0 1px 0 rgba(204, 204, 204, 0.648);
  display:flex;
  align-items:center;
  gap:12px;
}
header h3{margin:0;font-size:1.1rem}

section{max-width:1100px;margin:18px auto}

h4{margin:12px 0;color:#111827;font-size:1rem}

.table-wrap{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:14px;overflow:auto}

/* Desktop/tablet default: make table horizontally scrollable if necessary */
table{width:100%;border-collapse:collapse;min-width:900px}
thead {
  background: #fcfcfc;
  color: #000000;

}
th{background:transparent;text-align:left;padding:10px 8px;font-weight:600;font-size:0.86rem;color:var(--muted)}
tbody td{padding:10px 8px;border-top:1px solid var(--border);font-size:0.95rem}

table tr:first-child td{border-top:0}

/* Small screen: stack table rows using data-label attributes (created by script) */
@media (max-width:780px){
  .table-wrap{padding:8px}
  table{min-width:0;border:0}
  thead{display:none}
  tbody{display:block}
  tbody tr{display:block;border:1px solid var(--border);border-radius:8px;padding:10px;margin-bottom:10px;background:linear-gradient(90deg,#fff,#fbfdff)}
  tbody tr td{display:flex;justify-content:space-between;padding:8px 10px;border-top:0}
  tbody tr td::before{content:attr(data-label);font-weight:600;color:var(--muted);margin-right:12px;flex:0 0 48%}
  tbody tr td span.value{flex:0 0 48%;text-align:right;font-weight:500}
  /* make the date full width on mobile */
  tbody tr td[data-label="Date"]{flex-basis:100%;display:flex}
  tbody tr td[data-label="Date"]::before{flex:0 0 40%}
}

/* Footer */
footer{max-width:1100px;margin:18px auto;color:var(--muted)}

/* Utility: screen-reader only (used in HTML) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Touch targets and accessibility */
@media (hover: none){
  thead th, tbody td{padding:14px}
}

/* small polish: zebra rows on large screens */
@media (min-width:781px){
  tbody tr:nth-child(odd){background:rgba(0,0,0,0.02)}
}