/**
 * Custom Asciinema Player Styles for Cupcake Docs
 * 
 * Includes custom terminal themes matching Zensical's color schemes
 * and layout adjustments for proper integration.
 */

/* ============================================================================
 * Custom Terminal Themes
 * ============================================================================ */

/* Zensical Light Theme (for default scheme) */
.asciinema-player-theme-zensical-light {
  --term-color-foreground: #1f2328;
  --term-color-background: #ffffff;
  
  --term-color-0: #24292f;
  --term-color-1: #cf222e;
  --term-color-2: #116329;
  --term-color-3: #4d2d00;
  --term-color-4: #0969da;
  --term-color-5: #8250df;
  --term-color-6: #1b7c83;
  --term-color-7: #6e7781;
  --term-color-8: #57606a;
  --term-color-9: #a40e26;
  --term-color-10: #1a7f37;
  --term-color-11: #633c01;
  --term-color-12: #218bff;
  --term-color-13: #a475f9;
  --term-color-14: #3192aa;
  --term-color-15: #8c959f;
}

/* Zensical Dark Theme (for slate scheme) */
.asciinema-player-theme-zensical-dark {
  --term-color-foreground: #c9d1d9;
  --term-color-background: #0d1117;
  
  --term-color-0: #484f58;
  --term-color-1: #ff7b72;
  --term-color-2: #7ee787;
  --term-color-3: #d29922;
  --term-color-4: #79c0ff;
  --term-color-5: #d2a8ff;
  --term-color-6: #a5d6ff;
  --term-color-7: #c9d1d9;
  --term-color-8: #6e7681;
  --term-color-9: #ffa198;
  --term-color-10: #7ee787;
  --term-color-11: #e3b341;
  --term-color-12: #a5d6ff;
  --term-color-13: #d2a8ff;
  --term-color-14: #a5d6ff;
  --term-color-15: #ffffff;
}

/* Auto theme that responds to Zensical's color scheme toggle */
.asciinema-player-theme-zensical {
  --term-color-foreground: #c9d1d9;
  --term-color-background: #0d1117;
  
  --term-color-0: #484f58;
  --term-color-1: #ff7b72;
  --term-color-2: #7ee787;
  --term-color-3: #d29922;
  --term-color-4: #79c0ff;
  --term-color-5: #d2a8ff;
  --term-color-6: #a5d6ff;
  --term-color-7: #c9d1d9;
  --term-color-8: #6e7681;
  --term-color-9: #ffa198;
  --term-color-10: #7ee787;
  --term-color-11: #e3b341;
  --term-color-12: #a5d6ff;
  --term-color-13: #d2a8ff;
  --term-color-14: #a5d6ff;
  --term-color-15: #ffffff;
}

/* Switch to light when Zensical is in default (light) mode */
[data-md-color-scheme="default"] .asciinema-player-theme-zensical {
  --term-color-foreground: #1f2328;
  --term-color-background: #ffffff;
  
  --term-color-0: #24292f;
  --term-color-1: #cf222e;
  --term-color-2: #116329;
  --term-color-3: #4d2d00;
  --term-color-4: #0969da;
  --term-color-5: #8250df;
  --term-color-6: #1b7c83;
  --term-color-7: #6e7781;
  --term-color-8: #57606a;
  --term-color-9: #a40e26;
  --term-color-10: #1a7f37;
  --term-color-11: #633c01;
  --term-color-12: #218bff;
  --term-color-13: #a475f9;
  --term-color-14: #3192aa;
  --term-color-15: #8c959f;
}

/* ============================================================================
 * Container Styling
 * ============================================================================ */

/* Container styling */
.cast-player {
  margin: 1rem 0 1.5rem;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Dark mode shadow adjustment */
[data-md-color-scheme="slate"] .cast-player {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Override asciinema player container styles for better fit */
.cast-player .ap-player {
  border-radius: 8px;
}

/* Terminal wrapper - ensure proper sizing */
.cast-player .ap-wrapper {
  border-radius: 8px;
}

/* Control bar styling to match Zensical */
.cast-player .ap-control-bar {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

/* Play button styling */
.cast-player .ap-play-button {
  transition: transform 0.15s ease;
}

.cast-player .ap-play-button:hover {
  transform: scale(1.1);
}

/* Progress bar accent color - matches Zensical's default accent */
.cast-player .ap-progressbar .ap-gutter-fill {
  background: var(--md-accent-fg-color, #526cfe);
}

/* Fullscreen button */
.cast-player .ap-fullscreen-button:hover {
  opacity: 1;
}

/* Loading indicator */
.cast-player .ap-loading {
  background: rgba(0, 0, 0, 0.7);
}

/* Start overlay (poster) */
.cast-player .ap-start-prompt {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

/* Responsive sizing */
@media screen and (max-width: 76.1875em) {
  .cast-player {
    margin-left: -0.8rem;
    margin-right: -0.8rem;
    border-radius: 0;
  }
  
  .cast-player .ap-player,
  .cast-player .ap-wrapper {
    border-radius: 0;
  }
}

/* Print styles - hide player, show placeholder */
@media print {
  .cast-player {
    display: none;
  }
}