/* =====================================================================
   ERP — Arabic / RTL overrides
   Loaded only when the UI language is Arabic (after erp.css), together
   with Bootstrap's official RTL build (bootstrap.rtl.min.css), which
   already mirrors every Bootstrap component and the ms-* / me-* /
   text-start / text-end / float-* utilities.
   This file mirrors what the ERP's own CSS hard-codes with left/right.
   ===================================================================== */

/* ---------- Typography ------------------------------------------------ */
/* Cairo everywhere in Arabic mode (layout, forms, tables, dialogs, print documents,
   payslip, login). Code stays monospace; icon fonts are applied on ::before so they are unaffected. */
html[dir="rtl"] body,
html[dir="rtl"] body *:not(code):not(pre):not(kbd):not(samp):not(.bi):not([class*=" bi-"]):not([class^="bi-"]) {
    font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif !important;
}
html[dir="rtl"] code, html[dir="rtl"] pre, html[dir="rtl"] kbd, html[dir="rtl"] samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
html[dir="rtl"] body { font-family: 'Cairo', system-ui, sans-serif; }

/* Arabic is a cursive script: letter-spacing breaks the joins and there is no upper-case */
html[dir="rtl"] *,
html[dir="rtl"] *::before,
html[dir="rtl"] *::after {
    letter-spacing: 0 !important;
    text-transform: none !important;
}
html[dir="rtl"] body { line-height: 1.7; }

