/**
 * RTL Styles for Muathir.AI
 * Activates when dir="rtl" is set on HTML element
 */

/* Base RTL direction */
html[dir="rtl"] {
    direction: rtl;
}

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

/* ============================================
   SIDEBAR - Move to Right Side
   ============================================ */

/* Generic sidebar selectors */
html[dir="rtl"] .sidebar,
html[dir="rtl"] [class*="sidebar"],
html[dir="rtl"] [class*="Sidebar"],
html[dir="rtl"] [class*="side-bar"],
html[dir="rtl"] [class*="SideBar"] {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
}

/* Material-UI sidebar */
html[dir="rtl"] .MuiDrawer-root,
html[dir="rtl"] .MuiDrawer-paper,
html[dir="rtl"] .MuiPaper-root {
    left: auto !important;
    right: 0 !important;
}

/* Ant Design sidebar */
html[dir="rtl"] .ant-layout-sider,
html[dir="rtl"] .ant-sider {
    left: auto !important;
    right: 0 !important;
}

/* Fixed positioned sidebars */
html[dir="rtl"] [class*="sidebar"][style*="position: fixed"],
html[dir="rtl"] [class*="Sidebar"][style*="position: fixed"] {
    left: auto !important;
    right: 0 !important;
}

/* Absolutely positioned sidebars */
html[dir="rtl"] [class*="sidebar"][style*="position: absolute"],
html[dir="rtl"] [class*="Sidebar"][style*="position: absolute"] {
    left: auto !important;
    right: 0 !important;
}

/* ============================================
   MAIN CONTENT - Adjust Margins
   ============================================ */

html[dir="rtl"] [class*="content"],
html[dir="rtl"] [class*="Content"],
html[dir="rtl"] [class*="main"],
html[dir="rtl"] [class*="Main"],
html[dir="rtl"] main {
    margin-left: 0 !important;
    margin-right: 280px !important;
}

/* Material-UI content offset */
html[dir="rtl"] .MuiContainer-root,
html[dir="rtl"] .MuiBox-root {
    margin-left: 0 !important;
}

/* ============================================
   FLEX LAYOUTS - Reverse Direction
   ============================================ */

html[dir="rtl"] [class*="flex"],
html[dir="rtl"] [class*="row"] {
    flex-direction: row-reverse;
}

/* ============================================
   ICONS - Flip for RTL
   ============================================ */

html[dir="rtl"] .icon-arrow-left,
html[dir="rtl"] .icon-chevron-left,
html[dir="rtl"] [class*="arrow-left"],
html[dir="rtl"] [class*="chevron-left"] {
    transform: scaleX(-1);
}

html[dir="rtl"] .icon-arrow-right,
html[dir="rtl"] .icon-chevron-right,
html[dir="rtl"] [class*="arrow-right"],
html[dir="rtl"] [class*="chevron-right"] {
    transform: scaleX(-1);
}

/* ============================================
   TEXT ALIGNMENT
   ============================================ */

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] p,
html[dir="rtl"] span,
html[dir="rtl"] div,
html[dir="rtl"] label {
    text-align: right;
}

/* ============================================
   ARABIC FONT
   ============================================ */

html[dir="rtl"] body {
    font-family: 'Tajawal', 'Cairo', 'Arial', sans-serif;
}

/* ============================================
   MENU ITEMS
   ============================================ */

html[dir="rtl"] [class*="menu"],
html[dir="rtl"] [class*="Menu"],
html[dir="rtl"] [class*="nav"],
html[dir="rtl"] [class*="Nav"] {
    text-align: right;
}

html[dir="rtl"] [class*="menu-item"],
html[dir="rtl"] [class*="menuItem"],
html[dir="rtl"] [class*="nav-item"] {
    flex-direction: row-reverse;
}

/* ============================================
   BUTTONS WITH ICONS
   ============================================ */

html[dir="rtl"] button,
html[dir="rtl"] .btn,
html[dir="rtl"] [class*="button"],
html[dir="rtl"] [class*="Button"] {
    flex-direction: row-reverse;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}

/* ============================================
   TABLES
   ============================================ */

html[dir="rtl"] table,
html[dir="rtl"] [class*="table"] {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] th,
html[dir="rtl"] td {
    text-align: right;
}

/* ============================================
   RESPONSIVE - Mobile
   ============================================ */

@media (max-width: 768px) {
    html[dir="rtl"] [class*="content"],
    html[dir="rtl"] [class*="main"],
    html[dir="rtl"] main {
        margin-right: 0 !important;
    }

    html[dir="rtl"] .sidebar,
    html[dir="rtl"] [class*="sidebar"],
    html[dir="rtl"] [class*="Sidebar"] {
        right: -100% !important;
        left: auto !important;
    }

    html[dir="rtl"] .sidebar.open,
    html[dir="rtl"] [class*="sidebar"].open,
    html[dir="rtl"] [class*="Sidebar"].open {
        right: 0 !important;
    }
}