/**
 * e-Tasmi i18n layout helpers — CSS Logical Properties for LTR/RTL.
 * Load after Bootstrap; pairs with html[dir="rtl"] from EtasmiI18n.
 */

/* ------------------------------------------------------------------ */
/* Typography per locale                                              */
/* ------------------------------------------------------------------ */

html[lang="ar"] body {
  font-family: "Segoe UI", "Noto Sans Arabic", "Tahoma", sans-serif;
  line-height: 1.65;
}

html[lang="ar"] h1,
html[lang="ar"] .display-4 {
  letter-spacing: 0;
}

/* ------------------------------------------------------------------ */
/* Logical spacing utilities (prefer over ml-/mr-/ps-/pe- where set)  */
/* ------------------------------------------------------------------ */

.etasmi-inline-start-auto {
  margin-inline-start: auto;
}

.etasmi-pad-inline-end-2 {
  padding-inline-end: 0.5rem;
}

.etasmi-text-start {
  text-align: start;
}

.etasmi-border-inline-start {
  border-inline-start: 1px solid var(--theme-border, #dee2e6);
}

/* Landing navbar: action cluster stays at inline end in both directions */
.etasmi-landing-navbar__actions {
  margin-inline-start: auto;
}

/* Hero CTA arrow follows reading direction */
.etasmi-icon-inline-after {
  margin-inline-start: 0.5rem;
}

[dir="rtl"] .etasmi-icon-flip-inline {
  transform: scaleX(-1);
}

/* Hero metrics row: gap uses flex; logical alignment */
.etasmi-hero-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: flex-start;
}

/* Badge dot spacing */
.etasmi-badge-gap {
  margin-inline-start: 0.25rem;
}

/* Floating hero card offset — use logical negative margin */
.etasmi-hero-float-badge {
  margin-inline-start: -2rem;
  margin-block-end: -2rem;
}

[dir="rtl"] .etasmi-hero-float-badge {
  margin-inline-start: 0;
  margin-inline-end: -2rem;
}

/* ------------------------------------------------------------------ */
/* Language switcher (navbar)                                         */
/* ------------------------------------------------------------------ */

