/*
    Grundlayout des AI Hub.
    Bewusst zurückhaltend: Der eigentliche visuelle Entwurf kommt aus
    ui_design_claude.md; hier steht nur, was das Gerüst tragfähig macht.
*/

/*
    ⚠️ Farben ausdrücklich gesetzt, nicht dem Browser überlassen. Ohne das erbt die Seite im
    Dunkelmodus einen dunklen Grund, während die eigenen Regeln dunkle Schrift setzen — die
    Anmeldeseite war damit praktisch unlesbar. Die Werte folgen dem hellen Satz aus dem
    Design-Handout.
*/
:root {
    --aihub-bg: #f5f6f8;
    --aihub-surface: #ffffff;
    --aihub-border: #e5e7eb;
    --aihub-text: #171a1f;
    --aihub-text-muted: #5b6270;
    --aihub-accent: #2563eb;
    --aihub-danger: #b91c1c;

    /* Radzens Layout berechnet die Spaltenbreite aus dieser Variablen, nicht aus der Breite
       des Elements — eine eigene `width`-Regel allein lässt die Leiste auf 1px zusammenfallen. */
    --rz-sidebar-width: 260px;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--aihub-bg);
    color: var(--aihub-text);
    color-scheme: light;
}

/* --- Sidebar: Menü immer links, Version immer unten links --- */

/*
    ⚠️ Die Rasterspalte wird hier gesetzt, nicht Radzen überlassen. RadzenLayout leitet seine
    Spaltenbreite aus einer Zustandsklasse ab, die in dieser Zusammenstellung leer bleibt —
    die Leiste fiel damit auf 1px zusammen, während ihr Inhalt unsichtbar daneben stand. Eine
    `width`-Regel am Element allein behebt das nicht: Über die Breite entscheidet das Raster.
*/
/* Zwei Klassen, damit die Regel Radzens eigene schlägt — bei gleicher Spezifität
   gewinnt sonst je nach Ladereihenfolge die falsche. */
.rz-layout.aihub-layout {
    grid-template-columns: var(--rz-sidebar-width) 1fr;
}

.aihub-sidebar {
    display: flex;
    flex-direction: column;
    width: var(--rz-sidebar-width);
    background: var(--aihub-surface);
    border-right: 1px solid var(--aihub-border);
}

.aihub-brand {
    color: var(--aihub-text);
    padding: 1.25rem 1rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    font-size: 0.95rem;
}

.aihub-nav {
    flex: 1 1 auto;
    overflow-y: auto;
}

.aihub-nav-group {
    padding: 1rem 1rem 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;

    /* Farbe ausdrücklich: Radzens Seitenleiste setzt weiße Schrift, und ohne diese Zeile
       standen die Gruppen unsichtbar auf weißem Grund. Dezenter als die Einträge selbst
       bleiben sie über den Grauwert, nicht über die Deckkraft. */
    color: var(--aihub-text-muted);
}

.aihub-version {
    flex: 0 0 auto;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    opacity: 0.6;
    border-top: 1px solid rgb(0 0 0 / 0.08);
}

/* --- Inhaltsbereich --- */

.aihub-content {
    padding: 1.75rem 2rem;
    max-width: 1600px;
}

.aihub-subtitle {
    margin-top: 0.25rem;
    opacity: 0.7;
}

.aihub-placeholder {
    margin-top: 1.5rem;
}

@media (max-width: 768px) {
    .aihub-sidebar {
        width: 100%;
    }

    .aihub-content {
        padding: 1rem;
    }
}

/* --- Seitenkopf, Karten, Tabellen --- */

