/* Declare the layer order Tailwind v4 uses, so it is fixed no matter which
   stylesheet the browser parses first. */
@layer theme, base, components, utilities;

/* Element defaults belong in `base`. Tailwind v4 puts its utilities in
   `@layer utilities`, and an unlayered rule beats every layered one whatever
   its specificity — so leaving these unlayered would make the heading colour
   below override `text-white` and friends on every heading. */
@layer base {
  html {
    font-family: var(--font-sans);
    background-color: #eefaf366;
    color: var(--color-brand-body);
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-serif);
    color: var(--color-brand-dark);
  }
}

.shadow-warm {
  box-shadow: 0 10px 30px -5px rgba(1, 192, 96, 0.16);
}

/* Sidebar tab buttons */
.tab-btn {
  color: rgba(238, 250, 243, 0.65);
  cursor: pointer;
}
.tab-btn:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.tab-btn.active {
  background-color: var(--color-brand-green);
  color: #fff;
}

/* Submission table row hover */
#submissions-body tr {
  border-bottom: 1px solid rgba(238, 250, 243, 1);
  transition: background-color 0.2s ease;
}
#submissions-body tr:hover {
  background-color: rgba(238, 250, 243, 0.4);
}
#submissions-body td {
  padding: 0.85rem 1rem 0.85rem 0;
  vertical-align: top;
}