/* RTL Support for Arabic Layout */

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

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

/* AdminLTE RTL Overrides */
html[dir="rtl"] .main-sidebar {
    right: 0 !important;
    left: auto !important;
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 1001;
    transition: transform 0.3s ease-in-out;
    -webkit-transition: transform 0.3s ease-in-out;
    -moz-transition: transform 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out;
}

/* Fix sidebar positioning and behavior */
html[dir="rtl"] .wrapper {
    direction: rtl;
}

html[dir="rtl"] .main-sidebar .sidebar {
    padding-top: 0px;
}

/* Remove extra padding in mini sidebar mode */
html[dir="rtl"] body.sidebar-collapse .main-sidebar .sidebar {
    padding-top: 0px;
}

html[dir="rtl"] body.sidebar-collapse .main-sidebar .sidebar .sidebar-menu {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Sidebar collapse/expand behavior for RTL */
/* When collapsed, sidebar becomes mini (50px wide) instead of hidden */
html[dir="rtl"] body.sidebar-collapse .main-sidebar {
    width: 50px;
    overflow: visible;
}

html[dir="rtl"] body:not(.sidebar-collapse) .main-sidebar {
    width: 230px;
}

/* Enable mini sidebar mode */
html[dir="rtl"] body.sidebar-mini {
    overflow-x: hidden;
}

html[dir="rtl"] body.sidebar-mini .main-sidebar {
    overflow: visible;
}

html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar:hover {
    width: 230px;
}

html[dir="rtl"] body.sidebar-mini.sidebar-collapse .main-sidebar:hover .sidebar-menu li > a > span {
    display: inline;
}

/* Ensure content adjusts when sidebar is collapsed/expanded */
html[dir="rtl"] body.sidebar-collapse .content-wrapper {
    margin-right: 50px !important;
    margin-left: 0 !important;
}

html[dir="rtl"] body:not(.sidebar-collapse) .content-wrapper {
    margin-right: 230px !important;
    margin-left: 0 !important;
}

html[dir="rtl"] body.sidebar-collapse .main-header .navbar {
    margin-right: 50px !important;
    margin-left: 0 !important;
}

html[dir="rtl"] body:not(.sidebar-collapse) .main-header .navbar {
    margin-right: 230px !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .content-wrapper {
    margin-right: 230px;
    margin-left: 0;
    transition: margin-right 0.3s ease-in-out;
    -webkit-transition: margin-right 0.3s ease-in-out;
    -moz-transition: margin-right 0.3s ease-in-out;
    -o-transition: margin-right 0.3s ease-in-out;
}

html[dir="rtl"] .main-header .navbar {
    margin-right: 230px;
    margin-left: 0;
    background-color: #3c8dbc !important;
    transition: margin-right 0.3s ease-in-out;
    -webkit-transition: margin-right 0.3s ease-in-out;
    -moz-transition: margin-right 0.3s ease-in-out;
    -o-transition: margin-right 0.3s ease-in-out;
}

/* RTL Navbar Layout - Logo on far right, hamburger next to it, user menu on far left */
html[dir="rtl"] .main-header .logo {
    float: right !important;
    position: relative !important;
    right: 0 !important;
    left: auto !important;
    width: 230px;
    height: 50px;
    background-color: #367fa9 !important;
    color: #fff;
    display: block !important;
    visibility: visible !important;
}

html[dir="rtl"] .sidebar-toggle {
    float: right !important;
    position: relative !important;
    margin-right: 0 !important;
    margin-left: 15px !important;
    background: rgba(0, 0, 0, 0.1) !important;
    border: none !important;
    color: #fff !important;
    display: block !important;
    visibility: visible !important;
}

html[dir="rtl"] .navbar-custom-menu {
    float: left !important;
    position: relative !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    display: block !important;
    visibility: visible !important;
}

/* Ensure all navbar elements are visible */
html[dir="rtl"] .main-header,
html[dir="rtl"] .main-header * {
    visibility: visible !important;
}

html[dir="rtl"] .navbar-nav > li > a {
    color: #fff !important;
    display: block !important;
    visibility: visible !important;
}

/* Fix navbar dropdown hover states */
html[dir="rtl"] .navbar-nav > li > a:hover,
html[dir="rtl"] .navbar-nav > li > a:focus {
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: #fff !important;
}

html[dir="rtl"] .navbar-nav > .user-menu > a:hover,
html[dir="rtl"] .navbar-nav > .user-menu > a:focus {
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: #fff !important;
}

html[dir="rtl"] .navbar-custom-menu .nav > li > a:hover,
html[dir="rtl"] .navbar-custom-menu .nav > li > a:focus {
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: #fff !important;
}

html[dir="rtl"] .navbar-custom-menu .dropdown-menu {
    right: auto;
    left: 0;
    text-align: right;
    background-color: #fff !important;
    border: 1px solid #ccc;
}

/* Ensure dropdown items are visible */
html[dir="rtl"] .navbar-custom-menu .dropdown-menu > li > a {
    color: #333 !important;
    background-color: transparent;
}

html[dir="rtl"] .navbar-custom-menu .dropdown-menu > li > a:hover {
    background-color: #f5f5f5 !important;
    color: #333 !important;
}

/* Fix user menu specific styling */
html[dir="rtl"] .navbar-nav > .user-menu > .dropdown-menu {
    background-color: #fff !important;
    color: #333 !important;
    border: 1px solid #ccc;
    right: auto;
    left: 0;
}

/* Sidebar Navigation RTL */
html[dir="rtl"] .sidebar-menu li > a {
    padding: 12px 5px 12px 15px;
    text-align: right;
}

html[dir="rtl"] .sidebar-menu li > a > .fa {
    width: auto;
    text-align: center;
    margin-left: 10px;
    margin-right: 0;
}

/* Mini sidebar behavior - show only icons when collapsed */
html[dir="rtl"] body.sidebar-collapse .sidebar-menu {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

html[dir="rtl"] body.sidebar-collapse .sidebar-menu li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure first menu item has no extra margin */
html[dir="rtl"] body.sidebar-collapse .sidebar-menu li:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

html[dir="rtl"] body.sidebar-collapse .sidebar-menu li:first-child > a {
    margin-top: 0 !important;
    padding-top: 12px !important;
}

html[dir="rtl"] body.sidebar-collapse .sidebar-menu li > a > span {
    display: none;
}

html[dir="rtl"] body.sidebar-collapse .sidebar-menu li > a > .fa {
    margin-left: 0;
    margin-right: 0;
    text-align: center;
    width: 100%;
}

html[dir="rtl"] body.sidebar-collapse .sidebar-menu li > a {
    padding: 12px 8px;
    text-align: center;
    margin: 0 !important;
}

html[dir="rtl"] body.sidebar-collapse .sidebar-menu .treeview > a > .fa-angle-left {
    display: none;
}

html[dir="rtl"] .sidebar-menu .treeview-menu {
    padding-right: 5px;
    padding-left: 0;
}

/* Submenu handling for mini sidebar */
html[dir="rtl"] body.sidebar-mini.sidebar-collapse .sidebar-menu li.treeview > .treeview-menu {
    display: none !important;
}

html[dir="rtl"] body.sidebar-mini.sidebar-collapse .sidebar-menu li.treeview:hover > .treeview-menu {
    display: block !important;
    position: absolute;
    left: 50px;
    top: 0;
    background: #2c3e50;
    border-radius: 0 4px 4px 0;
    min-width: 180px;
    z-index: 1000;
    padding: 0;
}

html[dir="rtl"] body.sidebar-mini.sidebar-collapse .sidebar-menu li.treeview:hover > .treeview-menu > li {
    margin: 0;
}

html[dir="rtl"] body.sidebar-mini.sidebar-collapse .sidebar-menu li.treeview:hover > .treeview-menu > li > a {
    padding: 10px 15px;
    text-align: right;
    border-radius: 0;
}

/* Improve icon positioning in mini sidebar */
html[dir="rtl"] body.sidebar-collapse .sidebar-menu li > a > .fa,
html[dir="rtl"] body.sidebar-collapse .sidebar-menu li > a > .glyphicon,
html[dir="rtl"] body.sidebar-collapse .sidebar-menu li > a > .ion {
    font-size: 16px;
    display: block;
    margin: 0 auto;
    text-align: center;
}

html[dir="rtl"] .sidebar-menu .treeview-menu {
    padding-right: 5px;
    padding-left: 0;
}

html[dir="rtl"] .sidebar-menu .treeview-menu > li > a {
    padding-right: 25px;
    padding-left: 5px;
}

/* Content RTL */
html[dir="rtl"] .content {
    direction: rtl;
    text-align: right;
}

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

html[dir="rtl"] .box-header {
    text-align: right;
}

/* Form RTL */
html[dir="rtl"] .form-group {
    text-align: right;
}

html[dir="rtl"] .form-control {
    text-align: right;
}

html[dir="rtl"] .btn {
    margin-left: 5px;
    margin-right: 0;
}

/* Table RTL */
html[dir="rtl"] .table th,
html[dir="rtl"] .table td {
    text-align: right;
}

html[dir="rtl"] .dataTables_wrapper {
    direction: rtl;
}

html[dir="rtl"] .dataTables_filter {
    float: left;
}

html[dir="rtl"] .dataTables_paginate {
    float: left;
}

/* Dropdown RTL */
html[dir="rtl"] .dropdown-menu {
    right: 0;
    left: auto;
    text-align: right;
}

/* Breadcrumb RTL */
html[dir="rtl"] .breadcrumb {
    text-align: right;
}

html[dir="rtl"] .breadcrumb > li + li:before {
    content: "\\";
    padding: 0 5px;
}

/* Login Page RTL Support */
html[dir="rtl"] .login-box,
html[dir="rtl"] .register-box {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .login-box-body,
html[dir="rtl"] .register-box-body {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .login-box-body .form-group,
html[dir="rtl"] .register-box-body .form-group {
    text-align: right;
}

html[dir="rtl"] .login-box-body .btn,
html[dir="rtl"] .register-box-body .btn {
    float: left;
}

html[dir="rtl"] .login-box-body .pull-right {
    float: left !important;
}

html[dir="rtl"] .login-box-body .checkbox {
    text-align: right;
}

/* Logo positioning */
html[dir="rtl"] .logo {
    text-align: center;
    display: block !important;
    visibility: visible !important;
    float: right !important;
    position: relative;
}

html[dir="rtl"] .logo-lg img,
html[dir="rtl"] .logo-mini img {
    margin: 0 auto;
    display: block !important;
    visibility: visible !important;
    max-height: 50px;
    width: auto;
}

html[dir="rtl"] .logo-lg {
    display: block !important;
    visibility: visible !important;
}

/* Mobile responsiveness */
@media (max-width: 767px) {
    /* Hide header logo on mobile when drawer is closed to avoid right reserved space */
    html[dir="rtl"] .main-header .logo {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* When the drawer is open, reveal the logo at its normal width */
    html[dir="rtl"] .sidebar-open .main-header .logo {
        display: block !important;
        visibility: visible !important;
        width: 230px !important;
    }
    /* Completely remove sidebar from layout when closed */
    html[dir="rtl"] .main-sidebar {
        display: none !important;
    }
    
    /* Show sidebar when opened */
    html[dir="rtl"] .sidebar-open .main-sidebar {
        display: block !important;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        position: fixed;
        z-index: 1001;
        width: 230px;
        right: 0;
        left: auto;
        top: 0;
        height: 100%;
        visibility: visible;
        opacity: 1;
        padding-top: 0px;
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
    }

    /* Create a gap above the first menu item equal to the navbar height */
    html[dir="rtl"] .sidebar-open .main-sidebar .sidebar {
        padding-top: 50px !important; /* ensure the first item is not under the header */
    }
    
    /* Content takes full width when sidebar is closed */
    html[dir="rtl"] .content-wrapper,
    html[dir="rtl"] body.sidebar-collapse .content-wrapper,
    html[dir="rtl"] body:not(.sidebar-collapse) .content-wrapper {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        right: 0 !important;
        left: 0 !important;
    }
    
    /* Content stays full width when sidebar opens */
    html[dir="rtl"] .sidebar-open .content-wrapper {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        right: 0 !important;
        left: 0 !important;
    }
    
    /* Navbar takes full width */
    html[dir="rtl"] .main-header .navbar,
    html[dir="rtl"] body.sidebar-collapse .main-header .navbar,
    html[dir="rtl"] body:not(.sidebar-collapse) .main-header .navbar {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        right: 0 !important;
        left: 0 !important;
    }
    
    /* Navbar stays full width when sidebar opens */
    html[dir="rtl"] .sidebar-open .main-header .navbar {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        right: 0 !important;
        left: 0 !important;
    }
    
    /* Footer takes full width */
    html[dir="rtl"] .main-footer,
    html[dir="rtl"] body.sidebar-collapse .main-footer,
    html[dir="rtl"] body:not(.sidebar-collapse) .main-footer {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        right: 0 !important;
        left: 0 !important;
    }
    
    /* Footer stays full width when sidebar opens */
    html[dir="rtl"] .sidebar-open .main-footer {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        right: 0 !important;
        left: 0 !important;
    }
    
    /* Ensure wrapper takes full width */
    html[dir="rtl"] .wrapper {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* Add overlay when sidebar is open */
    html[dir="rtl"] .sidebar-open::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        opacity: 1;
        visibility: visible;
    }
    
    /* Hamburger button should be visible */
    html[dir="rtl"] .sidebar-toggle {
        display: block !important;
        visibility: visible !important;
        z-index: 1002;
    }
}

/* Additional fixes for content visibility */
html[dir="rtl"] .content-wrapper,
html[dir="rtl"] .main-footer {
    transition: margin-right 0.3s ease-in-out;
    -webkit-transition: margin-right 0.3s ease-in-out;
    -moz-transition: margin-right 0.3s ease-in-out;
    -o-transition: margin-right 0.3s ease-in-out;
}

/* Ensure content doesn't get cut off */
html[dir="rtl"] .content {
    width: 100%;
    overflow-x: visible;
    min-height: calc(100vh - 100px);
}

/* Additional RTL fixes */
html[dir="rtl"] .pull-right {
    float: left !important;
}

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

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

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