/* ── Font families ─────────────────────────────────────── */
[dir="rtl"] { --font-main: 'Tajawal', sans-serif; }
[dir="ltr"] { --font-main: 'Tajawal', sans-serif; }
body { font-family: var(--font-main); }

/* ── Sidebar position ──────────────────────────────────── */
/* RTL: sidebar on the RIGHT (physical right:0 in base CSS is already correct) */
[dir="rtl"] .sidebar {
    right: 0;
    left: auto;
    border-right: none;
    border-left: 1px solid var(--border);
}

/* LTR: sidebar on the LEFT */
[dir="ltr"] .sidebar {
    right: auto;
    left: 0;
    border-left: none;
    border-right: 1px solid var(--border);
}

/* ── Main area margin (desktop default) ────────────────── */
/*
 * RTL: sidebar is on the RIGHT → base CSS margin-right:240px is CORRECT.
 *      We do NOT override it here (previous bug was overriding it wrongly).
 *
 * LTR: sidebar is on the LEFT → we need margin-LEFT:240px.
 *      Base CSS uses margin-right:240px (physical), so we override for LTR only.
 */
[dir="ltr"] .main-area {
    margin-right: 0;
    margin-left: var(--sidebar-width);
}

/* ── Main area margin (tablet 769–1024px) ──────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    /* RTL: sidebar collapses to 64px on right — base CSS handles margin-right:64px ✓ */

    /* LTR: sidebar collapses to 64px on left */
    [dir="ltr"] .main-area {
        margin-right: 0;
        margin-left: var(--sidebar-collapsed-width);
    }
}

/* ── Mobile (≤768px): sidebar hidden, no margin needed ─── */
@media (max-width: 768px) {
    /* RTL: sidebar slides off to the right */
    /* (base CSS already does transform: translateX(100%) — no override needed) */

    /* LTR: sidebar slides off to the left */
    [dir="ltr"] .sidebar {
        transform: translateX(-100%);
    }
    [dir="ltr"] body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    /* Both directions: no margin needed when sidebar is hidden */
    [dir="ltr"] .main-area {
        margin-left: 0;
        margin-right: 0;
    }
    /* RTL margin is reset by .main-area { margin: 0 !important } in style.css ✓ */
}

/* ── Text alignment ────────────────────────────────────── */
[dir="ltr"] .sidebar-nav-btn { text-align: left; }
[dir="rtl"] .sidebar-nav-btn { text-align: right; }

/* ── Topbar alignment ──────────────────────────────────── */
[dir="ltr"] .topbar-right { margin-left: auto; margin-right: 0; }
[dir="rtl"] .topbar-right { margin-right: auto; margin-left: 0; }
[dir="ltr"] .topbar-left  { flex-direction: row; }
[dir="ltr"] .user-meta    { align-items: flex-start; }

/* ── Collapse button flip ──────────────────────────────── */
[dir="ltr"] .sidebar-collapse-btn { transform: scaleX(-1); }

/* ── Utility ───────────────────────────────────────────── */
.ml-auto { margin-inline-start: auto; }
.mr-auto { margin-inline-end: auto; }
[dir="rtl"] .ml-auto { margin-inline-start: 0; margin-inline-end: auto; }
[dir="rtl"] .mr-auto { margin-inline-end: 0; margin-inline-start: auto; }
[dir="rtl"] .material-symbols-outlined.flip-rtl { transform: scaleX(-1); }