/* ============================================================
   Kurs-Verwalter – Verwaltung 2.0 (admin.css)
   Gemeinsame Bausteine für Listen, Filter, Tabellen, Diagramme.
   Nutzt die Tokens aus style.css (--kv-*).
   ============================================================ */

/* ---------- Seitenkopf ---------- */
.kv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .25rem 0 1rem; border-bottom: 1px solid var(--kv-line); margin-bottom: 1.25rem; }
.kv-head-main { min-width: 0; }
.kv-back { font-size: .8rem; color: var(--kv-ink-3); text-decoration: none; display: inline-block; margin-bottom: .35rem; }
.kv-back:hover { color: var(--kv-accent); }
.kv-eyebrow { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--kv-ink-3); margin-bottom: .2rem; }
.kv-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; margin: 0; line-height: 1.2; }
.kv-subtitle { color: var(--kv-ink-3); font-size: .88rem; margin: .25rem 0 0; }
.kv-head-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }

/* ---------- Filterleiste ---------- */
.kv-filterbar { display: flex; flex-wrap: wrap; gap: .5rem .6rem; align-items: center; padding: .6rem .75rem; background: var(--kv-surface); border: 1px solid var(--kv-line); margin-bottom: 1rem; }
.kv-filterbar .form-control, .kv-filterbar .form-select { font-size: .84rem; height: 34px; min-width: 150px; }
.kv-filterbar .kv-filter-q { flex: 1 1 220px; min-width: 180px; }
.kv-filterbar .form-select { max-width: 220px; }
.kv-filterbar .kv-filter-count { margin-left: auto; font-size: .78rem; color: var(--kv-ink-3); white-space: nowrap; }
.kv-filterbar .kv-segment { height: 34px; }
.kv-segment { display: inline-flex; border: 1px solid var(--kv-line); background: var(--kv-surface); }
.kv-segment .kv-seg { padding: .3rem .7rem; font-size: .8rem; font-weight: 500; color: var(--kv-ink-2); text-decoration: none; border-right: 1px solid var(--kv-line); display: inline-flex; align-items: center; gap: .35rem; background: transparent; cursor: pointer; white-space: nowrap; }
.kv-segment .kv-seg:last-child { border-right: 0; }
.kv-segment .kv-seg:hover { background: var(--kv-surface-2); color: var(--kv-ink); }
.kv-segment .kv-seg.is-active { background: var(--kv-ink); color: #fff; }
.kv-seg-dot { width: 6px; height: 6px; background: #22c55e; display: inline-block; }
.kv-segment .kv-seg.is-active .kv-seg-dot { background: #4ade80; }

/* ---------- Tabellen ---------- */
.kv-table-wrap { background: var(--kv-surface); border: 1px solid var(--kv-line); overflow-x: auto; }
.kv-table { width: 100%; margin: 0; font-size: .84rem; border-collapse: separate; border-spacing: 0; }
.kv-table thead th { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--kv-ink-3); background: var(--kv-surface-2); border-bottom: 1px solid var(--kv-line); padding: .55rem .75rem; white-space: nowrap; position: sticky; top: 0; z-index: 2; }
.kv-table tbody td { padding: .55rem .75rem; border-bottom: 1px solid var(--kv-line-2); vertical-align: middle; }
.kv-table tbody tr:last-child td { border-bottom: 0; }
.kv-table tbody tr:hover td { background: var(--kv-surface-2); }
.kv-table tbody tr.is-selected td { background: var(--kv-accent-soft); }
.kv-table tfoot td { padding: .5rem .75rem; font-weight: 600; background: var(--kv-surface-2); border-top: 1px solid var(--kv-line); font-size: .8rem; }
.kv-table th[data-sort] { cursor: pointer; user-select: none; }
.kv-table th[data-sort]:hover { color: var(--kv-ink); }
.th-sort-icon { margin-left: .3rem; opacity: .35; font-size: .7rem; }
th[aria-sort] .th-sort-icon { opacity: 1; color: var(--kv-accent); }
.kv-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.kv-table .actions { text-align: right; white-space: nowrap; }
.kv-table .actions .btn { padding: .15rem .45rem; font-size: .74rem; }
.kv-table-sticky th:first-child, .kv-table-sticky td:first-child { position: sticky; left: 0; background: var(--kv-surface); z-index: 1; box-shadow: 1px 0 0 var(--kv-line); }
.kv-table-sticky thead th:first-child { z-index: 3; background: var(--kv-surface-2); }
.kv-table .muted { color: var(--kv-ink-3); font-size: .76rem; }
.kv-table a.kv-link { color: var(--kv-ink); text-decoration: none; font-weight: 500; }
.kv-table a.kv-link:hover { color: var(--kv-accent); }

/* ---------- Pagination ---------- */
.kv-pagination { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .25rem; font-size: .8rem; flex-wrap: wrap; }
.kv-pagination-info { color: var(--kv-ink-3); }
.kv-pagination-pages { display: flex; gap: .25rem; align-items: center; }
.kv-pagination-pages .btn { min-width: 32px; font-size: .76rem; padding: .25rem .5rem; }
.kv-pagination-gap { padding: 0 .25rem; color: var(--kv-ink-3); }

/* ---------- Bulk-Leiste ---------- */
.kv-bulkbar { display: none; align-items: center; gap: .5rem; padding: .5rem .75rem; background: var(--kv-ink); color: #fff; font-size: .82rem; margin-bottom: .5rem; }
.kv-bulkbar.is-visible { display: flex; flex-wrap: wrap; }
.kv-bulkbar .btn { font-size: .76rem; padding: .25rem .6rem; }
.kv-bulkbar .kv-bulk-n { font-weight: 600; }
.kv-bulkbar .form-select { width: auto; font-size: .78rem; height: 30px; padding-top: .15rem; padding-bottom: .15rem; }

/* ---------- KPI ---------- */
.kv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.kv-kpi { display: block; background: var(--kv-surface); border: 1px solid var(--kv-line); padding: .75rem .9rem; text-decoration: none; color: var(--kv-ink); position: relative; }
a.kv-kpi:hover { border-color: var(--kv-ink-4); color: var(--kv-ink); }
.kv-kpi-label { font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--kv-ink-3); }
.kv-kpi-value { font-size: 1.45rem; font-weight: 600; line-height: 1.2; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.kv-kpi-sub { font-size: .74rem; color: var(--kv-ink-3); margin-top: .1rem; }
.kv-kpi-danger .kv-kpi-value { color: var(--kv-danger); }
.kv-kpi-warning .kv-kpi-value { color: #b45309; }
.kv-kpi-success .kv-kpi-value { color: #15803d; }
.kv-kpi-accent .kv-kpi-value { color: var(--kv-accent); }

/* ---------- Status / Avatar / Noten ---------- */
.kv-status { display: inline-block; font-size: .68rem; font-weight: 600; letter-spacing: .03em; padding: .12rem .45rem; text-transform: uppercase; }
.kv-status-success { background: var(--kv-success-soft); color: var(--kv-success); }
.kv-status-warning { background: var(--kv-warning-soft); color: #92400e; }
.kv-status-danger { background: var(--kv-danger-soft); color: var(--kv-danger); }
.kv-status-secondary { background: var(--kv-surface-3); color: var(--kv-ink-2); }
.kv-avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--kv-surface-3); color: var(--kv-ink-2); font-size: .72rem; font-weight: 600; flex-shrink: 0; }
.kv-avatar.lg { width: 48px; height: 48px; font-size: 1rem; }
.grade-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem; padding: .1rem .4rem; font-weight: 600; font-size: .8rem; font-variant-numeric: tabular-nums; }
.grade-pill.g1, .grade-cell.g1 { background: #dcfce7; color: #14532d; }
.grade-pill.g2, .grade-cell.g2 { background: #ecfccb; color: #365314; }
.grade-pill.g3, .grade-cell.g3 { background: #fef9c3; color: #713f12; }
.grade-pill.g4, .grade-cell.g4 { background: #ffedd5; color: #7c2d12; }
.grade-pill.g5, .grade-cell.g5 { background: #fee2e2; color: #7f1d1d; }
.grade-pill.g6, .grade-cell.g6 { background: #fecaca; color: #7f1d1d; }
.grade-pill.gnone, .grade-cell.gnone { background: var(--kv-surface-3); color: var(--kv-ink-3); }
.grade-input { width: 3.1rem; text-align: center; font-weight: 600; font-size: .84rem; padding: .2rem .25rem; border: 1px solid var(--kv-line); background: var(--kv-surface); }
.grade-input:focus { outline: 2px solid var(--kv-accent); outline-offset: -1px; }
.grade-input.is-saving { opacity: .5; }
.grade-input.is-saved { box-shadow: inset 0 0 0 2px #22c55e; }
.grade-input.is-error { box-shadow: inset 0 0 0 2px #ef4444; }

/* ---------- Quote ---------- */
.kv-rate { display: inline-flex; align-items: center; gap: .45rem; font-variant-numeric: tabular-nums; font-size: .8rem; }
.kv-rate-track { width: 64px; height: 6px; background: var(--kv-surface-3); display: inline-block; }
.kv-rate-fill { display: block; height: 100%; background: var(--kv-accent); }
.kv-rate-success .kv-rate-fill { background: #22c55e; }
.kv-rate-warning .kv-rate-fill { background: #f59e0b; }
.kv-rate-danger .kv-rate-fill { background: #ef4444; }

/* ---------- Diagramme ---------- */
.kv-hbars { display: flex; flex-direction: column; gap: .35rem; }
.kv-hbar { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(0, 3fr) auto; align-items: center; gap: .6rem; font-size: .8rem; }
.kv-hbar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv-hbar-label a { color: var(--kv-ink); text-decoration: none; }
.kv-hbar-label a:hover { color: var(--kv-accent); }
.kv-hbar-track { height: 10px; background: var(--kv-surface-3); }
.kv-hbar-fill { height: 100%; background: var(--kv-accent); }
.kv-hbar-danger .kv-hbar-fill { background: #ef4444; }
.kv-hbar-warning .kv-hbar-fill { background: #f59e0b; }
.kv-hbar-success .kv-hbar-fill { background: #22c55e; }
.kv-hbar-value { font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 3rem; text-align: right; }
.kv-hbar-sub { color: var(--kv-ink-3); font-size: .72rem; margin-left: .35rem; }
.kv-stacked { display: flex; flex-direction: column; gap: .35rem; }
.kv-stacked-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 4fr) auto; align-items: center; gap: .6rem; font-size: .8rem; }
.kv-stacked-label a { color: var(--kv-ink); text-decoration: none; }
.kv-stacked-track { display: flex; height: 16px; background: var(--kv-surface-3); overflow: hidden; }
.kv-stacked-seg { height: 100%; display: flex; align-items: center; justify-content: center; font-size: .66rem; font-weight: 600; color: #fff; min-width: 0; }
.kv-stacked-total { font-variant-numeric: tabular-nums; color: var(--kv-ink-3); min-width: 2rem; text-align: right; }
.kv-legend { display: flex; flex-wrap: wrap; gap: .25rem .8rem; font-size: .72rem; color: var(--kv-ink-2); margin-bottom: .3rem; }
.kv-legend-item { display: inline-flex; align-items: center; gap: .3rem; }
.kv-swatch { width: 10px; height: 10px; display: inline-block; }
.kv-c-1 { background: #15803d; } .kv-c-2 { background: #65a30d; } .kv-c-3 { background: #ca8a04; } .kv-c-4 { background: #ea580c; } .kv-c-5 { background: #dc2626; } .kv-c-6 { background: #7f1d1d; }
.kv-c-accent { background: var(--kv-accent); } .kv-c-danger { background: #ef4444; } .kv-c-success { background: #22c55e; } .kv-c-warning { background: #f59e0b; } .kv-c-muted { background: #9ca3af; } .kv-c-ink { background: #111827; }
.kv-spark { color: var(--kv-accent); vertical-align: middle; }
.kv-heatmap-wrap { overflow-x: auto; }
.kv-heatmap { border-collapse: separate; border-spacing: 2px; font-size: .74rem; }
.kv-heatmap th { font-weight: 500; color: var(--kv-ink-3); padding: .15rem .35rem; text-align: left; white-space: nowrap; }
.kv-heatmap thead th { text-align: center; }
.kv-heatmap td { width: 34px; height: 26px; text-align: center; font-variant-numeric: tabular-nums; color: var(--kv-ink-2); background: var(--kv-surface-2); }
.kv-heatmap td.kv-heat-1 { background: #dbeafe; } .kv-heatmap td.kv-heat-2 { background: #bfdbfe; } .kv-heatmap td.kv-heat-3 { background: #93c5fd; } .kv-heatmap td.kv-heat-4 { background: #60a5fa; color: #fff; } .kv-heatmap td.kv-heat-5 { background: #1e40af; color: #fff; }

/* ---------- Karten / Abschnitte ---------- */
.kv-card { background: var(--kv-surface); border: 1px solid var(--kv-line); margin-bottom: 1rem; }
.kv-card-hd { display: flex; align-items: center; gap: .6rem; padding: .65rem .9rem; border-bottom: 1px solid var(--kv-line); font-weight: 600; font-size: .9rem; }
.kv-card-hd .kv-card-ico { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--kv-surface-3); color: var(--kv-ink-2); font-size: .78rem; }
.kv-card-hd .ms-auto { margin-left: auto; }
.kv-card-hd .kv-count { font-size: .7rem; font-weight: 600; background: var(--kv-surface-3); color: var(--kv-ink-2); padding: .1rem .45rem; }
.kv-card-bd { padding: .9rem; }
.kv-card-bd.p-0 { padding: 0; }
.kv-section-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--kv-line); margin-bottom: 1rem; overflow-x: auto; }
.kv-section-tabs a { padding: .55rem .9rem; font-size: .84rem; font-weight: 500; color: var(--kv-ink-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; }
.kv-section-tabs a:hover { color: var(--kv-ink); }
.kv-section-tabs a.is-active { color: var(--kv-accent); border-bottom-color: var(--kv-accent); }
.kv-section-tabs a .kv-count { font-size: .68rem; background: var(--kv-surface-3); padding: .05rem .4rem; }
.kv-dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; font-size: .84rem; margin: 0; }
.kv-dl dt { color: var(--kv-ink-3); font-weight: 500; }
.kv-dl dd { margin: 0; }
.kv-note { font-size: .78rem; color: var(--kv-ink-3); }
.kv-dropzone { border: 1px dashed var(--kv-ink-4); padding: 1.5rem; text-align: center; color: var(--kv-ink-3); font-size: .84rem; background: var(--kv-surface-2); }
.kv-steps { display: flex; gap: 0; margin-bottom: 1rem; font-size: .78rem; }
.kv-steps .kv-step { flex: 1; padding: .45rem .6rem; border: 1px solid var(--kv-line); border-right: 0; color: var(--kv-ink-3); background: var(--kv-surface); }
.kv-steps .kv-step:last-child { border-right: 1px solid var(--kv-line); }
.kv-steps .kv-step.is-active { background: var(--kv-ink); color: #fff; border-color: var(--kv-ink); }
.kv-steps .kv-step.is-done { color: var(--kv-success); }
.kv-inline-form { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.kv-inline-form .form-control, .kv-inline-form .form-select { font-size: .82rem; height: 32px; }
.kv-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; padding: .15rem .5rem; background: var(--kv-surface-3); color: var(--kv-ink-2); }
.kv-chip.danger { background: var(--kv-danger-soft); color: var(--kv-danger); }
.kv-chip.warning { background: var(--kv-warning-soft); color: #92400e; }
.kv-chip.success { background: var(--kv-success-soft); color: var(--kv-success); }
.kv-nav-dropdown .dropdown-menu { border-radius: 0; border: 1px solid #1f2937; background: #111827; padding: .4rem 0; min-width: 260px; }
.kv-nav-dropdown .dropdown-header { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: #6b7280; padding: .4rem 1rem .2rem; }
.kv-nav-dropdown .dropdown-item { color: #d1d5db; font-size: .82rem; padding: .3rem 1rem; display: flex; align-items: center; gap: .5rem; }
.kv-nav-dropdown .dropdown-item i { width: 16px; text-align: center; color: #6b7280; font-size: .78rem; }
.kv-nav-dropdown .dropdown-item:hover, .kv-nav-dropdown .dropdown-item.active { background: #1f2937; color: #fff; }
.kv-nav-dropdown .dropdown-divider { border-color: #1f2937; margin: .3rem 0; }
@media (max-width: 767.98px) {
  .kv-hbar { grid-template-columns: 1fr; gap: .15rem; }
  .kv-stacked-row { grid-template-columns: 1fr; }
  .kv-filterbar .form-select, .kv-filterbar .form-control { min-width: 0; flex: 1 1 45%; max-width: none; }
  .kv-filterbar .kv-segment, .kv-head-actions .kv-segment { height: auto; flex-wrap: wrap; max-width: 100%; }
  .kv-segment .kv-seg { border-bottom: 1px solid var(--kv-line); }
  .kv-head { flex-direction: column; align-items: stretch; }
  .kv-head-actions { max-width: 100%; }
  .kv-head-actions > * { max-width: 100%; }
  .kv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv-kpi-value { font-size: 1.2rem; }
  .kv-page, .kv-main { overflow-x: hidden; }
  .kv-table-wrap, .kv-heatmap-wrap { max-width: 100%; }
}