/**
 * BrainDump V3 - Entity Extraction Styles
 *
 * @version     1.0.0
 * @date        2026-01-08
 *
 * CHANGELOG:
 * v1.0.0 (2026-01-08):
 *   - Initial version
 *   - Confidence-Level Farben (Gruen/Gelb/Orange/Rot)
 *   - Entity-Grid und Cards
 *   - Review-Buttons fuer niedrige Confidence
 *
 * PURPOSE:
 * Styles fuer die Entity-Anzeige im V3 Detail Panel.
 * Folgt dem Perplexity-Design mit Confidence-basierter Farbcodierung.
 *
 * CONFIDENCE LEVELS:
 * - AUTO_ACCEPT (>= 0.92): Gruen - Automatisch akzeptiert
 * - SUGGESTED (>= 0.75): Gelb - Mit Vorschlag anzeigen
 * - REVIEW_NEEDED (>= 0.60): Orange - Review erforderlich
 * - MANUAL_REQUIRED (< 0.60): Rot - Manuelle Pruefung
 */

/* ═══════════════════════════════════════════════════════════════════════════
   ENTITY SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.v3-entities-section {
  margin-top: var(--v3-spacing-lg, 24px);
}

.v3-entities-section h4 {
  margin-bottom: var(--v3-spacing-md, 16px);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--v3-text-secondary, #888);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENTITY GRID
   ═══════════════════════════════════════════════════════════════════════════ */

