/**
 * ============================================================
 *  MixPanel CS 1.6 — Design System Variables
 * ============================================================
 *  Template by Templuxo — https://templuxo.com
 * ============================================================
 */

:root {

  /* ── Palette (negru-albastrui) ────────────────────── */
  --bg-void:      #060810;
  --bg-base:      #090b14;
  --bg-surface:   #0e1019;
  --bg-elevated:  #141722;
  --bg-overlay:   #1a1e2c;
  --bg-hover:     rgba(90,140,255,0.05);
  --bg-active:    rgba(90,140,255,0.08);

  /* ── Accent (albastru vivid) ────────────────────────── */
  --accent:       #4D9FFF;
  --accent-dim:   #3A82DD;
  --accent-glow:  rgba(77,159,255,0.20);
  --accent-bg:    rgba(77,159,255,0.08);

  /* ── Secondary accent (cyan) ────────────────────────── */
  --accent2:      #39FFD0;
  --accent2-dim:  #28D9B0;
  --accent2-glow: rgba(57,255,208,0.18);
  --accent2-bg:   rgba(57,255,208,0.07);

  --red:          #FF4D4D;
  --red-dim:      #D93636;
  --red-bg:       rgba(255,77,77,0.10);
  --red-border:   rgba(255,77,77,0.28);

  --blue:         #4DA6FF;
  --blue-dim:     #3388E0;
  --blue-bg:      rgba(77,166,255,0.10);
  --blue-border:  rgba(77,166,255,0.24);

  --orange:       #FF8534;
  --orange-bg:    rgba(255,133,52,0.10);

  --green:        #3FD98F;
  --green-bg:     rgba(63,217,143,0.10);
  --green-border: rgba(63,217,143,0.28);

  --amber:        #F5C518;
  --amber-bg:     rgba(245,197,24,0.10);

  --ct:           #5ABAFF;
  --t:            #FF8534;

  /* ── Text (alb pastrat) ────────────────────────────── */
  --tx-1:   #EEF1F6;
  --tx-2:   #8A93A8;
  --tx-3:   #4A5166;
  --tx-4:   #2E3347;

  /* ── Borders ────────────────────────────────────────── */
  --border-1:  rgba(90,140,255,0.06);
  --border-2:  rgba(90,140,255,0.12);
  --border-3:  rgba(90,140,255,0.20);
  --border-acc: rgba(77,159,255,0.30);

  /* ── Status ─────────────────────────────────────────── */
  --ok:   #3FD98F;
  --warn: #F5C518;
  --err:  #FF4D4D;
  --info: #4DA6FF;

  /* ── Typography ────────────────────────────────────── */
  --font-display: 'Oxanium', 'Rajdhani', sans-serif;
  --font-body:    'Oxanium', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ── Radii ──────────────────────────────────────────── */
  --r-sm:  3px;
  --r-md:  6px;
  --r-lg:  10px;
  --r-xl:  14px;
  --r-2xl: 20px;

  /* ── Shadows (blue-tinted) ─────────────────────────── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.5);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.6);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.7);
  --shadow-acc: 0 0 24px rgba(77,159,255,0.15);
  --shadow-red: 0 0 20px rgba(255,77,77,0.15);

  /* ── Transitions ────────────────────────────────────── */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --trans-fast:  all 0.15s var(--ease);
  --trans:       all 0.25s var(--ease);
  --trans-slow:  all 0.4s var(--ease);

  /* ── Layout ─────────────────────────────────────────── */
  --sidebar-w: 230px;
  --topbar-h:  0px;
}

/* ── Light Theme Override ──────────────────────────────── */
body.theme-light {
  --bg-void:      #E6E9F0;
  --bg-base:      #EEF0F5;
  --bg-surface:   #F8F9FC;
  --bg-elevated:  #FFFFFF;
  --bg-overlay:   #EAECF2;
  --bg-hover:     rgba(60,100,200,0.05);
  --bg-active:    rgba(60,100,200,0.08);

  --accent:       #3070DD;
  --accent-dim:   #2558B8;
  --accent-glow:  rgba(48,112,221,0.15);
  --accent-bg:    rgba(48,112,221,0.06);

  --tx-1:   #141824;
  --tx-2:   #4A5166;
  --tx-3:   #8A93A8;
  --tx-4:   #C0C7D4;

  --border-1:  rgba(30,50,120,0.08);
  --border-2:  rgba(30,50,120,0.14);
  --border-3:  rgba(30,50,120,0.22);
  --border-acc: rgba(48,112,221,0.30);

  --shadow-sm:  0 2px 8px rgba(20,30,60,0.08);
  --shadow-md:  0 4px 20px rgba(20,30,60,0.12);
  --shadow-lg:  0 8px 40px rgba(20,30,60,0.15);
  --shadow-acc: 0 0 20px rgba(48,112,221,0.12);
}

/* ── Search Dropdown (comparison page) ─────────────────── */
.search-dropdown {
  position: absolute;
  z-index: 100;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  margin-top: 2px;
}
.search-dropdown .search-item:hover {
  background: var(--bg-hover);
}

/* ── Grid-5 (for top performers) ───────────────────────── */
.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 900px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
}