/**
 * Dashboard Theme CSS
 * Konsolidierte Styles für alle Dashboard-Seiten
 * Basierend auf RSK-004.php und EXE-001.php
 */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    /* Dark Theme Colors */
    --bg-primary: #0a0a0f;
    --bg-secondary: rgba(255, 255, 255, 0.08);
    --bg-secondary-glow: rgba(245, 158, 11, 0.2);
   --bg-card: rgba(255, 255, 255, 0.10);
   /* --bg-card: rgba(255, 255, 255, 0.08); */
    --bg-card-hover: rgba(255, 255, 255, 0.15);
    
    /* Accent Colors */
    --accent-primary: #6366f1;
    --accent-secondary: #8b5cf6;
    --accent-glow: rgba(99, 102, 241, 0.15);
    
    /* Status Colors */
    --status-green: #10b981;
    --status-green-glow: rgba(16, 185, 129, 0.2);
    --status-yellow: #f59e0b;
    --status-yellow-glow: rgba(245, 158, 11, 0.2);
    --status-red: #ef4444;
    --status-red-glow: rgba(239, 68, 68, 0.2);
    --status-blue: #3b82f6;
    --status-blue-glow: rgba(59, 130, 246, 0.2);
    
    /* Text Colors */
    --text-primary: #f8fafc;
    --text-secondary: rgb(203, 210, 219);
    --text-muted: #a3a8af;
    
    /* Borders */
    --border-color: rgba(255, 255, 255, 0.10);
    --border-glow: rgba(99, 102, 241, 0.3);
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 40px var(--accent-glow);
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-image: 
        url('/cuto_dev/assets/images/background/aura-bg.jpg'),
        radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(16, 185, 129, 0.03) 0%, transparent 70%);
    background-size: cover, auto, auto, auto;
    background-position: center, 20% 20%, 80% 80%, 50% 50%;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-attachment: fixed;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.5;
    position: relative;
    z-index: 0;
}

/* Dunkler Overlay über dem Hintergrundbild */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
    pointer-events: none;
}

/* ============================================
   DASHBOARD CONTAINER
   ============================================ */
.dashboard-container {
    position: relative;
    z-index: 1;
    max-width: 1600px;
    margin: 0 auto;
    padding: 16px;
}

/* ============================================
   DASHBOARD HEADER
   ============================================ */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.header-left h1 {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.header-left .subtitle {
    color: var(--text-secondary);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.badge-id {
    background: var(--accent-glow);
    color: var(--accent-primary);
    border: 1px solid var(--border-glow);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.last-update {
    color: var(--text-muted);
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(99, 102, 241, 0.4);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

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

/* ============================================
   GRID SYSTEM
   ============================================ */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
}

/* Grid Span Utility Classes */
.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }
.span-12 { grid-column: span 12; }

/* Metric Utility Class */
.metric {
    text-align: center;
}

.metric-value {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
}

.metric-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ============================================
   CARDS
   ============================================ */
.card {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 16px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.card:hover {
    background: var(--bg-card-hover);
    border-color: rgba(255, 255, 255, 0.20);
    box-shadow: var(--shadow-glow);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -16px -16px 16px -16px;
    padding: 16px;
    border-bottom: none !important;
    /* border-bottom: 1px solid var(--border-color); */
    /* background: var(--bg-secondary); */
    border-radius: 12px 12px 0 0;
}

.card-body {
    padding: 0px 16px 0px 16px;
}

.card-body-scrollable {
    max-height: 400px;
    overflow-y: auto;
    padding: 0px 16px 16px 16px;
    margin: -16px -16px -16px -16px;
}

/* Custom Scrollbar für scrollbare Card-Bodies */
.card-body-scrollable::-webkit-scrollbar {
    width: 6px;
}

.card-body-scrollable::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.card-body-scrollable::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.card-body-scrollable::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.card-body-scrollable .table {
    margin: 0;
    border: none;
    border-radius: 0;
}

.card-body-scrollable .row {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.card-body-scrollable .row:last-child {
    border-bottom: none;
}

.card-body-scrollable .table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-secondary);
}

.card-body-scrollable .table thead th {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 16px;
}

.card-body-scrollable .table tbody td {
    padding: 12px 16px;
}

.card-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 24px;
}

.card-icon .mdi {
    font-size: 24px;
}

/* ============================================
   SUMMARY CARDS
   ============================================ */
.summary-grid {
    grid-column: span 12;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.summary-card {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    padding: 16px;
    text-align: center;
}

.summary-card .icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.summary-card .value {
    font-size: 32px;
    font-weight: 700;
}

.summary-card .label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-top: 4px;
}

.summary-card.total .icon {
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-primary);
}

.summary-card.critical .icon {
    background: rgba(239, 68, 68, 0.2);
    color: var(--status-red);
}

.summary-card.critical .value {
    color: var(--status-red);
}

.summary-card.high .icon {
    background: rgba(245, 158, 11, 0.2);
    color: var(--status-yellow);
}

.summary-card.high .value {
    color: var(--status-yellow);
}

.summary-card.resolved .icon {
    background: rgba(16, 185, 129, 0.2);
    color: var(--status-green);
}

.summary-card.resolved .value {
    color: var(--status-green);
}

.summary-card.rate .icon {
    background: rgba(59, 130, 246, 0.2);
    color: var(--status-blue);
}

.summary-card.avgtime .icon {
    background: rgba(139, 92, 246, 0.2);
    color: var(--accent-secondary);
}

/* ============================================
   ISSUE TRACKING COMPONENTS
   ============================================ */
.issues-card {
    grid-column: span 8;
}

.issue-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.issue-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 10px;
    border-left: 3px solid;
}

.issue-item.critical {
    border-left-color: var(--status-red);
}

.issue-item.high {
    border-left-color: var(--status-yellow);
}

.issue-item.medium {
    border-left-color: var(--status-blue);
}

.issue-item.low {
    border-left-color: var(--status-green);
}

.issue-priority {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.issue-item.critical .issue-priority {
    background: rgba(239, 68, 68, 0.2);
    color: var(--status-red);
}

.issue-item.high .issue-priority {
    background: rgba(245, 158, 11, 0.2);
    color: var(--status-yellow);
}

.issue-item.medium .issue-priority {
    background: rgba(59, 130, 246, 0.2);
    color: var(--status-blue);
}

.issue-details {
    flex: 1;
}

.issue-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-muted);
}

.issue-title {
    font-weight: 500;
    font-size: 14px;
}

.issue-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.issue-age {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    padding: 4px 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
}

.issue-age.overdue {
    color: var(--status-red);
}

/* ============================================
   CHART COMPONENTS
   ============================================ */
.chart-card {
    grid-column: span 4;
}

.donut-container {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
}

.donut-chart {
    width: 120px;
    height: 120px;
    position: relative;
}

.donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.donut-center .value {
    font-size: 24px;
    font-weight: 700;
}

.donut-center .label {
    font-size: 10px;
    color: var(--text-muted);
}

.donut-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* ============================================
   WORKSTREAM COMPONENTS
   ============================================ */
.workstream-card {
    grid-column: span 6;
}

.ws-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ws-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ws-name {
    width: 80px;
    font-size: 12px;
    color: var(--text-secondary);
}

.ws-bar {
    flex: 1;
    height: 20px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
}

.ws-bar-segment {
    height: 100%;
}

.ws-values {
    width: 60px;
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}

/* ============================================
   TREND CHART
   ============================================ */
.trend-card {
    grid-column: span 6;
}

.trend-chart {
    height: 200px;
    position: relative;
    margin-top: 12px;
}

.trend-chart svg {
    width: 100%;
    height: 100%;
}

/* ============================================
   DASHBOARD FOOTER
   ============================================ */
.dashboard-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
}

.footer-nav {
    display: flex;
    gap: 16px;
}

.footer-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-nav a:hover {
    color: var(--accent-primary);
}

.footer-nav a .mdi {
    font-size: 14px;
    margin-right: 4px;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1400px) {
    .dashboard-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .summary-grid {
        grid-column: span 6;
        grid-template-columns: repeat(3, 1fr);
    }
    
    .issues-card {
        grid-column: span 4;
    }
    
    .chart-card {
        grid-column: span 2;
    }
    
    .workstream-card,
    .trend-card {
        grid-column: span 3;
    }
    
    /* EXE-001 specific responsive adjustments */
    .health-hero { 
        grid-column: span 6; 
    }
    
    .dimensions-grid { 
        grid-column: span 6; 
        grid-template-columns: repeat(2, 1fr); 
    }
    
    .countdown-card { 
        grid-column: span 2; 
    }
    
    .progress-card { 
        grid-column: span 4; 
    }
    
    .metrics-card { 
        grid-column: span 3; 
    }
    
    .milestones-card { 
        grid-column: span 3; 
    }
    
    .risks-card { 
        grid-column: span 6; 
    }
    
    .trend-card { 
        grid-column: span 4; 
    }
    
    .actions-card { 
        grid-column: span 2; 
    }
}

