/* Region and node styles */

/* Regions */
.region {
    position: absolute;
    min-width: 200px;
    border: 3px solid;
    border-radius: 12px;
    padding: 16px;
    z-index: 2;
    transition: box-shadow 0.2s;
}

.region:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.15); }

/* Provider colors */
.region[data-provider="iv"] {
    border-color: #2e7d32;
    background: linear-gradient(135deg, #e8f5e9 0%, #ffffff 100%);
}

.region[data-provider="hetzner_cloud"] {
    border-color: #1565c0;
    background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
}

.region-header {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.region-provider {
    font-size: 11px;
    color: #666;
}

/* Nodes */
.nodes-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

/* Left column: right-align all content */
.region[data-column="left"] .nodes-container {
    align-items: flex-end;
}

.region[data-column="left"] .nested-regions-container {
    align-items: flex-end;
}

.region[data-column="left"] .region.subregion .nodes-container {
    align-items: flex-end;
}

.node {
    position: relative;
    background: white;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 10px 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: fit-content;
    min-width: 180px;
    min-height: auto;
    overflow: visible;
}

.node.expanded-for-arrows { min-height: var(--arrow-height, auto); }
.node.selected { border-color: #1a237e; box-shadow: 0 0 0 4px rgba(26, 35, 126, 0.4); }

.node-info {
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
}

.node-info:hover {
    background: #f0f0f0;
}
.node.connected { border-color: #ff9800; box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.25); }

.node-name {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
    color: #1a237e;
}

.node-purpose {
    font-size: 11px;
    color: #666;
}

.node-tags {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.tag {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 10px;
    background: #e0e0e0;
}

.tag.production { background: #c8e6c9; color: #2e7d32; }
.tag.rgs { background: #bbdefb; color: #1565c0; }
.tag.database { background: #fff9c4; color: #f57f17; }
.tag.backup { background: #ffecb3; color: #ff8f00; }
.tag.support { background: #e1bee7; color: #7b1fa2; }
.tag.monitoring { background: #ffcdd2; color: #c62828; }
.tag.ci-cd { background: #e1bee7; color: #7b1fa2; }
.tag.staging { background: #b3e5fc; color: #0277bd; }
.tag.office { background: #c8e6c9; color: #2e7d32; }
.tag.vpn { background: #c8e6c9; color: #2e7d32; }
.tag.logging { background: #ffcdd2; color: #c62828; }
.tag.config-mgmt { background: #e1bee7; color: #7b1fa2; }
.tag.cdn { background: #b2ebf2; color: #00838f; }

.node-info.connection-target {
    border: 2px solid #ff9800;
    border-radius: 4px;
    padding: 4px;
    margin: -4px;
}

.node-info.connection-source {
    border: 2px solid #2196f3;
    border-radius: 4px;
    padding: 4px;
    margin: -4px;
}

/* Node expanded content (flex container for details + legend) */
.node-expanded-content {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #ddd;
}

.node.expanded .node-expanded-content {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: flex-start;
}

/* Node details (expanded view) */
.node-details {
    flex: 1;
    min-width: 0;
}

.detail-section { margin-bottom: 8px; }
.detail-section:last-child { margin-bottom: 0; }

.detail-section-title {
    font-size: 9px;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}

.detail-item {
    font-size: 11px;
    padding: 4px 6px;
    margin: 2px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #555;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: border-color 0.2s, background 0.2s;
    min-height: 24px;
}

.detail-item.connection-target { border-color: #ff9800; }
.detail-item.connection-source { border-color: #2196f3; }

.detail-icon {
    font-size: 10px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e0e0e0;
    border-radius: 3px;
    font-weight: 600;
}

.detail-icon.docker { background: #0db7ed; color: white; }
.detail-icon.service { background: #9c27b0; color: white; }
.detail-icon.stack { background: #0db7ed; color: white; }

/* Nested regions (subregions) */
.region.subregion {
    position: relative;
    width: fit-content;
    margin-top: 10px;
    border-style: dashed;
    border-width: 2px;
}

.nested-regions-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.nested-regions-container:empty {
    display: none;
}

/* Hidden elements in layout */
.layout-hidden { display: none !important; }

/* Legend table styles */
.node-legend {
    display: none;
    border: 1px solid #6c8ebf;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.node.selected .node-legend {
    display: block;
}

.legend-table {
    border-collapse: collapse;
    font-size: 7px;
    background: white;
}

.legend-table th,
.legend-table td {
    border: 1px solid #ddd;
    padding: 4px 6px;
    text-align: left;
    vertical-align: top;
}

.legend-table th {
    background: #f5f5f5;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

.legend-table td {
    color: #555;
    line-height: 1.3;
}

/* Fixed column widths */
.legend-table th:nth-child(1),
.legend-table td:nth-child(1) { width: 80px; min-width: 80px; max-width: 80px; }
.legend-table th:nth-child(2),
.legend-table td:nth-child(2) { width: 170px; min-width: 170px; max-width: 170px; }
.legend-table th:nth-child(3),
.legend-table td:nth-child(3) { width: 180px; min-width: 180px; max-width: 180px; }
.legend-table th:nth-child(4),
.legend-table td:nth-child(4) { width: 220px; min-width: 220px; max-width: 220px; }

.legend-table tr:nth-child(even) td {
    background: #fafafa;
}

.legend-table tr:hover td {
    background: #f0f7ff;
}

/* Disable box-shadows during export to prevent rendering artifacts */
.exporting .node.selected,
.exporting .node.connected {
    box-shadow: none;
}