/*
 * Evolvance — Design System
 * "Liquid Hologram Premium" — Turquoise Luxury
 * Foundation layer: variables, reset, typography, layout primitives
 */

/* ── Google Fonts ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,600;9..40,700&display=swap');

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Base palette */
  --bg-base:       #F7FAFB;
  --bg-warm:       #FAFAFA;
  --bg-blue:       #EEF4FF;
  --bg-teal:       #F0FDFA;

  /* Glass surfaces */
  --glass-bg:      rgba(255, 255, 255, 0.65);
  --glass-border:  rgba(255, 255, 255, 0.35);
  --glass-shadow:
    0 10px 30px rgba(15, 118, 110, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --glass-shadow-elevated:
    0 20px 60px rgba(20, 184, 166, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* Turquoise accent gradients */
  --grad-primary:   linear-gradient(135deg, #0F766E 0%, #14B8A6 50%, #67E8F9 100%);
  --grad-success:   linear-gradient(135deg, #34D399, #2DD4BF);
  --grad-warning:   linear-gradient(135deg, #FCA5A5, #FCD34D);
  --grad-ai:        linear-gradient(135deg, #14B8A6, #5EEAD4, #22D3EE);
  --grad-subtle:    linear-gradient(180deg, rgba(20,184,166,0.06), rgba(103,232,249,0.03));

  /* Semantic colors */
  --accent:        #14B8A6;   /* turquoise */
  --accent-deep:   #0F766E;   /* deep teal */
  --accent-glow:   #5EEAD4;   /* turquoise glow */
  --highlight:     #22D3EE;   /* cyan highlight */
  --success:       #16a34a;
  --success-bg:    rgba(52, 211, 153, 0.20);
  --success-bdr:   rgba(52, 211, 153, 0.40);
  --warning:       #b45309;
  --warning-bg:    rgba(252, 211, 77, 0.20);
  --warning-bdr:   rgba(252, 211, 77, 0.40);
  --danger:        #dc2626;
  --danger-bg:     rgba(252, 165, 165, 0.20);
  --danger-bdr:    rgba(252, 165, 165, 0.40);
  --info:          #2563eb;
  --info-bg:       rgba(147, 197, 253, 0.20);

  /* Text */
  --text-primary:    #1A1A2E;
  --text-secondary:  #64748B;
  --text-muted:      #94A3B8;
  --text-on-dark:    #F8FAFC;

  /* Borders */
  --border:          rgba(0, 0, 0, 0.07);
  --border-focus:    rgba(94, 234, 212, 0.6);

  /* Radii */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 36px;

  /* Shadows */
  --shadow-ambient:  0 4px 24px rgba(15, 118, 110, 0.06);
  --shadow-elevated: 0 12px 48px rgba(20, 184, 166, 0.12);
  --shadow-primary:  0 10px 30px rgba(20, 184, 166, 0.25);

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px;

  /* Sidebar */
  --sidebar-w: 260px;

  /* Typography scale (fluid) */
  --text-xs:   clamp(0.70rem, 1.5vw, 0.75rem);
  --text-sm:   clamp(0.80rem, 2vw,   0.875rem);
  --text-base: clamp(0.90rem, 2.5vw, 1rem);
  --text-lg:   clamp(1.00rem, 3vw,   1.125rem);
  --text-xl:   clamp(1.10rem, 3.5vw, 1.25rem);
  --text-2xl:  clamp(1.30rem, 4vw,   1.5rem);
  --text-3xl:  clamp(1.60rem, 5vw,   2rem);

  /* Transitions */
  --t-fast:   150ms ease;
  --t-normal: 250ms ease;
  --t-slow:   400ms ease;
}

/* ── Dark Mode (auto via media query) ─────────────────────── */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg-base:       #0B0F14;
    --bg-warm:       #0E1219;
    --bg-blue:       #0B1320;
    --bg-teal:       #0A1210;

    --glass-bg:      rgba(255, 255, 255, 0.05);
    --glass-border:  rgba(255, 255, 255, 0.08);
    --glass-shadow:
      0 10px 30px rgba(0, 0, 0, 0.40),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --glass-shadow-elevated:
      0 20px 60px rgba(0, 0, 0, 0.50),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);

    --accent:        #2DD4BF;
    --accent-glow:   rgba(45, 212, 191, 0.25);

    --text-primary:   #E8E9ED;
    --text-secondary: #94A3B8;
    --text-muted:     #5A5D6E;
    --text-on-dark:   #F8FAFC;

    --border: rgba(255, 255, 255, 0.08);
    --border-focus: rgba(94, 234, 212, 0.6);

    --success: #4ade80;
    --warning: #fbbf24;
    --danger:  #f87171;
    --info:    #60a5fa;
  }
}

/* ── Dark Mode (manual toggle) ────────────────────────────── */
html[data-theme="dark"] {
  --bg-base:       #0B0F14;
  --bg-warm:       #0E1219;
  --bg-blue:       #0B1320;
  --bg-teal:       #0A1210;

  --glass-bg:      rgba(255, 255, 255, 0.05);
  --glass-border:  rgba(255, 255, 255, 0.08);
  --glass-shadow:
    0 10px 30px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --glass-shadow-elevated:
    0 20px 60px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);

  --accent:        #2DD4BF;
  --accent-glow:   rgba(45, 212, 191, 0.25);

  --text-primary:   #E8E9ED;
  --text-secondary: #94A3B8;
  --text-muted:     #5A5D6E;
  --text-on-dark:   #F8FAFC;

  --border: rgba(255, 255, 255, 0.08);
  --border-focus: rgba(94, 234, 212, 0.6);

  --success: #4ade80;
  --warning: #fbbf24;
  --danger:  #f87171;
  --info:    #60a5fa;
}

/* Dark mode component overrides */
html[data-theme="dark"] .bg-mesh::before,
html[data-theme="dark"] .bg-mesh::after {
  opacity: 0.7;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .bg-mesh::before,
  html:not([data-theme="light"]) .bg-mesh::after {
    opacity: 0.7;
  }
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'IBM Plex Arabic', 'DM Sans', -apple-system, sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input, select, textarea, button {
  font-family: inherit;
  font-size: max(16px, 1rem); /* prevents iOS zoom */
}

button { cursor: pointer; }

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

/* ── Animated Mesh Background ──────────────────────────────── */
.bg-mesh {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.bg-mesh::before,
.bg-mesh::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
  animation: orbFloat 18s ease-in-out infinite alternate;
}

/* Dark mode: subtle teal orbs */
.bg-mesh::before {
  width: 60vmax;
  height: 60vmax;
  top: -20%;
  left: -10%;
  background: radial-gradient(circle, rgba(20,184,166,0.14) 0%, rgba(15,118,110,0.06) 50%, transparent 70%);
  animation-duration: 18s;
}
.bg-mesh::after {
  width: 50vmax;
  height: 50vmax;
  bottom: -15%;
  right: -10%;
  background: radial-gradient(circle, rgba(94,234,212,0.11) 0%, rgba(34,211,238,0.05) 50%, transparent 70%);
  animation-duration: 22s;
  animation-direction: alternate-reverse;
}

/* Light mode: richer, more visible orbs */
html:not([data-theme="dark"]) .bg-mesh::before {
  background: radial-gradient(circle, rgba(20,184,166,0.22) 0%, rgba(103,232,249,0.12) 40%, transparent 70%);
  width: 65vmax;
  height: 65vmax;
}
html:not([data-theme="dark"]) .bg-mesh::after {
  background: radial-gradient(circle, rgba(15,118,110,0.18) 0%, rgba(94,234,212,0.10) 40%, transparent 70%);
  width: 55vmax;
  height: 55vmax;
}
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .bg-mesh::before {
    background: radial-gradient(circle, rgba(20,184,166,0.22) 0%, rgba(103,232,249,0.12) 40%, transparent 70%);
  }
  html:not([data-theme="dark"]) .bg-mesh::after {
    background: radial-gradient(circle, rgba(15,118,110,0.18) 0%, rgba(94,234,212,0.10) 40%, transparent 70%);
  }
}

/* Third orb via bg-mesh child span — added by JS init or present in HTML */
.bg-mesh-orb3 {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  width: 40vmax;
  height: 40vmax;
  top: 40%;
  left: 45%;
  background: radial-gradient(circle, rgba(34,211,238,0.07) 0%, transparent 70%);
  animation: orbFloat3 28s ease-in-out infinite alternate;
  will-change: transform;
}
html:not([data-theme="dark"]) .bg-mesh-orb3 {
  background: radial-gradient(circle, rgba(34,211,238,0.12) 0%, rgba(20,184,166,0.06) 50%, transparent 70%);
}

@keyframes orbFloat {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  25%  { transform: translate(6vw, -8vh) scale(1.06) rotate(3deg); }
  50%  { transform: translate(-3vw, 5vh) scale(0.94) rotate(-2deg); }
  75%  { transform: translate(9vw, 3vh) scale(1.04) rotate(2deg); }
  100% { transform: translate(2vw, -4vh) scale(1.01) rotate(-1deg); }
}
@keyframes orbFloat3 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-8vw, -10vh) scale(1.12); }
  66%  { transform: translate(6vw, 6vh) scale(0.88); }
  100% { transform: translate(-4vw, -2vh) scale(1.05); }
}

