/* =============================================================
   PopTop Dashboard - LTR / English Stylesheet
   Applied when html[dir="ltr"] is active
   ============================================================= */

html[dir="ltr"] {
  direction: ltr !important;
}

html[dir="ltr"] body {
  direction: ltr !important;
  text-align: left;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

html[dir="ltr"] button,
html[dir="ltr"] input,
html[dir="ltr"] select,
html[dir="ltr"] textarea,
html[dir="ltr"] .form-control,
html[dir="ltr"] .btn,
html[dir="ltr"] .card,
html[dir="ltr"] .table,
html[dir="ltr"] h1,
html[dir="ltr"] h2,
html[dir="ltr"] h3,
html[dir="ltr"] h4,
html[dir="ltr"] h5,
html[dir="ltr"] h6,
html[dir="ltr"] p,
html[dir="ltr"] label,
html[dir="ltr"] .modal,
html[dir="ltr"] .dropdown-menu {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* Explicit text alignment helpers for LTR */
html[dir="ltr"] .text-center,
html[dir="ltr"] [class*="empty-state"],
html[dir="ltr"] .cu-empty-state,
html[dir="ltr"] .cu-empty-title,
html[dir="ltr"] .cu-empty-desc,
html[dir="ltr"] .sc-empty,
html[dir="ltr"] .geo-card-header,
html[dir="ltr"] .geo-step,
html[dir="ltr"] .geo-step .step-label {
  text-align: center !important;
}

/* ─── Main Content Layout ────────────────────────────────────── */
html[dir="ltr"] .main-wrapper {
  direction: ltr !important;
}

html[dir="ltr"] .main-content {
  margin-right: 0 !important;
  margin-left: var(--sidebar-width) !important;
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html[dir="ltr"] .sidebar.collapsed ~ .main-content {
  margin-left: var(--sidebar-collapsed) !important;
  margin-right: 0 !important;
}

/* ─── Sidebar Positioning ────────────────────────────────────── */
html[dir="ltr"] .sidebar {
  left: 0 !important;
  right: auto !important;
  border-left: none !important;
  border-right: 1px solid var(--sidebar-border) !important;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.02) !important;
}

html[dir="ltr"] .sidebar nav a {
  text-align: left !important;
}

html[dir="ltr"] .sidebar nav a i {
  margin-left: 0 !important;
  margin-right: 12px !important;
}

html[dir="ltr"] .sidebar .menu-label {
  text-align: left !important;
  padding-left: 1.25rem !important;
  padding-right: 0 !important;
}

html[dir="ltr"] .nav-lock-badge {
  margin-right: 0 !important;
  margin-left: auto !important;
}

html[dir="ltr"] .toggle-sidebar-btn-edge {
  left: auto !important;
  right: -12px !important;
}

html[dir="ltr"] .mobile-close-sidebar {
  left: auto !important;
  right: 14px !important;
}

/* ─── Top Navbar ─────────────────────────────────────────────── */
html[dir="ltr"] .top-navbar {
  left: var(--sidebar-width) !important;
  right: 0 !important;
}

html[dir="ltr"] .sidebar.collapsed ~ .main-content .top-navbar,
html[dir="ltr"] .sidebar.collapsed + .main-content .top-navbar {
  left: var(--sidebar-collapsed) !important;
  right: 0 !important;
}

html[dir="ltr"] .top-navbar-search input {
  padding-left: 42px !important;
  padding-right: 16px !important;
  text-align: left !important;
}

html[dir="ltr"] .top-navbar-search .search-icon {
  left: 14px !important;
  right: auto !important;
}

html[dir="ltr"] .top-navbar-actions {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* ─── Top User Dropdown & Language Switcher ──────────────────── */
html[dir="ltr"] .top-user-dropdown {
  left: auto !important;
  right: 0 !important;
  text-align: left !important;
}

html[dir="ltr"] .sidebar-user-menu-item i {
  margin-left: 0 !important;
  margin-right: 10px !important;
}

html[dir="ltr"] .notification-dropdown-menu {
  left: auto !important;
  right: 0 !important;
  text-align: left !important;
}

/* ─── Language Switcher UI inside Dropdown ───────────────────── */
.top-user-dropdown-lang-section {
  padding: 8px 12px 6px;
}

.top-user-dropdown-lang-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.top-user-dropdown-lang-buttons {
  display: flex;
  background: var(--bg-hover);
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  gap: 4px;
}

.lang-switch-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 8px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-secondary);
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.lang-switch-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.5);
}

[data-bs-theme="dark"] .lang-switch-btn:hover,
body.dark-mode .lang-switch-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.lang-switch-btn.active {
  background: var(--bg-card);
  color: var(--primary-orange);
  border-color: var(--border-color);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.lang-switch-btn.active i {
  font-size: 0.7rem;
}

/* ─── Dashboard Overview LTR Alignments ─────────────────────── */
html[dir="ltr"] .welcome-section {
  text-align: left !important;
}

html[dir="ltr"] .kpi-card,
html[dir="ltr"] .metric-card,
html[dir="ltr"] .analytics-card,
html[dir="ltr"] .feed-card {
  text-align: left !important;
}

html[dir="ltr"] .kpi-icon {
  margin-left: 0 !important;
  margin-right: 12px !important;
}

html[dir="ltr"] .activity-item-icon {
  margin-left: 0 !important;
  margin-right: 12px !important;
}

html[dir="ltr"] .activity-item-time {
  margin-right: 0 !important;
  margin-left: auto !important;
}

html[dir="ltr"] .table th,
html[dir="ltr"] .table td {
  text-align: left !important;
}

html[dir="ltr"] .modal-header,
html[dir="ltr"] .modal-footer,
html[dir="ltr"] .modal-body {
  text-align: left !important;
}

/* ─── Mobile Responsiveness (< 992px) ───────────────────────── */
@media (max-width: 991.98px) {
  html[dir="ltr"] .sidebar {
    left: -280px !important;
    right: auto !important;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.25) !important;
  }

  html[dir="ltr"] .sidebar.mobile-open {
    left: 0 !important;
    right: auto !important;
  }

  html[dir="ltr"] .main-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  html[dir="ltr"] .top-navbar {
    left: 0 !important;
    right: 0 !important;
  }
}