/* ─── VARIABLES ─────────────────────────────── */
:root{
  --accent:#0077ff;    /* active tab + panel border */
  --outline:#9ac9ff;   /* light-blue outline for inactive */
  --bg:#f5f7fa;
}

/* ─── BASE LAYOUT ───────────────────────────── */
body{
  font-family:system-ui,sans-serif;
  background:var(--bg);
  /* padding:2rem; */
  margin:0;
}

/* ─── TAB HEADERS ───────────────────────────── */
.tabs2{
  display:flex;
  list-style:none;
  margin:0 0 1rem 0;
  padding:0;
  overflow-x:auto;            /* allow horizontal scroll on phones */
  gap:.5rem;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tabs2::-webkit-scrollbar{display:none}

.tabs2 button{
  all:unset;
  cursor:pointer;
  padding:1rem 2rem;
  min-width:10rem;            /* long rectangle */
  text-align:center;
  font-weight:600;
  border:2px solid var(--outline);   /* light-blue outline */
  background:#fff;
  transition:background .25s,border .25s,color .25s;
  outline:none;               /* remove browser focus ring */
}

/* ACTIVE TAB — use .tabs2 */
.tabs2 button.active{
  background:var(--accent);          /* solid blue */
  color:#fff;
  border:2px solid #fff !important;  /* white edge (or use border:none) */
}

/* Hover for inactive tabs */
.tabs2 button:not(.active):hover{
  border-color:var(--accent);
}

/* ─── TAB PANELS ───────────────────────────── */
.tab-panel{
  display:none;
  padding:1rem;
  background:#fff;
  border:2px solid var(--accent);
  border-radius:.25rem;
  animation:fade .3s both;
}
.tab-panel.active{display:block}

@keyframes fade{
  from{opacity:0;transform:translateY(.25rem)}
  to  {opacity:1;transform:translateY(0)}
}

/* ─── MOBILE LAYOUT à la Bootstrap nav ────────── */
@media (max-width: 600px) {
  /* 1️⃣  Let the list wrap instead of scroll */
  .tabs2 {
    overflow-x: visible;   /* no horizontal scroll */
    flex-wrap: wrap;       /* items flow onto new line */
  }

  /* 2️⃣  Make each tab a full-width bar */
  .tabs2 li {
    flex: 0 0 100%;        /* each <li> takes the whole row */
  }
  .tabs2 button {
    width: 100%;           /* button stretches across */
    padding: 1rem 2rem;    /* keep desktop padding/size */
    justify-content: center;
  }
}
/* datatable */

/* ----- DataTables re-skin (no Bootstrap) ----- */
/* ============ DataTables custom theme (no Bootstrap) ============ */
/* ----- DataTables re-skin (no Bootstrap) ----- */
/* ============ DataTables custom theme (no Bootstrap) ============ */
table.dataTable {
  border-collapse: collapse;
  width: 100%;
  font-family: system-ui, sans-serif;
  font-size: 0.95rem;
  color: #333;
}

/* header */
/* Center all headers and cells */
table.dataTable thead th,
table.dataTable tbody td {
  text-align: center;
  vertical-align: middle;
}

/* Left-align only 2nd column (Description) */
table.dataTable thead th:nth-child(2),
table.dataTable tbody td:nth-child(2) {
  text-align: left;
}

/* body rows */
table.dataTable tbody td {
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid #eef1f7;
  text-align: center;      /* centered horizontally */
  vertical-align: middle;  /* centered vertically */
}

/* zebra striping */
table.dataTable tbody tr:nth-child(even) {
  background: #fafbfe;
}

/* hover */
table.dataTable tbody tr:hover {
  background: #eef4ff;
}

/* paging, info, search */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: #ffffff;
  border: 1px solid #d7dde8;
  margin: 0 2px;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #3b82f6;
  color: #fff !important;
  border-color: #3b82f6;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) {
  background: #e8eefc;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  font-size: 0.88rem;
  margin-top: 0.5rem;
}

.dataTables_wrapper .dataTables_filter input {
  border: 1px solid #d7dde8;
  border-radius: 4px;
  padding: 4px 6px;
}

/* ================================================================ */
/* === EXTRA LAYOUT RULES to place length-selector & search inline === */
.dataTables_wrapper .dt-top-row {
  display: flex;
  justify-content: space-between;   /* push controls to opposite ends */
  align-items: center;              /* vertical centering */
  flex-wrap: wrap;                  /* allow wrap on narrow screens */
  gap: 0.75rem;
}

/* remove default top margins so they sit flush */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  margin: 0;
}

/* keep search label + box in a tidy row */
.dataTables_wrapper .dataTables_filter label {
  display: flex;
  align-items: center;
}
.dataTables_wrapper .dataTables_filter input {
  margin-left: 0.25rem;             /* small gap after “🔍” or label text */
}