/* EnvisionHGDetector Tutorial Styles */

/* Callout customizations */
.callout-note.callout-installation {
    border-left-color: #2196F3;
    background-color: #E3F2FD;
}

.callout-note.callout-installation .callout-title {
    color: #1565C0;
}

/* Code blocks */
.sourceCode {
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

/* Tables */
table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}

th {
    background-color: #f5f5f5;
    font-weight: 600;
}

th, td {
    padding: 0.75em 1em;
    border: 1px solid #ddd;
    text-align: left;
}

tr:nth-child(even) {
    background-color: #fafafa;
}

/* Feature icons in tables */
td:first-child {
    font-weight: 500;
}

/* Panel tabset styling */
.panel-tabset .nav-link {
    color: #555;
    border-radius: 4px 4px 0 0;
}

.panel-tabset .nav-link.active {
    color: #1976D2;
    border-bottom: 2px solid #1976D2;
}

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

/* Image captions */
figcaption {
    font-style: italic;
    color: #666;
    text-align: center;
    margin-top: 0.5em;
}

/* TOC styling */
#TOC {
    border-left: 3px solid #1976D2;
    padding-left: 1em;
}

#TOC a {
    color: #333;
    text-decoration: none;
}

#TOC a:hover {
    color: #1976D2;
}

/* Section headers */
h1 {
    border-bottom: 2px solid #1976D2;
    padding-bottom: 0.3em;
}

h2 {
    color: #1565C0;
}

/* Tip callout - green accent */
.callout-tip {
    border-left-color: #4CAF50;
}

/* Warning callout - orange accent */
.callout-warning {
    border-left-color: #FF9800;
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
}

/* Layout for side-by-side images */
.quarto-layout-panel {
    display: flex;
    justify-content: center;
    gap: 1em;
    flex-wrap: wrap;
}

/* Code fold button styling */
.code-fold-btn {
    font-size: 0.85em;
    padding: 0.25em 0.5em;
}

/* Pipeline stage colors match the mermaid diagram */
.stage-tracking { background-color: #fff3e0; }
.stage-detection { background-color: #f3e5f5; }
.stage-analysis { background-color: #e8f5e9; }
.stage-viz { background-color: #fce4ec; }