/* ============================================================================
   arabic.css — CRMPlus Arabic (ar-EG) overrides.

   Loaded ONLY when CultureInfo.CurrentUICulture is ar-EG, from
   Views/Shared/_Layout.cshtml, AFTER style.css and layouts/rtl.css.

   Why this file exists, and what belongs in it:
     - style.css  = the theme (shared by both languages).
     - rtl.css    = vendor (Able Pro) RTL mirroring. Do not edit; it is shared
                    with DMS_ERP and diverging makes it unmaintainable.
     - arabic.css = CRMPlus-specific Arabic fixes rtl.css does not cover.

   This replaces the old styleAr.css fork approach: a full second copy of the
   10,800-line theme that had to be kept in sync by hand forever.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. Bootstrap 5 float utilities.

   CRMPlus loads the LTR Bootstrap build — style.css:49 does
   @import url("../plugins/bootstrap-5.0.2/css/bootstrap.min.css") — so
   .float-end compiles to a literal `float: right` and never mirrors. Bootstrap
   ships direction-awareness only in its separate .rtl build, which we cannot
   use here (an @import cannot be out-ranked by a later <link>).

   rtl.css flips only the Bootstrap 4 names (.float-left / .float-right), so
   the BS5 names fall through untouched. Without this block the navbar's
   profile and notification icons float to the right edge of their own
   col-6 container — which under RTL is the MIDDLE of the navbar.
   --------------------------------------------------------------------------- */
.float-end {
    float: left !important;
}

.float-start {
    float: right !important;
}

/* The theme spaces the first/last navbar item with physical padding keyed to
   .float-end (style.css:2092). Mirror it so the icon cluster keeps its gutter
   against the window edge instead of gaining one in the middle. */
.pcoded-header .navbar-nav > li.float-end:first-child {
    padding-right: 12px;
    padding-left: 40px;
}


/* ---------------------------------------------------------------------------
   1b. Bootstrap 5 "start / end" utilities.

   Same root cause as the floats above. Bootstrap NAMES these logically but, in
   the LTR build we @import, compiles them to physical sides:

       .text-end { text-align: right !important }
       .pe-5     { padding-right: 3rem !important }

   Direction-awareness only exists in Bootstrap's separate .rtl build. So every
   text-start/text-end/ps-*/pe-*/ms-*/me-* in the app is frozen to one side.

   Fixed with CSS LOGICAL keywords rather than by swapping right->left, in two
   layers of different weight:
     1. cancel Bootstrap's physical LTR value (.ms-1 -> margin-left: unset);
     2. set the logical value, one step heavier (:root .ms-1).
   The weight difference matters. In RTL a class's CANCEL side is the other
   class's LOGICAL side: .me-0's margin-right:unset is the same property as
   .ms-1's margin-inline-start. At equal weight the later rule won, so every
   "ms-1 me-0" pair (the house toolbar buttons, ~80 views) lost its start
   margin in Arabic and the buttons touched. Heavier logical values always win.
   --------------------------------------------------------------------------- */
.text-start { text-align: start !important; }
.text-end   { text-align: end   !important; }

/* 1. Cancel Bootstrap's physical LTR sides. */
.ps-0, .ps-1, .ps-2, .ps-3, .ps-4, .ps-5 { padding-left: unset !important; }
.pe-0, .pe-1, .pe-2, .pe-3, .pe-4, .pe-5 { padding-right: unset !important; }
.ms-0, .ms-1, .ms-2, .ms-3, .ms-4, .ms-5, .ms-auto { margin-left: unset !important; }
.me-0, .me-1, .me-2, .me-3, .me-4, .me-5, .me-auto { margin-right: unset !important; }

/* 2. Logical values — heavier than any cancel above. */
:root .ps-0 { padding-inline-start: 0      !important; }
:root .ps-1 { padding-inline-start: .25rem !important; }
:root .ps-2 { padding-inline-start: .5rem  !important; }
:root .ps-3 { padding-inline-start: 1rem   !important; }
:root .ps-4 { padding-inline-start: 1.5rem !important; }
:root .ps-5 { padding-inline-start: 3rem   !important; }

:root .pe-0 { padding-inline-end: 0      !important; }
:root .pe-1 { padding-inline-end: .25rem !important; }
:root .pe-2 { padding-inline-end: .5rem  !important; }
:root .pe-3 { padding-inline-end: 1rem   !important; }
:root .pe-4 { padding-inline-end: 1.5rem !important; }
:root .pe-5 { padding-inline-end: 3rem   !important; }

