/* ════════════════════════════════════════
   rtl.css — Arabic RTL Support
   Najeeda Corporate Services
   ════════════════════════════════════════ */

/* ── Base RTL Direction ─────────────────────────────── */
html[dir="rtl"] {
    font-family: 'Tajawal', 'Segoe UI', Arial, sans-serif;
}

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

/* ── Topbar RTL ──────────────────────────────────────── */
html[dir="rtl"] .topbar {
    direction: rtl;
}
html[dir="rtl"] .topbar-brand {
    flex-direction: row-reverse;
}
html[dir="rtl"] .topbar-right {
    flex-direction: row-reverse;
}
html[dir="rtl"] .topbar-user-info {
    text-align: left;
}

/* ── Tabs RTL ────────────────────────────────────────── */
html[dir="rtl"] .tabs {
    direction: rtl;
}

/* ── Section & Cards ─────────────────────────────────── */
html[dir="rtl"] .section-head {
    flex-direction: row-reverse;
}
html[dir="rtl"] .section-body {
    direction: rtl;
    text-align: right;
}

/* ── Stats Grid ──────────────────────────────────────── */
html[dir="rtl"] .stat-card {
    direction: rtl;
    text-align: right;
}
html[dir="rtl"] .stat-icon {
    margin-left: 0;
    margin-right: 0;
}

/* ── Quick Grid ──────────────────────────────────────── */
html[dir="rtl"] .quick-card {
    direction: rtl;
    text-align: right;
}

/* ── Search Bar ──────────────────────────────────────── */
html[dir="rtl"] .search-bar {
    direction: rtl;
    flex-wrap: wrap;
}
html[dir="rtl"] .search-bar input,
html[dir="rtl"] .search-bar select {
    direction: ltr;
    text-align: left;
}

/* ── Filter Row ──────────────────────────────────────── */
html[dir="rtl"] .filter-row {
    direction: rtl;
}

/* ── Tables ──────────────────────────────────────────── */
html[dir="rtl"] table {
    direction: rtl;
}
html[dir="rtl"] th,
html[dir="rtl"] td {
    text-align: right;
}
html[dir="rtl"] thead tr {
    direction: rtl;
}
html[dir="rtl"] .tbl-wrap {
    direction: rtl;
}
html[dir="rtl"] .actions {
    justify-content: flex-start;
}

/* ── Forms & Inputs ──────────────────────────────────── */
html[dir="rtl"] .fg label,
html[dir="rtl"] label {
    display: block;
    text-align: right;
}
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] select,
html[dir="rtl"] textarea {
    direction: ltr;      /* data entry stays LTR */
    text-align: left;
}
html[dir="rtl"] textarea[data-allow-arabic="true"] {
    direction: rtl;
    text-align: right;
}
html[dir="rtl"] .form-grid {
    direction: rtl;
}
html[dir="rtl"] .fg {
    direction: rtl;
    text-align: right;
}

/* ── Modals ──────────────────────────────────────────── */
html[dir="rtl"] .modal {
    direction: rtl;
    text-align: right;
}
html[dir="rtl"] .modal-header {
    flex-direction: row-reverse;
}
html[dir="rtl"] .modal-footer {
    flex-direction: row-reverse;
}
html[dir="rtl"] .overlay {
    direction: rtl;
}

