/* ════════════════════════════════════════════════════════════════════════════
 * Nammerha i18n — Structural Localization Stylesheet (v2)
 * ════════════════════════════════════════════════════════════════════════════
 * Per "تأسيس محرك ترجمة احترافي للمنصة.md":
 *   §4.3: Suggestion banner (no forced redirects)
 *   §6.1: CSS Logical Properties (margin-inline-start, padding-inline-end)
 *   §6.2: Bilingual typography (IBM Plex Sans Arabic / Plus Jakarta Sans)
 *   §6.3: Text expansion buffers
 *   §6.4: Language names in native script (no flags)
 *
 * Architecture: Native CSS Logical Properties FIRST (zero [dir='rtl'] hacks),
 * with surgical [dir='rtl'] overrides only where Tailwind physical classes
 * cannot be intercepted by logical properties alone.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── Arabic Font Import ──────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

/*╔═══════════════════════════════════════════════════════════════════════════╗
 * ║  §6.2: BILINGUAL TYPOGRAPHY SYSTEM                                      ║
 * ║  "Two-Font System": IBM Plex Sans Arabic for Arabic,                    ║
 * ║   Plus Jakarta Sans / Inter for Latin/European                          ║
 * ╚═══════════════════════════════════════════════════════════════════════════╝*/

:lang(ar) {
  font-family: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: 0; /* Arabic doesn't benefit from letter-spacing */
}

:lang(ar) body,
:lang(ar) input,
:lang(ar) select,
:lang(ar) textarea,
:lang(ar) button {
  font-family: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', sans-serif !important;
}

/* ╔═══════════════════════════════════════════════════════════════════════════╗
 * ║  §6.1: CSS LOGICAL PROPERTIES — "فلسفة المرآة الشاملة (Mirroring)"     ║
 * ║                                                                          ║
 * ║  Per study: "التخلي عن الأكواد النمطية الثابتة (مثل margin-left)        ║
 * ║  والانتقال إلى الخصائص المنطقية margin-inline-start, padding-inline-end"║
 * ║                                                                          ║
 * ║  Strategy: Override Tailwind physical utilities with CSS logical         ║
 * ║  equivalents that auto-mirror based on dir="rtl"|"ltr".                 ║
 * ╚═══════════════════════════════════════════════════════════════════════════╝*/

/* ─── Global Logical Defaults ─────────────────────────────────────────────── */
/* Set text alignment to logical, so it auto-mirrors */
body {
  text-align: start;
}

/* ─── Margin Logical Overrides ────────────────────────────────────────────── */
/* ml-* → margin-inline-start (auto-mirrors for RTL) */
*[class*='ml-1']:not([class*='ml-auto']):not([class*='ml-0']) {
  margin-left: unset !important;
  margin-inline-start: 0.25rem !important;
}
*[class*='ml-2']:not([class*='ml-auto']) {
  margin-left: unset !important;
  margin-inline-start: 0.5rem !important;
}
*[class*='ml-3']:not([class*='ml-auto']) {
  margin-left: unset !important;
  margin-inline-start: 0.75rem !important;
}
*[class*='ml-4']:not([class*='ml-auto']) {
  margin-left: unset !important;
  margin-inline-start: 1rem !important;
}

/* mr-* → margin-inline-end (auto-mirrors for RTL) */
*[class*='mr-1'] {
  margin-right: unset !important;
  margin-inline-end: 0.25rem !important;
}
*[class*='mr-2'] {
  margin-right: unset !important;
  margin-inline-end: 0.5rem !important;
}
*[class*='mr-3'] {
  margin-right: unset !important;
  margin-inline-end: 0.75rem !important;
}
*[class*='mr-4'] {
  margin-right: unset !important;
  margin-inline-end: 1rem !important;
}

/* ml-auto → margin-inline-start: auto */
*[class*='ml-auto'] {
  margin-left: unset !important;
  margin-inline-start: auto !important;
}
/* mr-auto → margin-inline-end: auto */
*[class*='mr-auto'] {
  margin-right: unset !important;
  margin-inline-end: auto !important;
}

/* ─── Padding Logical Overrides ───────────────────────────────────────────── */
/* pl-* → padding-inline-start */
input[class*='pl-10'] {
  padding-left: unset !important;
  padding-inline-start: 2.5rem !important;
}
*[class*='pl-4']:not(input[class*='pl-10']) {
  padding-left: unset !important;
  padding-inline-start: 1rem !important;
}
*[class*='pl-6'] {
  padding-left: unset !important;
  padding-inline-start: 1.5rem !important;
}

