.language-switcher {
  min-width: 76px;
  height: 38px;
  border: 1px solid #d9e0e2;
  background: #fff;
  color: #2a3841;
  border-radius: 10px;
  padding: 0 12px;
  font: 700 12px "Tajawal", sans-serif;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(42, 56, 65, .06);
}

.language-switcher:hover,
.language-switcher:focus-visible {
  border-color: #d0ac6e;
  outline: 3px solid rgba(208, 172, 110, .18);
}

body > .language-switcher {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 100;
  border-color: rgba(208, 172, 110, .55);
}

.mobile-header .language-switcher {
  min-width: 62px;
  height: 38px;
  margin-inline-start: 8px;
  border-color: rgba(208, 172, 110, .35);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  box-shadow: none;
}

html[dir="ltr"] .sidebar {
  left: 0;
  right: auto;
}

html[dir="ltr"] .app-shell main {
  margin-left: 320px;
  margin-right: 0;
}

html[dir="ltr"] .nav-item,
html[dir="ltr"] .data-table th,
html[dir="ltr"] .login-card,
html[dir="ltr"] .sheet-card {
  text-align: left;
}

html[dir="ltr"] .nav-item .badge,
html[dir="ltr"] .sidebar-footer .icon-btn,
html[dir="ltr"] .top-actions,
html[dir="ltr"] .page-toolbar .primary-button,
html[dir="ltr"] .panel-header button,
html[dir="ltr"] .panel-header select,
html[dir="ltr"] .date-chip,
html[dir="ltr"] .department b,
html[dir="ltr"] .task .pill,
html[dir="ltr"] .dept-card-head .row-actions,
html[dir="ltr"] .org-toolbar,
html[dir="ltr"] .settings-brand,
html[dir="ltr"] .settings-save button,
html[dir="ltr"] .employee-profile-hero .employee-profile-actions,
html[dir="ltr"] .mobile-icon,
html[dir="ltr"] .mobile-avatar,
html[dir="ltr"] .attendance-state,
html[dir="ltr"] .section-title button,
html[dir="ltr"] .balance-head span,
html[dir="ltr"] .mobile-status,
html[dir="ltr"] .salary-line strong,
html[dir="ltr"] .profile-row span,
html[dir="ltr"] .sheet-head button,
html[dir="ltr"] .payslip-mobile-row strong,
html[dir="ltr"] .payslip-net strong,
html[dir="ltr"] .payslip-detail-head div {
  margin-left: auto;
  margin-right: 0;
}

html[dir="ltr"] .brand-schedule i {
  margin-left: 0;
  margin-right: 11px;
}

html[dir="ltr"] .login-options button {
  margin-left: auto;
  margin-right: 0;
}

html[dir="ltr"] .password-field input {
  padding-left: 16px;
  padding-right: 52px;
}

html[dir="ltr"] .password-field button {
  left: auto;
  right: 7px;
}

html[dir="ltr"] .person,
html[dir="ltr"] .department,
html[dir="ltr"] .task,
html[dir="ltr"] .mobile-request,
html[dir="ltr"] .profile-row,
html[dir="ltr"] .salary-line,
html[dir="ltr"] .payslip-mobile-row {
  text-align: left;
}

html[dir="ltr"] .payslip-detail-head div {
  text-align: right;
}

html[dir="ltr"] .department-cost-row > strong,
html[dir="ltr"] .profile-field strong.ltr {
  text-align: right;
}

@media (max-width: 820px) {
  html[dir="ltr"] .sidebar { transform: translateX(-100%); }
  html[dir="ltr"] .sidebar.open { transform: none; }
  html[dir="ltr"] .app-shell main { margin-left: 0; }
}

@media (max-width: 480px) {
  body > .language-switcher {
    top: 10px;
    left: 10px;
    min-width: 68px;
    height: 34px;
  }
}