/* ==============================================================================
   File: core/static/core/css/liquid_glass.css
   Aesthetic: iOS 26 Liquid Glass Design System
   ============================================================================== */

/* Theme Variables */
:root {
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-border-hover: rgba(99, 102, 241, 0.3);
  --glass-blur: 16px;
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  
  --bg-gradient: linear-gradient(-45deg, #f5f7ff, #e0f2fe, #f0fdfa, #faf5ff);
  
  /* Typography and Colors */
  --text-primary: #1f2937;
  --text-secondary: #4b5563;
  --text-muted: #9ca3af;
  --text-inverse: #ffffff;
  
  --brand-primary: #6366f1; /* Indigo / Blue-Violet */
  --brand-primary-hover: #4f46e5;
  --brand-secondary: #0d9488; /* Teal */
  --brand-secondary-hover: #0f766e;
  
  --card-bg: rgba(255, 255, 255, 0.65);
  --card-border: rgba(255, 255, 255, 0.4);
  
  --nav-bg: rgba(255, 255, 255, 0.7);
  --nav-border: rgba(255, 255, 255, 0.5);
  
  --glow-color: rgba(99, 102, 241, 0.15);

  /* Hero Section Variables (Light) */
  --hero-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(99, 102, 241, 0.06) 50%, rgba(13, 148, 136, 0.06) 100%);
  --hero-radial: radial-gradient(ellipse at top right, rgba(99, 102, 241, 0.15), transparent 60%);
  --hero-text-title: #1e1b4b;
  --hero-text-desc: #4b5563;
}

/* Dark Mode Theme Variables */
html.dark {
  --glass-bg: rgba(15, 23, 42, 0.65);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-border-hover: rgba(45, 212, 191, 0.3);
  --glass-blur: 24px;
  --glass-shadow: 0 16px 40px 0 rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.05);
  
  --bg-gradient: linear-gradient(-45deg, #020617, #0f172a, #1e1b4b, #042f2e);
  
  /* Typography and Colors */
  --text-primary: #f9fafb;
  --text-secondary: #d1d5db;
  --text-muted: #9ca3af;
  --text-inverse: #020617;
  
  --brand-primary: #818cf8; /* Light Indigo */
  --brand-primary-hover: #6366f1;
  --brand-secondary: #2dd4bf; /* Light Teal */
  --brand-secondary-hover: #0d9488;
  
  --card-bg: rgba(15, 23, 42, 0.65);
  --card-border: rgba(255, 255, 255, 0.06);
  
  --nav-bg: rgba(15, 23, 42, 0.75);
  --nav-border: rgba(255, 255, 255, 0.06);
  
  --glow-color: rgba(45, 212, 191, 0.15);

  /* Hero Section Variables (Dark) */
  --hero-gradient: linear-gradient(135deg, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0.9) 70%, rgba(13, 148, 136, 0.25) 100%);
  --hero-radial: radial-gradient(ellipse at top right, rgba(129, 140, 248, 0.15), transparent 60%);
  --hero-text-title: #ffffff;
  --hero-text-desc: #d1d5db;
}

/* Base Body Styles and Background Animation */
body {
  background: var(--bg-gradient);
  background-size: 400% 400%;
  animation: gradientBG 20s ease infinite;
  color: var(--text-primary);
  transition: background 0.6s ease, color 0.3s ease;
  min-height: 100vh;
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Floating Glass Background Orbs */
.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -10;
  opacity: 0.15;
  pointer-events: none;
  animation: floatOrb 25s ease-in-out infinite;
}

.bg-orb-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--brand-primary) 0%, transparent 80%);
  top: 10%;
  left: -10%;
}

.bg-orb-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--brand-secondary) 0%, transparent 80%);
  top: 50%;
  right: -5%;
  animation-delay: -5s;
}

.bg-orb-3 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #a855f7 0%, transparent 80%);
  bottom: 10%;
  left: 20%;
  animation-delay: -10s;
}

@keyframes floatOrb {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.95);
  }
}

/* Glassmorphism Classes */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 1.25rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-panel:hover {
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow), 0 10px 30px -10px var(--glow-color);
}

/* Global Component Overrides for 30+ pages */

