/* ═══════════════════════════════════════════ */
/* DEMS — Components                           */
/* Bootstrap bridge and the components.        */
/* Colours, font sizes, radii and layers come  */
/* from tokens.css.                            */
/* Shown in the styleguide (#debug).           */
/* ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════ */
/* BOOTSTRAP BRIDGE                            */
/* ═══════════════════════════════════════════ */
[data-bs-theme="dark"] {
  --bs-body-bg: var(--bg-primary);
  --bs-body-color: var(--text-primary);
  --bs-body-font-family: var(--font-body);
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-color: var(--text-muted);
  --bs-border-color: var(--border-strong);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-pill: var(--radius-pill);
}

a {
  color: var(--accent-text);
}

/* Bootstrap's colour helpers carry !important, so these need it too */
.text-secondary {
  color: var(--text-secondary) !important;
}

.text-primary {
  color: var(--accent-text) !important;
}

.text-success {
  color: var(--success) !important;
}

.text-warning {
  color: var(--warning) !important;
}

.text-danger {
  color: var(--danger) !important;
}

.text-info {
  color: var(--info) !important;
}

.bg-primary,
.text-bg-primary {
  background-color: var(--accent-fill) !important;
  color: var(--on-accent) !important;
}

.bg-success,
.text-bg-success {
  background-color: var(--success-fill) !important;
  color: var(--on-success) !important;
}

.bg-warning,
.text-bg-warning {
  background-color: var(--warning-fill) !important;
  color: var(--on-warning) !important;
}

.bg-danger,
.text-bg-danger {
  background-color: var(--danger-fill) !important;
  color: var(--on-danger) !important;
}

.bg-info,
.text-bg-info {
  background-color: var(--info-fill) !important;
  color: var(--on-info) !important;
}

.alert-success {
  --bs-alert-color: var(--success);
  --bs-alert-bg: var(--success-bg);
  --bs-alert-border-color: var(--success-border);
  --bs-alert-link-color: var(--success);
}

.alert-warning {
  --bs-alert-color: var(--warning);
  --bs-alert-bg: var(--warning-bg);
  --bs-alert-border-color: var(--warning-border);
  --bs-alert-link-color: var(--warning);
}

.alert-danger {
  --bs-alert-color: var(--danger);
  --bs-alert-bg: var(--danger-bg);
  --bs-alert-border-color: var(--danger-border);
  --bs-alert-link-color: var(--danger);
}

.alert-info {
  --bs-alert-color: var(--info);
  --bs-alert-bg: var(--info-bg);
  --bs-alert-border-color: var(--info-border);
  --bs-alert-link-color: var(--info);
}

/* ═══════════════════════════════════════════ */
/* BUTTON                                      */
/* .btn + one variant; sizes .btn-sm, .btn-lg  */
/* ═══════════════════════════════════════════ */
.btn {
  --btn-height: 2.5rem;
  --bs-btn-padding-x: var(--space-16);
  /* Height = one line (1.5em) + padding + 1px border on each side. The button stays an
     inline block: as a flex box it would drop the space between an icon and its label. */
  --bs-btn-padding-y: calc((var(--btn-height) - 2px - 1.5em) / 2);
  --bs-btn-font-size: var(--font-size-md);
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--radius);
  --bs-btn-disabled-opacity: 0.5;
  --bs-btn-focus-box-shadow: var(--shadow-ring);
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.btn-sm {
  --btn-height: 2rem;
  --bs-btn-padding-x: var(--space-12);
  --bs-btn-font-size: var(--font-size-sm);
  --bs-btn-border-radius: var(--radius-sm);
}

.btn-lg {
  --btn-height: 3rem;
  --bs-btn-padding-x: var(--space-24);
  --bs-btn-font-size: var(--font-size-lg);
  --bs-btn-border-radius: var(--radius);
}

/* Square button for a single icon */
.btn-icon {
  --bs-btn-padding-x: 0;
  width: var(--btn-height);
}

