/* HITM RTL (Right-to-Left) overrides for Hebrew */
/* Active when html[dir="rtl"] is set by toggleLanguage() */

/* ===== GLOBAL TEXT DIRECTION ===== */
[dir="rtl"] {
  text-align: right;
}

/* ===== FONT FAMILY — Hebrew fallback ===== */
/* Heebo/Rubik need to be loaded in index.html by Architect */
[dir="rtl"] {
  --font-body: 'Heebo', 'Inter', sans-serif;
  --font-heading: 'Heebo', 'DM Sans', sans-serif;
}

/* ===== LAYOUT: GRID — sidebar on the right ===== */
[dir="rtl"] .app {
  grid-template-columns: 1fr 260px;
}
[dir="rtl"] .app.sidebar-collapsed {
  grid-template-columns: 1fr 0;
}
[dir="rtl"] .header {
  grid-column: 1;
}
[dir="rtl"] .main {
  grid-column: 1;
}
[dir="rtl"] .sidebar {
  grid-column: 2;
  order: 2;
}

/* ===== HEADER ===== */
[dir="rtl"] .header-actions {
  margin-left: 0;
  margin-right: auto;
}
[dir="rtl"] .header-search i {
  left: auto;
  right: 10px;
}
[dir="rtl"] .header-search input {
  padding: 8px 36px 8px 12px;
}

/* ===== PAGE TITLE ===== */
[dir="rtl"] .page-title .btn {
  margin-left: 0;
  margin-right: auto;
}

/* ===== TABLES ===== */
[dir="rtl"] th {
  text-align: right;
}

/* ===== TREE (categories, etc.) ===== */
[dir="rtl"] .tree-children {
  padding-left: 0;
  padding-right: 24px;
}
[dir="rtl"] .tree-count {
  margin-left: 0;
  margin-right: auto;
}

/* ===== TOGGLE SWITCH ===== */
[dir="rtl"] .toggle::after {
  left: auto;
  right: 2px;
}
[dir="rtl"] .toggle.active::after {
  left: auto;
  right: 22px;
}

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

/* ===== RECEIPT THUMBNAIL ===== */
[dir="rtl"] .receipt-thumb .remove-receipt {
  right: auto;
  left: -4px;
}

/* ===== REPORTS ===== */
[dir="rtl"] .report-table .indent td:first-child {
  padding-left: 0;
  padding-right: 32px;
}

/* ===== BALANCE SHEET ===== */
[dir="rtl"] .bs-group {
  margin-left: 0;
  margin-right: 16px;
}
[dir="rtl"] .bs-row.item {
  padding-left: 0;
  padding-right: 32px;
}

/* ===== GATE (terms, profile setup) ===== */
[dir="rtl"] .gate-body ul,
[dir="rtl"] .gate-body ol {
  padding-left: 0;
  padding-right: 20px;
}
[dir="rtl"] .gate-bonus {
  margin-left: 0;
  margin-right: 6px;
}

/* ===== USER DROPDOWN ===== */
[dir="rtl"] .user-dropdown {
  right: auto;
  left: 0;
}

/* ===== TRANSACTION CARDS (mobile) ===== */
[dir="rtl"] .tx-card-amount {
  margin-left: 0;
  margin-right: 8px;
}

/* ===== TAG BADGE ===== */
[dir="rtl"] .tx-tag-badge {
  margin-right: 0;
  margin-left: 3px;
}

/* ===== NUMBERS & CURRENCIES — keep LTR ===== */
[dir="rtl"] .kpi-value,
[dir="rtl"] .tx-card-amount,
[dir="rtl"] .account-balance,
[dir="rtl"] .budget-amounts,
[dir="rtl"] .coins-display,
[dir="rtl"] td:last-child,
[dir="rtl"] .amount,
[dir="rtl"] [data-amount],
[dir="rtl"] .font-variant-numeric {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ===== GOSHA WIDGET ===== */
[dir="rtl"] .gosha-widget {
  right: auto;
  left: 16px;
  align-items: flex-start;
}
[dir="rtl"] .gosha-bubble {
  border-radius: 16px 16px 16px 4px;
}
[dir="rtl"] .gosha-bubble .gosha-close {
  right: auto;
  left: 8px;
}

/* ===== SEARCH RESULTS DROPDOWN ===== */
[dir="rtl"] .search-results {
  text-align: right;
}

/* ===== BUDGET AMOUNTS ===== */
[dir="rtl"] .budget-amounts {
  text-align: left;
}

/* ===== NAV ITEMS — flex direction auto-handled, but icon margin ===== */
[dir="rtl"] .nav-item {
  flex-direction: row-reverse;
  text-align: right;
}
/* Actually nav-item uses gap, so row works in RTL. Let's not reverse. */
/* The browser handles flex gap in RTL correctly. Remove row-reverse. */
[dir="rtl"] .nav-item {
  flex-direction: row;
}

/* ===== SIDEBAR BRAND ===== */
[dir="rtl"] .sidebar-brand {
  flex-direction: row;
}

/* ===== MODALS — form alignment ===== */
[dir="rtl"] .modal label {
  text-align: right;
}
[dir="rtl"] .modal input,
[dir="rtl"] .modal select,
[dir="rtl"] .modal textarea {
  text-align: right;
}
/* Numbers in form fields stay LTR */
[dir="rtl"] .modal input[type="number"],
[dir="rtl"] .modal input[type="date"],
[dir="rtl"] .modal input[type="datetime-local"] {
  direction: ltr;
  text-align: right;
}

/* ===== FILTER BAR ===== */
[dir="rtl"] .filter-bar {
  flex-direction: row-reverse;
}
/* Actually flex with gap handles RTL. Revert. */
[dir="rtl"] .filter-bar {
  flex-direction: row;
}

/* ===== AUTH CARD ===== */
[dir="rtl"] .auth-card {
  text-align: right;
}
[dir="rtl"] .auth-card input {
  text-align: right;
}
[dir="rtl"] .auth-card input[type="email"] {
  direction: ltr;
  text-align: right;
}

/* ===== BOTTOM NAV — symmetric, no changes needed ===== */

/* ===== MOBILE RESPONSIVE RTL ===== */
@media (max-width: 768px) {
  [dir="rtl"] .sidebar {
    left: auto;
    right: -280px;
    transition: right .3s cubic-bezier(.16, 1, .3, 1);
  }
  [dir="rtl"] .app.sidebar-open .sidebar {
    left: auto;
    right: 0;
  }
  [dir="rtl"] .toast-container {
    left: 12px;
    right: 12px;
  }
  [dir="rtl"] .bs-row.item {
    padding-left: 0;
    padding-right: 20px;
  }
  [dir="rtl"] .gosha-widget {
    left: 12px;
    right: auto;
  }
}

/* ===== ANIMATIONS — flip slide direction ===== */
@keyframes rtlSlideIn {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
[dir="rtl"] .toast {
  animation: rtlSlideIn .3s ease, fadeOut .3s ease 2.7s;
}

/* ===== FORUM ===== */
[dir="rtl"] .forum-post {
  text-align: right;
}

/* ===== PROFILE FORM ===== */
[dir="rtl"] .profile-form label {
  text-align: right;
}

/* ===== MISC — generic flex auto-margin flips ===== */
[dir="rtl"] .ml-auto {
  margin-left: 0;
  margin-right: auto;
}
[dir="rtl"] .mr-auto {
  margin-right: 0;
  margin-left: auto;
}