/* The language dock, and what RTL needs that `dir` alone does not give.
 *
 * The dock sits bottom-left in LTR and bottom-right in RTL — the "outside" corner in both, so it
 * never lands under the AI chat launcher (bottom-right in LTR) and never covers a table's first
 * column. It is deliberately quiet until hovered: a control you use twice a year should not compete
 * with the numbers on the page.
 */

#langDock {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 9000;
  font-family: inherit;
}
/* In RTL the whole page mirrors, so a bottom-LEFT dock would land under the AI launcher that has
   mirrored into that corner. Keep the dock on the side the launcher is NOT on, in both directions,
   and lift it clear of the launcher's own footprint. */
html[dir="rtl"] #langDock { left: auto; right: 18px; bottom: 78px; }

#langDockBtn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px 8px 11px;
  border-radius: 999px;
  border: 1px solid var(--line, rgba(0, 0, 0, .1));
  background: var(--card, #fff);
  color: var(--ink, #1a1a1a);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06), 0 8px 28px rgba(0, 0, 0, .05);
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .18s, border-color .18s;
}
#langDockBtn:hover {
  transform: translateY(-1px);
  border-color: var(--accent, #b8763e);
  box-shadow: 0 3px 14px rgba(0, 0, 0, .09), 0 12px 34px rgba(0, 0, 0, .07);
}
#langDockBtn:active { transform: translateY(0); }

.lg-globe {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--accent, #b8763e);
  transition: transform .5s cubic-bezier(.2, .8, .3, 1);
}
#langDock.open .lg-globe { transform: rotate(180deg); }
.lg-cur { line-height: 1; }

#langDockMenu {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 0;
  min-width: 172px;
  padding: 6px;
  border-radius: 15px;
  border: 1px solid var(--line, rgba(0, 0, 0, .1));
  background: var(--card, #fff);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08), 0 18px 48px rgba(0, 0, 0, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(.97);
  transform-origin: bottom left;
  transition: opacity .16s, transform .18s cubic-bezier(.2, .8, .3, 1), visibility .18s;
}
html[dir="rtl"] #langDockMenu { left: auto; right: 0; transform-origin: bottom right; }
#langDock.open #langDockMenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

#langDockMenu button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink, #1a1a1a);
  font: inherit;
  font-size: 13px;
  text-align: start;
  cursor: pointer;
  transition: background .13s;
}
#langDockMenu button:hover { background: var(--hover, rgba(0, 0, 0, .045)); }
#langDockMenu button.on { color: var(--accent, #b8763e); font-weight: 650; }
.lg-native { flex: 1; }
.lg-code {
  font-size: 10.5px;
  letter-spacing: .06em;
  opacity: .5;
  font-weight: 600;
}
.lg-tick { font-size: 12px; }

/* ── Arabic typography ──────────────────────────────────────────────────────────────────────── */
/* A UI set in a Latin stack renders Arabic in whatever the OS falls back to, which is usually a
   thin, cramped face that looks broken next to the rest of the design. Naming the good system
   Arabic faces first fixes it with no webfont download. */
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea {
  font-family: "SF Arabic", "Geeza Pro", "Noto Naskh Arabic", "Segoe UI",
               "Dubai", "Tahoma", system-ui, -apple-system, sans-serif;
}
/* Arabic sits differently on the line than Latin — without this it reads cramped at UI sizes. */
html[lang="ar"] body { line-height: 1.72; letter-spacing: 0; }

/* ── what `dir=rtl` does NOT flip on its own ────────────────────────────────────────────────── */

/* Numbers, money, dates, IDs and codes stay left-to-right inside Arabic text, or a figure like
   "1,450.00" renders with its parts in the wrong order. */
html[dir="rtl"] .num,
html[dir="rtl"] .money,
html[dir="rtl"] .amount,
html[dir="rtl"] .kpi .v,
html[dir="rtl"] code,
html[dir="rtl"] time,
html[dir="rtl"] [data-num] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: inherit;
}

/* Tables: headers and cells align to the reading edge. */
html[dir="rtl"] table th,
html[dir="rtl"] table td { text-align: right; }
html[dir="rtl"] table th.num, html[dir="rtl"] table td.num,
html[dir="rtl"] table th[align="right"], html[dir="rtl"] table td[align="right"] {
  text-align: left;
  direction: ltr;
}

/* Directional glyphs point the wrong way once the page flips. */
html[dir="rtl"] .arrow-right,
html[dir="rtl"] .chev,
html[dir="rtl"] .sgo { transform: scaleX(-1); }

/* Charts are drawn LTR by their libraries; flipping them makes the axes lie. */
html[dir="rtl"] canvas,
html[dir="rtl"] .chart,
html[dir="rtl"] .chartjs-render-monitor { direction: ltr; }

/* Progress and meters fill from the reading edge. */
html[dir="rtl"] .bar > span,
html[dir="rtl"] .meter > span { float: right; }