/* ProcessMaker — Farsi RTL overlay
 * ---------------------------------
 * Loaded ONLY when the locale is `fa` AND the request path is on the end-user
 * route allowlist (see apply-rtl.sh). Admin and the Process Designer stay LTR
 * by design — the BPMN canvas breaks when mirrored.
 *
 * Upstream ProcessMaker has ZERO RTL support (no `direction: rtl`, no
 * `dir="rtl"`, no RTL stylesheet anywhere in the source), so everything here is
 * ours to maintain and must be re-checked after each upgrade.
 *
 * FOUNDATION PASS: direction, typography and the structural flips that are
 * certain to be needed. Component-level fixes get added after visual review
 * against the running app.
 */

/* ---- Bundled Persian typeface ----
 * Self-hosted rather than trusting whatever the viewer's machine happens to have.
 * Verified by screenshot: on a system with no Persian-capable font installed the
 * browser draws every letter in ISOLATED form, so Arabic-script cursive joining
 * breaks completely and the text becomes very hard to read. Shipping the webfont
 * makes rendering correct and identical for every visitor.
 * Vazirmatn (SIL OFL) is the de-facto standard Persian UI face.
 */
@font-face{
  font-family:"Vazirmatn";
  src:url("/fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Vazirmatn";
  src:url("/fonts/Vazirmatn-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Vazirmatn";
  src:url("/fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

:root {
    --pm-fa-font: "Vazirmatn", "IRANSans", "Sahel", Tahoma, "Segoe UI", sans-serif;
}

/* Apply the face broadly - form controls and nav do not inherit body font
   reliably across Bootstrap's own resets. */
html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] .nav-link,
html[dir="rtl"] .breadcrumb,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 {
    font-family: var(--pm-fa-font);
}

html[dir="rtl"] body,
html[dir="rtl"] .form-control,
html[dir="rtl"] .btn,
html[dir="rtl"] .dropdown-menu,
html[dir="rtl"] .modal,
html[dir="rtl"] .card,
html[dir="rtl"] table {
    font-family: var(--pm-fa-font);
}

html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] .nav-link,
html[dir="rtl"] .breadcrumb {
    font-family: var(--pm-fa-font);
}
/* The login page carries its own inline <style> (auth-styles.blade.php) which
   hardcodes `font-family: 'Open Sans'`. Open Sans has NO Persian glyphs, so the
   slogan panel fell back to a face with no Arabic shaping and rendered every
   letter isolated. These selectors are specific enough to win, and !important
   guards against the inline block being reordered by a future upgrade. */
html[dir="rtl"] .login-layout,
html[dir="rtl"] .login-panel,
html[dir="rtl"] .login-container,
html[dir="rtl"] .slogan,
html[dir="rtl"] .slogan .head-text,
html[dir="rtl"] .slogan .display,
html[dir="rtl"] .slogan .display-line,
html[dir="rtl"] .slogan .display-complexity,
html[dir="rtl"] .slogan .subtext {
    font-family: var(--pm-fa-font) !important;
}

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

/* Latin runs (code, IDs) stay LTR inside RTL text.
   Form INPUTS are deliberately NOT in this list. Forcing direction:ltr +
   text-align:left on password/email/url left those fields - and their Persian
   placeholders - visually left-aligned inside an otherwise right-aligned form.
   A Latin value typed into an RTL input renders correctly on its own as a single
   LTR run, so inheriting RTL is both correct and what users expect here. */
html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] .text-monospace {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
}

/* Inputs follow the form: right-aligned, with the placeholder on the right. */
html[dir="rtl"] input.form-control,
html[dir="rtl"] textarea.form-control,
html[dir="rtl"] select.form-control,
html[dir="rtl"] .form-control {
    text-align: right;
    direction: rtl;
}
/* The eye / show-password button sits at the field's end, which is now the left. */
html[dir="rtl"] .input-group > .input-group-append { order: -1; }
html[dir="rtl"] .input-group > .input-group-prepend { order: 1; }

/* ---- Bootstrap utility flips ---- */
html[dir="rtl"] .text-left  { text-align: right !important; }
html[dir="rtl"] .text-right { text-align: left  !important; }
html[dir="rtl"] .float-left  { float: right !important; }
html[dir="rtl"] .float-right { float: left  !important; }

html[dir="rtl"] .ml-auto, html[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }
html[dir="rtl"] .mr-auto, html[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }

/* ---- Layout structure ---- */
/* THE TAB-BAR GAP FIX.
   Bootstrap ships `.nav { padding-left: 0 }`. A <ul> gets its default indent from
   padding-inline-start, which in RTL resolves to padding-RIGHT - so that reset
   clears nothing and a ~40px gap opens before the first tab. Zero the right side
   for every list-based nav. */
html[dir="rtl"] .nav,
html[dir="rtl"] .navbar-nav,
html[dir="rtl"] .nav-tabs,
html[dir="rtl"] .nav-pills,
html[dir="rtl"] .pagination,
html[dir="rtl"] .list-group {
    padding-right: 0;
    padding-left: 0;
}
/* Same class of bug for ordinary content lists: give them the indent back on the
   correct side rather than leaving it on the left. */
html[dir="rtl"] .content ul,
html[dir="rtl"] .content ol {
    padding-right: 2rem;
    padding-left: 0;
}
html[dir="rtl"] .dropdown-menu { text-align: right; left: auto; right: 0; }
html[dir="rtl"] .modal-header .close { margin: -1rem auto -1rem -1rem; }
html[dir="rtl"] .custom-control { padding-right: 1.5rem; padding-left: 0; }
html[dir="rtl"] .custom-control-label::before,
html[dir="rtl"] .custom-control-label::after { right: -1.5rem; left: auto; }

/* ---- Sidebar ---- */
html[dir="rtl"] .sidebar,
html[dir="rtl"] #sidebar {
    right: 0;
    left: auto;
}
html[dir="rtl"] .main-content,
html[dir="rtl"] .content-wrapper {
    margin-right: var(--sidebar-width, 250px);
    margin-left: 0;
}