@media (max-width: 900px) {
    .dashboard-container { 
        padding: 16px; 
    }
    
    .dashboard-header { 
        flex-direction: column; 
        gap: 16px; 
    }
    
    .dashboard-grid { 
        grid-template-columns: 1fr; 
    }
    
    .health-hero, 
    .dimensions-grid, 
    .countdown-card, 
    .progress-card,
    .metrics-card, 
    .milestones-card, 
    .risks-card, 
    .trend-card, 
    .actions-card {
        grid-column: span 1;
    }
    
    .dimensions-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
}

/* ============================================
   HEALTH HERO CARD (EXE-001)
   ============================================ */
.health-hero {
    grid-column: span 4;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.health-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, var(--status-yellow-glow) 0%, transparent 50%);
    opacity: 0.5;
}

.health-gauge {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;
}

.health-gauge svg {
    transform: rotate(-90deg);
}

.health-gauge-bg {
    fill: none;
    stroke: var(--bg-secondary);
    stroke-width: 12;
}

.health-gauge-fill {
    fill: none;
    stroke: var(--status-yellow);
    stroke-width: 12;
    stroke-linecap: round;
    stroke-dasharray: 502;
    stroke-dashoffset: 90;
    transition: stroke-dashoffset 1s ease;
    filter: drop-shadow(0 0 8px var(--status-yellow));
}

.health-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.health-value .number {
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, var(--status-yellow), #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.health-value .unit {
    font-size: 24px;
    color: var(--text-secondary);
}

