/* Dynamic styles extracted from JavaScript inline styles for CSP compliance */

/* Slide animations from script.js */
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

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

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

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

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ripple animation from script.js */
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Image placeholder styles from image-manager.js */
.image-placeholder {
  display: inline-block;
  position: relative;
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  border: 2px dashed #2196f3;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 4px;
  font-size: 0.9rem;
  color: #1976d2;
  cursor: pointer;
  transition: all 0.2s ease;
  max-width: 300px;
}

.image-placeholder:hover {
  background: linear-gradient(135deg, #bbdefb, #90caf9);
  border-color: #1976d2;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.image-placeholder::before {
  content: '🖼️';
  margin-right: 6px;
  font-size: 1.1em;
}

.image-placeholder .image-info {
  display: block;
  font-size: 0.75rem;
  color: #666;
  margin-top: 2px;
}

.image-placeholder .image-actions {
  display: none;
  position: absolute;
  top: -8px;
  right: -8px;
  background: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  border: 1px solid #ddd;
  font-size: 0.8rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.image-placeholder:hover .image-actions {
  display: flex;
}

.image-placeholder.image-error {
  background: linear-gradient(135deg, #ffebee, #ffcdd2);
  border-color: #f44336;
  color: #d32f2f;
}

/* Dark mode support for image placeholders */
body.dark-mode .image-placeholder {
  background: linear-gradient(135deg, #1a237e, #303f9f);
  border-color: #3f51b5;
  color: #e8eaf6;
}

body.dark-mode .image-placeholder:hover {
  background: linear-gradient(135deg, #303f9f, #3f51b5);
}

body.dark-mode .image-placeholder .image-info {
  color: #ccc;
}

/* Image styles for preview from script.js */
.preview .markdown-image {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin: 10px 0;
  display: block;
  clear: both;
  margin: 20px 0;
}

.preview img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin: 10px 0;
}

.preview img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.preview img.right {
  float: right;
  margin-left: 20px;
  margin-bottom: 10px;
}

.preview img.left {
  float: left;
  margin-right: 20px;
  margin-bottom: 10px;
}

.preview img.float-left {
  float: left;
  margin: 0 20px 10px 0;
}

.preview img.float-right {
  float: right;
  margin: 0 0 10px 20px;
}

.preview .image-container {
  clear: both;
  margin: 20px 0;
}

.preview .image-caption {
  font-style: italic;
  text-align: center;
  color: #666;
  font-size: 0.9em;
  margin-top: 5px;
}

/* Navbar animations from navbar.js */
.navbar-menu.active {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-menu.mobile-active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hamburger-line {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-btn, .dropdown-toggle, .footer-btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-btn:hover, .dropdown-toggle:hover, .footer-btn:hover {
  transform: translateY(-1px);
}

.navbar-btn:active, .dropdown-toggle:active, .footer-btn:active {
  transform: translateY(0);
}

/* Search Modal styles from search-replace.js */
.search-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-modal-content {
  background: white;
  border-radius: 12px;
  padding: 0;
  min-width: 500px;
  max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease;
}

.search-modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 12px 12px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.search-modal-header h3 {
  margin: 0;
  color: white;
}

.search-inputs {
  padding: 1.5rem;
}

.search-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: white;
  padding: 0.5rem;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.search-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.search-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
}

.search-row label {
  min-width: 60px;
  font-weight: bold;
}

.search-row input[type="text"] {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.search-row button {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  transition: background 0.2s;
}

.search-row button:hover {
  background: #f5f5f5;
}

.search-options {
  display: flex;
  gap: 15px;
  margin: 15px 0;
}

.search-options label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}

.search-status {
  text-align: center;
  padding: 10px;
  color: #666;
  font-size: 14px;
}

/* Dark mode styles for search modal */
body.dark-mode .search-modal-content {
  background: #455a64;
  color: #eceff1;
}

body.dark-mode .search-modal-header {
  border-color: #546e7a;
}

body.dark-mode .search-modal-header h3 {
  color: #eceff1;
}

body.dark-mode .search-row input[type="text"] {
  background: #546e7a;
  color: #eceff1;
  border-color: #708090;
}

body.dark-mode .search-row button {
  background: #546e7a;
  color: #eceff1;
  border-color: #708090;
}

body.dark-mode .search-row button:hover {
  background: #37474f;
}

/* Enhanced Print styles for clean PDF/print output */
@media print {
  /* Enhanced CSS-only print approach that captures ALL content */
  
  /* Step 1: Hide all page elements by default */
  body * {
    visibility: hidden !important;
  }
  
  /* Step 2: Make preview content and its children visible */
  #preview-pane,
  #preview-pane *,
  .print-document-header,
  .print-document-header * {
    visibility: visible !important;
  }
  
  /* Step 3: Ensure the preview pane takes full page and shows all content */
  #preview-pane {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 100vh !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    padding: 0.5in !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: white !important;
    color: black !important;
    font-family: 'Times New Roman', serif !important;
    font-size: 12pt !important;
    line-height: 1.6 !important;
    page-break-inside: auto !important;
  }
  
  /* Step 4: Remove all size constraints from preview content */
  .preview,
  #preview-pane .preview,
  #preview-pane > div {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: white !important;
    color: black !important;
    font-family: 'Times New Roman', serif !important;
    font-size: 12pt !important;
    line-height: 1.6 !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    width: 100% !important;
    max-width: none !important;
  }
  
  /* Step 5: Ensure ALL nested elements expand properly */
  .preview *,
  #preview-pane * {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    page-break-inside: auto !important;
    max-width: none !important;
    width: auto !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }
  
  /* Step 6: Specific element styling for better print output */
  .preview h1,
  .preview h2,
  .preview h3,
  .preview h4,
  .preview h5,
  .preview h6 {
    margin: 12pt 0 8pt 0 !important;
    page-break-after: avoid !important;
    color: black !important;
  }
  
  .preview h1 { font-size: 16pt !important; }
  .preview h2 { font-size: 14pt !important; }
  .preview h3 { font-size: 12pt !important; }
  
  .preview p {
    margin: 6pt 0 !important;
    color: black !important;
  }
  
  .preview ul,
  .preview ol {
    margin: 6pt 0 6pt 16pt !important;
  }
  
  .preview li {
    margin: 2pt 0 !important;
  }
  
  .preview pre,
  .preview code {
    page-break-inside: avoid !important;
    background: #f8f8f8 !important;
    border: 1px solid #ddd !important;
    padding: 6pt !important;
    margin: 6pt 0 !important;
    font-size: 10pt !important;
    color: black !important;
  }
  
  .preview table {
    page-break-inside: auto !important;
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 8pt 0 !important;
  }
  
  .preview th,
  .preview td {
    border: 1px solid #333 !important;
    padding: 4pt !important;
    font-size: 10pt !important;
    color: black !important;
  }
  
  .preview th {
    background: #f5f5f5 !important;
    font-weight: bold !important;
  }
  
  .preview blockquote {
    margin: 8pt 16pt !important;
    padding: 6pt 12pt !important;
    border-left: 3pt solid #666 !important;
    background: #f9f9f9 !important;
    font-style: italic !important;
    color: black !important;
  }
  
  .preview a {
    color: #0066cc !important;
    text-decoration: underline !important;
  }
  
  .preview img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid !important;
  }
  
  /* Step 7: Print document header styling */
  .print-document-header {
    margin-bottom: 16pt !important;
    padding-bottom: 8pt !important;
    border-bottom: 1pt solid #333 !important;
    text-align: center !important;
  }
  
  .print-document-title {
    font-size: 16pt !important;
    font-weight: bold !important;
    color: black !important;
    margin-bottom: 4pt !important;
  }
  
  .print-document-meta {
    font-size: 10pt !important;
    color: #666 !important;
  }
}

/* Enhanced print styles when body has 'printing' class for regular print */
body.printing #preview-pane {
  /* Force complete content expansion */
  min-height: 100vh !important;
}

