/* ============================================================================
   Controlling-Modul – Cockpit (Projekte / Mitarbeiter / Trend)
   Nutzt die CI-Variablen aus style.css (Status-Farben: --status-*)
   Alle Klassen mit Präfix .ctrl- bzw. SVG-Klassen .c- (scoped in #ctrl-chart)
   ============================================================================ */

/* ---------- Monatsnavigation im Page-Header ---------- */
.ctrl-monthnav {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 4px;
}
.ctrl-month-label {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.9rem;
    min-width: 130px;
    text-align: center;
}

/* ---------- Tabs ---------- */
.ctrl-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.ctrl-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    margin-bottom: -1px;
    transition: color var(--transition-fast);
}
.ctrl-tab i { width: 16px; height: 16px; }
.ctrl-tab:hover { color: var(--text-primary); }
.ctrl-tab.active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); }

.ctrl-panel { display: none; }
.ctrl-panel.active { display: block; animation: ctrlFade 0.25s ease; }
@keyframes ctrlFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.ctrl-panel .muted { color: var(--text-muted); }

/* ---------- Filterbar ---------- */
.ctrl-filterbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.ctrl-filter {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 7px 12px;
    margin: 0;
}
.ctrl-filter i { width: 15px; height: 15px; color: var(--text-muted); }
.ctrl-filter label { font-size: 0.78rem; color: var(--text-muted); }
.ctrl-filter select {
    background: none; border: none; color: var(--text-primary);
    font-family: var(--font-primary); font-size: 0.86rem; font-weight: 600; cursor: pointer; outline: none;
}
.ctrl-filter-search { flex: 1; min-width: 150px; max-width: 280px; }
.ctrl-filter-search input {
    background: none; border: none; color: var(--text-primary);
    font-family: var(--font-primary); font-size: 0.86rem; outline: none; width: 100%;
}

/* ---------- KPI-Karten ---------- */
.ctrl-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.ctrl-kpi {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 18px;
    position: relative;
    overflow: hidden;
}
[data-theme="light"] .ctrl-kpi { box-shadow: var(--shadow-sm); }
.ctrl-kpi.hero { border-color: rgba(0, 212, 170, 0.4); }
.ctrl-kpi.hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--status-success); }
.ctrl-kpi.forecast { border-style: dashed; border-color: rgba(245, 190, 77, 0.5); }
.ctrl-kpi-ic { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 13px; }
.ctrl-kpi-ic i { width: 19px; height: 19px; }
.ctrl-kpi-ic.gold { background: rgba(245, 190, 77, 0.15); color: var(--accent-primary); }
.ctrl-kpi-ic.teal { background: rgba(0, 212, 170, 0.15); color: var(--status-success); }
.ctrl-kpi-ic.blue { background: rgba(0, 180, 216, 0.15); color: var(--status-info); }
.ctrl-kpi-val { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.5px; line-height: 1.1; }
.ctrl-kpi.hero .ctrl-kpi-val { color: var(--status-success); font-size: 1.7rem; }
.ctrl-kpi-label { font-size: 0.78rem; color: var(--text-secondary); margin-top: 5px; }
.ctrl-kpi-sub { font-size: 0.74rem; color: var(--text-muted); margin-top: 7px; font-family: var(--font-mono); }
.ctrl-kpi-sub.ok { color: var(--status-success); }

