/* ==========================================================================
   LANGUAGE TOGGLE
   ==========================================================================
   EN/RU language switcher. Placed top-right on all pages.

   Placement:
     - Auth pages: inside .auth-form-inner (white background)
     - Dashboard pages: fixed top-right corner
     - Dark sidebar pages: white text, transparent background

   Architecture:
     - CSS variables from pinta.css (var(--ink-*)) for light theme.
     - body.dark-sidebar overrides for admin/superadmin dark sidebars.
     - Form submit (POST) to /set-language with csrf_token.
   */

/* ─── Base layout ─────────────────────────────────────────────────────────── */
.lang-toggle-wrap {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 50;
  /* Subtle border + background makes toggle discoverable on white */
  border: 1px solid var(--ink-200);
  border-radius: var(--r);
  background: var(--ink-0);
  padding: 2px;
}

.lang-toggle-form {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* ─── Buttons ───────────────────────────────────────────────────────────────
   Explicit dark color on every state — never rely on parent inheritance.
   Base: dark gray (#525252). Hover: near-black. Active: black on light gray. */
.lang-toggle-btn {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 4px;
  color: var(--ink-500);          /* #525252 — always visible on white */
  transition: all 150ms;
  font-family: inherit;
}

.lang-toggle-btn:hover {
  color: var(--ink-900);          /* #0a0a0a — strong hover state */
  background: var(--ink-100);     /* #f5f5f5 — subtle hover bg */
}

.lang-toggle-btn.active {
  color: var(--ink-900);          /* #0a0a0a — strong active text */
  background: var(--ink-150);     /* #e5e5e5 — clear active bg */
}

/* Separator between EN | RU */
.lang-toggle-sep {
  color: var(--ink-200);          /* #d4d4d4 — subtle divider */
  font-size: 12px;
  user-select: none;
}

/* ─── Auth page variant ─────────────────────────────────────────────────────
   Auth pages have a white background — same light-theme tokens. */
.auth-lang-toggle .lang-toggle-btn {
  color: var(--ink-500);
}
.auth-lang-toggle .lang-toggle-btn:hover {
  color: var(--ink-900);
  background: var(--ink-100);
}
.auth-lang-toggle .lang-toggle-btn.active {
  color: var(--ink-900);
  background: var(--ink-150);
}

/* ─── Dark sidebar pages (admin / superadmin) ──────────────────────────────
   Toggle lives inside <main> (white bg) regardless of sidebar color.
   Use fixed position so it stays top-right over the main content area.
   Keep dark ink colors — white text would be invisible on the white main area. */
body.dark-sidebar .lang-toggle-wrap {
  position: fixed;
  top: 16px;
  right: 16px;
  border-color: var(--ink-200);
  background: var(--ink-0);
}