/* ==========================================
   PREMIUM ANIMATIONS & TRANSITIONS
   ========================================== */

/* Load Inter font for dashboard */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&display=swap');

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(46, 209, 244, 0.3), 0 0 40px rgba(46, 209, 244, 0.1);
  }
  50% {
    box-shadow: 0 0 30px rgba(46, 209, 244, 0.5), 0 0 60px rgba(46, 209, 244, 0.2);
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes blur-emerge {
  from {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.blur-animated {
  animation: blur-emerge 1.2s ease-out forwards;
}

/* Dashboard-style upload page adapted to work with backend */
/* Use project color variable so this matches other pages' exact dark color */
body { 
  background: var(--color-dark) !important; 
  color: white;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, "Helvetica Neue", Arial;
}

/* Use a thinner base weight for a sleeker, lighter UI */
body { font-weight: 300; }

/* Ensure headings are not bolded anywhere */
h1, h2, h3, h4, h5, h6 { font-weight: 300 !important; letter-spacing: -0.2px; }

/* Neutralize utility bold classes so headers and other elements stay thin */
.font-bold, .font-semibold { font-weight: 300 !important; }

/* Disable body animation - pages load instantly without animation */
body.first-load {
  /* No body animation to prevent black screen flash */
  opacity: 1;
}

/* DISABLED: Page sections no longer animate on first load
body.first-load main section {
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

body.first-load main section:nth-child(1) { animation-delay: 0.1s; }
body.first-load main section:nth-child(2) { animation-delay: 0.2s; }
*/

/* DISABLED: Header no longer animates in from left
body.first-load header {
  animation: slideInFromLeft 0.7s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
*/

/* Override common utility wrapper classes used in the dashboard templates */
.bg-dark { background: var(--color-dark) !important; }
.bg-dark-light { background: rgba(255,255,255,0.02) !important; }
.border-stroke { border-color: rgba(255,255,255,0.06) !important; }
.text-white { color: white !important; }
.text-white\/70 { color: rgba(255,255,255,0.7) !important; }
header .logo img { height: 28px; }
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.section { margin-bottom: 32px; }
.section-title { color:white; font-size:24px; font-weight:700; margin:12px 0 16px; }
.card { background: var(--color-dark,  #001018); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 20px; }
.btn { background: linear-gradient(90deg, #2ED1F4 0%, #52D9F6 100%); color: #001018; padding: 12px 18px; border-radius: 10px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; border: none; cursor: pointer; font-size: 15px; transition: opacity 0.2s; }
.btn:hover { opacity: 0.9; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary { background: rgba(255,255,255,0.08); color: white; }
.muted { color: rgba(255,255,255,0.7); }
.badge { display:inline-block; font-size:12px; padding:4px 10px; border-radius:999px; background: rgba(46,209,244,.12); color:#2ED1F4; border:1px solid rgba(46,209,244,.35); }
.form-group { margin-bottom: 18px; }
.form-label { display: block; color: white; font-weight: 600; margin-bottom: 8px; font-size: 14px; }
.form-help { display: block; color: rgba(255,255,255,0.6); font-size: 13px; margin-top: 4px; }
.file-upload-zone { border: 2px dashed rgba(46,209,244,0.4); border-radius: 12px; padding: 32px 20px; text-align: center; background: rgba(46,209,244,0.03); cursor: pointer; transition: all 0.2s; }
.file-upload-zone:hover { border-color: #2ED1F4; background: rgba(46,209,244,0.08); }
.file-upload-zone.dragover { border-color: #2ED1F4; background: rgba(46,209,244,0.15); }
.file-info { display: none; align-items: center; gap: 12px; padding: 12px; background: rgba(46,209,244,0.08); border-radius: 8px; margin-top: 12px; flex-wrap: wrap; }
.file-info.active { display: flex; }
.file-info button { white-space: nowrap; }
@media (max-width: 640px) {
  .file-info { gap: 8px; padding: 10px; }
  .file-info > div { flex: 1; min-width: 0; }
  .file-info button { padding: 6px 10px !important; font-size: 12px !important; }
}
input[type="number"] { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); color: white; padding: 10px 12px; border-radius: 8px; font-size: 15px; width: 80px; }
input[type="number"]:focus { outline: none; border-color: #2ED1F4; }
.shoe-selector { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); padding: 10px 12px; border-radius: 8px; position: relative; }
.shoe-selector input { background: transparent; border: none; color: white; width: 100%; outline: none; font-size: 15px; }
.shoe-selector input::placeholder { color: rgba(255,255,255,0.5); }
.shoe-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: rgba(10,20,35,0.98); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; margin-top: 4px; max-height: 200px; overflow-y: auto; z-index: 1000; display: none; }
.shoe-dropdown.active { display: block; }
.shoe-option { padding: 10px 12px; cursor: pointer; color: white; border-bottom: 1px solid rgba(255,255,255,0.08); }
.shoe-option:hover { background: rgba(46,209,244,0.15); }

/* Upload page: Garmin sensor dropdown must match the darker shoe dropdown styling.
   Use high specificity + !important to prevent any later overrides from making it too light. */
#watchDropdown.shoe-dropdown {
  background: linear-gradient(135deg, rgba(20,20,30,0.98), rgba(15,15,25,0.98)) !important;
  border: 1px solid rgba(46, 209, 244, 0.3) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.8), 0 0 0 1px rgba(46, 209, 244, 0.1) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  opacity: 1 !important;
}

#watchDropdown.shoe-dropdown .shoe-option {
  color: rgba(255,255,255,0.92) !important;
  border-bottom: 1px solid rgba(255,255,255,0.03) !important;
  background: transparent !important;
}

#watchDropdown.shoe-dropdown .shoe-option:hover {
  background: linear-gradient(90deg, rgba(46, 209, 244, 0.15), rgba(46, 209, 244, 0.05)) !important;
  border-left: 3px solid #2ed1f4 !important;
  box-shadow: inset 0 0 20px rgba(46, 209, 244, 0.1) !important;
}
.selected-shoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.shoe-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(46,209,244,0.15); border: 1px solid rgba(46,209,244,0.4); border-radius: 20px; color: #2ED1F4; font-size: 13px; }
.shoe-tag button { background: none; border: none; color: #2ED1F4; cursor: pointer; padding: 0; font-size: 16px; line-height: 1; }
.analysis-list { display: flex; flex-direction: column; gap: 12px; }
.analysis-item { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 16px; display: flex; justify-content: space-between; align-items: center; transition: all 0.2s; }
.analysis-item:hover { background: rgba(255,255,255,0.08); border-color: rgba(46,209,244,0.3); }
.analysis-status { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.status-completed { background: rgba(46,209,244,0.15); color: #2ED1F4; }
.status-processing { background: rgba(255,193,7,0.15); color: #FFD54F; }
.status-failed { background: rgba(244,67,54,0.15); color: #FF6B6B; }
.progress-bar { width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; margin-top: 12px; display: none; }
.progress-bar.active { display: block; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #2ED1F4 0%, #52D9F6 100%); transition: width 0.3s ease; width: 0%; }
.error-message { display: flex; align-items: center; background: rgba(244,67,54,0.15); border: 1px solid rgba(244,67,54,0.4); color: #FF6B6B; padding: 0; border-radius: 8px; margin-top: 0; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-8px); visibility: hidden; transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease, margin-top 0.4s ease, padding 0.4s ease, visibility 0.4s ease; }
.error-message.active { max-height: 100px; padding: 12px 16px; margin-top: 12px; opacity: 1; transform: translateY(0); visibility: visible; }

/* Hide the visible frame/border/shadow for the upload card ("kader") so it blends with background */
#uploadCard, #uploadCard .card, #uploadCard .relative, #uploadCard > .relative {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}


header, header a, header nav a, .nav__menu a {
  color: white !important;
}


/* If the submit button wrapper exists, make sure it's hidden as well */
#uploadCard #submitBtn { display: none !important; opacity: 0 !important; pointer-events: none !important; }

/* Collapse the whole upload section so it doesn't take vertical space */
#uploadSection {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* Make the New Analysis CTAs visible regardless of utility classes */
#newAnalysisBtnHeader, #newAnalysisBtnMobile, a[href="/app/upload.html"] {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Cyan accent variables */
:root { --accent-cyan: #2ED1F4; --accent-cyan-strong: #07a6bf; --accent-cyan-soft: rgba(46,209,244,0.08); }

/* Navigation links should stay white, not cyan by default */
.nav__menu a { 
  color: white !important; 
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

.nav__menu a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 50% !important;
  width: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translateX(-50%) !important;
}

.nav__menu a:hover { 
  color: var(--accent-cyan) !important; 
  transform: translateY(-2px) !important;
}

.nav__menu a:hover::after {
  width: 100% !important;
}

.nav__menu a.nav-gradient { 
  color: white !important;
}

/* Remove mobile + button */
#newAnalysisBtnMobile {
  display: none !important;
}

/* Sign out button - cyan colored */

/* Button gradient tweaks used across dashboard to be more cyan than white.
   IMPORTANT: match the exact implementation from /static/style.css so buttons look identical
   across pages (e.g. Biometrics "Save Biometric Profile" and Upload "Start Analysis"). */
.button-border-gradient {
  position: relative;
  z-index: 0; /* establish stacking context for the border pseudo-element */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%) !important;
}

.button-border-gradient:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1; /* match style.css (border sits behind content) */
  background: linear-gradient(
    90deg,
    rgba(121, 241, 255, 0.45) 0.01%,
    rgba(56, 230, 215, 0.45) 50.01%,
    rgba(56, 230, 215, 0.45) 100%
  );
}

.button-border-gradient:hover {
  background: linear-gradient(90deg, rgba(46,209,244,0.12), rgba(46,209,244,0.05)) !important;
}

/* Shadow button - match style.css precisely */
.shadow-button {
  box-shadow: inset 0px -6px 15px rgba(56, 230, 215, 0.25), inset 0px 6px 15px rgba(121, 241, 255, 0.25);
}

/* Accent small UI pieces */
.badge { background: rgba(46,209,244,0.08) !important; color: var(--accent-cyan) !important; border: 1px solid rgba(46,209,244,0.18) !important; }
.shoe-tag { background: rgba(46,209,244,0.06) !important; border: 1px solid rgba(46,209,244,0.12) !important; color: var(--accent-cyan) !important; }

/* Override Tailwind-responsive visibility on the header nav where classes like 'invisible' and 'lg:visible' are used */
/* REMOVED: These overrides break Alpine.js dynamic classes for sticky header behavior */

/* Make header links and paragraph text subtler cyan instead of bright white */
.text-white\/50 { color: rgba(46,209,244,0.45) !important; }
.text-white\/70 { color: rgba(46,209,244,0.7) !important; }

/* Reports cards: clean cyan border (removed conflicting .wow.fadeInUp rule) */


/* Ensure mobile CTA is visible and colored */
#newAnalysisBtnMobile { background: var(--accent-cyan) !important; color: #001018 !important; }

/* Slightly tint icons and SVG strokes with cyan */
svg.fill-current, svg.stroke-current { color: var(--accent-cyan) !important; }

/* Strong overrides to guarantee header CTAs are visible and not clipped by parent height/visibility */
#newAnalysisBtnHeader, #newAnalysisBtnMobile {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative !important;
	z-index: 99999 !important;
	transform: none !important;
	margin: 0 !important;
	padding: 10px 14px !important;
}

/* Ensure any parent utility classes that set height/visibility don't clip the header area */
/* REMOVED: These overrides break Alpine.js sticky menu behavior */

/* More cyan accents for headings, links and report card metadata */
h2, h3 { 
  color: var(--accent-cyan) !important; 
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) backwards !important;
}

/* Section headers get a subtle glow */
section h2 {
  text-shadow: 0 0 30px rgba(46,209,244,0.15) !important;
  transition: text-shadow 0.3s ease !important;
}

section h2:hover {
  text-shadow: 0 0 40px rgba(46,209,244,0.3), 0 0 60px rgba(46,209,244,0.15) !important;
}
/* Don't force every anchor to cyan — scope cyan accents to navigation/header only */
.nav__menu a, header nav a, nav ul a { color: white!important; }


.text-white\/60 { color: rgba(46,209,244,0.6) !important; }
.report-meta, .report-sub { color: rgba(46,209,244,0.45) !important; }

/* Slightly increase cyan presence in footers, badges */
footer, .footer { background: rgba(46,209,244,0.02) !important; }
.badge, .status-completed { box-shadow: 0 2px 8px rgba(46,209,244,0.04) !important; }

/* Navigation layout fixes: ensure 4 tabs align consistently - REMOVED PADDING OVERRIDES to allow Alpine.js sticky behavior */
nav ul { flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important; gap: 0.625rem !important; }
/* Removed: .nav__menu padding overrides that break lg:py-7 and stickyMenu classes */
.nav__menu a { display: inline-flex !important; align-items: center !important; height: auto !important; white-space: nowrap !important; }

/* Make the right-side actions vertically centered with nav links */
.max-w\[\1170px\] > div, header .max-w\[\1170px\] > div, header .max-w\[1170px\] > div { align-items: center !important; }

/* ==========================================
   REPORTS CARDS — Single unified card design
   ========================================== */

/* Grid: force proper layout with no overlaps */
#reports {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 28px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: start !important;
}

/* Loading spinner container - exclude from grid card styling */
#reports #reportsLoading {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 150px !important;
  gap: 1rem !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  animation: none !important;
}

@media (min-width: 768px) {
  #reports { 
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 
  }
}

@media (min-width: 1024px) {
  #reports { 
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; 
  }
}

/* Card base: clean, spacious, no overlaps - EXCLUDE loading spinner */
#reports > div:not(#reportsLoading) {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 28px !important;
  min-height: 240px !important;
  background: rgba(18, 18, 44, 0.6) !important;
  border: 0.5px solid rgba(46, 209, 244, 0.15) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  backdrop-filter: blur(8px) !important;
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) backwards !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Staggered entrance for cards - exclude loading spinner */
#reports > div:not(#reportsLoading):nth-child(1) { animation-delay: 0.1s !important; }
#reports > div:not(#reportsLoading):nth-child(2) { animation-delay: 0.2s !important; }
#reports > div:not(#reportsLoading):nth-child(3) { animation-delay: 0.3s !important; }
#reports > div:not(#reportsLoading):nth-child(4) { animation-delay: 0.15s !important; }
#reports > div:not(#reportsLoading):nth-child(5) { animation-delay: 0.25s !important; }
#reports > div:not(#reportsLoading):nth-child(6) { animation-delay: 0.35s !important; }
#reports > div:not(#reportsLoading):nth-child(n+7) { animation-delay: 0.4s !important; }

/* Hover: lift and glow - exclude loading spinner */
#reports > div:not(#reportsLoading):hover {
  transform: translateY(-4px) scale(1.02) !important;
  border-color: rgba(46, 209, 244, 0.4) !important;
  box-shadow: 0 12px 40px rgba(46, 209, 244, 0.2), 0 0 80px rgba(46, 209, 244, 0.1) !important;
  background: rgba(18, 18, 44, 0.85) !important;
}

/* Metadata row at top - exclude loading spinner */
#reports > div:not(#reportsLoading) > .mb-4,
#reports > div:not(#reportsLoading) > div:first-child:not(.spinner-loader) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(46, 209, 244, 0.08) !important;
}

/* Title - exclude loading spinner */
#reports > div:not(#reportsLoading) h3 {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  margin: 0 0 12px 0 !important;
  word-wrap: break-word !important;
}

