/** * RTL layout overrides — load after admin.css * Active when (Arabic). */ html[dir="rtl"] body { font-family: "Noto Sans Arabic", "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; } /* Desktop: .shell keeps default flex-direction: row; with dir=rtl the main axis starts on the right, so the first flex child (sidebar) is on the right. Do not use row-reverse here — it would move the sidebar to the left. */ /* Mobile sidebar: fixed to the right, off-canvas to the right */ html[dir="rtl"] .sidebar { left: auto; right: 0; border-right: none; border-left: 1px solid var(--sidebar-border); transform: translateX(100%); } html[dir="rtl"] .sidebar.is-open { transform: translateX(0); } @media (min-width: 1024px) { html[dir="rtl"] .sidebar { transform: none; } } /* Nav links: icon on the “end” side of the label */ html[dir="rtl"] .sidebar-link, html[dir="rtl"] .sidebar-logout { flex-direction: row-reverse; } html[dir="rtl"] .sidebar-brand { flex-direction: row-reverse; } /* Top bar: swap clusters */ html[dir="rtl"] .topbar { flex-direction: row-reverse; } html[dir="rtl"] .topbar-left { flex-direction: row-reverse; } html[dir="rtl"] .topbar-right { justify-content: flex-start; } /* Search icon + padding */ html[dir="rtl"] .topbar-search-wrap svg { left: auto; right: 0.75rem; } html[dir="rtl"] .topbar-search { padding: 0.5rem 2.25rem 0.5rem 0.75rem; } /* User menu trigger */ html[dir="rtl"] .user-menu-trigger { flex-direction: row-reverse; } html[dir="rtl"] .user-dropdown { right: auto; left: 0; } html[dir="rtl"] .user-dropdown a { flex-direction: row-reverse; text-align: right; } html[dir="rtl"] .user-dropdown__email { text-align: right; } /* Language switcher */ html[dir="rtl"] .lang-switch { flex-direction: row-reverse; } /* Page header actions */ html[dir="rtl"] .page-head-row { flex-direction: row-reverse; } html[dir="rtl"] .page-title, html[dir="rtl"] .page-desc { text-align: right; } html[dir="rtl"] .dash-card-head { flex-direction: row-reverse; } html[dir="rtl"] .dash-card-head > div { text-align: right; } /* Form actions */ html[dir="rtl"] .form-actions { justify-content: flex-start; } html[dir="rtl"] .form-section h2, html[dir="rtl"] .label { text-align: right; } html[dir="rtl"] .check-row { flex-direction: row-reverse; } /* Stat card glow */ html[dir="rtl"] .stat-card__glow { right: auto; left: -1.5rem; } html[dir="rtl"] .stat-card__label, html[dir="rtl"] .stat-card__value, html[dir="rtl"] .stat-card__hint { text-align: right; } /* Tip cards */ html[dir="rtl"] .tip-card__row { flex-direction: row-reverse; } html[dir="rtl"] .tip-card__tag, html[dir="rtl"] .tip-card__title, html[dir="rtl"] .tip-card__text { text-align: right; } html[dir="rtl"] .tip-card__meta { text-align: right; } /* Chat: mirror outgoing / incoming */ html[dir="rtl"] .chat-msg--out { justify-content: flex-start; } html[dir="rtl"] .chat-msg:not(.chat-msg--out) { justify-content: flex-end; } html[dir="rtl"] .chat-bubble--out { border-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); border-bottom-left-radius: 6px; } html[dir="rtl"] .chat-bubble--out .chat-time { text-align: left; } html[dir="rtl"] .chat-bubble--in { border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: 6px; } html[dir="rtl"] .chat-bubble--in .chat-name, html[dir="rtl"] .chat-bubble--in .chat-time { text-align: right; } html[dir="rtl"] .chat-input-row { flex-direction: row-reverse; } /* Tables */ html[dir="rtl"] .data-table th, html[dir="rtl"] .data-table td { text-align: right; } html[dir="rtl"] .data-table .cell-end { text-align: end; } html[dir="rtl"] .row-progress { flex-direction: row-reverse; } html[dir="rtl"] .basic-table th, html[dir="rtl"] .basic-table td { text-align: right; } html[dir="rtl"] .basic-table caption { text-align: right; } html[dir="rtl"] .table-toolbar__popover { right: auto; left: 0; } html[dir="rtl"] .breadcrumb-nav { text-align: right; } html[dir="rtl"] .card__foot--split { flex-direction: row-reverse; } html[dir="rtl"] .card__head--split { flex-direction: row-reverse; } html[dir="rtl"] .card__head .card__title, html[dir="rtl"] .card__head .card__sub { text-align: right; } html[dir="rtl"] .card__foot { text-align: right; } /* Profile */ html[dir="rtl"] .profile-card { flex-direction: row-reverse; } html[dir="rtl"] .profile-card .profile-name, html[dir="rtl"] .profile-card .profile-role { text-align: right; } html[dir="rtl"] .muted-note { text-align: right; } /* Login */ html[dir="rtl"] .login-top { flex-direction: row-reverse; } html[dir="rtl"] .login-top-actions { flex-direction: row-reverse; } html[dir="rtl"] .login-brand { flex-direction: row-reverse; } html[dir="rtl"] .login-card h1, html[dir="rtl"] .login-card > p { text-align: right; } html[dir="rtl"] .login-demo { text-align: center; } html[dir="rtl"] .alert { text-align: right; } /* Badges stay inline */ html[dir="rtl"] .badge { display: inline-flex; } /* Chart containers keep LTR if needed — Chart.js handles rtl option; canvas is neutral */ html[dir="rtl"] .chart-box { direction: ltr; } html[dir="rtl"] .chart-box canvas { direction: ltr; } /* Widen sidebar brand text alignment */ html[dir="rtl"] .sidebar-brand__name, html[dir="rtl"] .sidebar-brand__tag { text-align: right; } html[dir="rtl"] .topbar-welcome__label, html[dir="rtl"] .topbar-welcome__name { text-align: right; } /* Pill / link in dashboard */ html[dir="rtl"] .pill { direction: rtl; }