/* ---------- Card-Head / Note ---------- */
.ctrl-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 18px 22px; border-bottom: 1px solid var(--border-color);
}
.ctrl-card-head h3 { font-size: 1.02rem; font-weight: 600; display: flex; align-items: center; gap: 9px; }
.ctrl-card-head h3 i { width: 18px; height: 18px; color: var(--accent-primary); }
.ctrl-note { font-size: 0.78rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.ctrl-note i { width: 14px; height: 14px; }

/* ---------- Tabelle ---------- */
.ctrl-tbl-wrap { overflow-x: auto; }
.ctrl-table { width: 100%; border-collapse: collapse; min-width: 860px; }
.ctrl-table thead th {
    text-align: left; font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--text-muted); padding: 13px 16px;
    border-bottom: 1px solid var(--border-color); white-space: nowrap;
}
.ctrl-table thead th.num { text-align: right; }
.ctrl-table tbody td { padding: 15px 16px; border-bottom: 1px solid var(--border-color); font-size: 0.9rem; vertical-align: middle; }
.ctrl-table tbody tr:hover { background: var(--bg-hover); }
.ctrl-table .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctrl-proj-name { font-weight: 600; }
.ctrl-proj-client { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.ctrl-gewinn { font-weight: 600; color: var(--status-success); }
.ctrl-gewinn.neg { color: var(--status-danger); }
.ctrl-work-cell { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.ctrl-flag { color: var(--status-warning); display: inline-flex; }
.ctrl-flag i { width: 14px; height: 14px; }
.ctrl-badge-hours { font-size: 0.68rem; font-weight: 600; color: var(--status-info); background: rgba(0, 180, 216, 0.13); padding: 3px 8px; border-radius: 6px; }
.ctrl-add-cost {
    display: inline-flex; align-items: center; gap: 5px; font-size: 0.76rem; color: var(--text-muted);
    background: none; border: 1px dashed var(--border-color); border-radius: 7px; padding: 3px 8px;
    cursor: pointer; font-family: var(--font-primary); margin-top: 5px; transition: all var(--transition-fast);
}
.ctrl-add-cost:hover { color: var(--accent-primary); border-color: var(--accent-primary); }
.ctrl-add-cost i { width: 12px; height: 12px; }
.ctrl-table tfoot td { padding: 16px; border-top: 2px solid var(--border-color); font-weight: 600; font-size: 0.92rem; }
.ctrl-table tfoot .num { font-size: 0.95rem; }
.ctrl-empty { text-align: center; color: var(--text-muted); padding: 28px 16px; }

/* ---------- Marge-Balken (Budget = Extern + Gewinn) ---------- */
.ctrl-marge { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.ctrl-marge-track { height: 10px; background: var(--bg-tertiary); border-radius: 6px; overflow: hidden; display: flex; }
.ctrl-seg-ext { height: 100%; background: var(--status-info); }
.ctrl-seg-gewinn { height: 100%; background: var(--status-success); }
.ctrl-seg-loss { height: 100%; background: repeating-linear-gradient(45deg, var(--status-danger), var(--status-danger) 5px, rgba(255, 107, 107, 0.55) 5px, rgba(255, 107, 107, 0.55) 10px); }
.ctrl-marge-meta { display: flex; justify-content: space-between; font-size: 0.74rem; font-family: var(--font-mono); }
.ctrl-marge-pct { font-weight: 600; color: var(--status-success); }
.ctrl-marge-pct.neg { color: var(--status-danger); }

/* ---------- Legende + Punkte ---------- */
.ctrl-legend { display: flex; gap: 18px; flex-wrap: wrap; padding: 14px 22px; font-size: 0.78rem; color: var(--text-secondary); border-top: 1px solid var(--border-color); }
.ctrl-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ctrl-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.ctrl-dot.gewinn { background: var(--status-success); }
.ctrl-dot.ext { background: var(--status-info); }
.ctrl-dot.loss { background: var(--status-danger); }
.ctrl-dot.c-content { background: var(--accent-primary); }
.ctrl-dot.c-tech { background: var(--status-info); }
.ctrl-dot.c-link { background: var(--status-success); }
.ctrl-dot.c-report { background: var(--status-warning); }
.ctrl-dot.c-other { background: var(--text-muted); }
.ctrl-fc-key { display: inline-block; width: 18px; height: 0; border-top: 2px dashed var(--accent-primary); }

/* ---------- Mitarbeiter ---------- */
.ctrl-emp { display: flex; align-items: center; gap: 12px; }
.ctrl-ava {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-dark));
    color: #fff; font-weight: 700; font-size: 0.78rem; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-family: var(--font-mono);
}
.ctrl-emp-name { font-weight: 600; }
.ctrl-emp-role { font-size: 0.78rem; color: var(--text-muted); margin-top: 1px; }
.ctrl-emp-row { cursor: pointer; }
.ctrl-chev { color: var(--text-muted); transition: transform var(--transition-fast); display: inline-flex; }
.ctrl-chev i { width: 17px; height: 17px; }
.ctrl-emp-row.open .ctrl-chev { transform: rotate(90deg); color: var(--accent-primary); }
.ctrl-util { display: flex; align-items: center; gap: 9px; min-width: 150px; }
.ctrl-util-track { flex: 1; height: 8px; background: var(--bg-tertiary); border-radius: 5px; overflow: hidden; }
.ctrl-util-fill { height: 100%; background: var(--accent-primary); border-radius: 5px; }
.ctrl-util-fill.ok { background: var(--status-success); }
.ctrl-util-fill.warn { background: var(--status-warning); }
.ctrl-util-pct { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: var(--accent-primary); }
.ctrl-util-pct.ok { color: var(--status-success); }
.ctrl-util-pct.warn { color: var(--status-warning); }
.ctrl-detail-row > td { padding: 0; background: var(--bg-secondary); }
.ctrl-detail-inner { padding: 20px 22px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ctrl-dblock h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 12px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.ctrl-dblock h4 i { width: 14px; height: 14px; color: var(--accent-primary); }
.ctrl-pbar-row { display: grid; grid-template-columns: 130px 1fr 110px; gap: 11px; align-items: center; margin-bottom: 9px; font-size: 0.84rem; }
.ctrl-pbar-row .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctrl-pbar { height: 8px; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden; }
.ctrl-pbar-fill { height: 100%; border-radius: 4px; background: var(--accent-primary); }
.ctrl-pbar-fill.c-content { background: var(--accent-primary); }
.ctrl-pbar-fill.c-tech { background: var(--status-info); }
.ctrl-pbar-fill.c-link { background: var(--status-success); }
.ctrl-pbar-fill.c-report { background: var(--status-warning); }
.ctrl-pbar-fill.c-other { background: var(--text-muted); }
.ctrl-pbar-val { text-align: right; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-secondary); }

/* ---------- Trend: Delta-Pfeile ---------- */
.ctrl-delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.ctrl-delta i { width: 13px; height: 13px; }
.ctrl-delta.up { color: var(--status-success); }
.ctrl-delta.down { color: var(--status-danger); }

/* ---------- Trend: Chart (SVG von controlling.js) ---------- */
.ctrl-chart-wrap { padding: 24px 22px 6px; }
#ctrl-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
#ctrl-chart .c-grid { stroke: var(--border-color); stroke-width: 1; }
#ctrl-chart .c-axis { fill: var(--text-muted); font-size: 11px; font-family: var(--font-mono); }
#ctrl-chart .c-area { fill: url(#ctrlGGrad); }
#ctrl-chart .c-line { fill: none; stroke: var(--status-success); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
#ctrl-chart .c-line.fc { stroke-dasharray: 5 5; opacity: 0.85; }
#ctrl-chart .c-dot { fill: var(--bg-card); stroke: var(--status-success); stroke-width: 2; }
#ctrl-chart .c-dot.fc { stroke: var(--accent-primary); stroke-dasharray: 3 2; }
#ctrl-chart .c-fcband { fill: var(--accent-primary); opacity: 0.07; }
#ctrl-chart .c-axis.accent { fill: var(--accent-primary); font-weight: 600; }

/* ---------- Trend: Insight + Beitrag ---------- */
.ctrl-insight {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 13px 16px; background: var(--bg-tertiary); border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color); font-size: 0.86rem; color: var(--text-secondary);
    margin: 6px 22px 18px; line-height: 1.5;
}
.ctrl-insight i { width: 18px; height: 18px; color: var(--accent-primary); flex-shrink: 0; margin-top: 1px; }
.ctrl-insight b { color: var(--text-primary); font-weight: 600; }
.ctrl-sub-head { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); padding: 6px 22px 4px; display: flex; align-items: center; gap: 8px; }
.ctrl-sub-head i { width: 15px; height: 15px; color: var(--accent-primary); }
.ctrl-contrib { padding: 6px 22px 18px; }
.ctrl-contrib-row { display: grid; grid-template-columns: 140px 1fr 80px; align-items: center; gap: 12px; padding: 7px 0; }
.ctrl-contrib-name { font-size: 0.86rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctrl-contrib-bar { height: 9px; background: var(--bg-tertiary); border-radius: 5px; overflow: hidden; }
.ctrl-contrib-fill { height: 100%; background: linear-gradient(90deg, var(--status-success), var(--accent-primary)); border-radius: 5px; }
.ctrl-contrib-val { text-align: right; font-family: var(--font-mono); font-size: 0.84rem; font-weight: 600; color: var(--status-success); }
.ctrl-contrib-val.neg { color: var(--status-danger); }

/* ---------- Kosten-Modal ---------- */
.ctrl-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55);
    display: none; align-items: center; justify-content: center; padding: 20px; z-index: 200;
}
.ctrl-overlay.open { display: flex; }
.ctrl-modal {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius);
    width: 100%; max-width: 440px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.ctrl-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border-color); }
