/* 
 * layer-manager-fix.css
 * This CSS file fixes theme-related issues and glow effects
 */

/* Fix HistoryDex theme application */
body.theme-historydex {
  --theme-primary: #f59e0b !important;          /* Base orange */
  --theme-primary-hover: #d97706 !important;    /* Darker orange for hover */
  --theme-secondary: #fdba74 !important;        /* Lighter orange for accents */
  --theme-light: #fef3c7 !important;            /* Very light orange */
  --theme-dark: #92400e !important;             /* Very dark orange */
  --theme-shadow: rgba(245, 158, 11, 0.3) !important; /* Shadow with orange tint */
  --theme-header-bg: rgba(245, 158, 11, 0.5) !important; /* Semi-transparent orange */
  --theme-header-bg-hover: rgba(245, 158, 11, 0.7) !important; /* Darker for hover */
  --theme-btn-shadow: 0 5px 15px rgba(245, 158, 11, 0.4) !important; /* Button shadow */
  --theme-glow: rgba(245, 158, 11, 0.5) !important; /* For neon effects */
}

/* Better visibility for HistoryDex tab buttons */
body.theme-historydex .tab-btn.active {
  color: white !important;
  border-bottom-color: var(--theme-primary) !important;
  box-shadow: 0 5px 15px var(--theme-shadow) !important;
}

/* Fix glow effects for BallsDex */
@keyframes neonPulseBlueFix {
  0%, 100% { 
      box-shadow: 0 0 5px rgba(59, 130, 246, 0.5), 
                  0 0 10px rgba(59, 130, 246, 0.3), 
                  0 0 15px rgba(59, 130, 246, 0.2); 
  }
  50% { 
      box-shadow: 0 0 10px rgba(59, 130, 246, 0.6), 
                  0 0 15px rgba(59, 130, 246, 0.4), 
                  0 0 20px rgba(59, 130, 246, 0.3); 
  }
}

/* Fix glow effects for HistoryDex */
@keyframes neonPulseOrangeFix {
  0%, 100% { 
      box-shadow: 0 0 5px rgba(245, 158, 11, 0.5), 
                  0 0 10px rgba(245, 158, 11, 0.3), 
                  0 0 15px rgba(245, 158, 11, 0.2); 
  }
  50% { 
      box-shadow: 0 0 10px rgba(245, 158, 11, 0.6), 
                  0 0 15px rgba(245, 158, 11, 0.4), 
                  0 0 20px rgba(245, 158, 11, 0.3); 
  }
}

/* Apply correct animations based on theme */
body.theme-ballsdex .card-wrapper,
body.theme-ballsdex .download-button-blue,
body.theme-ballsdex .img-drop:hover,
body.theme-ballsdex .img-drop-secondary:hover {
  animation: neonPulseBlueFix 4s infinite;
}

body.theme-historydex .card-wrapper,
body.theme-historydex .download-button-blue,
body.theme-historydex .img-drop:hover,
body.theme-historydex .img-drop-secondary:hover {
  animation: neonPulseOrangeFix 4s infinite;
}

/* Fix for credits text alignment */
.ballsdex-card .credits {
  position: absolute;
  bottom: 3%;
  left: 1.5%;
  right: 4%;
  display: flex;
  justify-content: space-between;
  text-align: left; /* Ensure text alignment */
}

.ballsdex-card .credits .creator {
  text-align: left;
  flex: 1;
  font-size: 0.57rem;
}
.ballsdex-card .credits .creator {
  text-align: left;
  flex: 1;
  font-size: 0.57rem;
}
.ballsdex-card .credits .link {
  text-align: left;
  flex: 1;
  font-size: 0.57rem;
}
.ballsdex-card .credits .artwork {
  text-align: left;
  flex: 2;
  font-size: 0.57rem;
}

/* Fix border size for card preview wrapper */
.card-wrapper {
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

/* Fix layer item visibility in layer manager */
.layer-item {
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.layer-item:hover {
  opacity: 1;
}

.layer-item.has-content {
  opacity: 1;
}

/* Improve visibility for when layer is active/selected */
.layer-item.active-layer {
  font-weight: bold !important;
  opacity: 1 !important;
}

/* Fix z-index and transition issues for tab switching */
body.tab-switching * {
  transition: none !important;
  animation: none !important;
}

/* Fix for drag and drop - make cursor more responsive */
.main-image-container.has-image {
  cursor: grab !important;
}

.main-image-container.dragging {
  cursor: grabbing !important;
}

/* Fix for template visibility and spacing */
#card-template-overlay {
  z-index: 2 !important;
  background-size: 100% 100% !important;
}

/* Fix for secondary (holo) layer */
#second-card-layer {
  z-index: 4 !important;
  mix-blend-mode: overlay !important;
}

/* Fix for historydex theme icon */
body.theme-historydex .top-right-icon {
  filter: sepia(0.5);
}

/* Fix for layer controllers */
.control-btn {
  cursor: pointer !important;
}

body.theme-historydex .control-btn {
  background-color: rgba(245, 158, 11, 0.25) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
}

body.theme-historydex .control-btn:hover {
  background-color: rgba(245, 158, 11, 0.5) !important;
}

/* Fix for tab colors in historydex */
body.theme-historydex .section-header {
  background-color: var(--theme-header-bg) !important;
}

body.theme-historydex .section-header:hover {
  background-color: var(--theme-header-bg-hover) !important;
}

/* Fix for buttons */
body.theme-historydex .action-button.download-button-blue {
  background-color: var(--theme-primary) !important;
}

body.theme-historydex .action-button.download-button-blue:hover {
  background-color: var(--theme-primary-hover) !important;
  box-shadow: var(--theme-btn-shadow) !important;
}

/* Fix for drop zones - ensure we see if they have content */
.img-drop.has-image, 
.img-drop-secondary.has-image {
  border-color: #10b981 !important;
  background-color: rgba(16, 185, 129, 0.1) !important;
}

/* Fix for layer manager */
.layer-manager {
  overflow-y: auto !important;
}

.layer-list-display {
  max-height: 300px !important;
  overflow-y: auto !important;
}

/* Fix for image upload section */
.img-upload-section {
  width: 100% !important;
  max-width: 400px !important;
  margin: 10px auto 0 !important;
}

/* Fix for card wrapper sizing */
.card-wrapper {
  max-width: 550px !important;
  width: auto !important;
  height: 90% !important;
  max-height: 95% !important;
  aspect-ratio: 5/7 !important;
}

/* Fix for mobile view */
@media (max-width: 992px) {
  .card-wrapper {
      width: 85% !important;
      max-width: 400px !important;
      height: auto !important;
  }
  
  .layer-manager {
      flex: none !important;
      width: 100% !important;
      max-height: none !important;
      height: auto !important;
  }
}