/* =========================================================
   File: css/components/tabs.css
   Component: Bootstrap Tabs (Token-Driven)
   Project: Invent City

   PURPOSE
   • Preserve Bootstrap tab geometry (left / top / right borders).
   • Remove the default full-width underline beneath tab rows.
   • True “joined” tab + body frame (no seam).
   • Token-driven ink + border + padding.
   • Table area padding = 1rem on all sides.
========================================================= */


/* =========================================================
   1) NAV TABS ROW
========================================================= */
.pane-dark .nav-tabs {
  border-bottom: 0;   /* kill Bootstrap underline */
  margin-bottom: 0;   /* remove vertical gap below tabs */
}


/* =========================================================
   2) TAB LINKS (DEFAULT)
========================================================= */
.pane-dark .nav-tabs .nav-link {
  color: var(--tabs-ink);
  background: transparent;

  padding: var(--tabs-padding-y) var(--tabs-padding-x);

  border: 1px solid var(--tabs-border);
  border-bottom: 0;

  margin-bottom: 0;

  border-top-left-radius: var(--bs-nav-tabs-border-radius);
  border-top-right-radius: var(--bs-nav-tabs-border-radius);
}


/* =========================================================
   3) TAB LINKS — HOVER
========================================================= */
.pane-dark .nav-tabs .nav-link:hover {
  color: var(--tabs-ink-hover);
  background: transparent;
  border-color: var(--tabs-border);
}


/* =========================================================
   4) TAB LINKS — ACTIVE (WHITE FRAME)
========================================================= */
.pane-dark .nav-tabs .nav-link.active,
.pane-dark .nav-tabs .nav-item.show .nav-link {
  color: var(--tabs-ink-active);
  background: transparent;

  border-color: var(--tabs-border-active);
  border-bottom: 0;
}


/* =========================================================
   5) FOCUS
========================================================= */
.pane-dark .nav-tabs .nav-link:focus {
  box-shadow: none;
}


/* =========================================================
   6) TAB BODY (WHITE FRAME + 1rem INNER PADDING)
   - Border joins tabs via -1px overlap.
   - Padding applies to everything inside (tables, text, etc).
========================================================= */
.pane-dark .tab-content {
  color: var(--tabs-ink);

  /* frame */
  border: var(--tabs-body-outline-w) solid var(--tabs-body-outline);

  /* join to tabs (no seam) */
  margin-top: calc(-1 * var(--tabs-body-outline-w)) !important;

  /* inner padding: 1rem on ALL sides */
  padding: var(--tabs-body-pad) !important;
}

/* Prevent pane wrappers from adding extra spacing */
.pane-dark .tab-content > .tab-pane {
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   7) TABLE NORMALIZATION INSIDE TAB BODY
   - Remove hidden padding from .table-responsive
   - Keep caption spacing token-driven
========================================================= */
.pane-dark .tab-content .table-responsive {
  padding: 0 !important;
  margin: 0 !important;
}

.pane-dark .tab-content .table {
  margin: 0 !important; /* no extra gaps; tab-content padding handles spacing */
}

.pane-dark .tab-content .table caption {
  margin-top: 0 !important;
  margin-bottom: var(--tabs-table-caption-gap);
}


/* =========================================================
   8) TAB BODY TYPOGRAPHY
========================================================= */
.pane-dark .tab-content h1,
.pane-dark .tab-content h2,
.pane-dark .tab-content h3,
.pane-dark .tab-content th {
  color: var(--tabs-ink-active);
}


/* =========================================================
   END OF FILE — css/components/tabs.css
========================================================= */