.v3-entities-grid {
  display: grid;
  gap: var(--v3-spacing-sm, 12px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENTITY ITEM (Card)
   ═══════════════════════════════════════════════════════════════════════════ */

.v3-entity-item {
  background: var(--v3-surface-secondary, rgba(255, 255, 255, 0.05));
  border-radius: var(--v3-radius-md, 8px);
  padding: var(--v3-spacing-md, 16px);
  border-left: 4px solid transparent;
  transition: all 0.2s ease;
}

.v3-entity-item:hover {
  background: var(--v3-surface-tertiary, rgba(255, 255, 255, 0.08));
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONFIDENCE LEVEL COLORS (aus Perplexity-Dokument)
   ═══════════════════════════════════════════════════════════════════════════ */

/* AUTO_ACCEPT: Gruen - >= 92% */
.v3-entity--high,
.v3-entity--AUTO_ACCEPT {
  border-left-color: #10B981;
  background: rgba(16, 185, 129, 0.08);
}

.v3-entity--high:hover,
.v3-entity--AUTO_ACCEPT:hover {
  background: rgba(16, 185, 129, 0.12);
}

/* SUGGESTED: Gelb - >= 75% */
.v3-entity--medium,
.v3-entity--SUGGESTED {
  border-left-color: #F59E0B;
  background: rgba(245, 158, 11, 0.08);
}

.v3-entity--medium:hover,
.v3-entity--SUGGESTED:hover {
  background: rgba(245, 158, 11, 0.12);
}

/* REVIEW_NEEDED: Orange - >= 60% */
.v3-entity--low,
.v3-entity--REVIEW_NEEDED {
  border-left-color: #F97316;
  background: rgba(249, 115, 22, 0.08);
}

.v3-entity--low:hover,
.v3-entity--REVIEW_NEEDED:hover {
  background: rgba(249, 115, 22, 0.12);
}

/* MANUAL_REQUIRED: Rot - < 60% */
.v3-entity--critical,
.v3-entity--MANUAL_REQUIRED {
  border-left-color: #EF4444;
  background: rgba(239, 68, 68, 0.08);
}

.v3-entity--critical:hover,
.v3-entity--MANUAL_REQUIRED:hover {
  background: rgba(239, 68, 68, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENTITY HEADER (Type + Confidence)
   ═══════════════════════════════════════════════════════════════════════════ */

.v3-entity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--v3-spacing-xs, 8px);
}

.v3-entity-type {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--v3-text-tertiary, #666);
  background: var(--v3-surface-tertiary, rgba(255, 255, 255, 0.1));
  padding: 2px 8px;
  border-radius: 4px;
}

.v3-entity-confidence {
  font-size: 0.75rem;
  cursor: help;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENTITY VALUE
   ═══════════════════════════════════════════════════════════════════════════ */

.v3-entity-value {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--v3-text-primary, #fff);
  word-break: break-word;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENTITY ACTIONS (Accept/Edit buttons fuer niedrige Confidence)
   ═══════════════════════════════════════════════════════════════════════════ */

.v3-entity-actions {
  display: flex;
  gap: var(--v3-spacing-sm, 12px);
  margin-top: var(--v3-spacing-sm, 12px);
  padding-top: var(--v3-spacing-sm, 12px);
  border-top: 1px solid var(--v3-border, rgba(255, 255, 255, 0.1));
}

.v3-entity-btn {
  flex: 1;
  padding: var(--v3-spacing-xs, 8px) var(--v3-spacing-sm, 12px);
  border: none;
  border-radius: var(--v3-radius-sm, 6px);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.v3-entity-btn--accept {
  background: var(--v3-accent, #10B981);
  color: white;
}

.v3-entity-btn--accept:hover {
  background: var(--v3-accent-hover, #059669);
  transform: translateY(-1px);
}

.v3-entity-btn--edit {
  background: var(--v3-surface-tertiary, rgba(255, 255, 255, 0.1));
  color: var(--v3-text-primary, #fff);
  border: 1px solid var(--v3-border, rgba(255, 255, 255, 0.2));
}

.v3-entity-btn--edit:hover {
  background: var(--v3-surface-hover, rgba(255, 255, 255, 0.15));
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXTRACTION META (Document Type, Overall Confidence)
   ═══════════════════════════════════════════════════════════════════════════ */

.v3-extraction-meta {
  margin-top: var(--v3-spacing-md, 16px);
  padding-top: var(--v3-spacing-sm, 12px);
  border-top: 1px solid var(--v3-border, rgba(255, 255, 255, 0.1));
  font-size: 0.75rem;
  color: var(--v3-text-tertiary, #666);
  display: flex;
  gap: var(--v3-spacing-md, 16px);
  flex-wrap: wrap;
}

.v3-extraction-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUGGESTED ACTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.v3-suggested-actions {
  margin-top: var(--v3-spacing-lg, 24px);
}

.v3-suggested-actions h4 {
  margin-bottom: var(--v3-spacing-sm, 12px);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--v3-text-secondary, #888);
}

.v3-action-list {
  display: flex;
  flex-direction: column;
  gap: var(--v3-spacing-xs, 8px);
}

.v3-action-item {
  background: var(--v3-surface-secondary, rgba(255, 255, 255, 0.05));
  border-radius: var(--v3-radius-sm, 6px);
  padding: var(--v3-spacing-sm, 12px) var(--v3-spacing-md, 16px);
  display: flex;
  align-items: center;
  gap: var(--v3-spacing-sm, 12px);
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.v3-action-item:hover {
  background: var(--v3-surface-tertiary, rgba(255, 255, 255, 0.08));
  border-color: var(--v3-accent, #10B981);
  transform: translateX(4px);
}

.v3-action-item__icon {
  font-size: 1.2rem;
}

.v3-action-item__text {
  font-size: 0.9rem;
  color: var(--v3-text-primary, #fff);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .v3-entity-item,
.theme-light .v3-entity-item {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .v3-entity-item:hover,
.theme-light .v3-entity-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .v3-entity--high,
[data-theme="light"] .v3-entity--AUTO_ACCEPT,
.theme-light .v3-entity--high,
.theme-light .v3-entity--AUTO_ACCEPT {
  background: rgba(16, 185, 129, 0.1);
}

[data-theme="light"] .v3-entity--medium,
[data-theme="light"] .v3-entity--SUGGESTED,
.theme-light .v3-entity--medium,
.theme-light .v3-entity--SUGGESTED {
  background: rgba(245, 158, 11, 0.1);
}

[data-theme="light"] .v3-entity--low,
[data-theme="light"] .v3-entity--REVIEW_NEEDED,
.theme-light .v3-entity--low,
.theme-light .v3-entity--REVIEW_NEEDED {
  background: rgba(249, 115, 22, 0.1);
}

[data-theme="light"] .v3-entity--critical,
[data-theme="light"] .v3-entity--MANUAL_REQUIRED,
.theme-light .v3-entity--critical,
.theme-light .v3-entity--MANUAL_REQUIRED {
  background: rgba(239, 68, 68, 0.1);
}

[data-theme="light"] .v3-entity-value,
.theme-light .v3-entity-value {
  color: var(--v3-text-primary, #1a1a2e);
}