/* ========================================
   Suggestion Groups - Accordion Style
   ======================================== */

/* Group Container */
.suggestion-group {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
    overflow: hidden;
    transition: all 0.2s ease;
}

/* Group Header */
.suggestion-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border-left: 4px solid var(--color-orange);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast);
}

.suggestion-group-header:hover {
    background: var(--bg-hover);
}

.suggestion-group-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 1;
    min-width: 0;
}

.group-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Group Actions */
.suggestion-group-actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.btn-batch-apply {
    background: var(--btn-apply);
    color: white;
    font-size: 0.8rem;
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    font-weight: 600;
}

.btn-batch-apply:hover {
    background: var(--btn-apply-hover);
    filter: brightness(1.08);
}

.btn-batch-reject {
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-batch-reject:hover {
    background: var(--bg-hover);
    color: var(--btn-reject-hover);
    border-color: var(--btn-reject);
}

.btn-collapse {
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.7rem;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-collapse:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Group Body */
.suggestion-group-body {
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0;
}

.suggestion-group.collapsed .suggestion-group-body {
    max-height: 0 !important;
}

.suggestion-group:not(.collapsed) .suggestion-group-body {
    padding: var(--space-sm);
    padding-top: 0;
}

/* Cards inside groups get reduced margin */
.suggestion-group-body .suggestion-card {
    margin-bottom: var(--space-sm);
    animation: none; /* Disable individual card animation inside groups */
}

.suggestion-group-body .suggestion-card:last-child {
    margin-bottom: 0;
}

/* Category-specific border colors */
.suggestion-group[data-category="SICHERHEIT"] .suggestion-group-header {
    border-left-color: var(--type-sicherheit);
}

.suggestion-group[data-category="PERSONA"] .suggestion-group-header {
    border-left-color: var(--type-persona);
}

.suggestion-group[data-category="STRUKTUR"] .suggestion-group-header {
    border-left-color: var(--type-struktur);
}

.suggestion-group[data-category="KLARHEIT"] .suggestion-group-header {
    border-left-color: var(--type-klarheit);
}

.suggestion-group[data-category="SPECIFICITY"] .suggestion-group-header {
    border-left-color: var(--type-specificity);
}

.suggestion-group[data-category="TONE"] .suggestion-group-header {
    border-left-color: var(--type-tone);
}

/* Coaching mode categories - Using CSS Variables for Dark Mode Support */
.suggestion-group[data-category="VERTRAUEN"] .suggestion-group-header {
    border-left-color: var(--type-vertrauen);
}

.suggestion-group[data-category="ROLLE"] .suggestion-group-header {
    border-left-color: var(--type-rolle);
}

.suggestion-group[data-category="PROZESS"] .suggestion-group-header {
    border-left-color: var(--type-prozess);
}

.suggestion-group[data-category="ZIEL"] .suggestion-group-header {
    border-left-color: var(--type-ziel);
}

.suggestion-group[data-category="KONTEXT"] .suggestion-group-header {
    border-left-color: var(--type-kontext);
}

.suggestion-group[data-category="BEZIEHUNG"] .suggestion-group-header {
    border-left-color: var(--type-beziehung);
}

/* Group animation on load */
.suggestion-group {
    animation: groupSlideIn 0.4s ease-out;
    animation-fill-mode: both;
}

.suggestion-group:nth-child(1) { animation-delay: 0ms; }
.suggestion-group:nth-child(2) { animation-delay: 80ms; }
.suggestion-group:nth-child(3) { animation-delay: 160ms; }
.suggestion-group:nth-child(4) { animation-delay: 240ms; }
.suggestion-group:nth-child(5) { animation-delay: 320ms; }
.suggestion-group:nth-child(6) { animation-delay: 400ms; }

@keyframes groupSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark Mode - Clean & Professional (kein Glassmorphism, kein Glow) */
@media (prefers-color-scheme: dark) {
    .suggestion-group {
        background: rgba(18, 18, 20, 0.98);
        border: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    }

    .suggestion-group:hover {
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
    }

    .suggestion-group-header {
        background: rgba(12, 12, 14, 0.6);
    }

    .suggestion-group-header:hover {
        background: rgba(230, 126, 34, 0.08);
    }

    .btn-batch-reject {
        border-color: rgba(255, 255, 255, 0.1);
        color: var(--text-muted);
    }

    .btn-batch-reject:hover {
        background: rgba(230, 126, 34, 0.1);
        border-color: rgba(230, 126, 34, 0.3);
    }
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .suggestion-group {
        margin-bottom: var(--space-sm);
    }

    .suggestion-group-header {
        padding: var(--space-sm);
    }

    .suggestion-group-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .group-count {
        font-size: 0.65rem;
    }

    .suggestion-group-actions {
        gap: var(--space-xs);
    }

    .btn-batch-apply {
        font-size: 0.65rem;
        padding: 4px 8px;
    }

    .btn-batch-reject {
        min-width: 24px;
        min-height: 24px;
        font-size: 0.7rem;
    }

    .btn-collapse {
        width: 24px;
        height: 24px;
    }

    .suggestion-group:not(.collapsed) .suggestion-group-body {
        padding: var(--space-xs);
        padding-top: 0;
    }

    /* Touch-friendly batch buttons */
    @media (hover: none) and (pointer: coarse) {
        .btn-batch-apply,
        .btn-batch-reject,
        .btn-collapse {
            min-height: 36px;
            min-width: 36px;
        }

        .btn-batch-apply {
            padding: 6px 12px;
        }
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .suggestion-group,
    .suggestion-group-body {
        animation: none;
        transition: none;
    }
}