/* Development: sichtbare Kennzeichnung + Bootstrap Primary (Login etc.) in Pink */
body.vg-env-development {
    border-top: 4px solid #db2777;
    box-sizing: border-box;
}

body.vg-env-development {
    --bs-primary: #c2185b;
    --bs-primary-rgb: 194, 24, 91;
    --bs-link-color: #ad1457;
    --bs-link-hover-color: #880e4f;
}

.vg-backgrop {
    backdrop-filter: blur(10px);
    background: #222222aa;
}

.mud-tab{
    text-transform: none !important;
}

.mud-table-cell {
    vertical-align: top !important;
}

/* Task-Chip-Styles für MentionInput (dynamisch eingefügtes HTML) */
.task-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    margin: 1px 4px 1px 0;
    background: var(--mud-palette-surface);
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 999px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.87);
}
.task-chip-icon {
    flex-shrink: 0;
}
.task-chip-user {
    font-weight: 600;
}
.task-chip-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.task-chip-due {
    color: rgba(0, 0, 0, 0.6);
}

/* Status-abhängige Hervorhebungen für Tasks */
.task-chip--done {
    background-color: #e8f5e9;
    border-color: #66bb6a;
    color: #1b5e20;
}

.task-chip--deleted {
    background-color: #ffebee;
    border-color: #e53935;
    color: #b71c1c;
    font-style: italic;
}

.task-chip-due--future {
    color: #f9a825;
}

.task-chip-due--overdue {
    color: #e53935;
}

/* Mention-Chip-Styles für MentionInput (ohne eigenen Hintergrund, nur dezenter Rahmen) */
.mention-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    margin: 1px 4px 1px 0;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.87);
    vertical-align: baseline;
}
.mention-chip::before {
    content: "@";
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
}