/* Aktiver Link in der Volt-Sidebar: grauer Button */
.sidebar .nav-link.active {
  background-color: #374151;   /* dunkles Grau */
  color: #f9fafb;
  border-radius: 0.5rem;
}

/* Icon + Text im aktiven Link sollen die gleiche Farbe haben */
.sidebar .nav-link.active .sidebar-text,
.sidebar .nav-link.active .sidebar-icon svg {
  color: inherit;
}

.sidebar-status-fixed {
    position: fixed;
    bottom: 15px;
    left: 0;
    width: 260px;          /* gleiche Breite wie .sidebar in volt.css */
    padding: 0 1.5rem;     /* entspricht px-4 in der Sidebar */
    z-index: 1030;         /* damit es über dem Sidebar-Content liegt */
}
.user-status-dropdown .dropdown-menu {
    min-width: 220px;
}
/* Button für Phase in Kachel */
  .section-title { display:flex; align-items:baseline; gap:.75rem; }
  .section-title small { color: var(--gray-600); }
  .toolbar .form-control { max-width: 360px; }
  .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); align-items:center; justify-content:center; }
  .modal { background: #fff; padding: 1rem 1.25rem; border-radius: .75rem; max-width: 640px; width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,.2);}
  .modal .grid { display:grid; grid-template-columns: 1fr 1fr; gap:.5rem 1rem; margin:.75rem 0 1rem; }
  .table-wrapper + .table-wrapper { margin-top: 1rem; }

  /* NEU: Phase wie ein kleiner Button in hellgrau */
.phase-pill {
       margin-top: 18px; 
  display: flex;
  align-items: center;
  justify-content: center;

  height: 42px;
  width: 90%;

  padding: 0 0.75rem;
  border-radius: 999px;

  font-size: 0.85rem;
  font-weight: 600;
  color: #1a1a1a;

  backdrop-filter: blur(6px);
  background: rgba(255, 255, 255, 0.6);

  border: 1px solid rgba(180, 180, 180, 0.65);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.8),
    inset 0 -1px 1px rgba(0,0,0,0.08),
    0 2px 6px rgba(0,0,0,0.12);
}
      .phase-pill--signal {
      background:#16a34a;
      color:#f9fafb;
    }
  /* Name in den Kacheln: immer genau 2 Zeilen Höhe (max. 2 sichtbare Zeilen) */
    .card-title-name {
       margin-top: 28px; 
       font-size: .9rem;
      line-height: 1.2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* max. 2 Zeilen */
      overflow: hidden;
      min-height: calc(1.2em * 2);
      max-height: calc(1.2em * 2);
             }

/* Info-Kachel – Blauer Akzentstreifen links */
.info-card {
  background-color: #f8f8fa;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35); 
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
  position: relative;
  overflow: hidden;
}

/* linker Akzentbalken */
.info-card::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;   
  width: 4px;
  left: 0;

  background: linear-gradient(
    180deg,
    #2361ce 0%,             /* Logo-Blau */
    rgba(35, 97, 206, 0.1) 100%
  );
}
/* linker Akzentbalken ohne Trend*/
.info-card-inactive::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;   
  width: 4px;
  left: 0;

  background: linear-gradient(
    180deg,
    rgba(148, 163, 184, 0.35),
    rgba(35, 97, 206, 0.1) 100%
  );
}
.ki-badge-topright {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 10;
  pointer-events: none;
}

/* Container für das KI-Icon mit Zahl */
.ki-score {
  color: #1F2937;
  font-size: 0.8rem;
  font-weight: 400;
}
.ki-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  background: radial-gradient(
    circle at 30% 30%,
    #2361ce,
    #2b2d30 70%
  );
}
    .ki-icon {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:2rem;
      height:2rem;
      border-radius:999px;
      font-size:.8rem;
      font-weight:600;
    }
    .ki-icon--pulse {
      animation: pulse 2s infinite;
    }
    .ki-icon--neutral {
      background:#e5e7eb;
      color:#111827;
      animation:none;
    }

    @keyframes pulse {
      0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59,130,246,.4); }
      70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(59,130,246,0); }
      100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59,130,246,0); }
    }

    .ki-label {
      font-size: .85rem;
    }