/* Agentic-OS-Übersicht (Dashboard-Route): Header, Sub-Tab-Leiste, Token-Banner,
   KPI-Grid, Content-Pipeline-Card. Layout-Shell aus Phase 1, siehe
   "Kommandozentrale planung/01-layout-und-design.md". */

.ao-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.ao-brand { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body); color: var(--color-text); }
.ao-brand .ao-sep { color: var(--color-text-faint); margin: 0 0.4rem; font-weight: 400; }
.ao-brand .ao-user { color: var(--color-text-muted); font-weight: 400; }
.ao-header-right { display: flex; align-items: center; gap: 1rem; }
.ao-live-badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: var(--fs-tiny); letter-spacing: var(--tracking-wide); text-transform: uppercase;
    font-weight: 600; color: var(--color-error);
}
.ao-live-badge::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--color-error); box-shadow: 0 0 8px var(--color-error);
}
.ao-settings-btn { color: var(--color-text-faint); cursor: default; font-size: 1.05rem; }
.ao-settings-btn:hover { color: var(--color-text-muted); }

.ao-tabbar { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.ao-tab {
    padding: 0.5rem 0.9rem; border-radius: var(--radius-small);
    font-size: var(--fs-small); color: var(--color-text-muted);
    cursor: pointer; white-space: nowrap; transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.ao-tab:hover { color: var(--color-text); background: var(--color-surface); }
.ao-tab.active { background: var(--color-agentic-accent); color: #000; font-weight: 700; }
.ao-tabbar-spacer { flex: 1; }
.ao-search {
    padding: 0.45rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-small);
    background: rgba(255, 255, 255, 0.02); font-size: var(--fs-small); min-width: 160px;
}
.ao-search:disabled { color: var(--color-text-faint); cursor: not-allowed; }
.ao-fetch-status { font-size: var(--fs-tiny); color: var(--color-text-faint); white-space: nowrap; }

.ao-token-banner {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; margin-bottom: 1.25rem;
    border: 1px solid var(--color-border); border-radius: var(--radius-medium);
    background: var(--color-surface); font-size: var(--fs-small);
}
.ao-token-banner .ao-dot-icon { width: 7px; height: 7px; border-radius: 50%; background: var(--color-agentic-accent); flex-shrink: 0; }
.ao-token-banner strong { color: var(--color-text); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: var(--fs-tiny); }
.ao-token-banner .ao-token-waiting { color: var(--color-text-faint); }

.ao-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.ao-kpi-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-medium); padding: 1.1rem 1.25rem; box-shadow: var(--glow-card);
}
.ao-kpi-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0.6rem; }
.ao-kpi-platform { font-size: var(--fs-tiny); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-faint); }
.ao-kpi-icon {
    width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.08);
    display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; color: var(--color-text-muted);
}
.ao-kpi-value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.ao-kpi-label { font-size: var(--fs-tiny); color: var(--color-text-faint); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin: 0.15rem 0 0.7rem; }
.ao-kpi-bottom { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ao-kpi-delta { font-size: var(--fs-small); color: var(--color-ok); }
.ao-kpi-delta.negative { color: var(--color-error); }
.ao-kpi-sparkline { width: 76px; height: 26px; flex-shrink: 0; }

.ao-pipeline-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-medium); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--glow-card);
}
.ao-pipeline-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ao-pipeline-label { font-size: var(--fs-tiny); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-faint); }
.ao-pipeline-status {
    display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-tiny);
    color: var(--color-text-faint); text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.ao-progress-track { width: 110px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.ao-progress-fill { display: block; height: 100%; background: var(--color-ok); }
.ao-pipeline-title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; margin: 0.4rem 0 0.9rem; }
.ao-pipeline-meta { display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: var(--fs-small); color: var(--color-text-muted); align-items: center; }
.ao-pipeline-meta .ao-ready-tag { color: var(--color-ok); font-weight: 600; }
.ao-pipeline-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 1.1rem; }
.ao-run-btn {
    background: var(--color-agentic-accent); color: #000; padding: 0.6rem 1.15rem;
    border-radius: var(--radius-small); font-weight: 700; font-size: var(--fs-small); cursor: pointer;
    transition: opacity 0.15s;
}
.ao-run-btn:hover { opacity: 0.88; }
.ao-pipeline-lastrun { font-size: var(--fs-tiny); color: var(--color-text-faint); }

.ao-subtab-content { min-height: 200px; }

@media (max-width: 900px) {
    .ao-header { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
    .ao-tabbar-spacer { flex-basis: 100%; height: 0; }
    .ao-search { flex: 1; }
}