/* ===== H2Koi mobile app — script fonts + RTL mirror =====
   Loaded after main.css. Keyed off html[lang] / html[dir], both stamped on by
   i18n.js before Angular boots.

   Several rules carry !important: the templates place logos, chevrons and icon
   gaps with inline style attributes, and an inline style beats any selector
   without it. */

/* ---------- per-script font stacks ----------
   The app ships no webfonts (it is a phone app behind a login, so payload
   matters). The stack in main.css is Latin-only, so CJK, Thai and Arabic would
   otherwise land on whatever default the OS picks — usually a serif that
   clashes with the rest of the UI. */
html[lang="ja"] body { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans",
  "Yu Gothic", "Yu Gothic UI", Meiryo, "Noto Sans JP", -apple-system, sans-serif; }
html[lang="ko"] body { font-family: "Apple SD Gothic Neo", "Malgun Gothic",
  "Noto Sans KR", -apple-system, sans-serif; }
html[lang="zh"] body { font-family: "PingFang SC", "Hiragino Sans GB",
  "Microsoft YaHei", "Noto Sans SC", -apple-system, sans-serif; }
html[lang="th"] body { font-family: "Thonburi", "Leelawadee UI", "Noto Sans Thai",
  -apple-system, sans-serif; }
html[lang="ar"] body { font-family: "Geeza Pro", "Segoe UI", Tahoma,
  "Noto Naskh Arabic", "Noto Sans Arabic", -apple-system, sans-serif; }

/* Thai tone marks and Arabic descenders need more room than the Latin metrics
   the cards were spaced for. */
html[lang="th"] body, html[lang="ar"] body { line-height: 1.7; }

/* The screen titles are tracked out 2px. Arabic is cursive, so tracking breaks
   the joins; Thai has no word spaces, so it just reads as noise. */
html[lang="ar"] *, html[lang="th"] * { letter-spacing: normal !important; }

/* Bottom-tab labels are sized for six short Latin words. Non-Latin scripts
   render wider per glyph, and several of these languages have no one-word
   equivalent of "Trends" — so shrink the floor rather than let them clip. */
html[lang="ar"] .navbar-absolute-bottom .btn-group.justified > .btn,
html[lang="th"] .navbar-absolute-bottom .btn-group.justified > .btn,
html[lang="ru"] .navbar-absolute-bottom .btn-group.justified > .btn,
html[lang="pl"] .navbar-absolute-bottom .btn-group.justified > .btn,
html[lang="de"] .navbar-absolute-bottom .btn-group.justified > .btn,
html[lang="nl"] .navbar-absolute-bottom .btn-group.justified > .btn,
html[lang="id"] .navbar-absolute-bottom .btn-group.justified > .btn,
html[lang="fr"] .navbar-absolute-bottom .btn-group.justified > .btn,
html[lang="it"] .navbar-absolute-bottom .btn-group.justified > .btn,
html[lang="es"] .navbar-absolute-bottom .btn-group.justified > .btn {
  font-size: clamp(9px, 2.7vw, 13px);
}

/* ---------- RTL mirror (Arabic) ---------- */
html[dir="rtl"] body { direction: rtl; text-align: right; }

/* Screen-title bars: the logo is pinned with an inline `left:10px`. */
html[dir="rtl"] [ui-content-for="title"] > img,
html[dir="rtl"] .navbar-brand-center > img {
  left: auto !important;
  right: 10px !important;
}

/* Collapsible device headers: the chevron sits on the trailing edge. */
html[dir="rtl"] .status_online > span[style*="float"] { float: left !important; }

/* Icon gaps written inline as margin-right. */
html[dir="rtl"] .fa[style*="margin-right"] {
  margin-right: 0 !important;
  margin-left: 8px !important;
}
html[dir="rtl"] .pc-alert-head .pc-ic,
html[dir="rtl"] .pc-summary .pc-ic { margin-right: 0; margin-left: 8px; }

/* Setup walkthrough: the step list and its bullets. */
html[dir="rtl"] .setup-step { flex-direction: row; }
html[dir="rtl"] .setup-body { text-align: right; }
html[dir="rtl"] ul { padding-left: 0 !important; padding-right: 18px !important; }

/* Cards laid out with justify-content: space-between mirror themselves via
   `direction`, but the gauge column's inline margins do not. */
html[dir="rtl"] [style*="margin-left"][style*="color:#ddd"] {
  margin-left: 0 !important;
  margin-right: 8px !important;
}

/* Device IDs, MAC-ish addresses, versions, mm readings and "3m ago" stamps stay
   left-to-right inside Arabic text — otherwise the digits come out reversed. */
html[dir="rtl"] .setup-mono,
html[dir="rtl"] code,
html[dir="rtl"] .ltr {
  direction: ltr;
  unicode-bidi: embed;
  text-align: left;
}

/* Forms and the language picker itself. */
html[dir="rtl"] .form-control,
html[dir="rtl"] select.btn { text-align: right; }

/* The login ticker scrolls right-to-left by translating -100%. Under RTL the
   text starts at the right edge already, so the same animation walks it further
   off-screen instead of across. Run it the other way. */
html[dir="rtl"] .login-ticker-inner {
  padding-left: 0;
  padding-right: 100%;
  animation-name: h2koi-ticker-rtl;
}
@keyframes h2koi-ticker-rtl {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}