/*
 * RTL overrides for the Metronic v7 (Bootstrap 4) admin shell.
 * This dist ships no native RTL build, so the fixed-position layout
 * (sidebar/header/subheader/footer, all pinned via left:265px in the
 * LTR CSS) is mirrored here, plus a generic Bootstrap 4 directional
 * utility flip since bs4 doesn't auto-flip margin/padding/text-align
 * under dir="rtl" the way Bootstrap 5 does.
 */

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Poppins', sans-serif;
}

/* Sidebar: pin to the right instead of the left */
html[dir="rtl"] .aside-fixed .aside {
    left: auto;
    right: 0;
}

html[dir="rtl"] .brand {
    left: auto;
    right: 0;
}

/* Content wrapper: leave room on the right for the sidebar instead of the left */
html[dir="rtl"] .aside-fixed .wrapper {
    padding-left: 0;
    padding-right: 265px;
}

/* Header / subheader / footer: same left:265px -> right:265px mirror */
html[dir="rtl"] .header.header-fixed {
    left: 0;
    right: 265px;
}

html[dir="rtl"] .subheader-fixed .subheader {
    left: 0;
    right: 265px;
}

html[dir="rtl"] .footer-fixed .footer {
    left: 0;
    right: 265px;
}

/* Aside menu submenus fly out to the left instead of the right */
html[dir="rtl"] .aside-menu .menu-submenu {
    left: auto;
    right: 265px;
}

/* Bootstrap's .ml-auto/.mr-auto use !important, so the topbar's "ml-auto"
   class (meant to push it to the visual end in LTR) silently wins over any
   non-!important override and leaves it stranded mid-header under RTL. */
html[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
html[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; }

html[dir="rtl"] .dropdown-menu-right {
    right: auto !important;
    left: 0 !important;
}

/* Collapsed/minimized sidebar (70px instead of 265px): same left->right mirror */
html[dir="rtl"] .aside-minimize:not(.aside-minimize-hover) .wrapper {
    padding-left: 0;
    padding-right: 70px;
}

html[dir="rtl"] .aside-minimize.aside-minimize-hover .wrapper {
    padding-left: 0;
    padding-right: 70px;
}

html[dir="rtl"] .aside-minimize .header {
    left: 0;
    right: 70px;
}

html[dir="rtl"] .aside-minimize .subheader {
    left: 0;
    right: 70px;
}

html[dir="rtl"] .aside-minimize.footer-fixed .footer {
    left: 0;
    right: 70px;
}

/* Generic Bootstrap 4 directional utility flips (bs4 has no RTL build) */
html[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: .25rem !important; }
html[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: .5rem !important; }
html[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }
html[dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
html[dir="rtl"] .mr-5 { margin-right: 0 !important; margin-left: 3rem !important; }
html[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: .25rem !important; }
html[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: .5rem !important; }
html[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; }
html[dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
html[dir="rtl"] .ml-5 { margin-left: 0 !important; margin-right: 3rem !important; }
html[dir="rtl"] .pr-1 { padding-right: 0 !important; padding-left: .25rem !important; }
html[dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: .5rem !important; }
html[dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 1rem !important; }
html[dir="rtl"] .pl-1 { padding-left: 0 !important; padding-right: .25rem !important; }
html[dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: .5rem !important; }
html[dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 1rem !important; }
html[dir="rtl"] .text-left { text-align: right !important; }
html[dir="rtl"] .text-right { text-align: left !important; }
html[dir="rtl"] .float-left { float: right !important; }
html[dir="rtl"] .float-right { float: left !important; }

/* Form/table content should read right-to-left too */
html[dir="rtl"] .form-group label,
html[dir="rtl"] .table th,
html[dir="rtl"] .table td {
    text-align: right;
}

html[dir="rtl"] .table-bordered th.text-nowrap,
html[dir="rtl"] .table-bordered td.text-nowrap {
    text-align: center;
}