/* Custom CSS for Smart Transcription Documentation */

:root {
  --md-primary-fg-color: #2563eb;
  --md-accent-fg-color: #06b6d4;
}

/* Custom code block styling */
.highlight .hll {
  background-color: #fef3c7;
}

/* Custom admonition colors */
.md-typeset .admonition.note {
  border-left-color: #2563eb;
}

.md-typeset .admonition.tip {
  border-left-color: #10b981;
}

.md-typeset .admonition.warning {
  border-left-color: #f59e0b;
}

.md-typeset .admonition.danger {
  border-left-color: #ef4444;
}

/* Mermaid diagram styling */
.mermaid {
  text-align: center;
  margin: 2em 0;
}

/* Mermaid subgraph/cluster styling - lighter backgrounds for better title visibility */
.mermaid .cluster rect {
  fill: #f0f9ff !important; /* Light blue background */
  stroke: #0284c7 !important;
  stroke-width: 2px !important;
  opacity: 0.9 !important;
}

.mermaid .cluster text,
.mermaid .cluster .label {
  fill: #000 !important; /* Black text for titles */
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* Alternative colors for different clusters (if needed with classes) */
.mermaid .cluster.storage rect {
  fill: #f3f4f6 !important; /* Light gray for storage */
  stroke: #6b7280 !important;
}

.mermaid .cluster.gpu rect {
  fill: #ffedd5 !important; /* Light orange for GPU */
  stroke: #f97316 !important;
}

.mermaid .cluster.frontend rect {
  fill: #e0f2fe !important; /* Very light blue for frontend */
  stroke: #0284c7 !important;
}

/* Custom table styling */
.md-typeset table:not([class]) {
  font-size: 0.9em;
  border-collapse: collapse;
}

.md-typeset table:not([class]) th {
  background-color: var(--md-primary-fg-color);
  color: white;
  font-weight: 600;
}

/* Code block header */
.md-typeset pre > code {
  scrollbar-width: thin;
}

/* Custom badge styling */
.badge {
  display: inline-block;
  padding: 0.25em 0.5em;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}

.badge-success {
  background-color: #10b981;
}

.badge-warning {
  background-color: #f59e0b;
}

.badge-danger {
  background-color: #ef4444;
}

.badge-info {
  background-color: #06b6d4;
}

/* Custom navigation footer */
.md-footer__link {
  padding: 1rem;
}

/* Responsive improvements */
@media screen and (max-width: 76.1875em) {
  .md-nav--primary .md-nav__title {
    background-color: var(--md-primary-fg-color);
  }
}