/* Cards/Containers */
.bg-white,
main .shadow,
main .shadow-sm,
main .shadow-md,
main .shadow-lg,
.card,
.bg-gray-50:not(body):not(html),
.bg-gray-100:not(body):not(html) {
  background-color: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(120%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  border-radius: 1.25rem !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Card hover animation */
.bg-white:hover,
main .shadow:hover,
.card:hover {
  border-color: var(--glass-border-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--glass-shadow), 0 12px 36px 0 var(--glow-color) !important;
}

/* Headers and Dropdowns */
header, 
.sticky.top-0 {
  background: var(--nav-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border-bottom: 1px solid var(--nav-border) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.3s ease;
}

/* Dropdowns and Modals */
.absolute.z-50, 
[x-show="open"], 
[role="menu"],
.dropdown-menu,
.modal-content {
  background: var(--nav-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--nav-border) !important;
  box-shadow: var(--glass-shadow) !important;
  border-radius: 1rem !important;
}

/* Text Overrides for Light Mode — deepen lighter gray text for richer contrast */
html:not(.dark) .text-gray-400 {
  color: #4b5563 !important;
}

html:not(.dark) .text-gray-500 {
  color: #374151 !important;
}

html:not(.dark) .text-gray-600 {
  color: #1f2937 !important;
}

html:not(.dark) .text-gray-700 {
  color: #111827 !important;
}

/* Text Overrides for Dark Mode */
html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-gray-700,
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
  color: var(--text-primary) !important;
}

html.dark .text-gray-600,
html.dark .text-gray-500 {
  color: var(--text-secondary) !important;
}

html.dark .text-gray-400 {
  color: var(--text-muted) !important;
}

/* Invert default hover text states in dark mode */
html.dark .hover\:text-gray-900:hover {
  color: var(--text-primary) !important;
}

/* Forms & Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
select,
textarea {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #1f2937 !important;
  border-radius: 0.75rem !important;
  transition: all 0.3s ease !important;
}

html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="search"],
html.dark input[type="url"],
html.dark input[type="tel"],
html.dark input[type="number"],
html.dark select,
html.dark textarea {
  background: rgba(15, 23, 42, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #f3f4f6 !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px var(--glow-color) !important;
  background: var(--text-inverse) !important;
}

/* Buttons */
.btn-primary,
.bg-orange-500,
.bg-orange-600 {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0.75rem !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.3) !important;
}

.btn-primary:hover,
.bg-orange-500:hover,
.bg-orange-600:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px 0 rgba(99, 102, 241, 0.4) !important;
}

.btn-secondary,
.bg-teal-500,
.bg-teal-600 {
  background: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-secondary-hover) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0.75rem !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 14px 0 rgba(13, 148, 136, 0.3) !important;
}

.btn-secondary:hover,
.bg-teal-500:hover,
.bg-teal-600:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px 0 rgba(13, 148, 136, 0.4) !important;
}

/* Badge highlight and other components */
.bg-orange-50 {
  background-color: var(--glow-color) !important;
  color: var(--brand-primary) !important;
}

html.dark .bg-orange-50 {
  background-color: rgba(99, 102, 241, 0.2) !important;
  color: #818cf8 !important;
}

.border-gray-200,
.border-gray-100 {
  border-color: var(--glass-border) !important;
}

/* Pastel badge/card backgrounds — without this, light-mode bg-*-50/100 utilities
   stay light in dark mode while the global text-color overrides above turn their
   text light too, making it unreadable (light text on a light card). */
html.dark .bg-gray-50,
html.dark .bg-gray-100 {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--text-secondary) !important;
}

html.dark .bg-red-50, html.dark .bg-red-100 {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
}

html.dark .bg-orange-100,
html.dark .bg-amber-50, html.dark .bg-amber-100 {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
}

html.dark .bg-yellow-50, html.dark .bg-yellow-100 {
  background-color: rgba(234, 179, 8, 0.15) !important;
  color: #facc15 !important;
}

html.dark .bg-lime-50, html.dark .bg-lime-100 {
  background-color: rgba(132, 204, 22, 0.15) !important;
  color: #a3e635 !important;
}

html.dark .bg-green-50, html.dark .bg-green-100 {
  background-color: rgba(34, 197, 94, 0.15) !important;
  color: #4ade80 !important;
}

html.dark .bg-emerald-50, html.dark .bg-emerald-100 {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
}

html.dark .bg-teal-50, html.dark .bg-teal-100 {
  background-color: rgba(13, 148, 136, 0.15) !important;
  color: #2dd4bf !important;
}

html.dark .bg-sky-100 {
  background-color: rgba(14, 165, 233, 0.15) !important;
  color: #38bdf8 !important;
}

html.dark .bg-blue-50, html.dark .bg-blue-100 {
  background-color: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
}

html.dark .bg-indigo-50, html.dark .bg-indigo-100 {
  background-color: rgba(99, 102, 241, 0.15) !important;
  color: #818cf8 !important;
}

html.dark .bg-violet-100,
html.dark .bg-purple-50, html.dark .bg-purple-100 {
  background-color: rgba(168, 85, 247, 0.15) !important;
  color: #c084fc !important;
}

html.dark .bg-pink-50, html.dark .bg-pink-100,
html.dark .bg-rose-100 {
  background-color: rgba(236, 72, 153, 0.15) !important;
  color: #f472b6 !important;
}

/* Colour-tinted borders that pair with the badges above — keep them subtle
   instead of a bright light-mode hue showing on a dark card. */
