/* 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; }