/* =========================================================
   Right-to-left overrides for the legacy Design_v02 screens.

   Separate from eduegate-portal.rtl.css on purpose: that file mirrors the
   Design v03 component set by name, whereas the older screens are built almost
   entirely from Bootstrap utility classes and inline styles inherited from the
   purchased theme. Mirroring those generically covers many screens at once
   without touching the 227 KB vendor stylesheet.

   Loaded only for RTL cultures, after the Design_v02 bundle.

   Scope note: this handles the direction-bearing classes the parent-portal views
   actually use (measured, not guessed) - pull-*, float-*, text-*, mr-*/ml-*,
   pr-*/pl-*, offset-* and the form/table/input-group structures around them.
   Deeply custom Design_v02 components may still need per-case attention.
   ========================================================= */

/* ---------- typography ---------- */
[dir="rtl"] body,
[dir="rtl"] .layout_ar {
    font-family: 'Cairo', 'Poppins', 'Segoe UI', Tahoma, sans-serif;
}

/* ---------- float / pull utilities ---------- */
[dir="rtl"] .pull-left,
[dir="rtl"] .float-left { float: right !important; }

[dir="rtl"] .pull-right,
[dir="rtl"] .float-right { float: left !important; }

/* ---------- text alignment ----------
   Only flip the explicit left/right utilities. text-center must stay centred. */
[dir="rtl"] .text-left { text-align: right !important; }
[dir="rtl"] .text-right { text-align: left !important; }
[dir="rtl"] .text-sm-left, [dir="rtl"] .text-md-left, [dir="rtl"] .text-lg-left { text-align: right !important; }
[dir="rtl"] .text-sm-right, [dir="rtl"] .text-md-right, [dir="rtl"] .text-lg-right { text-align: left !important; }

/* Default body/table/form alignment */
[dir="rtl"] .form-group,
[dir="rtl"] .control-label,
[dir="rtl"] label,
[dir="rtl"] .table th,
[dir="rtl"] .table td { text-align: right; }

/* ---------- Bootstrap spacing utilities ----------
   mr-* becomes margin on the left and vice versa. The portal views use
   mr-1..mr-5 and ml-1..ml-3; the full 0-5 scale is covered so a later edit
   that reaches for ml-4 does not silently break. */
[dir="rtl"] .mr-0 { margin-right: 0 !important; margin-left: 0 !important; }
[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: .25rem !important; }
[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: .5rem !important; }
[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }
[dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
[dir="rtl"] .mr-5 { margin-right: 0 !important; margin-left: 3rem !important; }
[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; }

[dir="rtl"] .ml-0 { margin-left: 0 !important; margin-right: 0 !important; }
[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: .25rem !important; }
[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: .5rem !important; }
[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; }
[dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
[dir="rtl"] .ml-5 { margin-left: 0 !important; margin-right: 3rem !important; }
[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }

[dir="rtl"] .pr-0 { padding-right: 0 !important; padding-left: 0 !important; }
[dir="rtl"] .pr-1 { padding-right: 0 !important; padding-left: .25rem !important; }
[dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: .5rem !important; }
[dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 1rem !important; }
[dir="rtl"] .pr-4 { padding-right: 0 !important; padding-left: 1.5rem !important; }
[dir="rtl"] .pr-5 { padding-right: 0 !important; padding-left: 3rem !important; }

[dir="rtl"] .pl-0 { padding-left: 0 !important; padding-right: 0 !important; }
[dir="rtl"] .pl-1 { padding-left: 0 !important; padding-right: .25rem !important; }
[dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: .5rem !important; }
[dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 1rem !important; }
[dir="rtl"] .pl-4 { padding-left: 0 !important; padding-right: 1.5rem !important; }
[dir="rtl"] .pl-5 { padding-left: 0 !important; padding-right: 3rem !important; }

/* ---------- grid offsets ---------- */
[dir="rtl"] .offset-1 { margin-left: 0; margin-right: 8.333333%; }
[dir="rtl"] .offset-2 { margin-left: 0; margin-right: 16.666667%; }
[dir="rtl"] .offset-3 { margin-left: 0; margin-right: 25%; }
[dir="rtl"] .offset-4 { margin-left: 0; margin-right: 33.333333%; }
[dir="rtl"] .offset-md-2 { margin-left: 0; margin-right: 16.666667%; }
[dir="rtl"] .offset-md-3 { margin-left: 0; margin-right: 25%; }

/* ---------- form controls ---------- */
[dir="rtl"] .form-control,
[dir="rtl"] .form-control-static,
[dir="rtl"] textarea.form-control { text-align: right; }

/* Latin-only values keep LTR so punctuation lands correctly. Same rule as the
   v03 sheet - an email or phone number reads wrong when bidi-reordered. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="password"] {
    direction: ltr;
    text-align: right;
}

/* checkbox / radio labels sit to the right of their control */
[dir="rtl"] .form-check,
[dir="rtl"] .checkbox,
[dir="rtl"] .radio { padding-left: 0; padding-right: 1.25rem; }

[dir="rtl"] .form-check-input { margin-left: 0; margin-right: -1.25rem; }

/* ---------- input groups ---------- */
[dir="rtl"] .input-group > .form-control:not(:last-child),
[dir="rtl"] .input-group > .custom-select:not(:last-child) {
    border-radius: 0 .25rem .25rem 0;
}

[dir="rtl"] .input-group > .form-control:not(:first-child),
[dir="rtl"] .input-group > .custom-select:not(:first-child) {
    border-radius: .25rem 0 0 .25rem;
}

[dir="rtl"] .input-group-prepend { margin-right: 0; margin-left: -1px; }
[dir="rtl"] .input-group-append { margin-left: 0; margin-right: -1px; }

/* ---------- lists, tables, modals ---------- */
[dir="rtl"] ul, [dir="rtl"] ol { padding-left: 0; padding-right: 2rem; }

[dir="rtl"] .modal-header .close {
    margin: -1rem auto -1rem -1rem;
}

[dir="rtl"] .close { float: left; }

/* ---------- dropdowns ---------- */
[dir="rtl"] .dropdown-menu { text-align: right; left: auto; right: 0; }
[dir="rtl"] .dropdown-menu-right { left: 0; right: auto; }

/* ---------- breadcrumbs / pagination ---------- */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item { padding-left: 0; padding-right: .5rem; }
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { padding-right: 0; padding-left: .5rem; float: right; }

[dir="rtl"] .pagination { padding-right: 0; }
[dir="rtl"] .page-item:first-child .page-link { border-radius: 0 .25rem .25rem 0; }
[dir="rtl"] .page-item:last-child .page-link { border-radius: .25rem 0 0 .25rem; }

/* ---------- steps / wizard (application forms) ---------- */
[dir="rtl"] .wizard > .steps > ul > li,
[dir="rtl"] .steps > ul > li { float: right; }

[dir="rtl"] .wizard > .actions { text-align: left; }

/* ---------- icons that encode direction ---------- */
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-angle-left,
[dir="rtl"] .fa-angle-right,
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-long-arrow-left,
[dir="rtl"] .fa-long-arrow-right {
    transform: scaleX(-1);
}