:root .ms-0    { margin-inline-start: 0      !important; }
:root .ms-1    { margin-inline-start: .25rem !important; }
:root .ms-2    { margin-inline-start: .5rem  !important; }
:root .ms-3    { margin-inline-start: 1rem   !important; }
:root .ms-4    { margin-inline-start: 1.5rem !important; }
:root .ms-5    { margin-inline-start: 3rem   !important; }
:root .ms-auto { margin-inline-start: auto   !important; }

:root .me-0    { margin-inline-end: 0      !important; }
:root .me-1    { margin-inline-end: .25rem !important; }
:root .me-2    { margin-inline-end: .5rem  !important; }
:root .me-3    { margin-inline-end: 1rem   !important; }
:root .me-4    { margin-inline-end: 1.5rem !important; }
:root .me-5    { margin-inline-end: 3rem   !important; }
:root .me-auto { margin-inline-end: auto   !important; }


/* ---------------------------------------------------------------------------
   2. Bootstrap 5 close button.

   .btn-close is positioned with PHYSICAL margins (margin: -.5rem -.5rem -.5rem
   auto), so it does not move under dir="rtl" and every modal's X stays on the
   wrong side. Logical margins fix it in both directions.
   --------------------------------------------------------------------------- */
.modal-header .btn-close {
    margin-inline-end: -0.5rem;
    margin-inline-start: auto;
}


/* ---------------------------------------------------------------------------
   2a. Icon + text buttons.

   The theme spaces a button's icon from its label with a PHYSICAL margin
   (style.css: .btn > i { margin-right: 12px }). In Arabic the icon sits on the
   right, so that margin landed on its outer side and the icon touched the word
   ("حفظ⊡"). Mirror it. Icon-only buttons (.btn-icon / .drp-icon) keep no margin,
   as in the theme. Buttons whose icon carries its own me-* class are unaffected:
   those utilities are !important (section 1b).
   --------------------------------------------------------------------------- */
html[dir="rtl"] .btn > i {
    margin-right: 0;
    margin-left: 12px;
}

html[dir="rtl"] .btn.btn-icon > i,
html[dir="rtl"] .btn.drp-icon > i {
    margin-left: 0;
}


/* ---------------------------------------------------------------------------
   2b. Breadcrumb divider.

   Bootstrap renders the "/" as a ::before on each item after the first:

       .breadcrumb-item + .breadcrumb-item          { padding-left: .5rem }
       .breadcrumb-item + .breadcrumb-item::before  { float: left; padding-right: .5rem }

   All three are physical, so in RTL the divider floats to the wrong edge and the
   spacing sits on the wrong side. The float flip is exactly what DMS_ERP carries
   in its own arabic.css; the padding rules are normalised to logical properties
   here so the gap follows direction too.

   Note rtl.css:86 already adds `padding-left: 8px` to the ::before. arabic.css
   loads after it and these are !important, so they win.
   --------------------------------------------------------------------------- */
.breadcrumb-item + .breadcrumb-item::before {
    float: right;
    padding-right: unset !important;
    padding-inline-end: .5rem !important;
}

.breadcrumb-item + .breadcrumb-item {
    padding-left: unset !important;
    padding-inline-start: .5rem !important;
}


/* ---------------------------------------------------------------------------
   3. Latin-script islands inside RTL text.

   Dates, times, money and phone numbers are logically LTR runs. Left to the
   bidi algorithm inside an Arabic paragraph, their neutral characters (: / -)
   reorder and the value reads wrong. Anything tagged dir="ltr" renders as a
   self-contained island; this just keeps it visually tidy.
   --------------------------------------------------------------------------- */
[dir="ltr"] {
    unicode-bidi: isolate;
}


/* ---------------------------------------------------------------------------
   4. Arabic typography — same as SocialPlus's arabic.css, so both products
      read the same in Arabic: Tajawal (imported by style.css), 16px body,
      16px centred inputs.

   Scoped to html[dir="rtl"] because the login page loads this file in BOTH
   languages (see its <head>); the English login must keep the theme font.
   --------------------------------------------------------------------------- */
html[dir="rtl"] body {
    font-family: "tajawal" !important;
    font-size: 16px;
}

html[dir="rtl"] .custom-select,
html[dir="rtl"] .form-control {
    padding: 10px 2px;
    font-size: 16px;
    text-align: center;
}

/* CRMPlus: multi-line boxes (description, notes…) start at the reading edge instead.
   Centred paragraphs read like a poem. Single-line inputs keep the centring above.
   The side padding matches Bootstrap's so the text doesn't touch the border. */
html[dir="rtl"] textarea.form-control {
    text-align: start;
    padding-inline: .75rem;
}

/* SweetAlert dialog text: keep centred under direction:rtl */
html[dir="rtl"] .swal-text {
    text-align: center !important;
}