/* TrendLens Visual Identity v3 (Global-grade)
   Safe: additive styles only (no breaking of existing IDs/logic)
*/

/* ---------------------------------------------------------------------------
   Mobile stability baseline (real devices)
   - Prevents iOS/Safari font inflation that can cause header overlap
   - Prevents accidental horizontal scroll from fixed-width elements
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }

:root {
  --tl-bg0: #070a10;
  --tl-bg1: #0b1220;
  --tl-text: rgba(255,255,255,.92);
  --tl-muted: rgba(255,255,255,.62);
  --tl-border: rgba(255,255,255,.10);

  /* Brand-driven glow (keeps your existing primary feeling) */
  --tl-glow-1: rgba(254, 186, 4, .22);   /* primary */
  --tl-glow-2: rgba(255, 140, 0, .16);   /* accent-ish */
  --tl-glow-3: rgba(124, 92, 255, .14);  /* deep tech contrast */

  --tl-glass: rgba(255,255,255,.06);
  --tl-glass-strong: rgba(255,255,255,.10);
  --tl-shadow: 0 24px 80px rgba(0,0,0,.45);
  --tl-cyan: rgba(0, 242, 254, 1);
}

html[data-theme="light"] {
  --tl-bg0: #f1f5f9;
  --tl-bg1: #f8fafc;
  --tl-text: rgba(10, 15, 25, .92);
  --tl-muted: rgba(10, 15, 25, .62);
  --tl-border: rgba(10, 15, 25, .10);
  --tl-glass: rgba(10,15,25,.04);
  --tl-glass-strong: rgba(10,15,25,.06);
  --tl-shadow: 0 24px 80px rgba(10,15,25,.12);
}

/* Ambient layer that doesn't interfere with layout */
.tl-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.tl-ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px circle at 18% 12%, var(--tl-glow-1), transparent 62%),
    radial-gradient(900px circle at 82% 28%, var(--tl-glow-2), transparent 58%),
    radial-gradient(900px circle at 55% 82%, var(--tl-glow-3), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.65));
  opacity: .95;
}

html[data-theme="light"] .tl-ambient::before {
  background:
    radial-gradient(900px circle at 18% 12%, rgba(254,186,4,.16), transparent 62%),
    radial-gradient(900px circle at 82% 28%, rgba(255,140,0,.12), transparent 58%),
    radial-gradient(900px circle at 55% 82%, rgba(124,92,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(245,247,252,.78), rgba(241,245,249,.92));
}

#tlParticles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .85;
  filter: saturate(1.05);
}

/* ---------------------------------------------------------------------------
   Header responsiveness (real mobile devices)
   Goal: avoid overlap by allowing wrap + slightly tighter typography/icons
--------------------------------------------------------------------------- */
@media (max-width: 375px) {
  /* Main sticky headers (index/dashboard) */
  header.sticky .flex.items-center.justify-between {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  header.sticky .flex.items-center.justify-between > * {
    min-width: 0;
  }

  /* Controls cluster should wrap instead of forcing overflow */
  header.sticky .flex.items-center.gap-2.shrink-0,
  header.sticky .flex.items-center.gap-3.shrink-0 {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 100%;
  }

  /* Slightly more forgiving title sizing */
  header.sticky h1 {
    font-size: clamp(0.92rem, 4.2vw, 1rem);
    line-height: 1.1;
  }

  /* Partner dashboard header bar */
  #headerBar {
    flex-wrap: wrap;
  }
  #headerBar > * {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #tlParticles { display: none !important; }
}

/* Global-grade hero */
.tl-hero {
  position: relative;
  z-index: 1;
}