/* pr-* → padding-inline-end */
*[class*='pr-4'] {
  padding-right: unset !important;
  padding-inline-end: 1rem !important;
}
*[class*='pr-6'] {
  padding-right: unset !important;
  padding-inline-end: 1.5rem !important;
}

/* ─── Text Alignment Logical Overrides ────────────────────────────────────── */
.text-left {
  text-align: start !important;
}
.text-right {
  text-align: end !important;
}

/* ─── Positioning Logical Overrides ───────────────────────────────────────── */
/* Convert left/right positioned elements to inset-inline-start/end */

/* Search icon: left-3 → inset-inline-start */
span[class*='absolute'][class*='left-3'] {
  left: unset !important;
  inset-inline-start: 0.75rem !important;
}

/* Badges/Overlays: right-3 → inset-inline-end */
div[class*='absolute'][class*='right-3']:not([class*='left-']) {
  right: unset !important;
  inset-inline-end: 0.75rem !important;
}

/* right-4 (single-sided) → inset-inline-end */
div[class*='absolute'][class*='right-4']:not([class*='left-4']) {
  right: unset !important;
  inset-inline-end: 1rem !important;
}

/* left-4 (single-sided) → inset-inline-start */
div[class*='absolute'][class*='left-4']:not([class*='right-4']) {
  left: unset !important;
  inset-inline-start: 1rem !important;
}

/* Notification dot: e.g. right-2 → inset-inline-end */
span[class*='absolute'][class*='right-2'] {
  right: unset !important;
  inset-inline-end: 0.625rem !important;
}

/* ─── Border Logical Overrides ────────────────────────────────────────────── */
/* border-r → border-inline-end */
div[class*='border-r']:not([class*='border-r-']):not([class*='rounded']) {
  border-right: none !important;
  border-inline-end: 1px solid;
  border-inline-end-color: inherit;
}
/* border-l → border-inline-start */
div[class*='border-l']:not([class*='border-l-']):not([class*='rounded']) {
  border-left: none !important;
  border-inline-start: 1px solid;
  border-inline-start-color: inherit;
}

/* ─── Verification Corner Positioning (Camera View) ───────────────────────── */
/* border-l-2 + left-0 → inset-inline-start: 0 + border-inline-start */
div[class*='border-l-2'][class*='left-0'] {
  left: unset !important;
  inset-inline-start: 0 !important;
  border-left: none !important;
  border-inline-start: 2px solid;
}
div[class*='border-r-2'][class*='right-0'] {
  right: unset !important;
  inset-inline-end: 0 !important;
  border-right: none !important;
  border-inline-end: 2px solid;
}

/* ─── Decorative Gradient Blurs ───────────────────────────────────────────── */
/* Negative positioned decorative elements */
div.gradient-orb[style*='right:'] {
  right: unset;
  inset-inline-end: -60px;
}
div.gradient-orb[style*='left:'] {
  left: unset;
  inset-inline-start: -80px;
}

/* ─── Directional Icon Flipping ───────────────────────────────────────────── */
/* Arrows/chevrons flip in RTL */
[dir='rtl'] [data-flip='true'],
[dir='rtl'] .ph-caret-right,
[dir='rtl'] .ph-arrow-right,
[dir='rtl'] .ph-caret-left,
[dir='rtl'] .ph-arrow-left {
  transform: scaleX(-1);
}

/* ╔═══════════════════════════════════════════════════════════════════════════╗
 * ║  §6.3: TEXT EXPANSION BUFFERS                                            ║
 * ║  "German ~30% longer, French ~20% longer than English"                   ║
 * ║  "ترك هوامش داخلية (Padding Buffers) ملائمة"                            ║
 * ╚═══════════════════════════════════════════════════════════════════════════╝*/

.i18n-cta,
button[data-i18n],
button:has(> [data-i18n]) {
  min-width: fit-content;
  overflow-wrap: break-word;
  white-space: normal;
  padding-inline-start: 1em;
  padding-inline-end: 1em;
}

