/* ===== H2Koi desktop console — script fonts + RTL mirror =====
   Loaded after app.css and h2koi-theme.css, so these overrides win.
   Keyed off html[lang] / html[dir], both set by scripts/i18n.js. */

/* ---------- per-script font stacks ----------
   The console ships no webfonts (it sits behind a login, so page weight
   matters more than typographic control). Roboto carries no CJK, Thai or
   Arabic glyphs at all, so each of those scripts needs the platform face
   listed ahead of it or the browser falls back to something arbitrary —
   usually a serif that clashes with everything else on the page. */
html[lang="ja"] body, html[lang="ja"] .navside, html[lang="ja"] .navbar {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Yu Gothic UI", Meiryo, "Noto Sans JP", "Roboto", sans-serif;
}
html[lang="ko"] body, html[lang="ko"] .navside, html[lang="ko"] .navbar {
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR",
    "Roboto", sans-serif;
}
html[lang="zh"] body, html[lang="zh"] .navside, html[lang="zh"] .navbar {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans SC", "Roboto", sans-serif;
}
html[lang="th"] body, html[lang="th"] .navside, html[lang="th"] .navbar {
  font-family: "Thonburi", "Leelawadee UI", "Noto Sans Thai", "Roboto", sans-serif;
}
html[lang="ar"] body, html[lang="ar"] .navside, html[lang="ar"] .navbar {
  font-family: "Geeza Pro", "Segoe UI", Tahoma, "Noto Naskh Arabic",
    "Noto Sans Arabic", "Roboto", sans-serif;
}

/* Thai and Arabic have taller/looser glyph bodies than Latin; the theme's
   tight line-heights clip descenders and Thai tone marks. */
html[lang="th"] body, html[lang="ar"] body { line-height: 1.7; }

/* Arabic is cursive: letter-spacing pulls joined letters apart. The theme
   spaces the header chips and page titles, so undo it for Arabic only.
   (Thai has no word spaces, so tracking there is just as wrong.) */
html[lang="ar"] *, html[lang="th"] * { letter-spacing: normal !important; }

/* ---------- length, not just script ----------
   The header's branding chip holds a whole sentence ("KOI POND MONITORING AND
   AUTOMATION PLATFORM"). German renders that as ÜBERWACHUNGS- UND AUTOMATISIE-
   RUNGSPLATTFORM FÜR KOITEICHE — half again as wide. The chip sits in an
   absolutely-positioned overlay with an opaque background, so once it is that
   long it paints straight over the language picker and hides it.

   The theme already hides the chip below 1200px, but that threshold was measured
   against the English string; a longer language collides while still "wide
   enough". Cap the chip instead, so the rule is about the text, not the window.

   The cap has two terms. 40vw keeps the chip from dominating a wide window.
   The calc is the one that actually protects the controls: the bar is centred,
   so half of any extra width travels right, and 1000px is the measured cost of
   the crest+wordmark lockup plus the picker and Logout button. Measured live at
   1280px, where an uncapped Japanese chip overlapped the picker by 42px; this
   leaves 24px of clearance and still clears at 1400/1600/1920. */
.hk-title-chip:not(.accent) {
  max-width: min(40vw, calc(100vw - 1000px));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(13px, 1.3vw, 20px);
}
/* The tagline under the login logo is tracked out and centred; the longer
   languages wrap to two lines and the tracking makes the second line look
   detached. Tighten it once it has to wrap. */
.hk-login-tagline { letter-spacing: .06em; }
html[lang="de"] .hk-login-tagline,
html[lang="nl"] .hk-login-tagline,
html[lang="pl"] .hk-login-tagline,
html[lang="ru"] .hk-login-tagline,
html[lang="fr"] .hk-login-tagline { letter-spacing: .02em; }

/* ---------- RTL mirror (Arabic) ----------
   app.css is a LTR Bootstrap 4-alpha theme with no RTL build, so the layout
   is mirrored here rather than by swapping stylesheets. Only the rules that
   actually place something on a side are flipped — the grid and flex rows
   follow `direction` on their own. */
html[dir="rtl"] body { direction: rtl; text-align: right; }

