/**
 * Dashboard CSS - Design System Integration
 * Überschreibt Bootstrap-Styles mit Design-System
 */

/* Dashboard Header - migriert auf Design System */
.dashboard-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-gray-200);
}

.dashboard-header h1 {
    color: var(--color-gray-800);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-sm);
}

.dashboard-header .lead,
.dashboard-header .body-large {
    color: var(--color-gray-500);
}

/* Bootstrap Card Override - Design System Styles erzwingen */
.card {
    background: var(--color-white) !important;
    border: none !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--spacing-lg) !important;
    box-shadow: var(--shadow-level-1) !important;
    transition: all var(--duration-normal) var(--ease-out) !important;
    margin-bottom: var(--spacing-md);
}

.card:hover {
    box-shadow: var(--shadow-level-2) !important;
    transform: translateY(-2px) !important;
}

/* Card Header Override */
.card .card-header {
    padding: var(--spacing-md) var(--spacing-lg) !important;
    border-bottom: 1px solid var(--color-gray-100) !important;
    margin: calc(-1 * var(--spacing-lg)) calc(-1 * var(--spacing-lg)) var(--spacing-lg) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    background: var(--color-gray-50) !important;
}

.card-header h3,
.card-header h4,
.card-header h5 {
    margin: 0 !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--color-gray-700) !important;
}

/* Card Body Override */
.card .card-body {
    padding: 0 !important;
}

/* Card Footer Override */
.card .card-footer {
    padding: var(--spacing-md) var(--spacing-lg) !important;
    border-top: 1px solid var(--color-gray-100) !important;
    margin: var(--spacing-lg) calc(-1 * var(--spacing-lg)) calc(-1 * var(--spacing-lg)) !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
    background: var(--color-gray-50) !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: var(--spacing-sm) !important;
}

/* Card Varianten - Design System */
.card.card-primary {
    border-left: 4px solid var(--color-primary) !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.02) 0%, rgba(255, 255, 255, 1) 100%) !important;
}

.card.card-success {
    border-left: 4px solid var(--color-success) !important;
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.02) 0%, rgba(255, 255, 255, 1) 100%) !important;
}

.card.card-warning {
    border-left: 4px solid var(--color-warning) !important;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.02) 0%, rgba(255, 255, 255, 1) 100%) !important;
}

.card.card-danger {
    border-left: 4px solid var(--color-danger) !important;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.02) 0%, rgba(255, 255, 255, 1) 100%) !important;
}

.card.card-accent {
    border-left: 4px solid var(--color-accent) !important;
    background: linear-gradient(135deg, rgba(111, 212, 160, 0.05) 0%, rgba(255, 255, 255, 1) 100%) !important;
}

.card.card-info {
    border-left: 4px solid var(--color-info) !important;
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.02) 0%, rgba(255, 255, 255, 1) 100%) !important;
}

/* Bootstrap Button Override - Design System */
.btn {
    border-radius: var(--radius-md) !important;
    padding: 12px var(--spacing-lg) !important;
    font-weight: var(--font-weight-semibold) !important;
    transition: all var(--duration-normal) var(--ease-out) !important;
}

.btn-primary {
    background: var(--color-primary) !important;
    border: none !important;
    box-shadow: var(--shadow-level-1) !important;
}

.btn-primary:hover {
    background: var(--color-primary-dark) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
    transform: translateY(-1px) !important;
}

.btn-secondary {
    background: var(--color-white) !important;
    color: var(--color-gray-700) !important;
    border: 2px solid var(--color-gray-300) !important;
}

.btn-secondary:hover {
    background: var(--color-gray-50) !important;
    border-color: var(--color-gray-400) !important;
}

/* Bootstrap Alert Override - Design System */
.alert {
    padding: var(--spacing-md) var(--spacing-lg) !important;
    margin-bottom: var(--spacing-md) !important;
    border-radius: var(--radius-md) !important;
    border-left: 4px solid transparent !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

.alert-info {
    background: rgba(23, 162, 184, 0.1) !important;
    border-left-color: var(--color-info) !important;
    color: #0c5460 !important;
}