/*
 * Right-to-left layout.
 *
 * dir="rtl" on <html> turns the text around and nothing else: the sidebar
 * stayed pinned left, the two-column form kept its label on the left, and a
 * radio ended up at one end of the row with its own label at the other, so
 * nobody could tell which button belonged to which option. This sheet moves
 * the layout to match the text. Loaded only for an RTL language, after the
 * theme, so every rule here is a deliberate override.
 */

/* ── The shell ─────────────────────────────────────────────────────────── */
[dir="rtl"] .sidebar-left {
    left: auto !important;
    right: 0 !important;
}

[dir="rtl"] .content-body {
    margin-left: 0 !important;
    margin-right: 230px !important;
}

[dir="rtl"].sidebar-left-collapsed .content-body,
[dir="rtl"] .sidebar-left-collapsed .content-body {
    margin-right: 0 !important;
}

/* The page title strip. On a wide screen it is fixed, and the theme pins it
   with "left: 230px; right: 0" - the room the menu takes on the left. In
   Arabic the menu is on the right, so the strip ran from 230px to the right
   edge and its far end sat under the menu on every page (the owner's
   review, 2026-10-09). The room moves to the side the menu is on. Below
   768px the strip is not fixed and needs nothing. */
@media (min-width: 768px) {
    html[dir="rtl"].fixed .page-header {
        left: 0 !important;
        right: 230px !important;
    }

    html[dir="rtl"].fixed.sidebar-left-collapsed .page-header {
        right: 0 !important;
    }
}

/* The title inside that strip is floated left by the theme, so even with
   text-align: right it sat at the strip's left end in Arabic, as far from
   the menu as it could be. It floats to the side the text starts on. */
[dir="rtl"] .page-header h2 {
    float: right;
    margin-left: 0;
    margin-right: -1px;
}

/* The calendar's month grid. Arabic does not shorten month names, so the
   full ones - سبتمبر, نوفمبر - ran into each other four to a row. Three to
   a row gives each room (31.333% plus the library's 1% margins either side),
   laid from the right as Arabic reads. */
[dir="rtl"] .datepicker .datepicker-months span.month {
    width: 31.333%;
    float: right;
    font-size: 13px;
}

/* The menu list itself. The browser indents a list 40px on the side the
   text starts from; the theme takes that away on the left for English, so
   in Arabic the 40px stayed - on the right - and every menu name had 40px
   less room. That is why the longer Arabic names were cut to "..." (the
   owner, 2026-10-10). The top bar's menu had the same 40px, which pushed
   the name and picture off the screen's edge on a tablet. */
[dir="rtl"] .sidebar-left .nav-main > ul.nav,
[dir="rtl"] .sidebar-left ul.nav-main,
[dir="rtl"] .header ul.header-menu {
    padding-right: 0;
}

/* The name of the open menu item was clipped at the wrong edge. */
[dir="rtl"] .sidebar-left .nav-main li a {
    text-align: right;
    padding-left: 15px;
    padding-right: 20px;
}
/* A parent row carries the expander at its left edge; the label needs to stop
   before it or a long Arabic name runs straight into the "+". */
[dir="rtl"] .sidebar-left .nav-main li.nav-parent > a,
[dir="rtl"] ul.nav-main li.nav-parent > a {
    padding-left: 42px !important;
    /* Arabic names are longer than the English ones this sidebar was measured
       for. They used to be cut off with "..." - تبرعات الـ... for Food
       donations (the owner, 2026-10-10). A long name now takes a second
       line, as the sub-menu items already do; the 42px above keeps it clear
       of the "+". */
    overflow: hidden;
    white-space: normal;
    line-height: 1.35;
}
[dir="rtl"] .sidebar-left .nav-main li a i {
    margin-left: 8px;
    margin-right: 0;
    float: right;
}
/* The expander sits at the row's end. The theme pins it right with
   !important and its own transform, so both have to be restated here or the
   "+" lands on top of the Arabic label. */
[dir="rtl"] .sidebar-left .nav-main .nav-parent > a:after,
[dir="rtl"] ul.nav-main li.nav-parent > a:after {
    left: 0 !important;
    right: auto !important;
    transform: translateY(-50%) scaleX(-1) !important;
}

/* The little caret before a child item points into the text, not away. */
[dir="rtl"] .sidebar-left .nav-main .nav-children li a .fa-caret-right {
    transform: scaleX(-1);
    display: inline-block;
}

/* ── Forms ─────────────────────────────────────────────────────────────── */
/* Bootstrap's horizontal form floats its columns left; in RTL both sides of
   the row have to come from the other edge or the label and its field end up
   in each other's places. */