.aihub-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.aihub-card { margin-top: 1.25rem; }
.aihub-grid { margin-top: 1.25rem; }
.aihub-actions { display: flex; gap: 0.5rem; }
.aihub-badges { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.aihub-badge { margin-left: 0.5rem; }

.aihub-filters {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

/* Technische Kennungen: Monospace und kopierbar — sie dürfen nicht wie ein Anzeigename
   aussehen. */
.aihub-id {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.85em;
    user-select: all;
}

.aihub-dimmed { opacity: 0.55; }

.aihub-note {
    font-size: 0.8rem;
    opacity: 0.65;
    margin-left: 0.5rem;
}

.aihub-defs {
    display: grid;
    grid-template-columns: minmax(180px, max-content) 1fr;
    gap: 0.5rem 1.5rem;
    margin: 1rem 0 0;
}

.aihub-defs dt { opacity: 0.65; font-size: 0.85rem; }
.aihub-defs dd { margin: 0; }

.aihub-form-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

/* --- Attrappen-Hinweis: dauerhaft sichtbar, solange sie aktiv ist --- */

.aihub-mock-banner {
    background: #fef3e0;
    color: #b45309;
    padding: 0.5rem 2rem;
    font-size: 0.85rem;
    border-bottom: 1px solid rgb(0 0 0 / 0.08);
}

/* --- Dialoge --- */

.aihub-dialog-hint { opacity: 0.75; margin-bottom: 0.75rem; }
.aihub-dialog-input { width: 100%; }

.aihub-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.aihub-key-box {
    display: block;
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    background: rgb(0 0 0 / 0.05);
    border-radius: 8px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    word-break: break-all;
    user-select: all;
}

/* --- Anmeldung --- */

.aihub-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
}

.aihub-login-card {
    width: 100%;
    max-width: 380px;
    padding: 2rem;
    background: var(--aihub-surface);
    border: 1px solid var(--aihub-border);
    border-radius: 10px;
}

.aihub-login-brand { padding: 0 0 1.5rem; font-size: 1.05rem; }
.aihub-login-label { margin: 0.9rem 0 0.3rem; opacity: 0.7; }

.aihub-login-input {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid rgb(0 0 0 / 0.18);
    border-radius: 6px;
    font: inherit;
    box-sizing: border-box;
}

.aihub-login-button {
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.6rem;
    border: 0;
    border-radius: 6px;
    background: var(--aihub-accent);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.aihub-login-error { color: var(--aihub-danger); margin-top: 0.75rem; }

.aihub-logout {
    padding: 0.5rem 1rem 0;
}

/* --- Navigation --- */

.aihub-nav-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 1rem;
    color: var(--aihub-text);
    text-decoration: none;
    font-size: 0.9rem;
    border-left: 3px solid transparent;
}

.aihub-nav-item:hover { background: rgb(0 0 0 / 0.035); }

.aihub-nav-item.active {
    background: #eaf1ff;
    color: var(--aihub-accent);
    border-left-color: var(--aihub-accent);
    font-weight: 500;
}

/* --- Kennzahlenkarten --- */

.aihub-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.aihub-kpi-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--aihub-text-muted); }
.aihub-kpi-value { font-size: 1.5rem; font-weight: 600; margin-top: 0.35rem; }
.aihub-kpi-note { font-size: 0.8rem; color: var(--aihub-text-muted); margin-top: 0.2rem; }

.aihub-warn { color: #b45309; }
.aihub-ok { color: #15803d; }

.aihub-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 1100px) {
    .aihub-two-col { grid-template-columns: 1fr; }
}

.aihub-issues { list-style: none; padding: 0; margin: 1rem 0 0; }

.aihub-issues li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
}

/* --- Vergleichstabelle mit dynamischen Spalten --- */

.aihub-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.aihub-table th,
.aihub-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--aihub-border);
    text-align: left;
}

.aihub-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--aihub-text-muted);
}

.aihub-table .num { text-align: right; }

/* --- Preisfelder mit Katalogabgleich --- */

.aihub-subsection { margin-top: 1.5rem; opacity: 0.8; }

.aihub-price-row {
    display: grid;
    grid-template-columns: 90px 200px 1fr;
    align-items: center;
    gap: 1rem;
    margin: 0.75rem 0;
}

.aihub-price-note {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .aihub-price-row { grid-template-columns: 1fr; }
}