/**
 * main.css — KeyControlling V5
 * ─────────────────────────────────────────────────────────────
 * EIN einziges CSS-File für die gesamte Applikation.
 * Kein Inline-CSS in PHP-Dateien. Kein weiteres CSS einbinden.
 *
 * Struktur:
 *   1. CSS Variables (Design Tokens)
 *   2. Reset & Base
 *   3. Layout (Header · Sidebar · Content)
 *   4. Navigation (Header-Nav · Sidebar-Nav)
 *   5. Filter-Bar
 *   6. Tabellen (sticky Header · sticky linke Spalte)
 *   7. KPI-Boxen & Dashboard
 *   8. KPI-Karten (Lagebericht)
 *   9. Import
 *  10. Buttons & Form-Elemente
 *  11. Modals
 *  12. Utilities (Delta-Farben · Badges · Tooltips)
 *  13. Responsive
 *
 * @package  KeyControlling
 * @version  5.0
 */


/* ═══════════════════════════════════════════════════════════
   1. CSS VARIABLES – Design Tokens
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Farben */
  --kc-black:        #0D0D0D;
  --kc-white:        #FFFFFF;
  --kc-gray-50:      #F7F8FA;
  --kc-gray-100:     #F0F2F5;
  --kc-gray-200:     #E4E7EC;
  --kc-gray-300:     #CBD2DA;
  --kc-gray-400:     #9AA3AF;
  --kc-gray-500:     #6B7480;
  --kc-gray-700:     #374151;
  --kc-gray-900:     #111827;
  --kc-blue:         #2563EB;
  --kc-blue-hover:   #1D4ED8;
  --kc-blue-light:   #EFF6FF;
  --kc-green:        #0A7F2E;
  --kc-red:          #C62828;
  --kc-summary-bg:   #DBEAFE;
  --kc-summary-text: #1E3A8A;

  /* Layout-Maße */
  --sidebar-width:         250px;
  --sidebar-collapsed-width: 60px;
  --header-height:         56px;
  --subheader-height:      44px;
  --filterbar-height:      44px;

  /* Schatten */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08);

  /* Typografie */
  --font:        "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:   "Cascadia Code", "Fira Mono", monospace;

  /* Radien */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;

  /* Transitions */
  --transition:  0.25s ease;
}


/* ═══════════════════════════════════════════════════════════
   2. RESET & BASE
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--kc-gray-50);
  color: var(--kc-gray-900);
  overflow-x: hidden;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: var(--font);
  cursor: pointer;
}

code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--kc-gray-100);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}


/* ═══════════════════════════════════════════════════════════
   3. LAYOUT
   ═══════════════════════════════════════════════════════════ */

/* ── Top-Header ── */
#main-header-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--kc-white);
  border-bottom: 1px solid var(--kc-gray-200);
  box-shadow: var(--shadow-sm);
  z-index: 2000;
  display: flex;
  align-items: center;
  padding: 0 20px;
  justify-content: space-between;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  height: 28px;
  width: auto;
}

.company-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--kc-gray-500);
  border-left: 1px solid var(--kc-gray-200);
  padding-left: 10px;
  margin-left: 2px;
}

/* ── Sidebar ── */
.sidebar {
  position: fixed;
  top: var(--header-height);
  left: 0;
  height: calc(100vh - var(--header-height));
  width: var(--sidebar-width);
  background: var(--kc-white);
  border-right: 1px solid var(--kc-gray-200);
  display: flex;
  flex-direction: column;
  z-index: 1500;
  transition: width var(--transition);
  overflow: hidden;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

/* ── Content-Bereich ── */
.content {
  margin-left: var(--sidebar-width);
  margin-top: calc(var(--header-height) + var(--subheader-height));
  padding: 20px;
  min-height: calc(100vh - var(--header-height) - var(--subheader-height));
  transition: margin-left var(--transition);
}

/* Content mit Filterleiste */
.content.has-filterbar {
  margin-top: calc(var(--header-height) + var(--subheader-height) + var(--filterbar-height));
}

body.sidebar-collapsed .content {
  margin-left: var(--sidebar-collapsed-width);
}

/* Sub-Header (Seiten-Titel + Tab-Navigation) */
.page-header {
  position: fixed;
  top: var(--header-height);
  left: var(--sidebar-width);
  right: 0;
  height: var(--subheader-height);
  background: var(--kc-white);
  border-bottom: 1px solid var(--kc-gray-200);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 20px;
  z-index: 1400;
  transition: left var(--transition);
}

body.sidebar-collapsed .page-header {
  left: var(--sidebar-collapsed-width);
}

.page-header h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--kc-gray-900);
  white-space: nowrap;
}