/* Description - exclude loading spinner */
#reports > div:not(#reportsLoading) p {
  font-size: 0.925rem !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 0 0 20px 0 !important;
  flex-grow: 1 !important;
}

/* Action row at bottom - exclude loading spinner */
#reports > div:not(#reportsLoading) > .flex:last-child,
#reports > div:not(#reportsLoading) > div:last-child {
  display: flex !important;
  gap: 12px !important;
  margin-top: auto !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(46, 209, 244, 0.06) !important;
}

/* View Details button - exclude loading spinner */
#reports > div:not(#reportsLoading) a.button-border-gradient {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 20px !important;
  background: linear-gradient(135deg, rgba(46, 209, 244, 0.12), rgba(46, 209, 244, 0.06)) !important;
  border: 0.5px solid rgba(46, 209, 244, 0.25) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
}

#reports > div:not(#reportsLoading) a.button-border-gradient:hover {
  background: linear-gradient(135deg, rgba(46, 209, 244, 0.25), rgba(46, 209, 244, 0.15)) !important;
  border-color: rgba(46, 209, 244, 0.5) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(46, 209, 244, 0.25) !important;
}

/* Delete button - exclude loading spinner */
#reports > div:not(#reportsLoading) button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  background: rgba(244, 67, 54, 0.1) !important;
  border: 1px solid rgba(244, 67, 54, 0.3) !important;
  border-radius: 10px !important;
  color: rgba(244, 67, 54, 0.9) !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
}

