/* ============================================================
   FlowKater — Karten-Design
   ============================================================ */

.task-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  cursor: pointer;
  transition:
    background var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast),
    border-color var(--transition-fast);
  position: relative;
  overflow: hidden;
  user-select: none;
}

/* Hover — Desktop */
@media (hover: hover) {
  .task-card:hover {
    background: var(--color-surface-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
}

/* Tap — Mobile/Tablet Ripple-Effekt */
.task-card:active { transform: scale(0.985); }

/* Vollständig-Markierung */
.task-card.completed {
  opacity: 0.55;
}

.task-card.completed .task-card-title {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

/* Drag-Ghost */
.task-card.dragging {
  opacity: 0.4;
  transform: rotate(2deg) scale(0.97);
  box-shadow: var(--shadow-xl);
}

/* ── Karten-Header ── */
.task-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.task-card-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--color-border-light);
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-card-checkbox:hover {
  border-color: var(--color-primary-light);
}

.task-card-checkbox.checked {
  border-color: var(--color-success);
  background: var(--color-success);
}

.task-card-checkbox.checked::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
}

.task-card-title {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.45;
  flex: 1;
  word-break: break-word;
}

/* ── Karten-Meta ── */
.task-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Datum-Badge */
.task-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.task-date-badge svg { width: 12px; height: 12px; }

.task-date-badge.today { color: var(--color-warning); }
.task-date-badge.overdue { color: var(--color-danger); }

/* ── Subtask-Fortschrittsbalken ── */
.subtask-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.subtask-bar {
  flex: 1;
  height: 3px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.subtask-bar-fill {
  height: 100%;
  background: var(--color-primary-light);
  border-radius: var(--radius-full);
  transition: width var(--transition-normal);
}

.subtask-label {
  font-size: 10px;
  color: var(--color-text-dim);
  white-space: nowrap;
}

/* ── Badges auf Karten ── */
.task-card-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

/* Privat-Badge: Schloss + Kater-Icon */
.private-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--color-primary-light);
  opacity: 0.8;
}

.private-badge svg { width: 11px; height: 11px; }

/* Geteilt-Badge */
.shared-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--color-text-muted);
}

.shared-badge svg { width: 12px; height: 12px; }

/* Telegram-Badge */
.telegram-badge {
  color: #2AABEE;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.telegram-badge svg { width: 12px; height: 12px; }

/* Priorität-Punkt */
.priority-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.priority-dot.high   { background: var(--color-danger); }
.priority-dot.normal { background: var(--color-primary-light); }
.priority-dot.low    { background: var(--color-text-dim); }

/* ── Ersteller-Avatar auf geteilten Karten ── */
.task-card-author {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Wisch-Gesten-Indikatoren (Mobile) ── */
.swipe-action-left,
.swipe-action-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}

.swipe-action-left  { left: 0; background: linear-gradient(to right, rgba(34, 197, 94, 0.25), transparent); }
.swipe-action-right { right: 0; background: linear-gradient(to left, rgba(27, 79, 204, 0.25), transparent); }

/* ── Schnell-Erfassen-Karte ── */
.quick-add-card {
  background: var(--color-surface);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.quick-add-card:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-light);
  background: rgba(27, 79, 204, 0.05);
}

.quick-add-card svg { width: 18px; height: 18px; }

/* ── Tag-Chips ── */
.task-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

/* ── Karten-Liste (kompaktes Layout) ── */
.task-list .task-card {
  border-radius: 0;
  border-left-width: 4px;
  border-bottom: none;
}

.task-list .task-card:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.task-list .task-card:last-child  { border-radius: 0 0 var(--radius-md) var(--radius-md); border-bottom: 1px solid var(--color-border); }
.task-list .task-card:only-child  { border-radius: var(--radius-md); border-bottom: 1px solid var(--color-border); }

/* Projekt-Farb-Akzent — wird per JS gesetzt via style */
.task-card[data-project-color] {
  border-left-color: attr(data-project-color);
}