/* alielmi.com file portal — right-to-left overrides.
 *
 * Loaded AFTER assets/portal.css and only when the active locale is RTL. It
 * mirrors layout only: the palette in portal.css is direction-neutral and is
 * deliberately not restated here, so a colour change never has to be made
 * twice.
 *
 * Every rule is scoped to [dir="rtl"] rather than relying on the file simply
 * not being linked. That way the sheet is inert if it is ever loaded on an
 * English page by mistake, and the extra attribute selector also gives these
 * rules the specificity to beat portal.css's single-class rules.
 *
 * Rules only exist here for things that do NOT mirror on their own. Flexbox
 * rows (.bar-inner, .search, .actions, .public-link, .checkbox-row,
 * .switcher-item, .upload-progress-row), `inset: 0`, symmetric padding, and
 * .modal-actions' `justify-content: flex-end` all follow the inline direction
 * already and are left untouched on purpose.
 */

/* ---- typography -------------------------------------------------------- *
 * Persian needs a face that actually has the script. Vazirmatn is what the
 * support desk uses, so it leads the stack here for the same reason: matching
 * text across the two apps behind one sign-on.
 *
 * NO webfont is requested — no <link>, no @font-face, no CDN. This stack uses
 * whatever is installed locally and degrades to Tahoma, which every Windows
 * machine has and which renders Persian acceptably.
 *
 * TO SELF-HOST PROPERLY: drop Vazirmatn's woff2 files into
 * assets/fonts/ (the variable font, e.g. Vazirmatn[wght].woff2, is one file
 * and about 90 KB), then add an @font-face block here with
 * `src: url('fonts/Vazirmatn[wght].woff2') format('woff2-variations');` and
 * `font-display: swap;`. Vazirmatn is SIL OFL licensed, so redistributing it
 * from our own server is permitted. Do not swap this for a Google Fonts link:
 * it would leak visitor IPs to a third party from a private portal. */
/* :root[dir="rtl"] rather than a bare attribute selector so this outranks
 * portal.css's `:root` block on specificity, not just on load order. */
:root[dir="rtl"] {
    --font-sans: 'Vazirmatn', 'Vazir', 'IRANSans', 'Segoe UI', Tahoma,
                 ui-sans-serif, system-ui, Arial, sans-serif;
}

/* Persian is a cursive, joined script: letter-spacing pulls the letters apart
 * and breaks the joins. portal.css tracks out several small-caps-style labels,
 * so every one of them has to be reset. */
[dir="rtl"] .bar-tag,
[dir="rtl"] .switcher-heading,
[dir="rtl"] .badge {
    letter-spacing: normal;
}

/* ---- header bar -------------------------------------------------------- */

/* The bar is a flex row, so the switcher / wordmark / tag order mirrors by
 * itself. The one thing that does not is the auto margin that shoves the nav
 * to the far side: `margin-left: auto` absorbs the free space on the physical
 * left, which in RTL is the END of the row and pushes the nav the wrong way.
 * The logical property puts the free space before the nav in either direction. */
[dir="rtl"] .bar-nav {
    margin-left: 0;
    margin-inline-start: auto;
}

/* The wordmark is the site's identity and stays "Ali Elmi." in every locale.
 * Isolating it keeps the trailing full stop on the right of the name instead
 * of letting the surrounding RTL paragraph flip it to the left — the same
 * treatment the support desk gives its wordmark. */
[dir="rtl"] .brand {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ---- service switcher menu --------------------------------------------- */

/* The panel hangs off the switcher button and must open from the same side the
 * button sits on. portal.css pins it with `left: 0`; both physical offsets are
 * cleared before the logical one is applied, otherwise `left: 0` would still
 * win and the menu would open away from its trigger. */
[dir="rtl"] .switcher-menu {
    left: auto;
    right: auto;
    inset-inline-start: 0;
}

/* ---- account menu ------------------------------------------------------ */

/* portal.css anchors this panel to the physical right, because the account
 * button sits at the END of the bar. In RTL the nav moves to the physical left,
 * so a hard `right: 0` would tear the panel away from its own button and hang
 * it off the far side of the screen. The logical property expresses the actual
 * intent — pin it to the end of the bar — and resolves correctly either way.
 * Both physical offsets are cleared first so neither can win by source order. */
[dir="rtl"] .account-menu {
    right: auto;
    left: auto;
    inset-inline-end: 0;
}

/* Display names may be Persian or Latin; let each one pick its own direction
 * rather than inheriting the bar's. The ellipsis that .account-name applies
 * when a name is too long follows the resolved direction on its own. */
[dir="rtl"] .who,
[dir="rtl"] .account-name {
    unicode-bidi: plaintext;
}

/* .account-btn, .account-chevron and .theme-btn need nothing: the button is a
 * flex row that mirrors itself, and the chevron's open-state rotate(180deg) and
 * the sun/moon icons are all direction-neutral. Recorded so the next person
 * does not have to re-derive it. */

/* ---- forms ------------------------------------------------------------- */

/* Labels are block-level and follow the inline direction already; this is
 * belt-and-braces for any UA stylesheet that hard-codes left. */
[dir="rtl"] label,
[dir="rtl"] .modal-message,
[dir="rtl"] .flash,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] p {
    text-align: start;
}