/* Primary: the one main action of a view. .btn-accent is the old name. */
.btn-primary,
.btn-accent {
  --bs-btn-color: var(--on-accent);
  --bs-btn-bg: var(--accent-fill);
  --bs-btn-border-color: var(--accent-fill);
  --bs-btn-hover-color: var(--on-accent);
  --bs-btn-hover-bg: var(--accent-fill-hover);
  --bs-btn-hover-border-color: var(--accent-fill-hover);
  --bs-btn-active-color: var(--on-accent);
  --bs-btn-active-bg: var(--accent-fill-hover);
  --bs-btn-active-border-color: var(--accent-fill-hover);
  --bs-btn-disabled-color: var(--on-accent);
  --bs-btn-disabled-bg: var(--accent-fill);
  --bs-btn-disabled-border-color: var(--accent-fill);
}

/* Secondary: every other action. The outline names are the old ones. */
.btn-secondary,
.btn-outline-light,
.btn-outline-secondary {
  --bs-btn-color: var(--text-primary);
  --bs-btn-bg: var(--bg-tint-1);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--text-primary);
  --bs-btn-hover-bg: var(--bg-tint-2);
  --bs-btn-hover-border-color: var(--border-accent);
  --bs-btn-active-color: var(--text-primary);
  --bs-btn-active-bg: var(--bg-tint-3);
  --bs-btn-active-border-color: var(--border-accent);
  --bs-btn-disabled-color: var(--text-secondary);
  --bs-btn-disabled-bg: var(--bg-tint-1);
  --bs-btn-disabled-border-color: var(--border-subtle);
}

/* Ghost: quiet actions and icon buttons such as a "more" menu */
.btn-ghost {
  --bs-btn-color: var(--text-secondary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--text-primary);
  --bs-btn-hover-bg: var(--bg-tint-2);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--text-primary);
  --bs-btn-active-bg: var(--bg-tint-3);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--text-muted);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
}

.btn-danger {
  --bs-btn-color: var(--on-danger);
  --bs-btn-bg: var(--danger-fill);
  --bs-btn-border-color: var(--danger-fill);
  --bs-btn-hover-color: var(--on-danger);
  --bs-btn-hover-bg: var(--danger-fill-hover);
  --bs-btn-hover-border-color: var(--danger-fill-hover);
  --bs-btn-active-color: var(--on-danger);
  --bs-btn-active-bg: var(--danger-fill-hover);
  --bs-btn-active-border-color: var(--danger-fill-hover);
  --bs-btn-disabled-color: var(--on-danger);
  --bs-btn-disabled-bg: var(--danger-fill);
  --bs-btn-disabled-border-color: var(--danger-fill);
}

.btn-discord {
  --bs-btn-color: var(--on-discord);
  --bs-btn-bg: var(--discord);
  --bs-btn-border-color: var(--discord);
  --bs-btn-hover-color: var(--on-discord);
  --bs-btn-hover-bg: var(--discord-hover);
  --bs-btn-hover-border-color: var(--discord-hover);
  --bs-btn-active-color: var(--on-discord);
  --bs-btn-active-bg: var(--discord-hover);
  --bs-btn-active-border-color: var(--discord-hover);
  --bs-btn-disabled-color: var(--on-discord);
  --bs-btn-disabled-bg: var(--discord);
  --bs-btn-disabled-border-color: var(--discord);
}

.btn-warning {
  --bs-btn-color: var(--on-warning);
  --bs-btn-bg: var(--warning-fill);
  --bs-btn-border-color: var(--warning-fill);
  --bs-btn-hover-color: var(--on-warning);
  --bs-btn-hover-bg: var(--warning-fill);
  --bs-btn-hover-border-color: var(--warning-fill);
  --bs-btn-active-color: var(--on-warning);
  --bs-btn-active-bg: var(--warning-fill);
  --bs-btn-active-border-color: var(--warning-fill);
  --bs-btn-disabled-color: var(--on-warning);
  --bs-btn-disabled-bg: var(--warning-fill);
  --bs-btn-disabled-border-color: var(--warning-fill);
}

.btn-warning:hover {
  filter: brightness(1.08);
}

