body { font-family: 'Inter', sans-serif; background-color: #f8fafc; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.ampel-rot { background-color: #fecaca; color: #991b1b; }
.ampel-gelb { background-color: #fef08a; color: #854d0e; }
.ampel-gelb { background-color: #fef08a; color: #854d0e; }
.ampel-gruen { background-color: #bbf7d0; color: #166534; }
.ampel-exzellent { background-color: #a5f3fc; color: #0891b2; }
.tooltip-icon { cursor: help; display: inline-block; position: relative; }
.loading-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #4f46e5;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.prompt-item.selected { border-color: #4f46e5; background-color: #eef2ff; }
.sentiment-positive { color: #16a34a; }
.sentiment-neutral { color: #64748b; }
.sentiment-negative { color: #dc2626; }

/* Styles from Template */
.gradient-text {
    background-image: linear-gradient(to right, #8B5CF6, #3B82F6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.bg-brand-gradient {
     background-image: linear-gradient(to right, #8B5CF6, #3B82F6);
}
.btn-hover {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.btn-hover:hover {
    transform: translateY(-2px);
}

/* NEW SORTING STYLES */
th.sortable {
    cursor: pointer;
    user-select: none; /* Verhindert das Markieren von Text beim Klicken */
}

th.sortable:hover {
    background-color: #f9fafb; /* Leichter Hover-Effekt */
}

.sort-icon {
    display: inline-block;
    width: 1em;
    text-align: center;
    color: #9ca3af; /* graue Farbe für den Pfeil */
    transition: opacity 0.2s;
}

th.sortable:not(.asc):not(.desc) .sort-icon::after {
    content: '↕'; /* Default state icon */
    opacity: 0.4;
}

th.sortable.asc .sort-icon::after {
    content: '▲';
    color: #4f46e5; /* Indigo Farbe für aktiven Pfeil */
}

th.sortable.desc .sort-icon::after {
    content: '▼';
    color: #4f46e5; /* Indigo Farbe für aktiven Pfeil */
}