[dir="rtl"] .form-horizontal .control-label {
    text-align: left;
}
[dir="rtl"] .col-md-1, [dir="rtl"] .col-md-2, [dir="rtl"] .col-md-3,
[dir="rtl"] .col-md-4, [dir="rtl"] .col-md-5, [dir="rtl"] .col-md-6,
[dir="rtl"] .col-md-7, [dir="rtl"] .col-md-8, [dir="rtl"] .col-md-9,
[dir="rtl"] .col-md-10, [dir="rtl"] .col-md-11, [dir="rtl"] .col-md-12,
[dir="rtl"] .col-sm-1, [dir="rtl"] .col-sm-2, [dir="rtl"] .col-sm-3,
[dir="rtl"] .col-sm-4, [dir="rtl"] .col-sm-5, [dir="rtl"] .col-sm-6,
[dir="rtl"] .col-sm-7, [dir="rtl"] .col-sm-8, [dir="rtl"] .col-sm-9,
[dir="rtl"] .col-sm-10, [dir="rtl"] .col-sm-11, [dir="rtl"] .col-sm-12,
[dir="rtl"] .col-lg-1, [dir="rtl"] .col-lg-2, [dir="rtl"] .col-lg-3,
[dir="rtl"] .col-lg-4, [dir="rtl"] .col-lg-6, [dir="rtl"] .col-lg-8,
[dir="rtl"] .col-lg-12 {
    float: right;
}

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

/* ── Checkboxes and radios ─────────────────────────────────────────────── */
/* The custom control positions its box absolutely from the left and pads the
   label to match. Both have to change sides together, or the button and its
   words drift to opposite ends of the row. */
[dir="rtl"] .checkbox-custom,
[dir="rtl"] .radio-custom {
    padding-left: 0;
    padding-right: 25px;
    text-align: right;
}
[dir="rtl"] .checkbox-custom input[type="checkbox"],
[dir="rtl"] .radio-custom input[type="radio"] {
    left: auto;
    right: 0;
}
[dir="rtl"] .checkbox-custom label,
[dir="rtl"] .radio-custom label {
    padding-left: 0;
    padding-right: 5px;
    text-align: right;
    display: block;
}
[dir="rtl"] .checkbox-custom label:before,
[dir="rtl"] .checkbox-custom label:after,
[dir="rtl"] .radio-custom label:before,
[dir="rtl"] .radio-custom label:after {
    left: auto;
    right: 0;
}

/* ── Odds and ends ─────────────────────────────────────────────────────── */
[dir="rtl"] .input-group-addon:first-child { border-radius: 0 4px 4px 0; }
[dir="rtl"] .input-group-addon:last-child  { border-radius: 4px 0 0 4px; }
[dir="rtl"] .help-block,
[dir="rtl"] .headers-line p { text-align: right; }
[dir="rtl"] .color-swatches { justify-content: flex-start; }
[dir="rtl"] .panel-footer .text-right { text-align: left !important; }
[dir="rtl"] .page-header h2 { text-align: right; }
[dir="rtl"] .dataTables_filter { text-align: left; }
[dir="rtl"] table.table th,
[dir="rtl"] table.table td { text-align: right; }
[dir="rtl"] table.table th.text-center,
[dir="rtl"] table.table td.text-center { text-align: center !important; }

/* ── The chat inbox ────────────────────────────────────────────────────
   The messenger had no direction of its own: the contact list kept its
   border on the right, the search icon sat on top of the first Arabic
   letter typed, "my" bubbles stayed on the left, and the attachment menu
   opened off the wrong corner. Bubbles are the part that matters - a
   conversation where both sides sit on the same edge cannot be read. */
[dir="rtl"] .messenger-sidebar { border-right: 0; border-left: 1px solid var(--n-100); }
[dir="rtl"] .messenger-search i { left: auto; right: 14px; }
[dir="rtl"] .messenger-search input { padding-left: 16px; padding-right: 38px; }

[dir="rtl"] .message-row.mine { justify-content: flex-start; }
[dir="rtl"] .message-row:not(.mine) { justify-content: flex-end; }
[dir="rtl"] .message-row.mine .message-content { align-items: flex-start; }
[dir="rtl"] .message-row:not(.mine) .message-content { align-items: flex-end; }
[dir="rtl"] .message-bubble { text-align: right; }

[dir="rtl"] .chat-attach-options { left: auto; right: 0; }
[dir="rtl"] .chat-attach-option { text-align: right; }
[dir="rtl"] .chat-attach__dl { margin-left: 0; margin-right: auto; }
[dir="rtl"] .chat-recorder__time { margin-left: 0; margin-right: auto; }
[dir="rtl"] .chat-back-btn i,
[dir="rtl"] .chat-send-btn i { transform: scaleX(-1); }

/* A clock reading is left-to-right in every language. Left to the page's
   own direction, "8:59 PM" came out as "PM 8:59"; the same goes for the
   contact list's times and the recorder's counter. */