/* Outline variants in a status colour; each sets its three tones below */
.btn-outline-primary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger {
  --bs-btn-color: var(--btn-tone);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--btn-tone-border);
  --bs-btn-hover-color: var(--btn-tone);
  --bs-btn-hover-bg: var(--btn-tone-bg);
  --bs-btn-hover-border-color: var(--btn-tone);
  --bs-btn-active-color: var(--btn-tone);
  --bs-btn-active-bg: var(--btn-tone-bg);
  --bs-btn-active-border-color: var(--btn-tone);
  --bs-btn-disabled-color: var(--btn-tone);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--btn-tone-border);
}

.btn-outline-primary {
  --btn-tone: var(--accent-text);
  --btn-tone-bg: var(--accent-tint-2);
  --btn-tone-border: var(--border-accent);
}

.btn-outline-success {
  --btn-tone: var(--success);
  --btn-tone-bg: var(--success-bg);
  --btn-tone-border: var(--success-border);
}

.btn-outline-warning {
  --btn-tone: var(--warning);
  --btn-tone-bg: var(--warning-bg);
  --btn-tone-border: var(--warning-border);
}

.btn-outline-danger {
  --btn-tone: var(--danger);
  --btn-tone-bg: var(--danger-bg);
  --btn-tone-border: var(--danger-border);
}

/* ═══════════════════════════════════════════ */
/* DIALOG                                      */
/* Bootstrap .modal markup, unchanged          */
/* ═══════════════════════════════════════════ */
.modal {
  --bs-modal-bg: var(--bg-secondary);
  --bs-modal-color: var(--text-primary);
  --bs-modal-border-color: var(--border-strong);
  --bs-modal-border-radius: var(--radius-lg);
  --bs-modal-inner-border-radius: calc(var(--radius-lg) - 1px);
  --bs-modal-header-border-color: var(--border-subtle);
  --bs-modal-footer-border-color: var(--border-subtle);
  --bs-modal-box-shadow: var(--shadow-lg);
  --bs-modal-zindex: var(--z-dialog);
}

/* ═══════════════════════════════════════════ */
/* TABS                                        */
/* .nav.nav-pills as segments; scrolls         */
/* sideways when the entries do not fit        */
/* ═══════════════════════════════════════════ */
.nav-pills {
  --bs-nav-link-color: var(--text-secondary);
  --bs-nav-link-hover-color: var(--text-primary);
  --bs-nav-link-padding-x: var(--space-16);
  --bs-nav-link-padding-y: var(--space-8);
  --bs-nav-link-font-size: var(--font-size-sm);
  --bs-nav-link-font-weight: 500;
  --bs-nav-pills-border-radius: var(--radius-sm);
  --bs-nav-pills-link-active-color: var(--text-primary);
  --bs-nav-pills-link-active-bg: var(--accent-tint-2);
  display: inline-flex;
  flex-wrap: nowrap;
  gap: var(--space-4);
  max-width: 100%;
  overflow-x: auto;
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-tint-1);
}

.nav-pills .nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  white-space: nowrap;
}