.tl-heroCard {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--tl-border);
  background: linear-gradient(180deg, var(--tl-glass-strong), var(--tl-glass));
  box-shadow: var(--tl-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.tl-pill {
  border: 1px solid rgba(254,186,4,.28);
  background: rgba(254,186,4,.10);
  color: rgba(254,186,4,.95);
}

.tl-title {
  color: var(--tl-text);
  letter-spacing: -0.02em;
}

.tl-subtitle {
  color: var(--tl-muted);
}

.tl-btnPrimary {
  background: linear-gradient(90deg, rgba(254,186,4,1) 0%, rgba(255,140,0,1) 100%);
  color: #0b0f14;
  box-shadow: 0 16px 40px rgba(254,186,4,.18);
}

.tl-btnSecondary {
  border: 1px solid var(--tl-border);
  background: rgba(255,255,255,.06);
  color: var(--tl-text);
}

.tl-miniCard {
  border: 1px solid var(--tl-border);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ============================
   v3 Language UI (icons only)
============================ */
.tl-lang-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tl-lang-btn {
  /* image-only: no extra space */
  height: 22px !important;
  width: 22px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--tl-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.tl-lang-btn:hover { transform: translateY(-1px); }
.tl-lang-btn:focus,
.tl-lang-btn:focus-visible { outline: none !important; }

.tl-lang-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px; /* emoji */
}
.tl-lang-icon img { width: 22px; height: 22px; display: block; }

.tl-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  /* icons-only menu: keep width just as wide as the icon buttons */
  min-width: unset;
  width: max-content;
  /* remove the big frame entirely */
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 0 !important;
  z-index: 80;
}
html[data-theme="light"] .tl-lang-menu {
  background: transparent !important;
  box-shadow: none !important;
}

.tl-lang-item {
  /* image-only: no extra space */
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0 !important;
  background: transparent !important;
  cursor: pointer;
  color: var(--tl-text);
  line-height: 0;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none !important;
  outline: none !important;
}
.tl-lang-item:hover { background: transparent; }
html[data-theme="light"] .tl-lang-item:hover { background: transparent; }
.tl-lang-item:focus,
.tl-lang-item:focus-visible { outline: none !important; }

.tl-lang-item .tl-lang-left { display: inline-flex; align-items: center; gap: 0; }
.tl-lang-item .tl-lang-name { font-size: 12px; font-weight: 800; color: var(--tl-text); opacity: .85; }

.tl-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================
   v3 Hero Visual (Trend Map)
============================ */
.tl-heroGrid {
  display: grid;
  gap: 1.4rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .tl-heroGrid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2rem;
  }
}

.tl-heroCopy {
  position: relative;
  z-index: 3;
  text-align: center;
}
@media (min-width: 1024px) {
  .tl-heroCopy { text-align: start; }
}

.tl-heroKicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.tl-heroTitleTight {
  letter-spacing: -0.03em;
}

/* Prevent overlap/clip in all locales */
.tl-title { overflow-wrap: anywhere; text-wrap: balance; }
.tl-heroCopy { min-width: 0; }

/* Homepage hero title: keep Arabic hook on ONE line (avoid awkward wrap) */
@media (min-width: 768px) {
  html[lang="ar"] .tl-heroTitleTight {
    white-space: nowrap;
  }
}

.tl-heroVisual {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 320px;
  border-radius: 1.5rem;
  border: 1px solid var(--tl-border);
  background: radial-gradient(650px circle at 30% 20%, rgba(254,186,4,.14), transparent 55%),
              radial-gradient(650px circle at 80% 70%, rgba(0,242,254,.10), transparent 55%),
              rgba(255,255,255,.04);
  overflow: hidden;
}

html[data-theme="light"] .tl-heroVisual {
  background: radial-gradient(650px circle at 30% 20%, rgba(254,186,4,.12), transparent 55%),
              radial-gradient(650px circle at 80% 70%, rgba(124,92,255,.08), transparent 55%),
              rgba(10,15,25,.03);
}

.tl-visualGlow {
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 160deg,
      rgba(254,186,4,.00),
      rgba(254,186,4,.18),
      rgba(0,242,254,.12),
      rgba(124,92,255,.10),
      rgba(254,186,4,.00)
  );
  filter: blur(40px);
  opacity: .85;
  animation: tlSpin 22s linear infinite;
}

.tl-gridLines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .35;
  mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 72%);
}

html[data-theme="light"] .tl-gridLines {
  background-image:
    linear-gradient(to right, rgba(10,15,25,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,15,25,.06) 1px, transparent 1px);
  opacity: .30;
}

.tl-trendSvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tl-orbit {
  transform-origin: 50% 50%;
  animation: tlSpin 34s linear infinite;
}
.tl-orbit2 {
  transform-origin: 50% 50%;
  animation: tlSpinReverse 48s linear infinite;
  opacity: .75;
}

.tl-arc {
  stroke-dasharray: 10 10;
  animation: tlDash 8s linear infinite;
}

