/*
 * Ayadi Theme for AdminLTE - System Control Panel
 * Brand Colors:
 * - Primary: #471829 (Dark Burgundy)
 * - Secondary: #612837 (Burgundy)
 * - Accent: #DDDAD3 (Light Beige)
 * - Background: #fcfbf9 (Off-white)
 * - Text: #6A6A6A (Gray)
 */

/* =============================================
   CSS Variables
   ============================================= */
:root {
    --ayadi-primary: #471829;
    --ayadi-secondary: #612837;
    --ayadi-accent: #DDDAD3;
    --ayadi-bg: #fcfbf9;
    --ayadi-text: #6A6A6A;
    --ayadi-hover: #7a3a4b;
    --ayadi-white: #ffffff;
}

/* =============================================
   Body & General Styles
   ============================================= */
body {
    background-color: var(--ayadi-bg) !important;
    font-family: 'Almarai', 'Noto Kufi Arabic', sans-serif !important;
}

.content-wrapper {
    background-color: var(--ayadi-bg) !important;
}

/* =============================================
   Main Sidebar - Premium Design
   ============================================= */
.main-sidebar {
    background: linear-gradient(180deg, var(--ayadi-primary) 0%, #3a1321 100%) !important;
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.15);
}

/* Sidebar Navigation Links */
.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
.sidebar-dark-primary .nav-sidebar>.nav-item.menu-open>.nav-link {
    background: linear-gradient(90deg, var(--ayadi-secondary) 0%, rgba(97, 40, 55, 0.7) 100%) !important;
    color: var(--ayadi-white) !important;
    border-radius: 8px;
    margin: 2px 8px;
    box-shadow: 0 4px 12px rgba(97, 40, 55, 0.4);
}

.sidebar-dark-primary .nav-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 12px 16px !important;
    margin: 2px 8px;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.sidebar-dark-primary .nav-sidebar .nav-link:hover {
    background: linear-gradient(90deg, var(--ayadi-secondary) 0%, rgba(97, 40, 55, 0.5) 100%) !important;
    color: var(--ayadi-white) !important;
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(97, 40, 55, 0.3);
}

