/* =======================================================================
   rtl.css — RTL Direction Overrides for Arabic-First Interface
   Advanced Solar Load Calculator — Production CSS Architecture
   ======================================================================= */

/* ── Base direction (Arabic-first) ─────────────────────────────────── */
html[dir="rtl"] body,
html[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

/* ── Sidebar RTL adjustments ───────────────────────────────────────── */
html[dir="rtl"] .sidebar {
  border-left: none;
  border-right: 1px solid var(--border);
}

html[dir="rtl"] .nav-item.active::before {
  left: auto;
  right: 0;
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

/* ── Header RTL ────────────────────────────────────────────────────── */
html[dir="rtl"] .header-project {
  flex-direction: row-reverse;
}

/* ── Modal close button RTL ────────────────────────────────────────── */
html[dir="rtl"] .modal-close {
  order: -1;
}

/* ── Forms RTL ─────────────────────────────────────────────────────── */
html[dir="rtl"] select.ipt,
html[dir="rtl"] select.form-input {
  background-position: left 10px center;
  padding-left: 28px;
  padding-right: 10px;
}

html[dir="rtl"] .form-label {
  text-align: right;
}

html[dir="rtl"] .toggle-thumb {
  left: 2px;
  right: auto;
}
html[dir="rtl"] .toggle-btn.active .toggle-thumb {
  left: auto;
  right: 2px;
}

/* ── Table RTL ─────────────────────────────────────────────────────── */
html[dir="rtl"] .data-table th,
html[dir="rtl"] .data-table td {
  text-align: right;
}

html[dir="rtl"] .data-table th.text-left,
html[dir="rtl"] .data-table td.text-left {
  text-align: right;
}

html[dir="rtl"] .color-dot {
  margin-left: 0;
  margin-right: var(--sp-2);
}

/* ── Chart RTL ─────────────────────────────────────────────────────── */
html[dir="rtl"] .chart-badge {
  direction: ltr;
}

/* ── Badges RTL ────────────────────────────────────────────────────── */
html[dir="rtl"] .insight-item {
  flex-direction: row;
}

/* ── Print RTL ─────────────────────────────────────────────────────── */
@media print {
  html[dir="rtl"] body {
    direction: rtl;
  }
  html[dir="rtl"] .report-section-title {
    border-right: 3px solid #333;
    border-left: none;
    padding-right: var(--sp-3);
    padding-left: 0;
  }
}

/* ── Hero banner RTL ───────────────────────────────────────────────── */
html[dir="rtl"] .hero-banner::before {
  left: auto;
  right: -5rem;
}

html[dir="rtl"] .hero-banner::after {
  right: auto;
  left: -5rem;
}

/* ── Toast RTL ─────────────────────────────────────────────────────── */
html[dir="rtl"] .toast-container {
  left: auto;
  right: var(--sp-4);
}

/* ── Scrollbar RTL ─────────────────────────────────────────────────── */
html[dir="rtl"] ::-webkit-scrollbar {
  direction: rtl;
}

/* ── Top load values RTL ───────────────────────────────────────────── */
html[dir="rtl"] .top-load-values {
  text-align: left;
}

/* ── Modal overlay RTL ─────────────────────────────────────────────── */
html[dir="rtl"] .modal-overlay {
  direction: rtl;
}

/* ── Phase badge RTL ───────────────────────────────────────────────── */
html[dir="rtl"] .phase-badge {
  direction: ltr;
}

/* ── Arabic text input ─────────────────────────────────────────────── */
html[dir="rtl"] input[lang="ar"],
html[dir="rtl"] input[dir="rtl"],
html[dir="rtl"] .form-input.text-right {
  text-align: right;
  direction: rtl;
}

/* ── LTR mode (optional) ───────────────────────────────────────────── */
html[dir="ltr"] body {
  direction: ltr;
  text-align: left;
}

html[dir="ltr"] .sidebar {
  border-right: none;
  border-left: 1px solid var(--border);
}

html[dir="ltr"] .nav-item.active::before {
  right: auto;
  left: 0;
  border-radius: var(--radius-full) 0 0 var(--radius-full);
}

html[dir="ltr"] select.ipt,
html[dir="ltr"] select.form-input {
  background-position: right 10px center;
  padding-right: 28px;
  padding-left: 10px;
}

html[dir="ltr"] .top-load-values {
  text-align: right;
}

html[dir="ltr"] .toast-container {
  right: auto;
  left: var(--sp-4);
}

html[dir="ltr"] .hero-banner::before {
  right: -5rem;
  left: auto;
}

html[dir="ltr"] .hero-banner::after {
  left: -5rem;
  right: auto;
}