/* Additional custom styles for phpSPA documentation */

/* Code block improvements */
.md-typeset .highlight .language-php::before {
   content: "PHP";
   position: absolute;
   top: 0.5rem;
   right: 0.5rem;
   background: #777bb4;
   color: white;
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
   font-size: 0.7rem;
   font-weight: 500;
   text-transform: uppercase;
}

.md-typeset .highlight .language-javascript::before {
   content: "JS";
   position: absolute;
   top: 0.5rem;
   right: 0.5rem;
   background: #f7df1e;
   color: black;
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
   font-size: 0.7rem;
   font-weight: 500;
   text-transform: uppercase;
}

.md-typeset .highlight .language-html::before {
   content: "HTML";
   position: absolute;
   top: 0.5rem;
   right: 0.5rem;
   background: #e34f26;
   color: white;
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
   font-size: 0.7rem;
   font-weight: 500;
   text-transform: uppercase;
}

.md-typeset .highlight {
   position: relative;
}

/* Version badge */
.version-badge {
   display: inline-block;
   background: var(--md-primary-fg-color);
   color: white;
   padding: 0.25rem 0.75rem;
   border-radius: 1rem;
   font-size: 0.8rem;
   font-weight: 500;
   margin-left: 0.5rem;
}

/* Status indicators */
.status-new {
   background: #4caf50;
   color: white;
   padding: 0.2rem 0.5rem;
   border-radius: 0.25rem;
   font-size: 0.7rem;
   font-weight: 500;
   text-transform: uppercase;
   margin-left: 0.5rem;
}

.status-updated {
   background: #ff9800;
   color: white;
   padding: 0.2rem 0.5rem;
   border-radius: 0.25rem;
   font-size: 0.7rem;
   font-weight: 500;
   text-transform: uppercase;
   margin-left: 0.5rem;
}

.status-deprecated {
   background: #f44336;
   color: white;
   padding: 0.2rem 0.5rem;
   border-radius: 0.25rem;
   font-size: 0.7rem;
   font-weight: 500;
   text-transform: uppercase;
   margin-left: 0.5rem;
}

/* Performance indicators */
.perf-indicator {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem 1rem;
   background: var(--md-default-bg-color);
   border: 1px solid var(--md-default-fg-color--lightest);
   border-radius: 0.5rem;
   margin: 0.5rem;
   font-size: 0.9rem;
}

.perf-indicator.fast {
   border-color: #4caf50;
   color: #4caf50;
}

.perf-indicator.medium {
   border-color: #ff9800;
   color: #ff9800;
}

.perf-indicator.slow {
   border-color: #f44336;
   color: #f44336;
}

/* Component preview */
.component-preview {
   border: 1px solid var(--md-default-fg-color--lightest);
   border-radius: 0.5rem;
   overflow: hidden;
   margin: 1rem 0;
}

.component-preview-header {
   background: var(--md-default-fg-color--lightest);
   padding: 0.5rem 1rem;
   font-weight: 500;
   border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.component-preview-body {
   padding: 1rem;
}

/* API documentation styles */
.api-method {
   background: var(--md-code-bg-color);
   padding: 1rem;
   border-radius: 0.5rem;
   border-left: 4px solid var(--md-primary-fg-color);
   margin: 1rem 0;
}

.api-method-name {
   font-family: var(--md-code-font);
   font-weight: 600;
   color: var(--md-primary-fg-color);
}

.api-params {
   margin-top: 0.5rem;
}

.api-param {
   font-family: var(--md-code-font);
   background: var(--md-default-bg-color);
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
   margin: 0.25rem 0;
}

/* Glossary terms */
.glossary-term {
   background: var(--md-primary-fg-color--light);
   padding: 0.1rem 0.4rem;
   border-radius: 0.25rem;
   font-weight: 500;
   cursor: help;
}

/* Changelog styles */
.changelog-version {
   border-left: 4px solid var(--md-primary-fg-color);
   padding-left: 1rem;
   margin: 2rem 0;
}

.changelog-date {
   color: var(--md-default-fg-color--light);
   font-size: 0.9rem;
}

.changelog-added {
   color: #4caf50;
   font-weight: 500;
}

.changelog-changed {
   color: #ff9800;
   font-weight: 500;
}

.changelog-deprecated {
   color: #f44336;
   font-weight: 500;
}

.changelog-removed {
   color: #9e9e9e;
   font-weight: 500;
}

.changelog-fixed {
   color: #2196f3;
   font-weight: 500;
}

.changelog-security {
   color: #9c27b0;
   font-weight: 500;
}

/* Tutorial step indicators */
.tutorial-step {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 1rem;
   background: var(--md-default-bg-color);
   border: 1px solid var(--md-default-fg-color--lightest);
   border-radius: 0.5rem;
   margin: 1rem 0;
}

.tutorial-step-number {
   background: var(--md-primary-fg-color);
   color: white;
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
   flex-shrink: 0;
}

.tutorial-step-content {
   flex: 1;
}

/* Progress indicators */
.progress-bar {
   width: 100%;
   height: 0.5rem;
   background: var(--md-default-fg-color--lightest);
   border-radius: 0.25rem;
   overflow: hidden;
   margin: 1rem 0;
}

.progress-fill {
   height: 100%;
   background: linear-gradient(
      90deg,
      var(--md-primary-fg-color),
      var(--md-accent-fg-color)
   );
   transition: width 0.3s ease;
}

/* Dark mode specific adjustments */
[data-md-color-scheme="slate"] .hero-section {
   background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
}

[data-md-color-scheme="slate"] .creator-section {
   background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
}

[data-md-color-scheme="slate"] .grid.cards > * {
   background: var(--md-default-bg-color);
   border-color: var(--md-default-fg-color--lighter);
}

/* Print styles */
@media print {
   .hero-section,
   .creator-section,
   .cta-section {
      background: none !important;
      color: black !important;
      border: 1px solid black;
   }

   .grid.cards {
      display: block;
   }

   .grid.cards > * {
      margin-bottom: 1rem;
      break-inside: avoid;
   }
}
