/* RTL Support CSS - Automatic spacing and layout */

/* Root variables for RTL/LTR spacing */
:root {
  --spacing-start: 0;
  --spacing-end: 0;
  --text-align: left;
  --flex-direction: row;
  --margin-start: 0;
  --margin-end: 0;
  --padding-start: 0;
  --padding-end: 0;
  --sidebar-width: 250px;
}

/* Sidebar Toggle System */
.sidenav {
  transition: all 0.3s ease;
  width: var(--sidebar-width);
  position: fixed;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 1000;
}

/* Hidden sidebar state (completely hidden) */
.g-sidenav-hidden .sidenav {
  width: 0;
  overflow: hidden;
  margin: 0;
}

.main-content {
  margin-left: 0;
  min-height: 100vh;
}

/* LTR Sidebar Spacing */
.g-sidenav-show .main-content {
  margin-left: calc(var(--sidebar-width) + 1rem);
}

.g-sidenav-hidden .main-content {
  margin-left: 0;
}

/* RTL Sidebar Spacing */
[dir="rtl"] .main-content {
  margin-right: 0;
  margin-left: 0;
}

[dir="rtl"] .g-sidenav-show .main-content {
  margin-right: calc(var(--sidebar-width) + 1rem);
  margin-left: 0;
}

[dir="rtl"] .g-sidenav-hidden .main-content {
  margin-right: 0;
  margin-left: 0;
}

/* Removed completely hidden state - now same as hidden state */

/* Consistent behavior across all device sizes */
.sidenav {
  position: fixed !important;
  top: 0;
  height: 100vh;
  z-index: 1000;
}

/* Remove overlay system - not needed for consistent behavior */
.sidenav-overlay {
  display: none !important;
}

/* Mobile behavior - overlay instead of pushing content */
@media (max-width: 768px) {
  /* Force mobile sidebar to full width */
  .sidenav,
  .sidenav.navbar,
  .sidenav.navbar-vertical {
    width: 280px !important;
    max-width: 280px !important;
    min-width: 280px !important;
    transition: transform 0.3s ease !important;
    z-index: 1001 !important;
    position: fixed !important;
    top: 0 !important;
    height: 100vh !important;
  }

  /* Show state - full sidebar visible */
  .g-sidenav-show .sidenav,
  .g-sidenav-show .sidenav.navbar,
  .g-sidenav-show .sidenav.navbar-vertical {
    transform: translateX(0) !important;
    width: 280px !important;
    max-width: 280px !important;
    min-width: 280px !important;
  }

  /* Hidden state - sidebar off-screen */
  .g-sidenav-hidden .sidenav,
  .g-sidenav-hidden .sidenav.navbar,
  .g-sidenav-hidden .sidenav.navbar-vertical {
    transform: translateX(-100%) !important;
    width: 280px !important;
    max-width: 280px !important;
    min-width: 280px !important;
  }

  /* RTL support */
  [dir="rtl"] .g-sidenav-show .sidenav,
  [dir="rtl"] .g-sidenav-show .sidenav.navbar,
  [dir="rtl"] .g-sidenav-show .sidenav.navbar-vertical {
    transform: translateX(0) !important;
  }

  [dir="rtl"] .g-sidenav-hidden .sidenav,
  [dir="rtl"] .g-sidenav-hidden .sidenav.navbar,
  [dir="rtl"] .g-sidenav-hidden .sidenav.navbar-vertical {
    transform: translateX(100%) !important;
  }

  /* Mobile content never moves - always full width */
  .main-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Overlay handled by JavaScript */
}

/* Mobile top navbar - keep horizontal layout (only affects top navbar, not sidebar) */
@media (max-width: 768px) {
  #navbarBlur.navbar-main {
    min-height: 60px !important;
  }

  #navbarBlur .navbar-nav {
    flex-direction: row !important;
    align-items: center !important;
  }

  #navbarBlur .navbar-nav .nav-item {
    margin: 0 0.25rem !important;
  }

  #navbarBlur .navbar-nav .nav-link {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
  }

  #navbarBlur .navbar-nav .nav-link i {
    font-size: 1rem !important;
  }

  #navbarBlur .navbar-nav .nav-link span {
    display: none !important; /* Hide text labels on mobile, keep icons */
  }

  #navbarBlur .navbar-collapse {
    display: flex !important;
    flex-basis: auto !important;
  }

  /* Force top navbar to always be horizontal */
  #navbarBlur .navbar-collapse.collapse {
    display: flex !important;
  }
}

/* RTL overrides */
[dir="rtl"] {
  --spacing-start: 0;
  --spacing-end: 0;
  --text-align: right;
  --flex-direction: row-reverse;
  --margin-start: 0;
  --margin-end: 0;
  --padding-start: 0;
  --padding-end: 0;
}

