/*
 * Command Center, taalmenu (REQ 000, taalmenu/i18n).
 *
 * Bewust rustig en klein: een enkele knop met vlag + taalcode, een dropdown-paneel dat pas
 * verschijnt na een klik. Geen grote vlaggenrij, geen kleurige badges, past zich aan de bestaande
 * skin-tokens (tokens.css/skins/*.css) aan zodat het niet als vreemd element oogt naast de rest
 * van de ui2-header/shell-header. Hetzelfde blokje (i18n.js bouwt het identiek op) staat op elke
 * pagina, vandaar één stijl hier in plaats van per pagina losse CSS.
 */

.i18n-lang-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.i18n-lang-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.6em;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--color-border, rgba(127, 127, 127, 0.35));
  background: var(--color-bg-secondary, transparent);
  color: var(--color-text-primary, inherit);
  font: inherit;
  font-size: 0.85em;
  line-height: 1;
  cursor: pointer;
}

.i18n-lang-switcher-btn:hover {
  background: var(--color-bg-hover, rgba(127, 127, 127, 0.12));
}

.i18n-lang-switcher-btn:focus-visible {
  outline: 2px solid var(--color-accent, #4a90d9);
  outline-offset: 2px;
}

.i18n-flag {
  font-size: 1.05em;
  line-height: 1;
}

.i18n-lang-code {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.i18n-lang-switcher-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  list-style: none;
  margin: 0;
  padding: 0.3em;
  min-width: 10.5em;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--color-border, rgba(127, 127, 127, 0.35));
  background: var(--color-bg-primary, #fff);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.i18n-lang-option {
  display: flex;
  align-items: center;
  gap: 0.55em;
  width: 100%;
  padding: 0.4em 0.6em;
  border: none;
  background: none;
  border-radius: var(--radius-xs, 4px);
  color: var(--color-text-primary, inherit);
  font: inherit;
  font-size: 0.88em;
  text-align: left;
  cursor: pointer;
}

.i18n-lang-option:hover {
  background: var(--color-bg-hover, rgba(127, 127, 127, 0.12));
}

.i18n-lang-option.is-active {
  font-weight: 600;
  background: var(--color-bg-selected, rgba(74, 144, 217, 0.14));
}

.i18n-lang-name {
  flex: 1;
}

/* Op de standalone-pagina's (console.html/tickets.html) staat de switcher in de bestaande
   shell-header-actions-rij; hier alleen de afstand tot buren, geen eigen kleurenschema. */
.shell-header-actions .i18n-lang-switcher {
  margin-left: 0.5em;
}