/*!
 * Bootstrap Icons subset — only icons used by foos-live
 * Bootstrap Icons v1.11.3 (https://icons.getbootstrap.com/)
 * Copyright 2019-2024 The Bootstrap Authors — MIT License
 */
@font-face {
  font-family: "Nimbus Sans Narrow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/nimbus-sans-narrow-regular.otf") format("opentype");
}
@font-face {
  font-family: "Nimbus Sans Narrow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/nimbus-sans-narrow-bold.otf") format("opentype");
}

@font-face {
  font-display: block;
  font-family: bootstrap-icons;
  src: url("fonts/bootstrap-icons.woff2") format("woff2");
}

.bi::before,
[class*=" bi-"]::before,
[class^=bi-]::before {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: 400 !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bi-arrow-clockwise::before { content: "\f116"; }
.bi-arrow-left-right::before{ content: "\f12b"; }
.bi-chevron-up::before      { content: "\f286"; }
.bi-clipboard::before       { content: "\f290"; }
.bi-lock::before            { content: "\f47b"; }
.bi-lock-fill::before       { content: "\f47a"; }
.bi-pencil-square::before   { content: "\f4ca"; }
.bi-stars::before           { content: "\f589"; }
.bi-table::before           { content: "\f5aa"; }
.bi-trash::before           { content: "\f5de"; }
.bi-unlock::before          { content: "\f600"; }
.bi-upload::before          { content: "\f603"; }

/* ── Colour system ─────────────────────────────────────────────────────────── */
/* --hue, --saturation, --lightness and --primary-text are injected per-page   */
/* via a <style> block in the <head> generated by Rust template handlers.       */
:root {
  --color-primary:     hsl(var(--hue), var(--saturation), var(--lightness));
  --color-dark:        hsl(var(--hue), calc(var(--saturation) * 0.2),  calc(var(--lightness) * 0.15));
  --color-dark-alt:    hsl(var(--hue), calc(var(--saturation) * 0.2),  calc(var(--lightness) * 0.2));
  --color-dark-accent: hsl(var(--hue), calc(var(--saturation) * 0.4), calc(var(--lightness) * 0.5));
  --color-text-muted:  hsl(var(--hue), calc(var(--saturation) * 0.15), calc(var(--lightness) * 1.3));
  --color-light:       white;
}

/* ── Resets ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }

/* ── Tom Select ─────────────────────────────────────────────────────────────── */
/* Hide native selects before TomSelect initialises to prevent flicker.        */
select[data-ts],
select[data-ts-sb],
select[data-ts-dialog] { display: none; }
.ts-wrapper .ts-control {
  background: var(--color-dark-alt);
  border: 1px solid var(--color-dark-accent);
  border-radius: var(--radius);
  color: var(--text);
  min-height: 38px;
  padding: 3px 8px;
  box-shadow: none;
  cursor: text;
  gap: 4px;
}
.ts-wrapper.focus .ts-control {
  border-color: var(--color-primary);
  box-shadow: none;
}
.ts-wrapper .ts-control input {
  color: var(--text);
  background: transparent;
  line-height: 1.5;
  font-size: 14px;
  font-family: var(--font);
}
.ts-wrapper .ts-control input::placeholder {
  color: var(--text-muted);
}
/* Chips */
.ts-wrapper.multi .ts-control > .item {
  background: var(--color-primary);
  color: var(--primary-text);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 3px;
}
.ts-wrapper.multi .ts-control > .item.active {
  background: var(--color-primary);
  color: var(--primary-text);
}
.ts-wrapper.multi .ts-control > .item .remove {
  color: inherit;
  opacity: 0.65;
  border-left: none;
}
.ts-wrapper.multi .ts-control > .item .remove:hover {
  opacity: 1;
  background: transparent;
  color: inherit;
}
/* Tag decorators */
.ts-wrapper .item .item-text::after,
.ts-wrapper .item .item-text::before {
  color: var(--text);
  font-size: 0.8em;
  font-weight: bold;
  vertical-align: text-bottom;
}
.ts-wrapper .item.item-group-global .item-text::after {
  content: ' (global)';
}
.ts-wrapper .item.item-group-source .item-text::before,
.ts-wrapper .item.item-group-placeholder .item-text::before {
  content: '{ ';
}
.ts-wrapper .item.item-group-source .item-text::after,
.ts-wrapper .item.item-group-placeholder .item-text::after {
  content: ' }';
}
/* Dropdown */
.ts-dropdown {
  background: var(--color-dark-alt);
  border: 1px solid var(--color-dark-accent);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  color: var(--text);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 100;
}
.ts-dropdown .ts-dropdown-content {
  padding: 4px 0;
}
.ts-dropdown .option {
  color: var(--text);
  padding: 6px 10px;
  font-size: 14px;
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background: var(--color-dark-alt);
  color: var(--text);
}
.ts-dropdown .option.selected {
  color: var(--color-primary);
}
.ts-dropdown .create {
  color: var(--color-primary);
  padding: 6px 10px;
  font-size: 14px;
}
.ts-dropdown .create:hover,
.ts-dropdown .create.active {
  background: var(--color-dark-alt);
}
.ts-dropdown .no-results {
  color: var(--text-muted);
  padding: 6px 10px;
  font-size: 13px;
}
.ts-dropdown .optgroup-header {
  color: var(--text-muted);
  background: var(--color-dark-alt);
  cursor: default;
  border-top: 1px solid var(--color-dark-accent);
}
.ts-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none;
}