#reports > div:not(#reportsLoading) button:hover {
  background: rgba(244, 67, 54, 0.2) !important;
  border-color: rgba(244, 67, 54, 0.5) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3) !important;
}

/* SVG icons: keep clean and scaled */
#reports svg {
  flex-shrink: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
}

/* Timestamp styling */
#reports .text-xs {
  font-size: 0.8rem !important;
  color: rgba(255, 255, 255, 0.5) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Delete X button in top right of cards */
.delete-x-btn {
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(244, 67, 54, 0.1) !important;
  border: 1px solid rgba(244, 67, 54, 0.3) !important;
  border-radius: 50% !important;
  color: rgba(244, 67, 54, 0.9) !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  padding: 0 !important;
  font-weight: 300 !important;
}

.delete-x-btn:hover {
  background: rgba(244, 67, 54, 0.25) !important;
  border-color: rgba(244, 67, 54, 0.6) !important;
  transform: rotate(90deg) scale(1.1) !important;
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4) !important;
}

/* Delete Report button (styled version in page header) */
.delete-report-btn {
  padding: 14px 28px;
  font-size: 13px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.1));
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: rgba(239, 68, 68, 1);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
  flex-shrink: 0;
}





#deleteReportBtn:hover,
.delete-report-btn:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(220, 38, 38, 0.2)) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3) !important;
}