/* Filter-Bar */
.filter-bar {
  position: fixed;
  top: calc(var(--header-height) + var(--subheader-height));
  left: var(--sidebar-width);
  right: 0;
  height: var(--filterbar-height);
  background: var(--kc-gray-50);
  border-bottom: 1px solid var(--kc-gray-200);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  z-index: 1300;
  transition: left var(--transition);
}

body.sidebar-collapsed .filter-bar {
  left: var(--sidebar-collapsed-width);
}


/* ═══════════════════════════════════════════════════════════
   4. NAVIGATION
   ═══════════════════════════════════════════════════════════ */

/* ── Haupt-Nav rechts im Header ── */
.main-nav-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--kc-gray-500);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}

.nav-link:hover {
  color: var(--kc-gray-900);
  background: var(--kc-gray-100);
}

.nav-link i {
  font-size: 14px;
}

/* ── Sub-Header Tab-Navigation ── */
.header-center {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.header-center a {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--kc-gray-500);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}

.header-center a:hover {
  color: var(--kc-gray-900);
  background: var(--kc-gray-100);
}

.header-center a.active {
  color: var(--kc-blue);
  background: var(--kc-blue-light);
  font-weight: 600;
}

/* Header-Rechts: Icon-Buttons */
.header-right {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.icon-button {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kc-gray-500);
  transition: color var(--transition), background var(--transition);
}

.icon-button:hover {
  color: var(--kc-gray-900);
  background: var(--kc-gray-100);
}

.icon-button i {
  font-size: 15px;
  pointer-events: none;
}

/* ── Sidebar Navigation ── */
.sidebar-header {
  padding: 12px;
  border-bottom: 1px solid var(--kc-gray-200);
  flex-shrink: 0;
}

.btn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  background: var(--kc-black);
  color: var(--kc-white);
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  transition: background var(--transition);
  white-space: nowrap;
  overflow: hidden;
}

.btn-cta:hover {
  background: var(--kc-gray-700);
}

.sidebar.collapsed .btn-cta span {
  display: none;
}

.sidebar.collapsed .btn-cta {
  padding: 9px 0;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 0;
}

.sidebar-section {
  margin-bottom: 4px;
}

.sidebar-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--kc-gray-400);
  padding: 8px 16px 4px;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar.collapsed .sidebar-section-title {
  display: none;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  font-size: 13px;
  color: var(--kc-gray-700);
  border-radius: 0;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
  overflow: hidden;
}

.nav-item:hover {
  background: var(--kc-gray-100);
  color: var(--kc-gray-900);
}

.nav-item.active {
  background: var(--kc-blue-light);
  color: var(--kc-blue);
  font-weight: 600;
}

.nav-item i {
  width: 18px;
  text-align: center;
  font-size: 14px;
  flex-shrink: 0;
}

.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 7px 0;
}

.sidebar.collapsed .nav-item span {
  display: none;
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 10px 12px;
  border-top: 1px solid var(--kc-gray-200);
  flex-shrink: 0;
}

.collapse-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--kc-gray-400);
  font-size: 12px;
  padding: 6px 4px;
  width: 100%;
  border-radius: var(--radius-sm);
  transition: color var(--transition);
  white-space: nowrap;
  overflow: hidden;
}

.collapse-btn:hover {
  color: var(--kc-gray-700);
}

.sidebar.collapsed .collapse-btn span {
  display: none;
}

.sidebar.collapsed .collapse-btn {
  justify-content: center;
}


/* ═══════════════════════════════════════════════════════════
   5. FILTER-BAR ELEMENTE
   ═══════════════════════════════════════════════════════════ */
.filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--kc-gray-500);
  white-space: nowrap;
}

.filter-group select,
.filter-bar select {
  padding: 5px 8px;
  border: 1px solid var(--kc-gray-200);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--kc-gray-900);
  background: var(--kc-white);
  cursor: pointer;
  min-width: 100px;
}

.filter-group select:focus,
.filter-bar select:focus {
  outline: 2px solid var(--kc-blue);
  outline-offset: 1px;
}

