/* =========================================================
   RTL / Arabic overrides for the dashboard (school / teacher / admin)
   Loaded after all other stylesheets.
   ========================================================= */

body,
input, select, textarea, button,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cairo', 'Tajawal', 'Nunito', 'Segoe UI', Tahoma, sans-serif;
}

/* Font Awesome shares elements with .btn / .form-control in this template
   (e.g. class="far fa-edit btn btn-info"), so re-assert its families here —
   this file loads last and would otherwise blank the icons out. */
.fa, .fas, .fal, .far { font-family: "Font Awesome 5 Pro" !important; }
.fab { font-family: "Font Awesome 5 Brands" !important; }
.fad { font-family: "Font Awesome 5 Duotone" !important; }

body {
    direction: rtl;
    text-align: right;
}

/* ---------- layout: sidebar moves to the right ---------- */
.sidebar-wrapper {
    left: auto;
    right: 16px;
}

.sidebar-closed > .sidebar-wrapper {
    left: auto;
    right: -310px;
}

#content {
    margin-left: 0;
    margin-right: 250px;
}

.sidebar-closed > #content {
    margin-right: 0;
    margin-left: 0;
}

@media (max-width: 991px) {
    .sidebar-wrapper {
        right: -310px;
        left: auto;
    }
    #content {
        margin-right: 0;
    }
    .sidebar-noneoverflow .sidebar-wrapper,
    .sidebar-closed .sidebar-wrapper {
        right: 16px;
    }
}

#sidebar .navbar-brand .img-fluid {
    margin-left: 0;
    margin-right: 20px;
}

#sidebar .border-underline {
    border-left: 0;
    border-right: 1px solid #ccc;
}

#sidebar ul.menu-categories li a > div:first-child,
#sidebar ul.menu-categories ul.submenu > li a {
    text-align: right;
}

#sidebar ul.menu-categories li a [data-feather],
#sidebar ul.menu-categories li a svg {
    margin-right: 0;
    margin-left: 10px;
}

/* submenu arrows point the other way */
#sidebar ul.menu-categories li a[aria-expanded] svg.feather-chevron-right {
    transform: rotate(180deg);
}

/* ---------- navbar ---------- */
.header-container .navbar .navbar-item.flex-row.ml-md-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.header-container .navbar .navbar-item .nav-item.dropdown .dropdown-menu {
    left: 0;
    right: auto;
}

.navbar-nav {
    padding-right: 0;
}

/* ---------- bootstrap utility flips ---------- */
.float-left  { float: right !important; }
.float-right { float: left  !important; }

.text-left  { text-align: right !important; }
.text-right { text-align: left  !important; }

.ml-auto, .mx-auto { margin-left: auto !important; }
.mr-auto, .mx-auto { margin-right: auto !important; }

.ml-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mr-0 { margin-right: 0 !important; margin-left: 0 !important; }
.ml-1 { margin-left: 0 !important; margin-right: .25rem !important; }
.mr-1 { margin-right: 0 !important; margin-left: .25rem !important; }
.ml-2 { margin-left: 0 !important; margin-right: .5rem !important; }
.mr-2 { margin-right: 0 !important; margin-left: .5rem !important; }
.ml-3 { margin-left: 0 !important; margin-right: 1rem !important; }
.mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }
.ml-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
.mr-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
.ml-5 { margin-left: 0 !important; margin-right: 3rem !important; }
.mr-5 { margin-right: 0 !important; margin-left: 3rem !important; }

.pl-0 { padding-left: 0 !important; padding-right: 0 !important; }
.pr-0 { padding-right: 0 !important; padding-left: 0 !important; }
.pl-1 { padding-left: 0 !important; padding-right: .25rem !important; }
.pr-1 { padding-right: 0 !important; padding-left: .25rem !important; }
.pl-2 { padding-left: 0 !important; padding-right: .5rem !important; }
.pr-2 { padding-right: 0 !important; padding-left: .5rem !important; }
.pl-3 { padding-left: 0 !important; padding-right: 1rem !important; }
.pr-3 { padding-right: 0 !important; padding-left: 1rem !important; }
.pl-4 { padding-left: 0 !important; padding-right: 1.5rem !important; }
.pr-4 { padding-right: 0 !important; padding-left: 1.5rem !important; }
.pl-5 { padding-left: 0 !important; padding-right: 3rem !important; }
.pr-5 { padding-right: 0 !important; padding-left: 3rem !important; }

/* ---------- forms ---------- */
.custom-control {
    padding-left: 0;
    padding-right: 1.5rem;
}

.custom-control-label::before,
.custom-control-label::after {
    left: auto;
    right: -1.5rem;
}

.custom-file-label::after {
    right: auto;
    left: 0;
    border-radius: .25rem 0 0 .25rem;
}

.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .input-group-text {
    border-radius: 0 .25rem .25rem 0;
}

.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text {
    border-radius: .25rem 0 0 .25rem;
}

/* ---------- lists, tables, modals ---------- */
ul, ol { padding-right: 1rem; padding-left: 0; }

.table th, .table td { text-align: right; }

.modal-header .close {
    margin: -1rem auto -1rem -1rem;
}

.dropdown-menu {
    text-align: right;
}

.dropdown-toggle::after {
    margin-left: 0;
    margin-right: .255em;
}

.close { float: left; }

.breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
    padding-right: .5rem;
}

.breadcrumb-item + .breadcrumb-item::before {
    padding-left: .5rem;
    padding-right: 0;
    content: "\\";
}

.alert-dismissible { padding-right: 1.25rem; padding-left: 4rem; }
.alert-dismissible .close { right: auto; left: 0; }

/* ---------- datatables ---------- */
.dataTables_wrapper .dataTables_filter { float: left; text-align: left; }
.dataTables_wrapper .dataTables_length { float: right; }
.dataTables_wrapper .dataTables_info { float: right; }
.dataTables_wrapper .dataTables_paginate { float: left; }
table.dataTable thead th { text-align: right; }

/* ---------- misc ---------- */
.custom-modal, .swal2-popup { direction: rtl; text-align: right; }
.progress-bar { float: right; }