.etasmi-language-switcher {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.etasmi-language-switcher__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.etasmi-language-switcher__select {
  appearance: none;
  min-inline-size: 9.25rem;
  padding-block: 0.45rem;
  padding-inline: 0.75rem 2.1rem;
  border: 1px solid var(--theme-border, #dee2e6);
  border-radius: 0.5rem;
  background-color: var(--theme-surface, #fff);
  color: var(--theme-text, #0f172a);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 12px 8px;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[dir="rtl"] .etasmi-language-switcher__select {
  background-position: left 0.65rem center;
  padding-inline: 2.1rem 0.75rem;
}

.etasmi-language-switcher__select:hover {
  border-color: var(--theme-primary, #0d9488);
}

.etasmi-language-switcher__select:focus-visible {
  outline: 2px solid var(--theme-primary, #0d9488);
  outline-offset: 2px;
}

:root[data-theme="dark"] .etasmi-language-switcher__select {
  background-color: var(--theme-surface, #111b32);
  color: var(--theme-text, #e6eaf3);
  border-color: var(--theme-border, #1f2c48);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23b7c1d4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ */
/* Bootstrap bridge: logical overrides on landing navbar              */
/* ------------------------------------------------------------------ */

[dir="rtl"] .etasmi-landing-navbar .navbar-nav {
  padding-inline-start: 0;
}

[dir="rtl"] .etasmi-landing-navbar .nav-link {
  text-align: start;
}

/* Keep numbers/LTR metrics readable in Arabic UI */
.etasmi-metric-value {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Auth pages: fixed top-corner cluster for language + theme controls */
.etasmi-auth-topbar {
  position: fixed;
  top: 1rem;
  inset-inline-end: 1rem;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: nowrap;
}

.etasmi-auth-topbar .etasmi-language-switcher,
.etasmi-auth-topbar .etasmi-auth-theme-toggle {
  flex-shrink: 0;
}

/* Inside the topbar, theme toggle must stay in the flex row (not its own fixed layer). */
.etasmi-auth-topbar .etasmi-auth-theme-toggle,
.etasmi-auth-topbar .etasmi-auth-theme-toggle--floating,
body.etasmi-login-dual .etasmi-auth-topbar .etasmi-auth-theme-toggle--floating,
body.auth-body .etasmi-auth-topbar .etasmi-auth-theme-toggle--floating {
  position: static;
  top: auto;
  inset-inline-end: auto;
  z-index: auto;
}

.etasmi-auth-shell .etasmi-auth-home-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: nowrap;
}

.etasmi-auth-shell .etasmi-auth-home-row .etasmi-language-switcher {
  margin-inline-start: auto;
  flex-shrink: 0;
}

.etasmi-auth-shell .etasmi-auth-home-row .etasmi-auth-theme-toggle {
  flex-shrink: 0;
}

/* Workspace shell headers (student / instructor / admin) */
.student-shell-topbar__actions .etasmi-language-switcher,
.instructor-shell-topbar__actions .etasmi-language-switcher,
.admin-shell-topbar__actions .etasmi-language-switcher {
  flex-shrink: 0;
}

/* Arabic / RTL: hide top-corner "Back to home" on RTL auth shells */
[dir="rtl"] .etasmi-dual-home,
[dir="rtl"] .etasmi-auth-home-link,
html[lang="ar"] .etasmi-dual-home,
html[lang="ar"] .etasmi-auth-home-link {
  display: none !important;
}

/* Login page locks LTR layout — keep back link visible in Arabic */
body.etasmi-login-dual[data-layout-dir="ltr"] .etasmi-dual-home {
  display: inline !important;
}

[dir="rtl"] body.etasmi-auth-v2 .etasmi-auth-home-row,
html[lang="ar"] body.etasmi-auth-v2 .etasmi-auth-home-row {
  justify-content: flex-end;
}

/* Back navigation link — arrow follows reading direction */
.etasmi-link-back::before {
  content: "← ";
  unicode-bidi: isolate;
}

[dir="rtl"] .etasmi-link-back::before {
  content: "";
}

[dir="rtl"] .etasmi-link-back::after {
  content: " ←";
  unicode-bidi: isolate;
}

/* Profile module — RTL-safe layout */
[dir="rtl"] .profile-hero,
[dir="rtl"] .profile-actions-row,
[dir="rtl"] .profile-hero__actions {
  text-align: start;
}

.profile-actions-row,
.profile-hero__actions {
  flex-wrap: wrap;
}

.profile-actions-row .pbtn,
.profile-hero__actions .pbtn {
  white-space: normal;
  text-align: center;
  min-inline-size: fit-content;
}

[dir="rtl"] .profile-breadcrumb .sep {
  display: inline-block;
  transform: scaleX(-1);
}

[dir="rtl"] .profile-form-grid-2col,
[dir="rtl"] .profile-sidebar-info .info-row {
  text-align: start;
}

[dir="rtl"] .pwd-modal__header,
[dir="rtl"] .pwd-modal__body,
[dir="rtl"] .pwd-modal__actions {
  text-align: start;
}

[dir="rtl"] .pwd-modal__actions {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

/* ------------------------------------------------------------------ */
/* RTL hardening: cards, badges, mixed LTR content inside Arabic UI   */
/* ------------------------------------------------------------------ */

/* Counters / KPI numbers always read left-to-right, even in Arabic.
   Covers student stat cards, instructor KPI cockpit and countdown. */
.student-dashboard-clean__stat-value,
.idash-kpi-card__value,
.idash-countdown__digits,
.etasmi-num {
  direction: ltr;
  unicode-bidi: isolate;
}

[dir="rtl"] .student-dashboard-clean__stat-value,
[dir="rtl"] .idash-kpi-card__value {
  text-align: start;
}

/* Status badges ("UPCOMING", "Ready to Join") and date/time meta rows
   often contain untranslated Latin text or yyyy-MM-dd / hh:mm a values.
   plaintext lets the bidi algorithm order each fragment by its own
   script, preventing punctuation jumping to the wrong side. */
[dir="rtl"] .mys-badge,
[dir="rtl"] .mys-meta-row > span,
[dir="rtl"] time,
[dir="rtl"] .etasmi-bidi-plaintext {
  unicode-bidi: plaintext;
}

/* Generic helper for inline LTR islands (codes, emails, URLs, IDs). */
.etasmi-ltr-island {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* LTR-only data entry stays LTR in the Arabic UI, aligned to the
   field's inline start so labels and inputs do not collide. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="password"] {
  direction: ltr;
  text-align: end;
}

/* Flex card children: allow shrinking so long Arabic strings wrap
   instead of clipping or overflowing the card boundary. */
.mys-card__head > div,
.student-dashboard-clean__stat-card-top > *,
.idash-kpi-card__head > * {
  min-inline-size: 0;
}

.mys-card__title,
.student-dashboard-clean__stat-kicker,
.idash-kpi-card__label {
  overflow-wrap: break-word;
}

/* Cards and quick-action tiles align to the reading direction. */
[dir="rtl"] .mys-card,
[dir="rtl"] .student-dashboard-clean__stat-card,
[dir="rtl"] .student-dashboard-clean__action-card,
[dir="rtl"] .idash-kpi-card {
  text-align: start;
}

/* Legacy / Tailwind-style physical utilities used on a few pages:
   flip them under RTL so they keep their visual intent. */
[dir="rtl"] .text-left {
  text-align: right;
}

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

/* ------------------------------------------------------------------ */
/* Conversion reference (applied across /css via codemod)             */
/* ------------------------------------------------------------------ */
/* margin-left        → margin-inline-start                           */
/* margin-right       → margin-inline-end                             */
/* padding-left       → padding-inline-start                          */
/* padding-right      → padding-inline-end                            */
/* left / right       → inset-inline-start / inset-inline-end         */
/* text-align: left   → text-align: start                             */
/* border-left        → border-inline-start                           */
/* width (horizontal) → inline-size                                   */
/* height             → block-size                                    */
/* ------------------------------------------------------------------ */