/* ═══════════════════════════════════════════════════
   base.css — Reset, CSS Variables, Body, Layout
   ═══════════════════════════════════════════════════ */

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

:root {
  /* ── Backgrounds ── */
  --bg:       #080b10;
  --surface:  #10141c;
  --surface2: #171c27;
  --surface3: #1e2436;

  /* ── Borders ── */
  --border:   #222840;
  --border2:  #2a3250;

  /* ── Brand colors ── */
  --accent:   #e50914;   /* Netflix red — primary */
  --accent2:  #b20710;   /* dark red — gradient end */
  --accent-rgb: 229, 9, 20;

  /* ── AI purple ── */
  --ai:       #a78bfa;
  --ai2:      #7c3aed;

  /* ── Status colors ── */
  --green:    #22c55e;
  --red:      #ef4444;
  --blue:     #3b82f6;
  --yellow:   #eab308;

  /* ── Typography ── */
  --text:     #e8eeff;
  --muted:    #6b7494;

  /* ── Misc ── */
  --r:        16px;      /* border radius — glass cards */
  --shadow:   0 8px 32px rgba(0,0,0,.6);

  /* ── Glassmorphism ── */
  --glass:         rgba(255,255,255,.05);
  --glass-strong:  rgba(255,255,255,.08);
  --glass-border:  rgba(255,255,255,.10);
  --glass-hover:   rgba(255,255,255,.12);
  --blur-sm:       blur(12px);
  --blur-md:       blur(24px);
  --blur-lg:       blur(36px);

  /* ── Z-index layers ── */
  --z-base:           1;
  --z-tracking:       90;
  --z-topbar:         100;
  --z-drawer-overlay: 599;
  --z-drawer:         600;
  --z-modal:          999;
  --z-toast:          1100;
  --z-autocomplete:   1200;
  --z-lightbox:       1001;

  /* ── Layout sizes ── */
  --topbar-h:   56px;

  /* ── Responsive sizing ── */
  --sidebar-w:  clamp(300px, 30vw, 420px);
  --font-sm:    clamp(10px, 1.2vw, 12px);
  --font-md:    clamp(12px, 1.4vw, 14px);
  --font-lg:    clamp(14px, 1.8vw, 18px);
  --font-title: clamp(16px, 2.2vw, 20px);
  --input-h:    clamp(36px, 4vw, 40px);
  --btn-h:      clamp(36px, 4vw, 40px);
  --touch-min:  44px;
  --gap-sm:     clamp(4px, 0.8vw, 8px);
  --gap-md:     clamp(8px, 1.2vw, 14px);
}

/* ── Light theme ── */
[data-theme="light"] {
  /* ── Backgrounds ── */
  --bg:       #fafbfd;
  --surface:  #ffffff;
  --surface2: #f3f4f6;
  --surface3: #e5e7eb;

  /* ── Borders ── */
  --border:   #e5e7eb;
  --border2:  #d1d5db;

  /* ── Brand colors ── (same) */
  --accent:   #e50914;   /* Netflix red — primary */
  --accent2:  #b20710;   /* dark red — gradient end */
  --accent-rgb: 229, 9, 20;

  /* ── AI purple ── */
  --ai:       #7c3aed;
  --ai2:      #a78bfa;

  /* ── Status colors ── (same) */
  --green:    #16a34a;
  --red:      #dc2626;
  --blue:     #2563eb;
  --yellow:   #ca8a04;

  /* ── Typography ── */
  --text:     #111827;
  --muted:    #6b7280;

  /* ── Misc ── */
  --r:        16px;
  --shadow:   0 8px 32px rgba(0,0,0,.08);

  /* ── Glassmorphism (light) ── */
  --glass:         rgba(255,255,255,.55);
  --glass-strong:  rgba(255,255,255,.7);
  --glass-border:  rgba(0,0,0,.08);
  --glass-hover:   rgba(255,255,255,.8);
}

