body {
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

h1, h2, h3, h4, .navbar-brand {
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
}

/* ---- Leave calendar grid ---- */
/* Shrink the table to its content so the name column takes only the width it
   needs, instead of Bootstrap's `width: 100%` stretching it across the page. */
.leave-grid table {
  border-collapse: separate;
  width: auto;
  max-width: 100%;
}

.leave-grid .name-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bs-body-bg);
  width: 1px;
  white-space: nowrap;
}

.leave-grid thead .name-col {
  z-index: 3;
}

.leave-grid .day-col {
  width: 40px;
  min-width: 40px;
  height: 128px;
  padding: 6px 0;
  vertical-align: bottom;
  font-size: 0.8rem;
  line-height: 1.1;
}

/* Date headers rotated 90° so the columns can stay square. */
.leave-grid .day-col .day-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  margin: 0 auto;
  font-weight: 400;
}

/* Keep the weekday abbreviation the same colour as the date so it stays legible
   on the shaded weekend columns (in dark mode the muted colour vanished into the
   weekend fill). Weight alone carries the distinction. */
.leave-grid .day-col .day-label .wd {
  color: inherit;
  font-weight: 500;
}

.leave-grid .today-col {
  box-shadow: inset 3px 0 0 var(--bs-primary);
}

.leave-grid td.cell {
  padding: 0;
  width: 40px;
  min-width: 40px;
  height: 40px;
}

/* Scoped to `.leave-grid td` so these beat Bootstrap's
   `.table > :not(caption) > * > * { background-color: var(--bs-table-bg) }`. */
.leave-grid td.cell-working,
.legend-swatch.cell-working { background-color: rgba(25, 135, 84, 0.30); }
.leave-grid td.cell-partial,
.legend-swatch.cell-partial { background-color: rgba(255, 193, 7, 0.55); }
.leave-grid td.cell-full,
.legend-swatch.cell-full    { background-color: rgba(220, 53, 69, 0.55); }
.leave-grid td.cell-weekend,
.legend-swatch.cell-weekend { background-color: var(--bs-secondary-bg); }

[data-bs-theme="dark"] .leave-grid td.cell-working,
[data-bs-theme="dark"] .legend-swatch.cell-working { background-color: rgba(25, 135, 84, 0.42); }
[data-bs-theme="dark"] .leave-grid td.cell-partial,
[data-bs-theme="dark"] .legend-swatch.cell-partial { background-color: rgba(255, 193, 7, 0.45); }
[data-bs-theme="dark"] .leave-grid td.cell-full,
[data-bs-theme="dark"] .legend-swatch.cell-full    { background-color: rgba(220, 53, 69, 0.52); }

/* Past leave on the "My leave" page is shown dimmed. */
.leave-past {
  opacity: 0.5;
}

.legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 2px;
  border: 1px solid rgba(128, 128, 128, 0.35);
}