/* Numbers, e-mail, phone, dates and codes stay left-to-right but sit on the right edge */
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="date"],
html[dir="rtl"] input[type="time"],
html[dir="rtl"] input[type="datetime-local"],
html[dir="rtl"] input[type="month"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[data-datepicker],
html[dir="rtl"] input[data-datetimepicker],
html[dir="rtl"] .flatpickr-input,
html[dir="rtl"] .ltr {
    direction: ltr;
    text-align: right;
}
html[dir="rtl"] input[type="password"]::placeholder { text-align: right; }

/* ---------- Sidebar --------------------------------------------------- */
html[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
    border-right: 0;
    border-left: 1px solid var(--gray-200);
}
html[dir="rtl"] .nav-submenu { padding-left: 0; padding-right: 42px; }
html[dir="rtl"] .nav-link .nav-arrow { transform: scaleX(-1); }          /* chevron points inward */
html[dir="rtl"] .nav-link[aria-expanded="true"] .nav-arrow { transform: rotate(90deg); }
html[dir="rtl"] .user-info { text-align: right; }
html[dir="rtl"] .dropdown-menu-up { text-align: right; }

/* ---------- Top bar & content ---------------------------------------- */
html[dir="rtl"] .topbar {
    left: 0;
    right: var(--sidebar-width);
    transition: right 0.2s;
}
html[dir="rtl"] .topbar.sidebar-collapsed { left: 0; right: var(--sidebar-collapsed); }
html[dir="rtl"] .main-content {
    margin-left: 0;
    margin-right: var(--sidebar-width);
    transition: margin-right .2s;
}
html[dir="rtl"] .main-content.sidebar-collapsed { margin-left: 0; margin-right: var(--sidebar-collapsed); }
html[dir="rtl"] .topbar-badge { right: auto; left: -4px; }

/* Notifications */
html[dir="rtl"] .notification-dropdown { text-align: right; }

/* Toasts: top-left corner in RTL */
html[dir="rtl"] #toastContainer { right: auto; left: 20px; }
html[dir="rtl"] .erp-toast { border-left: 0; border-right: 4px solid transparent; }
html[dir="rtl"] .erp-toast.success { border-right-color: var(--success); }
html[dir="rtl"] .erp-toast.danger  { border-right-color: var(--danger); }
html[dir="rtl"] .erp-toast.warning { border-right-color: var(--warning); }
html[dir="rtl"] .erp-toast.info    { border-right-color: var(--primary); }

/* Mobile drawer slides in from the right */
@media (max-width: 991px) {
    html[dir="rtl"] .sidebar { transform: translateX(100%); }
    html[dir="rtl"] .sidebar.mobile-open { transform: translateX(0); }
    html[dir="rtl"] .topbar,
    html[dir="rtl"] .main-content { left: 0; right: 0; margin-left: 0; margin-right: 0; }
}

/* ---------- Directional icons ---------------------------------------- */
html[dir="rtl"] .bi-chevron-right::before,
html[dir="rtl"] .bi-chevron-left::before,
html[dir="rtl"] .bi-chevron-double-right::before,
html[dir="rtl"] .bi-chevron-double-left::before,
html[dir="rtl"] .bi-arrow-right::before,
html[dir="rtl"] .bi-arrow-left::before,
html[dir="rtl"] .bi-arrow-right-short::before,
html[dir="rtl"] .bi-arrow-left-short::before,
html[dir="rtl"] .bi-caret-right-fill::before,
html[dir="rtl"] .bi-caret-left-fill::before,
html[dir="rtl"] .bi-box-arrow-right::before,
html[dir="rtl"] .bi-box-arrow-left::before,
html[dir="rtl"] .bi-box-arrow-in-right::before,
html[dir="rtl"] .bi-box-arrow-in-left::before,
html[dir="rtl"] .bi-reply::before {
    display: inline-block;
    transform: scaleX(-1);
}
html[dir="rtl"] .nav-arrow.bi-chevron-right::before { transform: none; }  /* handled on the element above */

/* ---------- Accent borders used on dashboard / stat cards ------------- */
html[dir="rtl"] .stat-card,
html[dir="rtl"] .card[style*="border-inline-start"] { text-align: right; }

/* ---------- Forms ----------------------------------------------------- */
html[dir="rtl"] .form-select {
    background-position: left .75rem center;
    padding-left: 2.25rem;
    padding-right: .85rem;
}
html[dir="rtl"] .form-check { padding-left: 0; padding-right: 1.5em; }
html[dir="rtl"] .form-check .form-check-input { float: right; margin-left: 0; margin-right: -1.5em; }
html[dir="rtl"] .input-group > .form-control:not(:last-child),
html[dir="rtl"] .input-group > .form-select:not(:last-child) { border-radius: 0 var(--bs-border-radius, 8px) var(--bs-border-radius, 8px) 0; }
html[dir="rtl"] .invalid-feedback, html[dir="rtl"] .valid-feedback { text-align: right; }

/* ---------- Tables / DataTables -------------------------------------- */
html[dir="rtl"] .table > :not(caption) > * > * { text-align: inherit; }
html[dir="rtl"] table.dataTable thead > tr > th.sorting,
html[dir="rtl"] table.dataTable thead > tr > th.sorting_asc,
html[dir="rtl"] table.dataTable thead > tr > th.sorting_desc,
html[dir="rtl"] table.dataTable thead > tr > td.sorting {
    padding-right: 1rem;
    padding-left: 26px;
}
html[dir="rtl"] table.dataTable thead > tr > th.sorting::before,
html[dir="rtl"] table.dataTable thead > tr > th.sorting::after,
html[dir="rtl"] table.dataTable thead > tr > th.sorting_asc::before,
html[dir="rtl"] table.dataTable thead > tr > th.sorting_asc::after,
html[dir="rtl"] table.dataTable thead > tr > th.sorting_desc::before,
html[dir="rtl"] table.dataTable thead > tr > th.sorting_desc::after { right: auto; left: 1em; }
html[dir="rtl"] div.dataTables_wrapper div.dataTables_filter { text-align: left; }
html[dir="rtl"] div.dataTables_wrapper div.dataTables_filter input { margin-left: 0; margin-right: .5em; }
html[dir="rtl"] div.dataTables_wrapper div.dataTables_length { text-align: right; }
html[dir="rtl"] div.dataTables_wrapper div.dataTables_paginate { text-align: left; }
html[dir="rtl"] div.dataTables_wrapper div.dataTables_info { text-align: right; }
html[dir="rtl"] .pagination { padding-right: 0; }

/* ---------- Select2 / Flatpickr -------------------------------------- */
html[dir="rtl"] .select2-container { text-align: right; }
html[dir="rtl"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { text-align: right; }
html[dir="rtl"] .select2-dropdown { direction: rtl; text-align: right; }
html[dir="rtl"] .flatpickr-calendar { direction: rtl; }
html[dir="rtl"] .flatpickr-calendar .numInputWrapper input,
html[dir="rtl"] .flatpickr-time input { direction: ltr; }

/* ---------- Modals / dropdowns / alerts ------------------------------ */
html[dir="rtl"] .modal-header .btn-close { margin: calc(-.5 * var(--bs-modal-header-padding-y, .5rem)) auto calc(-.5 * var(--bs-modal-header-padding-y, .5rem)) calc(-.5 * var(--bs-modal-header-padding-x, .5rem)); }
html[dir="rtl"] .alert-dismissible { padding-right: 1rem; padding-left: 3rem; }
html[dir="rtl"] .alert-dismissible .btn-close { right: auto; left: 0; }
html[dir="rtl"] .dropdown-menu { text-align: right; }
html[dir="rtl"] .toast-body { text-align: right; }

/* ---------- Print: sidebar/topbar are hidden anyway ------------------ */
@media print {
    html[dir="rtl"] .main-content { margin-right: 0 !important; }
}

/* =====================================================================
   Standalone documents (payslip, leave / loan / asset / clearance forms,
   petty cash, invoices …) — styled by erp-documents.css or inline CSS.
   ===================================================================== */
html[dir="rtl"] .doc-body,
html[dir="rtl"] .doc-page { direction: rtl; }
html[dir="rtl"] .doc-meta { text-align: left; }
html[dir="rtl"] .doc-no-print { right: auto; left: 26px; }
html[dir="rtl"] .doc-notice { border-left: 1px solid var(--doc-line); border-right: 3px solid var(--doc-ink-soft); }
html[dir="rtl"] .doc-table thead th { text-align: right; }
html[dir="rtl"] .doc-table thead th.doc-num,
html[dir="rtl"] .doc-table thead th.doc-right,
html[dir="rtl"] .doc-table tbody td.doc-num,
html[dir="rtl"] .doc-table tbody td.doc-right { text-align: left; }
html[dir="rtl"] .doc-totals { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .doc-totals td:last-child,
html[dir="rtl"] .doc-totals tr.doc-totals-grand td:last-child,
html[dir="rtl"] .doc-kv-row .v { text-align: left; }
html[dir="rtl"] .doc-route-side--end { text-align: left; }
html[dir="rtl"] .doc-field-value,
html[dir="rtl"] .doc-field-label { text-align: right; }
@media (max-width: 720px) { html[dir="rtl"] .doc-meta { text-align: right; } }

/* Payslip (inline CSS in employees/views/payslip.php) */
html[dir="rtl"] .slip-title { text-align: left; }
html[dir="rtl"] .slip-header, html[dir="rtl"] .emp-bar, html[dir="rtl"] .slip-body,
html[dir="rtl"] .line-item, html[dir="rtl"] .slip-footer { direction: rtl; }
html[dir="rtl"] .line-value { direction: ltr; unicode-bidi: plaintext; }
html[dir="rtl"] .sig-box, html[dir="rtl"] .summary-box { text-align: center; }