/* =========================================
   BIT PUBLIC TABLE FRAMEWORK (STABLE)
   - iframe safe
   - iOS Safari safe
   - pixel-perfect alignment (header is a table)
========================================= */

:root{
  --topbar-h: 120px;
  --row-h: 36px;

  --border:#d9d9d9;
  --bg:#F2F2F2;
  --card:#ffffff;

  --header-bg:#52595D;
  --header-fg:#ffffff;

  --shadow: 0 2px 8px rgba(0,0,0,0.06);
  --radius: 10px;

  --inset-x: 16px;   /* ✅ single source of truth for left/right inset */
  --gap-y: 10px;     /* space between header and body table */
}

/* Prevent iframe horizontal pan */
html{ overflow-x:clip; }
*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:'Roboto', Arial, sans-serif;
  background:var(--bg);
  margin-top:var(--topbar-h);
  overflow-x:hidden;
  touch-action:pan-y;
  overscroll-behavior-x:none;
}

/* ===============================
   Fixed Top Section (FULL BLEED)
================================ */

.stickyTop{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  background:var(--bg);
  padding:12px 0 10px;   /* ✅ no left/right padding here */
  border-bottom:1px solid var(--border);
}

/* Padded text rows only */
.pageTitle,
.pageSub,
.status{
  padding:0 var(--inset-x);
}

.pageTitle{
  text-align:center;
  font-weight:800;
  font-size:22px;
  margin:0;
  color:#111827;
}

.pageSub{
  text-align:center;
  font-weight:700;
  font-size:18px;
  margin:4px 0 8px;
  color:#111827;
}

.status{
  text-align:center;
  font-size:13px;
  margin:0 0 8px;
  color:#333;
}
.status.error{ color:#b00020; font-weight:700; }
.status:empty{ display:none; }

/* ===============================
   Shared Table Wrap
================================ */

.table-wrap{
  width:100%;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ✅ The key alignment fix:
   header-wrap and body-wrap MUST share the same inset */
.header-wrap,
.body-wrap{
  margin-left: var(--inset-x);
  margin-right: var(--inset-x);
}

/* spacing between header table and body table */
.body-wrap{
  margin-top: var(--gap-y);
}

/* ===============================
   Header Table (visible)
================================ */

.header-table{
  width:100%;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
}

.header-table thead{
  display:table-header-group; /* must be visible */
}

/* Header styling */
.header-table th{
  background:var(--header-bg);
  color:var(--header-fg);
  height:var(--row-h);
  padding:0 10px;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
  border-bottom:0;
}

/* ===============================
   Data Table
================================ */

table{
  width:100%;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
  font-size:14px;
}

/* Hide real table head everywhere EXCEPT the header table */
table:not(.header-table) thead{
  display:none;
}

tbody td{
  height:var(--row-h);
  padding:8px 10px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

tbody tr:nth-child(even) td{
  background:#f7f7f7;
}

/* ===============================
   Alignment helpers
================================ */

.align-left{ text-align:left; }
.align-center{ text-align:center; }
.align-right{ text-align:right; }

.num{
  font-variant-numeric:tabular-nums;
  font-weight:700;
}

/* ===============================
   Footer
================================ */

.history-footer{
  margin:8px var(--inset-x) 0;
  padding:8px 10px;
  font-size:13px;
  background:#f2f2f2;
  border:1px solid var(--border);
  border-radius:6px;
  color:#666;
}

/* ===============================
   Mobile
================================ */

@media (max-width:900px){
  :root{
    --inset-x: 0px;   /* ✅ edge-to-edge on mobile */
    --gap-y: 8px;
  }

  .pageTitle,
  .pageSub,
  .status{
    padding:0 10px;   /* keep readable padding */
  }

  .table-wrap{
    border-left:0;
    border-right:0;
    border-radius:0;
  }

  tbody td{
    padding:7px 8px;
    font-size:13px;
  }

  .header-table th{
    padding:0 8px;
    font-size:13px;
  }
}