/* Empty state */
#reports .col-span-full {
  grid-column: 1 / -1 !important;
  padding: 60px 40px !important;
  text-align: center !important;
  background: rgba(18, 18, 44, 0.4) !important;
  border: 1px dashed rgba(46, 209, 244, 0.2) !important;
  border-radius: 16px !important;
}

#reports .col-span-full svg {
  opacity: 0.3 !important;
  margin: 0 auto 20px !important;
}

#reports .col-span-full p {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 1rem !important;
}

/* Small responsive tweak: slightly reduce min-height on small screens - exclude loading spinner */
@media (max-width: 640px) {
	#reports > div:not(#reportsLoading) { min-height: 140px !important; padding: 18px !important; }
}


/* ============================
   SHOE RECOMMENDATIONS 
   ============================ */

/* Shoe recommendations - use same cards as index.html with premium animations */

/* Shoe image white background removal fallback */
.shoe-image-wrapper {
  isolation: isolate;
}

.shoe-image-fallback {
  mix-blend-mode: multiply;
  filter: contrast(1.1) brightness(1.05);
}

/* Dark mode: invert the blend mode for better contrast */
@media (prefers-color-scheme: dark) {
  .shoe-image-fallback {
    mix-blend-mode: screen;
    filter: contrast(1.1) brightness(0.95);
  }
}