.tl-node {
  animation: tlPulse 2.8s ease-in-out infinite;
}
.tl-node:nth-child(2n) { animation-duration: 3.6s; }
.tl-node:nth-child(3n) { animation-duration: 4.2s; }

.tl-floatCards {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tl-floatCard {
  position: absolute;
  min-width: 170px;
  max-width: 220px;
  border-radius: 1rem;
  border: 1px solid var(--tl-border);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  padding: .75rem .85rem;
  animation: tlFloat 5.8s ease-in-out infinite;
}
html[data-theme="light"] .tl-floatCard {
  background: rgba(255,255,255,.55);
  box-shadow: 0 18px 60px rgba(10,15,25,.16);
}

.tl-floatCard:nth-child(2) { animation-duration: 6.6s; animation-delay: -1.5s; }
.tl-floatCard:nth-child(3) { animation-duration: 7.2s; animation-delay: -2.2s; }

.tl-fcLabel { font-size: .72rem; color: var(--tl-muted); font-weight: 700; }
.tl-fcValue { margin-top: .35rem; font-size: .9rem; font-weight: 900; color: var(--tl-text); }

@keyframes tlFloat {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-10px) translateX(6px); }
}
@keyframes tlPulse {
  0%, 100% { transform: scale(1); opacity: .85; }
  50% { transform: scale(1.25); opacity: 1; }
}
@keyframes tlSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes tlSpinReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}
@keyframes tlDash {
  to { stroke-dashoffset: -200; }
}

@media (prefers-reduced-motion: reduce) {
  .tl-visualGlow,
  .tl-orbit,
  .tl-orbit2,
  .tl-arc,
  .tl-node,
  .tl-floatCard {
    animation: none !important;
  }
}

/* ============================
   v3 Globe Scene (Gold Orbit)
============================ */
.tl-globeScene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.tl-globe {
  position: relative;
  width: min(380px, 82%);
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
  border: 1px solid rgba(254,186,4,.28);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 28px 120px rgba(0,0,0,.55),
    0 0 70px rgba(254,186,4,.16);
  overflow: hidden;
  transform-style: preserve-3d;
}

html[data-theme="light"] .tl-globe {
  box-shadow:
    0 0 0 1px rgba(10,15,25,.06) inset,
    0 28px 120px rgba(10,15,25,.14),
    0 0 70px rgba(254,186,4,.12);
}

.tl-globe::before {
  /* internal atmosphere */
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: inherit;
  background:
    radial-gradient(circle at 30% 28%, rgba(254,186,4,.28), transparent 46%),
    radial-gradient(circle at 72% 62%, rgba(0,242,254,.18), transparent 58%),
    radial-gradient(circle at 55% 52%, rgba(255,255,255,.07), rgba(0,0,0,0) 62%);
  filter: blur(0px);
  opacity: .95;
}

.tl-globeShade {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(220px circle at 34% 40%, rgba(255,255,255,.06), rgba(0,0,0,0) 58%),
    radial-gradient(260px circle at 74% 50%, rgba(0,0,0,.55), rgba(0,0,0,0) 70%),
    radial-gradient(520px circle at 65% 58%, rgba(0,0,0,.65), rgba(0,0,0,0) 78%),
    linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.55));
  opacity: .85;
  mix-blend-mode: multiply;
}

.tl-globeCore {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(254,186,4,.14), rgba(0,0,0,0) 60%);
  mix-blend-mode: screen;
  opacity: .85;
}

/* Meridians (vertical gold lines) */
.tl-globeMeridians {
  position: absolute;
  inset: -12% -24%;
  border-radius: inherit;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(254,186,4,.00) 0px,
      rgba(254,186,4,.00) 18px,
      rgba(254,186,4,.22) 19px,
      rgba(254,186,4,.00) 20px,
      rgba(254,186,4,.00) 38px
    );
  opacity: .82;
  mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 72%);
  transform: translateZ(0) rotate(12deg);
  animation: tlGlobeSpin 18s linear infinite;
}

/* Latitudes (horizontal faint lines) */
.tl-globeLatitudes {
  position: absolute;
  inset: -28% -12%;
  border-radius: inherit;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.00) 0px,
      rgba(255,255,255,.00) 14px,
      rgba(255,255,255,.08) 15px,
      rgba(255,255,255,.00) 16px,
      rgba(255,255,255,.00) 30px
    );
  opacity: .50;
  mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 56%, rgba(0,0,0,0) 73%);
  transform: translateZ(0) rotate(-6deg);
}

