/* Controlling-Cockpit — KPI-Kacheln, Ampeln, Chart-Container */

.ccb-filterbar {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    margin-bottom: 18px;
}
.ccb-filterbar select {
    padding: 7px 12px; border: 1px solid var(--border); border-radius: 6px;
    font-size: .85rem; background: var(--card-bg, #fff);
}

.ccb-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.ccb-kpi-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 6px;
}
.ccb-kpi-label {
    font-size: .78rem; color: var(--text-muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: .02em;
}
.ccb-kpi-value {
    font-size: 1.7rem; font-weight: 700; color: var(--text-main);
    display: flex; align-items: baseline; gap: 6px;
}
.ccb-kpi-sub { font-size: .78rem; color: var(--text-muted); }

.ccb-ampel { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.ccb-ampel-gruen  { background: #22c55e; }
.ccb-ampel-gelb   { background: #eab308; }
.ccb-ampel-rot    { background: #ef4444; }

.ccb-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}
.ccb-chart-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
}
.ccb-chart-card h3 {
    margin: 0 0 12px; font-size: .95rem; font-weight: 700; color: var(--text-main);
}
.ccb-chart-card canvas { max-height: 280px; }

.ccb-table-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0; overflow: hidden;
}
.ccb-table-card h3 { margin: 0; padding: 16px 18px 0; font-size: .95rem; font-weight: 700; color: var(--text-main); }
.ccb-table { width: 100%; border-collapse: collapse; font-size: .86rem; margin-top: 10px; }
.ccb-table th { text-align: left; padding: 8px 16px; background: var(--background); border-bottom: 2px solid var(--border); }
.ccb-table th.ccb-num { text-align: right; }
.ccb-table td { padding: 8px 16px; border-bottom: 1px solid var(--border); }
.ccb-table td.ccb-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Spaltenklick-Sortierung (19.09.2026, Nutzer-Vorgabe) — analog liqSort in liquiditaetsplanung.js,
   s. Memory feedback_tabellen_sort_resize_standard. */
.ccb-th-sortable { cursor: pointer; user-select: none; }
.ccb-th-sortable:hover { color: var(--primary); }

/* Info-Badge (ⓘ) neben Spaltenüberschriften/KPI-Labels — analog psb-tt/usp-tt. */
.ccb-tt { color: var(--text-muted); font-size: .68rem; margin-left: 4px; cursor: help; vertical-align: middle; transition: color .15s; }
.ccb-tt:hover { color: var(--primary); }

.ccb-risiko-liste { list-style: none; margin: 10px 0 0; padding: 0 18px 14px; font-size: .84rem; }
.ccb-risiko-liste li { padding: 4px 0; border-bottom: 1px solid var(--border); }
.ccb-risiko-liste li:last-child { border-bottom: none; }

.ccb-empty { padding: 32px; text-align: center; color: var(--text-muted); font-size: .9rem; }