.health-status {
    font-size: 16px;
    font-weight: 600;
    color: var(--status-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.health-status .mdi {
    font-size: 20px;
}

.health-trend {
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 8px;
}

/* ============================================
   DIMENSION CARDS (EXE-001)
   ============================================ */
.dimensions-grid {
    grid-column: span 8;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.dimension-card {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    padding: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.dimension-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 12px 12px 0 0;
}

.dimension-card.status-green::before {
    background: var(--status-green);
    box-shadow: 0 0 20px var(--status-green-glow);
}

.dimension-card.status-yellow::before {
    background: var(--status-yellow);
    box-shadow: 0 0 20px var(--status-yellow-glow);
}

.dimension-card.status-red::before {
    background: var(--status-red);
    box-shadow: 0 0 20px var(--status-red-glow);
}

.dimension-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-glow);
    box-shadow: var(--shadow-md);
}

.dimension-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.dimension-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.dimension-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.dimension-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.dimension-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.dimension-icon .mdi {
    font-size: 22px;
}

.dimension-icon.schedule { background: rgba(59, 130, 246, 0.15); }
.dimension-icon.budget { background: rgba(16, 185, 129, 0.15); }
.dimension-icon.scope { background: rgba(168, 85, 247, 0.15); }
.dimension-icon.quality { background: rgba(236, 72, 153, 0.15); }
.dimension-icon.resources { background: rgba(245, 158, 11, 0.15); }
.dimension-icon.risk { background: rgba(239, 68, 68, 0.15); }

.dimension-status {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.dimension-status.green { background: var(--status-green); box-shadow: 0 0 10px var(--status-green); }
.dimension-status.yellow { background: var(--status-yellow); box-shadow: 0 0 10px var(--status-yellow); }
.dimension-status.red { background: var(--status-red); box-shadow: 0 0 10px var(--status-red); }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.dimension-name {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.dimension-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.dimension-trend {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.trend-up { color: var(--status-green); }
.trend-down { color: var(--status-red); }
.trend-stable { color: var(--text-muted); }

/* ============================================
   COUNTDOWN CARD (EXE-001)
   ============================================ */
.countdown-card {
    grid-column: span 3;
}

.countdown-value {
    font-size: 64px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.countdown-label {
    font-size: 16px;
    color: var(--text-secondary);
    margin-top: 8px;
}

.countdown-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ============================================
   PROGRESS CARD (EXE-001)
   ============================================ */
.progress-card {
    grid-column: span 5;
}

.progress-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.progress-stat .label {
    font-size: 12px;
    color: var(--text-muted);
}

.progress-stat .value {
    font-size: 24px;
    font-weight: 600;
}

.progress-bar-container {
    background: var(--bg-secondary);
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.progress-bar {
    height: 100%;
    border-radius: 6px;
    transition: width 1s ease;
}

.progress-bar.actual {
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    width: 42%;
    position: absolute;
    z-index: 2;
}

.progress-bar.planned {
    background: rgba(255, 255, 255, 0.1);
    width: 45%;
    position: absolute;
    z-index: 1;
}

.progress-legend {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    font-size: 12px;
}

.progress-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
}

.progress-legend .legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.progress-legend .legend-dot.actual { background: var(--accent-primary); }
.progress-legend .legend-dot.planned { background: rgba(255, 255, 255, 0.3); }

/* ============================================
   METRICS CARD (EXE-001)
   ============================================ */
.metrics-card {
    grid-column: span 4;
}

.metrics-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.metric-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-secondary);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.metric-item:hover {
    background: rgba(99, 102, 241, 0.1);
}

.metric-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.metric-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.metric-icon .mdi {
    font-size: 22px;
}

.metric-icon.decisions { background: rgba(245, 158, 11, 0.15); }
.metric-icon.escalations { background: rgba(239, 68, 68, 0.15); }
.metric-icon.changes { background: rgba(168, 85, 247, 0.15); }
.metric-icon.issues { background: rgba(236, 72, 153, 0.15); }

.metric-name {
    font-size: 14px;
    color: var(--text-secondary);
}

.metric-value {
    font-size: 20px;
    font-weight: 600;
}

.metric-value.warning { color: var(--status-yellow); }
.metric-value.critical { color: var(--status-red); }

/* ============================================
   MILESTONES CARD (EXE-001)
   ============================================ */
.milestones-card {
    grid-column: span 6;
}

.milestone-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.milestone-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 10px;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.milestone-item.on-track { border-left-color: var(--status-green); }
.milestone-item.at-risk { border-left-color: var(--status-yellow); }
.milestone-item.delayed { border-left-color: var(--status-red); }
.milestone-item.completed { border-left-color: var(--status-blue); opacity: 0.7; }

.milestone-item:hover {
    background: rgba(99, 102, 241, 0.08);
}

.milestone-status-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.milestone-status-icon .mdi {
    font-size: 22px;
}

.milestone-status-icon.on-track { background: var(--status-green-glow); color: var(--status-green); }
.milestone-status-icon.at-risk { background: var(--status-yellow-glow); color: var(--status-yellow); }
.milestone-status-icon.delayed { background: var(--status-red-glow); color: var(--status-red); }
.milestone-status-icon.completed { background: rgba(59, 130, 246, 0.2); color: var(--status-blue); }

.milestone-details {
    flex: 1;
}

.milestone-name {
    font-weight: 500;
    margin-bottom: 4px;
}

.milestone-meta {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    gap: 16px;
}

.milestone-date {
    font-family: 'JetBrains Mono', monospace;
}

/* ============================================
   RISKS CARD (EXE-001)
   ============================================ */
.risks-card {
    grid-column: span 6;
}

.risk-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.risk-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.risk-item:hover {
    background: rgba(239, 68, 68, 0.08);
}

.risk-score {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

.risk-score.high { background: var(--status-red-glow); color: var(--status-red); border: 1px solid var(--status-red); }
.risk-score.medium { background: var(--status-yellow-glow); color: var(--status-yellow); border: 1px solid var(--status-yellow); }
.risk-score.low { background: var(--status-green-glow); color: var(--status-green); border: 1px solid var(--status-green); }

.risk-details {
    flex: 1;
}

.risk-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.risk-title {
    font-weight: 500;
    margin-bottom: 4px;
}

.risk-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.risk-owner {
    color: var(--accent-primary);
}

/* ============================================
   ACTIONS CARD (EXE-001)
   ============================================ */
.actions-card {
    grid-column: span 4;
}

.action-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.action-item {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: var(--bg-secondary);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 8px;
    border-left: 3px solid var(--status-yellow);
}

.action-item.urgent {
    border-left-color: var(--status-red);
    background: rgba(239, 68, 68, 0.05);
}

.action-priority {
    font-size: 20px;
}

.action-priority .mdi {
    font-size: 20px;
}

.action-content {
    flex: 1;
}

.action-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.action-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.action-owner {
    color: var(--accent-primary);
}

/* ============================================
   TREND CHART ENHANCED (EXE-001)
   ============================================ */
.trend-line {
    fill: none;
    stroke: var(--accent-primary);
    stroke-width: 3;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px var(--accent-primary));
}

.trend-area {
    fill: url(#gradient);
    opacity: 0.3;
}

.trend-dot {
    fill: var(--accent-primary);
    filter: drop-shadow(0 0 4px var(--accent-primary));
}

.trend-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

/* ============================================
   EXE-002 SPECIFIC COMPONENTS
   ============================================ */

/* Status Hero */
.status-hero {
    grid-column: span 3;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.status-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, var(--status-yellow-glow) 0%, transparent 70%);
}

.status-icon {
    font-size: 80px;
    margin-bottom: 12px;
    position: relative;
}

.status-icon.green {
    color: var(--status-green);
}

.status-icon.yellow {
    color: var(--status-yellow);
}

.status-icon.red {
    color: var(--status-red);
}

.status-label {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 8px;
}

.status-desc {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Key Metrics Strip */
.metrics-strip {
    grid-column: span 9;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.metric-card {
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    border: 1px solid var(--border-color);
}

.metric-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.metric-value {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}

.metric-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.metric-trend {
    font-size: 12px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Commentary */
.commentary {
    grid-column: span 6;
}

.commentary-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 16px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border-left: 3px solid var(--accent-primary);
}

.commentary-meta {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
}

/* Decisions */
.decisions {
    grid-column: span 6;
}

.decision-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.decision-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border-left: 3px solid var(--status-yellow);
}

.decision-item.high {
    border-left-color: var(--status-red);
}

.decision-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: var(--status-yellow-glow);
    color: var(--status-yellow);
}

.decision-item.high .decision-icon {
    background: var(--status-red-glow);
    color: var(--status-red);
}

.decision-content {
    flex: 1;
}

.decision-title {
    font-weight: 500;
    margin-bottom: 2px;
}

.decision-meta {
    font-size: 12px;
    color: var(--text-muted);
}

/* Top Risks (EXE-002 variant) */
.top-risks {
    grid-column: span 4;
}

.top-risks .risk-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 8px;
}

.top-risks .risk-score {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

.top-risks .risk-score.high {
    background: var(--status-red-glow);
    color: var(--status-red);
    border: 1px solid var(--status-red);
}

.top-risks .risk-score.medium {
    background: var(--status-yellow-glow);
    color: var(--status-yellow);
    border: 1px solid var(--status-yellow);
}

.top-risks .risk-content {
    flex: 1;
}

.top-risks .risk-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.top-risks .risk-meta {
    font-size: 12px;
    color: var(--text-muted);
}

/* Milestones (EXE-002 variant) */
.milestones {
    grid-column: span 5;
}

.milestones .milestone-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 8px;
}

.milestone-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.milestone-icon.completed {
    background: rgba(59, 130, 246, 0.2);
    color: var(--status-blue);
}

.milestone-icon.on-track {
    background: var(--status-green-glow);
    color: var(--status-green);
}

.milestone-icon.at-risk {
    background: var(--status-yellow-glow);
    color: var(--status-yellow);
}

.milestone-content {
    flex: 1;
}

.milestone-name {
    font-size: 14px;
    font-weight: 500;
}

.milestone-date {
    font-size: 12px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

/* Achievements */
.achievements {
    grid-column: span 3;
}

.achievement-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 8px;
}

.achievement-icon {
    color: var(--status-green);
    font-size: 20px;
}

.achievement-text {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Attention */
.attention {
    grid-column: span 12;
}

.attention-content {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--status-red);
    border-radius: 8px;
}

.attention-icon {
    font-size: 32px;
    color: var(--status-red);
}

.attention-text h4 {
    font-weight: 600;
    margin-bottom: 4px;
}

.attention-text p {
    font-size: 14px;
    color: var(--text-secondary);
}

/* EXE-002 Responsive */
@media (max-width: 1200px) {
    .status-hero,
    .metrics-strip,
    .commentary,
    .decisions,
    .top-risks,
    .milestones,
    .achievements,
    .attention {
        grid-column: span 6;
    }
    
    .metrics-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   EXE-003 SPECIFIC COMPONENTS
   ============================================ */

/* Goal Items */
.goal-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.goal-name {
    font-size: 14px;
}

.goal-status {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
}

.goal-status.aligned {
    background: rgba(16, 185, 129, 0.15);
    color: var(--status-green);
}

.goal-status.partial {
    background: rgba(245, 158, 11, 0.15);
    color: var(--status-yellow);
}

/* Radar Chart */
.radar-chart {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

/* Value Items */
.value-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.value-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* ============================================
   EXE-004 SPECIFIC COMPONENTS
   ============================================ */

/* Benefit Rows */
.benefit-row {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    gap: 16px;
}

.benefit-name {
    flex: 1;
    font-size: 14px;
}

.benefit-bars {
    display: flex;
    gap: 8px;
    align-items: center;
}

.benefit-bar {
    height: 8px;
    border-radius: 4px;
}

/* ROI Chart */
.roi-chart {
    height: 200px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 8px;
    padding-top: 20px;
}

.roi-bar {
    width: 40px;
    border-radius: 4px 4px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ============================================
   EXE-005 SPECIFIC COMPONENTS
   ============================================ */

/* Project Cards */
.project-card {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

.project-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.project-name {
    font-weight: 600;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.timeline {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}

.timeline-bar {
    height: 6px;
    border-radius: 3px;
}

/* ============================================
   BUD-001 SPECIFIC COMPONENTS
   ============================================ */

/* Category Cards */
.category-card {
    grid-column: span 4;
}

.category-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.category-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.category-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}

.category-bar-fill {
    height: 100%;
    border-radius: 4px;
}

.category-name {
    width: 100px;
    font-size: 12px;
    color: var(--text-secondary);
}

.category-value {
    width: 80px;
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}

/* EVM Cards */
.evm-card {
    grid-column: span 4;
}

.evm-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.evm-item {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 14px;
    text-align: center;
}

.evm-item .value {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 4px;
}

.evm-item .label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.evm-item.good .value {
    color: var(--status-green);
}

.evm-item.warning .value {
    color: var(--status-yellow);
}

.evm-item.bad .value {
    color: var(--status-red);
}

/* Workstream Cards (BUD-001 variant) */
.workstream-card {
    grid-column: span 8;
}

.workstream-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.workstream-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.workstream-name {
    width: 80px;
    font-size: 12px;
    color: var(--text-secondary);
}

.workstream-bar {
    flex: 1;
    height: 20px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.workstream-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
}

.workstream-values {
    display: flex;
    gap: 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}

.workstream-values span {
    color: var(--text-muted);
}

/* Alerts Cards */
.alerts-card {
    grid-column: span 4;
}

.alert-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.alert-item {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border-left: 3px solid;
}

.alert-item.warning {
    border-left-color: var(--status-yellow);
}

.alert-item.critical {
    border-left-color: var(--status-red);
}

.alert-icon {
    font-size: 18px;
}

.alert-item.warning .alert-icon {
    color: var(--status-yellow);
}

.alert-item.critical .alert-icon {
    color: var(--status-red);
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-size: 13px;
    font-weight: 500;
}

.alert-meta {
    font-size: 11px;
    color: var(--text-muted);
}

/* Chart Container */
.chart-container {
    height: 220px;
    margin-top: 12px;
}

.chart-container svg {
    width: 100%;
    height: 100%;
}

/* Summary Card Variants */
.summary-card.budget .icon {
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-primary);
}

.summary-card.spent .icon {
    background: var(--status-yellow-glow);
    color: var(--status-yellow);
}

.summary-card.remaining .icon {
    background: var(--status-green-glow);
    color: var(--status-green);
}

.summary-card.forecast .icon {
    background: var(--status-red-glow);
    color: var(--status-red);
}

.summary-card .sublabel {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ============================================
   BUD-002 SPECIFIC COMPONENTS
   ============================================ */

/* Chart Area */
.chart-area {
    height: 200px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding-top: 20px;
}

.chart-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chart-bar .bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
}

.chart-bar .bar.actual {
    background: var(--accent-primary);
}

.chart-bar .bar.planned {
    background: var(--text-muted);
    opacity: 0.3;
}

.chart-bar .label {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Burn Indicator */
.burn-indicator {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    margin-top: 12px;
}

.burn-rate {
    font-size: 48px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}

.burn-info {
    font-size: 13px;
    color: var(--text-secondary);
}

.burn-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    margin-top: 8px;
}

.burn-status.good {
    background: rgba(16, 185, 129, 0.15);
    color: var(--status-green);
}

.burn-status.warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--status-yellow);
}

.burn-status.critical {
    background: rgba(239, 68, 68, 0.15);
    color: var(--status-red);
}

/* Trend List */
.trend-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trend-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}

.trend-item .period {
    font-size: 13px;
}

.trend-item .value {
    font-size: 13px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.trend-item .change {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
}

.trend-item .change.up {
    background: rgba(239, 68, 68, 0.15);
    color: var(--status-red);
}

.trend-item .change.down {
    background: rgba(16, 185, 129, 0.15);
    color: var(--status-green);
}

/* Metric Color Variants */
.metric.green .metric-value {
    color: var(--status-green);
}

.metric.yellow .metric-value {
    color: var(--status-yellow);
}

.metric.red .metric-value {
    color: var(--status-red);
}

/* BUD-001 Responsive */
@media (max-width: 1400px) {
    .category-card {
        grid-column: span 3;
    }
    
    .evm-card {
        grid-column: span 3;
    }
    
    .workstream-card {
        grid-column: span 6;
    }
    
    .alerts-card {
        grid-column: span 6;
    }
}

/* ============================================
   SIDEBAR (sidebar3.php)
   ============================================ */
.sidebar3 {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 280px;
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: transform 0.3s ease, width 0.3s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
    color: var(--text-primary);
}

.sidebar3.collapsed {
    width: 64px;
}

.sidebar3.collapsed .sidebar3-logo-text,
.sidebar3.collapsed .sidebar3-search-input,
.sidebar3.collapsed .sidebar3-menu-text,
.sidebar3.collapsed .sidebar3-user-name {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

/* Logo im collapsed State - wechsle zu Mini-Logo */
.sidebar3.collapsed .sidebar3-logo-full {
    display: none;
}

.sidebar3.collapsed .sidebar3-logo-mini {
    display: block;
}

.sidebar3.collapsed .sidebar3-menu-item.has-children::after {
    display: none;
}

/* Sidebar Header - Logo */
.sidebar3-header {
    padding: 20px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 72px;
}

.sidebar3-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-primary);
}

.sidebar3-logo img {
    flex-shrink: 0;
    transition: opacity 0.3s ease;
}

.sidebar3-logo-full {
    width: 128px;
    height: 64px;
    display: block;
}

.sidebar3-logo-mini {
    width: 48px;
    height: 48px;
    display: none;
}

.sidebar3-logo-text {
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

.sidebar3-toggle {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.sidebar3-toggle:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-glow);
}

.sidebar3-toggle .mdi {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.sidebar3.collapsed .sidebar3-toggle .mdi {
    transform: rotate(180deg);
}

/* Sidebar Search */
.sidebar3-search {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar3-search-wrapper {
    position: relative;
}

.sidebar3-search-input {
    width: 100%;
    padding: 10px 12px 10px 40px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.2s ease;
}

.sidebar3-search-input::placeholder {
    color: var(--text-muted);
}

.sidebar3-search-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.sidebar3-search-input::placeholder {
    color: var(--text-muted);
}

.sidebar3-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.sidebar3-search-icon .mdi {
    font-size: 18px;
}

/* Sidebar Menu - Scrollable */
.sidebar3-menu {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
}

.sidebar3-menu::-webkit-scrollbar {
    width: 6px;
}

.sidebar3-menu::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar3-menu::-webkit-scrollbar-thumb {
    background: var(--bg-secondary);
    border-radius: 3px;
}

.sidebar3-menu::-webkit-scrollbar-thumb:hover {
    background: var(--border-color);
}

.sidebar3-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar3-menu-item {
    margin: 1px 8px;
}

.sidebar3-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
    position: relative;
    font-size: 15px;
}

.sidebar3-menu-link:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15); /* Sehr dezenter, leicht grauer Rand */
}

.sidebar3-menu-link.active {
    background: var(--accent-glow);
    color: var(--accent-primary);
    border-left: 3px solid var(--accent-primary);
    font-weight: 600;
}

/* Aktive Links in Submenüs */
.sidebar3-submenu .sidebar3-menu-link.active {
    background: rgba(250, 155, 12, 0.2);
    color: var(--cuto-orange);
    border-left: 3px solid var(--cuto-orange);
}

.sidebar3-submenu .sidebar3-submenu .sidebar3-menu-link.active {
    background: rgba(250, 155, 12, 0.15);
    color: var(--cuto-orange);
    border-left: 3px solid var(--cuto-orange);
}

/* Menu Item Color Variants (für Hauptmenüpunkte) - Angelehnt an Logo-Farben */
.sidebar3-menu-orange {
    background: rgba(250, 155, 12, 0.35); /* #FA9B0C aus Logo - kräftiger */
    border: 1px solid rgba(250, 155, 12, 0.5);
    color: #fff !important;
    border-radius: 6px; /* Behalte abgerundete Ecken für farbige Hauptmenüpunkte */
}

.sidebar3-menu-orange:hover {
    background: rgba(250, 155, 12, 0.45);
    border-color: rgba(250, 155, 12, 0.7);
    border-radius: 6px; /* Behalte abgerundete Ecken beim Hover */
}

.sidebar3-menu-blue {
    background: rgba(10, 180, 242, 0.35); /* #0AB4F2 aus Logo - kräftiger */
    border: 1px solid rgba(10, 180, 242, 0.5);
    color: #fff !important;
    border-radius: 6px; /* Behalte abgerundete Ecken für farbige Hauptmenüpunkte */
}

.sidebar3-menu-blue:hover {
    background: rgba(10, 180, 242, 0.45);
    border-color: rgba(10, 180, 242, 0.7);
    border-radius: 6px; /* Behalte abgerundete Ecken beim Hover */
}

.sidebar3-menu-purple {
    background: rgba(149, 36, 148, 0.35); /* #952494 aus Logo - kräftiger */
    border: 1px solid rgba(149, 36, 148, 0.5);
    color: #fff !important;
    border-radius: 6px; /* Behalte abgerundete Ecken für farbige Hauptmenüpunkte */
}

.sidebar3-menu-purple:hover {
    background: rgba(149, 36, 148, 0.45);
    border-color: rgba(149, 36, 148, 0.7);
    border-radius: 6px; /* Behalte abgerundete Ecken beim Hover */
}

.sidebar3-menu-green {
    background: rgba(115, 208, 3, 0.35); /* #73D003 aus Logo - kräftiger */
    border: 1px solid rgba(115, 208, 3, 0.5);
    color: #fff !important;
    border-radius: 6px; /* Behalte abgerundete Ecken für farbige Hauptmenüpunkte */
}

.sidebar3-menu-green:hover {
    background: rgba(115, 208, 3, 0.45);
    border-color: rgba(115, 208, 3, 0.7);
    border-radius: 6px; /* Behalte abgerundete Ecken beim Hover */
}

.sidebar3-menu-gray {
    background: rgba(135, 135, 135, 0.3);
    border: 1px solid rgba(135, 135, 135, 0.4);
    color: #fff !important;
    border-radius: 6px; /* Behalte abgerundete Ecken für farbige Hauptmenüpunkte */
}

.sidebar3-menu-gray:hover {
    background: rgba(135, 135, 135, 0.4);
    border-color: rgba(135, 135, 135, 0.6);
    border-radius: 6px; /* Behalte abgerundete Ecken beim Hover */
}

.sidebar3-menu-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar3-menu-icon .mdi {
    font-size: 18px;
}

.sidebar3-menu-text {
    flex: 1;
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

.sidebar3-menu-badge {
    background: var(--status-red);
    color: white;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}

/* Menu Items with Children (Expandable) */
.sidebar3-menu-item.has-children > .sidebar3-menu-link::after {
    content: '\f142';
    font-family: 'Material Design Icons';
    font-size: 16px;
    margin-left: auto;
    transition: transform 0.3s ease;
}

.sidebar3-menu-item.expanded > .sidebar3-menu-link::after {
    transform: rotate(90deg);
}

.sidebar3-menu-item.expanded > .sidebar3-menu-link {
    color: var(--text-primary);
}

/* Submenu Levels */
.sidebar3-submenu {
    list-style: none;
    padding: 0;
    margin: 2px 0 2px 12px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, margin 0.3s ease;
}

.sidebar3-menu-item.expanded > .sidebar3-submenu {
    max-height: 2000px;
}

.sidebar3-submenu .sidebar3-menu-link {
    padding: 6px 10px;
    font-size: 16px;
    margin-left: 4px;
}

/* 3. Ebene - Verschachtelte Submenüs */
.sidebar3-submenu .sidebar3-submenu {
    margin-left: 4px; /* Reduced from 8px */
    margin-top: 2px;
    margin-bottom: 2px;
}

.sidebar3-submenu .sidebar3-submenu .sidebar3-menu-link {
    padding: 4px 10px; /* Reduced from 5px 10px */
    font-size: 15px;
    margin-left: 4px;
}

/* Icons für 3. Ebene kleiner */
.sidebar3-submenu .sidebar3-submenu .sidebar3-menu-icon {
    width: 16px; /* Reduced from 18px */
    height: 16px; /* Reduced from 18px */
}

.sidebar3-submenu .sidebar3-submenu .sidebar3-menu-icon .mdi {
    font-size: 16px; /* Reduced from 18px */
}

/* Sidebar Footer - User Menu */
.sidebar3-footer {
    padding: 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.sidebar3-user {
    position: relative;
}

.sidebar3-user-button {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    width: 100%;
    transition: all 0.2s ease;
    text-align: left;
}

.sidebar3-user-button:hover {
    background: var(--bg-card);
    border-color: var(--border-glow);
    color: var(--text-primary);
}

.sidebar3-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.sidebar3-user-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.3s ease;
}

.sidebar3-user-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 8px;
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.2s ease;
    z-index: 1001;
    min-width: 200px;
}

.sidebar3-user.active .sidebar3-user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sidebar3-user-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-size: 14px;
}

.sidebar3-user-item:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15); /* Sehr dezenter, leicht grauer Rand */
}

