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); }
.leave-grid td.cell-holiday,
.legend-swatch.cell-holiday { background-color: rgba(111, 66, 193, 0.28); }

/* Pending leave: the approved colour, striped, so it reads as "not confirmed". */
.leave-grid td.cell-pending-full,
.legend-swatch.cell-pending-full {
  background-color: rgba(220, 53, 69, 0.16);
  background-image: repeating-linear-gradient(45deg,
    rgba(220, 53, 69, 0.55) 0, rgba(220, 53, 69, 0.55) 4px,
    transparent 4px, transparent 8px);
}
.leave-grid td.cell-pending-partial,
.legend-swatch.cell-pending-partial {
  background-color: rgba(255, 193, 7, 0.16);
  background-image: repeating-linear-gradient(45deg,
    rgba(255, 193, 7, 0.65) 0, rgba(255, 193, 7, 0.65) 4px,
    transparent 4px, transparent 8px);
}

[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); }
[data-bs-theme="dark"] .leave-grid td.cell-holiday,
[data-bs-theme="dark"] .legend-swatch.cell-holiday { background-color: rgba(147, 112, 219, 0.34); }

/* Bank-holiday and event markers on the date-header row. */
.leave-grid .bank-holiday-col { box-shadow: inset 0 3px 0 rgba(111, 66, 193, 0.7); }
.leave-grid .event-col { box-shadow: inset 0 3px 0 rgba(13, 202, 240, 0.85); }
.leave-grid .bank-holiday-col.event-col { box-shadow: inset 0 3px 0 rgba(111, 66, 193, 0.7), inset 0 6px 0 rgba(13, 202, 240, 0.85); }

/* Off sick: a sickly yellow-green border drawn on top of whatever the cell's
   leave/weekend/holiday fill is. `outline` (not `box-shadow`) so it doesn't
   fight the "today" inset shadow on the year grid. */
.leave-grid td.cell.is-sick,
.year-grid td.ycell.is-sick {
  outline: 3px solid rgb(61, 213, 133, 0.95);
  outline-offset: -3px;
}

.legend-swatch.is-sick {
  background-color: rgba(61, 213, 133, 0.22);
  border-color: rgba(61, 213, 133, 0.95);
  box-shadow: inset 0 0 0 2px rgba(61, 213, 133, 0.95);
}

[data-bs-theme="dark"] .leave-grid td.cell.is-sick,
[data-bs-theme="dark"] .year-grid td.ycell.is-sick {
  outline-color: rgba(61, 213, 133, 0.95);
}

/* Sickness KPI weekday bars. */
.sick-bar-track {
  background: var(--bs-secondary-bg);
  border-radius: 4px;
  height: 1.4rem;
  overflow: hidden;
}

.sick-bar-fill {
  background: rgba(61, 213, 133, 0.85);
  height: 100%;
  min-width: 2px;
  border-radius: 4px;
}

[data-bs-theme="dark"] .sick-bar-fill {
  background: rgba(61, 213, 133, 0.8);
}

/* 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);
}

/* ---- Admin year calendar (settings/calendar) ---- */
/* People down the rows, dates across the columns; the header row and the name
   column stay pinned while the grid scrolls. */
.year-grid {
  max-height: 82vh;
  overflow: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: 6px;
}

.year-grid table {
  border-collapse: separate;
  border-spacing: 0;
  width: auto;
}

.year-grid th,
.year-grid td {
  border-right: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
}

.year-grid thead th.day-col {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bs-body-bg);
  height: 132px;
  width: 34px;
  min-width: 34px;
  vertical-align: bottom;
  padding: 6px 0;
  font-size: 0.78rem;
  font-weight: 400;
}

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

.year-grid thead th.day-col .day-label .wd {
  font-weight: 500;
}

/* Name column, pinned to the left edge. */
.year-grid .name-col {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bs-body-bg);
  white-space: nowrap;
  padding: 0 12px;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 500;
}

.year-grid thead .corner {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 3;
  background: var(--bs-body-bg);
}

.year-grid td.ycell {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  cursor: pointer;
}

.year-grid td.ycell:hover {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
}

.year-grid td.ycell.busy {
  cursor: progress;
  opacity: 0.4;
}

/* Non-leave backgrounds first… */
.year-grid .day-col.is-weekend { color: var(--bs-secondary-color); }
.year-grid td.ycell.is-weekend { background-color: var(--bs-secondary-bg); }
.year-grid .day-col.is-holiday,
.year-grid td.ycell.is-holiday { background-color: rgba(111, 66, 193, 0.28); }

/* …then the leave states. The extra `tbody` / `.ycell` selectors keep these more
   specific than `.ycell.is-weekend` / `.ycell.is-holiday` so a booked day always
   shows its colour, even on a weekend or bank holiday. */
.year-grid tbody td.ycell.ycell-full { background-color: rgba(220, 53, 69, 0.62); }
.year-grid tbody td.ycell.ycell-half { background-color: rgba(255, 193, 7, 0.62); }

/* Neutral divider on the first column of each month (kept off the primary colour,
   which marks "today"). */
.year-grid .day-col.month-start,
.year-grid td.ycell.month-start { border-left: 2px solid var(--bs-secondary-color); }

/* Today: a vertical line down the whole column, in the primary colour. */
.year-grid .day-col.is-today,
.year-grid td.ycell.is-today { box-shadow: inset 2px 0 0 var(--bs-primary), inset -2px 0 0 var(--bs-primary); }

[data-bs-theme="dark"] .year-grid tbody td.ycell.ycell-full { background-color: rgba(220, 53, 69, 0.6); }
[data-bs-theme="dark"] .year-grid tbody td.ycell.ycell-half { background-color: rgba(255, 193, 7, 0.5); }
[data-bs-theme="dark"] .year-grid .day-col.is-holiday,
[data-bs-theme="dark"] .year-grid td.ycell.is-holiday { background-color: rgba(147, 112, 219, 0.34); }