/* ── AMOLED Black theme ── */
[data-theme="amoled"] {
  --bg:       #000000;
  --surface:  #0a0a0a;
  --surface2: #111111;
  --surface3: #1a1a1a;
  --border:   #1f1f1f;
  --border2:  #2a2a2a;
  --text:     #ffffff;
  --muted:    #666666;
  --shadow:   0 8px 32px rgba(0,0,0,.9);
  --glass:         rgba(255,255,255,.03);
  --glass-strong:  rgba(255,255,255,.06);
  --glass-border:  rgba(255,255,255,.08);
  --glass-hover:   rgba(255,255,255,.10);
  --accent-rgb: 229, 9, 20;
}

/* ── High Contrast theme ── */
[data-theme="high-contrast"] {
  --bg:       #000000;
  --surface:  #000000;
  --surface2: #1a1a1a;
  --surface3: #333333;
  --border:   #ffffff;
  --border2:  #cccccc;
  --accent:   #ff4444;
  --accent2:  #ff0000;
  --accent-rgb: 255, 68, 68;
  --text:     #ffffff;
  --muted:    #cccccc;
  --shadow:   0 8px 32px rgba(0,0,0,.9);
  --glass:         rgba(255,255,255,.08);
  --glass-strong:  rgba(255,255,255,.12);
  --glass-border:  rgba(255,255,255,.25);
  --glass-hover:   rgba(255,255,255,.15);
}

/* ── Night Drive theme ── */
[data-theme="night-drive"] {
  --bg:       #0d0a0a;
  --surface:  #150f0f;
  --surface2: #1c1414;
  --surface3: #251a1a;
  --border:   #2d1f1f;
  --border2:  #3a2828;
  --accent:   #cc3333;
  --accent2:  #992222;
  --accent-rgb: 204, 51, 51;
  --ai:       #cc8888;
  --ai2:      #994444;
  --green:    #338833;
  --red:      #cc3333;
  --blue:     #884444;
  --yellow:   #cc8844;
  --text:     #ffcccc;
  --muted:    #886666;
  --shadow:   0 8px 32px rgba(0,0,0,.8);
  --glass:         rgba(255,100,100,.04);
  --glass-strong:  rgba(255,100,100,.07);
  --glass-border:  rgba(255,100,100,.10);
  --glass-hover:   rgba(255,100,100,.12);
}

/* ── Road Blue theme ── */
[data-theme="road-blue"] {
  --bg:       #080c14;
  --surface:  #0e1420;
  --surface2: #141c2c;
  --surface3: #1a2438;
  --border:   #1e2d4a;
  --border2:  #263858;
  --accent:   #3b82f6;
  --accent2:  #2563eb;
  --accent-rgb: 59, 130, 246;
  --ai:       #818cf8;
  --ai2:      #6366f1;
  --green:    #22c55e;
  --red:      #ef4444;
  --blue:     #60a5fa;
  --yellow:   #fbbf24;
  --text:     #e0e8ff;
  --muted:    #6b7fa0;
  --shadow:   0 8px 32px rgba(0,0,0,.6);
  --glass:         rgba(100,150,255,.05);
  --glass-strong:  rgba(100,150,255,.08);
  --glass-border:  rgba(100,150,255,.12);
  --glass-hover:   rgba(100,150,255,.14);
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ── Background orbs (static on mobile, animated on desktop) ── */
body::before, body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .3;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  animation: orbFloat 14s ease-in-out infinite alternate;
}
body::before {
  width: 500px; height: 500px;
  top: -10%; left: -5%;
  background: radial-gradient(circle, rgba(var(--accent-rgb),.5) 0%, rgba(224,78,10,.3) 40%, transparent 70%);
}
body::after {
  width: 420px; height: 420px;
  bottom: 5%; right: -8%;
  background: radial-gradient(circle, rgba(167,139,250,.4) 0%, rgba(124,58,237,.2) 40%, transparent 70%);
  animation-delay: -7s;
}
@keyframes orbFloat {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, 30px) scale(1.12); }
}
/* Disable orb animation on mobile — saves significant GPU */
@media (max-width: 768px) {
  body::before, body::after {
    animation: none;
    transform: translate(20px, 15px) scale(1.06);
  }
}
/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after {
    animation: none;
  }
}
[data-theme="light"]::before,
[data-theme="light"]::after {
  opacity: .12;
}

