# Custom staff styles on top of Bulma.

:root {
  --bulma-primary-h: 210deg;
  --bulma-primary-s: 60%;
  --bulma-primary-l: 32%;
  color-scheme: light dark;
}

body {
  min-height: 100vh;
  background: var(--bulma-scheme-main-bis, #f4f6f8);
  color: var(--bulma-body-color, #1a1a1a);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bulma-primary-l: 55%;
  }

  body {
    background: var(--bulma-scheme-main, #12141a);
    color: var(--bulma-text, #edf0f4);
  }

  .title,
  .subtitle,
  .label,
  .table,
  .content {
    color: var(--bulma-text-strong, #f5f7fa);
  }

  .field-help {
    color: #9ca3af;
  }

  .status-up_to_date {
    color: #4ade80;
  }

  .status-outstanding_debt {
    color: #f87171;
  }

  .status-exempt {
    color: #93c5fd;
  }
}

.navbar-brand .navbar-item {
  font-weight: 700;
}

.table-container {
  overflow-x: auto;
}

.pagination-list {
  flex-wrap: wrap;
  row-gap: 0.4rem;
}

.pagination-status {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pagination-status .select select {
  min-width: 4.5rem;
}

.field-help {
  font-size: 0.85rem;
  color: #6b7280;
}

.status-up_to_date {
  color: #146c2e;
}

.status-outstanding_debt {
  color: #9b1c1c;
}

.status-exempt {
  color: #1e40af;
}

.allocation-panel {
  margin: 1.25rem 0 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--bulma-border, #dbe1e8);
  border-radius: 8px;
  background: var(--bulma-scheme-main, transparent);
}

.allocation-summary {
  font-size: 0.95rem;
}

.allocation-row {
  margin-bottom: 1rem;
}

.allocation-row:last-child {
  margin-bottom: 0;
}

.allocation-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.35rem;
}

.allocation-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.allocation-slider {
  width: 100%;
  accent-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
}