/*
 * Tab styling for Event Analytics.
 *
 * Mantine's default tab indicator is a 2px bottom border in the primary colour.
 * Against the dark theme's low-contrast surface that border was almost invisible,
 * so the selected tab read the same as the unselected ones. This gives the active
 * tab a filled pill instead — a shape change, not just a colour change, so it is
 * legible in both schemes and without relying on colour perception.
 */
.tab {
  border: none;
  border-radius: var(--mantine-radius-md);
  font-weight: 600;
  color: light-dark(
    var(--mantine-color-gray-7),
    var(--mantine-color-dark-1)
  );
  transition:
    background-color 140ms ease,
    color 140ms ease;
}

.tab:hover {
  background-color: light-dark(
    var(--mantine-color-gray-1),
    var(--mantine-color-dark-5)
  );
}

.tab[data-active] {
  background-color: light-dark(
    var(--mantine-color-dark-8),
    var(--mantine-color-dark-0)
  );
  /* Inverted against the pill, so contrast holds whichever scheme is active. */
  color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-9));
}

.tab[data-active]:hover {
  background-color: light-dark(
    var(--mantine-color-dark-7),
    var(--mantine-color-gray-2)
  );
}

/* The pills carry the emphasis; the rule under them would only add noise. */
.tabList {
  border-bottom: none;
  gap: 6px;
}