/* A counter in the active tab sits on three stacked tints; secondary text has 4.3:1 there */
.nav-pills .nav-link.active .chip {
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════ */
/* TOAST                                       */
/* showToast(message, type) in core/ui.js      */
/* ═══════════════════════════════════════════ */
.toast {
  --bs-toast-bg: var(--bg-secondary);
  --bs-toast-color: var(--text-primary);
  --bs-toast-border-color: var(--border-strong);
  --bs-toast-border-radius: var(--radius);
  --bs-toast-box-shadow: var(--shadow-md);
  --bs-toast-font-size: var(--font-size-sm);
  --toast-tone: var(--info);
  border-left: 3px solid var(--toast-tone);
}

.toast-container {
  --bs-toast-zindex: var(--z-toast);
}

.toast-success {
  --toast-tone: var(--success);
}

.toast-danger {
  --toast-tone: var(--danger);
}

.toast-warning {
  --toast-tone: var(--warning);
}

.toast-info {
  --toast-tone: var(--info);
}

.toast-icon {
  flex: none;
  color: var(--toast-tone);
  font-size: var(--font-size-lg);
}

/* ═══════════════════════════════════════════ */
/* CARD                                        */
/* .glass-card; reacts to hover only when it   */
/* can be clicked                              */
/* ═══════════════════════════════════════════ */
.glass-card {
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}

.glass-card[data-click],
a.glass-card,
.glass-card.is-clickable {
  cursor: pointer;
}

.glass-card[data-click]:hover,
a.glass-card:hover,
.glass-card.is-clickable:hover {
  background: var(--bg-glass-hover);
  border-color: var(--border-accent);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════ */
/* CHIP                                        */
/* .chip + .chip-<status>; old names:          */
/* .badge-pill, .category-pill,                */
/* .event-status-badge, .event-category-tag    */
/* ═══════════════════════════════════════════ */
.chip,
.badge-pill,
.category-pill,
.event-status-badge,
.event-category-tag {
  --chip-height: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  /* Height = one line (1.25em) + padding + 1px border on each side, so the text stays
     centred when a utility class such as d-inline-block overrides the display */
  padding: calc((var(--chip-height) - 2px - 1.25em) / 2) var(--space-12);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-tint-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}

.chip-sm,
.event-status-badge,
.event-category-tag {
  --chip-height: 1.375rem;
  padding-inline: var(--space-8);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.chip-success,
.badge-pill.status-accepted,
.event-status-active {
  border-color: var(--success-border);
  background: var(--success-bg);
  color: var(--success);
}

.chip-warning,
.badge-pill.status-pending,
.event-status-archived {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning);
}

.chip-danger,
.badge-pill.status-rejected {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger);
}

.chip-info,
.badge-pill.status-waitlisted,
.event-category-tag {
  border-color: var(--info-border);
  background: var(--info-bg);
  color: var(--info);
}

.chip-accent {
  border-color: var(--border-accent);
  background: var(--accent-tint-2);
  color: var(--accent-text);
}

/* Chips that filter: a <button class="chip"> or the old .category-pill */
button.chip,
.category-pill {
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
}

button.chip:hover,
.category-pill:hover {
  border-color: var(--border-accent);
  color: var(--text-primary);
}

button.chip.active,
.category-pill.active {
  border-color: var(--accent-fill);
  background: var(--accent-fill);
  color: var(--on-accent);
}

/* ═══════════════════════════════════════════ */
/* SKELETON                                    */
/* Placeholder while content loads             */
/* ═══════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, var(--bg-tint-1) 25%, var(--bg-tint-2) 50%, var(--bg-tint-1) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius);
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.skeleton-text {
  height: 1em;
  margin-bottom: var(--space-8);
  width: 100%;
}

.skeleton-text.is-short {
  width: 80%;
}

.skeleton-title {
  height: 1.5em;
  width: 70%;
  margin-bottom: var(--space-16);
}

.skeleton-img {
  width: 100%;
  height: 160px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.skeleton-chip {
  width: 60px;
  height: 24px;
  border-radius: var(--radius-pill);
}

.skeleton-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
}

/* Text part of a skeleton card: title and lines on top, chips at the bottom */
.skeleton-card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 200px;
}

/* ═══════════════════════════════════════════ */
/* EMPTY STATE                                 */
/* emptyState({ … }) in core/components.js     */
/* ═══════════════════════════════════════════ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-32) var(--space-16);
  text-align: center;
}

.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--accent-tint-2);
  color: var(--accent-text);
  font-size: var(--font-size-2xl);
}

.empty-state-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.empty-state-text {
  max-width: 34ch;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.empty-state .btn {
  margin-top: var(--space-8);
}

/* ═══════════════════════════════════════════ */
/* AVATAR                                      */
/* avatar({ url, name, size }) in              */
/* core/components.js; sizes 24, 36, 64, 96 px */
/* ═══════════════════════════════════════════ */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  object-fit: cover;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1;
}