/* Sidebar Icons - Elegant Styling */
.nav-sidebar .nav-link .nav-icon,
.nav-sidebar .nav-link i,
.nav-sidebar .nav-link .fa,
.nav-sidebar .nav-link .fas,
.nav-sidebar .nav-link .far,
.nav-sidebar .nav-link .fab {
    font-size: 1.1rem !important;
    width: 35px !important;
    height: 35px !important;
    line-height: 35px !important;
    text-align: center !important;
    margin-left: 8px !important;
    margin-right: 0 !important;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.3s ease;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.nav-sidebar .nav-link:hover .nav-icon,
.nav-sidebar .nav-link:hover i,
.nav-sidebar .nav-link:hover .fa,
.nav-sidebar .nav-link:hover .fas,
.nav-sidebar .nav-link:hover .far,
.nav-sidebar .nav-link:hover .fab {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.nav-sidebar .nav-link.active .nav-icon,
.nav-sidebar .nav-link.active i,
.nav-sidebar .nav-item.menu-open>.nav-link .nav-icon,
.nav-sidebar .nav-item.menu-open>.nav-link i {
    background: var(--ayadi-accent) !important;
    color: var(--ayadi-primary) !important;
    box-shadow: 0 4px 12px rgba(221, 218, 211, 0.4);
}

/* Submenu Styling */
.sidebar-dark-primary .nav-sidebar .nav-treeview {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    margin: 4px 8px;
    padding: 8px 0;
}

.sidebar-dark-primary .nav-sidebar .nav-treeview>.nav-item>.nav-link {
    color: rgba(255, 255, 255, 0.75) !important;
    padding: 10px 16px !important;
    padding-right: 45px !important;
    font-size: 0.9rem;
    transition: all 0.25s ease;
}

.sidebar-dark-primary .nav-sidebar .nav-treeview>.nav-item>.nav-link:hover,
.sidebar-dark-primary .nav-sidebar .nav-treeview>.nav-item>.nav-link.active {
    background: rgba(255, 255, 255, 0.12) !important;
    color: var(--ayadi-white) !important;
    padding-right: 50px !important;
}

/* Sidebar Brand Link - Premium Design */
.brand-link {
    background: linear-gradient(180deg, var(--ayadi-primary) 0%, #3a1321 50%) !important;
    border-bottom: 2px solid var(--ayadi-secondary) !important;
    color: var(--ayadi-white) !important;
    padding: 15px 12px !important;
    transition: all 0.3s ease;
}

.brand-link:hover {
    color: var(--ayadi-accent) !important;
    background: linear-gradient(180deg, var(--ayadi-secondary) 0%, var(--ayadi-primary) 100%) !important;
}

.brand-text {
    color: var(--ayadi-white) !important;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.brand-image {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

/* Sidebar Search - Premium Redesign */
.sidebar [data-widget="sidebar-search"] {
    padding: 12px 16px;
    margin-bottom: 10px;
}

.sidebar [data-widget="sidebar-search"] .input-group {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.sidebar [data-widget="sidebar-search"] .input-group:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.sidebar [data-widget="sidebar-search"] .input-group:focus-within {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--ayadi-accent);
    box-shadow: 0 0 0 3px rgba(221, 218, 211, 0.2);
}

.sidebar-dark-primary .form-control-sidebar {
    background: transparent !important;
    border: none !important;
    color: var(--ayadi-white) !important;
    padding: 10px 14px !important;
    font-size: 0.9rem;
    border-radius: 10px !important;
}

.sidebar-dark-primary .form-control-sidebar::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

.sidebar-dark-primary .form-control-sidebar:focus {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.sidebar-dark-primary .input-group-append .btn-sidebar {
    background: linear-gradient(135deg, var(--ayadi-accent) 0%, #c9c6bf 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    color: var(--ayadi-primary) !important;
    transition: all 0.3s ease;
}

.sidebar-dark-primary .input-group-append .btn-sidebar:hover {
    background: linear-gradient(135deg, var(--ayadi-white) 0%, var(--ayadi-accent) 100%) !important;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(221, 218, 211, 0.4);
}

.sidebar-dark-primary .input-group-append .btn-sidebar i {
    font-size: 0.9rem;
}

/* =============================================
   Collapsed Sidebar - Mini Mode Fixes
   ============================================= */
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link {
    padding: 10px !important;
    margin: 4px auto;
    justify-content: center;
    transform: none !important;
}

.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link:hover {
    transform: none !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link .nav-icon,
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link i,
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link .fa,
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link .fas,
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link .far,
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link .fab {
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 1.2rem !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link:hover .nav-icon,
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link:hover i {
    transform: scale(1.05) !important;
    background: rgba(255, 255, 255, 0.25);
}

.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link.active .nav-icon,
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link.active i,
.sidebar-mini.sidebar-collapse .nav-item.menu-open>.nav-link .nav-icon,
.sidebar-mini.sidebar-collapse .nav-item.menu-open>.nav-link i {
    background: var(--ayadi-accent) !important;
    color: var(--ayadi-primary) !important;
}

.sidebar-mini.sidebar-collapse .nav-sidebar>.nav-item>.nav-link.active,
.sidebar-mini.sidebar-collapse .nav-sidebar>.nav-item.menu-open>.nav-link {
    background: transparent !important;
    box-shadow: none;
    margin: 4px auto;
}

/* Collapsed Sidebar - Submenu Flyout Fix */
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-treeview {
    margin: 0 !important;
    padding: 8px !important;
    background: var(--ayadi-primary) !important;
    border-radius: 8px;
    min-width: 200px !important;
}

.sidebar-mini.sidebar-collapse .nav-sidebar .nav-treeview .nav-link {
    padding: 10px 15px !important;
    margin: 2px 0 !important;
    border-radius: 6px;
}

.sidebar-mini.sidebar-collapse .nav-sidebar .nav-treeview .nav-link .nav-icon,
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-treeview .nav-link i,
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-treeview .nav-link .fas,
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-treeview .nav-link .far {
    width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    font-size: 0.9rem !important;
    background: transparent !important;
    margin-left: 8px !important;
    box-shadow: none !important;
}

.sidebar-mini.sidebar-collapse .nav-sidebar .nav-treeview .nav-link:hover .nav-icon,
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-treeview .nav-link:hover i {
    background: transparent !important;
    transform: none !important;
}

.sidebar-mini.sidebar-collapse .brand-link {
    padding: 10px !important;
}

/* =============================================
   Top Navbar
   ============================================= */
.main-header.navbar {
    background-color: var(--ayadi-white) !important;
    border-bottom: 1px solid var(--ayadi-accent) !important;
}

.main-header .nav-link {
    color: var(--ayadi-primary) !important;
}

.main-header .nav-link:hover {
    color: var(--ayadi-secondary) !important;
}

/* =============================================
   Buttons - Premium Elegant Design
   ============================================= */

/* Base Button Styling */
.btn {
    border-radius: 8px !important;
    font-weight: 500;
    letter-spacing: 0.3px;
    padding: 10px 20px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}

.btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn:hover:before {
    left: 100%;
}

/* Primary Button */
.btn-primary {
    background: linear-gradient(135deg, var(--ayadi-secondary) 0%, var(--ayadi-primary) 100%) !important;
    border: none !important;
    color: var(--ayadi-white) !important;
    box-shadow: 0 4px 15px rgba(97, 40, 55, 0.35);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: linear-gradient(135deg, var(--ayadi-primary) 0%, #3a1321 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(71, 24, 41, 0.45) !important;
}

.btn-primary:active {
    transform: translateY(0);
}

/* Secondary Button */
.btn-secondary {
    background: linear-gradient(135deg, var(--ayadi-accent) 0%, #c9c6bf 100%) !important;
    border: none !important;
    color: var(--ayadi-secondary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: linear-gradient(135deg, #c9c6bf 0%, #b8b5ae 100%) !important;
    color: var(--ayadi-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
}

/* Outline Primary Button */
.btn-outline-primary {
    color: var(--ayadi-secondary) !important;
    border: 2px solid var(--ayadi-secondary) !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    background: linear-gradient(135deg, var(--ayadi-secondary) 0%, var(--ayadi-primary) 100%) !important;
    color: var(--ayadi-white) !important;
    border-color: transparent !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(97, 40, 55, 0.35);
}

/* Success Button */
.btn-success {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.35);
}

.btn-success:hover {
    background: linear-gradient(135deg, #1e7e34 0%, #155724 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(40, 167, 69, 0.45) !important;
}

/* Danger Button */
.btn-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.35);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #c82333 0%, #a71d2a 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(220, 53, 69, 0.45) !important;
}

/* Warning Button */
.btn-warning {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;
    border: none !important;
    color: #212529 !important;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.35);
}

.btn-warning:hover {
    background: linear-gradient(135deg, #e0a800 0%, #c69500 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 193, 7, 0.45) !important;
}

/* Info Button */
.btn-info {
    background: linear-gradient(135deg, var(--ayadi-primary) 0%, #3a1321 100%) !important;
    border: none !important;
    color: var(--ayadi-white) !important;
    box-shadow: 0 4px 12px rgba(71, 24, 41, 0.35);
}

.btn-info:hover {
    background: linear-gradient(135deg, #3a1321 0%, #2d0f1a 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(71, 24, 41, 0.45) !important;
}

/* Small Buttons */
.btn-sm {
    padding: 6px 14px !important;
    font-size: 0.85rem;
    border-radius: 6px !important;
}

/* Button Icons */
.btn i,
.btn .fa,
.btn .fas,
.btn .far,
.btn .fab {
    margin-left: 6px;
    transition: transform 0.3s ease;
}

.btn:hover i,
.btn:hover .fa,
.btn:hover .fas,
.btn:hover .far,
.btn:hover .fab {
    transform: scale(1.15);
}

/* =============================================
   Cards - Premium Design
   ============================================= */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.card-header {
    background: linear-gradient(135deg, var(--ayadi-white) 0%, #f8f7f5 100%);
    border-bottom: 2px solid var(--ayadi-accent);
    padding: 18px 20px;
    font-weight: 600;
    color: var(--ayadi-primary);
}

.card-header .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ayadi-primary);
    margin: 0;
}

.card-body {
    padding: 24px;
}

.card-footer {
    background: linear-gradient(135deg, #f8f7f5 0%, var(--ayadi-white) 100%);
    border-top: 1px solid var(--ayadi-accent);
    padding: 16px 20px;
}

.card-primary:not(.card-outline) .card-header {
    background: linear-gradient(135deg, var(--ayadi-secondary) 0%, var(--ayadi-primary) 100%) !important;
    border-color: transparent !important;
    color: var(--ayadi-white);
}

.card-primary:not(.card-outline) .card-header .card-title {
    color: var(--ayadi-white);
}

.card-primary.card-outline {
    border-top: 4px solid var(--ayadi-secondary) !important;
}

/* Card Tools */
.card-tools .btn {
    padding: 4px 10px !important;
    font-size: 0.8rem;
}

/* =============================================
   Tables - Premium Design
   ============================================= */
.table {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.table thead th {
    background: linear-gradient(135deg, var(--ayadi-primary) 0%, #3a1321 100%) !important;
    color: var(--ayadi-white) !important;
    border: none !important;
    padding: 16px 12px;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table tbody td {
    padding: 14px 12px;
    vertical-align: middle;
    border-color: var(--ayadi-accent) !important;
    transition: all 0.2s ease;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(221, 218, 211, 0.15) !important;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: var(--ayadi-white) !important;
}

.table-hover tbody tr {
    transition: all 0.2s ease;
}

.table-hover tbody tr:hover {
    background-color: rgba(97, 40, 55, 0.08) !important;
    transform: scale(1.005);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Table Action Buttons */
.table .btn-group .btn {
    padding: 6px 10px !important;
    margin: 0 2px;
}

/* =============================================
   Form Controls - Premium Design
   ============================================= */
.form-group label {
    font-weight: 600;
    color: var(--ayadi-primary);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-control {
    border: 2px solid var(--ayadi-accent);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: var(--ayadi-white);
}

.form-control:hover {
    border-color: #c9c6bf;
}

.form-control:focus {
    border-color: var(--ayadi-secondary) !important;
    box-shadow: 0 0 0 4px rgba(97, 40, 55, 0.15) !important;
    background-color: var(--ayadi-white);
}

.form-control::placeholder {
    color: #a9a9a9;
    font-weight: 400;
}

/* Input with icons */
.input-group-text {
    background: linear-gradient(135deg, var(--ayadi-accent) 0%, #c9c6bf 100%);
    border: 2px solid var(--ayadi-accent);
    border-radius: 10px;
    color: var(--ayadi-secondary);
    padding: 12px 16px;
}

.input-group .form-control {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

.input-group .input-group-prepend .input-group-text {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none;
}

/* Textarea */
textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

/* Custom Checkboxes & Radio */
.custom-control-input:checked~.custom-control-label::before {
    background: linear-gradient(135deg, var(--ayadi-secondary) 0%, var(--ayadi-primary) 100%) !important;
    border-color: var(--ayadi-secondary) !important;
    box-shadow: 0 2px 8px rgba(97, 40, 55, 0.35);
}

.custom-control-label::before {
    border: 2px solid var(--ayadi-accent);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.custom-control-label:hover::before {
    border-color: var(--ayadi-secondary);
}

/* Custom Switch */
.custom-switch .custom-control-label::before {
    border-radius: 20px;
    height: 1.5rem;
    width: 2.75rem;
}

.custom-switch .custom-control-label::after {
    border-radius: 50%;
    height: calc(1.5rem - 4px);
    width: calc(1.5rem - 4px);
}

.custom-switch .custom-control-input:checked~.custom-control-label::before {
    background: linear-gradient(135deg, var(--ayadi-secondary) 0%, var(--ayadi-primary) 100%) !important;
    border-color: var(--ayadi-secondary) !important;
}

/* Select2 - Premium Design */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 2px solid var(--ayadi-accent) !important;
    border-radius: 10px !important;
    min-height: 48px !important;
    padding: 6px 12px;
    transition: all 0.3s ease;
}

.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover {
    border-color: #c9c6bf !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--ayadi-secondary) !important;
    box-shadow: 0 0 0 4px rgba(97, 40, 55, 0.15) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: linear-gradient(135deg, var(--ayadi-secondary) 0%, var(--ayadi-primary) 100%) !important;
}

.select2-dropdown {
    border: 2px solid var(--ayadi-accent);
    border-radius: 10px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.select2-results__option {
    padding: 12px 16px;
    transition: all 0.2s ease;
}

/* File Input */
.custom-file-label {
    border: 2px solid var(--ayadi-accent);
    border-radius: 10px;
    padding: 12px 16px;
    height: auto;
}

.custom-file-label::after {
    background: linear-gradient(135deg, var(--ayadi-secondary) 0%, var(--ayadi-primary) 100%);
    color: var(--ayadi-white);
    border-radius: 0 8px 8px 0;
    padding: 12px 20px;
    height: 100%;
    display: flex;
    align-items: center;
}

/* =============================================
   Info Boxes & Small Boxes - Premium Design
   ============================================= */
.info-box {
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: none;
    overflow: hidden;
    transition: all 0.3s ease;
}

.info-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.info-box .info-box-icon {
    background: linear-gradient(135deg, var(--ayadi-secondary) 0%, var(--ayadi-primary) 100%) !important;
    border-radius: 12px 0 0 12px;
    width: 80px;
    font-size: 2rem;
}

.info-box .info-box-content {
    padding: 15px 20px;
}

.info-box .info-box-text {
    font-weight: 600;
    color: var(--ayadi-text);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.info-box .info-box-number {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--ayadi-primary);
}

/* Small Boxes */
.small-box {
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    position: relative;
}

.small-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.small-box.bg-primary {
    background: linear-gradient(135deg, var(--ayadi-secondary) 0%, var(--ayadi-primary) 100%) !important;
}

.small-box.bg-info {
    background: linear-gradient(135deg, var(--ayadi-primary) 0%, #3a1321 100%) !important;
}

.small-box.bg-success {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
}

.small-box.bg-warning {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;
}

.small-box .inner h3 {
    font-size: 2.5rem;
    font-weight: 700;
}

.small-box .icon {
    opacity: 1 !important;
    transition: all 0.3s ease;
}

.small-box:hover .icon {
    opacity: 1 !important;
}

.small-box-footer {
    background: rgba(0, 0, 0, 0.15);
    padding: 10px 15px;
    font-weight: 500;
}

/* Custom Ayadi Background Classes */
.bg-ayadi-primary {
    background: linear-gradient(135deg, var(--ayadi-primary) 0%, #3a1321 100%) !important;
    color: var(--ayadi-white) !important;
}

.bg-ayadi-secondary {
    background: linear-gradient(135deg, var(--ayadi-secondary) 0%, var(--ayadi-primary) 100%) !important;
    color: var(--ayadi-white) !important;
}

.bg-ayadi-accent {
    background: linear-gradient(135deg, var(--ayadi-accent) 0%, #c9c6bf 100%) !important;
    color: var(--ayadi-secondary) !important;
}

.text-ayadi-primary {
    color: var(--ayadi-primary) !important;
}

.text-ayadi-secondary {
    color: var(--ayadi-secondary) !important;
}

/* =============================================
   Pagination - Premium Design
   ============================================= */
.pagination {
    gap: 4px;
}

.page-item .page-link {
    border: 2px solid var(--ayadi-accent);
    border-radius: 8px !important;
    padding: 10px 16px;
    color: var(--ayadi-secondary) !important;
    font-weight: 500;
    transition: all 0.3s ease;
    margin: 0;
}

.page-item .page-link:hover {
    background: linear-gradient(135deg, var(--ayadi-accent) 0%, #c9c6bf 100%) !important;
    color: var(--ayadi-primary) !important;
    border-color: var(--ayadi-accent);
    transform: translateY(-2px);
}

.page-item.active .page-link {
    background: linear-gradient(135deg, var(--ayadi-secondary) 0%, var(--ayadi-primary) 100%) !important;
    border-color: transparent !important;
    color: var(--ayadi-white) !important;
    box-shadow: 0 4px 12px rgba(97, 40, 55, 0.35);
}

.page-item.disabled .page-link {
    background-color: #f0f0f0;
    border-color: #e0e0e0;
    color: #999 !important;
}

/* =============================================
   Badges & Labels - Premium Design
   ============================================= */
.badge {
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
    letter-spacing: 0.3px;
}

.badge-primary {
    background: linear-gradient(135deg, var(--ayadi-secondary) 0%, var(--ayadi-primary) 100%) !important;
    box-shadow: 0 2px 6px rgba(97, 40, 55, 0.3);
}

.badge-info {
    background: linear-gradient(135deg, var(--ayadi-primary) 0%, #3a1321 100%) !important;
    box-shadow: 0 2px 6px rgba(71, 24, 41, 0.3);
}

.badge-success {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3);
}

.badge-warning {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;
    color: #212529 !important;
    box-shadow: 0 2px 6px rgba(255, 193, 7, 0.3);
}

.badge-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
}

/* =============================================
   Links
   ============================================= */
a {
    color: var(--ayadi-secondary);
}

a:hover {
    color: var(--ayadi-primary);
}

/* =============================================
   Login Page Specific
   ============================================= */
.login-page,
.register-page {
    background-color: var(--ayadi-bg) !important;
}

.login-box .card-primary.card-outline,
.register-box .card-primary.card-outline {
    border-top: 3px solid var(--ayadi-secondary) !important;
}

.login-card-body .btn-primary,
.register-card-body .btn-primary {
    background-color: var(--ayadi-secondary) !important;
    border-color: var(--ayadi-secondary) !important;
}

.login-card-body .btn-primary:hover,
.register-card-body .btn-primary:hover {
    background-color: var(--ayadi-primary) !important;
    border-color: var(--ayadi-primary) !important;
}

.login-logo a,
.register-logo a {
    color: var(--ayadi-primary) !important;
}

/* =============================================
   Alerts
   ============================================= */
.alert-primary {
    background-color: rgba(97, 40, 55, 0.15) !important;
    border-color: var(--ayadi-secondary) !important;
    color: var(--ayadi-primary) !important;
}

/* =============================================
   Progress Bars
   ============================================= */
.progress-bar {
    background-color: var(--ayadi-secondary) !important;
}

/* =============================================
   Callouts
   ============================================= */
.callout.callout-primary {
    border-left-color: var(--ayadi-secondary) !important;
}

/* =============================================
   Footer
   ============================================= */
.main-footer {
    background-color: var(--ayadi-white);
    border-top: 1px solid var(--ayadi-accent);
    color: var(--ayadi-text);
}

/* =============================================
   Scrollbar Styling (Webkit)
   ============================================= */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--ayadi-accent);
}

::-webkit-scrollbar-thumb {
    background: var(--ayadi-secondary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ayadi-primary);
}

/* =============================================
   DataTables Styling - Premium Design
   ============================================= */
.dataTables_wrapper {
    padding: 10px 0;
}

.dataTables_wrapper .dataTables_filter input {
    border: 2px solid var(--ayadi-accent);
    border-radius: 8px;
    padding: 8px 14px;
    transition: all 0.3s ease;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--ayadi-secondary);
    box-shadow: 0 0 0 3px rgba(97, 40, 55, 0.15);
    outline: none;
}

.dataTables_wrapper .dataTables_length select {
    border: 2px solid var(--ayadi-accent);
    border-radius: 8px;
    padding: 6px 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    margin: 0 3px;
    padding: 8px 14px !important;
    transition: all 0.3s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: linear-gradient(135deg, var(--ayadi-secondary) 0%, var(--ayadi-primary) 100%) !important;
    border-color: transparent !important;
    color: var(--ayadi-white) !important;
    box-shadow: 0 4px 12px rgba(97, 40, 55, 0.35);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: linear-gradient(135deg, var(--ayadi-accent) 0%, #c9c6bf 100%) !important;
    color: var(--ayadi-primary) !important;
    transform: translateY(-1px);
}

.dataTables_wrapper .dataTables_info {
    color: var(--ayadi-text);
    font-weight: 500;
}

/* =============================================
   SweetAlert2 Styling - Premium Design
   ============================================= */
.swal2-popup {
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important;
}

.swal2-title {
    color: var(--ayadi-primary) !important;
    font-weight: 700;
}

.swal2-confirm.swal2-styled {
    background: linear-gradient(135deg, var(--ayadi-secondary) 0%, var(--ayadi-primary) 100%) !important;
    border-radius: 10px !important;
    padding: 12px 28px !important;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(97, 40, 55, 0.35);
    transition: all 0.3s ease !important;
}

.swal2-confirm.swal2-styled:hover {
    background: linear-gradient(135deg, var(--ayadi-primary) 0%, #3a1321 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(71, 24, 41, 0.45);
}

.swal2-cancel.swal2-styled {
    background: linear-gradient(135deg, var(--ayadi-accent) 0%, #c9c6bf 100%) !important;
    color: var(--ayadi-secondary) !important;
    border-radius: 10px !important;
    padding: 12px 28px !important;
    font-weight: 600;
}

/* =============================================
   Modals - Premium Design
   ============================================= */
.modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(135deg, var(--ayadi-secondary) 0%, var(--ayadi-primary) 100%);
    color: var(--ayadi-white);
    padding: 20px 24px;
    border-bottom: none;
}

.modal-header .modal-title {
    font-weight: 600;
    font-size: 1.2rem;
}

.modal-header .close {
    color: var(--ayadi-white);
    opacity: 0.8;
    text-shadow: none;
    transition: all 0.2s ease;
}

.modal-header .close:hover {
    opacity: 1;
    transform: scale(1.1);
}

.modal-body {
    padding: 28px;
}

.modal-footer {
    background: linear-gradient(135deg, #f8f7f5 0%, var(--ayadi-white) 100%);
    border-top: 1px solid var(--ayadi-accent);
    padding: 18px 24px;
}

/* =============================================
   Content Header - Premium Design
   ============================================= */
.content-header {
    padding: 20px 0;
}

.content-header h1 {
    color: var(--ayadi-primary);
    font-weight: 700;
    font-size: 1.8rem;
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
}

.breadcrumb-item a {
    color: var(--ayadi-secondary);
    font-weight: 500;
}

.breadcrumb-item.active {
    color: var(--ayadi-text);
}

/* =============================================
   Tooltips - Premium Design  
   ============================================= */
.tooltip-inner {
    background: linear-gradient(135deg, var(--ayadi-primary) 0%, #3a1321 100%);
    border-radius: 8px;
    padding: 8px 14px;
    font-weight: 500;
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: var(--ayadi-primary);
}

/* =============================================
   Dropdowns - Premium Design
   ============================================= */
.dropdown-menu {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 10px;
    overflow: hidden;
}

.dropdown-item {
    border-radius: 8px;
    padding: 10px 16px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: linear-gradient(135deg, var(--ayadi-accent) 0%, #c9c6bf 100%);
    color: var(--ayadi-primary);
}

.dropdown-item.active,
.dropdown-item:active {
    background: linear-gradient(135deg, var(--ayadi-secondary) 0%, var(--ayadi-primary) 100%);
    color: var(--ayadi-white);
}

/* =============================================
   Loading Overlay
   ============================================= */
.overlay {
    background: rgba(255, 255, 255, 0.9);
}

.overlay .fas.fa-2x,
.overlay .fa-spinner {
    color: var(--ayadi-secondary);
}

/* =============================================
   RTL (Right-to-Left) Support for Arabic
   ============================================= */

/* RTL Content Wrapper - Fix margin direction */
html[dir="rtl"] .content-wrapper,
html[dir="rtl"] .main-footer,
html[dir="rtl"] .main-header {
    margin-left: 0 !important;
    margin-right: 250px !important;
}

/* RTL Global Direction Enforcement */
html[dir="rtl"] body {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .wrapper,
html[dir="rtl"] .content-wrapper,
html[dir="rtl"] .content,
html[dir="rtl"] .card,
html[dir="rtl"] .card-body,
html[dir="rtl"] .card-header,
html[dir="rtl"] .table,
html[dir="rtl"] p,
html[dir="rtl"] label,
html[dir="rtl"] span,
html[dir="rtl"] div,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    direction: rtl !important;
    text-align: right !important;
}

/* RTL Sidebar Position */
html[dir="rtl"] .main-sidebar {
    left: auto !important;
    right: 0 !important;
}

/* RTL Sidebar Navigation */
html[dir="rtl"] .sidebar,
html[dir="rtl"] .main-sidebar {
    direction: rtl !important;
    text-align: right !important;
    overflow-x: visible !important;
}

/* RTL Nav Sidebar list */
html[dir="rtl"] .nav-sidebar {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* RTL Nav Links - Simple right-aligned layout */
html[dir="rtl"] .nav-sidebar .nav-link {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: right !important;
    width: 100% !important;
    padding: 0.5rem 0.8rem !important;
    direction: rtl !important;
}

html[dir="rtl"] .nav-sidebar .nav-link p {
    direction: rtl !important;
    text-align: right !important;
    margin: 0 0.5rem 0 0 !important;
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

/* RTL Sidebar Icons - Icon first in RTL (left side visually becomes right) */
html[dir="rtl"] .nav-sidebar .nav-link .nav-icon,
html[dir="rtl"] .nav-sidebar .nav-link>i:first-child {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

/* RTL Submenu Arrows */
html[dir="rtl"] .nav-sidebar .nav-link>.right,
html[dir="rtl"] .nav-sidebar .nav-link>p>.right {
    left: 10px !important;
    right: auto !important;
    transform: rotate(180deg);
}

html[dir="rtl"] .nav-sidebar .menu-open>.nav-link>.right,
html[dir="rtl"] .nav-sidebar .menu-open>.nav-link>p>.right {
    transform: rotate(270deg);
}

/* RTL Submenu Styling */
html[dir="rtl"] .nav-sidebar .nav-treeview {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

html[dir="rtl"] .nav-sidebar .nav-treeview>.nav-item>.nav-link {
    padding-right: 40px !important;
    padding-left: 16px !important;
}

/* RTL Brand Link */
html[dir="rtl"] .brand-link {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .brand-link .brand-image {
    float: right !important;
    margin-left: 0.8rem !important;
    margin-right: -0.8rem !important;
}

/* RTL Collapsed Sidebar */
html[dir="rtl"] body.sidebar-collapse .content-wrapper,
html[dir="rtl"] body.sidebar-collapse .main-footer,
html[dir="rtl"] body.sidebar-collapse .main-header {
    margin-right: 4.6rem !important;
    margin-left: 0 !important;
}

/* RTL Collapsed Sidebar - Show Icons Properly */
html[dir="rtl"] body.sidebar-collapse .nav-sidebar .nav-link,
html[dir="rtl"] body.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: 0.5rem !important;
}

html[dir="rtl"] body.sidebar-collapse .nav-sidebar .nav-link>i,
html[dir="rtl"] body.sidebar-collapse .nav-sidebar .nav-link .nav-icon,
html[dir="rtl"] body.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link>i,
html[dir="rtl"] body.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link .nav-icon {
    margin: 0 auto !important;
    float: none !important;
    order: unset !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 1.2rem !important;
}

html[dir="rtl"] body.sidebar-collapse .nav-sidebar .nav-link p,
html[dir="rtl"] body.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link p {
    display: none !important;
}

/* RTL Float and Alignment Swaps - Utility Classes */
html[dir="rtl"] .float-left {
    float: right !important;
}

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

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

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

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"] .ml-1 {
    margin-left: 0 !important;
    margin-right: 0.25rem !important;
}

html[dir="rtl"] .ml-2 {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

html[dir="rtl"] .mr-1 {
    margin-right: 0 !important;
    margin-left: 0.25rem !important;
}

html[dir="rtl"] .mr-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

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

/* RTL Form Controls */
html[dir="rtl"] .form-control,
html[dir="rtl"] .form-group,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea {
    direction: rtl !important;
    text-align: right !important;
}

/* RTL Input Groups */
html[dir="rtl"] .input-group {
    flex-direction: row-reverse;
}

html[dir="rtl"] .input-group>.form-control {
    border-radius: 0 0.25rem 0.25rem 0 !important;
}

html[dir="rtl"] .input-group-prepend {
    margin-right: 0 !important;
    margin-left: -1px !important;
}

html[dir="rtl"] .input-group-prepend .input-group-text {
    border-radius: 0 0.25rem 0.25rem 0 !important;
}

/* RTL Dropdown Alignment */
html[dir="rtl"] .dropdown-menu {
    text-align: right !important;
}

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

/* RTL Info Boxes and Small Boxes */
html[dir="rtl"] .info-box,
html[dir="rtl"] .small-box {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .info-box {
    display: flex !important;
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .info-box .info-box-icon {
    border-radius: 0.25rem 0 0 0.25rem !important;
    order: 2;
}

html[dir="rtl"] .info-box .info-box-content {
    text-align: right !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 10px !important;
    order: 1;
}

/* RTL Small Boxes - Dashboard Stat Cards */
html[dir="rtl"] .small-box {
    position: relative !important;
}

html[dir="rtl"] .small-box .inner {
    text-align: right !important;
    padding-right: 15px !important;
    padding-left: 90px !important;
}

html[dir="rtl"] .small-box .icon {
    left: 10px !important;
    right: auto !important;
    top: 5px !important;
}

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

html[dir="rtl"] .small-box .small-box-footer i {
    margin-left: 0 !important;
    margin-right: 5px !important;
}

/* RTL Breadcrumbs and Content Header */
html[dir="rtl"] .content-header {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .content-header .container-fluid {
    direction: rtl !important;
}

html[dir="rtl"] .content-header .row {
    direction: rtl !important;
}

html[dir="rtl"] .content-header .col-sm-12 {
    text-align: right !important;
    display: flex !important;
    justify-content: flex-end !important;
}

html[dir="rtl"] .breadcrumb {
    direction: rtl !important;
    justify-content: flex-end !important;
    text-align: right !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

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

/* RTL Breadcrumb separator - use simple character */
html[dir="rtl"] .breadcrumb-item+.breadcrumb-item::before {
    content: "‹" !important;
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

html[dir="rtl"] .breadcrumb-item+.breadcrumb-item {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* RTL Pagination */
html[dir="rtl"] .pagination {
    direction: rtl !important;
}

/* RTL Card Header with buttons */
html[dir="rtl"] .card-header.d-flex {
    flex-direction: row-reverse !important;
}

/* RTL Button Icons */
html[dir="rtl"] .btn i,
html[dir="rtl"] .btn .fa,
html[dir="rtl"] .btn .fas,
html[dir="rtl"] .btn .far {
    margin-left: 0 !important;
    margin-right: 6px !important;
}

/* RTL Select2 */
html[dir="rtl"] .select2-container {
    direction: rtl !important;
}

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

/* RTL Hover Animation */
html[dir="rtl"] .sidebar-dark-primary .nav-sidebar .nav-link:hover {
    transform: translateX(-5px) !important;
}

/* LTR Hover Animation (override for English) */
html[dir="ltr"] .sidebar-dark-primary .nav-sidebar .nav-link:hover {
    transform: translateX(5px);
}

/* RTL Card Headers and Titles */
html[dir="rtl"] .card-header {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .card-header .card-title {
    direction: rtl !important;
    text-align: right !important;
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
}

html[dir="rtl"] .card-title i,
html[dir="rtl"] .card-title .fa,
html[dir="rtl"] .card-title .fas,
html[dir="rtl"] .card-title .far {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

/* RTL Form Labels */
html[dir="rtl"] .form-group label {
    direction: rtl !important;
    text-align: right !important;
    display: block !important;
}

html[dir="rtl"] .form-group label i {
    margin-right: 0 !important;
    margin-left: 5px !important;
}

/* RTL Text Alignment Classes */
html[dir="rtl"] .text-left {
    text-align: right !important;
}

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

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

/* RTL Alert Messages */
html[dir="rtl"] .alert {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .alert i {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

/* RTL Small Text Helper */
html[dir="rtl"] small.text-muted {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] small i {
    margin-right: 0 !important;
    margin-left: 5px !important;
}

/* RTL Profile Page Specific */
html[dir="rtl"] .text-md-right {
    text-align: right !important;
}

html[dir="rtl"] .mr-md-4 {
    margin-right: 0 !important;
    margin-left: 1.5rem !important;
}