/* ---- Tables ---- */
html[dir="rtl"] table th,
html[dir="rtl"] table td { text-align: right; }

/* ---- Directional icons ----
   Chevrons/arrows that indicate navigation must mirror; status and action
   icons must NOT. Scoped narrowly on purpose. */
html[dir="rtl"] .fa-chevron-left,
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .fa-angle-left,
html[dir="rtl"] .fa-angle-right,
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-arrow-right {
    transform: scaleX(-1);
}

/* Progress bars fill from the right. */
html[dir="rtl"] .progress-bar { float: right; }

/* ---- Login page RTL polish (verified from screenshots) ---- */

/* auth-styles.blade.php sets letter-spacing:0.28em on the eyebrow. Tracking is a
   Latin typographic device; in Arabic script it forces gaps BETWEEN JOINED
   LETTERS inside a word, which looks broken rather than airy. */
html[dir="rtl"] .slogan .head-text {
    letter-spacing: 0 !important;
}

/* The show-password eye is positioned at `right: 1rem`. That is the far end of an
   LTR field, but in RTL it is exactly where right-aligned text STARTS, so the
   placeholder ran underneath the icon. Move it to the visual end (the left) and
   reserve room so long values never slide under it. */
html[dir="rtl"] #togglePassword,
html[dir="rtl"] .toggle-password {
    right: auto;
    left: 1rem;
}
html[dir="rtl"] .password-container .form-control {
    padding-left: 2.5rem;
}

/* ---- Task/case table: make clipped columns reachable ----
 * `.pm-table-container` ships with `overflow-x: hidden` while its content is
 * wider than the box (measured: 1233px of table in a 954px container), so the
 * last column was silently unreachable - no scrollbar, no way to see it.
 * This is upstream behaviour and happens in LTR too; the intended workaround is
 * to hide columns you don't need via the table's column settings. Allowing a
 * scrollbar is strictly better than losing data off-screen.
 */
html[dir="rtl"] .pm-table-container {
    overflow-x: auto;
}

/* ---- Directional margins on :first/:last child ----
 * A whole class of RTL bug: a margin set on the *physical* left/right of the
 * first or last item. In LTR it is harmless trailing space at the end of a row;
 * in RTL the row runs the other way, so that same margin lands BETWEEN two items
 * and opens a visible gap. Each rule below mirrors the original intent.
 */

/* THE REPORTED TAB GAP.
   Upstream: `.nav-tabs li.nav-item:last-of-type { margin-right: 2rem }`.
   In LTR that is space after the final tab. In RTL the final tab is the LEFTmost,
   so the margin sits between it and the previous tab - the 32px gap seen on the
   کارتابل / اولویت / پیش‌نویس‌ها and کاربران / کاربران حذف‌شده tab bars. */
html[dir="rtl"] .nav-tabs li.nav-item:last-of-type {
    margin-right: 0;
    margin-left: 2rem;
}

/* First navbar item drops its leading padding - which is the RIGHT side in RTL. */
html[dir="rtl"] #navbar1 .nav-item:first-child .nav-link {
    padding-left: inherit;
    padding-right: 0;
}

/* Button groups collapse adjacent borders with a -1px margin on the leading edge. */
html[dir="rtl"] .btn-group > .btn:not(:first-child),
html[dir="rtl"] .btn-group > .btn-group:not(:first-child) {
    margin-left: 0;
    margin-right: -1px;
}

/* Pagination end-caps: the rounded corners belong on the opposite end in RTL. */
html[dir="rtl"] .page-item:first-child .page-link {
    margin-left: initial;
    margin-right: 0;
    border-radius: 0 .125em .125em 0;
}
html[dir="rtl"] .page-item:last-child .page-link {
    border-radius: .125em 0 0 .125em;
}

/* NOTE ON CACHING
 * nginx serves everything under public/ with
 *   Cache-Control: public, max-age=31536000, immutable
 * This file is injected with `?v=<filemtime>` (see apply-rtl.php), so each image
 * rebuild changes its URL and returning users pick the new file up immediately.
 * If you ever add another unversioned file under public/, give it a version query
 * or a unique filename - otherwise it is frozen in browsers for a year.
 */