.sidebar3-user-item .mdi {
    font-size: 18px;
    width: 20px;
}

.sidebar3-user-item.danger {
    color: var(--status-red);
}

.sidebar3-user-item.danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

.sidebar3-user-divider {
    height: 1px;
    background: var(--border-color);
    margin: 8px 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .sidebar3 {
        transform: translateX(-100%);
    }
    
    .sidebar3.mobile-open {
        transform: translateX(0);
    }
    
    .sidebar3-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .sidebar3-overlay.active {
        opacity: 1;
        visibility: visible;
    }
}

/* Content adjustment when sidebar is present */
body.has-sidebar3 {
    padding-left: 280px;
    /* transition entfernt - verhindert Slide-In Animation beim Seitenladen */
}

body.has-sidebar3 .page-wrapper {
    margin-left: 0 !important; /* Überschreibt alte margin-left: 240px */
    padding-left: 24px !important; /* Abstand zur Sidebar */
    padding-right: 24px !important; /* Abstand zum rechten Rand */
    padding-top: 24px !important; /* Abstand oben */
    padding-bottom: 24px !important; /* Abstand unten */
    /* transition entfernt - verhindert Slide-In Animation beim Seitenladen */
    max-width: 100%;
    box-sizing: border-box;
}

/* Wenn Sidebar collapsed ist */
body.has-sidebar3 .sidebar3.collapsed {
    width: 64px;
}