/* Premium shoe card animations - targeting actual classes used */
#shoeList .metric-card.shoe-card-animate.animate-in {
  animation: fadeInUp 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important;
  animation-duration: 1.2s !important;
}

#shoeList .hero-shoe-animate.animate-in {
  animation: fadeInUp 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important;
  animation-duration: 1.4s !important;
}

/* Legacy: Keep .wow.fadeInUp for backwards compatibility */
#shoeList .wow.fadeInUp {
  animation: fadeInUp 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) backwards !important;
  animation-duration: 1.2s !important;
  /* Hover transitions removed - no animations on hover */
}

/* Show a visible purple border for Great tier by default (overrides earlier generic border) */
#shoeList .wow.fadeInUp[data-tier="great"],
.metric-card[data-tier="great"] {
  border: 0.5px solid rgba(167, 139, 250, 0.45) !important;
}

/* Show a visible green border for Good tier by default (overrides earlier generic border) */
#shoeList .wow.fadeInUp[data-tier="good"],
.metric-card[data-tier="good"] {
  border: 0.5px solid rgba(1, 195, 168, 0.45) !important;
}

/* Show a visible orange border for Not Ideal and Alt tiers by default (overrides earlier generic border) */
#shoeList .wow.fadeInUp[data-tier="not-ideal"],
#shoeList .wow.fadeInUp[data-tier="alt"],
.metric-card[data-tier="not-ideal"],
.metric-card[data-tier="alt"] {
  border: 0.5px solid rgba(255, 183, 65, 0.45) !important;
}

/* Purchased shoe indicator */
.shoe-purchased-badge {
  display: inline-block;
  position: relative;
  background: linear-gradient(135deg, #01c3a8, #00a890);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(1, 195, 168, 0.4);
  z-index: 10;
  margin-bottom: 4px;
}

/* Purchase toggle section */
.shoe-purchase-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(46, 209, 244, 0.1);
}

.shoe-purchase-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 8px;
  transition: background 0.2s ease;
  background: rgba(46, 209, 244, 0.03);
  border: 1px solid rgba(46, 209, 244, 0.15);
}

.shoe-purchase-toggle:hover {
  background: rgba(46, 209, 244, 0.08);
  border-color: rgba(46, 209, 244, 0.25);
}

.shoe-purchase-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #01c3a8;
  margin: 0;
  flex-shrink: 0;
}

.shoe-purchase-toggle .toggle-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}

.shoe-purchase-details {
  margin-top: 0;
  padding: 0;
  background: rgba(46, 209, 244, 0.03);
  border: 1px solid rgba(46, 209, 244, 0.1);
  border-radius: 8px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-8px);
  transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease, margin-top 0.4s ease, padding 0.4s ease;
}

.shoe-purchase-details.active {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 12px;
  padding: 16px;
}

.shoe-purchase-details label {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
}

