/* Connection and stack styles */

/* SVG connection styles */
.connection-line {
    fill: none;
    stroke-width: 1.2;
    transition: stroke-width 0.2s, opacity 0.2s;
    opacity: 0.35;
}

/* Connection line type styles generated dynamically from infraData.connectionTypes */
.connection-line.highlighted { stroke-width: 1.8; opacity: 0.55; }
.connection-line.dimmed { opacity: 0.12; }

/* Connection labels */
.connection-label-bg {
    fill: white;
    fill-opacity: 0.7;
    stroke: #ddd;
    stroke-width: 1;
}

.connection-label-group {
    opacity: 0.8;
    cursor: pointer;
    pointer-events: auto;
}

.connection-label-group:hover { opacity: 1; }
.connection-label-group:hover .connection-label-bg { fill: #f5f5f5; }

.connection-label-text {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 9px;
    fill: #333;
}

/* Connection label text colors generated dynamically from infraData.connectionTypes */

/* ===== Stack Expanded View ===== */

.detail-item.stack-item { display: flex; align-items: center; }
.detail-item.stack-item.expanded { display: block; }

.detail-item.stack-item .stack-item-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
}

.detail-item.stack-item .stack-content { display: none; }

.detail-item.stack-item.expanded .stack-content {
    display: block;
    padding: 8px 4px 4px 4px;
    position: relative;
}

.detail-item.stack-item.expanded .stack-item-header {
    color: #333;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}

.detail-item.stack-item .stack-item-header .detail-icon.stack {
    width: 16px;
    height: 16px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background: #0db7ed;
    color: white;
}

.stack-tier {
    position: relative;
    z-index: 2;
    margin-bottom: 12px;
    min-height: 32px;
}

.stack-tier:last-child { margin-bottom: 0; }

.stack-tier .tier-containers {
    margin-left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* SVG overlay for container connections */
.container-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

.container-connection {
    fill: none;
    stroke: #bbb;
    stroke-width: 1;
    /* stroke color/pattern applied inline per container by applyContainerStyles() */
}

.container-arrow-path { fill: #bbb; }

.container-connection.highlighted { stroke-width: 2; }
.container-connection.outgoing-arrow { stroke: #2196f3 !important; stroke-dasharray: none !important; }
.container-connection.incoming-arrow { stroke: #ff9800 !important; stroke-dasharray: none !important; }

/* Container connection labels */
.container-connection-label { pointer-events: none; }
.container-connection-label text { font-size: 8px; fill: #666; }
.container-connection-label.highlighted text { font-size: 9px; font-weight: 500; }
.container-connection-label.highlighted.outgoing text { fill: #1976d2; }
.container-connection-label.highlighted.incoming text { fill: #f57c00; }

/* Container boxes within a tier */
.tier-containers {
    position: relative;
    min-height: 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 12px;
}

.container-box {
    position: relative;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    /* background applied by applyContainerStyles() */
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    box-sizing: border-box;
    flex-shrink: 0;
    height: auto;
}

.container-box:hover { border-color: #999; }
.container-box.selected { border-color: #673ab7; border-width: 2px; }
.container-box.dependency { border-color: #2196f3; }
.container-box.dependent { border-color: #ff9800; }

.container-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    background: #0db7ed;
    color: white;
    border-radius: 2px;
    font-size: 8px;
    font-weight: 600;
}

.container-name { color: #333; white-space: nowrap; }

/* Dispatch lines for external-to-container connections */
.dispatch-connection {
    fill: none;
    stroke: #bbb;
    stroke-width: 1;
    /* stroke color/pattern applied inline per container by applyContainerStyles() */
}

.dispatch-connection.highlighted { stroke: #ff9800 !important; stroke-width: 1.5; stroke-dasharray: none !important; }
.dispatch-connection.incoming-dispatch { stroke: #ff9800 !important; stroke-dasharray: none !important; }
.dispatch-connection.dispatch-outgoing { stroke-width: 1; }
.dispatch-connection.dispatch-outgoing.highlighted { stroke: #2196f3 !important; stroke-width: 1.5; stroke-dasharray: none !important; }
.dispatch-connection.dispatch-outgoing.outgoing-dispatch { stroke: #2196f3 !important; stroke-dasharray: none !important; }