.toolbar-spacer {
  flex: 1;
}


/* ═══════════════════════════════════════════════════════════
   6. TABELLEN
   Sticky Header + sticky linke Spalte
   ═══════════════════════════════════════════════════════════ */
.table-container {
  overflow: auto;
  /* Höhe = Viewport minus alle fixen Elemente */
  max-height: calc(100vh - var(--header-height) - var(--subheader-height) - var(--filterbar-height) - 40px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--kc-gray-200);
  background: var(--kc-white);
}

.table-container.no-filterbar {
  max-height: calc(100vh - var(--header-height) - var(--subheader-height) - 40px);
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--kc-white);
}

/* ── Sticky Tabellenheader ── */
thead th {
  position: sticky;
  top: 0;
  background: var(--kc-gray-50);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--kc-gray-500);
  padding: 10px 12px;
  border-bottom: 1px solid var(--kc-gray-200);
  white-space: nowrap;
  z-index: 10;
}

/* ── Sticky linke Spalte ── */
thead th:first-child,
tbody td:first-child {
  position: sticky;
  left: 0;
  background: var(--kc-white);
  z-index: 5;
  border-right: 1px solid var(--kc-gray-200);
  min-width: 220px;
  max-width: 320px;
}

thead th:first-child {
  background: var(--kc-gray-50);
  z-index: 15; /* Ecke: über allem */
}

/* Schatten-Linie wenn gescrollt */
thead th:first-child::after,
tbody td:first-child::after {
  content: '';
  position: absolute;
  top: 0;
  right: -6px;
  bottom: 0;
  width: 6px;
  background: linear-gradient(to right, rgba(0,0,0,0.04), transparent);
  pointer-events: none;
}

/* ── Zellen ── */
tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--kc-gray-100);
  font-size: 13px;
  vertical-align: middle;
  white-space: nowrap;
  background: var(--kc-white);
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover td {
  background: var(--kc-gray-50) !important;
}

tbody tr:hover td:first-child {
  background: var(--kc-gray-50) !important;
}

/* Zahlen rechtsbündig */
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ── Einrückung GuV ── */
.guv-pos {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
}

.guv-toggle {
  width: 20px;
  height: 20px;
  border: 1px solid var(--kc-gray-200);
  border-radius: 5px;
  background: var(--kc-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  transition: background var(--transition);
}

.guv-toggle:hover {
  background: var(--kc-gray-100);
}

.guv-toggle.hidden {
  visibility: hidden;
}

.guv-row.collapsed-child {
  display: none;
}

/* Summenzeilen */
.summary-row td {
  background: var(--kc-summary-bg) !important;
  color: var(--kc-summary-text);
  font-weight: 700;
}

/* Trennzeilen */
.section-divider td {
  border-top: 3px solid var(--kc-gray-200);
  background: var(--kc-gray-50) !important;
}

/* Ebeneneinrückung */
.level-0 { padding-left: 0; }
.level-1 { padding-left: 16px; }
.level-2 { padding-left: 32px; }
.level-3 { padding-left: 48px; }


/* ═══════════════════════════════════════════════════════════
   7. KPI-BOXEN (Dashboard / Profitabilität / Liquidität)
   ═══════════════════════════════════════════════════════════ */
.dashboard {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.kpi-box {
  flex: 1 1 340px;
  max-width: 420px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--kc-gray-200);
  background: var(--kc-white);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.kpi-top {
  background: var(--kc-gray-50);
  padding: 14px 16px;
  border-bottom: 1px solid var(--kc-gray-200);
}

.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.kpi-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--kc-gray-700);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.kpi-change {
  font-size: 12px;
  font-weight: 600;
}

.kpi-change.positive { color: var(--kc-green); }
.kpi-change.negative { color: var(--kc-red); }

.kpi-values {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 10px;
}

.kpi-main {
  font-size: 22px;
  font-weight: 700;
  color: var(--kc-gray-900);
  font-variant-numeric: tabular-nums;
}

.kpi-sub {
  font-size: 11px;
  color: var(--kc-gray-500);
  text-align: right;
  line-height: 1.4;
}

.forecast-bar {
  background: var(--kc-gray-200);
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}

.forecast-fill {
  background: var(--kc-black);
  height: 100%;
  border-radius: 2px;
}

.forecast-info {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--kc-gray-500);
}

