/*
 * RTL Overrides for Insha'at
 * Loaded only when app()->getLocale() === 'ar'.
 * Keep this file conservative: only override rules that are visibly wrong in RTL.
 * Prefer logical properties (margin-inline-*) in new code; this file compensates
 * for existing Tailwind directional utilities (ml-*, mr-*, pl-*, pr-*, text-left, text-right)
 * that were authored with an LTR assumption.
 */

/* =========================================================
   1. Base direction + font fallback (belt-and-braces — layouts
      already load Cairo, but we ensure sans-serif picks it up).
   ========================================================= */
html[dir="rtl"],
html[dir="rtl"] body {
    font-family: 'Cairo', 'Tajawal', 'IBM Plex Arabic', system-ui, -apple-system, sans-serif;
}

html[dir="rtl"] body.lang-ar,
html[dir="rtl"] body {
    text-align: right;
}

/* =========================================================
   2. Flip margin utilities (Tailwind spacing scale 0 – 12)
      These map ml-* <-> mr-* and pl-* <-> pr-*.
      Scale covers the sizes actually used across the codebase.
   ========================================================= */
[dir="rtl"] .ml-0 { margin-left: 0; margin-right: 0; }
[dir="rtl"] .ml-0\.5 { margin-left: 0; margin-right: 0.125rem; }
[dir="rtl"] .ml-1 { margin-left: 0; margin-right: 0.25rem; }
[dir="rtl"] .ml-1\.5 { margin-left: 0; margin-right: 0.375rem; }
[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .ml-3 { margin-left: 0; margin-right: 0.75rem; }
[dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1rem; }
[dir="rtl"] .ml-5 { margin-left: 0; margin-right: 1.25rem; }
[dir="rtl"] .ml-6 { margin-left: 0; margin-right: 1.5rem; }
[dir="rtl"] .ml-8 { margin-left: 0; margin-right: 2rem; }
[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }

[dir="rtl"] .mr-0 { margin-right: 0; margin-left: 0; }
[dir="rtl"] .mr-0\.5 { margin-right: 0; margin-left: 0.125rem; }
[dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; }
[dir="rtl"] .mr-1\.5 { margin-right: 0; margin-left: 0.375rem; }
[dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
[dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; }
[dir="rtl"] .mr-4 { margin-right: 0; margin-left: 1rem; }
[dir="rtl"] .mr-5 { margin-right: 0; margin-left: 1.25rem; }
[dir="rtl"] .mr-6 { margin-right: 0; margin-left: 1.5rem; }
[dir="rtl"] .mr-8 { margin-right: 0; margin-left: 2rem; }
[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; }

[dir="rtl"] .pl-0 { padding-left: 0; padding-right: 0; }
[dir="rtl"] .pl-1 { padding-left: 0; padding-right: 0.25rem; }
[dir="rtl"] .pl-2 { padding-left: 0; padding-right: 0.5rem; }
[dir="rtl"] .pl-3 { padding-left: 0; padding-right: 0.75rem; }
[dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; }
[dir="rtl"] .pl-5 { padding-left: 0; padding-right: 1.25rem; }
[dir="rtl"] .pl-6 { padding-left: 0; padding-right: 1.5rem; }
[dir="rtl"] .pl-8 { padding-left: 0; padding-right: 2rem; }
[dir="rtl"] .pl-10 { padding-left: 0; padding-right: 2.5rem; }
[dir="rtl"] .pl-12 { padding-left: 0; padding-right: 3rem; }

[dir="rtl"] .pr-0 { padding-right: 0; padding-left: 0; }
[dir="rtl"] .pr-1 { padding-right: 0; padding-left: 0.25rem; }
[dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; }
[dir="rtl"] .pr-3 { padding-right: 0; padding-left: 0.75rem; }
[dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; }
[dir="rtl"] .pr-5 { padding-right: 0; padding-left: 1.25rem; }
[dir="rtl"] .pr-6 { padding-right: 0; padding-left: 1.5rem; }
[dir="rtl"] .pr-8 { padding-right: 0; padding-left: 2rem; }
[dir="rtl"] .pr-10 { padding-right: 0; padding-left: 2.5rem; }
[dir="rtl"] .pr-12 { padding-right: 0; padding-left: 3rem; }

/* Negative margins (common on badges/icons) */
[dir="rtl"] .-ml-1 { margin-left: 0; margin-right: -0.25rem; }
[dir="rtl"] .-ml-2 { margin-left: 0; margin-right: -0.5rem; }
[dir="rtl"] .-mr-1 { margin-right: 0; margin-left: -0.25rem; }
[dir="rtl"] .-mr-2 { margin-right: 0; margin-left: -0.5rem; }

/* =========================================================
   3. Absolute positioning utilities (badges, floating buttons)
      Only the small set used for corner chrome.
   ========================================================= */
[dir="rtl"] .left-0 { left: auto; right: 0; }
[dir="rtl"] .left-1 { left: auto; right: 0.25rem; }
[dir="rtl"] .left-2 { left: auto; right: 0.5rem; }
[dir="rtl"] .left-3 { left: auto; right: 0.75rem; }
[dir="rtl"] .left-4 { left: auto; right: 1rem; }

[dir="rtl"] .right-0 { right: auto; left: 0; }
[dir="rtl"] .right-1 { right: auto; left: 0.25rem; }
[dir="rtl"] .right-2 { right: auto; left: 0.5rem; }
[dir="rtl"] .right-3 { right: auto; left: 0.75rem; }
[dir="rtl"] .right-4 { right: auto; left: 1rem; }

[dir="rtl"] .-left-1 { left: auto; right: -0.25rem; }
[dir="rtl"] .-left-2 { left: auto; right: -0.5rem; }
[dir="rtl"] .-right-1 { right: auto; left: -0.25rem; }
[dir="rtl"] .-right-2 { right: auto; left: -0.5rem; }

/* =========================================================
   4. Text alignment utilities
   ========================================================= */
[dir="rtl"] .text-left { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }

/* Preserve inputs that were forced LTR for data reasons
   (phone numbers, URLs, emails, IBAN, etc.) */
[dir="rtl"] input[dir="ltr"],
[dir="rtl"] textarea[dir="ltr"],
[dir="rtl"] [dir="ltr"].text-right { text-align: right; }
[dir="rtl"] [dir="ltr"].text-left { text-align: left; }

/* =========================================================
   5. Float utilities
   ========================================================= */
[dir="rtl"] .float-left { float: right; }
[dir="rtl"] .float-right { float: left; }

/* =========================================================
   6. Border sides (common for card accents, divider lines)
   ========================================================= */
[dir="rtl"] .border-l   { border-left-width: 0; border-right-width: 1px; }
[dir="rtl"] .border-l-2 { border-left-width: 0; border-right-width: 2px; }
[dir="rtl"] .border-l-4 { border-left-width: 0; border-right-width: 4px; }
[dir="rtl"] .border-r   { border-right-width: 0; border-left-width: 1px; }
[dir="rtl"] .border-r-2 { border-right-width: 0; border-left-width: 2px; }
[dir="rtl"] .border-r-4 { border-right-width: 0; border-left-width: 4px; }

[dir="rtl"] .rounded-l,
[dir="rtl"] .rounded-l-md,
[dir="rtl"] .rounded-l-lg,
[dir="rtl"] .rounded-l-xl {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
[dir="rtl"] .rounded-l    { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }
[dir="rtl"] .rounded-l-md { border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; }
[dir="rtl"] .rounded-l-lg { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
[dir="rtl"] .rounded-l-xl { border-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem; }

[dir="rtl"] .rounded-r,
[dir="rtl"] .rounded-r-md,
[dir="rtl"] .rounded-r-lg,
[dir="rtl"] .rounded-r-xl {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
[dir="rtl"] .rounded-r    { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }
[dir="rtl"] .rounded-r-md { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; }
[dir="rtl"] .rounded-r-lg { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; }
[dir="rtl"] .rounded-r-xl { border-top-left-radius: 0.75rem; border-bottom-left-radius: 0.75rem; }

/* =========================================================
   7. Font Awesome directional icons — mirror in RTL.
      Blade authors that have *already* added `rtl:rotate-180`
      will double-flip, so we only target icons that do NOT
      carry an explicit rotation class.
   ========================================================= */
[dir="rtl"] .fa-chevron-right:not(.no-flip),
[dir="rtl"] .fa-chevron-left:not(.no-flip),
[dir="rtl"] .fa-angle-right:not(.no-flip),
[dir="rtl"] .fa-angle-left:not(.no-flip),
[dir="rtl"] .fa-angle-double-right:not(.no-flip),
[dir="rtl"] .fa-angle-double-left:not(.no-flip),
[dir="rtl"] .fa-caret-right:not(.no-flip),
[dir="rtl"] .fa-caret-left:not(.no-flip),
[dir="rtl"] .fa-arrow-right:not(.no-flip),
[dir="rtl"] .fa-arrow-left:not(.no-flip),
[dir="rtl"] .fa-long-arrow-alt-right:not(.no-flip),
[dir="rtl"] .fa-long-arrow-alt-left:not(.no-flip),
[dir="rtl"] .fa-arrow-circle-right:not(.no-flip),
[dir="rtl"] .fa-arrow-circle-left:not(.no-flip) {
    transform: scaleX(-1);
}

/* Icons that already opt into Tailwind's rtl:rotate-180 — leave them alone */
[dir="rtl"] .rtl\:rotate-180 { transform: rotate(180deg); }

/* =========================================================
   8. Form controls
   ========================================================= */
[dir="rtl"] .form-control,
[dir="rtl"] .form-select,
[dir="rtl"] input:not([type="checkbox"]):not([type="radio"]):not([dir="ltr"]),
[dir="rtl"] textarea:not([dir="ltr"]),
[dir="rtl"] select {
    text-align: right;
}
[dir="rtl"] .form-label,
[dir="rtl"] label:not([dir="ltr"]) {
    text-align: right;
}

/* =========================================================
   9. Tables — headers / cells follow direction; an "actions"
      column commonly sits at the far end (text-align: end).
      Keep it simple: align to start, let explicit text-right
      override via rule #4.
   ========================================================= */
[dir="rtl"] table th,
[dir="rtl"] table td {
    text-align: right;
}

/* =========================================================
   10. Dropdowns / popovers — anchor to the opposite edge.
   ========================================================= */
[dir="rtl"] .dropdown-menu,
[dir="rtl"] [data-dropdown-menu] {
    right: 0;
    left: auto;
}

/* =========================================================
   11. Sidebars / fixed drawers — flip anchor edge.
       Admin layout already handles .admin-sidebar explicitly.
   ========================================================= */
[dir="rtl"] .sidebar,
[dir="rtl"] .side-nav,
[dir="rtl"] .offcanvas-start {
    right: 0;
    left: auto;
}

/* =========================================================
   12. Breadcrumb separators — rotate the ::before glyph.
   ========================================================= */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    transform: scaleX(-1);
    display: inline-block;
}

/* =========================================================
   13. Flash messages (defined inline in layouts/app.blade.php).
       Override so toast docks to the start edge in RTL.
   ========================================================= */
[dir="rtl"] .flash-message {
    right: auto;
    left: 20px;
    animation: slideInLeft 0.3s ease-out;
}
[dir="rtl"] .flash-message.hide {
    animation: slideOutLeft 0.3s ease-in forwards;
}
@keyframes slideInLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}
@keyframes slideOutLeft {
    from { transform: translateX(0);     opacity: 1; }
    to   { transform: translateX(-100%); opacity: 0; }
}
@media (max-width: 768px) {
    [dir="rtl"] .flash-message {
        right: 10px;
        left: 10px;
    }
}
@media (max-width: 480px) {
    [dir="rtl"] .flash-message {
        right: 5px;
        left: 5px;
    }
}

/* =========================================================
   14. Chat bubbles — do not flip the outer layout (the flex
       container already reverses visually via RTL), but ensure
       margin-inline-start:auto style bubbles still push to the
       correct side when they used margin-left:auto.
   ========================================================= */
[dir="rtl"] .chat-message.sent,
[dir="rtl"] .message-sent,
[dir="rtl"] .msg-outgoing {
    margin-left: 0;
    margin-right: auto;
}
[dir="rtl"] .chat-message.received,
[dir="rtl"] .message-received,
[dir="rtl"] .msg-incoming {
    margin-right: 0;
    margin-left: auto;
}

/* =========================================================
   15. Space-x utilities — Tailwind's space-x-* inserts
       margin-left on every child except :first-child, which
       produces a gap on the LTR side. In RTL we want the gap
       on the other side. Covers the sizes in use.
   ========================================================= */
[dir="rtl"] .space-x-1 > :not([hidden]) ~ :not([hidden])   { margin-left: 0; margin-right: 0.25rem; }
[dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden])   { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden])   { margin-left: 0; margin-right: 0.75rem; }
[dir="rtl"] .space-x-4 > :not([hidden]) ~ :not([hidden])   { margin-left: 0; margin-right: 1rem; }
[dir="rtl"] .space-x-6 > :not([hidden]) ~ :not([hidden])   { margin-left: 0; margin-right: 1.5rem; }
[dir="rtl"] .space-x-8 > :not([hidden]) ~ :not([hidden])   { margin-left: 0; margin-right: 2rem; }
[dir="rtl"] .space-x-reverse > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; }