/* ═══════════════════════════════════════════════
   Workflow-Guidance (Leitsystem) — Shared Styles
   ═══════════════════════════════════════════════ */

/* ── Banner ── */
.wg-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin: 0 0 2px;
  border-radius: 8px;
  font-size: 12px;
  position: relative;
  line-height: 1.5;
}
.wg-banner--urgent  { background: linear-gradient(135deg, #fce4ec 0%, #fff 100%); border: 1px solid #f8bbd0; color: #c62828; }
.wg-banner--attention { background: linear-gradient(135deg, #fff8e1 0%, #fff 100%); border: 1px solid #ffe0b2; color: #e65100; }
.wg-banner--info    { background: linear-gradient(135deg, #e3f2fd 0%, #fff 100%); border: 1px solid #bbdefb; color: #1565c0; }
.wg-banner--ok      { background: linear-gradient(135deg, #e8f5e9 0%, #fff 100%); border: 1px solid #c8e6c9; color: #2e7d32; }
.wg-banner--action  { background: linear-gradient(135deg, #f3e8ff 0%, #fff 100%); border: 1px solid #e1bee7; color: #7b1fa2; }

.wg-banner__emoji   { font-size: 18px; flex-shrink: 0; margin-top: -1px; }
.wg-banner__text    { flex: 1; }
.wg-banner__headline { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.wg-banner__detail  { font-size: 11px; opacity: 0.85; }
.wg-banner__meta    { font-size: 10px; opacity: 0.6; margin-top: 4px; }

/* Urgency pulsing dot */
.wg-urgency-dot {
  position: absolute; top: 10px; right: 10px;
  width: 10px; height: 10px; border-radius: 50%;
}
.wg-urgency-dot--red    { background: #e74c3c; animation: wg-pulse-red 1.5s infinite; }
.wg-urgency-dot--orange { background: #f39c12; animation: wg-pulse-orange 2s infinite; }

@keyframes wg-pulse-red {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(231,76,60,0.4); }
  50%      { opacity: 0.8; box-shadow: 0 0 0 6px rgba(231,76,60,0); }
}
@keyframes wg-pulse-orange {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* ── Actions (Nächste Schritte) ── */
.wg-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.wg-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  background: #fff;
  font-size: 12px;
}
.wg-action:hover {
  border-color: #2980b9;
  background: #f8fbff;
  transform: translateX(2px);
}
.wg-action--primary       { border-color: #27ae60; background: #e8f5e9; }
.wg-action--primary:hover { background: #d7f0db; }
.wg-action--primary .wg-action__label { color: #2e7d32; font-weight: 600; }

.wg-action--warn       { border-color: #ffe0b2; background: #fff8e1; }
.wg-action--warn:hover { background: #fff3cd; }
.wg-action--warn .wg-action__label { color: #e65100; font-weight: 600; }

.wg-action--danger       { border-color: #f8bbd0; background: #fce4ec; }
.wg-action--danger:hover { background: #f8d7da; }
.wg-action--danger .wg-action__label { color: #e74c3c; font-weight: 600; }

.wg-action__icon    { font-size: 16px; width: 24px; text-align: center; flex-shrink: 0; }
.wg-action__content { flex: 1; }
.wg-action__label   { font-size: 12px; font-weight: 500; color: #333; }
.wg-action__desc    { font-size: 10px; color: #999; }
.wg-action__arrow   { color: #ccc; font-size: 14px; }

.wg-action__badge {
  font-size: 9px; font-weight: 700;
  padding: 1px 6px; border-radius: 3px; margin-left: 4px;
}
.wg-action__badge--ai  { background: #f3e8ff; color: #9b59b6; }
.wg-action__badge--new { background: #e3f2fd; color: #2980b9; }

/* ── Context Chips ── */
.wg-context {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.wg-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #fafafa;
  border-radius: 5px;
  font-size: 10px;
  color: #666;
}
.wg-chip b { font-weight: 600; }
.wg-chip--alert b { color: #e74c3c; }
.wg-chip--warn b  { color: #f39c12; }
.wg-chip--ok b    { color: #27ae60; }

/* ── Finance KPIs ── */
.wg-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  overflow: hidden;
}
.wg-kpi {
  padding: 10px 12px;
  text-align: center;
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}
.wg-kpi:nth-child(2n)  { border-right: none; }
.wg-kpi:nth-child(n+3) { border-bottom: none; }
.wg-kpi__label { font-size: 9px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; }
.wg-kpi__value { font-size: 15px; font-weight: 700; margin-top: 2px; color: #333; }
.wg-kpi__value--big   { font-size: 18px; }
.wg-kpi__value--green { color: #27ae60; }
.wg-kpi__value--red   { color: #e74c3c; }
.wg-kpi__value--muted { color: #999; }
.wg-kpi__sub { font-size: 9px; color: #bbb; margin-top: 1px; }
.wg-kpi--highlight { background: #fafffe; }

.wg-kpi-progress {
  height: 5px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}
.wg-kpi-progress__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
  background: #e8e8e8;
}
.wg-kpi-progress__fill--green { background: #27ae60; }
.wg-kpi-progress__fill--orange { background: #f39c12; }

/* ── Send Channels ── */
.wg-channels {
  display: flex;
  gap: 6px;
}
.wg-channel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 6px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  background: #fff;
  font-size: 10px;
  cursor: pointer;
  color: #666;
  font-weight: 500;
  transition: all 0.15s;
}
.wg-channel:hover { background: #f5f5f5; color: #333; border-color: #ccc; }
.wg-channel__icon { font-size: 14px; }

/* ── Section Label ── */
.wg-section {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #999;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wg-section--purple { color: #9b59b6; }
.wg-section--danger { color: #e74c3c; }

/* ── Panel Container ── */
.wg-panel {
  padding: 14px;
  border-bottom: 1px solid #f0f0f0;
}
.wg-panel:last-child { border-bottom: none; }

/* ── Compact Timeline ── */
.wg-timeline { display: flex; flex-direction: column; }
.wg-tl-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  position: relative;
  font-size: 11px;
}
.wg-tl-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}
.wg-tl-dot--green  { background: #27ae60; }
.wg-tl-dot--blue   { background: #2980b9; }
.wg-tl-dot--gray   { background: #ddd; }
.wg-tl-dot--orange { background: #f39c12; }
.wg-tl-dot--red    { background: #e74c3c; }

.wg-tl-text { flex: 1; color: #666; }
.wg-tl-text b { color: #333; font-weight: 600; }
.wg-tl-time { color: #bbb; font-size: 10px; flex-shrink: 0; }

.wg-tl-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 16px;
  width: 1px;
  height: calc(100% - 6px);
  background: #e8e8e8;
}

/* ── Loading ── */
.wg-loading {
  padding: 20px;
  text-align: center;
  color: #999;
  font-style: italic;
  font-size: 12px;
}