[dir="rtl"] input[type=text],
[dir="rtl"] input[type=search],
[dir="rtl"] textarea {
    text-align: start;
}

/* Credentials and addresses are always Latin, so they read left-to-right even
 * on an RTL page — otherwise an email address renders with its domain first.
 * The :placeholder-shown pair puts the Persian placeholder back on the correct
 * side while the field is still empty. */
[dir="rtl"] input[type=email],
[dir="rtl"] input[type=password] {
    direction: ltr;
    text-align: left;
}

[dir="rtl"] input[type=email]:placeholder-shown,
[dir="rtl"] input[type=password]:placeholder-shown {
    direction: rtl;
    text-align: right;
}

/* ---- upload dropzone --------------------------------------------------- */

/* The dropzone is centred, so the box itself needs nothing. Its label text is
 * swapped for the chosen filename by JavaScript, though, and that is nearly
 * always Latin — `plaintext` lets the run set its own direction so
 * "report-2026.pdf" is not reordered into nonsense. */
[dir="rtl"] .dropzone-text {
    unicode-bidi: plaintext;
}

/* The upload Cancel button sits beside Upload; the gap has to move with it. */
[dir="rtl"] #uploadCancelBtn {
    margin-left: 0;
    margin-inline-start: 0.6rem;
}

/* .progress-bar grows from the inline start, which is already the right-hand
 * edge in RTL, so it fills the correct way with no rule. The label mixes a
 * percentage with byte figures, so let that run resolve its own direction. */
[dir="rtl"] .progress-label {
    unicode-bidi: plaintext;
}

/* ---- table ------------------------------------------------------------- */

/* portal.css pins every cell to the physical left; `start` follows direction. */
[dir="rtl"] th,
[dir="rtl"] td {
    text-align: start;
}

/* Buttons stacked in the actions column stay centred. */
[dir="rtl"] .actions .btn {
    text-align: center;
}

/* Stored filename and MIME type: Latin, and meaningless if reordered. Rendered
 * left-to-right internally but pushed to the right so it still lines up under
 * the title at the start edge of the cell. */
[dir="rtl"] .filename {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
}

/* Descriptions and uploader names are user-supplied and could be in either
 * language, so each block picks its own direction from its first strong
 * character instead of being forced RTL. */
[dir="rtl"] .desc,
[dir="rtl"] td strong {
    unicode-bidi: plaintext;
}

/* The badges sit after the title, so their offset is an inline-start one. */
[dir="rtl"] .badge {
    margin-left: 0;
    margin-inline-start: 0.4rem;
}

/* ---- public link row + copy button ------------------------------------- */

/* .public-link is a flex row, so the input and the copy button swap sides on
 * their own. The URL inside must not: a download link reordered by the bidi
 * algorithm is unreadable and, worse, looks wrong when copied by eye. Forced
 * LTR and left-aligned so it reads exactly as it will be pasted. */
[dir="rtl"] .public-link input[type=text] {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}

/* The copy button's icon and label are a flex row and mirror themselves; only
 * portal.css's zeroed margin needs preserving, which it already is. Keeping
 * the rule so the intent is recorded rather than rediscovered. */
[dir="rtl"] .copy-btn {
    margin: 0;
}

/* ---- admin inline email form ------------------------------------------- */

/* Flex row, mirrors itself; the field keeps the LTR treatment applied above. */
[dir="rtl"] .inline-email input[type=email] {
    min-width: 180px;
}

/* ---- footer ------------------------------------------------------------ */

/* The link text carries its own arrow entity (&rarr; in the Persian
 * catalogue), so only the domain needs protecting from reordering. */
[dir="rtl"] .foot a {
    unicode-bidi: plaintext;
}

/* ---- small screens ----------------------------------------------------- */

/* portal.css drops the nav on to its own full-width line and cancels the auto
 * margin with `margin-left: 0`. That no longer cancels anything in RTL, where
 * the auto margin set above lives on the inline-start (physical right) side, so
 * it has to be zeroed explicitly or the nav is pushed back off its row.
 *
 * portal.css's `justify-content: flex-end` in the same query is left alone on
 * purpose: flex-end already resolves to the physical left in RTL, which is
 * exactly where the nav belongs, and it keeps the account panel — now pinned
 * with inset-inline-end — opening inside the viewport. */
@media (max-width: 640px) {
    [dir="rtl"] .bar-nav {
        width: 100%;
        margin-inline-start: 0;
    }
}