/* LTR (Left-to-Right) Language Support CSS */
/* Add class="ltr" to body for English language support */

/* Global Direction Override */
body.ltr {
  direction: ltr;
  text-align: left;
}

/* Sidebar LTR Adjustments */
body.ltr .sidebar {
  right: auto;
  left: 0;
}

body.ltr .pin-button {
  right: auto;
  left: 20px;
}

body.ltr .nav-text {
  right: auto;
  left: 60px;
}

body.ltr .nav-full {
  margin-right: 0;
  margin-left: 16px;
}

body.ltr .sidebar.collapsed:hover .nav-text {
  right: auto;
  left: 60px;
}

body.ltr .sidebar.collapsed:hover .nav-full {
  right: auto;
  left: 60px;
}

/* Header LTR Adjustments */
body.ltr .header {
  flex-direction: row-reverse;
}

body.ltr .header-left {
  order: 2;
}

body.ltr .header-right {
  order: 1;
}

/* Search Input LTR */
body.ltr #searchInput {
  text-align: left;
  direction: ltr;
}

body.ltr .header-search {
  flex-direction: row-reverse;
}

/* User Avatars LTR */
body.ltr .user-avatars {
  flex-direction: row-reverse;
}

body.ltr .user-avatars .avatar {
  margin-left: 0;
  margin-right: -8px;
}

body.ltr .user-avatars .avatar:first-child {
  margin-right: 0;
}

/* Notification Dropdown LTR */
body.ltr #notificationDropdown {
  right: auto;
  left: 0;
}

body.ltr .notification-item {
  text-align: left;
}

body.ltr .notification-item:hover {
  transform: translateX(2px);
}

/* Table LTR Adjustments */
body.ltr .table-container table {
  text-align: left;
}

body.ltr .table-container th,
body.ltr .table-container td {
  text-align: left;
}

body.ltr .table-container th:first-child,
body.ltr .table-container td:first-child {
  padding-left: 24px;
}

body.ltr .table-container th:last-child,
body.ltr .table-container td:last-child {
  padding-right: 24px;
  text-align: center;
}

/* Assessment Cards LTR */
body.ltr .assessment-card {
  text-align: left;
}

body.ltr .assessment-card.specialty {
  border-left: none;
  border-right: 4px solid #86BF68;
}

body.ltr .assessment-card.general {
  border-left: none;
  border-right: 4px solid #9153D5;
}

body.ltr .assessment-card.personal {
  border-left: none;
  border-right: 4px solid #F079D1;
}

/* Dialog LTR Adjustments */
body.ltr .logout-dialog-header {
  flex-direction: row-reverse;
}

body.ltr .logout-dialog-title {
  text-align: right;
}

body.ltr .logout-dialog-body {
  text-align: left;
}

body.ltr .logout-dialog-message {
  text-align: left;
}

body.ltr .logout-dialog-footer {
  justify-content: center;
  flex-direction: row-reverse;
}

/* Grid Layout LTR */
body.ltr #appRoot {
  grid-template-columns: 280px 1fr;
}

body.ltr #appRoot.sidebar-collapsed {
  grid-template-columns: 84px 1fr;
}

/* Navigation Items LTR */
body.ltr .sidebar.collapsed .nav-item {
  margin: 0 auto 8px auto;
}

body.ltr .sidebar.collapsed:hover .nav-item {
  margin: 0 16px 8px 16px;
  justify-content: flex-end;
}

body.ltr .nav-item {
  justify-content: flex-end;
  margin: 0 16px 8px 16px;
}

/* Main Content LTR */
body.ltr main {
  padding-left: 32px;
  padding-right: 32px;
}

body.ltr .welcome-section {
  text-align: left;
}

/* Form Elements LTR */
body.ltr input,
body.ltr textarea,
body.ltr select {
  text-align: left;
  direction: ltr;
}

/* Buttons LTR */
body.ltr .btn-start {
  text-align: center;
}

/* Scrollbar LTR (for specific containers) */
body.ltr ::-webkit-scrollbar {
  /* Keep scrollbar on the right for LTR */
}

