/* ==========================================================================
   Right-to-left - loaded only in Arabic mode (see includes/i18n.php)

   Deliberately small. The pages are written left-to-right in about forty
   stylesheets; this file does not rewrite them, it fixes what a flipped page
   gets wrong. A rule here is added because a real page looked wrong, not
   because it might: a broad `td { text-align: right }` would beat every
   centred cell in the system.

   Selectors start with html[dir="rtl"] so they outrank a page's own plain
   class selectors whichever order the stylesheets load in.
   ========================================================================== */

/* The page stays hidden until the translator has run, so nobody sees English
   flash into Arabic. A timer in the page's head shows it regardless after a
   moment, so a script that fails to load never leaves a blank screen. */
html.mlc-ar:not(.mlc-ready) body { visibility: hidden; }

/* An Arabic-capable face in front of the pages' own. Only on text elements:
   a rule on * would replace the icon fonts too. */
html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] button {
    font-family: 'Segoe UI', Tahoma, 'Noto Sans Arabic', 'Noto Naskh Arabic', 'Geeza Pro', 'Droid Arabic Kufi', Arial, sans-serif;
}

/* Corner buttons are fixed to the left in about thirty-five stylesheets. */
html[dir="rtl"] .back-button,
html[dir="rtl"] .logout-button {
    left: auto;
    right: 20px;
}
html[dir="rtl"] .mlc-lang--float {
    right: auto;
    left: 20px;
}

/* Arrows point the other way. */
html[dir="rtl"] .fa-arrow-left::before    { content: "\f061"; }
html[dir="rtl"] .fa-arrow-right::before   { content: "\f060"; }
html[dir="rtl"] .fa-chevron-left::before  { content: "\f054"; }
html[dir="rtl"] .fa-chevron-right::before { content: "\f053"; }
html[dir="rtl"] .fa-angle-left::before    { content: "\f105"; }
html[dir="rtl"] .fa-angle-right::before   { content: "\f104"; }
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-arrow-right { transform: none; }

/* ---- per page ---------------------------------------------------------- */

/* Batch Report: the header keeps clear of the back button, which is now on the right. */
html[dir="rtl"] .br__head { padding: 4px 58px 16px 0; }

/* Timetable and the dashboard-style pages: a title that keeps clear of the back
   button on the left in English keeps clear of it on the right here. */
html[dir="rtl"] .tt-head { margin: 4px 62px 16px 0; }
@media (min-width: 700px) { html[dir="rtl"] .tt-head { margin-left: 0; margin-right: 70px; } }
@media (min-width: 620px) { html[dir="rtl"] .dashboard-container h1 { margin-left: 0; margin-right: 70px; } }