/* Sidebar to the right, content margin with it. */
html[dir="rtl"] .app-aside { float: right; }
html[dir="rtl"] .app-aside .left { right: auto; left: 0; }
html[dir="rtl"] .hide-scroll { margin-right: 0; margin-left: -17px; }

@media (min-width: 992px) {
  html[dir="rtl"] .app-aside:not(.hide) ~ .app-content { margin-left: 0; margin-right: 12.5rem; }
  html[dir="rtl"] .app-aside.lg:not(.hide) ~ .app-content { margin-left: 0; margin-right: 13.75rem; }
  html[dir="rtl"] .app-aside.sm:not(.hide) ~ .app-content { margin-left: 0; margin-right: 11.25rem; }
  html[dir="rtl"] .app-aside.folded:not(.hide) ~ .app-content { margin-left: 0; margin-right: 4rem; }
  html[dir="rtl"] .app-aside.folded.md:not(.hide) ~ .app-content { margin-left: 0; margin-right: 5rem; }
}

/* Bootstrap float utilities. These carry !important, so the overrides must too. */
html[dir="rtl"] .pull-left  { float: right !important; }
html[dir="rtl"] .pull-right { float: left  !important; }
html[dir="rtl"] .text-left  { text-align: right !important; }
html[dir="rtl"] .text-right { text-align: left  !important; }

/* Directional spacing utilities used throughout the app shell. */
html[dir="rtl"] .m-l,    html[dir="rtl"] .m-l-sm,  html[dir="rtl"] .m-l-md  { margin-left: 0; }
html[dir="rtl"] .m-r,    html[dir="rtl"] .m-r-sm,  html[dir="rtl"] .m-r-md  { margin-right: 0; }
html[dir="rtl"] .m-l    { margin-right: 1rem; }
html[dir="rtl"] .m-l-sm { margin-right: .5rem; }
html[dir="rtl"] .m-l-md { margin-right: 1.5rem; }
html[dir="rtl"] .m-r    { margin-left: 1rem; }
html[dir="rtl"] .m-r-sm { margin-left: .5rem; }
html[dir="rtl"] .m-r-md { margin-left: 1.5rem; }

/* Nav items: the active marker and the icon sit on the leading edge. */
html[dir="rtl"] .navside .nav > li > a { text-align: right; }
html[dir="rtl"] .nav-active-border > li > a:before,
html[dir="rtl"] .navside .nav li.active > a:before { left: auto; right: 0; }
html[dir="rtl"] .nav-icon, html[dir="rtl"] .navside .nav .nav-icon { margin-right: 0; margin-left: .5rem; }
html[dir="rtl"] .nav-caret, html[dir="rtl"] .navside .nav .nav-caret { margin-left: 0; margin-right: auto; }

/* Tables and forms read from the right. */
html[dir="rtl"] .table th, html[dir="rtl"] .table td { text-align: right; }
html[dir="rtl"] .form-control { text-align: right; }
/* Material float-labels are pinned with `left: 0`, which parks the Arabic label
   at the far end of its own field. */
html[dir="rtl"] .md-input ~ label { left: auto; right: 0; }
html[dir="rtl"] .md-input { text-align: right; }
html[dir="rtl"] .md-input-msg.right { right: auto; left: 0; }
html[dir="rtl"] .input-group > .input-group-addon:first-child { border-radius: 0 .25rem .25rem 0; }
html[dir="rtl"] .input-group > .input-group-addon:last-child  { border-radius: .25rem 0 0 .25rem; }

/* Dropdowns and modals open toward the leading edge. */
html[dir="rtl"] .dropdown-menu { left: auto; right: 0; text-align: right; }
html[dir="rtl"] .modal-header .close { float: left; }

/* Numbers, device IDs, coordinates and timestamps stay left-to-right inside
   Arabic prose — otherwise "10 seconds" and "-82.4571" come out reversed. */
html[dir="rtl"] .ltr,
html[dir="rtl"] code, html[dir="rtl"] pre, html[dir="rtl"] .setup-mono {
  direction: ltr;
  unicode-bidi: embed;
  text-align: left;
}

/* The language picker itself always reads in its own item's direction. */
html[dir="rtl"] select.form-control { text-align: right; }