.ctrl-modal-head h3 { font-size: 1.05rem; font-weight: 600; }
.ctrl-modal-body { padding: 22px; }
.ctrl-fg { margin-bottom: 16px; }
.ctrl-fg label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 7px; }
.ctrl-fg input, .ctrl-fg select, .ctrl-fg textarea {
    width: 100%; background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm); padding: 10px 13px; color: var(--text-primary);
    font-family: var(--font-primary); font-size: 0.92rem;
}
.ctrl-fg input:focus, .ctrl-fg select:focus, .ctrl-fg textarea:focus { outline: none; border-color: var(--accent-primary); }
.ctrl-fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ctrl-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--border-color); }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
    .ctrl-detail-inner { grid-template-columns: 1fr; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .ctrl-panel.active { animation: none; }
    .ctrl-chev, .ctrl-add-cost, .ctrl-tab { transition: none; }
}

/* ---------- Budget-Button (Projekte-Tab) + Budget-Modal ---------- */
.ctrl-budget-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--text-primary);font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:.9rem;font-weight:500;cursor:pointer;padding:2px 4px;border-radius:6px;transition:color var(--transition-fast)}
.ctrl-budget-btn i{width:13px;height:13px;color:var(--text-muted)}
.ctrl-budget-btn:hover{color:var(--accent-primary)}
.ctrl-budget-btn:hover i{color:var(--accent-primary)}

