/* ===================================================
   LTR Override for Valex RTL Template
   Corrects all .app-sidebar and .app-content positioning
   =================================================== */

/* --- 1. Sidebar: move from RIGHT to LEFT --- */
.app-sidebar {
    right: auto !important;
    left: 0 !important;
    border-right: none !important;
    border-left: 1px solid #e3e3e3 !important;
}

/* Dark theme sidebar border */
.dark-theme .app-sidebar {
    border-left: 1px solid rgba(222, 228, 236, 0.1) !important;
    border-right: 0 !important;
}

/* --- 2. Main content: flip margin from right to left --- */
@media (min-width: 768px) {
    .app-content {
        margin-right: 0 !important;
        margin-left: 240px !important;
    }
}

/* --- 3. Mobile sidebar: off-screen on LEFT, not RIGHT --- */
@media (max-width: 767px) {
    .app .app-sidebar {
        left: -240px !important;
        right: auto !important;
    }
    .app.sidenav-toggled .app-sidebar {
        left: 0 !important;
        right: auto !important;
    }
}

/* --- 4. Sidenav toggled state (desktop) --- */
@media (min-width: 768px) {
    .app.sidenav-toggled .app-sidebar {
        left: 0 !important;
        right: auto !important;
    }
    .app.sidenav-toggled .app-content {
        margin-left: 80px !important;
        margin-right: 0 !important;
    }
    .sidenav-toggled .app-sidebar {
        left: 0 !important;
        right: auto !important;
    }
}

/* --- 5. Sidebar mini toggled open --- */
.sidebar-mini.sidenav-toggled-open .app-sidebar {
    left: 0 !important;
    right: auto !important;
}

/* --- 6. Active menu item indicator: move from RIGHT to LEFT --- */
.app-sidebar .slide .side-menu__item.active::before {
    right: auto !important;
    left: 0 !important;
}

/* --- 7. Header: adjust for left sidebar --- */
.app-header {
    left: 0 !important;
    right: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

@media (min-width: 768px) {
    .app-header {
        left: 240px !important;
        right: 0 !important;
    }
}

/* --- 8. Sidebar toggle button position --- */
.sidebar-toggle {
    left: 260px !important;
    right: auto !important;
}

/* --- 9. Sidebar collapsed state --- */
@media (min-width: 768px) {
    .app.sidebar-mini.sidenav-toggled .app-sidebar {
        left: 0 !important;
        right: auto !important;
    }
    .app.sidebar-mini.sidenav-toggled .app-content {
        margin-left: 60px !important;
        margin-right: 0 !important;
    }
    .app.sidebar-mini.sidenav-toggled .app-header {
        left: 60px !important;
        right: 0 !important;
    }
}

/* --- 10. Breadcrumb text alignment --- */
.breadcrumb-header {
    text-align: left;
}

/* --- 11. Tables: flip float-based pagination --- */
.dataTables_wrapper .dataTables_length {
    float: left !important;
    text-align: left;
}
.dataTables_wrapper .dataTables_filter {
    float: right !important;
    text-align: right;
}
.dataTables_wrapper .dataTables_info {
    float: left !important;
}
.dataTables_wrapper .dataTables_paginate {
    float: right !important;
}
.dataTables_wrapper .dataTables_filter input {
    margin-left: 6px;
    margin-right: 0;
}

/* --- 12. Dropdown menus: open to left --- */
.dropdown-menu {
    left: 0 !important;
    right: auto !important;
}

/* --- 13. Form inputs: LTR alignment --- */
.form-control {
    text-align: left;
}
input[type="text"], input[type="email"], input[type="number"],
input[type="password"], textarea, select {
    text-align: left;
    direction: ltr;
}

/* --- 14. Text alignment utilities --- */
.text-right { text-align: left !important; }
.text-left { text-align: left !important; }

/* --- 15. Margin/padding utilities: flip for LTR --- */
.ml-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mr-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; }
.pl-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.pr-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }

/* --- 16. Badge positioning --- */
.badge {
    margin-left: 4px;
    margin-right: 0;
}

/* --- 17. Icon positioning in buttons --- */
.btn i.fe {
    margin-left: 6px;
    margin-right: 0;
}

/* --- 18. Card headers --- */
.card-header {
    text-align: left;
}

/* --- 19. Footer text alignment --- */
.footer-copy {
    text-align: center;
}
.footer-col {
    text-align: left;
}

/* --- 20. Notification toast position --- */
.pc-toast-container {
    left: 24px;
    right: auto;
}

/* --- 21. Pagination arrows --- */
.page-link-custom i.fe-chevron-right {
    transform: scaleX(-1);
}

/* --- 22. DataTables header alignment --- */
table.dataTable thead th {
    text-align: left;
}

/* --- 23. Pagination div --- */
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 4px 0;
}

/* --- 24. Sidebar mobile overlay fix --- */
@media (max-width: 767px) {
    .app-sidebar.sidebar-overlay {
        left: 0 !important;
        right: auto !important;
    }
}

/* --- 25. Sidebar scroll fix --- */
.sidebar-scroll {
    left: 0 !important;
    right: auto !important;
}

/* --- 26. Main header layout --- */
.main-header {
    left: auto !important;
    right: auto !important;
}

.main-header > .container,
.main-header > .container-fluid {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
}

@media (min-width: 768px) {
    .main-header {
        margin-right: 0 !important;
    }
    .app.sidebar-mini.sidenav-toggled .main-header {
        margin-right: 0 !important;
    }
}

/* --- 27. Header flex direction --- */
.main-header-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    order: 1 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    flex: 0 0 auto !important;
}

.main-header-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    order: 2 !important;
}

/* --- 28. Sidebar toggle icon alignment --- */
.app-sidebar__toggle .open-toggle,
.app-sidebar__toggle .close-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- 29. Close toggle button for LTR --- */
@media (min-width: 768px) {
    .app-sidebar__toggle .close-toggle {
        display: none;
    }
    .app.sidenav-toggled .app-sidebar__toggle .close-toggle {
        display: flex;
    }
    .app.sidenav-toggled .app-sidebar__toggle .open-toggle {
        display: none;
    }
}

/* --- 30. Header container padding --- */
.main-header .container,
.main-header .container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* --- 31. Responsive logo alignment --- */
.responsive-logo {
    display: flex !important;
    align-items: center !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    order: 1 !important;
}

/* --- 32. Sidebar toggle position --- */
.app-sidebar__toggle {
    display: flex !important;
    align-items: center !important;
    margin-left: 12px !important;
    margin-right: 0 !important;
    order: 2 !important;
}