/* Automatic RTL-friendly classes */
.rtl-auto {
  text-align: var(--text-align);
}

.rtl-flex {
  display: flex;
  flex-direction: var(--flex-direction);
}

.rtl-margin-start {
  margin-left: var(--margin-start);
  margin-right: var(--margin-end);
}

.rtl-margin-end {
  margin-right: var(--margin-start);
  margin-left: var(--margin-end);
}

.rtl-padding-start {
  padding-left: var(--padding-start);
  padding-right: var(--padding-end);
}

.rtl-padding-end {
  padding-right: var(--padding-start);
  padding-left: var(--padding-end);
}

/* Icon spacing */
.rtl-icon {
  margin-left: var(--spacing-start);
  margin-right: var(--spacing-end);
}

/* Text alignment utilities */
.rtl-text-start {
  text-align: var(--text-align);
}

.rtl-text-end {
  text-align: var(--text-align);
}

/* Position utilities */
.rtl-start-0 {
  left: var(--spacing-start);
  right: var(--spacing-end);
}

.rtl-end-0 {
  right: var(--spacing-start);
  left: var(--spacing-end);
}

/* Bootstrap 5 logical properties RTL support - moved to bottom for higher specificity */

/* Legacy RTL classes for backwards compatibility */
[dir="rtl"] .rtl-me-1 { margin-left: 0.25rem !important; margin-right: 0 !important; }
[dir="rtl"] .rtl-me-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
[dir="rtl"] .rtl-me-3 { margin-left: 1rem !important; margin-right: 0 !important; }
[dir="rtl"] .rtl-ms-1 { margin-right: 0.25rem !important; margin-left: 0 !important; }
[dir="rtl"] .rtl-ms-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
[dir="rtl"] .rtl-ms-3 { margin-right: 1rem !important; margin-left: 0 !important; }

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

[dir="rtl"] .start-0 { right: 0 !important; left: auto !important; }
[dir="rtl"] .end-0 { left: 0 !important; right: auto !important; }

[dir="rtl"] .ms-sm-auto { margin-right: auto !important; margin-left: 0 !important; }
[dir="rtl"] .me-sm-auto { margin-left: auto !important; margin-right: 0 !important; }
[dir="rtl"] .me-sm-0 { margin-left: 0 !important; margin-right: 0 !important; }
[dir="rtl"] .ms-sm-0 { margin-right: 0 !important; margin-left: 0 !important; }

/* Direction-aware spacing using logical properties */
.u-mis-0   { margin-inline-start: 0 !important; }
.u-mis-4   { margin-inline-start: .25rem !important; }
.u-mis-6   { margin-inline-start: .375rem !important; }
.u-mis-8   { margin-inline-start: .5rem !important; }
.u-mie-0   { margin-inline-end: 0 !important; }
.u-mie-4   { margin-inline-end: .25rem !important; }
.u-mie-6   { margin-inline-end: .375rem !important; }
.u-mie-8   { margin-inline-end: .5rem !important; }

/* Preferred: remove manual margins entirely by using gap */
.u-inline-flex {
  display: inline-flex;
  align-items: center;
  gap: .375rem; /* ~6px; adjust to match existing spacing scale */
}

/* Override conflicting RTL rules from soft-ui-dashboard.css */
/* These rules ensure our [dir="rtl"] approach takes precedence over .rtl class rules */

[dir="rtl"] .breadcrumb .breadcrumb-item+.breadcrumb-item:before {
    float: right !important;
    padding-left: .5rem !important;
    padding-right: 0 !important;
}

[dir="rtl"] .timeline .timeline-content {
    margin-left: 0 !important;
    margin-right: 45px !important;
}

[dir="rtl"] .avatar-group .avatar+.avatar {
    margin-left: 0 !important;
    margin-right: -1rem !important;
}

[dir="rtl"] .dropdown .dropdown-menu {
    left: 0 !important;
}

/* Ensure our margin classes have the highest specificity */
[dir="rtl"] .me-1 { margin-left: 0.25rem !important; margin-right: 0 !important; }
[dir="rtl"] .me-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
[dir="rtl"] .me-3 { margin-left: 1rem !important; margin-right: 0 !important; }
[dir="rtl"] .me-4 { margin-left: 1.5rem !important; margin-right: 0 !important; }
[dir="rtl"] .me-5 { margin-left: 3rem !important; margin-right: 0 !important; }

[dir="rtl"] .ms-1 { margin-right: 0.25rem !important; margin-left: 0 !important; }
[dir="rtl"] .ms-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
[dir="rtl"] .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; }
[dir="rtl"] .ms-4 { margin-right: 1.5rem !important; margin-left: 0 !important; }
[dir="rtl"] .ms-5 { margin-right: 3rem !important; margin-left: 0 !important; }