/*
 * rtl.css — first-pass right-to-left overrides for Arabic (langcode 'ar').
 *
 * Loaded by the layout ONLY when <html dir="rtl"> is set (i.e. Arabic). Arabic ships with
 * bg_languages.active = 0, so this stylesheet affects no live language until Arabic is activated.
 *
 * Every rule is scoped under html[dir=rtl] so it outranks the unscoped element-level <style>
 * blocks that sideNav/header/footer render in the <body> (which would otherwise win on source
 * order). A few inline style="" floats need !important to override.
 *
 * SCOPE OF THIS PASS: global direction flip + the main shell chrome (sidebar, footer, language
 * switcher, directional icons) + the header form block. NOT yet covered — needs in-browser QA
 * before activation: the inline-styled header button cluster, the Bootstrap-3 grid (no RTL build),
 * dashboard/report tables, and per-game HTML chrome. See PR notes.
 */

/* ── 1. Global direction ─────────────────────────────────────────────────────
   Flips text alignment, inline-block flow, list markers, default form-field
   alignment and table column order automatically. Highest-value single rule. */
html[dir=rtl] body { direction: rtl; text-align: right; }

/* Arabic-capable font stack (Cairo is loaded by the layout for RTL). */
html[dir=rtl] body,
html[dir=rtl] button,
html[dir=rtl] input,
html[dir=rtl] textarea,
html[dir=rtl] select { font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif; }

/* ── 2. Sidebar (app/View/Elements/sideNav.ctp) ──────────────────────────────
   The sidebar is intentionally NOT mirrored for Arabic — it stays on the left,
   identical to every other language. (It is slated for removal; mirroring it is
   not worth the RTL fiddliness.) Forcing the whole subtree back to LTR makes the
   icons, padding, toggles and language switcher fall back to their normal layout,
   and leaving the body padding-left from sideNav.ctp untouched keeps the content
   offset on the correct side. The page content itself stays RTL (section 1). */
html[dir=rtl] #bgSideNav { direction: ltr; text-align: left; }

/* ── 3. Header form block (app/View/Elements/headerv4.ctp) ────────────────────
   The slide-in login/account panel is pinned right; mirror it to the left. */
html[dir=rtl] .headerFormBlock {
    right: auto; left: 0;
    border-radius: 0 0 10px 0;
    box-shadow: 5px 5px 20px 10px #3d3d3d3d;
}
html[dir=rtl] .right-inner-addon span { right: auto; left: 15px; }

/* ── 4. Footer (app/View/Elements/footerv5.ctp) ──────────────────────────────
   Text + the inline link separators flip to the right edge. */
html[dir=rtl] footer { text-align: right; }
html[dir=rtl] footer a {
    border-left: none;
    border-right: 1px solid rgba(255,255,255,0.75);
    padding-left: 0; padding-right: 5px;
}
html[dir=rtl] footer a:first-child { border: none; padding: 0; }

/* ── 5. Directional icons ────────────────────────────────────────────────────
   Mirror chevrons/arrows that imply next/back/forward so they point the RTL way.
   Glyphicon fonts render the glyph in ::before, so mirror that. */
html[dir=rtl] .glyphicon-chevron-right::before,
html[dir=rtl] .glyphicon-chevron-left::before,
html[dir=rtl] .glyphicons.chevron-right::before,
html[dir=rtl] .glyphicons.chevron-left::before {
    display: inline-block;
    transform: scaleX(-1);
}