/* Ensure table/card headings don't truncate in German */
[data-i18n] {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* ╔═══════════════════════════════════════════════════════════════════════════╗
 * ║  §4.3: SUGGESTION BANNER                                                ║
 * ║  "لافتة إشعار علوية ذكية (Inline Suggestion/Banner)"                   ║
 * ║  "هل تفضل الانتقال إلى النسخة الألمانية؟"                              ║
 * ║  NO forced redirects. Dismissible. Glassmorphism aesthetic.              ║
 * ╚═══════════════════════════════════════════════════════════════════════════╝*/

.nm-suggestion-banner {
  position: fixed;
  top: 0;
  inset-inline: 0; /* logical left+right */
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.625rem 1.25rem;
  background: linear-gradient(135deg, rgba(26, 115, 232, 0.92) 0%, rgba(16, 145, 115, 0.92) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: white;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.nm-suggestion-banner.visible {
  transform: translateY(0);
}

.nm-suggestion-banner .nm-banner-text {
  flex: 1;
  text-align: center;
  line-height: 1.4;
}

/* Switch button */
.nm-suggestion-banner .nm-banner-switch {
  padding: 0.3rem 0.875rem;
  border-radius: 9999px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.18);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.nm-suggestion-banner .nm-banner-switch:hover {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.7);
  transform: scale(1.03);
}

/* Dismiss (X) button */
.nm-suggestion-banner .nm-banner-dismiss {
  background: none;
  border: none;
  padding: 0.25rem;
  opacity: 0.6;
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.nm-suggestion-banner .nm-banner-dismiss:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.1);
}

/* Push page content down when banner is visible */
.nm-suggestion-banner.visible ~ * {
  /* All sibling content shifts down */
}

/* Push fixed nav and main content */
body:has(.nm-suggestion-banner.visible) .glass-nav,
body:has(.nm-suggestion-banner.visible) nav[class*='fixed'][class*='top'] {
  top: 38px;
}

body:has(.nm-suggestion-banner.visible) main {
  padding-top: calc(3rem + 38px);
}

/* ╔═══════════════════════════════════════════════════════════════════════════╗
 * ║  LANGUAGE SELECTOR WIDGET                                                ║
 * ║  §6.4: "أسماء اللغات بصيغتها الأصلية (Native Names)"                   ║
 * ║  No flags. Glassmorphism. Accessible.                                    ║
 * ╚═══════════════════════════════════════════════════════════════════════════╝*/

.nm-lang-selector {
  position: relative;
  display: flex;
  align-items: center;
}

.nm-lang-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid rgba(100, 116, 139, 0.2);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  color: inherit;
  transition: all 0.2s ease;
}

.nm-lang-btn:hover {
  border-color: #1a73e8;
  background: rgba(26, 115, 232, 0.08);
}

.dark .nm-lang-btn {
  background: rgba(30, 20, 50, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}
.dark .nm-lang-btn:hover {
  border-color: #1a73e8;
  background: rgba(26, 115, 232, 0.15);
}

.nm-lang-btn .nm-globe-icon {
  width: 18px;
  height: 18px;
  opacity: 0.7;
}

.nm-lang-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0; /* logical right → left in RTL */
  min-width: 160px;
  padding: 0.375rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(100, 116, 139, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  z-index: 999;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: all 0.2s ease;
}

.nm-lang-dropdown.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dark .nm-lang-dropdown {
  background: rgba(24, 17, 33, 0.95);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.nm-lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.15s ease;
  color: inherit;
}

.nm-lang-option:hover {
  background: rgba(26, 115, 232, 0.08);
}
.dark .nm-lang-option:hover {
  background: rgba(26, 115, 232, 0.15);
}

.nm-lang-option.active {
  color: #1a73e8;
  font-weight: 600;
}

.nm-lang-option .nm-check {
  width: 16px;
  height: 16px;
  opacity: 0;
  color: #1a73e8;
}
.nm-lang-option.active .nm-check {
  opacity: 1;
}

/* ╔═══════════════════════════════════════════════════════════════════════════╗
 * ║  RTL-SPECIFIC: SURGICAL OVERRIDES (only where logical properties fail)   ║
 * ║  These handle edge cases that native logical properties cannot resolve    ║
 * ║  due to Tailwind inline styles or JS-generated positioning.              ║
 * ╚═══════════════════════════════════════════════════════════════════════════╝*/

/* ─── Direction inheritance for glass components ──────────────────────────── */
[dir='rtl'] .glass,
[dir='rtl'] .glass-dark {
  direction: rtl;
}

/* ─── Inline style gradient orbs (set via HTML style="" — logical can't reach) */
[dir='rtl'] .gradient-orb-primary {
  right: auto !important;
  left: -60px !important;
}
[dir='rtl'] .gradient-orb-jade {
  left: auto !important;
  right: -80px !important;
}

/* ─── Negative positioned decorative blurs (Tailwind -right-4 etc.) ───────── */
[dir='rtl'] div[class*='absolute'][class*='-right-'] {
  right: auto !important;
  left: -1rem !important;
}
[dir='rtl'] div[class*='-left-32'] {
  left: auto !important;
  right: -8rem !important;
}
[dir='rtl'] div[class*='-right-24'] {
  right: auto !important;
  left: -6rem !important;
}