/* Project styles on top of Pico.css. Keep this small; prefer Pico's defaults. */

/* Nav: let the two halves wrap instead of overflowing on narrow phones. */
.site-header nav {
  flex-wrap: wrap;
}

.site-header .brand {
  font-weight: 700;
  text-decoration: none;
}

.site-header .user-id {
  font-variant-numeric: tabular-nums;
}

.site-header form {
  margin: 0;
}

.site-header form button {
  width: auto;
  margin: 0;
  padding: 0.35rem 0.85rem;
}

/* Flash messages. */
.messages {
  margin-bottom: var(--pico-block-spacing-vertical);
}

.message {
  margin: 0 0 0.5rem;
  padding: 0.75rem 1rem;
  border-left: 0.3rem solid var(--pico-primary);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
  box-shadow: var(--pico-card-box-shadow);
}

.message.success {
  border-left-color: var(--pico-ins-color);
}

.message.warning {
  border-left-color: #c98a00;
}

.message.error {
  border-left-color: var(--pico-del-color);
}

/* Django form errors. */
.errorlist {
  margin: 0 0 0.5rem;
  padding: 0;
  color: var(--pico-del-color);
}

.errorlist li {
  list-style: none;
}

/* Narrow column for single-purpose forms (login, enroll, reset). */
.narrow {
  max-width: 28rem;
  margin-inline: auto;
}

/* htmx's own indicator styles are switched off (no injected <style>), so define them here. */
.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* People list: compact action buttons side by side, deactivated rows dimmed. */
.people .actions {
  white-space: nowrap;
}

.people .actions form {
  display: inline-block;
  margin: 0;
}

.people .actions button {
  width: auto;
  margin: 0 0.25rem 0 0;
  padding: 0.25rem 0.6rem;
  font-size: 0.875rem;
}

.people tr.inactive {
  opacity: 0.6;
}

/* A freshly issued access code, large enough to copy by hand without mistakes. */
.code-slip dd {
  margin-left: 0;
  margin-bottom: 0.75rem;
}

.code-slip .access-code {
  font-family: var(--pico-font-family-monospace);
  font-size: 1.75rem;
  letter-spacing: 0.08em;
  user-select: all;
}