/* Antigravity Command Center Theme Overrides */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* Rich, curated color system */
  --bg-main: #08090C;
  --bg-card: rgba(18, 22, 33, 0.45);
  --bg-card-hover: rgba(26, 32, 48, 0.6);
  --border-light: rgba(255, 255, 255, 0.05);
  --border-focus: rgba(99, 102, 241, 0.3);
  
  --bl: #6366F1 !important; /* Soft premium indigo */
  --gn: #10B981 !important; /* Premium emerald green */
  --rd: #F43F5E !important; /* Premium rose red */
  
  --c1: var(--bg-main) !important;
  --c2: var(--bg-card) !important;
  --c3: rgba(10, 12, 18, 0.85) !important;
  --b1: var(--border-light) !important;
}

/* Global Styles */
body {
  background: radial-gradient(circle at 50% 0%, #0F121E 0%, #060709 100%) !important;
  color: #F1F5F9 !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Glassmorphism Sidebar */
.sidebar {
  background: rgba(10, 12, 18, 0.4) !important;
  backdrop-filter: blur(15px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
  border-right: 1px solid var(--border-light) !important;
}

.side-btn {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
  margin-bottom: 3px !important;
}

.side-btn:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  transform: translateX(2px);
}

.side-btn.on {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.05) 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  color: #FFF !important;
  font-weight: 600 !important;
}

/* Card Upgrades */
.card {
  background: var(--bg-card) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card:hover {
  transform: translateY(-2px) !important;
  background: var(--bg-card-hover) !important;
  border-color: rgba(99, 102, 241, 0.25) !important;
  box-shadow: 0 12px 40px 0 rgba(99, 102, 241, 0.08) !important;
}

/* Client Card Layout Polish */
.cl-card {
  position: relative !important;
}

/* Avoid info button overlapping profit number */
.cl-info-btn {
  top: 12px !important;
  right: 12px !important;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.cl-info-btn:hover {
  opacity: 1 !important;
}

/* Hero elements gradient text */
.dk-greet, .logo-text, .ask-ai-title {
  background: linear-gradient(135deg, #FFF 30%, #A5B4FC 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800 !important;
}

/* Sticky Mini Bar styling */
.sticky-bar {
  background: rgba(10, 12, 18, 0.75) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 10px 24px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
}

/* Close/Exit button transitions */
#t-set button[onclick="swT('focus')"],
#t-pex button[onclick="swT('pov')"] {
  transition: all 0.2s ease-in-out !important;
}

#t-set button[onclick="swT('focus')"]:hover,
#t-pex button[onclick="swT('pov')"]:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #FFF !important;
  transform: scale(1.05);
}

/* Custom Kanban board touchups */
.kb-card {
  cursor: grab !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  transition: transform 0.2s, border-color 0.2s;
}
.kb-card:active {
  cursor: grabbing !important;
}
.kb-card:hover {
  border-color: rgba(99, 102, 241, 0.2) !important;
  transform: scale(1.01);
}

/* Glowing primary buttons */
.mbtn, .btn, button[onclick="saveSettings()"] {
  background: linear-gradient(135deg, var(--bl) 0%, #4F46E5 100%) !important;
  border: none !important;
  color: white !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.25) !important;
  transition: all 0.2s ease !important;
}

.mbtn:hover, .btn:hover, button[onclick="saveSettings()"]:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35) !important;
  transform: translateY(-1px);
}