/* ============================================================
   rtl.css — Arabic / Right-to-Left overrides for SmartPOS
   Loaded AFTER smartpos.css. All rules scoped to [dir="rtl"].
   Overrides physical properties (left/right/margin-left/…)
   because the base CSS uses physical not logical properties.
   ============================================================ */

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

/* Keep numbers, prices, currency, codes visually LTR */
[dir="rtl"] .stat-value,
[dir="rtl"] .kpi-value,
[dir="rtl"] .product-card-price,
[dir="rtl"] .receipt,
[dir="rtl"] .receipt *,
[dir="rtl"] .ltr-text,
[dir="rtl"] .font-mono,
[dir="rtl"] code,
[dir="rtl"] .receipt-no {
    direction: ltr;
}

/* ---------- SIDEBAR ---------- */
[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--border);
}

/* ---------- TOPBAR ----------
   LTR: [sidebar] | [☰  Title+Badge ............ 🔔 E]
   RTL: [E 🔔 ............ Badge+Title  ☰] | [sidebar]

   ROOT PROBLEM: justify-content:space-between always puts the first
   child on the left and last on the right, regardless of `order`.
   The only reliable fix is to switch to flex-start and use
   margin-auto as a spacer between the two groups.
*/
[dir="rtl"] .topbar {
    left: 0;
    right: var(--sidebar-width);
    justify-content: flex-start;
}

[dir="rtl"] .topbar.shifted {
    right: var(--sidebar-collapsed);
    left: 0;
}

/* Bell+E group: stays at flex-start (= visual LEFT) */
[dir="rtl"] .topbar-right {
    order: 1;
    flex-direction: row-reverse;
    margin-right: 0;
}

/* Hamburger+Title group: pushed to visual RIGHT by auto left margin */
[dir="rtl"] .topbar-left {
    order: 2;
    flex-direction: row-reverse;
    margin-left: auto;
}

[dir="rtl"] .page-title,
[dir="rtl"] .page-breadcrumb {
    text-align: right;
}

/* ---------- MAIN CONTENT ---------- */
[dir="rtl"] .main-content {
    margin-left: 0;
    margin-right: var(--sidebar-width);
}

[dir="rtl"] .main-content.shifted {
    margin-left: 0;
    margin-right: var(--sidebar-collapsed);
}

/* ---------- NAV ITEMS ---------- */
[dir="rtl"] .nav-item {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .nav-item i {
    margin: 0;
}

[dir="rtl"] .sidebar-footer > a,
[dir="rtl"] .sidebar-footer > button {
    flex-direction: row-reverse;
    text-align: right;
}

/* ---------- FORM / INPUT ICONS ---------- */
[dir="rtl"] .input-icon-wrap .input-icon {
    left: auto;
    right: 12px;
}

[dir="rtl"] .input-icon-wrap input,
[dir="rtl"] .input-icon-wrap .form-control {
    padding-left: var(--space-3);
    padding-right: 36px;
    text-align: right;
}

/* ---------- CARDS / STATS ---------- */
[dir="rtl"] .stat-card,
[dir="rtl"] .card {
    text-align: right;
}

/* stat-card-top: keep natural RTL flow (label right, icon left),
   but ensure the label has enough breathing room so it doesn't
   visually collide with the icon when the Arabic text is long. */
[dir="rtl"] .stat-card-top {
    flex-direction: row;
    gap: var(--space-3);
}

[dir="rtl"] .stat-card-top .stat-label {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.3;
}

[dir="rtl"] .stat-card-top .stat-icon {
    flex-shrink: 0;
}

[dir="rtl"] .card-header {
    flex-direction: row-reverse;
}

/* Reports page — icon uses position:absolute with right:16px.
   In RTL, that collides with the right-aligned Arabic title.
   Flip to left side. */
[dir="rtl"] .kpi-icon {
    right: auto;
    left: var(--space-4);
}

[dir="rtl"] .kpi-card {
    text-align: right;
}

[dir="rtl"] .toolbar {
    flex-direction: row-reverse;
}

[dir="rtl"] .toolbar-left,
[dir="rtl"] .toolbar-right {
    flex-direction: row-reverse;
}

/* ---------- BUTTON ICONS ---------- */
[dir="rtl"] .btn i {
    margin-left: 6px;
    margin-right: 0;
}

[dir="rtl"] .btn {
    flex-direction: row-reverse;
}

/* ---------- MODAL ---------- */
[dir="rtl"] .modal-header {
    flex-direction: row-reverse;
}

[dir="rtl"] .modal-title i {
    margin-left: 8px;
    margin-right: 0;
}

[dir="rtl"] .modal-footer {
    flex-direction: row-reverse;
}

/* ---------- TOAST ---------- */
[dir="rtl"] .toast-container {
    left: 24px;
    right: auto;
}

[dir="rtl"] .toast {
    animation: slideInRTL 0.3s ease-out forwards;
}

@keyframes slideInRTL {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ---------- TABLES ---------- */
[dir="rtl"] .sp-table th,
[dir="rtl"] .sp-table td {
    text-align: right;
}

[dir="rtl"] .sp-table th[style*="center"],
[dir="rtl"] .sp-table td[style*="center"] {
    text-align: center;
}

/* ---------- FLEX / UTILITY OVERRIDES ---------- */
[dir="rtl"] .ml-auto {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .mr-auto {
    margin-right: 0;
    margin-left: auto;
}

[dir="rtl"] .text-right { text-align: left; }
[dir="rtl"] .text-left  { text-align: right; }

/* ---------- SECTION HEADERS (settings page) ---------- */
[dir="rtl"] .section-header {
    flex-direction: row-reverse;
    text-align: right;
}

/* ---------- PASSWORD TOGGLE ---------- */
[dir="rtl"] .pw-toggle-btn {
    right: auto;
    left: 10px;
}

/* ---------- APPEARANCE SETTINGS CARDS ---------- */
[dir="rtl"] .appearance-row {
    flex-direction: row-reverse;
}
[dir="rtl"] .appearance-info {
    text-align: right;
}

/* ---------- NOTIFICATION DROPDOWN ---------- */
[dir="rtl"] .notif-header {
    flex-direction: row-reverse;
}

[dir="rtl"] .notif-item {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .notif-item-arrow {
    transform: scaleX(-1);
}

[dir="rtl"] .notif-count-badge {
    right: auto;
    left: -4px;
}

/* ---------- MOBILE ---------- */
/* RTL mobile sidebar (slide in from the right) is handled in
   smartpos.css via the body.sidebar-open + right-offset rules.
   Nothing extra needed here. */

/* Sidebar mode switch — reverse button order so POS sits on the right in RTL */
[dir="rtl"] .sidebar-mode-switch { flex-direction: row-reverse; }

/* Onboarding card — flip chevron in RTL so it points inward (left) */
[dir="rtl"] .onboarding-step .step-arrow { transform: scaleX(-1); }

/* Global search modal — keep centred in RTL */
[dir="rtl"] .gs-modal { transform: translateX(50%); }

/* POS shortcut hint — anchor to the LEFT in RTL */
[dir="rtl"] .shortcut-hint { right: auto; left: var(--space-4); }
[dir="rtl"] .shortcut-hint-tooltip { right: auto; left: 0; }
[dir="rtl"] kbd { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .shortcut-hint-tooltip kbd { margin-right: 0; }