/* ============================================================ Right-to-left + Persian typography overrides. Only active when (set for the Farsi locale). NOTE: the AdminLTE layout is a CSS grid. Setting dir="rtl" on makes the browser reverse the grid column order automatically, so the sidebar (grid column 1) moves to the right on its own — we must NOT re-swap the grid template here or it double-flips back to the left. ============================================================ */ html[dir="rtl"] body { font-family: "Vazirmatn", "Vazir", "IRANSans", "IRANSansX", "Tahoma", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; letter-spacing: 0; } /* Sidebar now sits on the right — put its divider on the inner (left) edge. */ html[dir="rtl"] .app-sidebar { border-right: 0; border-left: 1px solid var(--surface-border); } /* Desktop collapse (hamburger button): AdminLTE pulls the sidebar out of the layout with margin-left:-width, which is the wrong side in RTL where the sidebar lives on the right. Mirror it to margin-right. */ html[dir="rtl"] .sidebar-collapse:not(.sidebar-mini) .app-sidebar { margin-left: 0; margin-right: calc(var(--lte-sidebar-width) * -1); } /* Mobile off-canvas: AdminLTE hides the sidebar with margin-left:-width, which only works when it's on the left. In RTL it's on the right, so anchor it right and hide/show with margin-right instead. */ @media (max-width: 991.98px) { html[dir="rtl"] .sidebar-expand-lg .app-sidebar { left: auto; right: 0; margin-left: 0; margin-right: calc(var(--lte-sidebar-width) * -1); } html[dir="rtl"] .sidebar-expand-lg.sidebar-open .app-sidebar { margin-right: 0; } } html[dir="rtl"] .sidebar-menu .nav-link:hover { transform: translateX(-2px); } html[dir="rtl"] .quick-link:hover { transform: translateX(-2px); } /* Stat-card icon is absolutely pinned to the right in LTR; in RTL the label text is right-aligned, so move the icon to the left to avoid overlap. */ html[dir="rtl"] .stat-card .stat-icon { right: auto; left: 1.3rem; } html[dir="rtl"] .small-box .icon { right: auto; left: 12px; } /* Numbers read naturally (no forced tabular slots that look odd with FA digits) */ html[dir="rtl"] .stat-value { font-variant-numeric: normal; } /* Tables / headings align to the start (right) edge */ html[dir="rtl"] .table thead th, html[dir="rtl"] .table tbody td { text-align: right; } html[dir="rtl"] .table th.text-end, html[dir="rtl"] .table td.text-end { text-align: left; } /* Flex helpers that use physical margins flip meaning in RTL */ html[dir="rtl"] .card-header .ms-auto { margin-left: 0 !important; margin-right: auto !important; } /* Input-groups join/round corners assuming LTR in the bundled Bootstrap. In RTL the first child sits on the right and the last child on the left, so flip the rounded corners accordingly. Covers inputs, selects and addons (login username field, the currency picker, etc.). */ html[dir="rtl"] .input-group > :first-child { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-top-right-radius: 12px !important; border-bottom-right-radius: 12px !important; } html[dir="rtl"] .input-group > :last-child { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-top-left-radius: 12px !important; border-bottom-left-radius: 12px !important; } html[dir="rtl"] .input-group > :not(:first-child) { margin-right: -1px; margin-left: 0; border-right: 0; } html[dir="rtl"] .input-group .input-group-text { border-left: 1px solid var(--surface-border-strong); } /* Keep the auth language/theme controls in opposite corners (Bootstrap's start-0/end utilities are physical in the bundled non-RTL build, so set the sides explicitly to stop the buttons overlapping on the left). */ html[dir="rtl"] .auth-theme-toggle { right: auto; left: 1rem; } html[dir="rtl"] .auth-lang-switch { left: auto; right: 1rem; } /* Amount column emphasis */ .amount-cell { font-weight: 600; white-space: nowrap; } /* Navbar right-hand controls: guarantee even spacing in both directions (AdminLTE bundles the non-RTL Bootstrap, whose margin utilities don't flip). */ .app-header .navbar-nav.ms-auto { gap: 0.35rem; } .app-header .navbar-nav.ms-auto .theme-toggle { position: relative; z-index: 1; } /* The icon→label gap (ms-1) and the dropdown caret use physical margins that don't flip in the bundled Bootstrap; correct them so the username/language labels sit on the correct side of their icons in RTL. */ html[dir="rtl"] .app-header .nav-link .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } html[dir="rtl"] .app-header .dropdown-toggle::after { margin-left: 0; margin-right: 0.255em; } html[dir="rtl"] .app-header .user-menu .nav-link, html[dir="rtl"] .app-header .navbar-nav.ms-auto .dropdown-toggle { display: inline-flex; align-items: center; } /* ---------- Custom Jalali date picker ---------- */ .jdp-pop { background: var(--bg-elevated); border: 1px solid var(--surface-border-strong); border-radius: 14px; padding: 0.6rem; width: 264px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.65); z-index: 2000; } .jdp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; gap: 0.3rem; } .jdp-head select.form-select { flex: 1 1 auto; min-width: 0; padding: 0.3rem 0.5rem; border-radius: 8px; font-size: 0.85rem; } .jdp-head .jdp-month { flex: 1 1 58%; } .jdp-head .jdp-year { flex: 1 1 42%; } .jdp-title { font-weight: 600; color: var(--text-primary); font-size: 0.95rem; } .jdp-nav { background: var(--surface); border: 1px solid var(--surface-border); color: var(--text-secondary); border-radius: 8px; width: 30px; height: 30px; line-height: 1; cursor: pointer; flex: 0 0 auto; } .jdp-nav:hover { color: var(--text-primary); background: var(--surface-strong); } .jdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .jdp-wd { text-align: center; font-size: 0.7rem; color: var(--text-muted); padding: 0.25rem 0; } .jdp-day { background: transparent; border: 0; color: var(--text-primary); border-radius: 8px; height: 32px; cursor: pointer; font-size: 0.85rem; font-variant-numeric: normal; } .jdp-day:hover { background: var(--surface-strong); } .jdp-empty { visibility: hidden; pointer-events: none; } .jdp-sel { background: var(--gradient-primary); color: #fff; } .jdp-today { border: 1px solid var(--surface-border-strong); }