/* =====================================================
   RTL V2 — Arabic Right-to-Left Refinements
   Ensures all V2 components respect Arabic RTL layout
   ===================================================== */

/* ─────────────────────────────────────────
   1. Base RTL Overrides
───────────────────────────────────────────*/
.v2-app,
.v2-shell,
.v2-sidebar,
.v2-topbar,
.v2-content,
.v2-card,
.v2-table,
.v2-modal {
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
}

/* ─────────────────────────────────────────
   2. Sidebar — RTL Positioning
   Sidebar is on the RIGHT in RTL
───────────────────────────────────────────*/
.v2-sidebar {
  right: 0;
  left: auto;
  box-shadow: -3px 0 16px rgba(0,0,0,0.2);
}

/* Main area shifts from the right */
.v2-main-area {
  margin-right: var(--v2-sidebar-width);
  margin-left: 0;
}

.v2-sidebar.collapsed ~ .v2-main-area {
  margin-right: var(--v2-sidebar-collapsed-width);
  margin-left: 0;
}

/* Topbar: anchored from right (sidebar) to left edge */
.v2-topbar {
  right: var(--v2-sidebar-width);
  left: 0;
}

.v2-sidebar.collapsed ~ .v2-main-area .v2-topbar,
.v2-sidebar.collapsed + .v2-main-area .v2-topbar {
  right: var(--v2-sidebar-collapsed-width);
}

/* ─────────────────────────────────────────
   3. Sidebar nav link icon — RTL gap
───────────────────────────────────────────*/
.v2-nav-link {
  flex-direction: row;
}

.v2-nav-icon {
  /* In RTL the icon is on the right */
  order: 0;
}

.v2-nav-text {
  order: 1;
  text-align: right;
}

.v2-nav-arrow {
  order: 2;
  margin-right: auto;
  margin-left: 0;
  /* Rotate direction for RTL expand arrow */
}

/* RTL: open state arrow points left (down in LTR = left in RTL) */
.v2-nav-item.open > .v2-nav-link .v2-nav-arrow {
  transform: rotate(-90deg);
}

/* Submenu indentation — right-side indent for RTL */
.v2-submenu .v2-nav-link {
  padding-right: calc(var(--v2-space-4) + 20px + var(--v2-space-3));
  padding-left: var(--v2-space-4);
}

/* ─────────────────────────────────────────
   4. Topbar RTL — breadcrumb separator
───────────────────────────────────────────*/
.v2-breadcrumb {
  flex-direction: row;
}

.v2-breadcrumb-item + .v2-breadcrumb-item::before {
  content: "\\";
  margin-right: var(--v2-space-2);
  margin-left: 0;
}

/* Topbar actions float to the left in RTL */
.v2-topbar-actions {
  margin-right: auto;
  margin-left: 0;
}

/* Badge on notification button — RTL corner */
.v2-topbar-badge {
  right: 4px;
  left: auto;
  top: 4px;
}

/* ─────────────────────────────────────────
   5. Table RTL Alignment
───────────────────────────────────────────*/
.v2-table thead th,
.v2-table tbody td {
  text-align: right;
}

/* Actions column aligns left in RTL (visually rightmost is first action) */
.v2-table-actions {
  justify-content: flex-end;
}

/* ─────────────────────────────────────────
   6. Form controls RTL
───────────────────────────────────────────*/
.v2-input,
.v2-select,
.v2-textarea {
  direction: rtl;
  text-align: right;
}

.v2-input-group .v2-input {
  border-radius: var(--v2-radius-md) 0 0 var(--v2-radius-md);
}

.v2-input-group-addon {
  border-radius: 0 var(--v2-radius-md) var(--v2-radius-md) 0;
  border-right: 1.5px solid var(--v2-gray-200);
  border-left: none;
}

/* ─────────────────────────────────────────
   7. Alert border — RTL left becomes right
───────────────────────────────────────────*/
.v2-alert {
  border-right: 4px solid transparent;
  border-left: none;
}

.v2-alert-success { border-right-color: var(--v2-success); }
.v2-alert-warning { border-right-color: var(--v2-warning); }
.v2-alert-danger  { border-right-color: var(--v2-danger);  }
.v2-alert-info    { border-right-color: var(--v2-info);    }

/* ─────────────────────────────────────────
   8. Modal RTL
───────────────────────────────────────────*/
.v2-modal {
  direction: rtl;
  text-align: right;
}

.v2-modal-footer {
  justify-content: flex-start;
}

/* ─────────────────────────────────────────
   9. Stepper RTL — lines go from right to left
───────────────────────────────────────────*/
.v2-step::before {
  right: 50%;
  left: auto;
}

.v2-step:first-child::before { display: none; }
.v2-step:last-child::after   { display: none; }

/* ─────────────────────────────────────────
   10. Page Header RTL
───────────────────────────────────────────*/
.v2-page-header {
  flex-direction: row;
}

.v2-page-header-actions {
  margin-right: auto;
  margin-left: 0;
  justify-content: flex-start;
}

/* ─────────────────────────────────────────
   11. KPI Strip RTL
───────────────────────────────────────────*/
.v2-kpi-card {
  flex-direction: row;
  text-align: right;
}

/* ─────────────────────────────────────────
   12. Dropdown RTL
───────────────────────────────────────────*/
.v2-dropdown-menu {
  direction: rtl;
  text-align: right;
}

/* ─────────────────────────────────────────
   13. Notifications dropdown
───────────────────────────────────────────*/
.v2-notif-list {
  direction: rtl;
  text-align: right;
}

/* ─────────────────────────────────────────
   14. Print overrides
───────────────────────────────────────────*/
@media print {
  .v2-sidebar,
  .v2-topbar,
  .v2-footer,
  .v2-filter-bar,
  .v2-page-header-actions {
    display: none !important;
  }

  .v2-main-area {
    margin-right: 0 !important;
    margin-top: 0 !important;
  }

  .v2-content {
    padding: 0 !important;
  }
}

/* ─────────────────────────────────────────
   15. Mobile RTL adjustments
───────────────────────────────────────────*/
@media (max-width: 991px) {
  .v2-sidebar {
    right: 0;
    left: auto;
    transform: translateX(100%);
  }

  .v2-sidebar.mobile-open {
    transform: translateX(0);
  }

  .v2-main-area {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .v2-topbar {
    right: 0 !important;
    left: 0 !important;
  }

  .v2-filter-grid {
    grid-template-columns: 1fr;
  }

  .v2-kpi-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .v2-page-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 576px) {
  .v2-kpi-strip {
    grid-template-columns: 1fr;
  }

  .v2-content {
    padding: var(--v2-space-4);
  }
}

.page-header-v2,
.filterbar-v2,
.card-v2,
.table-v2,
.modal-v2,
.settings-grid-v2,
.settings-nav-v2,
.chart-card-v2 {
  direction: rtl;
  text-align: right;
}

.table-v2 th,
.table-v2 td {
  text-align: right;
}

.dropdown-menu.dropdown-menu-right {
  right: auto;
}