/* ============================================================
   GoPOS — Global RTL (Right-to-Left) overrides for Arabic
   Activated whenever the root element has dir="rtl"
   (set by the JS snippet in index.html based on the stored culture).
   Drop this file into wwwroot/css/ and reference it AFTER your
   main stylesheet in index.html:
       <link href="css/rtl.css" rel="stylesheet" />
   ------------------------------------------------------------
   NOTE: dir="rtl" alone already mirrors most things for free
   (text alignment, flex row direction, table column order,
   list bullets). This file only patches what does NOT auto-mirror:
   forced text-align, side panels that slide in with translateX,
   and a few icon/spacing cases. Per-page side panels may still
   need their own [dir="rtl"] tweak — see the last section.
   ============================================================ */

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

/* Form controls: keep text right-aligned in RTL */
[dir="rtl"] input:not([type="checkbox"]):not([type="radio"]),
[dir="rtl"] textarea,
[dir="rtl"] select {
    text-align: right;
    direction: rtl;
}
/* But keep phone / number / code / url / email fields LTR (they read left-to-right) */
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[inputmode="numeric"],
[dir="rtl"] .ltr-field {
    direction: ltr;
    text-align: left;
}

/* Prices / totals / IDs that must stay LTR — add class="ltr" in markup if needed */
[dir="rtl"] .ltr,
[dir="rtl"] .price,
[dir="rtl"] .amount,
[dir="rtl"] .total {
    direction: ltr;
    unicode-bidi: embed;
    text-align: right;
}

/* Font Awesome icons that are directional (arrows) flip in RTL */
[dir="rtl"] .fa-arrow-left::before {
    content: "\f061";
}
/* becomes arrow-right */
[dir="rtl"] .fa-arrow-right::before {
    content: "\f060";
}
/* becomes arrow-left  */
[dir="rtl"] .fa-chevron-left::before {
    content: "\f054";
}

[dir="rtl"] .fa-chevron-right::before {
    content: "\f053";
}

[dir="rtl"] .fa-angle-left::before {
    content: "\f105";
}

[dir="rtl"] .fa-angle-right::before {
    content: "\f104";
}

/* ------------------------------------------------------------
   SIDE PANELS that slide from the RIGHT (translateX) must slide
   from the LEFT in RTL. Most GoPOS edit/detail panels use a
   pattern like:  position: fixed; right: 0; transform: translateX(100%);
   Generic patch for common class names — extend the selector list
   with your own panel classes as needed:
   ------------------------------------------------------------ */
[dir="rtl"] .edit-panel,
[dir="rtl"] .side-panel,
[dir="rtl"] .detail-panel,
[dir="rtl"] .slide-panel,
[dir="rtl"] .form-panel {
    right: auto !important;
    left: 0 !important;
}

/* If a panel is hidden with translateX(100%) (off to the right),
   in RTL it should hide to the left with translateX(-100%).
   Add the panel's OWN class here if it doesn't inherit this. */

/* Playlist / two-column layouts with a right border → left border in RTL */
[dir="rtl"] .playlist-panel {
    border-right: none;
    border-left: 1px solid var(--color-border-subtle);
}

/* ------------------------------------------------------------
   PER-PAGE NOTE:
   If a specific page's side panel still opens on the wrong side,
   add a rule like this (using that page's actual panel class):

     [dir="rtl"] .my-page-panel {
         right: auto; left: 0;
         transform: translateX(-110%);
     }
     [dir="rtl"] .my-page-panel.open { transform: translateX(0); }

   The guide panel (PageGuide.razor) is already handled inside
   that component's own <style> block.
   ------------------------------------------------------------ */