.shoe-purchase-details input,
.shoe-purchase-details select {
  width: 100%;
  padding: 10px 12px;
  background: rgba(18, 18, 44, 0.8);
  border: 1px solid rgba(46, 209, 244, 0.2);
  border-radius: 6px;
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
  transition: border-color 0.2s ease;
}

.shoe-purchase-details input:focus,
.shoe-purchase-details select:focus {
  outline: none;
  border-color: rgba(46, 209, 244, 0.5);
  box-shadow: 0 0 0 3px rgba(46, 209, 244, 0.1);
}

.shoe-purchase-details input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* Fade animation for conditional reason field */
[id^="reason-wrap-"] {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-8px);
  transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease, margin-bottom 0.4s ease;
  margin-bottom: 0;
}

[id^="reason-wrap-"].show {
  max-height: 200px;
  opacity: 1;
  transform: translateY(0);
  margin-bottom: 6px;
}

.shoe-update-btn {
  width: 100%;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(46, 209, 244, 0.15), rgba(46, 209, 244, 0.08));
  border: 1px solid rgba(46, 209, 244, 0.3);
  border-radius: 8px;
  color: rgba(46, 209, 244, 1);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 4px;
}

.shoe-update-btn:hover {
  background: linear-gradient(135deg, rgba(46, 209, 244, 0.25), rgba(46, 209, 244, 0.15));
  border-color: rgba(46, 209, 244, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(46, 209, 244, 0.2);
}

/* Key Metrics with category-based hover colors */
.metric-card {
  position: relative;
  transition: transform 0.12s ease-in-out, box-shadow 0.12s ease-in-out, border-color 0.12s ease-in-out !important;
}

/* Key metric cards fade-in animation - opacity only, keeps hover transitions */
.metric-card.scale-in-hidden {
  opacity: 0 !important;
}

/* Key metrics cards - fade-in animation with !important, dimming handled via inline styles */
.key-metrics-grid .metric-card.scale-in-visible {
  opacity: 1 !important;
  transition: opacity 1.2s ease, filter 0.2s ease, transform 0.12s ease-in-out, box-shadow 0.12s ease-in-out, border-color 0.12s ease-in-out !important;
}

/* Shoe cards fade-in */
#shoeList .metric-card.scale-in-visible {
  opacity: 1 !important;
  transition: opacity 1.2s ease !important;
}

/* Shoe cards - hover transitions handled in report.html for unified animation */
/* No conflicting transitions here */

/* Shoe section wrappers - slow fade animation (NOT fast hover transitions) */
#shoeList > div.mb-12,
#shoeList > .mb-12 {
  transition: opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* Ensure the blur stays inside the card and sits behind content */
.metric-card {
  overflow: hidden !important;
  position: relative !important;
}

/* Shoe cards need visible overflow for absolute badges on the border */
#shoeList .metric-card {
  overflow: visible !important;
}

#shoeList .metric-card .metric-card-blur {
  overflow: hidden !important;
}

/* Nudge unlock/mystery cards up to align with LPI badge height */


.metric-card .metric-card-blur {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

.metric-card .metric-card-blur img {
  /* wider glow to match card width */
  width: 100% !important; /* full width of card */
  max-width: none !important;
  /* reduced height so the glow is focused toward the bottom-center */
  height: 180% !important;
  /* reduced default opacity - increases on hover */
  opacity: 0.55 !important;
  object-fit: cover !important;
  object-position: center bottom !important;
  pointer-events: none !important;
  display: block !important;
  /* concentrated blur radius for a dense glow */
  filter: blur(32px) saturate(1.45) brightness(1.07) !important;
  /* smaller translate & scale to keep glow concentrated at bottom center */
  transform: translateY(22%) scale(1.22) !important;
  mix-blend-mode: screen !important;
}

/* Ensure card content paints above the decorative blur */
.metric-card > .flex,
.metric-card > div:not(.metric-card-blur) {
  position: relative !important;
  z-index: 10 !important;
}

/* Keep LPI badge absolute so it doesn't push card content */
#shoeList .metric-card > .lpi-fit-badge {
  position: absolute !important;
  top: -1px !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 50 !important;
  pointer-events: none !important;
}

/* Center text vertically within metric cards */
.metric-card > .flex.items-center {
  display: flex !important;
  align-items: center !important;
  min-height: 100px !important;
}

