/* ============================================================
   AEA ERP — RTL & beIN Arabic Font System
   ============================================================ */

/* 1. Local beIN Font Definition */
@font-face {
    font-family: 'beIN';
    src: url('../fonts/beINNormal.ttf') format('truetype'),
         url('/assets/fonts/beINNormal.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'beIN';
    src: url('../fonts/beINBlack.ttf') format('truetype'),
         url('/assets/fonts/beINBlack.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'beIN';
    src: url('../fonts/beINBlack.ttf') format('truetype'),
         url('/assets/fonts/beINBlack.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'beIN';
    src: url('../fonts/beINBlack.ttf') format('truetype'),
         url('/assets/fonts/beINBlack.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* 2. Global Arabic Typography */
[dir="rtl"],
[dir="rtl"] body,
body.layout-mode-rtl,
.layout-mode-rtl h1,
.layout-mode-rtl h2,
.layout-mode-rtl h3,
.layout-mode-rtl h4,
.layout-mode-rtl h5,
.layout-mode-rtl h6,
.layout-mode-rtl .h1,
.layout-mode-rtl .h2,
.layout-mode-rtl .h3,
.layout-mode-rtl .h4,
.layout-mode-rtl .h5,
.layout-mode-rtl .h6,
.layout-mode-rtl p,
.layout-mode-rtl a,
.layout-mode-rtl span,
.layout-mode-rtl label,
.layout-mode-rtl input,
.layout-mode-rtl select,
.layout-mode-rtl textarea,
.layout-mode-rtl button,
.layout-mode-rtl .btn,
.layout-mode-rtl .dropdown-item,
.layout-mode-rtl .badge {
    font-family: 'beIN', system-ui, -apple-system, sans-serif !important;
}

/* 3. RTL Form & Card Alignments */
.layout-mode-rtl .form-label,
.layout-mode-rtl label {
    text-align: right;
    display: block;
}

.layout-mode-rtl .form-control,
.layout-mode-rtl .form-select {
    text-align: right;
    box-sizing: border-box;
}

.layout-mode-rtl .form-select-sm,
.layout-mode-rtl select.form-select-sm {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0.25rem 0.625rem 0.25rem 2.25rem !important;
    background-position: left 0.75rem center !important;
    box-sizing: border-box !important;
}

.layout-mode-rtl .form-control-sm:not(textarea) {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0.25rem 0.625rem !important;
    box-sizing: border-box !important;
}

.layout-mode-rtl textarea.form-control,
.layout-mode-rtl textarea.form-control-sm {
    height: auto !important;
    min-height: 85px !important;
    padding: 0.5rem 0.75rem !important;
}

.layout-mode-rtl .input-group-sm > .form-control,
.layout-mode-rtl .input-group-sm > .form-select,
.layout-mode-rtl .input-group-sm > .input-group-text,
.layout-mode-rtl .input-group-sm > .btn {
    height: 32px !important;
    min-height: 32px !important;
    box-sizing: border-box !important;
}

/* Password eye toggle in RTL */
.layout-mode-rtl .pass-group {
    position: relative;
}

.layout-mode-rtl .pass-group .toggle-password {
    left: 12px !important;
    right: auto !important;
}

.layout-mode-rtl .pass-group .pass-input {
    padding-left: 2.75rem !important;
    padding-right: 0.75rem !important;
}

/* Input icon addon (e.g. mobile icon) in RTL */
.layout-mode-rtl .input-icon {
    position: relative;
}

.layout-mode-rtl .input-icon .input-icon-addon {
    left: 0 !important;
    right: auto !important;
}

.layout-mode-rtl .input-icon .form-control {
    padding-left: 2.75rem !important;
    padding-right: 0.75rem !important;
}

/* Form check and remember me */
.layout-mode-rtl .form-check {
    padding-right: 1.5em;
    padding-left: 0;
    text-align: right;
}

.layout-mode-rtl .form-check .form-check-input {
    float: right;
    margin-right: -1.5em;
    margin-left: 0;
}

.layout-mode-rtl .form-check-label {
    margin-right: 0.5rem;
    margin-left: 0 !important;
}

/* Breadcrumbs in RTL */
.layout-mode-rtl .breadcrumb-item + .breadcrumb-item::before {
    float: right;
    padding-left: var(--bs-breadcrumb-item-padding-x);
    padding-right: 0;
}

/* Topbar & Header RTL adjustments */
.layout-mode-rtl .header .header-left,
[dir="rtl"] .header .header-left {
    float: right;
    border-right: 0;
    border-left: 1px solid #E9EDF4;
}

.layout-mode-rtl .header .top-nav-search,
[dir="rtl"] .header .top-nav-search {
    margin-right: 15px;
    margin-left: auto;
}

.layout-mode-rtl .header .top-nav-search .searchinputs::before,
[dir="rtl"] .header .top-nav-search .searchinputs::before {
    right: 14px !important;
    left: auto !important;
}

.layout-mode-rtl .header .top-nav-search .searchinputs input,
[dir="rtl"] .header .top-nav-search .searchinputs input {
    padding-right: 42px !important;
    padding-left: 55px !important;
    text-align: right !important;
}

.layout-mode-rtl .header .top-nav-search .search-addon,
[dir="rtl"] .header .top-nav-search .search-addon {
    left: 8px !important;
    right: auto !important;
}

.layout-mode-rtl .header .user-menu,
[dir="rtl"] .header .user-menu {
    margin-left: 0;
    margin-right: auto;
}

.layout-mode-rtl .header .dropdown > .btn-outline-light.bg-white:not(.btn-icon):not(.mui-branch) .ti-calendar-due,
[dir="rtl"] .header .dropdown > .btn-outline-light.bg-white:not(.btn-icon):not(.mui-branch) .ti-calendar-due {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

.layout-mode-rtl .header .dropdown > .btn-outline-light.bg-white:not(.btn-icon):not(.mui-branch)::after,
[dir="rtl"] .header .dropdown > .btn-outline-light.bg-white:not(.btn-icon):not(.mui-branch)::after {
    margin-right: 8px !important;
    margin-left: 0 !important;
}

.layout-mode-rtl .dropdown-menu,
[dir="rtl"] .dropdown-menu {
    text-align: right;
}

.layout-mode-rtl .dropdown-toggle::after,
[dir="rtl"] .dropdown-toggle::after {
    margin-right: 0.35em !important;
    margin-left: 0 !important;
}

/* Sidebar in RTL */
.layout-mode-rtl .sidebar,
[dir="rtl"] .sidebar {
    right: 0 !important;
    left: auto !important;
    border-right: 0 !important;
    border-left: 1px solid #E9EDF4 !important;
}

/* Sidebar Brand Card */
.layout-mode-rtl .sidebar .mui-brand-card,
[dir="rtl"] .sidebar .mui-brand-card {
    text-align: right !important;
}

/* Sidebar Search Box */
.layout-mode-rtl .sidebar .mui-side-search i,
[dir="rtl"] .sidebar .mui-side-search i {
    right: 12px !important;
    left: auto !important;
}

.layout-mode-rtl .sidebar .mui-side-search input,
[dir="rtl"] .sidebar .mui-side-search input {
    padding: 0 38px 0 12px !important;
    text-align: right !important;
}

/* Sidebar Menu Header */
.layout-mode-rtl .sidebar .sidebar-menu .submenu-hdr,
[dir="rtl"] .sidebar .sidebar-menu .submenu-hdr {
    text-align: right !important;
}

/* Sidebar Menu Link Icon Margin Fix */
.layout-mode-rtl .sidebar .sidebar-menu ul li a > i,
[dir="rtl"] .sidebar .sidebar-menu ul li a > i {
    margin-right: 0 !important;
    margin-left: 10px !important;
}

/* Sidebar Menu Arrow Position Fix */
.layout-mode-rtl .sidebar .sidebar-menu ul li a .menu-arrow,
[dir="rtl"] .sidebar .sidebar-menu ul li a .menu-arrow {
    margin-left: 0 !important;
    margin-right: auto !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
}

.layout-mode-rtl .sidebar .sidebar-menu ul li a span:not(.menu-arrow),
[dir="rtl"] .sidebar .sidebar-menu ul li a span:not(.menu-arrow) {
    text-align: right !important;
}

/* Reset sidebar menu list indentation */
.layout-mode-rtl .sidebar .sidebar-menu nav,
.layout-mode-rtl .sidebar .sidebar-menu nav ul,
.layout-mode-rtl .sidebar .sidebar-menu nav li,
.layout-mode-rtl .sidebar .sidebar-menu ul,
.layout-mode-rtl .sidebar .sidebar-menu li,
[dir="rtl"] .sidebar .sidebar-menu nav,
[dir="rtl"] .sidebar .sidebar-menu nav ul,
[dir="rtl"] .sidebar .sidebar-menu nav li,
[dir="rtl"] .sidebar .sidebar-menu ul,
[dir="rtl"] .sidebar .sidebar-menu li {
    list-style: none !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Sidebar Submenu items */
.layout-mode-rtl .sidebar .sidebar-menu ul ul li a,
[dir="rtl"] .sidebar .sidebar-menu ul ul li a {
    padding-right: 12px !important;
    padding-left: 10px !important;
    text-align: right !important;
}

.layout-mode-rtl .sidebar .sidebar-menu > ul > li ul li a span,
[dir="rtl"] .sidebar .sidebar-menu > ul > li ul li a span {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Page wrapper margin in RTL */
.layout-mode-rtl .page-wrapper,
[dir="rtl"] .page-wrapper {
    margin-right: 280px !important;
    margin-left: 0 !important;
}

@media (min-width: 992px) {
    .layout-mode-rtl.mini-sidebar .page-wrapper,
    [dir="rtl"] body.mini-sidebar .page-wrapper {
        margin-right: 84px !important;
        margin-left: 0 !important;
    }
}

/* Mobile Responsive Sidebar for RTL */
@media (max-width: 991.98px) {
    .layout-mode-rtl .sidebar,
    [dir="rtl"] .sidebar {
        right: 0 !important;
        left: auto !important;
        margin-left: 0 !important;
        margin-right: -280px !important;
        z-index: 1041 !important;
        box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18) !important;
        -webkit-transition: all 0.3s ease !important;
        -ms-transition: all 0.3s ease !important;
        transition: all 0.3s ease !important;
    }

    .layout-mode-rtl.slide-nav .sidebar,
    .layout-mode-rtl .slide-nav .sidebar,
    .slide-nav .layout-mode-rtl .sidebar,
    .slide-nav [dir="rtl"] .sidebar,
    [dir="rtl"] .slide-nav .sidebar,
    html.menu-opened .layout-mode-rtl .sidebar,
    html.menu-opened [dir="rtl"] .sidebar {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .layout-mode-rtl .header .mobile_btn,
    [dir="rtl"] .header .mobile_btn {
        right: 0 !important;
        left: auto !important;
    }

    .layout-mode-rtl .header .header-left,
    [dir="rtl"] .header .header-left {
        padding-right: 60px !important;
        padding-left: 20px !important;
    }

    .layout-mode-rtl .page-wrapper,
    [dir="rtl"] .page-wrapper {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 575.98px) {
    .layout-mode-rtl .sidebar,
    [dir="rtl"] .sidebar {
        width: 86% !important;
        margin-right: -86% !important;
        margin-left: 0 !important;
    }

    .layout-mode-rtl.slide-nav .sidebar,
    .layout-mode-rtl .slide-nav .sidebar,
    .slide-nav .layout-mode-rtl .sidebar,
    .slide-nav [dir="rtl"] .sidebar,
    [dir="rtl"] .slide-nav .sidebar,
    html.menu-opened .layout-mode-rtl .sidebar,
    html.menu-opened [dir="rtl"] .sidebar {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* Datepicker & Calendar Pickers */
.layout-mode-rtl .cal-icon,
.layout-mode-rtl .date-pic .cal-icon,
.layout-mode-rtl .timepicker ~ .cal-icon,
.layout-mode-rtl .datetimepicker ~ .cal-icon,
[dir="rtl"] .cal-icon,
[dir="rtl"] .date-pic .cal-icon,
[dir="rtl"] .timepicker ~ .cal-icon,
[dir="rtl"] .datetimepicker ~ .cal-icon {
    left: 12px !important;
    right: auto !important;
}

.layout-mode-rtl .date-pic input,
.layout-mode-rtl .datetimepicker,
.layout-mode-rtl .timepicker,
[dir="rtl"] .date-pic input,
[dir="rtl"] .datetimepicker,
[dir="rtl"] .timepicker {
    padding-left: 36px !important;
    padding-right: 12px !important;
    text-align: right !important;
}

/* Card Accent Borders & Titles */
.layout-mode-rtl .card .card-header.card-header-accent .card-title,
[dir="rtl"] .card .card-header.card-header-accent .card-title {
    padding-left: 0 !important;
    padding-right: 0.7rem !important;
}

.layout-mode-rtl .card .card-header.card-header-accent .card-title::before,
[dir="rtl"] .card .card-header.card-header-accent .card-title::before {
    left: auto !important;
    right: 0 !important;
}

/* Stat & delta badge icons */
.layout-mode-rtl .stat-delta i,
.layout-mode-rtl .card-stat-delta i,
[dir="rtl"] .stat-delta i,
[dir="rtl"] .card-stat-delta i {
    margin-left: 4px;
    margin-right: 0;
}

/* Directional Action Arrows */
.layout-mode-rtl a .ti-arrow-right,
.layout-mode-rtl a .ti-arrow-left,
.layout-mode-rtl a .ti-chevron-right,
.layout-mode-rtl a .ti-chevron-left,
.layout-mode-rtl button .ti-arrow-right,
.layout-mode-rtl button .ti-arrow-left,
.layout-mode-rtl button .ti-chevron-right,
.layout-mode-rtl button .ti-chevron-left,
.layout-mode-rtl .btn .ti-arrow-right,
.layout-mode-rtl .btn .ti-arrow-left,
.layout-mode-rtl .btn .ti-chevron-right,
.layout-mode-rtl .btn .ti-chevron-left,
.layout-mode-rtl .anew-arrow,
.layout-mode-rtl .ay-arrow,
[dir="rtl"] a .ti-arrow-right,
[dir="rtl"] a .ti-arrow-left,
[dir="rtl"] a .ti-chevron-right,
[dir="rtl"] a .ti-chevron-left,
[dir="rtl"] button .ti-arrow-right,
[dir="rtl"] button .ti-arrow-left,
[dir="rtl"] button .ti-chevron-right,
[dir="rtl"] button .ti-chevron-left,
[dir="rtl"] .btn .ti-arrow-right,
[dir="rtl"] .btn .ti-arrow-left,
[dir="rtl"] .btn .ti-chevron-right,
[dir="rtl"] .btn .ti-chevron-left,
[dir="rtl"] .anew-arrow,
[dir="rtl"] .ay-arrow {
    display: inline-block;
    transform: scaleX(-1);
}

/* Topbar status dots in RTL: keep on the right (opposite of left .mui-count badge) */
.layout-mode-rtl .notification-status-dot,
.layout-mode-rtl .chat-status-dot,
[dir="rtl"] .notification-status-dot,
[dir="rtl"] .chat-status-dot {
    right: 5px !important;
    left: auto !important;
}

/* Header Brand Name in RTL */
.layout-mode-rtl .header .header-left .aea-brand-name,
[dir="rtl"] .header .header-left .aea-brand-name {
    font-family: 'beIN', system-ui, sans-serif !important;
    font-size: 16px;
}

/* Tooltip & Popover Typography in RTL / Arabic */
.layout-mode-rtl .tooltip,
.layout-mode-rtl .tooltip-inner,
.layout-mode-rtl .popover,
.layout-mode-rtl .popover-body,
.layout-mode-rtl .popover-header,
[dir="rtl"] .tooltip,
[dir="rtl"] .tooltip-inner,
[dir="rtl"] .popover,
[dir="rtl"] .popover-body,
[dir="rtl"] .popover-header,
html[lang="ar"] .tooltip,
html[lang="ar"] .tooltip-inner,
html[lang="ar"] .popover {
    font-family: 'beIN', system-ui, -apple-system, sans-serif !important;
    letter-spacing: 0 !important;
}

.layout-mode-rtl .tooltip-inner,
[dir="rtl"] .tooltip-inner,
html[lang="ar"] .tooltip-inner {
    font-size: 12px;
    line-height: 1.5;
    padding: 6px 10px;
}

/* RTL Table Responsive: eliminate false horizontal scrollbar line and gap */
.layout-mode-rtl .table-responsive,
[dir="rtl"] .table-responsive {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.layout-mode-rtl .table-responsive::-webkit-scrollbar,
[dir="rtl"] .table-responsive::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.layout-mode-rtl .table-responsive > .table,
[dir="rtl"] .table-responsive > .table {
    margin-bottom: 0;
}

/* Ensure all form labels always use the beIN font */
.layout-mode-rtl .form-label,
.layout-mode-rtl label,
[dir="rtl"] .form-label,
[dir="rtl"] label {
    font-family: 'beIN', system-ui, -apple-system, sans-serif !important;
}

/* For labels with class="required", add the red asterisk cleanly in Arial */
.layout-mode-rtl .form-label.required::after,
.layout-mode-rtl label.required::after,
[dir="rtl"] .form-label.required::after,
[dir="rtl"] label.required::after {
    content: " *";
    color: #dc3545;
    font-family: Arial, Tahoma, sans-serif !important;
    font-weight: bold;
    font-size: 14px;
}

/* For labels with explicit <span class="text-danger">*</span>, style ONLY the span */
.layout-mode-rtl .form-label > .text-danger,
.layout-mode-rtl label > .text-danger,
[dir="rtl"] .form-label > .text-danger,
[dir="rtl"] label > .text-danger {
    font-family: Arial, Tahoma, sans-serif !important;
    font-weight: bold;
    font-size: 14px;
}

/* Branch & Batch Dropdowns Typography in RTL (Excluding Icons) */
.layout-mode-rtl .ay-menu,
.layout-mode-rtl .ay-menu *:not(i):not([class^="ti-"]):not([class*=" ti-"]):not(.ti),
[dir="rtl"] .ay-menu,
[dir="rtl"] .ay-menu *:not(i):not([class^="ti-"]):not([class*=" ti-"]):not(.ti),
html[lang="ar"] .ay-menu,
html[lang="ar"] .ay-menu *:not(i):not([class^="ti-"]):not([class*=" ti-"]):not(.ti) {
    font-family: 'beIN', system-ui, -apple-system, sans-serif !important;
}

/* Ensure Tabler Icons always retain their font family across all dropdowns */
.header i.ti,
.header [class^="ti-"],
.header [class*=" ti-"],
.ay-menu i,
.ay-menu .ti,
.ay-menu [class^="ti-"],
.ay-menu [class*=" ti-"],
.anew-menu i,
.anew-menu .ti,
.anew-menu [class^="ti-"],
.anew-menu [class*=" ti-"] {
    font-family: "tabler-icons" !important;
}