/* ── Buttons ─────────────────────────────────────────── */
html[dir="rtl"] .btn-group,
html[dir="rtl"] .modal-footer {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* ── Cards (User, Employee, Company) ────────────────── */
html[dir="rtl"] .user-card {
    direction: rtl;
    flex-direction: row-reverse;
}
html[dir="rtl"] .user-info {
    text-align: right;
}
html[dir="rtl"] .user-actions {
    flex-direction: row-reverse;
}
html[dir="rtl"] .emp-card {
    direction: rtl;
}
html[dir="rtl"] .emp-card-header {
    flex-direction: row-reverse;
}
html[dir="rtl"] .emp-card-info {
    text-align: right;
}
html[dir="rtl"] .emp-card-actions {
    flex-direction: row-reverse;
    justify-content: flex-end;
}
html[dir="rtl"] .comp-card {
    direction: rtl;
    text-align: right;
}
html[dir="rtl"] .comp-card-header {
    flex-direction: row-reverse;
}
html[dir="rtl"] .comp-card-actions {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* ── Badge & Status ──────────────────────────────────── */
html[dir="rtl"] .badge {
    direction: ltr;
}

/* ── Report Cards ────────────────────────────────────── */
html[dir="rtl"] .report-card,
html[dir="rtl"] .user-report-card {
    direction: rtl;
    text-align: right;
}
html[dir="rtl"] .user-report-card .user-info-row {
    flex-direction: row-reverse;
}

/* ── Invoice Standalone ──────────────────────────────── */
html[dir="rtl"] .inv-ctrl-row {
    flex-direction: row-reverse;
    direction: rtl;
}

/* ── View Grid (detail modal rows) ──────────────────── */
html[dir="rtl"] .view-grid {
    direction: rtl;
}
html[dir="rtl"] .vg-row {
    flex-direction: row-reverse;
}

/* ── Section Header w/ Button ────────────────────────── */
html[dir="rtl"] [style*="justify-content:space-between"] {
    flex-direction: row-reverse;
}

/* ── Customer/Company search badge ──────────────────── */
html[dir="rtl"] .cust-search-wrap {
    direction: rtl;
}
html[dir="rtl"] .sb-selected-badge {
    flex-direction: row-reverse;
}

/* ── Login Page ──────────────────────────────────────── */
html[dir="rtl"] .login-wrap {
    flex-direction: row-reverse;
}
html[dir="rtl"] .login-form-inner {
    direction: rtl;
    text-align: right;
}
html[dir="rtl"] .login-welcome-head {
    flex-direction: row-reverse;
}
html[dir="rtl"] .role-tabs {
    flex-direction: row-reverse;
}
html[dir="rtl"] .fg input,
html[dir="rtl"] .fg select {
    direction: ltr;
    text-align: left;
}

/* ── Topbar right info ───────────────────────────────── */
html[dir="rtl"] .topbar-name2,
html[dir="rtl"] .topbar-role2 {
    text-align: left;
}

/* ── Pagination ──────────────────────────────────────── */
html[dir="rtl"] [style*="justify-content:center"] {
    direction: ltr;
}

/* ── Empty State ─────────────────────────────────────── */
html[dir="rtl"] .empty-state {
    direction: rtl;
}

/* ── Toast Notification ──────────────────────────────── */
html[dir="rtl"] #toastContainer {
    left: 20px;
    right: auto;
}
html[dir="rtl"] .toast {
    direction: rtl;
    flex-direction: row-reverse;
}

/* ── Confirm Dialog ──────────────────────────────────── */
html[dir="rtl"] .confirm-dialog {
    direction: rtl;
    text-align: right;
}
html[dir="rtl"] .confirm-actions {
    flex-direction: row-reverse;
}

/* ══════════════════════════════════════════════════════
   BILINGUAL LABEL HINT (.ar-sub)
   Shown next to English labels in Arabic mode
   ══════════════════════════════════════════════════════ */
.ar-sub {
    font-size: 0.78em;
    color: var(--gray-400);
    font-family: 'Tajawal', sans-serif;
    font-weight: 400;
    margin-right: 4px;
    margin-left: 4px;
    opacity: 0.85;
    direction: rtl;
    unicode-bidi: embed;
}

/* In English mode, ar-sub should never appear — but it won't
   since Lang.label() only injects it in AR mode */

/* ══════════════════════════════════════════
   SIDEBAR RTL
   ══════════════════════════════════════════ */

/* Sidebar on the right in Arabic mode */
html[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
    box-shadow: -3px 0 24px rgba(0,0,0,.32);
}

/* Main content shifts right */
html[dir="rtl"] .main-content {
    margin-left: 0;
    margin-right: var(--sidebar-w);
}
html[dir="rtl"] .sidebar.collapsed ~ .main-content {
    margin-right: var(--sidebar-collapsed-w);
    margin-left: 0;
}

/* Sidebar items text right-aligned */
html[dir="rtl"] .sidebar-item {
    text-align: right;
    flex-direction: row-reverse;
}

/* Active indicator on the right */
html[dir="rtl"] .sidebar-item.active::before {
    left: auto; right: 0;
    border-radius: 3px 0 0 3px;
}

/* Collapse button: flip for RTL — ‹ becomes › at rest (sidebar on right = collapse rightward) */
html[dir="rtl"] .sidebar-collapse-btn { transform: scaleX(-1); }
html[dir="rtl"] .sidebar.collapsed .sidebar-collapse-btn { transform: scaleX(1); }

/* Tooltip appears to the left of sidebar (which is on the right) */
html[dir="rtl"] .sidebar.collapsed .sidebar-item:hover::after {
    left: auto;
    right: calc(100% + 10px);
}

/* Sidebar user row RTL */
html[dir="rtl"] .sidebar-user-row { flex-direction: row-reverse; }
html[dir="rtl"] .sidebar-footer-btns { flex-direction: row-reverse; }

/* Mobile topbar RTL */
html[dir="rtl"] .mobile-topbar { flex-direction: row-reverse; }

/* Sidebar pin RTL — sidebar is on the right, pin sits on its left edge */
html[dir="rtl"] .sidebar-pin {
    left: auto;
    right: calc(var(--sidebar-w) - 11px);
    transform: scaleX(-1);
}
html[dir="rtl"] .sidebar-pin:hover { transform: scaleX(-1) scale(1.18); }
html[dir="rtl"] .sidebar.collapsed ~ .sidebar-pin {
    right: calc(var(--sidebar-collapsed-w) - 11px);
    left: auto;
}

/* Mobile: sidebar slides from right in RTL */
@media (max-width: 768px) {
    html[dir="rtl"] .sidebar {
        left: auto; right: 0;
        transform: translateX(100%);
    }
    html[dir="rtl"] .sidebar.mobile-open {
        transform: translateX(0);
    }
    html[dir="rtl"] .main-content {
        margin-right: 0 !important;
    }
}