/* Responsive LTR Adjustments */
@media (max-width: 768px) {
  body.ltr .sidebar {
    left: -280px;
    right: auto;
  }
  
  body.ltr .sidebar.open {
    left: 0;
    right: auto;
  }
  
  body.ltr .header {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  body.ltr main {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Logo positioning LTR */
body.ltr .sidebar .logo {
  /* Logo stays centered */
}

/* Language specific font adjustments */
body.ltr {
  font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
}

body.ltr .logout-dialog-title,
body.ltr .logout-dialog-message,
body.ltr .logout-dialog-submessage,
body.ltr .logout-dialog-btn {
  font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
}

/* Text direction for specific elements */
body.ltr h1, body.ltr h2, body.ltr h3, body.ltr h4, body.ltr h5, body.ltr h6 {
  text-align: left;
}

body.ltr p {
  text-align: left;
}

/* Icon adjustments for LTR */
body.ltr .icon-arrow-right {
  transform: scaleX(-1);
}

body.ltr .icon-arrow-left {
  transform: scaleX(-1);
}

/* Margin and padding adjustments */
body.ltr .mr-2 { margin-right: 0; margin-left: 0.5rem; }
body.ltr .mr-3 { margin-right: 0; margin-left: 0.75rem; }
body.ltr .mr-4 { margin-right: 0; margin-left: 1rem; }
body.ltr .mr-6 { margin-right: 0; margin-left: 1.5rem; }

body.ltr .ml-2 { margin-left: 0; margin-right: 0.5rem; }
body.ltr .ml-3 { margin-left: 0; margin-right: 0.75rem; }
body.ltr .ml-4 { margin-left: 0; margin-right: 1rem; }
body.ltr .ml-6 { margin-left: 0; margin-right: 1.5rem; }

body.ltr .pr-2 { padding-right: 0; padding-left: 0.5rem; }
body.ltr .pr-3 { padding-right: 0; padding-left: 0.75rem; }
body.ltr .pr-4 { padding-right: 0; padding-left: 1rem; }
body.ltr .pr-6 { padding-right: 0; padding-left: 1.5rem; }

body.ltr .pl-2 { padding-left: 0; padding-right: 0.5rem; }
body.ltr .pl-3 { padding-left: 0; padding-right: 0.75rem; }
body.ltr .pl-4 { padding-left: 0; padding-right: 1rem; }
body.ltr .pl-6 { padding-left: 0; padding-right: 1.5rem; }

/* Border radius adjustments for LTR */
body.ltr .rounded-l { border-radius: 0; border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; }
body.ltr .rounded-r { border-radius: 0; border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; }

/* Float adjustments */
body.ltr .float-right { float: left; }
body.ltr .float-left { float: right; }

/* Text alignment utilities */
body.ltr .text-right { text-align: left; }
body.ltr .text-left { text-align: right; }

/* ===== LOGIN PAGE LTR STYLES ===== */

/* Main layout adjustments for login */
body.ltr .login-main {
  grid-template-columns: 1fr 1fr;
}

/* Panel order adjustments for LTR - reverse the current Arabic layout */
body.ltr .login-slider {
  order: 1;
}

body.ltr .login-form-section {
  order: 2;
}

/* Decorative SVG positioning for LTR */
body.ltr .decor {
  left: auto;
  right: 0;
  transform: scaleX(-1);
}

/* Logo positioning in slider */
body.ltr .login-slider .logo-container {
  margin-left: auto;
  margin-right: auto;
}

/* Slider content alignment */
body.ltr .login-slider h1,
body.ltr .login-slider p {
  text-align: center;
}

/* Dots alignment */
body.ltr .login-slider .dots {
  justify-content: center;
}

/* Form section adjustments */
body.ltr .login-form-section {
  padding-left: 8px;
  padding-right: 8px;
}

body.ltr .login-form-header {
  text-align: left;
}

/* Form input adjustments */
body.ltr .login-form input {
  text-align: left;
  direction: ltr;
}

body.ltr .login-form input[type="password"] {
  padding-left: 16px;
  padding-right: 48px;
}

/* Eye button positioning */
body.ltr .password-toggle {
  left: auto;
  right: 12px;
}

/* Form controls alignment */
body.ltr .form-controls {
  flex-direction: row-reverse;
}

body.ltr .form-controls .remember-me {
  order: 2;
}

body.ltr .form-controls .forgot-password {
  order: 1;
}

/* Footer adjustments */
body.ltr .login-footer {
  flex-direction: row-reverse;
}

body.ltr .login-footer .copyright {
  order: 1;
}

body.ltr .login-footer .language-switcher {
  order: 2;
}

/* Language switcher */
body.ltr .language-switcher {
  flex-direction: row-reverse;
}

/* Button alignment */
body.ltr .login-button {
  text-align: center;
}

/* Responsive adjustments for login */
@media (max-width: 768px) {
  body.ltr .login-main {
    grid-template-columns: 1fr;
  }
  
  body.ltr .login-slider {
    order: 1;
  }
  
  body.ltr .login-form-section {
    order: 2;
  }
  
  body.ltr .decor {
    transform: scaleX(-1);
  }
  
  body.ltr .login-slider h1,
  body.ltr .login-slider p {
    text-align: center;
  }
  
  body.ltr .login-form-header {
    text-align: center;
  }
}

/* Font family for login page in LTR */
body.ltr .login-slider h1,
body.ltr .login-slider p,
body.ltr .login-form-section h2,
body.ltr .login-form-section p,
body.ltr .login-form label,
body.ltr .login-form input,
body.ltr .login-form button,
body.ltr .login-footer {
  font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
}

div#questionNavigator button {
    text-align: center;
}