/* 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;
}

/* News/Documents Tab Content Styles */
.news-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;
}

/* Mobile responsive adjustments for footer */
@media (max-width: 768px) {
  .footer-expanded {
    min-width: 280px;
    max-width: calc(100vw - 2rem);
    right: -1rem;
    white-space: normal;
    word-wrap: break-word;
  }
  
  .footer-expanded .flex {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

@media (max-width: 480px) {
  .footer-expanded {
    min-width: 250px;
    max-width: calc(100vw - 1rem);
    right: -0.5rem;
    font-size: 0.875rem;
  }
}

/* Mobile responsive adjustments for view-report page */
@media (max-width: 768px) {
  /* Make left navbar smaller on mobile */
  .mobile-navbar {
    grid-template-columns: 60px 1fr !important;
  }
  
  /* Adjust navbar content */
  .mobile-navbar aside {
    padding: 0.75rem 0.5rem;
  }
  
  .mobile-navbar aside nav {
    gap: 0.5rem;
  }
  
  .mobile-navbar aside nav a,
  .mobile-navbar aside button {
    width: 2.5rem;
    height: 2.5rem;
  }
  
  /* Make cards responsive */
  .mobile-cards {
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }
  
  .mobile-card {
    width: 100% !important;
    min-width: unset !important;
    max-width: 100% !important;
  }
  
  /* Adjust main content padding */
  .mobile-main {
    padding: 0.75rem !important;
  }
  
  /* Make header more compact */
  .mobile-header {
    padding: 0 1rem !important;
  }
  
  .mobile-header .text-base {
    font-size: 0.875rem;
  }
  
  /* Adjust pagination position */
  .mobile-pagination {
    bottom: 1rem !important;
    right: 1rem !important;
  }
}

@media (max-width: 480px) {
  /* Even smaller navbar for very small screens */
  .mobile-navbar {
    grid-template-columns: 50px 1fr !important;
  }
  
  .mobile-navbar aside {
    padding: 0.5rem 0.25rem;
  }
  
  .mobile-navbar aside nav a,
  .mobile-navbar aside button {
    width: 2rem;
    height: 2rem;
  }
  
  .mobile-navbar aside nav a svg,
  .mobile-navbar aside button svg {
    width: 14px;
    height: 14px;
  }
  
  /* Adjust main content */
  .mobile-main {
    padding: 0.5rem !important;
  }
  
  /* Make header even more compact */
  .mobile-header {
    padding: 0 0.75rem !important;
    height: 3.5rem !important;
  }
  
  .mobile-header .w-8 {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  .mobile-header .w-5 {
    width: 1rem;
    height: 1rem;
  }
}

/* Mobile responsive adjustments for create-report page */
@media (max-width: 768px) {
  /* Make form more mobile-friendly */
  .mobile-form {
    max-width: 100% !important;
    padding: 1rem !important;
    margin: 0 !important;
  }
  
  /* Adjust form elements */
  .mobile-form input,
  .mobile-form select {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
  
  /* Make dropzone more compact */
  .mobile-form #dropzone {
    padding: 2rem 1rem !important;
  }
  
  /* Adjust file list */
  .mobile-form #fileList .flex {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  .mobile-form #fileList select {
    width: 100% !important;
  }
  
  /* Make button full width on mobile */
  .mobile-form button {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
  }
}

@media (max-width: 480px) {
  /* Even more compact form */
  .mobile-form {
    padding: 0.75rem !important;
  }
  
  .mobile-form h2 {
    font-size: 1.125rem !important;
  }
  
  .mobile-form #dropzone {
    padding: 1.5rem 0.75rem !important;
  }
  
  .mobile-form #dropzone .font-semibold {
    font-size: 0.875rem !important;
  }
  
  .mobile-form #dropzone .text-xs {
    font-size: 0.75rem !important;
  }
}