body.has-sidebar3 .sidebar3.collapsed ~ #main-wrapper .page-wrapper,
body.has-sidebar3 .sidebar3.collapsed ~ .page-wrapper {
    margin-left: 0;
    padding-left: 24px !important; /* Behalte Padding auch bei collapsed Sidebar */
}

@media (max-width: 1024px) {
    body.has-sidebar3 {
        padding-left: 0;
    }
    
    body.has-sidebar3 .page-wrapper {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
}

/* ============================================
   TABLES (Dashboard Theme)
   ============================================ */
table {
    width: 100%;
    border-collapse: collapse;
    /* background: var(--bg-card); */
    backdrop-filter: blur(16px);
    font-size: 15px;
    -webkit-backdrop-filter: blur(16px);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

table thead {
    /* background: var(--bg-secondary); */
}

table th {
    text-align: left;
    padding:4px 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
}

table th.text-end,
table td.text-end {
    text-align: right;
}

table th.text-center,
table td.text-center {
    text-align: center;
}

table td {
    padding: 4px 16px;
    font-size: 15px;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    vertical-align: middle !important;
}

table td:first-child,
.table td:first-child {
    vertical-align: middle !important;
}

table tbody tr {
    transition: background-color 0.2s ease;
}

table tbody tr:hover {
    background: var(--bg-secondary);
}

table tbody tr:last-child td {
    border-bottom: none;
}

/* Table Variants */
table.table-striped tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

table.table-striped tbody tr:nth-child(even):hover {
    background: var(--bg-secondary);
}

table.table-bordered {
    border: 1px solid var(--border-color);
}

table.table-bordered th,
table.table-bordered td {
    border: 1px solid var(--border-color);
}

table.table-hover tbody tr {
    cursor: pointer;
}

/* Table in Cards */
.card table,
.card .table {
    margin: 0;
    border-radius: 8px;
}

/* Responsive Tables */
@media (max-width: 768px) {
    table {
        font-size: 12px;
    }
    
    table th,
    table td {
        padding: 8px 12px;
    }
}

/* Bootstrap Table Overrides */
.table {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.table thead th {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 16px;
}

.table tbody td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    padding: 4px 16px;
    color: var(--text-primary);
    vertical-align: middle !important;
}

.table tbody tr:hover {
    background: var(--bg-secondary);
}

.table-dark {
    background: var(--bg-card);
    color: var(--text-primary);
}

.table-dark thead th {
    background: var(--bg-secondary);
    color: var(--text-muted);
}

.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(255, 255, 255, 0.02);
}

.table-striped tbody tr:nth-of-type(odd):hover {
    background: var(--bg-secondary);
}

.table-bordered {
    border: 1px solid var(--border-color);
}

.table-bordered th,
.table-bordered td {
    border: 1px solid var(--border-color);
}

/* Table Links - bereits oben definiert, hier überschrieben für spezifische Fälle */
table a.text-decoration-none,
.table a.text-decoration-none {
    border-bottom: none;
}

/* Table Buttons */
table .btn,
.table .btn {
    margin: 0 2px;
}

/* Table Badges */
table .badge,
.table .badge {
    font-size: 11px;
    padding: 4px 8px;
}

/* ============================================
   BOOTSTRAP COMPONENTS (Dashboard Theme Overrides)
   ============================================ */

/* Container */
.container-fluid {
    padding: 0;
    color: var(--text-primary);
}

/* Container-fluid innerhalb von page-wrapper hat kein zusätzliches Padding */
body.has-sidebar3 .page-wrapper .container-fluid {
    padding: 0;
}

/* Buttons - Dashboard Theme Overrides (höhere Spezifität) */
.btn,
button.btn {
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    border: 1px solid transparent !important;
    padding: 8px 16px !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    line-height: 1.5 !important;
    min-height: 38px !important;
}

.btn .mdi {
    font-size: 18px;
}

.btn-light-secondary,
button.btn-light-secondary {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.btn-light-secondary:hover,
button.btn-light-secondary:hover {
    background: var(--bg-card) !important;
    border-color: var(--border-glow) !important;
    color: var(--text-primary) !important;
}

/* Status Buttons (aus clView::showStatus) - höhere Spezifität */
.btn-secondary,
button.btn-secondary {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
button.btn-secondary:hover,
button.btn-secondary:focus {
    background: var(--bg-card) !important;
    border-color: var(--border-glow) !important;
    color: var(--text-primary) !important;
}

.btn-warning,
button.btn-warning {
    background: var(--status-yellow) !important;
    border-color: var(--status-yellow) !important;
    color: #000 !important;
    font-weight: 600 !important;
}

.btn-warning:hover,
.btn-warning:focus,
button.btn-warning:hover,
button.btn-warning:focus {
    background: rgba(245, 158, 11, 0.8) !important;
    border-color: var(--status-yellow) !important;
    color: #000 !important;
}

.btn-success,
button.btn-success {
    background: var(--status-green) !important;
    border-color: var(--status-green) !important;
    color: white !important;
    font-weight: 600 !important;
}

.btn-success:hover,
.btn-success:focus,
button.btn-success:hover,
button.btn-success:focus {
    background: rgba(16, 185, 129, 0.8) !important;
    border-color: var(--status-green) !important;
    color: white !important;
}

.btn-danger,
button.btn-danger {
    background: var(--status-red) !important;
    border-color: var(--status-red) !important;
    color: white !important;
}

.btn-danger:hover,
button.btn-danger:hover {
    background: rgba(239, 68, 68, 0.8) !important;
    border-color: var(--status-red) !important;
    color: white !important;
}

.btn-sm,
button.btn-sm {
    padding: 4px 12px !important;
    font-size: 15px !important;
}

.btn-xs,
button.btn-xs {
    padding: 2px 6px !important;
    font-size: 13px !important;
    min-height: auto !important;
    line-height: 1.2 !important;
}

.btn-rounded,
button.btn-rounded {
    border-radius: 20px !important;
}

/* Rounded Buttons in Groups - spezielle Behandlung */
.btn-group .btn-rounded,
.btn-group button.btn-rounded {
    border-radius: 20px !important;
}

.btn-group .btn-rounded:not(:first-child):not(:last-child),
.btn-group button.btn-rounded:not(:first-child):not(:last-child) {
    border-radius: 20px !important;
    margin-left: 4px !important;
}

/* Button Groups - höhere Spezifität für Bootstrap-Override */
.btn-group,
div.btn-group {
    display: inline-flex !important;
    vertical-align: middle !important;
    gap: 0 !important;
    align-items: stretch !important;
}

.btn-group > .btn,
.btn-group > button.btn {
    border-radius: 0 !important;
    margin-left: -1px !important;
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-group > .btn:first-child,
.btn-group > button.btn:first-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    margin-left: 0 !important;
}

.btn-group > .btn:last-child,
.btn-group > button.btn:last-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.btn-group > .btn-group:first-child > .btn:first-child,
.btn-group > .btn-group:first-child > button.btn:first-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.btn-group > .btn-group:last-child > .btn:last-child,
.btn-group > .btn-group:last-child > button.btn:last-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* Dropdown Toggle in Button Groups */
.btn-group .dropdown-toggle,
.btn-group button.dropdown-toggle {
    position: relative !important;
    padding-right: 32px !important;
}

.btn-group .dropdown-toggle::after,
.btn-group button.dropdown-toggle::after {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    border-top: 4px solid !important;
    border-right: 4px solid transparent !important;
    border-bottom: 0 !important;
    border-left: 4px solid transparent !important;
}

.btn-group .btn + .dropdown-toggle,
.btn-group button.btn + .dropdown-toggle {
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Text Colors in Buttons */
.btn.text-white {
    color: white !important;
}

.btn.text-secondary {
    color: var(--text-secondary) !important;
}

.font-weight-medium {
    font-weight: 500;
}

/* Dropdown - höhere Spezifität für Bootstrap-Override */
.dropdown-menu,
div.dropdown-menu {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    padding: 6px !important;
}

.dropdown-item,
a.dropdown-item {
    color: var(--text-secondary) !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.dropdown-item:hover,
a.dropdown-item:hover {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.dropdown-item.text-danger,
a.dropdown-item.text-danger {
    color: var(--status-red) !important;
}

.dropdown-item.text-danger:hover,
a.dropdown-item.text-danger:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    color: var(--status-red) !important;
}
.dropdown-item.text-warning,
a.dropdown-item.text-warning {
    color: var(--status-yellow) !important;
}

.dropdown-item.text-warning:hover,
a.dropdown-item.text-warning:hover {
    background: rgba(245, 158, 11, 0.1) !important;
    color: var(--status-yellow) !important;
}
.dropdown-item.text-success,
a.dropdown-item.text-success {
    color: var(--status-green) !important;
}


.dropdown-item.text-success:hover,
a.dropdown-item.text-success:hover {
    background: rgba(16, 185, 129, 0.1) !important;
    color: var(--status-green) !important;
}
/* ============================================
   FORM CONTROLS - Dark Theme
   ============================================ */

/* Base Form Elements */
input,
textarea,
select,
.form-control,
.form-select {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    transition: all 0.2s ease !important;
    font-size: 14px !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
    background: var(--bg-card) !important;
    border-color: var(--accent-primary) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: var(--text-muted) !important;
}

/* Select Elements */
select,
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a3a8af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    padding-right: 36px !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

select option,
.form-select option {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    padding: 8px !important;
}

/* DataTables Search & Length Controls */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    margin-left: 8px !important;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

/* DataTables Labels */
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_info {
    color: var(--text-secondary) !important;
}

/* DataTables Pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
    border-radius: 6px !important;
    margin: 0 2px !important;
    padding: 6px 12px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--bg-card) !important;
    border-color: var(--border-glow) !important;
    color: var(--text-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Form Labels */
label,
.form-label {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
}

/* Form Check (Checkboxes & Radio) */
.form-check-input {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    width: 18px !important;
    height: 18px !important;
}

.form-check-input:checked {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

.form-check-label {
    color: var(--text-secondary) !important;
}

/* Input Groups */
.input-group-text {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-muted) !important;
}

/* Form Floating Labels */
.form-floating > .form-control,
.form-floating > .form-select {
    height: calc(3.5rem + 2px) !important;
}

.form-floating > label {
    color: var(--text-muted) !important;
}

/* Custom Search Input (wie im Screenshot) */
.search-input,
input[type="search"],
input.form-control[type="search"] {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 20px !important;
    padding: 8px 16px 8px 40px !important;
}

/* Disabled States */
input:disabled,
textarea:disabled,
select:disabled,
.form-control:disabled,
.form-select:disabled {
    background: var(--bg-secondary) !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Read-only States */
input:read-only,
textarea:read-only,
.form-control:read-only {
    background: var(--bg-secondary) !important;
}

/* Valid/Invalid States */
.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: var(--status-green) !important;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--status-red) !important;
}

/* Small Form Controls */
.form-control-sm,
.form-select-sm,
.btn-sm + .form-control {
    padding: 4px 10px !important;
    font-size: 13px !important;
}

/* Large Form Controls */
.form-control-lg,
.form-select-lg {
    padding: 12px 16px !important;
    font-size: 16px !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
}

h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
}

.text-muted {
    color: var(--text-muted) !important;
}

/* Links - Angepasst an Dashboard Design */
a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid transparent;
}

a:hover {
    color: var(--text-primary);
    /* border-bottom-color: var(--text-primary); */
}

/* Links in Tabellen - etwas auffälliger */
table a,
.table a {
    color: var(--text-primary);
    font-weight: 500;
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
}

table a:hover,
.table a:hover {
    color: var(--accent-primary);
    /* border-bottom-color: var(--accent-primary); */
}

/* Wichtige Links (z.B. in Headern) - mit Accent-Farbe */
a.text-primary,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: var(--text-primary);
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
}

a.text-primary:hover,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: var(--accent-primary);
    /* border-bottom-color: var(--accent-primary); */
}

