/* Minimal extras for the dark, glossy look and subtle noise */
:root { color-scheme: dark; }

html, body, #root { height: 100%; }
html, body { max-width: 100vw; overflow-x: hidden; }

body {
  background-color: #1E1E21;
  background-image: radial-gradient(1200px 600px at 20% -10%, rgba(241,216,91,0.10), transparent 60%),
                    radial-gradient(1200px 600px at 120% 110%, rgba(120,230,208,0.08), transparent 60%);
}
/* Force solid background without gradients where needed */
.bg-solid { background-color:#1E1E21 !important; background-image:none !important; }

/* Glass cards hover */
.glass:hover { transform: translateY(-2px); }

/* Cursor-follow glare for buttons or generic elements */
.glare { position: relative; overflow: hidden; }
.glare::before {
  content: "";
  position: absolute; inset: -1px;
  background:
    radial-gradient(240px 160px at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.18), rgba(255,255,255,0.0) 40%),
    conic-gradient(from 180deg at var(--mx,50%) var(--my,50%), rgba(241,216,91,0.06), rgba(120,230,208,0.06), transparent 60%, transparent 100%);
  opacity: var(--g-o,0);
  transition: opacity .25s ease;
  pointer-events: none;
}
.glare:hover::before { opacity: .9; }

/* Diagonal glare effect specifically for cards */
.glare-card { position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.glare-card::after {
  content: ""; position: absolute; inset: -25%;
  background: linear-gradient(135deg, transparent 45%, rgba(255,255,255,0.18) 50%, transparent 55%);
  transform: translateX(-120%);
  opacity: 0; pointer-events: none;
}
.glare-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0,0,0,0.5); }
.glare-card:hover::after { animation: diag-glare 1.1s ease; opacity: 1; }
@keyframes diag-glare { to { transform: translateX(120%); } }

/* Button shine sweep */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: ""; position: absolute; inset: -40% -20%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.6), transparent 70%);
  transform: translateX(-120%);
}
.btn-shine:hover::after { animation: shine 1.1s ease; }
@keyframes shine { to { transform: translateX(120%); } }

/* Floating glow animation for background orbs */
@keyframes floaty { 0%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } 100%{ transform: translateY(0) } }
.floaty { animation: floaty 6s ease-in-out infinite; }
.floaty-slow { animation: floaty 10s ease-in-out infinite; }

/* Scroll reveal helpers */
.reveal { opacity: 0; transform: translateX(var(--tx, 0)); will-change: transform, opacity; }
.reveal-visible { opacity: 1; transform: translateX(0); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }

/* Dashboard helpers */
.stripes { background-image: repeating-linear-gradient( -45deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 8px, transparent 8px, transparent 16px ); }
.card { background-color: #2E3137; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; box-shadow: 0 20px 40px rgba(0,0,0,0.35); }
.pill { border-radius: 9999px; }
.progress { height: 8px; background: rgba(255,255,255,0.08); border-radius: 9999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: #f1d85b; }

/* Shimmer border for status chips */
.status-chip { position: relative; display: inline-block; }
.status-chip::after {
  content: ""; position: absolute; inset: 0; border-radius: 9999px; padding: 1px; background: conic-gradient(from 0deg, rgba(255,255,255,.65), transparent 20%, transparent 60%, rgba(255,255,255,.65)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 2s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Tab Button Styles */
.tab-button {
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.2s ease;
}
.tab-button:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
}
.tab-button.active {
  color: #1E1E21;
  background-color: #FFF27A;
}

/* Tab Content Styles */
.tab-content {
  height: 100%;
}
.tab-content.hidden {
  display: none;
}

/* Card Hover Effects - Only for Overall Analysis */
.overall-analysis .card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

.overall-analysis .card:hover {
  transform: scale(1.05);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  z-index: 10;
  position: relative;
}

/* Analysis Type Button Styles */
.analysis-type-btn {
  color: rgba(255, 255, 255, 0.7);
  background-color: transparent;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.analysis-type-btn:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.analysis-type-btn.active {
  color: #1E1E21;
  background-color: #FFF27A;
  border-color: #FFF27A;
}

/* Analysis Content Animations */
.analysis-content {
  animation: fadeInUp 0.4s ease-out;
}

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

/* Indicator Card Hover Effects */
.indicator-card {
  transition: all 0.2s ease;
}

.indicator-card:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}

/* File Button Styles */
.file-btn {
  color: rgba(255, 255, 255, 0.7);
  background-color: transparent;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.file-btn:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.file-btn.active {
  color: #1E1E21;
  background-color: #FFF27A;
  border-color: #FFF27A;
}

/* File Content Animations */
.file-content {
  animation: fadeInUp 0.4s ease-out;
}

/* Circular Footer Styles */
.footer-circle {
  position: relative;
  z-index: 10;
}

.footer-expanded {
  position: absolute;
  bottom: 100%;
  right: 0;
  min-width: 300px;
  white-space: nowrap;
}

/* Footer hover effect */
footer:hover .footer-expanded {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

footer:hover .footer-circle {
  transform: scale(1.1);
}

footer:hover .footer-circle svg {
  transform: scale(1.2);
}