.avatar-sm {
  width: 1.5rem;
  height: 1.5rem;
  font-size: var(--font-size-xs);
}

.avatar-lg {
  width: 4rem;
  height: 4rem;
  font-size: var(--font-size-2xl);
}

.avatar-xl {
  width: 6rem;
  height: 6rem;
  font-size: var(--font-size-3xl);
}

/* Shown instead of the image when there is none or it fails to load */
.avatar-initials {
  background: var(--accent-fill);
  color: var(--on-accent);
  user-select: none;
}

.avatar-stack {
  display: flex;
  align-items: center;
}

.avatar-stack .avatar {
  margin-left: calc(-1 * var(--space-8));
  border: 2px solid var(--bg-card);
}

.avatar-stack .avatar:first-child {
  margin-left: 0;
}

/* "+3" at the end of a stack */
.avatar-more {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

/* ═══════════════════════════════════════════ */
/* DATE TILE                                   */
/* renderDateTile(event, now) in               */
/* events/cards.js; .is-live while it runs     */
/* ═══════════════════════════════════════════ */
.date-tile {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 3.25rem;
  min-height: 3.75rem;
  padding: var(--space-4) 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-tint-1);
  line-height: 1.15;
  text-align: center;
}

.date-tile-weekday,
.date-tile-month {
  font-size: var(--font-size-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.date-tile-weekday {
  color: var(--text-muted);
}

.date-tile-month {
  color: var(--text-secondary);
}

.date-tile-day {
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: 700;
}

.date-tile.is-live {
  border-color: var(--danger-border);
  background: var(--danger-bg);
}

/* Muted text has too little contrast on the red tint */
.date-tile.is-live .date-tile-weekday {
  color: var(--text-secondary);
}

.date-tile.is-live .date-tile-day {
  color: var(--danger);
  font-size: var(--font-size-sm);
  letter-spacing: 0.06em;
}

/* ═══════════════════════════════════════════ */
/* CAPACITY                                    */
/* renderCapacity(event) in events/cards.js:   */
/* <progress> + label; .is-low from 80 %,      */
/* .is-full when no place is left              */
/* ═══════════════════════════════════════════ */
.capacity {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.capacity-meter {
  flex: 1 1 auto;
  min-width: 3rem;
  height: 0.25rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-tint-2);
  overflow: hidden;
  appearance: none;
}

.capacity-meter::-webkit-progress-bar {
  background: var(--bg-tint-2);
}

.capacity-meter::-webkit-progress-value {
  border-radius: var(--radius-pill);
  background: var(--accent-fill);
}

.capacity-meter::-moz-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--accent-fill);
}

.capacity-text {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.capacity.is-low .capacity-text {
  color: var(--warning);
  font-weight: 600;
}

.capacity.is-full .capacity-text {
  color: var(--danger);
  font-weight: 600;
}

.capacity.is-full .capacity-meter::-webkit-progress-value {
  background: var(--danger);
}

.capacity.is-full .capacity-meter::-moz-progress-bar {
  background: var(--danger);
}

/* ═══════════════════════════════════════════ */
/* DATA TABLE                                  */
/* A real <table>: sortable heads, cells with  */
/* a second line, sub-rows. Below 768 px every */
/* row is a block                              */
/* ═══════════════════════════════════════════ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text-primary);
  /* Heads inherit it, so .data-table-actions can turn its head to the right */
  text-align: left;
}