.metric-card .flex-1 {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Ensure metric cards show a visible border by default and respect categories (use !important to override generic card rules) */
.metric-card[data-category="excellent"] {
  border: 2px solid rgba(139, 92, 246, 0.4) !important;
}
.metric-card[data-category="good"] {
  border: 2px solid rgba(1, 195, 168, 0.4) !important;
}
.metric-card[data-category="warning"] {
  border: 2px solid rgba(255, 183, 65, 0.4) !important;
}
.metric-card[data-category="bad"] {
  border: 2px solid rgba(239, 68, 68, 0.4) !important;
}
.metric-card[data-category="neutral"], .metric-card:not([data-category]):not([data-tier]) {
  border: 2px solid rgba(230, 200, 85, 0.3) !important;
}

.metric-card:hover {
  transform: translateY(-2px) scale(1.01) !important;
}

/* Purple for excellent metrics */
.metric-card[data-category="excellent"]:hover {
  border-color: rgba(139, 92, 246, 0.45) !important;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.12), 0 0 20px rgba(139, 92, 246, 0.06) !important;
}

.metric-card[data-category="excellent"]:hover .metric-icon-bg {
  background: rgba(139, 92, 246, 0.15) !important;
}

/* Green for good metrics (cadence ~170-180) */
.metric-card[data-category="good"]:hover {
  border-color: rgba(1, 195, 168, 0.45) !important;
  box-shadow: 0 4px 16px rgba(1, 195, 168, 0.12), 0 0 20px rgba(1, 195, 168, 0.06) !important;
}

.metric-card[data-category="good"]:hover .metric-icon-bg {
  background: rgba(1, 195, 168, 0.15) !important;
}

/* Yellow for warning metrics */
.metric-card[data-category="warning"]:hover {
  border-color: rgba(255, 183, 65, 0.45) !important;
  box-shadow: 0 4px 16px rgba(255, 183, 65, 0.12), 0 0 20px rgba(255, 183, 65, 0.06) !important;
}

.metric-card[data-category="warning"]:hover .metric-icon-bg {
  background: rgba(255, 183, 65, 0.15) !important;
}

/* Red for bad metrics */
.metric-card[data-category="bad"]:hover {
  border-color: rgba(239, 68, 68, 0.45) !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.12), 0 0 20px rgba(239, 68, 68, 0.06) !important;
}

.metric-card[data-category="bad"]:hover .metric-icon-bg {
  background: rgba(239, 68, 68, 0.15) !important;
}

/* Yellow for neutral/default metrics (excluding shoe cards with data-tier) */
.metric-card[data-category="neutral"]:hover,
.metric-card:not([data-category]):not([data-tier]):hover {
  border-color: rgba(230, 200, 85, 0.45) !important;
  box-shadow: 0 4px 16px rgba(230, 200, 85, 0.12), 0 0 20px rgba(230, 200, 85, 0.06) !important;
}

.metric-card[data-category="neutral"]:hover .metric-icon-bg,
.metric-card:not([data-category]):not([data-tier]):hover .metric-icon-bg {
  background: rgba(230, 200, 85, 0.15) !important;
}

.metric-icon-bg {
  transition: background 0.12s ease-in-out;
}

/* ============================
   SHOE CARD VISUALS (decorative blur + tier tint)
   ============================ */

@keyframes fadeInFromBottom {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}


/* Ensure card content is above the decorative blur */
.shoe-card > * { position: relative !important; z-index: 2 !important; }

/* Tier tints: apply hue rotation and subtle saturation/brightness tweaks */
.shoe-card[data-tier="good"]::before { filter: hue-rotate(95deg) saturate(1.35) brightness(1.02) !important; }
.shoe-card[data-tier="warning"]::before { filter: hue-rotate(25deg) saturate(1.25) brightness(1.02) !important; }
.shoe-card[data-tier="great"]::before { filter: hue-rotate(265deg) saturate(1.2) brightness(1.02) !important; }

/* ============================
   SHOE CARDS ON REPORT.HTML (matching dashboard card style with tier-colored blur)
   ============================ */

/* ==========================================
   HARD OVERRIDE: DISABLE ALL TRANSFORMS
   FOR SHOE CARDS ONLY (NO METRIC CARDS)
   ========================================== */


/* Explicitly neutralize hover transforms */
#shoeList .shoe-card:hover,
#shoeList .shoe-card-link:hover,
#shoeList .wow.fadeInUp[data-tier]:hover,
.metric-card[data-tier]:hover,
.metric-card[data-shoe-id]:hover {
  transform: none !important;
}

/* ==========================================
   SHOE CARD HOVER ANIMATIONS (blur + opacity + glow)
   NO TRANSFORMS - ONLY VISUAL EFFECTS
   ========================================== */

