/* ============================================================ ViyaBook — rtl.css Full RTL layout system for Dhivehi (ދިވެހި) language mode. Activated when is set by the language toggle. Does NOT affect English/LTR mode. ============================================================ */ /* ── Base Direction ─────────────────────────────────────────── */ html[lang="dv"], html[lang="dv"] body { direction: rtl; text-align: right; } /* ── LAYOUT: App shell — sidebar moves to RIGHT ─────────────── */ html[lang="dv"] .dashboard-shell, html[lang="dv"] .layout, html[lang="dv"] .viya-layout, html[lang="dv"] .app { flex-direction: row-reverse !important; } /* Premium theme sidebar margin (theme.css injects left margin) */ html[lang="dv"] body .sidebar, html[lang="dv"] body aside.sidebar, html[lang="dv"] body .viya-sidebar, html[lang="dv"] body .side { margin: 18px 18px 18px 0 !important; border-radius: 0 28px 28px 0 !important; border-left: none !important; border-right: 1px solid rgba(255, 255, 255, 0.06) !important; } /* ── MOBILE: Sidebar slides from RIGHT ──────────────────────── */ @media (max-width: 1024px) { html[lang="dv"] body .sidebar, html[lang="dv"] body aside.sidebar { left: auto !important; right: 0 !important; transform: translateX(105%) !important; border-radius: 28px 0 0 28px !important; margin: 0 !important; } html[lang="dv"] body .sidebar.active, html[lang="dv"] body aside.sidebar.active { transform: translateX(0) !important; } /* Hamburger button → move to LEFT side in RTL (opposite corner) */ html[lang="dv"] .hamburger-toggle, html[lang="dv"] .viya-mobile-menu-btn { left: 16px !important; right: auto !important; } /* Main content padding keeps room for hamburger on left */ html[lang="dv"] body .main, html[lang="dv"] body .main-content, html[lang="dv"] body.viya-sidebar-page .viya-main { padding: 72px 16px 24px !important; } /* Close button position inside sidebar (now on left since sidebar is on right) */ html[lang="dv"] .viya-sidebar-close { right: auto !important; left: 14px !important; } /* Sidebar overlay */ html[lang="dv"] .sidebar-overlay { direction: ltr !important; /* Overlay has no text content */ } } /* ── SIDEBAR INTERNALS ──────────────────────────────────────── */ html[lang="dv"] .sidebar-brand { flex-direction: row-reverse !important; } html[lang="dv"] .vb-brand-copy { text-align: right !important; } /* Nav items: icon on RIGHT, text on LEFT in RTL */ html[lang="dv"] .sidebar-nav a, html[lang="dv"] .viya-sidebar-nav a, html[lang="dv"] .nav a { flex-direction: row-reverse !important; text-align: right !important; } /* RTL hover: nudge right instead of left */ html[lang="dv"] .sidebar-nav a:hover, html[lang="dv"] .viya-sidebar-nav a:hover, html[lang="dv"] .nav a:hover { transform: translateX(3px) !important; } html[lang="dv"] .business-trigger { flex-direction: row-reverse !important; } html[lang="dv"] .business-current { text-align: right !important; } html[lang="dv"] .business-options, html[lang="dv"] .business-option { text-align: right !important; } /* Language toggle stays LTR (EN | DV labels) */ html[lang="dv"] .switch-options { direction: ltr !important; } html[lang="dv"] .sidebar-footer { text-align: right !important; } /* ── APP HEADER / TOPBAR ────────────────────────────────────── */ html[lang="dv"] .viya-app-header { direction: rtl !important; } /* Profile dropdown opens to the right side of its button in RTL */ html[lang="dv"] .viya-profile-menu { right: auto !important; left: 0 !important; text-align: right !important; } html[lang="dv"] .viya-profile-menu a, html[lang="dv"] .viya-profile-menu button { text-align: right !important; } /* Mobile topbar grid keeps LTR for icon layout */ html[lang="dv"] .viya-mobile-title { text-align: right !important; } /* ── PAGE HEADERS ───────────────────────────────────────────── */ html[lang="dv"] .page-head, html[lang="dv"] .panel-head, html[lang="dv"] .table-header, html[lang="dv"] .section-heading, html[lang="dv"] .header-actions, html[lang="dv"] .head-actions, html[lang="dv"] .customer-head, html[lang="dv"] .settings-title, html[lang="dv"] .topbar-title, html[lang="dv"] .welcome { flex-direction: row-reverse !important; text-align: right !important; } html[lang="dv"] .topbar-title { text-align: right !important; } html[lang="dv"] .viya-breadcrumb { flex-direction: row-reverse !important; } /* ── INPUTS & SEARCH ────────────────────────────────────────── */ /* Text inputs: RTL direction, right-aligned text */ html[lang="dv"] input:not([type="checkbox"]):not([type="radio"]):not([type="number"]):not([type="range"]):not([type="color"]), html[lang="dv"] textarea { direction: rtl !important; text-align: right !important; } html[lang="dv"] select { direction: rtl !important; text-align: right !important; } /* Numbers keep LTR (amounts, quantities, phone numbers) */ html[lang="dv"] input[type="number"], html[lang="dv"] input[type="tel"], html[lang="dv"] input[inputmode="numeric"], html[lang="dv"] input[inputmode="decimal"] { direction: ltr !important; text-align: left !important; } /* Search boxes */ html[lang="dv"] .search-box, html[lang="dv"] .prod-search, html[lang="dv"] .product-search, html[lang="dv"] .viya-header-search { flex-direction: row-reverse !important; } html[lang="dv"] .search-box input, html[lang="dv"] .prod-search input, html[lang="dv"] .viya-header-search input { direction: rtl !important; text-align: right !important; } /* ── TABLES ─────────────────────────────────────────────────── */ html[lang="dv"] table { direction: rtl !important; } html[lang="dv"] th, html[lang="dv"] td { text-align: right !important; } /* Rounded corners flip for RTL table rows */ html[lang="dv"] td:first-child { border-radius: 0 12px 12px 0 !important; border-left: 1px solid rgba(148, 163, 184, 0.12) !important; border-right: none !important; } html[lang="dv"] td:last-child { border-radius: 12px 0 0 12px !important; border-right: 1px solid rgba(148, 163, 184, 0.12) !important; border-left: none !important; } html[lang="dv"] thead th:first-child { border-radius: 0 12px 12px 0 !important; } html[lang="dv"] thead th:last-child { border-radius: 12px 0 0 12px !important; } /* Mobile stacked table labels */ @media (max-width: 768px) { html[lang="dv"] td::before { margin-right: 0 !important; margin-left: 8px !important; } } /* ── FORMS ──────────────────────────────────────────────────── */ html[lang="dv"] .field { text-align: right !important; } html[lang="dv"] .field label { display: block; text-align: right !important; } html[lang="dv"] .grid-2, html[lang="dv"] .grid-3, html[lang="dv"] .form-grid, html[lang="dv"] .modal-grid, html[lang="dv"] .settings-grid, html[lang="dv"] .horizontal-group { direction: rtl !important; } /* ── MODALS ─────────────────────────────────────────────────── */ html[lang="dv"] .modal-head, html[lang="dv"] .modal-header { flex-direction: row-reverse !important; } html[lang="dv"] .modal-actions { flex-direction: row-reverse !important; } html[lang="dv"] .modal-card, html[lang="dv"] .trip-modal-card, html[lang="dv"] .filter-modal-card { text-align: right !important; } /* ── SETTINGS PAGE ──────────────────────────────────────────── */ html[lang="dv"] .settings-layout { flex-direction: row-reverse !important; } html[lang="dv"] .settings-link { flex-direction: row-reverse !important; text-align: right !important; } html[lang="dv"] .section-head, html[lang="dv"] .section-header { text-align: right !important; } html[lang="dv"] .settings-panel, html[lang="dv"] .content-card { text-align: right !important; } /* ── DASHBOARD ──────────────────────────────────────────────── */ html[lang="dv"] .kpis, html[lang="dv"] .stats-grid, html[lang="dv"] .stats-grid.premium-stats, html[lang="dv"] .metrics { direction: rtl !important; } html[lang="dv"] .stat-card-title { flex-direction: row-reverse !important; } html[lang="dv"] .kpi-title { text-align: right !important; } html[lang="dv"] .quick-actions { direction: rtl !important; } html[lang="dv"] .grid-2, html[lang="dv"] .tables-row { direction: rtl !important; } html[lang="dv"] .summary { direction: rtl !important; } html[lang="dv"] .summary-item { border-right: none !important; border-left: 1px solid rgba(148, 163, 184, 0.15) !important; } html[lang="dv"] .summary-item:last-child { border-left: none !important; } html[lang="dv"] .section-heading { flex-direction: row-reverse !important; } html[lang="dv"] .panel-head { flex-direction: row-reverse !important; } /* ── POS / CHECKOUT PAGE ────────────────────────────────────── */ html[lang="dv"] .pos-body { flex-direction: row-reverse !important; } html[lang="dv"] .pos-header { flex-direction: row-reverse !important; } /* Left panel border flips */ html[lang="dv"] .products-panel { border-right: none !important; border-left: 1px solid rgba(124, 58, 237, 0.12) !important; } /* Right cart panel border flips */ html[lang="dv"] .cart-panel { border-left: none !important; border-right: 1px solid rgba(124, 58, 237, 0.12) !important; } html[lang="dv"] .cart-header { flex-direction: row-reverse !important; } html[lang="dv"] .cart-item { flex-direction: row-reverse !important; } html[lang="dv"] .cart-item-info { text-align: right !important; } html[lang="dv"] .cart-item-price { text-align: left !important; /* amounts stay LTR aligned */ } html[lang="dv"] .customer-bar { flex-direction: row-reverse !important; } html[lang="dv"] .cat-scroll-wrap, html[lang="dv"] #categoryTabs { direction: rtl !important; } html[lang="dv"] .prod-toolbar { flex-direction: row-reverse !important; } html[lang="dv"] .prod-info { text-align: right !important; } html[lang="dv"] .prod-footer { flex-direction: row-reverse !important; } html[lang="dv"] .prod-name, html[lang="dv"] .prod-cat { text-align: right !important; } html[lang="dv"] .cart-totals { direction: rtl !important; text-align: right !important; } html[lang="dv"] .grand-total-row, html[lang="dv"] .total-line, html[lang="dv"] .change-row, html[lang="dv"] .discount-line { flex-direction: row-reverse !important; } html[lang="dv"] .pay-section { direction: rtl !important; text-align: right !important; } html[lang="dv"] .payment-grid { direction: rtl !important; } html[lang="dv"] .received-row { flex-direction: row-reverse !important; } html[lang="dv"] .cart-actions, html[lang="dv"] .cart-actions-top, html[lang="dv"] .cart-actions-main { direction: rtl !important; } /* Qty controls stay LTR (- 1 + layout) */ html[lang="dv"] .qty-ctrl, html[lang="dv"] .qty { direction: ltr !important; } /* Mobile POS: sticky cart stays anchored */ @media (max-width: 768px) { html[lang="dv"] .cart-panel, html[lang="dv"] .order-panel { direction: rtl !important; border-radius: 24px 24px 0 0 !important; } html[lang="dv"] .pos-body { flex-direction: column !important; } } /* ── TRIPS PAGE ─────────────────────────────────────────────── */ html[lang="dv"] .trips-layout { flex-direction: row-reverse !important; } html[lang="dv"] .trip-card-top, html[lang="dv"] .project-card-top { flex-direction: row-reverse !important; } html[lang="dv"] .trip-title-wrap { flex-direction: row-reverse !important; } html[lang="dv"] .trip-metrics, html[lang="dv"] .project-metrics { direction: rtl !important; } html[lang="dv"] .metric-card { text-align: right !important; } html[lang="dv"] .trip-tabs { flex-direction: row-reverse !important; } html[lang="dv"] .trip-status-wrap { flex-direction: row-reverse !important; } html[lang="dv"] .panel-bottom { flex-direction: row-reverse !important; } html[lang="dv"] .trip-grid { direction: rtl !important; } html[lang="dv"] .trip-grid-card { text-align: right !important; } html[lang="dv"] .info-row { flex-direction: row-reverse !important; text-align: right !important; } html[lang="dv"] .detail-head { flex-direction: row-reverse !important; } /* ── CUSTOMERS PAGE ─────────────────────────────────────────── */ html[lang="dv"] .filter-row { direction: rtl !important; } html[lang="dv"] .summary-grid { direction: rtl !important; } html[lang="dv"] .summary-card { text-align: right !important; flex-direction: row-reverse !important; } html[lang="dv"] .type-grid { direction: rtl !important; } html[lang="dv"] .type-card { flex-direction: row-reverse !important; } html[lang="dv"] .customer-name { flex-direction: row-reverse !important; } html[lang="dv"] .action-buttons { flex-direction: row-reverse !important; } html[lang="dv"] .action-menu, html[lang="dv"] .more-menu { left: 0 !important; right: auto !important; text-align: right !important; } html[lang="dv"] .action-menu button, html[lang="dv"] .more-menu button { text-align: right !important; } html[lang="dv"] .pagination, html[lang="dv"] .pages, html[lang="dv"] .panel-bottom { flex-direction: row-reverse !important; } html[lang="dv"] .tabs { flex-direction: row-reverse !important; } /* ── PRODUCTS PAGE ──────────────────────────────────────────── */ html[lang="dv"] .product-cell { flex-direction: row-reverse !important; } html[lang="dv"] .grid-view { direction: rtl !important; } html[lang="dv"] .grid-info { text-align: right !important; } html[lang="dv"] .grid-actions { flex-direction: row-reverse !important; } html[lang="dv"] .filters { flex-direction: row-reverse !important; } /* ── ACTION CARDS ───────────────────────────────────────────── */ html[lang="dv"] .action-card { flex-direction: row-reverse !important; } html[lang="dv"] .action-left { flex-direction: row-reverse !important; } /* ── INVOICE PAGE ───────────────────────────────────────────── */ html[lang="dv"] .invoice-row { flex-direction: row-reverse !important; } html[lang="dv"] .notes-totals { direction: rtl !important; } html[lang="dv"] .total-line { direction: rtl !important; } html[lang="dv"] .invoice-details { direction: rtl !important; } /* ── CASH DRAWER ────────────────────────────────────────────── */ html[lang="dv"] .drawer-grid, html[lang="dv"] .drawer-card-head { direction: rtl !important; } /* ── MISC UI COMPONENTS ─────────────────────────────────────── */ html[lang="dv"] .viya-breadcrumb { flex-direction: row-reverse !important; } html[lang="dv"] .section-heading { flex-direction: row-reverse !important; } /* Bottom nav stays mostly unchanged, just reverse item order */ html[lang="dv"] .viya-bottom-nav { direction: rtl !important; } /* Toast notifications: move to LEFT side in RTL */ html[lang="dv"] #viyaToastContainer { left: 20px !important; right: auto !important; } /* Floating cart button: stays centered */ html[lang="dv"] .viya-floating-cart { direction: rtl !important; } /* FAB button keeps same position */ html[lang="dv"] .viya-fab { right: 18px !important; left: auto !important; } /* ── NUMBER VALUES: keep LTR (MVR amounts) ──────────────────── */ html[lang="dv"] .kpi-value, html[lang="dv"] .kpi-note, html[lang="dv"] .grand-total-value, html[lang="dv"] .metric-card strong, html[lang="dv"] .stat-card h3, html[lang="dv"] .summary-item strong, html[lang="dv"] .balance-red, html[lang="dv"] .balance-green, html[lang="dv"] .prod-price, html[lang="dv"] .cart-item-price, html[lang="dv"] .grand-total-value { direction: ltr !important; display: inline-block !important; text-align: right !important; /* numbers still right-aligned in RTL context */ } /* ── SKELETON SHIMMER stays LTR ─────────────────────────────── */ html[lang="dv"] .skel-cell, html[lang="dv"] [data-skel], html[lang="dv"] .skel-row { direction: ltr !important; } /* ── PRINT RTL ──────────────────────────────────────────────── */ @media print { html[lang="dv"] body { direction: rtl !important; } }