.kpi-bottom {
  padding: 12px 14px;
}

.mini-chart {
  width: 100%;
  height: 120px;
  max-height: 120px;
  margin-bottom: 10px;
  display: block;
}

/* KPI-Tabelle in Box */
.kpi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.kpi-table th {
  padding: 6px 4px;
  border-bottom: 1px solid var(--kc-black);
  text-align: right;
  font-weight: 700;
  color: var(--kc-gray-900);
  white-space: nowrap;
}

.kpi-table th:first-child {
  text-align: left;
}

.kpi-table td {
  padding: 6px 4px;
  border-bottom: 1px solid var(--kc-gray-100);
  text-align: right;
  white-space: nowrap;
}

.kpi-table td:first-child {
  text-align: left;
  color: var(--kc-gray-700);
}

.kpi-table tr:last-child td {
  border-bottom: none;
}


/* ═══════════════════════════════════════════════════════════
   8. KPI-KARTEN (Lagebericht – Kennzahlen mit Bar)
   ═══════════════════════════════════════════════════════════ */
.kategorie {
  flex: 1 1 280px;
  border: 1px solid var(--kc-gray-200);
  border-radius: var(--radius-lg);
  background: var(--kc-white);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.kategorie > .header {
  background: var(--kc-gray-50);
  border-bottom: 1px solid var(--kc-gray-200);
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--kc-gray-700);
  display: flex;
  align-items: center;
  gap: 6px;
}

.content-kategorie {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kpi-card {
  background: var(--kc-gray-50);
  border: 1px solid var(--kc-gray-200);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

.kpi-card .kpi-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--kc-gray-500);
  margin-bottom: 3px;
  text-transform: none;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.kpi-card .kpi-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--kc-gray-900);
  font-variant-numeric: tabular-nums;
}

/* Ampel-Bar */
.bar {
  position: relative;
  height: 3px;
  background: linear-gradient(to right, #EF4444 30%, #F59E0B 30% 70%, #22C55E 70%);
  border-radius: 2px;
  margin-top: 6px;
}

.marker {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 11px;
  background: var(--kc-black);
  border-radius: 1px;
}

/* Info-Icon */
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  background: var(--kc-gray-300);
  color: var(--kc-white);
  font-size: 8px;
  font-weight: 700;
  border-radius: 50%;
  cursor: default;
  flex-shrink: 0;
}

/* Tooltip */
#tooltip {
  position: fixed;
  padding: 6px 10px;
  background: var(--kc-gray-900);
  color: var(--kc-white);
  font-size: 11px;
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 9999;
  max-width: 220px;
  line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════════
   9. IMPORT
   ═══════════════════════════════════════════════════════════ */
.import-box {
  background: var(--kc-white);
  border: 1px solid var(--kc-gray-200);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 820px;
  box-shadow: var(--shadow-sm);
  font-size: 13px;
  line-height: 1.6;
}

.import-box p {
  margin-bottom: 12px;
  color: var(--kc-gray-700);
}

.import-box strong {
  color: var(--kc-gray-900);
}

.import-options {
  margin: 14px 0;
  display: grid;
  gap: 10px;
  max-width: 560px;
}

.upload-area {
  margin-top: 14px;
  padding: 28px 20px;
  border: 2px dashed var(--kc-gray-300);
  border-radius: var(--radius-lg);
  text-align: center;
  background: var(--kc-gray-50);
  transition: background var(--transition), border-color var(--transition);
  position: relative;
}

.upload-area.dragover {
  background: var(--kc-blue-light);
  border-color: var(--kc-blue);
}

.upload-area p {
  color: var(--kc-gray-500);
  margin-bottom: 6px;
}

.upload-area button {
  margin-top: 10px;
  padding: 7px 16px;
  background: var(--kc-black);
  color: var(--kc-white);
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
}

.upload-area button:hover {
  background: var(--kc-gray-700);
}

.upload-button {
  margin-top: 14px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 700;
  background: var(--kc-black);
  color: var(--kc-white);
  border: none;
  border-radius: var(--radius-md);
  display: block;
  transition: background var(--transition);
}

.upload-button:hover {
  background: var(--kc-gray-700);
}

.upload-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hint {
  font-size: 11px;
  color: var(--kc-gray-400);
}

.datev-logo {
  position: absolute;
  top: 20px;
  right: 20px;
}