/* Alternative: Links mit Orange (Logo-Farbe) */
a.link-accent {
    color: #FA9B0C;
    border-bottom-color: rgba(250, 155, 12, 0.3);
}

a.link-accent:hover {
    color: #ffb84d;
    /* border-bottom-color: #ffb84d; */
}

.text-decoration-none {
    text-decoration: none;
}

/* Row & Col */
.row {
    margin-left: -8px;
    margin-right: -8px;
}

.row > * {
    padding-left: 8px;
    padding-right: 8px;
}

.mb-3 {
    margin-bottom: 16px;
}

.pt-1 {
    padding-top: 4px;
}

.float-end {
    float: right;
}

.align-middle {
    vertical-align: middle;
}

/* Table Light Override */
.table-light {
    background: var(--bg-secondary) !important;
}

.table-light th {
    background: var(--bg-secondary) !important;
    color: var(--text-muted) !important;
}

/* Badge */
.badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.badge.bg-success {
    background: var(--status-green-glow) !important;
    color: white !important;
}

.badge.bg-danger {
    background: var(--status-red-glow) !important;
    color: white !important;
}

.badge.bg-warning {
    background: var(--status-yellow-glow) !important;
    color: white !important;
}

.badge.bg-info {
    background: var(--status-blue-glow) !important;
    color: white !important;
}

/* ============================================
   TEST PAGE STYLES (test_buttongroups.html)
   ============================================ */
.test-container {
    max-width: 1200px;
    margin: 0 auto;
}

.test-section {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 24px;
    margin-bottom: 24px;
}

.test-section h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
}

.test-section h3 {
    font-size: 16px;
    font-weight: 500;
    margin-top: 24px;
    margin-bottom: 12px;
    color: var(--text-secondary);
}

.test-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.test-label {
    min-width: 200px;
    font-size: 13px;
    color: var(--text-muted);
}

.test-code {
    flex: 1;
    min-width: 300px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-secondary);
    overflow-x: auto;
}

.test-code pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.test-code code {
    color: var(--text-primary);
}

/* ============================================
   NAVIGATION TABS (Bootstrap Tabs)
   ============================================ */

/* Navigation Tabs - Kompaktere Darstellung */
.nav-tabs {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.nav-tabs .nav-link {
    color: var(--text-secondary);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    font-size: 16px;
    transition: all 0.2s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
    background: var(--bg-secondary);
}

.nav-tabs .nav-link.active {
    color: var(--text-primary);
    background: transparent;
    border-bottom-color: var(--accent-primary);
    font-weight: 600;
}

/* Navigation Tabs - Text in Links kleiner machen */
.nav-tabs .nav-link h4 {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
    color: inherit;
}

.nav-tabs .nav-link.active h4 {
    font-weight: 600;
}

/* Tab Content - Card-Hintergrund */
.tab-content {
    position: relative;
}

.tab-content .tab-pane {
    display: none;
}

.tab-content .tab-pane.active {
    display: block;
}

/* Tab-Content-Bereiche mit Card-Hintergrund */
.tab-content .tab-pane > div.p-3,
.tab-content .tab-pane > .p-3 {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    margin-bottom: 20px;
}

/* Tab-Content ohne zusätzliches Padding, wenn bereits p-3 vorhanden */
.tab-content .tab-pane > div.p-3 > *:first-child {
    margin-top: 0;
}

.tab-content .tab-pane > div.p-3 > *:last-child {
    margin-bottom: 0;
}

/* Tab-Content über volle Seitenbreite */
.tab-content-fullwidth {
    margin-left: -24px;
    margin-right: -24px;
    width: calc(100% + 48px);
    position: relative;
}

/* Tab-Content-Bereiche mit Card-Hintergrund für Fullwidth */
.tab-content-fullwidth .tab-pane > div.p-3,
.tab-content-fullwidth .tab-pane > .p-3 {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    margin-bottom: 0;
    padding: 24px 24px;
}

/* Für Container-fluid innerhalb von page-wrapper */
body.has-sidebar3 .page-wrapper .container-fluid .tab-content-fullwidth {
    margin-left: -24px;
    margin-right: -24px;
    width: calc(100% + 48px);
}

/* Tab-Content über volle Höhe */
.tab-content-fullheight {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 200px); /* Abzüglich Header/Navigation */
}

.tab-content-fullheight .tab-pane {
    display: none;
    flex: 1;
    min-height: 0;
}

.tab-content-fullheight .tab-pane.active {
    display: flex;
    flex-direction: column;
}

/* Tab-Content-Bereiche mit Card-Hintergrund für Fullheight */
.tab-content-fullheight .tab-pane > div.p-3,
.tab-content-fullheight .tab-pane > .p-3 {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    margin-bottom: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}


.tc_muted {
    color: var(--text-muted);
    font-weight: 300;
    font-size: 0.9rem;
}
.font_thin {
    font-weight: 300;
}
.font_bold {
    font-weight: 600;
}

.font_medium {
    font-weight: 500;
}

