/* ==========================================
   SVG DIAGRAMS
   ========================================== */

.diagram-container {
    position: relative;
    width: 100%;
    padding: 32px;
    background: var(--color-bg-tertiary);
    border: var(--border-subtle);
    overflow: hidden;
}

.diagram-container svg {
    width: 100%;
    height: auto;
    display: block;
}

.diagram-label {
    font-family: var(--font-heading);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: var(--letter-spacing-brand);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 16px;
    padding: 4px 12px;
    border-left: 2px solid var(--color-green);
}

/* Diagram inner elements */
.diagram-box {
    fill: var(--color-surface);
    stroke: var(--color-border-light);
    stroke-width: 1;
    transition: all var(--transition-base);
}

.diagram-box:hover {
    stroke: var(--color-green);
    fill: var(--color-surface-hover);
}

.diagram-line {
    stroke: var(--color-border);
    stroke-width: 1.5;
    fill: none;
}

.diagram-arrow {
    stroke: var(--color-green);
    stroke-width: 1.5;
    fill: none;
}

.diagram-text {
    font-family: var(--font-body);
    font-size: 9px;
    fill: var(--color-text-secondary);
    font-weight: 300;
}

.diagram-title-text {
    font-family: var(--font-heading);
    font-size: 10px;
    fill: var(--color-text-primary);
    font-weight: 500;
    letter-spacing: 0.1em;
}

.diagram-small-text {
    font-family: var(--font-body);
    font-size: 7px;
    fill: var(--color-text-muted);
}

.diagram-node {
    fill: var(--color-surface);
    stroke: var(--color-border);
    stroke-width: 1.5;
    transition: all var(--transition-base);
}

.diagram-node:hover {
    stroke: var(--color-green-light);
    fill: var(--color-surface-hover);
}

.diagram-node-active {
    stroke: var(--color-green);
    fill: rgba(78, 141, 98, 0.08);
}

.diagram-node-completed {
    stroke: var(--color-green);
    fill: rgba(78, 141, 98, 0.15);
}

/* === SERVICE DIAGRAM VARIATIONS === */

/* Shield diagram */
.diagram-shield {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 1.5;
}

.diagram-shield-inner {
    fill: rgba(78, 141, 98, 0.05);
    stroke: var(--color-green);
    stroke-width: 1;
}

/* Cloud shape */
.diagram-cloud {
    fill: rgba(78, 141, 98, 0.04);
    stroke: var(--color-border-light);
    stroke-width: 1.5;
}

/* Server rack */
.diagram-server {
    fill: var(--color-surface);
    stroke: var(--color-border-light);
    stroke-width: 1;
}

.diagram-server-rack {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 1.5;
}

/* Flow arrows */
.diagram-flow-arrow {
    fill: none;
    stroke: var(--color-green);
    stroke-width: 1.5;
    marker-end: url(#arrowhead);
}

/* === RESPONSIVE DIAGRAMS === */
@media (max-width: 768px) {
    .diagram-container {
        padding: 16px;
        overflow-x: auto;
    }

    .diagram-container svg {
        min-width: 500px;
    }
}