/**
 * VTechCity Unified Dark Navy Glassmorphic Theme for ViTechToday (vitechtoday.com)
 * Synchronizes ViTechToday's color palette & surface aesthetics 100% with VTechCity Gate (vtechcity.com)
 * while preserving 100% of ViTechToday's layout, features, and interactions.
 */

:root,
html {
  color-scheme: dark !important;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

body,
#root > div.h-screen.w-screen {
  background-color: #060b16 !important;
  background-image:
    radial-gradient(ellipse 80% 45% at 50% -12%, rgba(6, 182, 212, 0.14), rgba(59, 130, 246, 0.05) 45%, transparent 75%),
    radial-gradient(ellipse 60% 40% at 85% 100%, rgba(245, 158, 11, 0.05), transparent 70%) !important;
  color: #f1f5f9 !important;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* =========================================================================
   1. TOP HEADER BAR (Matches vtechcity.com CityGateHeader)
   ========================================================================= */
header.sticky.top-0,
header.sticky.top-0 > div.bg-white,
header.sticky.top-0 > div.h-11 {
  background: rgba(10, 15, 29, 0.95) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
  color: #f8fafc !important;
}

/* Active Navigation Tab Indicator in Header */
header.sticky.top-0 .h-0\.5.bg-blue-600 {
  background: linear-gradient(90deg, #06b6d4, #38bdf8) !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.65) !important;
}

/* =========================================================================
   2. PAGE & SECTION BACKGROUNDS (#f0f2f5, #f8f9fa, #f8fafc -> Deep Navy)
   ========================================================================= */
.bg-\[\#f8f9fa\],
.bg-\[\#f8fafc\] {
  background-color: #080e1c !important;
  color: #f1f5f9 !important;
}

/* Root or full-bleed #f0f2f5 containers */
div.h-screen.bg-\[\#f0f2f5\] {
  background-color: #060b16 !important;
}

/* Inner #f0f2f5 elements (Search inputs, Post composer pill, Comment bubbles, Chat inputs) */
header .bg-\[\#f0f2f5\],
.bg-white .bg-\[\#f0f2f5\],
.bg-white .bg-\[\#f0f2f5\]\/60,
.bg-\[\#f8f9fa\] .bg-\[\#f0f2f5\],
.bg-\[\#f8fafc\] .bg-\[\#f0f2f5\],
input.bg-\[\#f0f2f5\],
textarea.bg-\[\#f0f2f5\],
button.bg-\[\#f0f2f5\],
.rounded-full.bg-\[\#f0f2f5\],
.rounded-2xl.bg-\[\#f0f2f5\],
.rounded-xl.bg-\[\#f0f2f5\] {
  background-color: rgba(30, 41, 59, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  color: #f1f5f9 !important;
}

/* =========================================================================
   3. GLASSMORPHIC CARDS, SIDEBARS, MODALS & DROPDOWNS (.bg-white)
   ========================================================================= */
.bg-white,
.bg-white\/95,
.bg-\[\#ffffff\] {
  background-color: rgba(15, 23, 42, 0.88) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #f1f5f9 !important;
}

/* Elevated Dropdowns, Popovers & Modals */
.absolute.bg-white,
.fixed .bg-white,
div[class*="z-40"].bg-white,
div[class*="z-50"].bg-white {
  background-color: rgba(15, 23, 42, 0.97) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border-color: rgba(56, 189, 248, 0.22) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.78) !important;
}

/* Card Borders & Subtle VTechCity Depth */
.bg-white.rounded-3xl,
.bg-white.rounded-2xl,
.bg-white.rounded-xl {
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 26px -6px rgba(0, 0, 0, 0.5) !important;
}

.bg-white.rounded-3xl:hover,
.bg-white.rounded-2xl:hover {
  border-color: rgba(56, 189, 248, 0.22) !important;
}

/* Keep tiny live pulse dot bright cyan/white */
.animate-pulse.bg-white {
  background-color: #38bdf8 !important;
}

/* Action buttons inside colored hero banners that used bg-white */
button.bg-white.text-indigo-950,
button.bg-white.text-orange-600,
button.bg-white.text-blue-700,
button.bg-white.text-emerald-800 {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.25), rgba(37, 99, 235, 0.3)) !important;
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
  color: #38bdf8 !important;
}
button.bg-white.text-indigo-950:hover,
button.bg-white.text-orange-600:hover,
button.bg-white.text-blue-700:hover,
button.bg-white.text-emerald-800:hover {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.38), rgba(37, 99, 235, 0.42)) !important;
  color: #ffffff !important;
}

/* =========================================================================
   4. SECONDARY SURFACES, PILLS, BUTTONS & INPUTS (.bg-gray-*)
   ========================================================================= */
.bg-gray-50,
.bg-gray-50\/70,
.bg-slate-50 {
  background-color: rgba(30, 41, 59, 0.55) !important;
}

.bg-gray-100,
.bg-gray-100\/50,
.bg-gray-100\/80,
.bg-gray-100\/90,
.bg-slate-100\/70 {
  background-color: rgba(30, 41, 59, 0.82) !important;
  color: #e2e8f0 !important;
}

.bg-gray-200,
.bg-gray-200\/60,
.bg-slate-200 {
  background-color: rgba(51, 65, 85, 0.78) !important;
  color: #f1f5f9 !important;
}

.bg-gray-300 {
  background-color: rgba(71, 85, 105, 0.8) !important;
}

/* Hover States */
.hover\:bg-gray-50:hover,
.hover\:bg-gray-100:hover,
.hover\:bg-gray-200:hover,
.hover\:bg-gray-200\/60:hover,
.hover\:bg-gray-300:hover,
.hover\:bg-white:hover,
.hover\:bg-\[\#f0f2f5\]:hover {
  background-color: rgba(51, 65, 85, 0.78) !important;
}

/* Form Controls & Focus States */
input,
textarea,
select {
  color: #f8fafc !important;
}

input::placeholder,
textarea::placeholder,
.placeholder-gray-400::placeholder,
.placeholder-gray-500::placeholder {
  color: #64748b !important;
}

input:focus,
textarea:focus,
select:focus,
.focus\:bg-white:focus {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border-color: rgba(56, 189, 248, 0.65) !important;
  color: #ffffff !important;
}

/* =========================================================================
   5. TYPOGRAPHY HIERARCHY (Crisp Slate/White Readability)
   ========================================================================= */
.text-gray-900,
.text-gray-800,
.text-slate-900,
.text-slate-950,
.text-slate-800,
.hover\:text-gray-900:hover {
  color: #f8fafc !important;
}

.text-gray-700,
.text-gray-600,
.text-slate-700,
.text-slate-600,
.hover\:text-gray-700:hover,
.hover\:text-gray-600:hover {
  color: #cbd5e1 !important;
}

.text-gray-500,
.text-gray-400,
.text-slate-500,
.text-slate-400 {
  color: #94a3b8 !important;
}

/* =========================================================================
   6. BORDERS, DIVIDERS & RINGS
   ========================================================================= */
.border-gray-100,
.border-gray-200,
.border-gray-300,
.border-slate-100,
.border-slate-200\/80,
.border-slate-200\/90 {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.border-white {
  border-color: #0f172a !important;
}

.hover\:border-gray-200:hover,
.hover\:border-blue-100:hover,
.hover\:border-indigo-100:hover {
  border-color: rgba(56, 189, 248, 0.35) !important;
}

/* =========================================================================
   7. PASTEL BADGES & CALLOUTS -> VTECHCITY TRANSLUCENT NEON GLASS
   ========================================================================= */

/* Blue & Cyan (VTechCity Tech Cyan) */
.bg-blue-50,
.bg-blue-50\/60,
.bg-blue-50\/70,
.bg-blue-50\/90,
.bg-blue-100,
.bg-blue-200,
.bg-cyan-100 {
  background-color: rgba(6, 182, 212, 0.14) !important;
}
.hover\:bg-blue-50:hover,
.hover\:bg-blue-50\/50:hover,
.hover\:bg-blue-100:hover,
.hover\:bg-blue-100\/70:hover {
  background-color: rgba(6, 182, 212, 0.24) !important;
}
.border-blue-100,
.border-blue-200,
.border-blue-200\/60,
.border-blue-200\/80,
.border-blue-200\/90 {
  border-color: rgba(56, 189, 248, 0.28) !important;
}
.text-blue-600,
.text-blue-700,
.text-blue-800,
.text-blue-900,
.text-blue-950,
.text-cyan-600,
.text-cyan-700,
.hover\:text-blue-600:hover,
.hover\:text-blue-700:hover,
.group:hover .group-hover\:text-blue-600 {
  color: #38bdf8 !important;
}

/* Indigo & Purple (AI & Digital Workforce Accent) */
.bg-indigo-50,
.bg-indigo-50\/60,
.bg-indigo-50\/70,
.bg-indigo-100,
.bg-indigo-200\/60 {
  background-color: rgba(99, 102, 241, 0.15) !important;
}
.bg-purple-50,
.bg-purple-50\/60,
.bg-purple-50\/70,
.bg-purple-100,
.bg-purple-200,
.bg-fuchsia-50 {
  background-color: rgba(168, 85, 247, 0.15) !important;
}
.hover\:bg-indigo-50:hover,
.hover\:bg-indigo-50\/60:hover,
.hover\:bg-indigo-100:hover,
.hover\:bg-purple-100:hover,
.hover\:bg-purple-100\/70:hover,
.hover\:bg-purple-200:hover {
  background-color: rgba(139, 92, 246, 0.24) !important;
}
.border-indigo-100,
.border-indigo-200,
.border-indigo-300,
.border-purple-100,
.border-purple-200,
.border-purple-200\/60,
.border-purple-200\/80,
.border-purple-200\/90,
.border-purple-300 {
  border-color: rgba(139, 92, 246, 0.3) !important;
}
.text-indigo-600,
.text-indigo-700,
.text-indigo-800,
.text-indigo-900,
.text-indigo-950,
.group:hover .group-hover\:text-indigo-600 {
  color: #818cf8 !important;
}
.text-purple-600,
.text-purple-700,
.text-purple-800,
.text-purple-900,
.text-purple-950,
.group:hover .group-hover\:text-purple-600 {
  color: #c084fc !important;
}

/* Amber & Gold (VTechCity Citizen Gold) */
.bg-amber-50,
.bg-amber-50\/60,
.bg-amber-50\/70,
.bg-amber-100,
.bg-amber-100\/80 {
  background-color: rgba(245, 158, 11, 0.15) !important;
}
.hover\:bg-amber-100:hover,
.hover\:bg-amber-200:hover {
  background-color: rgba(245, 158, 11, 0.25) !important;
}
.border-amber-100,
.border-amber-200,
.border-amber-200\/80,
.border-amber-300 {
  border-color: rgba(251, 191, 36, 0.32) !important;
}
.text-amber-600,
.text-amber-700,
.text-amber-800,
.text-amber-900,
.text-orange-600 {
  color: #fbbf24 !important;
}

/* Emerald, Green & Teal (Verified Citizen & Credit Accent) */
.bg-emerald-50,
.bg-emerald-50\/60,
.bg-emerald-50\/70,
.bg-emerald-100,
.bg-green-50,
.bg-green-50\/60,
.bg-green-100,
.bg-teal-50,
.bg-teal-100 {
  background-color: rgba(16, 185, 129, 0.15) !important;
}
.hover\:bg-emerald-100:hover,
.hover\:bg-emerald-100\/60:hover,
.hover\:bg-green-100:hover,
.hover\:bg-green-200:hover {
  background-color: rgba(16, 185, 129, 0.25) !important;
}
.border-emerald-200,
.border-emerald-200\/60,
.border-emerald-200\/80,
.border-emerald-200\/90,
.border-emerald-300,
.border-green-200,
.border-green-200\/80 {
  border-color: rgba(52, 211, 153, 0.3) !important;
}
.text-emerald-600,
.text-emerald-700,
.text-emerald-800,
.text-emerald-900,
.text-green-600,
.text-green-700,
.text-green-800,
.text-teal-700 {
  color: #34d399 !important;
}

/* Red, Rose & Pink */
.bg-red-50,
.bg-red-100,
.bg-pink-100 {
  background-color: rgba(239, 68, 68, 0.15) !important;
}
.hover\:bg-red-50:hover,
.hover\:bg-red-100:hover {
  background-color: rgba(239, 68, 68, 0.25) !important;
}
.border-red-100,
.border-red-200,
.border-rose-200 {
  border-color: rgba(248, 113, 113, 0.3) !important;
}
.text-red-500,
.text-red-600,
.text-red-700,
.text-rose-600,
.text-pink-600 {
  color: #f87171 !important;
}

/* Soft Light Gradients -> Dark Glass Gradients */
.from-emerald-50.to-white,
.from-indigo-50.to-blue-50,
.from-purple-50.to-indigo-50 {
  background-image: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.85)) !important;
}

/* =========================================================================
   8. SCROLLBARS (Matches vtechcity.com)
   ========================================================================= */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #060b16;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.45);
}