/* Responsive: Auf kleineren Bildschirmen normale Breite */
@media (max-width: 768px) {
    .tab-content-fullwidth {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    
    .tab-content-fullwidth .tab-pane > div.p-3,
    .tab-content-fullwidth .tab-pane > .p-3 {
        border-radius: 12px;
        border-left: 1px solid var(--border-color);
        border-right: 1px solid var(--border-color);
        padding: 16px;
    }
    
    body.has-sidebar3 .page-wrapper .container-fluid .tab-content-fullwidth {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    
    .tab-content-fullheight {
        min-height: calc(100vh - 150px);
    }
}

/* ============================================
   BUD-003: Earned Value Dashboard
   ============================================ */

/* Performance Gauges */
.perf-gauges {
    grid-column: span 6;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.gauge-item {
    text-align: center;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 12px;
}

.gauge-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 12px;
}

.gauge-container svg {
    transform: rotate(-90deg);
}

.gauge-bg {
    fill: none;
    stroke: var(--bg-card);
    stroke-width: 10;
}

.gauge-fill {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
}

.gauge-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.gauge-value .number {
    font-size: 28px;
    font-weight: 700;
}

.gauge-label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.gauge-desc {
    font-size: 11px;
    color: var(--text-muted);
}

/* Budget Summary */
.budget-summary {
    grid-column: span 6;
}

.budget-row {
    display: flex;
    justify-content: space-between;
    padding: 14px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 8px;
}

.budget-label {
    color: var(--text-secondary);
}

.budget-value {
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.budget-value.negative {
    color: var(--status-red);
}

.budget-value.positive {
    color: var(--status-green);
}

/* EVM Chart */
.evm-chart {
    grid-column: span 8;
}

.chart-svg {
    width: 100%;
    height: 220px;
}

.chart-line {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
}

.chart-legend {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-top: 12px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.legend-dot {
    width: 12px;
    height: 3px;
    border-radius: 2px;
}

/* Variance */
.variance {
    grid-column: span 4;
}

.var-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 8px;
}

.var-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.var-content {
    flex: 1;
}

.var-label {
    font-size: 12px;
    color: var(--text-muted);
}

.var-value {
    font-size: 20px;
    font-weight: 700;
}

/* By Workstream */
.by-ws {
    grid-column: span 12;
    overflow-x: auto;
}

.idx-good {
    color: var(--status-green);
}

.idx-warn {
    color: var(--status-yellow);
}

.idx-bad {
    color: var(--status-red);
}

/* ============================================
   BUD-004: Cost by Workstream Dashboard
   ============================================ */

.ws-table {
    width: 100%;
    border-collapse: collapse;
}

.ws-table th {
    text-align: left;
    padding: 12px 8px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-color);
}

.ws-table td {
    padding: 12px 8px;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.ws-table tr:hover {
    background: var(--bg-secondary);
}

.ws-name {
    font-weight: 500;
}

.ws-budget {
    font-family: 'JetBrains Mono', monospace;
}

.progress-bar {
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
    width: 100px;
}

.progress-fill {
    height: 100%;
    border-radius: 3px;
}

.progress-fill.good {
    background: var(--status-green);
}

.progress-fill.warning {
    background: var(--status-yellow);
}

.progress-fill.critical {
    background: var(--status-red);
}

.variance {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.variance.positive {
    background: rgba(239, 68, 68, 0.15);
    color: var(--status-red);
}

.variance.negative {
    background: rgba(16, 185, 129, 0.15);
    color: var(--status-green);
}

.variance.neutral {
    background: var(--bg-secondary);
    color: var(--text-muted);
}

.pie-chart {
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

.legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.summary-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.summary-card {
    text-align: center;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.summary-value {
    font-size: 24px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}

.summary-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ============================================
   BUD-005: Vendor Cost Dashboard
   ============================================ */

.vendor-row {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    gap: 16px;
}

.donut-placeholder {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 20px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* ============================================
   BUD-006: Travel & Expense Dashboard
   ============================================ */

.category-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.trend-bar {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 100px;
}

.trend-month {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

/* ============================================
   BUD-007: License Cost Dashboard
   ============================================ */

.license-row {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.gauge {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 12px solid var(--bg-secondary);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   TIM-002: Timeline & Gantt Dashboard
   ============================================ */

/* Schedule Health */
.schedule-health {
    grid-column: span 3;
    text-align: center;
}

.spi-gauge {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 16px;
}

.spi-gauge svg {
    transform: rotate(-90deg);
}

.spi-gauge-bg {
    fill: none;
    stroke: var(--bg-secondary);
    stroke-width: 12;
}

.spi-gauge-fill {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease;
}

.spi-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.spi-value .number {
    font-size: 36px;
    font-weight: 700;
}

.spi-value .label {
    font-size: 12px;
    color: var(--text-muted);
}

.schedule-metrics {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.schedule-metric {
    flex: 1;
    text-align: center;
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.schedule-metric .value {
    font-size: 20px;
    font-weight: 600;
}

.schedule-metric .label {
    font-size: 11px;
    color: var(--text-muted);
}

/* Phase Progress (TIM-002 variant) */
.phase-progress {
    grid-column: span 9;
}

.phases-container {
    display: flex;
    gap: 8px;
}

.phase-item {
    flex: 1;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.phase-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.phase-item.completed::before {
    background: var(--status-blue);
}

.phase-item.current::before {
    background: var(--status-green);
    animation: pulse 2s infinite;
}

.phase-item.upcoming::before {
    background: var(--text-muted);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.phase-name {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.phase-dates {
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.phase-progress-bar {
    height: 6px;
    background: var(--bg-card);
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}

.phase-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.phase-item.completed .phase-progress-fill {
    background: var(--status-blue);
    width: 100%;
}

.phase-item.current .phase-progress-fill {
    background: var(--status-green);
}

.phase-item.upcoming .phase-progress-fill {
    background: var(--text-muted);
    width: 0;
}

/* Gantt Chart */
.gantt-card {
    grid-column: span 12;
}

.gantt-container {
    overflow-x: auto;
    padding: 12px 0;
}

.gantt-header {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.gantt-header-task {
    width: 200px;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.gantt-header-timeline {
    flex: 1;
    display: flex;
}

.gantt-month {
    flex: 1;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.gantt-row {
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.gantt-task-name {
    width: 200px;
    flex-shrink: 0;
    font-size: 13px;
    padding-right: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gantt-task-name .mdi {
    font-size: 16px;
}

.gantt-timeline {
    flex: 1;
    height: 24px;
    position: relative;
    display: flex;
}

.gantt-bar {
    position: absolute;
    height: 20px;
    border-radius: 4px;
    top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: white;
    font-weight: 500;
}

.gantt-bar.completed {
    background: var(--status-blue);
}

.gantt-bar.in-progress {
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
}

.gantt-bar.planned {
    background: var(--text-muted);
}

.gantt-bar.critical {
    background: var(--status-red);
    box-shadow: 0 0 10px var(--status-red-glow);
}

.gantt-today {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--status-red);
    z-index: 10;
}

.gantt-today::before {
    content: 'Heute';
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--status-red);
}

/* Critical Path */
.critical-path {
    grid-column: span 4;
}

.cp-item {
    display: flex;
    gap: 12px;
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 8px;
    border-left: 3px solid var(--status-red);
}

.cp-item .days {
    min-width: 50px;
    text-align: center;
}

.cp-item .days .value {
    font-size: 20px;
    font-weight: 700;
    color: var(--status-red);
}

.cp-item .days .label {
    font-size: 10px;
    color: var(--text-muted);
}

.cp-item .info .name {
    font-size: 14px;
    font-weight: 500;
}

.cp-item .info .meta {
    font-size: 12px;
    color: var(--text-muted);
}

/* Upcoming Deadlines */
.deadlines {
    grid-column: span 4;
}

.deadline-item {
    display: flex;
    gap: 12px;
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 8px;
}

.deadline-date {
    min-width: 60px;
    text-align: center;
    padding: 8px;
    background: var(--bg-card);
    border-radius: 6px;
}

.deadline-date .day {
    font-size: 20px;
    font-weight: 700;
}

.deadline-date .month {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.deadline-info .name {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.deadline-info .owner {
    font-size: 12px;
    color: var(--text-muted);
}

/* Baseline Comparison */
.baseline {
    grid-column: span 4;
}

.baseline-stat {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 8px;
}

.baseline-stat .label {
    color: var(--text-secondary);
}

.baseline-stat .value {
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.baseline-stat .value.negative {
    color: var(--status-red);
}

.baseline-stat .value.positive {
    color: var(--status-green);
}

/* ============================================
   TIM-003: Gantt Overview Dashboard
   ============================================ */

/* Gantt Specific Styles (TIM-003 variant) */
.gantt-task-col {
    width: 250px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.gantt-timeline {
    display: flex;
    flex: 1;
    min-width: 800px;
}

.gantt-month.current {
    background: var(--accent-glow);
    color: var(--accent-primary);
}

.gantt-row:hover {
    background: var(--bg-secondary);
}

.gantt-task-name .indent {
    width: 16px;
}

.gantt-task-name .name {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-task-name.phase {
    font-weight: 600;
    color: var(--accent-primary);
}

.gantt-bars {
    display: flex;
    flex: 1;
    min-width: 800px;
    position: relative;
    height: 24px;
}

.gantt-bar.at-risk {
    background: var(--status-yellow);
}

.gantt-bar.delayed {
    background: var(--status-red);
}

.gantt-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px 0 0 4px;
}

/* Summary Stats */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.stat-card {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    border: 1px solid var(--border-color);
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.stat-card.blue .stat-value {
    color: var(--status-blue);
}

.stat-card.green .stat-value {
    color: var(--status-green);
}

.stat-card.yellow .stat-value {
    color: var(--status-yellow);
}

.stat-card.red .stat-value {
    color: var(--status-red);
}

/* Legend (TIM-003 variant) */
.legend {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.legend-color {
    width: 16px;
    height: 12px;
    border-radius: 3px;
}

.legend-color.completed {
    background: var(--status-blue);
}

.legend-color.in-progress {
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
}

.legend-color.planned {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.legend-color.at-risk {
    background: var(--status-yellow);
}

.legend-color.delayed {
    background: var(--status-red);
}

/* ============================================
   TIM-004: Delay Analysis Dashboard
   ============================================ */

.delay-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    gap: 16px;
}

.delay-bar {
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 500;
}

.cause-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* ============================================
   TIM-005: Sprint/Iteration Dashboard
   ============================================ */

/* Sprint Hero */
.sprint-hero {
    text-align: center;
    padding: 24px;
}

.sprint-number {
    font-size: 64px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sprint-dates {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 8px;
}

.sprint-progress {
    margin-top: 16px;
}

.progress-bar-container {
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 4px;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Velocity Chart */
.velocity-chart {
    height: 200px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 16px 0;
}

.velocity-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.velocity-bar .bar {
    width: 100%;
    background: var(--accent-glow);
    border-radius: 4px 4px 0 0;
    transition: height 0.3s;
}

.velocity-bar .bar.current {
    background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary));
}

.velocity-bar .bar.committed {
    border: 2px dashed var(--status-yellow);
    background: transparent;
    margin-top: -100%;
}

.velocity-bar .label {
    font-size: 11px;
    color: var(--text-muted);
}

.velocity-bar .value {
    font-size: 12px;
    font-weight: 600;
}

/* Story Points */
.sp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.sp-card {
    text-align: center;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.sp-value {
    font-size: 32px;
    font-weight: 700;
}

.sp-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 4px;
}

.sp-card.committed .sp-value {
    color: var(--status-blue);
}

.sp-card.completed .sp-value {
    color: var(--status-green);
}

.sp-card.remaining .sp-value {
    color: var(--status-yellow);
}

/* Burndown */
.burndown-chart {
    height: 180px;
    position: relative;
    padding: 16px 0;
}

.burndown-chart svg {
    width: 100%;
    height: 100%;
}

.burndown-ideal {
    stroke: var(--text-muted);
    stroke-dasharray: 4, 4;
    fill: none;
    stroke-width: 2;
}

.burndown-actual {
    stroke: var(--accent-primary);
    fill: none;
    stroke-width: 2;
    filter: drop-shadow(0 0 4px var(--accent-primary));
}

/* Task Board Summary */
.board-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.board-column {
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    text-align: center;
}

.board-column .count {
    font-size: 28px;
    font-weight: 700;
}

.board-column .title {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 4px;
}

.board-column.todo .count {
    color: var(--text-secondary);
}

.board-column.progress .count {
    color: var(--status-blue);
}

.board-column.review .count {
    color: var(--status-yellow);
}

.board-column.done .count {
    color: var(--status-green);
}

/* Story List */
.story-list {
    max-height: 300px;
    overflow-y: auto;
}

.story-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 8px;
}

.story-priority {
    width: 4px;
    height: 32px;
    border-radius: 2px;
}

.story-priority.high {
    background: var(--status-red);
}

.story-priority.medium {
    background: var(--status-yellow);
}

.story-priority.low {
    background: var(--status-green);
}

.story-info {
    flex: 1;
}

.story-title {
    font-size: 13px;
    font-weight: 500;
}

.story-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.story-sp {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    background: var(--accent-glow);
    border-radius: 4px;
    color: var(--accent-primary);
}

.story-status {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
}

.story-status.done {
    background: rgba(16, 185, 129, 0.15);
    color: var(--status-green);
}

.story-status.progress {
    background: rgba(59, 130, 246, 0.15);
    color: var(--status-blue);
}

.story-status.todo {
    background: var(--bg-secondary);
    color: var(--text-muted);
}

.text-decoration-none {
    text-decoration: none !important;
}

/* ============================================
   BUTTON GROUP - Einheitliche Höhen & Styles
   ============================================ */
.btn-group .btn,
.btn-group a.btn,
.btn-group button.btn {
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

.btn-group .btn.dropdown-toggle {
    height: 38px !important;
    padding-right: 30px !important;
}

/* Mehr Abstand zwischen Text und Dropdown-Icon */
.btn-group .btn.dropdown-toggle::after,
.btn.dropdown-toggle::after {
    margin-left: 1em !important;
}

/* Standardmäßig keine runden Ecken für Buttons in Gruppen */
.btn-group .btn {
    border-radius: 0 !important;
}

/* Erster sichtbarer Button: Runde Ecken links */
.btn-group > .btn:first-of-type:not([style*="display: none"]),
.btn-group > button.btn:first-of-type:not([style*="display: none"]),
.btn-group > a.btn:first-of-type:not([style*="display: none"]) {
    border-top-left-radius: 0.5rem !important;
    border-bottom-left-radius: 0.5rem !important;
}

/* Letzter Button im DOM (Status): Immer runde Ecken rechts */
.btn-group > .btn:last-of-type,
.btn-group > button.btn:last-of-type,
.btn-group > a.btn:last-of-type {
    border-top-right-radius: 0.5rem !important;
    border-bottom-right-radius: 0.5rem !important;
}

/* Auch für disabled Buttons */
.btn-group .btn:disabled,
.btn-group .btn[disabled] {
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* btn-outline-secondary für alle States */
.btn-outline-secondary,
.btn.btn-outline-secondary,
button.btn-outline-secondary,
a.btn-outline-secondary {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary:not(:disabled):not(.disabled):active {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Für btn-light-secondary auch grau machen (Fallback) */
.btn-light-secondary,
.btn.btn-light-secondary {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.btn-light-secondary:hover,
.btn-light-secondary:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   MODAL - Dark Theme
   ============================================ */
.modal-content {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
    color: var(--text-primary) !important;
}

.modal-header {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 16px 20px !important;
}

.modal-header .modal-title,
.modal-header h5,
.modal-header h4 {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: 0.7 !important;
}

.modal-header .btn-close:hover {
    opacity: 1 !important;
}

.modal-body {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    padding: 20px !important;
}

.modal-body label,
.modal-body .form-label {
    color: var(--text-secondary) !important;
}

.modal-footer {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-color) !important;
    border-radius: 0 0 12px 12px !important;
    padding: 16px 20px !important;
}

/* Modal Backdrop */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

.modal-backdrop.show {
    opacity: 1 !important;
}

/* ============================================
   BOOTSTRAP BACKGROUND UTILITIES - Dark Theme
   ============================================ */
.bg-warning {
    background: rgba(245, 158, 11, 0.3) !important;
    border: 1px solid #f59e0b50 !important;
    color: var(--text-primary) !important;
}

.bg-success {
    background: rgba(16, 185, 129, 0.3) !important;
    border: 1px solid #10b98150 !important;
    color: var(--text-primary) !important;
}

.bg-danger {
    background: rgba(239, 68, 68, 0.3) !important;
    border: 1px solid #ef444450 !important;
    color: var(--text-primary) !important;
}

.bg-info {
    background: rgba(59, 130, 246, 0.3) !important;
    border: 1px solid #3b82f650 !important;
    color: var(--text-primary) !important;
}

.bg-primary {
    background: rgba(99, 102, 241, 0.3) !important;
    border: 1px solid #6366f150 !important;
    color: var(--text-primary) !important;
}

.bg-secondary {
    background: rgba(107, 114, 128, 0.3) !important;
    border: 1px solid #6b728050 !important;
    color: var(--text-primary) !important;
}

.bg-light {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: var(--text-primary) !important;
}

.bg-dark {
  
     background:    rgba(103, 103, 103, 0.3) !important;
      border: 1px solid rgba(0, 0, 0, 0.5) !important;
      color: var(--text-primary) !important;
}

/* ============================================
   LIST GROUPS - Dark Theme
   ============================================ */
.list-group {
    background: transparent !important;
    border-radius: 8px !important;
}

.list-group-item {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.list-group-item:hover {
    background: var(--bg-secondary) !important;
}

.list-group-flush .list-group-item {
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
}

.list-group-flush .list-group-item:first-child {
    border-top: 0 !important;
}

.list-group-flush .list-group-item:last-child {
    border-bottom: 0 !important;
}

/* ============================================
   ADDITIONAL CARD STYLES - Dark Theme
   ============================================ */
.card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.card-header {
    /* background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important; */
    color: var(--text-primary) !important;
}

.card-body {
    /* background: var(--bg-card) !important; */
    color: var(--text-primary) !important;
}

.card-footer {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.card-title {
    color: var(--text-primary) !important;
}

.card-text {
    color: var(--text-secondary) !important;
}

/* Shadow overrides for dark theme */
.shadow-sm {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.shadow {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

.shadow-lg {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* bg-opacity overrides */
.bg-danger.bg-opacity-10,
.bg-warning.bg-opacity-10,
.bg-success.bg-opacity-10,
.bg-info.bg-opacity-10,
.bg-primary.bg-opacity-10 {
    background: var(--bg-secondary) !important;
}

/* ============================================
   PROGRESS BARS - Dark Theme
   ============================================ */
.progress {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    height: 20px !important;
}

.progress-bar {
    border-radius: 4px !important;
}

/* Progress bar colors */
.progress-bar.bg-success {
    background: var(--status-green) !important;
    border: none !important;
}

.progress-bar.bg-danger {
    background: var(--status-red) !important;
    border: none !important;
}

.progress-bar.bg-warning {
    background: var(--status-yellow) !important;
    border: none !important;
}

.progress-bar.bg-info {
    background: var(--status-blue) !important;
    border: none !important;
}

.progress-bar.bg-primary {
    background: var(--accent-primary) !important;
    border: none !important;
}