.tl-globeContinents {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: .92;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 14px rgba(254,186,4,.10));
  animation: tlContinentSpin 18s linear infinite;
}

.tl-globeContinents svg {
  width: 100%;
  height: 100%;
  display: block;
}

.tl-continentFill {
  /* “digital lines” feel inside the continent shapes */
  fill: rgba(0,0,0,0); /* shapes are only used as clip/mask */
}

.tl-continentLines {
  /* a tiled line pattern clipped by the continent mask */
  fill: url(#tlContinentLinePattern);
  opacity: .75;
}

.tl-continentDots {
  fill: rgba(254,186,4,.75);
  opacity: .55;
}

html[data-theme="light"] .tl-continentDots {
  opacity: .45;
}

@keyframes tlContinentSpin {
  from { transform: rotate(12deg); }
  to { transform: rotate(372deg); }
}

.tl-globeSpecular {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(180px circle at 30% 28%, rgba(255,255,255,.18), transparent 60%);
  mix-blend-mode: screen;
  opacity: .75;
}

/* Soft pulse (breathing) */
.tl-globePulse {
  position: absolute;
  inset: -10%;
  border-radius: inherit;
  border: 2px solid rgba(254,186,4,.18);
  opacity: .0;
  transform: scale(.92);
  animation: tlPulseRing 3.2s ease-in-out infinite;
}

.tl-globeRing {
  position: absolute;
  inset: -18%;
  border-radius: 9999px;
  border: 1.6px solid rgba(254,186,4,.18);
  filter: drop-shadow(0 0 22px rgba(254,186,4,.12));
  transform-origin: 50% 50%;
  animation: tlRingSpin var(--dur, 10s) linear infinite;
}

.tl-globeRing::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top: -4px;
  border-radius: 9999px;
  background: rgba(254,186,4,.92);
  box-shadow:
    0 0 0 3px rgba(254,186,4,.18),
    0 0 24px rgba(254,186,4,.35);
  animation: tlSatellitePulse 1.7s ease-in-out infinite;
}

.tl-globeRingA { --rx: 62deg; --rz: 12deg; --dur: 10s; }
.tl-globeRingB {
  inset: -26%;
  border-color: rgba(0,242,254,.14);
  --rx: 72deg; --rz: -22deg; --dur: 14s;
  opacity: .85;
}
.tl-globeRingB::after {
  background: rgba(0,242,254,.70);
  box-shadow:
    0 0 0 3px rgba(0,242,254,.14),
    0 0 24px rgba(0,242,254,.25);
  animation-duration: 2.1s;
}

.tl-globeRingC {
  inset: -34%;
  border-color: rgba(124,92,255,.12);
  --rx: 54deg; --rz: 38deg; --dur: 18s;
  opacity: .78;
}
.tl-globeRingC::after {
  background: rgba(124,92,255,.65);
  box-shadow:
    0 0 0 3px rgba(124,92,255,.14),
    0 0 24px rgba(124,92,255,.20);
  animation-duration: 2.6s;
}

@keyframes tlGlobeSpin {
  from { transform: translateZ(0) rotate(12deg) translateX(0); }
  to { transform: translateZ(0) rotate(372deg) translateX(0); }
}
@keyframes tlRingSpin {
  from { transform: rotateX(var(--rx, 62deg)) rotateZ(var(--rz, 12deg)) rotate(0deg); }
  to { transform: rotateX(var(--rx, 62deg)) rotateZ(var(--rz, 12deg)) rotate(360deg); }
}
@keyframes tlPulseRing {
  0% { opacity: 0; transform: scale(.94); }
  30% { opacity: .7; }
  70% { opacity: .15; }
  100% { opacity: 0; transform: scale(1.05); }
}
@keyframes tlSatellitePulse {
  0%, 100% { transform: scale(1); opacity: .95; }
  50% { transform: scale(1.65); opacity: 1; }
}

.tl-globeEnergyRing {
  position: absolute;
  inset: -22%;
  border-radius: 9999px;
  border: 1px solid rgba(0,242,254,.18);
  box-shadow:
    0 0 50px rgba(0,242,254,.14),
    0 0 90px rgba(0,242,254,.10);
  opacity: .9;
  filter: blur(.1px);
}

