/* ----------  base theme ---------- */
:root {
  --sihf-bg          : #ffffff;
  --sihf-head-bg     : #E00613;
  --sihf-head-color  : #ffffff;
  --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      : 0.5rem;
}

/* ----------  layout wrappers ---------- */
.sihf-table-wrapper {
  width: 100%;
  overflow-x: auto;            /* horizontal scroll on small screens */
  -webkit-overflow-scrolling: touch;
}

.sihf-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sihf-font);
  font-size: 0.875rem;
  background: var(--sihf-bg);
  border-radius: var(--sihf-radius);
  table-layout: auto;          /* keeps natural table width */
  min-width: 600px;            /* ensures columns don't shrink too much */
}

/* ----------  header row ---------- */
.sihf-table thead {
  background: var(--sihf-head-bg);
  color: var(--sihf-head-color);
}

.sihf-table thead th {
  padding: 0.75rem 1rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

/* ----------  body rows ---------- */
.sihf-table tbody td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--sihf-row-border);
  text-align: center;
  white-space: nowrap;          /* prevent text wrapping */
}

.sihf-table tbody tr:last-child td {
  border-bottom: none;
}

.sihf-table tbody tr:hover {
  background: var(--sihf-row-hover);
}

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

/* ----------  title & legend ---------- */
.sihf-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 1rem 0 0.5rem;
}

.sihf-legend {
  font-size: 0.8rem;
  line-height: 1.4;
  margin-top: 0.75rem;
}

/* ----------  responsive tweaks ---------- */
@media (max-width:640px){

  /* 1. Let the browser re-flow columns */
  .sihf-table{
    width:100%;          /* occupy full width of screen     */
    table-layout:fixed;  /* divide space evenly, no overflow */
  }

  /* 2. Allow text to wrap anywhere it needs */
  .sihf-table th,
  .sihf-table td{
    white-space:normal;      /* turn off nowrap                */
    word-break:break-word;   /* split long words if necessary  */
    overflow-wrap:anywhere;  /* last-chance wrap for URLs etc. */
  }

  /* 3. Trim paddings & font size for tight spaces */
  .sihf-table th,
  .sihf-table td{
    padding:0.45rem 0.55rem; /* was 0.75 / 0.65 rem            */
    font-size:0.775rem;      /* ≈ 12.4 px – still readable     */
  }

  /* 4. Optional: soften header weight so wrapped lines look nicer */
  .sihf-table thead th{
    font-weight:500;
  }
}