/* ── Mobile: reduce blur cost for perf ─────────────────────── */
@media (max-width: 899px) {
  .bg-mesh::before, .bg-mesh::after, .bg-mesh-orb3 {
    filter: blur(50px);
    animation-duration: 35s; /* slower = cheaper */
  }
  .bg-mesh::before { width: 80vw; height: 80vw; }
  .bg-mesh::after  { width: 70vw; height: 70vw; }
  .bg-mesh-orb3    { width: 60vw; height: 60vw; }
}

/* ── Mobile: reduce backdrop-filter cost ───────────────────── */
@media (max-width: 899px) {
  .glass,
  .sidebar-wrap,
  [class*="glass"] {
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
  }
}

/* ── Focus visible ─────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }

/* ── Touch targets ─────────────────────────────────────────── */
button, [role="button"], a, label[for] {
  min-height: 44px;
  touch-action: manipulation;
}
button:active, [role="button"]:active { transform: scale(0.97); }

/* ── Direction support ─────────────────────────────────────── */
[dir="rtl"] { text-align: right; }
[dir="ltr"] {
  text-align: left;
  font-family: 'DM Sans', 'IBM Plex Arabic', -apple-system, sans-serif;
}
[dir="ltr"] .sidebar-wrap {
  right: auto;
  left: var(--sp-4);
}
[dir="ltr"] .main-with-sidebar {
  margin-right: 0;
  margin-left: calc(var(--sidebar-w) + var(--sp-4) * 2);
}
[dir="ltr"] select.form-input {
  background-position: right 14px center;
  padding-left: 16px;
  padding-right: 38px;
}
[dir="ltr"] .data-table thead th { text-align: left; }
[dir="ltr"] .dropdown-item { text-align: left; }

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .bg-mesh::before, .bg-mesh::after { animation: none; }
}