[dir="rtl"] .message-time,
[dir="rtl"] .chat-recorder__time,
[dir="rtl"] .messenger-contact__time,
[dir="rtl"] .contact-item__time {
    direction: ltr;
    unicode-bidi: isolate;
}
[dir="rtl"] .message-row.mine .message-time { text-align: left; }
[dir="rtl"] .message-row:not(.mine) .message-time { text-align: right; }

/* ── The contact inbox ─────────────────────────────────────────────── */
[dir="rtl"] .contact-reply-compose__hint,
[dir="rtl"] .contact-thread-item__body,
[dir="rtl"] .contact-message-panel .panel-body { text-align: right; }

/* Where the menu stops being a panel and becomes a drawer.
   767px, because that is where the left-to-right layout does it: this block
   said 991px, so between 768 and 991 an Arabic reader had the menu pushed off
   the screen while the button that opens it only exists below 768 - the whole
   menu was unreachable on a tablet held upright. */
@media (max-width: 767px) {
    [dir="rtl"] .content-body {
        margin-right: 0 !important;
    }

    /* "right: 0" above is the desktop rule: pin the menu to the right edge.
       On a phone the menu is meant to be off the screen until the hamburger
       is tapped, and that !important dragged it back on - so in Arabic the
       menu sat on top of every page in the system at 390px, with the page
       behind it unreachable. Off-canvas it goes, to the right this time. */
    /* Moved, not repositioned. Sending it to "right: -100%" puts a 390px
       panel at x=390 on a 390px screen, and a browser that does not clip the
       overflow - Safari on an iPhone among them - then offers the whole page
       a sideways scroll into empty space. A transform paints it off screen
       without taking up any. */
    [dir="rtl"] .sidebar-left {
        left: auto !important;
        right: 0 !important;
        margin-left: 0 !important;
        transform: translateX(100%);
        transition: transform 0.2s ease;
    }

    /* And in again when the menu is opened, from the side the text runs. */
    html[dir="rtl"].mob-menu-open .sidebar-left {
        transform: translateX(0);
        z-index: 1200 !important;
    }
}

/* The user's name and picture in the header. `.userbox` carries a physical
   `margin-right: 17px`, which in a right-to-left page pushes it towards the
   left edge instead of away from the right one - on a 768px tablet that put
   its left edge at -7px, so the profile picture was clipped by the screen.
   Mirror the margin, and let the header's flex row shrink rather than push
   its children past the edge. */
[dir="rtl"] .userbox {
    margin-right: 0;
    margin-left: 17px;
}

[dir="rtl"] .header-right {
    min-width: 0;
}

/* The theme sends the name, picture and icons to the far end of the top bar
   with "margin-left: auto". In a right-to-left row that pushes them towards
   the middle instead: in Arabic they sat beside the search box, mid-screen,
   with the left third of the bar empty (the owner, 2026-10-10). The free
   space goes on their other side, so they reach the left end. */
@media (min-width: 768px) {
    [dir="rtl"] .header .header-right {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    /* The logo's 15px of air is on its left, the side the menu is on in
       English. In Arabic that side is the right, and the logo sat against
       the screen's edge with "food" clipped. */
    [dir="rtl"] .header .logo-env {
        padding-left: 0 !important;
        padding-right: 15px !important;
    }
}

/* The icons in the top bar. The theme spaces each one with 10px on its
   right, which in English is the side the next icon - and finally the
   name and picture - is on. In Arabic the row runs the other way, so the
   bell sat flush against the picture and its unread count, pinned 5px from
   the bell's right edge, lay across the picture (the owner, 2026-10-10).
   The gap and the count move to the mirrored side. */
[dir="rtl"] .header-right .header-menu > li {
    margin: 0 0 0 10px !important;
}

[dir="rtl"] #notification-badge-count {
    right: auto !important;
    left: 5px !important;
}

/* The month arrows on every dashboard.
 *
 * The rows they sit in are flex, so right-to-left already swaps the two
 * buttons: in Arabic the one that moves forward a month correctly ends up on
 * the left. The glyph inside it does not swap - measured on the admin
 * dashboard, the leftmost button led to October and showed a chevron pointing
 * right, so the button that goes forward pointed backwards.
 *
 * Mirroring the icon rather than editing four views also keeps the markup
 * identical in all three languages; there is one direction here and it is the
 * page's, not the template's. */
[dir="rtl"] .dashboard-role-hero__month-btn > i,
[dir="rtl"] .admin-meal-cal-header__nav a > i,
[dir="rtl"] .cust-meal-cal-header__nav a > i,
[dir="rtl"] .admin-branch-perf-nav-btn > i {
    transform: scaleX(-1);
}

/* The logo bar used to be pinned to a top corner, and in Arabic that corner
   is the one the menu button sits in, so the two overlapped and the logo was
   pushed to the other side. It is a centred row of its own now (mobile.css),
   which has no side to be on — so the only thing left to do here is make sure
   nothing nudges it off centre. */
@media (max-width: 767px) {
    [dir="rtl"] .header .logo-env .logo {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}