/* ── Main layout: sidebar + map ── */
#main {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
#sidebar { width: 100%; flex: 1; min-height: 0; height: auto; }
.radius-wrap { display: none; }

/* ── Toast notification (glass) ── */
#toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--glass-strong);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 10px clamp(12px, 3vw, 18px);
  font-size: var(--font-sm);
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  z-index: var(--z-toast, 1100);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  white-space: nowrap;
}
#toast.show { opacity: 1; }

/* ── Loading bar (top of sidebar) ── */
.loading-bar {
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--ai), var(--accent));
  background-size: 200% 100%;
  animation: shimmer 1s infinite;
  display: none;
}
.loading-bar.active { display: block; }

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Shared animations ── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse-ai {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.8); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}

/* ── Mobile-first toast ── */
#toast {
  left: 12px;
  right: 12px;
  transform: none;
  white-space: normal;
  text-align: center;
  bottom: 14px;
}

/* === DESKTOP LAYOUT (activează când ai design desktop) ===
@media (min-width: 801px) {
  #main { flex-direction: row; }
  #sidebar { width: var(--sidebar-w); flex: none; min-height: auto; height: 100%; }
  .radius-wrap { display: flex; }
  #toast {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    white-space: nowrap;
    text-align: left;
    bottom: 20px;
  }
}
=== END DESKTOP LAYOUT === */

@media (max-width: 480px) {
  #toast { font-size: 11px; }
}

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

/* ── Accessibility: focus-visible ─────────────── */
:focus-visible {
  outline: 2px solid var(--accent, #6d5dfc);
  outline-offset: 2px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* ── Skip to content (accessibility) ──────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--accent, #6d5dfc);
  color: #fff;
  padding: 8px 16px;
  z-index: 10000;
  font-size: 14px;
  border-radius: 0 0 4px 0;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}

/* ── Lucide Icons ── */
i[data-lucide],
.lucide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
i[data-lucide] svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
}
.icon-sm i[data-lucide], i[data-lucide].icon-sm { width: 14px; height: 14px; }
.icon-lg i[data-lucide], i[data-lucide].icon-lg { width: 22px; height: 22px; }
.icon-xl i[data-lucide], i[data-lucide].icon-xl { width: 32px; height: 32px; }

/* ── Glass Scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.15), rgba(167,139,250,.15));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.3), rgba(167,139,250,.3));
}

/* ═══════════════════════════════════════════════════
   Upload Progress Overlay — Glass Design
   ═══════════════════════════════════════════════════ */
.upload-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 11, 16, 0.85);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: opacity .3s;
}

.upload-overlay-card {
  background: var(--surface, #10141c);
  border: 1px solid var(--glass-border, rgba(255,255,255,.10));
  border-radius: var(--r, 16px);
  padding: 32px 28px;
  max-width: 300px;
  width: 100%;
  text-align: center;
  backdrop-filter: var(--blur-md, blur(24px));
  box-shadow: var(--shadow, 0 8px 32px rgba(0,0,0,.6));
}

.upload-overlay-icon {
  color: var(--accent, #e50914);
  margin-bottom: 16px;
  animation: upload-pulse 1.5s ease infinite;
}

@keyframes upload-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.95); }
}

.upload-overlay-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #e8eeff);
  margin-bottom: 16px;
}

.upload-overlay-bar-wrap {
  width: 100%;
  height: 6px;
  background: var(--surface2, #171c27);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border, #222840);
}

.upload-overlay-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent, #e50914), var(--accent2, #b20710));
  border-radius: 3px;
  transition: width .3s ease, background .3s;
}

.upload-overlay-pct {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted, #6b7494);
  margin-top: 10px;
}