.data-table th {
  padding: var(--space-8) var(--space-12);
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.data-table td {
  padding: var(--space-12);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.data-table-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.data-table-sort:hover,
.data-table th[aria-sort="ascending"] .data-table-sort,
.data-table th[aria-sort="descending"] .data-table-sort {
  color: var(--text-primary);
}

/* Name of the row; a button, because it opens the row's main view */
.data-table-title {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: 600;
  text-align: left;
}

.data-table-title:hover {
  color: var(--accent-text);
  text-decoration: underline;
}

.data-table-meta {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.data-table-actions {
  text-align: right;
  white-space: nowrap;
}

.data-table-buttons {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.data-table tr.is-sub td {
  background: var(--bg-tint-1);
}

.data-table tr.is-sub td:first-child {
  padding-left: var(--space-48);
}

/* Muted by colour, never by opacity: opacity would put the row's menu behind the rows below */
.data-table tr.is-muted .data-table-title {
  color: var(--text-secondary);
}

/* A sub-row has no title; its first cell names it */
.data-table tr.is-sub.is-muted td:first-child {
  color: var(--text-secondary);
}

@media (max-width: 767.98px) {
  /* The heads stay for screen readers */
  .data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
  }

  .data-table tr {
    padding: var(--space-12) 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  .data-table td {
    padding: var(--space-4) 0;
    border-bottom: 0;
  }

  .data-table-actions {
    text-align: left;
  }

  /* As blocks the cells no longer line up, so the whole row is tinted and indented */
  .data-table tr.is-sub {
    padding-left: var(--space-16);
    background: var(--bg-tint-1);
  }

  .data-table tr.is-sub td {
    background: none;
  }

  .data-table tr.is-sub td:first-child {
    padding-left: 0;
  }
}

/* ═══════════════════════════════════════════ */
/* MENU                                        */
/* Bootstrap .dropdown-menu markup with        */
/* .dropdown-item, -header and -divider        */
/* ═══════════════════════════════════════════ */
.dropdown-menu {
  --bs-dropdown-bg: var(--bg-secondary);
  --bs-dropdown-border-color: var(--border-strong);
  --bs-dropdown-border-radius: var(--radius);
  --bs-dropdown-padding-x: var(--space-4);
  --bs-dropdown-padding-y: var(--space-4);
  --bs-dropdown-font-size: var(--font-size-sm);
  --bs-dropdown-link-color: var(--text-primary);
  --bs-dropdown-link-hover-color: var(--text-primary);
  --bs-dropdown-link-hover-bg: var(--bg-tint-2);
  --bs-dropdown-link-active-color: var(--text-primary);
  --bs-dropdown-link-active-bg: var(--accent-tint-2);
  --bs-dropdown-header-color: var(--text-muted);
  --bs-dropdown-divider-bg: var(--border-subtle);
  box-shadow: var(--shadow-lg);
}

.dropdown-item {
  border-radius: var(--radius-sm);
}

.dropdown-header {
  font-size: var(--font-size-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* The one entry that destroys something; it stands last, below a divider */
.dropdown-item.is-danger {
  color: var(--danger);
}

.dropdown-item.is-danger:hover,
.dropdown-item.is-danger:focus {
  background: var(--danger-bg);
  color: var(--danger);
}

/* ═══════════════════════════════════════════ */
/* START STATE                                 */
/* Markup carries no style attributes: the CSP */
/* forbids them (style-src-attr 'none')        */
/* ═══════════════════════════════════════════ */
/* Hidden until JS shows the element. Like the style attribute it replaces, the start
   state beats every rule that gives a component its display (.countdown, .sidebar-detail-row …)
   and loses to an inline style: element.style.display = 'block' still shows the element,
   showElement() in core/ui.js shows it in its own display type. :not() with an id that no
   element has lends the selector the weight of an id; an !important would also beat the
   inline style. Bootstrap's d-flex carries !important and beats this class: leave it out
   of the markup and let the script set the display. */
.is-hidden:not(#no-such-id) {
  display: none;
}

/* ═══════════════════════════════════════════ */
/* HELPERS                                     */
/* Small classes for what a style attribute    */
/* used to do                                  */
/* ═══════════════════════════════════════════ */
/* Icons that stand alone, larger than the text around them */
.icon-lg {
  font-size: var(--font-size-2xl);
}

.icon-xl {
  font-size: var(--font-size-3xl);
}

.icon-2xl {
  font-size: var(--font-size-4xl);
}

/* An element that is no button or link but reacts to a click */
.cursor-pointer {
  cursor: pointer;
}

/* Card on a hint of the accent colour: option groups of the event wizard, check-in */
.glass-card.is-tinted {
  background: var(--accent-tint-1);
}