/* ============================================================
   Microsoft Agentic Harness — Architecture Guide
   Supplemental styles for Azure topology diagrams and infra boxes
   ============================================================ */

/* ---------- Azure service colors ---------- */
:root {
    --azure-blue: #0078d4;
    --azure-blue-light: #e8f4fd;
    --azure-green: #107c10;
    --azure-green-light: #e8f5e8;
    --azure-purple: #8661c5;
    --azure-purple-light: #f3effa;
    --azure-orange: #d83b01;
    --azure-orange-light: #fde7e0;
    --azure-teal: #008272;
    --azure-teal-light: #e0f2f0;
    --azure-red: #e81123;
    --azure-red-light: #fde7e9;
    --azure-yellow: #ffb900;
    --azure-yellow-light: #fff8e0;
    --azure-gray: #505050;
    --azure-gray-light: #f0f0f0;
}

/* ---------- Topology diagram (CSS-based) ---------- */
.topology {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin: var(--space-6) 0;
    overflow-x: auto;
}

.topology-title {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-subtle);
    margin-bottom: var(--space-6);
    text-align: center;
}

.topology-row {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}

.topology-row:last-child {
    margin-bottom: 0;
}

.topology-connector {
    display: flex;
    justify-content: center;
    margin: var(--space-2) 0 var(--space-4);
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    user-select: none;
}

/* ---------- Azure resource boxes ---------- */
.az-box {
    border: 1px solid;
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    min-width: 180px;
    max-width: 260px;
    flex: 1;
    transition: box-shadow 0.15s ease;
}

.az-box:hover {
    box-shadow: var(--shadow-md);
}

.az-box-icon {
    font-size: 20px;
    margin-bottom: var(--space-2);
    display: block;
}

.az-box-name {
    font-weight: 600;
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
    line-height: 1.3;
}

.az-box-detail {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
}

.az-box-sku {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-text-subtle);
    margin-top: var(--space-2);
    display: block;
}

/* Azure box color variants */
.az-compute { background: var(--azure-blue-light); border-color: var(--azure-blue); }
.az-compute .az-box-name { color: var(--azure-blue); }

.az-ai { background: var(--azure-purple-light); border-color: var(--azure-purple); }
.az-ai .az-box-name { color: var(--azure-purple); }

.az-data { background: var(--azure-green-light); border-color: var(--azure-green); }
.az-data .az-box-name { color: var(--azure-green); }

.az-security { background: var(--azure-orange-light); border-color: var(--azure-orange); }
.az-security .az-box-name { color: var(--azure-orange); }

.az-network { background: var(--azure-teal-light); border-color: var(--azure-teal); }
.az-network .az-box-name { color: var(--azure-teal); }

.az-monitor { background: var(--azure-yellow-light); border-color: var(--azure-yellow); }
.az-monitor .az-box-name { color: #b38600; }

.az-storage { background: var(--azure-gray-light); border-color: var(--azure-gray); }
.az-storage .az-box-name { color: var(--azure-gray); }

/* ---------- Resource group wrapper ---------- */
.rg-group {
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin: var(--space-6) 0;
    position: relative;
}

.rg-label {
    position: absolute;
    top: -12px;
    left: var(--space-5);
    background: var(--color-bg);
    padding: 0 var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-subtle);
    font-family: var(--font-mono);
}

/* ---------- Data flow arrows ---------- */
.flow-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-5) 0;
}

.flow-arrow {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    color: var(--color-text-subtle);
    white-space: nowrap;
    text-align: center;
}

.flow-label {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    text-align: center;
    font-family: var(--font-mono);
    display: block;
}

/* ---------- Tier comparison ---------- */
.tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-5);
    margin: var(--space-6) 0;
}

.tier-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.tier-header {
    padding: var(--space-4) var(--space-5);
    font-weight: 600;
    font-size: var(--text-base);
    border-bottom: 1px solid var(--color-border);
}

.tier-header-dev { background: var(--azure-green-light); color: var(--azure-green); }
.tier-header-staging { background: var(--azure-blue-light); color: var(--azure-blue); }
.tier-header-prod { background: var(--azure-purple-light); color: var(--azure-purple); }

.tier-body {
    padding: var(--space-4) var(--space-5);
}

.tier-body ul {
    margin: 0;
    padding-left: var(--space-5);
}

.tier-body li {
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
}

.tier-price {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    padding: var(--space-3) var(--space-5);
    background: var(--color-bg-subtle);
    border-top: 1px solid var(--color-border);
}

/* ---------- Bicep code blocks ---------- */
.code-block-header .code-block-lang-bicep {
    color: var(--azure-blue);
}

/* ---------- Config mapping table ---------- */
.config-map {
    width: 100%;
    margin: var(--space-5) 0;
}

.config-map th {
    background: var(--azure-blue-light);
    color: var(--azure-blue);
}

/* ---------- Pipeline stage visualization ---------- */
.pipeline {
    display: flex;
    gap: 0;
    margin: var(--space-6) 0;
    overflow-x: auto;
    padding-bottom: var(--space-2);
}

.pipeline-stage {
    flex: 1;
    min-width: 140px;
    padding: var(--space-4);
    text-align: center;
    position: relative;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
}

.pipeline-stage:first-child {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.pipeline-stage:last-child {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.pipeline-stage:not(:last-child)::after {
    content: '→';
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-mono);
    font-size: 16px;
    color: var(--color-accent);
    z-index: 1;
    background: var(--color-bg);
    width: 20px;
    text-align: center;
}

.pipeline-stage-name {
    font-weight: 600;
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
}

.pipeline-stage-service {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--color-text-muted);
}

/* ---------- Responsive overrides ---------- */
@media (max-width: 768px) {
    .topology-row {
        flex-direction: column;
        align-items: center;
    }

    .az-box {
        max-width: 100%;
        width: 100%;
    }

    .flow-row {
        grid-template-columns: 1fr;
    }

    .pipeline {
        flex-direction: column;
    }

    .pipeline-stage {
        border-radius: 0;
    }

    .pipeline-stage:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    .pipeline-stage:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

    .pipeline-stage:not(:last-child)::after {
        content: '↓';
        right: 50%;
        top: auto;
        bottom: -12px;
        transform: translateX(50%);
    }
}