/* Mobile responsive adjustments for report page */
@media (max-width: 768px) {
  /* Make main content more mobile-friendly */
  .mobile-main {
    padding: 0.5rem !important;
  }
  
  /* Adjust secondary navigation */
  .mobile-nav {
    margin: 0 0.5rem 0.75rem 0.5rem !important;
    padding: 0.5rem !important;
  }
  
  .mobile-nav .flex {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  
  .mobile-nav .tab-button {
    font-size: 0.75rem !important;
    padding: 0.5rem 0.75rem !important;
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
  }
  
  /* Fix documentation button alignment */
  .mobile-nav .tab-button[data-tab="documentation"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
  }
  
  .mobile-nav .tab-button[data-tab="documentation"] svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
  }
  
  /* Make overall analysis section responsive */
  .overall-analysis section {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding: 0.5rem !important;
  }
  
  .overall-analysis .grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  /* Adjust chart containers */
  .overall-analysis .card {
    padding: 0.75rem !important;
  }
  
  .overall-analysis .card .rounded-xl {
    height: 250px !important;
  }
  
  /* Make detailed analysis responsive */
  .mobile-main .flex {
    flex-direction: column !important;
  }
  
  .mobile-main .w-1\/5 {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 1rem !important;
    max-height: 200px !important;
    overflow-y: auto !important;
  }
  
  .mobile-main .w-4\/5 {
    width: 100% !important;
    height: auto !important;
    min-height: 300px !important;
  }
  
  /* Ensure the detailed analysis content area is visible */
  .mobile-main #detailedAnalysisContentArea {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
  }
  
  /* Adjust analysis type buttons */
  .mobile-main .analysis-type-btn {
    font-size: 0.75rem !important;
    padding: 0.5rem !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 0.5rem !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Ensure analysis types list is visible */
  .mobile-main #analysisTypesList {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  .mobile-main #analysisTypesList .space-y-2 {
    display: block !important;
  }
  
  /* Make uploaded files responsive */
  .mobile-main #uploadedFilesList .space-y-2 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  
  .mobile-main .file-btn {
    font-size: 0.75rem !important;
    padding: 0.5rem !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  /* Ensure uploaded files content area is visible */
  .mobile-main #uploadedFileContentArea {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 480px) {
  /* Even more compact for very small screens */
  .mobile-main {
    padding: 0.25rem !important;
  }
  
  .mobile-nav {
    margin: 0 0.25rem 0.5rem 0.25rem !important;
    padding: 0.25rem !important;
  }
  
  .mobile-nav .tab-button {
    font-size: 0.625rem !important;
    padding: 0.375rem 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
  }
  
  /* Fix documentation button alignment on very small screens */
  .mobile-nav .tab-button[data-tab="documentation"] svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
  }
  
  .overall-analysis section {
    padding: 0.25rem !important;
  }
  
  .overall-analysis .card {
    padding: 0.5rem !important;
  }
  
  .overall-analysis .card .rounded-xl {
    height: 200px !important;
  }
  
  /* Make text smaller on very small screens */
  .overall-analysis .text-sm {
    font-size: 0.75rem !important;
  }
  
  .overall-analysis .text-xs {
    font-size: 0.625rem !important;
  }
  
  /* Adjust detailed analysis for very small screens */
  .mobile-main .w-1\/5 {
    max-height: 150px !important;
  }
  
  .mobile-main .w-4\/5 {
    min-height: 250px !important;
  }
  
  /* Ensure analysis type buttons are visible on very small screens */
  .mobile-main .analysis-type-btn {
    font-size: 0.625rem !important;
    padding: 0.375rem !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 0.25rem !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Adjust analysis content */
  .analysis-content h2 {
    font-size: 1.125rem !important;
  }
  
  .analysis-content h3 {
    font-size: 1rem !important;
  }
  
  .analysis-content p {
    font-size: 0.875rem !important;
  }
  
  /* Make file content more compact */
  .file-content h2 {
    font-size: 1.125rem !important;
  }
  
  .file-content h3 {
    font-size: 1rem !important;
  }
  
  .file-content .text-white\/80 {
    font-size: 0.875rem !important;
  }
}

/* Share Dropdown Styles */
#shareDropdown {
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

#shareDropdown button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#shareDropdown button:disabled:hover {
  background-color: transparent;
}

/* 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);
}