html.dark [class*="border-red-1"], html.dark [class*="border-red-2"],
html.dark [class*="border-orange-1"], html.dark [class*="border-orange-2"],
html.dark [class*="border-amber-1"], html.dark [class*="border-amber-2"],
html.dark [class*="border-yellow-1"], html.dark [class*="border-yellow-2"],
html.dark [class*="border-lime-1"], html.dark [class*="border-lime-2"],
html.dark [class*="border-green-1"], html.dark [class*="border-green-2"],
html.dark [class*="border-emerald-1"], html.dark [class*="border-emerald-2"],
html.dark [class*="border-teal-1"], html.dark [class*="border-teal-2"],
html.dark [class*="border-sky-1"], html.dark [class*="border-sky-2"],
html.dark [class*="border-blue-1"], html.dark [class*="border-blue-2"],
html.dark [class*="border-indigo-1"], html.dark [class*="border-indigo-2"],
html.dark [class*="border-violet-1"], html.dark [class*="border-violet-2"],
html.dark [class*="border-purple-1"], html.dark [class*="border-purple-2"],
html.dark [class*="border-pink-1"], html.dark [class*="border-pink-2"],
html.dark [class*="border-rose-1"], html.dark [class*="border-rose-2"] {
  border-color: var(--glass-border) !important;
}

/* Hero elements tweak in dark mode */
html.dark .bg-gray-950 {
  background-color: rgba(2, 6, 17, 0.8) !important;
}

/* Custom Glass-Morphic Footer */
footer {
  background: var(--nav-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border-top: 1px solid var(--nav-border) !important;
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.02) !important;
}

/* Footer text — deepen to a readable black against the glass background */
html:not(.dark) footer h3,
html:not(.dark) footer h4,
html:not(.dark) footer p,
html:not(.dark) footer ul a {
  color: #000000 !important;
}

/* Micro-animations and Shimmer */
@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.shimmer-effect {
  position: relative;
  overflow: hidden;
}

.shimmer-effect::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 2.5s infinite;
  content: '';
}

/* Scrollbar customization */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.4);
}

/* Fix for profile checklist, dropdown links, list items inside white bg */
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--glass-border) !important;
}

html.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark a.hover\:bg-orange-50:hover {
  background-color: rgba(99, 102, 241, 0.15) !important;
  color: #c7d2fe !important;
}

/* Interactive tables and lists in dark mode */
html.dark table, 
html.dark thead, 
html.dark tr, 
html.dark td, 
html.dark th {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Auth Pages Tweak */
.login-container,
.register-container {
  max-width: 480px;
  margin: 2rem auto;
}

/* Hero section overrides (Light/Dark Dynamic Glass) */
#search-section {
  background: transparent !important;
  transition: all 0.5s ease;
}

#search-section .absolute.inset-0 {
  background: var(--hero-gradient) !important;
  transition: all 0.5s ease;
}

#search-section .absolute.inset-0 .bg-gradient-to-br {
  display: none !important; /* Hide original hardcoded dark gradients */
}

#search-section .absolute.inset-0 .bg-\[radial-gradient\(ellipse_at_top_right\_\_rgba\(249\,115\,22\,0\.15\)\__transparent_60\%\)\] {
  background: var(--hero-radial) !important;
  transition: all 0.5s ease;
}

#search-section h1 {
  color: var(--hero-text-title) !important;
}

#search-section h1 span.text-orange-400 {
  color: var(--brand-primary) !important;
}

#search-section p {
  color: var(--hero-text-desc) !important;
}

/* Tool panel text ("Analyse and optimise your CV" heading, "Saved CV" label, textarea input text) —
   the panel's own background is re-themed to var(--glass-bg) below, which is light in
   light mode, so hardcoded text-white inside it must follow the same theme instead.
   Scoped to p/textarea/h3 only so it doesn't touch genuinely-white text on the
   orange/green badges (READY, icon containers) nested in the same form. */
#search-section form.bg-white\/10 h3,
#search-section form.bg-white\/10 p.text-white,
#search-section form.bg-white\/10 textarea.text-white,
#search-section form.bg-white\/10 label.text-gray-200 {
  color: var(--hero-text-title) !important;
}

/* Same panel, lighter secondary text (step captions, helper hints, placeholders) —
   text-gray-300/400/500 also assume a dark backdrop and vanish on the re-themed light bg. */
#search-section form.bg-white\/10 p.text-gray-300,
#search-section form.bg-white\/10 p.text-gray-400,
#search-section form.bg-white\/10 p.text-gray-500,
#search-section form.bg-white\/10 textarea.placeholder-gray-400::placeholder {
  color: var(--hero-text-desc) !important;
}

/* Hero tab button colors */
#search-section button {
  background-color: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(0, 0, 0, 0.05) !important;
  color: var(--text-primary) !important;
}

#search-section button[class*="bg-orange-500"],
#search-section button.bg-orange-500 {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.3) !important;
}

html.dark #search-section button {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #d1d5db !important;
}

html.dark #search-section button[class*="bg-orange-500"],
html.dark #search-section button.bg-orange-500 {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%) !important;
  color: #ffffff !important;
}

#search-section form.bg-white\/10 {
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}