/* ----------  base theme ---------- */
:root{
  --sihf-bg         : #fff;
  --sihf-head-bg    : #E00613;
  --sihf-head-color : #fff;
  --sihf-row-border : #e5e7eb;
  --sihf-row-hover  : #f3f4f6;
  --sihf-font       : system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",
                      Roboto,"Helvetica Neue",Arial,sans-serif;
  --sihf-radius     : .5rem;
}

/* ----------  wrappers ---------- */
.sihf-table-wrapper{
  max-width:100%;
  overflow-x:auto;               /* sideways scroll if table is wider */
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain; /* nicer touch scroll */
}

/* ----------  table ---------- */
.sihf-table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--sihf-font);
  font-size:clamp(.75rem,.3vw + .75rem,.875rem);
  background:var(--sihf-bg);
  border-radius:var(--sihf-radius);
}

/* header */
.sihf-table thead{
  background:var(--sihf-head-bg);
  color:var(--sihf-head-color);
}
.sihf-table thead th{
  padding:.75rem 1rem;
  font-weight:600;
  text-align:center;
  white-space:nowrap;
}

/* body */
.sihf-table tbody td{
  padding:.65rem 1rem;
  border-bottom:1px solid var(--sihf-row-border);
  text-align:center;
}
.sihf-table tbody tr:last-child td{border-bottom:none;}
.sihf-table tbody tr:hover{background:var(--sihf-row-hover);}

/* align first column left */
.sihf-table thead th:first-child,
.sihf-table tbody td:first-child{text-align:left;}

/* ----------  MOBILE: ≤ 640 px ---------- */
@media (max-width:640px){
  .sihf-table thead{display:none;}          /* hide header bar */

  /* each row becomes a card */
  .sihf-table tbody tr{
    display:block;
    border:1px solid var(--sihf-row-border);
    border-radius:var(--sihf-radius);
    margin-bottom:.75rem;
    padding:.5rem 0;
  }

  /* label : value pairs */
  .sihf-table tbody td{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    padding:.4rem .75rem;
    border:none;
    text-align:left;
  }
  .sihf-table tbody td::before{
    content:attr(data-label);     /* <-- requires data-label in HTML */
    font-weight:600;
    text-transform:capitalize;
    color:var(--sihf-head-bg);
  }
}