/* ============================================================
   i18n.css — language picker + direction handling.

   Imported once from app.css, so every page that already loads
   app.css gets it for free.

   Two jobs:
     1. Style the language switcher component.
     2. Hold the direction-aware rules, keyed off <html dir>, which
        i18n.js sets from the active locale's `dir` in index.json.

   The app ships English (ltr) and Arabic (rtl); see
   assets/i18n/index.json. Everything below the switcher block is
   live for `ar`, so treat it as load-bearing, not as a stub.
   ============================================================ */

/* ══ LANGUAGE SWITCHER ═══════════════════════════════════════ */
.lang-switch {
  position: relative;
  display: inline-flex;
}

.lang-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  padding: 6px 10px;
  border-radius: var(--r-sm, 8px);
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.08));
  background: var(--bg-elevated, rgba(14, 24, 44, 0.8));
  color: var(--text-secondary, #c1cbdb);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.lang-switch-btn:hover,
.lang-switch-btn[aria-expanded="true"] {
  color: var(--text-primary, #e8eaed);
  border-color: var(--border-focus, rgba(24, 128, 192, 0.38));
  background: var(--brand-dim, rgba(24, 128, 192, 0.1));
}

.lang-switch-btn:focus-visible {
  outline: 2px solid var(--border-strong, rgba(24, 128, 192, 0.55));
  outline-offset: 2px;
}

.lang-switch--compact .lang-switch-btn {
  padding: 6px;
  border-color: transparent;
  background: none;
}

.lang-switch-label {
  white-space: nowrap;
}

.lang-switch-menu {
  position: absolute;
  /* Logical properties, not left/right: the menu then anchors to the
     inline-start edge in both directions with no RTL override. */
  inset-inline-start: 0;
  inset-block-end: calc(100% + 6px);
  z-index: 1000;
  display: none;
  min-width: 168px;
  padding: 4px;
  border-radius: var(--r-md, 12px);
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.08));
  background: var(--bg-surface, rgba(9, 16, 30, 0.98));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  backdrop-filter: var(--glass-blur);
}

.lang-switch-menu.open {
  display: block;
}

/* Opens downward when the trigger sits in a page header rather than a
   bottom bar. Add data-language-switcher-drop="down" on the placeholder. */
[data-language-switcher-drop="down"] .lang-switch-menu {
  inset-block-end: auto;
  inset-block-start: calc(100% + 6px);
}

.lang-switch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3, 12px);
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--r-sm, 8px);
  color: var(--text-secondary, #c1cbdb);
  font-size: 0.84rem;
  text-align: start;
  transition: background 0.14s ease, color 0.14s ease;
}

.lang-switch-item:hover {
  background: var(--brand-dim, rgba(24, 128, 192, 0.1));
  color: var(--text-primary, #e8eaed);
}

.lang-switch-item.active {
  color: var(--brand-light, #2a9ad6);
  font-weight: 600;
}

.lang-switch-check {
  display: inline-flex;
  width: 14px;
}

/* ══ DIRECTION ═══════════════════════════════════════════════
   Global flips that apply to any RTL locale. Per-component RTL
   polish belongs in that component's own stylesheet, next to the
   LTR rules it mirrors — keeping it here would split every layout
   across two files.
   ═══════════════════════════════════════════════════════════ */

/* ── The direction multiplier ──────────────────────────────────
   `direction` mirrors the box model (inset-inline-*, margin-inline-*,
   text-align:start) but it does NOT mirror `transform`: translateX(-10px)
   moves left in both directions. Anything anchored with a logical
   property and then moved with a transform therefore disagrees with
   itself under RTL — an off-canvas drawer pinned to inset-inline-start
   ends up parked *on* screen, and a toggle knob slides out of its track.

   Multiply every direction-dependent translateX by this token instead of
   writing a [dir="rtl"] twin for each one. Twins are a specificity trap
   here: the closed-drawer selectors carry attribute qualifiers, so an
   `[dir="rtl"]` twin can outrank the open-state rule and wedge the drawer
   shut. A custom property is resolved before the cascade picks a winner,
   so the open state stays a plain translateX(0) and always wins.

   Always write it as var(--dir, 1): pages/dashboard/prince.html loads
   admin.css without app.css, so the token is absent there and the
   fallback keeps LTR behaviour intact. */
:root        { --dir:  1; }
[dir="rtl"]  { --dir: -1; }

[dir="rtl"] body {
  text-align: right;
}

/* Glyphs that encode direction (arrows, chevrons, send, back) must
   mirror; glyphs that encode identity (logos, avatars, brand marks,
   media controls) must not. Opt in per icon with .i18n-flip. */
[dir="rtl"] .i18n-flip {
  transform: scaleX(-1);
}

/* Numbers, code, IDs and money stay left-to-right inside RTL text —
   otherwise a leading '+' or '$' jumps to the wrong end. */
[dir="rtl"] .i18n-ltr,
[dir="rtl"] code,
[dir="rtl"] pre,
[dir="rtl"] [type="tel"],
[dir="rtl"] [type="email"],
[dir="rtl"] [type="url"] {
  direction: ltr;
  text-align: left;
}

/* Pages without a sidebar (auth, legal, 404) have nowhere to host the
   picker, so it floats in the top inline-end corner. `hidden` in the markup
   keeps it out of the layout until the component decides there is more than
   one language to offer. */
.lang-switch-floating {
  position: fixed;
  inset-block-start: var(--sp-4, 16px);
  inset-inline-end: var(--sp-4, 16px);
  z-index: 900;
}

.lang-switch-floating[hidden] {
  display: none;
}