/* =============================================================================
   components.css — Shared UI components for all dida.dk pages
   Uses --accent, --accent-hover, --accent-subtle from tokens.css.
   Poll uses green as accent, agenda uses teal.

   NB: .hi, .btn*, .text-input, .page*, .join-*, .code-*, .my-*, .name-field og
   .divider er IKKE defineret her — de ejes af rolig.css (det aktuelle
   designsystem, se DESIGN.md). De lå tidligere duplikeret her med ældre
   værdier, og fordi components.css altid loades EFTER rolig.css, vandt den
   forældede version stille og roligt på enhver side der loadede begge filer
   (fx viste .my-header-row/.my-title sig igen, selvom rolig.css bevidst har
   skjult dem — "header ligger nu i drawer-hd"). Tilføj ALDRIG disse klasser
   her igen; ret i stedet rolig.css, som er den ene sandhed.
   ============================================================================= */

/* Amber button (used for "come here" in help queue) */
.btn-amber {
  background: light-dark(oklch(0.75 0.17 75), oklch(0.4 0.12 75));
  color: light-dark(oklch(0.2 0.05 75), oklch(0.95 0.03 75));
  &:hover { background: light-dark(oklch(0.7 0.17 75), oklch(0.45 0.14 75)); }
}

.btn-large { font-size: var(--step-1); padding: var(--space-m) var(--space-xl); width: 100%; }


/* ─── Text input (large variant — .text-input itself lives in rolig.css) ─── */

.text-input-large {
  font-size: var(--step-0) !important;
  font-weight: 600;
}


/* ─── Toggle-switch ─── */
/* Markup: <label class="toggle-switch"><input type="checkbox"><span class="toggle-track"></span></label> */

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;

  & input { opacity: 0; width: 0; height: 0; position: absolute; }

  & .toggle-track {
    position: absolute;
    inset: 0;
    background: light-dark(oklch(0.8 0.02 240), oklch(0.35 0.02 240));
    border-radius: var(--radius-full);
    transition: background 0.2s;
    cursor: pointer;

    &::before {
      content: '';
      position: absolute;
      inset-block-start: 2px;
      inset-inline-start: 2px;
      width: 20px;
      height: 20px;
      background: oklch(1 0 0);
      border-radius: 50%;
      transition: transform 0.2s;
      box-shadow: 0 1px 3px oklch(0 0 0 / 10%);
    }
  }

  & input:checked + .toggle-track {
    background: var(--accent);
    &::before { transform: translateX(20px); }
  }
}

/* ─── Toggle-row ─── */

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-s);
  padding: var(--space-2xs) 0;
}

.toggle-label { font-weight: 500; }

/* ─── Toggle description text ─── */

.toggle-desc {
  color: var(--muted);
  font-size: var(--step--2);
  margin-block-start: 0.1rem;
}

/* ─── Settings card (shared) ─── */

.settings-card {
  background: var(--card);
  border-radius: var(--radius-l);
  padding: var(--space-m);
  box-shadow: var(--shadow-s);
}

.settings-card-title {
  font-size: var(--step--2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-block-end: var(--space-m);
}


/* ─── Create topbar (shared by poll + dagsorden create pages) ─── */

.create-topbar {
  display: flex;
  align-items: center;
  padding: var(--space-s) var(--space-m);
  border-block-end: 1px solid var(--border);
  background: var(--card);
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  gap: var(--space-s);
}

.create-topbar-left {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.create-topbar-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--radius-s);
  text-decoration: none;
  color: light-dark(oklch(0.45 0.02 260), oklch(0.65 0.02 240));
  font-size: var(--step-1);
  transition: background 0.15s, color 0.15s;
  margin-inline-end: var(--space-xs);
  cursor: pointer;

  &:hover { background: var(--accent-subtle); color: var(--accent); }
  &:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}

.create-topbar-spacer { flex: 1; }

.create-topbar-center {
  display: flex;
  align-items: center;
}

.create-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.create-topbar-badge {
  font-size: var(--step--1);
  font-weight: 600;
  background: var(--accent-subtle);
  color: var(--accent);
  padding: 0.15em 0.5em;
  border-radius: var(--radius-full);
}

.create-topbar-title {
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--muted);
}

/* "Mine X" dropdown in topbar */
.create-topbar-dropdown {
  position: relative;
}

.create-topbar-dropdown-btn {
  padding: 0.5rem 0.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  font-family: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4em;
  transition: all 0.15s;
  box-shadow: var(--shadow-s);
  white-space: nowrap;

  &:hover { box-shadow: var(--shadow-m); }
}

.create-topbar-dropdown-btn .toggle-arrow {
  font-size: 0.75em;
  transition: transform 0.15s;
}

.create-topbar-dropdown-content {
  position: absolute;
  inset-block-start: calc(100% + 0.35rem);
  inset-inline-end: 0;
  min-inline-size: 280px;
  max-inline-size: 380px;
  max-block-size: 50vh;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-hover);
  z-index: 200;
  padding: var(--space-xs);

  &::-webkit-scrollbar { width: 6px; }
  &::-webkit-scrollbar-track { background: transparent; }
  &::-webkit-scrollbar-thumb {
    background: oklch(0.75 0.02 155 / 40%);
    border-radius: var(--radius-full);
  }
}

/* Topbar start button: only visible on mobile (sidebar hidden) */
@media (min-width: 900px) {
  .create-topbar-right { display: none; }
}


/* =============================================================================
   SSE reconnect banner — vises til brugere når SSE-forbindelsen er nede.
   Bruges af dagsorden/live.html og poll/results.html via connectSSE() i
   /lib/sse-connect.js. Start med hidden-attribut i HTML — JS fjerner/tilføjer.
   ============================================================================= */
.conn-banner {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-m);
  background: oklch(0.75 0.17 75 / 15%);
  color: light-dark(oklch(0.45 0.12 75), oklch(0.75 0.14 75));
  font-size: var(--step--1);
  font-weight: 600;
  border-radius: var(--radius-full);
  margin-block: var(--space-xs);

  &[hidden] { display: none; }
}