.datev-logo img {
  height: 24px;
  width: auto;
  opacity: .6;
}


/* ═══════════════════════════════════════════════════════════
   10. BUTTONS & FORM-ELEMENTE
   ═══════════════════════════════════════════════════════════ */

/* Basis-Button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid var(--kc-gray-200);
  background: var(--kc-white);
  color: var(--kc-gray-900);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn:hover {
  border-color: var(--kc-gray-400);
  background: var(--kc-gray-50);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--kc-black);
  border-color: var(--kc-black);
  color: var(--kc-white);
}

.btn-primary:hover {
  background: var(--kc-gray-700);
  border-color: var(--kc-gray-700);
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  font-family: var(--font);
  font-size: 13px;
  color: var(--kc-gray-900);
  background: var(--kc-white);
  border: 1px solid var(--kc-gray-200);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  transition: border-color var(--transition);
  width: 100%;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--kc-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Pill / Badge */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--kc-gray-200);
  background: var(--kc-white);
  color: var(--kc-gray-700);
}

.pill.default {
  background: var(--kc-black);
  border-color: var(--kc-black);
  color: var(--kc-white);
}

/* Card */
.card {
  background: var(--kc-white);
  border: 1px solid var(--kc-gray-200);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}

.card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--kc-gray-900);
  margin-bottom: 14px;
}

.page-wrap {
  display: grid;
  gap: 16px;
}

.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.toolbar label {
  font-size: 12px;
  font-weight: 600;
  color: var(--kc-gray-500);
}

.table-wrap {
  border: 1px solid var(--kc-gray-200);
  border-radius: var(--radius-md);
  overflow: auto;
}


/* ═══════════════════════════════════════════════════════════
   11. MODALS
   ═══════════════════════════════════════════════════════════ */
.settings-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  backdrop-filter: blur(2px);
}

.settings-modal-backdrop.open {
  display: flex;
}

.settings-modal {
  width: min(480px, calc(100vw - 32px));
  background: var(--kc-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 20px;
}

.settings-modal h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--kc-gray-900);
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.settings-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

.settings-section {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13px;
}

.settings-section label {
  color: var(--kc-gray-700);
  font-weight: 500;
  white-space: nowrap;
}

.settings-section select {
  width: auto;
  min-width: 80px;
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--kc-gray-200);
}


/* ═══════════════════════════════════════════════════════════
   12. UTILITIES
   ═══════════════════════════════════════════════════════════ */

/* Delta-Farben */
.delta-positive { color: var(--kc-green); font-weight: 700; }
.delta-negative { color: var(--kc-red);   font-weight: 700; }

/* Lade- und Fehlerzustände */
.loading-row td,
.error-row td,
.empty-row td {
  padding: 20px 16px;
  color: var(--kc-gray-500);
  font-size: 13px;
}

.error-row td {
  color: var(--kc-red);
}

/* Muted Text */
.muted {
  color: var(--kc-gray-500);
  font-size: 12px;
}

/* Status-Box */
.status-box {
  margin-top: 10px;
  font-size: 13px;
  color: var(--kc-gray-700);
}

/* Login-Spezifisch */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--kc-gray-100);
}

.login-box {
  background: var(--kc-white);
  border: 1px solid var(--kc-gray-200);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow-md);
}

.login-box h2 {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  color: var(--kc-gray-900);
}

.login-error {
  color: var(--kc-red);
  font-size: 13px;
  text-align: center;
  margin-bottom: 12px;
}

.login-forgot {
  text-align: right;
  font-size: 12px;
  color: var(--kc-gray-500);
  margin-bottom: 14px;
  cursor: pointer;
}

.login-forgot:hover {
  color: var(--kc-blue);
}


/* ═══════════════════════════════════════════════════════════
   13. RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .sidebar {
    width: var(--sidebar-collapsed-width);
  }

  .content,
  .page-header,
  .filter-bar {
    left: var(--sidebar-collapsed-width);
    margin-left: var(--sidebar-collapsed-width);
  }

  .sidebar .sidebar-section-title,
  .sidebar .nav-item span,
  .sidebar .btn-cta span,
  .sidebar .collapse-btn span {
    display: none;
  }

  .sidebar .nav-item {
    justify-content: center;
    padding: 7px 0;
  }

  .sidebar .btn-cta {
    padding: 9px 0;
  }

  .kpi-box {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}