.tl-globeEnergyRing::before {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: inherit;
  border: 2px solid rgba(0,242,254,.12);
  opacity: .8;
  filter: blur(0.2px);
  animation: tlPulseRing 3.8s ease-in-out infinite;
}

.tl-globeArcs {
  position: absolute;
  inset: -30%;
  width: 160%;
  height: 160%;
  pointer-events: none;
  opacity: .95;
  filter: drop-shadow(0 0 10px rgba(0,242,254,.18));
}

.tl-globeArc {
  fill: none;
  stroke: rgba(0,242,254,.40);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 10 12;
  animation: tlDash 7.5s linear infinite;
}

.tl-globeArcAlt {
  stroke: rgba(254,186,4,.26);
  stroke-dasharray: 8 14;
  animation-duration: 9.5s;
  opacity: .9;
}

.tl-globeSpark {
  fill: rgba(0,242,254,.75);
  opacity: .85;
  animation: tlSatellitePulse 1.9s ease-in-out infinite;
}

.tl-globeSparkAlt {
  fill: rgba(254,186,4,.68);
  animation-duration: 2.2s;
}

@media (prefers-reduced-motion: reduce) {
  .tl-globeMeridians,
  .tl-globeRing,
  .tl-globePulse,
  .tl-globeArcs .tl-globeArc,
  .tl-globeEnergyRing::before,
  .tl-globeContinents {
    animation: none !important;
  }
}

/* ========================================================================
   Theme text contrast – ممنوع الكتابة بخط داكن في الثيم الأسود
   ممنوع الكتابة بخط أبيض/فاتح في الثيم الأبيض
   يطبق على الرئيسية والداشبورد ولوحات التحكم وجميع الصفحات
   ======================================================================== */

/* الثيم الداكن: أي نص أسود أو رمادي غامق → نص فاتح (واضح) */
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-zinc-900,
html[data-theme="dark"] .text-zinc-800,
html[data-theme="dark"] .text-zinc-700,
html[data-theme="dark"] .text-zinc-600 {
  color: var(--tl-text) !important;
}

html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-slate-500,
html[data-theme="dark"] .text-zinc-500 {
  color: var(--tl-muted) !important;
}

/* الثيم الفاتح: أي نص أبيض أو رمادي فاتح → نص غامق (واضح) */
html[data-theme="light"] .text-white,
html[data-theme="light"] .text-gray-100,
html[data-theme="light"] .text-gray-200,
html[data-theme="light"] .text-gray-300,
html[data-theme="light"] .text-gray-400,
html[data-theme="light"] .text-slate-100,
html[data-theme="light"] .text-slate-200,
html[data-theme="light"] .text-slate-300,
html[data-theme="light"] .text-slate-400,
html[data-theme="light"] .text-zinc-100,
html[data-theme="light"] .text-zinc-200,
html[data-theme="light"] .text-zinc-300,
html[data-theme="light"] .text-zinc-400 {
  color: var(--tl-text) !important;
}

html[data-theme="light"] .text-gray-500,
html[data-theme="light"] .text-slate-500,
html[data-theme="light"] .text-zinc-500 {
  color: var(--tl-muted) !important;
}

/* شفافيات النص: تأخذ لون النص حسب الثيم */
html[data-theme="light"] .text-white\/90,
html[data-theme="light"] .text-white\/80,
html[data-theme="light"] .text-white\/70,
html[data-theme="light"] .text-white\/60,
html[data-theme="light"] .text-white\/50 {
  color: rgba(10, 15, 25, 0.9) !important;
}

html[data-theme="dark"] .text-black\/90,
html[data-theme="dark"] .text-black\/80,
html[data-theme="dark"] .text-black\/70,
html[data-theme="dark"] .text-black\/60 {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* body وعناصر الصفحة العامة: لون النص حسب الثيم */
html[data-theme="dark"] body,
html[data-theme="dark"] [class*="bg-gray-9"],
html[data-theme="dark"] [class*="bg-slate-9"],
html[data-theme="dark"] [class*="bg-zinc-9"] {
  color: var(--tl-text);
}

html[data-theme="light"] body,
html[data-theme="light"] [class*="bg-white"],
html[data-theme="light"] [class*="bg-gray-1"],
html[data-theme="light"] [class*="bg-slate-1"] {
  color: var(--tl-text);
}