/* Base transition for shoe card blur images and box-shadow */
.shoe-card-link,
.metric-card[data-tier],
.metric-card[data-shoe-id] {
  transition: box-shadow 1s cubic-bezier(0.4, 0, 0.2, 1), border-color 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.shoe-card-link .metric-card-blur img,
.metric-card[data-tier] .metric-card-blur img,
.metric-card[data-shoe-id] .metric-card-blur img {
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover: increase opacity for blur glow effect */
.shoe-card-link:hover .metric-card-blur img,
.metric-card[data-tier]:hover .metric-card-blur img,
.metric-card[data-shoe-id]:hover .metric-card-blur img {
  opacity: 0.95 !important;
}

/* Great tier (Purple) - glow on hover */
.shoe-card-link[data-tier="great"]:hover,
.metric-card[data-tier="great"]:hover {
  box-shadow: 0 0 35px rgba(167, 139, 250, 0.35), 0 0 60px rgba(167, 139, 250, 0.15) !important;
  border-color: rgba(167, 139, 250, 0.6) !important;
}

/* Good tier (Green/Teal) - glow on hover */
.shoe-card-link[data-tier="good"]:hover,
.metric-card[data-tier="good"]:hover {
  box-shadow: 0 0 35px rgba(1, 195, 168, 0.35), 0 0 60px rgba(1, 195, 168, 0.15) !important;
  border-color: rgba(1, 195, 168, 0.6) !important;
}

/* Not-ideal tier (Orange) - glow on hover */
.shoe-card-link[data-tier="not-ideal"]:hover,
.metric-card[data-tier="not-ideal"]:hover,
.shoe-card-link[data-tier="alt"]:hover,
.metric-card[data-tier="alt"]:hover {
  box-shadow: 0 0 35px rgba(255, 183, 65, 0.35), 0 0 60px rgba(255, 183, 65, 0.15) !important;
  border-color: rgba(255, 183, 65, 0.6) !important;
}

/* Tags shine harder on hover - Great tier (Purple) - keep text white */
.shoe-card-link[data-tier="great"]:hover .shoe-tag-item,
.metric-card[data-tier="great"]:hover .shoe-tag-item {
  background: rgba(167, 139, 250, 0.2) !important;
  border-color: rgba(167, 139, 250, 0.5) !important;
}

/* Tags shine harder on hover - Good tier (Teal) - keep text white */
.shoe-card-link[data-tier="good"]:hover .shoe-tag-item,
.metric-card[data-tier="good"]:hover .shoe-tag-item {
  background: rgba(1, 195, 168, 0.2) !important;
  border-color: rgba(1, 195, 168, 0.5) !important;
}

/* Tags shine harder on hover - Not-ideal tier (Orange) - keep text white */
.shoe-card-link[data-tier="not-ideal"]:hover .shoe-tag-item,
.metric-card[data-tier="not-ideal"]:hover .shoe-tag-item,
.shoe-card-link[data-tier="alt"]:hover .shoe-tag-item,
.metric-card[data-tier="alt"]:hover .shoe-tag-item {
  background: rgba(255, 183, 65, 0.2) !important;
  border-color: rgba(255, 183, 65, 0.5) !important;
}

/* Tag transition for smooth effect */
.shoe-tag-item {
  transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Divider shines on hover too */
.shoe-card-link[data-tier="great"]:hover .shoe-card-divider,
.metric-card[data-tier="great"]:hover .shoe-card-divider {
  background: rgba(167, 139, 250, 0.4) !important;
}

.shoe-card-link[data-tier="good"]:hover .shoe-card-divider,
.metric-card[data-tier="good"]:hover .shoe-card-divider {
  background: rgba(1, 195, 168, 0.4) !important;
}

.shoe-card-link[data-tier="not-ideal"]:hover .shoe-card-divider,
.metric-card[data-tier="not-ideal"]:hover .shoe-card-divider,
.shoe-card-link[data-tier="alt"]:hover .shoe-card-divider,
.metric-card[data-tier="alt"]:hover .shoe-card-divider {
  background: rgba(255, 183, 65, 0.4) !important;
}

.shoe-card-divider {
  transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Mystery/unlock cards: NO hover effects at all */
.unlock-card:hover,
.metric-card[data-locked="true"]:hover {
  transform: none !important;
  box-shadow: none !important;
}

.unlock-card .metric-card-blur img,
.metric-card[data-locked="true"] .metric-card-blur img {
  transition: none !important;
}

.unlock-card:hover .metric-card-blur img,
.metric-card[data-locked="true"]:hover .metric-card-blur img {
  opacity: 0.78 !important;
}