.ctrl-sec-label{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);margin:0 0 9px}

.ctrl-bentry{display:grid;grid-template-columns:92px 1fr auto;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--border-color);border-radius:var(--border-radius-sm);margin-bottom:8px;background:var(--bg-secondary)}
.ctrl-bentry.base{background:transparent;border-style:dashed}
.ctrl-bentry-from{font-family:var(--font-mono);font-size:.84rem;font-weight:600;color:var(--text-primary)}
.ctrl-bentry-from small{display:block;font-size:.62rem;color:var(--text-muted);font-weight:500;letter-spacing:.3px;margin-top:1px}
.ctrl-bentry-vals{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--font-mono);font-size:.86rem}
.ctrl-bentry-budget{font-weight:600}
.ctrl-bentry-soll{color:var(--text-secondary)}
.ctrl-rate-chip{font-family:var(--font-mono);font-size:.74rem;color:var(--accent-primary);background:rgba(245,190,77,.12);padding:2px 7px;border-radius:6px}
.ctrl-bentry form{margin:0}
.ctrl-bentry-del{width:30px;height:30px;border-radius:7px;background:none;border:1px solid var(--border-color);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.ctrl-bentry-del:hover{color:var(--status-danger);border-color:var(--status-danger)}
.ctrl-bentry-del i{width:14px;height:14px}

.ctrl-budget-add{border-top:1px solid var(--border-color);margin-top:16px;padding-top:16px}
.ctrl-fg-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:12px}
@media (max-width:520px){.ctrl-fg-row3{grid-template-columns:1fr}}