/* Enhanced print styles when body has 'pdf-export' class */
body.pdf-export #preview-pane {
  /* Optimize for PDF export */
  padding: 0.75in !important;
}
  
  /* Force visibility for all preview content */
  .preview h1, .preview h2, .preview h3, .preview h4, .preview h5, .preview h6,
  .preview p, .preview div, .preview span, .preview ul, .preview ol, .preview li,
  .preview table, .preview tr, .preview td, .preview th, .preview thead, .preview tbody,
  .preview pre, .preview code, .preview blockquote, .preview img {
    visibility: visible !important;
    display: block !important;
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  /* Special handling for inline elements */
  .preview span, .preview code, .preview a, .preview strong, .preview em {
    display: inline !important;
  }
  
  /* Page setup and numbering */
  @page {
    margin: 1in;
    counter-increment: page;
    
    @bottom-center {
      content: "Page " counter(page);
      font-size: 10pt;
      color: #666;
      font-family: 'Times New Roman', serif;
    }
  }
  
  /* Improved typography */
  .preview h1 {
    font-size: 18pt !important;
    font-weight: bold !important;
    margin: 0.5em 0 !important;
    color: #000 !important;
  }
  
  .preview h2 {
    font-size: 16pt !important;
    font-weight: bold !important;
    margin: 0.4em 0 !important;
    color: #000 !important;
  }
  
  .preview h3 {
    font-size: 14pt !important;
    font-weight: bold !important;
    margin: 0.3em 0 !important;
    color: #000 !important;
  }
  
  .preview p {
    margin: 0.2em 0 !important;
    text-align: left !important;
  }
  
  /* Improved table styling */
  .preview table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0.5em 0 !important;
  }
  
  .preview th, .preview td {
    border: 1px solid #000 !important;
    padding: 4pt !important;
    text-align: left !important;
  }
  
  /* Code block improvements */
  .preview pre {
    background: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    padding: 8pt !important;
    margin: 0.5em 0 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 10pt !important;
    overflow: visible !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
  }
  
  .preview code {
    font-family: 'Courier New', monospace !important;
    font-size: 10pt !important;
    background: #f5f5f5 !important;
    padding: 1pt 2pt !important;
  }
  
  /* Ensure proper page breaks */
  .preview h1, .preview h2, .preview h3 {
    page-break-after: avoid !important;
    break-after: avoid !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  
  .preview table, .preview pre, .preview blockquote {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  
  .preview img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  
  /* Print document header styling */
  .print-document-header {
    margin-bottom: 1.5em !important;
    padding-bottom: 0.5em !important;
    border-bottom: 2px solid #333 !important;
    text-align: center !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
  }
  
  .print-document-title {
    font-size: 18pt !important;
    font-weight: bold !important;
    color: #333 !important;
    margin-bottom: 0.5em !important;
  }
  
  .print-document-meta {
    font-size: 10pt !important;
    color: #666 !important;
    font-style: italic !important;
  }
  
  /* Hide interactive elements and copy buttons */
  .preview button,
  .preview .copy-btn,
  .preview .interactive-element,
  .copy-btn {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Ensure proper spacing and prevent empty pages */
  .preview > * {
    margin-top: 0 !important;
  }
  
  .preview > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Remove any transforms or positioning that might cause issues */
  .preview * {
    transform: none !important;
    position: static !important;
  }
}

/* Highlight.js fallback styles from highlight-fallback.js */
.hljs {
  background: #f8f8f8;
  padding: 0.5em;
  border-radius: 4px;
  color: #333;
  display: block;
  overflow-x: auto;
}

.hljs-keyword { color: #0000ff; font-weight: bold; }
.hljs-string { color: #008000; }
.hljs-comment { color: #008000; font-style: italic; }
.hljs-number { color: #0451a5; }
.hljs-built_in { color: #0451a5; font-weight: bold; }
.hljs-attribute { color: #ff0000; }
.hljs-punctuation { color: #666; }
.hljs-selector-class { color: #800080; }
.hljs-name { color: #800080; }
.hljs-attr { color: #ff0000; }
.hljs-literal { color: #0451a5; }
.hljs-variable { color: #e90; }
.hljs-section { color: #0000ff; font-weight: bold; }
.hljs-strong { font-weight: bold; }
.hljs-emphasis { font-style: italic; }
.hljs-code { background: #f0f0f0; padding: 0.1em 0.3em; border-radius: 2px; }
.hljs-link { color: #0969da; }
.hljs-bullet { color: #666; }
.hljs-quote { color: #666; font-style: italic; }

/* Dark theme support for syntax highlighting */
.dark-mode .hljs {
  background: #2d2d2d;
  color: #f8f8f2;
}

.dark-mode .hljs-keyword { color: #66d9ef; }
.dark-mode .hljs-string { color: #a6e22e; }
.dark-mode .hljs-comment { color: #75715e; }
.dark-mode .hljs-number { color: #ae81ff; }
.dark-mode .hljs-built_in { color: #66d9ef; }
.dark-mode .hljs-attribute { color: #f92672; }
.dark-mode .hljs-punctuation { color: #f8f8f2; }
.dark-mode .hljs-selector-class { color: #a6e22e; }
.dark-mode .hljs-name { color: #f92672; }
.dark-mode .hljs-attr { color: #a6e22e; }
.dark-mode .hljs-literal { color: #ae81ff; }
.dark-mode .hljs-variable { color: #fd971f; }
.dark-mode .hljs-section { color: #66d9ef; }
.dark-mode .hljs-code { background: #3a3a3a; }
.dark-mode .hljs-link { color: #66d9ef; }