/* ============================================================================
   RTL — the rules that cannot mirror themselves.

   Most of this app already flips for free. The header, the tab bar and the
   card headers are flexbox with `gap`, and the spacing utilities in use are
   Bootstrap 5 logical ones (ms-* and me-*), which resolve against the document
   direction. So this file is deliberately short: it covers only what is
   pinned to a physical side.

   No comment in this file may contain an asterisk immediately followed by a
   slash. The line above used to write the two utility prefixes with one
   between them, which ends a CSS comment -- so this one closed six lines in,
   everything down to the next close was parsed as CSS, and the error
   recovery that followed swallowed the first real rule in the file: the one
   that moves the two right-anchored popovers to the left edge in Arabic. It
   went unnoticed for as long as both were narrow enough to stay on screen
   without it.

   Everything is scoped to [dir="rtl"], so a single stylesheet serves both
   directions and the English UI is untouched.

   Loaded AFTER the template's own <style> blocks would be ideal, but that is
   not possible — the template defines styles inline, later in the document.
   Hence the `html[dir="rtl"]` prefix on rules that must beat them: it scores
   (0,1,1) plus the attribute, which outranks the bare class selectors inline.
   ========================================================================= */

/* --- Popovers anchored to the right edge ---------------------------------
   Both dropdowns hang off `right: 0` with a `top right` transform origin.
   In RTL the button sits on the left of the row, so the panel and the scale
   origin have to follow it, or it opens off the side of the viewport. */
html[dir="rtl"] .app-settings-menu,
html[dir="rtl"] .user-menu-dropdown {
    right: auto;
    left: 0;
    transform-origin: top left;
}

/* These panels are 290px wide and hang off a button that RTL moves to the far
   left of a container already sitting ~2.5vw from the viewport edge, leaving
   them flush against it. `left` resolves against the positioned ancestor, not
   the viewport, so it cannot clamp against the screen on its own — the margin
   does that, and `max-width` keeps a narrow screen from pushing the panel off
   the opposite side. LTR is untouched: its button is nowhere near an edge. */
html[dir="rtl"] .app-settings-menu,
html[dir="rtl"] .user-menu-dropdown {
    margin-left: 8px;
    max-width: calc(100vw - 16px);
}

/* --- Settings rows -------------------------------------------------------
   The label/hint column and its control sit in a flex row; the copy stack
   inside it is text-aligned to the start, which `text-align: start` handles
   only where the template did not hard-code `left`. */
html[dir="rtl"] .app-settings-copy,
html[dir="rtl"] .app-settings-label,
html[dir="rtl"] .app-settings-hint,
html[dir="rtl"] .app-settings-header,
html[dir="rtl"] .app-settings-note {
    text-align: right;
}

/* --- The toggle switches -------------------------------------------------
   The knob is positioned in px from the left and slides right when on. RTL
   mirrors the track, so the travel has to invert with it; without this the
   knob reads as "on" while the switch is off. */
html[dir="rtl"] .app-settings-switch .app-settings-knob {
    left: auto;
    right: 3px;
}
html[dir="rtl"] .app-settings-switch[aria-checked="true"] .app-settings-knob {
    transform: translateX(-20px);
}

/* --- Warning icon --------------------------------------------------------
   Sits after the text it annotates, so its margin has to move with it. */
html[dir="rtl"] .warning-icon {
    margin-left: 0;
    margin-right: 5px;
}

/* --- Inventory table -----------------------------------------------------
   The expand accent bar is drawn on the first cell's left edge. In RTL the
   first column is on the right, so the bar moves to that edge. */
html[dir="rtl"] .expand-trigger > td:first-child::before {
    left: auto;
    right: 0;
}

/* --- Numeric columns -----------------------------------------------------
   Prices, quantities and barcodes stay Western digits (see i18n.js) and stay
   LTR so a figure like 12,500 is never re-ordered by the bidi algorithm.
   `isolate` keeps each number in its own bidi run inside an Arabic row. */
html[dir="rtl"] .currency,
html[dir="rtl"] [data-numeric],
html[dir="rtl"] input[type="number"] {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
}

/* Barcode and code fields read left-to-right even in an Arabic layout — they
   are scanned against a printed label, not read as prose. */
html[dir="rtl"] input[name*="barcode" i],
html[dir="rtl"] .barcode-cell {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
}

/* --- Directional glyphs --------------------------------------------------
   Chevrons that mean "forward" have to point the other way; ones that mean
   "down" (the expand caret, the dropdown arrow) must not be touched. */
html[dir="rtl"] .rtl-flip {
    transform: scaleX(-1);
}

/* --- The wordmark --------------------------------------------------------
   Kufam is an Arabic display face and تدبير is already Arabic, so it needs no
   flipping — and a logo is on the do-not-mirror list in any case. It is
   centred by an inline style, which stays correct in both directions.
   Nothing to do; noted so the next person does not go looking. */