/* Solution Manager Styles - Centralized CSS for Lab Exercise Solution Unlocking */

/* Styles for blurred solutions */
.solution-blurred .callout-body {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
  position: relative;
}

/* Remove the problematic pseudo-element that causes the unwanted box */
.solution-blurred .callout-body::before {
  display: none !important;
}

/* No overlay text per user request */

.solution-blurred {
  position: relative;
  overflow: hidden;
}

/* Hide copy buttons in blurred solutions */
.solution-blurred .code-copy-button,
.solution-blurred .clipboard-button,
.solution-blurred [title*="Copy"],
.solution-blurred [title*="copy"],
.solution-blurred .sourceCode .copy-to-clipboard-button {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Disable pyodide code cells in blurred solutions */
.solution-blurred .exercise-cell,
.solution-blurred [id^="pyodide-"] {
  pointer-events: none !important;
  user-select: none !important;
  position: relative;
}

/* Disable CodeMirror editors in blurred solutions */
.solution-blurred .CodeMirror {
  pointer-events: none !important;
  opacity: 0.7;
}

.solution-blurred .CodeMirror-cursor {
  display: none !important;
}

/* Style for pyodide disabled overlay */
.pyodide-disabled-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.1) !important;
  z-index: 5 !important;
  cursor: not-allowed !important;
}

/* Disabled solution button styling */
.btn-solution-locked {
  opacity: 0.6;
  cursor: not-allowed;
  position: relative;
}

.btn-solution-locked:hover {
  opacity: 0.6;
}

.btn-solution-locked:focus {
  opacity: 0.6;
  box-shadow: none;
}

/* Countdown styling removed - using normal button font */

/* Solution locked notification banner */
.solution-locked-notice {
  background: linear-gradient(135deg, #fff3cd, #ffeaa7);
  border: 1px solid #ffc107;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 16px 0;
  text-align: center;
  font-weight: 500;
  color: #856404;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
}

.solution-locked-notice .countdown-display {
  font-size: 1.1em;
  margin-top: 12px;
  font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
  color: #495057;
  font-weight: 600;
}

/* Dark mode support for notification banner */
@media (prefers-color-scheme: dark) {
  .solution-locked-notice {
    background: linear-gradient(135deg, #3d3d29, #4a4a2a);
    border: 1px solid #6c7b2f;
    color: #f8f9fa;
  }
  
  .solution-locked-notice .countdown-display {
    color: #e9ecef;
  }
}

/* Solution unlock notification */
.solution-unlock-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1050;
  max-width: 350px;
  animation: slideInRight 0.5s ease-out;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .solution-locked-notice {
    margin: 12px 0;
    padding: 12px 16px;
    font-size: 0.9em;
  }
  
  .solution-locked-notice .countdown-display {
    font-size: 1em;
    margin-top: 8px;
  }
  
  .solution-blurred::after {
    font-size: 0.8em;
    padding: 10px 16px;
    max-width: 240px;
  }
  
  .solution-unlock-notification {
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
    max-width: none;
  }
}

/* Ensure proper stacking context */
.solution-blurred .callout-collapse {
  position: relative;
  z-index: 1;
}

.solution-blurred::after {
  z-index: 2;
}

/* Additional security: prevent text selection in blurred content */
.solution-blurred .callout-body * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

/* Prevent context menu on blurred content */
.solution-blurred .callout-body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide any remaining copy-related elements */
.solution-blurred .code-tools,
.solution-blurred .code-annotation-gutter,
.solution-blurred .sourceCode .copy-to-clipboard-button {
  display: none !important;
}

/* Fun message animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.fun-message {
  animation: shake 0.5s ease-in-out;
}