/* 1️⃣ Theme colours & helpers */
:root {
  /* Page & toolbar background – solid black / dark grey */
  --bg-primary:    #000000;   /* whole page */
  --bg-secondary:  #111111;   /* toolbar & grid background (unchanged) */

  /* Accent (muted blue) */
  --accent:        #5B8CBE;

  /* Light‑gray for table body – slightly lighter than --bg-secondary */
  --table-body-bg: #222222;   /* 2–3 steps lighter than #111111 */

  /* Utility */
  --border:        #333333;
  --text-light:    #e0e0e0;
  --border-radius: 8px;
  --transition:    .25s ease;
}

/* 2️⃣ Page & toolbar */
body {
  margin: 0;
  font-family: 'Lexend', sans-serif;
  background: var(--bg-primary);
  color: var(--text-light);
  line-height: 1.6;
  padding-top: 60px;          /* keep room for fixed toolbar */
}

/* ──── Toolbar ──── */
.toolbar {
  position: fixed;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 650px;
  height: 60px;
  background: #000;
  box-shadow: 0 2px 4px rgba(0,0,0,.4);
  z-index: 1000;

  /* Flex‑box for centring – no wrapping, scroll if needed */
  display: flex;
  flex-wrap: nowrap;            /* keep all buttons on one line   */
  align-items: center;
  justify-content: center;      /* keep centred */
  gap: 0.5rem;                  /* spacing between all child items */
  padding: 0;

  /* Enable horizontal scrolling only */
  overflow-x: auto;
  overflow-y: hidden;           /* hide vertical scrollbar */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* Edge/IE */
}

/* If you still use the old table inside the toolbar,
   just centre the table itself. */
.toolbar table { margin: 0 auto; }

/* Toolbar cells – keep the original look */
.toolbar tbody td {
  color: #000;
  background: var(--bg-secondary);
  padding: 5px 10px;
  text-align: center;           /* centre button text inside cell */
}

/* 3️⃣ Data grid / tables */
.datagrid {
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
  overflow: hidden;
  max-width: 650px;
  width: 100%;
  margin: 1rem auto;
}

/* Table structure */
.datagrid table { width: 100%; border-collapse: collapse; }
.datagrid th, .datagrid td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-light);
  vertical-align: top;
}

/* Header row */
.datagrid thead th {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-align: left;
}

/* New: lighter body background */
.datagrid tbody tr { background: var(--table-body-bg); }

/* Hover effect (kept from earlier) */
.datagrid tbody tr:hover td { /* you can add a subtle highlight here */ }
.datagrid tbody tr:last-child td { border-bottom: none; }

/* 4️⃣ Buttons */
.button {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: var(--accent);
  background: transparent;
  border: 2px solid var(--accent);
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--transition),
              color var(--transition),
              transform var(--transition);
  font-size: 1rem;
  /* Allow shrinkage – remove hard min‑width */
  flex: 1 1 0;               /* equal width, shrink, grow */
  min-width: 0;              /* allow shrink below 90px if needed */
  box-sizing: border-box;    /* include padding/border in width */
  margin: 0;                 /* no extra margin between buttons */
}
.button:hover  { background: var(--accent); color: var(--bg-primary); }
.button:active{ transform: scale(0.98); }
.button:focus { outline:none; box-shadow:0 0 0 3px rgba(91,140,190,.4); }

@media (min-width:768px) {
  .button { font-size:1.125rem; }
}

/* ─── Mobile tweaks ─── */
@media (max-width:480px) {
  .toolbar { gap: 0.25rem; }
  .button { font-size:0.8rem; padding:0.3rem 0.6rem; }
}

/* 5️⃣ Collapsible tables */
.collapsible-table {
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
  overflow: hidden;
  width: 100%;
  border-collapse: collapse;          /* keep cells glued together */
}
.collapsible-table tbody { display:none; }
.collapsible-table.expanded tbody { display:table-row-group; }

.collapsible-table thead th {
  cursor:pointer;
  position:relative;
  user-select:none;
}
.collapsible-table thead th::after {
  content:'\25BC';
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  transition:transform var(--transition);
}
.collapsible-table.expanded thead th::after {
  transform:translateY(-50%) rotate(180deg);
}

/* 6️⃣ Links */
a, a:visited { color: var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* 7️⃣ Light‑mode fallback (optional) */
@media (prefers-color-scheme:light) {
  :root {
    --bg-primary:#f8f8f8;
    --bg-secondary:#ffffff;
    --text-light:#222222;
    --border:#dddddd;
    --accent:#0066cc;
  }
}

/* 8️⃣ Hard fallback (just in case something overrides it) */
body, html { background:#000 !important; }